:root{
  --ink:#04070f;
  --deep:#0a1530;
  --stone:#5d6f94;
  --silver:#dfe6f2;
  --frost:#9fb6e0;
  --ember:#e0a24a;
  --line:rgba(223,230,242,.18);
  --wide:'Syncopate',system-ui,sans-serif;
  --serif:'Cinzel',Georgia,serif;
  --deco:'Cinzel Decorative','Cinzel',Georgia,serif;
  --body:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);overflow-x:hidden}
body{background:var(--ink);color:var(--silver);font-family:var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.fallback{position:fixed;inset:0;z-index:0;display:none;background:var(--ink) url(../goh-brief/material/01-goh-temple.webp) center/cover no-repeat;filter:brightness(.55)}
.no-gl .fallback{display:block}
.no-gl #gl{display:none}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 80% at 50% 40%,transparent 40%,rgba(2,4,10,.65) 100%)}

.bar{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(16px,3vw,40px);font-family:var(--wide);font-size:10px;letter-spacing:.32em;text-transform:uppercase}
.bar a{text-decoration:none}
.back{opacity:.75;transition:opacity .3s}
.back:hover{opacity:1}
.bar-mid{opacity:.55}
.bar-cta{border:1px solid var(--line);padding:11px 16px 11px 19px;border-radius:999px;background:rgba(10,21,48,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s,border-color .3s}
.bar-cta:hover{background:var(--silver);color:var(--ink);border-color:var(--silver)}

.rail{position:fixed;right:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%);width:1px;height:120px;background:var(--line);z-index:5}
.rail i{position:absolute;left:-1px;top:0;width:3px;height:100%;background:var(--silver);transform-origin:top;transform:scaleY(0)}

main{position:relative;z-index:2}
.beat{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px clamp(16px,6vw,96px);position:relative}
.kicker{font-family:var(--wide);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--frost);margin-bottom:22px}
.silver,.name,.big,.eleven{background:linear-gradient(175deg,#ffffff 0%,#c9d4e8 34%,#7a8bb0 52%,#e9eef8 70%,#8f9fc2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* background-clip:text paints only inside the padding box, so the Decorative swashes (the U of UBUNTU) need room to overhang */
.silver,.name,.big,.eleven{padding:.08em .22em;margin:-.08em -.22em}
/* a word wider than its column (UBUNTU) overflows the box the gradient paints in; fit-content grows the box to the widest word */
.name,.big{width:fit-content;min-width:min-content}

.hero{align-items:center;text-align:center}
/* the official mark (29-goh-logo-silver): its file carries a wide transparent margin, trimmed here by a crop
   wrapper measured from the alpha box (x 480, y 784, 1052 x 1044 of 2000 x 2500), never by editing the file */
.logo-crop{display:block;position:relative;aspect-ratio:1052/1044;overflow:hidden}
/* the mark's own axis (ankh, OF, the point of the V) sits 22.5px right of its box centre in the file: centre the axis, not the box */
.logo-crop{translate:-2.14% 0}
.logo-crop img{position:absolute;max-width:none;width:190.114%;height:auto;left:-45.627%;top:-75.096%}
.hero-mark{width:clamp(220px,min(80vw,44vh),440px);margin:0 auto;filter:drop-shadow(0 14px 26px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(120,160,255,.18))}
.hero .line{font-family:var(--serif);font-size:clamp(17px,1.6vw,22px);margin-top:28px;letter-spacing:.06em}
.meta{display:flex;align-items:center;gap:14px;margin-top:22px;font-family:var(--wide);font-size:11px;letter-spacing:.34em;text-transform:uppercase}
.meta .dot{width:5px;height:5px;transform:rotate(45deg);background:var(--silver)}
.hint{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);font-family:var(--wide);font-size:9px;letter-spacing:.4em;text-transform:uppercase;opacity:.55;white-space:nowrap}
.hint::after{content:"";display:block;width:1px;height:38px;margin:14px auto 0;background:linear-gradient(var(--silver),transparent);animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.enter{align-items:center;text-align:center}
.big{font-family:var(--serif);font-weight:700;font-size:clamp(34px,5vw,76px);line-height:1.04;max-width:14ch;letter-spacing:.01em}
.sub{margin-top:26px;font-size:clamp(15px,1.2vw,18px);color:var(--frost);max-width:36ch}

.god{max-width:none}
.god.left{align-items:flex-start;text-align:left}
.god.right{align-items:flex-end;text-align:right}
.god > *{max-width:520px}
.name{font-family:var(--deco);font-weight:900;font-size:clamp(48px,7.4vw,118px);line-height:.92}
.said{margin-top:22px;font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);line-height:1.4}
.said.dim{margin-top:10px;font-family:var(--body);font-size:14px;color:var(--frost);letter-spacing:.02em}

.years{align-items:center;text-align:center}
.eleven{font-family:var(--deco);font-weight:900;font-size:clamp(120px,22vw,300px);line-height:.8;opacity:.9}
.yrs{list-style:none;margin-top:28px;font-family:var(--serif);font-size:clamp(20px,2.3vw,32px);line-height:1.5}
.yrs li:last-child{max-width:22ch;margin:0 auto}

.tickets{align-items:center;text-align:center;padding-bottom:40px}
.tiers{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:40px;width:min(760px,100%)}
.tiers li{background:rgba(6,12,28,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:26px 18px;display:flex;flex-direction:column;gap:10px}
.tiers span,.tiers em{font-family:var(--wide);font-size:9px;letter-spacing:.3em;text-transform:uppercase;font-style:normal;color:var(--frost)}
.tiers b{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);font-weight:700}
.tiers .out b{text-decoration:line-through;text-decoration-thickness:1px;opacity:.45}
.tiers .out em{color:var(--ember)}
.actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;justify-content:center}
.btn{font-family:var(--wide);font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;padding:20px 30px 20px 34px;border:1px solid rgba(223,230,242,.5);border-radius:999px;background:rgba(6,12,28,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,box-shadow .4s}
.btn:hover{transform:translateY(-2px);background:rgba(223,230,242,.12)}
.btn.primary{background:linear-gradient(175deg,#ffffff,#b8c6e2 55%,#8ea0c6);color:var(--ink);border-color:transparent;box-shadow:0 10px 40px rgba(130,170,255,.35)}
.btn.primary:hover{box-shadow:0 14px 60px rgba(160,195,255,.6)}
.btn:focus-visible,.bar a:focus-visible{outline:1px solid var(--silver);outline-offset:4px}
.fine{margin-top:22px;font-size:12px;color:var(--frost);opacity:.8}
.foot{margin-top:auto;padding-top:120px;width:100%;display:flex;flex-direction:column;align-items:center;gap:26px}
.toast{font-family:var(--serif);font-size:clamp(16px,1.4vw,19px);letter-spacing:.04em}
.logos{display:flex;gap:34px;align-items:center;justify-content:center;flex-wrap:wrap;opacity:.7}
.logos img{height:22px;width:auto}
.logos img:last-child{height:30px}
.tags{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font-family:var(--wide);font-size:9px;letter-spacing:.28em;text-transform:uppercase}
.tags a{text-decoration:none;opacity:.6}
.tags a:hover{opacity:1}

/* reveal */
.beat > *{opacity:0;transform:translateY(28px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.beat.on > *{opacity:1;transform:none}
.beat.on > *:nth-child(2){transition-delay:.08s}
.beat.on > *:nth-child(3){transition-delay:.16s}
.beat.on > *:nth-child(4){transition-delay:.24s}
.beat.on > *:nth-child(5){transition-delay:.32s}
.hero .hint{transform:translateX(-50%)}
.hero.on .hint{transform:translateX(-50%)}

@media (max-width:720px){
  .bar-mid{display:none}
  .rail{display:none}
  .beat{padding:110px 20px 90px}
  .god.left,.god.right{align-items:flex-start;text-align:left;justify-content:flex-end}
  .god > *{max-width:100%}
  .tiers{grid-template-columns:1fr}
  .tiers li{flex-direction:row;align-items:baseline;justify-content:space-between;padding:18px}
  .tiers li em{display:none}
  .tiers .out em{display:inline}
  .actions{flex-direction:column;width:100%}
  .btn{text-align:center}
  .logos{gap:24px}
}
@media (prefers-reduced-motion:reduce){
  .beat > *{transition:none;opacity:1;transform:none}
  .hint::after{animation:none}
}

/* legibility over the lit scene */
.beat{text-shadow:0 2px 24px rgba(2,5,14,.85)}
.name,.big{text-shadow:none}
.years{justify-content:flex-end;padding-bottom:16vh}
.tickets .tiers li{background:rgba(4,8,20,.82)}
.tickets{background:radial-gradient(60% 50% at 50% 45%,rgba(3,6,16,.55),transparent 75%)}

/* ---------- finishing pass: fixed stage, rest points, timed reveals ---------- */
.track .stop{height:100vh;height:100svh}
.stage{position:fixed;inset:0;z-index:2;pointer-events:none}
.stage .beat{position:absolute;inset:0;min-height:0;height:100%;visibility:hidden;transition:visibility 0s linear .6s}
.stage .beat.on{visibility:visible;transition-delay:0s}
.beat > *{transition:opacity .5s ease,transform .5s ease}
.beat.on > *{transition:opacity 1s cubic-bezier(.2,.7,.2,1) .25s,transform 1.1s cubic-bezier(.2,.7,.2,1) .25s}
.beat.on > *:nth-child(2){transition-delay:.33s}
.beat.on > *:nth-child(3){transition-delay:.41s}
.beat.on > *:nth-child(4){transition-delay:.49s}
.beat.on > *:nth-child(5){transition-delay:.57s}
.tickets{z-index:3}
.tickets a,.bar{pointer-events:auto}

/* scrims: copy always sits on its own dark, away from portraits and the 11 */
.stage .beat::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .6s ease}
.stage .beat.on::before{opacity:1}
.hero::before,.enter::before{background:radial-gradient(46% 42% at 50% 50%,rgba(3,6,16,.7),transparent 80%)}
.god.right::before{background:linear-gradient(to left,rgba(3,6,16,.92) 0%,rgba(3,6,16,.75) 32%,transparent 58%)}
.god.left::before{background:linear-gradient(to right,rgba(3,6,16,.92) 0%,rgba(3,6,16,.75) 32%,transparent 58%)}
.years{align-items:flex-start;text-align:left;justify-content:center;padding-bottom:120px}
.years::before{background:linear-gradient(to right,rgba(3,6,16,.9) 0%,rgba(3,6,16,.7) 30%,transparent 55%)}
.years .yrs li:last-child{margin:0}
.god > *,.years > *{max-width:min(520px,40vw)}
.tickets{background:radial-gradient(70% 60% at 50% 42%,rgba(3,6,16,.78),rgba(3,6,16,.35) 70%,transparent)}

/* sound toggle */
.bar-r{display:flex;align-items:center;gap:10px}
.snd{appearance:none;-webkit-appearance:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--silver);cursor:pointer;display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:10px 16px 10px 14px;border-radius:999px;background:rgba(10,21,48,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .3s,border-color .3s}
.snd:hover{border-color:rgba(223,230,242,.5)}
.snd:focus-visible{outline:1px solid var(--silver);outline-offset:4px}
.eq{display:flex;align-items:flex-end;gap:2px;height:12px}
.eq i{width:2px;height:3px;background:var(--silver);transition:height .3s}
.snd[aria-pressed="true"] .eq i{animation:eq 1.97s ease-in-out infinite}
.snd[aria-pressed="true"] .eq i:nth-child(2){animation-delay:-.5s}
.snd[aria-pressed="true"] .eq i:nth-child(3){animation-delay:-1.1s}
.snd[aria-pressed="true"] .eq i:nth-child(4){animation-delay:-.8s}
@keyframes eq{0%,100%{height:3px}25%{height:11px}50%{height:6px}75%{height:12px}}

@media (max-width:720px){
  .snd-l{display:none}
  .snd{padding:10px 13px}
  .bar-cta{padding:10px 14px 10px 17px}
  .god.left,.god.right,.years{justify-content:flex-end;padding-bottom:64px}
  .god > *,.years > *{max-width:100%}
  .god.left::before,.god.right::before,.years::before{background:linear-gradient(to top,rgba(3,6,16,.95) 0%,rgba(3,6,16,.8) 30%,transparent 52%)}
  .name{font-size:clamp(40px,12vw,56px)}
}
@media (prefers-reduced-motion:reduce){
  .snd[aria-pressed="true"] .eq i{animation:none;height:8px}
}

/* tall narrow windows stack like the phone: niche above, copy below */
@media (min-width:721px) and (max-aspect-ratio:11/10){
  .god.left,.god.right,.years{align-items:flex-start;text-align:left;justify-content:flex-end;padding-bottom:64px}
  .god > *,.years > *{max-width:100%}
  .god.left::before,.god.right::before,.years::before{background:linear-gradient(to top,rgba(3,6,16,.95) 0%,rgba(3,6,16,.8) 30%,transparent 52%)}
}

/* ---------- entry gate: two stone doors with light at the seam ---------- */
html.gated,html.gated body{overflow:hidden;height:100%}
.gate{position:fixed;inset:0;z-index:20;display:grid;place-items:center;overflow:hidden;background:var(--ink);--p:0}
.gate[hidden]{display:none}
.door{position:absolute;top:0;bottom:0;width:50.5%;background:
  linear-gradient(180deg,rgba(2,4,10,.35),rgba(2,4,10,.9)),
  linear-gradient(rgba(3,6,14,.6),rgba(3,6,14,.6)),
  url(brand/door-stone.webp) center/cover;
  transition:transform 1.2s cubic-bezier(.7,0,.2,1)}
.door.l{left:0;background-position:left center,0 0,left center;box-shadow:inset -1px 0 0 rgba(223,230,242,.25)}
.door.r{right:0;background-position:right center,0 0,right center;box-shadow:inset 1px 0 0 rgba(223,230,242,.25)}
.seam{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(transparent,#dfe8ff 30%,#dfe8ff 70%,transparent);box-shadow:0 0 30px 6px rgba(150,185,255,.45);animation:breathe 4.5s ease-in-out infinite;transition:width 1.2s cubic-bezier(.7,0,.2,1),opacity 1.2s ease}
.gate-in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;padding:0 16px;transition:opacity .5s ease,transform 1.2s ease}
/* the seam of light parts around the date and count: a soft pool of the door's dark sits behind them */
.gate-under{position:relative;isolation:isolate;margin-top:22px;padding:12px 30px 14px;display:flex;flex-direction:column;align-items:center}
.gate-under::before{content:"";position:absolute;inset:-6px -10px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(3,5,12,.97),rgba(3,5,12,.9) 62%,rgba(3,5,12,0))}
.gate-k{display:flex;align-items:center;gap:14px;margin-top:0;font-family:var(--wide);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--silver);padding-left:.34em}
.gate-k .dot{width:5px;height:5px;transform:rotate(45deg);background:var(--silver);opacity:.8}
.gate-s{font-family:var(--wide);font-size:9px;letter-spacing:.36em;text-transform:uppercase;color:var(--silver);opacity:.7;padding-left:.36em}
.gate-btn{appearance:none;-webkit-appearance:none;cursor:pointer;color:var(--silver);font-family:var(--serif);font-weight:700;font-size:clamp(15px,1.4vw,18px);letter-spacing:.12em;text-transform:uppercase;width:min(300px,78vw);height:min(380px,52vh);border:1px solid rgba(223,230,242,.45);border-radius:999px 999px 4px 4px;background:radial-gradient(80% 60% at 50% 30%,rgba(150,185,255,.18),rgba(4,8,20,.88) 70%);display:flex;align-items:flex-end;justify-content:center;padding:0 22px 44px;line-height:1.5;animation:doorglow 4.5s ease-in-out infinite;transition:border-color .4s,background .4s}
.gate-btn span{max-width:12ch}
.gate-btn:hover{border-color:var(--silver);background:radial-gradient(80% 60% at 50% 30%,rgba(170,200,255,.28),rgba(4,8,20,.85) 70%)}
.gate-btn:focus-visible{outline:1px solid var(--silver);outline-offset:6px}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes doorglow{0%,100%{box-shadow:0 0 30px rgba(130,170,255,.12),inset 0 0 40px rgba(130,170,255,.06)}50%{box-shadow:0 0 70px rgba(150,190,255,.32),inset 0 0 60px rgba(150,190,255,.14)}}
.gate.opening .door.l{transform:translateX(-101%)}
.gate.opening .door.r{transform:translateX(101%)}
.gate.opening .gate-in{opacity:0;transform:scale(1.08)}
.gate.opening{pointer-events:none}
@media (prefers-reduced-motion:reduce){.seam,.gate-btn{animation:none}}

/* ---------- carved names ---------- */
.name{filter:drop-shadow(0 -1px 0 rgba(255,255,255,.45)) drop-shadow(0 2px 0 rgba(20,28,52,.9)) drop-shadow(0 10px 20px rgba(0,0,0,.6))}

/* ---------- loading: the official mark as uncut stone, cold light rising through it from the foot as the
   house loads (--p, 0 to 1, set by ui.js); at 1 it stands lit, then shrinks into the arch of the Enter door ---------- */
.gate-cell{display:grid;place-items:center;grid-template-columns:minmax(0,1fr);width:min(300px,78vw);height:min(380px,52vh)}
.gate-cell > *{grid-area:1/1}
.gate-mark{position:relative;width:min(400px,74vw,46vh);pointer-events:none;
  transition:width 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.75))}
/* a pool of cold light behind the mark that grows with it */
.gate-mark::before{content:"";position:absolute;inset:-35%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(150,185,255,.22),rgba(120,160,255,.08) 55%,transparent);
  opacity:calc(.15 + var(--p) * .85);transform:scale(calc(.8 + var(--p) * .2))}
.gate-mark .logo-crop + .logo-crop{position:absolute;inset:0}
.gate-mark .dark img{filter:brightness(.2) saturate(.4)}
.gate-mark .lit{-webkit-mask-image:linear-gradient(to top,#000 calc(var(--p) * 100%),transparent calc(var(--p) * 100% + 5%));
  mask-image:linear-gradient(to top,#000 calc(var(--p) * 100%),transparent calc(var(--p) * 100% + 5%))}
/* the rising edge of the light, brighter, only inside the letters */
.gate-mark .edge img{filter:brightness(1.9) saturate(.6)}
.gate-mark .edge{-webkit-mask-image:linear-gradient(to top,transparent calc(var(--p) * 100% - 9%),#000 calc(var(--p) * 100%),transparent calc(var(--p) * 100% + 4%));
  mask-image:linear-gradient(to top,transparent calc(var(--p) * 100% - 9%),#000 calc(var(--p) * 100%),transparent calc(var(--p) * 100% + 4%));
  transition:opacity .8s ease}
.gate.ready .gate-mark .edge{opacity:0}
.gate.ready .gate-mark{width:min(186px,48vw);transform:translateY(calc(min(380px,52vh) * -.11))}
.gate-foot{display:grid;margin-top:16px}
.gate-foot > *{grid-area:1/1;justify-self:center}
.gate-load{display:flex;align-items:baseline;gap:12px;font-family:var(--wide);font-size:9px;letter-spacing:.36em;text-transform:uppercase;color:var(--frost);transition:opacity .5s ease}
.gate-load span{animation:breathe 2.4s ease-in-out infinite}
.gate-load b{font-weight:400;color:var(--silver);min-width:4ch;text-align:left;font-variant-numeric:tabular-nums;letter-spacing:.2em}
.gate:not(.ready) .gate-btn{opacity:0;transform:translateY(10px);pointer-events:none}
.gate .gate-btn{transition:opacity .9s ease .25s,transform .9s cubic-bezier(.2,.7,.2,1) .25s,border-color .4s,background .4s}
.gate:not(.ready) .gate-s{opacity:0}
.gate .gate-s{transition:opacity .9s ease .4s}
.gate.ready .gate-load{opacity:0;pointer-events:none}
/* the bar and rail stay hidden until the doors open */
.bar,.rail{transition:opacity .8s ease,visibility 0s linear 0s}
html.gated .bar,html.gated .rail{opacity:0;visibility:hidden;transition:none}
@media (prefers-reduced-motion:reduce){.gate-load span{animation:none}.gate-mark{transition:none}}

/* the light at the opening: a soft ellipse that swells past every edge, never a hard-edged bar */
.gate.opening .seam{width:2px;opacity:1;box-shadow:none;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(235,242,255,.95),rgba(170,200,255,.55) 35%,rgba(120,160,255,.18) 65%,transparent);
  animation:flood 1.25s cubic-bezier(.5,0,.3,1) forwards}
@keyframes flood{
  0%{width:2px;opacity:1}
  22%{width:170vw;opacity:.95}
  100%{width:320vw;opacity:0}}
/* a wash over the whole screen under the flood, so the light reaches every edge */
.gate.opening::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,rgba(225,235,255,.6),rgba(160,190,255,.3) 55%,rgba(120,150,230,.14));
  animation:wash 1.25s cubic-bezier(.4,0,.3,1) forwards}
@keyframes wash{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
/* the doors' inner edges go soft as they part, so no hard line runs down the light */
.gate.opening .door.l{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 140px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 140px),transparent)}
.gate.opening .door.r{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 140px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 140px),transparent)}

/* the bar is see-through, so whatever scrolls under it (the tickets on a short phone) fades out instead of colliding */
.bar::before{content:"";position:absolute;inset:0 0 -36px;z-index:-1;pointer-events:none;background:linear-gradient(rgba(3,6,16,.92),rgba(3,6,16,.62) 58%,rgba(3,6,16,0))}
.bar::before{transition:background .35s ease,inset .35s ease}
.past .bar::before{inset:0;background:rgba(3,6,16,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(223,230,242,.12)}

/* the headliner's eyebrow takes two set lines, never a ragged wrap; quotes balance so no word sits alone */
.kicker b{display:block;font-weight:inherit;color:var(--silver);margin-bottom:10px}
.said{text-wrap:balance}