@font-face { font-family: "Mattone"; src: url("../fonts/mattone/mattone-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Ronzino"; src: url("../fonts/ronzino/ronzino-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ronzino"; src: url("../fonts/ronzino/ronzino-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Ronzino"; src: url("../fonts/ronzino/ronzino-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Mona Sans stays only for the stage screen and tower texture painted inside the model */
@font-face { font-family: "Mona Sans"; src: url("../fonts/mona-sans/mona-sans-vf.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; }

:root {
  --ink: #07170c;
  --ink2: #0d2414;
  --paper: #ffffff;
  --dim: #ffffff;
  --faint: rgba(255, 255, 255, .72);
  --line: rgba(255, 255, 255, .2);
  /* five gels: one per spot on stage, per topic, per block of seats */
  /* Spot On green, taken from the green in the Spot On 2 post Sanuja sent (13 Oct), in five close shades */
  --spot: #3a9a26;
  --g1: #a6d38a;
  /* r115: one Spot On green for every light, gel and accent; the ground is a deep shade of the same green */
  --g2: #a6d38a;
  --g3: #a6d38a;
  --g4: #a6d38a;
  --g5: #a6d38a;
  --brand: #2d4f4c;
  --accent: #ffffff; /* r124: the ground is the Spot On green, so small marks and gels on the page take white and a light tint of it */
  --warm: #f1dcb0;
  --wallbg: var(--brand);
  /* r100 (Sanuja, 13 Oct): the page ground is the TFOB main green; hero buttons take the gold accent (#D6BC88, accent colour 2) */
  --bg: #2d4f4c;
  --btn: #d6bc88;
  /* r106: one box colour everywhere, taken from the brand story list */
  --box: rgba(36, 64, 62, .9); --box-hi: rgba(28, 50, 48, .96);
  --g: 4vw;
  --label: max(11px, .8vw);
  --body: max(16px, 1.12vw);
  --big-body: max(19px, 1.85vw);
  --st: 4.4vw;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --hb: 76px;
  color-scheme: dark;
}
@media (max-width: 767px) {
  :root { --g: 6vw; --label: max(11px, 2.9vw); --big-body: max(19px, 5.3vw); --st: 7.4vw; }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--paper);
  font-family: "Ronzino", system-ui, sans-serif;
  font-size: var(--body); line-height: 1.45; font-weight: 400;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--ink); }
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.display {
  font-family: "Mattone", sans-serif; font-weight: 900;
  text-transform: uppercase; line-height: .86; letter-spacing: -.015em;
}
/* statements: Light wedge's title, a tight medium grotesk in sentence case, one span per line */
.st { font: 500 var(--st)/.98 "Ronzino", sans-serif; letter-spacing: -.045em; text-transform: none; }
.stl { display: block; white-space: nowrap; }
.label {
  display: flex; width: fit-content; gap: 1em; align-items: baseline; padding: .45em .8em; margin-left: -.8em; background: var(--box);
  font-size: var(--label); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; line-height: 1.3; color: var(--paper);
}
.num { color: var(--paper); }
.body { font-size: var(--body); line-height: 1.55; color: var(--dim); max-width: 34em; }

/* masks for reveals */
.ln, .mk, .clk { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.ln > span, .mk > span, .clk > span { display: block; }
.sl { padding-bottom: .04em; }

/* buttons: one solid block, no frames */
.btn {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.6em; overflow: hidden; isolation: isolate;
  background: var(--btn); color: var(--ink);
  font-size: max(13px, .92vw); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; line-height: 1;
}
.btn::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); z-index: -1; }
.btn:hover::after, .btn:focus-visible::after { transform: scaleY(1); }
.btn--sm { min-height: 44px; padding: 0 1.3em; font-size: max(12px, .82vw); }

/* ---------- fixed layers ---------- */
#room { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; background: var(--bg); }
.fallback { position: fixed; inset: 0; z-index: 0; display: none; overflow: hidden; background: var(--bg); }
.fallback img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(1.1) brightness(.9); }
.fallback__spot { position: absolute; inset: 0; background: radial-gradient(circle at var(--fx, 50%) var(--fy, 55%), rgba(58,154,38,.22) 0 9vmax, transparent 14vmax, rgba(45, 79, 76,.62) 34vmax); }
.no-gl #room { display: none; }
.no-gl .fallback { display: block; }
.scrim { position: fixed; inset: 0; z-index: 1; background: var(--bg); opacity: 0; pointer-events: none; will-change: opacity; }
.rm .scrim { opacity: .5 !important; }
.led-src { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; z-index: -1; }

main { position: relative; z-index: 2; }

/* ---------- header: a solid ceiling band ---------- */
.hdr {
  position: fixed; z-index: 10; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2.2vw;
  padding: 1.25vw var(--g) 1vw; pointer-events: none;
}
.hdr::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 4vh); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(45, 79, 76,1) 0%, rgba(45, 79, 76,.99) 66%, rgba(45, 79, 76,.55) 84%, rgba(45, 79, 76,0) 100%);
}
.hdr > * { pointer-events: auto; }
.hdr > .btn { justify-self: end; grid-column: 3; }
.hdr__logo { display: inline-flex; align-items: center; min-height: 44px; }
.hdr__logo img { height: max(24px, 2.2vw); width: auto; }
.hdr__meta { font-size: var(--label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: .9em; }
.hdr__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- sections ---------- */
section { position: relative; padding: 0 var(--g); }

/* hero: the name, the facts, one button. The model takes the right. */
.hero { height: 100vh; height: 100svh; min-height: 560px; display: flex; align-items: flex-end; padding-bottom: 4.6vw; }
.hero__copy { display: grid; justify-items: start; }
.hero__by { font-size: var(--label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 1.3vw; }
.hero__mark { font-size: 8.6vw; line-height: .8; letter-spacing: -.02em; }
.hero__v { color: var(--paper); }
/* poster lockup: SPOT in gold serif, a big italic On overlapping it, a superscript 2 */
.lk { font-size: 8.6vw; line-height: 1; letter-spacing: 0; text-transform: none; }
.lk .ln { overflow: visible; }
.lk__a { position: relative; z-index: 1; }
.lk__spot { font: 600 1em/.82 "Cormorant Garamond", Georgia, serif; text-transform: uppercase; letter-spacing: -.035em; color: #fff; }
.lk__b { position: relative; z-index: 2; margin-top: -.42em; padding-left: .9em; }
.lk__b > span { display: flex; align-items: flex-start; }
.lk__on { font: italic 500 1.7em/.9 "Playfair Display", Georgia, serif; letter-spacing: -.04em; color: #fff; padding-right: .06em; }
.lk__v { font: 600 .62em/1 "Cormorant Garamond", Georgia, serif; color: #fff; white-space: nowrap; margin-top: .15em; margin-left: -.05em; }
.facts { display: flex; flex-wrap: wrap; margin-top: 2vw; font-size: max(17px, 1.5vw); font-weight: 500; line-height: 1.2; letter-spacing: -.005em; }
.facts li { padding: 0 1.3vw; border-left: 1px solid var(--line); }
.facts li:first-child { padding-left: 0; border-left: 0; }
.hero__btn { margin-top: 2.1vw; min-height: 54px; font-size: max(14px, 1vw); }
/* r106: every button is gold (--btn); green stays on the dot, numbers and 400+ */
.hint-touch { display: none; }
@media (hover: none) { .hint-fine { display: none; } .hint-touch { display: inline; } }

/* why */
.why { min-height: 0; padding-top: 18vh; padding-bottom: 8vh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.6vw; align-content: start; }
.why .label { grid-column: 1 / -1; margin-bottom: 3vw; }
.why__a { grid-column: 1 / -1; --st: 6.4vw; }
.kick { display: block; font-size: var(--big-body); font-weight: 520; line-height: 1.12; letter-spacing: -.012em; color: var(--dim); }
.why__b { grid-column: 7 / 12; margin-top: 4vw; font-size: var(--big-body); font-weight: 500; line-height: 1.14; letter-spacing: -.012em; color: var(--paper); }
.why__b, .why__copy { background: var(--box); padding: 1.6vw 1.8vw; margin-left: -1.8vw; }
.why__b { padding-bottom: 0; }
.why__copy { grid-column: 7 / 12; margin-top: 0; display: grid; gap: 1.2em; padding-top: 1.4vw; }
.why__hl { font-size: max(16px, 1.5vw); line-height: 1.05; letter-spacing: -.01em; color: var(--paper); margin-bottom: .45em; }
.why__short { display: none; }

/* about: the statement and the evening, held together on one screen while the lights converge on the stage */
.about { padding: 0; }
.about__in { min-height: 100vh; min-height: 100svh; padding: 16vh var(--g) 7vh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.6vw; align-content: space-between; row-gap: 4vw; }
.about .label { grid-column: 1 / -1; margin-bottom: -2vw; }
.about__h { grid-column: 1 / -1; --st: 5.4vw; }
.about__block { grid-column: 6 / 13; display: grid; grid-template-columns: 1fr; gap: 1.8vw 2.4vw; align-items: end; padding: 2.2vw 2.4vw 2.4vw; background: var(--box); }
.about__p { grid-column: 1 / -1; font-size: var(--big-body); line-height: 1.18; font-weight: 500; letter-spacing: -.02em; color: var(--paper); }
.about__run { display: flex; gap: 2.4vw; }
.about__run li { display: flex; align-items: center; gap: .8vw; font-size: var(--label); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); line-height: 1.25; max-width: 15em; }
.about__n { font-size: 3.4vw; line-height: .8; color: var(--paper); }

/* ---------- five topics: the pinned set piece ---------- */
.beats { padding: 0; }
.beats__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; padding: 0 var(--g); }
.beats__panel { position: absolute; left: 50%; transform: translateX(-50%); width: min(44em, calc(100% - 2 * var(--g))); top: 30vh; display: grid; justify-items: center; text-align: center; gap: 1vw; padding: 1.8vw 2.4vw 2vw; background: var(--box); visibility: hidden; }
.beats__then { font-size: var(--label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); }
.beats__pw { font-size: 4.6vw; overflow: hidden; padding-bottom: .04em; }
.beats__pw > span { display: block; }
.beats__pp { max-width: 30em; font-size: max(16px, 1.15vw); color: var(--paper); }

.topics { position: absolute; left: var(--g); right: var(--g); bottom: 5vh; height: 27vh; display: flex; visibility: hidden; }
.topic { flex: 1 1 0; min-width: 0; transition: flex-grow .7s var(--ease); }
.topic.is-open { flex-grow: 1.8; }
.topic__b {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; min-height: 44px;
  padding: 1.2vw 1.3vw 1.3vw; overflow: hidden; isolation: isolate;
  background: var(--box); border-right: 1px solid var(--line);
  color: var(--paper); transition: color .45s var(--ease), background-color .45s var(--ease);
}
.topic:last-child .topic__b { border-right: 0; }
.topic__fill { display: none; position: absolute; inset: 0; z-index: -1; background: var(--gel); transform: scaleY(0); transform-origin: bottom; transition: transform .65s var(--ease); }
.topic__n { position: absolute; top: 1.1vw; left: 1.3vw; font-size: var(--label); font-weight: 650; letter-spacing: .08em; color: var(--paper); transition: color .45s var(--ease); }
.topic__w { display: block; font-size: 1.35vw; line-height: .9; white-space: nowrap; }
.topic__p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.topic__p > span { overflow: hidden; display: block; max-width: 22em; font-size: max(15px, 1.05vw); line-height: 1.35; font-weight: 500; }
.topic.is-open .topic__b { color: var(--paper); background: var(--box-hi); }
.topic.is-open .topic__fill { transform: scaleY(1); }
.topic.is-open .topic__n { color: var(--paper); }
.topic.is-open .topic__p { grid-template-rows: 1fr; }
.topic.is-open .topic__p > span { padding-top: .7vw; }
.topics.is-done .topic__fill { transform: scaleY(.06); }

/* ---------- brands ---------- */
.brands { min-height: 100vh; min-height: 100svh; padding-top: 13vh; padding-bottom: 5vh; display: flex; flex-direction: column; }
.brands__in { flex: 1 1 auto; display: flex; flex-direction: column; }
.brands .label { margin-bottom: 2vw; }
.brands__h { max-width: 11em; text-wrap: balance; }
.spots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2vw; margin: 7vh 0; }
.spot { display: grid; justify-items: center; gap: 1vw; text-align: center; min-height: 44px; }
.spot__mark { width: 6vw; aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--line); transition: background-color .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
.spot__txt { display: grid; gap: .2em; }
.spot__k { font-size: var(--label); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); }
.spot__tba { font-size: var(--label); font-weight: 500; letter-spacing: .04em; color: var(--dim); }
.spot:hover .spot__mark, .spot.is-on .spot__mark { background: var(--gel); border-color: var(--gel); box-shadow: 0 0 0 .6vw rgba(255,255,255,.06); }
/* in the room, the five labels sit on their pools */
.spots--3d { position: fixed; inset: 0; z-index: 3; margin: 0; gap: 0; display: block; pointer-events: none; opacity: 0; visibility: hidden; }
.spots--3d .spot {
  position: absolute; left: 0; top: 0; min-height: 44px; padding: .6vw .95vw; gap: .2em; align-content: center; justify-items: start; text-align: left;
  background: var(--box); border-left: 3px solid var(--gel);
  transition: background-color .4s var(--ease), color .4s var(--ease), opacity .3s var(--ease); will-change: transform;
}
.spots--3d .spot__mark { display: none; }
.spots--3d.is-live .spot { pointer-events: auto; }
.spots--3d .spot.is-hid { opacity: 0; pointer-events: none; }
.spots--3d .spot:hover, .spots--3d .spot.is-on { background: var(--box-hi); }
.spots--3d .spot:hover .spot__k, .spots--3d .spot.is-on .spot__k, .spots--3d .spot:hover .spot__tba, .spots--3d .spot.is-on .spot__tba { color: var(--paper); }
.drop { margin-top: auto; align-self: flex-end; display: grid; justify-items: start; gap: 1.1vw; width: 30vw; padding: 1.6vw 1.8vw; background: var(--box); }
.seq { display: flex; gap: .6vw; }
.seq i { width: 2.6vw; height: 4px; background: var(--line); transition: background-color .5s var(--ease); }
.seq i.is-on { background: var(--gel); }
.drop__k { font-size: 1.8vw; line-height: .9; color: var(--paper); }
.drop__s { color: var(--dim); max-width: 24em; }
.drop .btn { margin-top: .6vw; }

/* ---------- who ---------- */
.who { padding-top: 16vh; padding-bottom: 10vh; }
.who .label { margin-bottom: 4vw; }
.who__list { width: 70vw; }
.who__i {
  position: relative; display: grid; grid-template-columns: 7vw 1fr; align-items: start; gap: 1.4vw;
  padding: 1.6vw 2vw 1.8vw; margin: 0 0 7vh -2vw; cursor: default; outline-offset: -2px;
  color: #fff; background: var(--box);
  transition: color .5s var(--ease), background-color .5s var(--ease);
}
.who__i::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--gel); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.who__n { font-size: 2.8vw; line-height: .86; color: #fff; -webkit-text-stroke: 0 transparent; transition: color .5s var(--ease), -webkit-text-stroke-color .5s; }
.who__t { font-size: 2.9vw; line-height: 1; font-weight: 500; letter-spacing: -.04em; }
.who__i.is-on { color: var(--paper); background: var(--box-hi); }
.who__i::before { display: none; }
.who__i.is-on::before { transform: scaleX(1); }
.who__i.is-on .who__n { color: var(--paper); -webkit-text-stroke-color: var(--paper); }

/* ---------- agenda: main events only, one clock ---------- */
.agenda { height: 175vh; padding: 0; }
.agenda__in { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 18vh var(--g) 8vh; display: grid; grid-template-columns: 34vw 1fr; column-gap: 5vw; }
.agenda__side { min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 4vw; }
.agenda__side .label { margin-bottom: 2vw; }
.agenda__h { margin-top: 1.4vw; }
.agenda__note { margin-top: 1.4vw; font-size: var(--label); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--dim); }
.agenda__clock { display: flex; align-items: flex-start; gap: .6vw; font-size: 7vw; line-height: .8; font-variant-numeric: tabular-nums; color: var(--clock, var(--paper)); transition: color .5s var(--ease); }
.agenda__pm { font-family: "Ronzino", sans-serif; font-size: var(--label); letter-spacing: .08em; font-weight: 500; line-height: 1; margin-top: .4vw; color: var(--dim); }
.agenda__what { margin-top: 1.2vw; font-size: var(--big-body); line-height: 1.1; font-weight: 500; letter-spacing: -.012em; color: var(--paper); }
.ro { --cols: max(10.5vw, calc(var(--label) * 10.4)) minmax(0, 1fr) 40%; position: relative; align-self: end; padding: 1.4vw 1.6vw 1.6vw; background: var(--box); }
.ro__axis { display: grid; grid-template-columns: var(--cols); column-gap: 1.6vw; padding-bottom: .8vw; }
.ro__scale { grid-column: 3; position: relative; height: 1.3em; font-size: var(--label); font-weight: 600; letter-spacing: .06em; color: var(--faint); }
.ro__scale span { position: absolute; left: calc(var(--x) * 100%); top: 0; white-space: nowrap; }
.ro__scale span::before { content: ""; position: absolute; left: 0; top: 1.5em; width: 1px; height: calc(var(--rows-h, 400px) + .6vw); background: rgba(255,255,255,.08); }
.ro__light { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 0; pointer-events: none; background: rgba(255, 255, 255, .08); transform-origin: top; will-change: transform, height; }
.ro__rows { position: relative; z-index: 1; border-top: 1px solid var(--line); }
.ro__row {
  position: relative; display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: 1.6vw;
  min-height: max(5vh, 42px); padding-block: .45em; border-bottom: 1px solid var(--line); color: var(--dim); transition: color .4s var(--ease); cursor: pointer;
}
.ro__t { font-size: var(--label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; padding-left: 1vw; white-space: nowrap; }
.ro__w { font-size: max(16px, 1.42vw); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }
.ro__bar { position: relative; height: 60%; min-height: 14px; background: rgba(255,255,255,.07); }
.ro__bar i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) / 270 * 100%); width: calc(var(--d) / 270 * 100%); background: var(--gel); opacity: .7; transform-origin: left; transition: opacity .4s var(--ease); }
.ro__sub { margin-left: .5em; font-size: var(--label); letter-spacing: .07em; text-transform: uppercase; opacity: .7; }
.ro__row.is-now, .ro__row:hover { color: var(--paper); }
.ro__row.is-now .ro__bar i, .ro__row:hover .ro__bar i { opacity: 1; }
.ro__row.is-now::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: var(--gel); }

/* ---------- first edition: the photo wall ---------- */
.recap { padding: 0; }
.wsec { height: 240vh; position: relative; }
.wsec__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: linear-gradient(transparent 0 var(--hb), var(--wallbg) var(--hb)); }
.wall { position: absolute; left: 0; right: 0; top: var(--hb); bottom: var(--band, 30vh); overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; outline-offset: -4px; }
.wall.is-live { cursor: grab; }
.wall.is-drag { cursor: grabbing; }
.wall__cam { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.wall--flat .wall__cam { transform-style: flat; }
.tile { position: absolute; left: 0; top: 0; background: #245f18; visibility: hidden; cursor: pointer; backface-visibility: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.tile.is-front { outline: 3px solid var(--accent); outline-offset: -3px; }
.wsec__band {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4vw var(--g) 1.8vw;
  background: var(--box);
}
.wsec__band .label { margin-bottom: .6vw; }
.wsec__row { display: flex; align-items: flex-end; gap: 3vw; }
.recap__big { font-size: 7.4vw; line-height: .78; color: var(--paper); font-variant-numeric: tabular-nums; display: flex; }
.recap__big .js-count { display: inline-block; min-width: 3ch; text-align: right; }
.recap__plus { color: var(--paper); }
.wsec__txt { display: grid; gap: .9vw; padding-bottom: .4vw; }
.recap__line { color: var(--paper); font-size: var(--big-body); line-height: 1.1; font-weight: 560; max-width: 16em; }
.wall__hint { display: flex; align-items: center; gap: .8em; font-size: var(--label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.wall__hand { width: 34px; height: 20px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--accent); position: relative; flex: none; }
.wall__hand::after { content: ""; position: absolute; top: 6px; left: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: nudge 2.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }

/* reel and partners */
.recap__b { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.6vw; align-items: center; padding: 6vh var(--g) 8vh; }
.reel { position: relative; grid-column: 2 / 7; }
.reel__v { width: 100%; aspect-ratio: 1; object-fit: cover; background: #000; }
.reel figcaption { margin-top: .9vw; font-size: var(--label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.snd {
  position: absolute; right: 1vw; top: 1vw; display: inline-flex; align-items: center; gap: .55em; min-height: 44px; padding: 0 1.1em 0 .9em;
  background: rgba(45, 79, 76,.78); color: var(--paper);
  font-size: max(12px, .82vw); font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.snd__i { width: 22px; height: 22px; }
.snd__on { display: none; }
.snd[aria-pressed="true"] { background: var(--btn); color: var(--ink); }
.snd[aria-pressed="true"] .snd__on { display: inline; }
.snd[aria-pressed="true"] .snd__off { display: none; }
.snd:hover { background: var(--paper); color: var(--ink); }
.partners { grid-column: 8 / 12; display: grid; gap: 1.4vw; }
.partners__k { justify-self: start; font-size: var(--label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); background: var(--box); padding: .55em .9em; position: relative; z-index: 1; }
.partners__row { display: flex; gap: 1vw; align-items: stretch; }
.plate { display: grid; place-items: center; flex: 1 1 0; padding: 1.6vw 1.4vw; background: #fff; }
.plate img { height: max(40px, 3.6vw); width: auto; }

/* viewer */
.viewer { position: fixed; inset: 0; z-index: 30; }
.viewer[hidden] { display: none; }
.viewer__bg { position: absolute; inset: 0; background: rgba(45, 79, 76, .97); }
.viewer__fig { position: absolute; margin: 0; background: #000 center / cover no-repeat; will-change: transform; }
.viewer__img { width: 100%; height: 100%; object-fit: cover; }
.viewer__bar { position: absolute; left: var(--g); right: var(--g); bottom: 2.6vw; display: flex; justify-content: space-between; align-items: center; gap: 2vw; border-top: 1px solid var(--line); padding-top: .9vw; }
.viewer__n { font-size: var(--label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--paper); font-variant-numeric: tabular-nums; }
.viewer__k { color: var(--dim); margin-left: 1.4em; text-transform: none; letter-spacing: 0; font-weight: 450; font-size: max(14px, .95vw); }
.viewer__nav { display: flex; gap: .4vw; }
.viewer__b { min-height: 44px; padding: 0 1.1em; font-size: var(--label); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); transition: color .3s var(--ease), border-color .3s var(--ease); }
.viewer__b:hover, .viewer__b:focus-visible { color: var(--paper); border-color: var(--paper); }
.viewer__b--x { color: var(--ink); background: var(--btn); border-color: var(--btn); }
.viewer__b--x:hover, .viewer__b--x:focus-visible { color: var(--ink); background: var(--paper); }
.is-viewing .hdr { visibility: hidden; }

/* ---------- finale ---------- */
/* a long scroll run with the copy held on screen: the camera drops into a seat, the house goes dark, the stage lights up, then the tickets */
.finale { position: relative; height: 180vh; text-align: center; }
.finale__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 0 7vh; }
.rm .finale, .no-gl .finale { height: auto; }
.rm .finale__pin, .no-gl .finale__pin { position: static; min-height: 100vh; min-height: 100svh; height: auto; padding-top: 12vh; }
.rm.is-fin .scrim { opacity: 0 !important; }
.finale__copy { display: flex; flex-direction: column; align-items: center; }
.finale__stage { display: none; }
.finale__k { font-size: var(--label); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); margin-bottom: 1.4vw; padding: .5em .9em; background: var(--box); font-variant-numeric: tabular-nums; }
.finale__k .js-lit { color: var(--paper); }
/* at the very end the date on the stage screen says it; the name tag steps aside so the screen stays clear */
.finale__k { transition: clip-path .5s var(--ease); }
.is-end .finale__k { clip-path: inset(0 0 100% 0); }
.finale__cta { position: relative; display: inline-grid; justify-items: center; gap: .8vw; padding: 1.5vw 3vw 1.4vw; isolation: isolate; overflow: hidden; background: var(--btn); color: var(--ink); transition: transform .25s var(--ease); }
.finale__cta::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); z-index: -1; }
.finale__cta:hover::after, .finale__cta:focus-visible::after { transform: scaleY(1); }
.finale__cta:active { transform: scale(.985); }
.finale__cta-t { display: block; font-size: 4.6vw; line-height: .86; }
.finale__go { font-size: var(--label); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.finale__go::after { content: " \2192"; }
.finale__seats { color: var(--paper); max-width: 34em; margin-top: 1.4vw; padding: .7em 1.1em; background: var(--box); font-size: max(16px, 1.15vw); font-weight: 500; text-wrap: balance; }

/* ---------- footer: the name in the dark, found by a spotlight that lights it in the five gels ---------- */
@property --sr { syntax: '<length>'; inherits: true; initial-value: 22vw; }
.foot { position: relative; z-index: 2; background: var(--bg); color: var(--paper); padding: 3vw var(--g) 1.6vw; --sx: 50%; --sy: 50%; --sr: 22vw; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 9vh; pointer-events: none; background: linear-gradient(rgba(45, 79, 76,0), rgba(45, 79, 76,.75) 60%, var(--bg)); }
.foot__mark { position: relative; display: block; line-height: .8; overflow: hidden; padding-top: .04em; }
.foot__w { display: flex; justify-content: space-between; font-size: var(--fw, 19vw); white-space: nowrap; }
.foot__w > span { display: block; line-height: .8; color: #fff; }
.foot__lit { position: absolute; left: 0; right: 0; top: .04em; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--sr) at var(--sx) var(--sy), #000 0, #000 45%, transparent 100%);
  mask-image: radial-gradient(circle var(--sr) at var(--sx) var(--sy), #000 0, #000 45%, transparent 100%);
  transition: --sr .6s; }
.foot__lit { background: linear-gradient(100deg, var(--g1) 0%, var(--g3) 28%, var(--g2) 52%, var(--g4) 76%, var(--g5) 100%); -webkit-background-clip: text; background-clip: text; }
.foot__lit > span { color: transparent; }
.foot__mark:hover, .foot__mark:focus-visible { --sr: 140vw; }
/* r127: the footer TFOB asked for (Sanuja #188): brand and socials, then get in touch, then the legal row */
.foot__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4vw; margin-top: 3.2vw; padding-top: 2.6vw; border-top: 1px solid var(--line); }
.foot__brand img { height: max(48px, 4.4vw); width: auto; }
.foot__about { margin-top: 1.4vw; max-width: 24em; font-size: max(15px, 1.05vw); line-height: 1.5; color: var(--faint); }
.foot__soc { list-style: none; margin: 1.6vw 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.foot__soc a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--paper); transition: color .3s; }
.foot__soc svg { width: 30px; height: 30px; }
.foot__soc a:hover { color: var(--btn); }
.foot__k { font-size: var(--label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--btn); }
.foot__dl { margin: 1.4vw 0 0; display: grid; gap: 1.2vw; }
.foot__dl dt { font-size: var(--label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.foot__dl dd { margin: .3em 0 0; display: grid; justify-items: start; font-size: max(16px, 1.15vw); line-height: 1.4; }
.foot__dl a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .25em; transition: text-decoration-color .3s, color .3s; }
.foot__dl a:hover { color: var(--btn); text-decoration-color: currentColor; }
.foot__row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 2.4vw; margin-top: 3vw; padding-top: 1.2vw; border-top: 1px solid var(--line); font-size: max(14px, .95vw); font-weight: 500; }
.foot__legal p { font-size: max(13px, .85vw); color: var(--faint); line-height: 1.5; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 1.8vw; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: max(14px, .95vw); }
.foot__links a:hover { color: var(--btn); }
.foot__dev { font-size: var(--label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.foot__dev a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--accent); }
.foot__dev a:hover { color: var(--btn); }
.foot__row img { height: max(26px, 2.2vw); width: auto; }
.foot__top { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: var(--label); }
.foot__top::after { content: " \2191"; margin-left: .4em; }
.foot a:focus-visible { outline-color: var(--paper); }

/* ---------- phone ---------- */
@media (max-width: 767px) {
  :root { --hb: 64px; }
  .hdr { padding-top: 3.6vw; padding-bottom: 3vw; gap: 3vw; }
  .hdr::before { height: calc(100% + 3vh); }
  .hdr__meta { display: none; }
  .btn--sm { padding: 0 1.1em; }

  .hero { padding-bottom: 8vw; }
  .hero__by { margin-bottom: 3vw; }
  .hero__mark { font-size: 18.4vw; }
  .facts { display: grid; margin-top: 5vw; font-size: max(17px, 4.7vw); gap: .3em; }
  .facts li { padding: 0; border: 0; }
  .hero__btn { margin-top: 6vw; align-self: stretch; justify-self: stretch; justify-content: center; }

  .why { display: block; padding-top: 18vh; }
  .why .label { margin-bottom: 7vw; }
  .why__a { --st: 9.4vw; }
  .why__b, .why__copy { padding: 4vw; margin-left: -4vw; margin-right: -4vw; }
  .why__b { padding-bottom: 0; }
  .why__b { margin-top: 8vw; padding-left: 12vw; font-size: max(19px, 5.3vw); }
  .why__copy { margin-top: 0; padding-left: 12vw; padding-top: 4vw; }
  .why__hl { font-size: min(1.32em, 5.6vw); white-space: normal; }
  .why__short { display: block; }
  .why__copy .reveal-lines { display: none; }

  .about__in { display: flex; flex-direction: column; justify-content: flex-start; gap: 6vw; padding: 13vh var(--g) 5vh; }
  .about .label { margin-bottom: 0; }
  .about__h { --st: 8.2vw; }
  .about__block { margin: auto calc(-1 * var(--g)) 0; grid-template-columns: 1fr; justify-items: start; gap: 5vw; padding: 6vw var(--g) 7vw; }
  .about__p { font-size: max(18px, 4.9vw); }
  .about__run { flex-direction: column; gap: 3vw; }
  .about__run li { gap: 3vw; }
  .about__n { font-size: 8vw; min-width: 1.1em; }

  .beats__panel { top: 22vh; gap: 3vw; }
  .beats__pw { font-size: 11vw; }
  .topics { flex-direction: column; height: auto; bottom: 3vh; }
  .topic { flex: none; }
  .topic__b { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 3.4vw; padding: 2.4vw 3.4vw; height: auto; min-height: 46px; border-right: 0; }
  .topic__n { position: static; font-size: 3vw; }
  .topic__w { font-size: 5vw; }
  .topic__p { flex-basis: 100%; }
  .topic__p > span { font-size: max(15px, 4vw); }
  .topic.is-open .topic__p > span { padding-top: 1.6vw; }

  /* phone brands: the stage seen in plan, five pools down the screen, lit one at a time as you scroll */
  .brands { min-height: 0; height: 240vh; padding: 0; display: block; }
  .brands__in { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 14vh var(--g) 4vh; display: flex; flex-direction: column; }
  .brands .label { margin-bottom: 3vw; }
  .brands__h { --st: 7.4vw; }
  .spots { grid-template-columns: 1fr; gap: 0; margin: 2vh 0 0; }
  .spot { grid-template-columns: 12vw 1fr; justify-items: start; align-items: center; gap: 4vw; text-align: left; padding: 1vh 0; }
  .spot__mark { width: 9vw; }
  .spot__txt { display: flex; gap: .8em; }
  .spots--3d .spot { padding: 1.6vw 2.4vw; grid-template-columns: auto; }
  .spots--3d .spot__txt { display: grid; }
  .drop { width: auto; align-self: stretch; gap: 2.6vw; }
  .seq { gap: 2vw; }
  .seq i { width: 10vw; }
  .drop__k { font-size: 5.6vw; }
  .drop__s { font-size: max(15px, 4vw); }

  .who { padding-top: 14vh; padding-bottom: 8vh; }
  .who .label { margin-bottom: 7vw; }
  .who__list { width: 100%; }
  .who__i { grid-template-columns: 1fr; align-content: start; gap: 2.6vw; padding: 4vw var(--g) 5vw; margin-bottom: 6vh; margin-left: calc(-1 * var(--g)); margin-right: calc(-1 * var(--g)); }
  .who__n { font-size: 7vw; }
  .who__t { font-size: max(22px, 7.4vw); line-height: 1; }

  .agenda { height: 165vh; }
  .agenda__in { display: block; padding: 12vh var(--g) 4vh; }
  .agenda__side { display: block; margin-bottom: 6vw; }
  .agenda__side .label { margin-bottom: 4vw; }
  .agenda__h { --st: 9vw; margin-top: 3vw; }
  .agenda__note { margin-top: 3vw; }
  .agenda__now { display: none; }
  .ro { --cols: minmax(0, 1fr) auto; }
  .ro__axis { grid-template-columns: 1fr; padding: 0 3vw 2vw; }
  .ro__scale { grid-column: 1; }
  .ro__scale span::before { display: none; }
  .ro__row { grid-template-columns: 1fr auto; grid-template-areas: "w t" "bar bar"; row-gap: 1.6vw; height: auto; min-height: 0; padding: 2.6vw 3vw 2.8vw; }
  .ro__w { grid-area: w; font-size: max(16px, 4.6vw); }
  .ro__sub { display: block; margin: .5em 0 0; }
  .ro__t { grid-area: t; padding-left: 0; font-size: max(11px, 2.9vw); }
  .ro__bar { grid-area: bar; height: 10px; min-height: 0; }
  .ro { padding: 2vw 0 2vw; }

  .wsec { height: 220vh; }
  .wsec__band { padding: 3.4vw var(--g) 5vw; }
  .wsec__band .label { margin-bottom: 2vw; }
  .wsec__row { display: grid; gap: 3vw; }
  .recap__big { font-size: 17vw; }
  .wsec__txt { gap: 3vw; }
  .recap__line { font-size: max(18px, 4.8vw); }

  .recap__b { display: flex; flex-direction: column; align-items: stretch; gap: 10vw; padding: 6vh var(--g) 2vh; }
  .reel figcaption { margin-top: 2.4vw; }
  .snd { right: 2.4vw; top: 2.4vw; font-size: 12px; }
  .partners { gap: 4vw; }
  .partners__row { gap: 3vw; }
  .plate { padding: 5vw 4vw; }
  .plate img { height: 11vw; }
  .viewer__bar { bottom: 6vw; flex-direction: column; align-items: stretch; gap: 2vw; padding-top: 3vw; }
  .viewer__nav { justify-content: space-between; gap: 2vw; }
  .viewer__b { flex: 1 1 0; padding: 0; }
  .viewer__k { display: block; margin: .4em 0 0; }

  .finale { height: 160vh; }
  .finale__pin { padding-bottom: 6vh; }
  .finale__k { margin-bottom: 6vw; }
  .finale__cta { padding: 5vw 7vw 4.6vw; gap: 2vw; }
  .finale__cta-t { font-size: 6.6vw; }
  .finale__seats { margin-top: 6vw; }
  .foot { padding: 8vw var(--g) 6vw; --sr: 34vw; }
  .foot__grid { grid-template-columns: 1fr; gap: 9vw; margin-top: 6vw; padding-top: 6vw; }
  .foot__brand img { height: 52px; }
  .foot__about { margin-top: 4vw; }
  .foot__soc { margin-top: 4vw; }
  .foot__dl { margin-top: 4vw; gap: 4vw; }
  .foot__row { grid-template-columns: auto auto; gap: 3vw 4vw; margin-top: 8vw; padding-top: 4vw; }
  .foot__legal, .foot__links { grid-column: 1 / -1; }
  .foot__links { gap: 0 6vw; }
  .foot__top { justify-self: end; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .hero__mark { font-size: 15.6vw; }
  .facts { font-size: max(16px, 4.4vw); margin-top: 3.4vw; }
  .hero__btn { margin-top: 4vw; }
  .hero__by { margin-bottom: 2vw; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .logo-ph--real img { height: 30px; }
  .ro { --cols: 13vw minmax(0, 1fr) 30%; }
}

/* ---------- reduced motion: everything settled ---------- */
.rm .beats__pin { height: auto; overflow: visible; padding-top: 18vh; padding-bottom: 14vh; }
.rm .topics { position: static; visibility: visible; height: auto; flex-wrap: wrap; }
.rm .topic { flex: 1 1 18em; }
.rm .topic__p { grid-template-rows: 1fr; }
.rm .beats__panel { position: static; visibility: visible; margin-bottom: 8vw; }
.rm .who__i { color: var(--paper); }
.rm .foot { --sr: 140vw; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* the model comes up once the frame probe has chosen its tier */
.js:not(.no-gl) #room { opacity: 0; transition: opacity 1.4s cubic-bezier(.22, 1, .36, 1); }
.js.gl-ready:not(.no-gl) #room { opacity: 1; }
.rm #room { transition: none; }

/* 2D fallback copy */
.t2d { display: none; }
.no-gl .t3d { display: none; }
.no-gl .t2d { display: inline; }

/* a line that reaches the header band fades out before it can be cut by it */
main .is-under { opacity: 0 !important; transition: opacity .28s cubic-bezier(.22, 1, .36, 1) !important; }

/* ================= 13 Oct: Sanuja's checklist ================= */

/* brand logos on the stage, speakers on hover */
.logo-ph { display: grid; place-items: center; gap: .15em; min-width: 9.5em; padding: .7em 1em; background: #fff; color: #111; outline: 1px dashed rgba(0,0,0,.35); outline-offset: -5px; }
.logo-ph__n { font-weight: 700; font-size: max(15px, 1.05vw); letter-spacing: -.01em; line-height: 1.05; }
.logo-ph__t { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; }
.logo-ph--real { outline: none; }
.logo-ph--real img { display: block; width: auto; height: max(40px, 3.6vw); max-width: 100%; }
.spot__faces { display: flex; gap: .5em; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease); }
.spot:hover .spot__faces, .spot.is-on .spot__faces, .spot:focus-visible .spot__faces { max-height: 9em; opacity: 1; margin-top: .45em; }
.face { display: block; width: max(64px, 5vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--ink2); box-shadow: 0 0 0 2px var(--gel, var(--spot)); flex: none; }
.face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face--sm { width: 48px; }
.ph-face { display: grid; place-content: center; text-align: center; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, #12301a 0 6px, #0d2414 6px 12px); color: var(--paper); }
.ph-face b { font-size: max(15px, 1.1vw); font-weight: 700; line-height: 1; }
.ph-face small { font-size: 8px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-top: .3em; }
.face--sm .ph-face b { font-size: 13px; }
.face--sm .ph-face small { display: none; }
.spots--3d .spot { justify-items: center; text-align: center; }
.spots--3d .spot:hover, .spots--3d .spot.is-on { background: var(--box-hi); }
.spots--3d .spot:hover .spot__k, .spots--3d .spot.is-on .spot__k { color: var(--paper); }

/* the five boxes under the stage: brand, speakers and their roles */
.roster { list-style: none; margin: auto 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1vw; }
.rb { display: grid; align-content: start; gap: .5em; padding: 1.1vw 1.2vw 1.3vw; background: var(--box); cursor: pointer; transition: border-color .4s var(--ease), background-color .4s var(--ease); }
.rb.is-on, .rb:hover, .rb:focus-visible { background: var(--box-hi); }
.rb__k { font-size: var(--label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.rb.is-on .rb__k { color: var(--paper); }
.rb__b { font-size: max(18px, 1.35vw); font-weight: 700; letter-spacing: -.015em; line-height: 1.05; }
.rb__ppl { list-style: none; margin: .2em 0 0; padding: 0; display: grid; gap: .8em; }
.sp { display: grid; grid-template-columns: auto 1fr; gap: .7em; align-items: start; }
.sp .face { opacity: .35; filter: grayscale(1); transition: opacity .4s var(--ease), filter .4s var(--ease); }
.rb.is-on .sp .face, .rb:hover .sp .face, .rb:focus-visible .sp .face { opacity: 1; filter: none; }
.sp__t { display: grid; gap: .2em; }
.sp__n { font-weight: 600; font-size: max(14px, .95vw); line-height: 1.15; }
.sp__r { font-size: max(12.5px, .78vw); line-height: 1.3; color: var(--dim); }

/* agenda */
.agenda__stc { margin-top: .5em; font-size: var(--label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); }

/* sponsors either side of the video, industry partners in their own band below */
.recap__b { display: block; }
.recap__lbl { margin-bottom: 2vw; }
.recap__b[data-cam="reel"] .recap__lbl { align-self: flex-start; margin-left: -.8em; margin-right: auto; }
.sv { display: grid; grid-template-columns: 1fr minmax(0, 1.6fr) 1fr; gap: 1.6vw; align-items: stretch; max-width: 1600px; margin: 0 auto; }
.sv .reel { grid-column: auto; }
.spons__list { list-style: none; margin: 0; padding: 0; height: 100%; display: grid; grid-template-rows: repeat(3, 1fr); gap: 1vw; }
.spn { display: grid; place-items: center; min-height: 72px; background: #fff; color: #111; }
/* sponsors: the video now plays on the stage screen in the model; the cards sit in one row under it */
.recap__b[data-cam="reel"] { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 13vh; padding-bottom: 6vh; }
.recap__b[data-cam="reel"] .spons__row { margin-top: auto; }
.led-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.spons__row { list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 1600px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2vw; } /* r125: six sponsors in one row */
@media (min-width: 768px) and (max-width: 1099px) { .spons__row { grid-template-columns: repeat(3, 1fr); gap: 2vw; } } /* r125: three by two on tablets */
.spons__row .spn { aspect-ratio: 480 / 229; min-height: 0; padding: 6% 8%; }
.spons__row .spn img { width: 100%; height: 100%; object-fit: contain; }
.spn__n { font-weight: 700; font-size: max(15px, 1.2vw); }
.spn__t { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; }
.sv .reel figcaption { text-align: center; }
.partners { max-width: 1600px; margin: 4vw auto 0; grid-template-columns: auto 1fr; align-items: center; gap: 2vw; }
.partners__row { max-width: 40vw; }

/* preview only: compare the heading font with Inter */
.fontcmp { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; gap: 4px; padding: 4px; background: rgba(45, 79, 76, .92); border: 1px solid var(--line); font: 600 11px/1 "Ronzino", system-ui, sans-serif; letter-spacing: .04em; color: var(--dim); }
.fontcmp span { padding: 0 6px; }
.fontcmp button { min-height: 32px; padding: 0 10px; color: var(--paper); border: 1px solid transparent; }
.fontcmp button[aria-pressed="true"] { background: var(--btn); color: var(--ink); }
html.f-inter .display, html.f-inter .st, html.f-inter .display * { font-family: "Inter", system-ui, sans-serif !important; font-weight: 800; letter-spacing: -.035em; }
html.f-inter .st { font-weight: 600; }

@media (max-width: 767px) {
  .roster { grid-template-columns: 1fr; margin-top: auto; }
  .rb { display: none; padding: 3.4vw 4vw; }
  .rb.is-on { display: grid; }
  .rb__b { font-size: 5.4vw; }
  .spots--3d .spot { justify-items: start; text-align: left; }
  .logo-ph { min-width: 0; padding: .5em .8em; }
  .logo-ph--real img { height: 30px; }
  .spot__faces { display: none; }
  .spot[aria-pressed="true"] .spot__faces { display: flex; }
  .spot__faces .face { width: 44px; }
  .sv { grid-template-columns: 1fr 1fr; gap: 3vw; }
  .sv .reel { grid-column: 1 / -1; grid-row: 1; }
  .spons__list { grid-template-rows: none; }
  .spn { min-height: 64px; }
  .spons__row { grid-template-columns: repeat(2, 1fr); gap: 3vw; }
  /* r118: four sponsors sit two by two */
  .partners { grid-template-columns: 1fr; margin-top: 10vw; }
  .partners__row { max-width: none; }
}
.ro__tbc { margin-left: .6em; font-style: normal; font-size: var(--label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.ro__tbc { display: block; margin: .35em 0 0; }

/* 13 Oct fix: nothing in the agenda or the five boxes may push the page sideways */
.ro__w { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.rb, .sp__t { min-width: 0; }
.rb__b, .sp__n, .sp__r { overflow-wrap: anywhere; }
@media (min-width: 768px) and (max-width: 1199px) { .sp { grid-template-columns: 1fr; } }

/* portrait tablets see the stage in plan, so the five labels stack closely: keep each one compact */
@media (min-width: 768px) and (orientation: portrait) {
  .spots--3d .spot { padding: .35em .7em; gap: .15em; }
  .spots--3d .logo-ph--real img { height: 26px; }
  .spots--3d .logo-ph { padding: .3em .6em; min-width: 0; }
  .spots--3d .spot__faces { display: none; }
}

/* phone brand stories: stacked list in normal flow, no labels over the stage */
@media (max-width: 767px) {
  .brands { height: 360vh; }
  .brands .spots:not(.spots--3d) { gap: 1.2vh; margin: 2vh 0 0; }
  .brands .spots:not(.spots--3d) .spot { grid-template-columns: 8vw 1fr; padding: 1vh 3vw; gap: 3vw; background: var(--box); border: 1px solid var(--line); transition: background-color .4s var(--ease), border-color .4s; }
  .brands .spots:not(.spots--3d) .spot__mark { width: 6vw; }
  .brands .spots:not(.spots--3d) .spot__txt { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 3vw; }
  .brands .spots:not(.spots--3d) .spot.is-on { border-color: var(--gel); }
  .brands .spots:not(.spots--3d) .spot.is-on .spot__k { color: var(--paper); }
  .brands .spots:not(.spots--3d) .logo-ph--real { background: #fff; padding: .3em .6em; }
  .brands .spots:not(.spots--3d) .logo-ph--real img { height: 34px; width: auto; }
  .brands .spots:not(.spots--3d) .spot__faces, .brands .spots:not(.spots--3d) .spot[aria-pressed="true"] .spot__faces { display: none; }
  .fontcmp { display: none; }
}

/* music toggle */
.music-t { position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 41; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; background: rgba(45, 79, 76, .92); border: 1px solid var(--line); color: var(--paper); font: 600 12px/1 "Ronzino", system-ui, sans-serif; letter-spacing: .04em; cursor: pointer; }
.music-t.is-on { border-color: var(--btn); }
.music-t__bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.music-t__bars i { width: 3px; height: 4px; background: currentColor; }
.music-t.is-on .music-t__bars i { background: var(--btn); animation: mbar .9s ease-in-out infinite alternate; }
.music-t.is-on .music-t__bars i:nth-child(2) { animation-delay: -.3s; }
.music-t.is-on .music-t__bars i:nth-child(3) { animation-delay: -.6s; }
@keyframes mbar { from { height: 3px; } to { height: 12px; } }
@media (prefers-reduced-motion: reduce) { .music-t.is-on .music-t__bars i { animation: none; height: 8px; } }

@media (max-width: 767px) {
  .music-t { width: 44px; height: 44px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; }
  .music-t__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.music-t__bars i:nth-child(1) { height: 5px; } .music-t__bars i:nth-child(2) { height: 10px; } .music-t__bars i:nth-child(3) { height: 7px; }
.music-t:not(.is-on) .music-t__bars { opacity: .55; }
.music-t__w { display: none; } .music-t.is-on .music-t__w { display: inline; } .music-t.is-on .music-t__x { display: none; } .music-t.is-on .music-t__ic { color: var(--btn); }
.fontcmp { display: none !important; } html.dev .fontcmp { display: flex !important; }
.foot { padding-bottom: calc(1.6vw + 68px); }

/* desktop brand stories: held on screen, a solid left column, one brand per stretch of scroll */
@media (min-width: 768px) {
  .brands { height: 520vh; min-height: 0; padding: 0; display: block; }
  .brands__in { position: sticky; top: 0; height: 100vh; height: 100svh; width: min(44vw, 640px); padding: 11vh 2.4vw 4vh var(--g); display: flex; flex-direction: column; background: linear-gradient(90deg, rgba(45, 79, 76, .94) 70%, rgba(45, 79, 76, .78)); }
  .brands__h { --st: min(3.4vw, 6.2vh); max-width: none; }
  .brands .spots:not(.spots--3d) { grid-template-columns: 1fr; gap: 1vh; margin: 3vh 0 0; }
  .brands .spots:not(.spots--3d) .spot { grid-template-columns: 1.6vw 1fr; justify-items: start; align-items: center; text-align: left; gap: 1vw; padding: .9vh 1vw; min-height: 0; background: var(--box); border: 1px solid var(--line); transition: background-color .4s var(--ease), border-color .4s; }
  .brands .spots:not(.spots--3d) .spot__mark { width: 1.2vw; }
  .brands .spots:not(.spots--3d) .spot__txt { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1vw; }
  .brands .spots:not(.spots--3d) .spot.is-on { border-color: var(--gel); }
  .brands .spots:not(.spots--3d) .spot.is-on .spot__k { color: var(--paper); }
  .brands .spots:not(.spots--3d) .logo-ph--real { background: #fff; padding: .25em .6em; min-width: 0; }
  .brands .spots:not(.spots--3d) .logo-ph--real img { height: clamp(26px, 4.2vh, 44px); width: auto; }
  .brands .spots:not(.spots--3d) .spot__faces { display: none !important; }
  .brands .roster { grid-template-columns: 1fr; margin-top: auto; }
  .brands .rb { display: none; padding: 1.6vh 1.2vw; }
  .brands .rb.is-on { display: grid; }
}

/* music button: big on the opening screen, docks bottom right once scrolling starts */
.music-t { transition: right .7s var(--ease), bottom .7s var(--ease), transform .7s var(--ease), padding .5s var(--ease), font-size .5s, width .5s var(--ease), height .5s var(--ease), border-radius .5s; }
.music-t__cta { display: none; }
.music-t--hero { right: 50%; bottom: 13vh; transform: translateX(50%); min-height: 56px; padding: 0 24px; gap: 12px; font-size: 15px; border: 2px solid var(--btn); box-shadow: 0 0 0 6px rgba(214, 188, 136, .2); animation: mpulse 2s ease-in-out infinite; }
.music-t--hero .music-t__ic { width: 24px; height: 24px; }
.music-t--hero:not(.is-on) .music-t__l { display: none; }
.music-t--hero:not(.is-on) .music-t__cta { display: inline; }
@keyframes mpulse { 50% { box-shadow: 0 0 0 12px rgba(214, 188, 136, .07); } }
@media (min-width: 768px) { .music-t--hero { right: var(--g); transform: none; bottom: 12vh; } }
@media (max-width: 767px) {
  .music-t.music-t--hero { width: auto; height: 52px; border-radius: 26px; padding: 0 20px; bottom: 50svh; }
  .music-t.music-t--hero .music-t__l, .music-t.music-t--hero .music-t__cta { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  .music-t.music-t--hero.is-on .music-t__l { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .music-t--hero { animation: none; } }

/* ================= r115 (Sanuja, 14 Oct) ================= */
/* the panel: its own stop after the five brand stories */
.pnl { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 14vh var(--g) 10vh; }
.pnl__box { width: min(44em, 100%); display: grid; justify-items: center; text-align: center; gap: 1vw; padding: 2.2vw 2.6vw 2.4vw; background: var(--box); }
.pnl__then { font-size: var(--label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); }
.pnl__w { font-size: 4.6vw; color: var(--paper); }
.pnl__p { max-width: 30em; font-size: max(16px, 1.15vw); color: var(--paper); }
@media (max-width: 767px) {
  .pnl__box { gap: 3vw; padding: 6vw 6vw 7vw; }
  .pnl__w { font-size: 11vw; }
}
/* brand stories: the speaker card sits on the right, large, beside the list */
@media (min-width: 768px) {
  .brands .roster { position: absolute; top: 50%; left: calc(100vw - var(--g) - min(36vw, 560px)); width: min(36vw, 560px); margin: 0; transform: translateY(-42%); }
  .brands .rb { padding: 1.8vw 2vw 2vw; gap: .7em; background: var(--box-hi); }
  .brands .rb__k { color: var(--paper); }
  .brands .rb__b { font-size: max(24px, 2.2vw); }
  .brands .rb__ppl { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 1.4vw; margin-top: .4em; }
  .brands .sp { grid-template-columns: 1fr; gap: .8em; }
  .brands .rb .face--sm { width: 100%; max-width: min(100%, 34vh); border-radius: 0; box-shadow: none; }
  .brands .rb .face--sm .ph-face b { font-size: max(22px, 2vw); }
  .brands .rb .face--sm .ph-face small { display: block; font-size: 10px; }
  .brands .sp__n { font-size: max(16px, 1.2vw); font-weight: 700; }
  .brands .sp__r { font-size: max(13px, .9vw); }
}
@media (max-width: 767px) {
  .brands .rb { gap: .35em; }
  .brands .rb__ppl { gap: .5em; }
  .brands .rb .face--sm { width: 52px; }
  .brands .rb .face--sm .ph-face b { font-size: 15px; }
  .brands .sp { align-items: center; }
  .brands .sp__n { font-size: 16px; font-weight: 700; }
  .brands .sp__r { font-size: 13px; line-height: 1.3; }
}
/* r115: short phones keep the two-speaker cards on screen */
@media (max-width: 767px) and (max-height: 780px) {
  .brands .rb__k { display: none; }
  .brands .rb { padding-block: 2.6vw; }
  .brands .rb .face--sm { width: 40px; }
  .brands .rb .face--sm .ph-face b { font-size: 12px; }
  .brands .sp__r { font-size: 12px; line-height: 1.25; }
}
/* ================= r118 (Sanuja, 14 Oct) ================= */
/* phones: headline lines may wrap rather than run into the gutter */
@media (max-width: 767px) { .stl { white-space: normal; } }
/* the header fade steps away on the final frame so the stage date reads in full */
.hdr::before { transition: opacity .6s var(--ease); }
.at-end .hdr::before { opacity: 0; }
/* phones: the music button steps aside while the brand stories are on screen */
@media (max-width: 767px) {
  .music-t { transition: opacity .4s var(--ease), right .7s var(--ease), bottom .7s var(--ease), transform .7s var(--ease); }
  .in-brands .music-t { opacity: 0; pointer-events: none; }
}
@media (max-width: 767px) { .brands__h { text-shadow: 0 2px 18px rgba(0, 0, 0, .5), 0 0 2px rgba(0, 0, 0, .35); } }
.hdr__meta { transition: opacity .6s var(--ease); } .at-end .hdr__meta { opacity: 0; }

/* r124: five sponsors, two per row on phones with the last one centred */
@media (max-width: 767px) { .spons__row .spn:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 1.5vw); } }

/* r127: About us, The Faculty of Brands (Sanuja #194): a solid band above the footer, photo and box side by side, stacked on phones */
.tfob { position: relative; z-index: 2; background: var(--bg); padding: 16vh var(--g) 12vh; }
.tfob::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14vh; pointer-events: none; background: linear-gradient(rgba(45, 79, 76, 0), var(--bg)); }
.tfob__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.6vw; align-items: center; }
.tfob__ph { grid-column: 1 / 6; margin: 0; }
.tfob__ph img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
.tfob__box { grid-column: 6 / 13; display: grid; gap: 1.6vw; padding: 2.6vw 2.8vw 2.8vw; background: var(--box); }
.tfob__h { --st: min(3.6vw, 7vh); text-wrap: balance; color: var(--paper); }
.tfob__p { max-width: 34em; font-size: max(16px, 1.15vw); line-height: 1.55; color: var(--paper); }
@media (max-width: 767px) {
  .tfob { padding: 12vh var(--g) 10vw; }
  .tfob__in { display: block; }
  .tfob__box { gap: 4vw; margin: 0 calc(-1 * var(--g)); padding: 7vw var(--g) 8vw; }
  .tfob__ph { margin: 0 calc(-1 * var(--g)); }
  .tfob__h { --st: 8.2vw; }
}

/* ================= r127 (Sanuja, 14 Oct) ================= */
/* speaker photos: larger, one white-ground look for all */
.brands .rb .face--sm { background: #fff; }
@media (min-width: 768px) {
  .brands .roster { width: min(40vw, 620px); left: calc(100vw - var(--g) - min(40vw, 620px)); }
  .brands .rb .face--sm { max-width: min(100%, 44vh); }
}
@media (max-width: 767px) {
  .brands .rb .face--sm { width: 84px; }
}
@media (max-width: 767px) and (max-height: 780px) {
  .brands .rb .face--sm { width: 64px; }
}
/* brand story 4: a matching tile until the brand is named, so the card is never thin */
.face--tba { display: grid; place-items: center; text-align: center; color: var(--bg); font-weight: 600; font-size: 11px; line-height: 1.15; letter-spacing: .06em; text-transform: uppercase; outline: 1px dashed rgba(0, 0, 0, .3); outline-offset: -6px; }
.face--tba span { padding: 0 .6em; }
@media (min-width: 768px) { .brands .rb .face--tba { aspect-ratio: 1; font-size: max(13px, 1vw); } }
/* phones: two speakers sit side by side, photo above the name, so the card stays on screen */
@media (max-width: 767px) {
  .brands .rb__ppl:has(> li + li) { grid-template-columns: 1fr 1fr; gap: 3vw; }
  .brands .rb__ppl:has(> li + li) .sp { grid-template-columns: 1fr; align-items: start; align-content: start; gap: .5em; }
  .brands .rb__ppl:has(> li + li) .face--sm { width: 72px; }
  .brands .rb:has(.rb__ppl > li + li) { padding-bottom: 3vw; }
}

/* r127 gaps: headings for who and sponsors, boxed like the other copy over the room */
.who__h, .spons__h { width: fit-content; max-width: 100%; margin-left: -.35em; padding: .18em .35em .22em; background: var(--box); color: var(--paper); text-wrap: balance; }
.who__h { --st: min(3.6vw, 7vh); margin-bottom: 3vw; }
.spons__h { --st: min(2.6vw, 5.6vh); margin-bottom: 1vw; align-self: flex-start; }
@media (max-width: 767px) {
  .who .label { margin-bottom: 3vw; }
  .who__h { --st: 8.2vw; margin-bottom: 6vw; }
  .spons__h { --st: 7vw; margin-bottom: 2.5vw; }
}

/* r127 audit fixes: a one-line descriptor in the hero, headings for the topics and the first edition, and tighter hand-overs */
.hero__d { max-width: 30em; margin-top: 1.4vw; font-size: max(17px, 1.35vw); line-height: 1.35; font-weight: 500; color: var(--paper); text-wrap: balance; }
.topics__h { position: absolute; left: var(--g); top: 14vh; z-index: 2; width: fit-content; max-width: calc(100% - 2 * var(--g)); margin-left: -.35em; padding: .18em .35em .22em; background: var(--box); color: var(--paper); --st: min(3.2vw, 6.4vh); }
.wsec__h { --st: min(2.6vw, 5.4vh); margin: .2vw 0 .8vw; color: var(--paper); }
.pnl { min-height: 0; padding: 12vh var(--g) 12vh; }
.wsec { height: 200vh; }
.recap__b[data-cam="reel"] { min-height: 92vh; min-height: 92svh; padding-top: 9vh; }
@media (max-width: 767px) {
  .hero__d { margin-top: 3.4vw; font-size: max(16px, 4.4vw); }
  .topics__h { top: 12vh; --st: 8vw; }
  .wsec__h { --st: 7vw; margin: 1vw 0 2.4vw; }
  .wsec { height: 180vh; }
  .pnl { padding: 10vh var(--g) 10vh; }
  .pnl__box { padding-bottom: 6vw; }
  .wall__hint { padding-right: 60px; }
}
.rm .topics__h { position: static; margin: 0 0 4vw -.35em; }
.hero__d { text-shadow: 0 1px 14px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .4); }
.wsec__h { text-wrap: balance; }
@media (max-width: 767px) and (max-height: 780px) { .brands .rb__ppl:has(> li + li) .face--sm { width: 64px; } }

/* r127 critic pass: a branded story 4 placeholder, bigger phone faces, readable headings over the screen, a stronger finale kicker */
.brands .rb .face--tba { background: #24403e url("../img/TFOB-Logo-white.webp") center 34% / 56% auto no-repeat; color: var(--paper); align-items: end; padding-bottom: 14%; outline: 1px solid rgba(255, 255, 255, .22); outline-offset: -1px; }
@media (min-width: 768px) { .brands .rb .face--tba { font-size: max(15px, 1.25vw); } }
.why__a, .about__h { text-shadow: 0 2px 22px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .35); }
.agenda__h, .about__h { text-wrap: balance; }
.finale__k { font-size: max(13px, calc(var(--label) * 1.35)); }
@media (max-width: 767px) {
  .about__h { --st: 7vw; }
  .brands .rb .face--sm { width: 104px; }
  .brands .rb__ppl:has(> li + li) .face--sm { width: 76px; }
  .brands .rb .face--tba { font-size: 10px; padding-bottom: 12%; }
}
@media (max-width: 767px) and (max-height: 780px) {
  .brands .rb .face--sm { width: 80px; }
  .brands .rb__ppl:has(> li + li) .face--sm { width: 64px; }
}
/* r128 (Sanuja #228): desktop, the five words heading sits just above the five boxes instead of high over the stage screen */
@media (min-width: 768px) {
  .topics__h { top: auto; bottom: calc(5vh + 27vh + 1.6vh); }
}
/* sponsors: the label and heading sit just above the logo row, so the stage stays clear above them */
.recap__b[data-cam="reel"] .recap__lbl { margin-top: auto; }
.recap__b[data-cam="reel"] .spons__row { margin-top: 1.4vw; }
@media (max-width: 767px) { .recap__b[data-cam="reel"] .spons__row { margin-top: 3vw; } }