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

/* THE SCROLL DIRECTIVE · v7 unified · 2026-04-24
   Manuscript aesthetic over modern commercial precision. Four-Pillar gate:
   AUTHENTICITY · EDUCATIONAL AUTHORITY · LEGACY · SOVEREIGNTY.
   Iron Laws preserved: §3 gilt dot never animated; §5 box-shadow on physical
   objects + letterpress text-shadow + linear-gradient underline technique
   permitted; §16 ambient motion permitted per v3 nuance. prefers-reduced-motion
   honored everywhere via blanket at file end. */

:root{
  /* Monolith Edition I · 2026 — closed palette, tokenized to legacy var names for backward compat */
  --parchment:        #E8E0CC;
  --parchment-deep:   #E5D7B0;
  --sumi:             #171310;
  --sepia:            #3E3225;
  --sepia-soft:       #6B5937;
  --sepia-whisper:    #A69C82;
  --gilt:             #B89D5E;
  --gilt-deep:        #9C7F3E;
  --rule:             #C8B98E;
  --seal:             #6E1F1B;

  /* Legacy token shims — old build CSS still references these names */
  --bone:        var(--parchment);
  --bone-2:      var(--parchment-deep);
  --bone-3:      var(--rule);
  --bone-4:      var(--sepia-whisper);
  --graphite:    var(--sumi);
  --graphite-2:  var(--sepia);
  --graphite-3:  var(--sepia-soft);
  --obsidian:    var(--sumi);
  --ochre:       var(--gilt);
  --ochre-bright:var(--gilt-deep);

  --paper:   var(--parchment);
  --paper-2: var(--parchment-deep);
  --paper-3: var(--rule);
  --paper-4: var(--sepia-whisper);
  --ink:     var(--sumi);
  --ink-2:   var(--sepia);
  --ink-3:   var(--sepia-soft);
  --slab:    var(--sumi);
  --accent:  var(--gilt);
  --accent-bright: var(--gilt-deep);

  /* Monolith Edition I four-voice typography */
  --serif:      "EB Garamond", "Garamond Premier Pro", Georgia, "Times New Roman", serif;
  --display:    "Cinzel", "Trajan Pro", "Trajan", serif;
  --sans:       "EB Garamond", "Garamond Premier Pro", Georgia, serif; /* manuscript handles UI register */
  --mono:       "Courier Prime", ui-monospace, Menlo, Consolas, monospace;
  --marginalia: "IM Fell English SC", "EB Garamond", serif;

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

/* v7 · WCAG H5 visually-hidden utility — SEO/a11y-only content */
.sr-only{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important;
}

*,*::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; }
/* v8 · Bone Scroll-Paper Background · 2026-04-24
   Cool off-bone (#E8E0CC) + two-layer SVG turbulence (paper grain + vertical fibers). Texture, not gradient (§5 nuance). Site-wide via body. */
body{
  background-color: #E8E0CC;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09  0 0 0 0 0.075  0 0 0 0 0.063  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.008 0.4' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.36  0 0 0 0 0.21  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  background-size: 180px 180px, cover;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-position: 0 0, center;
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  overflow-x:hidden;
  transition: background-color 700ms cubic-bezier(.4,0,.2,1), color 700ms cubic-bezier(.4,0,.2,1);
  font-feature-settings: "onum" 1, "kern" 1, "liga" 1, "dlig" 1;
}


/* AGED INSCRIPTION TYPOGRAPHY · founder directive 2026-04-24.
   Display type and monumental headings carved into parchment.
   Iron Law §5 nuance: these are INSCRIBED/CARVED effects — the type sits INTO
   the surface (letterpress depression), not floating ABOVE (drop shadow).
   Different intent, different visual. */
h1, h2, h3, h4,
.stela .cell .v,
.room-head h3,
.oath h2, .oath h3,
.pillar h3,
.position h2 {
  text-shadow:
    0 1px 0 rgba(237, 225, 195, 0.45),
    0 -1px 0 rgba(23, 19, 16, 0.22);
}
/* Dark-section inversions: letterpress flips (light from above, dark press below) */
.oath h1, .oath h2, .oath h3 {
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 -1px 0 rgba(236, 229, 216, 0.14);
}
::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; }
.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; }

/* v7 · ink-bleed reveal — major headings emerge as ink soaks into parchment */
.reveal--ink{
  opacity: 0;
  filter: blur(4px);
  transform: translateY(24px);
  transition:
    opacity 1.2s cubic-bezier(.2,.7,.2,1),
    filter 1.2s cubic-bezier(.2,.7,.2,1),
    transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.reveal--ink.in{ opacity:1; filter: blur(0); transform: translateY(0); }

/* Auto-promote: every room's h2 gets ink-bleed without explicit class */
.room .room-head h2,
.room > h2{
  opacity: 0;
  filter: blur(3px);
  transform: translateY(16px);
  transition:
    opacity 1s cubic-bezier(.2,.7,.2,1),
    filter 1s cubic-bezier(.2,.7,.2,1),
    transform 1s cubic-bezier(.2,.7,.2,1);
}
.room .room-head h2.in,
.room > h2.in{ opacity:1; filter: blur(0); transform: translateY(0); }

/* v7 · illuminated capital — gilt Cinzel drop-cap on lead paragraphs */
.room .body > p:first-of-type::first-letter,
.room .lede::first-letter{
  font-family: var(--display);
  font-weight: 500;
  font-size: 3.2em;
  line-height: 0.9;
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--accent);
  text-shadow: 0 1px 0 rgba(237,225,195,0.45), 0 -1px 0 rgba(23,19,16,0.22);
}

/* ─── 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 ═══════════════ */

/* 2026-04-23 · monolith-sovereignty fix · was: Worker v4.8 injects
   <aside class="wiele-doctrine-cta wiele-hearing"> as a flow child of .hero
   after </h1>, pushing hero-sub down and colliding with the absolute-
   positioned .slab at top:52%; on mobile this fully occludes the Monolith.
   Hide while stranded inside .hero (selector beats Worker's inline style
   on specificity 0,2,0 > 0,1,0); index.html body-end script relocates the
   node to sit after .ticker-wrap, at which point this selector no longer
   matches and the Worker's default styling cleanly takes over. */
.hero .wiele-doctrine-cta,
.hero > .wiele-doctrine-cta { display: none; }

/* 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; opacity:0; }  /* hero-grid background retired per Iron Law §0.5 (no gradients). Markup retained. */
.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-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; }
.hero-sub.hero-clean{ grid-template-columns: 1fr 1fr; max-width: min(980px, 100%); margin-left:auto; margin-right:auto; }
.hero-sub.hero-clean .coords{ grid-column:1; }
.hero-sub.hero-clean .lede{ grid-column:2; text-align:center; }
.hero-sub.hero-clean .actions{ display:none !important; }
.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 · founder directive 2026-04-24: continuous machine in motion.
   Dual-track seamless marquee · pause on hover · honors prefers-reduced-motion. */
.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); width:100%; }
.ticker-wrap .track{ display:flex; gap:44px; white-space:nowrap; flex:none; padding-right:44px; align-items:center; animation: wiele-ticker 46s linear infinite; will-change: transform; }
.ticker-wrap .track .diamond{ color:var(--accent); }
.ticker-wrap:hover .track{ animation-play-state: paused; }
@keyframes wiele-ticker{ from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce){ .ticker-wrap .track{ animation: none; } }

/* ALIVE · founder directive 2026-04-24: continuous machine in motion.
   Restrained ambient motion across Monolith — breathing slab, shimmering inscription,
   frame crosshair tracking. Iron Law §3 preserved (Gilt seal dot untouched).
   All motion honors prefers-reduced-motion. */
@keyframes wiele-crosshair-pulse{
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.crosshair{ animation: wiele-crosshair-pulse 4.2s ease-in-out infinite; }

@keyframes wiele-edge-drift{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
.frame .edgeL .vlabel, .frame .edgeR .vlabel{ animation: wiele-edge-drift 12s ease-in-out infinite; }
.frame .edgeL .vlabel:nth-child(2), .frame .edgeR .vlabel:nth-child(2){ animation-delay: 6s; }

@media (prefers-reduced-motion: reduce){
  .crosshair,
  .frame .edgeL .vlabel, .frame .edgeR .vlabel{ animation: none !important; }
}

/* 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); }
/* v4 · 2026-04-24 — ensure disc label and paragraph flip against sumi fill */
.pillar:hover .disc{ color: var(--paper); }
.pillar:hover p{ color: var(--paper-2, #E5D7B0); }
.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; }

/* v7 · Roman numeral evolves to ghost watermark on hover */
.pillar .roman{
  transition: transform .6s cubic-bezier(.2,.7,.2,1),
              opacity .6s cubic-bezier(.2,.7,.2,1),
              color .5s;
  transform-origin: left top;
}
.pillar:hover .roman{
  transform: scale(1.08) translateX(-4px);
  opacity: 0.92;
}
/* v7 · Arrow draw-in — letter-spacing widens with translate */
.pillar .read .arr{
  display: inline-block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1),
              letter-spacing .5s cubic-bezier(.2,.7,.2,1);
}
.pillar:hover .read .arr{
  transform: translateX(12px);
  letter-spacing: .04em;
}

/* 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); }

/* v7 · chamber heading — gilt underline draw-in on hover */
.chamber h3{
  position: relative;
  padding-bottom: 8px;
}
.chamber h3::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.chamber:hover h3::after{ transform: scaleX(0.4); }

/* 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; }
/* v7 · case card wax-seal sigil + background shift */
.case::after{
  content: "";
  position: absolute;
  top: 24px; right: 24px;
  width: 14px; height: 14px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .5s cubic-bezier(.2,.7,.2,1),
              transform .5s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.case:hover::after{ opacity: 0.88; transform: scale(1); }
.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); }
.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; }

/* v7 · parchment-unfurl for any <details class="faq"> that uses the HTML5 pattern */
details.faq{ overflow: hidden; }
details.faq > *:not(summary){
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .5s cubic-bezier(.2,.7,.2,1),
              transform .5s cubic-bezier(.2,.7,.2,1);
}
details.faq[open] > *:not(summary){
  opacity: 1;
  transform: translateY(0);
}
details.faq summary .sign{
  display: inline-block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), color .3s;
}
details.faq[open] summary .sign{ transform: rotate(45deg); }

/* v7 · illuminated section divider — hairline · diamond · hairline, draws outward on scroll-in */
hr.wiele-rule{
  position: relative;
  border: 0;
  height: 1px;
  background-color: transparent;
  margin: 48px auto;
  width: 100%;
  max-width: 640px;
  overflow: visible;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M6 1 L11 6 L6 11 L1 6 Z' fill='none' stroke='%23B89D5E' stroke-width='1'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 12px 12px;
}
hr.wiele-rule::before,
hr.wiele-rule::after{
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 24px);
  height: 1px;
  background-color: var(--rule, #C8B98E);
  transform: scaleX(0);
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
hr.wiele-rule::before{ left: 0; transform-origin: right center; }
hr.wiele-rule::after{ right: 0; transform-origin: left center; }
hr.wiele-rule.in::before,
hr.wiele-rule.in::after{ transform: scaleX(1); }

/* v7 · body prose link — gilt underline draw-in (single-color linear-gradient technique, permitted per §5.3) */
.room .body a,
.room p a,
article a,
.lede a{
  position: relative;
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(to right, var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  padding-bottom: 1px;
  transition: background-size .6s cubic-bezier(.2,.7,.2,1), color .4s;
}
.room .body a:hover,
.room p a:hover,
article a:hover,
.lede a:hover{
  background-size: 100% 1px;
  color: var(--accent);
}

/* v7 · light-to-dark scroll progression — each room one tonal step deeper */
.room#position{ background-color: var(--parchment, #E8E0CC); }
.room#pillars{ background-color: color-mix(in srgb, var(--parchment, #E8E0CC) 92%, var(--sumi, #171310) 8%); }
.room#method{   background-color: color-mix(in srgb, var(--parchment, #E8E0CC) 84%, var(--sumi, #171310) 16%); }
.room#proof{    background-color: color-mix(in srgb, var(--parchment, #E8E0CC) 76%, var(--sumi, #171310) 24%); }
.room#offers{   background-color: color-mix(in srgb, var(--parchment, #E8E0CC) 68%, var(--sumi, #171310) 32%); }
.room#codex{    background-color: color-mix(in srgb, var(--parchment, #E8E0CC) 60%, var(--sumi, #171310) 40%); }
.room{ transition: background-color .6s linear; }
.room#proof .body, .room#proof p,
.room#offers .body, .room#offers p,
.room#codex .body, .room#codex p{
  color: var(--ink-2, #3E3225);
}

/* v7 · 3D card lift — every interactive surface earns sculptural depth on hover */
.pillar, .chamber, .offer, .case{
  box-shadow: 0 1px 0 rgba(184,157,94,0.08);
  transition:
    background .5s ease,
    transform .4s cubic-bezier(.2,.7,.2,1),
    box-shadow .4s cubic-bezier(.2,.7,.2,1),
    color .3s,
    padding .4s;
}
.chamber:hover,
.offer:hover,
.case:hover{
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(184,157,94,0.16),
    0 8px 20px rgba(23,19,16,0.16),
    0 20px 48px rgba(23,19,16,0.10);
}
.pillar:hover{
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(184,157,94,0.16),
    0 12px 28px rgba(23,19,16,0.22),
    0 28px 64px rgba(23,19,16,0.14);
}

/* v7 · scroll-script gilt progress hairline — left edge, grows bottom-up with scroll */
#scrollFill{
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 0;
  background-color: var(--accent, #B89D5E);
  z-index: 250;
  pointer-events: none;
  transition: height .15s linear, opacity .4s;
  opacity: 0.72;
}
#scrollFill::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 7px; height: 7px;
  background-color: var(--accent, #B89D5E);
  border-radius: 50%;
  opacity: 0.92;
}
@media (max-width: 768px){
  #scrollFill{ display: none; }
}

/* 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); }
.oath::before{ content:""; position:absolute; inset:18px; border: 1px solid rgba(236,229,216,.14); pointer-events:none; }
.oath .pre{ font-family:var(--mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color: rgba(236,229,216,.55); margin-bottom: 48px; }
.oath h2{ font-size: clamp(56px, 13vw, 240px); line-height:.86; letter-spacing:-.036em; color: var(--paper); }
.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; }
.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); }
.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; }

/* ═══════════════ 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: var(--sumi); 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.hero-clean{ grid-template-columns: 1fr 1fr; }
  .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)
   ═══════════════════════════════════════════════════════════ */

/* === Tablet refinements · v2 · Edition I === */
@media (min-width: 740px) and (max-width: 1099px){
  /* Touch target compliance — all interactive elements ≥44×44px */
  .nav ul a, .pillar, .chamber, .offer, .case, .cta,
  button, .menu-btn, summary, .nav .menu-btn{
    min-height: 44px;
  }
  .nav ul a{ padding: 8px 4px; }

  /* Frame top/bot bars: keep location text but tighten */
  .frame .bar{ padding: 0 24px; font-size: 10px; letter-spacing:.16em; }

  /* Pricing/diagnostic blocks: prevent overflow on iPad portrait */
  table{ font-size: 13px; }

  /* Schema-strong content hubs need readable line measure */
  p, .body p{ max-width: 64ch; }

  /* Footer columns 1+1+1+full-row mark stays from 1099 block */
}

@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; }
  .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; }
}

/* ============================================================
   v13 · PLATE ATLAS · MASTER SPEC §8 CONTRACT
   Ten engraved-manuscript plates per §6 atlas
   Plate I (landing hero) uses --landing modifier
   Plates II–X (interior rooms) use base styling
   ============================================================ */

.wiele-plate {
  display: block;
  width: 100%;
  max-width: 920px;
  margin: var(--wiele-space-7, 4rem) auto;
  padding: 24px;
  background: var(--wiele-parchment-deep);
  border: 1px solid var(--wiele-rule);
  position: relative;
  /* No transition by default · hover override below */
}

.wiele-plate__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--wiele-sepia-whisper);
}

.wiele-plate__caption {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--wiele-font-marginalia);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--wiele-sepia-soft);
}

.wiele-plate__caption--roman {
  font-family: var(--wiele-font-technical);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--wiele-sepia-soft);
}

/* Corner brackets — gilt hairlines, top-left + bottom-right asymmetric */
.wiele-plate::before,
.wiele-plate::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--wiele-gilt);
}
.wiele-plate::before {
  top: 8px;
  left: 8px;
  border-right: 0;
  border-bottom: 0;
}
.wiele-plate::after {
  bottom: 8px;
  right: 8px;
  border-left: 0;
  border-top: 0;
}

/* Hover — subtle parchment-deep darkening · no image scaling */
@media (hover: hover) {
  .wiele-plate {
    transition: background 200ms ease;
  }
  .wiele-plate:hover {
    background: #DDC99A; /* parchment-darker · §3 token equivalent */
  }
}

/* --landing modifier — Plate I sits at hero centre, absolute, scales to slab footprint */
.wiele-plate--landing {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(360px, 42vw, 720px);
  max-width: none;
  margin: 0;
  z-index: 2;
  /* Drop-shadow grounding inherited from prior .slab styling — physical-object dimension permitted by Iron Law §5.2 */
  filter: drop-shadow(0 24px 60px rgba(23,19,16,0.22))
          drop-shadow(0 6px 16px rgba(23,19,16,0.16));
}

.wiele-plate--landing .wiele-plate__img {
  aspect-ratio: 4 / 3;
}

@media (prefers-reduced-motion: reduce) {
  .wiele-plate { transition: none; }
}

/* Inline sigil — for marginalia in .room-head and .footer ornaments */
.wiele-sigil {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  color: var(--wiele-sepia-soft);
}

/* Sigil flanking pattern for .room-head — sigil · section number · sigil */
.room-head__sigil-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}
.room-head__sigil-pair .wiele-sigil { color: var(--wiele-sepia-whisper); }

/* v7 · reduced-motion blanket — every v7 transition respects prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .reveal--ink,
  .room .room-head h2,
  .room > h2,
  .pillar, .pillar .roman, .pillar .read .arr,
  .chamber, .chamber h3::after,
  .case, .case::after,
  .offer,
  .room,
  hr.wiele-rule::before,
  hr.wiele-rule::after,
  details.faq > *:not(summary),
  details.faq summary .sign,
  .room .body a, .room p a, article a, .lede a,
  #scrollFill{
    transition: none !important;
    animation: none !important;
  }
  .reveal--ink,
  .room .room-head h2,
  .room > h2{ opacity: 1; filter: none; transform: none; }
  hr.wiele-rule::before,
  hr.wiele-rule::after{ transform: scaleX(1); }
  /* Light-to-dark neutralised — all rooms stay on parchment for reduced-motion users */
  .room#pillars, .room#method, .room#proof, .room#offers, .room#codex{
    background-color: var(--parchment, #E8E0CC);
  }
}