:root{--bg:#3B1222;--fg:#FBEFF1;--wine:#5A1E36;--serif:"Playfair Display",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif;--pad:clamp(20px,5vw,72px)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color 1s ease,color 1s ease}
img,video{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;opacity:.8}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic}

/* bar */
.bar{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px var(--pad);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:inherit}
.bar nav{display:flex;gap:24px}.bar nav.r{justify-content:flex-end}
.bar .mk{font-family:var(--serif);font-size:22px;letter-spacing:.34em;text-transform:none;padding-left:.34em}
.bar a:hover{text-decoration:underline;text-underline-offset:5px}
@media (max-width:760px){.bar{padding:14px 16px;font-size:11px}.bar nav.l a:first-child{display:none}.bar .mk{font-size:18px}}

/* the deck: a fan of three colour blades, opened by your scroll */
.deck{height:260vh;position:relative}
.deck-in{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 var(--pad)}
.deck-in:before{content:"";position:absolute;left:50%;top:46%;width:70vmax;height:70vmax;transform:translate(-30%,-50%);background:radial-gradient(closest-side,rgba(241,205,211,.16),transparent);pointer-events:none}
.deck-copy{position:relative;z-index:2}
.deck h1{font-size:clamp(46px,6.6vw,108px);line-height:.96;margin-top:18px;max-width:9.5em}
.fan{position:relative;height:min(70vh,660px);aspect-ratio:1/1.1;justify-self:center}
.blade{position:absolute;left:50%;bottom:8%;width:28%;height:86%;margin-left:-14%;transform-origin:50% 92%;border-radius:6px 6px 14px 14px;overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.35),0 2px 0 rgba(255,255,255,.08) inset;background:#f6efe8;will-change:transform}
.blade .tex{position:absolute;left:0;right:0;top:0;bottom:24%;background-size:cover;background-position:center}
.blade .chip{position:absolute;left:0;right:0;bottom:0;height:24%;background:#FBF6F1;color:#22161A;padding:9% 12%;display:flex;flex-direction:column;justify-content:flex-start}
.blade .chip span{font-size:clamp(9px,.8vw,12px);letter-spacing:.2em;text-transform:uppercase;color:#7B6567}
.blade .chip b{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(18px,2.2vw,34px);line-height:1.1;margin-top:4%}
.rivet{position:absolute;left:50%;bottom:calc(8% + 86% * .08);width:16px;height:16px;margin:0 0 -8px -8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f3e3d6,#a88c78);box-shadow:0 2px 6px rgba(0,0,0,.4);z-index:5}
.deck-hint{position:absolute;left:0;right:0;bottom:5vh;text-align:center;font-size:12px;letter-spacing:.22em;text-transform:uppercase;opacity:.75}
.deck-hint span{transition:opacity .5s}.deck-hint .b{position:absolute;left:0;right:0;opacity:0}
.deck.open .deck-hint .a{opacity:0}.deck.open .deck-hint .b{opacity:1}
@media (max-width:760px){
  .deck-in{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;padding:96px 20px 0}
  .deck h1{font-size:10.6vw;max-width:none}
  .fan{height:52vh;margin-top:3vh;max-width:100%}
  .blade{width:27%;margin-left:-13.5%}
  .blade .chip b{font-size:5.4vw}.blade .chip span{font-size:2.3vw}
}

/* rooms */
.room{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:110px var(--pad) 80px}
.room-in{display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;align-items:center;width:100%;max-width:1360px;margin:0 auto}
.room .no{font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:.75}
.room h2{font-size:clamp(84px,15vw,240px);line-height:.86;font-style:italic;margin:8px 0 26px}
.room .light{font-family:var(--serif);font-size:clamp(22px,2.6vw,40px);line-height:1.18;max-width:14em}
.room .depth{margin-top:22px;font-size:15px;letter-spacing:.04em;opacity:.85}
.order-link{display:inline-block;margin-top:34px;padding:16px 26px;border:1px solid currentColor;font-size:14px;letter-spacing:.06em;transition:background .25s,color .25s}
.order-link:hover{background:var(--fg);color:var(--bg)}
.room-film{position:relative;justify-self:end;width:min(100%,420px)}
.room-film video{width:100%;aspect-ratio:9/14;object-fit:cover;border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.room-film .strip{position:absolute;left:-16%;bottom:-6%;width:30%;aspect-ratio:300/950;object-fit:cover;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.3);transform:rotate(-6deg)}
@media (max-width:760px){
  .room{padding:92px 20px 64px}
  .room-in{grid-template-columns:1fr;gap:28px}
  .room h2{font-size:27vw}
  .room .light{font-size:6.4vw}
  .room-film{justify-self:start;width:78%;margin-left:14%}
}

/* match */
.match,.what,.order{padding:120px var(--pad) 100px}
.match-in,.what-in,.order-in{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;max-width:1360px;margin:0 auto}
.match h2,.what h2,.order h2{font-size:clamp(40px,5vw,80px);line-height:1;margin:16px 0 26px}
.slide-ui{margin-top:28px;max-width:440px}
.range{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;cursor:grab;touch-action:pan-y;display:block}
.range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#F1D7C2,#DDB391,#BC8A66,#8F6044,#634030)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--thumb,#BC8A66);border:3px solid #fff;margin-top:-12px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.range::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#F1D7C2,#DDB391,#BC8A66,#8F6044,#634030)}
.range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--thumb,#BC8A66);border:3px solid #fff}
.lbl{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-top:6px}
.res{margin-top:28px;min-height:110px;font-family:var(--serif);font-size:clamp(28px,3vw,44px);line-height:1;opacity:0;transform:translateY(6px);transition:all .5s}
.res.on{opacity:1;transform:none}
.res small{display:block;font-family:var(--sans);font-size:14px;opacity:.75;margin-top:10px}
.res a{display:inline-block;margin-top:16px;font-family:var(--sans);font-size:14px;padding:13px 20px;background:#5A1E36;color:#FBEFF1}
.stage{position:relative;aspect-ratio:1100/1300;overflow:hidden;border-radius:4px;background:#cfc8c1;box-shadow:0 30px 60px rgba(0,0,0,.18)}
.stage .ly{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.stage .ly.w{-webkit-mask-image:linear-gradient(136deg,#000 40%,transparent 60%);mask-image:linear-gradient(136deg,#000 40%,transparent 60%);-webkit-mask-size:300% 300%;mask-size:300% 300%;
  -webkit-mask-position:100% 100%;mask-position:100% 100%;transition:-webkit-mask-position .9s cubic-bezier(.45,.05,.25,1),mask-position .9s cubic-bezier(.45,.05,.25,1)}
.stage .ly.w.on{-webkit-mask-position:0 0;mask-position:0 0}
.stage .ly.melt{opacity:0;transition:opacity 1.4s}.stage .ly.melt.on{opacity:1}
.stage .cap{position:absolute;left:20px;top:18px;color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.45)}

/* what */
.what-film video{width:100%;max-width:440px;aspect-ratio:9/14;object-fit:cover;border-radius:4px}
.lede{font-family:var(--serif);font-size:clamp(18px,1.6vw,23px);line-height:1.45;max-width:30em;opacity:.92}
.facts{list-style:none;margin-top:34px;display:grid}
.facts li{padding:18px 0;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);font-size:15px;line-height:1.5;opacity:.9}
.facts li:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.facts b{display:block;font-family:var(--serif);font-weight:400;font-style:italic;font-size:22px;margin-bottom:2px}

/* worn */
.worn{padding:40px 0 110px}
.worn-head{padding:0 var(--pad);max-width:1360px;margin:0 auto 28px;display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.worn-head h2{font-size:clamp(40px,5vw,80px);font-style:italic}
.tap{font-size:13px;opacity:.7}
.worn-reel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 6px;scrollbar-width:none}
.worn-reel::-webkit-scrollbar{display:none}
.reel{flex:0 0 clamp(200px,22vw,300px);scroll-snap-align:start;cursor:pointer;position:relative}
.reel video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:4px;background:#2a1018}
.reel figcaption{font-family:var(--serif);font-style:italic;font-size:15px;margin-top:10px;opacity:.8}
.reel.sound:after{content:"sound on";position:absolute;right:10px;top:10px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:#fff;color:#5A1E36;padding:4px 8px}

/* order */
.card{background:#FBF6F1;color:#22161A;padding:34px;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.12)}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pc{position:relative;text-align:left;border-radius:6px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(34,22,26,.12);transition:box-shadow .2s,transform .2s;padding:0 0 12px}
.pc .tex{display:block;height:150px;background-size:cover;background-position:center}
.pc b{display:block;font-family:var(--serif);font-weight:400;font-style:italic;font-size:24px;padding:10px 12px 0}
.pc i{display:block;font-style:normal;font-size:12px;color:#7B6567;padding:0 12px}
.pc .n{position:absolute;right:8px;top:8px;min-width:26px;height:26px;border-radius:13px;background:#5A1E36;color:#fff;font-style:normal;font-size:12px;display:none;place-content:center;padding:0 6px}
.pc.on{box-shadow:0 0 0 2px #5A1E36;transform:translateY(-2px)}.pc.on .n{display:grid}
.sum{margin-top:22px;font-family:var(--serif);font-size:22px;min-height:30px}
.few{margin-top:6px;font-family:var(--serif);font-style:italic;color:#5A1E36}
.add{margin-top:18px;width:100%;height:56px;background:#5A1E36;color:#FBEFF1;font-size:15px;letter-spacing:.04em}
.add:disabled{opacity:.4;cursor:default}
.small{margin-top:14px;font-size:12px;color:#7B6567}

@media (max-width:760px){
  .match,.what,.order{padding:96px 20px 72px}
  .match-in,.what-in,.order-in{grid-template-columns:1fr;gap:28px}
  .match h2,.what h2,.order h2{font-size:10vw}
  .what-film{order:2}
  .card{padding:20px}.pc .tex{height:110px}.pc b{font-size:19px}
  .reel{flex-basis:60vw}.worn-reel{padding:0 20px 6px}.worn-head{padding:0 20px}
}

footer{padding:90px var(--pad) 50px;text-align:center;background:#1E0A11;color:#E9D7DA}
footer .fm{font-family:var(--serif);font-size:44px;letter-spacing:.32em;padding-left:.32em;text-shadow:0 0 30px rgba(241,205,211,.45)}
footer p{font-family:var(--serif);font-style:italic;font-size:20px;margin-top:10px}
footer .fl{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:30px;font-size:13px}
footer small{display:block;margin-top:30px;font-size:12px;opacity:.6}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;z-index:80;background:#22161A;color:#F6E3E6;padding:12px 18px;font-size:14px;transition:all .35s;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){body{transition:none}}

.layers{position:absolute;inset:0}
.stage .layers .ly{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.room-film video{aspect-ratio:4/5}

h1,h2,.light,.lede{text-wrap:balance}
.room-film .strip{aspect-ratio:auto;height:auto}

@media (max-width:760px){
  .match-in{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .match-copy{display:contents}
  .match .kicker{order:1}.match h2{order:2;margin-bottom:18px}.match .stage{order:3;aspect-ratio:1100/900;width:100%}
  .match .slide-ui{order:4;margin-top:18px;max-width:none}.match .res{order:5;margin-top:16px;min-height:96px}
  .worn{padding-top:96px}
}