/* ============================================================================
   kit/kit.css — shared base + utilities + reveal classes
   Load AFTER kit/tokens.css and BEFORE a page's own inline <style>.
   Pairs with reveal.js (toggles .is-in) and nav-autohide.js (toggles .is-hidden).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── layout ──────────────────────────────────────────────────────────────── */
.inner {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── label / eyebrow voice ──────────────────────────────────────────────────
   Uppercase, tracked. Pages may set their own size/position; this guarantees
   the typeface + tracking are consistent everywhere. */
.eyebrow,
.label {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 13px;
  color: var(--ink-faint);
}
/* the section-opener accent bar: eyebrow → rule → title */
.geo-line {
  display: block;
  width: 40px;
  height: 3px;
  background: var(--accent);
  margin: 0 0 var(--sp-5);
}

/* ── section openers — a menu, not a default ─────────────────────────────────
   An eyebrow earns its place only when the heading doesn't say what the
   section is; if the title is descriptive, open with the title. Pick ONE
   opener per site (record it in the brief) and hold it. The classic
   .eyebrow + .geo-line combo above is one option among these — use sparingly. */

/* running hairline after the label — quiet wayfinding, spends no accent.
   The literary default; .eyebrow--flank is its centered form. */
.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.eyebrow--rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* centered chapter head — hairlines both sides, for centered sections */
.eyebrow--flank {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.eyebrow--flank::before,
.eyebrow--flank::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* margin tick — the accent turned sideways: an editor's mark, not an underline */
.eyebrow--tick {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow--tick::before {
  content: "";
  width: 3px;
  height: 1.05em;
  background: var(--accent);
}

/* handwritten aside — the anti-eyebrow: --hand voice, lowercase, one warm word.
   Special uses only (once a page, light mood — --hand rules in CONVENTIONS §2). */
.eyebrow--hand {
  font-family: var(--hand);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 22px;
  color: var(--accent);
}

/* no eyebrow at all — a hairline under the title itself does the settling */
.title-rule {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}

/* ── ghost button (transparent, thin warm border; deepens/fills on hover) ──── */
.btn {
  display: inline-block;
  font-family: var(--label);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--accent);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.btn:hover, .btn:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
}
/* solid variant — fills with the accent (or ink) on hover */
.btn--solid {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.btn--solid:hover, .btn--solid:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

/* ── button voices — like the openers, a menu, not a default ─────────────────
   Pick the voice(s) in the site's brief. The ghost above is one option. */

/* underline CTA — no box at all; the quietest voice, for secondary actions
   and text-heavy pages where a boxed button would shout */
.btn--line {
  padding: 2px 1px 7px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 0;
  color: var(--ink-soft);
}
.btn--line:hover, .btn--line:focus-visible {
  color: var(--ink);
  border-color: var(--accent);
}

/* book voice — serif italic, a line of the text that happens to be a door.
   Give the trailing arrow a <span class="ar">→</span> so it can slide. */
.btn--book {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 19px;
  padding: 0;
  border: 0;
  color: var(--ink);
}
.btn--book .ar {
  display: inline-block;
  margin-left: 7px;
  transition: transform var(--dur) var(--ease);
}
.btn--book:hover, .btn--book:focus-visible { color: var(--accent); }
.btn--book:hover .ar, .btn--book:focus-visible .ar { transform: translateX(7px); }

/* crop marks — printer's marks instead of a border; corners expand on hover.
   Of the press, not the app store. Signature material: use very sparingly,
   one primary moment, not a page of them. */
.btn--marks {
  position: relative;
  padding: 13px 26px;
  border: 0;
  border-radius: 0;
  color: var(--ink);
}
.btn--marks::before, .btn--marks::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  transition: inset var(--dur) var(--ease);
}
.btn--marks::before {
  top: 0; left: 0;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
}
.btn--marks::after {
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}
.btn--marks:hover, .btn--marks:focus-visible { color: var(--accent); }
.btn--marks:hover::before, .btn--marks:focus-visible::before { top: -5px; left: -5px; }
.btn--marks:hover::after,  .btn--marks:focus-visible::after  { bottom: -5px; right: -5px; }

/* sweep — the ghost that fills, accent sweeping left to right. Reads as a
   compute load: for computery/technical sites, the one emphatic primary.
   Wrap the label: <a class="btn btn--sweep"><span>…</span></a>. */
.btn--sweep {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.btn--sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.btn--sweep span {
  position: relative;
  transition: color var(--dur) var(--ease);
}
.btn--sweep:hover, .btn--sweep:focus-visible { color: var(--accent); }
.btn--sweep:hover::before, .btn--sweep:focus-visible::before { transform: scaleX(1); }
.btn--sweep:hover span, .btn--sweep:focus-visible span { color: var(--paper); }

/* ── glass panel (nav material) ─────────────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
}

/* ── text-halo: keep light type legible over imagery WITHOUT a box ─────────── */
.text-halo {
  text-shadow: 0 1px 2px rgba(8, 10, 16, 0.5), 0 2px 26px rgba(8, 10, 16, 0.55);
}

/* ── focus ──────────────────────────────────────────────────────────────────── */
:focus-visible { outline: 1.5px solid var(--focus); outline-offset: 2px; }

/* ── scroll-hide nav hook (nav-autohide.js toggles .is-hidden) ─────────────── */
[data-autohide] {
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur) ease;
  will-change: transform;
}
[data-autohide].is-hidden {
  transform: translateY(calc(-100% - 30px));
  opacity: 0;
  pointer-events: none;
}

/* ── reveals (reveal.js toggles .is-in) — reach for the subtle ones first ────
   Budget: CONVENTIONS §5 — content visible by default, a few earned moments.
   SUBTLE (spend little of the budget; prefer these):
     .reveal-fade     opacity only, nothing travels — the workhorse
     .reveal-ink      ink deepens into the paper; text never hides
     .reveal-focus    a focus pull, no travel
     .reveal-draw     a rule draws itself left-to-right (apply to .geo-line or
                      a bare hairline span — it animates transform only)
   STRONG (read as effects — one or two per page, if any):
     .reveal-quote    blur-emerge, for big pull-quotes
     .reveal-up       fade-up, for grids/lists
     .reveal-wipe     print-roller wipe, for images/figures
     .reveal-develop  the image develops (saturation/contrast settle), for
                      photography on the cinematic sites
   Wrap a group in .reveal-stagger to cascade children (must justify itself). */
.reveal-quote {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(12px);
  transition: opacity 1s var(--ease-io), filter 1s var(--ease-io), transform 1s var(--ease-io);
  will-change: opacity, filter, transform;
}
.reveal-quote.is-in { opacity: 1; filter: blur(0); transform: none; }

.reveal-up {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease-io), transform 0.55s var(--ease-io);
  will-change: opacity, transform;
}
.reveal-up.is-in { opacity: 1; transform: none; }

.reveal-fade {
  opacity: 0;
  transition: opacity 0.9s var(--ease-io);
}
.reveal-fade.is-in { opacity: 1; }

.reveal-ink {
  color: color-mix(in srgb, var(--ink) 25%, transparent);
  transition: color 1.6s ease;
}
.reveal-ink.is-in { color: var(--ink); }

.reveal-focus {
  filter: blur(5px);
  opacity: 0.35;
  transition: filter 1s var(--ease-io), opacity 1s var(--ease-io);
}
.reveal-focus.is-in { filter: blur(0); opacity: 1; }

.reveal-draw {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-io);
}
.reveal-draw.is-in { transform: scaleX(1); }

.reveal-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease-io);
}
.reveal-wipe.is-in { clip-path: inset(0 0 0 0); }

.reveal-develop {
  filter: saturate(0.45) contrast(0.85) brightness(1.1);
  transition: filter 1.8s ease;
}
.reveal-develop.is-in { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-quote, .reveal-up, .reveal-fade, .reveal-focus {
    transition: opacity 0.4s ease; transform: none; filter: none;
  }
  .reveal-ink { transition: none; color: inherit; }
  .reveal-draw { transition: none; transform: none; }
  .reveal-wipe { transition: none; clip-path: none; }
  .reveal-develop { transition: none; filter: none; }
  [data-autohide], [data-autohide].is-hidden { transition: opacity 0.3s ease; transform: none; }
}