/* OSK — version B. A flyer you can click, then a care package you can open. */
:root{
  --terra:#E08C64;      /* Care Package cover field */
  --terra-d:#C9724C;
  --cocoa:#3B2A28;
  --cocoa-2:#573F3D;
  --cap:#E33942;        /* the red cap */
  --paper:#F6F1E9;
  --fog:#A7C5C6;
  --fog-l:#BDCFD0;
  --fog-m:#8BA9A8;
  --leaf:#3E2F2C;
  --night:#121017;
  --night-2:#1D1A22;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif","Times New Roman",Times,serif;
  --pad:clamp(16px,2.4vw,44px);
  --cam:cubic-bezier(.7,0,.23,1);
  --rise:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fog);color:var(--cocoa);font:400 16px/1.55 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--cocoa);color:var(--paper);padding:10px 14px;text-decoration:none}
.skip:focus{top:8px}
:focus-visible{outline:2px solid var(--cap);outline-offset:3px}

/* film grain over everything (static) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.16;mix-blend-mode:multiply;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .12 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- chips: label-maker strips, no radius ---------- */
.chip{display:inline-flex;align-items:baseline;gap:.55em;padding:.42em .7em .38em;background:rgba(59,42,40,.74);color:#fff;
  text-decoration:none;font:600 clamp(14px,1.05vw,17px)/1.1 var(--sans);letter-spacing:-.01em;border:0;cursor:pointer;
  transition:background-color .16s ease,transform .16s ease,color .16s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.chip .k{font-weight:800;text-transform:uppercase;font-size:.78em;letter-spacing:.06em;opacity:.8}
a.chip:hover,a.chip:focus-visible,button.chip:hover,button.chip:focus-visible{background:rgba(59,42,40,.92);transform:translateX(3px)}
.chip-hot{background:var(--cap)}
.chip-hot .k{opacity:1}
a.chip-hot:hover,a.chip-hot:focus-visible{background:#c42c35}
.arr{font-weight:400}

/* ---------- 1. the flyer ---------- */
.stage{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--fog-l);color:#fff}
.art{position:absolute;inset:0}
.layer{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform}
.photo{object-fit:cover;object-position:52% 100%}
.fog{pointer-events:none}
.fog-far{background:
   radial-gradient(60% 30% at 30% 20%,rgba(214,230,229,.85),transparent 70%),
   radial-gradient(50% 25% at 75% 35%,rgba(200,221,221,.7),transparent 70%);opacity:.0}
.fog-near{background:
   radial-gradient(40% 18% at 15% 60%,rgba(226,238,237,.9),transparent 70%),
   radial-gradient(45% 20% at 85% 70%,rgba(220,234,233,.85),transparent 70%),
   radial-gradient(70% 30% at 50% 95%,rgba(205,224,223,.7),transparent 70%);opacity:0}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,60,62,.18),transparent 30%,transparent 70%,rgba(30,20,18,.35))}

.overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:var(--pad)}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.brand{display:inline-flex;flex-direction:column;align-items:flex-end}
.wordmark{font:900 clamp(96px,15.5vw,300px)/.8 var(--sans);letter-spacing:-.055em;margin:-.02em 0 0 -.06em;
  text-shadow:0 0 40px rgba(255,255,255,.35)}
.stamp{font:800 clamp(18px,2.25vw,44px)/1 var(--sans);letter-spacing:-.02em;margin-top:.35em;text-shadow:0 0 18px rgba(255,255,255,.3)}
.socials{display:flex;gap:clamp(12px,1.4vw,24px);font:700 clamp(14px,1vw,17px)/1 var(--sans);padding-top:.4em}
.socials a{text-decoration:none;text-shadow:0 0 12px rgba(0,0,0,.25);transition:opacity .16s}
.socials a:hover{opacity:.72}
.chips{margin-top:clamp(20px,4.5vh,64px)}
.chips li{margin-bottom:6px}
.bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.down{font:700 clamp(14px,1vw,17px)/1 var(--sans);text-decoration:none;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.down:hover{opacity:.72}
.mark{display:block;width:clamp(120px,13vw,230px);color:#fff;transition:opacity .16s,transform .3s var(--rise)}
.mark:hover{transform:rotate(-4deg) scale(1.03)}
.tag{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 14px rgba(255,255,255,.25))}
.tag-fill{fill:currentColor;fill-opacity:0}
.tag-lines path{fill:none;stroke:currentColor;stroke-width:.9;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}

/* the intro — gated on image decode by adding .go to <html> */
.fx{opacity:0}
.go .fx{animation:rise .85s var(--rise) both;animation-delay:calc(.9s + var(--i)*.09s)}
.go .tag-lines path{animation:draw 1.9s ease-in-out 1.3s both}
.go .tag-fill{animation:fillin .8s ease 2.8s both}
.go .fog-near{animation:fogNear 2.4s var(--cam) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill-opacity:1}}
@keyframes fogNear{from{opacity:.95}to{opacity:.28}}

/* desktop: the camera starts up in the fog canopy and tilts down onto Osk */
:root{--pan:calc(100vw - 100svh)}
@media (min-width:760px) and (min-aspect-ratio:1/1){
  .art{inset:auto 0 0 0;height:100vw;transform:translateY(var(--pan))}
  .photo,.fog-far,.fog-near{transform:none}
  .go .art{animation:pan 2.2s var(--cam) both}
  .go .fog-far{animation:panFar 2.2s var(--cam) both}
  .go .fog-near{animation:panNear 2.2s var(--cam) both, fogNear 2.4s var(--cam) both}
  .fog-far{opacity:1}
}
@keyframes pan{from{transform:translateY(var(--pan))}to{transform:none}}
/* the far fog travels 30% less (drifts behind), the near fog 40% more (streams past) */
@keyframes panFar{from{transform:translateY(calc(var(--pan) * -.3))}to{transform:none}}
@keyframes panNear{from{transform:translateY(calc(var(--pan) * .4))}to{transform:none}}

/* mobile flyer */
@media not all and (min-width:760px) and (min-aspect-ratio:1/1){
  .photo{object-position:52% 100%}
  .wordmark{font-size:41vw;letter-spacing:-.06em}
  .brand{width:100%}
  .stamp{font-size:clamp(18px,5.4vw,28px)}
  .top{flex-direction:column;gap:0}
  .socials{position:absolute;left:var(--pad);bottom:var(--pad);padding:0;flex-direction:column;gap:12px;z-index:3}
  .chips{margin-top:18px}
  .chips ul{display:flex;flex-wrap:wrap;gap:6px}
  .chips li{margin:0}
  .chip{background:rgba(59,42,40,.84);font-size:15px;padding:.55em .7em .5em}
  .chips li:first-child{flex-basis:100%}
  .chip.chip-hot{background:var(--cap)}
  .down{display:none}
  .bottom{justify-content:flex-end}
  .mark{width:34vw}
}

/* ---------- mini bar ---------- */
.bar{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px var(--pad);background:rgba(246,241,233,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transform:translateY(-110%);transition:transform .35s var(--rise);border-bottom:1px solid rgba(59,42,40,.12)}
.bar.on{transform:none}
.bar-mark img{width:54px;height:auto}
.bar-links{display:flex;gap:clamp(12px,2vw,28px);font:800 13px/1 var(--sans);text-transform:uppercase;letter-spacing:.07em}
.bar-links a{text-decoration:none;padding:8px 0}
.bar-links a:hover{color:var(--cap)}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--rise),transform .8s var(--rise);transition-delay:calc(var(--i,0)*.06s)}
.rv.in{opacity:1;transform:none}
.no-js .rv,.no-js .fx{opacity:1;transform:none}

/* ---------- 2. care package ---------- */
.care{position:relative;background:var(--terra);color:var(--cocoa);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(64px,10vw,150px) var(--pad);scroll-margin-top:40px}
.care::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background:radial-gradient(120% 80% at 30% 40%,transparent 50%,rgba(150,70,40,.35))}
.care-cover{position:relative}
.care-cover img{width:100%;max-width:760px;margin:0 auto;
  -webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent 100%);mask-image:radial-gradient(closest-side,#000 82%,transparent 100%)}
.care-body{position:relative;max-width:620px}
.eyebrow{font:800 12px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.12em}
.care-title{font:400 clamp(72px,9.5vw,168px)/.82 var(--serif);text-transform:uppercase;letter-spacing:-.02em;margin:.18em 0 .2em;
  transform-origin:left;font-stretch:condensed}
.lede{font:400 clamp(17px,1.35vw,21px)/1.5 var(--sans);max-width:34em;margin-bottom:28px}
.tracks{counter-reset:t;margin-bottom:30px;border-top:1.5px solid var(--cocoa)}
.tracks li{display:flex;gap:14px;align-items:baseline;padding:9px 0 8px;border-bottom:1px solid rgba(59,42,40,.35);
  font:500 clamp(16px,1.25vw,20px)/1.25 var(--sans);letter-spacing:-.01em;transition:transform .16s ease, color .16s}
.tracks li:hover{transform:translateX(3px);color:#000}
.tracks .n{font:800 12px/1 var(--sans);letter-spacing:.08em;color:var(--cap);min-width:22px}
.tracks em{font-family:var(--serif);font-size:1.12em;font-style:italic}
.player{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.player iframe{width:100%;height:420px;border:0;display:block;background:var(--paper)}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.8em 1.05em;font:700 15px/1 var(--sans);text-decoration:none;cursor:pointer;
  border:1.5px solid var(--cocoa);background:transparent;transition:transform .16s ease,background-color .16s,color .16s}
.btn:hover,.btn:focus-visible{transform:translateX(3px)}
.btn-dark{background:var(--cocoa);color:var(--paper)}
.btn-dark:hover{background:#000}
.btn-line:hover{background:var(--cocoa);color:var(--paper)}
.tri{width:0;height:0;border-left:.7em solid currentColor;border-top:.42em solid transparent;border-bottom:.42em solid transparent}
.fine{margin-top:14px;font-size:13px;opacity:.75}

/* ---------- 3. watch ---------- */
.watch{background:var(--night);color:#F2F2F2;padding:clamp(64px,8vw,120px) var(--pad);scroll-margin-top:40px}
.watch-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,40px)}
.h-sans{font:900 clamp(56px,9vw,150px)/.85 var(--sans);letter-spacing:-.055em}
.watch-note{max-width:22em;color:#bdb8c2;font-size:15px}
.watch-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:clamp(16px,2.4vw,40px);align-items:start}
.screen-btn{position:relative;display:block;width:100%;padding:0;border:0;background:#000;cursor:pointer;aspect-ratio:16/9;overflow:hidden}
.screen-btn img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--rise),opacity .3s}
.screen-btn:hover img{transform:scale(1.02)}
.screen iframe{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
.play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--cap);display:grid;place-items:center;
  box-shadow:0 0 0 10px rgba(227,57,66,.22);transition:transform .2s var(--rise)}
.play .tri{border-left-width:22px;border-top-width:13px;border-bottom-width:13px;margin-left:6px;color:#fff}
.screen-btn:hover .play{transform:scale(1.08)}
.screen-cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:14px;align-items:baseline}
.screen-title{font:400 clamp(28px,3vw,46px)/1 var(--serif)}
.screen-credit{color:#bdb8c2;font-size:14px;max-width:36em}
.reel li{margin-bottom:6px}
.chip-night{width:100%;justify-content:flex-start;background:var(--night-2);font-size:clamp(15px,1.15vw,18px);padding:.85em .9em;text-align:left}
.chip-night .k{color:#8d8794;min-width:3.2em;opacity:1}
.chip-night.is-on{background:#F2F2F2;color:var(--night)}
.chip-night.is-on .k{color:var(--cap)}
button.chip-night.is-on:hover{background:#fff}

/* ---------- 4. live ---------- */
.live{position:relative;background:var(--leaf);color:#fff;min-height:100svh;display:grid;scroll-margin-top:0;overflow:hidden}
.live-photo{grid-area:1/1;position:relative}
.live-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.live-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,20,18,.82),rgba(30,20,18,.35) 55%,rgba(30,20,18,.05))}
.live-overlay{grid-area:1/1;position:relative;z-index:1;padding:clamp(64px,8vw,120px) var(--pad);align-self:center;max-width:860px}
.live-h{text-shadow:0 0 40px rgba(0,0,0,.2)}
.live-sub{font-size:clamp(17px,1.35vw,21px);max-width:26em;margin:16px 0 clamp(28px,4vw,48px)}
.list-h{font:800 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;margin:0 0 10px;opacity:.85}
.dates{margin-bottom:28px}
.dates li{margin-bottom:6px}
.dates .chip{display:grid;grid-template-columns:auto 1fr auto;column-gap:18px;row-gap:4px;align-items:baseline;width:min(100%,760px);padding:.9em 1em}
.dates .d{font:800 clamp(15px,1.2vw,19px)/1 var(--sans);letter-spacing:-.01em;white-space:nowrap}
.dates .w{font-size:clamp(15px,1.2vw,19px);font-weight:500}
.dates .x{grid-column:2/3;font-size:13px;font-weight:500;opacity:.9}
.dates .t{grid-column:3;grid-row:1/3;align-self:center;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.chip-cap{background:var(--cap)}
a.chip-cap:hover,a.chip-cap:focus-visible{background:#c42c35}
.chip-ghost{background:rgba(18,16,23,.5);cursor:default}
.past .chip{grid-template-columns:auto 1fr}
.none{margin-bottom:28px;font-size:17px}

/* ---------- 5. summer ---------- */
.summer{background:var(--paper);padding:clamp(64px,8vw,120px) 0;overflow:hidden}
.summer-head{padding:0 var(--pad);display:grid;grid-template-columns:1fr auto;gap:12px 24px;align-items:end;margin-bottom:clamp(24px,3vw,44px)}
.serif-h{font:400 clamp(52px,7.5vw,128px)/.9 var(--serif);letter-spacing:-.015em}
.summer-sub{grid-column:1;max-width:34em;font-size:clamp(16px,1.2vw,19px)}
.strip-ctrl{grid-column:2;grid-row:1/3;display:flex;gap:8px}
.round{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--cocoa);background:transparent;font-size:20px;cursor:pointer;transition:background-color .16s,color .16s}
.round:hover{background:var(--cocoa);color:var(--paper)}
.strip{display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;padding:10px var(--pad) 26px;scroll-padding:0 var(--pad);scrollbar-width:thin;scrollbar-color:var(--cocoa) transparent}
.strip li{flex:0 0 auto;scroll-snap-align:start}
.strip figure{background:#fff;padding:10px 10px 12px;box-shadow:0 1px 2px rgba(59,42,40,.12),0 10px 26px rgba(59,42,40,.14);transform:rotate(var(--r,0deg));transition:transform .3s var(--rise)}
.strip li:nth-child(3n+1) figure{--r:-1.2deg}
.strip li:nth-child(3n+2) figure{--r:.8deg}
.strip li:nth-child(3n) figure{--r:-.4deg}
.strip figure:hover{transform:rotate(0) translateY(-4px)}
.strip img{height:clamp(300px,44vh,480px);width:auto;max-width:none}
.strip figcaption{font:400 italic 19px/1.1 var(--serif);padding-top:10px;color:var(--cocoa-2)}

/* ---------- 6. catalogue ---------- */
.cat{background:var(--cocoa);color:var(--paper);padding:clamp(64px,8vw,120px) var(--pad)}
.cat .h-sans{margin-bottom:clamp(24px,3vw,44px);color:var(--terra)}
.covers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.covers a{display:block;text-decoration:none}
.covers img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .3s var(--rise),filter .3s}
.covers a:hover img,.covers a:focus-visible img{transform:translateY(-4px) rotate(-.8deg)}
.cap{display:flex;flex-direction:column;gap:2px;padding-top:10px}
.cap b{font-weight:700;font-size:15px;line-height:1.25}
.cap i{font:400 italic 17px/1.1 var(--serif);color:#d9c2b2}

/* ---------- 7. about ---------- */
.about{background:var(--fog);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,.7fr);gap:clamp(20px,3.5vw,64px);
  align-items:center;padding:clamp(64px,8vw,120px) var(--pad);scroll-margin-top:40px}
.about-photo img{width:100%;filter:grayscale(1) contrast(1.05)}
.about-body p{font-size:clamp(16px,1.25vw,19px);max-width:36em;margin-top:1em}
.about-body .serif-h{margin-bottom:.2em}
.k-lbl{font:800 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;background:var(--cocoa);color:var(--paper);padding:.35em .5em;margin-right:.5em;vertical-align:.12em}
.about-avatar img{width:100%;border-radius:50%;box-shadow:0 0 0 8px var(--paper)}

/* ---------- 8. footer ---------- */
.foot{background:var(--terra);color:var(--cocoa);text-align:center;padding:clamp(72px,10vw,140px) var(--pad) 40px;position:relative}
.foot-tag{width:clamp(180px,22vw,340px);margin:0 auto 28px}
.foot-h{font:400 clamp(40px,5.6vw,92px)/.95 var(--serif);max-width:14em;margin:0 auto 16px;letter-spacing:-.01em}
.foot-p{font-size:17px;margin-bottom:26px}
.foot-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.chip-cocoa{background:var(--cocoa);font-size:16px;padding:.7em .9em}
.chip-cocoa .k{color:var(--terra);opacity:1}
a.chip-cocoa:hover{background:#000}
.small{margin-top:clamp(56px,7vw,100px);font:800 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;opacity:.7}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .care{grid-template-columns:1fr}
  .care-cover img{max-width:560px}
  .watch-grid{grid-template-columns:1fr}
  .covers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about{grid-template-columns:1fr 1fr}
  .about-body{grid-column:1/-1;grid-row:1}
  .about-avatar{max-width:260px;justify-self:center}
}
@media (max-width:600px){
  .live{min-height:0}
  .live-photo{grid-area:auto;height:56vw;min-height:230px}
  .live-photo::after{background:linear-gradient(180deg,transparent 40%,var(--leaf))}
  .live-overlay{grid-area:auto;padding-top:8px}
  .dates .chip{grid-template-columns:1fr auto;column-gap:12px}
  .dates .d{grid-column:1}
  .dates .w,.dates .x{grid-column:1/2}
  .dates .t{grid-column:2;grid-row:1/4}
  .past .chip{grid-template-columns:1fr}
  .summer-head{grid-template-columns:1fr}
  .strip-ctrl{grid-column:1;grid-row:auto}
  .strip img{height:340px}
  .about{grid-template-columns:1fr}
  .about-photo{max-width:420px}
  .about-avatar{max-width:200px}
  .bar-links{gap:14px;font-size:12px}
  .player .btn{flex:1 1 auto;justify-content:center}
  .player iframe{height:380px}
}

/* ---------- reduced motion: final state, no travel ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .fx,.rv{opacity:1 !important;transform:none !important}
  .art{transform:none !important}
  .tag-lines path{stroke-dashoffset:0}
  .tag-fill{fill-opacity:1}
  .fog-near{opacity:.28}
}