/* Paper Trail Theory · papertrailtheory.com
   Brand kit: signal green, off-white, black stage. Instrument Serif speaks, Geist reads, Geist Mono labels.
   One idea: a single green trail runs from the mark to the last sign-up box. */

@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Geist';src:url('/assets/fonts/geist-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/geist-mono-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
/* fallbacks sized to the real faces, so nothing jumps when the fonts land */
@font-face{font-family:'PTT Serif Fallback';src:local('Times New Roman'),local('Times');size-adjust:92%;ascent-override:107%;descent-override:34%;line-gap-override:0%}
@font-face{font-family:'PTT Sans Fallback';src:local('Helvetica Neue'),local('Arial');size-adjust:104%;ascent-override:96%;descent-override:28%;line-gap-override:0%}

:root{
  --g:#8BDB12; --g-hi:#C9F77A; --w:#F4F3EE; --soft:#C9C8C2; --mute:#9A9A95; --hair:rgba(244,243,238,.16);
  --serif:'Instrument Serif','PTT Serif Fallback',Georgia,serif;
  --sans:'Geist','PTT Sans Fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gut:20px;                       /* page edge */
  --tx:calc(var(--gut) + 6px);      /* the trail's x: the centre of the mark's green square */
  --ind:48px;                       /* where type starts, to the right of the trail */
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:860px){ :root{ --gut:44px; --ind:clamp(104px,9.2vw,160px) } }

*,*::before,*::after{box-sizing:border-box}
html{background:#000;color:var(--w);-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:24px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0;background:#000;font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,p,ol{margin:0;padding:0}
ol{list-style:none}
a{color:inherit}
::selection{background:var(--g);color:#000}
:focus-visible{outline:2px solid var(--g);outline-offset:4px;border-radius:3px}
.skip{position:absolute;left:var(--gut);top:-80px;z-index:20;padding:10px 14px;background:var(--g);color:#000;font-weight:600;text-decoration:none;border-radius:8px}
.skip:focus{top:max(12px,env(safe-area-inset-top))}

.page{position:relative;overflow:hidden;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

/* ── the trail ── */
.trail{position:absolute;left:calc(var(--tx) + env(safe-area-inset-left) - 1px);top:0;width:2px;height:0;z-index:3;pointer-events:none;display:none}
.js .trail{display:block}
.trail i{position:absolute;left:0;top:0;width:2px;display:block}
.trail-base{height:100%;background:var(--hair)}
.trail-line{height:100%;background:var(--g);transform-origin:0 0;transform:scaleY(0);box-shadow:0 0 14px rgba(139,219,18,.55);will-change:transform}
.trail-head{width:9px!important;height:9px;left:-3.5px!important;top:-4.5px!important;border-radius:50%;background:var(--g-hi);box-shadow:0 0 0 4px rgba(139,219,18,.18),0 0 16px 2px rgba(139,219,18,.9);will-change:transform;opacity:0}
.ready .trail-head{opacity:1;transition:opacity .4s linear .3s}
.trail.done .trail-head{opacity:0;transition:opacity .25s linear}

/* ── masthead ── */
.mast{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:max(18px,calc(env(safe-area-inset-top) + 8px)) var(--gut) 0}
.mark{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:#EDEDE8;text-decoration:none;white-space:nowrap;padding:8px 0}
.mark i{display:block;width:12px;height:12px;background:var(--g);margin-right:13px;flex:none}
.mast-link{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);text-decoration:none;padding:8px 0 8px 12px}
.mast-link:hover{color:var(--w)}
@media (min-width:860px){ .mark{font-size:14px} .mark i{width:13px;height:13px} .mast-link{font-size:13px} }

/* ── hero ── */
.hero{position:relative;min-height:calc(100vh - 52px);min-height:calc(100svh - 52px);display:flex;flex-direction:column}
.hero-in{position:relative;z-index:2;padding:clamp(34px,7.5svh,96px) var(--gut) clamp(150px,24svh,260px) var(--ind);display:flex;flex-direction:column;flex:1}
.display{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,21.4vw,9rem);line-height:.9;letter-spacing:-.024em;color:var(--w);margin-left:-.04em}
.display .ln{display:block}
.display .w{display:inline-block}
.lede{margin-top:clamp(22px,3.4svh,36px);max-width:30em;color:var(--soft);font-size:17px;line-height:1.5;text-wrap:pretty}

.floor{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(46vh,440px);height:min(46svh,440px);z-index:1;display:block;touch-action:pan-y}

@media (min-width:700px){
  .display{font-size:clamp(5.4rem,12.6vw,13rem)}
  .display .brk{display:none}
  .lede{font-size:19px}
}

/* short phones: keep the sign-up box and the YouTube row on the first screen */
@media (max-width:699px) and (max-height:720px){
  .hero-in{padding-top:22px}
  .lede{margin-top:16px;font-size:16px;line-height:1.45}
  .hero .signup{margin-top:20px}
  .hero .yt{margin-top:14px;padding:14px 0}
  .field{height:58px}
  .field button{height:44px}
}

/* ── sign-up ── */
.signup{margin-top:clamp(26px,4.4svh,44px);max-width:520px}
.signup-label{display:block;font-weight:500;font-size:15.5px;color:var(--w);margin-bottom:11px;letter-spacing:-.005em}
.field{position:relative;display:flex;align-items:center;height:62px;border-radius:15px;background:rgba(0,0,0,.84);border:1.5px solid rgba(244,243,238,.3)}
.field.svg-on{border-color:transparent}
.field-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none}
.field.svg-on .field-svg{display:block}
.f0{fill:none;stroke:rgba(244,243,238,.3);stroke-width:1.5}
.f1{fill:none;stroke:var(--g);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(139,219,18,.7))}
.fh{fill:var(--g-hi);filter:drop-shadow(0 0 6px rgba(139,219,18,1));opacity:0}
.field input[type=email]{flex:1;min-width:0;height:100%;padding:0 12px 0 19px;background:transparent;border:0;outline:0;border-radius:15px 0 0 15px;color:var(--w);caret-color:var(--g);font:400 17px/1.2 var(--sans);letter-spacing:-.005em;-webkit-appearance:none;appearance:none}
.field input[type=email]::placeholder{color:#77776F;opacity:1}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--w);-webkit-box-shadow:0 0 0 60px #000 inset;caret-color:var(--g)}
.field:focus-within .f0{stroke:rgba(244,243,238,.5)}
.field:focus-within{border-color:rgba(244,243,238,.5)}
.field.svg-on:focus-within{border-color:transparent}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.field button{position:relative;flex:none;height:48px;min-width:112px;margin-right:6px;padding:0 18px;border:0;border-radius:10px;background:var(--g);color:#000;font:600 15.5px/1 var(--sans);letter-spacing:-.005em;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .2s linear,transform .12s var(--ease);touch-action:manipulation}
.field button:hover{background:var(--g-hi)}
.field button:active{transform:scale(.97)}
.field button:focus-visible{outline-offset:3px;border-radius:10px}
.field button span{display:block}
.b-busy,.b-done{position:absolute;inset:0;display:flex!important;align-items:center;justify-content:center;opacity:0}
.b-busy i{width:5px;height:5px;margin:0 2.5px;border-radius:50%;background:#000;animation:blip 1s infinite}
.b-busy i:nth-child(2){animation-delay:.15s}.b-busy i:nth-child(3){animation-delay:.3s}
@keyframes blip{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.is-busy .b-idle,.is-done .b-idle{opacity:0}
.is-busy .b-busy{opacity:1}
.is-done .b-done{opacity:1}
.is-busy button,.is-done button{pointer-events:none}
.is-done .field input[type=email]{color:var(--soft)}
.is-bad .f0{stroke:#E8E6DC}
.note{margin-top:11px;min-height:1.45em;font-size:13.5px;line-height:1.45;color:var(--mute)}
.is-done .note{color:var(--w)}
.is-bad .note{color:var(--w)}

/* ── YouTube row ── */
.yt{position:relative;display:flex;align-items:center;gap:13px;max-width:520px;margin-top:clamp(18px,3svh,30px);padding:17px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);text-decoration:none;color:var(--w);background:rgba(0,0,0,.6)}
.yt-ic{flex:none;color:var(--w);transition:color .2s linear}
.yt-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.yt-t{font-weight:500;font-size:16.5px;line-height:1.25;letter-spacing:-.005em}
.yt-h{font-family:var(--mono);font-size:11.5px;line-height:1.3;letter-spacing:.1em;color:var(--mute);white-space:nowrap}
.yt::after{content:'';flex:none;margin-left:auto;width:9px;height:9px;border-top:1.5px solid var(--mute);border-right:1.5px solid var(--mute);transform:rotate(45deg);transition:border-color .2s linear,transform .25s var(--ease)}
.yt:hover .yt-ic,.yt:active .yt-ic{color:var(--g)}
.yt:hover::after,.yt:active::after{border-color:var(--g);transform:translateX(3px) rotate(45deg)}

/* ── the latest trail ── */
.film{position:relative;z-index:2;padding-top:clamp(40px,9svh,120px)}
.film-head{padding:0 var(--gut) 0 var(--ind)}
.film-kicker{font-family:var(--serif);font-style:italic;font-size:clamp(1.35rem,5.6vw,1.9rem);line-height:1.1;color:var(--mute)}
.film-title{font-family:var(--serif);font-weight:400;font-size:clamp(3.6rem,17.4vw,10rem);line-height:.92;letter-spacing:-.024em;margin:.06em 0 0 -.04em}
.film-meta{margin-top:18px;max-width:27em;font-size:15.5px;color:var(--mute);text-wrap:pretty}

.dots{margin-top:clamp(56px,10svh,120px)}
.dot{--fs:clamp(1.95rem,8.3vw,3.5rem);position:relative;padding:0 var(--gut) 0 var(--ind);margin-bottom:clamp(60px,11svh,128px)}
.say{font-family:var(--serif);font-size:var(--fs);line-height:1.07;letter-spacing:-.014em;color:var(--w);max-width:17.5em;text-wrap:pretty}
.node{position:absolute;left:calc(var(--tx) - 5.5px);top:calc(var(--fs)*.54 - 5.5px);width:11px;height:11px;border-radius:50%;background:#000;border:1.5px solid rgba(244,243,238,.42);z-index:4;display:block}
mark{color:#000;background:linear-gradient(var(--g),var(--g)) no-repeat 0 64%/100% 84%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .09em;margin:0 -.09em;border-radius:.05em}
.src{margin-top:16px;display:flex;flex-wrap:wrap;gap:2px 18px;font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.src a,.src span{display:inline-block;padding:7px 0}
.src a{color:var(--soft);text-decoration:underline;text-decoration-color:rgba(244,243,238,.32);text-decoration-thickness:1px;text-underline-offset:5px;transition:color .15s linear,text-decoration-color .15s linear}
.src a:hover,.src a:active{color:var(--g);text-decoration-color:var(--g)}
.dot.ask{--fs:clamp(2.5rem,10.6vw,5rem)}
.dot.ask .say{max-width:13em;line-height:1}
.dot.ask .node{width:15px;height:15px;left:calc(var(--tx) - 7.5px);top:calc(var(--fs)*.5 - 7.5px)}

/* with scripting, a dot is dim until the trail reaches it; then it lights and the highlight wipes in */
.js .say{opacity:.3;transition:opacity .55s linear}
.js .src{opacity:0;transform:translateY(4px);transition:opacity .5s linear .25s,transform .6s var(--ease) .25s}
.js mark{color:inherit;background-size:0% 84%;transition:background-size .62s var(--ease) .28s,color .18s linear .52s}
.js .node{transition:background-color .25s linear,border-color .25s linear,box-shadow .5s var(--ease)}
.js .dot.on .say{opacity:1}
.js .dot.on .src{opacity:1;transform:none}
.js .dot.on mark{color:#000;background-size:100% 84%}
.js .dot.on .node{background:var(--g);border-color:var(--g);box-shadow:0 0 0 6px rgba(139,219,18,.16),0 0 18px rgba(139,219,18,.55)}

@media (min-width:860px){
  .dot{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,280px);column-gap:clamp(32px,5vw,88px);align-items:start}
  .dot.ask{display:block}
  .src{margin-top:calc(var(--fs)*.3);flex-direction:column;gap:0;font-size:12px}
  .film-meta{font-size:17px}
}

/* ── the end: the trail walks into this box ── */
.end{position:relative;z-index:2;padding:clamp(8px,2svh,24px) var(--gut) clamp(64px,10svh,120px) var(--ind)}
.end-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.7rem,11.6vw,6.4rem);line-height:.96;letter-spacing:-.022em;max-width:9.5em;margin-left:-.03em}
.signup-end{margin-top:clamp(30px,5svh,52px);max-width:none}
.signup-end .field{margin-left:calc(var(--tx) - var(--ind));max-width:calc(520px + var(--ind) - var(--tx))}
.signup-end .field input[type=email]{padding-left:calc(var(--ind) - var(--tx))}
.yt-end{margin-top:clamp(26px,4svh,44px);background:none}

/* ── footer: the stage ── */
.foot{position:relative;min-height:max(54svh,380px);display:flex;align-items:flex-end;margin-top:clamp(20px,4svh,60px)}
.foot .floor{height:100%;max-height:none}
.foot-in{position:relative;z-index:2;width:100%;padding:0 var(--gut) max(22px,calc(env(safe-area-inset-bottom) + 12px))}
.foot-name{font-family:var(--serif);font-size:clamp(2.6rem,15.2vw,11.5rem);line-height:.9;letter-spacing:-.026em;white-space:nowrap;margin-left:-.03em;color:var(--w)}
.foot-line{margin-top:18px;display:flex;flex-wrap:wrap;gap:4px 22px;font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.foot-line a,.foot-line span{padding:8px 0;text-decoration:none}
.foot-line a:hover{color:var(--w)}

/* ── arrival: one orchestrated moment, then the page is still until you move ── */
.js .display .w{opacity:0;transform:translateY(.24em)}
.js .lede,.js .hero .signup,.js .hero .yt,.js .mast-link{opacity:0}
.js .floor{opacity:0}
.js.ready .display .w{opacity:1;transform:none;transition:opacity .7s linear calc(var(--i,0)*85ms + 140ms),transform .9s var(--ease) calc(var(--i,0)*85ms + 140ms)}
.js.ready .lede{opacity:1;transition:opacity .8s linear .78s}
.js.ready .hero .signup{opacity:1;transition:opacity .8s linear .94s}
.js.ready .hero .yt{opacity:1;transition:opacity .8s linear 1.08s}
.js.ready .mast-link{opacity:1;transition:opacity .8s linear 1.08s,color .15s linear}
.js.ready .floor{opacity:1;transition:opacity 1.6s linear .5s}

@media (prefers-reduced-motion:reduce){
  .js .display .w,.js .lede,.js .hero .signup,.js .hero .yt,.js .mast-link,.js .floor{opacity:1!important;transform:none!important;transition:none!important}
  .js .say,.js .src{opacity:1;transform:none;transition:none}
  .js mark{color:#000;background-size:100% 84%;transition:none}
  .trail-line{box-shadow:none}
  .b-busy i{animation:none}
}

/* ── not found ── */
.lost{padding:clamp(48px,12svh,140px) var(--gut) 80px var(--ind)}
.lost .display{font-size:clamp(3.2rem,15vw,9rem)}