/* ────────────────────────────────────────────────────────────────────────────
   SCAN SHOWCASE — Paper & Signal (SITE-DESIGN-RULES.md v2 governs).
   Square corners · hairlines · no cards-as-boxes · one red, in drops.
   Tokens are CONSUMED from tokens.css (a provenance-headed copy of the site
   repo's single source — see ART-DIRECTION.md §7). Nothing below redeclares
   a token that file owns.
   ──────────────────────────────────────────────────────────────────────────── */
@import url("/assets/tokens.css");

:root {
  /* section-owned tokens — values tokens.css does NOT own (plate geometry and
     the staircase step are per-surface decisions, like shelf.css --stair-step) */
  --plate-room: min(80vh, 900px);
  --plate-object: min(62vh, 640px);
  --stair-step: clamp(1.1rem, 4.5vw, 4.5rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: light; scroll-behavior: smooth; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* film grain — what keeps the paper alive (site.css pattern, settled values) */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::after { opacity: 0.07; }

::selection { background: var(--ink); color: var(--paper); }

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

strong { font-weight: 600; }

.shell { max-width: 1280px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ── nav ─────────────────────────────────────────────────────────────────── */

.site-nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-nav .shell { display: flex; align-items: center; gap: 20px; height: 60px; }
.brand {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--ink);
}
.brand::before { content: "●"; color: var(--red); font-size: 8px; margin-right: 9px; vertical-align: 2px; }
.nav-tag {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  color: var(--faint);
}
.theme-toggle {
  font-family: var(--font-mono); font-size: 15px; line-height: 1;
  color: var(--ink); background: transparent;
  border: 1px solid var(--ink);
  min-height: 44px; min-width: 44px; /* touch floor — WCAG 2.5.5 */
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:active { transform: scale(0.94); }

/* ── hero — type as the composition ──────────────────────────────────────── */

.hero {
  min-height: 72vh;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  padding-top: 48px; padding-bottom: 96px;
}
.stair { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
.stair-line {
  display: block;
  font-size: clamp(44px, 10.5vw, 122px);
  line-height: 1.02;
  margin-left: calc(var(--i) * var(--stair-step)); /* the staircase setting */
  /* base state VISIBLE; the settle is decoration (motion Law 1, `forwards` never `both`) */
  opacity: 1; transform: none;
  animation: settle .65s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--i) * 120ms);
}
.stair-line:nth-child(2) { color: var(--ink-soft); }
@keyframes settle {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hero-dek {
  align-self: flex-end;
  max-width: 34ch;
  margin-top: clamp(40px, 7vh, 90px);
  font-size: 15px; color: var(--ink-soft);
  text-align: left;
}
.hero-dek strong { color: var(--ink); }
.hero-hint {
  position: absolute; left: var(--pad); bottom: 28px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--faint);
}

/* ── kickers, chips, specimen meta — the shared vocabulary ──────────────── */

.kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; color: var(--ink-soft);
}
h2 { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.02em; }

.live-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--faint);
}
.live-dot { width: 7px; height: 7px; background: var(--faint); }
/* earned, never asserted: .is-live is set by the model's own `load` event */
.live-chip.is-live { color: var(--ink); }
.live-chip.is-live .live-dot { background: var(--red); animation: lamp-warm .7s ease-out forwards; }
.live-chip.is-error { color: var(--red); }
.live-chip.is-error .live-dot { background: transparent; border: 1px solid var(--red); }
@keyframes lamp-warm { from { filter: brightness(.2); } 40% { filter: brightness(2); } to { filter: brightness(1); } }

.specimen { display: grid; gap: 4px; }
.specimen div { display: flex; gap: 14px; align-items: baseline; }
.specimen dt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--faint); min-width: 9ch;
}
.specimen dd { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }

.caveat {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--faint); margin-top: 14px;
}

/* ── plates — a live figure in a printed catalog, never a boxed widget ──── */

.plate { position: relative; background: transparent; }
.plate model-viewer {
  width: 100%; height: 100%;
  display: block;
  background: transparent;
  --progress-bar-color: transparent; /* built-in bar replaced by our hairline */
}

/* honest loading: a hairline that fills with real progress events, ink not red —
   red is reserved for the earned LIVE state */
.plate-progress {
  position: absolute; top: 0; left: 0; z-index: 5;
  height: 2px; width: 0%;
  background: var(--ink);
  transition: width .3s ease-out, opacity .4s ease-out .3s;
}
.plate.is-loaded .plate-progress { opacity: 0; }

/* SCAN 01 — full bleed, the page's biggest statement */
.scan-room { margin-top: 4vh; }
.plate-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
}
.plate-full {
  height: var(--plate-room);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.plate-caption {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px);
  align-items: start;
  padding-top: 22px; padding-bottom: 10vh;
}
.plate-caption h2 { font-size: clamp(26px, 3.6vw, 40px); margin-bottom: 12px; }
.plate-caption p { color: var(--ink-soft); max-width: 52ch; }
.plate-caption .specimen { padding-top: 8px; }

/* SCAN 02 — editorial split, text column + plate, deliberately NOT the room's shape */
.scan-object {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: center;
  padding-bottom: 12vh;
}
.object-text h2 { font-size: clamp(30px, 4.4vw, 54px); margin: 14px 0 16px; }
.object-text p { color: var(--ink-soft); margin-bottom: 22px; max-width: 44ch; }
.object-text .specimen { margin-bottom: 26px; }
.plate-object {
  height: var(--plate-object);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

/* ── the method — editorial index rows (§3a): hairline · meta · name · line ─ */

.method { padding-bottom: 10vh; }
.method-rows { list-style: none; margin-top: 18px; }
.method-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr);
  gap: 18px; align-items: baseline;
  border-top: 1px solid var(--line);
  padding: 18px 0 26px;
}
.method-row:first-child { border-top-color: var(--ink); }
.method-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--faint); }
.method-name { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 650; letter-spacing: -0.01em; }
.method-desc { color: var(--ink-soft); font-size: 14.5px; }

/* ── foot ────────────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--ink); padding: 26px 0 40px; }
.foot-line { font-size: 14px; color: var(--ink-soft); }
.foot-line strong { color: var(--ink); }
.foot-meta { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--faint); margin-top: 8px; }

/* ── reveals — scroll-driven, visible-by-default (site.css pattern) ─────── */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .plate-caption, .object-text, .method-row, .foot .shell {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
  }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ── hover — desktop pointers only (touch has no cursor to clear it) ────── */

@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--red); }
  .theme-toggle:hover { border-color: var(--red); color: var(--red); }
}

/* ── portrait / narrow ───────────────────────────────────────────────────── */

@media (max-width: 860px) {
  :root { --plate-room: 48vh; --plate-object: 44vh; }
  .plate-caption { grid-template-columns: 1fr; gap: 20px; padding-bottom: 8vh; }
  .scan-object { grid-template-columns: 1fr; gap: 8px; }
  .object-text { order: 0; }
  .plate-object { order: 1; margin-top: 10px; }
  .method-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0 22px; }
  .nav-tag { display: none; }
  .hero { min-height: 64vh; }
}

/* ── reduced motion — the blanket gate, written once ────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .stair-line, .live-chip.is-live .live-dot,
  .plate-caption, .object-text, .method-row, .foot .shell {
    animation: none;
  }
  .plate-progress { transition: none; }
  .theme-toggle:active { transform: none; }
}