/* ============================================================
   COREHOLD — corehold.systems
   Deed No. CH-2026-001 · Owned, not rented.
   ------------------------------------------------------------
   Contents
   01  Fonts (self-hosted)
   02  Tokens
   03  Base & typography
   04  Utilities (mono labels, reveals, container)
   05  Header & navigation
   06  Spine (levelling staff, fixed left)
   07  Cursor (surveyor's reticle, desktop only)
   08  CH 00 — Arrival
   09  CH 01 — The Tenancy (pinned ledger)
   10  Ink band — aftermath + CH 02 The Position
   11  CH 03 — The Method (horizontal sheets)
   12  CH 04 — The Commissions
   13  CH 05 — The Deed
   14  CH 06 — The Door + footer
   15  Motion guards (reduced motion, no-JS)
   ============================================================ */

/* ---- 01 · Fonts ------------------------------------------- */
@font-face{
  font-family:"Fraunces";
  src:url("../assets/fonts/fraunces-latin-standard-normal.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("../assets/fonts/fraunces-latin-standard-italic.woff2") format("woff2-variations");
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Spline Sans Mono";
  src:url("../assets/fonts/spline-sans-mono-latin-400-normal.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Spline Sans Mono";
  src:url("../assets/fonts/spline-sans-mono-latin-500-normal.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* ---- 02 · Tokens ------------------------------------------ */
:root{
  --paper:#F1EADB;        /* bone — the page */
  --plaster:#E7DEC9;      /* pressed panels */
  --ink:#211A12;          /* warm ink — type on paper */
  --ink-deep:#17120C;     /* the ink chapters' ground */
  --bone:#EFE7D5;         /* type on ink */
  --khaki:#8B7A5C;        /* annotations, dimensions */
  --khaki-ink:#A6957A;    /* annotations on ink ground */
  --line:#D8CCB2;         /* hairlines on paper */
  --line-ink:rgba(239,231,213,.16); /* hairlines on ink */
  --oxide:#B04A1E;        /* the stamp, on paper */
  --oxide-bright:#D2622A; /* the stamp, on ink / the mark */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --mono:"Spline Sans Mono","SFMono-Regular",Consolas,monospace;
  --ease-press:cubic-bezier(.3,.7,.2,1);
  --pad:clamp(20px,5vw,72px);
  --spine-x:clamp(16px,3.4vw,44px);
}

/* ---- 03 · Base -------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-optical-sizing:auto;
  font-size:clamp(16px,1.05vw + 10px,18px); line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
button{font:inherit; background:none; border:0; padding:0; color:inherit; cursor:pointer}
::selection{background:var(--oxide); color:var(--paper)}
:focus-visible{outline:2px solid var(--oxide); outline-offset:4px}
.skip{position:fixed; left:-200vw; top:12px; z-index:200; background:var(--ink); color:var(--paper);
  padding:10px 18px; font-family:var(--mono); font-size:.75rem; letter-spacing:.1em}
.skip:focus-visible{left:12px}

/* paper grain over everything, incl. ink chapters */
body::after{
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:var(--grain,.4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.09 0 0 0 0 0.06 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 04 · Utilities --------------------------------------- */
.wrap{max-width:1240px; margin:0 auto; padding-left:calc(var(--spine-x) + clamp(18px,3vw,56px)); padding-right:var(--pad)}
.label{font-family:var(--mono); font-weight:400; font-size:clamp(.62rem,.55rem + .3vw,.72rem);
  letter-spacing:.18em; text-transform:uppercase; color:var(--khaki)}
.on-ink .label,.ink-band .label{color:var(--khaki-ink)}
.rule{border:0; border-top:1px solid var(--line); margin:0}

/* masked line reveals — hidden only when JS is present */
.line{display:block; overflow:hidden}
.line>span{display:inline-block; will-change:transform}
html.js .line>span{transform:translateY(115%)}
html.js .fade{opacity:0}
html.js.reduced .line>span{transform:none}
html.js.reduced .fade{opacity:1}

/* ---- 05 · Header ------------------------------------------ */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(14px,2.4vh,22px) var(--pad);
  transition:color .45s var(--ease-press);
}
.site-head .brand{display:flex; align-items:center; gap:12px}
.site-head .brand svg{width:30px; height:30px}
.site-head .brand .name{font-family:var(--serif); font-weight:600; font-size:1.02rem;
  letter-spacing:.24em; text-transform:uppercase; font-variation-settings:"opsz" 60}
.site-head .brand .mk-br{stroke:var(--oxide)}
.site-head .brand .mk-sq{fill:var(--oxide)}
.site-head.on-ink .brand .mk-br{stroke:var(--oxide-bright)}
.site-head.on-ink .brand .mk-sq{fill:var(--oxide-bright)}
.site-nav{display:flex; gap:clamp(16px,2.6vw,34px); align-items:center}
.site-nav a{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--khaki); transition:color .3s var(--ease-press); padding:6px 0}
.site-nav a:not(.go){position:relative}
.site-nav a:not(.go)::after{content:""; position:absolute; left:0; bottom:1px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease-press)}
.site-nav a:not(.go):hover::after{transform:scaleX(1); transform-origin:left}
.site-nav a:hover{color:var(--oxide)}
.site-nav a.go{color:var(--oxide); border:1px solid currentColor; padding:8px 16px;
  transition:all .3s var(--ease-press)}
.site-nav a.go:hover{background:var(--oxide); color:var(--paper)}
/* over ink chapters */
.site-head.on-ink{color:var(--bone)}
.site-head.on-ink .site-nav a{color:var(--khaki-ink)}
.site-head.on-ink .site-nav a:hover{color:var(--oxide-bright)}
.site-head.on-ink .site-nav a.go{color:var(--oxide-bright)}
.site-head.on-ink .site-nav a.go:hover{background:var(--oxide-bright); color:var(--ink-deep)}
@media(max-width:720px){ .site-nav a:not(.go){display:none} }

/* ---- 06 · Spine ------------------------------------------- */
.spine{position:fixed; top:0; bottom:0; left:var(--spine-x); z-index:110; width:1px; pointer-events:none}
.spine .track{position:absolute; inset:0; width:1px; background:
  repeating-linear-gradient(to bottom, var(--khaki) 0 5px, transparent 5px 11px); opacity:.35}
.spine .fill{position:absolute; top:0; left:0; width:1px; height:100%;
  background:var(--oxide); transform-origin:top; transform:scaleY(0)}
.spine .marks{position:absolute; inset:0}
.spine .mark{position:absolute; left:-3px; width:7px; height:1px; background:var(--khaki);
  pointer-events:auto}
.spine .mark i{position:absolute; left:12px; top:-7px; font-style:normal; font-family:var(--mono);
  font-size:.58rem; letter-spacing:.12em; color:var(--khaki); opacity:.75; transition:color .3s,opacity .3s}
.spine .mark.live i{color:var(--oxide); opacity:1}
.on-ink-page .spine .track{opacity:.3}
.on-ink-page .spine .fill{background:var(--oxide-bright)}
@media(max-width:767px){ .spine .mark i{display:none} }

/* ---- 07 · Cursor ------------------------------------------ */
html.fine-cursor body{cursor:none}
html.fine-cursor a,html.fine-cursor button{cursor:none}
.reticle{position:fixed; left:0; top:0; z-index:150; pointer-events:none; width:0; height:0;
  opacity:0; transition:opacity .3s}
.reticle.alive{opacity:1}
.reticle .x,.reticle .y{position:absolute; background:var(--khaki); opacity:.85}
.reticle .x{width:22px; height:1px; left:-11px; top:0}
.reticle .y{width:1px; height:22px; left:0; top:-11px}
.reticle .dot{position:absolute; width:3px; height:3px; left:-1.5px; top:-1.5px; background:var(--oxide)}
.reticle .coords{position:absolute; left:14px; top:10px; font-family:var(--mono); font-size:.56rem;
  letter-spacing:.1em; color:var(--khaki); white-space:nowrap}
.reticle .br{position:absolute; width:34px; height:34px; left:-17px; top:-17px; opacity:0;
  transform:scale(.6); transition:opacity .25s var(--ease-press),transform .25s var(--ease-press)}
.reticle .br::before,.reticle .br::after{content:""; position:absolute; width:9px; height:9px; border:solid var(--oxide)}
.reticle .br::before{left:0; top:0; border-width:1.5px 0 0 1.5px}
.reticle .br::after{right:0; bottom:0; border-width:0 1.5px 1.5px 0}
.reticle.hot .br{opacity:1; transform:scale(1)}
.reticle.hot .x,.reticle.hot .y{opacity:.3}
.on-ink-page .reticle .x,.on-ink-page .reticle .y{background:var(--khaki-ink)}
.on-ink-page .reticle .coords{color:var(--khaki-ink)}

/* ---- 07b · Ink layer, seal, meter, develop ------------------ */
#inkCanvas{position:fixed; inset:0; z-index:85; pointer-events:none; mix-blend-mode:multiply;
  opacity:.85; filter:blur(5px)}
#develop{position:fixed; inset:0; z-index:300; background:var(--ink-deep); pointer-events:none}
#develop .dv-line{position:absolute; left:50%; top:50%; width:min(46vw,520px); height:1px;
  background:var(--bone); transform:translate(-50%,-50%) scaleX(0); opacity:.9}

#seal{position:fixed; right:calc(var(--pad)*.55); bottom:84px; z-index:104; width:96px; height:96px;
  color:var(--ink); opacity:0; pointer-events:none; perspective:400px}
#seal svg{width:100%; height:100%}
.seal-t{font-family:var(--mono); font-size:9.2px; letter-spacing:.16em; fill:currentColor}
.on-ink-page #seal{color:var(--bone)}
@media(max-width:900px){ #seal{width:66px; height:66px; right:12px; bottom:16px} }
/* the seal, landed on the deed */
.seal-slot{position:absolute; top:-30px; right:7%; width:104px; height:104px; color:var(--oxide);
  transform:rotate(-9deg); z-index:3}
.seal-slot svg{width:100%; height:100%}
.seal-slot .splat{position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%;
  background:var(--oxide); opacity:0}
@media(max-width:640px){ .seal-slot{width:74px; height:74px; top:-22px; right:4%} }

#meter{position:fixed; left:calc(var(--spine-x) + 14px); bottom:16px; z-index:104; opacity:0;
  font-size:.56rem; transition:color .4s}
#meter.owned{color:var(--oxide)}
.on-ink-page #meter{color:var(--khaki-ink)}
.on-ink-page #meter.owned{color:var(--oxide-bright)}
@media(max-width:900px){ #meter{display:none} }

/* velocity skew + weight-build hooks */
.skewable{transform:skewY(var(--skew,0deg)); will-change:transform}

/* ---- 08 · CH 00 Arrival ------------------------------------ */
.arrival{min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  position:relative; padding-top:13vh; padding-bottom:10vh}
.hero-mark{margin-bottom:clamp(20px,3.2vh,34px)}
.hero-mark svg{width:clamp(40px,4.6vw,56px); height:auto}
.hero-mark .pm{stroke:var(--oxide); stroke-width:6.5}
.hero-mark .pm-sq{fill:var(--oxide)}
html.js:not(.reduced) .hero-mark .pm-sq{opacity:0}
.arrival .eyebrow{margin-bottom:clamp(26px,4vh,44px)}
.arrival h1{
  font-weight:400; font-variation-settings:"opsz" 144; letter-spacing:-.022em;
  font-size:clamp(2.35rem,6.6vw,5.5rem); line-height:1.04;
}
.arrival h1 .beat2{margin-top:clamp(14px,2.6vh,26px)}
.arrival h1 em{font-style:italic; color:var(--oxide); font-variation-settings:"opsz" 144}
.arrival .sub{margin-top:clamp(28px,4.5vh,48px); max-width:52ch; font-size:clamp(1rem,1.25vw,1.16rem);
  color:#54483A; line-height:1.75}
.arrival .groundline{margin-top:clamp(30px,5vh,54px); height:1px; background:var(--ink);
  transform-origin:left; max-width:520px}
html.js .arrival .groundline{transform:scaleX(0)}
html.js.reduced .arrival .groundline{transform:none}
.arrival .cue{position:absolute; bottom:clamp(20px,4vh,40px); left:calc(var(--spine-x) + clamp(18px,3vw,56px));
  display:flex; align-items:center; gap:12px}
.arrival .cue .tick{width:1px; height:26px; background:var(--oxide); animation:cue 2.2s var(--ease-press) infinite}
@keyframes cue{0%,100%{transform:scaleY(.35); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}}
.arrival .geo{position:absolute; bottom:clamp(20px,4vh,40px); right:var(--pad); text-align:right}
/* faint ruler ticks, right edge */
.arrival::before{content:""; position:absolute; top:10%; bottom:10%; right:calc(var(--pad)/2); width:9px;
  background:repeating-linear-gradient(to bottom, transparent 0 23px, rgba(139,122,92,.35) 23px 24px);
  pointer-events:none}
@media(max-width:720px){ .arrival .geo{display:none} .arrival::before{display:none} }

/* ---- 09 · CH 01 The Tenancy -------------------------------- */
.tenancy{position:relative}
.tenancy .stage{min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:12vh; padding-bottom:8vh; position:relative}
/* the poured ink that ends the chapter (desktop pinned scene only) */
.ink-pour{position:absolute; top:-2px; bottom:-2px; left:50%; width:100vw; margin-left:-50vw;
  background:var(--ink-deep); z-index:4; pointer-events:none; clip-path:inset(0 0 100% 0);
  will-change:clip-path}
@media(min-width:901px){ .ink-pour{filter:url(#pourRough)} }
html.reduced .ink-pour{display:none}
/* a decade happening to the paper */
.age-veil{position:absolute; top:-2px; bottom:-2px; left:50%; width:100vw; margin-left:-50vw;
  z-index:3; pointer-events:none; opacity:0;
  background:radial-gradient(120% 90% at 50% 42%, rgba(122,88,40,.05) 40%, rgba(84,56,22,.26) 82%, rgba(56,36,14,.42) 100%)}
html.reduced .age-veil{display:none}
.renews{position:absolute; inset:0; pointer-events:none}
.rn{position:absolute; font-family:var(--mono); font-size:.62rem; font-weight:500; letter-spacing:.2em;
  color:var(--oxide); border:1.5px solid var(--oxide); padding:4px 8px; opacity:0; white-space:nowrap}
html.reduced .rn,html:not(.js) .rn{display:none}
.rn1{top:26%; right:-14px; transform:rotate(7deg)}
.rn2{top:53%; left:-10px; transform:rotate(-6deg)}
.rn3{top:76%; right:6%; transform:rotate(4deg)}
.t-grid{display:grid; grid-template-columns:minmax(300px,470px) 1fr; gap:clamp(30px,6vw,110px);
  align-items:start; margin-top:clamp(26px,4vh,46px)}
.t-head{margin-bottom:clamp(22px,3.5vh,38px)}
.t-size{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px}
.chip{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--khaki); border:1px solid var(--line); padding:7px 12px;
  transition:all .3s var(--ease-press)}
.chip:hover{color:var(--oxide); border-color:var(--oxide)}
.chip.is-on{background:var(--oxide); border-color:var(--oxide); color:var(--paper)}
.t-head h2{font-weight:430; font-variation-settings:"opsz" 120; letter-spacing:-.015em;
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.12; max-width:20ch; text-wrap:balance}
.ledger{border:1px solid var(--line); background:var(--plaster);
  padding:clamp(18px,2.4vw,30px); padding-bottom:calc(clamp(18px,2.4vw,30px) + 14px);
  position:relative;
  /* torn receipt edge */
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),
    96% 100%,92% calc(100% - 9px),88% 100%,84% calc(100% - 9px),80% 100%,
    76% calc(100% - 9px),72% 100%,68% calc(100% - 9px),64% 100%,
    60% calc(100% - 9px),56% 100%,52% calc(100% - 9px),48% 100%,
    44% calc(100% - 9px),40% 100%,36% calc(100% - 9px),32% 100%,
    28% calc(100% - 9px),24% 100%,20% calc(100% - 9px),16% 100%,
    12% calc(100% - 9px),8% 100%,4% calc(100% - 9px),0 100%)}
.ledger::before,.ledger::after{content:""; position:absolute; width:14px; height:14px; border:solid var(--khaki); opacity:.6}
.ledger::before{top:6px; left:6px; border-width:1.5px 0 0 1.5px}
.ledger::after{top:6px; right:6px; border-width:1.5px 1.5px 0 0}
.ledger .l-title{font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--khaki); padding-bottom:12px; border-bottom:1px dashed var(--line); margin-bottom:6px}
.ledger .row{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  font-family:var(--mono); font-size:clamp(.7rem,.62rem + .3vw,.8rem); letter-spacing:.02em;
  padding:8px 0; border-bottom:1px dashed var(--line); color:#4A4034}
.ledger .row .amt{font-weight:500; white-space:nowrap}
html.js .ledger .row{opacity:0; transform:translateY(8px)}
html.js.reduced .ledger .row{opacity:1; transform:none}
.ledger .total{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  font-family:var(--mono); font-size:.8rem; font-weight:500; letter-spacing:.04em; padding-top:12px; color:var(--ink)}
.ledger .total .amt{color:var(--oxide)}
.decade{padding-top:6px}
.decade .yr-label{margin-bottom:10px}
.decade .yr{font-family:var(--mono); font-weight:500; font-size:clamp(2.6rem,6vw,4.4rem);
  letter-spacing:-.03em; line-height:1; color:var(--ink)}
.decade .yr small{font-size:.35em; letter-spacing:.14em; color:var(--khaki); font-weight:400}
.decade .paid-label{margin:clamp(20px,3.5vh,36px) 0 10px}
.decade .paid{font-family:var(--mono); font-weight:500; font-size:clamp(2.2rem,5.6vw,4.2rem);
  letter-spacing:-.03em; line-height:1.05; color:var(--oxide); font-variant-numeric:tabular-nums}
.decade .paid-sub{margin-top:14px; font-style:italic; font-size:clamp(1rem,1.4vw,1.2rem); color:#54483A}
/* compact single-column scene so the pinned ledger + pour fit most phones */
@media(max-width:900px){
  .tenancy .stage{justify-content:center; padding-top:11vh; padding-bottom:5vh}
  .t-grid{grid-template-columns:1fr; gap:20px; margin-top:14px}
  .t-head{margin-bottom:12px}
  .t-head h2{font-size:clamp(1.35rem,5.6vw,1.8rem); line-height:1.2}
  .ledger{padding:14px; padding-bottom:26px}
  .ledger .row{padding:5px 0; font-size:.66rem}
  .ledger .l-title{padding-bottom:8px; margin-bottom:2px}
  .ledger .total{padding-top:8px; font-size:.72rem}
  .decade{display:grid; grid-template-columns:auto 1fr; column-gap:22px; align-items:end; padding-top:0}
  .decade .yr-label{margin-bottom:4px}
  .decade .yr{font-size:2rem}
  .decade .paid-label{margin:0 0 4px}
  .decade .paid{font-size:clamp(1.5rem,7vw,2.1rem)}
  .decade .paid-sub{margin-top:8px; font-size:.86rem; grid-column:1 / -1}
  /* second-pass compaction when the scene almost fits */
  .tenancy .stage.tight{padding-top:9vh; padding-bottom:3vh}
  .stage.tight .t-grid{gap:14px; margin-top:8px}
  .stage.tight .t-head{margin-bottom:8px}
  .stage.tight .t-head h2{font-size:1.22rem}
  .stage.tight .ledger{padding:12px; padding-bottom:22px}
  .stage.tight .ledger .row{padding:3.5px 0; font-size:.62rem}
  .stage.tight .decade .yr{font-size:1.7rem}
  .stage.tight .decade .paid{font-size:clamp(1.3rem,6vw,1.7rem)}
  .stage.tight .decade .paid-sub{font-size:.8rem; margin-top:5px}
}

/* ---- 10 · Ink band ----------------------------------------- */
.ink-band{background:var(--ink-deep); color:var(--bone); position:relative}
/* a lit room, not a flat black */
.ink-band::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 38% 30%, rgba(239,231,213,.05), transparent 64%);
  animation:breathe 14s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.55; transform:translateY(-2%)}to{opacity:1; transform:translateY(3%)}}
@media (prefers-reduced-motion: reduce){ .ink-band::before{animation:none} }
.ink-band>*{position:relative}
/* torn paper edge where the dark chapter ends */
.tear{height:26px; background:var(--paper); margin-bottom:-1px;
  clip-path:polygon(0 100%,100% 100%,100% 58%,96.5% 22%,93% 64%,89% 8%,85.5% 52%,82% 18%,78% 70%,74% 30%,
  70% 62%,66% 4%,62% 48%,58% 26%,54% 74%,50% 12%,46% 56%,42% 34%,38% 68%,34% 10%,30% 50%,26% 28%,
  22% 66%,18% 16%,14% 58%,10% 36%,6% 62%,3% 20%,0 55%)}
.aftermath{min-height:100svh; display:flex; align-items:center}
.aftermath .big{font-weight:380; font-variation-settings:"opsz" 144; letter-spacing:-.018em;
  font-size:clamp(2.2rem,6vw,5rem); line-height:1.12; max-width:18ch; text-wrap:balance}
.aftermath .big em{font-style:italic; color:var(--oxide-bright)}
.aftermath .after-note{margin-top:clamp(24px,4vh,40px); max-width:44ch; color:#B9AE97; font-size:1.02rem}
.position{padding-block:clamp(70px,12vh,130px) clamp(90px,15vh,150px)}
.position h2{font-weight:400; font-variation-settings:"opsz" 130; letter-spacing:-.015em;
  font-size:clamp(1.9rem,4vw,3.3rem); line-height:1.1; max-width:22ch; margin:18px 0 clamp(30px,5vh,50px); text-wrap:balance}
.position h2 em{font-style:italic; color:var(--oxide-bright)}
.chart-frame{border:1px solid var(--line-ink); padding:clamp(14px,2.6vw,34px); position:relative; background:rgba(239,231,213,.02)}
.chart-frame::before,.chart-frame::after{content:""; position:absolute; width:14px; height:14px; border:solid var(--khaki-ink); opacity:.55}
.chart-frame::before{top:6px; left:6px; border-width:1.5px 0 0 1.5px}
.chart-frame::after{bottom:6px; right:6px; border-width:0 1.5px 1.5px 0}
.chart-frame svg{width:100%; height:auto}
.chart-frame text{font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase}
.chart-caption{margin-top:16px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.position .pull{margin-top:clamp(44px,8vh,80px); font-style:italic; font-weight:350;
  font-variation-settings:"opsz" 90; font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.3;
  max-width:24ch; border-left:2px solid var(--oxide-bright); padding-left:clamp(16px,2.4vw,28px); text-wrap:balance}

/* ---- 11 · CH 03 The Method --------------------------------- */
.method{position:relative; background:var(--paper); overflow-x:clip}
.m-rail{position:absolute; bottom:clamp(20px,3.4vh,34px); right:var(--pad); z-index:5}

/* -- the pinned metamorphosis stage (all sizes when JS drives it) -- */
.m-stage{display:none}
html.js:not(.reduced) .m-stage{display:flex; align-items:center; min-height:100svh}
html.js:not(.reduced) .m-track{display:none}
.ms-inner{display:grid; grid-template-columns:minmax(320px,480px) 1fr;
  gap:clamp(40px,6vw,120px); align-items:center; width:100%}
.ms-copy{position:relative; min-height:400px}
.ms-block{position:absolute; inset:0; opacity:0; pointer-events:none}
.ms-block.is-on{pointer-events:auto}
html.js.reduced .ms-block{position:static; opacity:1}
.ms-block .mv{margin-bottom:16px}
.ms-block h3{font-weight:420; font-variation-settings:"opsz" 132; letter-spacing:-.018em;
  font-size:clamp(2.3rem,4.4vw,4rem); line-height:1.02}
.ms-block .m-sub{font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--oxide); margin-top:10px}
.ms-block p:last-child{margin-top:clamp(18px,3vh,28px); max-width:44ch; color:#4A4034;
  font-size:clamp(.98rem,1.15vw,1.12rem)}
.ms-draw{position:relative;
  background-image:
    repeating-linear-gradient(to right, rgba(33,26,18,.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to bottom, rgba(33,26,18,.035) 0 1px, transparent 1px 44px)}
.ms-draw svg{width:min(100%,620px); height:auto; margin-inline:auto}
.ms-t{font-family:var(--mono); font-size:11px; letter-spacing:.14em; fill:var(--khaki)}
.ms-annos{position:relative; height:22px; margin-top:6px; text-align:center}
.ms-anno{position:absolute; inset:0; opacity:0; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--khaki)}
.ms-anno.is-on{opacity:1}

/* -- mobile & reduced & no-JS: stacked sheets -- */
.m-track{display:block}
.m-panel{min-height:0; padding:clamp(48px,9vh,80px) 0; display:flex; align-items:center}
.m-panel+.m-panel{border-top:1px solid var(--line)}
.m-inner{display:grid; grid-template-columns:minmax(300px,560px) minmax(260px,380px);
  gap:clamp(30px,6vw,110px); align-items:center; width:100%}
.m-copy .mv{margin-bottom:16px}
.m-copy h3{font-weight:420; font-variation-settings:"opsz" 132; letter-spacing:-.018em;
  font-size:clamp(2.3rem,5vw,4rem); line-height:1.02}
.m-copy .m-sub{font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--oxide); margin-top:10px}
.m-copy p{margin-top:clamp(18px,3vh,28px); max-width:44ch; color:#4A4034; font-size:clamp(.98rem,1.2vw,1.12rem)}
.m-ill svg{width:100%; height:auto; overflow:hidden}
.m-ill .anno{font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; fill:var(--khaki)}
@media(max-width:1023px){
  .m-inner{grid-template-columns:1fr; gap:30px}
  .m-ill{max-width:340px}
  .m-rail{display:none}
  /* stacked metamorphosis: copy above, drawing below, sized to share the screen */
  html.js:not(.reduced) .m-stage{padding-top:76px; padding-bottom:10px; box-sizing:border-box}
  .ms-inner{grid-template-columns:1fr; gap:14px; align-content:center}
  .ms-copy{min-height:370px}
  .ms-block h3{font-size:clamp(1.9rem,7.4vw,2.4rem)}
  .ms-block p:last-child{margin-top:14px}
  .ms-draw svg{width:min(100%,42svh)}
}
@media(max-width:1023px) and (max-height:700px){
  .ms-copy{min-height:330px}
  .ms-draw svg{width:min(100%,36svh)}
}
html.reduced .m-rail{display:none}

/* ---- 12 · CH 04 The Commissions ---------------------------- */
.commissions{padding-block:clamp(90px,16vh,170px); border-top:1px solid var(--line)}
.commissions h2{font-weight:410; font-variation-settings:"opsz" 138; letter-spacing:-.018em;
  font-size:clamp(2rem,4.6vw,3.8rem); line-height:1.08; max-width:20ch; margin-top:18px; text-wrap:balance}
.commissions h2 em{font-style:italic; color:var(--oxide)}
.commissions .c-para{margin-top:clamp(20px,3.5vh,32px); max-width:52ch; color:#4A4034}
.problem-frame{position:relative; margin-top:clamp(40px,7vh,70px); padding:clamp(28px,4.5vw,54px) clamp(22px,4vw,54px);
  max-width:860px}
.problem-frame::before,.problem-frame::after,
.problem-frame .c3::before,.problem-frame .c3::after{content:""; position:absolute; width:22px; height:22px; border:solid var(--ink)}
.problem-frame::before{top:0; left:0; border-width:2px 0 0 2px}
.problem-frame::after{bottom:0; right:0; border-width:0 2px 2px 0}
.problem-frame .c3::before{top:0; right:0; border-width:2px 2px 0 0}
.problem-frame .c3::after{bottom:0; left:0; border-width:0 0 2px 2px}
.problem-frame .p-count{margin-bottom:18px}
.problem-frame .p-line{font-weight:380; font-variation-settings:"opsz" 110; font-size:clamp(1.4rem,3vw,2.3rem);
  line-height:1.28; min-height:3.4em; text-wrap:balance}
.problem-frame .p-hint{margin-top:18px; opacity:.75}

/* ---- 13 · CH 05 The Deed ----------------------------------- */
.deed{background:var(--plaster); border-top:1px solid var(--line); padding:clamp(90px,15vh,160px) 0}
.deed .d-doc{background:var(--paper); border:1px solid var(--line); max-width:920px;
  margin-top:clamp(34px,6vh,60px); padding:clamp(26px,5vw,64px); position:relative;
  box-shadow:0 1px 0 rgba(33,26,18,.05), 0 24px 60px -30px rgba(33,26,18,.25)}
.deed .d-doc::before,.deed .d-doc::after{content:""; position:absolute; width:18px; height:18px; border:solid var(--khaki); opacity:.6}
.deed .d-doc::before{top:8px; left:8px; border-width:1.5px 0 0 1.5px}
.deed .d-doc::after{bottom:8px; right:8px; border-width:0 1.5px 1.5px 0}
.deed h2{font-weight:430; font-variation-settings:"opsz" 126; letter-spacing:-.015em;
  font-size:clamp(1.9rem,3.8vw,3rem); line-height:1.1; margin-top:16px; text-wrap:balance}
.d-head{text-align:center; border-bottom:1px solid var(--line); padding-bottom:clamp(20px,3vh,30px)}
.d-head .d-no{margin-top:10px}
.article{display:grid; grid-template-columns:76px 1fr 96px; gap:clamp(14px,2.5vw,30px); align-items:center;
  padding:clamp(20px,3.2vh,30px) 0; border-bottom:1px dashed var(--line)}
.article .a-no{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; color:var(--khaki)}
.article h3{font-weight:560; font-variation-settings:"opsz" 100; font-size:clamp(1.15rem,1.9vw,1.5rem); letter-spacing:.01em}
.article p{color:#4A4034; font-size:.98rem; margin-top:4px; max-width:46ch}
.article .a-stamp{justify-self:end; width:clamp(48px,6vw,64px); opacity:.92}
html.js .article .a-stamp{opacity:0; transform:scale(1.5) rotate(0deg)}
html.js.reduced .article .a-stamp{opacity:.92; transform:none}
.deed .d-close{margin-top:clamp(50px,9vh,90px)}
.deed .d-close .big{font-weight:390; font-variation-settings:"opsz" 144; letter-spacing:-.02em;
  font-size:clamp(2.3rem,6.4vw,5.4rem); line-height:1.06}
.deed .d-close .big em{font-style:italic; color:var(--oxide)}
@media(max-width:640px){
  .article{grid-template-columns:1fr; gap:8px}
  .article .a-stamp{justify-self:start; margin-top:6px}
}

/* ---- 13b · The skyline -------------------------------------- */
.skyline{margin-top:clamp(48px,9vh,90px); max-width:1100px}
.skyline svg{width:100%; height:auto}
.skyline #skyCap{font-family:var(--mono); letter-spacing:.18em}
.sk-cap{margin-top:10px}
html.js:not(.reduced) .skyline #skyOwn,
html.js:not(.reduced) .skyline #skyCap{opacity:0}

/* ---- 14 · CH 06 The Door + footer --------------------------- */
.door{padding-block:clamp(100px,17vh,190px) 0; position:relative}
.door h2{font-weight:400; font-variation-settings:"opsz" 144; letter-spacing:-.022em;
  font-size:clamp(2.6rem,7vw,6rem); line-height:1.02; margin-top:18px; max-width:12ch; text-wrap:balance}
.door h2 em{font-style:italic; color:var(--oxide)}
.door .d-sub{margin-top:clamp(20px,3.5vh,34px); max-width:46ch; color:#54483A; font-size:clamp(1rem,1.25vw,1.16rem)}
.cta-hold{position:relative; margin-top:clamp(44px,8vh,80px); max-width:960px; padding:clamp(6px,1vw,10px)}
.cta-hold .ch-br{position:absolute; width:30px; height:30px; border:solid var(--oxide); opacity:0; transition:opacity .5s var(--ease-press) .1s}
.cta-hold.held .ch-br{opacity:1}
.cta-hold .br-tl{top:-12px; left:-12px; border-width:2.5px 0 0 2.5px}
.cta-hold .br-tr{top:-12px; right:-12px; border-width:2.5px 2.5px 0 0}
.cta-hold .br-bl{bottom:-12px; left:-12px; border-width:0 0 2.5px 2.5px}
.cta-hold .br-br{bottom:-12px; right:-12px; border-width:0 2.5px 2.5px 0}
.cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px)}
.cta-card{border:1px solid var(--ink); padding:clamp(22px,3.4vw,40px); display:block; position:relative;
  background:var(--paper); transition:background .35s var(--ease-press), transform .2s var(--ease-press),
  box-shadow .35s var(--ease-press)}
.cta-card:hover{background:var(--plaster); transform:translateY(1px)}
.cta-card:active{transform:translateY(2px)}
.cta-card .c-label{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:clamp(20px,4vh,40px)}
.cta-card .c-label .arrow{font-family:var(--mono); color:var(--oxide); font-size:.8rem;
  transition:transform .3s var(--ease-press)}
.cta-card:hover .c-label .arrow{transform:translate(3px,-3px)}
.cta-card .c-main{display:block; font-weight:470; font-variation-settings:"opsz" 84; font-size:clamp(1.15rem,2.2vw,1.75rem);
  letter-spacing:-.01em; line-height:1.2; overflow-wrap:anywhere}
.cta-card .c-sub{display:block; margin-top:12px; font-size:.92rem; color:#54483A; max-width:34ch}
@media(max-width:760px){ .cta-grid{grid-template-columns:1fr} .cta-hold{margin-inline:12px} }
.clocks{margin-top:clamp(34px,6vh,60px); display:flex; gap:clamp(18px,4vw,44px); flex-wrap:wrap}
.site-foot{margin-top:clamp(70px,12vh,120px); border-top:1px solid var(--line);
  padding:clamp(22px,4vh,36px) 0 clamp(28px,5vh,44px)}
.site-foot .f-row{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap}
.site-foot .brand{display:flex; align-items:center; gap:10px}
.site-foot .brand svg{width:22px; height:22px}

/* ---- 15 · Wide screens -------------------------------------- */
@media(min-width:1800px){
  body{font-size:19px}
  .wrap{max-width:1560px}
  :root{--pad:clamp(56px,4.5vw,110px); --spine-x:clamp(28px,2.2vw,56px)}
  .arrival h1{font-size:6.1rem}
  .arrival .sub{max-width:56ch}
  .t-grid{grid-template-columns:minmax(360px,560px) 1fr}
  .ms-inner{grid-template-columns:minmax(400px,580px) 1fr}
  .ms-draw svg{width:min(100%,780px)}
  .problem-frame{max-width:1000px}
  .deed .d-doc{max-width:1040px}
  .cta-hold{max-width:1100px}
}

/* ---- 16 · Motion guards ------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .arrival .cue .tick{animation:none}
  *{scroll-behavior:auto}
}