/* =====================================================================
   ENCODEX — PROJECTS · "THE HALL OF RECORD" (MONOLITH v8.0)
   ---------------------------------------------------------------------
   Page-specific layer on top of site.css. The interior chrome (top bar,
   frosted menu, bottom status bar, tokens) is inherited unchanged; this
   file adds the live hall hero and the record beats below it:

     #ledger    — machined counters strip (hero cue target)
     01 DOCTRINE — the thesis: a record, not a portfolio
     02 DOSSIERS — five flagships: scale / intelligence / compounding /
                   autonomy / silence
     03 STANDARD — the engraved delivery plate
     04 REGISTER — the full index, filterable, sealed rows sealed
     05 THE WIRE — delivery-night log, typed in
     06 COMMISSION — the reserved next entry

   Motion contract (vitrine): one easing family, monochrome only, no
   snaps / bounces / auto-cuts. Scroll reveals ride IntersectionObserver
   classes set by projects.js; everything that hides copy is gated under
   html.js so a dead controller can never trap content.
   ===================================================================== */

:root { --house: cubic-bezier(0.16, 0.6, 0.2, 1); }

/* the page runs full-bleed: drop the interior document padding and let
   the fixed HUD bars overlay the beats (their gradients fade the seam) */
body { padding: 0; overflow-x: hidden; }
main.phall { max-width: none; margin: 0; padding: 0; }

/* a beat's safe area clears the 62px top bar + 44px status bar */
.p-safe { padding: clamp(72px, 11vh, 122px) clamp(20px, 5vw, 64px); }

/* shared display atoms (vault register) ------------------------------- */
.p-ref {
  display: block;
  font: 400 9.5px var(--f-mono); letter-spacing: 0.22em; color: var(--txt-4);
}
.p-label {
  font: 500 10px var(--f-mono); letter-spacing: 0.28em; color: var(--txt-3);
  text-transform: uppercase; margin: 0 0 20px;
}
.p-disp {
  font-family: var(--f-disp); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.07em; line-height: 1.2;
  background: linear-gradient(to bottom, #ffffff 34%, #8e99a7 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* dimmed second voice inside a display line (its own gradient — nested
   spans don't inherit background-clip) */
.p-disp .dim {
  background: linear-gradient(to bottom, #99a3b1 0%, #46505d 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.p-sechead { margin-bottom: clamp(40px, 6vh, 64px); }
.p-sechead__sub {
  margin: 0; font: 400 10px var(--f-mono);
  letter-spacing: 0.2em; color: var(--txt-4);
}

/* =====================================================================
   00 · THE PROJECT CORE — full-viewport live scene + editorial card
   ===================================================================== */
.p-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

/* poster fallback — the Sentinel still, dimmed and masked into the dark.
   It is the whole hero for reduced-motion / no-WebGL / failed loads, and
   the cover while the live scene compiles. */
.p-hero__poster { position: absolute; inset: 0; transition: opacity 1s ease 0.3s; }
.p-hero__poster img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) brightness(0.52) contrast(1.06);
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(ellipse 76% 72% at 50% 42%, #000 26%, transparent 78%);
  mask-image: radial-gradient(ellipse 76% 72% at 50% 42%, #000 26%, transparent 78%);
}
.p-hero.is-live .p-hero__poster { opacity: 0; }

.p-hero__canvas {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease 0.1s;
}
.p-hero__canvas canvas { display: block; width: 100%; height: 100%; }
.p-hero.is-live .p-hero__canvas { opacity: 1; }
.p-hero.is-flat .p-hero__canvas { display: none; }

/* legibility scrim — the landing's vignette recipe, with the pool pulled
   to the lower left where the editorial card sits */
.p-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(3, 4, 6, 0.7) 0%, rgba(3, 4, 6, 0) 13%),
    radial-gradient(ellipse 86% 78% at 24% 104%, rgba(3, 4, 6, 0.86) 0%, rgba(3, 4, 6, 0.4) 50%, rgba(3, 4, 6, 0) 76%),
    linear-gradient(to top, rgba(3, 4, 6, 0.55) 0%, rgba(3, 4, 6, 0) 26%);
}
.p-hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' seed='17' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
}

/* ---- title card: editorial lower-left, film-title reveal ------------ */
.p-hero__card {
  position: absolute;
  left: clamp(20px, 5vw, 64px);
  bottom: clamp(88px, 12vh, 150px);
  width: min(620px, calc(100vw - 2 * clamp(20px, 5vw, 64px)));
  text-align: left;
}
html.js .p-hero__card > * {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(9px);
  transition:
    opacity 1.7s ease,
    transform 1.7s var(--house),
    filter 1.7s ease;
}
html.js body.ready .p-hero__card > * { opacity: 1; transform: none; filter: none; }
html.js body.ready .p-hero__chip  { transition-delay: 0.15s; }
html.js body.ready .p-hero__rule  { transition-delay: 0.25s; }
html.js body.ready .p-hero__title { transition-delay: 0.45s; }
html.js body.ready .p-hero__sub   { transition-delay: 0.9s; }
html.js body.ready .p-hero__cta   { transition-delay: 1.3s; }

.p-hero__chip {
  margin: 0 0 18px;
  font: 400 9.5px var(--f-mono); letter-spacing: 0.24em; color: var(--txt-3);
}
.p-hero__rule {
  width: 76px; height: 1px; margin: 0 0 26px;
  background: linear-gradient(to right, #aeb6c2, transparent);
}
.p-hero__title {
  margin: 0 0 22px;
  font-size: clamp(25px, 4vw, 50px);
  line-height: 1.22;
  text-wrap: balance;
}
.p-hero__sub {
  margin: 0 0 34px;
  max-width: 46ch;
  font-family: var(--f-text);
  font-size: clamp(13.5px, 1.2vw, 16px);
  line-height: 1.7; letter-spacing: 0.05em;
  color: #97a1af;
}
.p-hero__cta {
  display: flex; align-items: center;
  gap: 13px; flex-wrap: wrap;
}

/* scroll cue — a hairline with a light dropping through it (signature S1).
   Right-aligned: the lower left belongs to the card. */
.p-cue {
  position: absolute;
  right: clamp(20px, 5vw, 64px); bottom: 58px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 400 8.5px var(--f-mono); letter-spacing: 0.26em; color: var(--txt-3);
  transition: opacity 0.7s ease, color 0.3s ease;
}
.p-cue:hover { color: #cfd6dd; }
.p-cue i {
  position: relative; width: 1px; height: 46px;
  background: rgba(95, 107, 121, 0.35);
  overflow: hidden;
}
.p-cue i::after {
  content: '';
  position: absolute; left: 0; top: -14px;
  width: 1px; height: 14px;
  background: var(--hi);
  animation: cueDrop 3.6s ease-in-out infinite;
}
@keyframes cueDrop {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 1; }
  62%  { transform: translateY(62px); opacity: 1; }
  78%, 100% { transform: translateY(62px); opacity: 0; }
}
.p-hero.cue-off .p-cue { opacity: 0; pointer-events: none; }

/* =====================================================================
   THE LEDGER — one hairline strip of machined numbers (signature S3/S4)
   ===================================================================== */

/* =====================================================================
   01 · THE DOCTRINE — the thesis, engraved. A record, not a portfolio.
   ===================================================================== */
.p-doct {
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
  gap: clamp(34px, 5.5vw, 80px);
  scroll-margin-top: 61px;
}
.p-doct__title {
  margin: 0;
  font-size: clamp(24px, 3.5vw, 46px);
  line-height: 1.24;
  text-wrap: balance;
}
.p-doct__right {
  align-self: center;
  border-left: 1px solid var(--line);
  padding-left: clamp(26px, 4vw, 54px);
}
.p-doct__right p {
  margin: 0 0 20px; max-width: 46ch;
  font-size: clamp(13.5px, 1.15vw, 15px); line-height: 1.8;
  letter-spacing: 0.02em; color: var(--txt-2);
}
.p-doct__right p:last-of-type { margin-bottom: 0; }
.p-doct__note {
  margin: 28px 0 0; padding-top: 18px;
  border-top: 1px solid var(--line);
  font: 400 9px var(--f-mono); letter-spacing: 0.2em; color: var(--txt-4);
}

/* =====================================================================
   02 · FLAGSHIP DOSSIERS — editorial rows, schematics in the blueprint
   register (signature S5), machined outcome metrics under each body
   ===================================================================== */
.p-feat { max-width: 1180px; margin: 0 auto; }
.p-dossier {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(30px, 5.5vw, 72px);
  align-items: center;
  padding: clamp(48px, 7.5vh, 80px) 0;
}
.p-dossier + .p-dossier { border-top: 1px solid var(--line); }
.p-dossier--flip .p-dossier__text { order: 2; }
.p-dossier--flip .p-dossier__media { order: 1; }

.p-dossier__text .p-ref { margin-bottom: 16px; }
.p-dossier__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.p-dossier__tags .tag { margin: 0; }
.p-dossier__name {
  margin: 20px 0 20px;
  font-size: clamp(23px, 3.1vw, 38px);
  line-height: 1.22;
  text-wrap: balance;
}
/* sealed dossier — censor bars stand where the letters would */
.p-dossier__name--redacted { display: flex; align-items: center; gap: 12px; }
.p-dossier__name--redacted i {
  display: block;
  height: clamp(18px, 2.2vw, 27px);
  background: #12171f;
  border: 1px solid #232b37;
}
.p-dossier__body {
  margin: 0; max-width: 54ch;
  font-size: clamp(13.5px, 1.15vw, 15.5px); line-height: 1.75;
  letter-spacing: 0.02em; color: var(--txt-2);
}

/* outcome metrics — a miniature of the ledger, engraved per dossier */
.p-dossier__metrics {
  display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin-top: 28px;
}
.p-dossier__metric { flex: 1 1 104px; padding: 16px 16px 2px 0; }
.p-dossier__metric + .p-dossier__metric { padding-left: 16px; border-left: 1px solid var(--line); }
.p-dossier__metric b {
  display: block;
  font: 400 19px var(--f-mono); font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em; color: var(--txt); font-weight: 400;
}
.p-dossier__metric b.mute { color: var(--txt-4); letter-spacing: 0.12em; }
.p-dossier__metric b.word {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.2em; padding-top: 5px;
}
.p-dossier__metric b.word i {
  width: 4px; height: 4px; background: var(--hi);
  box-shadow: 0 0 6px rgba(237, 241, 245, 0.8);
}
.p-dossier__metric b.word.live i { animation: pulse 3.6s ease-in-out infinite; }
.p-dossier__metric b.word.sealed { color: var(--txt-3); }
.p-dossier__metric b.word.sealed i {
  background: transparent; border: 1px solid var(--txt-3); box-shadow: none;
}
.p-dossier__metric span {
  display: block; margin-top: 8px;
  font: 500 8.5px var(--f-mono); letter-spacing: 0.18em; color: var(--txt-4);
}

/* schematic panel — flat surface, hairline, the 12px crop */
.p-dossier__media {
  margin: 0;
  position: relative;
  background: #0a0d12;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  padding: 26px 26px 20px;
  transition: border-color 0.45s ease;
}
.p-dossier:hover .p-dossier__media { border-color: #2a3340; }
.p-dossier__media .p-ref { margin-bottom: 14px; }
.p-dossier__media svg { display: block; width: 100%; height: auto; }
.p-dossier__cap {
  margin: 14px 0 0;
  font: 400 8.5px var(--f-mono); letter-spacing: 0.2em; color: var(--txt-4);
}

/* blueprint register ---------------------------------------------------
   base geometry in graphite, lit elements come alive only in view */
.sch-stroke {
  fill: none; stroke: #29313f; stroke-width: 1.5;
  stroke-linecap: square; stroke-linejoin: miter;
}
.sch-stroke rect, .sch-stroke circle, .sch-stroke line, .sch-stroke path { fill: none; }
.sch-callout { stroke: #232b37; stroke-width: 1; }
.sch-ground { stroke-dasharray: 3 6; }
.sch-txt { font: 500 8px var(--f-mono); letter-spacing: 0.16em; fill: #545f6d; }
.sch-redtxt { font: 500 8px var(--f-mono); letter-spacing: 0.2em; fill: #47515e; }
.sch-redact { fill: #10141b; stroke: #1f2733; stroke-width: 1; }
.sch-lit { stroke: #edf1f5; fill: none; stroke-width: 1.5; opacity: 0; }

.in .sch-feed {
  opacity: 1;
  stroke-dasharray: 12 88;
  animation: schTravel 6s linear infinite;
}
.in .sch-core { opacity: 1; fill: #edf1f5; stroke: none; animation: pulse 3.6s ease-in-out infinite; }
@keyframes schTravel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* Sentinel joint map — the scanline sweeps the unit, joints wake in a
   chain from the visor down (vitrine cadence, nothing snaps) */
.sch-scan { opacity: 0; }
.in .sch-scan {
  opacity: 0.85;
  animation: schScan 7.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes schScan {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(238px); }
  100% { transform: translateY(0); }
}
.in .sch-jp { opacity: 1; animation: pulse 3.6s ease-in-out infinite; }
.in .sch-jp.d1 { animation-delay: 0.35s; }
.in .sch-jp.d2 { animation-delay: 0.7s; }
.in .sch-jp.d3 { animation-delay: 1.05s; }
.in .sch-jp.d4 { animation-delay: 1.4s; }

/* =====================================================================
   03 · THE DELIVERY STANDARD — full-bleed band, engraved spec plate
   ===================================================================== */
.p-std {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #06080d;
  scroll-margin-top: 61px;
}
.p-std__inner {
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.p-std__head { position: sticky; top: 96px; }
.p-std__head .p-disp {
  margin: 0 0 20px;
  font-size: clamp(22px, 3vw, 34px);
  text-wrap: balance;
}
.p-std__head p {
  margin: 0; max-width: 44ch;
  font-size: 13.5px; line-height: 1.75;
  letter-spacing: 0.02em; color: var(--txt-2);
}
.p-std__plate {
  position: relative;
  background: #0a0d12;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  padding: 14px 34px 24px;
}
.p-std__plate .p-ref { position: absolute; top: 14px; right: 24px; }
/* registration marks on the two un-notched corners — a machined plate */
.p-std__plate .cm {
  position: absolute;
  font: 400 12px var(--f-mono); line-height: 1; color: var(--txt-4);
}
.p-std__plate .cm--tl { top: 10px; left: 12px; }
.p-std__plate .cm--br { bottom: 8px; right: 14px; }
.p-std__row {
  position: relative;
  display: grid;
  grid-template-columns: 52px 168px 1fr;
  gap: 20px;
  padding: 20px 2px 18px;
  border-top: 1px solid var(--line);
}
.p-std__row:first-of-type { border-top: 0; margin-top: 22px; }
.p-std__row i {
  font: 400 9.5px var(--f-mono); font-style: normal;
  letter-spacing: 0.18em; color: var(--txt-4);
  padding-top: 3px;
}
.p-std__row h3 {
  margin: 0;
  font: 400 12.5px var(--f-disp); letter-spacing: 0.08em;
  color: var(--txt); text-transform: uppercase;
}
.p-std__row p {
  margin: 0;
  font-size: 13px; line-height: 1.68;
  letter-spacing: 0.02em; color: var(--txt-2);
}
/* signature S1 — a 1px light travels the row's hairline on hover */
.p-std__row::before {
  content: '';
  position: absolute; top: -1px; left: 0;
  width: 130px; height: 1px;
  background: linear-gradient(to right, transparent, #edf1f5, transparent);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) {
  .p-std__row:hover::before { animation: rowCurrent 0.7s ease-out 1; }
}

/* =====================================================================
   04 · THE REGISTER — machined index rows + discipline filters
   ===================================================================== */
.p-register { max-width: 1180px; margin: 0 auto; scroll-margin-top: 40px; }

/* filter rail — notched mono chips; filtering dims, never reflows */
.p-filterbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
}
.p-filter {
  appearance: none; cursor: pointer;
  background: rgba(10, 13, 18, 0.4);
  border: 1px solid var(--line);
  color: var(--txt-3);
  font: 500 9px var(--f-mono); letter-spacing: 0.18em;
  padding: 8px 13px;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.p-filter:hover { color: var(--txt); border-color: #3a4553; }
.p-filter.is-on { background: var(--hi); border-color: var(--hi); color: #05070b; }
.p-filter:focus-visible { clip-path: none; outline: 2px solid var(--hi); outline-offset: 2px; }
.p-filterbar__count {
  margin-left: auto;
  font: 400 9px var(--f-mono); letter-spacing: 0.18em; color: var(--txt-4);
  font-variant-numeric: tabular-nums;
}

.p-reg { border-bottom: 1px solid var(--line); }
.p-reg__head, .p-reg__row {
  display: grid;
  grid-template-columns: 74px 1.2fr 1fr 2fr 54px 116px;
  gap: 20px;
  align-items: baseline;
  padding: 17px 12px;
}
.p-reg__head {
  padding-top: 0; padding-bottom: 12px;
  font: 500 9px var(--f-mono); letter-spacing: 0.2em; color: var(--txt-4);
}
.p-reg__row {
  position: relative;
  border-top: 1px solid var(--line);
  transition: background-color 0.3s ease, opacity 0.6s ease;
}
/* signature S1 — a 1px light travels the row's hairline on arrival */
.p-reg__row::before {
  content: '';
  position: absolute; top: -1px; left: 0;
  width: 130px; height: 1px;
  background: linear-gradient(to right, transparent, #edf1f5, transparent);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) {
  .p-reg__row:hover { background: #0b0e14; }
  .p-reg__row:hover::before { animation: rowCurrent 0.7s ease-out 1; }
}
@keyframes rowCurrent {
  0%   { opacity: 0; transform: translateX(0); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(min(78vw, 1050px)); }
}
.p-reg__ref { font: 400 10px var(--f-mono); letter-spacing: 0.14em; color: var(--txt-4); }
.p-reg__name {
  font-family: var(--f-disp); font-size: 13.5px;
  letter-spacing: 0.05em; color: var(--txt);
}
.p-reg__class { font: 500 9.5px var(--f-mono); letter-spacing: 0.16em; color: var(--txt-3); }
.p-reg__note { font-size: 12.5px; line-height: 1.6; letter-spacing: 0.02em; color: var(--txt-2); }
.p-reg__year {
  font: 400 10px var(--f-mono); letter-spacing: 0.1em; color: var(--txt-4);
  font-variant-numeric: tabular-nums;
}
.p-reg__status {
  display: inline-flex; align-items: center; gap: 8px;
  justify-self: end;
  font: 500 9.5px var(--f-mono); letter-spacing: 0.18em; color: var(--txt-2);
}
.p-reg__status i {
  width: 4px; height: 4px; background: var(--hi);
  box-shadow: 0 0 6px rgba(237, 241, 245, 0.7);
}
.p-reg__row.is-active .p-reg__status i { animation: pulse 3.6s ease-in-out infinite; }
.p-reg__row.is-sealed .p-reg__name,
.p-reg__row.is-sealed .p-reg__note { color: var(--txt-3); }
.p-reg__row.is-sealed .p-reg__status { color: var(--txt-4); }
.p-reg__row.is-sealed .p-reg__status i {
  background: transparent; border: 1px solid var(--txt-3); box-shadow: none;
}
/* filtered out — rows recede into the dark, the index never reflows.
   The second selector outranks the cascade-settled reveal rule
   (html.js [data-reveal].in[data-cascade] > *), which pins opacity: 1. */
.p-reg__row.is-dim,
html.js [data-reveal].in[data-cascade] > .p-reg__row.is-dim { opacity: 0.16; }

/* the rule of the room — the register's closing clause */
.p-register .p-rule { display: flex; justify-content: center; margin-top: clamp(64px, 9vh, 100px); }
.p-rule__panel {
  position: relative;
  width: min(660px, 100%);
  background: #0a0d12;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  padding: 40px 44px 38px;
}
.p-rule__panel .p-ref { position: absolute; top: 14px; right: 24px; }
.p-rule__line { margin: 0 0 18px; font-size: clamp(20px, 3vw, 30px); }
.p-rule__body {
  margin: 0; max-width: 54ch;
  font-size: 13.5px; line-height: 1.75; letter-spacing: 0.02em; color: var(--txt-2);
}

/* =====================================================================
   05 · THE OUTCOMES — four plates, what changed for the client
   ===================================================================== */
.p-outsec { max-width: 1180px; margin: 0 auto; scroll-margin-top: 61px; }
.p-out {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.p-out__card {
  position: relative;
  background: #0a0d12;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  padding: 26px 24px 24px;
  transition: border-color 0.45s ease;
}
.p-out__card:hover { border-color: #2a3340; }
.p-out__card .p-ref { position: absolute; top: 14px; right: 20px; }
.p-out__card h3 {
  margin: 0 0 14px;
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 21px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--txt);
}
.p-out__card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: #a7b0bc;
}
.p-out__k {
  margin: 18px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font: 500 9.5px var(--f-mono) !important;
  letter-spacing: 0.2em !important;
  color: var(--txt-3) !important;
}
.p-out__foot {
  margin: 26px 0 0;
  font: 400 8.5px var(--f-mono);
  letter-spacing: 0.22em;
  color: var(--txt-4);
}

/* =====================================================================
   06 · THE FOUNDER — one name on the work
   ===================================================================== */
.p-founder { max-width: 1180px; margin: 0 auto; }
.p-founder__panel {
  position: relative;
  background: #0a0d12;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  padding: clamp(36px, 6vh, 60px) clamp(24px, 5vw, 64px);
}
.p-founder__panel .p-ref { position: absolute; top: 14px; right: 24px; }
.p-founder__line { margin: 0 0 18px; font-size: clamp(20px, 3vw, 32px); }
.p-founder__body {
  margin: 0;
  max-width: 640px;
  font-size: clamp(13.5px, 1.2vw, 15px);
  line-height: 1.8;
  color: #a7b0bc;
}
.p-founder__sig {
  margin: 26px 0 0;
  font: 500 10px var(--f-mono);
  letter-spacing: 0.22em;
  color: var(--txt-3);
}

/* =====================================================================
   06 · THE COMMISSION — the reserved next entry, one gate, one call
   ===================================================================== */
.p-comm { display: flex; justify-content: center; }
.p-comm__panel {
  position: relative;
  width: min(880px, 100%);
  text-align: center;
  background: #0a0d12;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  padding: clamp(48px, 8vh, 76px) clamp(24px, 5vw, 64px);
}
.p-comm__panel .p-ref { position: absolute; top: 14px; right: 24px; }
.p-comm__panel h2 { margin: 0 0 10px; font-size: clamp(24px, 4.2vw, 42px); }
/* the ghost row — the register's next line, already ruled, still empty */
.p-next {
  display: grid;
  grid-template-columns: 64px 1.4fr 1fr 120px;
  gap: 16px;
  align-items: baseline;
  margin: 36px 0 30px;
  padding: 16px 6px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.p-next__ref { font: 400 10px var(--f-mono); letter-spacing: 0.14em; color: var(--txt-4); }
.p-next__name { font-family: var(--f-disp); font-size: 13.5px; letter-spacing: 0.05em; color: var(--txt-3); }
.p-next__class { font: 500 9.5px var(--f-mono); letter-spacing: 0.16em; color: var(--txt-4); }
.p-next__status {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 9.5px var(--f-mono); letter-spacing: 0.18em; color: var(--txt-2);
}
.p-next__status i {
  width: 4px; height: 4px;
  background: transparent; border: 1px solid var(--txt-2);
  animation: pulse 3.6s ease-in-out infinite;
}
.p-comm__sub {
  margin: 0 0 34px;
  font: 400 10px var(--f-mono); letter-spacing: 0.22em; color: var(--txt-3);
}

/* TERMINUS ------------------------------------------------------------ */
.p-term {
  padding: clamp(56px, 9vh, 96px) 20px 110px;
  text-align: center;
}
.p-term p {
  margin: 0;
  font: 400 8.5px var(--f-mono); letter-spacing: 0.24em; color: var(--txt-4);
}

/* =====================================================================
   Scroll reveals — gated under html.js so a dead controller can never
   trap copy; projects.js adds .in and the 45ms cascade delays (S4)
   ===================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(9px);
  transition:
    opacity 1.15s ease,
    transform 1.15s var(--house),
    filter 1.15s ease;
}
html.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
html.js [data-cascade] > * {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 0.9s ease,
    transform 0.9s var(--house),
    filter 0.9s ease;
}
html.js [data-reveal].in[data-cascade] > *,
html.js [data-reveal].in [data-cascade] > * {
  opacity: 1; transform: none; filter: none;
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 980px) {
  .p-std__inner { grid-template-columns: 1fr; }
  .p-std__head { position: static; }
}
@media (max-width: 900px) {
  .p-doct { grid-template-columns: 1fr; }
  .p-doct__right { border-left: 0; padding-left: 0; }
  .p-dossier { grid-template-columns: 1fr; gap: 30px; }
  .p-dossier--flip .p-dossier__text { order: 1; }
  .p-dossier--flip .p-dossier__media { order: 2; }
  .p-out { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .p-reg__head { display: none; }
  .p-reg__year { display: none; }
  .p-reg__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'ref    status'
      'name   name'
      'class  class'
      'note   note';
    gap: 7px 16px;
    padding: 18px 8px;
  }
  .p-reg__ref { grid-area: ref; }
  .p-reg__name { grid-area: name; font-size: 15px; }
  .p-reg__class { grid-area: class; }
  .p-reg__note { grid-area: note; }
  .p-reg__status { grid-area: status; }
  .p-filterbar__count { flex-basis: 100%; margin-left: 0; order: 9; }
}
@media (max-width: 680px) {
  .p-std__row { grid-template-columns: 52px 1fr; }
  .p-std__row p { grid-column: 1 / -1; }

  /* The robot and orb own the mobile frame; the complete project copy
     continues immediately below the hero in the document. */
  .p-hero__card {
    bottom: 64px;
    width: calc(100vw - 40px);
  }
  .p-hero__rule,
  .p-hero__sub,
  .p-hero__cta .btn.ghost,
  .p-cue { display: none; }
  .p-hero__chip { margin-bottom: 10px; font-size: 8.5px; }
  .p-hero__title {
    margin-bottom: 16px;
    font-size: clamp(21px, 6.4vw, 28px);
    line-height: 1.2;
  }
  .p-hero__cta { gap: 0; }
}
@media (max-width: 620px) {
  /* dossier metrics fold 2×2 — no orphan cell, borders follow the grid */
  .p-dossier__metrics { display: grid; grid-template-columns: 1fr 1fr; }
  .p-dossier__metric { padding: 14px 0 12px; }
  .p-dossier__metric + .p-dossier__metric { padding-left: 0; border-left: 0; }
  .p-dossier__metric:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
  .p-dossier__metric:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .p-hero__card { bottom: 64px; }
  .p-cue { display: none; }
}
@media (max-height: 620px) and (min-width: 681px) {
  .p-hero__card {
    bottom: 58px;
    width: min(430px, 34vw);
  }
  .p-hero__chip { margin-bottom: 9px; font-size: 8.5px; }
  .p-hero__rule { width: 58px; margin-bottom: 12px; }
  .p-hero__title { margin-bottom: 11px; font-size: clamp(21px, 2.5vw, 29px); }
  .p-hero__sub { margin-bottom: 14px; font-size: 11.5px; line-height: 1.45; }
  .p-hero__cta { gap: 8px; }
  .p-cue { display: none; }
}
@media (max-height: 620px) and (max-width: 680px) {
  .p-hero__card { bottom: 52px; }
}
@media (max-width: 560px) {
  .p-next {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'ref    status'
      'name   name'
      'class  class';
    gap: 8px 16px;
  }
  .p-next__ref { grid-area: ref; }
  .p-next__name { grid-area: name; }
  .p-next__class { grid-area: class; }
  .p-next__status { grid-area: status; }
}

/* =====================================================================
   Reduced motion — every reveal is instant, nothing loops, no scene
   (the module itself refuses to boot; the poster carries the hero)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-cascade] > *,
  html.js .p-hero__card > * {
    opacity: 1 !important; transform: none !important; filter: none !important;
    transition: none !important;
  }
  .p-cue i::after,
  .in .sch-feed, .in .sch-core,
  .in .sch-scan, .in .sch-jp,
  .p-reg__row.is-active .p-reg__status i,
  .p-dossier__metric b.word.live i,
  .p-next__status i,
  .p-next__status i {
    animation: none !important;
  }
  .in .sch-feed, .in .sch-scan { opacity: 0; }
  .in .sch-core, .in .sch-jp { opacity: 1; }
  .p-reg__row { transition: none; }
  .p-hero__canvas, .p-hero__poster { transition: none; }

  /* v8 schematics — every loop freezes at its final, legible state:
     screens lit, arcs drawn, orbits parked, systems docked */
  .in .ss-tile, .in .ss-up, .in .ss-ai, .in .ss-ok, .in .ss-plan,
  .in .ss-ring, .in .ss-ray, .in .ss-f, .in .ss-x, .in .ss-re,
  .in .ss-cap, .in .ss-hand,
  .in .sch-ac-o1, .in .sch-ac-o2, .in .sch-ac-o3,
  .in .sch-ac-a, .in .sch-ac-hot, .in .sch-ac-sig,
  .in .sch-ac-breath, .in .sch-ac-esc, .in .sch-ac-human,
  .in .sch-as-b, .in .sch-as-curve {
    animation: none !important;
  }
  .in :is(.ss-up, .ss-plan, .ss-ray, .ss-ring, .ss-x, .ss-re, .ss-ai), .in .sch-ac-sig { opacity: 0 !important; }
  .in .ss-f { opacity: 0.75; }
  .in :is(.ss-tile, .ss-ok) { opacity: 0.9; }
  .in .ss-cap { opacity: 0.85; }
  .in :is(.sch-ac-a, .sch-ac-hot, .sch-ac-human) { opacity: 1; }
  .in .sch-ac-esc { opacity: 0.9; stroke-dashoffset: 0; }
  .in .sch-ac-breath { opacity: 0.5; }
  .in .sch-as-b { opacity: 1; transform: none; }
  .in .sch-as-curve { opacity: 0.85; stroke-dashoffset: 0; }
}

/* =====================================================================
   ===== v8 ============================================================
   MONOLITH v8.0 — three bespoke schematics join the dossier row:

     NETWORK MAP   (WRK-10) — street screens wake in waves out from
                              screen 001; one campaign pulse rides the
                              streets; the drawn arc reaches VAT · MIN
     CONSTELLATION (WRK-12) — seven agents in slow orbit around one
                              person; signals draw inward in sequence;
                              one escalation reaches the HUMAN node
     ACCRETION     (WRK-06) — eight systems dock onto one spine, each
                              lights its connector and files a tick;
                              after the eighth, the curve leaves

   Same register as the v6 blueprints: graphite base geometry, lit
   #edf1f5 overlays, CSS-only motion gated under the dossier's .in
   reveal. Draws 1.2–2.6s, loops 13–16s, damped throughout. Reduced
   motion freezes everything legible (see the block above).
   ===================================================================== */

/* v8 register atoms — one step finer than .sch-stroke ----------------- */
.sch-fine  { fill: none; stroke: #232b37; stroke-width: 1; stroke-linecap: square; }
.sch-orb   { fill: none; stroke: #232b37; stroke-width: 1; stroke-dasharray: 2 7; }
.sch-berth { fill: none; stroke: #232b37; stroke-width: 1; stroke-dasharray: 3 4; }

/* ---- WRK-10 · PHONE TO BILLBOARDS ----------------------------------
   13 s loop: the tile lights in the phone, rides to the gate, passes
   the AI flash and the human tick, one plan reaches the clock, four
   rays dispatch AT ONCE and four faces light AT ONCE. Mid-loop one
   feed is cut (×) while its face keeps playing in step; the ring
   re-aligns it. Faces share one un-delayed animation — lockstep is
   the point. */
.ss-tile { fill: #edf1f5; stroke: none; }
.in .ss-tile { animation: ssTile 13s linear infinite; }
@keyframes ssTile {
  0%, 2% { opacity: 0; }
  5% { opacity: 0.95; }
  12% { opacity: 0.95; }
  16%, 100% { opacity: 0.35; }
}
.in .ss-up { stroke-dasharray: 14 86; animation: ssRun 13s linear infinite; }
@keyframes ssRun {
  0%, 8% { stroke-dashoffset: 14; opacity: 0; }
  9% { opacity: 0.95; }
  14% { stroke-dashoffset: -100; opacity: 0.95; }
  15%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
.in .ss-ai { animation: ssAi 13s linear infinite; }
@keyframes ssAi {
  0%, 14% { opacity: 0; }
  15.5% { opacity: 0.95; }
  17% { opacity: 0.25; }
  18.5% { opacity: 0.95; }
  20% { opacity: 0.25; }
  21.5% { opacity: 0.95; }
  26% { opacity: 0.95; }
  30%, 100% { opacity: 0; }
}
.in .ss-ok { animation: ssOk 13s linear infinite; }
@keyframes ssOk {
  0%, 22% { opacity: 0; }
  24% { opacity: 1; }
  44% { opacity: 1; }
  48%, 100% { opacity: 0.3; }
}
.in .ss-plan { stroke-dasharray: 12 88; animation: ssPlan 13s linear infinite; }
@keyframes ssPlan {
  0%, 28% { stroke-dashoffset: 12; opacity: 0; }
  29% { opacity: 0.95; }
  33% { stroke-dashoffset: -100; opacity: 0.95; }
  34%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
.in .ss-ring { stroke-dasharray: 100 100; animation: ssRing 13s ease-in-out infinite; }
@keyframes ssRing {
  0%, 33% { stroke-dashoffset: 100; opacity: 0; }
  34% { opacity: 0.9; }
  38% { stroke-dashoffset: 0; opacity: 0.9; }
  42%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
/* four rays, one window, zero delay between them */
.in .ss-ray { stroke-dasharray: 16 84; animation: ssRay 13s linear infinite; }
@keyframes ssRay {
  0%, 38% { stroke-dashoffset: 16; opacity: 0; }
  39% { opacity: 0.95; }
  44% { stroke-dashoffset: -100; opacity: 0.95; }
  45%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
/* four faces, one shared clock: on together, breathe together */
.ss-f { fill: #edf1f5; stroke: none; }
.in .ss-f { animation: ssFace 13s linear infinite; }
@keyframes ssFace {
  0%, 44% { opacity: 0; }
  46% { opacity: 0.9; }
  59% { opacity: 0.9; }
  61% { opacity: 0.5; }
  63% { opacity: 0.9; }
  79% { opacity: 0.9; }
  81% { opacity: 0.5; }
  83% { opacity: 0.9; }
  96% { opacity: 0.9; }
  100% { opacity: 0; }
}
/* the cut — one feed drops, its screen never blinks */
.in .ss-x { animation: ssX 13s linear infinite; }
@keyframes ssX {
  0%, 56% { opacity: 0; }
  57.5% { opacity: 0.9; }
  72% { opacity: 0.9; }
  74%, 100% { opacity: 0; }
}
.in .ss-re { stroke-dasharray: 100 100; animation: ssRe 13s ease-in-out infinite; }
@keyframes ssRe {
  0%, 74% { stroke-dashoffset: 100; opacity: 0; }
  75% { opacity: 0.9; }
  80% { stroke-dashoffset: 0; opacity: 0.9; }
  86%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.ss-cap { fill: #cdd5de; stroke: none; }
.in .ss-cap { animation: ssCap 13s linear infinite; }
@keyframes ssCap {
  0%, 46% { opacity: 0; }
  49% { opacity: 0.85; }
  95% { opacity: 0.85; }
  100%, 0% { opacity: 0; }
}
/* the clock hand turns, always */
.ss-hand { transform-box: view-box; transform-origin: 198px 120px; }
.in .ss-hand { animation: ssHand 13s linear infinite; }
@keyframes ssHand { to { transform: rotate(360deg); } }

/* ---- WRK-12 · AGENT CONSTELLATION -----------------------------------
   Three orbit groups turn at 26 / 34 / 40s (middle ring counter-wise);
   signal lines live inside the groups so they stay attached. */
.sch-ac-o { transform-box: view-box; transform-origin: 178px 128px; }
.in .sch-ac-o1 { animation: acSpin 26s linear infinite; }
.in .sch-ac-o2 { animation: acSpin 34s linear infinite reverse; }
.in .sch-ac-o3 { animation: acSpin 40s linear infinite; }
@keyframes acSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* agents — lit dots breathing on the house pulse, offset per ring */
.sch-ac-a { fill: #edf1f5; stroke: none; opacity: 0; }
.in .sch-ac-a { opacity: 1; animation: pulse 5.4s ease-in-out infinite; }
.in .sch-ac-o2 .sch-ac-a { animation-delay: 1.8s; }
.in .sch-ac-o3 .sch-ac-a { animation-delay: 3.6s; }
/* signals draw centre → agent, one at a time across the 14s loop */
.in .sch-ac-sig {
  stroke-width: 1;
  stroke-dasharray: 100 100;
  animation: acSig 14s ease-in-out infinite;
}
.in .sch-ac-sig.g1 { animation-delay: 0.4s; }
.in .sch-ac-sig.g2 { animation-delay: 2s; }
.in .sch-ac-sig.g3 { animation-delay: 3.6s; }
.in .sch-ac-sig.g4 { animation-delay: 5.2s; }
.in .sch-ac-sig.g5 { animation-delay: 6.8s; }
.in .sch-ac-sig.g6 { animation-delay: 8.4s; }
.in .sch-ac-sig.g7 { animation-delay: 10s; }
@keyframes acSig {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  2%   { opacity: 0.8; }
  10%  { stroke-dashoffset: 0; opacity: 0.8; }
  17%  { opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
/* the person breathes; the seventh agent brightens; HUMAN decides */
.in .sch-ac-breath { animation: acBreath 6s ease-in-out infinite; }
@keyframes acBreath { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.75; } }
.in .sch-ac-hot { animation: acHot 14s ease-in-out infinite; }
@keyframes acHot {
  0%, 66%  { opacity: 0.35; }
  73%, 95% { opacity: 1; }
  100%     { opacity: 0.35; }
}
.in .sch-ac-esc { stroke-dasharray: 100 100; animation: acEsc 14s ease-in-out infinite; }
@keyframes acEsc {
  0%, 76% { stroke-dashoffset: 100; opacity: 0; }
  79%     { opacity: 0.9; }
  88%     { stroke-dashoffset: 0; opacity: 0.9; }
  97%     { opacity: 0.9; }
  100%    { stroke-dashoffset: 0; opacity: 0; }
}
.in .sch-ac-human { fill: #edf1f5; stroke: none; animation: acHuman 14s ease-in-out infinite; }
@keyframes acHuman {
  0%, 84% { opacity: 0.12; }
  92%     { opacity: 1; }
  100%    { opacity: 0.12; }
}

/* ---- WRK-06 · ACCRETION ---------------------------------------------
   Each group = block + connector + counter tick; they dock as one on a
   16s loop (~1.1s apart), hold the full assembly, reset together. */
.sch-as-b line { stroke-width: 1; }
.sch-as-t { fill: #edf1f5; stroke: none; }
.in .sch-as-b.b1 { animation: asB1 16s ease-out infinite; }
.in .sch-as-b.b2 { animation: asB2 16s ease-out infinite; }
.in .sch-as-b.b3 { animation: asB3 16s ease-out infinite; }
.in .sch-as-b.b4 { animation: asB4 16s ease-out infinite; }
.in .sch-as-b.b5 { animation: asB5 16s ease-out infinite; }
.in .sch-as-b.b6 { animation: asB6 16s ease-out infinite; }
.in .sch-as-b.b7 { animation: asB7 16s ease-out infinite; }
.in .sch-as-b.b8 { animation: asB8 16s ease-out infinite; }
@keyframes asB1 { 0%, 3%  { opacity: 0; transform: translateY(-9px); } 6%  { opacity: 1; transform: none; } 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes asB2 { 0%, 10% { opacity: 0; transform: translateY(-9px); } 13% { opacity: 1; transform: none; } 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes asB3 { 0%, 17% { opacity: 0; transform: translateY(-9px); } 20% { opacity: 1; transform: none; } 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes asB4 { 0%, 24% { opacity: 0; transform: translateY(-9px); } 27% { opacity: 1; transform: none; } 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes asB5 { 0%, 31% { opacity: 0; transform: translateY(-9px); } 34% { opacity: 1; transform: none; } 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes asB6 { 0%, 38% { opacity: 0; transform: translateY(-9px); } 41% { opacity: 1; transform: none; } 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes asB7 { 0%, 45% { opacity: 0; transform: translateY(-9px); } 48% { opacity: 1; transform: none; } 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes asB8 { 0%, 52% { opacity: 0; transform: translateY(-9px); } 55% { opacity: 1; transform: none; } 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
/* after the eighth system seats, the curve leaves the spine */
.in .sch-as-curve { stroke-dasharray: 100 100; animation: asCurve 16s ease-in-out infinite; }
@keyframes asCurve {
  0%, 57%   { stroke-dashoffset: 100; opacity: 0; }
  60%       { opacity: 0.85; }
  74%       { stroke-dashoffset: 0; }
  93%       { stroke-dashoffset: 0; opacity: 0.85; }
  98%, 100% { stroke-dashoffset: 0; opacity: 0; }
}