/* =============================================================================
   RN CONTRACTORS — DESIGN SYSTEM v2  "SITE PLAN"
   Style: Exaggerated Minimalism (oversized display type, hairline rules,
          massive negative space) on a warm architectural palette.
   Motion: anime.js v4 (see rn.js). Everything here is transform/opacity only.
   ============================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* --- surfaces: warm near-black "night site" --- */
  --ink:#0E0D0B;
  --ink-2:#141210;
  --surface:#1A1714;
  --surface-2:#221E19;
  --scrim:rgba(14,13,11,.72);

  /* --- surfaces: "plaster" light chapters --- */
  --paper:#EFECE3;
  --paper-2:#E4E0D4;
  --paper-3:#D6D1C2;

  /* --- ink on each --- */
  --signal:#F4F1E9;          /* primary text on dark */
  --muted:#A9A395;           /* secondary on dark   ≥4.5:1 */
  --muted-2:#7E7869;         /* tertiary on dark    ≥3:1  */
  --on-paper:#17150F;        /* primary text on paper */
  --on-paper-muted:#5C574B;  /* secondary on paper  ≥4.5:1 */

  /* --- hairlines --- */
  --hair:rgba(244,241,233,.11);
  --hair-2:rgba(244,241,233,.20);
  --hair-ink:rgba(23,21,15,.14);
  --hair-ink-2:rgba(23,21,15,.26);

  /* --- accent: oxide (weathering steel / safety marker) --- */
  --oxide:#D2553A;           /* on dark  — 4.6:1 vs --ink   */
  --oxide-hi:#E36C4E;
  --oxide-ink:#A63C24;       /* on paper — 4.8:1 vs --paper */
  --oxide-glow:rgba(210,85,58,.16);

  /* --- type --- */
  --fd:"Archivo",system-ui,sans-serif;         /* display  */
  --fs:"Instrument Serif",Georgia,serif;       /* editorial accent */
  --fb:"Inter",system-ui,sans-serif;           /* body     */
  --fm:"JetBrains Mono",ui-monospace,monospace;/* field labels */

  /* type scale — exaggerated minimalism */
  --t-mega:clamp(3rem,11.5vw,10rem);
  --t-hero:clamp(2.6rem,7vw,6.2rem);
  --t-h2:clamp(2rem,5.4vw,4.6rem);
  --t-h3:clamp(1.25rem,2.2vw,1.85rem);
  --t-lead:clamp(1.02rem,1.35vw,1.22rem);
  --t-body:1rem;
  --t-label:.66rem;

  /* --- 4/8 spacing rhythm --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:144px;
  --pad:clamp(20px,5vw,80px);
  --maxw:1440px;
  --gutter:clamp(14px,1.4vw,22px);

  /* --- motion tokens (one rhythm everywhere) --- */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-in:cubic-bezier(.7,0,.84,0);
  --e-soft:cubic-bezier(.2,.8,.2,1);
  --d-fast:160ms; --d-base:260ms; --d-slow:420ms;

  /* --- elevation scale --- */
  --z-base:0; --z-raise:10; --z-sticky:40; --z-nav:70; --z-menu:90;
  --z-lightbox:120; --z-loader:300; --z-wipe:400; --z-cursor:500;
  --sh-1:0 1px 2px rgba(0,0,0,.28);
  --sh-2:0 8px 30px rgba(0,0,0,.32);
  --sh-3:0 30px 80px rgba(0,0,0,.48);
}

/* ------------------------------------------------------------- 2. RESET/BASE */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* overflow-x:clip (not hidden) — `hidden` creates a scroll container that
   breaks position:sticky, which the pinned scrollytelling depends on. */
html,body{overflow-x:clip;max-width:100%}
body{
  background:var(--ink);color:var(--signal);
  font-family:var(--fb);font-size:var(--t-body);line-height:1.6;
  font-feature-settings:"kern","liga","cv11";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img,video,canvas,svg{display:block;max-width:100%}
img{height:auto}
::selection{background:var(--oxide);color:#fff}
:focus-visible{outline:2px solid var(--oxide);outline-offset:3px;border-radius:2px}
.wrap,p,h1,h2,h3,h4,li{overflow-wrap:break-word}

/* skip link — keyboard users land on content, not the nav */
.skip{position:absolute;left:-999px;top:0;z-index:500;background:var(--oxide);color:#fff;
  padding:12px 18px;border-radius:0 0 4px 0;font-family:var(--fm);font-size:.7rem;letter-spacing:.14em}
.skip:focus{left:0}

/* --------------------------------------------------------- 3. TYPE PRIMITIVES */
.fd{font-family:var(--fd);font-weight:600;letter-spacing:-.035em;line-height:.96}
.fs{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.01em}
.mono{font-family:var(--fm);text-transform:uppercase;letter-spacing:.2em;
  font-size:var(--t-label);font-weight:500;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

h1,h2,h3,h4{font-family:var(--fd);font-weight:600;letter-spacing:-.035em;line-height:.98;
  text-wrap:balance}
h1{font-size:var(--t-hero)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.15}

.lead{color:var(--muted);font-size:var(--t-lead);line-height:1.62;max-width:56ch}
.paper .lead{color:var(--on-paper-muted)}

/* eyebrow — mono field label with a drawn tick + slow shimmer */
.eyebrow{display:inline-flex;align-items:center;gap:var(--s3);color:var(--oxide);
  font-family:var(--fm);text-transform:uppercase;letter-spacing:.2em;font-size:var(--t-label);font-weight:500}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;
  transform-origin:left;transform:scaleX(var(--tick,1))}
.eyebrow .ix{color:var(--muted-2)}
.paper .eyebrow{color:var(--oxide-ink)}
.paper .eyebrow .ix{color:var(--on-paper-muted)}

/* shimmer sweep on labels (kokonutui shimmer-text, ported to CSS) */
.shimmer{background:linear-gradient(100deg,currentColor 20%,#fff 42%,currentColor 62%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 5.5s linear infinite}
@keyframes shimmer{0%{background-position:180% 0}100%{background-position:-80% 0}}

/* ----------------------------------------------------------- 4. LAYOUT SHELL */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-tight{max-width:1080px}

.chapter{position:relative;padding-block:clamp(64px,9vw,var(--s10))}
.chapter--paper{background:var(--paper);color:var(--on-paper)}
.chapter--paper h1,.chapter--paper h2,.chapter--paper h3{color:var(--on-paper)}
.chapter--tight{padding-block:clamp(48px,6vw,var(--s8))}
/* A closing band sits directly under a hairline rule — it still needs its own
   top padding, otherwise the heading is welded to the line above it. */
.chapter--cta{padding-block:clamp(44px,5.5vw,88px)}
.chapter+.chapter:not(.chapter--paper){border-top:1px solid var(--hair)}
.chapter--paper+.chapter--paper{border-top:1px solid var(--hair-ink)}

/* section head: mono label column + oversized statement — the core rhythm */
.head{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:var(--s5);
  align-items:start;margin-bottom:clamp(32px,4vw,var(--s8))}
.head .col-l{padding-top:.7em}
.head .col-r>*+*{margin-top:var(--s5)}
@media(max-width:820px){.head{grid-template-columns:1fr;gap:var(--s4)}.head .col-l{padding-top:0}}

/* drawn hairline rule (animated by anime svg.createDrawable) */
.rule{width:100%;height:1px;overflow:visible;color:var(--hair-2)}
.paper .rule,.chapter--paper .rule{color:var(--hair-ink-2)}
.rule line{stroke:currentColor;stroke-width:1}

/* ------------------------------------------------------------ 5. NAVIGATION */
/* morphic navbar — full-width hairline bar that condenses into a glass pill */
.nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  height:72px;padding-inline:var(--pad);
  border-bottom:1px solid transparent;
  transition:height var(--d-slow) var(--e-out),padding var(--d-slow) var(--e-out),
             background var(--d-slow) ease,border-color var(--d-slow) ease,
             backdrop-filter var(--d-slow) ease;
}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,11,.62),rgba(14,13,11,0))}
.nav.is-stuck{height:60px;background:rgba(14,13,11,.66);border-bottom-color:var(--hair);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
.nav.is-stuck::before{opacity:0}
.nav.is-hidden{transform:translateY(-100%)}
.nav{transition-property:height,padding,background,border-color,transform;}

.brand{display:flex;align-items:center;gap:var(--s3);min-height:44px}
.brand img{height:22px;width:auto;filter:invert(1) brightness(1.35)}
.brand .bt{font-family:var(--fm);text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;
  color:var(--signal)}
.brand .bt b{font-weight:500}
@media(max-width:520px){.brand .bt{letter-spacing:.14em;font-size:.6rem}}

.nav .links{display:flex;align-items:center;gap:var(--s2)}
.nav .links a{position:relative;display:inline-flex;align-items:center;min-height:44px;
  padding-inline:var(--s4);font-family:var(--fm);text-transform:uppercase;
  letter-spacing:.16em;font-size:.66rem;color:var(--signal);opacity:.72;
  transition:opacity var(--d-base) ease}
.nav .links a::after{content:"";position:absolute;left:var(--s4);right:var(--s4);bottom:12px;height:1px;
  background:var(--oxide);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-base) var(--e-out)}
.nav .links a:hover,.nav .links a[aria-current]{opacity:1}
.nav .links a:hover::after,.nav .links a[aria-current]::after{transform:scaleX(1)}
/* the CTA is a pill — an underline would read as a strikethrough through it */
.nav .links a.navcta::after{content:none}
.nav .links a.navcta[aria-current]{border-color:var(--oxide);color:var(--oxide)}
.nav .navcta{margin-left:var(--s3)}

.menu-btn{display:none;align-items:center;gap:var(--s2);min-height:44px;min-width:44px;
  padding:10px 14px;border:1px solid var(--hair-2);border-radius:999px;
  font-family:var(--fm);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase}
.menu-btn .bars{display:grid;gap:3px}
.menu-btn .bars i{display:block;width:14px;height:1px;background:currentColor;transition:transform var(--d-base) var(--e-out)}
@media(max-width:960px){.nav .links{display:none}.menu-btn{display:inline-flex}}

/* full-screen menu */
.mmenu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s2);
  padding:96px var(--pad) var(--s8);
  clip-path:inset(0 0 100% 0);pointer-events:none;
  transition:clip-path 620ms var(--e-out)}
.mmenu.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.mmenu a{font-family:var(--fd);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(2.2rem,10vw,4rem);line-height:1.1;color:var(--signal);
  display:flex;align-items:baseline;gap:var(--s4);padding-block:var(--s2)}
.mmenu a .ix{font-family:var(--fm);font-size:.7rem;letter-spacing:.2em;color:var(--muted-2)}
.mmenu .mfoot{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:var(--s5);color:var(--muted);font-family:var(--fm);
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase}

/* ---------------------------------------------------------------- 6. BUTTONS */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  min-height:48px;padding:14px 26px;border-radius:999px;
  font-size:.9rem;font-weight:500;letter-spacing:.005em;white-space:nowrap;
  transition:background var(--d-base) ease,color var(--d-base) ease,
             border-color var(--d-base) ease,box-shadow var(--d-base) ease;
  will-change:transform}
.btn .arrow{transition:transform var(--d-base) var(--e-out)}
.btn:hover .arrow{transform:translateX(5px)}
.btn:active{box-shadow:inset 0 0 0 100px rgba(0,0,0,.10)}

.btn-primary{background:var(--oxide);color:#fff}
.btn-primary:hover{background:var(--oxide-hi);box-shadow:0 10px 34px var(--oxide-glow)}
.btn-ghost{border:1px solid var(--hair-2);color:var(--signal)}
.btn-ghost:hover{border-color:var(--signal);background:rgba(244,241,233,.06)}
.paper .btn-ghost,.chapter--paper .btn-ghost{border-color:var(--hair-ink-2);color:var(--on-paper)}
.paper .btn-ghost:hover,.chapter--paper .btn-ghost:hover{border-color:var(--on-paper);background:rgba(23,21,15,.05)}
.chapter--paper .btn-primary{background:var(--oxide-ink)}
.chapter--paper .btn-primary:hover{background:var(--oxide)}
.btn-sm{min-height:40px;padding:10px 18px;font-size:.82rem}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}

/* text link with drawn underline */
.tlink{position:relative;display:inline-flex;align-items:center;gap:var(--s2);
  padding-block:2px;color:var(--signal);font-weight:500}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform var(--d-base) var(--e-out)}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}
.chapter--paper .tlink{color:var(--on-paper)}

/* -------------------------------------------- 7. SPOTLIGHT CARD (kokonutui) */
/* cursor-tracked glow + magnetic 3D tilt + siblings dim on focus */
.spotgrid{display:grid;gap:var(--gutter)}
.spotgrid.is-focused .spot:not(:hover):not(:focus-within){opacity:.42;filter:saturate(.7)}
.spot{position:relative;isolation:isolate;overflow:hidden;border-radius:10px;
  background:var(--surface);border:1px solid var(--hair);
  transform-style:preserve-3d;will-change:transform;
  transition:opacity var(--d-slow) ease,filter var(--d-slow) ease,border-color var(--d-base) ease}
.spot:hover,.spot:focus-within{border-color:var(--hair-2)}
.spot::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    var(--glow,var(--oxide-glow)),transparent 62%);
  transition:opacity var(--d-slow) ease}
.spot:hover::before,.spot:focus-within::before{opacity:1}
.chapter--paper .spot{background:#fff;border-color:var(--hair-ink)}
.chapter--paper .spot:hover{border-color:var(--hair-ink-2)}

/* viewfinder brackets */
.spot .corner{position:absolute;z-index:4;width:16px;height:16px;border:1.5px solid var(--oxide);
  opacity:0;transition:opacity var(--d-base) ease,transform var(--d-base) var(--e-out)}
.spot:hover .corner,.spot:focus-within .corner{opacity:1}
.corner.tl{top:12px;left:12px;border-right:0;border-bottom:0;transform:translate(4px,4px)}
.corner.tr{top:12px;right:12px;border-left:0;border-bottom:0;transform:translate(-4px,4px)}
.corner.bl{bottom:12px;left:12px;border-right:0;border-top:0;transform:translate(4px,-4px)}
.corner.br{bottom:12px;right:12px;border-left:0;border-top:0;transform:translate(-4px,-4px)}
.spot:hover .corner{transform:translate(0,0)}

/* -------------------------------------------------------- 8. PROJECT CARDS */
.cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.card{display:block}
.card .thumb{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(140deg,var(--surface-2),var(--ink-2))}
.card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.001);transition:transform 900ms var(--e-out),filter var(--d-slow) ease;
  filter:saturate(.94) contrast(1.02)}
.card:hover .thumb img{transform:scale(1.06);filter:saturate(1.06) contrast(1.04)}
.card .thumb .veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,11,.34) 0%,transparent 34%,transparent 52%,rgba(14,13,11,.66) 100%)}
.card .tag{position:absolute;z-index:4;left:14px;top:14px;
  padding:5px 11px;border-radius:999px;color:var(--signal);
  background:rgba(14,13,11,.5);border:1px solid rgba(244,241,233,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.card .shots{position:absolute;z-index:4;right:14px;bottom:14px;
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  color:var(--signal);background:rgba(14,13,11,.5);border:1px solid rgba(244,241,233,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.card .shots svg{width:13px;height:13px}
.card .body{position:relative;z-index:4;padding:var(--s5) var(--s5) var(--s6);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.card .body .meta{color:var(--muted-2);margin-bottom:6px}
.card .body h3{font-size:1.32rem}
.chapter--paper .card .body .meta{color:var(--on-paper-muted)}
.card .go{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--hair-2);color:var(--muted);
  transition:transform var(--d-base) var(--e-out),background var(--d-base) ease,color var(--d-base) ease,border-color var(--d-base) ease}
.card:hover .go{background:var(--oxide);border-color:var(--oxide);color:#fff;transform:rotate(-45deg)}
.chapter--paper .card .go{border-color:var(--hair-ink-2);color:var(--on-paper-muted)}

/* "photography in production" placeholder */
.card.soon{cursor:default}
.card.soon .thumb{display:grid;place-items:center}
.card.soon .ph{position:relative;z-index:2;text-align:center;color:var(--muted-2);padding-inline:var(--s5)}
.card.soon .ph svg{width:22px;height:22px;margin:0 auto 10px;color:var(--muted-2);stroke-width:1.3}

/* On a paper chapter the thumb placeholder has to be light too — otherwise
   every not-yet-decoded image flashes as a black hole in a cream grid. */
.chapter--paper .card .thumb{background:linear-gradient(140deg,var(--paper-2),var(--paper-3))}
.chapter--paper .card .tag,.chapter--paper .card .shots{background:rgba(23,21,15,.42);color:var(--limewash);
  border-color:rgba(244,241,233,.2)}
.chapter--paper .card.soon .ph,.chapter--paper .card.soon .ph svg{color:var(--on-paper-muted)}
.chapter--paper .card.soon .tag{background:rgba(23,21,15,.5)}

/* ------------------------------------------------------------ 9. BENTO GRID */
.bento{display:grid;gap:var(--gutter);grid-template-columns:repeat(6,1fr)}
.bento .cell{position:relative;padding:clamp(22px,2.4vw,var(--s6));min-height:200px;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5);grid-column:span 2}
.bento .cell.wide{grid-column:span 3}
.bento .cell.full{grid-column:span 6}
.bento .cell .ico{width:30px;height:30px;color:var(--oxide);stroke-width:1.4}
.bento .cell h3{margin-top:var(--s4)}
.bento .cell p{color:var(--muted);font-size:.95rem;margin-top:var(--s3);max-width:46ch}
.chapter--paper .bento .cell p{color:var(--on-paper-muted)}
.bento .cell .ix{position:absolute;top:clamp(22px,2.4vw,var(--s6));right:clamp(22px,2.4vw,var(--s6));
  color:var(--muted-2);font-family:var(--fm);font-size:.62rem;letter-spacing:.18em}
@media(max-width:1024px){.bento{grid-template-columns:repeat(4,1fr)}
  .bento .cell,.bento .cell.wide{grid-column:span 2}.bento .cell.full{grid-column:span 4}}
@media(max-width:640px){.bento{grid-template-columns:1fr}
  .bento .cell,.bento .cell.wide,.bento .cell.full{grid-column:span 1;min-height:0}}

/* --------------------------------------------------------------- 10. INDEX */
/* numbered service/process index rows that expand on hover */
.index{border-top:1px solid var(--hair)}
.chapter--paper .index{border-top-color:var(--hair-ink)}
.irow{position:relative;display:grid;grid-template-columns:72px 1fr minmax(0,42ch) 44px;
  gap:var(--s5);align-items:start;padding-block:clamp(22px,2.6vw,34px);
  border-bottom:1px solid var(--hair);transition:padding var(--d-slow) var(--e-out)}
.chapter--paper .irow{border-bottom-color:var(--hair-ink)}
.irow::before{content:"";position:absolute;inset:0 -16px;z-index:-1;border-radius:8px;
  background:var(--surface);opacity:0;transition:opacity var(--d-base) ease}
.chapter--paper .irow::before{background:rgba(23,21,15,.045)}
.irow:hover::before{opacity:1}
.irow .ix{font-family:var(--fm);font-size:.72rem;letter-spacing:.14em;color:var(--oxide);padding-top:.45em}
.chapter--paper .irow .ix{color:var(--oxide-ink)}
.irow h3{font-size:clamp(1.35rem,2.6vw,2.1rem);letter-spacing:-.025em}
.irow p{color:var(--muted);font-size:.96rem;line-height:1.6}
.chapter--paper .irow p{color:var(--on-paper-muted)}
.irow .go{align-self:center;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--hair-2);color:var(--muted);
  transition:transform var(--d-base) var(--e-out),background var(--d-base) ease,color var(--d-base) ease}
.irow:hover .go{background:var(--oxide);border-color:var(--oxide);color:#fff;transform:rotate(-45deg)}
@media(max-width:900px){.irow{grid-template-columns:56px 1fr;row-gap:var(--s3)}
  .irow p{grid-column:2}.irow .go{display:none}}

/* --------------------------------------------------------------- 11. STATS */
/* bklit-ui inspired: tabular figures + a drawn area sparkline underneath */
.stats{display:grid;gap:var(--gutter);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.stat{position:relative;padding:var(--s5) var(--s5) 0;border:1px solid var(--hair);border-radius:10px;
  overflow:hidden;background:var(--surface)}
.chapter--paper .stat{background:#fff;border-color:var(--hair-ink)}
.stat .n{font-family:var(--fd);font-weight:600;letter-spacing:-.04em;line-height:1;
  font-size:clamp(2.6rem,5.2vw,4.2rem);font-variant-numeric:tabular-nums}
.stat .n .suf{color:var(--oxide);font-size:.5em;vertical-align:super;margin-left:2px}
.chapter--paper .stat .n .suf{color:var(--oxide-ink)}
.stat .l{margin-top:var(--s3);color:var(--muted-2);font-family:var(--fm);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}
.chapter--paper .stat .l{color:var(--on-paper-muted)}
.stat .spark{display:block;width:100%;height:56px;margin-top:var(--s4);overflow:visible}
.stat .spark .fill{fill:url(#sparkfill);opacity:0}
.stat .spark .line{fill:none;stroke:var(--oxide);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.stat .spark .grid{stroke:var(--hair);stroke-width:1;stroke-dasharray:2 4}
.chapter--paper .stat .spark .grid{stroke:var(--hair-ink)}

/* ring gauge (bklit gauge aesthetic) */
.gauge-ring{display:grid;place-items:center;position:relative}
.gauge-ring svg{transform:rotate(-90deg)}
.gauge-ring .track{fill:none;stroke:var(--hair-2);stroke-width:2}
.gauge-ring .arc{fill:none;stroke:var(--oxide);stroke-width:2.5;stroke-linecap:round}
.gauge-ring .val{position:absolute;font-family:var(--fm);font-size:.72rem;letter-spacing:.1em;
  font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- 12. MARQUEE */
.marquee{position:relative;overflow:hidden;padding-block:var(--s5);
  border-block:1px solid var(--hair);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.chapter--paper .marquee{border-color:var(--hair-ink)}
.marquee .track{display:flex;width:max-content;will-change:transform}
.marquee .track>span{display:inline-flex;align-items:center;gap:clamp(24px,4vw,64px);
  padding-right:clamp(24px,4vw,64px);
  font-family:var(--fd);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(1.6rem,4vw,3.2rem);color:var(--muted-2);white-space:nowrap}
.marquee .track em{font-family:var(--fs);font-style:italic;font-weight:400;color:var(--oxide)}
.marquee .track .dot{width:7px;height:7px;border-radius:50%;background:var(--oxide);flex:0 0 auto}

/* -------------------------------------------------- 13. AMBIENT BACKGROUNDS */
/* flowing line field (kokonutui background-paths, ported to plain SVG) */
.paths{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.5}
.paths svg{width:100%;height:100%}
.paths path{fill:none;stroke:currentColor;stroke-width:1;color:var(--oxide);opacity:.14}
.chapter--paper .paths path{color:var(--oxide-ink);opacity:.10}

/* faint blueprint grid */
.blueprint{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:clamp(48px,7vw,110px) clamp(48px,7vw,110px);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 72%);
          mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 72%)}
.chapter--paper .blueprint{background-image:linear-gradient(var(--hair-ink) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hair-ink) 1px,transparent 1px)}
.chapter>.wrap{position:relative;z-index:1}

/* film grain — keeps large flat areas from banding */
.grain{position:fixed;inset:0;z-index:65;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ------------------------------------------------------------ 14. PAGE HERO */
/* The hero owns the whole first screen. It used to end ~100px short of the fold,
   so the paper chapter below surfaced as an empty cream sliver — the chapter
   change read as an accident. min-height (not height) so a tall headline or a
   short laptop viewport can still push it longer. */
.phero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(72px + clamp(24px,4vw,56px));
  padding-bottom:clamp(76px,11vh,132px)}
.phero>.wrap{width:100%}
/* Owning the fold means it has to say there is more underneath. */
.phero::after{content:"Scroll ↓";position:absolute;left:50%;translate:-50% 0;
  bottom:clamp(26px,4.5vh,46px);width:min(var(--maxw),100%);padding-inline:var(--pad);
  font-family:var(--fm);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-2);pointer-events:none}
.phero h1{font-size:var(--t-mega);margin-top:var(--s5)}
.phero .lead{margin-top:var(--s6)}
.phero .metaline{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);margin-top:var(--s7);
  padding-top:var(--s5);border-top:1px solid var(--hair);color:var(--muted-2);
  font-family:var(--fm);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}
.chapter--paper .phero .metaline{border-top-color:var(--hair-ink);color:var(--on-paper-muted)}

/* --------------------------------------------------------------- 15. FOOTER */
.footer{position:relative;background:var(--ink-2);padding-block:clamp(56px,8vw,110px) var(--s7);
  border-top:1px solid var(--hair);overflow:hidden}
.footer .fmega{font-family:var(--fd);font-weight:600;letter-spacing:-.05em;line-height:.86;
  font-size:var(--t-mega);color:var(--signal);margin-bottom:clamp(32px,5vw,var(--s8))}
.footer .fmega em{font-family:var(--fs);font-style:italic;font-weight:400;color:var(--oxide);letter-spacing:-.02em}
.footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s6) var(--s5);
  padding-top:var(--s6);border-top:1px solid var(--hair)}
.footer h4{font-family:var(--fm);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:var(--s4)}
/* Scoped to .cols on purpose: a bare `.footer a` out-specifies `.btn-primary`,
   which turned the footer CTAs into muted block-level text on an oxide pill. */
.footer .cols a,.footer .li{display:block;color:var(--muted);padding-block:5px;
  transition:color var(--d-base) ease;overflow-wrap:anywhere}
.footer .cols a:hover{color:var(--oxide)}
.footer .bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);
  margin-top:clamp(40px,5vw,var(--s8));padding-top:var(--s5);border-top:1px solid var(--hair);
  color:var(--muted-2);font-family:var(--fm);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
@media(max-width:900px){.footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer .cols{grid-template-columns:1fr}}

/* ------------------------------------------------------ 16. REVEAL PRIMITIVES */
/* JS sets these; CSS holds the pre-state so nothing flashes unstyled */
[data-reveal]{opacity:0}
[data-split]{opacity:0}
.js-off [data-reveal],.js-off [data-split]{opacity:1}
/* splitText wraps each line in an overflow:clip span; without this the clip box
   cuts descenders and italic tails. Pad the line, pull the wrapper back. */
[data-split] [data-line]{padding-bottom:.14em}
[data-split] span[style*="overflow:clip"]{margin-bottom:-.14em}

/* -------------------------------------------------------- 17. PAGE TRANSITION */
.wipe{position:fixed;inset:0;z-index:var(--z-wipe);pointer-events:none;background:var(--oxide);
  transform:scaleY(0);transform-origin:bottom}

/* -------------------------------------------------- 17b. SURVEYOR'S RETICLE */
/* The cursor as a drawing reticle: an exact oxide dot plus lagging viewfinder
   brackets — the same motif already used on the project cards. Oxide reads on
   both the ink chapters and the paper ones, so no per-chapter recolouring.
   Mounted only on hover-capable, motion-tolerant pointers (see cursor() in rn.js);
   `cursor:none` is scoped to .has-cursor so a no-JS visitor keeps the arrow. */
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor [role="button"]{cursor:none}
/* Text entry always keeps the real caret — never take that away. */
.has-cursor input,.has-cursor textarea,.has-cursor select{cursor:auto}

.cur,.cur-dot{position:fixed;top:0;left:0;z-index:var(--z-cursor);pointer-events:none;
  translate:-50% -50%;will-change:transform}
.cur-dot{width:6px;height:6px;border-radius:50%;background:var(--oxide);opacity:0;
  transition:opacity .25s ease}
.cur{display:grid;place-items:center;width:46px;height:46px;opacity:0;
  transition:opacity .25s ease,width .35s var(--e-out),height .35s var(--e-out)}
.cur.on,.cur-dot.on{opacity:1}
.cur svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cur .br{fill:none;stroke:var(--oxide);stroke-width:1.5;opacity:.85}
.cur .tick{stroke:var(--oxide);stroke-width:1;opacity:.5;transition:opacity .3s ease}

.cur.is-link{width:64px;height:64px}
.cur.is-media{width:96px;height:96px}
.cur.is-link .tick,.cur.is-media .tick{opacity:0}
.cur.is-down{width:36px;height:36px}
.cur.is-down .br{opacity:1}

/* Parked below the reticle, not in it — centred it would sit on top of the dot.
   `translate` owns the centring so `transform` stays free for the entrance. */
.cur .lbl{position:absolute;left:50%;top:calc(100% + 8px);translate:-50% 0;
  font-family:var(--fm);font-size:.55rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--oxide);white-space:nowrap;
  opacity:0;transform:translateY(4px);
  transition:opacity .25s ease,transform .25s var(--e-out)}
.cur.is-media .lbl{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){.cur,.cur-dot{display:none}}

/* ------------------------------------------------------------- 18. UTILITIES */
.stack>*+*{margin-top:var(--s5)}
.stack-lg>*+*{margin-top:var(--s7)}
.split-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s6)}
.center{text-align:center}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ------------------------------------------------------------ 19. RESPONSIVE */
@media(max-width:640px){
  :root{--t-mega:clamp(2.6rem,13vw,4.4rem)}
  .chapter{padding-block:clamp(52px,11vw,72px)}
  .head{gap:var(--s3)}
  .card .body{padding:var(--s4) var(--s4) var(--s5)}
  .split-end{gap:var(--s5)}
  .stats{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){.stats{grid-template-columns:1fr}}

/* ------------------------------------------------------- 20. REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal],[data-split]{opacity:1!important;transform:none!important}
  .shimmer{animation:none;color:inherit;background:none;-webkit-text-fill-color:currentColor}
  .paths,.grain{display:none}
}