/* RACE — home page. Loaded after css/base.css. */

.xl{font-size:clamp(3.4rem,12.5vw,10rem)}
.lg{font-size:clamp(2.4rem,7.6vw,6.2rem)}
.md{font-size:clamp(1.8rem,4.6vw,3.6rem)}

/* reveals */
.thesis .a,.thesis .b,.thesis .c{color:var(--mute);transition:color .7s ease}
.thesis.in .a{color:var(--white)}
.thesis.in .b{color:var(--white);transition-delay:.18s}
.thesis.in .c{color:var(--red);transition-delay:.42s}
.g{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .6s ease,transform .7s cubic-bezier(.16,.84,.26,1);transition-delay:var(--d,0s)}
.grid.in .g{opacity:1;transform:none}
.num{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,.84,.26,1);transition-delay:var(--d,0s)}
.nums.in .num{opacity:1;transform:none}
.hero-in{will-change:transform,opacity}
.panel .word{will-change:transform,opacity}

/* phone menu */

/* progress */
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--red);z-index:90}

/* nav */

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0 var(--px) clamp(34px,6vh,72px);overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:contrast(1.1) brightness(.62) saturate(.92);transform:scale(1.02);animation:kb 16s ease-out forwards}
@keyframes kb{to{transform:scale(1.12) translateY(-1.5%)}}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(to top,#000 0%,rgba(0,0,0,.28) 34%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.6) 100%)}
.hero-in{position:relative;z-index:2;width:100%}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l.red{color:var(--red)}
.hero h1 .l span{display:block;transform:translateY(104%);transition:transform 1s cubic-bezier(.16,.84,.26,1)}
.hero.in h1 .l span{transform:translateY(0)}
.hero.in h1 .l:nth-child(2) span{transition-delay:.08s}
.hero.in h1 .l:nth-child(3) span{transition-delay:.16s}
.hero-def{margin:clamp(18px,3vh,30px) 0 0;font-weight:900;font-size:clamp(.78rem,1.5vw,1rem);letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .8s ease .7s}
.hero.in .hero-def{opacity:1}
.hero-def i{font-style:normal;color:var(--red);margin-left:.9em}

/* cities */
.cities{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cities::-webkit-scrollbar{display:none}
@media (max-width:820px){.cities{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent);scroll-snap-type:x proximity}.city{scroll-snap-align:start;min-height:88px}}
.cities-in{display:flex;gap:0;width:max-content;min-width:100%}
@media (min-width:1100px){.cities-in{width:100%}.city{flex:1 1 0;text-align:left}}
.city{flex:0 0 auto;background:none;border:0;border-right:1px solid var(--hair);color:var(--white);font-weight:900;font-size:clamp(1.4rem,2.6vw,2.3rem);letter-spacing:-.03em;text-transform:uppercase;padding:clamp(22px,3.4vh,36px) clamp(20px,2.4vw,36px);position:relative;transition:color .2s ease,background .2s ease;white-space:nowrap}
.city:last-child{border-right:0}
@media (hover:hover){.city:hover{background:var(--sheet)}.city:not(.on):hover small{opacity:1}}
.city.on{color:var(--red)}
.city.pick{color:var(--white)}
.city.pick small{opacity:1;color:var(--white)}
.city.pick small::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:1px}
.city.on::after,.city.pick::after{content:"";position:absolute;left:clamp(20px,2.4vw,36px);right:clamp(20px,2.4vw,36px);bottom:0;height:3px;background:var(--red)}
.city.on.dim::after{display:none}
.city.on.dim small{opacity:0}
.city small{display:block;font-size:.6rem;letter-spacing:.2em;font-weight:700;color:var(--dim);margin-top:8px;opacity:0;transition:opacity .25s ease,transform .25s ease;transform:translateY(4px)}
.city.on small,.city.pick small,.city:hover small{transform:translateY(0)}
.city.on small{opacity:1}

/* thesis */
.thesis{padding:clamp(80px,15vh,170px) var(--px)}

.c{color:var(--red)}

/* horizontal */
.hs{position:relative;height:calc(var(--n) * 100vh + 80vh)}
.hs-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:#000}
.hs-track{display:flex;height:100%;will-change:transform}
.panel{flex:0 0 100%;height:100%;position:relative;overflow:hidden;border-right:1px solid var(--hair)}
.panel img{position:absolute;top:-4%;left:-6%;width:112%;height:108%;max-width:none;object-fit:cover;object-position:50% 45%;will-change:transform;filter:contrast(1.08) brightness(.78)}
.panel .sc{position:absolute;inset:0;background:linear-gradient(to top,#000 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,.35) 100%)}
.panel .idx{position:absolute;top:calc(env(safe-area-inset-top,0px) + 92px);left:var(--px);font-weight:900;font-size:.72rem;letter-spacing:.2em;color:var(--dim)}
.panel .word{position:absolute;left:var(--px);right:var(--px);bottom:clamp(30px,7vh,80px)}
.panel .word .d{font-size:clamp(2.6rem,9vw,7.6rem);color:var(--white)}
.panel.type{background:var(--card)}
.panel.type img{filter:contrast(1.08) brightness(.8)}
.panel.split{display:grid;grid-template-columns:1fr 1fr;background:var(--card)}
.panel.split img{position:static;top:auto;right:auto;bottom:auto;left:auto;width:100%;height:100%;max-width:100%;filter:contrast(1.08) brightness(.86)}
.panel.split .sc{background:linear-gradient(to top,#000 0%,rgba(0,0,0,0) 55%)}
.hs-ui{position:absolute;right:var(--px);bottom:clamp(30px,7vh,80px);display:flex;align-items:center;gap:14px;z-index:3}
.dots{display:flex;gap:8px}
.dot{position:relative;width:26px;height:3px;background:var(--hair);border:0;padding:0;transition:background .2s ease}
.dot::after{content:"";position:absolute;left:-6px;right:-6px;top:-21px;bottom:-21px}
.dot.on{background:var(--red)}
.hs-cnt{font-weight:900;font-size:.72rem;letter-spacing:.18em;color:var(--dim);font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .hs{height:auto}
  .hs-sticky{position:relative;height:auto;overflow:visible}
  .hs-track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:10px;padding:0 var(--px);will-change:auto}
  .hs-track::-webkit-scrollbar{display:none}
  .panel{flex:0 0 86vw;height:74svh;scroll-snap-align:center;border:0;border-radius:18px}
  .panel img{top:0;left:0;width:100%;height:100%;transform:none!important}
  .panel .idx{top:22px;left:22px}
  .panel .word{left:22px;right:22px;bottom:26px}
  .panel .word .d{font-size:clamp(2.2rem,11vw,3.6rem)}
  .panel.split{grid-template-columns:1fr 1fr}
  .hs-ui{position:static;justify-content:center;padding:22px 0 4px}.dots{gap:12px}.dot{width:30px}
}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-bottom:6px}
.num{padding:clamp(28px,5vh,56px) var(--px);border-right:1px solid var(--hair)}
.num:last-child{border-right:0}
.num b{display:block;font-weight:900;font-size:clamp(2.6rem,7vw,6rem);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--red)}
.num b i{font-style:normal}
.num span{display:block;font-weight:700;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--white);margin-top:12px}
@media (max-width:640px){.num{padding:22px 14px}.num b{font-size:clamp(1.9rem,9.5vw,2.6rem)}.num span{font-size:.58rem;letter-spacing:.14em;margin-top:8px}}

/* gallery */
.gal{padding:clamp(70px,12vh,140px) 0 0}
.gal-head{padding:0 var(--px) clamp(26px,4vh,44px);display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px 30px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,22vw,320px);grid-auto-flow:dense;gap:6px;padding:0 6px}
.g{position:relative;overflow:hidden;background:var(--card);border:0;padding:0;cursor:zoom-in}
.g img{width:100%;height:100%;object-fit:cover;filter:contrast(1.06) brightness(.9);transition:transform .6s cubic-bezier(.16,.84,.26,1),filter .4s ease;will-change:transform}
@media (hover:hover){.g:hover img{transform:scale(1.04);filter:contrast(1.08) brightness(1)}}
.g.t{grid-row:span 2}
.g.w{grid-column:span 2}
@media (max-width:820px){.grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(140px,30vw,260px)}}

/* marquee */
.sp-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 24px;padding:clamp(44px,7vh,80px) var(--px) clamp(18px,3vh,28px)}
.mq{overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:clamp(18px,3vh,32px) 0}
.mq.logos .mq-in{gap:clamp(48px,7vw,120px);align-items:center;animation-duration:46s}
.mq.logos img{height:clamp(26px,3.6vw,50px);width:auto;max-width:none;opacity:.92}

.mq-in{display:flex;gap:clamp(30px,5vw,72px);width:max-content;animation:slide 40s linear infinite}
.mq-in b{font-weight:900;font-size:clamp(1.4rem,3.6vw,3rem);letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.mq-in i{font-style:normal;color:var(--red);font-weight:900;font-size:clamp(1.4rem,3.6vw,3rem)}
@keyframes slide{to{transform:translateX(-50%)}}

/* brands */
.brands{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--hair)}
.brands-copy{padding:clamp(56px,10vh,120px) var(--px);align-self:center}
.brands-copy .d{margin:.3em 0 .5em}
.brands-sub{margin:0 0 clamp(24px,3.6vh,36px);font-weight:500;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.45;color:var(--dim);max-width:34ch}
.btn{display:inline-block;font-weight:900;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;background:var(--red);color:#000;padding:18px 30px;border-radius:14px;transition:transform .15s ease}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}}
.btn.ghost{background:none;color:var(--white);border:1px solid var(--hair);margin-left:10px}
.brands-shot{position:relative;min-height:380px;border-left:1px solid var(--hair);overflow:hidden}
.brands-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.08) brightness(.82)}
@media (max-width:820px){.brands{grid-template-columns:1fr}.brands-shot{order:-1;min-height:46vh;border-left:0;border-bottom:1px solid var(--hair)}}

/* list */
.list{padding:clamp(86px,16vh,180px) var(--px);background:var(--red);color:#000}
.list .k,.list .k.red{color:#000;opacity:.78}
.list .d{color:#000}
.list .k{margin-bottom:.9em}
.list .lg{margin-bottom:.32em}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(26px,4vh,40px)}
.pill{min-height:44px;background:none;border:1px solid rgba(255,255,255,.6);color:var(--white);font-weight:900;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:0 16px;border-radius:14px;transition:all .15s ease}
@media (hover:hover){.pill:hover{border-color:var(--white)}}
.pill.on{background:var(--white);color:#000;border-color:var(--white)}
.form{display:flex;flex-wrap:wrap;gap:12px;max-width:620px}
.form input{flex:1 1 280px;min-width:0;background:var(--white);border:1px solid var(--white);color:#000;font-family:inherit;font-weight:700;font-size:1rem;padding:17px 18px;border-radius:14px}
.form input::placeholder{color:#6E7079;font-weight:500}
.form input:focus{border-color:#000;outline:none}
.form button{flex:0 0 auto;background:var(--white);color:#000;border:0;font-weight:900;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;padding:17px 30px;border-radius:14px;transition:transform .15s ease}
@media (hover:hover){.form button:hover{transform:translateY(-2px)}}
.note{margin:16px 0 0;font-size:.82rem;font-weight:700;color:rgba(0,0,0,.72)}
@media (max-width:560px){.form button{flex:1 1 100%;min-height:52px}.form input{min-height:52px}}
.list :focus-visible{outline-color:#000}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note.err{color:#000}
.done{display:none;font-weight:900;font-size:clamp(1.2rem,2.6vw,1.9rem);text-transform:uppercase;letter-spacing:.02em;color:#000}
.list.sent .form,.list.sent .note,.list.sent .pills{display:none}
.list.sent .done{display:block}

/* footer */

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:flex;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .28s ease,visibility 0s linear .28s;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 20px) 20px calc(env(safe-area-inset-bottom,0px) + 20px)}
.lb.open{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .28s ease;touch-action:pan-y}
.lb img{-webkit-user-select:none;user-select:none;transform:scale(.96);transition:transform .34s cubic-bezier(.16,.84,.26,1)}
.lb.open img{transform:none}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb button{position:absolute;top:calc(env(safe-area-inset-top,0px) + 18px);right:20px;background:var(--red);color:#000;border:0;font-weight:900;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding:12px 16px;border-radius:14px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-bg img{animation:none}
  .hero h1 .l span{transform:none!important}
  .hero-def{opacity:1!important}
  .mq-in{animation:none}
  .rv,.g,.num{opacity:1!important;transform:none!important}
  .thesis .a,.thesis .b{color:var(--white)}.thesis .c{color:var(--red)}
  .nav.hide{transform:none}
  *{transition:none!important}
}