/* Glyph — waitlist site v3 "Ink on paper"
   Paper page, ink type, one easing. Fonts are self-hosted (no third-party requests). */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/geist-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/space-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-mono-latin-700-normal.woff2") format("woff2")}

:root{
  --paper:#F6F1E8;
  --paper-2:#EFE9DD;
  --card:#FFFFFF;
  --ink:#161512;
  --ink-2:#4A4741;
  --muted:#6E6A63;
  --faint:#B5B1A8;
  --line:rgba(22,21,18,.10);
  --line-2:rgba(22,21,18,.18);
  --accent:#B2603A;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Space Mono","SF Mono",SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --r-lg:28px;
  --r-md:18px;
  --r-sm:12px;
  --shadow-card:0 18px 50px -34px rgba(22,21,18,.30);
  --shadow-deep:0 40px 90px -50px rgba(22,21,18,.42);
  --gutter:clamp(20px,4vw,48px);
  --maxw:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.55;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","cv11";
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-wide{max-width:1360px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- type ---------- */
.display{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.02;text-wrap:balance}
.display em{font-style:italic}
h1.display{font-size:clamp(46px,6.3vw,92px);line-height:.97;letter-spacing:-.028em;max-width:15ch}
h2.display{font-size:clamp(42px,5.6vw,80px)}
h3.display{font-size:clamp(28px,3vw,40px)}
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:baseline;gap:10px;
}
.eyebrow::before,.eyebrow::after{content:"(" / "";font-family:var(--mono);color:var(--faint)}
.eyebrow::after{content:")" / ""}
.eyebrow.plain::before,.eyebrow.plain::after{content:none}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.sec-head{display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center;margin:0 auto}
.sec-head h2{max-width:17ch}
.sec-head .lede{max-width:50ch}
.object .plate-copy{align-items:flex-start;text-align:left}
.sec-head .lede{margin-top:4px}

/* ---------- grain ----------
   No mix-blend-mode here, deliberately. The noise below is pure black with only its alpha
   varying (see the feColorMatrix: three zero colour rows), and for a black source `multiply`
   and `normal` reduce to the same expression, (1-as)*ab*Cb, against any backdrop. So the
   blend was free of visual effect but not of cost: a fixed, blended, full-viewport quad at
   z-index 200 forces everything beneath it into one render pass, which blocks hardware
   overlay promotion of the two videos and serialises the nav behind it. Measured over a
   full-page scroll it was the single largest source of dropped frames. If that colour
   matrix ever gains a non-zero RGB row, this equivalence stops holding. */
.grain{
  position:fixed;inset:-20%;z-index:200;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:-.005em;text-decoration:none;
  transition:transform .45s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000;transform:translateY(-1px)}
.btn-ink:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:none;cursor:pointer;
  background:rgba(22,21,18,.78);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .3s var(--ease),transform .4s var(--ease),opacity .3s;
}
.pill:hover{background:#000}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px var(--gutter);pointer-events:none}
.nav-inner{
  pointer-events:auto;max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:6px 4px;border-radius:999px;border:1px solid transparent;
  transition:none;
}
@media (prefers-reduced-motion:no-preference){
  .nav-inner{transition:background .5s var(--ease),border-color .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease),backdrop-filter .5s}
}
.nav.is-scrolled .nav-inner{
  background:rgba(246,241,232,.9);border-color:var(--line);padding:6px 8px 6px 14px;
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 10px 40px -20px rgba(22,21,18,.25);
}
.nav.on-dark .nav-inner{background:rgba(20,19,17,.88);border-color:rgba(246,241,232,.14);color:var(--paper)}
.nav.on-dark .tag{color:rgba(246,241,232,.6)}
.nav.on-dark .btn-ink{background:var(--paper);color:var(--ink)}
.nav.on-dark .brand img{filter:invert(1)}
.nav:not(.is-scrolled) .tag{background:rgba(246,241,232,.7);padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:500;font-size:19px;letter-spacing:-.01em;padding:4px 6px}
.brand img{width:28px;height:28px}
.nav-right{display:flex;align-items:center;gap:18px}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:9px}
.tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(178,96,58,.5)}
@media (prefers-reduced-motion:no-preference){.tag .dot{animation:ping 2.4s var(--ease) 3}.scroll-cue i{animation:cue 2.2s var(--ease) infinite}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(178,96,58,.45)}70%{box-shadow:0 0 0 9px rgba(178,96,58,0)}100%{box-shadow:0 0 0 0 rgba(178,96,58,0)}}
.nav .btn{padding:11px 18px;font-size:14px}

/* ---------- hero ----------
   The reference sites (stele, moonshot) put one image behind everything and set the
   type low over it. The nib holds the upper right; the copy sits on the paper it is
   writing on. The media wipes in from the left — the direction the pen travels. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1;transform:translateY(var(--drift,-10%));will-change:transform,opacity}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 100%}
.hero-media .hero-still{opacity:0;transition:opacity .7s var(--ease)}
.hero-media.is-fallback .hero-still{opacity:1}
.hero-media::before{ /* the paper reasserts itself under the type */
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(246,241,232,.28) 0%,rgba(246,241,232,0) 18%,rgba(246,241,232,0) 32%,rgba(246,241,232,.9) 55%,var(--paper) 72%),
    radial-gradient(130% 70% at 50% 118%, rgba(246,241,232,.9), rgba(246,241,232,0) 62%);
}
@media (prefers-reduced-motion:no-preference){
  /* the hero uncovers left to right, in the direction the pen travels — but only once
     the media has actually painted, so it is a reveal and never a pop */
  .hero-media{clip-path:inset(0 100% 0 0);transition:clip-path 1.5s cubic-bezier(.62,0,.2,1)}
  .hero-media.is-ready{clip-path:inset(0 0 0 0)}
  .hero-media video,.hero-media img{transform:scale(1.06);transition:transform 2.4s var(--ease)}
  .hero-media.is-ready video,.hero-media.is-ready img{transform:scale(1)}
}
.hero-copy{
  position:relative;width:100%;padding-bottom:clamp(56px,9vh,104px);padding-top:120px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;
}
.hero-copy h1{max-width:none}
.hero-copy .lede{max-width:46ch}
.hero-copy .note{font-size:13px;color:var(--muted)}
.hero-copy .note a{color:var(--muted);text-decoration-color:var(--faint)}
.msg:empty{display:none}

/* the scroll badge, borrowed from stele: a slowly turning ring of type */
.scrollmark{
  position:absolute;right:clamp(18px,3.4vw,46px);bottom:clamp(18px,3.4vw,46px);z-index:2;
  width:112px;height:112px;display:grid;place-items:center;text-decoration:none;color:var(--ink);
}
.scrollmark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.scrollmark text{
  font-family:var(--mono);font-size:8px;letter-spacing:.205em;text-transform:uppercase;
  fill:var(--ink-2);
}
.scrollmark i{
  width:34px;height:34px;border-radius:50%;background:var(--ink);
  display:block;position:relative;transition:transform .5s var(--ease);
}
.scrollmark i::after{
  content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;
  border-right:1.4px solid var(--paper);border-bottom:1.4px solid var(--paper);
  transform:translate(-50%,-62%) rotate(45deg);
}
.scrollmark:hover i{transform:translateY(2px) scale(1.06)}
@media (prefers-reduced-motion:no-preference){
  .scrollmark svg{animation:turn 26s linear infinite}
  @keyframes turn{to{transform:rotate(360deg)}}
}

/* headline words rise from blur */
.h1-words .w{display:inline-block}
.m-only{display:none}
@media (prefers-reduced-motion:no-preference){
  .ld{animation:rise .95s var(--ease) both;animation-delay:var(--d,0s)}
  .h1-words .w{animation:rise 1.05s var(--ease) both;animation-delay:calc(.34s + var(--i,0)*.05s)}
  @keyframes rise{from{opacity:0;transform:translateY(22px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
}

/* ---------- join form (the liquid pills) ---------- */
.join{position:relative;width:100%;max-width:470px;--lean:translateX(-6px)}
.join form{display:flex;gap:10px;position:relative;z-index:1}
.join input[type=email]{
  flex:1;min-width:0;padding:15px 20px;font:inherit;font-size:16px;color:var(--ink);background:transparent;
  border:1px solid transparent;border-radius:999px;outline:none;transition:opacity .18s;
}
.join input::placeholder{color:var(--muted)}
.joinbtn{background:transparent;color:var(--paper);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .18s}
.joinbtn:hover{background:transparent;transform:var(--lean) scale(1.04)}
.goo{position:absolute;inset:0;z-index:0;pointer-events:none}
.join.is-merging .goo{filter:url(#goo)}
.goo-a,.goo-b{position:absolute;border-radius:999px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .4s,box-shadow .2s}
.goo-a{background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2),0 1px 0 rgba(255,255,255,.6)}
.goo-b{background:var(--ink)}
.join:not(.is-merging):has(.joinbtn:hover) .goo-b{transform:var(--lean) scale(1.04);background:#000}
.join:not(.is-merging):has(.joinbtn:active) .goo-b,.join:not(.is-merging):has(.joinbtn:active) .joinbtn{transform:var(--lean) scale(.96)}
.join:not(.is-merging):has(input:focus) .goo-a{box-shadow:inset 0 0 0 1.5px var(--ink)}
.join:not(.is-merging):has(input:focus) .goo-b,.join:not(.is-merging):has(input:focus) .joinbtn{transform:var(--lean)}
.join.is-merging form{pointer-events:none}
.join.is-merging input[type=email],.join.is-merging .joinbtn{opacity:0}
.join.is-merging .goo-a,.join.is-merging .goo-b{
  transition:left .62s cubic-bezier(.7,0,.3,1),top .62s cubic-bezier(.7,0,.3,1),width .62s cubic-bezier(.7,0,.3,1),height .62s cubic-bezier(.7,0,.3,1),background .4s ease .12s,box-shadow .3s;
}
.join.is-merging .goo-a{background:var(--ink);box-shadow:none}
.join.is-done form,.join.is-done .goo{visibility:hidden}
.done{
  position:absolute;left:50%;top:50%;z-index:2;width:100%;display:flex;align-items:center;justify-content:center;gap:14px;
  visibility:hidden;transform:translate(calc(-50% + var(--shift,0px)),-50%);transition:transform .55s cubic-bezier(.7,0,.3,1);
}
.done[hidden]{display:none}
.join.is-done .done{visibility:visible}
.join.is-moved .done{transform:translate(-50%,-50%)}
.check{width:52px;height:52px;border-radius:50%;background:var(--ink);flex:none;display:grid;place-items:center}
.check svg{width:26px;height:26px;display:block}
.check path{fill:none;stroke:var(--paper);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s cubic-bezier(.65,0,.45,1)}
.join.is-drawn .check path{stroke-dashoffset:0}
.join.is-drawn .check{animation:pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}
.donetext{font-size:14.5px;font-weight:500;color:var(--ink);text-align:left;min-width:0;opacity:0;transform:translateX(8px);transition:opacity .4s ease .2s,transform .4s ease .2s}
.join.is-moved .donetext{opacity:1;transform:none}
.msg{margin-top:10px;font-size:14px;min-height:18px;color:var(--muted)}
.msg.err{color:#A4552F}
.dark .join .goo-a{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(246,241,232,.22)}
.dark .join input[type=email]{color:var(--paper)}
.dark .join input::placeholder{color:rgba(246,241,232,.5)}
.dark .join .goo-b{background:var(--paper)}
.dark .join .joinbtn{color:var(--ink)}
.dark .join:not(.is-merging):has(.joinbtn:hover) .goo-b{background:#fff}
.dark .join:not(.is-merging):has(input:focus) .goo-a{box-shadow:inset 0 0 0 1.5px var(--paper)}
.dark .join.is-merging .goo-a{background:var(--paper)}
.dark .check{background:var(--paper)}
.dark .check path{stroke:var(--ink)}
.dark .donetext{color:var(--paper)}

/* ---------- provenance ---------- */
.prov{padding:40px 0 36px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prov-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.prov-group{display:flex;align-items:center;gap:34px}
.prov-group .eyebrow{margin-right:6px}
.prov-group img{height:44px;width:auto;filter:grayscale(1);opacity:.85;transition:opacity .4s var(--ease)}
.prov-group img.seal{height:64px}
.prov-group img.wide{height:30px}
.prov-group img:hover{opacity:1}
.prov-text{font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:-.01em;color:var(--ink-2);opacity:.72;white-space:nowrap}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:clamp(112px,13vw,200px) 0 0}
.sec-head + *{margin-top:clamp(48px,6vw,80px)}

/* ---------- the film ---------- */
.film .wrap-wide{margin-top:clamp(40px,5vw,64px)}
.film .filmcard{
  position:relative;max-width:1080px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden;background:#0d0c0b;
  box-shadow:var(--shadow-deep);border:1px solid rgba(22,21,18,.10);
  aspect-ratio:4/3;cursor:pointer;
}
.film .filmcard video{width:100%;height:100%;object-fit:cover}
.film .filmcard .soundbtn{position:absolute;right:18px;bottom:18px;z-index:2}
.film .filmcard .playbtn{
  position:absolute;left:18px;bottom:18px;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,241,232,.85);
  padding:9px 14px;border-radius:999px;background:rgba(22,21,18,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:opacity .4s var(--ease);
}
.film .filmcard.is-playing .playbtn{opacity:.75}
.film .filmcard .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(246,241,232,.15);z-index:2}
.film .filmcard .bar i{display:block;height:100%;width:100%;background:var(--paper);transform:scaleX(0);transform-origin:left}
@media (prefers-reduced-motion:no-preference){.film .filmcard .bar i{transition:transform .25s linear}}
.film .caption{max-width:1080px;margin:16px auto 0;display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- how it works ---------- */
.steps{list-style:none;position:relative;display:flex;flex-direction:column;gap:clamp(64px,7vw,104px);padding-left:0}
.steps::before,.steps::after{content:"";position:absolute;left:23px;top:26px;bottom:26px;width:1px;background:var(--line-2);pointer-events:none}
/* No will-change on this rail. Promoting it was proposed and measured, and it made things
   worse: a 1px x 1500px strip becomes a tall thin layer that has to be composited on every
   frame whether or not --p moved, which cost about five dropped frames per full-page scroll. */
.steps::after{background:var(--ink);transform:scaleY(var(--p,0));transform-origin:top}
.step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.step-copy{padding-left:76px;position:relative}
.num{
  position:absolute;left:0;top:-2px;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  background:var(--paper);border:1px solid var(--line-2);color:var(--muted);
  transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease),transform .6s var(--ease);
}
.step.on .num{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.step-copy h3{margin-bottom:14px}
.step-copy p{color:var(--ink-2);font-size:17px;max-width:40ch;text-wrap:pretty}
.step-copy .mono-note{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.frame{
  border-radius:var(--r-md);overflow:hidden;background:var(--paper-2);
  box-shadow:inset 0 0 0 1px rgba(22,21,18,.09);
  transition:box-shadow 1s var(--ease);
}
.step.on .frame{box-shadow:inset 0 0 0 1px rgba(22,21,18,.14),var(--shadow-card)}
.frame img{width:100%;height:auto}

/* ---------- toolkit: an editorial gallery, not a card grid ---------- */
/* the gallery lives in its own .wrap-wide, so it needs the head gap explicitly */
.kit .wrap-wide{margin-top:clamp(48px,6vw,80px)}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,7vw,104px) clamp(20px,2.6vw,34px);align-items:start}
.shot{margin:0;display:flex;flex-direction:column;gap:20px}
.shot.wide{grid-column:span 2}
.shot-img{
  border-radius:var(--r-md);overflow:hidden;background:var(--paper-2);
  box-shadow:inset 0 0 0 1px rgba(22,21,18,.09);
}
.shot-img img{width:100%;height:auto;display:block}
.shot-img.pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(22,21,18,.09)}
.shot figcaption{display:flex;flex-direction:column;gap:9px;max-width:52ch}
.shot .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.shot h3{font-size:clamp(24px,2.5vw,32px);line-height:1.05}
.shot p{font-size:16px;color:var(--ink-2);text-wrap:pretty}
.shot.wide figcaption{max-width:62ch}


/* ---------- statement ----------
   Both references drop a single quiet line on a field of paper between sections.
   It is the page taking a breath, and it is the only place with no image at all. */
.statement{padding:clamp(120px,16vw,240px) 0 clamp(72px,9vw,128px);text-align:center}
.statement p{
  font-size:clamp(30px,4.4vw,62px);line-height:1.12;letter-spacing:-.02em;
  max-width:20ch;margin:0 auto;color:var(--ink);
}
.statement em{color:var(--ink-2)}

/* ---------- object (the render) ---------- */
.object{margin-top:clamp(24px,3vw,48px)}
.object .plate{position:relative;aspect-ratio:2200/1120}
.object .plate img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transform:translateY(var(--py,0px));will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 24%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 88%,transparent 100%),linear-gradient(90deg,transparent 0%,#000 24%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.object .plate-copy{position:absolute;left:clamp(24px,4vw,56px);top:36%;transform:translateY(-50%);max-width:400px;display:flex;flex-direction:column;gap:14px}
.object .plate-copy h2{font-size:clamp(36px,4vw,54px)}
.object .plate-copy .lede{font-size:16px;max-width:32ch}
.object .plate-copy .lede{max-width:34ch}

/* ---------- stance (dark) ---------- */
.dark{background:#141311;color:var(--paper);--ink:#141311;--paper:#F6F1E8}
.stance{margin:clamp(96px,11vw,160px) 0 0;padding:clamp(104px,12vw,180px) 0;overflow:hidden;position:relative}
.stance .wrap{position:relative;z-index:1}
.stance .eyebrow{color:rgba(246,241,232,.55)}
.stance .eyebrow::before,.stance .eyebrow::after{color:rgba(246,241,232,.35)}
.stance .lede{color:rgba(246,241,232,.78)}
.stance h2{max-width:14ch}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(48px,6vw,80px);padding-top:32px;border-top:1px solid rgba(246,241,232,.14)}
.fact{display:flex;flex-direction:column;gap:10px}
.fact .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,241,232,.5)}
.fact b{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-.01em;line-height:1.1}
.fact p{font-size:14.5px;color:rgba(246,241,232,.7);text-wrap:pretty}
.stance .mark{position:absolute;right:-26%;top:50%;transform:translateY(-50%);width:38%;opacity:.04;pointer-events:none;filter:invert(1)}

/* ---------- final CTA ---------- */
.cta{padding:clamp(120px,14vw,200px) 0 clamp(80px,9vw,120px);text-align:center}
.cta .wrap{display:flex;flex-direction:column;align-items:center;gap:22px}
.cta .join{max-width:520px}
.cta .join .done{justify-content:center}
.cta .note{font-size:13px;color:var(--muted)}

/* ---------- footer ---------- */
footer{position:relative;overflow:hidden;padding-top:40px}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot-row a{color:var(--muted);text-decoration:none}
.foot-row a:hover{color:var(--ink)}
.foot-row .links{display:flex;gap:22px}
.wordmark{
  font-family:var(--serif);font-size:53vw;line-height:.78;letter-spacing:-.045em;
  text-align:center;color:var(--ink);margin-top:28px;margin-bottom:.13em;user-select:none;
}
@media (prefers-reduced-motion:no-preference){
  .wordmark{transform:translateY(24px);opacity:0;transition:transform 1.4s var(--ease),opacity 1.4s var(--ease)}
  .wordmark.in{transform:none;opacity:1}
}


/* ---------- the wipe ----------
   One reveal gesture for every image on the page, in the same direction the pen
   travels in the hero: a left-to-right uncovering rather than a fade. */
@media (prefers-reduced-motion:no-preference){
  .rv .wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s cubic-bezier(.62,0,.2,1) .06s}
  .rv.in .wipe{clip-path:inset(0 0 0 0)}
  .film .filmcard video{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.62,0,.2,1) .1s}
  .film .filmcard.in video,.film .filmcard.is-playing video{clip-path:inset(0 0 0 0)}
}

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);transition-delay:var(--d,0s)}
  .rv.in{opacity:1;transform:none;filter:blur(0)}
  .rv.rv-done{filter:none;transform:none}
  .rv-scale{transform:translateY(28px) scale(.975)}
  [data-stagger] > .rv{transition-duration:.75s}
}

/* ---------- responsive ---------- */

@media (max-height:800px) and (min-width:801px){
  .hero-copy{padding-top:96px;padding-bottom:96px;gap:20px}
  h1.display{font-size:clamp(48px,6.6vw,92px)}
  .hero-copy .lede{font-size:17px}
}
@media (max-width:1024px){
}
@media (max-width:800px){
  body{font-size:16px}
  .nav{padding:12px 14px}
  .tag{display:none}
  .hero{min-height:100svh}
  .hero-media video,.hero-media img{object-position:58% 100%}
  .hero-media::before{
    background:
      linear-gradient(180deg,rgba(246,241,232,.28) 0%,rgba(246,241,232,0) 20%,rgba(246,241,232,0) 34%,rgba(246,241,232,.9) 56%,var(--paper) 76%);
  }
  .hero-copy{padding-top:40svh;padding-bottom:30px;gap:16px}
  .hero-copy h1{font-size:clamp(40px,11.5vw,52px)}
  .hero-copy .lede{font-size:16px;max-width:34ch}
  .hero-copy .note{margin-top:-2px}
  .hero .eyebrow{font-size:10.5px;letter-spacing:.1em}
  .scrollmark{display:none}
  .hero-foot{display:none}
  .join form{flex-direction:column}
  .join .btn{width:100%}
  .join{--lean:translateY(-6px)}
  .prov-inner{flex-direction:column;align-items:flex-start;gap:22px}
  .prov-group{gap:22px;flex-wrap:wrap}
  .prov-group img{height:34px}
  .prov-group img.seal{height:44px}
  .prov-group img.wide{height:24px}
  .step{grid-template-columns:1fr;gap:22px}
  .steps::before,.steps::after{display:none}
  .step-copy{padding-left:0}
  .num{position:static;width:38px;height:38px;margin-bottom:14px;font-size:11px}
  .gallery{grid-template-columns:1fr;gap:clamp(40px,9vw,64px)}
  .shot.wide{grid-column:span 1}
  .shot-img.pair{grid-template-columns:1fr}
  .shot-img.pair img:nth-child(2){display:none}
  .shot{gap:16px}
  .m-only{display:inline}
  .prov-text{white-space:normal}
  .rv{transition-duration:.7s}
  [data-stagger] > *{--d:0s!important}
  .pill{padding:13px 16px}
  .object .plate{aspect-ratio:4/5}
  .object .plate{aspect-ratio:auto;display:flex;flex-direction:column}
  .object .plate img{aspect-ratio:4/3;height:auto;object-position:62% 50%;transform:none;will-change:auto;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);mask-image:linear-gradient(90deg,transparent 0,#000 14%);-webkit-mask-composite:source-in;mask-composite:intersect}
  .object .plate-copy{position:static;order:-1;transform:none;max-width:none;padding:0 4px 20px}
  .object .plate-copy h2{font-size:clamp(34px,9vw,44px)}
  .stance{padding:88px 0}
  .facts{grid-template-columns:1fr;gap:28px}
  .stance .mark{display:none}
  .foot-row{flex-direction:column;align-items:flex-start}
  .foot-row .links{flex-wrap:wrap;row-gap:8px}
  .foot-row .links > span{white-space:nowrap}
  .film .caption{flex-direction:column;gap:6px}
  .wordmark{font-size:53vw;letter-spacing:-.05em}
}

/* og image capture: ?og hides the chrome */
html.og .nav,html.og .hero-foot,html.og .grain{display:none}
html.og .ld,html.og .h1-words .w,html.og .hero-media{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}

/* short phones (iPhone SE and the like): keep the whole form above the fold */
@media (max-width:800px) and (max-height:720px){
  .hero-media{transform:translateY(-16%)}
  .hero-copy{padding-top:32svh;padding-bottom:22px;gap:12px}
  h1.display{font-size:clamp(36px,10.5vw,44px)}
  .hero-copy .lede{font-size:15px}
  .hero-copy .note{font-size:12px}
}

/* The hero's crop is an aspect problem, not a width one. The frame is 4:3 and a phone
   held upright is nearly twice as tall as it is wide, so `cover` on a full-height box
   scaled the picture by its height and threw two thirds of the width away: you got the
   shoulder of the nib, and neither the tip nor the ink it was laying. Hold the media to
   the part of the hero the type does not use and the whole instrument is in shot again,
   with the paper carrying on below it. */
@media (max-aspect-ratio:4/5){
  .hero-media{bottom:auto;height:66svh}
  .hero-media video,.hero-media img{object-position:46% 50%}
  .hero-media::before{
    background:linear-gradient(180deg,rgba(246,241,232,.30) 0%,rgba(246,241,232,0) 24%,rgba(246,241,232,0) 46%,rgba(246,241,232,.92) 78%,var(--paper) 100%);
  }
}