@font-face{font-family:"Space Grotesk";src:url(../assets/fonts/space-grotesk.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Le Jour";src:url(../assets/fonts/le-jour-serif.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Northwell";src:url(../assets/fonts/northwell-clean.ttf) format("truetype");font-display:swap}

:root{
  --dark:#282c20;--white:#f4f4ed;--black:#111112;--lime:#d2ff00;--lime-off:#b2c73a;
  --off1:#dde1d2;--off2:#b4b8a5;
  --ink:#111112;--paper:#fafaf6;
  --sans:"Space Grotesk",Arial,sans-serif;
  --serif:"Le Jour","Space Grotesk",Georgia,serif;
  --script:"Northwell",cursive;
  --ease:cubic-bezier(.65,.05,0,1);
  --gap:1.25rem;
}
html[data-theme=dark]{--ink:#f4f4ed;--accent:var(--lime-off)}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);overflow-x:clip;-webkit-font-smoothing:antialiased;transition:color .5s}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;box-shadow:0 0 0 5px #111112}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-4rem;z-index:200;background:var(--lime);color:var(--black);padding:.75rem 1rem;border-radius:.5rem;font-weight:700}
.skip:focus{top:1rem}
.serif{font-family:var(--serif);font-weight:400}
.lime{color:var(--lime)}
.eyebrow{font-size:.625rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.serif-lc{font-family:var(--serif);letter-spacing:.01em;text-align:center}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block}

/* signature: shape is uncovered through a mask drawn along the pen's route */
.sig{display:block;overflow:visible;pointer-events:none;fill:var(--lime)}
.sig mask path{fill:none;stroke:#fff;stroke-width:64;stroke-linecap:round;stroke-linejoin:round}

/* loader: the logo is outlined, fills in, then the curtain lifts */
.loader{position:fixed;inset:0;z-index:120;background:#0c0d0a;display:grid;place-items:center;transition:clip-path .9s var(--ease);clip-path:inset(0)}
.loader.out{clip-path:inset(0 0 100% 0)}
.loader-logo{width:min(32vw,10rem);overflow:visible;animation:logoIn 1.9s var(--ease) both;transition:transform .9s var(--ease),opacity .5s}
.loader.out .loader-logo{transform:translateY(-3rem);opacity:0}
.loader-logo path{fill:var(--white);fill-opacity:0;stroke:var(--lime);stroke-width:5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:logoDraw 1.1s var(--ease) .1s forwards,logoFill .6s ease 1s forwards}
@keyframes logoIn{from{transform:scale(.82) rotate(-4deg)}to{transform:none}}
@keyframes logoDraw{to{stroke-dashoffset:0}}
@keyframes logoFill{to{fill-opacity:1;stroke-opacity:0}}

/* nav */
.nav{transition:padding .6s var(--ease),color .5s,transform .6s var(--ease);position:fixed;inset:0 0 auto;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:var(--pad,1.25rem) 1.25rem;color:var(--ink);pointer-events:none}
.nav.hide{transform:translateY(-110%)}
.menu-open .nav{transform:none}
.nav>*{pointer-events:auto}
.nav.small{--pad:.875rem}
.logo{display:block;width:max-content;line-height:.88;transition:transform .6s var(--ease);transform-origin:0 0}
.nav.small .logo{transform:scale(.82)}
.logo-a{display:block;font-family:var(--serif);font-size:2.4rem;letter-spacing:.005em}
.mark{display:block;color:currentColor;transition:opacity .4s;width:2.25rem;height:2.4rem}
.mark svg{display:block;width:100%;height:100%;fill:currentColor}
.nav.small .mark{opacity:0;pointer-events:none}
.nav-right{display:flex;justify-content:flex-end;gap:.75rem;align-items:center}
.btn{white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem;height:3rem;padding:0 1.05rem;background:var(--lime);color:var(--black);border-radius:.75rem;font-weight:700;font-size:.875rem;letter-spacing:.01em;transition:transform .4s var(--ease),background .3s;touch-action:manipulation}
.btn:hover{transform:scale(1.04)}
.btn:active{transform:scale(.97)}
.ic{width:.875rem;height:.875rem;fill:currentColor;flex:none}
.ic.stroke{fill:none;stroke:currentColor;stroke-width:1.6}
/* label rolls up to a copy of itself on hover */
.roll{display:inline-block;overflow:hidden;height:1.25em;line-height:1.25}
.roll>span{display:block;transition:transform .5s var(--ease)}
.btn:hover .roll>span{transform:translateY(-100%)}
.menu-btn{width:3rem;height:3rem;border:1.5px solid currentColor;border-radius:.75rem;position:relative;transition:background .3s,color .3s;color:var(--ink)}
.menu-btn i{position:absolute;right:.7rem;height:1.5px;background:currentColor;transition:transform .5s var(--ease),width .5s var(--ease),top .5s var(--ease)}
.menu-btn i:nth-child(1){top:1.2rem;width:.9rem}
.menu-btn i:nth-child(2){top:1.6rem;width:1.5rem;width:.55rem;right:1.05rem}
.menu-open .menu-btn{background:var(--lime);color:var(--black);border-color:var(--lime)}
.menu-open .menu-btn i{top:1.4rem;width:1.1rem;right:.875rem}
.menu-open .menu-btn i:nth-child(1){transform:rotate(45deg)}
.menu-open .menu-btn i:nth-child(2){transform:rotate(-45deg)}
.menu-open .nav{color:var(--white)}
.menu-open .menu-btn{border-color:var(--lime)}

/* menu */
.menu{position:fixed;inset:0;z-index:90;background:var(--dark);color:var(--white);display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:6rem 1.25rem 2rem;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);visibility:hidden}
.menu-open .menu{clip-path:inset(0);visibility:visible}
.menu-photo{height:min(70vh,36rem);aspect-ratio:3/4;justify-self:center;overflow:hidden;border-radius:1rem}
.menu-photo img{width:100%;height:100%;object-fit:cover}
.menu-links a{display:block;overflow:hidden;font-size:clamp(2.6rem,7vh,5.5rem);font-weight:700;line-height:1.08;text-transform:uppercase}
.menu-links span{display:block;transform:translateY(105%);transition:transform .8s var(--ease),color .3s}
.menu-links a:hover span{color:var(--lime)}
.menu-open .menu-links span{transform:none}
.menu-links li:nth-child(2) span{transition-delay:.05s,0s}.menu-links li:nth-child(3) span{transition-delay:.1s,0s}.menu-links li:nth-child(4) span{transition-delay:.15s,0s}.menu-links li:nth-child(5) span{transition-delay:.2s,0s}.menu-links li:nth-child(6) span{transition-delay:.25s,0s}

/* hero */
.hero{height:320vh;position:relative}
.hero-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-layer{position:absolute;inset:0;will-change:transform,opacity}
.hero-stage{position:absolute;inset:0;overflow:hidden;background:#0c0d0a;opacity:0;transform:scale(1.06);transition:opacity 1s,transform 1.8s var(--ease)}
.ready .hero-stage{opacity:1;transform:none}
.hero-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0c0d0a99 0,#0c0d0a00 22%,#0c0d0a00 72%,#0c0d0ab3 100%)}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 33%;user-select:none;-webkit-user-drag:none}
.hero-mask{position:absolute;inset:0;width:100%;height:100%}
.race,.hero-note{position:absolute;bottom:1.25rem;color:var(--white);opacity:0;transition:opacity 1s .8s;z-index:2}
.ready .race,.ready .hero-note{opacity:1}
.race{left:1.25rem}
.race .eyebrow{color:var(--lime)}
.race-name{font-size:1.5rem;font-weight:700;line-height:1.1;margin-top:.3rem}
.race-name b{font-family:var(--serif);font-weight:400;color:var(--lime)}
.race-sub{font-size:.75rem;font-weight:700;margin-top:.2rem;font-variant-numeric:tabular-nums}
.hero-note{right:1.25rem;text-align:right;line-height:1.35}

/* message */
.msg{position:absolute;inset:0;color:var(--white);opacity:0;pointer-events:none}
.msg-tag{position:absolute;left:0;right:0;top:9%;display:grid;justify-items:center;gap:.4rem;z-index:3;color:var(--lime)}
.msg-tag .eyebrow{color:var(--white)}
.mark-sm{width:1.9rem;height:2rem}
.msg-rows{position:absolute;left:0;top:26%;white-space:nowrap;line-height:1;z-index:1}
.msg-row{font-size:clamp(3.5rem,10.5vw,10rem);will-change:transform}
.msg-row.serif{color:var(--lime-off)}
.msg-row.sans{font-weight:700;color:var(--off1);margin-top:.03em}
.msg-photo{position:absolute;left:50%;top:22%;width:min(33vw,80vw);min-width:18rem;aspect-ratio:1.55;transform:translate(-50%,0);overflow:hidden;z-index:2;will-change:transform}
.msg-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;filter:grayscale(1) contrast(.85) brightness(.82);mix-blend-mode:luminosity}
.msg-photo::after{content:"";position:absolute;inset:0;background:#3b3c38;mix-blend-mode:soft-light}
.sig-msg{position:absolute;left:50%;top:17%;width:min(56vw,52rem);min-width:20rem;transform:translateX(-50%);z-index:3}

/* statement */
.state{position:relative;z-index:1;padding:3rem 1.25rem 11rem;text-align:center;color:var(--off1)}
.state-head{display:grid;justify-items:center;gap:.6rem;margin-bottom:2.5rem}
.state-head .mark{color:var(--lime)}
.statement{font-size:clamp(2.4rem,6.6vw,7.25rem);font-weight:700;line-height:1.07;max-width:15.5em;margin:auto;text-transform:uppercase}
.statement em{font-family:var(--serif);font-style:normal;font-weight:400;color:var(--lime-off)}
.reveal{opacity:0;transform:translateY(1.75rem);transition:opacity .9s,transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* gallery rail: a loose collage, positioned in one unit so it holds on any screen */
.track{height:420vh}
.track-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.track-rail{--u:min(1vh,1.55vw);position:absolute;left:0;top:calc((100svh - 100*var(--u))/2);height:calc(100*var(--u));width:calc(286*var(--u));will-change:transform}
.ph{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u));margin:0;z-index:1;will-change:transform}
.ph-top{z-index:2}
.ph.ph-top figcaption{top:auto;bottom:-1.1rem}
.ph figcaption{position:absolute;top:-1.1rem;left:0;font-size:.56rem;font-weight:700;letter-spacing:.02em}
.ph>div{position:absolute;inset:0;overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--ease)}
.ph.in>div{clip-path:inset(0)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);transform:scale(1.15)}
.ph.in img{transform:none}
.ph:hover img{transform:scale(1.04)}
.track-ghost{position:absolute;left:calc(84*var(--u));top:calc(68*var(--u));font-family:var(--serif);font-size:calc(26*var(--u));line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--ink);opacity:.28;pointer-events:none;will-change:transform}
.quote{position:absolute;z-index:1;left:calc(88*var(--u));top:calc(12*var(--u));width:calc(44*var(--u));font-family:var(--serif);font-size:clamp(1.9rem,calc(7*var(--u)),4.5rem);line-height:1.02;letter-spacing:.01em}
.quote-bio{font-family:var(--sans);font-size:1rem;line-height:1.35;letter-spacing:0;margin-top:1.25rem}
.sweep-w{position:relative;display:inline-block}
.sweep-w::after{content:"";position:absolute;inset:-.05em -.1em;background:var(--lime);transform-origin:100% 50%;transition:transform .8s var(--ease);transition-delay:var(--d,0s)}
.in .sweep-w::after{transform:scaleX(0)}
.sig-mini{width:7rem;margin-top:1rem;fill:currentColor}

/* on track / off track */
.otot{height:340vh}
.otot-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;padding:0 1.25rem}
.otot-pic{width:min(27vw,58vh);aspect-ratio:3/4;margin:0;overflow:hidden;will-change:transform}
.otot-pic img{width:100%;height:100%;object-fit:cover}
/* nudged so the eyes in both portraits sit on one line */
.otot-right img{object-position:48% 50%;transform:scale(1.1);transform-origin:50% 100%}
.otot-center{grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:2rem;text-align:center;color:var(--dark)}
.otot-title{font-size:clamp(2.2rem,4.4vw,4.5rem);line-height:.95;font-weight:700}
.otot-title span{display:block}
.otot-col p{font-size:.95rem;line-height:1.25;margin:1rem auto;max-width:17em}
.btn-round{display:inline-grid;place-items:center;width:3rem;height:3rem;background:var(--lime);border-radius:.75rem;color:var(--black);transition:transform .4s var(--ease)}
.btn-round:hover{transform:scale(1.1) rotate(8deg)}
.btn-round svg{width:1rem;fill:none;stroke:currentColor;stroke-width:1.6}
.otot-full{position:absolute;inset:0;margin:0;z-index:3;overflow:hidden;clip-path:inset(100% 0 0 0);will-change:clip-path}
.otot-full img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;will-change:transform}

.big{font-size:clamp(2.6rem,6vw,5.75rem);line-height:.95;font-weight:700}
.big.center{text-align:center}

/* work */
.work{position:relative;z-index:2;margin-top:-7vw;padding:calc(7vw + 5rem) 1.25rem 7rem;background:var(--white);color:var(--dark);border-radius:50% 50% 0 0/7vw 7vw 0 0;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end}
.work-label{grid-column:1/-1;display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700}
.work-copy{grid-row:2;grid-column:1;position:relative;z-index:2;max-width:32rem}
.work-pics{grid-row:2;grid-column:2;justify-self:end;width:min(100%,63vh)}
.work-pics figure{aspect-ratio:3/4;margin:0;overflow:hidden}
.work-pics img{width:100%;height:100%;object-fit:cover}
.work-title{font-size:clamp(3.2rem,9vw,8rem);line-height:.92;font-weight:700}
.work-copy p{margin:1.25rem 0 1.5rem;font-size:1.0625rem;line-height:1.4;max-width:27em}

/* craft */
.craft{position:relative;padding:8rem 0 7rem;overflow:hidden;color:var(--dark);background:var(--white)}
.craft-script{position:absolute;left:-6%;top:-3%;width:68%;overflow:visible;pointer-events:none}
.craft-script text{font-family:var(--script);font-size:440px;fill:var(--lime);fill-opacity:var(--f,1);stroke:var(--lime);stroke-width:4;stroke-dasharray:14000;stroke-dashoffset:var(--o,0)}
.craft-head{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;gap:2rem 16vw;padding:6rem 1.25rem 5rem}
.craft-head p:not(.big){max-width:27em;line-height:1.3}
.mq{position:relative;overflow:hidden;white-space:nowrap}
.mq-in{display:inline-flex;align-items:center;gap:4.5rem;padding-right:4.5rem;font-size:clamp(1.5rem,3vw,2.5rem);font-weight:700;will-change:transform}

/* socials */
.socials{position:relative;padding:5rem 1.25rem 7rem;text-align:center;overflow:hidden;color:var(--dark);background:var(--white)}
.soc-icon{margin:0 auto 1rem}
.fan{position:relative;height:clamp(22rem,56vh,34rem);margin:3rem auto 2rem;max-width:64rem}
.fan-c{position:absolute;left:50%;top:50%;width:clamp(10rem,18vw,17rem);aspect-ratio:9/16;margin:0;border-radius:1.5rem;overflow:hidden;background:var(--off1);transform:translate(-50%,-50%) translateX(var(--tx,0)) translateY(var(--ty,0)) rotate(var(--r,0deg)) scale(var(--sc,1));transition:transform .6s var(--ease);z-index:var(--z,1)}
.fan-c:hover,.fan-c:focus-visible{--ty:-3.5% !important;z-index:9}
.fan-c img{width:100%;height:100%;object-fit:cover}
.soc-line{font-size:clamp(1.25rem,2.2vw,1.75rem);margin-bottom:1.25rem}
.soc-links{display:flex;justify-content:center;flex-wrap:wrap;gap:.625rem}

/* footer */
.foot{background:var(--lime);padding:1.25rem 1.25rem 0;position:relative}
.foot-card{position:relative;overflow:hidden;background:var(--dark);color:var(--white);padding:3.5rem 1.25rem 3.5rem;display:grid;justify-items:center;clip-path:polygon(1.25rem 1.25rem,36% 1.25rem,38% 0,62% 0,64% 1.25rem,calc(100% - 1.25rem) 1.25rem,100% 2.5rem,100% calc(100% - 1.25rem),calc(100% - 1.25rem) 100%,1.25rem 100%,0 calc(100% - 1.25rem),0 2.5rem)}
.sig-foot{position:absolute;top:2rem;left:50%;width:11rem;margin-left:-5.5rem;z-index:2}
.foot-title{position:relative;z-index:1;text-align:center;font-size:clamp(2.6rem,7.5vw,8rem);line-height:.98;font-weight:700;margin-top:6rem}
.foot-mid{position:relative;z-index:3;display:flex;justify-content:center;gap:clamp(4rem,16vw,16rem);padding:4rem 0 3.5rem}
.foot-col{display:grid;align-content:start;justify-items:center;gap:.05rem}
.foot-col .eyebrow{margin-bottom:.8rem;color:var(--off1)}
.foot-col a{font-size:clamp(1.05rem,1.75vw,1.625rem);font-weight:700;line-height:1.15;transition:color .25s}
.foot-col a:hover{color:var(--lime)}
.lime-a{color:var(--lime);font-size:.95rem !important;margin-top:.5rem}
.foot-mq{justify-self:stretch;margin:0 -1.25rem 2.5rem;color:var(--white)}
.foot-mq .mq-in{font-size:1.25rem}
.foot-bar{display:flex;justify-content:space-between;padding:.625rem 0;font-size:.625rem;font-weight:700;color:var(--black)}

@media(max-width:700px){
  .nav>.mark{display:none}
  .nav{grid-template-columns:1fr auto}
  .hero-note{display:none}
}
@media(max-width:900px){
  .logo-a{font-size:1.9rem}
  .menu{grid-template-columns:1fr}.menu-photo{display:none}
  .otot-sticky{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;align-content:center;gap:1.5rem .75rem;padding:4.5rem 1.25rem 1rem}
  .otot-pic{width:100%}
  .otot-left{grid-column:1;grid-row:1}
  .otot-right{grid-column:2;grid-row:1}
  .otot-center{grid-column:1/-1;grid-row:2;gap:.75rem}
  .otot-col p{font-size:.875rem;margin:.6rem auto}
  .work{grid-template-columns:1fr;padding-top:calc(7vw + 4rem)}
  .work-copy{grid-row:3;grid-column:1;margin-top:1.5rem}
  .work-pics{grid-column:1;width:100%}
  .craft-script{width:104%;left:-2%}
  .fan-c{width:38vw}
  .foot-mid{padding:2.5rem 0}
  .sig-foot{margin-left:-4.5rem;width:9rem}
  .foot-title{margin-top:5rem}
}
@media(prefers-reduced-motion:reduce){
  .reveal,.ph>div,.ph img,.sweep-w::after,.hero-stage,.loader{transition:none}
  .loader-logo,.loader-logo path{animation:none}
  .loader-logo path{fill-opacity:1;stroke-opacity:0;stroke-dashoffset:0}
}