@font-face {
  font-family: "GT Super Text";
  src: url(/fonts/GT-Super-Text-Book.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Super Text";
  src: url(/fonts/GT-Super-Text-Book-Italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Poster is 1123 x 1402. --u is one poster pixel at the current stage size. */
:root {
  --ratio: 1.24845;
  --w: min(100vw, 100svh / var(--ratio));
  --h: calc(var(--w) * var(--ratio));
  --u: calc(var(--h) / 1402);

  --delay: 0.25s;          /* time between pops, driven by the demo slider */
  --bg-fade: 1.4s;         /* background fade-in */
  --pop: 0.62s;            /* length of one pop */
  --count: 13;
  --text-at: calc(var(--bg-fade) + (var(--count) - 1) * var(--delay) + var(--pop) + 0.15s);

  --ink: #fff;
  --serif: "GT Super Text", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --hold: rgb(39 8 32);     /* poster gradient at row 1130, held until the page's last screen */
  --split: calc(var(--h) * 1130 / 1402);
  --tail: 70svh;            /* the poster's final brightening, stretched over the end of the page */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: #000; scroll-behavior: smooth; }
body {
  background: #000;
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  overflow-x: hidden;
}

/* ---------- scene + background ---------- */
.scene {
  position: relative;
  isolation: isolate;
}
.backdrop {
  /* the poster gradient: top of the poster behind the stage, plum held through the story,
     then the poster's last stretch as the page ends */
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      rgb(0 0 0) 0.0%,
      rgb(0 0 0) 3.5%,
      rgb(0 0 0) 7.1%,
      rgb(0 0 0) 10.6%,
      rgb(0 0 0) 14.2%,
      rgb(0 0 0) 17.7%,
      rgb(0 0 0) 21.3%,
      rgb(0 0 0) 24.8%,
      rgb(0 0 0) 28.3%,
      rgb(0 0 0) 31.9%,
      rgb(0 0 0) 35.4%,
      rgb(0 0 0) 39.0%,
      rgb(0 0 0) 42.5%,
      rgb(2 0 2) 46.1%,
      rgb(2 0 2) 49.6%,
      rgb(3 0 3) 53.1%,
      rgb(5 0 3) 56.7%,
      rgb(6 0 5) 60.2%,
      rgb(8 0 8) 63.8%,
      rgb(11 0 10) 67.3%,
      rgb(14 0 11) 70.9%,
      rgb(16 0 13) 74.4%,
      rgb(19 2 16) 77.9%,
      rgb(23 2 18) 81.5%,
      rgb(27 2 21) 85.0%,
      rgb(30 2 24) 88.6%,
      rgb(34 2 27) 92.1%,
      rgb(35 3 28) 95.7%,
      rgb(38 8 31) 99.2%,
      rgb(39 8 32) 100.0%
    ) 0 0 / 100% var(--split) no-repeat,
    linear-gradient(
      rgb(39 8 32) 0.00%,
      rgb(40 9 33) 6.25%,
      rgb(43 12 36) 12.50%,
      rgb(47 17 40) 18.75%,
      rgb(52 23 46) 25.00%,
      rgb(59 31 52) 31.25%,
      rgb(66 39 60) 37.50%,
      rgb(75 49 69) 43.75%,
      rgb(85 61 80) 50.00%,
      rgb(96 73 91) 56.25%,
      rgb(108 87 103) 62.50%,
      rgb(121 101 117) 68.75%,
      rgb(134 117 131) 75.00%,
      rgb(149 134 146) 81.25%,
      rgb(165 152 163) 87.50%,
      rgb(181 171 180) 93.75%,
      rgb(199 191 198) 100.00%
    ) 0 100% / 100% var(--tail) no-repeat,
    var(--hold);
  opacity: 0;
}
.backdrop::after {
  /* fine grain so the long gradient doesn't band */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.play .backdrop { animation: fade var(--bg-fade) ease-out forwards; }

.stage {
  position: relative;
  margin: 0 auto;
  width: var(--w);
  height: var(--h);
}
.canvas { position: absolute; inset: 0; }

/* ---------- art pieces ---------- */
.piece {
  position: absolute;
  display: block;
  opacity: 0;
  transform: scale(0.2);
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-drag: none;
}
.play .piece {
  animation: pop var(--pop) cubic-bezier(.25, .8, .3, 1) forwards;
  animation-delay: calc(var(--bg-fade) + var(--i) * var(--delay));
}
@keyframes pop {
  0%   { opacity: 0; transform: scale(0.2); }
  45%  { opacity: 1; transform: scale(1.1); }
  70%  { transform: scale(0.96); }
  85%  { transform: scale(1.015); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fade { to { opacity: 1; } }

/* ---------- poster text ---------- */
.info { opacity: 0; }
.play .info { animation: fade 1.1s ease-out forwards; animation-delay: var(--text-at); }

.info {
  position: absolute;
  left: calc(var(--u) * 27);
  top: calc(var(--u) * 973.95);
  font-size: max(11px, calc(var(--u) * 24.3));
  line-height: 1.0494;
  font-feature-settings: "onum" 1;
  white-space: nowrap;
}
.info p { margin: 0 0 1.0494em; }


/* ---------- form panel ---------- */
.apply {
  width: min(100%, 21em);
  margin: 0 auto;
  padding: 0 20px;
  font-size: clamp(22px, 1.25vw + 17px, 40px);
}

/* ---------- VIP: the box turns dark gold, with light travelling slowly around its edge ---------- */
@property --vip-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.panel {
  position: relative;
  isolation: isolate;
  transition: color .6s, border-color .6s, box-shadow .8s;
}
.panel::before, .panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .8s ease;
}
.panel::after {
  /* deep bronze-black fill with a faint warm light from above */
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(214, 178, 96, .16), transparent 60%),
    linear-gradient(165deg, #21180a 0%, #120d05 55%, #1b1308 100%);
}
.panel::before {
  /* the edge: a hairline of old gold with one soft highlight orbiting it */
  inset: -1px;
  z-index: 1;
  padding: 1.5px;
  background: conic-gradient(from var(--vip-angle),
    #5e4719 0deg, #8f7030 40deg, #f4e2a6 75deg, #8f7030 110deg,
    #5e4719 165deg, #7a5f27 255deg, #5e4719 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: vip-orbit 14s linear infinite;
}
@keyframes vip-orbit { to { --vip-angle: 360deg; } }

.panel.is-vip {
  color: #eadbb2;
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 24px 70px rgba(0, 0, 0, .45), 0 0 60px rgba(201, 162, 74, .08);
}
.panel.is-vip::before, .panel.is-vip::after { opacity: 1; }
.panel.is-vip .field > span { opacity: .62; }
.panel.is-vip .field input, .panel.is-vip .field select {
  color: #f3e8c9;
  background-color: rgba(214, 178, 96, .06);
  border-bottom-color: rgba(214, 178, 96, .4);
}
.panel.is-vip .field input:focus, .panel.is-vip .field select:focus { background-color: rgba(214, 178, 96, .1); border-bottom-color: #d6b260; }
.panel.is-vip .field select {
  background-image: linear-gradient(45deg, transparent 50%, #d6b260 50%), linear-gradient(-45deg, transparent 50%, #d6b260 50%);
}
.panel.is-vip .field select:invalid { color: rgba(234, 219, 178, .5); }
.panel.is-vip .field option { color: #111; background: #fff; }
.panel.is-vip .consent input { border-color: rgba(214, 178, 96, .55); }
.panel.is-vip .consent input:checked { background: #d6b260; border-color: #d6b260; }
.panel.is-vip .consent input::after { border-color: #1a1206; }
.panel.is-vip button {
  color: #1a1206;
  background: linear-gradient(180deg, #e9d08c 0%, #c49a45 100%);
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, .5);
}
.panel.is-vip button:hover { color: #1a1206; background: linear-gradient(180deg, #f2dc9f 0%, #d0a851 100%); }
.panel.is-vip .consent input:focus-visible, .panel.is-vip .field input:focus-visible, .panel.is-vip button:focus-visible { outline-color: #d6b260; }

.vip-hello {
  margin: -0.4em 0 1em;
  color: #d9bc72;
  font-size: 1.15em;
  font-style: italic;
  animation: fade .6s ease-out both;
}
.vip-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em 1.1em;
  align-items: end;
  margin-top: 1.2em;
  padding-top: 1.1em;
  border-top: 1px solid rgba(214, 178, 96, .2);
  animation: fade .6s ease-out both;
}
.vip-extra .consent { margin: 0 0 0.35em; }
.vip-extra[hidden], .vip-hello[hidden] { display: none; }

/* ---------- partner lockup ---------- */
.partners {
  width: min(100%, 21em);
  margin: 0 auto;
  padding: 16svh 20px 64svh;
  font-size: clamp(22px, 1.25vw + 17px, 40px);
}
.partners-label {
  margin: 0 0 1.4em;
  font-size: 0.6em;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  opacity: 0.72;
}
.partners-logos {
  --lh: clamp(17px, 0.9vw + 13px, 28px);  /* Monotype cap-height unit; the others are sized to balance it */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6%;
}
.partners-logos img { display: block; width: auto; min-width: 0; }
.logo-monotype { height: var(--lh); }
.logo-adobe { height: calc(var(--lh) * 1.4); }
.logo-pantone { height: calc(var(--lh) * 3.4); }
.panel {
  font-size: clamp(16px, 0.4vw + 13px, 19px);
  padding: 1.5em 1.5em 1.6em;
  background: rgba(160, 150, 162, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}

.panel-title {
  margin: 0 0 1em;
  font-weight: 400;
  font-size: 1.45em;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em 1.1em;
}
.field { display: grid; gap: 0.3em; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field > span {
  font-size: 0.85em;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  opacity: 0.72;
}
.field input, .field select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 1.05em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0.3em 0.3em 0 0;
  padding: 0.3em 0.45em 0.25em;
  outline: none;
  transition: border-color .2s, background .2s;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.6em;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(-45deg, transparent 50%, #fff 50%);
  background-size: 0.32em 0.32em;
  background-position: calc(100% - 0.85em) 55%, calc(100% - 0.53em) 55%;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
.field select:invalid { color: rgba(255, 255, 255, 0.55); }
.field option { color: #111; background: #fff; }
.field input:focus, .field select:focus {
  background-color: rgba(255, 255, 255, 0.12);
  border-bottom-color: #fff;
}
.field.error input, .field.error select { border-bottom-color: #ff7ccd; }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6em;
  align-items: start;
  margin-top: 1.2em;
  cursor: pointer;
}
.consent span {
  font-size: 0.85em;
  line-height: 1.4;
  opacity: 0.85;
}
.consent input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.05em;
  height: 1.05em;
  margin: 0.12em 0 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0.2em;
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.consent input::after {
  content: "";
  width: 0.55em;
  height: 0.3em;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: translateY(-0.06em) rotate(-45deg) scale(0);
  transition: transform .15s;
}
.consent input:checked { background: #fff; border-color: #fff; }
.consent input:checked::after { transform: translateY(-0.06em) rotate(-45deg) scale(1); }
.consent input:focus-visible, .field input:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.actions {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-top: 1.3em;
}
.panel button {
  font-family: inherit;
  font-size: 1em;
  color: #000;
  background: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.55em 1.6em 0.6em;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.panel button:hover { background: #ec4bb7; color: #fff; }
.panel button:active { transform: scale(0.97); }
.panel button[disabled] { opacity: 0.6; cursor: progress; }
.status { margin: 0; font-size: 0.85em; line-height: 1.3; opacity: 0.9; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.thanks { padding: 0.6em 0 0.4em; outline: none; animation: fade .8s ease-out both; }
.thanks p { margin: 0; }
.thanks-big { font-size: 2.1em; line-height: 1.05; }
.thanks-small { margin-top: 0.6em !important; font-size: 1.05em; opacity: 0.8; }

/* ---------- scroll cue: a chevron that pulses once the intro has finished ---------- */
.scroll-cue {
  --cue-at: calc(var(--text-at) + 1.1s + 0.5s);  /* event text done fading in, then a half-second pause */
  position: absolute;
  left: 50%;
  bottom: max(14px, calc(var(--u) * 34));
  width: 56px;
  height: 44px;
  margin-left: -28px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}
.scroll-cue svg { width: 30px; height: 17px; overflow: visible; }
.play .scroll-cue { visibility: visible; animation: fade .9s ease-out forwards; animation-delay: var(--cue-at); }
.play .scroll-cue svg { animation: cue-pulse 2.2s ease-in-out infinite; animation-delay: var(--cue-at); }
.play .scroll-cue.gone { opacity: 0 !important; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.scroll-cue:focus-visible { outline: 1px solid rgba(255, 255, 255, .6); outline-offset: 2px; border-radius: 8px; }
@keyframes cue-pulse {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(7px); opacity: .45; }
}

/* ---------- story: words light up as they cross the reading line ---------- */
.story {
  width: min(100%, 21em);
  margin: 0 auto;
  padding: 26svh 20px 12svh;
  font-size: clamp(22px, 1.25vw + 17px, 40px);
  line-height: 1.24;
  letter-spacing: -0.005em;
  font-feature-settings: "onum" 1;
  text-wrap: pretty;
}
.story p, .story h2, .story ul { margin: 0; }
.story .w {
  color: rgb(255 255 255 / calc(0.16 + 0.84 * var(--a, 0)));
  transition: color .12s linear;
}
.story em { font-style: italic; }
.story-kicker {
  font-size: 0.6em;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  margin-bottom: 1.1em !important;
}
.story-title {
  font-weight: 400;
  font-size: 1.6em;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 1.6em !important;
}
.story p + p { margin-top: 1.1em; }
.story .lines span.line { display: block; }
.story .lines span.line + span.line { margin-top: 0.1em; }
.story .invite { margin-top: 1.6em !important; }
.speakers-label { margin-top: 2.4em !important; }
.speakers { list-style: none; padding: 0; margin-top: 1em !important; }
.speakers li + li { margin-top: 1.1em; }
.speakers li.surprise { margin-top: 1.6em; }
.speakers .role {
  display: block;
  font-size: 0.6em;
  line-height: 1.35;
  margin-top: 0.25em;
}

/* ---------- demo controls ---------- */
.demo {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 12, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.demo[hidden] { display: none; }
.demo input[type=range] { width: 120px; accent-color: #ec4bb7; }
.demo output { min-width: 3.4em; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.demo button {
  font: inherit;
  letter-spacing: inherit;
  color: #000;
  background: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}
.demo button:hover { background: #ec4bb7; color: #fff; }

/* ---------- narrow screens ---------- */
@media (max-aspect-ratio: 7/10) and (max-width: 760px) {
  :root { --w: 100vw; }
  .info { font-size: max(10px, calc(var(--u) * 24.3)); }
  .demo { top: auto; left: 50%; bottom: 10px; transform: translateX(-50%); gap: 8px; padding: 8px 8px 8px 14px; }
  .demo input[type=range] { width: 110px; }
  .vip-extra { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .play .scroll-cue svg { animation: none; }
  .panel::before { animation: none; }
  html { scroll-behavior: auto; }
  .play .piece { animation-name: fade; animation-duration: .4s; transform: none; }
}