:root{
  --ink:#f2f0eb;      /* warm paper white */
  --dim:rgba(242,240,235,.6);
  --graphite:#ece6d8;
  --black:#000;
}
@font-face{font-family:"Archivo GP";src:url("fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Plex Mono GP";src:url("fonts/plexmono.woff2") format("woff2");font-weight:400;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--black);color:var(--ink)}
body{font-family:"Archivo GP",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* opening: the Player's photographed gearbox, pushed in slowly, lit by a passing light, marked up in pencil */
.opening{position:relative;height:480vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;width:100%;overflow:hidden;background:#000}
.rig{position:absolute;inset:0;will-change:transform}
.box{position:absolute;left:0;top:0;width:100vw;height:56.25vw;opacity:0;transition:opacity 2.6s cubic-bezier(.3,.1,.2,1)}
.ready .box{opacity:1}
.photo{position:absolute;inset:0;width:100%;height:100%;display:block}
.oil{position:absolute;left:50.78%;top:18.23%;width:26.37%;height:52.95%;opacity:.4;will-change:opacity}
.sweep{position:absolute;inset:0;mix-blend-mode:overlay;opacity:.75;pointer-events:none;
  background:linear-gradient(104deg,rgba(255,246,228,0) 0%,rgba(255,246,228,0) 38%,rgba(255,246,228,.55) 47%,rgba(255,250,240,.85) 50%,rgba(255,246,228,.55) 53%,rgba(255,246,228,0) 62%,rgba(255,246,228,0) 100%) no-repeat;
  background-size:260% 100%;background-position:120% 0}
.marks{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mk{fill:none;stroke:var(--graphite);stroke-width:3.8;stroke-linecap:round;stroke-linejoin:round;opacity:.86;stroke-dasharray:1 1;stroke-dashoffset:1}
.mk.c{stroke-width:3;opacity:.74}
.mk.faint{opacity:.5;stroke-width:2.6}
/* fingerprint: the construction lines resolve into a whorl on the hub; the blueprint recedes as it forms */
.marks{--recede:1}
.mk.c{opacity:calc(.74*var(--recede))}.mk.p:not(.rim){opacity:calc(.86*var(--recede))}
/* v2: blueprint marks drawn as precise technical lines (no grain, butt ends, mitred arrows);
   the outer circle stays a loose graphite sketch; the print's ridges are wider than the blueprint line */
.bp .mk{stroke-width:calc(3px * var(--zc,1));stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:8;shape-rendering:geometricPrecision}
.bp .mk.c{stroke-width:calc(2.6px * var(--zc,1))}
/* v3: the print is the reusable motif in fingerprint.js / fingerprint.css, one third smaller than v2
   (print height 418.1 to 278.7 image units); widths scaled with it so the ridges and marks keep their v2 proportions */
.marks .gpfp{--gpfp-ridge:calc(3.2px * var(--zr,1));--gpfp-mark:calc(2px * var(--zc,1));--gpfp-circle:calc(2.6px * var(--zr,1));--gpfp-circle-faint:calc(1.8px * var(--zr,1))}
.portrait .mk{stroke-width:5}.portrait .bp .mk{stroke-width:calc(4.2px * var(--zc,1))}.portrait .bp .mk.c{stroke-width:calc(3.6px * var(--zc,1))}
/* phones: same size as desktop (subtle, off the rotor); legibility from ridge width and contrast only */
.portrait .marks .gpfp{--gpfp-ridge:calc(3.9px * var(--zr,1));--gpfp-mark:calc(2.8px * var(--zc,1));--gpfp-circle:calc(3.3px * var(--zr,1));--gpfp-circle-faint:calc(3.3px * var(--zr,1))}
.portrait .gpfp-ridges path{opacity:.94}
.portrait .box{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 66%,transparent 98%);mask-image:linear-gradient(to bottom,#000 0%,#000 66%,transparent 98%)}

/* v4: keeps the words on black while the camera pushes in over them */
.zscrim{position:absolute;inset:0;pointer-events:none;opacity:0}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 11%, rgba(0,0,0,0) 22%),
   linear-gradient(to bottom, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 13%),
   radial-gradient(ellipse 125% 95% at 60% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.8) 100%)}
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.08;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.dark{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:2}

.mark{position:absolute;top:calc(22px + env(safe-area-inset-top));left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;z-index:3}
.wordmark{font-family:"Archivo GP";font-weight:800;font-stretch:72%;text-transform:uppercase;letter-spacing:.32em;font-size:12px;color:var(--ink)}

.words{position:absolute;left:6vw;top:50%;width:40vw;z-index:3}
.statement{font-weight:300;font-stretch:66%;line-height:.94;letter-spacing:-.01em;font-size:64px;color:var(--ink);opacity:0;
  text-shadow:0 0 2px #000,0 1px 8px rgba(0,0,0,.9),0 0 28px rgba(0,0,0,.8)}
.statement .l{display:block;white-space:nowrap}
.statement b{font-weight:900;font-stretch:62%}
.statement .w{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(.18em);
  transition:opacity 1.6s cubic-bezier(.2,.7,.1,1),filter 1.8s cubic-bezier(.2,.7,.1,1),transform 1.8s cubic-bezier(.2,.7,.1,1)}
.statement.in .w{opacity:1;filter:blur(0);transform:none}
.second{position:absolute;left:0;top:0;width:100%;font-weight:300;font-stretch:66%;line-height:.94;font-size:64px;color:var(--ink);opacity:0;white-space:nowrap;
  text-shadow:0 0 2px #000,0 1px 8px rgba(0,0,0,.9),0 0 28px rgba(0,0,0,.8)}
.second::before{content:"";display:block;width:2.2em;height:1px;background:var(--graphite);opacity:.7;margin-bottom:.45em;transform-origin:left;transform:scaleX(var(--rule,0))}

.hud{position:absolute;left:24px;right:24px;bottom:calc(22px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;
  font-family:"Plex Mono GP",ui-monospace,monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);z-index:3}
.hud-s{margin-left:.9em}
.cue{position:absolute;left:50%;bottom:calc(120px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:"Plex Mono GP",ui-monospace,monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);z-index:3;opacity:0;transition:opacity 1.2s}
.cue.on{opacity:1}
.cue i{display:block;width:1px;height:38px;background:linear-gradient(var(--ink),rgba(242,240,235,0));animation:cue 2.4s cubic-bezier(.6,0,.2,1) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* live line: newest Substack Note, his words only */
.live{position:absolute;left:24px;right:24px;bottom:calc(52px + env(safe-area-inset-bottom));z-index:3;display:flex;gap:14px;align-items:baseline;
  color:var(--ink);text-decoration:none;max-width:640px;opacity:0;animation:livein 1.6s 2.6s forwards}
.live-date{font-family:"Plex Mono GP",ui-monospace,monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.live-text{font-weight:400;font-stretch:80%;font-size:16px;line-height:1.3;text-shadow:0 0 6px #000,0 0 18px #000}
.live:hover .live-text,.live:focus-visible .live-text{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.live:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
@keyframes livein{to{opacity:1}}

/* products: reveal in place */
.products,.clients{background:#000;padding:18vh 24px 14vh;max-width:1280px;margin:0 auto}
.kicker{font-family:"Plex Mono GP",ui-monospace,monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-bottom:28px}
.product-list{list-style:none;border-top:1px solid rgba(242,240,235,.25)}
.product{border-bottom:1px solid rgba(242,240,235,.25)}
.product-head{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;cursor:pointer;color:var(--ink)}
.product-head:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.pname{font-weight:800;font-stretch:64%;font-size:clamp(40px,7.2vw,112px);line-height:.9;letter-spacing:-.01em;text-transform:uppercase;transition:opacity .5s}
.pname sup{font-size:.22em;font-weight:400;vertical-align:top;position:relative;top:.35em;margin-left:.15em;letter-spacing:0}
.product-list:hover .product:not(.open) .pname{opacity:.38}
.plus{position:relative;flex:0 0 22px;height:22px}
.plus::before,.plus::after{content:"";position:absolute;left:0;top:50%;width:22px;height:1px;background:var(--ink);transition:transform .6s cubic-bezier(.2,.7,.1,1)}
.plus::after{transform:rotate(90deg)}
.product.open .plus::after{transform:rotate(0)}
.product-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s cubic-bezier(.2,.7,.1,1)}
.product.open .product-body{grid-template-rows:1fr}
.pb-inner{overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:32px}
.pdef{font-weight:300;font-stretch:80%;font-size:clamp(20px,2.2vw,30px);line-height:1.2;max-width:780px;text-wrap:balance;padding:0 0 30px;opacity:0;transform:translateY(12px);transition:opacity .7s .15s,transform .9s .15s cubic-bezier(.2,.7,.1,1)}
.product.open .pdef{opacity:1;transform:none}
.pvis{flex:0 0 auto;width:240px;height:120px;margin-bottom:30px;fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:700;stroke-dashoffset:700;transition:stroke-dashoffset 1.6s .2s cubic-bezier(.4,0,.2,1)}
.pvis .hl{stroke-width:2.2}
.product.open .pvis{stroke-dashoffset:0}

/* client wall: quiet marks that turn into one line */
.logo-wall{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(242,240,235,.18);border-left:1px solid rgba(242,240,235,.18)}
.logo{position:relative;height:168px;border-right:1px solid rgba(242,240,235,.18);border-bottom:1px solid rgba(242,240,235,.18);display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;overflow:hidden}
.mark-svg svg{width:120px;height:40px;fill:none;stroke:rgba(242,240,235,.7);stroke-width:1.4}
.mark-svg{transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.1,1)}
.logo-line{position:absolute;inset:0;display:flex;align-items:center;padding:0 28px;font-weight:400;font-stretch:80%;font-size:19px;line-height:1.25;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.1,1)}
.logo:hover .mark-svg,.logo:focus .mark-svg,.logo.open .mark-svg{opacity:0;transform:translateY(-14px)}
.logo:hover .logo-line,.logo:focus .logo-line,.logo.open .logo-line{opacity:1;transform:none}
.logo:focus-visible{box-shadow:inset 0 0 0 1px var(--ink)}
.note{margin-top:18px;font-family:"Plex Mono GP",ui-monospace,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,240,235,.4)}

.after{height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#000;text-align:center;padding:0 24px}
.after-line{font-weight:300;font-stretch:66%;font-size:clamp(32px,5vw,64px);line-height:1}
.after-note{font-family:"Plex Mono GP",ui-monospace,monospace;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}


@media (max-width:600px){
  .live{bottom:calc(50px + env(safe-area-inset-bottom));gap:10px}
  .live-text{font-size:14.5px}
  .cue{display:none}
  .products,.clients{padding:14vh 20px 10vh}
  .product-head{padding:22px 0}
  .pb-inner{flex-direction:column;align-items:flex-start;gap:0}
  .pdef{padding-bottom:18px}
  .pvis{width:200px;height:100px;margin-bottom:26px}
  .logo-wall{grid-template-columns:repeat(2,1fr)}
  .logo{height:132px}
  .logo-line{font-size:15px;padding:0 16px}
  .wordmark{font-size:11px;letter-spacing:.28em}
  .hud{font-size:9.5px;letter-spacing:.14em}
}
@media (max-height:480px){
  .mark{top:14px}
  .hud{bottom:12px;font-size:9px}
  .live{bottom:32px}
  .live-text{font-size:13.5px}
  .cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .cue i{animation:none}
}
.still .box,.still .statement .w,.still .live{transition:none!important;animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
.notext .words,.notext .live,.notext .hud,.notext .mark{visibility:hidden}