/* ============================================================
   OZWEBNET — THE DIGITAL FOUNDRY
   design system: obsidian / chrome / paper / one ember note
   ============================================================ */

:root {
  --ink-0: #08080B;
  --ink: #0B0B0F;
  --ink-2: #121318;
  --ink-3: #1A1B21;
  --paper: #ECEAE3;
  --paper-2: #E0DDD3;
  --chrome-hi: #EDEFF2;
  --silver: #C9CDD3;
  --steel: #8B9097;
  --mist: #787D85;
  --ember: #FF5A1F;
  --ember-deep: #B23C0E; /* ember for use on paper: #FF5A1F is only 2.59:1 there */
  --line: rgba(201, 205, 211, 0.13);
  --line-strong: rgba(201, 205, 211, 0.28);
  --line-paper: rgba(11, 11, 15, 0.16);
  --f-display: 'Clash Display', sans-serif;
  --f-body: 'General Sans', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;
  --f-serif: 'Zodiak', serif;
  --gut: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-width: thin; scrollbar-color: var(--ink-3) var(--ink-0); overflow-x: hidden; }
html, body { background: var(--ink); }

body {
  font-family: var(--f-body);
  font-weight: 400;
  color: var(--silver);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: overflow-x:hidden would make body a scroll container and silently
     break position:sticky for everything inside it (the method chart on narrow screens) */
  overflow-x: clip;
}

::selection { background: var(--ember); color: var(--ink-0); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--ink-3); }
::-webkit-scrollbar-track { background: var(--ink-0); }

.mono { font-family: var(--f-mono); font-weight: 400; letter-spacing: 0.14em; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
em { font-family: var(--f-serif); font-style: italic; font-weight: 400; }

/* html.vscroll: virtual scroll container is fixed; body height set by JS */
html.vscroll #site { position: fixed; top: 0; left: 0; width: 100%; will-change: transform; }

/* ============ frame rails ============ */
.frame {
  position: fixed; top: 0; bottom: 0; width: 1px;
  background: var(--line);
  z-index: 40; pointer-events: none;
  mix-blend-mode: difference;
}
.frame-l { left: max(16px, 2vw); }
.frame-r { right: max(16px, 2vw); }
.rail-meter {
  position: fixed; right: max(28px, calc(2vw + 12px)); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  z-index: 40; pointer-events: none;
  mix-blend-mode: difference;
}
.rail-track { width: 1px; height: 120px; background: var(--line-strong); position: relative; margin-right: 2px; }
.rail-fill {
  position: absolute; inset: 0; background: var(--chrome-hi);
  transform-origin: top; transform: scaleY(0);
}
.rail-index { font-size: 10px; color: var(--silver); letter-spacing: 0.24em; }
.rail-index i { font-style: normal; opacity: 0.4; margin: 0 3px; }
.rail-name {
  font-size: 9px; color: var(--silver); letter-spacing: 0.3em;
  writing-mode: vertical-rl;
}

/* ============ nav ============ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gut);
  transition: transform 0.55s var(--ease), opacity 0.4s;
}
#nav::before {
  content: ''; position: absolute; inset: 0 0 -34px;
  background: linear-gradient(to bottom, rgba(8, 8, 11, 0.88) 0%, rgba(8, 8, 11, 0.55) 55%, rgba(8, 8, 11, 0) 100%);
  opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
#nav.scrolled::before { opacity: 1; }
#nav.hidden { transform: translateY(-110%); }
#nav > * { position: relative; }
.nav-brand { display: block; }
.nav-wm { width: 148px; height: 22px; fill: var(--chrome-hi); display: block; transition: fill 0.4s; }
.nav-links { display: flex; gap: clamp(18px, 2.4vw, 40px); font-size: 11px; }
.nav-links a { color: var(--silver); position: relative; padding: 6px 0; transition: color 0.3s; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--chrome-hi); transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav-links a:hover { color: var(--chrome-hi); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-status { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--steel); transition: color 0.4s; }

/* nav over paper sections */
#nav.lite::before {
  background: linear-gradient(to bottom, rgba(236, 234, 227, 0.92) 0%, rgba(236, 234, 227, 0.6) 55%, rgba(236, 234, 227, 0) 100%);
}
#nav.lite .nav-wm { fill: var(--ink); }
#nav.lite .nav-links a { color: rgba(11, 11, 15, 0.75); }
#nav.lite .nav-links a:hover { color: var(--ink); }
#nav.lite .nav-links a::after { background: var(--ink); }
#nav.lite .nav-status { color: rgba(11, 11, 15, 0.6); }
.pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ember);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(255, 90, 31, 0); }
}

/* ============ layout primitives ============ */
.wrap { max-width: 1560px; margin: 0 auto; padding: 0 calc(var(--gut) + 24px); }
.sec { position: relative; }

.sec-head {
  display: flex; align-items: center; gap: 28px;
  margin-bottom: clamp(56px, 8vh, 96px);
}
.sec-label { font-size: 11px; color: var(--steel); letter-spacing: 0.34em; white-space: nowrap; }
.sec-rule { flex: 1; height: 1px; background: var(--line); }
.paper .sec-rule { background: var(--line-paper); }
.sec-index { font-size: 11px; color: var(--mist); letter-spacing: 0.2em; white-space: nowrap; }

/* paper inversion */
.paper { background: var(--paper); color: var(--ink); }
.paper .sec-label { color: rgba(11, 11, 15, 0.55); }
.paper .sec-index { color: rgba(11, 11, 15, 0.6); }

/* reveal primitives */
html.js .rv { opacity: 0; transform: translateY(28px); }
/* Boot watchdog (see the inline script in index.html): if the module boot
   never resolves, drop the curtain and show the page unanimated rather than
   leaving a black screen. */
html.boot-failed #preloader { display: none; }
html.boot-failed .rv { opacity: 1; transform: none; }
html.js .rv.in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
html.js .lnm { display: block; overflow: hidden; }
html.js .lnm .ln { display: inline-block; transform: translateY(115%); }
html.js .rv.in .ln { transform: none; transition: transform 1.1s var(--ease-io); }
html.js .rv.in .lnm:nth-child(2) .ln { transition-delay: 0.09s; }
html.js .rv.in .lnm:nth-child(3) .ln { transition-delay: 0.18s; }

/* ============ preloader ============ */
html.js #preloader {
  position: fixed; inset: 0; z-index: 100; background: var(--ink-0);
  transition: transform 1s var(--ease-io);
}
#preloader.done { transform: translateY(-101%); }
.pl-globe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(38vmin, 280px);
  opacity: 0.85;
}
.pl-globe svg { width: 100%; height: auto; }
.pl-globe path, .pl-globe circle, .pl-globe ellipse {
  fill: none; stroke: var(--steel); stroke-width: 0.8;
}
.pl-boot {
  position: absolute; top: 26px; right: 28px; text-align: right;
  font-size: 10px; color: var(--mist); line-height: 2;
}
.pl-count {
  position: absolute; bottom: 16px; left: 24px;
  font-size: clamp(80px, 16vw, 200px); color: var(--silver);
  letter-spacing: -0.04em; line-height: 1;
}
.pl-brand {
  position: absolute; bottom: 32px; right: 28px;
  font-size: 10px; color: var(--steel);
}
.pl-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.92);
  width: min(17vmin, 124px); height: auto;
  opacity: 0; transition: opacity 0.5s, transform 0.5s var(--ease);
}
#preloader.cast .pl-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#preloader.cast .pl-globe { opacity: 0.25; transition: opacity 0.5s; }

/* ============ cursor ============ */
#cursor { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.c-dot {
  position: absolute; width: 6px; height: 6px; margin: -3px;
  border-radius: 50%; background: var(--chrome-hi);
  mix-blend-mode: difference;
}
.c-ring {
  position: absolute; width: 44px; height: 44px; margin: -22px;
  border: 1px solid rgba(201, 205, 211, 0.5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  mix-blend-mode: difference;
  transition: transform 0.35s var(--ease), background 0.35s, border-color 0.35s;
  transform: scale(0.55);
}
.c-label { font-size: 9px; color: var(--ink-0); opacity: 0; transition: opacity 0.25s; letter-spacing: 0.2em; }
#cursor.big .c-ring { transform: scale(1.6); background: var(--chrome-hi); border-color: transparent; }
#cursor.big .c-label { opacity: 1; }
#cursor.big .c-dot { opacity: 0; }
/* magnifier loupe (section 3): a glass bead carrying a statically-scaled live
   clone of the capability rows — text under it is genuinely magnified 1.15x.
   JS drives position, squash/stretch and clone alignment; see initCursor */
#cursor.drop .c-ring, #cursor.drop .c-dot { opacity: 0; }
#cursor-drop {
  position: fixed; left: 0; top: 0; width: 116px; height: 116px; margin: -58px;
  border-radius: 50%; z-index: 89; pointer-events: none;
  opacity: 0; transition: opacity 0.3s;
}
#cursor-drop.on { opacity: 1; }
.lens-clip {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: var(--ink);
}
.lens-mover { position: absolute; left: 0; top: 0; will-change: transform; }
/* static scale on its own node: text re-rasterizes crisp at 1.15x (a scale on
   the per-frame-animated node would keep the 1x raster and render soft) */
.lens-scaler { transform: scale(1.15); transform-origin: 0 0; }
.lens-shade {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 27%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.10) 15%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 71% 80%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 42%);
  box-shadow:
    inset 5px 9px 16px -8px rgba(255, 255, 255, 0.55),
    inset -8px -12px 22px -12px rgba(255, 255, 255, 0.40),
    inset 0 0 18px rgba(255, 255, 255, 0.06),
    0 16px 36px -12px rgba(8, 8, 11, 0.55);
}
/* clone rows mirror the real row's :hover through .open */
.cap-row.open::before { opacity: 1; }
.cap-row.open .cap-num { color: var(--ember); }
.cap-row.open .cap-name { color: var(--chrome-hi); }
.cap-row.open .cap-arr { transform: rotate(45deg); color: var(--chrome-hi); }

/* molten ember blob (sections 4/5 imagery): metaballs merged by the goo
   filter chase the cursor on staggered springs; a short trail cools to steel */
#goo-cursor {
  position: fixed; left: 0; top: 0; width: 300px; height: 300px; margin: -150px;
  z-index: 89; pointer-events: none;
  filter: url(#goo); will-change: transform;
  opacity: 0; transition: opacity 0.25s;
}
#goo-cursor.on { opacity: 1; }
#goo-cursor .blob {
  position: absolute; left: 150px; top: 150px; border-radius: 50%;
  /* molten body: white-hot pool off-centre cooling to deep ember at the rim —
     the goo blur softens this into a glow instead of erasing it */
  background: radial-gradient(circle at 36% 32%,
    #FFC98F 0%, #FF8A42 30%, #FF5A1F 62%, #E03E0E 100%);
  will-change: transform;
}
#goo-cursor .b0 { width: 38px; height: 38px; margin: -19px; }
#goo-cursor .b1 { width: 26px; height: 26px; margin: -13px; }
#goo-cursor .b2 { width: 20px; height: 20px; margin: -10px; }
#goo-cursor .sat { width: 16px; height: 16px; margin: -8px; }
/* shed droplets live OUTSIDE the goo filter: inside it they'd be clipped by
   the filter region the moment the blob travels on without them */
#goo-trail { position: fixed; inset: 0; z-index: 88; pointer-events: none; }
#goo-trail .tr, #goo-trail .ta {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  background: var(--ember); box-shadow: 0 0 10px rgba(255, 90, 31, 0.35);
  transform: scale(0); will-change: transform;
}
#goo-trail .tr { width: 16px; height: 16px; margin: -8px; }
#goo-trail .ta { width: 9px; height: 9px; margin: -5px; box-shadow: 0 0 7px rgba(255, 90, 31, 0.3); }
/* unfiltered dressing that rides the core: specular + surface texture, and the
   satellite's orbit path (a thin dashed instrument line, shown when idle) */
#goo-fx { position: fixed; inset: 0; z-index: 89; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
#goo-fx.on { opacity: 1; }
.melt-sheen {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px;
  border-radius: 50%; will-change: transform;
  background-image:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.40) 0%, rgba(255, 226, 180, 0.14) 32%, rgba(255, 255, 255, 0) 56%),
    radial-gradient(circle at 72% 80%, rgba(80, 14, 0, 0.38) 0%, rgba(80, 14, 0, 0) 58%),
    var(--melt-noise, none);
}
.orbit-ring {
  position: absolute; left: 0; top: 0; width: 92px; height: 92px; margin: -46px;
  border: 1px dashed rgba(255, 90, 31, 0.55); border-radius: 50%;
  opacity: 0; will-change: transform, opacity;
}

#cursor.hide ~ #cursor-drop, #cursor.hide ~ #goo-cursor, #cursor.hide ~ #goo-trail, #cursor.hide ~ #goo-fx { opacity: 0; }
@media (hover: none) { #cursor-drop, #goo-cursor, #goo-trail, #goo-fx { display: none; } }
.c-dot { transition: opacity 0.2s; }
#cursor.hide { opacity: 0; }
@media (hover: none) { #cursor { display: none; } }

/* ============ hero ============ */
#hero { height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--ink-0); }
#gl-hero { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 8, 11, 0) 55%, rgba(8, 8, 11, 0.85) 100%);
}
.hero-inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: 10vh;
}
.hero-annot {
  position: absolute; top: 13vh; right: calc(var(--gut) + 24px);
  display: flex; flex-direction: column; gap: 7px; text-align: right;
  font-size: 9px; color: var(--mist); letter-spacing: 0.24em;
}
.hero-foot {
  position: absolute; bottom: 5vh;
  left: calc(var(--gut) + 24px); right: calc(var(--gut) + 24px);
}
.hero-kicker {
  font-size: 11px; color: var(--steel); letter-spacing: 0.34em;
  margin-bottom: 3vh;
}
.hero-h {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(58px, 10.5vw, 168px);
  line-height: 0.96; letter-spacing: -0.015em;
  color: var(--chrome-hi); text-transform: uppercase;
}
.hero-h em {
  font-family: var(--f-display); font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2.2px var(--silver);
}
.hero-h .dot-e {
  font-style: normal; color: var(--ember);
  text-shadow: 0 0 22px rgba(255, 90, 31, 0.55), 0 0 60px rgba(255, 90, 31, 0.25);
}
.hero-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px;
}
.hero-sub { max-width: 420px; color: #A6ABB3; font-size: 15px; }
.hero-coords {
  display: flex; flex-direction: column; gap: 6px; text-align: right;
  font-size: 10px; color: var(--mist); letter-spacing: 0.22em;
}
.hc-scroll { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; color: var(--steel); }
.hc-line { display: inline-block; width: 48px; height: 1px; background: var(--steel); position: relative; overflow: hidden; }
.hc-line::after {
  content: ''; position: absolute; inset: 0; background: var(--chrome-hi);
  animation: scrollcue 2.2s var(--ease-io) infinite;
}
@keyframes scrollcue { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* ============ credo ============ */
#credo { padding: clamp(120px, 18vh, 220px) 0; }
.credo-h {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 1.02; letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: clamp(48px, 7vh, 80px);
}
.credo-h em { color: var(--mist); }
.credo-h strong { font-weight: 600; }
.credo-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.credo-body > p { max-width: 560px; font-size: clamp(16px, 1.25vw, 19px); color: #3A3B40; }
.credo-notes { list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 11px; color: rgba(11, 11, 15, 0.6); }
.credo-notes li { border-top: 1px solid var(--line-paper); padding-top: 14px; }

/* ============ capabilities ============ */
#capabilities { padding: clamp(120px, 18vh, 220px) 0 clamp(70px, 10vh, 130px); background: var(--ink); }
.cap-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(40px, 6vw, 110px); }
.cap-rail { position: relative; }
.cap-globe { width: min(100%, 300px); opacity: 0.6; }
.cap-globe svg { width: 100%; height: auto; display: block; }
.cap-globe path { fill: none; stroke: var(--steel); stroke-width: 0.7; }
.cap-rail-note { margin-top: 28px; font-size: 10px; color: var(--mist); line-height: 2.2; letter-spacing: 0.3em; }
.cap-rows { display: flex; flex-direction: column; }
.cap-row {
  position: relative;
  display: grid; grid-template-columns: 72px 1fr auto; gap: 12px 28px;
  align-items: start;
  padding: clamp(28px, 4vh, 44px) 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.cap-row::before {
  content: ''; position: absolute; inset: 0 -100vw;
  background: rgba(201, 205, 211, 0.02);
  opacity: 0; transition: opacity 0.4s;
}
.cap-row:hover::before { opacity: 1; }
.cap-row:last-child { border-bottom: 1px solid var(--line); }
.cap-num { font-size: 12px; color: var(--mist); padding-top: 10px; transition: color 0.3s; }
.cap-row:hover .cap-num { color: var(--ember); }
.cap-name {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(26px, 3vw, 44px); letter-spacing: 0.01em;
  color: var(--silver); transition: color 0.3s;
}
.cap-row:hover .cap-name { color: var(--chrome-hi); }
.cap-arr {
  font-family: var(--f-mono); font-size: 18px; color: var(--mist);
  padding-top: 10px;
  transition: transform 0.5s var(--ease), color 0.3s;
}
.cap-row:hover .cap-arr { transform: rotate(45deg); color: var(--chrome-hi); }
.cap-detail { grid-column: 2; max-height: 0; overflow: hidden; transition: max-height 0.6s var(--ease); }
.cap-row:hover .cap-detail, .cap-row.open .cap-detail { max-height: 220px; }
/* No hover to give: show the copy outright rather than hiding it forever. */
@media (hover: none) {
  .cap-detail { max-height: none; transition: none; }
  .cap-arr { display: none; }
}
.cap-detail p { max-width: 520px; color: var(--steel); font-size: 15px; padding-top: 6px; }
.cap-tags { font-size: 10px; color: var(--mist); letter-spacing: 0.22em; padding-top: 12px; }

/* ============ works ============ */
#works { padding: clamp(90px, 13vh, 160px) 0 60px; }
.ledger {
  display: flex; align-items: center; gap: 18px;
  font-size: 10px; color: var(--mist); letter-spacing: 0.26em;
  margin: -40px 0 clamp(56px, 9vh, 100px);
  white-space: nowrap; flex-wrap: wrap;
}
.ledger i { flex: 1; min-width: 40px; height: 1px; background: var(--line); }
.work {
  position: relative;
  display: grid; gap: clamp(24px, 3vw, 56px);
  margin-bottom: clamp(70px, 11vh, 130px);
  align-items: end;
}
.work[data-side="l"] { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.work[data-side="r"] { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.work[data-side="r"] .work-fig { order: 2; }
.work[data-side="r"] .work-meta { padding-bottom: clamp(30px, 6vh, 80px); }
.work[data-side="l"] .work-meta { padding-bottom: clamp(10px, 3vh, 40px); }
.work-fig { position: relative; z-index: 1; }
.work-media {
  aspect-ratio: 3 / 2; background: var(--ink-2); overflow: hidden; position: relative;
}
.work-media canvas, .work-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.work-media::after {
  content: ''; position: absolute; inset: 55% 0 0;
  background: linear-gradient(to bottom, rgba(8, 8, 11, 0) 0%, rgba(8, 8, 11, 0.78) 100%);
  pointer-events: none;
}
/* ---- the pattern room: plates that pour ---- */
.room-h {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(38px, 5vw, 76px); line-height: 1.04;
  color: var(--chrome-hi); letter-spacing: -0.01em;
  margin-bottom: clamp(20px, 3vh, 32px);
}
.room-h em { color: var(--silver); }
.room-lede {
  max-width: 60ch; color: var(--steel);
  font-size: clamp(15px, 1.15vw, 18px);
  margin-bottom: clamp(44px, 7vh, 84px);
}
/* the plate rests as a drawing and pours on hover — see js/gl-hover.js */
.pattern .work-media { cursor: none; }
.pour-hint {
  display: block; margin-top: 12px;
  font-size: 9px; color: var(--mist); letter-spacing: 0.26em;
  transition: color 0.4s;
}
.pattern:hover .pour-hint { color: var(--steel); }
@media (hover: none) { .pour-hint { display: none; } }
.work-title .wt-svc {
  display: block; margin-top: 10px;
  font-family: var(--f-mono); font-weight: 400;
  font-size: 11px; letter-spacing: 0.26em; color: var(--ember);
  text-transform: uppercase;
}
.spec { margin: 22px 0 26px; border-top: 1px solid var(--line); }
.spec > div {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.spec dt { font-size: 9px; color: var(--mist); letter-spacing: 0.24em; padding-top: 2px; }
.spec dd { font-size: 10.5px; color: var(--silver); letter-spacing: 0.12em; line-height: 1.7; }
.pattern-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.26em; color: var(--chrome-hi);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 7px;
  transition: color 0.3s, border-color 0.3s;
}
.pattern-cta i { font-style: normal; transition: transform 0.4s var(--ease); }
.pattern-cta:hover { color: var(--ember); border-color: var(--ember); }
.pattern-cta:hover i { transform: translateX(6px); }
.room-foot {
  border-top: 1px solid var(--line); padding-top: 22px;
  font-size: 10px; color: var(--mist); letter-spacing: 0.24em; line-height: 2;
}

/* ---- witness marks: the page as its own evidence ---- */
.wit-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  margin-bottom: clamp(40px, 6vh, 72px);
}
.wit {
  border: 1px solid var(--line); background: rgba(18, 19, 24, 0.45);
  padding: clamp(18px, 2vw, 30px);
  display: flex; flex-direction: column; gap: 16px;
  transition: border-color 0.4s;
}
.wit:hover { border-color: var(--line-strong); }
.wit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.wit-id { font-size: 11px; color: var(--ember); letter-spacing: 0.3em; }
.wit-status {
  font-size: 9px; color: var(--mist); letter-spacing: 0.2em;
  display: inline-flex; align-items: center; gap: 8px;
}
.wit-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--ember); flex: none; animation: pulse 2.4s infinite; }
.wit-trace { width: 100%; height: 92px; display: block; }
.wit-val {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: clamp(30px, 3vw, 46px); color: var(--chrome-hi);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1;
}
.wit-val.big { padding: 14px 0 4px; }
.wit-val small { font-size: 0.42em; color: var(--steel); letter-spacing: 0; }
.wit-val .wit-sub {
  flex-basis: 100%; font-size: 9px; color: var(--mist);
  letter-spacing: 0.22em; padding-top: 10px;
}
.wit-assay { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 2px; }
.wit-assay span { font-size: 10px; color: var(--mist); letter-spacing: 0.22em; }
.wit-assay b {
  font-weight: 400; font-size: 26px; color: var(--chrome-hi);
  letter-spacing: -0.02em; margin-right: 10px;
  font-variant-numeric: tabular-nums;
}
.wit-mods { list-style: none; display: flex; flex-direction: column; gap: 7px; padding: 8px 0 2px; }
.wit-mods li {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 10px; color: var(--steel); letter-spacing: 0.14em;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.wit-mods b { font-weight: 400; color: var(--silver); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wit-h {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(19px, 1.7vw, 26px); color: var(--chrome-hi);
  margin-top: auto;
}
.wit-h .wit-svc {
  display: block; margin-top: 7px;
  font-family: var(--f-mono); font-weight: 400;
  font-size: 10px; letter-spacing: 0.2em; color: var(--mist);
}
.wit-cap { font-size: 13.5px; color: #A6ABB3; }
.wit-cap b { font-weight: 400; color: var(--silver); }
.wit-receipt { font-size: 8.5px; color: var(--mist); letter-spacing: 0.2em; }

/* the strip: hold to lift the casting out of the mould */
.strip {
  display: flex; justify-content: space-between; align-items: center; gap: 34px;
  border: 1px solid var(--line); border-left: 3px solid var(--ember);
  padding: clamp(20px, 2.4vw, 34px);
}
.strip-copy { max-width: 620px; display: flex; flex-direction: column; gap: 10px; }
.strip-copy .wit-h { margin-top: 0; }
.strip-lever {
  position: relative; overflow: hidden; flex: none;
  appearance: none; background: none; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 3px;
  padding: 20px 30px; color: var(--chrome-hi);
  font-size: 10.5px; letter-spacing: 0.26em;
  transition: color 0.4s, border-color 0.4s, box-shadow 0.5s;
}
.strip-lever .sl-face { position: relative; z-index: 1; }
.strip-lever .sl-fill {
  position: absolute; inset: 0; background: var(--ember);
  transform: translateY(101%); transition: transform 0.9s var(--ease);
}
.strip-lever:hover, .strip-lever:focus-visible {
  border-color: var(--ember); outline: none;
  box-shadow: 0 0 34px rgba(255, 90, 31, 0.22);
}
.strip-lever[aria-pressed="true"] { color: var(--ink-0); border-color: var(--ember); }
.strip-lever[aria-pressed="true"] .sl-fill { transform: none; transition: transform 0.35s var(--ease-io); }

/* ---- construction view: outlines and tags only, never a layout change ---- */
/* Every rule here must leave geometry untouched — the virtual scroll caches every
   section top at boot (see js/main.js). Outlines, filters and absolutely-positioned
   pseudo-elements qualify; borders, padding and display changes do not. */
.xray-grid {
  position: fixed; inset: 0; z-index: 70; pointer-events: none; display: none;
  background:
    linear-gradient(to right, rgba(120, 150, 200, 0.055) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(to bottom, rgba(120, 150, 200, 0.055) 1px, transparent 1px) 0 0 / 8px 8px;
}
html.xray .xray-grid { display: block; }
html.xray #site img, html.xray #site canvas {
  filter: grayscale(1) contrast(0.5) brightness(0.45); opacity: 0.4;
}
html.xray #site .sec { outline: 1px dashed rgba(201, 205, 211, 0.3); outline-offset: -1px; }
html.xray #site .work, html.xray #site .wit, html.xray #site .cap-row,
html.xray #site .work-media, html.xray #site .gates li {
  outline: 1px dashed rgba(120, 150, 200, 0.45); outline-offset: -1px;
}
html.xray .sec[data-idx]::before {
  content: 'SEC ' attr(data-idx) ' — ' attr(data-name);
  position: absolute; top: 0; left: 0; z-index: 71;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.22em;
  color: var(--paper); background: rgba(8, 8, 11, 0.9);
  padding: 5px 9px; pointer-events: none;
}
html.xray [data-molten]::before {
  content: 'WEBGL2 · DATA-MOLTEN · DATA-HOVER-GL';
  position: absolute; top: 8px; left: 8px; z-index: 71;
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.2em;
  color: #FFC98F; background: rgba(8, 8, 11, 0.86);
  padding: 5px 8px; pointer-events: none;
}
html.xray [data-pour]::after {
  content: 'PATTERN — POURS ON HOVER';
  position: absolute; left: 8px; bottom: 8px; z-index: 71; inset-block-start: auto;
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.2em;
  color: var(--ember); background: rgba(8, 8, 11, 0.86);
  padding: 5px 8px; pointer-events: none;
}
html.xray [data-prlx]::before {
  content: 'PARALLAX ' attr(data-prlx);
  position: absolute; top: -18px; right: 0; z-index: 71;
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.2em;
  color: var(--silver); pointer-events: none;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.work-id { font-size: 11px; color: var(--ember); letter-spacing: 0.3em; display: block; margin-bottom: 18px; }
.work-title {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(30px, 3.4vw, 52px); color: var(--chrome-hi);
  letter-spacing: 0; line-height: 1.05; margin-bottom: 18px;
}
.work-desc { color: var(--steel); font-size: 15px; max-width: 380px; margin-bottom: 20px; }
.work-tags { font-size: 10px; color: var(--mist); letter-spacing: 0.2em; }

/* ============ witness marks section shell ============ */
#instruments { padding: 60px 0 clamp(120px, 18vh, 200px); }

/* ============ method — THE ARTIFACT ============ */
/* One part, six plates. The section opens on a paper brief (which is the whole story with JS
   off) and then drops into a full-bleed ink forge that the reader's scroll drives.
   Geometry note: height added to the *held* part of the pin is thermally free — scroll.max and
   pinLen grow together, so `y - held` is pinned at pinStart and the crucible simply freezes for
   the duration (see js/main.js). Only .method-brief is real, unheld height. */
#method { padding: 0; background: var(--ink-0); }

/* ---- the brief: paper, normal flow, and the entire no-JS design ---- */
.method-brief {
  background: var(--paper); color: var(--ink);
  padding: clamp(90px, 13vh, 160px) 0 clamp(70px, 10vh, 120px);
}
.method-brief .sec-rule { background: var(--line-paper); }
.method-brief .sec-label { color: rgba(11, 11, 15, 0.55); }
.method-brief .sec-index { color: rgba(11, 11, 15, 0.6); }
.method-h {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(38px, 5.4vw, 82px); line-height: 1.02; color: var(--ink);
  margin-bottom: clamp(22px, 3vh, 36px);
}
.method-h em { color: rgba(11, 11, 15, 0.45); }
.method-lede {
  font-size: clamp(15px, 1.15vw, 19px); line-height: 1.65; max-width: 46ch;
  color: rgba(11, 11, 15, 0.72); margin-bottom: clamp(48px, 7vh, 84px);
}
.gates {
  list-style: none; display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 2vw, 34px);
  padding-top: clamp(24px, 3.4vh, 40px); border-top: 1px solid var(--line-paper);
}
/* --ember is only 2.59:1 on paper — under AA. --ember-deep is the same fire, darker medium. */
.g-num { font-size: 10px; color: var(--ember-deep); letter-spacing: 0.24em; display: block; margin-bottom: 10px; }
.gates h3 {
  font-family: var(--f-display); font-weight: 500; font-size: clamp(17px, 1.5vw, 24px);
  color: var(--ink); margin-bottom: 8px;
}
.gates p { font-size: 12.5px; color: rgba(11, 11, 15, 0.66); line-height: 1.55; }

/* ---- the forge: full-bleed ink, the centrepiece ---- */
/* svh, not vh: the mobile URL bar must not re-lay-out a 480vh run mid-scroll */
.forge-stage { background: var(--ink-0); position: relative; }
html.js .forge-stage { height: 480svh; }
html.js .forge-panel { height: 100svh; display: flex; flex-direction: column; }
/* the pin is hand-rolled under virtual scroll (html.vscroll #site is position:fixed, which
   makes CSS sticky inert). Touch/native gets the real thing — and it MUST, on mobile. */
html.js:not(.vscroll) .forge-panel { position: sticky; top: 0; }

.forge-frame {
  position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--ink-0);
}
/* the plate sits at the bottom of the frame's stack; every overlay is above it, and the
   struck mark blends against it */
.forge-frame canvas, .forge-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0;
}
.forge-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(to bottom, rgba(8,8,11,0.72) 0%, rgba(8,8,11,0) 26%),
    linear-gradient(to top, rgba(8,8,11,0.78) 0%, rgba(8,8,11,0) 34%);
}
.forge-slug {
  z-index: 3; position: absolute; top: clamp(84px, 10vh, 104px); left: 0; right: 0;
  display: flex; justify-content: space-between; gap: 20px;
  padding: 0 clamp(20px, 4vw, 56px);
  font-size: 9px; letter-spacing: 0.26em; color: var(--steel);
}
#forge-plate { color: var(--silver); }
.forge-word {
  z-index: 3; position: absolute; left: clamp(20px, 4vw, 56px); bottom: clamp(18px, 3vh, 34px);
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(40px, 7vw, 112px); line-height: 1; letter-spacing: -0.02em;
  color: var(--chrome-hi); text-transform: uppercase;
  text-shadow: 0 4px 40px rgba(8, 8, 11, 0.7);
}
.forge-word.fail { color: var(--ember); }

/* ---- the instrument bar ---- */
.forge-bar {
  position: relative; flex: none;
  background: var(--ink-0); border-top: 1px solid var(--line-strong);
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(14px, 2vh, 22px) clamp(20px, 4vw, 56px) clamp(16px, 2.2vh, 24px);
}
.forge-gates { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(8px, 1.4vw, 22px); }
/* every gate is on screen at all times, at full contrast. Nothing is ever opacity-faded. */
.forge-gate {
  appearance: none; background: none; border: 0; padding: 0 0 0 12px; text-align: left;
  border-left: 1px solid var(--line); cursor: pointer; color: inherit;
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color 0.4s;
}
.forge-gate:hover, .forge-gate:focus-visible { border-left-color: var(--silver); outline: none; }
.forge-gate .fg-n { font-size: 9px; letter-spacing: 0.24em; color: var(--steel); font-family: var(--f-mono); }
.forge-gate .fg-name {
  font-family: var(--f-display); font-weight: 500; font-size: clamp(13px, 1.05vw, 17px);
  color: var(--silver); transition: color 0.4s;
}
.forge-gate .fg-chip {
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.18em;
  color: var(--mist); white-space: nowrap;
}
.forge-gate.on { border-left-color: var(--ember); }
.forge-gate.on .fg-n { color: var(--ember); }
.forge-gate.on .fg-name { color: var(--chrome-hi); }
.forge-gate.pass .fg-chip { color: var(--silver); }
.forge-gate.fail .fg-chip { color: var(--ember); }

.forge-read { display: flex; justify-content: space-between; gap: clamp(10px, 1.6vw, 26px); }
.forge-read div { display: flex; flex-direction: column; gap: 6px; }
.forge-read dt { font-size: 9px; letter-spacing: 0.24em; color: var(--mist); }
.forge-read dd {
  font-size: 13px; letter-spacing: 0.04em; color: var(--silver);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#run-temp { color: var(--ember); }
.forge-prog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line);
}
.forge-prog i {
  display: block; height: 100%; background: var(--chrome-hi);
  transform: scaleX(0); transform-origin: left;
}

/* ---- the plates: the JS-off / reduced-motion design ---- */
.forge-plates { display: none; }
html:not(.js) .forge-panel { display: none; }
html:not(.js) .forge-plates,
.forge-stage.plates .forge-plates { display: block; padding: clamp(40px, 7vh, 90px) var(--gut); }
.forge-stage.plates .forge-panel { display: none; }
.forge-plates figure { max-width: 1180px; margin: 0 auto clamp(30px, 5vh, 60px); }
.forge-plates img { width: 100%; height: auto; }
.forge-plates figcaption {
  font-size: 9px; letter-spacing: 0.26em; color: var(--steel);
  padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line);
}

@media (max-height: 820px) {
  .forge-word { font-size: clamp(34px, 5vw, 64px); }
}

/* ============ origin ============ */
#origin { position: relative; padding: clamp(160px, 24vh, 280px) 0; overflow: hidden; background: var(--ink-0); }
.origin-bg { position: absolute; inset: -10% 0; z-index: 0; }
.origin-bg img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.95;
  filter: brightness(1.18) contrast(1.04);
}
.origin-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8, 8, 11, 0.85) 0%, rgba(8, 8, 11, 0.55) 34%, rgba(8, 8, 11, 0.06) 58%, rgba(8, 8, 11, 0.35) 100%),
    linear-gradient(to bottom, var(--ink-0) 0%, rgba(8, 8, 11, 0) 30%, rgba(8, 8, 11, 0.45) 100%);
}
.origin-inner { position: relative; z-index: 1; }
.origin-h {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(44px, 7vw, 110px); line-height: 1;
  color: var(--chrome-hi); letter-spacing: -0.01em;
  margin-bottom: clamp(40px, 7vh, 72px);
}
.origin-h em { color: var(--silver); }
.origin-body { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.origin-body p { max-width: 480px; color: var(--silver); font-size: clamp(15px, 1.15vw, 18px); text-shadow: 0 1px 14px rgba(8, 8, 11, 0.85); }
.origin-stamp { display: flex; align-items: center; gap: 20px; }
.origin-stamp .seal {
  display: flex; align-items: center; justify-content: center;
  width: 108px; height: 108px; border-radius: 50%;
  border: 1px solid rgba(201, 205, 211, 0.3);
  box-shadow: inset 0 0 0 3px rgba(8, 8, 11, 0.6);
}
.origin-stamp img { width: 64px; height: auto; filter: grayscale(1) brightness(1.05); }
.origin-stamp span.mono { font-size: 10px; color: #A6ABB3; letter-spacing: 0.26em; line-height: 2; text-shadow: 0 1px 12px rgba(8,8,11,0.9); }

/* ============ contact / footer ============ */
#contact { background: var(--ink); padding-top: clamp(140px, 20vh, 260px); }
.contact-inner { text-align: center; }
.contact-kicker { font-size: 11px; color: var(--steel); letter-spacing: 0.34em; margin-bottom: 4vh; }
.contact-h {
  font-family: var(--f-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(54px, 9vw, 150px); line-height: 0.98; letter-spacing: -0.015em;
  color: var(--chrome-hi);
}
.contact-h em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--silver); text-transform: none; letter-spacing: 0; }
.contact-globe { width: 72px; margin: 0 auto 30px; opacity: 0.75; }
.contact-globe svg { width: 100%; height: auto; display: block; }
.contact-globe path { fill: none; stroke: var(--steel); stroke-width: 1.1; }
.contact-sub { color: #9BA0A8; margin: 4vh auto 6vh; max-width: 460px; }
.contact-cta { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.btn {
  position: relative; display: inline-block; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: 3px;
  padding: 24px 58px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.28em;
  color: var(--chrome-hi);
  transition: color 0.45s, border-color 1.8s ease-out, box-shadow 2.2s ease-out;
}
.btn .btn-face { position: relative; z-index: 1; }
.btn .btn-fill {
  position: absolute; inset: 0; background: var(--ember);
  transform: translateY(101%);
  transition: transform 1.4s var(--ease);
}
.btn:hover {
  color: var(--ink-0); border-color: var(--ember);
  box-shadow: 0 0 44px rgba(255, 90, 31, 0.35), inset 0 0 0 1px rgba(255, 90, 31, 0.4);
  transition: color 0.45s, border-color 0.4s, box-shadow 0.5s;
}
.btn:hover .btn-fill { transform: none; transition: transform 0.5s var(--ease-io); }
.btn-arr { font-style: normal; display: inline-block; margin-left: 10px; transition: transform 0.4s var(--ease); }
.btn:hover .btn-arr { transform: translateX(6px); }
.contact-mail { font-size: 11px; color: var(--steel); letter-spacing: 0.24em; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.contact-mail:hover { color: var(--chrome-hi); }

.intake {
  margin-top: clamp(90px, 12vh, 160px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 22px;
  padding: 17px calc(var(--gut) + 24px);
  font-size: 10px; color: var(--mist); letter-spacing: 0.3em;
  white-space: nowrap; overflow: hidden;
}
.intake i { flex: 1; min-width: 30px; height: 1px; background: var(--line); }

#footer { padding-top: clamp(64px, 10vh, 110px); overflow: hidden; }
.foot-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px; padding-bottom: clamp(64px, 10vh, 120px);
}
.foot-col { display: flex; flex-direction: column; gap: 11px; font-size: 13px; color: #9BA0A8; font-family: var(--f-body); letter-spacing: 0.01em; }
.foot-label { color: var(--mist); letter-spacing: 0.3em; font-size: 10px; margin-bottom: 10px; font-family: var(--f-mono); }
.foot-dim { color: var(--mist); font-size: 12px; }
.foot-col a:hover { color: var(--chrome-hi); }
.foot-icon { width: 72px; height: auto; }
.foot-bar {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line);
  margin: 0 calc(var(--gut) + 24px);
  padding: 18px 0 26px;
  font-size: 10px; color: var(--mist); letter-spacing: 0.24em;
}
.foot-bar a { color: var(--steel); display: inline-block; white-space: nowrap; }
.foot-bar a:hover { color: var(--chrome-hi); }
.foot-ghost { line-height: 0; margin-bottom: -1.5vw; }
.foot-ghost svg { width: 100%; height: auto; aspect-ratio: 4610 / 700; fill: #15161B; display: block; }

/* ============ global vertical grid ============ */
#vgrid {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: difference; opacity: 0.55;
  background: linear-gradient(to right, rgba(201, 205, 211, 0.075) 1px, transparent 1px) 0 0 / 25% 100%;
  background-position: -1px 0;
}

/* ============ grain ============ */
#grain {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  opacity: 0.05;
}

/* ============ mobile menu ============ */
#menu-btn {
  display: none; background: none; border: 1px solid var(--line-strong);
  color: var(--chrome-hi); font-size: 10px; letter-spacing: 0.24em;
  padding: 12px 18px; border-radius: 3px; cursor: pointer;
}
#nav.lite #menu-btn { color: var(--ink); border-color: rgba(11, 11, 15, 0.4); }
#mnav {
  position: fixed; inset: 0; z-index: 45; background: rgba(8, 8, 11, 0.985);
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 0 9vw; gap: 0;
  overflow-y: auto;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.4s, visibility 0s 0.4s;
}
#mnav.open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 0.4s; }
/* margin:auto centres when there is room but still allows scrolling when there is not */
.mnav-links { display: flex; flex-direction: column; width: 100%; margin: auto 0; padding: 90px 0; }
.mnav-links a {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(34px, 9vw, 54px); color: var(--chrome-hi);
  padding: 4vw 0; border-bottom: 1px solid var(--line);
}
.mnav-foot { position: absolute; bottom: 34px; left: 9vw; font-size: 9px; color: var(--mist); letter-spacing: 0.3em; }

/* ============ responsive ============ */
@media (max-width: 1024px) {
  .cap-layout { grid-template-columns: 1fr; }
  .cap-rail { display: flex; align-items: center; gap: 32px; }
  .cap-globe { width: 140px; }
  .work[data-side="l"], .work[data-side="r"] { grid-template-columns: 1fr; }
  .work[data-side="r"] .work-fig { order: 0; }
  .credo-body { grid-template-columns: 1fr; }
  /* The pin STAYS on mobile. Touch means scroll.virtual === false, so real CSS sticky works
     (which is exactly why body is overflow-x: clip and not hidden). A full-bleed photograph
     is better on a phone than on a desktop — mobile gets the biggest version of the part. */
  .gates { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
  .forge-bar {
    grid-template-columns: 1fr; gap: 12px;
    padding: 12px clamp(16px, 5vw, 28px) 16px;
  }
  .forge-gates { gap: 6px; }
  .forge-gate { padding-left: 8px; gap: 3px; }
  .forge-gate .fg-n { font-size: 8px; letter-spacing: 0.16em; }
  .forge-gate .fg-name { font-size: 11px; }
  .forge-gate .fg-chip { display: none; }
  .forge-read { justify-content: flex-start; gap: 26px; }
  .forge-read dd { font-size: 12px; }
  .forge-slug { top: clamp(76px, 11vh, 96px); font-size: 8px; letter-spacing: 0.18em; }
  .forge-slug span:first-child { display: none; }
  .wit-grid { grid-template-columns: 1fr; }
  .strip { flex-direction: column; align-items: flex-start; gap: 22px; }
  .strip-lever { width: 100%; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .rail-meter { display: none; }
  .work-fig { margin-bottom: 26px; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-status { display: none; }
  #menu-btn { display: block; }
  .hero-h { font-size: clamp(38px, 10.5vw, 76px); }
  .hero-sub { font-size: 14px; }
  .origin-bg::after {
    background:
      linear-gradient(to bottom, var(--ink-0) 0%, rgba(8, 8, 11, 0.35) 30%, rgba(8, 8, 11, 0.72) 100%);
  }
  .origin-body p { text-shadow: 0 1px 14px rgba(8, 8, 11, 0.95); }
  #credo, #capabilities, #method { padding: clamp(70px, 11vh, 110px) 0; }
  #works { padding: clamp(60px, 9vh, 90px) 0 40px; }
  #instruments { padding: 40px 0 clamp(70px, 11vh, 110px); }
  .hero-annot { display: none; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-coords { text-align: left; }
  .hc-scroll { justify-content: flex-start; }
  .contact-h { font-size: clamp(34px, 10.5vw, 64px); }
  .contact-h em { font-size: 1.02em; }
  .work { margin-bottom: clamp(60px, 9vh, 90px); }
  .room-h { font-size: clamp(32px, 8.4vw, 52px); }
  .pattern .work-title { font-size: clamp(24px, 6.4vw, 32px); }
  .spec > div { grid-template-columns: 1fr; gap: 4px; }
  .wit-head { flex-direction: column; gap: 6px; }
  .strip-lever { padding: 18px 20px; font-size: 9.5px; letter-spacing: 0.2em; }
  .cap-row { grid-template-columns: 34px 1fr auto; gap: 8px 14px; }
  .cap-name { font-size: clamp(21px, 5.6vw, 26px); }
  .cap-arr { font-size: 15px; }
  .origin-body { flex-direction: column; align-items: flex-start; gap: 40px; }
  .gates { grid-template-columns: 1fr; gap: 26px; }
  .ledger { gap: 10px; font-size: 9px; }
  .intake { gap: 8px 14px; font-size: 9px; letter-spacing: 0.2em; white-space: normal; flex-wrap: wrap; justify-content: center; }
  .intake i { display: none; }
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .frame { display: none; }
  .btn { padding: 20px 32px; font-size: 11px; white-space: nowrap; }
  .contact-sub br { display: none; }
}

/* ============ reduced motion ============ */
/* No pin, no forge: the six plates are printed as captioned photographs, so the whole story —
   including the reject — is told with no movement at all. (initForge adds .plates itself; these
   rules make the stage collapse to content height.) */
@media (prefers-reduced-motion: reduce) {
  html.js .forge-stage, html.js .forge-panel { height: auto; position: static; }
}

/* ============ print ============ */
@media print {
  html.js .forge-stage, html.js .forge-panel { height: auto; position: static; }
  html.vscroll #site { position: static; transform: none !important; }
  html.js .rv, html.js .rv .ln { opacity: 1 !important; transform: none !important; }
  #preloader, #cursor, #grain, #vgrid, .frame, .rail-meter, #mnav { display: none !important; }
}