/* ==========================================================================
   story.css — the stepper/scrollytelling shell around the isometric stage.
   Loaded after ../clm/style.css (which supplies tokens, buttons, bars and the
   lab figure styles); this file only adds the story layout.
   ========================================================================== */

:root {
  --stage-h: 100svh;
  --card-w: 400px;
}

/* ---------- hero ---------- */
.s-hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 20px; padding: 0 max(20px, 4vw); overflow: hidden; }
.s-hero-copy { position: relative; z-index: 2; max-width: 560px; }
.s-hero .hero-kicker { text-align: left; }
.s-hero h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(3rem, 7vw, 6.2rem); line-height: .95; letter-spacing: -.02em; margin: 1rem 0 1.2rem; }
.s-hero h1 em { color: var(--action); }
.s-hero .dek { font-size: 1.2rem; color: var(--ink-2); margin: 0 0 1.6rem; max-width: 520px; }
.s-hero-stage { position: relative; height: min(78svh, 720px); }
.s-hero-stage .iso-svg { width: 100%; height: 100%; display: block; }
.s-hero .hero-legend { justify-content: flex-start; }
.s-begin { margin-top: 2rem; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.s-begin small { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); letter-spacing: .08em; }
@media (max-width: 900px) {
  .s-hero { grid-template-columns: 1fr; padding-top: 6svh; }
  .s-hero-stage { height: 46svh; order: -1; }
}

/* ---------- the story: sticky stage + scrolling steps ---------- */
.story { position: relative; display: grid; grid-template-columns: minmax(320px, var(--card-w)) 1fr; gap: 0 28px; padding: 0 max(16px, 3vw); }
.story-steps { position: relative; z-index: 2; padding: 30svh 0 40svh; }
.story-stage-wrap { position: sticky; top: 0; height: var(--stage-h); display: flex; flex-direction: column; }
.story-stage { position: relative; flex: 1; min-height: 0; }
.story-stage .iso-svg { width: 100%; height: 100%; display: block; }

/* step cards */
.step { min-height: 92svh; display: flex; align-items: center; }
.step.short { min-height: 70svh; }
.step-card {
  width: 100%;
  background: color-mix(in oklab, var(--panel) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
  transition: border-color .3s, opacity .3s, transform .3s;
  opacity: .42;
}
.step.is-active .step-card { opacity: 1; border-color: var(--line-2); }
.step-card .act-tag { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); display: flex; gap: .6rem; align-items: center; margin-bottom: .55rem; }
.step-card .act-tag b { color: var(--action); font-weight: 600; }
.step-card h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.85rem; line-height: 1.08; margin: 0 0 .7rem; letter-spacing: -.005em; }
.step-card h3 i { color: var(--action); }
.step-card p { color: var(--ink-2); font-size: 1rem; line-height: 1.62; margin: 0 0 .8em; }
.step-card p:last-child { margin-bottom: 0; }
.step-card strong { color: var(--ink); font-weight: 600; }
.step-card .eq { font-size: .82rem; margin: .9em 0; padding: .7rem .85rem; }
.step-card .controls { margin-top: 12px; }
.step-card .note { font-size: .8rem; color: var(--ink-3); line-height: 1.5; border-top: 1px dashed var(--line-2); margin-top: 12px; padding-top: 10px; }
.step-card .readout-row { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 12px; }

/* act opener cards */
.step.act .step-card { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; padding-left: 0; }
.step.act h3 { font-size: 2.8rem; }
.step.act .act-no { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--action); }

/* stage chrome: HUD + stepper bar */
.stage-hud { position: absolute; top: 18px; right: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; z-index: 3; }
.stage-hud .hud-title { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.stage-hud .badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.stage-readouts { position: absolute; left: 18px; bottom: 74px; display: flex; gap: 22px; flex-wrap: wrap; z-index: 3; pointer-events: none; }
.stage-readouts .kpi .v { font-size: 1.25rem; }

.stepper {
  display: flex; align-items: center; gap: 12px; padding: 10px 6px 14px;
  font-family: var(--f-mono); font-size: .74rem; color: var(--ink-3);
}
.stepper button { font: 600 .8rem/1 var(--f-body); background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); border-radius: 9px; padding: .55rem .8rem; cursor: pointer; }
.stepper button:hover { border-color: var(--ink-3); }
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper .rail { flex: 1; display: flex; gap: 3px; align-items: center; min-width: 0; }
.stepper .rail a { flex: 1; height: 4px; border-radius: 3px; background: var(--line-2); min-width: 3px; transition: background .2s, height .2s; }
.stepper .rail a.done { background: color-mix(in oklab, var(--action) 45%, var(--line-2)); }
.stepper .rail a.now { background: var(--action); height: 7px; }
.stepper .rail a.act-start { margin-left: 7px; }
.stepper .where { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34%; }
.stepper kbd { font-family: var(--f-mono); font-size: .66rem; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 .3rem; color: var(--ink-3); }

/* full-width lab breaks between acts */
.lab { position: relative; z-index: 4; background: var(--bg); padding: 6rem 0 4rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lab-head { max-width: var(--col); margin: 0 auto 1rem; padding: 0 20px; }
.lab-head .lab-tag { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--good); }
.lab-head h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3rem); margin: .5rem 0 .4rem; line-height: 1.05; }
.lab-head p { color: var(--ink-2); margin: 0; }

/* in-card mini controls */
.mini-seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.mini-seg button { font: 500 .78rem/1 var(--f-body); color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px; padding: .5rem .65rem; cursor: pointer; }
.mini-seg button[aria-pressed="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.guess-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.verdict { margin-top: 10px; font-size: .9rem; color: var(--ink-2); min-height: 1.4em; }
.verdict b { color: var(--ink); }

/* ---------- mobile: stage on top, cards below ---------- */
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; padding: 0; }
  .story-stage-wrap { order: -1; }
  .story-steps { margin-top: 0; }
  .step { align-items: flex-start; }
  .step-card { opacity: 1; background: var(--panel); }
  .step.act .step-card { background: var(--bg); padding-left: 14px; }
  .stepper .where, .stepper .keys { display: none; }
}
@media (prefers-reduced-motion: reduce) { .step-card { transition: none; } }

/* ==========================================================================
   Type system · direction D, "functional colour".
   One ink for all type. Headings are Inter Tight, set tight and semibold,
   with no italic accents and no letter-spaced mono kickers. Colour appears
   in text only on words that name something in the scene (.t[data-k]), and
   hovering one lights those objects up.
   ========================================================================== */
:root { --f-display: "Inter Tight", "Inter", -apple-system, sans-serif; --f-body: "Inter Tight", "Inter", -apple-system, sans-serif; }

.s-hero .byline { font-size: 15px; color: var(--ink-3); }
.s-hero .byline b { color: var(--ink); font-weight: 600; }
.s-hero h1 { font-family: var(--f-display); font-weight: 650; font-size: clamp(2.8rem, 5.6vw, 5rem); line-height: 1.02; letter-spacing: -0.04em; margin: 1.1rem 0 1.3rem; }
.s-hero .dek { font-size: 1.22rem; line-height: 1.6; color: var(--ink-2); margin-bottom: .9rem; }
.s-hero .hint { font-size: .9rem; color: var(--ink-3); margin: 0; }
.s-begin small { font-family: var(--f-body); letter-spacing: 0; font-size: .85rem; }

.step-meta { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; color: var(--ink-3); margin-bottom: .75rem; }
.step-meta span:first-child { color: var(--ink-2); font-weight: 500; }
.step-card h3 { font-family: var(--f-display); font-weight: 650; font-size: 1.7rem; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 .75rem; }
.step.act h3 { font-size: 2.5rem; letter-spacing: -0.035em; line-height: 1.04; }
.step.act .step-meta span:first-child { color: var(--ink); }

/* functional colour */
.t { font-weight: 600; text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: help; border-radius: 3px; transition: background-color .15s; }
.t[data-k="state"]  { color: var(--state);  text-decoration-color: rgba(90,176,255,.55); }
.t[data-k="action"] { color: var(--action); text-decoration-color: rgba(255,181,71,.55); }
.t[data-k="frozen"] { color: #a8afbd;       text-decoration-color: rgba(168,175,189,.5); }
.t[data-k="writer"] { color: #b495ff;       text-decoration-color: rgba(180,149,255,.55); }
.t[data-k="judge"]  { color: #f07ab4;       text-decoration-color: rgba(240,122,180,.55); }
.t[data-k="lookup"] { color: #e9e4d8;       text-decoration-color: rgba(233,228,216,.5); }
.t:hover, .t:focus-visible { background: rgba(255,255,255,.07); outline: none; }
strong .t { font-weight: 650; }

/* quiet chrome: sentence case, no tracking, no mono labels */
.badge { font-family: var(--f-body); font-size: .72rem; letter-spacing: 0; text-transform: none; }
.stage-hud .hud-title { font-family: var(--f-body); font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.kpi .k { font-family: var(--f-body); font-size: .75rem; letter-spacing: 0; text-transform: none; }
.stepper { font-family: var(--f-body); font-size: .8rem; }
.lab-head .lab-tag { font-family: var(--f-body); font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.lab-head h2 { font-family: var(--f-display); font-weight: 650; letter-spacing: -0.035em; }
.stage-title { font-family: var(--f-body); letter-spacing: 0; text-transform: none; font-size: .82rem; }

/* ==========================================================================
   Phones and narrow tablets. Laptop layout above 900px is untouched.
   The stage sits on top (sticky, opaque, above the cards) and the cards
   scroll underneath it, so the scene and the text for a step are always on
   screen together.
   ========================================================================== */
@media (max-width: 900px) {
  .story-stage-wrap { position: sticky; top: 0; height: 52svh; z-index: 6; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 14px 28px -14px rgba(0,0,0,.9); }
  .story-steps { z-index: 1; padding: 2svh 12px 40svh; }
  .step { min-height: 64svh; padding-top: 1.5svh; }
  .step-card { padding: 16px 16px 14px; border-radius: 14px; }
  .step-card h3 { font-size: 1.42rem; }
  .step.act h3 { font-size: 1.85rem; }
  .step-card p { font-size: .97rem; line-height: 1.58; }
  .step-meta { font-size: .74rem; }

  /* stage chrome, compact */
  .stage-hud { top: 8px; right: 10px; left: 10px; align-items: flex-end; gap: 4px; }
  .stage-hud .hud-title { font-size: .72rem; }
  .stage-hud .badges { display: flex; gap: 4px; max-height: 1.7em; overflow: hidden; }
  .stage-hud .badge { font-size: .62rem; padding: .08em .45em; }
  .stage-readouts { left: 10px; right: 10px; bottom: 50px; gap: 6px 14px; }
  .stage-readouts .kpi .k { font-size: .62rem; }
  .stage-readouts .kpi .v { font-size: .95rem; }
  .stepper { padding: 6px 6px 8px; gap: 8px; }
  .stepper button { padding: .45rem .65rem; }
  .stepper .rail a.act-start { margin-left: 4px; }

  /* hero: scene on top, copy below */
  .s-hero { min-height: auto; padding: 2svh 16px 6svh; gap: 6px; }
  .s-hero-stage { height: 44svh; }
  .s-hero h1 { font-size: clamp(2.3rem, 10.5vw, 3.2rem); margin: .7rem 0 .9rem; }
  .s-hero .dek { font-size: 1.04rem; }

  /* labs */
  .lab { padding: 3.5rem 0 2.5rem; }
  .lab .stage { padding: 0 8px; }
}
@media (max-width: 420px) {
  .stage-readouts .kpi:nth-child(n+3) { display: none; }
}