/* ==========================================================================
   Unblocking AGI  /  preview-a.css
   Alpaca VC and HSBC. Wednesday, October 14, 2026. New York City.

   Direction A: editorial and cinematic. Pure black ground, brand canon type,
   one argument carried in display type, and the confirmed lineup treated as
   the feature. Motion is used twice and then left alone.

   Colour discipline (holding these is what keeps it from turning generic):
     mint   = the register action, nothing else
     mark = editorial marks, rules, the argument's underline (mint, per brand canon)
     grid   = every divider
   ========================================================================== */

/* ---------- brand fonts (canon: Open Sauce Sans + Fira Code) ------------- */
@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/oss-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/oss-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/oss-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/oss-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/oss-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Open Sauce Sans"; src: url("/fonts/oss-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("/fonts/fira-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("/fonts/fira-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- tokens ------------------------------------------------------- */
:root {
  /* brand canon */
  --black:    #000000;
  --white:    #FFFFFF;
  --text2:    #E8E8E8;
  --mint:     #00C98E;
  --mark:     #00C98E;  /* was salmon #FF767D, see DESIGN-NOTES */
  --grid:     #1D1D1B;
  --grid-lit: #41413E;

  /* derived: canon has no muted tone, so metadata is canon secondary dimmed */
  --meta:     rgba(232, 232, 232, 0.52);
  --meta-lit: rgba(232, 232, 232, 0.74);
  --plate:    #0A0A09;

  --sans: "Open Sauce Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut:   clamp(20px, 5vw, 76px);
  --spine: 172px;
  --wide:  1320px;
  --ease:  cubic-bezier(0.22, 0.68, 0, 1);
}

/* ---------- base --------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
b { font-weight: inherit; }

::selection { background: var(--mark); color: var(--black); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 2px; }

.u-sr, .skip {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}
.skip {
  left: 12px; top: 12px; width: auto; height: auto;
  margin: 0; clip-path: none; overflow: visible;
  transform: translateY(-160%);
  z-index: 200;
  background: var(--mint); color: var(--black);
  font: 500 0.8125rem/1 var(--sans);
  padding: 12px 18px; border-radius: 9999px; text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.skip:focus { transform: none; }

/* ---------- shared ------------------------------------------------------- */
.tag {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px;
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--meta);
}
/* A dot, deliberately not a rule: a hairline here would read as an em dash. */
.tag em { width: 3px; height: 3px; border-radius: 50%; background: var(--mark); flex: none; }
.tag span { white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 0.9375rem/1 var(--sans);
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 9999px;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn i { font-style: normal; transition: transform 0.3s var(--ease); }
.btn:hover i { transform: translate(2px, -2px); }
.btn--go { background: var(--mint); color: var(--black); }
.btn--go:hover { transform: translateY(-2px); box-shadow: 0 12px 36px -12px rgba(0, 201, 142, 0.7); }
.btn--sm { padding: 12px 22px; font-size: 0.875rem; }
.btn--lg { padding: 19px 34px; font-size: 1.0625rem; }

/* ==========================================================================
   RAIL
   ========================================================================== */
.rail {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; gap: 20px;
  padding: 12px var(--gut);
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--grid);
  transform: translateY(-102%);
  transition: transform 0.55s var(--ease);
}
.rail.is-up { transform: none; }
.rail__mark { font-weight: 800; font-size: 0.9375rem; letter-spacing: -0.025em; color: var(--white); text-decoration: none; white-space: nowrap; }
.rail__spec {
  display: flex; align-items: center; gap: 12px; margin-left: auto;
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--meta);
}
.rail__spec em { width: 3px; height: 3px; border-radius: 50%; background: var(--mark); }
.rail__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 0.8125rem/1 var(--sans);
  background: var(--mint); color: var(--black);
  padding: 11px 20px; border-radius: 9999px; text-decoration: none;
  transition: transform 0.25s var(--ease);
}
.rail__cta i { font-style: normal; }
.rail__cta:hover { transform: translateY(-1px); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(92px, 12vh, 150px) var(--gut) clamp(104px, 14vh, 156px);
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}

/* The artwork is painted on pure black, so `screen` dissolves its ground into
   the page: no mask, no rectangle edge. It sits low and right and runs off
   both edges, which reads as a crop rather than a backdrop. */
.hero__art {
  position: absolute; z-index: -2;
  right: -7%; bottom: -12%;
  width: min(66%, 1060px);
  aspect-ratio: 1355 / 950;
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; }

.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(92deg, #000 0%, rgba(0,0,0,0.96) 34%, rgba(0,0,0,0.74) 52%, rgba(0,0,0,0.22) 76%, rgba(0,0,0,0) 94%),
    linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 18%),
    linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0) 24%);
}
.hero__glow {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(54% 46% at 16% 78%, rgba(0, 201, 142, 0.10), transparent 72%),
    radial-gradient(42% 34% at 6% 14%, rgba(0, 201, 142, 0.09), transparent 70%);
  animation: drift 30s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, -2%, 0) scale(1.07); }
}

.hero__inner {
  position: relative;
  width: 100%; max-width: var(--wide); margin: 0 auto;
  container-type: inline-size;
}
.hero__tag { margin-bottom: clamp(22px, 4vh, 40px); }

/* --- masthead ------------------------------------------------------------
   13.8cqw is measured, not guessed: "Unblocking" sets 6.94em wide at weight
   900 with -0.045em tracking, so 0.96 / 6.94 fills the measure with a hair of
   air. Re-measure if the tracking or the word changes.                     */
.mast {
  display: flex; flex-direction: column;
  font-weight: 900; line-height: 0.84; letter-spacing: -0.045em;
  text-transform: uppercase;
}
.mast__line { display: block; }
.mast__a { font-size: 13.8cqw; }
.mast__b { display: flex; align-items: flex-end; gap: clamp(14px, 2.2cqw, 34px); font-size: 13.8cqw; }
.mast__word { flex: none; }
.mast__rule {
  flex: 1 1 auto; height: 2px; margin-bottom: 0.22em;
  background: linear-gradient(90deg, var(--mark), rgba(0, 201, 142, 0.10));
}
.mast__spec {
  flex: none; margin-bottom: 0.5em;
  font: 500 clamp(0.6875rem, 1.05cqw, 0.875rem)/1.5 var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--meta); text-align: right;
  text-shadow: 0 1px 16px #000, 0 0 6px #000;
}

.deck {
  margin-top: clamp(20px, 3.4vh, 38px);
  font-weight: 300;
  font-size: clamp(1.5rem, 6cqw, 4.5rem);
  line-height: 1.06; letter-spacing: -0.026em;
  color: var(--white); max-width: 22ch;
}

.hero__foot {
  margin-top: clamp(34px, 5.4vh, 58px);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 18px clamp(24px, 4vw, 44px);
}
.hero__note { font-size: 0.875rem; line-height: 1.6; color: var(--meta-lit); max-width: 36ch; }

/* A static index of the afternoon instead of a bouncing scroll cue. */
.hero__foot-rule {
  position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(26px, 4.5vh, 48px);
  display: flex; flex-wrap: wrap; gap: 8px clamp(18px, 3vw, 44px);
  padding-top: 16px;
  border-top: 1px solid var(--grid);
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--meta);
}
.hero__foot-rule span::before {
  content: ""; display: inline-block; vertical-align: 0.12em;
  width: 4px; height: 4px; margin-right: 9px;
  background: var(--grid-lit);
}
.hero__foot-rule span:first-child::before { background: var(--mark); }

/* --- load sequence ------------------------------------------------------- */
.hero__tag, .mast__line, .deck, .hero__foot, .hero__foot-rule { animation: rise 0.95s var(--ease) both; }
.hero__tag       { animation-delay: 0.08s; }
.mast__a         { animation-delay: 0.16s; }
.mast__b         { animation-delay: 0.26s; }
.deck            { animation-delay: 0.38s; }
.hero__foot      { animation-delay: 0.50s; }
.hero__foot-rule { animation-delay: 0.66s; }
.hero__art img   { animation: settle 2.6s var(--ease) both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none;             clip-path: inset(0 0 -30% 0); }
}
@keyframes settle {
  from { opacity: 0; transform: scale(1.10); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   THE ARGUMENT
   The page's one big typographic act. Everything else stays quiet.
   ========================================================================== */
.thesis {
  border-top: 1px solid var(--grid);
  padding: clamp(88px, 13vw, 176px) var(--gut);
}
.thesis__inner { max-width: var(--wide); margin: 0 auto; }
.thesis .tag { margin-bottom: clamp(34px, 5vw, 60px); }

.thesis__say {
  font-weight: 800;
  font-size: clamp(1.75rem, 5.3vw, 4.5rem);
  line-height: 1.14;
  letter-spacing: -0.04em;
}
.thesis__soft { font-weight: 300; color: var(--grid-lit); }

.w {
  position: relative;
  color: var(--white);
  opacity: 0;
  transform: translateY(0.16em);
  transition:
    opacity 0.7s var(--ease) calc(0.12s + var(--i) * 0.13s),
    transform 0.7s var(--ease) calc(0.12s + var(--i) * 0.13s);
}
.w::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.02em;
  height: 2px; background: var(--mark);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.7s var(--ease) calc(0.30s + var(--i) * 0.13s);
}
.is-in .w { opacity: 1; transform: none; }
.is-in .w::after { transform: scaleX(1); }

.thesis__after {
  margin-top: clamp(34px, 4.6vw, 56px);
  max-width: 44ch;
  color: var(--text2);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
}

/* ==========================================================================
   SPINE SECTIONS
   One hairline runs the left edge of every section and threads the program
   together. The label rides it and sticks while you read.
   ========================================================================== */
.seg {
  --pad: clamp(76px, 11vw, 152px);
  position: relative;
  max-width: var(--wide); margin: 0 auto;
  padding: var(--pad) var(--gut);
  display: grid;
  grid-template-columns: var(--spine) minmax(0, 1fr);
  gap: 0 clamp(24px, 4vw, 64px);
}
.seg + .seg { padding-top: 0; }
.seg::after {
  content: ""; position: absolute;
  left: var(--gut); top: var(--pad); bottom: var(--pad);
  width: 1px;
  background: linear-gradient(180deg, var(--mark) 0, rgba(0,201,142,0.3) 56px, var(--grid) 128px, var(--grid) 100%);
}
.seg + .seg::after { top: 0; }

.seg__label {
  position: sticky; top: 96px; align-self: start;
  padding: 0.55em 0 0 20px;
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--meta);
}
.seg__label::after {
  content: ""; position: absolute; left: -2px; top: 0.42em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--mark);
  box-shadow: 0 0 0 5px var(--black);
}

.seg__body { min-width: 0; }
/* A section with no label still has to sit in the second column, or the body
   collapses into the 172px spine track. */
.seg--nolabel .seg__body { grid-column: 2; }
.seg__head {
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3.375rem);
  line-height: 1.02; letter-spacing: -0.038em;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.seg__intro {
  color: var(--meta-lit); max-width: 48ch;
  margin-bottom: clamp(34px, 4.4vw, 58px);
}

.lede {
  font-weight: 300;
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  line-height: 1.42; letter-spacing: -0.017em;
  max-width: 32ch;
}
.lede + .lede { margin-top: clamp(20px, 2.4vw, 30px); }
[data-placeholder] {
  color: var(--mark);
  border: 1px dashed rgba(0, 201, 142, 0.42);
  border-radius: 4px;
  background: rgba(0, 201, 142, 0.04);
  padding: clamp(26px, 3vw, 40px);
  max-width: none;
  font-family: var(--mono); font-weight: 400;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.4; letter-spacing: 0;
}
[data-placeholder]::after {
  content: "event description pending";
  display: block; margin-top: 16px;
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(0, 201, 142, 0.6);
}

/* ==========================================================================
   SPEAKER CARDS  (the feature)
   Two states by design, not by fallback: with a portrait, and with none. The
   no-portrait plate sets the surname at plate scale in the brand's own grid
   colour, so it reads as a commissioned treatment rather than a missing image.
   ========================================================================== */
/* The feature grid reclaims the spine column: the heading stays indented on
   the wire, the cards run the full measure. */
.cards, .cards__note { margin-left: calc(40px - var(--spine) - clamp(24px, 4vw, 64px)); }

.card__link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; padding-bottom: 5px;
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.14em; text-transform: lowercase;
  color: var(--meta); text-decoration: none;
  border-bottom: 1px solid var(--grid);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card__link i { font-style: normal; }
.card__link:hover { color: var(--mint); border-color: var(--mint); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px) clamp(20px, 2.4vw, 34px);
}

.card { position: relative; }

.card__plate {
  position: relative;
  aspect-ratio: 5 / 6;
  background: var(--plate);
  border: 1px solid var(--grid);
  overflow: hidden;
  container-type: inline-size;
  transition: border-color 0.5s var(--ease);
}
.card:hover .card__plate { border-color: var(--grid-lit); }

.card__photo {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  filter: grayscale(1) contrast(1.05) brightness(0.92);
  transition: filter 0.85s var(--ease), transform 1.3s var(--ease);
}
.card:hover .card__photo { filter: none; transform: scale(1.035); }

/* The no-portrait plate: a set nameplate, not an empty frame.
   The surname is fitted to the plate rather than guessed at. Open Sauce Sans
   caps run ~0.615em per character at weight 900 with -0.05em tracking, so
   140cqw / (letter count) lands every name on the same measure. Each card
   carries its own --n. */
.card__nameplate {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 6cqw 7cqw;
}
.card__first {
  font: 500 clamp(0.5rem, 2.6cqw, 0.8125rem)/1 var(--mono);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mark);
  margin-bottom: 1.4em;
}
.card__last {
  font-weight: 900;
  /* no-JS baseline; fitName() in preview-a.js measures and overrides it */
  font-size: calc(118cqw / var(--n, 7));
  line-height: 0.78; letter-spacing: -0.05em; text-transform: uppercase;
  color: var(--grid-lit);
  white-space: nowrap;
  align-self: flex-start;
  transition: color 0.6s var(--ease);
}
.card__ruleline {
  display: block; height: 1px; width: 100%;
  margin-top: 1.2em;
  background: var(--grid-lit);
  transform: scaleX(0.3); transform-origin: 0 50%;
  transition: transform 0.8s var(--ease), background-color 0.6s var(--ease);
}
.card:hover .card__last { color: #55554F; }
.card:hover .card__ruleline { transform: scaleX(1); background: var(--mark); }

/* A real portrait supersedes the typographic plate. */
.card__plate:has(.card__photo) .card__nameplate { display: none; }

.card__flag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  font: 500 0.5625rem/1 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mark);
  border: 1px solid rgba(0, 201, 142, 0.45);
  border-radius: 9999px;
  padding: 6px 11px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}

.card__role {
  margin-top: 18px;
  font: 500 0.5625rem/1 var(--mono);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--meta);
}
.card__name {
  margin-top: 12px;
  font-weight: 800;
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.04; letter-spacing: -0.036em;
  color: var(--white);
}
.card__cred {
  margin-top: 10px;
  font-size: 0.875rem; line-height: 1.5;
  color: var(--meta-lit);
  max-width: 32ch;
}
.card__fact {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--grid);
  font-size: 0.875rem; line-height: 1.58;
  color: var(--text2);
}
.card__fact::before {
  content: "Worth knowing";
  display: block; margin-bottom: 8px;
  font: 500 0.5625rem/1 var(--mono);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mark);
}

.cards__note {
  margin-top: clamp(28px, 3.4vw, 40px);
  padding-top: 18px;
  border-top: 1px solid var(--grid);
  font-size: 0.8125rem; color: var(--meta);
  max-width: 62ch;
}

/* ==========================================================================
   CONVERSION BAND
   ========================================================================== */
.band {
  border-top: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
  padding: clamp(32px, 5vw, 50px) var(--gut);
  background: linear-gradient(180deg, rgba(0, 201, 142, 0.05), rgba(0, 0, 0, 0));
}
.band__inner {
  max-width: var(--wide); margin: 0 auto;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px clamp(24px, 4vw, 48px);
}
.band__lead {
  flex: 0 1 auto; max-width: 15ch;
  font-weight: 700; font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.2; letter-spacing: -0.028em;
}
.band__body { flex: 1 1 300px; max-width: 46ch; font-size: 0.9375rem; line-height: 1.56; color: var(--meta-lit); }
.band .btn { flex: none; }

/* ==========================================================================
   STATIONS
   Deliberately a different shape from the speaker cards: these are objects on
   a floor, not people on a stage.
   ========================================================================== */
.stations {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--grid);
  border: 1px solid var(--grid);
}
.stn {
  background: var(--black);
  padding: clamp(28px, 3.2vw, 44px);
  transition: background-color 0.5s var(--ease);
  display: flex; flex-direction: column; align-items: flex-start;
}
.stn:hover { background: #060605; }
.stn__co {
  display: flex; align-items: center; gap: 9px;
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--mark);
}
.stn__co::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--mark); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.stn__what {
  margin-top: 20px; font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.14; letter-spacing: -0.03em;
}
.stn__fact {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--grid);
  font-size: 0.9375rem; line-height: 1.58; color: var(--text2);
  max-width: 50ch;
}
.stn__by {
  margin-top: 18px;
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--meta);
}

/* ==========================================================================
   RUN OF SHOW  /  FACTS
   ========================================================================== */
.run { border-top: 1px solid var(--grid); }
.run__i {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px clamp(20px, 3vw, 40px); align-items: baseline;
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid var(--grid);
}
.run__t {
  font: 500 0.75rem/1.4 var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mark); white-space: nowrap;
}
.run__w { font-size: clamp(1.0625rem, 1.9vw, 1.375rem); line-height: 1.34; letter-spacing: -0.02em; }
.run__i--soft .run__t { color: var(--meta); }
.run__i--soft .run__w { color: var(--meta-lit); }

.facts { border-top: 1px solid var(--grid); }
.fact {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px clamp(20px, 3vw, 40px);
  padding: 16px 0; border-bottom: 1px solid var(--grid);
}
.fact dt {
  font: 500 0.625rem/1.9 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--meta);
}
.fact dd { margin: 0; font-size: 0.9375rem; color: var(--text2); }

/* ==========================================================================
   SPONSORS
   ========================================================================== */
.plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 230px)); gap: 16px; }
.plate {
  border: 1px solid var(--grid);
  padding: 32px 22px 20px; text-align: center;
  transition: border-color 0.4s var(--ease);
}
.plate:hover { border-color: var(--grid-lit); }
.plate--type span { display: block; font-weight: 700; font-size: 1.375rem; letter-spacing: -0.028em; color: var(--white); }
/* Sponsor marks: a plain row, no frames and no captions. */
.marks {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(34px, 5vw, 76px);
}
.mark { width: auto; max-width: 100%; opacity: 0.88; transition: opacity 0.4s var(--ease); }
.mark:hover { opacity: 1; }
.plate__st {
  margin-top: 14px;
  font: 500 0.5625rem/1 var(--mono);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mint);
}
.plate.is-soft .plate__st { color: var(--mark); }

/* ==========================================================================
   CLOSE  /  FOOTER
   ========================================================================== */
.close {
  border-top: 1px solid var(--grid);
  margin-top: clamp(56px, 8vw, 104px);
  padding: clamp(52px, 7vw, 92px) var(--gut);
}
.close__inner {
  max-width: var(--wide); margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(26px, 4vw, 56px); flex-wrap: wrap;
}
.close__sig { min-width: 0; }
/* Signature scale, sentence case. The hero already shouted the title in caps; saying
   it twice at hero size is the tell. */
.close__head {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.375rem, 2.7vw, 2.125rem);
  line-height: 1.06; letter-spacing: -0.032em;
  max-width: 46ch;
}
.close__when {
  margin: 14px 0 0;
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--meta-lit);
}
.close__note { margin: 26px auto 0; max-width: 44ch; font-size: 0.875rem; color: var(--meta); }

.foot { border-top: 1px solid var(--grid); padding: clamp(40px, 5vw, 62px) var(--gut); }
.foot__inner {
  max-width: var(--wide); margin: 0 auto;
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 10px clamp(24px, 4vw, 48px);
  font-size: 0.8125rem;
}
.foot__hosts { font-weight: 700; letter-spacing: -0.012em; }
.foot__line, .foot__credit { color: var(--meta); }
.foot__up {
  margin-left: auto; color: var(--meta); text-decoration: none;
  font: 500 0.625rem/1 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  transition: color 0.25s;
}
.foot__up:hover { color: var(--white); }
.foot__up i { font-style: normal; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.seg__label, .seg__head, .seg__intro, .lede,
.card, .stn, .run__i, .fact, .plate, .cards__note,
.band__inner > *, .close__inner > *, .thesis__after {
  opacity: 0; transform: translateY(18px);
  transition:
    opacity 0.75s var(--ease) calc(var(--i, 0) * 70ms),
    transform 0.75s var(--ease) calc(var(--i, 0) * 70ms);
}
.is-in .seg__label, .is-in .seg__head, .is-in .seg__intro, .is-in .lede,
.is-in .card, .is-in .stn, .is-in .run__i, .is-in .fact, .is-in .plate,
.is-in .cards__note, .is-in .band__inner > *, .is-in .close__inner > *,
.is-in .thesis__after {
  opacity: 1; transform: none;
}
.no-js .seg__label, .no-js .seg__head, .no-js .seg__intro, .no-js .lede,
.no-js .card, .no-js .stn, .no-js .run__i, .no-js .fact, .no-js .plate,
.no-js .cards__note, .no-js .band__inner > *, .no-js .close__inner > *,
.no-js .thesis__after, .no-js .w {
  opacity: 1; transform: none;
}
.no-js .w::after { transform: scaleX(1); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  :root { --spine: 132px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --spine: 0px; }

  .seg { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .seg__label { position: static; padding: 0 0 0 18px; }
  .seg__label::after { top: 0.34em; }
  .seg::after { top: calc(var(--pad) - 4px); }
  .seg + .seg::after { top: -4px; }

  .mast__b { flex-wrap: wrap; gap: 10px 16px; }
  .mast__rule { display: none; }
  .mast__spec { text-align: left; margin-bottom: 0.35em; }
  .deck { font-size: clamp(1.5rem, 8.6cqw, 2.25rem); max-width: none; }

  .hero { padding-top: clamp(86px, 15vh, 128px); padding-bottom: clamp(150px, 24vh, 210px); }
  .hero__art { width: 128%; right: -26%; bottom: -6%; }
  /* The desktop scrim runs left to right, which on a narrow viewport covers
     the artwork almost entirely. On a phone the type stacks above it, so the
     scrim runs top to bottom instead and the artwork keeps the lower third. */
  .hero::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 34%, rgba(0,0,0,0.10) 58%, rgba(0,0,0,0) 72%),
      linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0) 20%);
  }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .hero__foot-rule { gap: 6px 18px; font-size: 0.5625rem; letter-spacing: 0.18em; }

  .rail { gap: 12px; padding: 10px 18px; }
  .rail__spec { display: none; }

  .thesis__say { max-width: none; }
  .band__inner { flex-direction: column; align-items: flex-start; }

  .cards, .cards__note { margin-left: 0; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .card__name { font-size: 1.25rem; }
  .card__cred { font-size: 0.8125rem; }

  .run__i, .fact { grid-template-columns: minmax(0, 1fr); }
  .plates { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

@media (max-width: 520px) {
  .cards { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* One up on a phone: square portraits keep the faces readable without
     making eight cards an endless scroll. */
  .card__plate { aspect-ratio: 1 / 1; }
  .hero__foot-rule span:nth-child(n + 3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rail { transform: none; }
  .w { opacity: 1; transform: none; }
  .w::after { transform: scaleX(1); }
  .seg__label, .seg__head, .seg__intro, .lede,
  .card, .stn, .run__i, .fact, .plate, .cards__note,
  .band__inner > *, .close__inner > *, .thesis__after { opacity: 1; transform: none; }
}