/* Tracy Williams — Qualified Immunity Living Documentary
   Archival / court-exhibit art direction. Ink ground, warm paper, oxblood + amber. */

:root {
  /* ground */
  --ink-900: #0b0c0e;
  --ink-850: #101215;
  --ink-800: #16191d;
  --ink-750: #1d2126;
  --ink-700: #262b31;
  --ink-600: #353b43;
  --rule: #2c3238;
  --rule-soft: rgba(233, 225, 211, 0.13);

  /* paper */
  --paper-100: #f3ede2;
  --paper-200: #e7dfd1;
  --paper-300: #d6cbb8;
  --paper-500: #a89c88;

  --fg: #ece5d8;
  --fg-dim: #b7ae9e;
  --fg-faint: #8b8371;

  /* accents */
  --oxblood: #a83f3c;
  --oxblood-bright: #c9615c;
  --amber: #d09a34;
  --amber-bright: #e0b25a;

  /* record states */
  --st-alleg: #d09a34;
  --st-test: #6a9fb0;
  --st-rec: #d8cfc0;
  --st-edit: #c05f5b;

  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Switzer', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.9rem, 3.4vw, 2.9rem);
  --text-3xl: clamp(2.4rem, 5.4vw, 4.2rem);
  --text-hero: clamp(2.7rem, 8.2vw, 6.6rem);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  --wrap: 1200px;
  --wrap-narrow: 720px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 420ms;
}

/* ---------- motion modes ---------- */
html[data-motion='gentle'] { --dur: 240ms; }
html[data-motion='minimal'] { --dur: 1ms; }
html[data-motion='minimal'] *,
html[data-motion='minimal'] *::before,
html[data-motion='minimal'] *::after {
  animation: none !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}
html[data-motion='minimal'] .layer-drift,
html[data-motion='minimal'] .layer-sweep,
html[data-motion='minimal'] .layer-particles { display: none; }
html[data-motion='gentle'] .layer-particles { opacity: 0.28; }
html[data-motion='gentle'] .layer-sweep { opacity: 0.3; }

/* quiet mode: reduce contrast shock, mute ambience */
html[data-quiet='on'] {
  --fg: #d9d3c7;
  --ink-900: #14161a;
  --ink-850: #171a1e;
  --ink-800: #1b1e23;
  --oxblood: #96504e;
  --amber: #b79553;
  --st-edit: #ad6f6c;
}
html[data-quiet='on'] .layer-grain { opacity: 0.1; }
html[data-quiet='on'] .layer-sweep { display: none; }
html[data-quiet='on'] .hero-title { letter-spacing: 0.005em; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-900);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.62;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--amber-bright); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible {
  outline: 2px solid var(--amber-bright);
  outline-offset: 3px;
  border-radius: 2px;
}
button { font-family: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.06; }
h1, h2 { font-family: var(--font-display); letter-spacing: -0.012em; }
h3 { font-family: var(--font-display); letter-spacing: -0.005em; line-height: 1.15; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-6) 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.narrow { max-width: var(--wrap-narrow); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--paper-100); color: var(--ink-900); padding: 10px 16px; font-size: var(--text-sm);
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- eyebrow / labels ---------- */
.eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 500;
  margin: 0 0 var(--sp-4);
}
.eyebrow--amber { color: var(--amber); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.02em; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11, 12, 14, 0.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.head-inner {
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px);
  min-height: 68px; padding: 10px clamp(16px, 3vw, 34px);
  max-width: 1340px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--fg); flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand svg { flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--font-display); font-size: 1.22rem; letter-spacing: 0.005em; }
.brand-sub {
  font-size: 0.6rem; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--fg-faint); font-weight: 500;
}
.nav { display: flex; gap: 1px; margin-left: auto; flex-wrap: nowrap; }
.nav a {
  color: var(--fg-dim); font-size: 0.85rem; padding: 7px 9px;
  border-radius: 3px; border: 1px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--fg); background: var(--ink-800); text-decoration: none; }
.nav a[aria-current='page'] {
  color: var(--paper-100); border-color: var(--rule); background: var(--ink-800);
}
.head-ctl { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }

.seg { display: flex; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.seg button {
  background: transparent; border: 0; color: var(--fg-faint);
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 9px; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur);
}
.seg button + button { border-left: 1px solid var(--rule); }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed='true'] { background: var(--paper-100); color: var(--ink-900); font-weight: 600; }
.ctl-label {
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint);
}
.toggle {
  display: inline-flex; align-items: center; gap: 8px; background: transparent;
  border: 1px solid var(--rule); border-radius: 3px; color: var(--fg-faint);
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 10px; cursor: pointer;
}
.toggle:hover { color: var(--fg); }
.toggle .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-600);
  box-shadow: inset 0 0 0 1px var(--rule); transition: background var(--dur);
}
.toggle[aria-pressed='true'] { color: var(--paper-100); border-color: var(--amber); }
.toggle[aria-pressed='true'] .dot { background: var(--amber); }

.head-more { display: none; }

/* ---------- hero: living scene layers ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink-900);
  border-bottom: 1px solid var(--rule);
  isolation: isolate;
}
.hero-layers { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.layer { position: absolute; inset: 0; }
.layer-env {
  background:
    radial-gradient(120% 85% at 12% 0%, rgba(208, 154, 52, 0.16) 0%, transparent 58%),
    radial-gradient(90% 70% at 92% 108%, rgba(168, 63, 60, 0.22) 0%, transparent 62%),
    linear-gradient(178deg, #101216 0%, #0b0c0e 52%, #131519 100%);
}
.layer-grid {
  opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(236, 229, 216, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(236, 229, 216, 0.035) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(115% 95% at 50% 20%, #000 35%, transparent 78%);
}
.layer-drift { opacity: 0.5; animation: drift 46s linear infinite; }
.layer-drift-2 { opacity: 0.3; animation: drift2 66s linear infinite; }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-4%, -22px, 0); }
}
@keyframes drift2 {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(3.5%, 26px, 0); }
}
.layer-sweep {
  background: linear-gradient(100deg, transparent 38%, rgba(236, 229, 216, 0.075) 48%, rgba(236,229,216,0.02) 53%, transparent 62%);
  animation: sweep 13s var(--ease) infinite;
  opacity: 0.85;
}
@keyframes sweep {
  0%, 12% { transform: translate3d(-62%, 0, 0); }
  70%, 100% { transform: translate3d(62%, 0, 0); }
}
.layer-grain {
  opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainshift 1.1s steps(3) infinite;
}
@keyframes grainshift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-2%, 1%); }
  66% { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}
.layer-vig {
  background: radial-gradient(105% 90% at 50% 42%, transparent 42%, rgba(6, 7, 8, 0.72) 100%);
}
.layer-figure {
  position: absolute; right: -2%; bottom: 0; top: auto; left: auto;
  width: min(46vw, 520px); opacity: 0.5;
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.008); }
}
.hero-inner { position: relative; z-index: 2; padding: clamp(56px, 10vw, 118px) 0 clamp(40px, 6vw, 76px); }

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-5);
  max-width: 20ch;
  text-wrap: balance;
}
.hero-title em { font-style: italic; color: var(--amber-bright); }
.hero-lede {
  font-size: clamp(1.02rem, 1.65vw, 1.24rem);
  color: var(--fg-dim); max-width: 62ch; line-height: 1.62;
}
.rule-slab {
  height: 3px; width: 96px; margin-bottom: var(--sp-5);
  background: linear-gradient(90deg, var(--oxblood-bright), var(--amber));
}

/* ---------- status chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  border: 1px solid var(--rule); border-radius: 999px; padding: 4px 11px;
  color: var(--fg-dim); background: rgba(236, 229, 216, 0.035); white-space: nowrap;
}
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.chip--spec { color: #9fb0bd; border-color: rgba(159, 176, 189, 0.4); }
.chip--slice { color: var(--amber-bright); border-color: rgba(224, 178, 90, 0.45); }
.chip--rights { color: var(--oxblood-bright); border-color: rgba(201, 97, 92, 0.5); }
.chip--partner { color: #b79bc4; border-color: rgba(183, 155, 196, 0.45); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- record-state tokens ---------- */
.rs {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.11em;
  text-transform: uppercase; font-weight: 600;
  padding: 3px 8px; border-radius: 2px; border: 1px solid; white-space: nowrap;
}
.rs::before { content: ''; width: 7px; height: 7px; flex: 0 0 auto; }
.rs-allegation { color: var(--st-alleg); border-color: color-mix(in srgb, var(--st-alleg) 55%, transparent); background: color-mix(in srgb, var(--st-alleg) 10%, transparent); }
.rs-allegation::before { background: var(--st-alleg); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rs-testimony { color: var(--st-test); border-color: color-mix(in srgb, var(--st-test) 55%, transparent); background: color-mix(in srgb, var(--st-test) 10%, transparent); }
.rs-testimony::before { background: var(--st-test); border-radius: 50%; }
.rs-record { color: var(--st-rec); border-color: color-mix(in srgb, var(--st-rec) 45%, transparent); background: color-mix(in srgb, var(--st-rec) 9%, transparent); }
.rs-record::before { background: var(--st-rec); }
.rs-editorial { color: var(--st-edit); border-color: color-mix(in srgb, var(--st-edit) 58%, transparent); background: color-mix(in srgb, var(--st-edit) 12%, transparent); }
.rs-editorial::before { background: var(--st-edit); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ---------- sections ---------- */
.sec { padding: clamp(52px, 8vw, 108px) 0; border-bottom: 1px solid var(--rule); position: relative; }
.sec--paper { background: var(--paper-100); color: var(--ink-850); }
.sec--paper h2, .sec--paper h3 { color: var(--ink-900); }
.sec--paper .eyebrow { color: #6f6754; }
.sec--paper a { color: #8a3b38; }
.sec--paper .chip { color: #57503f; border-color: rgba(20, 22, 26, 0.24); background: rgba(20, 22, 26, 0.035); }
.sec--paper .chip--rights { color: #92312e; border-color: rgba(146, 49, 46, 0.4); }
.sec--paper .chip--slice { color: #8a6412; border-color: rgba(138, 100, 18, 0.4); }
.sec--paper .chip--spec { color: #3f5a6b; border-color: rgba(63, 90, 107, 0.4); }
.sec--paper .chip--partner { color: #6b4a7a; border-color: rgba(107, 74, 122, 0.4); }
.sec--dark2 { background: var(--ink-850); }
.sec-head { margin-bottom: var(--sp-7); }
.sec-title { font-size: var(--text-2xl); max-width: 30ch; text-wrap: balance; }
.sec-lede { color: var(--fg-dim); max-width: 68ch; margin-top: var(--sp-4); }
.sec--paper .sec-lede { color: #4b4638; }

/* ---------- doors ---------- */
.doors { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: repeat(5, 1fr); }
.door {
  background: var(--ink-850); padding: var(--sp-5) var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: 8px; min-height: 168px;
  color: var(--fg); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  position: relative; text-align: left;
}
.door:hover { background: var(--ink-750); text-decoration: none; }
.door-num { font-family: var(--font-mono); font-size: 0.62rem; color: var(--amber); letter-spacing: 0.14em; }
.door-name { font-family: var(--font-display); font-size: 1.55rem; letter-spacing: 0.01em; }
.door-desc { font-size: 0.82rem; color: var(--fg-dim); line-height: 1.5; }
.door-state { margin-top: auto; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); }
.door-state b { color: var(--amber-bright); font-weight: 600; }

/* ---------- cards / grids ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.card {
  border: 1px solid var(--rule); background: var(--ink-850); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0;
}
.card--link { transition: border-color var(--dur), transform var(--dur) var(--ease); color: var(--fg); }
.card--link:hover { border-color: var(--amber); text-decoration: none; transform: translateY(-2px); }
.card h3 { font-size: 1.35rem; }
.card p { font-size: 0.9rem; color: var(--fg-dim); }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.card-open { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-bright); font-weight: 600; }

/* book spines */
.books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.book { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.book-cover {
  aspect-ratio: 2 / 3; border: 1px solid rgba(0,0,0,0.5); position: relative; overflow: hidden;
  box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.35);
}
.book-title { font-family: var(--font-display); font-size: 1.16rem; line-height: 1.12; }
.book-meta { font-family: var(--font-mono); font-size: 0.63rem; color: var(--fg-faint); letter-spacing: 0.05em; }
.book p { font-size: 0.85rem; color: var(--fg-dim); }
.sec--paper .book p { color: #4b4638; }
.sec--paper .book-meta { color: #6f6754; }

/* ---------- tabs ---------- */
.tabbar {
  display: flex; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  overflow-x: auto; scrollbar-width: thin; position: sticky; top: 68px; z-index: 40;
}
.tabbar button {
  flex: 1 1 0; min-width: 118px; background: var(--ink-850); border: 0; cursor: pointer;
  color: var(--fg-dim); padding: 14px 12px 12px; text-align: left;
  transition: background var(--dur), color var(--dur);
}
.tabbar button:hover { background: var(--ink-750); color: var(--fg); }
.tabbar button[aria-selected='true'] { background: var(--paper-100); color: var(--ink-900); }
.tab-k { display: block; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; opacity: 0.75; }
.tab-n { display: block; font-family: var(--font-display); font-size: 1.18rem; letter-spacing: 0.02em; }
.tabpanel { padding-top: var(--sp-7); }
.tabpanel[hidden] { display: none; }

/* ---------- legend ---------- */
.legend {
  position: sticky; top: 68px; z-index: 45;
  background: rgba(16, 18, 21, 0.96); backdrop-filter: blur(8px);
  border: 1px solid var(--rule); border-left: 3px solid var(--amber);
  padding: var(--sp-4); margin-bottom: var(--sp-5);
}
.legend-t { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 10px; }
.legend-items { display: flex; flex-wrap: wrap; gap: 8px; }
.legend-items button { background: transparent; border: 0; padding: 0; cursor: pointer; }
.legend-items .rs { transition: opacity var(--dur), box-shadow var(--dur); }
.legend-items button[aria-pressed='false'] .rs { opacity: 0.34; }
.legend-items button[aria-pressed='true'] .rs { box-shadow: 0 0 0 1px currentColor inset; }
.legend-def { font-size: 0.78rem; color: var(--fg-dim); margin-top: 10px; max-width: 90ch; }

/* ---------- entries / rows ---------- */
.entry {
  border: 1px solid var(--rule); border-left: 3px solid var(--ink-600);
  background: var(--ink-850); padding: var(--sp-4) var(--sp-5); margin-bottom: 10px;
}
.entry[data-state='allegation'] { border-left-color: var(--st-alleg); }
.entry[data-state='testimony'] { border-left-color: var(--st-test); }
.entry[data-state='record'] { border-left-color: var(--st-rec); }
.entry[data-state='editorial'] { border-left-color: var(--st-edit); background: color-mix(in srgb, var(--st-edit) 6%, var(--ink-850)); }
.entry-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.entry-date { font-family: var(--font-mono); font-size: 0.66rem; color: var(--fg-faint); letter-spacing: 0.05em; }
.entry h4 { font-size: 1.02rem; font-weight: 550; line-height: 1.35; }
.entry p { font-size: 0.88rem; color: var(--fg-dim); margin: 6px 0 0; }
.entry-src { font-family: var(--font-mono); font-size: 0.63rem; color: var(--fg-faint); margin-top: 10px; word-break: break-word; }

/* ---------- tables ---------- */
.tablewrap { border: 1px solid var(--rule); overflow-x: auto; background: var(--ink-850); }
table { width: 100%; border-collapse: collapse; font-size: 0.84rem; min-width: 720px; }
th {
  text-align: left; font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg-faint); font-weight: 600; padding: 11px 14px;
  border-bottom: 1px solid var(--rule); background: var(--ink-800); white-space: nowrap;
}
td { padding: 12px 14px; border-bottom: 1px solid rgba(236, 229, 216, 0.07); vertical-align: top; color: var(--fg-dim); }
tbody tr:hover td { background: rgba(236, 229, 216, 0.028); }
td strong { color: var(--fg); font-weight: 550; }
.td-case { font-family: var(--font-display); font-size: 1rem; color: var(--fg); font-style: italic; }

/* ---------- form controls ---------- */
input[type='text'], input[type='search'], input[type='email'], select, textarea {
  background: var(--ink-800); border: 1px solid var(--rule); color: var(--fg);
  font-family: var(--font-body); font-size: 0.88rem; padding: 10px 12px; border-radius: 2px; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--fg-faint); }
label.fl { display: block; font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 6px; font-weight: 600; }
.field { margin-bottom: var(--sp-4); min-width: 0; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: var(--paper-100); color: var(--ink-900); border: 1px solid var(--paper-100);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 650;
  padding: 12px 20px; border-radius: 2px; transition: background var(--dur), color var(--dur);
}
.btn:hover { background: var(--amber-bright); border-color: var(--amber-bright); text-decoration: none; color: var(--ink-900); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--rule); }
.btn--ghost:hover { background: var(--ink-750); color: var(--fg); border-color: var(--amber); }
.btn--sm { padding: 8px 13px; font-size: 0.66rem; }

/* ---------- checklist / gates ---------- */
.gatelist { border: 1px solid var(--rule); }
.gaterow {
  display: grid; grid-template-columns: 34px minmax(0, 1.5fr) minmax(0, 1.15fr) 120px;
  gap: var(--sp-4); align-items: start; padding: 14px var(--sp-5);
  border-bottom: 1px solid rgba(236, 229, 216, 0.07);
}
.gaterow:last-child { border-bottom: 0; }
.gaterow--head {
  background: var(--ink-800); font-size: 0.58rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--fg-faint); font-weight: 600; padding: 10px var(--sp-5);
}
.gbox {
  width: 20px; height: 20px; border: 1px solid var(--fg-faint); background: transparent;
  cursor: pointer; border-radius: 2px; display: grid; place-items: center; padding: 0;
  color: var(--ink-900); flex: 0 0 auto; margin-top: 2px;
}
.gbox svg { opacity: 0; }
.gbox[aria-checked='true'] { background: var(--amber); border-color: var(--amber); }
.gbox[aria-checked='true'] svg { opacity: 1; }
.gitem { font-size: 0.92rem; color: var(--fg); }
.gitem span { display: block; font-size: 0.78rem; color: var(--fg-faint); margin-top: 3px; }
.gevid { font-size: 0.78rem; color: var(--fg-dim); }
.gstate { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oxblood-bright); }
.gaterow[data-checked='true'] .gstate { color: var(--amber); }

/* ---------- notes ---------- */
.note {
  border: 1px solid var(--rule); border-left: 3px solid var(--oxblood);
  background: rgba(168, 63, 60, 0.07); padding: var(--sp-5); font-size: 0.88rem; color: var(--fg-dim);
}
.note h3 { font-size: 1.1rem; color: var(--fg); margin-bottom: 8px; }
.note--amber { border-left-color: var(--amber); background: rgba(208, 154, 52, 0.07); }
.sec--paper .note { background: rgba(146, 49, 46, 0.07); border-color: rgba(20,22,26,0.16); border-left-color: #92312e; color: #4b4638; }
.sec--paper .note h3 { color: var(--ink-900); }

/* ---------- footer ---------- */
.site-foot { background: var(--ink-850); padding: var(--sp-8) 0 var(--sp-6); font-size: 0.84rem; color: var(--fg-faint); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.foot-grid h4 { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: var(--sp-3); font-family: var(--font-body); font-weight: 600; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot-grid a { color: var(--fg-faint); }
.foot-grid a:hover { color: var(--fg); }
.foot-bar {
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center;
}
.umbrella { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.09em; color: var(--fg-dim); }

/* ---------- misc utility ---------- */
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-5 > * + * { margin-top: var(--sp-5); }
.stack-6 > * + * { margin-top: var(--sp-6); }
.stack-7 > * + * { margin-top: var(--sp-7); }
.muted { color: var(--fg-faint); }
.small { font-size: 0.8rem; }
.center { text-align: center; }
.live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pill-count { font-family: var(--font-mono); font-size: 0.64rem; color: var(--fg-faint); }
.hr-thin { border-top: 1px solid var(--rule); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .doors { grid-template-columns: repeat(2, 1fr); }
  .books { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1240px) {
  .head-inner { flex-wrap: wrap; min-height: 0; gap: var(--sp-3); }
  .nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .head-ctl { margin-left: auto; }
}
@media (max-width: 900px) {
  .nav { order: 3; width: 100%; margin-left: 0; overflow-x: visible; flex-wrap: wrap; row-gap: 4px; padding-bottom: 2px; }
  .nav a { padding: 6px 9px; font-size: 0.8rem; }
  .head-ctl { margin-left: auto; }
  .tabbar, .legend { position: static; }
  .layer-figure { opacity: 0.28; width: 64vw; }
  .gaterow { grid-template-columns: 26px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); }
  .gaterow--head { display: none; }
  .gevid, .gstate { grid-column: 2; }
  .gevid::before { content: 'Acceptance evidence: '; color: var(--fg-faint); letter-spacing: 0.08em; font-size: 0.68rem; text-transform: uppercase; }
}
@media (max-width: 700px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .doors { grid-template-columns: 1fr; }
  .door { min-height: 0; }
  .foot-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .book { grid-template-columns: 84px minmax(0, 1fr); }
  :root { --text-hero: clamp(2.3rem, 11vw, 3.1rem); }
  .hero-title { max-width: 100%; }
  .seg button { padding: 6px 7px; font-size: 0.62rem; }
  .toggle { padding: 6px 8px; font-size: 0.62rem; }
}

/* ---------- hero texture layers ---------- */
.layer-drift {
  background-image: url('../img/docs.svg');
  background-size: 760px 760px;
  background-repeat: repeat;
  inset: -12% -8%;
}
.layer-drift-2 {
  background-image: url('../img/redact.svg');
  background-size: 420px 420px;
  background-repeat: repeat;
  inset: -14% -10%;
}

/* ---------- WATCH: chapter list ---------- */
.watch-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.chaplist { display: grid; gap: 10px; }
.chap {
  display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: var(--sp-4); align-items: start;
  background: var(--ink-850); border: 1px solid var(--rule); border-left: 3px solid var(--ink-600);
  padding: 12px; cursor: pointer; text-align: left; color: var(--fg);
  transition: border-color var(--dur), background var(--dur);
}
.chap:hover { background: var(--ink-750); }
.chap[aria-pressed='true'] { border-left-color: var(--amber); background: var(--ink-750); }
.chap-poster { display: block; width: 108px; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--rule); }
.chap-poster svg { width: 100%; height: 100%; }
.chap-meta { display: grid; gap: 3px; min-width: 0; }
.chap-n { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.chap-t { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.14; }
.chap-run { color: var(--fg-faint); font-size: 0.58rem; line-height: 1.4; }
.detail {
  border: 1px solid var(--rule); background: var(--ink-850); padding: var(--sp-5);
  border-top: 3px solid var(--amber); min-width: 0;
}
.detail-head p { color: var(--fg-dim); font-size: 0.92rem; }
.ab-tabs { display: flex; gap: 8px; margin: var(--sp-5) 0 var(--sp-4); flex-wrap: wrap; }
.pane { border-top: 1px solid var(--rule); padding-top: var(--sp-4); }
.cues { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cues li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: var(--sp-4); font-size: 0.86rem; color: var(--fg-dim); }
.cues .mono { color: var(--amber); }
.tr-line { font-size: 0.92rem; color: var(--fg-dim); line-height: 1.68; }
.tr-lead {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper-300); background: rgba(236, 229, 216, 0.07); padding: 2px 6px; border-radius: 2px;
  white-space: nowrap;
}

/* ---------- definitions ---------- */
.defs { display: grid; gap: 8px; }
.def { border: 1px solid var(--rule); background: var(--ink-850); }
.def summary {
  cursor: pointer; padding: 12px var(--sp-4); font-size: 0.94rem; display: flex;
  align-items: center; justify-content: space-between; gap: 10px; list-style: none;
}
.def summary::-webkit-details-marker { display: none; }
.def summary::after { content: '+'; color: var(--amber); font-family: var(--font-mono); flex: 0 0 auto; }
.def[open] summary::after { content: '\2212'; }
.def[open] summary { border-bottom: 1px solid var(--rule); }
.def p { margin: 0; padding: 12px var(--sp-4) 14px; font-size: 0.86rem; color: var(--fg-dim); }

/* ---------- DISCUSS queue ---------- */
.qgrid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.qitem { border: 1px solid var(--rule); background: var(--ink-850); padding: var(--sp-4) var(--sp-5); margin-bottom: 10px; }
.qitem h4 { font-size: 1rem; font-weight: 550; line-height: 1.4; margin-bottom: 4px; }
.qitem p { margin: 6px 0; color: var(--fg-dim); }
.pips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.pip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-faint); border: 1px solid var(--rule);
  padding: 3px 8px; border-radius: 999px; font-weight: 600;
}
.pip i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-600); }
.pip.done { color: var(--paper-300); border-color: rgba(236,229,216,0.28); }
.pip.done i { background: var(--paper-300); }
.pip.now { color: var(--amber); border-color: var(--amber); }
.pip.now i { background: var(--amber); box-shadow: 0 0 0 3px rgba(208,154,52,0.22); }

/* ---------- UPDATE revisions ---------- */
.rev { border: 1px solid var(--rule); border-left: 3px solid var(--st-test); background: var(--ink-850); padding: var(--sp-4) var(--sp-5); margin-bottom: 10px; }
.rev-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.rev p { font-size: 0.9rem; color: var(--fg-dim); margin: 0; }
.rev-hash { color: var(--fg-faint); margin-top: 10px !important; word-break: break-all; }

@media (max-width: 980px) {
  .watch-grid, .qgrid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .chap { grid-template-columns: 1fr; }
  .chap-poster { width: 100%; }
  .cues li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- READER (Clearly Established) ---------- */
.reader-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--sp-7); align-items: start; }
.reader {
  background: var(--paper-100); color: #1b1e22; padding: clamp(24px, 4vw, 52px);
  border: 1px solid rgba(20,22,26,0.2); box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  max-width: 74ch;
}
.reader h2, .reader h3 { color: #12141a; }
.reader-kicker { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8a3b38; margin-bottom: 10px; }
.reader-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.04; margin-bottom: 6px; }
.reader-sub { font-size: 0.9rem; color: #5c5647; margin-bottom: 26px; }
.reader p { font-size: 1.06rem; line-height: 1.74; color: #26292f; }
.reader p.dropcap::first-letter {
  font-family: var(--font-display); font-size: 3.4em; line-height: 0.82; float: left;
  padding: 6px 10px 0 0; color: #8a3b38;
}
.reader blockquote {
  margin: 26px 0; padding: 16px 22px; border-left: 3px solid #8a3b38;
  background: rgba(138,59,56,0.06); font-family: var(--font-display); font-size: 1.16rem; line-height: 1.42; color: #1b1e22;
}
.reader blockquote cite { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; font-style: normal; color: #6f6754; margin-top: 10px; }
.term {
  background: rgba(208,154,52,0.22); border: 0; border-bottom: 1px dashed #8a6412;
  color: inherit; font: inherit; padding: 0 2px; cursor: pointer; border-radius: 2px;
}
.term:hover, .term[aria-expanded='true'] { background: rgba(208,154,52,0.42); }
.term::after { content: '\202F+'; font-family: var(--font-mono); font-size: 0.7em; color: #8a6412; }
.term[aria-expanded='true']::after { content: '\202F\2212'; }
.defpop {
  margin: 12px 0 18px; border: 1px solid rgba(20,22,26,0.22); border-left: 3px solid #8a6412;
  background: #e7dfd1; padding: 14px 18px; font-size: 0.92rem; color: #3a3629;
}
.defpop[hidden] { display: none; }
.defpop b { display: block; font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; color: #6f6754; margin-bottom: 6px; }
.rail { position: sticky; top: 86px; display: grid; gap: 12px; }
.rail-item { border: 1px solid var(--rule); border-left: 3px solid var(--st-rec); background: var(--ink-850); padding: 12px 14px; }
.rail-item.is-cited { border-left-color: var(--amber); background: var(--ink-750); }
.rail-item h4 { font-size: 0.9rem; font-weight: 550; line-height: 1.35; margin-bottom: 4px; font-family: var(--font-body); }
.rail-item p { font-size: 0.76rem; color: var(--fg-faint); margin: 4px 0 0; }
.reader-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  border: 1px solid var(--rule); background: var(--ink-850); padding: 12px var(--sp-4); margin-bottom: var(--sp-5);
}
.progress { flex: 1 1 160px; height: 5px; background: var(--ink-700); min-width: 120px; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--oxblood), var(--amber)); width: 0%; transition: width 200ms linear; }
.listen { border: 1px solid var(--rule); border-left: 3px solid var(--st-test); background: var(--ink-850); padding: var(--sp-5); }
.listen[hidden] { display: none; }
.wave { display: flex; align-items: flex-end; gap: 3px; height: 42px; margin: 14px 0; }
.wave i { flex: 1 1 auto; background: var(--st-test); opacity: 0.55; border-radius: 1px; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
html[data-motion='minimal'] .wave i { animation: none; transform: scaleY(0.6); }
.listen.is-paused .wave i { animation-play-state: paused; }

/* quiz */
.quiz { border: 1px solid var(--rule); background: var(--ink-850); padding: var(--sp-5); }
.qblock + .qblock { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--rule); }
.qblock h4 { font-size: 1.02rem; font-weight: 550; line-height: 1.45; margin-bottom: 12px; }
.opts { display: grid; gap: 8px; }
.opt {
  text-align: left; background: var(--ink-800); border: 1px solid var(--rule); color: var(--fg);
  padding: 11px 14px; font-size: 0.9rem; cursor: pointer; border-radius: 2px; line-height: 1.5;
  transition: border-color var(--dur), background var(--dur);
}
.opt:hover { border-color: var(--paper-500); }
.opt[data-picked='true'][data-ok='true'] { border-color: #7fa87a; background: rgba(127,168,122,0.14); }
.opt[data-picked='true'][data-ok='false'] { border-color: var(--st-edit); background: rgba(192,95,91,0.13); }
.fb { font-size: 0.86rem; color: var(--fg-dim); margin-top: 10px; border-left: 2px solid var(--amber); padding-left: 12px; }
.fb[hidden] { display: none; }

@media (max-width: 1040px) {
  .reader-grid { grid-template-columns: 1fr; }
  .rail { position: static; }
}

/* ---------- status tokens (evidence register) ---------- */
.st {
  display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600; padding: 4px 8px; border: 1px solid; border-radius: 2px;
  white-space: normal; line-height: 1.3;
}
.st--ok { color: #8fb989; border-color: rgba(143,185,137,0.5); background: rgba(143,185,137,0.1); }
.st--warn { color: var(--amber-bright); border-color: rgba(224,178,90,0.5); background: rgba(224,178,90,0.1); }
.st--bad { color: var(--oxblood-bright); border-color: rgba(201,97,92,0.55); background: rgba(201,97,92,0.12); }

/* ---------- very small handsets ---------- */
@media (max-width: 400px) {
  .book { grid-template-columns: 1fr; }
  .book-cover { max-width: 132px; }
  .head-ctl { flex-wrap: wrap; row-gap: 8px; }
  .seg button { padding: 6px 6px; font-size: 0.58rem; letter-spacing: 0.08em; }
  .chip { font-size: 0.58rem; }
  .hero-inner { padding-left: 14px; padding-right: 14px; }
}

/* ============================ TRIPLE LENS ============================== */
.lensbadge {
  display: inline-flex; gap: 3px; background: transparent; border: 0; padding: 0;
  cursor: pointer; align-items: stretch; text-align: left;
}
.lensbadge:hover .lb-seg { border-color: var(--fg-dim); }
.lensbadge:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 3px; }
.lb-seg {
  display: inline-flex; flex-direction: column; gap: 1px;
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em;
  padding: 3px 6px 4px; border: 1px solid var(--rule); border-radius: 2px;
  color: var(--fg-dim); line-height: 1.1; text-transform: uppercase;
  transition: border-color var(--dur) var(--ease);
}
.lb-seg i {
  font-style: normal; font-size: 0.5rem; letter-spacing: 0.06em; opacity: 0.9;
  text-transform: none; white-space: nowrap;
}
.lb--ok   { color: #8fb989; border-color: rgba(143,185,137,0.45); background: rgba(143,185,137,0.08); }
.lb--warn { color: var(--amber-bright); border-color: rgba(224,178,90,0.45); background: rgba(224,178,90,0.08); }
.lb--bad  { color: var(--oxblood-bright); border-color: rgba(201,97,92,0.5); background: rgba(201,97,92,0.1); }
.lb--null { color: var(--fg-faint); border-color: var(--rule); background: transparent; border-style: dashed; }
.lb--na   { color: var(--fg-faint); border-color: transparent; background: rgba(255,255,255,0.03); opacity: 0.72; }
.sec--paper .lb-seg, .paper .lb-seg { border-color: rgba(24,22,20,0.18); color: #4a453c; }
.sec--paper .lb--ok { color: #3f6b3d; background: rgba(63,107,61,0.08); border-color: rgba(63,107,61,0.3); }
.sec--paper .lb--warn { color: #8a6412; background: rgba(138,100,18,0.08); border-color: rgba(138,100,18,0.3); }
.sec--paper .lb--bad { color: #8f2f2c; background: rgba(143,47,44,0.08); border-color: rgba(143,47,44,0.3); }
.sec--paper .lb--null { color: #6b6459; border-style: dashed; border-color: rgba(24,22,20,0.28); }
.lb-missing { color: var(--fg-faint); font-size: 0.6rem; }
.lenscell { display: block; margin-top: 8px; }

/* lens rows */
.lensrows { display: grid; gap: 10px; margin: 16px 0 0; }
.lensrows > div { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 6px var(--sp-4); align-items: baseline; }
.lensrows dt {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-faint); padding-top: 2px;
}
.lensrows dd { margin: 0; font-size: 0.92rem; }
.lv { display: block; }
.lv-note { display: block; font-size: 0.76rem; color: var(--fg-faint); margin-top: 3px; max-width: 62ch; }
.lv--verified { color: var(--fg); }
.lv--contested { color: var(--amber-bright); }
.lv--unsupported { color: var(--oxblood-bright); }
.lv--not-stated { color: var(--fg-faint); font-style: italic; }
.sec--paper .lv--verified { color: var(--ink-900); }
.sec--paper .lv--contested { color: #8a6412; }
.sec--paper .lv--not-stated { color: #6b6459; }

/* result card */
.lensres {
  border: 1px solid var(--rule); border-top: 3px solid var(--amber);
  background: var(--ink-850); padding: clamp(20px, 2.6vw, 32px); border-radius: 3px;
}
.lensres--refused { border-top-color: var(--oxblood-bright); }
.lensres-head { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.lensres-q { font-family: var(--font-display); font-size: 1.5rem; margin: 6px 0 8px; line-height: 1.15; }
.lensres-obj { font-size: 0.84rem; color: var(--fg-dim); margin: 0; }
.otype {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: 2px 6px; border-radius: 2px; color: var(--fg-faint);
  white-space: nowrap;
}
.lensres-headline {
  font-size: 1.06rem; color: var(--paper-100); margin: 18px 0 0;
  padding-left: 14px; border-left: 3px solid var(--amber);
}
.lensres-foot { font-size: 0.82rem; color: var(--fg-faint); margin: 18px 0 0; max-width: 78ch; }
.refuse-flag {
  font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.14em; font-weight: 600;
  color: var(--oxblood-bright); border: 1px solid rgba(201,97,92,0.5); background: rgba(201,97,92,0.1);
  padding: 10px 14px; margin: 18px 0 14px; display: inline-block; border-radius: 2px;
}
.refuse-flag--sm { font-size: 0.66rem; padding: 6px 9px; margin: 10px 0; }
.refuse-because { margin: 0 0 8px; font-size: 0.92rem; }
.refuse-why { margin: 0; font-size: 0.92rem; color: var(--fg-dim); max-width: 72ch; }
.refuse-ok {
  margin: 14px 0 0; font-size: 0.8rem; color: var(--fg-faint); font-style: italic; max-width: 72ch;
}

/* query panel */
.qpanel { margin-top: var(--sp-5); border: 1px dashed var(--rule); padding: 16px 18px; border-radius: 3px; background: rgba(0,0,0,0.22); }
.qpanel-t {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--amber-bright); margin: 0 0 10px;
}
.qsql {
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.6; color: var(--fg-dim);
  margin: 0; white-space: pre-wrap; word-break: break-word; overflow-x: auto;
}
.qsql--math { margin-top: 16px; border-left: 2px solid var(--amber); padding-left: 12px; }
.qparams { font-size: 0.74rem; color: var(--fg-faint); margin: 12px 0 0; }
.qparams span { font-family: var(--font-mono); letter-spacing: 0.08em; }
.qparams code {
  font-family: var(--font-mono); font-size: 0.7rem; border: 1px solid var(--rule);
  padding: 2px 6px; border-radius: 2px; color: var(--fg); margin-right: 4px; display: inline-block;
}
.qnote { font-size: 0.76rem; color: var(--fg-faint); margin: 12px 0 0; max-width: 76ch; }

/* drawer */
.lensdrawer {
  position: fixed; inset: 0; z-index: 200; background: rgba(6,7,8,0.78);
  backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 4vh, 56px) clamp(12px, 4vw, 40px); overflow-y: auto;
}
.lensdrawer-in {
  width: 100%; max-width: 980px; background: var(--ink-850); border: 1px solid var(--rule);
  border-top: 3px solid var(--amber); padding: clamp(20px, 3vw, 34px); border-radius: 3px;
}
.lensdrawer-head { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-start; }
.lensdrawer-head h3 { font-family: var(--font-display); font-size: 1.6rem; margin: 6px 0 8px; line-height: 1.12; }
.lblks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.lblk { border: 1px solid var(--rule); padding: 16px; border-radius: 3px; background: rgba(0,0,0,0.2); min-width: 0; }
.lblk-t {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 10px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.lblk-t span { letter-spacing: 0.06em; color: var(--fg-faint); text-transform: none; }
.lblk--verified .lblk-t { color: #8fb989; }
.lblk--contested .lblk-t { color: var(--amber-bright); }
.lblk--unsupported .lblk-t { color: var(--oxblood-bright); }
.lblk--not-stated .lblk-t, .lblk--na .lblk-t { color: var(--fg-faint); }
.lblk-v { font-size: 0.92rem; margin: 0; color: var(--paper-100); }
.lblk-w { font-size: 0.8rem; color: var(--fg-faint); margin: 8px 0 0; }
.lblk .lensrows > div { grid-template-columns: 1fr; gap: 2px; }
.lensdrawer-foot { font-size: 0.8rem; color: var(--fg-faint); margin: var(--sp-5) 0 0; max-width: 80ch; }
html.lens-open { overflow: hidden; }

/* lens console */
.lensconsole { border: 1px solid var(--rule); background: var(--ink-850); padding: clamp(20px, 2.6vw, 30px); border-radius: 3px; }
.lenspicks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); }
.lensslugs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-4); }
.lensslug {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--rule); background: transparent; color: var(--fg-dim);
  padding: 7px 10px; border-radius: 2px; cursor: pointer; transition: all var(--dur) var(--ease);
}
.lensslug:hover { color: var(--fg); border-color: var(--fg-dim); }
.lensslug[aria-pressed='true'] { background: var(--paper-100); color: var(--ink-900); font-weight: 600; border-color: var(--paper-100); }
.routebox {
  margin-top: var(--sp-4); border-left: 3px solid var(--amber); padding: 12px 0 12px 14px;
  font-size: 0.84rem; color: var(--fg-dim);
}
.routebox strong { color: var(--paper-100); }
.nulldemo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.nullcard { border: 1px solid var(--rule); padding: 18px; border-radius: 3px; min-width: 0; }
.nullcard--null { border-style: dashed; }
.nullcard--zero { border-color: rgba(224,178,90,0.5); background: rgba(224,178,90,0.05); }
.nullcard h4 { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 12px; }
.nullbig { font-size: 1.25rem; font-family: var(--font-display); margin: 0 0 10px; }
.nullcard--null .nullbig { color: var(--fg-faint); font-style: italic; }
.nullcard--zero .nullbig { color: var(--amber-bright); }
.nullcard p.small { margin: 0; }
.tri { border: 1px solid var(--rule); padding: 16px 18px; border-radius: 3px; }
.tri-h { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-bright); margin: 0 0 8px; }
.tri p { margin: 0; font-size: 0.86rem; color: var(--fg-dim); }
@media (max-width: 900px) {
  .lblks { grid-template-columns: 1fr; }
  .nulldemo { grid-template-columns: 1fr; }
  .lensrows > div { grid-template-columns: 1fr; gap: 2px; }
}
.lensbadge--static { cursor: default; }
.lens-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; font-size: 0.7rem; letter-spacing: 0.05em; }
.lens-line > span[data-lens-badge], .lens-line > span[data-lens-badge-static] { display: inline-flex; }
.lensdrawer[hidden] { display: none; }