/* ═══════════════════════════════════════════════════════
   MASTER SHEET system — shared drawing-set styles
   Used by all sheets in the set. Tokens + chrome + blocks.
   ═══════════════════════════════════════════════════════ */
:root {
  --vellum: #FAFAF7;
  --vellum-2: #FFFFFF;
  --grid: rgba(34, 87, 197, 0.07);
  --ink: #16181D;
  --ink-2: #4A4E58;
  --ink-3: #6B6F79;
  --blue: #2257C5;
  --blue-deep: #173B85;
  --blue-soft: rgba(34, 87, 197, 0.08);
  --orange: #E66A00;
  --line: rgba(22, 24, 29, 0.1);
  --term-bg: #0D1117;
  --term-green: #3FE07C;
  --term-dim: #207A44;
  --term-blue: #8FB0E8;
  --night: #14161C;
  --lamp: #F5EFE2;
  --head: 'Archivo', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--vellum);
  background-size: 32px 32px, 32px 32px, auto;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
}
.rail { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
h1, h2, h3 { font-family: var(--head); }

/* ── SHEET FRAME ── */
.sheet-frame { position: fixed; inset: 14px; border: 1.5px solid var(--blue); pointer-events: none; z-index: 50; opacity: 0.55; }
.sheet-frame::before { content: ""; position: absolute; inset: 5px; border: 0.5px solid var(--blue); opacity: 0.5; }
.tick { position: fixed; font-family: var(--mono); font-size: 9px; color: var(--blue); z-index: 51; opacity: 0.65; letter-spacing: 0.08em; }
.tick.t1 { top: 18px; left: 25%; } .tick.t2 { top: 18px; left: 50%; } .tick.t3 { top: 18px; left: 75%; }
.tick.l1 { left: 20px; top: 25%; } .tick.l2 { left: 20px; top: 50%; } .tick.l3 { left: 20px; top: 75%; }
@media (max-width: 900px) { .sheet-frame, .tick { display: none; } }

/* ── NAV ── */
.topnav {
  position: sticky; top: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 40px;
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ink); font-weight: 500; text-decoration: none; }
.brand b { color: var(--blue); }
.navlinks { display: flex; gap: 26px; }
.navlinks a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.navlinks a:hover, .navlinks a.here { color: var(--blue); }
.nav-cta {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue); border: 1.5px solid var(--blue); padding: 8px 16px; text-decoration: none;
  transition: all 0.15s;
}
.nav-cta:hover { background: var(--blue); color: var(--vellum); }
@media (max-width: 900px) { .navlinks { display: none; } .brand .dwg-no { display: none; } }

/* ── SHARED TYPO ── */
section { padding: 118px 0; position: relative; }
.annot {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue); display: flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.annot::before { content: ""; width: 38px; height: 1.5px; background: var(--blue); }
.annot .ref { color: var(--ink-3); letter-spacing: 0.08em; }
h2.sec { font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; margin-bottom: 18px; max-width: 760px; }
h2.sec em { font-style: normal; color: var(--blue); }
.lede { font-size: 17px; font-weight: 300; color: var(--ink-2); max-width: 640px; line-height: 1.7; }
.lede strong { font-weight: 600; color: var(--ink); }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none; } }

/* ── DIMENSION LINE ── */
.dim { position: relative; max-width: 760px; margin-top: 26px; height: 34px; }
.dim svg { width: 100%; height: 100%; overflow: visible; }
.dim line, .dim path { stroke: var(--blue); stroke-width: 1.5; }
.dim .draw { stroke-dasharray: 800; stroke-dashoffset: 800; transition: stroke-dashoffset 1.4s cubic-bezier(0.22,1,0.36,1) 0.3s; }
.in .dim .draw, .dim.in .draw { stroke-dashoffset: 0; }
.dim-label {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--blue); white-space: nowrap; padding-top: 4px;
}

/* ── NOTE / REV CLOUD ── */
.note-block { margin-top: 40px; max-width: 560px; display: grid; grid-template-columns: 20px 1fr; gap: 14px; }
.note-block .marker { font-family: var(--mono); font-size: 11px; color: var(--blue); }
.note-block p { font-family: var(--mono); font-size: 13px; line-height: 1.8; color: var(--ink-2); }
.note-block p b { color: var(--ink); font-weight: 500; }
.rev-cloud {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 32px;
  border: 1.5px dashed var(--orange); border-radius: 999px; padding: 10px 20px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange);
}
.rev-cloud::before { content: "▲"; font-size: 9px; }

/* ── BENTO (proof cards) ── */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 56px; }
.bcard {
  min-width: 0;
  background: var(--vellum-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px 26px; position: relative;
  box-shadow: 0 8px 28px rgba(22, 24, 29, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.bcard:hover { transform: translateY(-3px); border-color: rgba(34,87,197,0.4); box-shadow: 0 14px 36px rgba(34, 87, 197, 0.1); }
@supports (grid-template-rows: subgrid) {
  .bcard { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; }
  .bcard .l { display: contents; }
}
.bcard.wide { grid-column: span 2; }
.bcard .corner { position: absolute; top: 10px; right: 12px; font-family: var(--mono); font-size: 9px; color: var(--ink-3); letter-spacing: 0.08em; }
.bcard .n {
  font-family: var(--head); font-size: clamp(26px, 3.3vw, 44px); font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1.05; margin-bottom: 10px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bcard .n.long { font-size: clamp(22px, 2.6vw, 34px); }
.bcard .n small { font-size: 22px; color: var(--blue); font-weight: 700; }
.bcard .l { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.bcard .l strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.bcard .src { margin-top: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase; }

/* ── GANTT ── */
.gantt { margin-top: 60px; background: var(--vellum-2); border: 1px solid var(--line); border-radius: 14px; padding: 44px 40px 36px; box-shadow: 0 8px 28px rgba(22,24,29,0.05); }
.g-axis { display: grid; grid-template-columns: 200px 1fr; gap: 20px; margin-bottom: 10px; }
.g-scale { position: relative; height: 22px; font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); }
.g-scale span { position: absolute; transform: translateX(-50%); }
.g-scale::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.g-row { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.g-row:first-of-type { border-top: 0; }
.g-lbl { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.g-lbl small { display: block; font-family: var(--mono); font-size: 10px; color: var(--ink-3); font-weight: 400; letter-spacing: 0.04em; }
.g-track { position: relative; height: 22px; }
.g-bar {
  position: absolute; top: 3px; bottom: 3px; border-radius: 4px;
  background: var(--blue-soft); border: 1.5px solid var(--blue);
  width: 0; transition: width 1s cubic-bezier(0.22,1,0.36,1) 0.2s;
}
.in .g-bar { width: var(--w); }
.g-bar.hot { background: rgba(34,87,197,0.22); }
.g-bar.next { background: transparent; border: 1.5px dashed var(--orange); }
.g-bar .gv {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 9.5px; color: var(--blue); white-space: nowrap; letter-spacing: 0.04em;
}
.g-bar.next .gv { color: var(--orange); left: auto; right: calc(100% + 10px); }
.g-bar.hot .gv { left: auto; right: calc(100% + 10px); }
@media (prefers-reduced-motion: reduce) { .g-bar { transition: none; width: var(--w); } }
.g-note { margin-top: 22px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.06em; }
.g-note b { color: var(--blue); font-weight: 500; }

/* ── N-SERIES NOTES (narrative) ── */
.nnotes { margin-top: 56px; display: grid; gap: 0; max-width: 860px; }
.nnote { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 36px 0; border-top: 1px solid var(--line); }
.nnote:first-child { border-top: 1.5px solid var(--blue); }
.nnote .nref { font-family: var(--mono); font-size: 12px; color: var(--blue); letter-spacing: 0.08em; padding-top: 5px; }
.nnote h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 10px; }
.nnote h3 em { font-style: normal; color: var(--blue); }
.nnote p { font-size: 15px; color: var(--ink-2); line-height: 1.7; margin-bottom: 10px; }
.nnote p:last-child { margin-bottom: 0; }
.nnote p b { color: var(--ink); font-weight: 600; }
.nnote ul { list-style: none; margin-top: 4px; }
.nnote li { font-size: 14px; color: var(--ink-2); padding: 7px 0 7px 20px; position: relative; border-top: 1px dashed var(--line); }
.nnote li::before { content: "—"; position: absolute; left: 0; color: var(--blue); }
.nnote li b { color: var(--ink); font-weight: 600; }

/* ── SPEC SCHEDULE (chips → table) ── */
.spec-schedule { margin-top: 56px; background: var(--vellum-2); border: 1.5px solid var(--blue); border-radius: 4px; overflow: hidden; max-width: 860px; }
.spec-schedule .ss-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vellum); background: var(--blue); padding: 10px 18px;
}
.spec-schedule .ss-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.spec-schedule .ss-cell {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2);
  padding: 12px 18px; border-top: 1px solid var(--line); border-right: 1px solid var(--line);
}
.spec-schedule .ss-cell:nth-child(3n) { border-right: 0; }

/* ── TITLE BLOCK FOOTER ── */
.titleblock { max-width: 1160px; margin: 40px auto 60px; padding: 0 40px; }
.tb-inner {
  border: 1.5px solid var(--blue); background: var(--vellum-2);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr;
}
.tb-cell { padding: 14px 18px; border-right: 1px solid var(--line); }
.tb-cell:last-child { border-right: 0; }
.tb-cell .k { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.tb-cell .v { font-family: var(--mono); font-size: 12px; color: var(--ink); letter-spacing: 0.04em; }
.tb-cell .v b { color: var(--blue); }
.tb-cell a.v { text-decoration: none; display: block; }
.tb-cell a.v:hover b { text-decoration: underline; text-underline-offset: 3px; }
.foot-end { display: flex; justify-content: space-between; padding: 18px 0 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); flex-wrap: wrap; gap: 10px; }
.foot-end a { color: var(--blue); text-decoration: none; }

/* ── NEXT SHEET BAND ── */
.next-sheet {
  display: block; max-width: 1160px; margin: 60px auto 0; padding: 0 40px;
  text-decoration: none;
}
.next-sheet .ns-inner {
  border: 1.5px solid var(--blue); background: var(--vellum-2);
  padding: 28px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.next-sheet:hover .ns-inner { background: var(--blue-soft); box-shadow: 0 14px 36px rgba(34,87,197,0.12); }
.next-sheet .ns-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.next-sheet .ns-t { font-family: var(--head); font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -0.015em; }
.next-sheet .ns-t em { font-style: normal; color: var(--blue); }
.next-sheet .ns-arrow { font-family: var(--head); font-size: 30px; color: var(--blue); font-weight: 800; }

@media (max-width: 900px) {
  section { padding: 96px 0; }
  .rail { padding: 0 24px; }
  .topnav { padding: 14px 24px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bcard.wide { grid-column: span 2; }
  .g-axis, .g-row { grid-template-columns: 1fr; gap: 6px; }
  .g-scale { height: 18px; font-size: 8.5px; }
  .g-axis { margin-bottom: 4px; }
  .nnote { grid-template-columns: 1fr; gap: 8px; }
  .spec-schedule .ss-grid { grid-template-columns: 1fr 1fr; }
  .spec-schedule .ss-cell:nth-child(3n) { border-right: 1px solid var(--line); }
  .spec-schedule .ss-cell:nth-child(2n) { border-right: 0; }
  .tb-inner { grid-template-columns: 1fr 1fr; }
  .tb-cell:nth-child(odd) { border-right: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bcard.wide { grid-column: span 1; }
}

/* ── ROOM NAV (header) ── */
.roomnav { display: flex; gap: 22px; align-items: baseline; }
.roomnav a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.roomnav a:hover { color: var(--blue); }
.roomnav a.console-chip {
  background: var(--term-bg); color: var(--term-green);
  border-radius: 6px; padding: 6px 12px;
  margin: 0 -13px; /* pull pill padding out of the nav rhythm — text-to-text gaps stay even */
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(63,224,124,0.3);
}
.roomnav a.console-chip::before { content: "●"; color: var(--amber, #FFB347); font-size: 8px; animation: chip-pulse 2.4s ease infinite; }
@keyframes chip-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .roomnav a.console-chip::before { animation: none; } }
.roomnav a.console-chip:hover { color: #fff; border-color: var(--term-green); }
.burger {
  display: none; background: transparent; border: 1.5px solid var(--blue); color: var(--blue);
  font-size: 16px; width: 38px; height: 38px; border-radius: 8px; cursor: pointer;
}
@media (max-width: 900px) { .roomnav { display: none; } .burger { display: block; } }

/* ── DRAWER (mobile index) ── */
.drawer {
  position: fixed; inset: 0; z-index: 35; /* below topnav so the ☰→✕ stays visible */
  background: var(--vellum);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  padding: 90px 24px 40px; overflow-y: auto;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.drawer.open { opacity: 1; pointer-events: auto; }
.drawer .d-title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 16px; }

/* ── SHEET INDEX ── */
.sheet-index { border: 1.5px solid var(--blue); background: var(--vellum-2); border-radius: 4px; overflow: hidden; }
.si-head {
  display: grid; grid-template-columns: 92px 1fr 130px 30px; gap: 14px;
  padding: 10px 18px; background: var(--blue); color: var(--vellum);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
}
.si-row {
  display: grid; grid-template-columns: 92px 1fr 130px 30px; gap: 14px; align-items: center;
  padding: 11px 18px; border-top: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  transition: background 0.15s ease;
}
a.si-row:hover { background: var(--blue-soft); }
.si-no { font-family: var(--mono); font-size: 10.5px; color: var(--blue); letter-spacing: 0.06em; }
.si-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.si-t small { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
.si-status { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; }
.si-go { font-family: var(--head); font-weight: 800; color: var(--blue); }
.si-row.planned { opacity: 0.5; }
.si-row.planned .si-go { color: var(--ink-3); }
.si-row.here { background: rgba(230,106,0,0.07); }
.si-row.here .si-status { color: var(--orange); font-weight: 600; }
.si-row.dark .si-no, .si-row.dark .si-go { color: var(--term-dim); }
.si-row.dark { background: var(--term-bg); }
.si-row.dark .si-t { color: #C8D1DC; }
.si-row.dark .si-t small { color: rgba(200,209,220,0.5); }
.si-row.dark .si-status { color: var(--term-green); }
a.si-row.dark:hover { background: #131A23; }
@media (max-width: 700px) {
  .si-head, .si-row { grid-template-columns: 70px 1fr 24px; }
  .si-head span:nth-child(3), .si-status { display: none; }
}

/* ── ENTER-DETAIL BUTTON ── */
.enter-detail {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--term-bg); color: var(--term-green);
  border: 1px solid rgba(63,224,124,0.35); border-radius: 8px;
  padding: 13px 22px; text-decoration: none; transition: all 0.15s;
}
.enter-detail::after { content: "→"; }
.enter-detail:hover { border-color: var(--term-green); color: #fff; }

/* ── FOOTER INDEX WRAP ── */
.foot-index { max-width: 1160px; margin: 70px auto 0; padding: 0 40px; }
.foot-index .fi-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
@media (max-width: 900px) { .foot-index { padding: 0 24px; } }

/* ── SVG LINEWORK SYSTEM (drawn schematics) ── */
svg .lw { stroke: var(--blue); fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
svg .lw.thin { stroke: var(--ink-3); stroke-width: 1; }
svg .lw.crit { stroke: var(--orange); }
svg .lw.dash { stroke-dasharray: 4 5 !important; }
svg .fillnode { fill: var(--blue); stroke: none; }
svg .fillcrit { fill: var(--orange); stroke: none; }
svg .anno { fill: var(--ink-2); font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; }
svg .anno.crit { fill: var(--orange); }
/* JS sets dasharray = pathLength; .in transitions offset to 0 */
[data-schem] .lw.draw { transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1); }
[data-schem] .late { opacity: 0; transition: opacity 0.5s ease 1.6s; }
[data-schem].in .late { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-schem] .lw.draw { transition: none; stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  [data-schem] .late { opacity: 1; transition: none; }
}

/* ── DETAIL FIGURE (in dview cards) ── */
.dview .d-fig { margin: 4px 0 14px; height: 240px; display: flex; align-items: center; justify-content: center; }
.dview .d-fig svg { width: 100%; height: 100%; display: block; }

/* ── SECTION A-A ASSEMBLY (datum + balloons) — timelines on detail sheets ── */
.assembly {
  position: relative; margin-top: 60px;
  border: 1.5px solid var(--blue); background: var(--vellum-2); border-radius: 4px;
  padding: 52px 44px 40px;
  box-shadow: 0 8px 28px rgba(22,24,29,0.05);
}
.datum-row { position: relative; height: 1.5px; background: var(--blue); margin-bottom: 56px; }
.datum-row::before, .datum-row::after {
  content: "A"; position: absolute; top: -11px;
  font-family: var(--head); font-weight: 800; font-size: 11px; color: var(--ink-3);
  background: var(--vellum-2); border: 1.5px solid var(--ink-3); border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
}
.datum-row::before { left: -36px; }
.datum-row::after { right: -36px; }
.datum-row .cl {
  position: absolute; left: 40px; right: 40px; top: 0; height: 1.5px;
  background: repeating-linear-gradient(90deg, rgba(230,106,0,0.5) 0 18px, transparent 18px 26px, rgba(230,106,0,0.5) 26px 30px, transparent 30px 38px);
}
.phases { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.phase { position: relative; padding-top: 50px; }
@supports (grid-template-rows: subgrid) {
  .phases { grid-template-rows: auto auto auto auto; }
  .phase { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start; }
}
.phase::before { content: ""; position: absolute; top: -56px; left: 14px; width: 1.5px; height: 96px; background: rgba(34,87,197,0.3); }
.phase .balloon {
  position: absolute; top: -71px; left: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--blue); background: var(--vellum-2); color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 800; font-size: 13px;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.phase:hover .balloon { border-color: var(--orange); color: var(--orange); transform: scale(1.12); }
.phase .ph-when { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--orange); font-weight: 600; margin-bottom: 8px; text-transform: uppercase; }
.phase h3 { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 4px; color: var(--ink); }
.phase .ph-role { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.phase .ph-proof { border-top: 1px solid var(--line); padding-top: 10px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.phase .ph-proof b { color: var(--ink); font-weight: 600; display: block; }
.assembly .sv-caption { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 30px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.assembly .sv-caption b { color: var(--blue); }
@media (max-width: 980px) {
  .phases { grid-template-columns: 1fr; gap: 0; border-left: 1.5px solid var(--blue); padding-left: 30px; }
  .datum-row { display: none; }
  .assembly { padding: 32px 26px 30px 44px; }
  .phase { padding: 0 0 28px 14px; }
  .phase:last-child { padding-bottom: 0; }
  .phase::before { top: 15px; left: -44px; width: 42px; height: 1.5px; }
  .phase .balloon { top: 0; left: -60px; }
}

/* ── CTA ASSEMBLY BACKDROP ── */
.cta-stage { position: relative; }
.cta-schem {
  position: absolute; inset: -40px 0; z-index: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.4;
}
.cta-schem svg { width: min(1080px, 94%); height: auto; }
.cta-stage > *:not(.cta-schem) { position: relative; z-index: 1; }
.cta-stage .rail { position: relative; }
.cta-stage .rail::before { content: ""; position: absolute; inset: -30px 6%; background: radial-gradient(ellipse at center, var(--vellum) 36%, rgba(250,250,247,0.78) 60%, transparent 80%); z-index: 0; }
.cta-stage .rail > * { position: relative; z-index: 1; }
@media (max-width: 900px) { .cta-schem { opacity: 0.22; } }

/* ── OPERATOR'S SCOPE (full-time-ability grid) ── */
.scope { margin-top: 44px; border: 1.5px solid var(--blue); background: var(--vellum-2); display: grid; grid-template-columns: repeat(4, 1fr); }
.scope .sc-cell { padding: 16px 18px; border-right: 1px solid var(--line); }
.scope .sc-cell:last-child { border-right: 0; }
.scope .sc-k { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.scope .sc-v { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.scope .sc-v small { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }
.scope .sc-s { font-weight: 400; font-size: 11.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
@supports (grid-template-rows: subgrid) {
  .scope .sc-cell { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
}
@media (max-width: 900px) { .scope { grid-template-columns: 1fr 1fr; } .scope .sc-cell:nth-child(2n) { border-right: 0; } .scope .sc-cell { border-bottom: 1px solid var(--line); } }

/* ── EVIDENCE FIGURE (as-built still in drawing frame) ── */
.evidence { margin-top: 56px; position: relative; border: 1.5px solid var(--blue); background: var(--vellum-2); padding: 12px 12px 0; max-width: 860px; }
.evidence::before, .evidence::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid var(--blue); }
.evidence::before { top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.evidence::after { bottom: -8px; right: -8px; border-left: 0; border-top: 0; }
.evidence img { display: block; width: 100%; height: auto; }
.evidence .ev-cap { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); flex-wrap: wrap; }
.evidence .ev-cap .dimr { color: var(--ink-3); }

/* ── FIGURE MOTION v2 — each figure moves by its subject's physics ── */
@keyframes fig-spin { to { transform: rotate(120deg); } }
@keyframes fig-spin-rev { to { transform: rotate(-171.4deg); } }
.gear-a, .gear-b { transform-box: view-box; }
.in .gear-a { animation: fig-spin 4.5s cubic-bezier(0.25, 0.8, 0.4, 1) 0.8s 1 forwards; }
.in .gear-b { animation: fig-spin-rev 4.5s cubic-bezier(0.25, 0.8, 0.4, 1) 0.8s 1 forwards; }
/* current flow: marching dashes along wires */
.wire-current { stroke: var(--orange); stroke-width: 2.5; fill: none; stroke-dasharray: 6 10; opacity: 0; }
@keyframes fig-flow { to { stroke-dashoffset: -64; } }
.in .wire-current { animation: fig-flow 1.2s linear infinite; }
.in .wire-current.c1 { opacity: 1; transition: opacity 0.3s 1.4s; }
.in .wire-current.c2 { opacity: 1; transition: opacity 0.3s 2.6s; }
.in .wire-current.c3 { opacity: 1; transition: opacity 0.3s 3.8s; }
/* gate switches: closed by the operator */
.gate-sw { transform-box: view-box; transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1); }
.in .gate-sw.sw1 { transition-delay: 2.2s; transform: rotate(0deg) !important; }
.in .gate-sw.sw2 { transition-delay: 3.4s; transform: rotate(0deg) !important; }
/* timing-diagram sweep cursor */
@keyframes fig-sweep { from { transform: translateX(0); } to { transform: translateX(var(--sweep, 700px)); } }
.in .sweep-cursor { animation: fig-sweep 3.2s cubic-bezier(0.4, 0, 0.6, 1) 1.2s 1 forwards; }
@media (prefers-reduced-motion: reduce) {
  .in .gear-a, .in .gear-b, .in .wire-current, .in .sweep-cursor { animation: none; }
  .wire-current { opacity: 1 !important; }
  .gate-sw { transform: rotate(0deg) !important; transition: none; }
  .in .sweep-cursor { transform: translateX(var(--sweep, 700px)); }
}
/* shared figure frame */
.fig-block { margin-top: 56px; background: var(--vellum-2); border: 1px solid var(--line); border-radius: 14px; padding: 36px 36px 26px; box-shadow: 0 8px 28px rgba(22,24,29,0.05); max-width: 980px; }
.fig-block svg { width: 100%; height: auto; display: block; }
.fig-block .fig-cap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.fig-block .fig-cap .dimr { color: var(--ink-3); }

/* wide figures scroll on small screens instead of shrinking to noise */
@media (max-width: 700px) {
  .fig-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fig-block svg, .fig-circuit svg { min-width: 640px; }
  .fig-block::after { content: "← drag →"; display: block; text-align: center; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; color: var(--ink-3); margin-top: 8px; }
}

/* ── NAV DROPDOWNS (drafting panel) ── */
.navdrop { position: relative; }
.navdrop > button { line-height: 1.45; vertical-align: baseline;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: 0; color: var(--ink-2); cursor: pointer; padding: 0;
}
.navdrop > button::after { content: " ▾"; font-size: 9px; color: var(--blue); }
.navdrop > button:hover, .navdrop.open > button { color: var(--blue); }
.drop-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  min-width: 280px; background: var(--vellum-2); border: 1.5px solid var(--blue);
  box-shadow: 0 18px 50px rgba(34, 87, 197, 0.14);
  opacity: 0; pointer-events: none; transition: opacity 0.18s ease;
  z-index: 60;
}
.navdrop.open .drop-panel, .navdrop:focus-within .drop-panel { opacity: 1; pointer-events: auto; }
.drop-panel a {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: baseline;
  padding: 12px 16px; text-decoration: none; border-top: 1px solid var(--line);
}
.drop-panel a:first-child { border-top: 0; }
.drop-panel a:hover { background: var(--blue-soft); }
.drop-panel .dno { font-family: var(--mono); font-size: 10px; color: var(--blue); letter-spacing: 0.06em; }
.drop-panel .dt { font-size: 13px; font-weight: 600; color: var(--ink); }
.drop-panel .dt small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-3); }
@media (max-width: 900px) { .navdrop { display: none; } }

/* ── SHEET CORRIDOR (prev/next pair) ── */
.sheet-nav { max-width: 1160px; margin: 60px auto 0; padding: 0 40px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
.sheet-nav .next-sheet, .sheet-nav .prev-sheet { margin: 0; padding: 0; max-width: none; display: block; text-decoration: none; }
.prev-sheet .ns-inner {
  border: 1.5px solid var(--line); background: var(--vellum-2);
  padding: 24px 28px; display: flex; justify-content: flex-start; align-items: center; gap: 18px;
  transition: border-color 0.2s ease, background 0.2s ease; height: 100%;
}
.prev-sheet:hover .ns-inner { border-color: var(--blue); background: var(--blue-soft); }
.prev-sheet .ns-arrow { font-family: var(--head); font-size: 26px; color: var(--ink-3); font-weight: 800; }
.prev-sheet:hover .ns-arrow { color: var(--blue); }
.prev-sheet .ns-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.prev-sheet .ns-t { font-family: var(--head); font-size: 18px; font-weight: 800; color: var(--ink-2); letter-spacing: -0.01em; }
.prev-sheet:hover .ns-t { color: var(--ink); }
@media (max-width: 760px) { .sheet-nav { grid-template-columns: 1fr; } }

/* ── SYMMETRY: true-centered nav + footer ── */
@media (min-width: 1100px) {
  .topnav { position: sticky; }
  .topnav .roomnav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
.foot-end { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; }
.foot-end > :first-child { justify-self: start; text-align: left; }
.foot-end > :nth-child(2) { justify-self: center; text-align: center; }
.foot-end > :last-child { justify-self: end; text-align: right; }


/* ── PN glyph stamps ── */
.pn-glyph { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: 8px; flex: none; }
.foot-end .pn-glyph { width: 11px; height: 11px; vertical-align: -1.5px; margin-right: 7px; }
.essay-end { display: flex; justify-content: center; padding: 34px 0 4px; }
.essay-end .pn-glyph { width: 18px; height: 18px; margin: 0; opacity: 0.9; }