/* ════════════════════════════════════════════════════════════
   MONOLITH · WIELE GROUP · EDITION I · MMXXVI
   Shared stylesheet for all rooms of the site.
   Responsive: desktop ≥1100 · tablet 740–1099 · phone ≤739
   ════════════════════════════════════════════════════════════ */

:root{
  --bone:      #ece5d8;
  --bone-2:    #e4dccb;
  --bone-3:    #d4cab6;
  --bone-4:    #b8ad95;
  --graphite:  #2b2a27;
  --graphite-2:#4a4742;
  --graphite-3:#8a867e;
  --obsidian:  #0d0d0c;
  --ochre:     #a87535;
  --ochre-bright:#c38a40;

  --paper:  var(--bone);
  --paper-2:var(--bone-2);
  --paper-3:var(--bone-3);
  --paper-4:var(--bone-4);
  --ink:    var(--graphite);
  --ink-2:  var(--graphite-2);
  --ink-3:  var(--graphite-3);
  --slab:   var(--obsidian);
  --accent: var(--ochre);
  --accent-bright: var(--ochre-bright);

  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans:  "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;

  --edge: clamp(20px, 2.2vw, 44px);
  --room: clamp(120px, 16vh, 240px);
}

[data-mode="dark"]{
  --paper:  var(--obsidian);
  --paper-2:#131311;
  --paper-3:#1d1c19;
  --paper-4:#2c2a25;
  --ink:    #ece5d8;
  --ink-2:  #c6bfb1;
  --ink-3:  #7a766e;
  --slab:   var(--bone);
  --accent: #c79447;
  --accent-bright:#d9a858;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  overflow-x:hidden;
  transition: background 700ms cubic-bezier(.4,0,.2,1), color 700ms cubic-bezier(.4,0,.2,1);
}

body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  background-image:
    radial-gradient(rgba(43,42,39,.03) 1px, transparent 1px),
    radial-gradient(rgba(43,42,39,.02) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  opacity:.7;
}
[data-mode="dark"] body::before{
  background-image:
    radial-gradient(rgba(236,229,216,.025) 1px, transparent 1px),
    radial-gradient(rgba(236,229,216,.015) 1px, transparent 1px);
  mix-blend-mode:screen;
}

::selection{ background:var(--accent); color:var(--paper); }

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

/* ─── Typography ─── */
.mono{ font-family:var(--mono); font-weight:400; font-feature-settings:"tnum" 1, "zero" 1; letter-spacing:.02em; }
.meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }
.meta.dim{ color:var(--ink-3); }

h1,h2,h3,h4,h5{ font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.02em; line-height:.9; }
h1{ font-size:clamp(64px, 14vw, 320px); letter-spacing:-.042em; line-height:.86; }
h2{ font-size:clamp(48px, 9vw, 180px); letter-spacing:-.028em; line-height:.9; }
h3{ font-size:clamp(32px, 5vw, 80px); letter-spacing:-.022em; line-height:.94; }
h4{ font-size:clamp(22px, 2.4vw, 40px); letter-spacing:-.014em; line-height:1.05; }
.italic{ font-style:italic; }
.ochre{ color:var(--accent); }

/* ─── Scroll progress ─── */
.scrollbar{ position:fixed; left:0; top:0; bottom:0; width:2px; background:transparent; z-index:99; pointer-events:none; }
.scrollbar .fill{ position:absolute; top:0; left:0; width:100%; background:var(--accent); height:0%; }

/* ─── Frame chrome ─── */
.frame{ position:fixed; inset:0; pointer-events:none; z-index:100; }
.frame .bar{
  position:absolute; left:var(--edge); right:var(--edge);
  display:flex; justify-content:space-between; align-items:center;
  gap:24px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2);
  pointer-events:auto;
}
.frame .bar.top{ top:18px; }
.frame .bar.bot{ bottom:18px; }
.frame .bar .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); vertical-align:middle; margin-right:8px; animation: pulse 3.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.frame .bar .sep{ color:var(--ink-3); margin:0 10px; }

.frame .edgeL, .frame .edgeR{ position:absolute; top:0; bottom:0; width:var(--edge); display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:72px 0; pointer-events:none; }
.frame .edgeL{ left:0; } .frame .edgeR{ right:0; }
.frame .edgeL .vlabel, .frame .edgeR .vlabel{ writing-mode:vertical-rl; font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3); }
.frame .edgeL .vlabel{ transform:rotate(180deg); }

.crosshair{ position:absolute; width:16px; height:16px; }
.crosshair::before,.crosshair::after{ content:""; position:absolute; background:var(--ink-3); }
.crosshair::before{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); }
.crosshair::after{ top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }
.crosshair.tl{ top:12px; left:12px; } .crosshair.tr{ top:12px; right:12px; }
.crosshair.bl{ bottom:12px; left:12px; } .crosshair.br{ bottom:12px; right:12px; }

/* ─── Nav ─── */
.nav{ position:fixed; top:52px; left:0; right:0; z-index:80; padding:0 var(--edge); display:flex; justify-content:space-between; align-items:center; pointer-events:none; gap:20px; }
.nav > *{ pointer-events:auto; }
.nav .mark{ font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:-.02em; line-height:1; display:flex; align-items:baseline; gap:12px; color:var(--ink); text-decoration:none; }
.nav .mark .w{ font-size:32px; font-weight:600; }
.nav .mark .sub{ font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:30px; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; }
.nav ul a{ color:var(--ink-2); text-decoration:none; display:inline-flex; align-items:baseline; gap:6px; padding:2px 0; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; }
.nav ul a .i{ color:var(--ink-3); font-size:9px; }
.nav ul a:hover, .nav ul a.active{ color:var(--accent); border-color:var(--accent); }
.nav .menu-btn{ display:none; background:none; border:1px solid var(--ink); padding:10px 14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); cursor:pointer; }

.cta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper); background:var(--ink); padding:14px 20px; border:none; text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s; cursor:pointer; white-space:nowrap; }
.cta:hover{ background:var(--accent); transform:translateY(-1px); }
.cta.ghost{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.cta.ghost:hover{ background:var(--ink); color:var(--paper); }

/* Mobile drawer */
.drawer{ position:fixed; inset:0; background:var(--paper); z-index:150; padding: 88px var(--edge) 40px; display:none; flex-direction:column; }
.drawer.on{ display:flex; }
.drawer .x{ position:absolute; top:28px; right:var(--edge); background:none; border:none; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); cursor:pointer; padding:10px; }
.drawer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.drawer ul li{ border-top:1px solid var(--paper-3); padding: 18px 0; }
.drawer ul li:last-child{ border-bottom:1px solid var(--paper-3); }
.drawer ul a{ display:flex; align-items:baseline; justify-content:space-between; font-family:var(--serif); font-weight:500; font-size: clamp(32px, 7vw, 56px); letter-spacing:-.02em; color:var(--ink); }
.drawer ul a .ix{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-3); }
.drawer .contact{ margin-top:auto; padding-top: 40px; border-top: 1px solid var(--paper-3); display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }

/* ─── Page ─── */
main{ position:relative; z-index:2; }
.room{ position:relative; padding: var(--room) calc(var(--edge) + 24px); border-top: 1px solid var(--paper-3); }
.room:first-child{ border-top:none; }
.room-head{ display:grid; grid-template-columns: 1fr auto; align-items:end; gap:24px; margin-bottom: clamp(60px, 9vh, 140px); padding-top: 12px; }
.room-head .sec{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
.room-head .idx{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); text-align:right; }

/* ─── Reveal ─── */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform: translateY(0); }
.reveal.d1{ transition-delay: .1s; } .reveal.d2{ transition-delay: .2s; } .reveal.d3{ transition-delay: .3s; } .reveal.d4{ transition-delay: .4s; } .reveal.d5{ transition-delay: .5s; }

/* ─── Tweaks ─── */
.tweaks{ position:fixed; right: calc(var(--edge) + 6px); bottom: 56px; z-index: 120; background: var(--paper); border: 1px solid var(--ink); padding: 18px 20px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; display:none; min-width: 240px; box-shadow: 0 20px 40px -20px rgba(13,13,12,.25); }
.tweaks.on{ display:block; }
.tweaks h6{ margin:0 0 14px; font-size:10px; letter-spacing:.22em; color: var(--ink-3); padding-bottom: 12px; border-bottom: 1px solid var(--paper-3); }
.tweaks .row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding: 8px 0; }
.tweaks .row .seg{ display:flex; border:1px solid var(--ink); }
.tweaks .row .seg button{ background:transparent; border:none; color:var(--ink); font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding: 8px 12px; cursor:pointer; }
.tweaks .row .seg button.on{ background:var(--ink); color:var(--paper); }

/* ─── Footer ─── */
footer{ padding: 80px var(--edge) 40px; position:relative; z-index:2; background: var(--paper); border-top: 1px solid var(--ink); }
footer .colophon{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 80px; padding-bottom: 40px; border-bottom:1px solid var(--paper-3); }
footer .colophon .mark-xl{ font-family:var(--serif); font-weight:500; font-size: clamp(72px, 11vw, 200px); letter-spacing:-.042em; line-height:.82; color: var(--ink); }
footer .colophon .mark-xl .dot{ color:var(--accent); }
footer .colophon .mark-xl .sub{ display:block; margin-top:20px; font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
footer .colophon h5{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-bottom: 16px; padding-bottom: 10px; border-bottom:1px solid var(--paper-3); }
footer .colophon ul{ list-style:none; margin:0; padding:0; font-family:var(--serif); font-weight:400; font-size: 19px; line-height: 1.7; }
footer .colophon ul a:hover{ color:var(--accent); }
footer .imprint{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; font-family:var(--mono); font-size: 10px; letter-spacing:.22em; text-transform: uppercase; color: var(--ink-3); }
footer .imprint .c{ text-align:center; }
footer .imprint .r{ text-align:right; }

/* ═══════════════ COMPONENTS ═══════════════ */

/* HERO */
.hero{ min-height: 100vh; position:relative; padding: clamp(120px, 16vh, 180px) var(--edge) clamp(40px, 6vh, 80px); border-top:none; overflow:hidden; display:flex; flex-direction:column; }
.hero-grid{ position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(to right, var(--paper-3) 1px, transparent 1px); background-size: calc(100%/12) 100%; opacity:.25; mask-image: linear-gradient(to bottom, black 40%, transparent 100%); }
.slab{ position:absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: clamp(200px, 24vw, 380px); aspect-ratio: 4 / 9; background: linear-gradient(180deg, #1a1a18 0%, var(--obsidian) 60%, #050504 100%); box-shadow: 0 0 0 1px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(0,0,0,.4), 0 80px 160px -40px rgba(13,13,12,.6), 0 30px 60px -20px rgba(13,13,12,.4); z-index:0; pointer-events:none; }
.slab::before{ content:""; position:absolute; left:12%; right:12%; top:16%; height:1px; background: rgba(236,229,216,.15); }
.slab::after{ content:""; position:absolute; left:20%; right:20%; bottom:14%; height:1px; background: rgba(168,117,53,.4); }
.slab-inscription{ position:absolute; left:0; right:0; top:22%; text-align:center; font-family:var(--mono); font-size:9px; letter-spacing:.4em; color: rgba(236,229,216,.35); text-transform:uppercase; line-height:2; pointer-events:none; z-index:1; }
.slab-inscription .wg{ font-family:var(--serif); font-size:28px; font-style:italic; font-weight:400; letter-spacing:-.01em; color: rgba(236,229,216,.55); display:block; margin-top:14px; }
.slab-inscription .year{ font-size:10px; letter-spacing:.5em; margin-top:16px; color: rgba(168,117,53,.7); }
[data-mode="dark"] .slab{ background: linear-gradient(180deg, #f5efe2 0%, var(--bone) 60%, #bfb49e 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.1), 0 80px 160px -40px rgba(0,0,0,.7), 0 30px 60px -20px rgba(0,0,0,.5); }
[data-mode="dark"] .slab::before{ background: rgba(13,13,12,.2); }
[data-mode="dark"] .slab-inscription{ color: rgba(13,13,12,.45); }
[data-mode="dark"] .slab-inscription .wg{ color: rgba(13,13,12,.7); }

.hero-prelude{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:24px; align-items:start; position:relative; z-index:3; margin-bottom: clamp(40px, 6vh, 90px); }
.hero-prelude .c{ text-align:center; }
.hero-prelude .r{ text-align:right; }
.hero-title{ position:relative; z-index:2; text-align:center; margin: auto 0; padding: 4vh 0; }
.hero-title .word{ display:block; font-family:var(--serif); font-weight:500; font-size: clamp(80px, 22vw, 480px); line-height:.84; letter-spacing:-.052em; color: var(--ink); mix-blend-mode: multiply; }
[data-mode="dark"] .hero-title .word{ mix-blend-mode: screen; }
.hero-title .word.two{ font-style:italic; font-weight:400; color: var(--accent); margin-top: -0.06em; }
.hero-sub{ position:relative; z-index:3; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:32px; align-items:end; margin-top: auto; }
.hero-sub .lede{ grid-column:2; font-family:var(--serif); font-style:italic; font-size: clamp(18px, 1.5vw, 24px); line-height:1.4; color: var(--ink-2); text-align:center; max-width: 34ch; margin: 0 auto; }
.hero-sub .coords{ font-size:10.5px; line-height:1.8; }
.hero-sub .actions{ text-align:right; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.figref{ display:flex; flex-direction:column; gap:4px; }
.figref .ln{ display:flex; gap:10px; justify-content:flex-start; }
.figref .k{ color:var(--ink-3); }
.figref .v{ color:var(--ink); }

/* TICKER */
.ticker-wrap{ border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); background:var(--paper); position:relative; z-index:3; padding: 14px 0; display:flex; overflow:hidden; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); }
.ticker-wrap .track{ display:flex; gap:44px; white-space:nowrap; animation: tick 70s linear infinite; flex:none; padding-right:44px; }
.ticker-wrap .track .diamond{ color:var(--accent); }
@keyframes tick{ from{ transform:translateX(0) } to{ transform:translateX(-100%) } }

/* STELA */
.stela{ margin: clamp(60px, 10vh, 140px) 0 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); display:grid; grid-template-columns: repeat(4, 1fr); }
.stela .cell{ padding: 48px 32px; border-right: 1px solid var(--paper-3); display:flex; flex-direction:column; justify-content:space-between; min-height: 260px; }
.stela .cell:last-child{ border-right:none; }
.stela .cell .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.stela .cell .v{ font-family:var(--serif); font-weight:500; font-size: clamp(48px, 5.6vw, 108px); line-height:.88; letter-spacing:-.035em; color: var(--ink); margin-top: 20px; }
.stela .cell .v .unit{ font-size:.4em; color:var(--ink-3); font-style:italic; margin-left:8px; letter-spacing:0; font-weight:400; }
.stela .cell .v .ochre{ color:var(--accent); }
.stela .cell .d{ margin-top: 16px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }

/* POSITION (sticky) */
.position{ display:grid; grid-template-columns: 5fr 4fr; gap: clamp(40px, 6vw, 140px); align-items: start; }
.position .body{ position: sticky; top: 20vh; }
.position .body p{ font-size: clamp(17px, 1.15vw, 20px); line-height: 1.55; color:var(--ink-2); max-width: 46ch; }
.position .body p + p{ margin-top: 1.4em; }
.position .body p strong{ font-family:var(--serif); font-style:italic; font-weight:500; color:var(--ink); font-size:1.1em; }
.meta-block{ margin-top: 2em; padding-top: 1.4em; border-top:1px solid var(--paper-3); display:grid; grid-template-columns: auto 1fr; gap: 12px 24px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.meta-block dt{ color:var(--ink-3); }
.meta-block dd{ margin:0; color:var(--ink); }

/* PILLARS */
.pillars{ display:grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.pillar{ border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); padding: 48px 36px 52px; background:var(--paper); position:relative; min-height: 440px; display:flex; flex-direction:column; transition: background .5s ease; overflow:hidden; text-decoration:none; color:inherit; }
.pillar::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:0; background:var(--ink); transition: height .5s cubic-bezier(.7,0,.3,1); z-index:0; }
.pillar:hover::before{ height:100%; }
.pillar > *{ position:relative; z-index:1; transition: color .3s; }
.pillar:hover > *{ color:var(--paper); }
.pillar:hover .ix, .pillar:hover .roman{ color: var(--accent); }
.pillar:hover .read{ color: var(--paper); }
.pillar .top{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom: 52px; }
.pillar .disc{ color:var(--ink); }
.pillar .ix{ color:var(--accent); font-size:13px; }
.pillar .roman{ font-family:var(--serif); font-style:italic; font-weight:400; font-size: clamp(90px, 9vw, 160px); line-height:.82; color: var(--ink-3); letter-spacing:-.04em; margin-bottom: auto; }
.pillar h3{ margin-top: 32px; font-size: clamp(30px, 2.6vw, 46px); letter-spacing: -.024em; }
.pillar p{ margin-top: 16px; font-size: 14.5px; line-height:1.55; color: var(--ink-2); max-width: 34ch; }
.pillar .read{ margin-top: 28px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--ink); display:inline-flex; align-items:center; gap:10px; }
.pillar .read .arr{ transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.pillar:hover .read .arr{ transform: translateX(10px); }

/* METHOD */
.method{ display:grid; grid-template-columns: repeat(5, 1fr); gap:0; border-top:1px solid var(--ink); border-left:1px solid var(--paper-3); background: var(--paper-2); }
.chamber{ padding: 48px 24px 28px; border-right:1px solid var(--paper-3); border-bottom:1px solid var(--paper-3); position:relative; min-height: 560px; display:flex; flex-direction:column; background: var(--paper); }
.chamber .n{ font-family:var(--serif); font-weight:400; font-size: clamp(100px, 13vw, 240px); line-height:.78; color: var(--ink); letter-spacing: -.05em; margin-bottom: 28px; transition: color .5s, font-style .5s; }
.chamber:hover .n{ color:var(--accent); font-style:italic; }
.chamber .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--paper-3); }
.chamber .txt{ font-family:var(--serif); font-weight:400; font-size: clamp(16px, 1.1vw, 19px); line-height:1.38; color:var(--ink-2); }
.chamber .tick{ margin-top:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); padding-top: 32px; display:flex; justify-content:space-between; }
.chamber .tick .mark{ color:var(--accent); }

/* PROOF */
.proof-intro{ display:grid; grid-template-columns: 2fr 1fr; gap: clamp(32px, 4vw, 80px); margin-bottom: clamp(60px, 8vh, 120px); align-items: end; }
.proof-intro h3{ font-family:var(--serif); font-weight:500; }
.proof-intro p{ font-family:var(--serif); font-style:italic; font-size: clamp(18px, 1.35vw, 24px); line-height:1.4; color:var(--ink-2); max-width: 40ch; }
.proof{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--ink); }
.case{ display:grid; grid-template-columns: 140px 1.2fr 1.3fr 360px; gap:24px; align-items:stretch; padding: 48px 0; border-bottom: 1px solid var(--paper-3); position:relative; transition: background .4s, padding .4s; text-decoration:none; color:inherit; }
.case:hover{ background:var(--paper-2); padding-left: 8px; }
.case .ix{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); padding-left:4px; }
.case .ix .big{ display:block; margin-top:6px; font-size:48px; font-family:var(--serif); font-style:italic; color:var(--ink); letter-spacing:-.03em; font-weight:400; line-height:1; }
.case .ix .small{ display:block; margin-top:8px; color:var(--ink-3); }
.case .disc{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); padding-top: 4px; align-self:start; display:flex; flex-direction:column; gap:10px; }
.case .disc .tags{ display:flex; flex-wrap:wrap; gap:6px; }
.case .disc .tag{ display:inline-block; padding:4px 10px; border:1px solid var(--ink-3); color:var(--ink-2); font-size:9.5px; }
.case .disc .year{ color:var(--ink-3); font-size:10px; margin-top:6px; }
.case .body{ padding-right:40px; }
.case .body h4{ font-family:var(--serif); font-weight:500; font-size: clamp(28px, 3.2vw, 54px); letter-spacing: -.024em; line-height:1; margin-bottom: 14px; }
.case .body p{ font-size:14.5px; line-height:1.55; color:var(--ink-2); max-width: 54ch; }
.case .metric{ text-align:right; align-self:end; padding-left:28px; border-left:1px solid var(--paper-3); }
.case .metric .n{ font-family:var(--serif); font-weight:500; font-size: clamp(54px, 6.2vw, 116px); letter-spacing:-.036em; line-height:.88; color:var(--accent); }
.case .metric .lbl{ margin-top: 12px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }

/* SIGNAL */
.signal{ margin: clamp(60px, 12vh, 140px) 0 clamp(40px, 6vh, 60px); padding: clamp(60px, 10vh, 120px) 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); text-align:center; position:relative; }
.signal .diamond{ position:absolute; left:50%; transform: translateX(-50%) rotate(45deg); width:14px; height:14px; background:var(--paper); border:1px solid var(--ink); z-index:3; }
.signal .diamond.t{ top:-8px; } .signal .diamond.b{ bottom:-8px; }
.signal blockquote{ font-family:var(--serif); font-weight:400; font-style:italic; font-size: clamp(28px, 4.2vw, 72px); line-height:1.12; color:var(--ink); margin:0 auto; max-width: 22ch; letter-spacing:-.018em; }
.signal .src{ margin-top: 28px; font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); }

/* OFFERS */
.offers{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.offer{ border-right:1px solid var(--paper-3); padding: 44px 28px 36px; min-height: 480px; display:flex; flex-direction:column; position:relative; text-decoration:none; color:inherit; }
.offer:last-child{ border-right:none; }
.offer.lead{ background: var(--ink); color: var(--paper); }
.offer.lead .tag{ color: var(--accent-bright); }
.offer.lead p, .offer.lead .price .lbl{ color: rgba(236,229,216,.75); }
.offer.lead h4{ color: var(--paper); }
.offer.lead .price{ border-top-color: rgba(236,229,216,.22); }
[data-mode="dark"] .offer.lead{ background: var(--bone); color: var(--obsidian); }
[data-mode="dark"] .offer.lead p, [data-mode="dark"] .offer.lead .price .lbl{ color: rgba(13,13,12,.6); }
[data-mode="dark"] .offer.lead h4{ color: var(--obsidian); }
[data-mode="dark"] .offer.lead .tag{ color: var(--ochre); }
.offer .ix{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.offer h4{ margin-top: 20px; font-family:var(--serif); font-weight:500; font-size: clamp(28px, 2.8vw, 46px); line-height:1; letter-spacing:-.022em; }
.offer p{ margin-top: 18px; font-size: 14.5px; line-height:1.55; color: var(--ink-2); max-width: 34ch; }
.offer .tag{ margin-top:auto; padding-top:22px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.offer .price{ margin-top: 14px; padding-top: 22px; border-top: 1px solid var(--paper-3); display:flex; justify-content:space-between; align-items:baseline; }
.offer .price .p{ font-family:var(--serif); font-weight:500; font-size: 32px; letter-spacing:-.022em; }
.offer .price .p .mo{ font-size:14px; color:var(--ink-3); font-weight:400; }
.offer .price .lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); text-align:right; line-height:1.6; }

/* CODEX */
.codex{ display:grid; grid-template-columns: 1fr 2fr; gap: clamp(40px, 6vw, 120px); border-top:1px solid var(--paper-3); padding-top: clamp(40px, 5vh, 80px); }
.faq{ border-bottom:1px solid var(--paper-3); padding: 28px 0; transition: padding .4s; }
.faq[open]{ padding: 32px 0; }
.faq summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns: 50px 1fr 40px; gap:20px; align-items:baseline; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .ix{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.faq summary .q{ font-family:var(--serif); font-weight:500; font-size: clamp(20px, 2vw, 32px); letter-spacing:-.014em; line-height:1.18; transition: color .3s; }
.faq[open] summary .q, .faq summary:hover .q{ color:var(--accent); }
.faq summary .sign{ font-family:var(--serif); font-size:28px; font-weight:300; color:var(--ink-3); text-align:right; line-height:1; transition: color .3s, transform .4s; }
.faq[open] summary .sign{ color:var(--accent); transform: rotate(45deg); }
.faq summary .sign::before{ content:"+"; }
.faq .a{ padding: 20px 0 6px 70px; font-family:var(--serif); font-style:italic; font-weight:400; font-size: clamp(17px, 1.3vw, 22px); line-height:1.5; color: var(--ink-2); max-width: 62ch; }

/* OATH */
.oath{ text-align:center; padding: clamp(80px, 16vh, 220px) var(--edge); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); position:relative; background: var(--ink); color: var(--paper); }
[data-mode="dark"] .oath{ background: var(--bone); color: var(--obsidian); }
.oath::before{ content:""; position:absolute; inset:18px; border: 1px solid rgba(236,229,216,.14); pointer-events:none; }
[data-mode="dark"] .oath::before{ border-color: rgba(13,13,12,.14); }
.oath .pre{ font-family:var(--mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color: rgba(236,229,216,.55); margin-bottom: 48px; }
[data-mode="dark"] .oath .pre{ color: rgba(13,13,12,.55); }
.oath h2{ font-size: clamp(56px, 13vw, 240px); line-height:.86; letter-spacing:-.036em; color: var(--paper); }
[data-mode="dark"] .oath h2{ color: var(--obsidian); }
.oath h2 .ochre{ color:var(--accent-bright); font-style:italic; font-weight:500; }
.oath .post{ margin-top: 52px; font-family:var(--serif); font-style:italic; font-size: clamp(18px, 1.5vw, 26px); color: rgba(236,229,216,.75); max-width: 40ch; margin-left:auto; margin-right:auto; line-height:1.4; }
[data-mode="dark"] .oath .post{ color: rgba(13,13,12,.7); }
.oath .actions{ margin-top: 60px; display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.oath .actions .cta{ padding: 20px 32px; font-size: 11.5px; background:var(--paper); color:var(--ink); }
.oath .actions .cta:hover{ background: var(--accent); color: var(--paper); }
[data-mode="dark"] .oath .actions .cta{ background: var(--obsidian); color: var(--bone); }
.oath .coords-row{ margin-top: 100px; display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color: rgba(236,229,216,.5); position:relative; z-index:2; max-width: 900px; margin-left:auto; margin-right:auto; gap:16px; flex-wrap:wrap; }
[data-mode="dark"] .oath .coords-row{ color: rgba(13,13,12,.5); }

/* ═══════════════ PAGE-SPECIFIC ═══════════════ */

/* Page header (non-home) */
.page-hero{ padding: clamp(140px, 20vh, 220px) calc(var(--edge) + 24px) clamp(60px, 10vh, 120px); border-bottom: 1px solid var(--paper-3); position:relative; }
.page-hero .prelude{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom: 40px; gap:20px; flex-wrap:wrap; }
.page-hero h1{ font-size: clamp(56px, 12vw, 260px); max-width: 14ch; }
.page-hero .kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom: 32px; }
.page-hero .lede{ margin-top: clamp(40px, 6vh, 80px); font-family:var(--serif); font-style:italic; font-size: clamp(20px, 1.6vw, 28px); line-height: 1.4; color: var(--ink-2); max-width: 56ch; }
.page-hero .coords{ margin-top: clamp(60px, 8vh, 100px); display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; border-top:1px solid var(--paper-3); padding-top:20px; }
.page-hero .coords dt{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.page-hero .coords dd{ margin:0; font-family:var(--serif); font-size:18px; color:var(--ink); }

/* Service detail grid */
.service-detail{ display:grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 120px); padding: clamp(60px, 10vh, 140px) calc(var(--edge) + 24px); border-top: 1px solid var(--paper-3); }
.service-detail .left{ position:sticky; top:18vh; align-self:start; }
.service-detail .left .roman{ font-family:var(--serif); font-style:italic; font-weight:400; font-size: clamp(100px, 12vw, 200px); color:var(--accent); line-height:.8; letter-spacing:-.04em; margin-bottom: 24px; }
.service-detail .left h2{ font-family:var(--serif); font-weight:500; letter-spacing:-.024em; }
.service-detail .left .disc{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-bottom: 18px; }
.service-detail .right h4{ font-family:var(--serif); font-weight:500; font-size: clamp(22px, 2vw, 30px); letter-spacing:-.016em; margin-top: 40px; margin-bottom: 14px; color: var(--ink); border-top: 1px solid var(--paper-3); padding-top: 24px; }
.service-detail .right h4:first-child{ margin-top: 0; border-top: none; padding-top:0; }
.service-detail .right p{ font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 58ch; margin-bottom: 16px; }
.service-detail .right ul{ list-style:none; padding:0; margin: 18px 0; display:grid; gap: 10px; }
.service-detail .right ul li{ display:grid; grid-template-columns: 28px 1fr; gap: 12px; font-family:var(--serif); font-size: 17px; line-height:1.5; color:var(--ink-2); }
.service-detail .right ul li::before{ content:"◦"; font-family:var(--mono); color: var(--accent); font-size:14px; padding-top:4px; }

/* Case study body */
.case-body{ padding: clamp(60px, 10vh, 140px) calc(var(--edge) + 24px); border-top:1px solid var(--paper-3); display:grid; grid-template-columns: 1fr 2fr; gap: clamp(40px, 6vw, 120px); }
.case-body .left{ position:sticky; top:18vh; align-self:start; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); display:flex; flex-direction:column; gap: 28px; }
.case-body .left dt{ color:var(--ink-3); margin-bottom:4px; }
.case-body .left dd{ margin:0; color:var(--ink); font-family:var(--serif); font-size:18px; letter-spacing:-.01em; text-transform:none; font-weight:400; }
.case-body .right h2{ font-family:var(--serif); font-weight:500; letter-spacing:-.022em; margin-bottom: 32px; }
.case-body .right p{ font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; margin-bottom: 20px; }
.case-body .right .pullquote{ margin: 40px -24px; padding: 32px 40px; border-left: 1px solid var(--accent); font-family:var(--serif); font-style:italic; font-size: clamp(22px, 2vw, 32px); line-height:1.3; color: var(--ink); max-width: 40ch; }
.case-body .right h4{ font-family:var(--serif); font-weight:500; font-size: clamp(24px, 2.2vw, 34px); letter-spacing:-.018em; margin: 48px 0 16px; }

/* Journal index */
.journal-grid{ padding: clamp(60px, 10vh, 140px) calc(var(--edge) + 24px); display:flex; flex-direction:column; border-top: 1px solid var(--paper-3); }
.journal-entry{ display:grid; grid-template-columns: 120px 1fr 200px 80px; gap:32px; align-items:baseline; padding: 36px 0; border-bottom: 1px solid var(--paper-3); position:relative; text-decoration:none; color:inherit; transition: padding .3s, background .3s; }
.journal-entry:hover{ padding-left: 10px; background: var(--paper-2); }
.journal-entry .date{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.journal-entry .title{ font-family:var(--serif); font-weight:500; font-size: clamp(22px, 2.4vw, 40px); letter-spacing:-.018em; line-height:1.1; transition: color .3s; }
.journal-entry:hover .title{ color: var(--accent); }
.journal-entry .cat{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }
.journal-entry .arr{ font-family:var(--mono); font-size:16px; text-align:right; color: var(--ink-3); transition: transform .4s; }
.journal-entry:hover .arr{ transform: translateX(10px); color: var(--accent); }

/* Contact form */
.contact-body{ display:grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 140px); padding: clamp(60px, 10vh, 140px) calc(var(--edge) + 24px); border-top: 1px solid var(--paper-3); }
.contact-body .left h3{ font-family:var(--serif); font-weight:500; }
.contact-body .left p{ margin-top: 24px; font-family:var(--serif); font-style:italic; font-size: 20px; line-height: 1.4; color: var(--ink-2); max-width: 36ch; }
.contact-body .left .studios{ margin-top: clamp(40px, 6vh, 80px); display:grid; gap: 32px; }
.contact-body .left .studio{ border-top: 1px solid var(--paper-3); padding-top: 18px; }
.contact-body .left .studio h5{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-bottom: 10px; }
.contact-body .left .studio .addr{ font-family:var(--serif); font-size: 18px; line-height: 1.4; color: var(--ink); }
.contact-body .left .studio .addr em{ color: var(--accent); font-style:normal; }
.contact-body .right form{ display:grid; gap: 28px; }
.contact-body .right label{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--paper-3); }
.contact-body .right input, .contact-body .right textarea, .contact-body .right select{ width:100%; background: transparent; border: none; border-bottom: 1px solid var(--ink); padding: 14px 0; font-family: var(--serif); font-size: 22px; color: var(--ink); outline: none; transition: border-color .3s; }
.contact-body .right input:focus, .contact-body .right textarea:focus, .contact-body .right select:focus{ border-bottom-color: var(--accent); }
.contact-body .right textarea{ resize: vertical; min-height: 100px; font-size: 18px; line-height:1.5; }
.contact-body .right .row-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.contact-body .right .submit{ display:flex; justify-content:space-between; align-items:center; margin-top: 20px; padding-top: 24px; border-top: 1px solid var(--paper-3); gap: 20px; flex-wrap: wrap; }
.contact-body .right .note{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); max-width: 32ch; line-height: 1.5; }

/* Founder */
.founder-body{ padding: clamp(60px, 10vh, 140px) calc(var(--edge) + 24px); border-top:1px solid var(--paper-3); display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 120px); align-items:start; }
.founder-portrait{ aspect-ratio: 4 / 5; background: linear-gradient(180deg, #2b2a27 0%, #0d0d0c 100%); position:relative; overflow:hidden; }
.founder-portrait::before{ content:"HENRIK WIELE"; position:absolute; bottom:24px; left:24px; font-family:var(--mono); font-size:10px; letter-spacing:.3em; color: rgba(236,229,216,.5); }
.founder-portrait::after{ content:"PORTRAIT · 2026"; position:absolute; bottom:24px; right:24px; font-family:var(--mono); font-size:10px; letter-spacing:.3em; color: rgba(168,117,53,.8); }
.founder-portrait .initials{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-style:italic; font-size: clamp(120px, 18vw, 280px); color: rgba(236,229,216,.1); font-weight:500; letter-spacing: -.04em; }
.founder-body .bio h2{ font-family:var(--serif); font-weight:500; letter-spacing:-.024em; margin-bottom: 24px; }
.founder-body .bio .role{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom: 16px; }
.founder-body .bio p{ font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 50ch; margin-bottom: 18px; }
.founder-body .bio p:first-of-type::first-letter{ font-family: var(--serif); font-size: 4.5em; font-style: italic; float: left; line-height: .85; padding: 6px 14px 0 0; color: var(--accent); font-weight: 500; }
.founder-body .bio .record{ margin-top: 40px; display:grid; grid-template-columns: auto 1fr; gap: 14px 32px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding-top: 32px; border-top: 1px solid var(--paper-3); }
.founder-body .bio .record dt{ color:var(--ink-3); }
.founder-body .bio .record dd{ margin:0; color:var(--ink); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤1099)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1099px){
  :root{ --edge: 24px; --room: clamp(96px, 12vh, 160px); }

  h1{ font-size: clamp(60px, 12vw, 200px); }
  h2{ font-size: clamp(44px, 8vw, 140px); }
  h3{ font-size: clamp(30px, 5vw, 64px); }

  .nav ul{ gap: 20px; font-size: 10px; }
  .nav ul a .i{ display:none; }
  .nav .mark .sub{ display:none; }

  .hero-prelude{ grid-template-columns: 1fr 1fr; }
  .hero-prelude .c{ display:none; }
  .hero-sub{ grid-template-columns: 1fr 2fr 1fr; gap: 20px; }
  .hero-sub .lede{ font-size: 18px; }

  .position{ grid-template-columns: 1fr; gap: 48px; }
  .position .body{ position: static; }

  .stela{ grid-template-columns: 1fr 1fr; }
  .stela .cell:nth-child(2n){ border-right:none; }
  .stela .cell:nth-child(-n+2){ border-bottom:1px solid var(--paper-3); }

  .pillars{ grid-template-columns: 1fr 1fr; }
  .pillar{ min-height: 360px; padding: 36px 28px; }

  .method{ grid-template-columns: 1fr 1fr 1fr; }
  .chamber{ min-height: 380px; padding: 36px 20px 24px; }
  .chamber:nth-child(3n){ border-right:none; }

  .case{ grid-template-columns: 80px 1fr; gap: 18px; padding: 32px 0; }
  .case .disc, .case .metric, .case .body{ grid-column: 2; }
  .case .body{ padding-right: 0; }
  .case .metric{ text-align:left; border-left:none; padding-left:0; padding-top:12px; margin-top:12px; border-top:1px solid var(--paper-3); }

  .offers{ grid-template-columns: 1fr 1fr; }
  .offer{ min-height: 380px; padding: 36px 24px; }
  .offer:nth-child(2n){ border-right:none; }
  .offer:nth-child(-n+2){ border-bottom: 1px solid var(--paper-3); }

  .codex{ grid-template-columns: 1fr; gap: 32px; }

  .service-detail{ grid-template-columns: 1fr; gap: 48px; }
  .service-detail .left{ position: static; }

  .case-body{ grid-template-columns: 1fr; gap: 40px; }
  .case-body .left{ position: static; display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }

  .contact-body{ grid-template-columns: 1fr; gap: 60px; }

  .founder-body{ grid-template-columns: 1fr; gap: 48px; }
  .founder-portrait{ max-width: 480px; }

  .journal-entry{ grid-template-columns: 100px 1fr 60px; }
  .journal-entry .cat{ display:none; }

  .page-hero .coords{ grid-template-columns: 1fr 1fr; gap: 24px; }

  footer .colophon{ grid-template-columns: 1fr 1fr 1fr; }
  footer .colophon .mark-xl{ grid-column: 1 / -1; }

  .frame .edgeL, .frame .edgeR{ display:none; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — PHONE (≤739)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 739px){
  :root{ --edge: 18px; --room: clamp(72px, 10vh, 120px); }

  body{ font-size: 14.5px; }

  h1{ font-size: clamp(56px, 18vw, 120px); letter-spacing:-.03em; }
  h2{ font-size: clamp(40px, 12vw, 80px); }
  h3{ font-size: clamp(26px, 8vw, 42px); }

  .frame .bar{ font-size: 9px; letter-spacing:.12em; gap: 8px; }
  .frame .bar.top > div:last-child, .frame .bar.bot > div:last-child{ display:none; }

  .nav{ top: 40px; }
  .nav ul{ display: none; }
  .nav .mark .sub{ display:none; }
  .nav .mark{ font-size: 16px; }
  .nav .mark .w{ font-size: 22px; }
  .nav .cta{ display:none; }
  .nav .menu-btn{ display:inline-block; }

  .room{ padding: var(--room) var(--edge); }
  .room-head{ grid-template-columns: 1fr; gap: 12px; margin-bottom: 48px; }
  .room-head .idx{ text-align:left; }

  /* HERO */
  .hero{ padding: 120px var(--edge) 40px; min-height: 92vh; }
  .hero-prelude{ grid-template-columns: 1fr; gap: 6px; margin-bottom: 32px; }
  .hero-prelude .r{ text-align:left; }
  .hero-prelude .c{ display:none; }
  .slab{ width: 160px; top: 54%; opacity:.9; }
  .slab-inscription .wg{ font-size: 18px; }
  .hero-title .word{ font-size: clamp(68px, 22vw, 150px); }
  .hero-sub{ grid-template-columns: 1fr; gap: 28px; }
  .hero-sub .lede, .hero-sub .coords, .hero-sub .actions{ grid-column:1; text-align:left; align-items:flex-start; }
  .hero-sub .lede{ font-size: 16px; max-width: 100%; }

  .ticker-wrap{ padding: 10px 0; font-size: 9.5px; letter-spacing:.18em; }

  /* STELA */
  .stela{ grid-template-columns: 1fr; }
  .stela .cell{ min-height: 180px; padding: 28px 18px; border-right:none; border-bottom:1px solid var(--paper-3); }
  .stela .cell:last-child{ border-bottom:none; }
  .stela .cell .v{ font-size: 60px; }

  .position{ grid-template-columns: 1fr; gap: 32px; }
  .position .body{ position: static; }

  .pillars{ grid-template-columns: 1fr; border-left: none; border-right: 1px solid var(--ink); }
  .pillar{ min-height: 280px; padding: 28px 20px 32px; }
  .pillar .roman{ font-size: 84px; }

  .method{ grid-template-columns: 1fr; border-left: none; border-right: 1px solid var(--paper-3); }
  .chamber{ min-height: auto; padding: 28px 20px; border-right: none; }
  .chamber .n{ font-size: 96px; margin-bottom: 16px; }

  .proof-intro{ grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .case{ grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .case .ix, .case .disc, .case .body, .case .metric{ grid-column: 1; }
  .case .ix .big{ font-size: 36px; }
  .case .body{ padding-right: 0; }
  .case .body h4{ font-size: 30px; }
  .case .metric{ text-align:left; border-left:none; padding-left:0; padding-top:16px; margin-top:16px; border-top:1px solid var(--paper-3); }
  .case .metric .n{ font-size: 56px; }

  .signal{ padding: 48px 16px; margin: 48px 0 32px; }
  .signal blockquote{ font-size: clamp(26px, 8vw, 40px); }

  .offers{ grid-template-columns: 1fr; }
  .offer{ min-height: auto; padding: 32px 20px; border-right:none; border-bottom:1px solid var(--paper-3); }
  .offer:last-child{ border-bottom:none; }

  .codex{ grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
  .faq summary{ grid-template-columns: 36px 1fr 28px; gap: 12px; }
  .faq summary .q{ font-size: clamp(18px, 5vw, 22px); }
  .faq .a{ padding-left: 48px; font-size: 16px; }

  .oath{ padding: 80px 18px; }
  .oath h2{ font-size: clamp(44px, 14vw, 88px); }
  .oath .post{ font-size: 17px; }
  .oath .actions .cta{ padding: 16px 20px; font-size: 10.5px; }
  .oath .coords-row{ flex-direction:column; align-items:flex-start; gap: 8px; font-size: 9px; }

  /* Pages */
  .page-hero{ padding: 110px var(--edge) 48px; }
  .page-hero .coords{ grid-template-columns: 1fr 1fr; gap: 18px; }
  .page-hero .coords dd{ font-size: 15px; }
  .page-hero .lede{ font-size: 17px; }

  .service-detail, .case-body, .contact-body, .founder-body, .journal-grid{ padding: 48px var(--edge); grid-template-columns: 1fr; gap: 32px; }
  .service-detail .left, .case-body .left{ position: static; }
  .case-body .left{ grid-template-columns: 1fr 1fr; }
  .service-detail .left .roman{ font-size: 96px; }

  .journal-entry{ grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .journal-entry .title{ font-size: 22px; }
  .journal-entry .arr{ display:none; }
  .journal-entry .cat{ display:block; font-size: 10px; }

  .contact-body .right .row-2{ grid-template-columns: 1fr; gap: 20px; }
  .contact-body .right input, .contact-body .right textarea{ font-size: 18px; }

  .founder-body .bio p:first-of-type::first-letter{ font-size: 3.5em; }

  footer{ padding: 48px var(--edge) 32px; }
  footer .colophon{ grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
  footer .colophon .mark-xl{ font-size: 80px; }
  footer .imprint{ grid-template-columns: 1fr; gap: 8px; }
  footer .imprint .c, footer .imprint .r{ text-align:left; }

  .tweaks{ right: 12px; bottom: 12px; min-width: 200px; padding: 14px 16px; }
}