/* =========================================================================
   bdg — Living Brand & Design System site styles
   Layered on top of ../colors_and_type.css (tokens).
   Editorial book, not a SaaS template.
   ========================================================================= */

/* --- THEME ROOT ---------------------------------------------------------- */
:root {
  --paper:        var(--ink-98);
  --paper-2:      var(--ink-96);
  --ink:          var(--ink-05);
  --ink-2:        var(--ink-50);
  --ink-3:        var(--ink-60);
  --line:         var(--ink-85);
  --line-2:       var(--ink-92);
  --signal:       var(--c-orange);
  --signal-soft:  rgba(245, 89, 16, 0.12);
  --rail-w:       300px;
  --gutter:       80px;
  --type-mono:    'DM Mono', ui-monospace, Menlo, monospace;
  --ease-bdg:     cubic-bezier(0.22, 1, 0.36, 1);
  --neq:          "\002260"; /* ≠ */
}

html[data-theme="dark"] {
  --paper:        var(--ink-05);
  --paper-2:      #131316;
  --ink:          #F4F4F5;
  --ink-2:        #A2A2A9;
  --ink-3:        #727279;
  --line:         rgba(255,255,255,0.14);
  --line-2:       rgba(255,255,255,0.08);
  --signal:       var(--c-yellow);
  --signal-soft:  rgba(255, 226, 65, 0.14);
}

/* --- RESET-ISH ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; padding: 0; }
hr.hair { border: 0; border-top: 0.8px solid var(--line); margin: 0; }
::selection { background: var(--signal); color: var(--paper); }
html[data-theme="dark"] ::selection { color: var(--ink-05); }

/* --- LAYOUT -------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  min-height: 100vh;
}

/* === LEFT RAIL =========================================================== */
.rail {
  border-right: 0.8px solid var(--line);
  background: var(--paper);
  padding: 28px 28px 28px 32px;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 26px;
  z-index: 50;
}
.rail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.rail-mark {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
.rail-mark .mark {
  width: 28px; height: 28px; display: block;
  background-color: var(--ink);
  -webkit-mask: url('../assets/logo.svg') center/contain no-repeat;
          mask: url('../assets/logo.svg') center/contain no-repeat;
}
.rail-mark .lockup {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.3;
}
.rail-mark .lockup strong { color: var(--ink); display: block; letter-spacing: 0.20em; font-weight: 500; }

.toc-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.toc-group {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 18px 0 6px;
  border-top: 0.8px solid var(--line);
  margin-top: 4px;
}
.toc-list > li:first-child .toc-item,
.toc-list > li:first-child + li.toc-group { /* cover sits alone */ }
.toc-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 9px 8px 9px 0;
  border-top: 0.8px solid var(--line-2);
  cursor: pointer;
  transition: background 220ms var(--ease-bdg), padding-left 220ms var(--ease-bdg);
}
/* first item after a group label has no doubled border */
.toc-group + li .toc-item { border-top: 0; }
/* last item in the rail closes the list with one bottom border */
.toc-list > li:last-child .toc-item { border-bottom: 0.8px solid var(--line-2); }
.toc-item:hover, .toc-item:focus-visible {
  background: var(--paper-2);
  padding-left: 8px;
  outline: none;
}
.toc-item:hover .toc-num,
.toc-item:focus-visible .toc-num,
.toc-item[aria-current="true"] .toc-num { color: var(--signal); }
.toc-item[aria-current="true"] {
  background: var(--paper-2);
  padding-left: 8px;
}
.toc-item[aria-current="true"]::before {
  content: ""; position: absolute;
}
.toc-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: color 200ms var(--ease-bdg);
}
.toc-label {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: -0.005em;
  line-height: 1.05;
  color: var(--ink);
}

.rail-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 0.8px solid var(--line-2);
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
}
.rail-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rail-actions { display: flex; gap: 4px; }
.icon-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.8px solid var(--line);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  background: transparent;
  cursor: pointer;
  transition: background 180ms var(--ease-bdg), color 180ms var(--ease-bdg), border-color 180ms var(--ease-bdg);
}
.icon-btn:hover { background: var(--ink); color: var(--paper); }
.kbd {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 3px 6px;
  border: 0.8px solid var(--line);
  color: var(--ink-2);
}

/* === MAIN COLUMN ========================================================= */
.stream {
  position: relative;
  padding: 0;
  min-width: 0;
  overflow-x: hidden;
}

/* Reading progress */
.progress {
  position: fixed;
  top: 0; left: var(--rail-w);
  right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.progress::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: var(--signal);
  transition: width 80ms linear;
}

/* Each section */
.chapter {
  border-bottom: 0;
  padding: 96px var(--gutter) 60px;
  position: relative;
  scroll-margin-top: 8px;
  min-width: 0;
  overflow-x: clip;
}

.chapter-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 80px;
}
.chapter-head .crumbs {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.crumbs .sep { opacity: 0.5; }
.chapter-head .chap-num {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.chapter-head .chap-title {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(36px, 7.5vw, 112px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.chapter-head .chap-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  text-transform: uppercase;
  text-align: right;
  display: flex; flex-direction: column; gap: 4px;
  white-space: normal;
  min-width: 0;
  overflow-wrap: anywhere;
}
.chapter-head .chap-meta strong { color: var(--ink); font-weight: 500; }

/* Section sub-heading */
.sub {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 22px;
}
.sub .dot { width: 7px; height: 7px; background: var(--signal); display: inline-block; }
.sub .ix { color: var(--signal); font-variant-numeric: tabular-nums; }

/* Generic overflow safety — keep grid children from forcing horizontal scroll */
.opener > *,
.chapter-head > *,
.chapter > *,
.found-grid > *,
.duality > *,
.promise-band > *,
.contrast > *,
.tone-grid > *,
.spectrum > *,
.dual-prop > *,
.ledger > *,
.market-grid > *,
.specimen-grid > *,
.group-cards > * { min-width: 0; }
code, .body code { overflow-wrap: anywhere; word-break: break-word; }
img, svg, canvas, video { max-width: 100%; }
table { max-width: 100%; }
.stage svg, .preview svg { max-width: 100%; height: auto; }

h2.section-title {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(24px, 4vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  margin: 0 0 28px;
  max-width: 22ch;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h3.block-title {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
}
.lede {
  font-family: var(--f-body);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 32ch;
  margin: 0;
  text-wrap: pretty;
}
.body { font-family: var(--f-body); font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 60ch; margin: 0; }
.body strong { color: var(--ink); font-weight: 600; }

/* Inequality glyph */
.neq {
  font-family: var(--f-headline);
  font-weight: 650;
  color: var(--signal);
  display: inline-block;
  padding: 0 0.1em;
}

/* === PAGE FOOT (per-page nav between chapters) ============================ */
.page-foot {
  border-top: 0.8px solid var(--line);
  margin-top: 80px;
  padding: 28px var(--gutter) 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.page-foot-meta {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 4px;
}
.page-foot-meta .pf-current {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.page-foot-meta .pf-of {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.page-foot-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 0.8px solid var(--line);
}
.pf-link {
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: baseline;
  padding: 28px 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: background 220ms var(--ease-bdg), padding 220ms var(--ease-bdg);
}
.pf-link.prev { padding-right: 24px; border-right: 0.8px solid var(--line); }
.pf-link.next { padding-left: 24px; text-align: right; grid-template-columns: 1fr 80px; }
.pf-link:hover:not(.disabled) { background: var(--paper-2); }
.pf-link.prev:hover:not(.disabled) { padding-left: 16px; }
.pf-link.next:hover:not(.disabled) { padding-right: 16px; }
.pf-link.disabled {
  opacity: 0.4;
  cursor: default;
}
.pf-link .pf-dir {
  grid-row: 1;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pf-link.prev .pf-dir { grid-column: 1 / -1; }
.pf-link.next .pf-dir { grid-column: 1 / -1; }
.pf-link .pf-num {
  grid-row: 2;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pf-link.prev .pf-num { grid-column: 1; }
.pf-link.next .pf-num { grid-column: 2; }
.pf-link .pf-name {
  grid-row: 2;
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pf-link.prev .pf-name { grid-column: 2; }
.pf-link.next .pf-name { grid-column: 1; }
.pf-link.next:hover:not(.disabled) .pf-name { color: var(--signal); }
.pf-link.prev:hover:not(.disabled) .pf-name { color: var(--signal); }

@media (max-width: 1100px) {
  .page-foot { padding: 24px var(--gutter) 100px; }
  .page-foot-pager { grid-template-columns: 1fr; }
  .pf-link.prev { padding-right: 0; border-right: 0; border-bottom: 0.8px solid var(--line); }
  .pf-link.next { padding-left: 0; text-align: left; grid-template-columns: 80px 1fr; }
  .pf-link.next .pf-num { grid-column: 1; }
  .pf-link.next .pf-name { grid-column: 2; }
}

/* === HOME PAGE — group cards + meta strip ================================ */

.home-after {
  padding: 60px var(--gutter) 80px;
  border-top: 0.8px solid var(--line);
  display: flex; flex-direction: column; gap: 64px;
}
.home-section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 32px;
  border-bottom: 0.8px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 22px;
}
.home-section-head h3 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: clamp(28px, 3vw, 44px); line-height: 0.98; letter-spacing: -0.015em;
  margin: 0;
}
.home-section-head .meta {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
  text-align: right;
  white-space: normal;
  min-width: 0;
}

.group-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.group-card {
  border: 0.8px solid var(--line);
  padding: 28px 28px 30px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: background 200ms var(--ease-bdg), padding 200ms var(--ease-bdg);
  position: relative;
}
.group-card:hover { background: var(--paper-2); padding-left: 36px; }
.group-card .ix {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--signal);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.group-card .ix .ct { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.group-card h4 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: clamp(28px, 3vw, 44px); line-height: 0.98; letter-spacing: -0.02em;
  margin: 0;
}
.group-card .lede {
  font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--ink-2);
  margin: 0; max-width: 32ch;
}
.group-card .list {
  margin-top: auto;
  display: flex; flex-direction: column;
  border-top: 0.8px solid var(--line);
  padding-top: 14px;
}
.group-card .list .row {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 10px; align-items: baseline;
  padding: 8px 0;
  border-bottom: 0.8px solid var(--line-2);
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.10em;
}
.group-card .list .row:last-child { border-bottom: 0; }
.group-card .list .row .n {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
}
.group-card .list .row .l {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 13px; letter-spacing: -0.005em; color: var(--ink);
}
.group-card .list .row .a {
  color: var(--ink-3);
  font-family: var(--f-mono); font-size: 11px;
}
.group-card .open-link {
  margin-top: 12px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--signal);
  display: flex; align-items: baseline; justify-content: space-between;
}

.home-meta-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 0.8px solid var(--line);
}
.home-meta-strip > div {
  padding: 20px 22px 22px;
  border-right: 0.8px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.home-meta-strip > div:last-child { border-right: 0; }
.home-meta-strip .k {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
}
.home-meta-strip .v {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 22px; line-height: 1.0; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.home-meta-strip .v .signal { color: var(--signal); }
.home-meta-strip .sub {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}

.recent-log {
  display: flex; flex-direction: column;
  border-top: 0.8px solid var(--line);
}
.recent-log .entry {
  display: grid;
  grid-template-columns: 120px 90px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 0.8px solid var(--line);
}
.recent-log .entry .date {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.recent-log .entry .chap {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 13px; letter-spacing: -0.005em; color: var(--signal);
}
.recent-log .entry .note {
  font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--ink);
}

@media (max-width: 1100px) {
  .group-cards { grid-template-columns: 1fr; }
  .home-meta-strip { grid-template-columns: 1fr 1fr; }
  .home-meta-strip > div { border-bottom: 0.8px solid var(--line); }
  .home-meta-strip > div:nth-child(2) { border-right: 0; }
}
@media (max-width: 640px) {
  .home-after { padding: 40px var(--gutter) 80px; gap: 40px; }
  .home-meta-strip { grid-template-columns: 1fr; }
  .home-meta-strip > div { border-right: 0; }
  .recent-log .entry { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
}

/* === HOME (00) — full rebuild =========================================== */

.home {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

/* --- HERO --------------------------------------------------------------- */
.home-hero {
  position: relative;
  padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 80px) clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(28px, 5vw, 56px);
  min-height: 100vh;
  overflow: hidden;
}
.home-hero .cover-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  z-index: 0;
}
.home-hero > * { position: relative; z-index: 1; min-width: 0; }

.home-hero-top, .home-hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(16px, 3vw, 36px);
  font-family: var(--f-mono);
  font-size: clamp(10px, 1vw, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.home-hero-top .mid, .home-hero-bottom .mid { text-align: center; }
.home-hero-top .right, .home-hero-bottom .right { text-align: right; }
.home-hero-top .k,
.home-hero-bottom .k {
  display: block;
  font-size: inherit;
  letter-spacing: inherit;
  margin-bottom: 5px;
}
.home-hero-top .v,
.home-hero-bottom .v {
  display: block;
  color: var(--ink);
  font-weight: 500;
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: 0.12em;
}
.home-hero-bottom { align-items: end; }
.home-hero-bottom .br { display: inline; }

/* CTA */
.home-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 14px 16px 16px;
  border: 0.8px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  transition: background 180ms var(--ease-bdg), color 180ms var(--ease-bdg), padding 200ms var(--ease-bdg);
  min-width: 0;
}
.home-cta:hover { background: var(--ink); color: var(--paper); padding-right: 22px; }
.home-cta .cta-k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
  grid-column: 1 / -1;
}
.home-cta .cta-v {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: -0.005em;
  line-height: 1.05;
}
.home-cta .cta-arrow {
  font-family: var(--f-headline);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 650;
}

/* THESIS */
.home-thesis {
  margin: 0;
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(60px, 14vw, 220px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  align-self: center;
  width: 100%;
}
.home-thesis .line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  animation: home-line-in 800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.home-thesis .line-a { animation-delay: 100ms; }
.home-thesis .line-b { animation-delay: 280ms; }
.home-thesis .line-c { animation-delay: 460ms; }
@keyframes home-line-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Highlight that does NOT push the line's text right of the column edge.
   The block's left edge is shifted back by its own horizontal padding so
   the H of HONESTY aligns with D of DATA. */
.home-thesis .hl-block {
  display: inline-block;
  background: var(--c-yellow);
  color: var(--ink-05) !important;
  padding: 0.04em 0.18em 0.10em;
  line-height: 0.88;
  margin-left: -0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* Animated reveal — block wipes in left→right after the line lands */
  position: relative;
  background-image: linear-gradient(90deg, var(--c-yellow) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  animation: hl-wipe 700ms cubic-bezier(0.22, 1, 0.36, 1) 900ms forwards;
}
@keyframes hl-wipe {
  to { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-thesis .line { animation: none; opacity: 1; transform: none; }
  .home-thesis .hl-block { animation: none; background-position: 0% 0; }
}

/* --- OVERVIEW ----------------------------------------------------------- */
.home-overview,
.home-ineq,
.home-path,
.home-index,
.home-foot {
  padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 80px);
  border-top: 0.8px solid var(--line);
  min-width: 0;
}

.home-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 0.8px solid var(--line);
}
.home-tile {
  padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 30px) clamp(24px, 2.2vw, 32px);
  border-right: 0.8px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.home-tile:last-child { border-right: 0; }
.home-tile .num {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: clamp(48px, 5vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.home-tile .num.mono {
  font-family: var(--f-mono);
  font-size: clamp(22px, 2.2vw, 36px);
  line-height: 1.0;
  letter-spacing: 0.06em;
}
.home-tile .lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 4px;
}
.home-tile .sub {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: auto;
  padding-top: 8px;
  border-top: 0.8px solid var(--line);
}

/* --- THREE INEQUALITIES — full-width stacked rows ----------------------- */
.ineq-stack {
  border-top: 0.8px solid var(--line);
}
.ineq-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1.4fr) minmax(0, 1.2fr) auto;
  gap: clamp(16px, 2.5vw, 36px);
  align-items: baseline;
  padding: clamp(24px, 3vw, 36px) 0;
  border-bottom: 0.8px solid var(--line);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: padding-left 220ms var(--ease-bdg), background 220ms var(--ease-bdg);
  min-width: 0;
}
.ineq-row:hover { padding-left: 16px; background: var(--paper-2); }
.ineq-ix {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.ineq-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em;
  min-width: 0;
}
.ineq-a, .ineq-b {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(28px, 3.5vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.ineq-b { color: var(--ink-2); }
.ineq-glyph {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: clamp(28px, 3vw, 48px);
  color: var(--signal);
  line-height: 1;
}
.ineq-gloss {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 42ch;
}
.ineq-go {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
  align-self: end;
}
.ineq-go .go-v {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.ineq-row:hover .ineq-go .go-v { color: var(--signal); }

/* --- READING PATH ------------------------------------------------------- */
.path-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 0.8px solid var(--line);
}
.path-step {
  display: grid;
  grid-template-columns: 56px 56px minmax(0, 1fr) minmax(0, 1.4fr) 28px;
  gap: clamp(14px, 2vw, 24px);
  align-items: baseline;
  padding: clamp(18px, 2.4vw, 28px) 0;
  border-bottom: 0.8px solid var(--line);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: padding-left 220ms var(--ease-bdg), background 220ms var(--ease-bdg);
  min-width: 0;
}
.path-step:hover { padding-left: 16px; background: var(--paper-2); }
.path-step .step-n {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.path-step .step-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  align-self: center;
}
.path-step .step-title {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.0;
  letter-spacing: -0.01em;
}
.path-step .step-why {
  font-family: var(--f-body);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.5;
  color: var(--ink-2);
}
.path-step .step-arrow {
  font-family: var(--f-mono);
  font-size: 18px;
  color: var(--ink-3);
  text-align: right;
  align-self: center;
  transition: transform 220ms var(--ease-bdg), color 220ms;
}
.path-step:hover .step-arrow { color: var(--signal); transform: translateX(6px); }

/* --- FULL INDEX --------------------------------------------------------- */
.idx-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
}
.idx-col { min-width: 0; display: flex; flex-direction: column; }
.idx-col-hed {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 14px;
  border-bottom: 0.8px solid var(--line);
  margin-bottom: 4px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.idx-col-hed .ct { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.idx-col ul { list-style: none; margin: 0; padding: 0; }
.idx-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 0.8px solid var(--line-2);
  text-decoration: none;
  color: var(--ink);
  transition: padding-left 200ms var(--ease-bdg), background 200ms var(--ease-bdg);
  min-width: 0;
}
.idx-row:hover { padding-left: 8px; background: var(--paper-2); }
.idx-row .n {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.idx-row .l {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: -0.005em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.idx-row .k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
}
.idx-row:hover .l { color: var(--signal); }

/* --- CHANGELOG / META --------------------------------------------------- */
.changelog {
  border-top: 0.8px solid var(--line);
  border-bottom: 0.8px solid var(--line);
  margin-bottom: 32px;
}
.change-row {
  display: grid;
  grid-template-columns: 110px 200px minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 0.8px solid var(--line-2);
}
.change-row:last-child { border-bottom: 0; }
.cr-date {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cr-chap {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.cr-note {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.home-credits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 24px;
  border-top: 0.8px solid var(--line);
}
.home-credits .k { display: block; margin-bottom: 4px; }
.home-credits .v {
  display: block;
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.06em;
}

/* --- RESPONSIVE --------------------------------------------------------- */
@media (max-width: 1100px) {
  .home-hero-top, .home-hero-bottom { grid-template-columns: 1fr 1fr; }
  .home-hero-top .mid, .home-hero-bottom .mid { display: none; }
  .home-hero-bottom { grid-template-columns: 1fr; gap: 18px; align-items: stretch; }
  .home-hero-bottom .right { text-align: left; }
  .home-tiles { grid-template-columns: 1fr; }
  .home-tile { border-right: 0; border-bottom: 0.8px solid var(--line); }
  .home-tile:last-child { border-bottom: 0; }
  .ineq-row { grid-template-columns: 40px minmax(0, 1fr); }
  .ineq-pair { grid-column: 2; }
  .ineq-gloss { grid-column: 2; }
  .ineq-go { grid-column: 2; text-align: left; white-space: normal; }
  .ineq-go .go-v { font-size: 14px; }
  .path-step { grid-template-columns: 44px 44px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 6px; }
  .path-step .step-why { grid-column: 3; }
  .path-step .step-arrow { display: none; }
  .idx-cols { grid-template-columns: 1fr; gap: 28px; }
  .change-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .home-credits { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  .home-hero-top, .home-hero-bottom { grid-template-columns: 1fr; gap: 14px; text-align: left !important; }
  .home-hero-top .right, .home-hero-bottom .right { text-align: left; }
  .home-thesis { font-size: clamp(48px, 18vw, 96px); letter-spacing: -0.03em; }
  .home-thesis .hl-block { margin-left: -0.16em; padding: 0.04em 0.16em 0.10em; }
  .home-hero-bottom .br { display: none; }
  .ineq-row { padding: 22px 0; }
  .ineq-a, .ineq-b { font-size: clamp(22px, 8vw, 36px); }
  .ineq-glyph { font-size: clamp(22px, 7vw, 32px); }
  .path-step { grid-template-columns: 36px 1fr; row-gap: 4px; }
  .path-step .step-n { grid-row: 1 / 3; }
  .path-step .step-num { grid-column: 2; font-size: 10px; }
  .path-step .step-title { grid-column: 2; font-size: 18px; }
  .path-step .step-why { grid-column: 2; }
}

/* === COVER (legacy) ===================================================== */
.cover {
  position: relative;
  min-height: calc(100vh - 200px);
  padding: 64px var(--gutter) 80px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 40px;
  overflow: hidden;
  border-bottom: 0;
  max-width: 100%;
  min-width: 0;
}
.cover-stage { min-width: 0; max-width: 100%; }
.cover-stage > * { min-width: 0; max-width: 100%; }
.cover-top, .cover-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
.cover-top .right, .cover-bottom .right { text-align: right; }
.cover-top .mid, .cover-bottom .mid { text-align: center; }
.cover-top strong, .cover-bottom strong { color: var(--ink); font-weight: 500; display: block; margin-top: 4px; font-size: 13px; letter-spacing: 0.12em; }

.cover-stage {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 48px;
  align-content: end;
  position: relative;
}

.cover-thesis {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(40px, 11vw, 220px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  margin: 0;
  font-stretch: 80%;
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  hyphens: auto;
}
.cover-thesis .line { display: block; }
.cover-thesis .accent {
  display: inline-block;
  padding: 0.04em 0.18em 0.10em;
  line-height: 0.88;
  background: var(--c-yellow);
  color: var(--ink-05) !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cover-thesis .accent.b { background: var(--c-blue);   color: #FFFFFF !important; }
.cover-thesis .accent.o { background: var(--c-orange); color: #FFFFFF !important; }
.cover-thesis .accent.g { background: var(--c-green);  color: var(--ink-05) !important; }
.cover-thesis .accent.r { background: var(--c-red);    color: #FFFFFF !important; }
.cover-thesis .accent.p { background: var(--c-purple); color: var(--ink-05) !important; }

/* === HIGHLIGHT SYSTEM — primary emphasis pattern ========================= */
/* Default emphasis is a solid colored block tight to cap-height, never a
   re-coloring of the characters. Colors rotate across the palette — orange
   is one note, not the song. */
.hl {
  display: inline-block;
  padding: 0.04em 0.18em 0.10em;
  line-height: 0.88;
  font-family: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl-y { background: var(--c-yellow); color: var(--ink-05) !important; }
.hl-b { background: var(--c-blue);   color: #FFFFFF !important; }
.hl-o { background: var(--c-orange); color: #FFFFFF !important; }
.hl-g { background: var(--c-green);  color: var(--ink-05) !important; }
.hl-r { background: var(--c-red);    color: #FFFFFF !important; }
.hl-p { background: var(--c-purple); color: var(--ink-05) !important; }
.hl-ink   { background: var(--ink);   color: var(--paper); }
.hl-paper { background: var(--paper); color: var(--ink);   outline: 0.8px solid currentColor; outline-offset: -0.4px; }

/* Pullquote and inline emphasis also adopt the highlight block. */
.pullquote .accent {
  display: inline-block;
  padding: 0.04em 0.18em 0.10em;
  line-height: 0.88;
  background: var(--c-yellow);
  color: var(--ink-05) !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.pullquote .accent.b { background: var(--c-blue);   color: #FFFFFF !important; }
.pullquote .accent.o { background: var(--c-orange); color: #FFFFFF !important; }
.pullquote .accent.g { background: var(--c-green);  color: var(--ink-05) !important; }
.pullquote .accent.r { background: var(--c-red);    color: #FFFFFF !important; }
.pullquote .accent.p { background: var(--c-purple); color: var(--ink-05) !important; }
.cover-thesis .strike {
  background: var(--ink); color: var(--paper);
  padding: 0.02em 0.12em 0.06em;
  display: inline-block;
}

.inequalities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  border-top: 0.8px solid var(--line);
  padding-top: 28px;
}
.ineq {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 16px;
  align-items: start;
  opacity: 0;
  transform: translateY(14px);
  animation: ineq-in 700ms var(--ease-bdg) forwards;
}
.ineq:nth-child(1) { animation-delay: 320ms; }
.ineq:nth-child(2) { animation-delay: 540ms; }
.ineq:nth-child(3) { animation-delay: 760ms; }
.ineq .ix {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}
.ineq .pair {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px;
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 0.98;
  letter-spacing: -0.005em;
}
.ineq .pair .b { color: var(--ink-2); }
.ineq .pair .a { color: var(--ink); }
.ineq .glyph {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: 1.1em;
  color: var(--signal);
}
.ineq .gloss {
  grid-column: 1 / -1;
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 10px;
  max-width: 36ch;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

@keyframes ineq-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Cover particle / hairline canvas */
.cover-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}
.cover-stage > * { position: relative; z-index: 1; }
.cover-top, .cover-bottom { position: relative; z-index: 1; }

/* === GENERIC PRIMITIVES ================================================== */

/* Two-up structural compare */
.contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 0.8px solid var(--line);
  border-bottom: 0.8px solid var(--line);
}
.contrast > div {
  padding: 28px 32px 32px;
}
.contrast > div + div {
  border-left: 0.8px solid var(--line);
}
.contrast .hed {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 10px;
}
.contrast .hed .tag {
  font-family: var(--f-headline);
  font-weight: 650; font-size: 11px;
  background: var(--ink); color: var(--paper);
  padding: 2px 6px 3px;
  letter-spacing: 0.08em;
}
.contrast.is .hed .tag { background: var(--c-blue); color: #fff; }
.contrast.isnot .hed .tag { background: var(--c-red); color: #fff; }
.contrast ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.contrast li {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.005em;
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: baseline;
}
.contrast li::before {
  content: "→";
  font-family: var(--f-mono);
  font-size: 18px;
  color: var(--ink-2);
}
.contrast.isnot li::before { content: "×"; color: var(--c-red); }
.contrast.is li::before { color: var(--c-blue); }

/* "Read like a label" tag */
.tag-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0.8px solid var(--ink);
  padding: 5px 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
}
.tag-pill .dot { width: 6px; height: 6px; background: var(--signal); display: inline-block; border-radius: 50%; }

/* Stat / data cell */
.stat {
  border-top: 0.8px solid var(--line);
  padding: 22px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.stat .num {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: clamp(56px, 6vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.stat .lbl {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2);
}

/* Color / Token cards */
.swatch {
  display: grid; grid-template-rows: 96px auto;
  border: 0.8px solid var(--line);
  cursor: pointer;
  background: var(--paper);
  transition: transform 200ms var(--ease-bdg);
}
.swatch:hover { transform: translateY(-2px); }
.swatch .chip { background: var(--c, var(--ink-05)); width: 100%; height: 100%; }
.swatch .meta { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.swatch .name { font-family: var(--f-headline); font-weight: 650; text-transform: uppercase; font-size: 14px; letter-spacing: -0.005em; }
.swatch .hex { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2); text-transform: uppercase; }

/* The "section opener" canvas — first impression of a chapter */
.opener {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}
.opener .right {
  border-left: 0.8px solid var(--line);
  padding-left: 40px;
  display: flex; flex-direction: column; gap: 24px;
}
.opener .ix {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* Promise or quote */
.pullquote {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(28px, 4vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  max-width: 22ch;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.pullquote .accent { color: var(--signal); }

/* Section divider strip */
.strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  border-top: 0.8px solid var(--line);
  border-bottom: 0.8px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.strip .crawl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === SPECIFIC SECTION LAYOUTS ============================================ */

/* 01 — Brand Foundation */
.found-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 36px 60px;
  margin-top: 28px;
}
.position-card {
  border: 0.8px solid var(--line);
  padding: 28px 30px 30px;
  background: var(--paper);
  display: flex; flex-direction: column; gap: 12px;
}
.position-card.invert {
  background: var(--ink); color: var(--paper);
  border-color: transparent;
}
.position-card .kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  display: flex; align-items: center; gap: 8px;
}
.position-card .kicker .ix { color: inherit; font-variant-numeric: tabular-nums; }
.position-card.invert .kicker { color: var(--c-yellow); }
.position-card h3 {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0;
}
.position-card p {
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 30ch;
  text-wrap: pretty;
}

/* Archetype duality */
.duality {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 0.8px solid var(--line);
  margin-top: 8px;
}
.duality > .pole {
  padding: 36px 36px 40px;
  display: flex; flex-direction: column; gap: 22px;
  min-height: 360px;
}
.duality > .pole + .pole { border-left: 0.8px solid var(--line); }
.duality .pole h4 {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(32px, 4vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
}
.duality .pole .lead {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.duality .pole .lead em { font-style: normal; color: var(--signal); }
.duality .pole .rows {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-top: auto;
}
.duality .pole .row {
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-top: 0.8px solid var(--line);
  font-family: var(--f-body);
  font-size: 15px;
  letter-spacing: -0.005em;
}
.duality .pole .row span:first-child { font-family: var(--f-headline); font-weight: 650; text-transform: uppercase; font-size: 16px; }
.duality .pole .row .pipe { color: var(--signal); text-align: center; }

/* Promise band */
.promise-band {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  border: 0.8px solid var(--line);
  background: var(--paper-2);
}
.promise-band .a {
  padding: 44px 44px 48px;
  display: flex; flex-direction: column; gap: 18px;
}
.promise-band .b {
  border-left: 0.8px solid var(--line);
  padding: 44px 36px 48px;
  display: flex; flex-direction: column; gap: 16px;
}
.promise-band h4 {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(26px, 3.5vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.promise-band p { font-family: var(--f-body); font-size: 17px; line-height: 1.45; color: var(--ink-2); margin: 0; max-width: 38ch; }
.promise-band .kicker {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal);
}

/* Section scaffolds (chapters not yet built out get a teaser) */
.coming {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.coming .card {
  border: 0.8px solid var(--line);
  padding: 18px 20px 20px;
  background: var(--paper);
  display: flex; flex-direction: column; gap: 8px;
}
.coming .card .ix {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.coming .card .title {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.coming .card .desc {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}
.coming .card .status {
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}
.coming .card .status .dot { width: 6px; height: 6px; background: var(--ink-3); border-radius: 50%; }
.coming .card .status.live .dot { background: var(--c-green); }
.coming .card .status.live { color: var(--c-green); }

/* === VOICE CHAPTER WIDGETS ================================================ */

/* Tone-attribute cards */
.tone-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 0.8px solid var(--line);
}
.tone-card {
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
  border-right: 0.8px solid var(--line);
  min-height: 280px;
}
.tone-card:last-child { border-right: 0; }
.tone-card .ix {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.tone-card h4 {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0;
}
.tone-card .row {
  display: grid; grid-template-columns: 18px 1fr; gap: 8px;
  font-family: var(--f-body); font-size: 13px; line-height: 1.45;
  align-items: baseline;
  color: var(--ink-2);
}
.tone-card .row.is::before { content: "✓"; color: var(--c-green); font-weight: 700; }
.tone-card .row.isnt::before { content: "×"; color: var(--c-red); font-weight: 700; }
.tone-card .row span { color: var(--ink); }

/* Tone spectrum bar */
.spectrum {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-rows: auto auto;
}
.spec-axis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 0.8px solid var(--line);
}
.spec-axis > div {
  padding: 16px 18px;
  border-right: 0.8px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; flex-direction: column; gap: 8px;
  min-height: 86px;
}
.spec-axis > div:last-child { border-right: 0; }
.spec-axis .ix { color: var(--signal); }
.spec-axis .lbl { color: var(--ink); font-family: var(--f-headline); font-weight: 650; font-size: 14px; letter-spacing: 0.02em; }
.spec-axis .pos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-top: auto;
}
.spec-axis .pos span { height: 4px; background: var(--line); }
.spec-axis .pos span.on { background: var(--signal); }
.spec-samples {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.spec-samples > div {
  padding: 20px 18px 22px;
  border-right: 0.8px solid var(--line);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  min-height: 140px;
}
.spec-samples > div:last-child { border-right: 0; }
.spec-samples .sig {
  display: block; margin-top: 12px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}

/* USP / ESP big cards */
.dual-prop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 0.8px solid var(--line);
}
.dual-prop > div {
  padding: 36px 36px 40px;
  display: flex; flex-direction: column; gap: 16px;
}
.dual-prop > div + div { border-left: 0.8px solid var(--line); background: var(--paper-2); }
.dual-prop .kind {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--signal);
}
.dual-prop h4 {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.dual-prop .rationale {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 36ch;
}
.dual-prop .built {
  margin-top: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 0.8px solid var(--line);
  padding-top: 16px;
  gap: 12px;
}
.dual-prop .built div { display: flex; flex-direction: column; gap: 4px; }
.dual-prop .built .lbl { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.dual-prop .built .val { font-family: var(--f-headline); font-weight: 650; font-size: 14px; text-transform: uppercase; }

/* Phrase library */
.phrase-tools {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.phrase-search {
  flex: 1; min-width: 240px;
  border: 0.8px solid var(--line);
  padding: 10px 14px;
  font-family: var(--f-body);
  font-size: 15px;
  background: var(--paper);
  color: var(--ink);
  outline: 0;
}
.phrase-search::placeholder { color: var(--ink-3); }
.phrase-search:focus { border-color: var(--signal); }
.phrase-chip {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: 0.8px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: background 160ms var(--ease-bdg);
}
.phrase-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.phrase-chip:hover { background: var(--paper-2); }
.phrase-chip[aria-pressed="true"]:hover { background: var(--ink); }

.phrase-list { border-top: 0.8px solid var(--line); }
.phrase-row {
  display: grid;
  grid-template-columns: 90px 1fr 110px 40px;
  align-items: baseline;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 0.8px solid var(--line);
  cursor: pointer;
  transition: padding-left 200ms var(--ease-bdg), background 200ms var(--ease-bdg);
}
.phrase-row:hover { padding-left: 12px; background: var(--paper-2); }
.phrase-row .ix { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.phrase-row .txt { font-family: var(--f-body); font-size: 18px; line-height: 1.4; color: var(--ink); max-width: 56ch; }
.phrase-row .ctx { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); justify-self: end; }
.phrase-row .copy-icn { font-family: var(--f-mono); font-size: 14px; color: var(--ink-3); justify-self: end; transition: color 160ms; }
.phrase-row:hover .copy-icn { color: var(--signal); }

/* Word ledger */
.ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 0.8px solid var(--line);
}
.ledger > div {
  padding: 24px 28px 28px;
}
.ledger > div + div { border-left: 0.8px solid var(--line); }
.ledger .col-hed {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.ledger .tag {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: 11px;
  padding: 3px 7px 4px;
  letter-spacing: 0.08em;
  color: #fff;
}
.ledger .lean .tag { background: var(--c-green); color: var(--ink-05); }
.ledger .avoid .tag { background: var(--c-red); }
.ledger .col-title {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.word-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.word {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 6px 10px;
  border: 0.8px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 160ms var(--ease-bdg), transform 160ms var(--ease-bdg);
}
.word:hover { transform: translateY(-1px); }
.ledger .lean .word:hover { background: rgba(0,209,144,0.12); border-color: var(--c-green); }
.ledger .avoid .word { text-decoration: line-through; text-decoration-color: var(--c-red); color: var(--ink-2); }
.ledger .avoid .word:hover { background: rgba(239,53,62,0.10); border-color: var(--c-red); color: var(--ink); }

/* Sentence diagram */
.sent-stack {
  display: flex; flex-direction: column; gap: 36px;
}
.sent {
  border: 0.8px solid var(--line);
  padding: 26px 28px 28px;
}
.sent .label {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.sent .label .ix { color: var(--signal); }
.sent .quote {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.sent .parts {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border-top: 0.8px solid var(--line);
}
.sent .parts > div {
  padding: 14px 18px 16px;
  border-right: 0.8px solid var(--line);
}
.sent .parts > div:last-child { border-right: 0; }
.sent .parts .ptag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.sent .parts .ptag::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--signal);
  display: inline-block;
}
.sent .parts .ptxt {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}

@media (max-width: 1100px) {
  .tone-grid { grid-template-columns: 1fr 1fr; }
  .tone-card:nth-child(2n) { border-right: 0; }
  .tone-card { border-bottom: 0.8px solid var(--line); }
  .spec-axis, .spec-samples { grid-template-columns: 1fr; }
  .spec-axis > div, .spec-samples > div { border-right: 0; border-bottom: 0.8px solid var(--line); }
  .dual-prop { grid-template-columns: 1fr; }
  .dual-prop > div + div { border-left: 0; border-top: 0.8px solid var(--line); }
  .ledger { grid-template-columns: 1fr; }
  .ledger > div + div { border-left: 0; border-top: 0.8px solid var(--line); }
  .sent .parts { grid-template-columns: 1fr; }
  .sent .parts > div { border-right: 0; border-bottom: 0.8px solid var(--line); }
  .phrase-row { grid-template-columns: 60px 1fr; gap: 12px; }
  .phrase-row .ctx, .phrase-row .copy-icn { grid-column: 2; justify-self: start; padding-top: 4px; }
}

/* === IDENTITY CHAPTER ===================================================== */

.id-frame {
  border: 0.8px solid var(--line);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.id-frame .mark-img {
  width: 40%;
  aspect-ratio: 25 / 24;
  background-color: var(--mfg, var(--ink));
  -webkit-mask: url(../assets/logo.svg) center/contain no-repeat;
          mask: url(../assets/logo.svg) center/contain no-repeat;
}
.id-frame .id-tag {
  position: absolute;
  left: 14px; bottom: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 8px;
}
.id-frame .id-tag .dot { width: 8px; height: 8px; display: inline-block; }

/* Clear-space diagram */
.clearspace {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.cs-canvas {
  position: relative;
  border: 0.8px solid var(--line);
  aspect-ratio: 5 / 3;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(127,127,127,0.06) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(127,127,127,0.06) 15px 16px);
}
.cs-box {
  width: 36%;
  aspect-ratio: 5 / 4;
  position: relative;
  display: grid;
  place-items: center;
  outline: 0.8px dashed var(--signal);
  outline-offset: 20px;
}
.cs-mark {
  width: 56%;
  aspect-ratio: 25 / 24;
  background-color: var(--ink);
  -webkit-mask: url(../assets/logo.svg) center/contain no-repeat;
          mask: url(../assets/logo.svg) center/contain no-repeat;
}
.cs-cap {
  position: absolute;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  background: var(--paper);
  padding: 2px 6px;
}
.cs-cap.top    { top: -10px; left: 50%; transform: translate(-50%, -100%); }
.cs-cap.right  { right: -10px; top: 50%; transform: translate(100%, -50%); }
.cs-cap.bottom { bottom: -10px; left: 50%; transform: translate(-50%, 100%); }
.cs-cap.left   { left: -10px; top: 50%; transform: translate(-100%, -50%); }

.size-stack {
  display: flex; flex-direction: column;
  border: 0.8px solid var(--line);
}
.size-row {
  display: grid;
  grid-template-columns: 60px 1fr 80px;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 0.8px solid var(--line);
}
.size-row:last-child { border-bottom: 0; }
.size-row .swatch-mark {
  background-color: var(--ink);
  -webkit-mask: url(../assets/logo.svg) center/contain no-repeat;
          mask: url(../assets/logo.svg) center/contain no-repeat;
  aspect-ratio: 25 / 24;
  justify-self: end;
}
.size-row .desc {
  display: flex; flex-direction: column; gap: 4px;
}
.size-row .desc .lbl {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.0;
  letter-spacing: -0.005em;
}
.size-row .desc .meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.size-row .dim {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Color-context grid */
.ctx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ctx-grid .id-frame { aspect-ratio: 4 / 3; }

/* Misuse gallery */
.misuse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.misuse {
  position: relative;
  border: 0.8px solid var(--line);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
}
.misuse .mark-img {
  width: 38%;
  aspect-ratio: 25 / 24;
  background-color: var(--ink);
  -webkit-mask: url(../assets/logo.svg) center/contain no-repeat;
          mask: url(../assets/logo.svg) center/contain no-repeat;
}
.misuse::after {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1.4px solid var(--c-red);
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--c-red) calc(50% - 1px), var(--c-red) calc(50% + 1px), transparent calc(50% + 1px));
  pointer-events: none;
}
.misuse .cap {
  position: absolute;
  left: 14px; bottom: 12px;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-red);
  background: var(--paper);
  padding: 3px 7px;
  border: 0.8px solid var(--c-red);
}
/* The .misuse.* rules below render the brand's DON'T gallery. The gradient,
   shadow, and stretch effects intentionally violate the brand rules
   (no gradients, no shadows, no logo distortion) so the page can show
   readers what NOT to do. Do not copy these patterns into production. */
.misuse.stretch .mark-img { transform: scaleX(1.8); }
.misuse.rotate .mark-img { transform: rotate(-12deg); }
.misuse.recolor .mark-img { background: var(--c-red); }
.misuse.gradient .mark-img { background: linear-gradient(135deg, var(--c-blue), var(--c-orange)); -webkit-mask: url(../assets/logo.svg) center/contain no-repeat; mask: url(../assets/logo.svg) center/contain no-repeat; }
.misuse.shadow .mark-img { filter: drop-shadow(8px 8px 0 rgba(0,0,0,0.4)) drop-shadow(0 0 20px rgba(245,89,16,0.6)); }
.misuse.outline .mark-img { background: transparent; -webkit-text-stroke: 1px var(--ink); }
.misuse.outline { background: var(--paper-2); }
.misuse.outline::before {
  content: "bdg"; position: absolute;
  font-family: var(--f-headline);
  font-size: 96px; font-weight: 650;
  color: transparent; -webkit-text-stroke: 1.4px var(--ink);
  text-transform: lowercase;
}
.misuse.outline .mark-img { display: none; }

/* Downloads */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.dl-card {
  position: relative;
  border: 0.8px solid var(--line);
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: background 200ms var(--ease-bdg), transform 200ms var(--ease-bdg);
  cursor: pointer;
}
.dl-card:hover { background: var(--paper-2); transform: translateY(-2px); }
.dl-card .file {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dl-card .ttl {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.005em;
}
.dl-card .meta {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; gap: 14px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 0.8px solid var(--line);
  align-items: baseline;
}
.dl-card .meta .arrow {
  margin-left: auto;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 16px;
  line-height: 1;
  transition: color 180ms var(--ease-bdg), transform 220ms var(--ease-bdg);
}
.dl-card:hover .meta .arrow,
.dl-card .dl-main:focus-visible ~ * .arrow { color: var(--signal); }

/* Main download button fills the card; copy-filename sits in the corner. */
.dl-main {
  display: flex; flex-direction: column; gap: 10px;
  border: 0; background: transparent;
  color: inherit; text-align: left;
  padding: 20px 22px 22px;
  cursor: pointer;
  font: inherit;
}
.dl-main:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.dl-card { padding: 0; } /* the inner .dl-main owns the padding now */

.dl-copy {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.8px solid transparent;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--f-mono);
  font-size: 13px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms var(--ease-bdg), color 160ms var(--ease-bdg), border-color 160ms var(--ease-bdg);
}
.dl-card:hover .dl-copy,
.dl-card:focus-within .dl-copy { opacity: 1; }
.dl-copy:hover { color: var(--ink); border-color: var(--line); }
.dl-copy:focus-visible { opacity: 1; outline: 2px solid var(--signal); outline-offset: 2px; }

/* State styling: busy spins the arrow softly; done flashes the card green;
   err flashes red. Reduced-motion users skip the spin. */
.dl-card[data-state="busy"] .arrow {
  display: inline-block;
  animation: dl-spin 900ms linear infinite;
  color: var(--signal);
}
@keyframes dl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dl-card[data-state="busy"] .arrow { animation: none; }
}
.dl-card[data-state="done"] { border-color: var(--c-green); }
.dl-card[data-state="done"] .arrow { color: var(--c-green); }
.dl-card[data-state="err"]  { border-color: var(--c-red); }
.dl-card[data-state="err"]  .arrow { color: var(--c-red); }

/* Mobile */
@media (max-width: 1100px) {
  .clearspace { grid-template-columns: 1fr; }
  .ctx-grid, .misuse-grid, .dl-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ctx-grid, .misuse-grid, .dl-grid { grid-template-columns: 1fr; }
  .size-row { grid-template-columns: 48px 1fr; }
  .size-row .dim { grid-column: 2; }
}

/* === PHOTO LIBRARY (07.E) ================================================ */
.lib-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.lib-actions {
  display: flex; align-items: center; gap: 10px;
}
.lib-mode, .lib-export-btn, .lib-upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border: 0.8px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg), border-color 160ms var(--ease-bdg);
  white-space: nowrap;
}
.lib-mode:hover, .lib-export-btn:hover, .lib-upload-btn:hover {
  background: var(--ink); color: var(--paper);
}
.lib-mode[data-active="true"] {
  background: var(--signal); color: var(--paper); border-color: var(--signal);
}
.lib-mode[data-active="true"]:hover { background: var(--ink); border-color: var(--ink); }
.lib-upload-btn[disabled] { opacity: 0.4; cursor: progress; }
.lib-card-actions { display: flex; align-items: center; gap: 6px; }
.lib-pencil {
  width: 30px; height: 30px;
  border: 0.8px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--f-mono);
  font-size: 13px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg), border-color 160ms var(--ease-bdg);
}
.lib-pencil:hover { background: var(--signal); color: var(--paper); border-color: var(--signal); }
.lib-pencil:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Draft / edited badges */
.lib-card { position: relative; }
.lib-badge {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 7px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lib-badge.edit { background: var(--signal); }
.lib-card[data-draft="true"] { border-color: var(--ink); }

/* Lightbox additions */
.lib-light-desc {
  grid-area: meta;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 64ch;
}
.lib-light-cap {
  grid-template-areas:
    "meta meta"
    "desc desc"
    "tags actions";
}
.lib-light-edit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border: 0.8px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.lib-light-edit:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* === PHOTO EDITOR MODAL =============================================== */
.ed-shade {
  position: fixed; inset: 0;
  background: rgba(10,10,12,0.6);
  z-index: 250;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  animation: lib-fade 160ms var(--ease-bdg);
}
@media (prefers-reduced-motion: reduce) { .ed-shade { animation: none; } }
.ed-panel {
  width: min(680px, 100%);
  max-height: calc(100vh - 80px);
  background: var(--paper);
  border: 0.8px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ed-panel.ed-export { width: min(820px, 100%); }
.ed-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 0.8px solid var(--line);
  gap: 12px;
}
.ed-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ed-eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ed-title h3, .ed-title h4 {
  margin: 0;
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ed-close {
  width: 32px; height: 32px;
  border: 0.8px solid transparent;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.ed-close:hover { background: var(--paper-2); border-color: var(--line); }

.ed-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 20px;
  overflow-y: auto;
}
.ed-preview {
  display: flex; flex-direction: column; gap: 8px;
}
.ed-preview img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--paper-2);
  border: 0.8px solid var(--line);
  display: block;
}
.ed-file {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0;
  color: var(--ink-3);
  word-break: break-all;
}
.ed-fields { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ed-field {
  display: flex; flex-direction: column; gap: 6px;
}
.ed-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ed-hint {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: none;
  margin-left: 4px;
}
.ed-field input,
.ed-field select,
.ed-field textarea {
  border: 0.8px solid var(--line);
  padding: 11px 12px;
  font-family: var(--f-body);
  font-size: 15px;
  background: var(--paper);
  color: var(--ink);
  outline: 0;
  font: inherit;
  border-radius: 0;
  transition: border-color 160ms var(--ease-bdg);
  width: 100%;
}
.ed-field input:focus,
.ed-field select:focus,
.ed-field textarea:focus { border-color: var(--signal); }
.ed-field textarea { resize: vertical; font-family: var(--f-body); line-height: 1.5; }
.ed-tag-preview {
  display: flex; flex-wrap: wrap; gap: 4px;
  min-height: 24px;
  padding-top: 4px;
}
.ed-tag-preview em { font-style: normal; color: var(--ink-3); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }

.ed-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  border-top: 0.8px solid var(--line);
  background: var(--paper-2);
}
.ed-foot-spacer { flex: 1; }
.ed-cancel, .ed-save, .ed-reset, .ed-del, .ed-mini-dl {
  padding: 9px 16px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 0.8px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg), border-color 160ms var(--ease-bdg);
}
.ed-cancel:hover { background: var(--paper-2); }
.ed-save {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.ed-save:hover { background: var(--signal); border-color: var(--signal); }
.ed-save[data-copied="true"] { background: var(--c-green); border-color: var(--c-green); color: var(--ink-05); }
.ed-reset { color: var(--ink-2); }
.ed-reset:hover:not([disabled]) { color: var(--ink); }
.ed-reset[disabled] { opacity: 0.35; cursor: default; }
.ed-del { color: var(--c-red); border-color: var(--c-red); }
.ed-del:hover, .ed-del[data-confirm="true"] { background: var(--c-red); color: var(--paper); }

/* === EXPORT MODAL specifics =========================================== */
.ed-export-body {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px;
  overflow-y: auto;
}
.ed-export-help {
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.ed-export-help code {
  font-family: var(--f-mono);
  font-size: 12px;
  background: var(--paper-2);
  padding: 2px 5px;
  color: var(--ink);
}
.ed-export-drafts {
  border: 0.8px solid var(--line);
  padding: 12px 14px 14px;
  background: var(--paper-2);
}
.ed-export-drafts h4 {
  margin: 0 0 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.ed-export-drafts ol {
  margin: 0 0 8px 16px; padding: 0;
  font-family: var(--f-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
}
.ed-export-drafts code { font-family: var(--f-mono); font-size: 11px; background: var(--paper); padding: 1px 5px; border: 0.8px solid var(--line); }
.ed-mini-dl {
  margin-left: 8px;
  padding: 3px 8px;
  font-size: 9.5px;
}
.ed-export-code {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.5;
  padding: 12px 14px;
  background: var(--ink-05);
  color: var(--ink-98);
  border: 0;
  outline: 0;
  resize: vertical;
  width: 100%;
  max-height: 360px;
  border-radius: 0;
  white-space: pre;
  overflow: auto;
}
.ed-export-empty {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 1100px) {
  .lib-controls { grid-template-columns: 1fr; }
  .lib-actions { flex-wrap: wrap; }
  .ed-body { grid-template-columns: 1fr; }
  .ed-preview img { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .ed-shade { padding: 8px; align-items: flex-start; }
  .ed-panel { max-height: calc(100vh - 16px); }
  .ed-head, .ed-body, .ed-foot, .ed-export-body { padding-left: 14px; padding-right: 14px; }
  .ed-foot { flex-wrap: wrap; gap: 8px; }
  .ed-foot-spacer { display: none; }
}
.lib-search {
  position: relative;
  display: flex; align-items: center;
  border: 0.8px solid var(--line);
  background: var(--paper);
  padding: 0 14px;
}
.lib-search-glyph {
  font-family: var(--f-mono);
  font-size: 18px;
  color: var(--ink-2);
  margin-right: 10px;
  line-height: 1;
}
.lib-search input {
  flex: 1; border: 0; outline: 0; padding: 14px 0;
  font-family: var(--f-body);
  font-size: 16px;
  background: transparent;
  color: var(--ink);
  min-width: 0;
}
.lib-search input::placeholder { color: var(--ink-3); }
.lib-search:focus-within { border-color: var(--signal); }
.lib-clear {
  border: 0; background: transparent;
  width: 28px; height: 28px;
  font-size: 18px; line-height: 1;
  color: var(--ink-3); cursor: pointer;
}
.lib-clear:hover { color: var(--ink); }

.lib-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lib-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 0.8px solid var(--line-2);
}
.lib-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  border: 0.8px solid var(--line);
  background: transparent;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg), border-color 160ms var(--ease-bdg);
}
.lib-chip:hover { color: var(--ink); }
.lib-chip[data-active="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.lib-chip-count { opacity: 0.65; font-variant-numeric: tabular-nums; font-size: 10px; }

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.lib-card {
  margin: 0;
  border: 0.8px solid var(--line);
  background: var(--paper);
  display: flex; flex-direction: column;
  transition: border-color 180ms var(--ease-bdg);
}
.lib-card:hover { border-color: var(--ink); }
.lib-thumb {
  display: block; width: 100%;
  border: 0; padding: 0; margin: 0;
  background: var(--paper-2);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.lib-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 320ms var(--ease-bdg);
}
.lib-card:hover .lib-thumb img { transform: scale(1.02); }
.lib-cap {
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 0.8px solid var(--line);
}
.lib-name {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--ink);
}
.lib-meta-row {
  display: flex; justify-content: space-between; align-items: center;
}
.lib-ind {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.lib-dl {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.8px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg);
}
.lib-dl:hover { background: var(--signal); color: var(--paper); border-color: var(--signal); }
.lib-dl:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.lib-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.lib-tag {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 2px 6px;
  border: 0.8px solid var(--line-2);
}

.lib-empty {
  padding: 40px 0;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink-3);
}
.lib-empty em { color: var(--ink); font-style: normal; font-weight: 500; padding: 0 4px; background: var(--paper-2); }

/* --- Lightbox preview --------------------------------------------------- */
.lib-light {
  position: fixed; inset: 0;
  background: rgba(10,10,12,0.92);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  animation: lib-fade 180ms var(--ease-bdg);
}
@keyframes lib-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lib-light { animation: none; }
}
.lib-light-close,
.lib-light-nav {
  position: absolute;
  border: 0.8px solid rgba(255,255,255,0.3);
  background: transparent;
  color: #fff;
  font-family: var(--f-mono);
  font-size: 22px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 160ms var(--ease-bdg), border-color 160ms var(--ease-bdg);
}
.lib-light-close { top: 24px; right: 24px; }
.lib-light-nav.prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lib-light-nav.next { right: 24px; top: 50%; transform: translateY(-50%); }
.lib-light-close:hover,
.lib-light-nav:hover { background: var(--signal); border-color: var(--signal); }
.lib-light-nav[disabled] { opacity: 0.25; cursor: default; }
.lib-light-nav[disabled]:hover { background: transparent; border-color: rgba(255,255,255,0.3); }
.lib-light-stage {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  max-width: min(1200px, 100%);
  max-height: 100%;
}
.lib-light-stage img {
  max-width: 100%;
  max-height: calc(100vh - 200px);
  object-fit: contain;
  display: block;
  background: var(--paper-2);
}
.lib-light-cap {
  background: var(--paper);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "meta meta"
    "tags actions";
  gap: 10px 16px;
  align-items: center;
}
.lib-light-meta { grid-area: meta; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.lib-light-name {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.lib-light-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 6px; }
.lib-light-actions { grid-area: actions; display: flex; align-items: center; gap: 16px; }
.lib-light-pos {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.lib-light-dl {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 0.8px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms var(--ease-bdg), border-color 160ms var(--ease-bdg);
}
.lib-light-dl:hover { background: var(--signal); border-color: var(--signal); }

@media (max-width: 1100px) {
  .lib-controls { grid-template-columns: 1fr; }
  .lib-light-close { top: 16px; right: 16px; }
  .lib-light-nav.prev { left: 8px; }
  .lib-light-nav.next { right: 8px; }
  .lib-light-cap {
    grid-template-columns: 1fr;
    grid-template-areas: "meta" "tags" "actions";
  }
  .lib-light-actions { justify-content: space-between; }
}
@media (max-width: 640px) {
  .lib-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .lib-name { font-size: 13px; }
  .lib-cap { padding: 10px 12px 12px; }
  .lib-light { padding: 16px; }
  .lib-light-stage img { max-height: calc(100vh - 220px); }
}

/* === APPLICATION CHANNELS (Social · Print · Digital · Decks) ============= */

.specimen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.spec-card {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-rows: auto auto;
  background: var(--paper);
}
.spec-card .pad {
  padding: 18px 20px 18px;
  background: var(--paper-2);
  display: flex; flex-direction: column; gap: 4px;
  border-bottom: 0.8px solid var(--line);
}
.spec-card .pad .ix {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal);
}
.spec-card .pad h4 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 18px; line-height: 1.05; letter-spacing: -0.005em; margin: 0;
}
.spec-card .pad p {
  font-family: var(--f-body); font-size: 12px; line-height: 1.45; color: var(--ink-2); margin: 2px 0 0;
}
.spec-card .preview {
  padding: 22px;
  display: flex;
  align-items: center; justify-content: center;
  min-height: 280px;
  overflow: hidden;
  position: relative;
}
.spec-card .preview.ink   { background: var(--ink-05); color: var(--ink-98); }
.spec-card .preview.paper { background: var(--ink-98); color: var(--ink-05); }
.spec-card .preview.bone  { background: #F4F4F5; color: var(--ink-05); }
.spec-card .preview.signal{ background: #F55910; color: #FFFFFF; }
.spec-card .preview.blue  { background: #3236FF; color: #FFFFFF; }

/* Generic 'phone' / 'card' / 'page' mounts */
.mount-square {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  display: grid;
  padding: 22px 22px 24px;
  position: relative;
}
.mount-portrait {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 9 / 16;
  display: grid;
  padding: 18px 18px 20px;
}
.mount-landscape {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  padding: 22px 24px;
}
.mount-a4 {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 0.707 / 1;
  display: grid;
  padding: 24px 22px;
}
.mount-card {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1.7 / 1;
  display: grid;
  padding: 18px 22px;
}

.fp { width: 100%; height: 100%; display: grid; gap: 8px; }
.fp .chrome {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6;
  display: flex; justify-content: space-between;
}
.fp .chrome .mark-img {
  width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url(../assets/logo.svg) center/contain no-repeat;
          mask: url(../assets/logo.svg) center/contain no-repeat;
}
.fp .head {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.96;
  align-self: center;
}
.fp .head.xl { font-size: clamp(24px, 6vw, 56px); }
.fp .head.lg { font-size: clamp(20px, 4vw, 36px); }
.fp .head.md { font-size: clamp(16px, 3vw, 26px); }
.fp .head.sm { font-size: clamp(14px, 2.5vw, 18px); }
.fp .head .em {
  background: var(--c-yellow); color: var(--ink-05);
  padding: 0.04em 0.16em 0.08em; display: inline-block;
  line-height: 0.88;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.fp .stat {
  font-family: var(--f-headline); font-weight: 650;
  font-size: clamp(56px, 14vw, 120px);
  line-height: 0.9; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  align-self: center;
}
.fp .stat .u { color: var(--signal); font-size: 0.5em; }
.fp .foot {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65;
  display: flex; justify-content: space-between;
  align-self: end;
}

/* channel matrix */
.channel-matrix {
  border: 0.8px solid var(--line);
}
.cm-row {
  display: grid;
  grid-template-columns: 140px repeat(4, 1fr);
  border-bottom: 0.8px solid var(--line);
  align-items: center;
}
.cm-row:last-child { border-bottom: 0; }
.cm-row.head {
  background: var(--paper-2);
  border-bottom: 0.8px solid var(--line);
}
.cm-cell {
  padding: 12px 14px;
  font-family: var(--f-body); font-size: 13px;
  border-right: 0.8px solid var(--line);
  min-height: 48px; display: flex; align-items: center;
}
.cm-cell:last-child { border-right: 0; }
.cm-row.head .cm-cell {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); font-weight: 500;
}
.cm-row .name {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 14px; letter-spacing: -0.005em;
}
.cm-cell.fill { background: var(--signal-soft); color: var(--signal); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.cm-cell.dim { color: var(--ink-3); }

@media (max-width: 1100px) {
  .cm-row { grid-template-columns: 100px repeat(2, 1fr); }
  .cm-row > .cm-cell:nth-child(n+4) { display: none; }
}
@media (max-width: 640px) {
  .cm-row { grid-template-columns: 90px 1fr; }
  .cm-row > .cm-cell:nth-child(n+3) { display: none; }
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 12px;
}
.cluster {
  border: 0.8px solid var(--line);
  padding: 24px 26px 26px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper);
}
.cluster .head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cluster .ix { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal); }
.cluster .tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.cluster h4 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 28px; line-height: 0.98; letter-spacing: -0.015em; margin: 0;
}
.cluster .examples { display: flex; flex-wrap: wrap; gap: 6px; }
.cluster .examples span {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;
  padding: 4px 8px; border: 0.8px solid var(--line); color: var(--ink-2);
}
.cluster .does { font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--ink); margin: 0; }
.cluster .stops {
  border-top: 0.8px solid var(--line);
  padding-top: 12px;
  margin-top: auto;
  font-family: var(--f-body); font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.cluster .stops strong { color: var(--c-red); font-weight: 600; }

.posmap {
  position: relative;
  border: 0.8px solid var(--line);
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(127,127,127,0.05) 24px 25px),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(127,127,127,0.05) 24px 25px);
}
.posmap .axis-h, .posmap .axis-v {
  position: absolute; background: var(--ink); opacity: 0.5;
}
.posmap .axis-h { left: 8%; right: 8%; top: 50%; height: 0.8px; }
.posmap .axis-v { top: 10%; bottom: 10%; left: 50%; width: 0.8px; }
.posmap .ax-lbl {
  position: absolute;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2);
}
.posmap .ax-lbl.top    { top: 4%; left: 50%; transform: translateX(-50%); }
.posmap .ax-lbl.bottom { bottom: 4%; left: 50%; transform: translateX(-50%); }
.posmap .ax-lbl.left   { left: 4%; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.posmap .ax-lbl.right  { right: 4%; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }
.posmap .pin {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-headline); font-weight: 650;
  font-size: 12px; text-transform: uppercase; letter-spacing: -0.005em;
  color: var(--ink);
}
.posmap .pin::before {
  content: ""; width: 10px; height: 10px;
  background: var(--ink); flex-shrink: 0;
}
.posmap .pin.bdg { color: var(--signal); }
.posmap .pin.bdg::before { background: var(--signal); width: 16px; height: 16px; }

/* === BRAND ARCHETYPES (02.C) ============================================= */

.arch-stack { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.arch {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
}
.arch .lead {
  padding: 28px 28px 30px;
  background: var(--paper-2);
  border-right: 0.8px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.arch .lead .ix {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--signal);
}
.arch .lead h4 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 36px); line-height: 0.98; letter-spacing: -0.015em;
  margin: 0;
  overflow-wrap: anywhere;
}
.arch .lead p {
  font-family: var(--f-body); font-size: 13px; line-height: 1.5; color: var(--ink-2);
  margin: 0; max-width: 32ch;
}
.arch .lead .vis {
  margin-top: auto; padding-top: 14px;
  border-top: 0.8px solid var(--line);
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
.arch .lead .vis strong { color: var(--ink); font-weight: 500; }

.arch .members {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.brand-cell {
  padding: 22px 22px 24px;
  border-right: 0.8px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.brand-cell:last-child { border-right: 0; }
.brand-cell .row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.brand-cell .name {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 20px; line-height: 1.0; letter-spacing: -0.005em;
}
.brand-cell .geo {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.brand-cell .pos {
  font-family: var(--f-body); font-size: 13px; line-height: 1.45; color: var(--ink); margin: 0;
}
.brand-cell .swatch-row {
  display: flex; gap: 4px; margin-top: 2px;
}
.brand-cell .swatch-row span { width: 18px; height: 18px; border: 0.8px solid var(--line); display: inline-block; }
.brand-cell .marks {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.10em; color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.brand-cell .marks span {
  padding: 3px 7px; border: 0.8px solid var(--line); text-transform: uppercase;
}
.brand-cell .gap {
  margin-top: auto; padding-top: 10px;
  border-top: 0.8px solid var(--line);
  font-family: var(--f-body); font-size: 12px; line-height: 1.5;
  color: var(--ink-2);
}
.brand-cell .gap strong { color: var(--c-red); font-weight: 600; }

@media (max-width: 1100px) {
  .arch { grid-template-columns: 1fr; }
  .arch .lead { border-right: 0; border-bottom: 0.8px solid var(--line); }
  .arch .members { grid-template-columns: 1fr; }
  .brand-cell { border-right: 0; border-bottom: 0.8px solid var(--line); }
  .brand-cell:last-child { border-bottom: 0; }
}

/* === COMPETITIVE EDGE (04) =============================================== */
.edge-stack {
  display: flex; flex-direction: column;
  border: 0.8px solid var(--line);
  margin-top: 12px;
}
.edge-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 24px;
  align-items: center;
  padding: 26px 28px;
  border-bottom: 0.8px solid var(--line);
}
.edge-row:last-child { border-bottom: 0; }
.edge-row .ix {
  font-family: var(--f-headline); font-weight: 650;
  font-size: 42px; line-height: 1; letter-spacing: -0.02em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.edge-row .stop {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 30px); line-height: 1.0; letter-spacing: -0.015em;
  color: var(--ink-2);
}
.edge-row .start {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1.0; letter-spacing: -0.015em;
}
.edge-row .start small {
  display: block; margin-top: 8px;
  font-family: var(--f-body); font-size: 14px; line-height: 1.5;
  font-weight: 400; letter-spacing: -0.005em;
  color: var(--ink-2); text-transform: none;
  max-width: 50ch;
}

@media (max-width: 1100px) {
  .market-grid { grid-template-columns: 1fr; }
  .edge-row { grid-template-columns: 60px 1fr; gap: 14px; }
  .edge-row .stop { grid-column: 2; }
  .edge-row .start { grid-column: 2; }
}

.checklist {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.checklist > .col {
  padding: 28px 30px 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.checklist > .col + .col { border-left: 0.8px solid var(--line); background: var(--paper-2); }
.checklist .col-hed {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal);
  display: flex; align-items: baseline; gap: 12px;
}
.checklist .col-hed .ct {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-2);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.checklist .col-title {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 22px; line-height: 1.05; letter-spacing: -0.005em;
  margin: 0;
}
.checklist .items {
  display: flex; flex-direction: column; gap: 0;
  margin-top: 4px;
}
.checklist .item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 0.8px solid var(--line);
  cursor: pointer;
}
.checklist .item:last-child { border-bottom: 0; }
.checklist .box {
  width: 18px; height: 18px;
  border: 0.8px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms var(--ease-bdg);
}
.checklist .item[aria-checked="true"] .box {
  background: var(--ink); border-color: var(--ink);
}
html[data-theme="dark"] .checklist .item[aria-checked="true"] .box {
  background: var(--paper); border-color: var(--paper);
}
.checklist .item[aria-checked="true"] .box::after {
  content: ""; width: 8px; height: 8px; background: var(--paper);
}
html[data-theme="dark"] .checklist .item[aria-checked="true"] .box::after { background: var(--ink-05); }
.checklist .item .txt {
  font-family: var(--f-body); font-size: 14px; line-height: 1.45; color: var(--ink);
}
.checklist .item[aria-checked="true"] .txt { opacity: 0.5; text-decoration: line-through; text-decoration-color: var(--ink-3); }
.checklist .item .sub {
  display: block;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  margin-top: 3px;
}

.ledger-search {
  border: 0.8px solid var(--line);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px; align-items: center;
  margin-bottom: 16px;
}
.ledger-search input {
  border: 0; outline: 0; background: transparent; color: var(--ink);
  font-family: var(--f-body); font-size: 16px;
  width: 100%;
}
.ledger-search input::placeholder { color: var(--ink-3); }
.ledger-search .tot {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.ledger-search .clear {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 10px;
  border: 0.8px solid var(--line);
  background: transparent;
  cursor: pointer;
  color: var(--ink);
}

.ledger2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 0.8px solid var(--line);
}
.ledger2 > .col { padding: 22px 24px 24px; }
.ledger2 > .col + .col { border-left: 0.8px solid var(--line); }
.ledger2 .col-hed {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 12px;
}
.ledger2 .tag {
  font-family: var(--f-headline); font-weight: 650; font-size: 11px;
  padding: 3px 7px 4px; letter-spacing: 0.08em;
}
.ledger2 .lean .tag { background: var(--c-green); color: var(--ink-05); }
.ledger2 .avoid .tag { background: var(--c-red); color: #fff; }
.ledger2 .word-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ledger2 .word {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.05em;
  padding: 6px 10px;
  border: 0.8px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.ledger2 .avoid .word {
  text-decoration: line-through; text-decoration-color: var(--c-red);
  color: var(--ink-2);
}
.ledger2 .word.hit { border-color: var(--signal); }
.ledger2 .empty {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}

@media (max-width: 1100px) {
  .checklist, .ledger2 { grid-template-columns: 1fr; }
  .checklist > .col + .col,
  .ledger2 > .col + .col { border-left: 0; border-top: 0.8px solid var(--line); }
}

.audience-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border: 0.8px solid var(--line);
  padding: 4px;
  margin-bottom: 16px;
  background: var(--paper-2);
}
.audience-tabs button {
  flex: 1; min-width: 120px;
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 12px; letter-spacing: -0.005em;
  padding: 10px 14px;
  background: transparent;
  color: var(--ink);
  border: 0;
  cursor: pointer;
  transition: background 160ms var(--ease-bdg), color 160ms;
}
.audience-tabs button:hover { background: var(--paper); }
.audience-tabs button[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
}

.aud-card {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}
.aud-card .meta {
  padding: 32px 32px 32px;
  background: var(--paper-2);
  border-right: 0.8px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
}
.aud-card .role-tag {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--signal);
  display: flex; align-items: center; gap: 8px;
}
.aud-card .role-tag::before {
  content: ""; width: 8px; height: 8px;
  background: var(--signal); display: inline-block;
}
.aud-card .role-name {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: clamp(40px, 4.5vw, 64px); line-height: 0.95; letter-spacing: -0.02em;
  margin: 0;
}
.aud-card .room {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
  border-top: 0.8px solid var(--line);
  padding-top: 14px;
  margin-top: auto;
}
.aud-card .stages {
  padding: 32px 36px 32px;
  display: flex; flex-direction: column; gap: 22px;
}
.aud-card .stage-row {
  border-bottom: 0.8px solid var(--line);
  padding-bottom: 20px;
}
.aud-card .stage-row:last-child { border-bottom: 0; padding-bottom: 0; }
.aud-card .stage-ix {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.aud-card .stage-ix .num {
  font-family: var(--f-headline); font-weight: 650;
  font-size: 11px; color: var(--signal); letter-spacing: 0.06em;
}
.aud-card .pain {
  font-family: var(--f-headline); font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.0; letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.aud-card .framing {
  font-family: var(--f-body); font-size: 15px; line-height: 1.5;
  color: var(--ink); max-width: 56ch; margin: 0;
}
.aud-card .framing strong { color: var(--ink); font-weight: 600; }
.aud-card .phrases {
  display: flex; flex-direction: column; gap: 10px;
}
.aud-card .phrase {
  display: grid; grid-template-columns: 40px 1fr;
  gap: 12px; align-items: baseline;
  font-family: var(--f-headline); font-weight: 650;
  text-transform: uppercase;
  font-size: 15px; line-height: 1.15; letter-spacing: -0.005em;
}
.aud-card .phrase .ix {
  font-family: var(--f-mono); font-weight: 400;
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
  padding-top: 2px;
}
.aud-card .cta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding-top: 4px;
}

@media (max-width: 1100px) {
  .aud-card { grid-template-columns: 1fr; }
  .aud-card .meta { border-right: 0; border-bottom: 0.8px solid var(--line); }
}
@media (max-width: 640px) {
  .aud-card .meta { padding: 24px 22px; }
  .aud-card .stages { padding: 22px 22px 24px; gap: 18px; }
  .aud-card .phrase { grid-template-columns: 1fr; }
  .aud-card .phrase .ix { display: none; }
}

.tpl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tpl {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-rows: auto auto;
}
.tpl .stage {
  padding: 28px 30px 30px;
  background: var(--paper);
  min-height: 280px;
  position: relative;
  overflow: hidden;
}
.tpl .stage.ink { background: var(--ink); color: var(--paper); }
.tpl .stage.bone { background: var(--paper-2); }
.tpl .label {
  padding: 14px 20px 18px;
  border-top: 0.8px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  background: var(--paper);
}
.tpl .label .tag {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal);
}
.tpl .label h4 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 18px; line-height: 1.05; letter-spacing: -0.005em; margin: 0;
}
.tpl .label p { font-family: var(--f-body); font-size: 13px; line-height: 1.45; color: var(--ink-2); margin: 0; }

/* Hero mock */
.tpl-hero {
  display: grid; grid-template-rows: auto 1fr auto; gap: 12px;
  height: 100%;
}
.tpl-hero .top {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.6;
  display: flex; justify-content: space-between;
}
.tpl-hero .thesis {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: clamp(28px, 4vw, 48px); line-height: 0.96; letter-spacing: -0.02em;
  align-self: center;
}
.tpl-hero .thesis .em { color: var(--signal); }
.tpl-hero .bottom {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.6;
  display: flex; justify-content: space-between;
  align-items: baseline;
}

/* Case study mock */
.tpl-case {
  display: grid; grid-template-rows: auto 1fr; gap: 12px; height: 100%;
}
.tpl-case .meta {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-2);
  display: flex; gap: 18px;
}
.tpl-case .meta strong { color: var(--ink); font-weight: 500; font-size: 11px; }
.tpl-case .head {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: clamp(20px, 2.6vw, 32px); line-height: 0.98; letter-spacing: -0.015em;
}
.tpl-case .body {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  align-items: end;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-2);
}
.tpl-case .stat {
  font-family: var(--f-headline); font-weight: 650;
  font-size: 36px; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tpl-case .stat .u { font-size: 0.5em; color: var(--signal); }

/* Article mock */
.tpl-article {
  display: grid; grid-template-columns: 80px 1fr; gap: 18px; height: 100%;
}
.tpl-article .left {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.tpl-article .left strong { color: var(--ink); font-weight: 500; font-size: 11px; }
.tpl-article .right h5 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 22px; line-height: 1.0; letter-spacing: -0.015em; margin: 0 0 12px;
}
.tpl-article .right p {
  font-family: var(--f-body); font-size: 13px; line-height: 1.5;
  color: var(--ink); margin: 0 0 10px; max-width: 36ch;
}

/* Exec bio mock */
.tpl-bio {
  display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: start;
  height: 100%;
}
.tpl-bio .avatar {
  width: 72px; height: 72px;
  background:
    repeating-linear-gradient(135deg, transparent 0 1px, rgba(127,127,127,0.4) 1px 6px),
    var(--paper-2);
  border: 0.8px solid var(--line);
}
.tpl-bio .info { display: flex; flex-direction: column; gap: 4px; }
.tpl-bio .name {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 22px; line-height: 1.0; letter-spacing: -0.01em;
}
.tpl-bio .role {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--signal);
}
.tpl-bio .bio {
  font-family: var(--f-body); font-size: 12px; line-height: 1.5; color: var(--ink-2);
  margin-top: 8px; max-width: 32ch;
}

/* Event slide */
.tpl-slide {
  display: grid; grid-template-rows: auto 1fr auto; gap: 12px; height: 100%;
}
.tpl-slide .chrome {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6;
}
.tpl-slide .chrome .mark {
  width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: url(../assets/logo.svg) center/contain no-repeat;
          mask: url(../assets/logo.svg) center/contain no-repeat;
}
.tpl-slide .head {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: clamp(28px, 4vw, 56px); line-height: 0.92; letter-spacing: -0.025em;
  align-self: center;
}
.tpl-slide .head .em {
  background: var(--signal); color: #fff;
  padding: 0.02em 0.12em 0.06em; display: inline-block;
}
.tpl-slide .foot {
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.6;
}

/* Email signature */
.tpl-sig {
  display: grid; grid-template-columns: 1fr; gap: 4px; height: 100%; justify-content: flex-start;
  align-content: center;
}
.tpl-sig .who {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 18px; letter-spacing: -0.005em;
}
.tpl-sig .role {
  font-family: var(--f-body); font-size: 13px; color: var(--ink-2);
}
.tpl-sig hr {
  border: 0; border-top: 0.8px solid currentColor; margin: 8px 0; opacity: 0.4; width: 60px;
}
.tpl-sig .lines {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em;
  line-height: 1.5; color: var(--ink-2);
  display: flex; flex-direction: column; gap: 2px;
}
.tpl-sig .lines .lk { color: var(--ink); }
.tpl-sig .tag {
  margin-top: 12px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal);
}

@media (max-width: 1100px) {
  .tpl-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tpl-case .body { grid-template-columns: 1fr 1fr; gap: 12px; }
}

.spacing-ladder {
  border: 0.8px solid var(--line);
  display: flex;
  flex-direction: column;
}
.sp-row {
  display: grid;
  grid-template-columns: 70px 1fr 100px;
  gap: 18px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 0.8px solid var(--line);
  cursor: pointer;
}
.sp-row:last-child { border-bottom: 0; }
.sp-row:hover { background: var(--paper-2); }
.sp-row .name {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.sp-row .bar {
  background: var(--ink);
  height: 18px;
}
.dark .sp-row .bar, html[data-theme="dark"] .sp-row .bar { background: var(--paper); }
.sp-row .px {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 12-col grid demo */
.grid-demo {
  border: 0.8px solid var(--line);
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--paper-2);
}
.grid-rule {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.grid-rule .col {
  background: var(--signal-soft);
  border: 0.8px solid var(--signal);
  height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink); text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.grid-rule.mobile { grid-template-columns: repeat(4, 1fr); }
.grid-rule.mobile .col { height: 42px; }

.grid-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding-top: 8px;
  border-top: 0.8px solid var(--line);
}
.grid-meta div { display: flex; flex-direction: column; gap: 4px; }
.grid-meta .k {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.grid-meta .v {
  font-family: var(--f-headline); font-weight: 650; font-size: 14px;
  text-transform: uppercase; letter-spacing: -0.005em;
}

/* Editorial patterns */
.pattern-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pattern {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-rows: 220px auto;
  background: var(--paper);
}
.pattern .demo {
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(127,127,127,0.05) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(127,127,127,0.05) 15px 16px);
}
.pattern .label {
  padding: 14px 20px 18px;
  border-top: 0.8px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.pattern .label .tag {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal);
}
.pattern .label h4 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 18px; line-height: 1.05; letter-spacing: -0.005em; margin: 0;
}
.pattern .label p {
  font-family: var(--f-body); font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0;
}

/* Specific pattern mock layouts */
.pat-anchor { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; height: 100%; }
.pat-anchor .big-num {
  font-family: var(--f-headline); font-weight: 650;
  font-size: 80px; line-height: 0.9; letter-spacing: -0.025em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.pat-anchor .text-stack { display: flex; flex-direction: column; gap: 6px; }
.pat-anchor .h {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 16px; line-height: 1.05; letter-spacing: -0.005em;
}
.pat-anchor .b { font-family: var(--f-body); font-size: 11px; line-height: 1.5; color: var(--ink-2); }

.pat-asym { display: grid; grid-template-columns: 5fr 7fr; gap: 14px; height: 100%; }
.pat-asym .left .h {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 22px; line-height: 1.0; letter-spacing: -0.015em;
}
.pat-asym .right { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.pat-asym .right .row {
  display: grid; grid-template-columns: 1fr 24px 1fr;
  gap: 8px; align-items: baseline;
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 12px; letter-spacing: -0.005em;
}
.pat-asym .right .row .g { text-align: center; color: var(--signal); }
.pat-asym .right .row .b { color: var(--ink-2); }

.pat-runin { display: grid; grid-template-columns: 90px 1fr; gap: 16px; height: 100%; }
.pat-runin .meta {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  display: flex; flex-direction: column; gap: 4px;
}
.pat-runin .meta strong { color: var(--ink); font-weight: 500; font-size: 11px; }
.pat-runin .copy { font-family: var(--f-body); font-size: 11px; line-height: 1.5; color: var(--ink); max-width: 32ch; }

.pat-stack { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.pat-stack .line {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 28px; line-height: 0.95; letter-spacing: -0.015em;
}
.pat-stack .line.em { color: var(--signal); }
.pat-stack .foot {
  margin-top: auto;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}

@media (max-width: 1100px) {
  .pattern-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sp-row { grid-template-columns: 50px 1fr 60px; gap: 10px; padding: 10px 14px; }
  .grid-rule { gap: 6px; }
  .grid-rule .col { font-size: 8px; }
  .pat-anchor .big-num { font-size: 56px; }
}

.viz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.viz {
  border: 0.8px solid var(--line);
  padding: 22px 24px 24px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper);
  min-height: 320px;
}
.viz .ix {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
}
.viz h4 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 18px; line-height: 1.05; letter-spacing: -0.005em; margin: 0;
}
.viz .anchor {
  font-family: var(--f-headline); font-weight: 650;
  font-size: 56px; line-height: 1.0; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.viz .anchor .unit { color: var(--signal); font-size: 0.5em; }
.viz svg { width: 100%; height: auto; max-height: 140px; }
.viz .grid { stroke: var(--line); stroke-width: 0.6; }
.viz .axis-lbl { font-family: var(--f-mono); font-size: 9px; fill: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
.viz .meta { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-top: auto; padding-top: 8px; border-top: 0.8px solid var(--line); display: flex; justify-content: space-between; }

.annot-block {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.annot-block .stage {
  padding: 28px 28px 24px;
  background: var(--paper-2);
}
.annot-block .stage svg {
  width: 100%; max-height: 320px;
}
.annot-block .notes {
  padding: 28px 28px 30px;
  border-left: 0.8px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
}
.annot-block .note {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline;
  border-bottom: 0.8px solid var(--line);
  padding-bottom: 12px;
}
.annot-block .note:last-child { border-bottom: 0; padding-bottom: 0; }
.annot-block .note .pin {
  width: 22px; height: 22px;
  background: var(--signal); color: #fff;
  font-family: var(--f-mono); font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.06em;
}
.annot-block .note .nx {
  font-family: var(--f-headline);
  font-weight: 650; text-transform: uppercase;
  font-size: 14px; line-height: 1.1; letter-spacing: -0.005em;
}
.annot-block .note .nx small {
  display: block; font-family: var(--f-body); font-weight: 400;
  font-size: 12px; line-height: 1.5; color: var(--ink-2); margin-top: 4px;
  text-transform: none; letter-spacing: 0;
}

.anti-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.anti-card {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-rows: 200px auto;
}
.anti-card .stage {
  padding: 22px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* .anti-card.bad renders the "wrong way" example in the Imagery DON'T pair —
   gradients, drop-shadows, and saturated washes intentionally break the
   brand rules to make the contrast with .anti-card.good legible. */
.anti-card.bad .stage {
  background:
    linear-gradient(135deg, rgba(50,54,255,0.5), rgba(245,89,16,0.5)),
    radial-gradient(circle at 70% 70%, rgba(0,209,144,0.6), transparent 60%);
  background-color: #2a2440;
  color: #fff;
}
.anti-card.bad .stage svg { filter: drop-shadow(0 8px 14px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(245,89,16,0.6)); }
.anti-card.good .stage { background: var(--paper-2); }
.anti-card .label {
  padding: 16px 20px 20px;
  display: flex; flex-direction: column; gap: 4px;
  border-top: 0.8px solid var(--line);
}
.anti-card .label .tag {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-2);
}
.anti-card.good .label .tag::before { content:"✓"; color: var(--c-green); }
.anti-card.bad .label .tag::before { content:"×"; color: var(--c-red); }
.anti-card .label h4 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 18px; line-height: 1.05; letter-spacing: -0.005em; margin: 0;
}
.anti-card .label p {
  font-family: var(--f-body); font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0;
}

@media (max-width: 1100px) {
  .annot-block { grid-template-columns: 1fr; }
  .annot-block .notes { border-left: 0; border-top: 0.8px solid var(--line); }
  .anti-grid { grid-template-columns: 1fr; }
}

/* Component block layout */
.comp-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0;
  border: 0.8px solid var(--line);
  margin-top: 12px;
}
.comp-block + .comp-block { margin-top: -1px; }
.comp-block .meta {
  padding: 22px 24px 24px;
  display: flex; flex-direction: column; gap: 12px;
  border-right: 0.8px solid var(--line);
  background: var(--paper-2);
}
.comp-block .meta .ix {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal);
}
.comp-block .meta h4 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 22px; line-height: 1.05; letter-spacing: -0.005em;
  margin: 0;
}
.comp-block .meta p {
  font-family: var(--f-body); font-size: 13px; line-height: 1.5;
  color: var(--ink-2); margin: 0; max-width: 36ch;
}
.comp-block .meta .anatomy {
  margin-top: auto;
  padding-top: 14px;
  border-top: 0.8px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.comp-block .meta .anatomy .k {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
.comp-block .meta .anatomy .v {
  font-family: var(--f-headline); font-weight: 650; font-size: 12px;
  text-transform: uppercase; color: var(--ink); letter-spacing: -0.005em;
}
.comp-block .stage {
  padding: 26px 28px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.comp-block .stage.dark {
  background: var(--ink-05);
  color: #F4F4F5;
}
.comp-block .stage-row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.comp-block .stage-row.dense { gap: 6px; }
.comp-block .stage-lbl {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: currentColor; opacity: 0.55;
  width: 100%;
  margin-bottom: -4px;
}
.comp-block .stage.dark .stage-lbl { opacity: 0.6; }

/* --- BUTTON ---------------------------------------------------------------- */
.bdg-btn {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 13px;
  padding: 10px 16px 11px;
  background: transparent;
  color: currentColor;
  border: 0.8px solid currentColor;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg), opacity 160ms;
  text-decoration: none;
  position: relative;
}
.bdg-btn:hover { background: currentColor; }
.bdg-btn:hover > * { color: var(--paper); }
.bdg-btn:hover { color: var(--paper); }
.dark .bdg-btn:hover { color: var(--ink-05); }
.bdg-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.bdg-btn:active { transform: translateY(0.5px); }
.bdg-btn[disabled], .bdg-btn[aria-disabled="true"] {
  opacity: 0.4; pointer-events: none;
}

.bdg-btn.solid {
  background: var(--ink); color: #fff;
  border-color: var(--ink);
}
.dark .bdg-btn.solid { background: #F4F4F5; color: var(--ink-05); border-color: #F4F4F5; }
.bdg-btn.solid:hover { background: transparent; color: var(--ink); }
.dark .bdg-btn.solid:hover { background: transparent; color: #F4F4F5; }
.bdg-btn.signal {
  background: var(--signal); color: #fff; border-color: var(--signal);
}
.bdg-btn.signal:hover { background: transparent; color: var(--signal); }
.dark .bdg-btn.signal { color: var(--ink-05); }
.dark .bdg-btn.signal:hover { color: var(--signal); background: transparent; }

.bdg-btn.ghost {
  border-color: transparent;
}
.bdg-btn.ghost:hover {
  background: var(--paper-2); color: inherit;
}
.dark .bdg-btn.ghost:hover { background: rgba(255,255,255,0.07); color: inherit; }

.bdg-btn.sm { font-size: 11px; padding: 7px 12px 8px; }
.bdg-btn.lg { font-size: 14px; padding: 14px 22px 15px; }

.bdg-btn .ico {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
}

/* --- INPUT ---------------------------------------------------------------- */
.bdg-input,
.bdg-textarea,
.bdg-select {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.4;
  padding: 11px 14px;
  background: transparent;
  color: currentColor;
  border: 0.8px solid currentColor;
  width: 100%;
  outline: none;
  transition: border-color 180ms var(--ease-bdg);
  resize: vertical;
}
.bdg-input::placeholder,
.bdg-textarea::placeholder { color: currentColor; opacity: 0.4; }
.bdg-input:focus,
.bdg-textarea:focus,
.bdg-select:focus { border-color: var(--signal); }
.bdg-input.invalid { border-color: var(--c-red); }
.bdg-input[disabled], .bdg-textarea[disabled], .bdg-select[disabled] { opacity: 0.4; cursor: not-allowed; }

.bdg-field {
  display: grid; gap: 6px;
  width: 100%;
  max-width: 360px;
}
.bdg-field .lbl {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: currentColor; opacity: 0.65;
}
.bdg-field .hint {
  font-family: var(--f-body); font-size: 12px; opacity: 0.6;
}
.bdg-field .err {
  font-family: var(--f-body); font-size: 12px; color: var(--c-red);
}

.bdg-input-wrap {
  position: relative;
  display: flex; align-items: stretch;
  border: 0.8px solid currentColor;
}
.bdg-input-wrap:focus-within { border-color: var(--signal); }
.bdg-input-wrap > input {
  flex: 1; border: 0; outline: 0;
  padding: 11px 14px;
  background: transparent; color: currentColor;
  font-family: var(--f-body); font-size: 14px;
}
.bdg-input-wrap .pref,
.bdg-input-wrap .suff {
  display: inline-flex; align-items: center;
  padding: 0 12px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.6;
  border-right: 0.8px solid currentColor;
}
.bdg-input-wrap .suff { border-right: 0; border-left: 0.8px solid currentColor; }
.bdg-input-wrap .suff.btn {
  cursor: pointer;
  border-left: 0.8px solid currentColor;
  background: transparent;
  font-family: var(--f-headline); font-weight: 650; font-size: 11px;
  letter-spacing: 0.06em;
  padding: 0 14px;
  opacity: 1;
}
.bdg-input-wrap .suff.btn:hover { background: currentColor; color: var(--paper); }
.dark .bdg-input-wrap .suff.btn:hover { color: var(--ink-05); }

.bdg-select {
  appearance: none;
  background-image: linear-gradient(135deg, transparent 50%, currentColor 50%),
                    linear-gradient(-135deg, transparent 50%, currentColor 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

/* --- CHECK / RADIO ------------------------------------------------------- */
.bdg-check, .bdg-radio {
  display: inline-grid;
  grid-template-columns: 20px 1fr;
  gap: 10px; align-items: center;
  font-family: var(--f-body);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.bdg-check input, .bdg-radio input { appearance: none; position: absolute; opacity: 0; pointer-events: none; }
.bdg-check .box,
.bdg-radio .box {
  width: 18px; height: 18px;
  border: 0.8px solid currentColor;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms, border-color 160ms;
}
.bdg-radio .box { border-radius: 50%; }
.bdg-check .box::after {
  content: "";
  width: 9px; height: 9px;
  background: var(--paper);
  transform: scale(0);
  transition: transform 160ms var(--ease-bdg);
}
.bdg-radio .box::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--paper);
  transform: scale(0);
  transition: transform 160ms var(--ease-bdg);
}
.bdg-check.on .box,
.bdg-radio.on .box {
  background: currentColor;
  border-color: currentColor;
}
.bdg-check.on .box::after,
.bdg-radio.on .box::after { transform: scale(1); }
.dark .bdg-check.on .box::after,
.dark .bdg-radio.on .box::after { background: var(--ink-05); }

.bdg-card-opt {
  border: 0.8px solid currentColor;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  cursor: pointer;
  transition: background 160ms var(--ease-bdg);
  min-width: 0;
}
.bdg-card-opt:hover { background: var(--paper-2); }
.dark .bdg-card-opt:hover { background: rgba(255,255,255,0.04); }
.bdg-card-opt[aria-checked="true"] {
  border-color: var(--signal);
  background: var(--signal-soft);
}
.bdg-card-opt .ctrl-box {
  width: 18px; height: 18px;
  border: 0.8px solid currentColor;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.bdg-card-opt.radio .ctrl-box { border-radius: 50%; }
.bdg-card-opt[aria-checked="true"] .ctrl-box {
  background: var(--signal); border-color: var(--signal);
}
.bdg-card-opt[aria-checked="true"] .ctrl-box::after {
  content: ""; width: 9px; height: 9px; background: #fff;
}
.bdg-card-opt.radio[aria-checked="true"] .ctrl-box::after { border-radius: 50%; width: 7px; height: 7px; }
.bdg-card-opt .ttl {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.bdg-card-opt .desc {
  font-family: var(--f-body); font-size: 12px; line-height: 1.45; opacity: 0.7;
  margin-top: 4px;
}

/* --- TOGGLE -------------------------------------------------------------- */
.bdg-toggle {
  width: 40px; height: 22px;
  border: 0.8px solid currentColor;
  position: relative; cursor: pointer;
  display: inline-block;
  transition: background 200ms var(--ease-bdg);
  flex-shrink: 0;
}
.bdg-toggle::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: currentColor;
  transition: left 220ms var(--ease-bdg), background 200ms;
}
.bdg-toggle.on { background: var(--signal); border-color: var(--signal); }
.bdg-toggle.on::after { left: calc(100% - 18px); background: #fff; }
.dark .bdg-toggle.on { background: var(--c-yellow); border-color: var(--c-yellow); }
.dark .bdg-toggle.on::after { background: var(--ink-05); }

/* --- CHIP / TAG ---------------------------------------------------------- */
.bdg-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px 6px;
  border: 0.8px solid currentColor;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 0;
}
.bdg-tag.solid {
  background: var(--signal); color: #fff; border-color: var(--signal);
}
.dark .bdg-tag.solid { color: var(--ink-05); }
.bdg-tag .x {
  cursor: pointer; opacity: 0.5;
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px;
  font-family: var(--f-headline);
  font-size: 14px; font-weight: 650;
  line-height: 0.5;
}
.bdg-tag .x:hover { opacity: 1; }

/* --- TOOLTIP ------------------------------------------------------------- */
.bdg-tt-wrap { position: relative; display: inline-flex; }
.bdg-tt {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  padding: 8px 11px;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  pointer-events: none;
  opacity: 0; transition: opacity 160ms var(--ease-bdg);
  z-index: 10;
}
.dark .bdg-tt { background: #F4F4F5; color: var(--ink-05); }
.bdg-tt::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--ink);
}
.dark .bdg-tt::after { border-top-color: #F4F4F5; }
.bdg-tt-wrap:hover .bdg-tt,
.bdg-tt-wrap:focus-within .bdg-tt { opacity: 1; }
.bdg-tt.titled {
  white-space: normal;
  width: 240px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--f-body);
  font-size: 12px;
  padding: 12px 14px;
  line-height: 1.45;
  display: flex; flex-direction: column; gap: 6px;
}
.bdg-tt.titled .tt-h {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.06em;
}
.bdg-tt.titled a { color: var(--signal); border-bottom: 0.8px solid var(--signal); }

/* --- TABS / FILTERS ------------------------------------------------------ */
.bdg-tabs {
  display: inline-flex;
  border: 0.8px solid currentColor;
}
.bdg-tabs .tab {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: -0.005em;
  padding: 9px 16px 10px;
  cursor: pointer;
  border-right: 0.8px solid currentColor;
  background: transparent;
  color: inherit;
  transition: background 160ms var(--ease-bdg);
}
.bdg-tabs .tab:last-child { border-right: 0; }
.bdg-tabs .tab:hover { background: var(--paper-2); }
.dark .bdg-tabs .tab:hover { background: rgba(255,255,255,0.06); }
.bdg-tabs .tab[aria-selected="true"] { background: currentColor; color: var(--paper); }
.dark .bdg-tabs .tab[aria-selected="true"] { color: var(--ink-05); }

.bdg-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bdg-filter {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 12px;
  border: 0.8px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 160ms var(--ease-bdg);
}
.bdg-filter[aria-pressed="true"] { background: currentColor; color: var(--paper); }
.dark .bdg-filter[aria-pressed="true"] { color: var(--ink-05); }
.bdg-filter .ct {
  font-family: var(--f-mono); font-size: 10px;
  background: var(--signal); color: #fff;
  padding: 1px 5px;
}
.bdg-filter[aria-pressed="true"] .ct { background: var(--paper); color: currentColor; }

.bdg-slider-arrows {
  display: inline-flex; align-items: center; gap: 0;
  border: 0.8px solid currentColor;
}
.bdg-slider-arrows button {
  width: 36px; height: 36px;
  border: 0; background: transparent; color: inherit;
  cursor: pointer;
  font-family: var(--f-mono); font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-right: 0.8px solid currentColor;
}
.bdg-slider-arrows button:last-child { border-right: 0; }
.bdg-slider-arrows button:hover { background: currentColor; color: var(--paper); }
.dark .bdg-slider-arrows button:hover { color: var(--ink-05); }
.bdg-slider-arrows .count {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0 14px;
  border-right: 0.8px solid currentColor;
  display: inline-flex; align-items: center; height: 36px;
  font-variant-numeric: tabular-nums;
}

/* --- CARD / BADGE / DIVIDER --------------------------------------------- */
.bdg-card-demo {
  border: 0.8px solid currentColor;
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 240px; max-width: 320px;
}
.bdg-card-demo .ix {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.5;
}
.bdg-card-demo h5 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 20px; line-height: 1.05; letter-spacing: -0.005em; margin: 0;
}
.bdg-card-demo p {
  font-family: var(--f-body); font-size: 13px; line-height: 1.5; opacity: 0.7; margin: 0;
}
.bdg-card-demo .foot {
  margin-top: 6px; padding-top: 10px; border-top: 0.8px solid currentColor;
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.65;
}

.bdg-badge {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px 4px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0.8px solid currentColor;
}
.bdg-badge .dot {
  width: 6px; height: 6px;
}
.bdg-badge.live { color: var(--c-green); border-color: var(--c-green); }
.bdg-badge.live .dot { background: var(--c-green); }
.bdg-badge.beta { color: var(--c-blue); border-color: var(--c-blue); }
.bdg-badge.beta .dot { background: var(--c-blue); }
.bdg-badge.warn { color: var(--c-red); border-color: var(--c-red); }
.bdg-badge.warn .dot { background: var(--c-red); }

/* --- ALERT --------------------------------------------------------------- */
.bdg-alert {
  border: 0.8px solid currentColor;
  padding: 16px 18px 18px;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 14px;
  align-items: start;
  max-width: 520px;
}
.bdg-alert .ic {
  width: 14px; height: 14px; margin-top: 3px;
  background: currentColor;
}
.bdg-alert .body-c {
  display: flex; flex-direction: column; gap: 4px;
}
.bdg-alert .ttl {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 13px; letter-spacing: -0.005em;
}
.bdg-alert p {
  font-family: var(--f-body); font-size: 13px; line-height: 1.5; opacity: 0.75; margin: 0;
}
.bdg-alert .x {
  cursor: pointer; font-family: var(--f-mono); font-size: 14px;
  opacity: 0.55;
  background: transparent; border: 0; color: inherit;
}
.bdg-alert.info  { color: var(--ink); }
.bdg-alert.warn  { color: var(--c-red); }
.dark .bdg-alert.info { color: var(--paper); }

/* --- BREADCRUMBS / PAGINATION -------------------------------------------- */
.bdg-crumbs {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 10px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.bdg-crumbs a, .bdg-crumbs span { opacity: 0.6; }
.bdg-crumbs .sep { opacity: 0.35; }
.bdg-crumbs .cur { opacity: 1; color: currentColor; }

.bdg-pager {
  display: inline-flex; align-items: stretch;
  border: 0.8px solid currentColor;
}
.bdg-pager button {
  font-family: var(--f-mono); font-size: 12px;
  padding: 9px 14px;
  background: transparent; color: inherit;
  border: 0; border-right: 0.8px solid currentColor;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 160ms var(--ease-bdg);
}
.bdg-pager button:last-child { border-right: 0; }
.bdg-pager button:hover { background: var(--paper-2); }
.dark .bdg-pager button:hover { background: rgba(255,255,255,0.06); }
.bdg-pager button[aria-current="true"] { background: currentColor; color: var(--paper); }
.dark .bdg-pager button[aria-current="true"] { color: var(--ink-05); }
.bdg-pager .arrow { font-family: var(--f-mono); }

/* --- MODAL -------------------------------------------------------------- */
.bdg-modal-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(10,10,12,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
html[data-theme="dark"] .bdg-modal-overlay { background: rgba(0,0,0,0.7); }
.bdg-modal {
  width: min(520px, 100%);
  background: var(--paper); color: var(--ink);
  border: 0.8px solid var(--line);
  padding: 0;
  display: flex; flex-direction: column;
}
.bdg-modal .m-hed {
  padding: 22px 26px 18px;
  border-bottom: 0.8px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between;
}
.bdg-modal .m-hed h5 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 22px; line-height: 1.05; letter-spacing: -0.005em; margin: 0;
}
.bdg-modal .m-hed .x {
  font-family: var(--f-mono); font-size: 16px; cursor: pointer;
  background: transparent; border: 0; color: inherit; opacity: 0.55;
}
.bdg-modal .m-body {
  padding: 22px 26px;
}
.bdg-modal .m-body p {
  font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0;
}
.bdg-modal .m-foot {
  padding: 16px 26px 22px;
  border-top: 0.8px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end;
}

/* --- TABLE -------------------------------------------------------------- */
.bdg-table {
  width: 100%;
  border-collapse: collapse;
  border: 0.8px solid currentColor;
}
.bdg-table thead th {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 0.8px solid currentColor;
  opacity: 0.7;
  font-weight: 500;
}
.bdg-table tbody td {
  font-family: var(--f-body); font-size: 13px;
  padding: 12px 14px;
  border-bottom: 0.8px solid currentColor;
}
.bdg-table tbody tr:last-child td { border-bottom: 0; }
.bdg-table tbody tr:nth-child(odd) td { background: var(--paper-2); }
.dark .bdg-table tbody tr:nth-child(odd) td { background: rgba(255,255,255,0.03); }
.bdg-table .num { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--f-mono); font-size: 12px; }
.bdg-table .delta.up { color: var(--c-green); }
.bdg-table .delta.down { color: var(--c-red); }

@media (max-width: 1100px) {
  .comp-block { grid-template-columns: 1fr; }
  .comp-block .meta { border-right: 0; border-bottom: 0.8px solid var(--line); }
}
@media (max-width: 640px) {
  .comp-block .meta { padding: 18px 20px 20px; }
  .comp-block .stage { padding: 18px 20px 22px; }
  .comp-block .meta .anatomy { grid-template-columns: 1fr; }
}

.curve-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  border: 0.8px solid var(--line);
}
.curve-block .pane {
  padding: 28px 32px 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.curve-block .pane + .pane { border-left: 0.8px solid var(--line); background: var(--paper-2); }
.curve-block svg {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  border: 0.8px solid var(--line);
  background: var(--paper);
}
.curve-block .kvs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-top: 0.8px solid var(--line);
  padding-top: 14px;
}
.curve-block .kvs div { display: flex; flex-direction: column; gap: 4px; }
.curve-block .kvs .k {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-2);
}
.curve-block .kvs .v {
  font-family: var(--f-headline); font-weight: 650; font-size: 16px; text-transform: uppercase;
}
.curve-block .pane code {
  font-family: var(--f-mono);
  font-size: 13px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 12px;
  display: inline-block;
  cursor: pointer;
}
.curve-block .demo-track {
  height: 56px;
  border: 0.8px solid var(--line);
  position: relative;
  background: var(--paper);
}
.curve-block .demo-track .ball {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  background: var(--signal);
  left: 12px;
}
.curve-block .demo-track.run .ball {
  animation: bdg-glide 1100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes bdg-glide {
  from { left: 12px; }
  to   { left: calc(100% - 40px); }
}

.dur-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border: 0.8px solid var(--line);
}
.dur {
  padding: 18px 18px 20px;
  border-right: 0.8px solid var(--line);
  border-bottom: 0.8px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.dur .ms {
  font-family: var(--f-headline); font-weight: 650; font-size: 36px;
  line-height: 1.0; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.dur .ms small { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; font-weight: 400; opacity: 0.5; }
.dur .name {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 14px; line-height: 1.0; letter-spacing: -0.005em;
}
.dur .use {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-2);
}
.dur .bar {
  margin-top: 8px;
  height: 4px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.dur .bar::after {
  content: ""; position: absolute; inset: 0;
  background: var(--signal);
  transform-origin: left;
  transform: scaleX(0);
}
.dur.play .bar::after {
  animation: dur-play var(--ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes dur-play { to { transform: scaleX(1); } }

.motion-demos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.motion-demo {
  border: 0.8px solid var(--line);
  padding: 26px 28px 28px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 320px;
}
.motion-demo .ix {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2);
}
.motion-demo h4 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 22px; line-height: 1.05; letter-spacing: -0.005em;
  margin: 0;
}
.motion-demo .stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2);
  position: relative;
  padding: 24px;
  min-height: 160px;
}
.motion-demo .ctl {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  border-top: 0.8px solid var(--line);
  padding-top: 14px;
}
.motion-demo .ctl button {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 14px;
  border: 0.8px solid var(--ink); color: var(--ink); background: transparent;
  cursor: pointer; transition: background 160ms var(--ease-bdg);
}
.motion-demo .ctl button:hover { background: var(--ink); color: var(--paper); }
.motion-demo .ctl .desc { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

.count {
  font-family: var(--f-headline); font-weight: 650;
  font-size: clamp(72px, 12vw, 140px);
  line-height: 1.0; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.count .unit { color: var(--signal); font-size: 0.5em; }

.unveil-svg { width: 100%; max-height: 200px; }
.unveil-svg path { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.unveil-svg .signal { stroke: var(--signal); stroke-width: 2; }
.unveil-svg .grid { stroke: var(--line); stroke-width: 0.6; }

.reduced {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 0.8px solid var(--line);
}
.reduced > div {
  padding: 26px 30px 30px;
}
.reduced > div + div { border-left: 0.8px solid var(--line); background: var(--paper-2); }
.reduced .tag {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.reduced .tag::before { content: ""; width: 8px; height: 8px; display: inline-block; }
.reduced .with .tag::before { background: var(--signal); }
.reduced .without .tag::before { background: var(--c-green); }
.reduced h4 {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 22px; line-height: 1.05; letter-spacing: -0.005em; margin: 0 0 8px;
}
.reduced p { font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0 0 12px; max-width: 40ch; }
.reduced code {
  font-family: var(--f-mono); font-size: 12px;
  background: var(--ink); color: var(--paper);
  padding: 8px 12px; display: inline-block;
}

@media (max-width: 1100px) {
  .curve-block { grid-template-columns: 1fr; }
  .curve-block .pane + .pane { border-left: 0; border-top: 0.8px solid var(--line); }
  .motion-demos { grid-template-columns: 1fr; }
  .reduced { grid-template-columns: 1fr; }
  .reduced > div + div { border-left: 0; border-top: 0.8px solid var(--line); }
}

.imagery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.img-card {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-rows: 200px auto;
  background: var(--paper);
}
.img-card .canvas {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.img-card .canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.img-card .meta {
  padding: 16px 20px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.img-card .meta .ix {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
}
.img-card .meta h4 {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0;
}
.img-card .meta p {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
}

.ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.ref {
  border: 0.8px solid var(--line);
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: background 200ms var(--ease-bdg);
  position: relative;
}
.ref:hover { background: var(--paper-2); }
.ref:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.ref-stage {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  border: 0.8px solid var(--line);
  overflow: hidden;
  margin-bottom: 2px;
}
.ref-stage img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 320ms var(--ease-bdg);
}
.ref:hover .ref-stage img { transform: scale(1.02); }
.ref-stage-empty {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(127,127,127,0.08) 7px 8px);
}
.ref-stage-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ref-famous {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: -2px;
}
.ref .ix {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ref h5 {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0;
}
.ref .work {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 32ch;
  margin: 0;
}
.ref .arrow {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 8px;
  border-top: 0.8px solid var(--line);
}
.ref:hover .arrow { color: var(--signal); }

.dodont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dodont .panel {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-rows: 180px auto;
}
.dodont .panel .stage {
  position: relative;
  overflow: hidden;
}
.dodont .panel.do .stage   { background: var(--ink); color: var(--paper); }
.dodont .panel.dont .stage {
  background:
    radial-gradient(circle at 30% 30%, rgba(245,89,16,0.6), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(50,54,255,0.5), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0,209,144,0.4), transparent 50%);
  background-color: #1a1a26;
}
.dodont .panel.dont .stage::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,0.08) 6px 7px);
}
.dodont .panel .meta {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.dodont .panel .meta .tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.dodont .panel.do .meta .tag::before { content: "✓"; color: var(--c-green); }
.dodont .panel.dont .meta .tag::before { content: "×"; color: var(--c-red); }
.dodont .panel .meta h4 {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0;
}
.dodont .panel .meta p {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
}

.live-field {
  border: 0.8px solid var(--line);
  background: var(--ink);
  color: var(--paper);
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}
.live-field canvas {
  width: 100%; height: 100%; display: block;
}
.live-field .caption {
  position: absolute; left: 22px; bottom: 18px; right: 22px;
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  pointer-events: none;
}
.live-field .caption strong { color: var(--paper); font-weight: 500; }

@media (max-width: 1100px) {
  .imagery-grid, .dodont { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .live-field { aspect-ratio: 4 / 3; }
}

.glyph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 0.8px solid var(--line);
}
.gly {
  padding: 18px 18px 22px;
  border-right: 0.8px solid var(--line);
  border-bottom: 0.8px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
  aspect-ratio: 1 / 1;
  justify-content: space-between;
}
.gly .mark {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: 64px;
  line-height: 1.0;
  text-align: center;
  color: var(--ink);
  margin: auto 0;
}
.gly .lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; justify-content: space-between; gap: 8px;
}
.gly .lbl .role { color: var(--ink); }

.neq-block {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}
.neq-block .left {
  padding: 36px 36px 40px;
  display: flex; flex-direction: column; gap: 16px;
  border-right: 0.8px solid var(--line);
  background: var(--paper-2);
}
.neq-block .big-neq {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: clamp(140px, 18vw, 240px);
  line-height: 0.85;
  color: var(--signal);
  margin: 0;
  letter-spacing: -0.04em;
}
.neq-block .right {
  padding: 28px 32px 32px;
  display: flex; flex-direction: column;
  gap: 0;
}
.neq-block .right .nex {
  padding: 14px 0;
  border-bottom: 0.8px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  align-items: baseline;
  gap: 14px;
}
.neq-block .right .nex:last-child { border-bottom: 0; }
.neq-block .right .nex .a {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: -0.005em;
}
.neq-block .right .nex .b {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--ink-2);
}
.neq-block .right .nex .g {
  text-align: center;
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: 22px;
  color: var(--signal);
}

/* hairlines & dots */
.struct-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.struct {
  border: 0.8px solid var(--line);
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 220px;
}
.struct .ttl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.struct .stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
}
.struct .desc {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.figure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.figure-cell {
  border: 0.8px solid var(--line);
  padding: 24px 26px 26px;
  display: flex; flex-direction: column; gap: 16px;
}
.fig-stage {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 28px; line-height: 1;
  color: var(--ink);
}
.fig-stage .fig { display: inline-block; width: 18px; height: 28px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 28'><circle cx='9' cy='5' r='4'/><path d='M3,10 L15,10 L15,18 L13,28 L11,28 L11,20 L7,20 L7,28 L5,28 L3,18 Z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 28'><circle cx='9' cy='5' r='4'/><path d='M3,10 L15,10 L15,18 L13,28 L11,28 L11,20 L7,20 L7,28 L5,28 L3,18 Z'/></svg>") center/contain no-repeat; }
.fig-stage .fig.dim { opacity: 0.25; }
.fig-stage .fig.signal { color: var(--signal); }

.dot-matrix {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  width: min(280px, 100%);
}
.dot-matrix .d {
  aspect-ratio: 1;
  background: var(--ink);
  border-radius: 50%;
  opacity: 0.18;
}
.dot-matrix .d.on { opacity: 1; }

@media (max-width: 1100px) {
  .neq-block { grid-template-columns: 1fr; }
  .neq-block .left { border-right: 0; border-bottom: 0.8px solid var(--line); }
  .struct-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .struct-grid, .figure-grid { grid-template-columns: 1fr; }
  .glyph-grid { grid-template-columns: 1fr 1fr; }
  .neq-block .left { padding: 24px 22px 28px; }
  .neq-block .big-neq { font-size: clamp(96px, 36vw, 180px); }
}

.body-ladder {
  border: 0.8px solid var(--line);
}
.body-ladder .br {
  display: grid;
  grid-template-columns: 70px 110px 1fr 90px;
  gap: 18px;
  align-items: baseline;
  padding: 18px 22px;
  border-bottom: 0.8px solid var(--line);
}
.body-ladder .br:last-child { border-bottom: 0; }
.body-ladder .br .rung {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.body-ladder .br .spec {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.body-ladder .br .demo {
  font-family: var(--f-body);
  color: var(--ink);
  line-height: 1.4;
  max-width: 56ch;
}
.body-ladder .br .demo strong { font-weight: 600; }
.body-ladder .br .copy {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  cursor: pointer;
}

.weight-grid {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.wt {
  padding: 18px 18px 22px;
  border-right: 0.8px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.wt:last-child { border-right: 0; }
.wt .num {
  font-family: var(--f-body);
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.wt .lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.tagline-block {
  border: 0.8px solid var(--line);
  padding: 64px 56px 56px;
  background: var(--paper-2);
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.tagline-block .lockup {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: clamp(40px, 8vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0;
}
.tagline-block .lockup .em {
  display: inline-block;
  padding: 0.04em 0.18em 0.10em;
  line-height: 0.88;
  background: var(--c-yellow);
  color: var(--ink-05);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.tagline-block .lockup .em.b { background: var(--c-blue);   color: #fff; }
.tagline-block .lockup .em.o { background: var(--c-orange); color: #fff; }
.tagline-block .lockup .em.g { background: var(--c-green);  color: var(--ink-05); }
.tagline-block .lockup .em.p { background: var(--c-purple); color: var(--ink-05); }
.tagline-block .anatomy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  border-top: 0.8px solid var(--line);
  padding-top: 24px;
}
.tagline-block .anatomy div {
  display: flex; flex-direction: column; gap: 4px;
}
.tagline-block .anatomy .k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tagline-block .anatomy .v {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

/* Vertical rhythm demo */
.rhythm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 0.8px solid var(--line);
}
.rhythm > div { padding: 28px 30px 30px; }
.rhythm > div + div { border-left: 0.8px solid var(--line); background: var(--paper-2); }
.rhythm h5 {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
}
.rhythm .tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.rhythm .tag.ok::before { content:"✓"; color: var(--c-green); }
.rhythm .tag.no::before { content:"×"; color: var(--c-red); }
.rhythm .demo {
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(127,127,127,0.10) 7px 8px);
  padding: 14px 16px;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 24px;
}
.rhythm .demo strong { font-weight: 600; }
.rhythm .demo h6 {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 24px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.rhythm .demo p { margin: 0 0 16px; max-width: 50ch; }
.rhythm.broken .demo h6 { line-height: 26px; margin: 0 0 7px; }
.rhythm.broken .demo p { line-height: 23px; margin: 0 0 19px; }

/* Line-length guidance */
.linelen {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 12px;
}
.linelen .ll {
  padding: 18px 22px;
  border-bottom: 0.8px solid var(--line);
  display: grid;
  grid-template-columns: 130px 1fr 80px;
  gap: 18px;
  align-items: baseline;
}
.linelen .ll:last-child { border-bottom: 0; }
.linelen .ll .tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.linelen .ll.short .tag { color: var(--c-red); }
.linelen .ll.right .tag { color: var(--c-green); }
.linelen .ll.long .tag { color: var(--c-red); }
.linelen .ll .demo {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.linelen .ll .ch {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}

@media (max-width: 1100px) {
  .weight-grid { grid-template-columns: 1fr 1fr 1fr; }
  .wt:nth-child(3) { border-right: 0; }
  .wt { border-bottom: 0.8px solid var(--line); }
  .wt:last-child, .wt:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 640px) {
  .body-ladder .br { grid-template-columns: 50px 1fr; gap: 8px; padding: 14px 16px; }
  .body-ladder .br .spec { grid-column: 1 / -1; }
  .body-ladder .br .demo { grid-column: 1 / -1; max-width: 100%; }
  .body-ladder .br .copy { display: none; }
  .weight-grid { grid-template-columns: 1fr 1fr; }
  .wt { border-right: 0; border-bottom: 0.8px solid var(--line); }
  .wt:nth-child(2n) { border-right: 0; }
  .rhythm { grid-template-columns: 1fr; }
  .rhythm > div + div { border-left: 0; border-top: 0.8px solid var(--line); }
  .linelen .ll { grid-template-columns: 1fr; }
  .linelen .ll .ch { text-align: left; }
  .tagline-block { padding: 36px 24px 32px; }
}

.ramp-block {
  border: 0.8px solid var(--line);
  margin-top: 12px;

/* === COLOR IN APPLICATION (04.F) + WHEEL ================================ */
}
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.app-card {
  border: 0.8px solid var(--line);
  display: grid;
  grid-template-rows: auto auto;
  background: var(--paper);
  overflow: hidden;
}
.app-card .stage {
  background: var(--paper-2);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.app-card .stage.tall   { aspect-ratio: 9 / 16; }
.app-card .stage.wide   { aspect-ratio: 16 / 9; }
.app-card .stage.poster { aspect-ratio: 3 / 4; }
.app-card .stage img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.app-card .meta {
  padding: 14px 18px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.app-card .meta .ix {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal);
}
.app-card .meta .ttl {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 14px; letter-spacing: -0.005em;
}
.app-card .meta .desc {
  font-family: var(--f-body); font-size: 12px; line-height: 1.45; color: var(--ink-2);
}
.app-card .meta .palette {
  display: flex; gap: 4px; margin-top: 6px;
}
.app-card .meta .palette span { width: 16px; height: 16px; border: 0.8px solid var(--line); }

.wheel-block {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  border: 0.8px solid var(--line);
  padding: 28px 32px;
  margin-top: 12px;
}
.wheel-block svg { width: 100%; max-width: 260px; aspect-ratio: 1; height: auto; }
.wheel-legend { display: flex; flex-direction: column; gap: 0; }
.wheel-legend .row {
  display: grid; grid-template-columns: 20px 1fr 70px 1fr;
  gap: 12px; align-items: baseline;
  padding: 10px 0;
  border-bottom: 0.8px solid var(--line-2);
}
.wheel-legend .row:last-child { border-bottom: 0; }
.wheel-legend .row .chip { width: 14px; height: 14px; }
.wheel-legend .row .name {
  font-family: var(--f-headline); font-weight: 650; text-transform: uppercase;
  font-size: 13px; letter-spacing: -0.005em;
}
.wheel-legend .row .pct {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-2);
}
.wheel-legend .row .role {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  text-align: right;
}

@media (max-width: 1100px) {
  .wheel-block { grid-template-columns: 1fr; }
}

/* original ramp-block continues below */
.ramp-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: stretch;
  border-bottom: 0.8px solid var(--line);
}
.ramp-row:last-child { border-bottom: 0; }
.ramp-row .ramp-hed {
  padding: 18px 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  border-right: 0.8px solid var(--line);
  background: var(--paper-2);
}
.ramp-row .ramp-hed .name {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 1.0;
  letter-spacing: -0.005em;
}
.ramp-row .ramp-hed .role {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ramp-cells {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  min-height: 86px;
}
.ramp-cell {
  position: relative;
  padding: 10px 8px;
  border-left: 0.8px solid rgba(255,255,255,0.18);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 200ms var(--ease-bdg);
}
.ramp-cell:first-child { border-left: 0; }
.ramp-cell:hover { z-index: 2; transform: scale(1.05); }
.ramp-cell .stop {
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
  font-size: 9px;
}
.ramp-cell .hex {
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: none;
}

/* Scheme cards */
.scheme-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.scheme {
  border: 0.8px solid var(--sc-line);
  padding: 28px 28px 32px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 480px;
}
.scheme .sc-hed {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  border-bottom: 0.8px solid var(--sc-line);
  padding-bottom: 14px;
}
.scheme .sc-name {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1.0;
  letter-spacing: -0.01em;
}
.scheme .sc-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
}
.scheme .sc-rows { display: flex; flex-direction: column; gap: 0; }
.scheme .sc-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 0.8px solid var(--sc-line);
  cursor: pointer;
  transition: padding-left 180ms var(--ease-bdg);
}
.scheme .sc-row:hover { padding-left: 8px; }
.scheme .sc-row .chip {
  width: 22px; height: 22px;
  border: 0.8px solid var(--sc-line);
}
.scheme .sc-row .lbl {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.scheme .sc-row .lbl small {
  display: block;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 2px;
}
.scheme .sc-row .hex {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.7;
}
.scheme .sc-demo {
  margin-top: auto;
  padding: 18px 0 0;
  border-top: 0.8px solid var(--sc-line);
}
.scheme .sc-demo h5 {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.0;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
}
.scheme .sc-demo p {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.75;
  margin: 0;
  max-width: 36ch;
}
.scheme .sc-demo .pill {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Pairings matrix */
.pair-mtx {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.pair {
  border: 0.8px solid var(--line);
  padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
  aspect-ratio: 5 / 4;
}
.pair .demo {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin: 6px 0 auto;
}
.pair .meta {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}
.pair .ratio {
  font-family: var(--f-headline);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.pair .verdict {
  padding: 2px 6px 3px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pair .verdict.pass { background: var(--c-green); color: var(--ink-05); }
.pair .verdict.aa   { background: var(--c-yellow); color: var(--ink-05); }
.pair .verdict.fail { background: var(--c-red); color: #fff; }

/* mobile */
@media (max-width: 1100px) {
  .ramp-row { grid-template-columns: 110px 1fr; }
  .scheme-pair { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ramp-row { grid-template-columns: 1fr; }
  .ramp-row .ramp-hed { border-right: 0; border-bottom: 0.8px solid var(--line); flex-direction: row; justify-content: space-between; align-items: baseline; padding: 12px 16px; }
  .ramp-cells { grid-template-columns: repeat(6, 1fr); }
  .pair-mtx { grid-template-columns: 1fr 1fr; }
  .pair { aspect-ratio: 4 / 3; }
  .pair .demo { font-size: 24px; }
}
.search-shade {
  position: fixed; inset: 0;
  background: rgba(10,10,12,0.55);
  z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px;
}
html[data-theme="dark"] .search-shade { background: rgba(0,0,0,0.7); }
.search-panel {
  width: min(760px, 94vw);
  max-height: calc(100vh - 120px);
  background: var(--paper);
  border: 0.8px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* --- Input row with inline glyph + esc kbd hint (Raycast/Linear pattern) - */
.search-input-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  border-bottom: 0.8px solid var(--line);
}
.search-glyph {
  font-family: var(--f-mono);
  font-size: 22px;
  color: var(--ink-2);
  line-height: 1;
}
.search-panel input {
  border: 0; outline: 0;
  padding: 20px 0;
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: -0.005em;
  background: transparent;
  color: var(--ink);
  width: 100%;
}
.search-panel input::placeholder { color: var(--ink-3); }
.search-kbd { padding: 4px 8px; }

/* --- Category filter chips (Stripe/Vercel pattern) --------------------- */
.search-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 20px;
  border-bottom: 0.8px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.search-chips::-webkit-scrollbar { display: none; }
.search-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border: 0.8px solid var(--line);
  background: transparent;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg), border-color 160ms var(--ease-bdg);
}
.search-chip:hover { color: var(--ink); }
.search-chip[data-active="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.search-chip-count {
  font-size: 9.5px;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* --- Result count strip ----------------------------------------------- */
.search-meta {
  display: flex; gap: 12px;
  padding: 10px 20px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 0.8px solid var(--line-2);
}
.search-meta em {
  font-style: normal;
  color: var(--ink);
  background: var(--signal-soft);
  padding: 0 6px;
}

/* --- Result rows ------------------------------------------------------ */
.search-results { flex: 1; min-height: 0; overflow-y: auto; }
.sr-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  border-top: 0.8px solid var(--line-2);
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  position: relative;
}
/* When a row has a thumbnail (Linear/Vercel pattern — see what you'll download),
   make room for a 48px square preview between the index code and the label. */
.sr-row[data-has-thumb="true"] {
  grid-template-columns: 56px 48px 1fr auto;
  gap: 14px;
}
.sr-thumb {
  width: 48px; height: 48px;
  display: block;
  background: var(--paper-2);
  border: 0.8px solid var(--line-2);
  overflow: hidden;
  flex-shrink: 0;
}
.sr-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.sr-row:first-child { border-top: 0; }
.sr-row[data-active="true"] {
  background: var(--paper-2);
}
.sr-row[data-active="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--signal);
}
.sr-row .ix {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.sr-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sr-row .lbl {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-hl {
  background: var(--signal);
  color: var(--ink-05);
  padding: 0 3px;
  border-radius: 0;
}
html[data-theme="dark"] .sr-hl { color: var(--ink-05); }
.sr-path {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-file {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-meta {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.sr-tag {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 3px 7px;
  border: 0.8px solid var(--line-2);
}
.sr-row .kind {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-transform: uppercase;
  padding: 4px 8px;
  border: 0.8px solid var(--line);
  background: var(--paper);
}
/* Subtle kind tinting — gives each badge a recognizable color cue, brand-safe. */
.sr-row .kind[data-kind="Color"]     { color: var(--c-orange); border-color: var(--c-orange); }
.sr-row .kind[data-kind="Type"]      { color: var(--ink); }
.sr-row .kind[data-kind="Component"] { color: var(--ink); }
.sr-row .kind[data-kind="Motion"]    { color: var(--c-blue); border-color: var(--c-blue); }
.sr-row .kind[data-kind="Template"]  { color: var(--c-green); border-color: var(--c-green); }
.sr-row .kind[data-kind="Phrase"]    { color: var(--ink-2); }
.sr-row .kind[data-kind="Audience"]  { color: var(--c-purple); border-color: var(--c-purple); }
.sr-row .kind[data-kind="File"]      { color: var(--ink-2); border-color: var(--line); background: var(--paper-2); }
.sr-row .kind[data-kind="Section"]   { color: var(--ink); }
.sr-row .kind[data-kind="Tool"]      { color: var(--signal); border-color: var(--signal); }

/* Inline download chip — appears on rows whose corpus entry has `download`. */
.sr-dl {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border: 0.8px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg), border-color 160ms var(--ease-bdg);
}
.sr-dl:hover { background: var(--signal); border-color: var(--signal); color: var(--paper); }
.sr-dl:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.sr-dl[data-state="busy"] { background: var(--paper); color: var(--signal); border-color: var(--signal); }
.sr-dl[data-state="busy"] > span:first-child {
  display: inline-block;
  animation: dl-spin 900ms linear infinite;
}
.sr-dl[data-state="done"] { background: var(--c-green); border-color: var(--c-green); color: var(--ink-05); }
@media (prefers-reduced-motion: reduce) {
  .sr-dl[data-state="busy"] > span:first-child { animation: none; }
}

.sr-empty { padding: 36px 24px; color: var(--ink-3); font-size: 14px; line-height: 1.55; }
.sr-empty em { color: var(--ink); font-style: normal; font-weight: 500; }

/* --- Keyboard hint footer (Raycast pattern) --------------------------- */
.search-foot {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px;
  border-top: 0.8px solid var(--line);
  background: var(--paper-2);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.search-foot .kbd { padding: 2px 6px; font-size: 9.5px; }
.search-foot-spacer { flex: 1; }

/* --- Small-screen tightening ----------------------------------------- */
@media (max-width: 640px) {
  .search-shade { padding-top: 56px; }
  .search-panel { width: 100vw; max-height: calc(100vh - 80px); border-left: 0; border-right: 0; }
  .search-panel input { font-size: 18px; padding: 18px 0; }
  .search-input-wrap { padding: 0 16px; gap: 12px; }
  .search-chips, .search-meta, .search-foot { padding-left: 16px; padding-right: 16px; }
  .sr-row { grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 16px; }
  .sr-meta { grid-column: 2; padding-top: 2px; }
  .sr-row .lbl { white-space: normal; }
  .search-foot { font-size: 9.5px; gap: 12px; }
}

/* === TOAST =============================================================== */
.toast {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--paper);
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 12px 18px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-bdg), transform 240ms var(--ease-bdg);
}
.toast[data-on="true"] { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* === A11Y: focus-visible baseline ======================================== */
/* Specific interactive elements (.bdg-btn, .toc-item, .bdg-input, .phrase-search)
   define their own focus styling above; this is a safety net so any button or
   link that lacks bespoke focus styles still gets a visible 2px signal outline. */
.icon-btn:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}
.bdg-btn:focus-visible,
.toc-item:focus-visible { outline: none; } /* their own focus styling wins */

/* === MOBILE BAR + NAV OVERLAY (hidden at desktop) ======================== */
.mobile-bar, .mobile-nav { display: none; }

/* === RESPONSIVE ========================================================== */
@media (max-width: 1100px) {
  :root { --rail-w: 0px; --gutter: 36px; }
  .app { grid-template-columns: 1fr; }
  /* The rail is replaced on small screens by the mobile bar + overlay nav. */
  .rail { display: none; }

  /* --- Top sticky mobile bar --- */
  .mobile-bar {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0;
    height: 56px;
    padding: 0 16px;
    background: var(--paper);
    border-bottom: 0.8px solid var(--line);
    z-index: 100;
    gap: 8px;
  }
  .mobile-bar .rail-mark { gap: 10px; min-width: 0; flex: 1; }
  .mobile-bar .rail-mark .mark { width: 24px; height: 24px; flex: none; }
  .mobile-bar .rail-mark .lockup { font-size: 10px; line-height: 1.25; }
  .mobile-bar .rail-actions { flex: none; gap: 6px; }
  .mobile-bar .icon-btn { width: 44px; height: 44px; font-size: 18px; }
  .mobile-nav-head .icon-btn { width: 44px; height: 44px; font-size: 18px; }

  /* --- Full-screen overlay TOC --- */
  .mobile-nav {
    display: block;
    position: fixed; inset: 0;
    background: var(--paper);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 220ms var(--ease-bdg), transform 240ms var(--ease-bdg);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-nav[data-open="true"] {
    opacity: 1; pointer-events: auto; transform: translateY(0);
  }
  .mobile-nav-head {
    display: flex; align-items: center; justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    border-bottom: 0.8px solid var(--line);
    background: var(--paper);
    position: sticky; top: 0; z-index: 1;
    gap: 8px;
  }
  .mobile-nav-head .rail-mark { gap: 10px; min-width: 0; flex: 1; }
  .mobile-nav-head .rail-mark .mark { width: 24px; height: 24px; flex: none; }
  .mobile-nav-head .rail-mark .lockup { font-size: 10px; line-height: 1.25; }
  .mobile-nav-list { padding: 8px 16px 96px; }
  .mobile-nav-list .toc-item { padding: 14px 8px 14px 0; }
  .mobile-nav-list .toc-label { font-size: 17px; }
  .mobile-nav-list .toc-group { padding: 22px 0 8px; }

  /* Anchor the reading-progress bar at the bottom of the mobile bar. */
  .progress { left: 0; top: 56px; }

  /* Pull chapter & cover top padding clear of the fixed 56px bar. */
  .chapter { padding: 96px var(--gutter) 100px; }
  .cover { padding: 84px var(--gutter) 80px; min-height: auto; }

  /* Stack chapter title above metadata so the headline gets full width. */
  .chapter-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
  .chapter-head .chap-meta { text-align: left; flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
  .cover-top, .cover-bottom { grid-template-columns: 1fr 1fr; }
  .cover-top .mid, .cover-bottom .mid { display: none; }
  .inequalities { grid-template-columns: 1fr; gap: 18px; }
  .opener { grid-template-columns: 1fr; }
  .opener .right { border-left: 0; padding-left: 0; }
  .duality { grid-template-columns: 1fr; }
  .duality > .pole + .pole { border-left: 0; border-top: 0.8px solid var(--line); }
  .promise-band { grid-template-columns: 1fr; }
  .promise-band .b { border-left: 0; border-top: 0.8px solid var(--line); }
  .found-grid { grid-template-columns: 1fr; }
  .contrast { grid-template-columns: 1fr; }
  .contrast > div + div { border-left: 0; border-top: 0.8px solid var(--line); }
  .coming { grid-template-columns: 1fr; }
}

/* Print */
@media print {
  .rail, .progress, .toast, .search-shade { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .chapter { page-break-after: always; }
}

/* === EXTRA SMALL (mobile) ================================================ */
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  /* Bar stays 56px on phones so 44pt touch targets fit comfortably (HIG/MD). */
  .mobile-bar { padding: 0 12px; }
  .mobile-nav-head { padding: 0 12px; }
  /* Inputs ≥16px on small screens to defeat iOS auto-zoom on focus. */
  .bdg-input, .bdg-textarea, .bdg-select, .phrase-search { font-size: 16px; }
  .chapter { padding: 80px var(--gutter) 40px; }
  .chapter-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 48px; }
  .chap-meta { text-align: left !important; }
  .cover { padding: 80px var(--gutter) 60px; gap: 28px; }
  .cover-top, .cover-bottom { grid-template-columns: 1fr; gap: 12px; text-align: left !important; }
  .cover-top .right, .cover-bottom .right { text-align: left; }
  .cover-thesis { font-size: clamp(40px, 16vw, 100px); letter-spacing: -0.03em; line-height: 0.9; }
  .ineq .pair { grid-template-columns: 1fr; gap: 4px; }
  .ineq .pair .glyph { color: var(--signal); margin: 4px 0; }
  .ineq .pair .b { color: var(--ink-2); }
  .tone-grid { grid-template-columns: 1fr; }
  .tone-card { border-right: 0; border-bottom: 0.8px solid var(--line); }
  .tone-card:last-child { border-bottom: 0; }
  .found-grid { gap: 24px; }
  .promise-band { grid-template-columns: 1fr; }
  .stat .num { font-size: clamp(42px, 12vw, 72px); }
  h2.section-title { font-size: clamp(28px, 8vw, 40px); }
  .opener { gap: 32px; }
  .opener .right { gap: 16px; }
  .pullquote { font-size: clamp(26px, 7vw, 36px); }
  .duality .pole { padding: 24px 22px 28px; min-height: 0; }
  .duality .pole .row { grid-template-columns: 1fr; }
  .duality .pole .row .pipe { display: none; }
  .promise-band .a, .promise-band .b { padding: 28px 22px 30px; }
  .position-card { padding: 22px 22px 24px; }
  .page-foot { padding: 20px var(--gutter) 80px; margin-top: 56px; }
  .pf-link .pf-name { font-size: 22px; }
  /* phrase library — already responsive but tighten ix col */
  .phrase-row { padding: 14px 0; }
  .phrase-row .txt { font-size: 16px; }
  /* sentence diagram */
  .sent { padding: 20px 22px 22px; }
  .sent .quote { font-size: clamp(22px, 6vw, 30px); }
  /* ledger */
  .ledger > div { padding: 22px 22px 24px; }
  .ledger .col-title { font-size: 22px; }
  /* dual prop */
  .dual-prop > div { padding: 26px 22px 28px; }
  /* spectrum */
  .spec-axis > div, .spec-samples > div { padding: 14px 16px; }
  /* identity */
  .clearspace { gap: 24px; }
  .cs-canvas { aspect-ratio: 4 / 3; }
  .size-row { padding: 12px 14px; }
}

/* =========================================================================
   20 — MOTION LAB
   Generative workbench. Lives inside the existing site shell; no new tier,
   no new chrome. Uses --paper / --ink / --line / --signal exclusively so
   light + dark themes track the rest of the system.
   ========================================================================= */

/* Loading + empty states ------------------------------------------------- */
.lab-loading, .lab-empty {
  padding: 96px var(--gutter) 120px;
  max-width: 720px;
}
.lab-loading-bar {
  margin-top: 28px;
  height: 1px;
  width: 100%;
  background: var(--line-2);
  position: relative;
  overflow: hidden;
}
.lab-loading-bar > span {
  position: absolute;
  inset: 0;
  width: 30%;
  background: var(--ink);
  animation: lab-progress 1.4s var(--ease-bdg) infinite;
}
@keyframes lab-progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(360%); }
}

/* Root container — chapter wrapper provides outer padding ---------------- */
.lab-root { padding: 0; }

/* Lab lede (smaller margin than generic .lede so it sits closer to the
   chapter-head, since the lab page also has a SubHead + filter row below) */
.lab-lede {
  max-width: 780px;
  margin: 0 0 48px;
}

/* Gallery filter row ----------------------------------------------------- */
.lab-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--line);
  margin: 18px 0 32px;
  width: max-content;
  max-width: 100%;
}
.lab-filter-chip {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 10px 16px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg);
}
.lab-filter-chip:last-child { border-right: 0; }
.lab-filter-chip:hover { color: var(--ink); }
.lab-filter-chip[data-active="true"] {
  background: var(--ink);
  color: var(--paper);
}
.lab-filter-count {
  font-size: 10px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* Gallery grid ----------------------------------------------------------- */
.lab-card-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.lab-card-li {
  display: block;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lab-card {
  display: grid;
  grid-template-rows: auto auto;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  transition: background 200ms var(--ease-bdg);
}
.lab-card:not(.lab-card-placeholder):hover .lab-card-eyebrow {
  color: var(--ink);
}
.lab-card:not(.lab-card-placeholder):hover .lab-card-title {
  color: var(--signal);
}
.lab-card-stage {
  position: relative;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 1 / 1;     /* square thumbnail matches the 1:1 canvas */
  width: 100%;
}
.lab-card-eyebrow {
  position: absolute;
  top: 10px;
  left: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  pointer-events: none;
  z-index: 2;
  background: var(--paper);
  padding: 2px 6px;
  border: 1px solid var(--line);
}
.lab-card-placeholder-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 96px;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0.14;
}
.lab-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lab-card-title {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: 22px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.05;
}
.lab-card-thesis {
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0;
}
.lab-card-placeholder {
  cursor: default;
  opacity: 0.55;
}
.lab-card-pending {
  font-size: 11px;
  margin-top: 4px;
}

/* Workbench -------------------------------------------------------------- */
.lab-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
}

/* Canvas frame */
.lab-canvas-frame {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.lab-canvas-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.lab-back {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 160ms var(--ease-bdg);
}
.lab-back:hover { color: var(--ink); }
.lab-canvas-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
}
.lab-canvas-num {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.lab-canvas-name {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: 22px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.lab-canvas-aspect {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--line);
}
.lab-aspect-chip {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 8px 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg);
}
.lab-aspect-chip:last-child { border-right: 0; }
.lab-aspect-chip:hover { color: var(--ink); }
.lab-aspect-chip[data-active="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* Canvas stage — aspect-ratio'd box that contains the p5 canvas */
.lab-canvas-stage {
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.lab-canvas-frame[data-ratio="square"]    .lab-canvas-stage { aspect-ratio: 1 / 1; }
.lab-canvas-frame[data-ratio="portrait"]  .lab-canvas-stage { aspect-ratio: 9 / 16; max-height: 78vh; margin: 0 auto; }
.lab-canvas-frame[data-ratio="landscape"] .lab-canvas-stage { aspect-ratio: 16 / 9; }

.lab-canvas-host {
  position: absolute;
  inset: 0;
}
.lab-canvas-host canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;     /* never distort the canvas if the stage box
                              isn't an exact aspect-ratio match */
}

/* Transport bar */
.lab-transport {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-top: 1px solid var(--line-2);
}
.lab-icon-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 13px;
  cursor: pointer;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg), border-color 160ms var(--ease-bdg);
}
.lab-icon-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lab-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.lab-transport-meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.lab-transport-spacer { flex: 1; }
.lab-reduced-note { color: var(--signal); }

/* Controls column -------------------------------------------------------- */
.lab-controls-col {
  border-left: 1px solid var(--line);
  padding-left: 28px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.lab-controls-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-2);
}
.lab-thesis {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0;
}
.lab-controls-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lab-controls-h {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
  font-weight: 500;
}
.lab-controls-foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
}
.lab-controls-foot p { margin: 0; }
.lab-controls-foot .kbd { margin: 0 1px; }

/* Tag row */
.lab-tag-row { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.lab-tag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 3px 8px;
  border: 1px solid var(--line);
}

/* Preset chips */
.lab-preset-row { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); }
.lab-preset-chip {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 10px 14px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  flex: 1;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg);
}
.lab-preset-chip:last-child { border-right: 0; }
.lab-preset-chip:hover { background: var(--ink); color: var(--paper); }

/* Controls renderer stack ------------------------------------------------ */
.lab-controls-stack { display: flex; flex-direction: column; gap: 18px; }

.lab-ctrl { display: flex; flex-direction: column; gap: 6px; }
.lab-ctrl-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.lab-ctrl-label { color: var(--ink-2); text-transform: uppercase; }
.lab-ctrl-value { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Slider — same hairline language */
.lab-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.lab-slider::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--line);
}
.lab-slider::-moz-range-track {
  height: 1px;
  background: var(--line);
  border: 0;
}
.lab-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--ink);
  border: 0;
  margin-top: -6px;
  cursor: grab;
  transition: transform 160ms var(--ease-bdg);
}
.lab-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--ink);
  border: 0;
  border-radius: 0;
  cursor: grab;
}
.lab-slider:active::-webkit-slider-thumb { transform: scale(1.2); }
.lab-slider:focus { outline: none; }
.lab-slider:focus-visible::-webkit-slider-thumb { background: var(--signal); }

/* Select */
.lab-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 6px 22px 6px 0;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: right 8px top 14px, right 4px top 14px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.lab-select:focus { outline: 1px solid var(--ink); outline-offset: 4px; }

/* Toggle */
.lab-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.lab-toggle-track {
  width: 32px;
  height: 16px;
  border: 1px solid var(--line);
  position: relative;
}
.lab-toggle-thumb {
  position: absolute;
  top: 1px; left: 1px;
  width: 12px; height: 12px;
  background: var(--ink-2);
  transition: transform 200ms var(--ease-bdg), background 200ms var(--ease-bdg);
}
.lab-toggle[aria-checked="true"] .lab-toggle-thumb {
  background: var(--signal);
  transform: translateX(16px);
}

/* Text input */
.lab-text {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink);
}
.lab-text:focus { outline: none; border-color: var(--ink); }

/* Textarea + caption editor controls -------------------------------------- */
.lab-textarea {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  padding: 8px 10px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  resize: vertical;
  min-height: 44px;
  width: 100%;
}
.lab-textarea:focus { outline: none; border-color: var(--ink); }
.lab-textarea::placeholder { color: var(--ink-3); }

.lab-mini-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  padding: 4px 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg);
}
.lab-mini-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Highlight list (one row per active highlight phrase) */
.lab-hl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line-2);
  padding: 10px;
}
.lab-hl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lab-hl-phrase {
  font-family: var(--f-headline);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: 13px;
  color: #FFFFFF;
  padding: 2px 7px 3px;
  line-height: 1.1;
  max-width: 70%;
  word-break: break-word;
}
.lab-hl-colors {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.lab-swatch-mini {
  width: 16px;
  height: 16px;
  border: 1px solid var(--line);
  background: var(--swatch, #000);
  padding: 0;
  cursor: pointer;
  transition: transform 160ms var(--ease-bdg);
}
.lab-swatch-mini:hover { transform: scale(1.15); }
.lab-swatch-mini[data-active="true"] {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}
.lab-hl-x {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.lab-hl-x:hover { color: var(--ink); }

/* File input — image upload for ASCII converter etc. */
.lab-file-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px dashed var(--line);
}
.lab-file {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.lab-file::-webkit-file-upload-button {
  appearance: none;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 6px 10px;
  margin-right: 12px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.lab-file::file-selector-button {
  appearance: none;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 6px 10px;
  margin-right: 12px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.lab-file-clear {
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 1px dashed var(--line);
  padding: 0 12px;
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.lab-file-clear:hover { background: var(--ink); color: var(--paper); }

/* Swatch row */
.lab-swatch-row { display: flex; gap: 8px; }
.lab-swatch {
  appearance: none;
  background: var(--swatch, currentColor);
  border: 1px solid var(--line);
  width: 26px;
  height: 26px;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform 160ms var(--ease-bdg);
}
.lab-swatch:hover { transform: scale(1.08); }
.lab-swatch[data-active="true"] {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

/* Workbench breadcrumbs (top of the workbench chapter wrapper) ---------- */
.lab-workbench-crumbs {
  margin-bottom: 32px;
}
.lab-workbench-crumbs .crumbs {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.lab-crumb-link {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 160ms var(--ease-bdg);
}
.lab-crumb-link:hover { color: var(--ink); }
.lab-crumb-active { color: var(--ink); }

/* Buttons (lab) ---------------------------------------------------------- */
.lab-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 9px 12px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg), border-color 160ms var(--ease-bdg);
}
.lab-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.lab-btn-ghost {
  border-color: var(--line-2);
  color: var(--ink-2);
}
.lab-btn-ghost:hover {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line);
}
.lab-btn-block { width: 100%; text-align: center; }

/* Export grid */
.lab-export-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Video duration segment picker ----------------------------------------- */
.lab-segment {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  width: 100%;
}
.lab-segment-chip {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  flex: 1;
  padding: 9px 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 160ms var(--ease-bdg), color 160ms var(--ease-bdg);
}
.lab-segment-chip:last-child { border-right: 0; }
.lab-segment-chip:hover { color: var(--ink); }
.lab-segment-chip[data-active="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* User-preset row (saved presets row + delete control) ------------------ */
.lab-preset-row--user {
  border: 1px solid var(--line-2);
  flex-wrap: wrap;
}
.lab-preset-chip--user {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  border-right: 1px solid var(--line-2);
  padding: 0;
}
.lab-preset-chip--user:last-child { border-right: 0; }
.lab-preset-chip--user > button:first-child {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  flex: 1;
  text-align: left;
}
.lab-preset-chip--user > button:first-child:hover { color: var(--ink); }
.lab-preset-x {
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line-2);
  padding: 0 10px;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: color 160ms var(--ease-bdg), background 160ms var(--ease-bdg);
}
.lab-preset-x:hover { color: var(--paper); background: var(--ink); }

/* Modal (export progress) ----------------------------------------------- */
.lab-modal-shade {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  animation: lab-modal-fade 160ms var(--ease-bdg);
}
@keyframes lab-modal-fade {
  from { opacity: 0; } to { opacity: 1; }
}
.lab-modal {
  background: var(--paper);
  border: 1px solid var(--line);
  width: min(520px, 92vw);
  display: flex;
  flex-direction: column;
}
.lab-modal-head {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--line-2);
}
.lab-modal-title {
  font-family: var(--f-headline);
  font-weight: 650;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 6px 0 0;
}
.lab-modal-body {
  padding: 20px 24px;
}
.lab-progress {
  height: 1px;
  width: 100%;
  background: var(--line-2);
  position: relative;
  margin-bottom: 12px;
  overflow: hidden;
}
.lab-progress-fill {
  position: absolute;
  inset: 0;
  background: var(--signal);
  transition: width 120ms linear;
}
.lab-modal-foot {
  padding: 14px 24px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line-2);
}

/* Toast (workbench-local; sibling to the global site toast) ------------- */
.lab-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 10px 16px;
  opacity: 0;
  pointer-events: none;
  z-index: 80;
  transition: opacity 200ms var(--ease-bdg), transform 200ms var(--ease-bdg);
}
.lab-toast[data-on="true"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mini-canvas variant (gallery cards) — hides workbench-only chrome
   like inner headers inside the experiment when the canvas runs at
   gallery resolution. */
.lab-canvas-host--mini canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Responsive ----------------------------------------------------------- */
@media (max-width: 1280px) {
  .lab-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .lab-workbench {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .lab-controls-col {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 24px;
  }
  .lab-canvas-head { flex-wrap: wrap; row-gap: 8px; }
  .lab-canvas-aspect { margin-left: auto; }
  .lab-export-grid { grid-template-columns: 1fr; }
  .lab-segment { flex-wrap: wrap; }
  .lab-segment-chip { flex: 1 1 calc(50% - 0px); }
}
@media (max-width: 720px) {
  .lab-card-grid { grid-template-columns: minmax(0, 1fr); }
  /* On 1-col mobile, cap the square stage so one card doesn't take the
     whole viewport. max-width preserves aspect-ratio (width < height). */
  .lab-card-stage { max-width: 70vw; margin: 0 auto; width: 100%; }
  .lab-card-placeholder-glyph { font-size: 64px; }
  .lab-canvas-name { font-size: 18px; }
  .lab-thesis { font-size: 18px; }
  .lab-filter-row {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .lab-filter-chip { flex: 0 0 auto; }
  .lab-workbench-crumbs { margin-bottom: 20px; }
}