/* Courtin public site. Mobile first. Tokens follow the Courtin design system. */
:root{
  --bg:#0A0908; --ink:#141210; --card:#16130F; --ivory:#F3EEE4; --body:#D9D2C5; --muted:#8C857A;
  --gold:#E9D39B; --g1:#B8924A; --red:#C8102E; --ok:#9BE3B5;
  --line:rgba(233,211,155,.16); --line2:rgba(233,211,155,.32);
  --goldgrad:linear-gradient(100deg,#B8924A 0%,#D9BC7C 18%,#F1E2B8 34%,#E9D39B 50%,#C9A55E 66%,#EAD7A3 82%,#B8924A 100%);
  --serif:'Playfair Display',Georgia,serif; --bodoni:'Bodoni Moda','Playfair Display',serif; --sans:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --pad:20px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ivory);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
.gold{background:var(--goldgrad);background-size:170% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.wrap.narrow{max-width:760px}
.center{text-align:center}
.kicker{margin:0 0 14px;font:600 12px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
h2,h3{font-family:var(--serif);font-weight:500;margin:0;letter-spacing:-.005em}
h2{font-size:clamp(34px,8.6vw,64px);line-height:1.08;color:var(--ivory)}
h3{font-size:24px;line-height:1.2}
.display{font-style:italic;font-weight:400}
.lede{color:var(--body);font-size:17px;max-width:640px;margin:18px 0 0}
.center .lede{margin-left:auto;margin-right:auto}
.fine{color:var(--muted);font-size:13px;line-height:1.6;margin:18px 0 0}
.knife{color:var(--muted);font-size:13.5px;font-style:italic;font-family:var(--serif);margin:10px 0 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;border:1.5px solid rgba(233,211,155,.6);color:var(--gold);font:600 15px/1 var(--sans);letter-spacing:.02em;text-decoration:none;background:transparent;cursor:pointer;white-space:nowrap;transition:transform .2s ease,background .2s ease}
.btn:hover{background:rgba(233,211,155,.08)}
.btn:active{transform:scale(.98)}
.btn.solid{background:linear-gradient(100deg,#B8924A,#E9D39B 50%,#C9A55E);color:#1A140A;border:none}
.btn.sm{min-height:42px;padding:0 18px;font-size:14px}
.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.ctas.center,.center .ctas{justify-content:center}

/* header */
.top{position:fixed;z-index:50;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(10px + env(safe-area-inset-top)) var(--pad) 10px;transition:background .3s ease,border-color .3s ease;border-bottom:1px solid transparent}
.top.solid{background:rgba(10,9,8,.92);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:40px;height:auto}
.wm{font:500 17px/1 var(--bodoni);letter-spacing:.34em;padding-left:.34em}
.nav{display:none}
.pill{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);color:var(--gold);font:600 13px/1 var(--sans);letter-spacing:.06em;text-decoration:none;background:rgba(10,9,8,.5)}

/* THE COURT WALK */
.walk{position:relative;height:700vh;height:700svh;background:#000}
.walk-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.walk-canvas{position:absolute;inset:0;width:100%;height:100%}
.walk-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,9,8,.55) 0%,rgba(10,9,8,0) 22%,rgba(10,9,8,0) 55%,rgba(10,9,8,.78) 100%)}
.walk-caps{position:absolute;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom));text-align:center;pointer-events:none;padding:0 var(--pad)}
.cap{position:absolute;left:var(--pad);right:var(--pad);bottom:0;margin:0;font:italic 400 clamp(30px,8vw,44px)/1.15 var(--serif);opacity:0;transform:translateY(14px);will-change:opacity,transform;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.walk-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 50% 50%,rgba(10,9,8,.86),rgba(10,9,8,.55) 70%,rgba(10,9,8,.2))}
.end-emblem{width:min(56vw,300px);width:min(56vw,300px,34svh);height:auto;overflow:visible}
.end-wm{margin:18px 0 0;font:700 clamp(40px,12vw,92px)/1 var(--bodoni);font-size:clamp(40px,min(12vw,11svh),92px);letter-spacing:.26em;padding-left:.26em}
.end-tag{margin:14px 0 0;font:italic 400 clamp(20px,5vw,30px)/1.2 var(--serif);color:var(--ivory)}
/* the store badges under the tag: they fade in last and only take taps once they are fully there.
   Sized for the overlay so the emblem keeps its room: 2 badges a row on a phone, 4 across on a laptop. */
.end-stores{width:100%;max-width:980px;margin:0;padding:0 12px;opacity:0;visibility:hidden;pointer-events:none;will-change:opacity,transform}
.end-stores.on{visibility:visible}
.end-stores.live{pointer-events:auto}
.end-stores .cs-stores{margin-top:30px;gap:16px 12px}
/* the badge is 15.2em wide in components.css: 2 a row fit in (100vw - 40px), 4 a row in (100vw - 140px), leaving room for a scrollbar; if that width changes, retune 30.4 and 60.8 */
.end-stores .cs-badge{font-size:11.5px;font-size:min(11.5px,calc((100vw - 40px) / 30.4))}
.walk-cue{position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom));margin:0;text-align:center;font:600 11px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:rgba(243,238,228,.75);transition:opacity .4s ease}
.walk-cue i{display:block;width:1px;height:34px;margin:12px auto 0;background:linear-gradient(180deg,rgba(233,211,155,.9),rgba(233,211,155,0));animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(.2);transform-origin:bottom}}
.walk-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-height:56px;padding:0 28px;border-radius:999px;border:1.5px solid rgba(233,211,155,.7);background:rgba(10,9,8,.6);color:var(--gold);font:600 15px/1 var(--sans);cursor:pointer}
.walk.reduced{height:100vh;height:100svh}
.walk.reduced .cap{opacity:1;transform:none;position:static;margin-top:8px;font-size:clamp(22px,6vw,32px)}
.walk.reduced .walk-caps{bottom:calc(40px + env(safe-area-inset-bottom))}
.walk.reduced .walk-cue{display:none}

/* intro */
.intro{padding:96px 0 40px;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(201,165,94,.10),rgba(201,165,94,0) 70%)}
.intro .display{font-size:clamp(34px,8.6vw,62px)}
/* store badge rows: plain holders, the badge component brings its own layout; empty holders take no room */
.intro-stores,.foot-stores{display:block}
.intro-stores:empty,.foot-stores:empty,.end-stores:empty{display:none}
.store-line{max-width:34em;text-wrap:balance}
.center .store-line,.foot .store-line{margin-left:auto;margin-right:auto}

/* the film band: edge to edge, no frame */
.reel{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
.reel-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.reel-pill{position:absolute;z-index:2;bottom:14px;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 15px;border-radius:999px;border:1.5px solid rgba(233,211,155,.75);background:rgba(10,9,8,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--gold);font:600 13px/1 var(--sans);letter-spacing:.03em;white-space:nowrap;cursor:pointer;transition:background .2s ease}
.reel-pill:hover{background:rgba(10,9,8,.78)}
.reel-watch{left:14px}
.reel-watch::before{content:'';flex:none;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.reel-snd{right:14px}
.reel-play{position:absolute;z-index:2;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;padding:0;border-radius:50%;border:1.5px solid rgba(233,211,155,.85);background:rgba(10,9,8,.55);-webkit-appearance:none;appearance:none;cursor:pointer}
.reel-play::after{content:'';position:absolute;left:27px;top:21px;border-left:20px solid var(--gold);border-top:13px solid transparent;border-bottom:13px solid transparent}

/* sections */
.sec{padding:88px 0}
.sec-head{margin-bottom:40px}
.sec + .sec{border-top:1px solid rgba(233,211,155,.07)}

/* features: 6 identical phones */
.features{display:grid;grid-template-columns:1fr;gap:56px}
.feat > h3{margin-top:22px}
.feat > p{margin:10px 0 0;color:var(--body)}
.feat > .knife{color:var(--muted)}
.phone{position:relative;width:min(72vw,280px);aspect-ratio:408/862;margin:0 auto;border-radius:44px;padding:9px;text-align:left;background:linear-gradient(145deg,#4a443b,#1a1814 30%,#0d0c0a 70%,#3a352e);box-shadow:0 0 0 1px #000,0 40px 90px rgba(0,0,0,.75),0 0 120px rgba(184,146,74,.06)}
.phone > img,.phone > video{width:100%;height:100%;object-fit:cover;border-radius:36px;background:#0E0D0B}
.phone::after{content:'';position:absolute;inset:9px;border-radius:36px;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.015) 28%,rgba(255,255,255,0) 45%)}
.shot{border-radius:26px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.6);max-width:420px;margin:0 auto}
.shot img{width:100%;height:auto}
.shot.paper{background:#0d0c0a}
/* the live Walk In Buddy screen, laid out for the tall phone: the buddy's photo takes the spare height */
.phone.live .scr{position:absolute;inset:9px;border-radius:36px;overflow:hidden;background:#0E0D0B;padding:14px 16px;display:flex;flex-direction:column}
.scr-bar{display:flex;justify-content:space-between;align-items:center;font:600 12px/1 var(--sans);color:var(--ivory);padding:6px 10px 0}
.scr-bar .dots{letter-spacing:.1em;font-size:9px;color:rgba(243,238,228,.8)}
.scr-head{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font:500 12px/1 var(--bodoni);letter-spacing:.34em}
.scr-head img{width:30px;height:auto}
.scr-title{margin:12px 0 14px;text-align:center;font:500 22px/1.2 var(--serif);color:var(--ivory)}
.buddy{flex:1 1 0;min-height:0;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#1C1915,#121110);border:1px solid var(--line)}
.buddy img{flex:1 1 0;min-height:56px;width:100%;object-fit:cover;object-position:50% 0}
.buddy > div{flex:none;padding:10px 12px 12px}
.buddy b{display:block;font:600 14px/1.3 var(--sans);color:var(--ivory)}
.buddy span{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:3px}
.route{flex:none;height:6px;border-radius:3px;background:rgba(233,211,155,.14);margin:16px 2px 0;overflow:hidden}
.route i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#B8924A,#F1E2B8);animation:walkin 6s cubic-bezier(.45,.05,.35,1) infinite}
@keyframes walkin{0%{width:6%;opacity:1}76%{width:94%;opacity:1}90%{width:94%;opacity:0}100%{width:6%;opacity:0}}
.route-l{display:flex;justify-content:space-between;gap:12px;font-size:11px;line-height:1.3;color:var(--muted);margin:7px 2px 0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.chip{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid rgba(233,211,155,.45);font:500 11px/1 var(--sans);color:var(--gold)}
.scr .btn{flex:none;margin-top:14px}
.scr-fine{text-align:center;font-size:10.5px;line-height:1.4;color:var(--muted);margin:10px 0 2px}
@media (max-width:359px){ /* the smallest phones: keep the chips to 2 rows so the buddy card never clips */
  .phone.live .scr{padding:12px}
  .scr-title{font-size:20px;margin:10px 0 12px}
  .chip{padding:5px 8px;font-size:10px}
  .buddy b{font-size:13px}
}

/* members: the button sits on the card's floor so a row of cards lines up */
.members{display:grid;grid-template-columns:1fr;gap:28px}
.mem{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,#1C1915,#121110);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.mem-photo{position:relative;flex:none;aspect-ratio:3/4;background:#111}
.mem-photo video,.mem-photo > img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:14px;top:14px;padding:7px 12px;border-radius:999px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;background:rgba(10,9,8,.72);border:1px solid}
.badge.ok{color:var(--ok);border-color:rgba(140,220,170,.6)}
.badge.no{color:#FF7A83;border-color:rgba(255,80,90,.65)}
.mem-body{flex:1 1 auto;display:flex;flex-direction:column;padding:22px 22px 26px}
.mem-body p{margin:10px 0 0;color:var(--body)}
.mem-body .knife{color:var(--muted)}
.mem-body > p:last-of-type{margin-bottom:18px}
.mem-body .btn{align-self:flex-start;margin-top:auto}
.mem-sub{font-size:13px;letter-spacing:.04em;color:var(--muted)!important;margin-top:6px!important}
.slot{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#211c14,#0d0b09 70%)}
.slot::before{content:'';position:absolute;inset:16px;border:1px solid rgba(233,211,155,.55);border-radius:18px;box-shadow:inset 0 0 0 6px #0d0b09,inset 0 0 0 7px rgba(233,211,155,.25)}
.slot-in{position:relative;text-align:center;padding:0 28px}
.slot-in img{margin:0 auto;width:100px;height:auto;opacity:.9}
.slot-ep{margin:18px 0 0;font:700 40px/1 var(--bodoni);letter-spacing:.06em;color:var(--gold)}
.slot-cast{margin:12px 0 0;font:italic 400 20px/1.3 var(--serif);color:var(--ivory)}
.slot::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,240,200,0) 30%,rgba(255,240,200,.07) 50%,rgba(255,240,200,0) 70%);background-size:250% 100%;animation:shine 6s ease-in-out infinite}
@keyframes shine{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* in action: 4 smaller identical phones, 2 by 2 on a phone */
.action{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 16px}
.act{margin:0;text-align:center}
.phone.sm{width:100%;max-width:200px;padding:5px;border-radius:26px;box-shadow:0 0 0 1px #000,0 26px 60px rgba(0,0,0,.7),0 0 80px rgba(184,146,74,.05)}
.phone.sm > img,.phone.sm > video{border-radius:21px}
.phone.sm::after{inset:5px;border-radius:21px}
.act figcaption{margin-top:16px;font:italic 400 18px/1.3 var(--serif);color:var(--ivory)}

/* films */
.films{display:grid;grid-template-columns:1fr;gap:28px}
.film{display:block;text-align:left;padding:0;border:0;background:none;color:inherit;cursor:pointer;font:inherit}
.film-poster{position:relative;display:block;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.film-poster img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}
.film:hover .film-poster img{transform:scale(1.03)}
.play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(10,9,8,.55);border:1.5px solid rgba(233,211,155,.8)}
.play::after{content:'';position:absolute;left:27px;top:21px;border-left:20px solid var(--gold);border-top:13px solid transparent;border-bottom:13px solid transparent}
.dur{position:absolute;right:12px;bottom:12px;padding:5px 10px;border-radius:999px;background:rgba(10,9,8,.7);font:600 12px/1 var(--sans);color:var(--ivory)}
.film-t{display:block;margin-top:16px;font:500 24px/1.2 var(--serif)}
.film-s{display:block;margin-top:6px;color:var(--muted);font-size:14.5px}

/* music */
.songs{display:grid;grid-template-columns:1fr;gap:40px}
.song{display:grid;grid-template-columns:1fr;gap:20px}
.art{width:100%;max-width:440px;border-radius:20px;box-shadow:0 30px 70px rgba(0,0,0,.6)}
.song h3 .sub{display:block;margin-top:6px;font:italic 400 16px/1.35 var(--serif);color:var(--muted)}
.player{display:flex;align-items:center;gap:14px;margin-top:18px;padding:12px 16px 12px 12px;border-radius:999px;border:1px solid var(--line2);background:rgba(20,18,16,.8)}
.pp{position:relative;flex:none;width:44px;height:44px;border-radius:50%;border:0;background:linear-gradient(100deg,#B8924A,#E9D39B 50%,#C9A55E);cursor:pointer}
.pp::after{content:'';position:absolute;left:17px;top:13px;border-left:14px solid #1A140A;border-top:9px solid transparent;border-bottom:9px solid transparent}
.pp.on::after{left:15px;top:14px;width:5px;height:16px;border:0;background:#1A140A;box-shadow:9px 0 0 #1A140A}
.bar{flex:1;height:6px;border-radius:3px;background:rgba(233,211,155,.14);cursor:pointer;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#B8924A,#F1E2B8)}
.time{font:600 12px/1 var(--sans);color:var(--muted);min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.lyric{margin:18px 0 0;padding:18px 20px;border-left:2px solid rgba(233,211,155,.5);font:italic 400 17px/1.55 var(--serif);color:var(--body);background:rgba(233,211,155,.04);border-radius:0 14px 14px 0}

/* apply */
.apply{display:grid;gap:18px;padding:26px 22px;border-radius:26px;background:linear-gradient(160deg,#1C1915,#121110);border:1px solid var(--line)}
.apply label{display:grid;gap:8px;font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.apply input,.apply select,.apply textarea{width:100%;font:400 16px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--ivory);background:#0E0D0B;border:1px solid var(--line2);border-radius:14px;padding:14px;appearance:none;-webkit-appearance:none}
.apply select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.apply textarea{resize:vertical}
.apply input:focus,.apply select:focus,.apply textarea:focus{outline:none;border-color:var(--gold)}
.apply .tick{display:flex;align-items:center;gap:12px;text-transform:none;letter-spacing:0;font:400 15px/1.4 var(--sans);color:var(--body)}
.apply .tick input{width:22px;height:22px;padding:0;border-radius:6px;flex:none}
.apply .tick input:checked{background:var(--gold)}
.apply .btn{margin-top:6px}
.adjourned{text-align:center;padding:40px 22px;border-radius:26px;border:1px solid var(--line2);background:radial-gradient(ellipse at 50% 0%,rgba(201,165,94,.12),rgba(201,165,94,0) 70%),#121110}
.adjourned img{margin:0 auto;width:90px;height:auto}
.verdict{margin:18px 0 0;font:italic 400 clamp(26px,7vw,38px)/1.2 var(--serif)}

/* press */
.quotes{display:grid;grid-template-columns:1fr;gap:18px}
.quotes figure{margin:0;padding:26px 24px;border-radius:22px;border:1px solid var(--line);background:#121110}
.quotes blockquote{margin:0;font:italic 400 21px/1.4 var(--serif);color:var(--ivory)}
.quotes figcaption{margin-top:14px;font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.press-kit{margin-top:36px;display:flex;flex-direction:column;gap:18px;align-items:flex-start;padding:26px 24px;border-radius:22px;border:1px solid var(--line2);background:linear-gradient(160deg,#1C1915,#121110)}
.press-kit p{margin:8px 0 0;color:var(--body)}

/* legal */
.small-print{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.small-print li{padding:14px 0;border-bottom:1px solid rgba(233,211,155,.1);color:var(--body);font-size:15px}
.plain{margin:28px 0 0;color:var(--muted);font-size:14px}

/* dashboard door */
.door{background:radial-gradient(ellipse 70% 80% at 50% 100%,rgba(201,165,94,.10),rgba(201,165,94,0) 70%)}
.door .btn{margin-top:28px}

/* footer */
.foot{padding:72px var(--pad) calc(56px + env(safe-area-inset-bottom));text-align:center;border-top:1px solid var(--line)}
.foot img{margin:0 auto;width:96px;height:auto}
.foot-wm{margin:18px 0 0;font:500 28px/1 var(--bodoni);letter-spacing:.34em;padding-left:.34em}
.foot-tag{margin:12px 0 0;font:italic 400 19px/1.3 var(--serif);color:var(--ivory)}
.foot .fine{margin-top:10px}

/* film dialog */
.player-dlg{width:min(100vw,1180px);max-width:100vw;padding:0;border:0;background:transparent;color:var(--ivory)}
.player-dlg::backdrop{background:rgba(5,4,3,.92)}
.dlg-frame{position:relative;aspect-ratio:16/9;width:100%;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.8)}
.dlg-frame video,.dlg-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dlg-x{position:fixed;right:calc(14px + env(safe-area-inset-right));top:calc(14px + env(safe-area-inset-top));width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:rgba(10,9,8,.7);color:var(--gold);font:400 28px/1 var(--sans);cursor:pointer}

/* larger screens */
@media (min-width:760px){
  :root{--pad:40px}
  .features{grid-template-columns:repeat(2,1fr);gap:72px 48px}
  .members{grid-template-columns:repeat(2,1fr)}
  .films{grid-template-columns:repeat(3,1fr)}
  .quotes{grid-template-columns:repeat(2,1fr)}
  .press-kit{flex-direction:row;align-items:center;justify-content:space-between}
  .song{grid-template-columns:minmax(0,380px) 1fr;gap:36px;align-items:start}
  .feat{text-align:center}
  .feat > p{margin-left:auto;margin-right:auto;max-width:420px}
  .end-stores{padding:0 var(--pad)}
  .end-stores .cs-badge{font-size:14px;font-size:min(14px,calc((100vw - 140px) / 60.8))}
  .reel-pill{bottom:26px;min-height:44px;padding:0 20px;font-size:14px}
  .reel-watch{left:26px}
  .reel-snd{right:26px}
  .reel-play{width:88px;height:88px;margin:-44px 0 0 -44px}
  .reel-play::after{left:35px;top:27px;border-left-width:26px;border-top-width:17px;border-bottom-width:17px}
}
@media (min-width:900px){
  .action{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}
  .phone.sm{max-width:236px;padding:6px;border-radius:30px}
  .phone.sm > img,.phone.sm > video{border-radius:24px}
  .phone.sm::after{inset:6px;border-radius:24px}
  .act figcaption{font-size:20px}
}
@media (min-width:1100px){
  .features{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr}
  .members{grid-template-columns:repeat(4,1fr);gap:22px}
  .mem-sub{min-height:3.2em}
  .mem h3{font-size:min(24px,2vw)}
  /* the nav sits on the axis of the walk; the brand stays left and Apply right */
  .nav{position:absolute;left:50%;top:env(safe-area-inset-top,0px);bottom:0;transform:translateX(-50%);display:flex;align-items:center;gap:28px;padding-left:.2em;font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
  .nav a{text-decoration:none;color:rgba(243,238,228,.78);white-space:nowrap}
  .nav a:hover{color:var(--gold)}
  .songs{gap:56px}
  .action{gap:40px 32px}
  .phone.sm{padding:7px;border-radius:37px}
  .phone.sm > img,.phone.sm > video{border-radius:30px}
  .phone.sm::after{inset:7px;border-radius:30px}
  /* Apply on a laptop: the head beside the form instead of a narrow column in the middle */
  #apply .wrap.narrow{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);column-gap:clamp(56px,6vw,104px);align-items:center}
  #apply .sec-head{grid-column:1;grid-row:1;margin:0;text-align:left}
  #apply .sec-head .lede{margin-left:0;margin-right:0}
  #apply .apply,#apply .adjourned{grid-column:2;grid-row:1}
  /* Music the same way once the player is in: the head beside it, not a card floating mid screen */
  #music .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);column-gap:clamp(56px,6vw,104px);align-items:center}
  #music .sec-head{grid-column:1;grid-row:1;margin:0}
  #music .wrap > .mp{grid-column:2;grid-row:1;width:100%}
}
/* wide laptops: a wider measure and more air around the section heads */
@media (min-width:1400px){
  .wrap{max-width:1320px}
  #apply .wrap.narrow{max-width:1320px}
  .sec{padding:120px 0}
  .sec-head{margin-bottom:64px}
  .sec-head h2{font-size:clamp(64px,4.4vw,80px)}
  .sec-head .lede{font-size:18px;max-width:680px}
  .intro{padding:120px 0 64px}
  .intro .display{font-size:clamp(62px,4.2vw,78px)}
  .features{gap:88px 64px}
  .members{gap:28px}
  .reel-pill{bottom:36px}
  .reel-watch{left:40px}
  .reel-snd{right:40px}
}
/* the walk on a laptop: the landscape frame set fills the screen and the words sit on the side over a side scrim */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  :where(.walk:not(.column)) .walk-scrim{background:linear-gradient(90deg,rgba(10,9,8,.78) 0%,rgba(10,9,8,.46) 17%,rgba(10,9,8,0) 35%,rgba(10,9,8,0) 65%,rgba(10,9,8,.46) 83%,rgba(10,9,8,.78) 100%),linear-gradient(180deg,rgba(10,9,8,.5) 0%,rgba(10,9,8,0) 16%,rgba(10,9,8,0) 78%,rgba(10,9,8,.62) 100%)}
  :where(.walk:not(.column)) .walk-caps{inset:0}
  :where(.walk:not(.column)) .cap{top:50%;bottom:auto;translate:0 -50%;width:27vw;font-size:clamp(34px,3.1vw,60px);text-wrap:balance}
  :where(.walk:not(.column)) .cap1,:where(.walk:not(.column)) .cap3{left:5vw;right:auto;text-align:left}
  :where(.walk:not(.column)) .cap2{right:5vw;left:auto;text-align:right}
  .walk.reduced:not(.column) .walk-caps{bottom:0}
  .walk.reduced:not(.column) .cap{position:absolute;margin:0;font-size:clamp(34px,3.1vw,60px)}
  .walk.reduced:not(.column) .cap1{top:38%}
  .walk.reduced:not(.column) .cap3{top:62%}
  /* fallback while courtwalk-wide is missing: the tall set in a centred cinema column, captions in the margins (exactly as before) */
  :where(.walk.column) .walk-canvas{left:50%;right:auto;width:calc(100svh * 9 / 16);transform:translateX(-50%)}
  :where(.walk.column) .walk-scrim{background:radial-gradient(ellipse 34% 70% at 50% 50%,rgba(10,9,8,0) 60%,rgba(10,9,8,.6) 100%),linear-gradient(180deg,rgba(10,9,8,.5) 0%,rgba(10,9,8,0) 18%,rgba(10,9,8,0) 80%,rgba(10,9,8,.55) 100%)}
  :where(.walk.column) .walk-caps{inset:0;bottom:0}
  :where(.walk.column) .cap{bottom:auto;top:50%;width:calc((100vw - 100svh * 9 / 16) / 2 - 64px);font-size:clamp(30px,2.6vw,44px)}
  :where(.walk.column) .cap1,:where(.walk.column) .cap3{left:32px;right:auto;text-align:right}
  :where(.walk.column) .cap2{right:32px;left:auto;text-align:left}
  .walk.reduced:where(.column) .cap{position:absolute}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .walk-cue i,.slot::after,.route i{animation:none}
}

/* phones: the intro and footer badge rows sit 2 to a row, like the end of the walk */
@media (max-width:759px){
  .intro-stores .cs-stores,.foot-stores .cs-stores{gap:16px 12px}
  .intro-stores .cs-badge,.foot-stores .cs-stores.cs-sm .cs-badge{font-size:11.5px;font-size:min(11.5px,calc((100vw - 56px) / 30.4))}
}