/* ═══════════════════════════════════════════════════════════════════════════
   THE ROOM — Door 07
   Art direction inherited from The Eight Doors and Royalty Trail, then turned
   warm. The other doors in this set examine documents, and their surfaces are
   ledger-cold. This one is about a room with children in it on a Tuesday
   evening, so the paper carries a little more light and the primary structural
   device is the horizontal rule of a printed worksheet rather than the vertical
   chain of a payment trail.

   The colour rules are carried unbroken from the family:
     amber is light — never a button, never a body sentence;
     alarm means something is leaving or lapsed;
     ok means something arrived or is holding.

   One addition specific to this door: a lens tag can be rendered `is-off`, which
   is how the two deliberately-absent lenses are drawn. They are struck through
   rather than hidden, because an absence you cannot see reads as an omission.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --paper: #f2eee5;
  --paper-2: #eae4d7;
  --paper-3: #e0d9c9;
  --ink: #17150f;
  --ink-2: #3d3830;
  --ink-3: #6b6459;
  --rule: #d3cbb9;
  --rule-2: #c2b8a2;

  --amber: #c08a3e;
  --amber-lt: #e8c48a;
  --alarm: #a8321e;
  --ok: #1f5c46;
  --unread: #8b8474;

  --l-source: #2e5a7a;
  --l-power: #a8321e;
  --l-path: #1f5c46;

  --dark: #12110d;
  --dark-ink: #ede7da;

  --f-disp: 'Zodiak', 'Iowan Old Style', Georgia, serif;
  --f-body: 'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --w: 78rem;
  --r: 3px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html[data-theme='dark'] {
  --paper: #12110d;
  --paper-2: #1a1813;
  --paper-3: #221f18;
  --ink: #ede7da;
  --ink-2: #c4bcaa;
  --ink-3: #948c7c;
  --rule: #302c22;
  --rule-2: #413c2f;
  --amber: #d8a558;
  --alarm: #e0705a;
  --ok: #5aab8b;
  --unread: #7d7565;
  --l-source: #6fa3c9;
  --l-power: #e0705a;
  --l-path: #5aab8b;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* `clip` rather than `hidden`: the full-bleed header bar is drawn with a
     100vw pseudo-element, and 100vw counts the scrollbar, which would otherwise
     buy a few pixels of horizontal scroll on every page. `hidden` would also
     fix that and would silently break `position: sticky` on the header. */
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

h1, h2, h3, h4 { font-family: var(--f-disp); font-weight: 700; line-height: 1.13; letter-spacing: -0.014em; margin: 0; text-wrap: balance; }
p { margin: 0 0 0.9rem; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

.wrap { width: min(var(--w), 100% - 2.5rem); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: min(var(--w), 100% - 1.75rem); } }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 0.7rem 1.1rem; z-index: 100; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ── HEADER ───────────────────────────────────────────────────────────────── */
/* The header is a full-bleed opaque bar rather than an inset translucent one.
   The inset version let body copy travel past it on both sides and ghost
   through the 92% fill, which showed up immediately on video: a sentence
   sliding under the wordmark. A sticky bar has to actually be a lid. The
   ::before carries the fill so the bar spans the viewport while the flex row
   stays aligned to the same measure as the page. */
.hd {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  width: min(var(--w), 100% - 2.5rem); margin-inline: auto;
  padding: 0.85rem 0;
}
.hd::before {
  content: ''; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.mark { width: 2rem; height: 2rem; color: var(--ink); flex: none; }
.bt strong { display: block; font-family: var(--f-disp); font-size: 1.0625rem; line-height: 1.15; }
.bt em { display: block; font-family: var(--f-mono); font-style: normal; font-size: 0.6875rem; color: var(--ink-3); letter-spacing: 0.04em; }
.nv { display: flex; gap: 1rem; flex-wrap: wrap; }
.nv a { font-size: 0.8125rem; text-decoration: none; color: var(--ink-2); padding-bottom: 2px; border-bottom: 1.5px solid transparent; }
.nv a:hover { color: var(--ink); border-bottom-color: var(--amber); }
.tt { background: none; border: 1px solid var(--rule-2); border-radius: var(--r); color: var(--ink-2); width: 2.1rem; height: 2.1rem; display: grid; place-items: center; cursor: pointer; flex: none; }
.tt:hover { color: var(--ink); border-color: var(--ink-3); }
@media (max-width: 900px) { html { scroll-padding-top: 11.5rem; } .hd { gap: 0.7rem; } .nv { order: 3; width: 100%; } }
@media (max-width: 420px) { html { scroll-padding-top: 13.5rem; } }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--dark); color: var(--dark-ink); overflow: hidden; }
.hero-img { position: absolute; inset: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.52; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(96deg, rgba(18,17,13,0.95) 0%, rgba(18,17,13,0.84) 44%, rgba(18,17,13,0.36) 100%); }
.hero-in { position: relative; z-index: 2; padding: clamp(3.25rem, 8.5vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem); }
.eyebrow { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-lt); margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.7rem; }
.dash { display: inline-block; width: 2.25rem; height: 1px; background: var(--amber-lt); }
.hero h1 { font-size: clamp(2.1rem, 6vw, 4rem); max-width: 22ch; margin-bottom: 1.4rem; }
.amb { color: var(--amber-lt); }
.lede { font-size: clamp(1.0625rem, 1.85vw, 1.2rem); color: #cfc7b6; max-width: 64ch; }
.lede strong { color: var(--dark-ink); }
.cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.btn { display: inline-block; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; border-radius: var(--r); padding: 0.72rem 1.15rem; cursor: pointer; transition: opacity 0.18s var(--ease); border: 1px solid; }
.btn:hover { opacity: 0.84; }
.hero .btn.pri { background: var(--dark-ink); color: var(--dark); border-color: var(--dark-ink); }
/* Named `ghost`, not `sec`. The secondary button was `.btn.sec`, which also
   matched the section rule `.sec { padding: clamp(3rem, 7vw, 5.25rem) 0 }` —
   so it quietly carried 84px of vertical section padding and stretched the
   whole hero button row to 189px tall. A two-word class name collided with a
   layout primitive and nothing errored. */
.hero .btn.ghost { background: transparent; color: var(--dark-ink); border-color: #4a4638; }
.stat { list-style: none; margin: 2.75rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid #332f26; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.stat li { display: flex; gap: 0.75rem; align-items: baseline; }
.stat b { font-family: var(--f-disp); font-size: 1.85rem; color: var(--amber-lt); line-height: 1; flex: none; }
.stat span { font-size: 0.875rem; color: #a8a091; }
.scroll-cue { position: absolute; bottom: 0.9rem; left: 50%; transform: translateX(-50%); z-index: 3; width: 1.05rem; height: 1.65rem; border: 1px solid #514c3d; border-radius: 100px; }
.scroll-cue span { position: absolute; left: 50%; top: 0.3rem; width: 2px; height: 0.4rem; margin-left: -1px; background: var(--amber-lt); border-radius: 2px; animation: cue 1.9s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(0.55rem); opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }

/* ── SECTIONS ─────────────────────────────────────────────────────────────── */
.sec { padding: clamp(3rem, 7vw, 5.25rem) 0; }
.sec.alt { background: var(--paper-2); border-block: 1px solid var(--rule); }
.sh { margin-bottom: 2rem; }
.num { font-family: var(--f-mono); font-size: 0.75rem; color: var(--amber); letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.sh h2 { font-size: clamp(1.5rem, 3.3vw, 2.15rem); margin-bottom: 0.8rem; }
.sub { color: var(--ink-2); max-width: 76ch; margin: 0; }
.sub em { color: var(--ink); font-style: italic; }
.mini { font-size: 1.1875rem; margin: 3rem 0 0.4rem; }
.mini-note { color: var(--ink-3); font-size: 0.9375rem; max-width: 70ch; margin-bottom: 1.4rem; }

/* reveal-on-scroll */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ── 01 · WHAT A ROOM IS ──────────────────────────────────────────────────── */
#what-def { font-size: clamp(1.125rem, 2.3vw, 1.375rem); font-family: var(--f-disp); color: var(--ink); max-width: 44ch; line-height: 1.28; }
.needs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.need { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.03em; border: 1px solid var(--rule-2); border-radius: 100px; padding: 0.4rem 0.85rem; color: var(--ink-2); background: var(--paper); }
.not-needed { color: var(--ink-3); font-size: 0.9375rem; max-width: 72ch; border-left: 2px solid var(--rule-2); padding-left: 1rem; }
.roles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.role { background: var(--paper-2); border: 1px solid var(--rule); border-top: 3px solid var(--l-path); border-radius: var(--r); padding: 1.25rem 1.3rem; }
.sec.alt .role { background: var(--paper); }
.role-who { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.4rem; }
.role h4 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.role-holds { font-size: 0.9375rem; color: var(--ink); margin-bottom: 0.6rem; }
.role-note { font-size: 0.8125rem; color: var(--ink-3); margin: 0; }
.money { margin-top: 2.5rem; background: var(--ink); color: var(--paper); border-radius: var(--r); padding: clamp(1.4rem, 3.5vw, 2rem); }
.money h3 { font-size: clamp(1.2rem, 2.8vw, 1.6rem); color: var(--amber-lt); margin-bottom: 1rem; }
.money ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.money li { font-size: 0.9375rem; color: #cfc7b6; padding-left: 1.15rem; position: relative; }
.money li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.45rem; height: 1px; background: var(--amber-lt); }

/* ── 02 · THE GATE ────────────────────────────────────────────────────────── */
.gate-state { border: 1px solid var(--rule-2); border-left: 3px solid var(--alarm); border-radius: var(--r); background: var(--paper); padding: 1.1rem 1.3rem; margin-bottom: 1.1rem; }
.gate-state.is-green { border-left-color: var(--ok); }
.gs-top { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--alarm); margin-bottom: 0.4rem; }
.gate-state.is-green .gs-top { color: var(--ok); }
.gs-line { font-family: var(--f-disp); font-size: clamp(1.05rem, 2.2vw, 1.3rem); margin-bottom: 0.45rem; }
.gs-sub { font-size: 0.875rem; color: var(--ink-2); margin: 0; }
.gs-bar { height: 4px; background: var(--paper-3); border-radius: 2px; margin-top: 0.9rem; overflow: hidden; }
.gs-bar i { display: block; height: 100%; background: var(--alarm); transition: width 0.35s var(--ease); }
.gate-state.is-green .gs-bar i { background: var(--ok); }

.gate-tools { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin-bottom: 1.75rem; }
.chip-btn { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--r); padding: 0.45rem 0.8rem; color: var(--ink-2); cursor: pointer; }
.chip-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.tool-note { font-size: 0.8125rem; color: var(--ink-3); }

.gates { display: grid; gap: 1.1rem; }
.gate { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.gate-hd { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; padding: 1.1rem clamp(1.1rem, 3vw, 1.5rem) 0; }
.gate-n { font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink-3); letter-spacing: 0.06em; flex: none; }
.gate-hd h3 { font-size: 1.125rem; }
.gate-count { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.05em; border: 1px solid var(--rule-2); border-radius: 100px; padding: 0.15rem 0.6rem; color: var(--alarm); margin-left: auto; white-space: nowrap; }
.gate.is-green .gate-count { color: var(--ok); border-color: var(--ok); }
.gate-why { font-size: 0.875rem; color: var(--ink-3); padding: 0.6rem clamp(1.1rem, 3vw, 1.5rem) 1rem; margin: 0; max-width: 84ch; }
.gate ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.gline { border-bottom: 1px solid var(--rule); }
.gline:last-child { border-bottom: none; }
.gline label { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.95rem clamp(1.1rem, 3vw, 1.5rem); cursor: pointer; }
.gline label:hover { background: var(--paper-2); }
.gline input { flex: none; margin: 0.28rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--ok); cursor: pointer; }
.gline-body { min-width: 0; }
.gline-txt { font-size: 0.9375rem; color: var(--ink); display: block; }
.gline input:checked ~ .gline-body .gline-txt { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--rule-2); }
.gline-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin-top: 0.4rem; font-family: var(--f-mono); font-size: 0.6875rem; }
.gline-meta a { color: var(--l-source); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--l-source) 40%, transparent); }
.gline-meta a:hover { border-bottom-color: var(--l-source); }
.ours { color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius: 100px; padding: 0.05rem 0.5rem; }
.ours-inline { font-family: var(--f-mono); font-size: 0.6875rem; color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius: 100px; padding: 0.05rem 0.5rem; white-space: nowrap; }
.prov { margin-top: 1.75rem; font-size: 0.8125rem; color: var(--ink-3); max-width: 82ch; border-top: 1px solid var(--rule); padding-top: 1rem; }

/* ── 03 · ROOM HEALTH ─────────────────────────────────────────────────────── */
.rh { display: grid; gap: 1.5rem; grid-template-columns: minmax(min(21rem, 100%), 0.85fr) minmax(min(24rem, 100%), 1.15fr); align-items: start; }
@media (max-width: 940px) { .rh { grid-template-columns: 1fr; } }
.rh-inputs { display: grid; gap: 1.1rem; }
.mfield { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r); padding: 1.05rem 1.15rem; }
.mf-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.15rem; }
.mf-top label { font-family: var(--f-disp); font-weight: 700; font-size: 1rem; }
.mf-val { font-family: var(--f-mono); font-size: 1.125rem; color: var(--ink); min-width: 2.5ch; text-align: right; }
.mf-unit { font-size: 0.8125rem; color: var(--ink-3); margin-bottom: 0.7rem; }
.mfield input[type='range'] { width: 100%; margin: 0; accent-color: var(--l-path); cursor: pointer; }
.mf-band { font-size: 0.8125rem; color: var(--ink-2); margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px dotted var(--rule-2); }
.mf-rule { font-size: 0.75rem; color: var(--ink-3); margin-top: 0.4rem; font-style: italic; }

.verdict { border: 1px solid var(--rule-2); border-top: 3px solid var(--l-path); border-radius: var(--r); background: var(--paper-2); padding: 1.4rem clamp(1.15rem, 3vw, 1.6rem); }
.v-kicker { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.5rem; }
.verdict h3 { font-size: clamp(1.35rem, 3vw, 1.85rem); margin-bottom: 0.7rem; }
.verdict.t-ok { border-top-color: var(--ok); } .verdict.t-ok h3 { color: var(--ok); }
.verdict.t-new { border-top-color: var(--ink-3); } .verdict.t-new h3 { color: var(--ink); }
.verdict.t-warn { border-top-color: var(--amber); } .verdict.t-warn h3 { color: var(--ink); }
.verdict.t-alarm { border-top-color: var(--alarm); } .verdict.t-alarm h3 { color: var(--alarm); }
.verdict.t-gate { border-top-color: var(--alarm); } .verdict.t-gate h3 { color: var(--alarm); }
.v-read { color: var(--ink-2); font-size: 0.9375rem; margin: 0; }

.readings { display: grid; gap: 0.5rem; margin-top: 1.1rem; }
.rd { display: grid; grid-template-columns: 9rem 1fr; gap: 0.5rem 1rem; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 0.5rem; }
@media (max-width: 560px) { .rd { grid-template-columns: 1fr; gap: 0.15rem; } }
.rd-l { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.03em; color: var(--ink-3); text-transform: uppercase; }
.rd-v { font-size: 0.875rem; color: var(--ink-2); }
.rd-v b { font-family: var(--f-mono); color: var(--ink); font-weight: 400; }
.rd.b-none .rd-v b, .rd.b-lapsed .rd-v b, .rd.b-unread .rd-v b, .rd.b-holding-back .rd-v b { color: var(--alarm); }
.rd.b-established .rd-v b, .rd.b-weekly .rd-v b, .rd.b-multiplying .rd-v b, .rd.b-fluent .rd-v b { color: var(--ok); }

.pathbox { margin-top: 1.1rem; background: var(--ink); color: var(--paper); border-radius: var(--r); padding: 1.25rem 1.4rem; }
.pb-kicker { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--l-path); margin-bottom: 0.55rem; }
html[data-theme='dark'] .pb-kicker { color: var(--amber-lt); }
.pb-next { font-family: var(--f-disp); font-size: 1.0625rem; line-height: 1.35; margin-bottom: 0.85rem; }
.pb-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: #a8a091; }
.pb-meta b { color: var(--dark-ink); font-weight: 400; }

.lens-note { margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; display: grid; gap: 0.85rem; }
.ln-row { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.ln-row p { font-size: 0.9375rem; color: var(--ink-2); margin: 0; flex: 1 1 20rem; }
.lens-tag { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.09em; border-radius: 100px; padding: 0.2rem 0.65rem; flex: none; border: 1px solid; white-space: nowrap; }
.t-source { color: var(--l-source); border-color: var(--l-source); }
.t-power { color: var(--l-power); border-color: var(--l-power); }
.t-path { color: var(--l-path); border-color: var(--l-path); }
.lens-tag.is-off { color: var(--ink-3); border-color: var(--rule-2); border-style: dashed; text-decoration: line-through; }

/* ── 04 · THE TWELVE SESSIONS ─────────────────────────────────────────────── */
.ses-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(13.5rem, 100%), 1fr)); }
.ses { text-align: left; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 0.9rem 1rem; cursor: pointer; font-family: inherit; font-size: inherit; color: inherit; transition: border-color 0.16s var(--ease), background 0.16s var(--ease); }
.ses:hover { border-color: var(--ink-3); }
.ses[aria-selected='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ses-n { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 0.3rem; }
.ses[aria-selected='true'] .ses-n { color: var(--amber-lt); }
.ses-t { font-family: var(--f-disp); font-weight: 700; font-size: 0.9375rem; line-height: 1.22; display: block; margin-bottom: 0.5rem; }
.ses-l { display: flex; gap: 0.25rem; }
.dotl { width: 0.5rem; height: 0.5rem; border-radius: 50%; display: inline-block; }
.dotl.d-source { background: var(--l-source); }
.dotl.d-power { background: var(--l-power); }
.dotl.d-path { background: var(--l-path); }

.ses-detail { margin-top: 1.5rem; }
.sd { background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--ink); border-radius: var(--r); padding: clamp(1.3rem, 3.5vw, 2rem); }
.sd-top { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: baseline; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.6rem; }
.sd h3 { font-size: clamp(1.25rem, 2.9vw, 1.75rem); margin-bottom: 1.1rem; }
.sd-rows { display: grid; gap: 1rem; }
.sd-row { display: grid; grid-template-columns: 11rem 1fr; gap: 0.4rem 1.25rem; }
@media (max-width: 700px) { .sd-row { grid-template-columns: 1fr; } }
.sd-k { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.2rem; }
.sd-v { font-size: 0.9375rem; color: var(--ink-2); margin: 0; }
.sd-v strong { color: var(--ink); }
.sd-row.is-fail .sd-k { color: var(--alarm); }
.sd-row.is-fix .sd-k { color: var(--ok); }
.sd-prompt { font-family: var(--f-mono); font-size: 0.75rem; border: 1px solid var(--rule-2); border-radius: 100px; padding: 0.2rem 0.7rem; color: var(--ink-2); text-transform: none; letter-spacing: 0.02em; }

.hour { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.hour li { display: grid; grid-template-columns: 5rem 11rem 1fr; gap: 0.35rem 1.25rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
@media (max-width: 720px) { .hour li { grid-template-columns: 5rem 1fr; } .hour li .h-note { grid-column: 1 / -1; } }
.h-t { font-family: var(--f-mono); font-size: 0.75rem; color: var(--amber); letter-spacing: 0.03em; }
.h-n { font-family: var(--f-disp); font-weight: 700; font-size: 0.9375rem; }
.h-note { font-size: 0.875rem; color: var(--ink-3); }
.hour li:nth-child(5) .h-note { color: var(--alarm); }

/* ── 05 · HOW TO ──────────────────────────────────────────────────────────── */
.vids { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.vid { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.sec.alt .vid { background: var(--paper); }
.vid video { width: 100%; display: block; background: var(--dark); aspect-ratio: 16 / 10; object-fit: cover; }
.vid-body { padding: 1.05rem 1.15rem 1.2rem; }
.vid-n { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.35rem; display: flex; gap: 0.7rem; }
.vid-n .dur { color: var(--amber); }
.vid h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.vid p { font-size: 0.875rem; color: var(--ink-2); margin: 0; }

/* ── 06 · REFUSALS ────────────────────────────────────────────────────────── */
.refusals { display: grid; gap: 0.9rem; }
.ref { display: grid; grid-template-columns: minmax(min(15rem, 100%), 0.55fr) 1fr; gap: 0.5rem 1.5rem; background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--alarm); border-radius: var(--r); padding: 1.2rem clamp(1.1rem, 3vw, 1.5rem); }
@media (max-width: 780px) { .ref { grid-template-columns: 1fr; } }
.ref-claim { font-family: var(--f-disp); font-weight: 700; font-size: 1.0625rem; display: flex; gap: 0.6rem; align-items: baseline; }
.ref-no { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--alarm); flex: none; }
.ref-why { font-size: 0.9375rem; color: var(--ink-2); margin: 0; }

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.ft { background: var(--dark); color: #a8a091; padding: clamp(2.5rem, 6vw, 4rem) 0 3rem; }
.hotline { border: 1px solid #4a4638; border-left: 3px solid var(--alarm); border-radius: var(--r); padding: 1.2rem 1.4rem; margin-bottom: 2.5rem; }
.hl-name { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: #cfc7b6; margin-bottom: 0.4rem; }
.hl-num { font-family: var(--f-disp); font-size: clamp(1.5rem, 4vw, 2.25rem); color: var(--dark-ink); line-height: 1.1; }
.hl-num span { font-family: var(--f-mono); font-size: 0.9375rem; color: #a8a091; display: block; margin-top: 0.25rem; letter-spacing: 0.02em; }
.hl-note { font-size: 0.875rem; margin: 0.8rem 0 0; max-width: 74ch; }
.hl-note a { color: var(--amber-lt); text-decoration: none; border-bottom: 1px solid #5d5647; }
.ft-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); border-top: 1px solid #332f26; padding-top: 2rem; }
.ft h4 { font-size: 0.9375rem; color: var(--dark-ink); margin-bottom: 0.6rem; }
.ft p { font-size: 0.875rem; }
.canon { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-top: 0.8rem; }
.ft-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ft-links a { font-size: 0.875rem; text-decoration: none; color: #cfc7b6; }
.ft-links a:hover { color: var(--dark-ink); }
.trad { font-style: italic; max-width: 40ch; }