/* ==========================================================================
   v1 · Drafting Table. Page-local styles. The engine (scrollcraft.css) is the
   mechanism and is untouched; this file themes it and draws the table.
   ========================================================================== */

/* the two faces, hosted with the page (latin only; see fonts/LICENSE.txt) */
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/schibsted-grotesk-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/geist-mono-500-latin.woff2) format("woff2");
}

:root {
  --paper:   #F3F2EC;
  --sheet:   #EEECE4;   /* grid sheet, a shade under the table */
  --card:    #FAF9F4;   /* heavier front sheet and the photo card */
  --ink:     #24231F;
  --ink-2:   #55534C;
  --hair:    #B9B7AE;
  --pencil:  #B6B4AC;   /* grey start of the grey-to-ink fill */
  --orange:  #F04A00;
  --orange-hi: #FF6A26; /* hover fill only: ink on it reads at 5.5:1 */

  --sc-canvas: var(--paper);
  --sc-surface: var(--card);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-2);
  --sc-accent: var(--orange);
  --sc-accent-ink: var(--paper);
  --sc-font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --sc-font-text: "Schibsted Grotesk", system-ui, sans-serif;
  --sc-font-mono: "Geist Mono", ui-monospace, monospace;
  --sc-shadow-color: 40 18% 22%;
  --sc-hairline: color-mix(in oklab, var(--ink) 18%, transparent);

  --inset: 10px;          /* the drafting frame */
  --bar-h: 60px;
  --gut: clamp(1.25rem, 5vw, 5.5rem);
  --r: 2px;               /* one radius for the page: drafting corners */
  --wire-w: 1.5px;
}

html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--ink); color: var(--paper); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------- the table -- */
.paper-grain {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  opacity: 0.55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.20  0 0 0 0 0.18  0 0 0 0 0.14  0 0 0 0.11 0'/></filter><rect width='220' height='220' filter='url(%23g)'/></svg>");
}

.frame {
  position: fixed; inset: var(--inset); z-index: 62; pointer-events: none;
  border: 1px solid var(--hair);
  box-shadow: 0 0 0 calc(var(--inset) + 2px) var(--paper);
}
/* registration "+" marks, centred on a corner */
.reg { position: absolute; width: 15px; height: 15px; }
.reg::before, .reg::after { content: ""; position: absolute; background: var(--ink); }
.reg::before { left: 7px; top: 0; width: 1px; height: 15px; }
.reg::after  { top: 7px; left: 0; height: 1px; width: 15px; }
.reg--tl { left: -8px; top: -8px; }   .reg--tr { right: -8px; top: -8px; }
.reg--bl { left: -8px; bottom: -8px; } .reg--br { right: -8px; bottom: -8px; }

/* ----------------------------------------------------------------- bar -- */
.bar {
  position: fixed; z-index: 61;
  top: var(--inset); left: var(--inset); right: var(--inset);
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: calc(var(--gut) - var(--inset));
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
  transition: transform 500ms cubic-bezier(.23, 1, .32, 1);
}
/* scrolling down tucks the bar under the frame; scrolling up brings it back */
.bar.is-hidden { transform: translate3d(0, calc(-100% - var(--inset) - 2px), 0); }
.mark {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
  min-height: 44px; border-radius: var(--r);
}
.mark { transition: color 200ms var(--sc-ease-out); }
a:not(.btn):hover { color: var(--orange); }
.mark__glyph { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.5; }
.mark__wire { stroke: var(--orange); stroke-width: 1.8; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--r);
  font-family: var(--sc-font-display); font-weight: 600; font-size: 0.98rem;
  letter-spacing: 0; white-space: nowrap;
  text-decoration: none;
  overflow: hidden; isolation: isolate;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), color 300ms var(--sc-ease-out);
}
/* hover: a fill slides up through the button and the label rolls to a fresh copy */
.btn__fx {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--orange-hi);
  transform: translate3d(0, 102%, 0);
  transition: transform 500ms cubic-bezier(.23, 1, .32, 1);
}
.btn.is-hover .btn__fx { transform: translate3d(0, 0, 0); }
.btn.is-out .btn__fx { transform: translate3d(0, -102%, 0); }
.btn.is-fill-resetting .btn__fx { transition: none; }
.btn__label { position: relative; z-index: 1; display: inline-grid; overflow: hidden; line-height: 1.3; }
.btn__label > span { grid-area: 1 / 1; transition: transform 480ms cubic-bezier(.625, .05, 0, 1); }
.btn__label > span + span { transform: translate3d(0, 110%, 0); }
.btn.is-hover .btn__label > span:first-child { transform: translate3d(0, -110%, 0); }
.btn.is-hover .btn__label > span + span { transform: translate3d(0, 0, 0); }
.btn--ink.is-hover { color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--bar { min-height: 44px; padding: 0 18px; font-size: 0.92rem; }
.btn__node {
  position: relative; z-index: 1;
  width: 7px; height: 7px; background: var(--orange);
  transition: transform 160ms var(--sc-ease-out), background-color 300ms var(--sc-ease-out);
}
.btn.is-hover .btn__node { background: var(--ink); transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: var(--r); }

/* -------------------------------------------------------- crosshair ---- */
.xhair { position: fixed; inset: 0; z-index: 64; pointer-events: none; opacity: 0; transition: opacity 200ms var(--sc-ease-out); }
.has-xhair .xhair.is-on { opacity: 1; }
.xhair__v, .xhair__h { position: absolute; left: 0; top: 0; background: color-mix(in oklab, var(--ink) 22%, transparent); }
.xhair__v { width: 1px; height: 100%; }
.xhair__h { height: 1px; width: 100%; }
.xhair__read {
  position: absolute; left: 0; top: 0;
  display: flex; gap: 8px; padding: 3px 6px;
  font: 500 10.5px/1.2 var(--sc-font-mono); letter-spacing: 0.04em;
  color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--hair);
}
.xhair__read b { font-weight: 500; }

/* the tether: a small orange cross sits on the cursor, a thin line trails behind */
.tether { position: fixed; inset: 0; z-index: 65; pointer-events: none; opacity: 0; transition: opacity 200ms var(--sc-ease-out); }
.tether.is-on { opacity: 1; }
.tether.is-on.is-over { opacity: 0; }
.tether__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tether__line line { stroke: var(--orange); stroke-width: 1; }
.tether__dot { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.tether__dot::before, .tether__dot::after { content: ""; position: absolute; background: var(--orange); }
.tether__dot::before { left: -6px; top: -0.75px; width: 12px; height: 1.5px; }
.tether__dot::after { left: -0.75px; top: -6px; width: 1.5px; height: 12px; }

/* load progress hairline: the pen's progress while the drawing builds */
.load-line { position: fixed; z-index: 63; left: calc(var(--inset) + 1px); right: calc(var(--inset) + 1px); top: calc(var(--inset) + var(--bar-h)); height: 1px; pointer-events: none; }
.load-line i { position: absolute; inset: 0; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); }
.load-line.is-done { opacity: 0; transition: opacity 700ms var(--sc-ease-out) 200ms; }

/* ============================================================ ACT 1 ===== */
.table { background: transparent; }
.sheet { position: absolute; will-change: transform; transform-origin: 50% 50%; }
.sheet--grid {
  left: 35%; top: 13%; width: 72%; height: 80%;
  background-color: var(--sheet);
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--hair) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--hair) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in oklab, var(--hair) 26%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--hair) 26%, transparent) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: 23px 23px;
  border: 1px solid color-mix(in oklab, var(--hair) 70%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 14px 30px -20px hsl(var(--sc-shadow-color) / 0.35), 0 2px 4px -2px hsl(var(--sc-shadow-color) / 0.18);
}
.sheet--grid .reg { opacity: 0.85; }
.sheet--grid .reg--tl { left: 16px; top: 16px; } .sheet--grid .reg--tr { right: 16px; top: 16px; }
.sheet--grid .reg--bl { left: 16px; bottom: 16px; } .sheet--grid .reg--br { right: 16px; bottom: 16px; }
.ruler {
  position: absolute; left: 47px; right: 47px; top: 0; height: 12px;
  background:
    repeating-linear-gradient(to right, var(--ink-2) 0 1px, transparent 1px 120px) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(to right, var(--hair) 0 1px, transparent 1px 24px) 0 0 / 100% 6px no-repeat;
  opacity: 0.7;
}
.sheet--vellum {
  left: 44%; top: 19%; width: 50%; height: 63%;
  background: rgba(251, 250, 245, 0.5);
  border: 1px solid rgba(185, 183, 174, 0.55);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 22px 40px -26px hsl(var(--sc-shadow-color) / 0.42), 0 3px 6px -3px hsl(var(--sc-shadow-color) / 0.16);
}
.sheet--front {
  left: 64%; top: 77%; width: 50%; height: 62%;
  background: var(--card);
  border: 1px solid rgba(185, 183, 174, 0.6);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.9) inset, 0 -10px 30px -18px hsl(var(--sc-shadow-color) / 0.30), 0 -2px 5px -3px hsl(var(--sc-shadow-color) / 0.22);
}
.titleblock {
  position: absolute; right: 9%; top: 22px; width: min(320px, 58%); height: auto;
  fill: none; stroke: var(--hair); stroke-width: 1;
}
.titleblock .tb-hatch { stroke: color-mix(in oklab, var(--hair) 60%, transparent); }

/* drafting tape */
.tape {
  position: absolute; width: 78px; height: 24px; z-index: 2;
  background: rgba(229, 222, 196, 0.78);
  box-shadow: 0 1px 2px hsl(var(--sc-shadow-color) / 0.12);
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 98% 62%, 100% 100%, 4% 96%, 0 70%, 2% 38%);
}
.tape--l { right: -26px; top: -4px; transform: rotate(40deg); }
.tape--r { left: -22px; top: -4px; transform: rotate(-42deg); }

/* the drawing */
.knot {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  z-index: 3; pointer-events: none; fill: none;
}
.knot path { stroke-linecap: round; stroke-linejoin: round; }
/* the gear takes the tangle's place */
.knot { display: none; }

/* the 3D gear: one fixed canvas. In front of the hero's vellum, beside the
   close and on the sign-off, behind the middle sections, always under the
   frame and bar */
.gear-gl { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; }
.gear-gl.is-front { z-index: 3; }
/* the still print, for phones, touch and reduced motion */
.gear-still { display: none; }
.gear-is-still .gear-still {
  display: block; position: absolute; left: 50%; top: 50%;
  height: 78%; width: auto; max-width: none; transform: translate(-50%, -50%);
  pointer-events: none;
}
@media (max-width: 900px) { .gear-is-still .gear-still { height: 70%; } }
/* ending "as the O": the drawn gear gives its place to the 3D one */
.gear-as-o .sign__gear { visibility: hidden; }
/* the 3D gear brings its own cross: no second centre mark under it */
.gear-as-o .t-c--o { display: none; }
.sign__still { position: absolute; pointer-events: none; display: none; }
.gear-as-o.gear-is-still .sign__still { display: block; }

.knot__nodes .kn { fill: var(--paper); stroke: var(--orange); stroke-width: 1.6; }
.knot__nodes .kn--fill { fill: var(--orange); }
.knot__nodes .kn-label {
  font: 500 11px/1 var(--sc-font-mono); letter-spacing: 0.07em;
  fill: var(--ink); stroke: var(--sheet); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke;
}

/* hero copy: sits above the vellum, under the front sheet */
.hero-copy.sc-copy {
  z-index: 4;
  inset: auto;
  left: var(--gut); top: calc(var(--inset) + var(--bar-h) + clamp(2rem, 12vh, 9rem));
  width: min(50rem, 54vw); max-width: none;
}
.sheet--grid { z-index: 1; } .sheet--vellum { z-index: 2; } .sheet--front { z-index: 5; }

.hero-h1 { margin: 0; font-family: var(--sc-font-display); color: var(--ink); }
.hero-h1__big {
  display: block;
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.3rem, 5.6vw, 6.4rem);
  line-height: 0.9; letter-spacing: -0.04em;
  text-wrap: balance;
  max-width: 10.5em;
}
.hero-h1__for {
  display: block; margin-top: 0.85em;
  font-weight: 600; font-size: clamp(1.15rem, 1.65vw, 1.6rem);
  line-height: 1.2; letter-spacing: -0.02em;
  max-width: 24em; text-wrap: balance;
}
.hero-sub {
  margin: 1.1rem 0 0; max-width: min(31em, 40vw);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); line-height: 1.55;
  color: var(--ink-2); text-wrap: pretty;
}
.btn--hero { margin-top: 2rem; }

/* grey to ink fill */
.fill .ch {
  --k: clamp(0, (var(--t, 1) * (var(--n) + 14) - var(--i)) / 14, 1);
  color: color-mix(in srgb, var(--fill-ink, var(--ink)) calc(var(--k) * 100%), var(--pencil));
}
.fill .w { white-space: nowrap; }
.hero-sub.fill { --fill-ink: var(--ink-2); }

/* ========================================================= wire zone == */
.wire-zone { position: relative; }
.wire { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.wire__path { fill: none; stroke: var(--orange); stroke-width: var(--wire-w); stroke-linecap: square; stroke-linejoin: miter; }

.h2 {
  margin: 0; font-family: var(--sc-font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.1rem, 4.1vw, 4.2rem); line-height: 0.92; letter-spacing: -0.035em;
  text-wrap: balance;
}
.lede { margin: 1.4rem 0 0; max-width: 26em; color: var(--ink-2); font-size: 1.08rem; line-height: 1.55; text-wrap: pretty; }

/* nodes on the wire */
.node {
  position: absolute; z-index: 2; width: 13px; height: 13px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--ink-2);
  transition: border-color 220ms var(--sc-ease-out), background-color 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out);
}
.node.on { border-color: var(--orange); }
.node--live.on { background: var(--orange); }

/* --------------------------------------------------------- What I build -- */
.builds { position: relative; z-index: 1; padding: clamp(1.5rem, 4vh, 3rem) var(--gut) clamp(5rem, 12vh, 9rem); }
.builds__grid { display: grid; grid-template-columns: 33% 1fr; column-gap: 0; }
.builds__sticky { position: sticky; top: calc(var(--inset) + var(--bar-h) + 3rem); padding-right: 2rem; }
.builds__list {
  list-style: none; margin: 0; padding: 0 0 0 var(--rail-gap);
  --rail-gap: clamp(5.5rem, 9vw, 9rem);
  display: grid; row-gap: clamp(3.6rem, 9vh, 6rem);
  margin-top: 1.1rem;
}
.build { position: relative; max-width: 36rem; }
.build__name { position: relative; }
.build .node { left: calc(-1 * var(--rail-gap) + 2.6rem - 6.5px); top: calc(0.54em - 6.5px); }
.build .leader {
  position: absolute; height: 1px; top: 0.54em;
  left: calc(-1 * var(--rail-gap) + 2.6rem + 14px); width: calc(var(--rail-gap) - 2.6rem - 30px);
  background: repeating-linear-gradient(to right, var(--hair) 0 4px, transparent 4px 7px);
}
.meta {
  margin: 0; height: 1.2rem; display: flex; gap: 18px; align-items: center;
  font: 500 0.74rem/1 var(--sc-font-mono); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-2);
}
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.build__name {
  margin: 0.75rem 0 0; font-family: var(--sc-font-display);
  font-weight: 600; font-size: clamp(1.45rem, 1.1rem + 1vw, 2.05rem);
  line-height: 1.08; letter-spacing: -0.025em;
}
.build__text { margin: 0.8rem 0 0; color: var(--ink-2); font-size: 1.04rem; line-height: 1.58; max-width: 34em; text-wrap: pretty; }

/* --------------------------------------------------------- How it works -- */
.how { position: relative; z-index: 1; padding: clamp(3rem, 8vh, 6rem) var(--gut) clamp(4rem, 10vh, 7rem); }
.how__h2 { margin-left: 57%; max-width: 6em; }
.steps { list-style: none; margin: clamp(2.5rem, 7vh, 5rem) 0 0; padding: 0; position: relative; }
.step { position: relative; display: grid; grid-template-columns: 54px minmax(0, 23rem); column-gap: 22px; }
.step + .step { margin-top: clamp(2.6rem, 7vh, 4.5rem); }
.step--1 { margin-left: 0; }
.step--2 { margin-left: 29%; }
.step--3 { margin-left: 57%; }
.balloon {
  position: relative; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); border: 1.5px solid var(--ink);
  font: 500 0.95rem/1 var(--sc-font-mono); color: var(--ink);
  transition: border-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out);
}
.balloon.on { border-color: var(--orange); }
.step__title { margin: 0.55rem 0 0; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.85rem); line-height: 1.1; letter-spacing: -0.025em; }
.step__text { margin: 0.75rem 0 0; color: var(--ink-2); font-size: 1.04rem; line-height: 1.58; text-wrap: pretty; }
.step__body { will-change: clip-path; }

/* ------------------------------------------------------------ the tools -- */
.tools {
  position: relative; z-index: 1;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  overflow: hidden; padding: 20px 0;
}
.tools__track { position: relative; z-index: 3; display: flex; width: max-content; animation: tools-run 46s linear infinite; }
.tools__run { display: flex; align-items: center; gap: 28px; padding-right: 28px; flex: none; }
.tools__run span { font: 500 0.8rem/1 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.tools__run i { position: relative; width: 11px; height: 11px; flex: none; opacity: 0.8; }
.tools__run i::before, .tools__run i::after { content: ""; position: absolute; background: var(--hair); }
.tools__run i::before { left: 5px; top: 0; width: 1px; height: 11px; }
.tools__run i::after { top: 5px; left: 0; height: 1px; width: 11px; }
/* the track slides by exactly one copy of the list (--run, set by page.js) so the loop never shows a gap */
@keyframes tools-run { from { transform: translate3d(0,0,0); } to { transform: translate3d(calc(-1 * var(--run, 33.3333%)),0,0); } }
/* the reading head: the tape of tool names runs under it */
.tools__head {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none;
  width: 44px; margin-left: -22px;
  border-left: 1px solid var(--hair); border-right: 1px solid var(--hair);
}
.tools__head b, .tools__head::after {
  content: ""; position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  background: var(--paper); border: 1.5px solid var(--orange);
  transition: background-color 220ms var(--sc-ease-out);
}
.tools__head b { top: -5px; }
.tools__head::after { bottom: -5px; }
.tools__head.on b, .tools__head.on::after { background: var(--orange); }
/* the tape stops while the mouse is on it, or from the pause button (shown on
   touch screens, and to the keyboard when focused) */
.tools.is-paused .tools__track { animation-play-state: paused; }
@media (hover: hover) { .tools:hover .tools__track { animation-play-state: paused; } }
.tools__pause {
  position: absolute; z-index: 4; right: var(--gut); top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  background: var(--paper); color: var(--ink-2); cursor: pointer;
  border: 1px solid var(--hair); border-radius: var(--r);
}
.tools__pause[hidden] { display: none; }
.tools__pause::before { content: ""; position: absolute; inset: -6px; }
.tools__pause i { width: 8px; height: 10px; border-inline: 2px solid currentColor; }
.tools.is-paused .tools__pause i { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.tools__pause:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tools__pause:not(:focus-visible) { opacity: 0; pointer-events: none; }
  .tools.is-paused .tools__pause { opacity: 1; pointer-events: auto; }
}

/* ---------------------------------------------------------------- About -- */
.about {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 6vw;
  align-items: center;
  padding: clamp(5rem, 13vh, 9rem) var(--gut) clamp(5rem, 13vh, 9rem);
}
.about__text { max-width: 36rem; }
.about__body { margin: 1.6rem 0 0; font-size: clamp(1.15rem, 1rem + 0.55vw, 1.42rem); line-height: 1.5; letter-spacing: -0.012em; text-wrap: pretty; }
.card {
  position: relative; margin: 0 0 0 auto; margin-right: 9%;
  width: min(25rem, 30vw);
}
.card__rot { position: relative; transform: rotate(1.4deg); }
.card__print {
  position: relative; background: var(--card);
  padding: 14px 14px 0;
  border: 1px solid rgba(185, 183, 174, 0.6);
  box-shadow: 0 1px 0 #fff inset, 0 24px 40px -26px hsl(var(--sc-shadow-color) / 0.45), 0 4px 8px -4px hsl(var(--sc-shadow-color) / 0.2);
  padding-bottom: 46px;
}
.card__print img, .card.has-develop .develop {
  width: 100%; height: auto; aspect-ratio: 840 / 700;
  background-color: #F6F5EF;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--hair) 30%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--hair) 30%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
}
.develop { display: none; }
.card.has-develop .card__print img { opacity: 0; }
.card.has-develop .develop {
  display: block; position: absolute; left: 14px; top: 14px;
  width: calc(100% - 28px);
}
.card .tape--a { left: -26px; top: -2px; transform: rotate(-34deg); }
.card .tape--b { right: -26px; top: -2px; transform: rotate(36deg); }
.card__cap {
  position: absolute; left: 15px; right: 15px; bottom: 15px;
  font: 500 0.72rem/1 var(--sc-font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2);
}
.dim { position: absolute; left: 100%; top: 0; width: 40px; height: 100%; overflow: visible; fill: none; }
.dim path { vector-effect: non-scaling-stroke; }
.dim__ext { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 3 3; }
.dim__line { stroke: var(--orange); stroke-width: 1.25; }
.dim__label {
  position: absolute; left: calc(100% + 34px); top: 50%;
  font: 500 0.7rem/1 var(--sc-font-mono); letter-spacing: 0.06em; color: var(--ink-2);
  transform: translateY(-50%) rotate(90deg); transform-origin: 0 50%;
  background: var(--paper); padding: 3px 4px;
}

/* ================================================================ close == */
.close__stage { background: transparent; }
.close__wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.close__copy {
  position: absolute; z-index: 2;
  left: var(--gut); top: calc(var(--inset) + var(--bar-h) + 2rem); bottom: 3rem;
  width: min(52rem, 52vw);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.close__h2 { font-size: clamp(2.3rem, 4.7vw, 5rem); max-width: 11em; }
.close__body { margin: 1.6rem 0 0; max-width: 30em; color: var(--ink-2); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.22rem); line-height: 1.55; text-wrap: pretty; }
.btn--end {
  margin-top: 2.4rem; min-height: 68px; padding: 0 34px; overflow: hidden;
  background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em;
}
.btn--end__fill {
  position: absolute; inset: 0; background: var(--orange);
  clip-path: inset(0 0 0 calc(var(--fq, 0) * -100% + 100%));
}
.btn--end.from-left .btn--end__fill { clip-path: inset(0 calc(var(--fq, 0) * -100% + 100%) 0 0); }
.btn--end .btn__fx { background: var(--ink); }

/* ======================================================= the sign-off == */
.sign {
  position: relative; z-index: 1;
  padding: clamp(2.5rem, 7vh, 5.5rem) var(--gut) calc(var(--inset) + 18px);
  border-top: 1px solid var(--hair);
}
.sign__mark { display: block; width: 100%; height: auto; overflow: visible; }
.sign__mark text {
  font-family: var(--sc-font-display); font-weight: 700;
  text-rendering: geometricPrecision;
}
/* stroke under a paper fill: only the outer edge shows, so the font's
   overlapping contours never draw */
.sign__line { fill: var(--paper); stroke: var(--ink); stroke-width: 2.2px; paint-order: stroke fill; }
.sign__ink { fill: var(--ink); }
.sign__gear { fill-rule: evenodd; }
.sign__halo { fill: #A8A69E; }
.sign__blobs circle { fill: #fff; }
.sign__guides path { fill: none; stroke: var(--hair); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sign__guides .g-dash { stroke-dasharray: 4 5; }
.sign__ticks path { fill: none; stroke: var(--ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sign__ticks .t-c { stroke: var(--orange); }
.foot {
  margin: clamp(2rem, 6vh, 3.5rem) 0 0;
  padding-top: 16px; border-top: 1px solid var(--hair);
  font: 500 0.72rem/1.4 var(--sc-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}

/* ============================================================= mobile === */
@media (max-width: 900px) {
  :root { --inset: 6px; --bar-h: 56px; --gut: 20px; }
  .mark { font-size: 0.94rem; }
  .mark__glyph { width: 22px; height: 22px; }
  .btn--bar { padding: 0 14px; font-size: 0.88rem; }

  .sheet--grid   { left: -8%; top: 55%; width: 112%; height: 43%; }
  .sheet--vellum { left: 7%; top: 60%; width: 86%; height: 29%; }
  .sheet--front  { left: 50%; top: 90%; width: 70%; height: 30%; }
  .titleblock { right: 6%; top: 14px; width: 62%; }
  .tape { width: 62px; height: 20px; }
  .hero-copy.sc-copy { left: var(--gut); right: var(--gut); width: auto; top: calc(var(--inset) + var(--bar-h) + 1.6rem); }
  .hero-h1__big { font-size: clamp(2.1rem, 9.6vw, 3.4rem); line-height: 0.92; }
  .hero-h1__for { margin-top: 0.7em; font-size: 1.12rem; }
  .hero-sub { margin-top: 0.85rem; font-size: 1rem; line-height: 1.5; max-width: none; }
  .btn--hero { margin-top: 1.3rem; }

  .builds, .how, .about { padding-left: calc(var(--gut) + 30px); padding-right: var(--gut); }
  .builds { padding-top: 1.5rem; padding-bottom: 4.5rem; }
  .builds__grid { grid-template-columns: 1fr; }
  .builds__sticky { position: static; padding-right: 0; }
  .builds__list { --rail-gap: 30px; padding-left: 0; margin-top: 2.6rem; row-gap: 2.8rem; }
  .build .node { left: calc(-30px + 2px - 6.5px); }
  .build .leader { display: none; }
  .build__name { font-size: 1.42rem; }
  .build__text { font-size: 1rem; }

  .how { padding-top: 2.5rem; padding-bottom: 4rem; }
  .how__h2 { margin-left: 0; max-width: none; }
  .steps { margin-top: 2.2rem; }
  .step { grid-template-columns: 1fr; margin-left: 0 !important; }
  .step + .step { margin-top: 2.6rem; }
  .balloon { position: absolute; left: calc(-30px + 2px - 15px); top: 0; width: 30px; height: 30px; font-size: 0.78rem; }
  .step__title { margin-top: 0.2rem; font-size: 1.36rem; }
  .step__text { font-size: 1rem; }

  .tools { padding: 16px 0; }
  .about { grid-template-columns: 1fr; row-gap: 3.2rem; padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .about__body { font-size: 1.12rem; }
  .card { width: min(80%, 19rem); margin: 0 auto 0 4px; }
  .close__copy { left: calc(var(--gut) + 30px); right: var(--gut); width: auto; top: calc(var(--inset) + var(--bar-h) + 1.5rem); bottom: 2rem; }
  .close__h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .btn--end { min-height: 60px; padding: 0 26px; font-size: 1.2rem; }
  /* the longest word of the headline always fits the line */
  .hero-h1__big { font-size: min(clamp(2.1rem, 9.6vw, 3.4rem), 11.5vw); overflow-wrap: anywhere; }
  .h2:not(.close__h2) { font-size: min(clamp(2.1rem, 4.1vw, 4.2rem), 11vw); overflow-wrap: anywhere; }
  .close__h2 { font-size: min(clamp(2rem, 9vw, 2.8rem), 11vw); overflow-wrap: anywhere; }
}

/* =========================================== large text (set by page.js) == */
.bar > * { flex: none; }
.mark span { white-space: nowrap; }
.bar-tight .mark span { display: none; }
.bar-tight .mark { min-width: 44px; }
/* the hero and the close stop pinning and grow to hold their copy */
.hero-tall .act-table, .close-tall #book { height: auto !important; }
.hero-tall .hero-copy, .close-tall .close__copy { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
.close-tall .close__stage { height: auto; min-height: 100svh; }
.close-tall .close__copy {
  position: relative; inset: auto; width: auto;
  margin: 0 var(--gut) 0 calc(var(--gut) + 30px);
  padding: calc(var(--inset) + var(--bar-h) + 1.5rem) 0 3rem;
}

/* ===================================================== reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .tools__track { animation: none; }
  .tools__pause { display: none; }
  .xhair, .load-line, .tether { display: none; }
  .bar { transition: none; }
  .btn__fx, .btn__label > span { transition: none; }
  .fill .ch { color: var(--fill-ink, var(--ink)); }
  .sheet { will-change: auto; }
}

/* proof under the hero: the real results, one quiet line */
.hero-proof {
  margin: 1.6rem 0 0; max-width: min(36em, 46vw);
  display: flex; gap: 10px; align-items: baseline;
  font: 500 0.8rem/1.5 var(--sc-font-mono); letter-spacing: 0.02em; color: var(--ink-2);
}
.hero-proof i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); transform: translateY(-1px); }
@media (max-width: 900px) { .hero-proof { margin-top: 1rem; max-width: none; font-size: 0.86rem; } }
/* narrower windows: the copy wraps before the gear's left teeth (gear.js
   heroPose: centre at 70.5% of the width, 66% of the height across, or 60%
   of the width in tall windows) */
@media (min-width: 901px) {
  .hero-copy { --gear-left: max(17rem, calc(70.5vw - min(33vh, 30vw) - var(--gut) - 16px)); }
  .hero-h1__for { max-width: min(24em, var(--gear-left)); }
  .hero-sub { max-width: min(31em, 40vw, var(--gear-left)); }
  .hero-proof { max-width: min(36em, 46vw, var(--gear-left)); }
}
/* short phones: the sheets sit lower so the proof line stays clear */
@media (max-width: 900px) and (max-height: 740px) {
  .sheet--grid   { top: 70%; height: 30%; }
  .sheet--vellum { top: 73%; height: 22%; }
  .sheet--front  { top: 95%; }
}