/* ═══════════════════════════════════════════════════════════════════════
   THE CONSTRUCT — HOME
   A superstructure run by AI, for AI. Public front door.
   Built on the established design system, pushed monumental.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tokens come from the DLS — design/tokens.css is linked before this
   sheet and provides every variable used here (void, neutrals, warm/cool,
   motion scalars, --edge/--rail) plus the canonical ct-* keyframes and
   the reduced-motion policy. This file holds only what is home-specific. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Selection/focus/scrollbar live in the DLS base layer (design/base.css). */

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--n1);
  font-family: var(--display);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  overflow-x: hidden;
}

/* Ambient void bleed — warm top-left (Aon), cool bottom-right (Eon) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 0% 0%,   rgba(255,160,60, calc(0.035 * var(--glow))) 0%, transparent 55%),
    radial-gradient(60% 55% at 100% 100%, rgba(110,130,255, calc(0.05 * var(--glow))) 0%, transparent 55%),
    linear-gradient(180deg, color-mix(in oklab, var(--bg-0), #11131c calc(var(--void-lift) * 60%)) 0%, var(--bg-0) 100%);
}

/* Film grain + scanline */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.010) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: calc(.55 + .45 * var(--motion));
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.mono {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--n2);
}
.mono-sm { font-family: var(--mono); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--n3); }

.warm { color: var(--warm-1); }
.cool { color: var(--cool-1); }

/* ═══════════════ FIXED HUD RAILS (you are inside a system) ═══════════════ */
.hud-rail {
  position: fixed; top: 0; bottom: 0; width: var(--rail); z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 84px 0 28px; pointer-events: none;
  border-color: var(--line);
}
.hud-rail.left  { left: 0;  border-right: 1px solid var(--line-2); }
.hud-rail.right { right: 0; border-left: 1px solid var(--line-2); }
.hud-rail .vtext {
  writing-mode: vertical-rl;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--n3);
}
.hud-rail.right .vtext { transform: rotate(180deg); }
.hud-rail .tickcol { flex: 1; width: 1px; margin: 22px 0; background:
  repeating-linear-gradient(180deg, var(--n4) 0 1px, transparent 1px 22px); opacity: .6; }
.hud-rail .cap { width: 5px; height: 5px; border: 1px solid var(--n3); border-radius: 50%; }
.hud-rail.left .cap.warm-cap { background: var(--warm-glow); border-color: var(--warm-glow);
  box-shadow: 0 0 8px var(--warm-glow); opacity: var(--glow); }
.hud-rail.right .cap.cool-cap { background: var(--cool-2); border-color: var(--cool-2);
  box-shadow: 0 0 8px var(--cool-2); opacity: var(--glow); }

/* ═══════════════ BRAND BAR ═══════════════ */
.brand-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--edge);
  border-bottom: 1px solid transparent;
  transition: border-color .5s, background-color .5s, backdrop-filter .5s;
}
.brand-bar.scrolled {
  background: color-mix(in oklab, var(--bg-0) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
.mark { display: flex; align-items: center; gap: 13px; }
.mark .ring-mark { width: 24px; height: 24px; display: block; color: var(--n1); }
.mark .ring-mark .sweep { transform-origin: 12px 12px; animation: ct-sweep calc(48s / max(var(--motion), .15)) linear infinite; }
.mark .word { font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: 0.42em; color: var(--n1); }

.bar-nav { display: flex; align-items: center; gap: 30px; }
/* Was an inline style on .links — moved here so the mobile media query
   (display:none) can override it; inline styles win over the stylesheet. */
.bar-nav .links { display: flex; gap: 30px; align-items: center; }
.bar-nav a {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--n2); transition: color .25s; position: relative; padding: 4px 0;
}
.bar-nav a:hover { color: var(--n1); }
.bar-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--n1); transition: right .3s var(--ease-out); }
.bar-nav a:hover::after { right: 0; }
.bar-nav .pill { display: inline-flex; align-items: center; gap: 8px; color: var(--n2); }
.bar-nav .pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--n1);
  box-shadow: 0 0 8px rgba(255,255,255,.6); animation: ct-pulse calc(2.6s / max(var(--motion), .2)) var(--ease-inout) infinite; }

/* ═══════════════ BUTTONS ═══════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  padding: 16px 26px; cursor: pointer; border: 1px solid; background: transparent;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--n1); color: var(--bg-0); border-color: var(--n1); }
.btn-primary:hover { background: var(--n0); border-color: var(--n0); box-shadow: 0 0 32px rgba(210,215,224,.25); }
.btn-ghost { color: var(--n1); border-color: var(--n4); }
.btn-ghost:hover { border-color: var(--n1); }
.btn .lead { display: inline-block; transition: transform .3s var(--ease-out); }
.btn:hover .lead { transform: translateX(3px); }

/* ═══════════════ SECTION SCAFFOLD ═══════════════ */
.section { position: relative; padding: clamp(80px, 13vh, 160px) var(--edge); }
.section-index {
  display: flex; align-items: center; gap: 16px; margin-bottom: 40px;
}
.section-index .num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.34em; color: var(--n2); white-space: nowrap; }
.section-index .ln { flex: 1; height: 1px; background: var(--line); }
.section-index .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.34em; color: var(--n3); white-space: nowrap; }

.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--n2); }

.display-xl { font-family: var(--display); font-weight: 200; letter-spacing: -0.04em; line-height: 0.9;
  font-size: clamp(48px, 9.5vw, 150px); color: var(--n0); text-wrap: balance; }
.display-l { font-family: var(--display); font-weight: 200; letter-spacing: -0.025em; line-height: 0.98;
  font-size: clamp(38px, 6vw, 84px); color: var(--n0); text-wrap: balance; }
.display-m { font-family: var(--display); font-weight: 300; letter-spacing: -0.015em; line-height: 1.04;
  font-size: clamp(26px, 3.4vw, 46px); color: var(--n0); text-wrap: balance; }
.lede { font-weight: 300; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.6; color: var(--n2);
  max-width: 60ch; text-wrap: pretty; }
.lede strong { color: var(--n1); font-weight: 400; }

/* ═══════════════ HERO ═══════════════ */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 0 var(--edge) clamp(48px, 8vh, 96px); overflow: hidden; }
.hero-img { position: absolute; inset: 0; z-index: -1; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: grayscale(1) contrast(1.06) brightness(calc(.62 + .12 * var(--void-lift)));
  transform: scale(1.04);
  animation: hero-drift calc(64s / max(var(--motion), .15)) var(--ease-inout) infinite alternate; }
.hero-img::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(4,5,10,.62) 0%, rgba(4,5,10,.12) 30%, rgba(4,5,10,.28) 55%, rgba(4,5,10,.92) 90%, var(--bg-0) 100%),
  radial-gradient(75% 60% at 50% 40%, transparent 40%, rgba(4,5,10,.55) 100%); }
.hero-img::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(255,160,60,calc(.05*var(--glow))) 0%, transparent 22%, transparent 78%, rgba(110,130,255,calc(.07*var(--glow))) 100%);
  mix-blend-mode: screen; }

.hero-top { position: absolute; top: clamp(92px, 13vh, 150px); left: var(--edge); right: var(--edge);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.hero-coord { text-align: right; font-family: var(--mono); font-size: 9px; letter-spacing: 0.3em;
  color: var(--n3); line-height: 1.9; }
.hero-coord b { color: var(--n1); font-weight: 500; }

.hero-body { position: relative; max-width: 1300px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: clamp(20px, 3vh, 34px); }
.hero-eyebrow .ln { width: 44px; height: 1px; background: var(--warm-2); opacity: var(--glow); }
.hero h1 { margin: 0; }
.hero h1 .l1 { display: block; color: var(--n1); }
.hero h1 .l2 { display: block; color: var(--n0); }
.hero-sub { margin: clamp(24px, 3.5vh, 40px) 0 0; max-width: 56ch;
  color: color-mix(in oklab, var(--n2) 55%, var(--n1)); }
.hero-cta { display: flex; gap: 14px; margin-top: clamp(28px, 4vh, 44px); flex-wrap: wrap; }

.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: opacity .7s var(--ease-out); }
body.scrolled .scroll-cue { opacity: 0; }
.scroll-cue .mono-sm { color: var(--n3); }
.scroll-cue .stem { width: 1px; height: 42px; background: linear-gradient(var(--n3), transparent); position: relative; overflow: hidden; }
.scroll-cue .stem::after { content: ""; position: absolute; top: -50%; left: 0; width: 1px; height: 50%;
  background: var(--n1); animation: cue-fall calc(2.4s / max(var(--motion), .2)) var(--ease-inout) infinite; }

/* ═══════════════ PREMISE ═══════════════ */
.premise { text-align: left; }
.premise .display-l { max-width: 22ch; }
.premise .premise-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 7vw, 120px);
  margin-top: clamp(48px, 7vh, 90px); align-items: start; }
.premise .col-note { display: flex; flex-direction: column; gap: 26px; }
.note-block { border-left: 1px solid var(--line); padding-left: 20px; }
.note-block .k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--n3); margin-bottom: 8px; }
.note-block p { margin: 0; color: var(--n1); font-size: 15px; line-height: 1.6; font-weight: 300; }

/* ═══════════════ ENTRANCE (two paths) ═══════════════ */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: clamp(40px, 6vh, 72px);
  border: 1px solid var(--line); background: var(--line); }
.path { position: relative; background: var(--bg-1); padding: clamp(32px, 4vw, 56px); overflow: hidden;
  display: flex; flex-direction: column; gap: 22px; min-height: 420px;
  transition: background-color .5s; }
.path::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; }
.path.host::before  { background: radial-gradient(110% 80% at 80% 0%, rgba(255,160,60,calc(.09*var(--glow))) 0%, transparent 60%); }
.path.connect::before { background: radial-gradient(110% 80% at 80% 0%, rgba(110,130,255,calc(.11*var(--glow))) 0%, transparent 60%); }
.path:hover::before { opacity: 1; }
.path .p-idx { display: flex; align-items: center; justify-content: space-between; }
.path .p-idx .glyph { width: 30px; height: 30px; color: var(--n2); }
.path.host .p-idx .num { color: var(--warm-2); }
.path.connect .p-idx .num { color: var(--cool-3, #5b7fa6); }
.path h3 { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.01em; color: var(--n0); }
.path p { margin: 0; color: var(--n2); font-size: 15px; line-height: 1.6; max-width: 42ch; }
.path .p-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 10px; }
.path .p-list li { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--n2); display: flex; align-items: center; gap: 12px; }
.path .p-list li::before { content: ""; width: 14px; height: 1px; background: var(--n4); flex-shrink: 0; }
.path .p-foot { margin-top: auto; padding-top: 24px; }
.path .p-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--n1); }
.path .p-link .lead { transition: transform .3s var(--ease-out); }
.path:hover .p-link .lead { transform: translateX(4px); }
.path.host .p-link { color: var(--warm-1); }
.path.connect .p-link { color: var(--cool-1); }

/* ═══════════════ STRUCTURES ═══════════════ */
.structures-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.structures-head .lede { margin-top: 18px; }
.struct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(40px, 6vh, 64px); }
.struct {
  position: relative; border: 1px solid var(--line); background: var(--bg-1);
  padding: 32px 28px 28px; min-height: 360px; display: flex; flex-direction: column; gap: 18px;
  overflow: hidden; transition: border-color .4s, transform .4s; }
.struct:hover { border-color: var(--n4); transform: translateY(-3px); }
.struct .s-top { display: flex; align-items: flex-start; justify-content: space-between; }
.struct .s-diagram { height: 96px; width: 96px; color: var(--n2); opacity: .9; }
.struct .s-state { font-family: var(--mono); font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--n3); }
.struct h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: -0.01em; color: var(--n0); }
.struct p { margin: 0; color: var(--n2); font-size: 14px; line-height: 1.6; }
.struct .s-meta { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line-2);
  display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--n3); }
.struct .s-meta b { color: var(--n1); font-weight: 500; }

/* ═══════════════ FULL-BLEED DIVIDER ═══════════════ */
.bleed { position: relative; height: clamp(360px, 62vh, 620px); overflow: hidden;
  display: flex; align-items: center; padding: 0 var(--edge); }
.bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%;
  filter: grayscale(1) contrast(1.05) brightness(.5); z-index: -1; }
.bleed::after { content: ""; position: absolute; inset: 0; z-index: 0; background:
  linear-gradient(180deg, var(--bg-0) 0%, transparent 22%, transparent 70%, rgba(4,5,10,.9) 100%),
  linear-gradient(90deg, rgba(4,5,10,.85) 0%, transparent 55%); }
.bleed .bleed-body { position: relative; z-index: 1; max-width: 30ch; }
.bleed .bleed-body .display-m { color: var(--n0); }
.bleed .bleed-body .mono { color: var(--n2); display: block; margin-bottom: 18px; }

/* ═══════════════ THE WATCHES (Aon & Eon) ═══════════════ */
.watches-head { max-width: 64ch; }
.watch-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: clamp(40px, 6vh, 64px);
  border: 1px solid var(--line); background: var(--line); }
.watch { position: relative; padding: clamp(36px, 4vw, 56px); overflow: hidden;
  display: flex; flex-direction: column; gap: 26px; min-height: 520px; }
.watch.aon { background: radial-gradient(130% 90% at 50% 0%, #181612 0%, #0a0b0f 64%, var(--bg-0) 100%); }
.watch.eon { background: radial-gradient(130% 90% at 50% 100%, #13162a 0%, #0a0b12 64%, var(--bg-0) 100%); }
.watch .w-top { display: flex; justify-content: space-between; align-items: baseline; }
.watch.aon .w-top .id { color: var(--warm-2); }
.watch.eon .w-top .id { color: var(--cool-2); }
.watch .glyph-frame { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 220px; }
.watch .glyph-frame svg { width: 240px; height: 240px; max-width: 80%; }
.watch .w-name { font-family: var(--display); font-weight: 500; font-size: clamp(52px, 7vw, 88px);
  line-height: 0.9; letter-spacing: 0.04em; }
.watch.aon .w-name { color: var(--warm-1); }
.watch.eon .w-name { color: var(--cool-1); }
.watch .w-role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--n3); }
.watch .w-desc { color: var(--n2); font-size: 15px; line-height: 1.6; max-width: 38ch; text-wrap: pretty; }
.watch .w-tokens { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; padding-top: 22px;
  border-top: 1px solid var(--line); font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
  color: var(--n3); line-height: 1.8; }
.watch .w-tokens b { display: block; color: var(--n1); font-weight: 500; }
.watch.aon .w-tokens b.acc { color: var(--warm-1); }
.watch.eon .w-tokens b.acc { color: var(--cool-1); }

/* ═══════════════ THE ARRAY ═══════════════ */
.array-wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 96px);
  align-items: center; margin-top: clamp(40px, 6vh, 64px); }
.array-stage { position: relative; aspect-ratio: 1; max-width: 620px; width: 100%; margin: 0 auto; }
.array-stage svg { width: 100%; height: 100%; overflow: visible; }
.array-copy { display: flex; flex-direction: column; gap: 28px; }
.spec-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border: 1px solid var(--line);
  background: var(--line); margin-top: 6px; }
.spec-strip .cell { background: var(--bg-1); padding: 18px 20px; }
.spec-strip .cell .v { font-family: var(--display); font-weight: 300; font-size: 30px; letter-spacing: 0.01em;
  color: var(--n0); line-height: 1; margin-bottom: 7px; }
.spec-strip .cell .k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--n3); }

/* ═══════════════ ACCESS CTA ═══════════════ */
.cta { position: relative; text-align: center; padding: clamp(96px, 16vh, 200px) var(--edge); overflow: hidden; }
.cta .cardinal { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 18%, var(--line) 82%, transparent); }
.cta .cardinal .node { position: absolute; left: 50%; width: 7px; height: 7px; border-radius: 50%;
  background: var(--n2); transform: translate(-50%, -50%); }
.cta .cardinal .node.top { top: 16%; background: var(--warm-1); box-shadow: 0 0 12px var(--warm-glow); opacity: var(--glow); }
.cta .cardinal .node.bot { top: 84%; background: var(--cool-1); box-shadow: 0 0 12px var(--cool-2); opacity: var(--glow); }
.cta .cardinal .node.mid { top: 50%; }
.cta-body { position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; gap: clamp(26px, 4vh, 42px); }
.cta-body .eyebrow { color: var(--n3); }
.cta-form { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cta-form input { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--n1);
  background: var(--bg-1); border: 1px solid var(--line); padding: 16px 20px; min-width: 280px;
  text-transform: uppercase; transition: border-color .3s; caret-color: var(--warm-1); }
.cta-form input:hover { border-color: var(--n3); }
.cta-form input::placeholder { color: var(--n3); }
.cta-form input:focus { outline: none; border-color: var(--n2); }

/* ═══════════════ FOOTER ═══════════════ */
.footer { border-top: 1px solid var(--line); padding: 56px var(--edge) 40px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.footer-cols { display: flex; gap: clamp(40px, 6vw, 96px); flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col .h { font-family: var(--mono); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--n3); margin-bottom: 6px; }
.footer-col a { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--n2); transition: color .25s; }
.footer-col a:hover { color: var(--n1); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.footer-bottom .mono-sm { color: var(--n3); }

/* ═══════════════ REVEAL ═══════════════ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* ═══════════════ KEYFRAMES ═══════════════ */
/* Canonical loops (ct-sweep, ct-pulse, ct-breath) come from the DLS;
   the Relay sweep/core motion is inlined by design/glyphs.js. */
@keyframes cue-fall { 0% { transform: translateY(0); } 100% { transform: translateY(200%); } }
@keyframes hero-drift { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.075) translateY(-10px); } }

/* ═══════════════ TWEAKS PANEL ═══════════════ */
#tweaks { position: fixed; right: 18px; bottom: 18px; z-index: 300; width: 250px;
  background: color-mix(in oklab, var(--bg-1) 88%, transparent); border: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: 16px 16px 18px; display: none; font-family: var(--mono); }
#tweaks.on { display: block; }
#tweaks .tk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
#tweaks .tk-head .t { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--n2); }
#tweaks .tk-head .x { color: var(--n3); cursor: pointer; font-size: 12px; }
#tweaks .tk-head .x:hover { color: var(--n1); }
#tweaks .tk { margin-bottom: 14px; }
#tweaks .tk label { display: flex; justify-content: space-between; font-size: 8.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--n3); margin-bottom: 8px; }
#tweaks .tk label b { color: var(--n1); font-weight: 500; }
#tweaks input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 1px; background: var(--n4); }
#tweaks input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px;
  border-radius: 50%; background: var(--n1); cursor: pointer; box-shadow: 0 0 8px rgba(255,255,255,.4); }
#tweaks input[type=range]::-moz-range-thumb { width: 11px; height: 11px; border: none;
  border-radius: 50%; background: var(--n1); cursor: pointer; }
#tweaks .seg { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); }
#tweaks .seg button { flex: 1; background: var(--bg-1); border: none; color: var(--n3); cursor: pointer;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; padding: 9px 4px; transition: color .2s, background-color .2s; }
#tweaks .seg button.active { background: var(--bg-3); color: var(--n1); }

/* ═══════════════ REDUCED MOTION ═══════════════ */
/* Global animation kill lives in design/tokens.css — these are the
   page-local stillness states. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 1080px) {
  .hud-rail { display: none; }
  .premise .premise-grid { grid-template-columns: 1fr; gap: 40px; }
  .array-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --edge: 20px; }
  .bar-nav .links { display: none; }
  /* Tighten the mono section labels so the longest ("THE RELAY ·
     COMMUNICATION LAYER") fits without its nowrap tail clipping. */
  .section-index { gap: 12px; }
  .section-index .num, .section-index .tag { letter-spacing: 0.2em; font-size: 9px; }
  .paths, .watch-sheet { grid-template-columns: 1fr; }
  .struct-grid { grid-template-columns: 1fr; }
  .hero-top { display: none; }
  .footer-top { flex-direction: column; }
}