@font-face{font-family:"General Sans";src:url(../fonts/general-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(../fonts/general-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"General Sans";src:url(../fonts/general-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Clash Display";src:url(../fonts/clash-display-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Clash Display";src:url(../fonts/clash-display-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --stone:#E8E6E1; --ink:#121212;
  --bg:#0C0C0C; --fg:#E8E6E1; --glow:#B9B2A6;
  --display:"Clash Display","General Sans",system-ui,sans-serif;
  --pad:clamp(18px,3.2vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);           /* ease out expo, used everywhere */
  --sans:"General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --brand-h:12vw;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-loading{overflow:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
h2,h3,p,dl,dd{margin:0}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}

.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.label{opacity:.6;margin-bottom:clamp(20px,3vw,40px)}
.h1,.h2{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:.92}
.h1{font-size:clamp(44px,9.6vw,190px);margin:0}
.h2{font-size:clamp(34px,5.6vw,100px)}
.h2 em,.cover__mast,.collab__h em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:1.16em}
main{position:relative;z-index:1}
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line>span{display:block;will-change:transform}
.ch{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.ch>span{display:inline-block;will-change:transform}

/* ---------- header ---------- */
/* brand and nav blend separately: plain over the opening photo, difference once the name has docked */
.brand,.nav{position:fixed;z-index:50;color:var(--stone)}
.brand.is-docked,.nav{mix-blend-mode:difference}
.brand{left:0;top:0;transform-origin:0 0;white-space:nowrap;font-family:var(--display);font-weight:500;letter-spacing:-.015em;line-height:.86;font-size:10vw;width:max-content;will-change:transform}
.brand .ch{padding-bottom:.02em}
.nav{right:var(--pad);top:26px;display:flex;gap:clamp(16px,2.4vw,36px);opacity:0}
.nav a{position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- 1. hero ---------- */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--ink);color:var(--stone)}
.hero__media{position:absolute;inset:0;clip-path:inset(44% 40% 44% 40%);will-change:clip-path,transform}
.hero__zoom{position:absolute;inset:0;will-change:transform}
.hero__zoom picture,.hero__img,.hero__gl{position:absolute;inset:0;width:100%;height:100%}
.hero__img{object-fit:cover;object-position:50% 30%}
.hero__gl{opacity:0;transition:opacity 1.2s var(--ease)}
.hero__gl.is-on{opacity:1}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,.42) 0%,rgba(18,18,18,0) 26%,rgba(18,18,18,0) 52%,rgba(18,18,18,.72) 100%)}
.hero__meta{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--brand-h) + var(--pad) + 22px);display:flex;justify-content:space-between;gap:16px;opacity:0}
.hero__scroll{position:absolute;right:var(--pad);top:50%;writing-mode:vertical-rl;opacity:0}
.hero__scroll::after{content:"";display:inline-block;width:1px;height:56px;margin-top:12px;background:currentColor;animation:drip 2.4s var(--ease) infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}60%{transform:scaleY(1);transform-origin:top}61%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 2. about ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,7vw,130px);padding:clamp(90px,15vw,240px) var(--pad) clamp(80px,11vw,180px);align-items:start}
.about__photo{position:sticky;top:12vh}
.about__clip{overflow:hidden;aspect-ratio:4/5;clip-path:inset(0 50% 0 50%);will-change:clip-path}
.about__clip img{width:100%;height:116%;object-fit:cover;object-position:50% 40%;will-change:transform}
.about__cap{display:flex;justify-content:space-between;margin-top:12px;opacity:.6}
.about__text{padding-top:4vw}
.bio{margin-top:clamp(32px,5vw,72px);max-width:34em;font-size:clamp(17px,1.35vw,21px);line-height:1.5}
.bio p+p{margin-top:1.1em}
.facts{margin-top:clamp(40px,6vw,96px);display:grid;grid-template-columns:1fr 1fr;border-top:1px solid color-mix(in srgb,var(--fg) 22%,transparent)}
.facts>div{padding:16px 0 18px;border-bottom:1px solid color-mix(in srgb,var(--fg) 22%,transparent)}
.facts>div:nth-child(odd){padding-right:20px}
.facts dt{opacity:.55;margin-bottom:6px}
.facts dd{font-size:16px}

/* ---------- 3. gallery ---------- */
.gintro{padding:clamp(60px,9vw,150px) var(--pad) clamp(40px,6vw,90px)}
.gintro .h1{margin-left:-.04em}
.gintro__row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:clamp(28px,4vw,56px);flex-wrap:wrap}
.gintro__lede{max-width:26em;font-size:clamp(17px,1.35vw,21px)}
.filter{display:flex;flex-wrap:wrap;gap:6px 22px}
.filter button{padding:6px 0;opacity:.45;position:relative;transition:opacity .5s var(--ease)}
.filter button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.filter button:hover,.filter button.is-on{opacity:1}
.filter button.is-on::after{transform:scaleX(1)}
.filter sup{margin-left:4px;opacity:.6;font-size:9px}

.series{position:relative}
.series.is-hidden{display:none}
.series__pin{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;box-shadow:0 -50px 90px rgba(0,0,0,.42)}
.series__in{position:absolute;inset:0;will-change:transform}
.series__title .ch{padding:0 .14em .16em;margin:0 -.14em -.16em}
.series__title{position:absolute;left:var(--pad);top:15.5vh;display:flex;align-items:flex-start;font-family:var(--serif);font-style:italic;font-size:clamp(52px,6.6vw,118px);font-weight:400;letter-spacing:-.02em;line-height:.9;white-space:nowrap;will-change:transform;pointer-events:none}
.series__title sup{margin-left:1.6em;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.08em;line-height:1;margin-top:.9em;opacity:.6}
.series__head{position:absolute;left:var(--pad);right:var(--pad);top:88px;display:flex;justify-content:space-between;gap:20px;opacity:.7}
.series__view{position:absolute;left:0;right:0;bottom:8.5vh;height:58vh;perspective:1500px;perspective-origin:50% 50%}
.series__track{position:absolute;left:0;top:0;height:100%;display:flex;gap:2.4vw;padding:0 var(--pad);transform-style:preserve-3d;will-change:transform}
/* cards sit behind the track plane in 3D, so the track must not swallow the pointer */
.series__track{pointer-events:none}
.card{pointer-events:auto;position:relative;flex:none;height:100%;aspect-ratio:var(--ar);transform-style:preserve-3d;will-change:transform;cursor:none}
.card__frame{position:absolute;inset:0;overflow:hidden;background:color-mix(in srgb,var(--fg) 8%,transparent)}
.card__frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform;opacity:0;transition:opacity .9s var(--ease),scale 1.6s var(--ease)}
.card__frame{transition:scale 1.1s var(--ease)}
.card__meta::before{content:"";position:absolute;left:0;right:0;top:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.card__meta{overflow:visible}
.card__meta i:first-child{transition:translate .9s var(--ease)}
@media (hover:hover) and (min-width:861px){
  .card__frame::after{content:"";position:absolute;inset:-10% -60%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.2) 50%,transparent 58%);translate:-70% 0;pointer-events:none}
  .card:hover .card__frame{scale:1.045}
  .card:hover .card__frame img{scale:1.07}
  .card:hover .card__frame::after{translate:70% 0;transition:translate 1.3s var(--ease)}
  .card:hover .card__meta::before{transform:scaleX(1)}
  .card:hover .card__meta i:first-child{translate:8px 0}
  .deal img{transition:scale 1.4s var(--ease)}
  .deal{overflow:visible}
}
.card__frame img.is-in{opacity:1}
.card__meta{position:absolute;left:0;right:0;top:calc(100% + 10px);display:flex;justify-content:space-between;gap:8px;white-space:nowrap;overflow:hidden}
.card__meta i{font-style:normal}
.card__meta i:last-child{opacity:.5}
.series__bar{position:absolute;left:var(--pad);right:var(--pad);bottom:3.2vh;height:1px;background:color-mix(in srgb,var(--fg) 20%,transparent)}
.series__bar i{position:absolute;inset:0;background:var(--fg);transform:scaleX(0);transform-origin:left}

/* ---------- 5. featured ---------- */
.feature{position:relative;background:#0C0C0C;box-shadow:0 -50px 90px rgba(0,0,0,.42);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);gap:clamp(28px,8vw,150px);align-items:center;padding:clamp(90px,13vw,220px) var(--pad)}
.cover{position:relative;display:block;width:100%;max-width:640px;justify-self:end;aspect-ratio:4/5.2;overflow:hidden;color:var(--stone);cursor:none}
.cover__img{position:absolute;inset:0;overflow:hidden;clip-path:inset(100% 0 0 0);will-change:clip-path}
.cover__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;transform:scale(1.25);will-change:transform}
.cover__mast{position:absolute;left:0;right:0;top:3%;text-align:center;font-size:clamp(84px,13.5vw,230px);line-height:.8;letter-spacing:-.04em}
.cover__lines,.cover__foot{position:absolute;left:18px;right:18px;display:flex;justify-content:space-between;align-items:flex-end}
.cover__lines{top:16px}
.cover__foot{bottom:16px}
.cover i{font-style:normal}
.feature__p{margin-top:clamp(24px,3vw,44px);max-width:26em;font-size:clamp(17px,1.35vw,21px)}
.link{display:inline-flex;gap:12px;margin-top:clamp(28px,3.4vw,52px);padding-bottom:8px;border-bottom:1px solid currentColor}
.link span{transition:transform .6s var(--ease)}
.link:hover span{transform:translateX(6px)}

/* ---------- 6. comp card ---------- */
.comp{padding:clamp(90px,13vw,220px) var(--pad) clamp(80px,10vw,170px);overflow:hidden}
.comp__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,26px);margin-top:clamp(36px,5vw,80px)}
.comp__cards{perspective:1200px}
.deal{position:relative;display:block;aspect-ratio:3/4;will-change:transform;cursor:none}
.deal img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.deal span{position:absolute;left:0;top:calc(100% + 10px);opacity:.6}
.sizes{display:grid;grid-template-columns:repeat(8,1fr);margin-top:clamp(64px,7vw,120px);border-top:1px solid color-mix(in srgb,var(--fg) 22%,transparent)}
.sizes>div{padding:18px 12px 0 0}
.sizes dt{opacity:.55;margin-bottom:10px}
.sizes dd{font-family:var(--display);font-size:clamp(22px,2.3vw,40px);font-weight:500;letter-spacing:-.01em;line-height:1}
.sizes small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;font-weight:400;opacity:.6}

/* ---------- 7. collab ---------- */
.collab{padding:clamp(90px,13vw,220px) var(--pad) 0;overflow:hidden}
.collab__h{max-width:17em}
.collab__links{margin-top:clamp(44px,6vw,100px);border-top:1px solid color-mix(in srgb,var(--fg) 22%,transparent)}
.cta{display:grid;grid-template-columns:minmax(90px,1fr) 4fr auto;align-items:baseline;gap:16px;padding:clamp(18px,2vw,30px) 0;border-bottom:1px solid color-mix(in srgb,var(--fg) 22%,transparent);transition:padding .7s var(--ease)}
.cta span{opacity:.55}
.cta b{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.6vw,44px);letter-spacing:-.01em;line-height:1.1}
.cta i{font-style:normal;font-size:clamp(20px,2.2vw,36px);transition:transform .7s var(--ease)}
.cta:hover{padding-left:clamp(8px,1.4vw,24px)}
.cta:hover i{transform:translateX(-10px) rotate(-45deg)}
.bigname{margin-top:clamp(70px,10vw,170px);font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:-.015em;line-height:.84;white-space:nowrap;font-size:10vw;width:max-content}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding:22px 0 26px;margin-top:clamp(14px,2vw,30px);border-top:1px solid color-mix(in srgb,var(--fg) 22%,transparent);opacity:.7}

/* ---------- 4. lightbox ---------- */
.lb{position:fixed;inset:0;z-index:80;visibility:hidden;color:var(--stone)}
.lb.is-open{visibility:visible}
.lb__bg{position:absolute;inset:0;background:#0c0c0c;opacity:0}
.lb__stage{position:fixed;overflow:hidden;background:#1b1b1b;will-change:left,top,width,height}
.lb__img,.lb__gl,.lb__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lb__gl,.lb__video{opacity:0;transition:opacity .9s var(--ease)}
.lb__gl.is-on,.lb__video.is-on{opacity:1}
.lb__img.is-drift{animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.07)}}
.lb__cap{position:absolute;left:var(--pad);right:var(--pad);bottom:22px;display:flex;justify-content:space-between;gap:16px;opacity:0}
.lb__cap span:nth-child(2){opacity:.6}
.lb__close{position:absolute;right:var(--pad);top:22px;padding:8px 0;opacity:0}
.lb__nav{position:absolute;top:50%;width:56px;height:56px;margin-top:-28px;font-size:22px;text-align:center;opacity:0;transition:transform .6s var(--ease)}
.lb__prev{left:calc(var(--pad) - 12px)}
.lb__next{right:calc(var(--pad) - 12px)}
.lb__prev:hover{transform:translateX(-6px)}
.lb__next:hover{transform:translateX(6px)}

/* ---------- cursor, aura, marquee, counter ---------- */
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:90;pointer-events:none;border-radius:50%;opacity:0}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--stone);mix-blend-mode:difference;transition:opacity .4s,scale .5s var(--ease)}
.cur-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(232,230,225,.55);display:grid;place-items:center;color:var(--stone);
  transition:width .7s var(--ease),height .7s var(--ease),margin .7s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease),opacity .4s}
.cur-ring svg{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);opacity:0;transition:opacity .4s;animation:spin 11s linear infinite}
.cur-ring text{font-family:var(--mono);font-size:8.6px;letter-spacing:.06em;fill:currentColor}
.cur-ring i{font-style:normal;font-size:22px;line-height:1;opacity:0;translate:-6px 6px;transition:opacity .4s,translate .7s var(--ease)}
@keyframes spin{to{transform:rotate(360deg)}}
.is-cur .cur-dot,.is-cur .cur-ring{opacity:1}
.cur-big .cur-dot,.cur-link .cur-dot{scale:0}
.cur-big .cur-ring{width:124px;height:124px;margin:-62px 0 0 -62px;background:rgba(14,14,14,.34);border-color:rgba(232,230,225,.75);-webkit-backdrop-filter:blur(7px) saturate(1.2);backdrop-filter:blur(7px) saturate(1.2)}
.cur-big .cur-ring svg{opacity:1}
.cur-big .cur-ring i{opacity:1;translate:0 0}
.cur-link .cur-ring{width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--stone);border-color:transparent;mix-blend-mode:difference}
.aura{position:fixed;left:0;top:0;z-index:0;width:90vmax;height:90vmax;margin:-45vmax 0 0 -45vmax;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 20%,transparent),color-mix(in srgb,var(--glow) 6%,transparent) 55%,transparent);transform:translate(70vw,30vh)}
.marq{overflow:hidden;white-space:nowrap;padding:clamp(36px,5vw,84px) 0;font-size:7.4vw;line-height:1}
.marq__in{display:inline-flex;will-change:transform}
.marq b{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:-.015em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--fg) 60%,transparent);padding:0 .22em}
.marq em{font-family:var(--serif);font-size:1.1em;letter-spacing:-.02em;padding:0 .2em}
.marq em::after{content:"";display:inline-block;width:.42em;height:1px;background:currentColor;vertical-align:middle;margin-left:.42em}
.count{position:fixed;right:var(--pad);bottom:var(--pad);z-index:60;color:var(--stone);font-size:12px}
.grain{position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay}
@media (hover:none){.cur-dot,.cur-ring,.aura{display:none}.card,.cover,.deal{cursor:pointer}}

/* ---------- phone / tablet ---------- */
@media (max-width:860px){
  body{font-size:16px}
  .brand__w{display:block}
  .h1{font-size:12.6vw}
  .marq{font-size:13vw}
  .brand{line-height:.84}
  .nav{top:20px;gap:16px}
  .nav__opt,.nav a:first-child{display:none}
  .hero__meta{flex-wrap:wrap}
  .hero__tag{display:none}
  .hero__scroll{display:none}
  .about{grid-template-columns:1fr;padding-top:110px}
  .about__photo{position:relative;top:0;width:78%}
  .facts{grid-template-columns:1fr}
  .gintro__row{flex-direction:column;align-items:flex-start}
  /* phones use the same pinned 3D reel as desktop, only tighter */
  .series__pin{min-height:0}
  .series__title{font-size:15vw;top:13svh}
  .series__head{top:66px}
  .series__head span:nth-child(2){display:none}
  .series__view{height:52svh;bottom:11svh;perspective:900px}
  .series__track{gap:14px}
  .card__meta{font-size:9px}
  .series__bar{bottom:4.5svh}
  .feature{grid-template-columns:1fr}
  .cover{justify-self:start}
  .comp__cards{grid-template-columns:1fr 1fr;row-gap:44px}
  .sizes{grid-template-columns:repeat(2,1fr);row-gap:8px}
  .sizes>div{padding-bottom:16px}
  .cta{grid-template-columns:1fr auto}
  .cta span{grid-column:1/-1}
  .lb__nav{top:auto;bottom:54px;margin:0}
  .lb__cap{bottom:16px;font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  .hero__media,.about__clip,.cover__img{clip-path:none}
  .lb__img.is-drift,.hero__scroll::after{animation:none}
}