/* ============================================================
   WHAT IT IS — brand guidelines site
   Every visual value reads from tokens.css. No hex lives here.
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--void-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

/* ---- Skip link ---- */
.skip {
  position: absolute; left: -999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--void-0); padding: var(--sp-1) var(--sp-2);
}
.skip:focus { left: 0; }

/* ---- Type utilities ---- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 900; line-height: 1.12; text-wrap: balance; }
h2 { font-size: var(--text-h1); letter-spacing: var(--ls-display); }
h3 { font-size: var(--text-h3); margin-bottom: var(--sp-2); }
p { max-width: 65ch; }
.lede { font-size: var(--text-body-lg); }
.mono { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.04em; }
.muted { color: var(--muted); }

/* ---- Sidebar nav ---- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--nav-w);
  background: var(--void-1); border-right: var(--border-thin);
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2);
  overflow-y: auto; z-index: 10;
}
.sidebar .brandline { font-family: var(--font-display); font-size: var(--text-body); line-height: 1.2; }
.sidebar .brandline em { display: block; font-style: normal; color: var(--muted); font-family: var(--font-mono); font-size: var(--text-label); margin-top: 2px; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a {
  display: flex; gap: var(--sp-1); align-items: baseline;
  padding: 5px var(--sp-1); text-decoration: none;
  font-size: var(--text-body-sm); color: var(--muted);
  border-left: var(--border-w) solid transparent;
}
.nav a .n { font-family: var(--font-mono); font-size: var(--text-label); }
.nav a:hover { color: var(--ink); background: var(--void-3); }
.nav a.active { color: var(--ink); border-left-color: var(--gold); background: var(--void-3); }
.sidebar .tools { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-1); }
.btn {
  display: inline-block; padding: 10px var(--sp-2); text-align: center;
  border: var(--border-w) solid var(--accent); color: var(--accent);
  background: transparent; text-decoration: none;
  font-size: var(--text-body-sm); font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--accent); color: var(--accent-contrast); }

/* Mobile nav */
.burger {
  display: none; position: fixed; top: var(--sp-1); left: var(--sp-1); z-index: 20;
  background: var(--void-1); border: var(--border-thin);
  padding: 8px 12px; font-family: var(--font-mono); font-size: var(--text-caption);
}
@media (max-width: 860px) {
  .burger { display: block; }
  .sidebar { transform: translateX(-100%); transition: transform var(--dur-normal) var(--ease-out); }
  .sidebar.open { transform: none; }
  main { margin-left: 0 !important; }
}

/* ---- Sections ---- */
main { margin-left: var(--nav-w); }
.sec { padding: var(--section-pad) clamp(1.25rem, 4vw, 4rem); border-bottom: var(--divider); }
.sec-inner { max-width: var(--max-w); margin: 0 auto; }
.sec--panel { background: var(--void-2); }
.sec--raised { background: var(--void-3); }
.sec-head { margin-bottom: var(--sp-5); }
.sec-head .kicker {
  font-family: var(--font-mono); font-size: var(--text-caption);
  color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; gap: var(--sp-2); align-items: center;
}
.sec-head .sub { color: var(--muted); max-width: 60ch; margin-top: var(--sp-2); }
.proposed {
  font-family: var(--font-mono); font-size: var(--text-label);
  color: var(--void-0); background: var(--gold-bright);
  padding: 1px 7px; letter-spacing: 0.08em;
}

/* Provenance tags */
.prov { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.06em; padding: 1px 6px; border: 1px solid var(--muted); color: var(--muted); white-space: nowrap; }
.prov--context { border-color: var(--blue-mid); color: var(--blue-mid); }
.prov--invented { border-color: var(--red); color: var(--red); }
.prov--derived { border-color: var(--gold); color: var(--gold); }

/* Placeholder block */
.placeholder {
  border: var(--border-w) dashed var(--red);
  color: var(--red); font-family: var(--font-mono); font-size: var(--text-body-sm);
  padding: var(--sp-2) var(--sp-3);
}
.placeholder strong { letter-spacing: 0.1em; }

/* Invitation zones */
.invite {
  border: 1px dashed var(--muted); color: var(--muted);
  font-family: var(--font-mono); font-size: var(--text-caption);
  padding: var(--sp-3); line-height: 1.7;
}
.js .invite { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out) 2s; }
.js .invite.vis { opacity: 1; }

/* ---- Scroll reveal — js-gated, fails visible ---- */
.rv { /* visible by default */ }
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .rv.vis { opacity: 1; transform: none; }
.js .rv-d1.vis { transition-delay: 60ms; }
.js .rv-d2.vis { transition-delay: 120ms; }
.js .rv-d3.vis { transition-delay: 180ms; }
.js .rv-d4.vis { transition-delay: 240ms; }

/* ---- Cover ---- */
.cover { min-height: 100vh; display: grid; align-content: center; border-bottom: var(--divider); }
.cover-mark {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--text-hero); line-height: 1.02; letter-spacing: var(--ls-display);
}
.cover-meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-4) 0; align-items: center; }
.cover-toc { margin-top: var(--sp-5); columns: 2; column-gap: var(--sp-5); max-width: var(--max-w-narrow); }
.cover-toc a {
  display: flex; gap: var(--sp-2); padding: 6px 0; text-decoration: none;
  color: var(--muted); border-bottom: 1px solid var(--void-4); break-inside: avoid;
}
.cover-toc a:hover { color: var(--ink); }
.cover-toc .n { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--gold); }
@media (max-width: 700px) { .cover-toc { columns: 1; } }

/* ---- Layout helpers ---- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 900px) { .duo, .trio { grid-template-columns: minmax(0, 1fr); } }

/* ---- Principle demos (01) ---- */
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); counter-reset: prn; list-style: none; padding: 0; }
@media (max-width: 900px) { .principles { grid-template-columns: minmax(0, 1fr); } }
.principle { border: var(--border-thin); padding: var(--sp-3); }
.principle::before { counter-increment: prn; content: counter(prn, decimal-leading-zero); font-family: var(--font-mono); color: var(--gold); font-size: var(--text-caption); }
.principle h4 { font-size: var(--text-h4); margin: var(--sp-1) 0; }
.principle p { font-size: var(--text-body-sm); color: var(--muted); }
.demo { margin-top: var(--sp-2); padding: var(--sp-2); background: var(--void-0); border: 1px solid var(--void-4); min-height: 84px; display: grid; place-items: center; text-align: center; }

/* live demo: bordered frame appearing */
.demo-frame { border: var(--border); padding: var(--sp-2) var(--sp-3); transition: box-shadow var(--dur-normal) var(--ease-out); }
.demo-frame:hover { box-shadow: var(--sh-rb); }
/* live demo: square vs round */
.demo-square { display: flex; gap: var(--sp-2); align-items: center; }
.demo-square .sq { width: 56px; height: 56px; border: var(--border); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-label); }
.demo-square .rd { border-radius: var(--r-currency); border-color: var(--gold); color: var(--gold); }
/* live demo: coin */
.demo-coin img { width: 110px; }

/* Adjective definition list */
.adjectives { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); }
.adjectives dt { font-family: var(--font-display); font-size: var(--text-h4); }
.adjectives dd { color: var(--muted); font-size: var(--text-body-sm); }

/* ---- Logo section (02) ---- */
.logo-stage { background: var(--black); border: var(--border-thin); padding: var(--sp-5); display: grid; place-items: center; }
.logo-stage img { max-width: min(360px, 70%); }
.logo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
@media (max-width: 900px) { .logo-row { grid-template-columns: minmax(0, 1fr); } }
.logo-tile { border: 1px solid var(--void-4); padding: var(--sp-2); text-align: center; }
.logo-tile img { margin: 0 auto var(--sp-1); max-height: 120px; width: auto; }
.logo-tile figcaption { font-family: var(--font-mono); font-size: var(--text-label); color: var(--muted); }

/* clear-space diagram */
.clearspace { position: relative; display: grid; place-items: center; padding: var(--sp-5); border: 1px dashed var(--muted); width: fit-content; margin-inline: auto; }
.clearspace .wm { font-family: var(--font-display); font-size: var(--text-h2); line-height: 1.05; }
.clearspace .u { position: absolute; font-family: var(--font-mono); font-size: var(--text-label); color: var(--gold); }
.clearspace .u--t { top: 6px; left: 50%; transform: translateX(-50%); }
.clearspace .u--b { bottom: 6px; left: 50%; transform: translateX(-50%); }
.clearspace .u--l { left: 8px; top: 50%; transform: translateY(-50%); }
.clearspace .u--r { right: 8px; top: 50%; transform: translateY(-50%); }

/* do/don't grid */
.dd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 900px) { .dd { grid-template-columns: minmax(0, 1fr); } }
.dd figure { border: 1px solid var(--void-4); }
.dd .pane { height: 130px; display: grid; place-items: center; background: var(--void-0); overflow: hidden; }
.dd figcaption { padding: var(--sp-1) var(--sp-2); font-size: var(--text-body-sm); border-top: 1px solid var(--void-4); }
.dd .ok figcaption::before { content: "✓ "; color: var(--gold-bright); }
.dd .no figcaption::before { content: "✕ "; color: var(--red); }
.wm-s { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.05; }
.wm-s--red { color: var(--red); }
.wm-s--center { text-align: center; }
.wm-s--stretch { transform: scaleX(1.6); }
.wm-s--outline { color: transparent; -webkit-text-stroke: 1px var(--ink); }
.wm-s--busy { background: repeating-linear-gradient(45deg, var(--void-4) 0 8px, var(--void-7) 8px 16px); padding: var(--sp-1); }
.wm-s--gold { color: var(--gold); }

/* ---- Color section (03) ---- */
.ramp { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border: var(--border-thin); }
@media (max-width: 700px) { .ramp { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ramp .step { aspect-ratio: 1 / 1.4; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-1); font-family: var(--font-mono); font-size: var(--text-label); color: var(--muted); }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--sp-2); }
.sw { border: 1px solid var(--void-4); }
.sw .chip { height: 88px; }
.sw .lbl { padding: var(--sp-1); font-family: var(--font-mono); font-size: var(--text-label); line-height: 1.5; }
.sw .lbl b { display: block; font-family: var(--font-body); font-size: var(--text-body-sm); }

/* Swatch chips — rendered from the primitive tokens so they cannot
   drift, and stay true even under the print token flip */
.c-void-0 { background: var(--p-void-0); } .c-void-1 { background: var(--p-void-1); }
.c-void-2 { background: var(--p-void-2); } .c-void-3 { background: var(--p-void-3); }
.c-void-4 { background: var(--p-void-4); } .c-void-5 { background: var(--p-void-5); }
.c-void-6 { background: var(--p-void-6); } .c-void-7 { background: var(--p-void-7); }
.c-ink { background: var(--p-ink); } .c-muted { background: var(--p-muted); }
.c-gold { background: var(--p-gold); } .c-gold-bright { background: var(--p-gold-bright); }
.c-gold-amber { background: var(--p-gold-amber); } .c-parchment { background: var(--p-parchment); }
.c-powder { background: var(--p-powder); } .c-blue-light { background: var(--p-blue-light); }
.c-blue-mid { background: var(--p-blue-mid); } .c-blue-deep { background: var(--p-blue-deep); }
.c-abyss { background: var(--p-abyss); } .c-abyss-2 { background: var(--p-abyss-2); }
.c-red { background: var(--p-red); }

/* spec tables */
.spec { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.spec th { text-align: left; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); padding: var(--sp-1); border-bottom: var(--border-thin); }
.spec td { padding: var(--sp-1); border-bottom: 1px solid var(--void-4); vertical-align: top; }
.pass { color: var(--gold-bright); font-family: var(--font-mono); font-size: var(--text-caption); }
.fail { color: var(--red); font-family: var(--font-mono); font-size: var(--text-caption); }

/* contrast pair chips — primitives, so measured pairs stay true in print */
.pair { display: inline-block; padding: 3px 10px; font-size: var(--text-body-sm); border: 1px solid var(--void-4); }
.pair--ink-void { color: var(--p-ink); background: var(--p-void-0); }
.pair--muted-void { color: var(--p-muted); background: var(--p-void-0); }
.pair--gold-void { color: var(--p-gold); background: var(--p-void-0); }
.pair--goldb-void { color: var(--p-gold-bright); background: var(--p-void-0); }
.pair--parch-void { color: var(--p-parchment); background: var(--p-void-0); }
.pair--bluel-void { color: var(--p-blue-light); background: var(--p-void-0); }
.pair--bluem-void { color: var(--p-blue-mid); background: var(--p-void-0); }
.pair--red-void { color: var(--p-red); background: var(--p-void-0); }
.pair--void-parch { color: var(--p-void-0); background: var(--p-parchment); }
.pair--void-goldb { color: var(--p-void-0); background: var(--p-gold-bright); }
.pair--ink-card { color: var(--p-ink); background: var(--p-void-4); }
.pair--muted-card { color: var(--p-muted); background: var(--p-void-4); }
.pair--abyss2-void { color: var(--p-abyss-2); background: var(--p-void-0); }

/* ---- Typography section (04) ---- */
.type-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) 0; border-bottom: 1px solid var(--void-4); }
@media (max-width: 700px) { .type-row { grid-template-columns: minmax(0, 1fr); } }
.type-row .meta { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--muted); }
.t-display { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.125rem); line-height: 1.1; }
.t-displaylg { font-size: 1.625rem; font-weight: 700; letter-spacing: var(--ls-display); }
.t-headline { font-size: 1.5rem; }
.t-title { font-size: 1.75rem; }
.t-body1 { font-size: var(--text-body-lg); }
.t-body2 { font-size: var(--text-body); font-weight: 300; }
.t-caption { font-size: var(--text-body-sm); }
.t-mutedcap { font-size: var(--text-caption); color: var(--muted); }
.t-overline { font-size: var(--text-caption); letter-spacing: var(--ls-tight); text-decoration: underline; text-decoration-color: var(--blue-deep); }
.specimen { border: var(--border); padding: var(--sp-4); }
.specimen .big { font-family: var(--font-display); font-size: var(--text-h1); line-height: 1.05; letter-spacing: var(--ls-display); }

/* ---- Iconography (05) ---- */
.icon-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.icon-cell { width: 96px; text-align: center; }
.icon-cell svg { width: 32px; height: 32px; margin: 0 auto var(--sp-1); display: block; }
.icon-cell figcaption { font-family: var(--font-mono); font-size: var(--text-label); color: var(--muted); }
.ic-amber { color: var(--gold-amber); }
.ic-gold { color: var(--gold); }
.ic-ink { color: var(--ink); }
.icon-sizes { display: flex; align-items: flex-end; gap: var(--sp-3); }
.icon-sizes svg { color: var(--gold-amber); }

/* ---- Photography / Illustration (06) ---- */
.render-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 900px) { .render-strip { grid-template-columns: minmax(0, 1fr); } }
.render-strip figure { border: 1px solid var(--void-4); padding: var(--sp-3); background: var(--void-0); }
.render-strip img { margin: 0 auto; max-height: 130px; width: auto; }
.render-strip figcaption { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--text-label); color: var(--muted); text-align: center; }

/* ---- Mascots (07) ---- */
.roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 900px) { .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.roster figure { border: 1px solid var(--void-4); padding: var(--sp-2); text-align: center; }
.roster img { margin: 0 auto; height: 90px; width: auto; object-fit: contain; }
.roster figcaption { margin-top: var(--sp-1); font-size: var(--text-body-sm); }
.roster figcaption em { display: block; font-style: normal; color: var(--muted); font-size: var(--text-caption); }

/* ---- Components (08) ---- */
.wii-btn {
  display: block; width: 100%; padding: var(--sp-2) var(--sp-3);
  border: var(--border-w) solid var(--accent); color: var(--accent);
  background: transparent; text-align: center; font-size: var(--text-body);
  transition: background var(--dur-fast) var(--ease-out);
}
.wii-btn:hover { background: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent-contrast); }
.wii-btn:active { background: var(--accent); color: var(--accent-contrast); }
.wii-btn:disabled { border-color: var(--void-6); color: var(--void-6); cursor: not-allowed; }

.details-panel { border: var(--border); padding: var(--sp-2) var(--sp-2) var(--sp-2); }
.details-panel .dp-title { font-family: var(--font-display); font-size: var(--text-h2); line-height: 1.1; }
.details-panel .dp-sub { color: var(--muted); font-size: var(--text-h4); }
.details-panel .dp-body { margin-top: var(--sp-1); font-size: var(--text-body); }
.hl { background: var(--red); }

.currency-card { border: 1px solid var(--ink); border-radius: var(--r-currency); padding: var(--sp-3); text-align: center; }
.currency-card img { width: 90px; margin: 0 auto var(--sp-2); }
.currency-card .price { font-family: var(--font-mono); color: var(--gold-bright); }

.state-list { list-style: none; padding: 0; display: grid; gap: var(--sp-1); font-size: var(--text-body-sm); }
.state-list li { display: flex; justify-content: space-between; gap: var(--sp-2); border-bottom: 1px solid var(--void-4); padding-bottom: var(--sp-1); }
.state-list .mono { color: var(--muted); }

/* Device frame composite */
.device {
  width: min(320px, 100%); margin-inline: auto;
  border: var(--border-w) solid var(--void-7); border-radius: var(--r-ad);
  background: var(--void-0); overflow: hidden;
  box-shadow: var(--sh-rb);
}
.device .d-bar { background: var(--void-1); padding: var(--sp-1) var(--sp-2); display: flex; justify-content: space-between; align-items: center; box-shadow: var(--sh-b); }
.device .d-bar .t { font-weight: 600; font-size: var(--text-body-sm); }
.device .d-bar svg { width: 20px; height: 20px; color: var(--gold); }
.device .d-body { padding: var(--sp-2); display: grid; gap: var(--sp-2); }
.device .d-tab { background: var(--void-2); border-top: 1px solid var(--void-3); padding: var(--sp-1) var(--sp-2); display: flex; justify-content: space-around; }
.device .d-tab svg { width: 22px; height: 22px; color: var(--muted); }
.device .d-tab svg.on { color: var(--gold-bright); }
.device .details-panel .dp-title { font-size: var(--text-h3); }

/* ---- Shadows & borders (09) ---- */
.shadow-demo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 900px) { .shadow-demo { grid-template-columns: minmax(0, 1fr); } }
.shadow-demo .box { background: var(--void-4); padding: var(--sp-3); font-family: var(--font-mono); font-size: var(--text-caption); text-align: center; }
.sh-demo-rb { box-shadow: var(--sh-rb); }
.sh-demo-b { box-shadow: var(--sh-b); }
.sh-demo-t { box-shadow: var(--sh-t); }
.radius-demo { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.radius-demo .r { width: 92px; height: 92px; border: var(--border); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-label); text-align: center; }
.r--currency { border-radius: var(--r-currency); }
.r--ad { border-radius: var(--r-ad); }
.r--pill { border-radius: var(--r-pill); width: 140px; height: 48px; }
.divider-demo { border-top: var(--divider); padding-top: var(--sp-1); font-family: var(--font-mono); font-size: var(--text-caption); color: var(--muted); }

/* ---- Motion (10) ---- */
.motion-stage { border: var(--border-thin); padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.type-demo { font-family: var(--font-display); font-size: var(--text-h2); overflow: hidden; white-space: nowrap; width: 16ch; border-right: var(--border-w) solid var(--gold-bright); }
.js .type-demo.play { animation: typeon var(--dur-type) var(--ease-type) both, caret 800ms step-end infinite; }
@keyframes typeon { from { width: 0; } to { width: 16ch; } }
@keyframes caret { 50% { border-color: transparent; } }
.shimmer { height: 16px; background: linear-gradient(90deg, var(--void-4) 25%, var(--void-7) 40%, var(--void-4) 55%); background-size: 300% 100%; animation: shim 1600ms linear infinite; }
@keyframes shim { from { background-position: 100% 0; } to { background-position: 0 0; } }
.js .fade-demo { opacity: 0; } /* js-gated — fails visible without JS */
.js .fade-demo.play { animation: fadein var(--dur-slow) var(--ease-out) both; opacity: 1; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---- Layout (11) ---- */
.ruler { display: flex; align-items: flex-end; gap: var(--sp-2); }
.ruler .bar { background: var(--gold); width: var(--sp-2); }
.ruler figcaption, .ruler .lbl { font-family: var(--font-mono); font-size: var(--text-label); color: var(--muted); }
.portrait-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: var(--sp-2); }
.portrait-demo .ph { border: 1px solid var(--void-4); aspect-ratio: 9 / 19; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-label); color: var(--muted); text-align: center; padding: var(--sp-1); }

/* ---- Voice (12) ---- */
.voice-quote { font-family: var(--font-display); font-size: var(--text-h2); line-height: 1.2; max-width: 22ch; }
.copy-sample { border-left: var(--divider); padding: var(--sp-1) var(--sp-2); margin: var(--sp-2) 0; }
.copy-sample p { font-size: var(--text-body-sm); }
.copy-sample .src { font-family: var(--font-mono); font-size: var(--text-label); color: var(--muted); }
.vocab { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-3); }
@media (max-width: 700px) { .vocab { grid-template-columns: minmax(0,1fr); } }
.vocab ul { list-style: none; padding: 0; display: grid; gap: 6px; font-size: var(--text-body-sm); }
.vocab .in li::before { content: "✓ "; color: var(--gold-bright); }
.vocab .out li::before { content: "✕ "; color: var(--red); }

/* ---- AI policy (13) ---- */
.stance { font-family: var(--font-display); font-size: var(--text-h1); letter-spacing: var(--ls-display); line-height: 1.1; }
.callout { border: var(--border); padding: var(--sp-3); }
.callout .k { font-family: var(--font-mono); font-size: var(--text-label); color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; }

/* ---- Sub-brands (14) ---- */
.arch { display: grid; gap: var(--sp-2); justify-items: center; }
.arch .node { border: var(--border); padding: var(--sp-1) var(--sp-3); font-family: var(--font-display); }
.arch .kids { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.arch .kid { border: 1px solid var(--void-4); padding: var(--sp-1) var(--sp-2); font-size: var(--text-body-sm); color: var(--muted); }

/* ---- Governance (15) ---- */
.name-spec { font-family: var(--font-mono); font-size: var(--text-body); border: var(--border-thin); padding: var(--sp-2) var(--sp-3); overflow-x: auto; }
.name-spec b { color: var(--gold-bright); font-weight: 400; }

/* ---- Alternate toggles ---- */
.alt-toggle { display: inline-flex; gap: 0; border: var(--border-thin); }
.alt-toggle button { padding: 6px 14px; font-family: var(--font-mono); font-size: var(--text-caption); color: var(--muted); }
.alt-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--void-0); }

/* ---- Footer ---- */
.foot { padding: var(--sp-4); text-align: center; font-family: var(--font-mono); font-size: var(--text-caption); color: var(--muted); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js .invite { opacity: 1; transform: none; transition: none; }
  .shimmer, .js .type-demo.play, .js .fade-demo.play { animation: none; }
  .type-demo { width: auto; border-right: none; }
  .fade-demo { opacity: 1; }
  * { transition-duration: 1ms !important; }
}

/* ---- Print — the dark book prints as a light document.
   The token flip itself lives in tokens.css (it is a token concern). ---- */
@media print {
  body { background: var(--void-0); color: var(--ink); }
  .sidebar, .burger, .invite, .alt-toggle, .skip { display: none !important; }
  main { margin-left: 0; }
  .sec { break-before: page; border-bottom: none; padding: 1.2cm 0; }
  .cover { min-height: auto; break-before: auto; }
  .rv, .invite, .fade-demo { opacity: 1 !important; transform: none !important; }
  .type-demo { width: auto; border-right: none; }
  .logo-stage { background: var(--black); }
  .chip, .ramp .step, .pair, .hl { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { text-decoration: none; color: inherit; }
}