/* Web: states and building blocks that a fixed canvas has no use for.
   Requires core/tokens.css and web/scale.css. */

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(184, 83, 42, 0.18); }

/* Focus, never remove */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }

/* Links */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
.link-text { border-bottom: var(--border-rule) solid var(--rule); padding-bottom: 1px; }
.link-text:hover { border-bottom-color: var(--accent); }

/* Link row: contact list, navigation */
.link-list { display: flex; flex-direction: column; border-top: var(--border-rule) solid var(--rule); }
.link-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 20px 0; border-bottom: var(--border-rule) solid var(--rule);
  font-family: var(--ff-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1;
}
.link-row .meta { font-family: var(--ff-body); font-size: var(--fs-micro); color: var(--inkMute); }
@media (max-width: 760px) { .link-row { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* Buttons, hit area at least 44 px */
.btn {
  font: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
  padding: 13px 26px; min-height: 44px;
  border: var(--border-rule) solid var(--ink); border-radius: var(--radius-md);
  background: var(--ink); color: var(--paper);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--secondary:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--text { background: none; border: 0; color: var(--accent); font-style: italic; padding: 13px 4px; }
.btn:disabled { background: transparent; color: var(--inkMute); border-color: var(--rule); cursor: not-allowed; }

/* Input field */
.field {
  font: inherit; font-size: var(--fs-small);
  padding: 14px 16px; min-height: 44px; box-sizing: border-box;
  border: var(--border-rule) solid var(--rule); border-radius: var(--radius-md);
  background: var(--paper); color: var(--ink);
}
.field::placeholder { color: var(--inkMute); }

/* Disclosure, so legal text stays on the page */
details summary::-webkit-details-marker { display: none; }
.disclosure > summary {
  list-style: none; cursor: pointer; padding: 16px 0;
  border-top: var(--border-rule) solid var(--rule);
  border-bottom: var(--border-rule) solid var(--rule);
  font-size: 16px; color: var(--inkSoft);
}
.disclosure > .body {
  padding: 18px 0 22px; border-bottom: var(--border-rule) solid var(--rule);
  font-size: var(--fs-micro); line-height: 1.7; color: var(--inkSoft); max-width: var(--measure-body);
}

/* Inverted band, the web counterpart to a dark slide frame.
   At most one per page, always full bleed.

   The five band tokens exist so dark.css can flip the band without touching
   any rule below: in dark mode the page is dark and the band is the light one. */
.band-dark {
  --band-bg:    var(--dark);
  --band-ink:   var(--darkInk);
  --band-body:  var(--onDark-body);
  --band-mute:  var(--onDark-mute);
  --band-rule:  var(--onDark-rule);
  --band-accent: var(--onDark-accent);

  background: var(--band-bg);
  color: var(--band-ink);
}
.band-dark .t-body,
.band-dark .t-lede { color: var(--band-body); }
.band-dark .t-mute { color: var(--band-mute); }
.band-dark .t-eyebrow { color: var(--band-accent); }
.band-dark .link-list,
.band-dark .link-row,
.band-dark .disclosure > summary { border-color: var(--band-rule); }

/* Image placeholder, until a real photo exists */
.placeholder {
  border: var(--border-rule) solid var(--rule); border-radius: var(--radius-md);
  background: repeating-linear-gradient(135deg, var(--paperAlt), var(--paperAlt) 7px, var(--paper) 7px, var(--paper) 14px);
  display: flex; align-items: flex-end; padding: 20px; box-sizing: border-box;
}
.placeholder > .label {
  font-family: var(--ff-mono); font-size: 13px; color: var(--inkMute);
  background: var(--paper); padding: 6px 9px; border-radius: var(--radius-sm);
}