/* KSU components. Colors, spacing, radii and fonts come from tokens.css.
   All motion runs on GSAP in bundle.js; this file holds only resting states and hover transitions. */
:root { --ksu-hover: 500ms cubic-bezier(0.215, 0.61, 0.355, 1); }

/* Page frame */
.ksu-page {
  box-sizing: border-box;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
  background: var(--bg-page);
  color: var(--ink);
  font: 400 16px/22px var(--font-sans);
  letter-spacing: -0.01em;
}
.ksu-page *, .ksu-page *::before, .ksu-page *::after { box-sizing: border-box; }
@media (max-width: 720px) { .ksu-page { padding-inline: var(--space-4); } }

/* Cta */
.ksu-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border: 0;
  border-radius: var(--radius-none);
  background: none;
  color: var(--ink);
  font: 500 18px/1 var(--font-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ksu-cta--accent { color: var(--accent); transition: color var(--ksu-hover); }
.ksu-cta--accent:hover { color: var(--ink); }
.ksu-cta--solid { padding: var(--space-4) var(--space-8); border-radius: var(--radius-none); background: var(--accent); color: var(--on-accent); }
.ksu-cta__arrow { width: 0.8em; height: 0.8em; flex: none; transition: transform var(--ksu-hover); }
.ksu-cta:hover .ksu-cta__arrow { transform: translate(3px, -3px); }
.ksu-cta:focus-visible, .ksu-nav__link:focus-visible, .ksu-data a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.ksu-cta--solid:focus-visible { outline-color: var(--ink); }

/* NavBar */
.ksu-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-6);
}
.ksu-nav__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); margin: 0; padding: 0; list-style: none; }
.ksu-nav--glass { background: color-mix(in srgb, var(--bg-page) 55%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ksu-nav__link {
  display: inline-block;
  padding-block: var(--space-2);
  color: var(--ink);
  font: 500 20px/1 var(--font-label);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--ksu-hover);
}
.ksu-nav__link:hover { color: var(--accent); }
.ksu-glyph { width: 10px; height: 10px; flex: none; fill: var(--accent); }
@media (max-width: 720px) {
  .ksu-nav__links { gap: var(--space-2) var(--space-4); }
  .ksu-nav__link { font-size: 15px; }
}

/* HeroTitle */
.ksu-hero-title {
  margin: 0 0 -0.3em;
  overflow: hidden;
  color: var(--accent);
  font: 700 var(--ksu-hero-size, clamp(88px, 22.2vw, 320px)) / 0.8 var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ksu-hero-title--short { --ksu-hero-size: clamp(96px, 34vw, 518px); font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.02em; }
.ksu-hero-head > * { min-width: 0; }
.ksu-hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); }
.ksu-hero-meta { display: grid; gap: var(--space-2); margin: var(--space-6) 0 0; padding: 0; list-style: none; color: var(--ink-muted); font: 400 12px/17px var(--font-mono); letter-spacing: 0; text-align: right; text-transform: uppercase; }
@media (max-width: 720px) { .ksu-hero-meta { display: none; } }
.ksu-hero-panels { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 720px) { .ksu-hero-panels { grid-template-columns: 1fr; } }

/* Photo */
.ksu-photo-frame { position: relative; overflow: hidden; min-height: 200px; border-radius: var(--radius-none); background: var(--surface-1); }
.ksu-photo-frame--sm { border-radius: var(--radius-none); }
.ksu-photo { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.05); }
.ksu-photo-frame > .ksu-photo { position: absolute; inset: 0; }
.ksu-photo--mono { filter: grayscale(1) contrast(1.15); }
/* Stand-in for a stage photo until real photography is supplied. */
.ksu-photo--stage {
  background:
    linear-gradient(to top, var(--bg-page) 0 18%, transparent 46%),
    conic-gradient(from 168deg at 22% -6%, transparent 0 4deg, var(--ink) 9deg 15deg, transparent 22deg 360deg),
    conic-gradient(from 172deg at 50% -6%, transparent 0 4deg, var(--ink) 9deg 15deg, transparent 22deg 360deg),
    conic-gradient(from 176deg at 78% -6%, transparent 0 4deg, var(--ink) 9deg 15deg, transparent 22deg 360deg),
    radial-gradient(ellipse at 20% 10%, var(--accent-deep), transparent 60%),
    radial-gradient(ellipse at 50% 30%, var(--ink-ghost), var(--surface-1) 70%);
}

/* HeroCard */
.ksu-hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
  min-height: 560px;
  padding: var(--space-8);
  border-radius: var(--radius-none);
  background: var(--surface-1);
  color: var(--ink);
}
.ksu-hero-card__head, .ksu-hero-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.ksu-hero-card__label { color: var(--ink-muted); font: 500 16px/1 var(--font-label); letter-spacing: 0.04em; text-transform: uppercase; }
.ksu-hero-card__statement {
  max-width: 16em;
  margin: 0;
  font: 500 clamp(19px, 1.95vw, 28px) / 1.57 var(--font-label);
  letter-spacing: 0;
  text-transform: uppercase;
}
.ksu-hero-card__date {
  margin: auto 0 0;
  color: var(--accent);
  font: 700 clamp(140px, 16.7vw, 240px) / 0.9 var(--font-compressed);
  font-variant-numeric: tabular-nums;
}
.ksu-hero-card__aside { font: 400 18px/22px var(--font-sans); font-variant-numeric: tabular-nums; }
.ksu-hero-card__date + .ksu-hero-card__foot { margin-top: calc(var(--space-6) * -1); }
.ksu-dots { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); margin: 0; padding: 0; list-style: none; color: var(--ink); font: 400 18px/22px var(--font-sans); }
.ksu-dots li { display: inline-flex; align-items: center; gap: var(--space-2); }
.ksu-dots li::before { content: ""; width: 12px; height: 12px; border-radius: var(--radius-none); background: var(--accent); }
@media (max-width: 720px) { .ksu-hero-card { min-height: 0; padding: var(--space-6) var(--space-4); } }

/* BracketText */
.ksu-bracket {
  margin: 0;
  color: var(--accent);
  font: 500 clamp(18px, 1.67vw, 24px) / 1.33 var(--font-heading);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.ksu-bracket::before { content: "["; margin-right: 2.2em; }
.ksu-bracket::after { content: "]"; margin-left: 2em; }
.ksu-bracket__gap { display: inline-block; width: 4em; }
.ksu-tag { color: var(--ink); font: 400 11px/17px var(--font-mono); letter-spacing: 0; text-transform: uppercase; }
.ksu-tag::before { content: "[\00a0"; }
.ksu-tag::after { content: "\00a0]"; }
.ksu-tag--note { display: block; max-width: 190px; text-align: right; }
.ksu-tag--note::before { margin-right: 2.5em; }
.ksu-tag--note::after { margin-left: 2.5em; }
.ksu-lead { max-width: 170px; margin: 0; color: var(--ink); font: 400 17px/24px var(--font-serif); letter-spacing: 0; text-align: right; }

/* FeatureIndex */
.ksu-index { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: ksu-index; }
.ksu-index__item {
  grid-column: span 3;
  padding-block: var(--space-2);
  border-bottom: var(--hairline) solid var(--line);
  color: var(--ink-faint);
  font: 500 12px/17px var(--font-heading);
  letter-spacing: 0;
  text-transform: uppercase;
  counter-increment: ksu-index;
  transition: color var(--ksu-hover);
}
.ksu-index__item:nth-child(n + 5) { grid-column: span 4; }
.ksu-index__item::before {
  content: counter(ksu-index, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-1);
  color: var(--ink-ghost);
  font: 400 11px/17px var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ksu-index__label { display: block; max-width: 14em; }
.ksu-index__sub { display: block; color: var(--ink-ghost); font: 400 11px/17px var(--font-mono); }
.ksu-index__item:hover { color: var(--accent); }
@media (max-width: 720px) { .ksu-index__item, .ksu-index__item:nth-child(n + 5) { grid-column: span 6; } }

/* PromoCard */
.ksu-promo-card { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; max-width: 564px; padding: var(--space-4); border-radius: var(--radius-none); background: var(--surface-2); color: var(--ink); }
.ksu-promo-card__media { aspect-ratio: 532 / 300; min-height: 0; max-width: 100%; border-radius: var(--radius-none); }
.ksu-promo-card__label { color: var(--ink-muted); font: 400 15px/20px var(--font-sans); letter-spacing: -0.01em; text-transform: uppercase; }
.ksu-promo-card__note { align-self: flex-end; }
.ksu-promo-card__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.ksu-promo-card__title { margin: 0; font: 500 clamp(28px, 2.6vw, 38px) / 1.37 var(--font-heading); letter-spacing: -0.01em; text-transform: uppercase; }
.ksu-promo-card__title .ksu-tag { margin-left: var(--space-4); vertical-align: 1.6em; color: var(--ink); }

/* Eyebrow */
.ksu-eyebrow { margin: 0; color: var(--accent); font: 400 12px/17px var(--font-mono); letter-spacing: 0; text-transform: uppercase; }

/* MixList */
.ksu-mixes { margin: 0; padding: 0; list-style: none; }
.ksu-mix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-8);
  padding-block: var(--space-6);
  border-bottom: var(--hairline) solid var(--line);
}
.ksu-mix__body { flex: 1 1 240px; min-width: 0; }
.ksu-mix__title {
  margin: 0;
  color: var(--ink);
  font: 500 clamp(20px, 1.8vw, 26px) / 1.25 var(--font-heading);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transition: color var(--ksu-hover);
}
.ksu-mix__meta { margin: var(--space-1) 0 0; color: var(--ink-muted); font: 400 15px/20px var(--font-sans); letter-spacing: -0.01em; }
.ksu-mix:hover .ksu-mix__title { color: var(--accent); }
.ksu-mix--action { cursor: pointer; }

/* MixPlayer: play buttons in mix rows and the fixed now-playing bar */
.ksu-play {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-none);
  background: var(--surface-2);
  color: var(--accent);
  cursor: pointer;
  transition: background var(--ksu-hover), color var(--ksu-hover);
}
.ksu-play svg { width: 14px; height: 14px; fill: currentColor; }
.ksu-play__pause, .ksu-play[aria-pressed="true"] .ksu-play__play { display: none; }
.ksu-play[aria-pressed="true"] .ksu-play__pause { display: block; }
.ksu-play:hover, .ksu-play[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.ksu-play:focus-visible, .ksu-player__progress:focus-visible, .ksu-player__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Close: puts the player bar away */
.ksu-player__close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--ink-muted); cursor: pointer; transition: color var(--ksu-hover); }
.ksu-player__close:hover { color: var(--ink); }
.ksu-player__close svg { width: 16px; height: 16px; }
.ksu-mix.is-playing .ksu-mix__title { color: var(--accent); }
.ksu-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-4) var(--space-8) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--surface-2);
  color: var(--ink);
}
.ksu-player[hidden] { display: none; }
.ksu-player__body { display: grid; gap: var(--space-2); flex: 1; min-width: 0; }
.ksu-player__title { margin: 0; overflow: hidden; font: 500 14px/20px var(--font-heading); letter-spacing: -0.01em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ksu-player__progress { position: relative; height: 12px; cursor: pointer; }
.ksu-player__progress--wave { height: 32px; }
.ksu-player__progress--wave::before { display: none; }
.ksu-player__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ksu-player__progress::before, .ksu-player__fill { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--line); }
.ksu-player__fill { background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.ksu-player__time { flex: none; color: var(--ink-muted); font: 400 12px/17px var(--font-mono); font-variant-numeric: tabular-nums; }
.ksu-player__frame { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
@media (max-width: 720px) {
  .ksu-player { flex-wrap: wrap; padding-inline: var(--space-4); }
  .ksu-player .ksu-cta { display: none; }
}

/* DataList */
.ksu-data { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-4) var(--space-8); margin: 0; }
.ksu-data dt { color: var(--ink-muted); font: 400 12px/22px var(--font-mono); letter-spacing: 0; text-transform: uppercase; }
.ksu-data dd { margin: 0; color: var(--ink); font: 400 18px/22px var(--font-sans); overflow-wrap: anywhere; }
.ksu-data a { color: inherit; text-decoration: none; }
.ksu-data a:hover { color: var(--accent); }
.ksu-data--stacked { grid-template-columns: minmax(0, 1fr); gap: 0; }
.ksu-data--stacked dd { margin-bottom: var(--space-4); }

/* PaperSection */
.ksu-paper { padding: var(--space-12) var(--space-8); background: var(--paper); color: var(--on-paper); }
.ksu-paper .ksu-eyebrow, .ksu-paper .ksu-vertical-title, .ksu-paper .ksu-bracket { color: var(--accent-deep); }
.ksu-paper .ksu-stair, .ksu-paper .ksu-cta, .ksu-paper .ksu-lead { color: var(--on-paper); }
.ksu-paper .ksu-index__item { border-color: var(--paper-line); color: var(--on-paper); }
.ksu-paper .ksu-index__item::before, .ksu-paper .ksu-index__sub { color: var(--on-paper-muted); }
.ksu-paper .ksu-index__item:hover { color: var(--accent-deep); }
.ksu-paper .ksu-cta:focus-visible { outline-color: var(--accent-deep); }
@media (max-width: 720px) { .ksu-paper { padding: var(--space-8) var(--space-4); } }

/* RingField */
.ksu-rings { position: relative; isolation: isolate; background: var(--bg-backdrop); }
.ksu-rings::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, transparent calc(var(--ring-radius) - 1px), var(--ring-dim) var(--ring-radius) calc(var(--ring-radius) + 1.5px), transparent calc(var(--ring-radius) + 2.5px));
  background-position: calc(var(--ring-pitch) / -2) calc(var(--ring-pitch) / -2);
  background-size: var(--ring-pitch) var(--ring-pitch);
}
.ksu-rings__lit { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: hidden; pointer-events: none; filter: drop-shadow(0 0 10px var(--ring)); }
.ksu-rings__lit circle { fill: none; stroke: var(--ring); stroke-width: 2px; opacity: 0; }

/* VerticalTitle and the staircase paragraph beside it */
.ksu-vertical-title {
  margin: 0;
  color: var(--accent);
  font: 700 clamp(96px, 16.7vw, 240px) / 0.85 var(--font-display);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.ksu-stair { display: grid; gap: 0; color: var(--ink-faint); font: 400 17px/24px var(--font-serif); letter-spacing: 0; }
.ksu-stair > * { margin: 0; }
.ksu-stair > :nth-child(2) { margin-left: var(--space-40); }
.ksu-stair > :nth-child(n + 3) { margin-left: calc(var(--space-40) + var(--space-16)); }
@media (max-width: 720px) { .ksu-stair > :nth-child(n + 2) { margin-left: var(--space-8); } }

/* SectionTitle */
.ksu-section-title { margin: 0; color: var(--ink); font: 500 clamp(40px, 7.2vw, 104px) / 0.95 var(--font-heading); letter-spacing: -0.02em; text-transform: uppercase; }
.ksu-paper .ksu-section-title { color: var(--on-paper); }

/* SectionHead: a centered title with a serif intro */
.ksu-section-head { display: grid; justify-items: center; gap: var(--space-6); max-width: 700px; margin: 0 auto var(--space-16); text-align: center; }
.ksu-intro { margin: 0; color: var(--ink); font: 400 clamp(20px, 2vw, 28px) / 1.3 var(--font-serif); }
.ksu-paper .ksu-intro { color: var(--on-paper); }

/* PhotoStrip: a tilted row of photos that slides with the scroll */
.ksu-strip { overflow: hidden; padding-block: var(--space-12); }
.ksu-strip__track { display: flex; gap: var(--space-2); width: max-content; margin: 0; padding: 0; list-style: none; transform: rotate(-3deg); transform-origin: 0 50%; will-change: transform; }
.ksu-strip__item { flex: none; height: clamp(180px, 22vw, 300px); overflow: hidden; border-radius: var(--radius-none); background: var(--surface-1); }
.ksu-strip__item img { display: block; width: auto; height: 100%; filter: saturate(0.9) contrast(1.05); }

/* Spotlight: a soft light that follows the pointer across a card */
.ksu-spot { position: relative; overflow: hidden; }
.ksu-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(520px circle at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px), color-mix(in srgb, var(--ink) 12%, transparent), transparent 40%);
  transition: opacity var(--ksu-hover);
}
.ksu-spot:hover::after { opacity: 1; }

/* Mega: one giant word that opens a section. With data-ksu-fit the script sizes it to fill its container. */
.ksu-mega { display: block; width: max-content; max-width: none; margin: 0; color: var(--ink); font: 500 clamp(64px, 18vw, 300px) / 0.8 var(--font-heading); letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap; }
.ksu-mega--over { position: relative; z-index: 2; margin-bottom: -0.22em; mix-blend-mode: difference; pointer-events: none; }
.ksu-paper .ksu-mega { color: var(--on-paper); }

/* AccentSection: the one full-bleed coral section, for the mixes */
.ksu-accent { position: relative; z-index: 6; padding: var(--space-24) var(--space-8); background: var(--accent); color: var(--on-accent); }
.ksu-accent .ksu-mega, .ksu-accent .ksu-eyebrow, .ksu-accent .ksu-cta, .ksu-accent .ksu-intro,
.ksu-accent .ksu-mix__title, .ksu-accent .ksu-mix:hover .ksu-mix__title, .ksu-accent .ksu-mix__meta, .ksu-accent .ksu-mix__no { color: var(--on-accent); }
.ksu-accent .ksu-mix { border-color: color-mix(in srgb, var(--on-accent) 35%, transparent); }
.ksu-accent .ksu-mix.is-playing .ksu-mix__title { color: var(--ink); }
.ksu-accent .ksu-play { background: var(--on-accent); color: var(--accent); }
.ksu-accent .ksu-play:hover, .ksu-accent .ksu-play[aria-pressed="true"] { background: var(--ink); color: var(--on-accent); }
.ksu-accent .ksu-play:focus-visible, .ksu-accent .ksu-cta:focus-visible { outline-color: var(--on-accent); }
@media (max-width: 720px) { .ksu-accent { padding: var(--space-16) var(--space-4); } }

/* MixList, large: numbered rows with big titles */
.ksu-mixes--xl .ksu-mix { gap: var(--space-4) var(--space-8); padding-block: var(--space-8); }
.ksu-mixes--xl .ksu-mix__title { font-size: clamp(26px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -0.02em; }
.ksu-mixes--xl .ksu-mix__meta { margin-top: var(--space-2); font-size: 16px; line-height: 22px; }
.ksu-mixes--xl .ksu-play { width: clamp(56px, 6vw, 88px); height: clamp(56px, 6vw, 88px); }
.ksu-mixes--xl .ksu-play svg { width: 18px; height: 18px; }
.ksu-mix__no { flex: none; width: 2.5em; color: var(--ink-ghost); font: 400 12px/17px var(--font-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .ksu-mix__no { display: none; } }

/* VideoCover: a YouTube cover image that becomes the player when pressed */
.ksu-video { margin: 0; min-width: 0; }
.ksu-video__cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-none); background: var(--surface-1); color: var(--on-accent); cursor: pointer; }
.ksu-video--tall .ksu-video__cover { aspect-ratio: 9 / 16; }
.ksu-video__cover[hidden] { display: none; }
.ksu-video__cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.ksu-video__cover:hover > img { transform: scale(1.04); }
.ksu-video__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(72px, 9vw, 136px); height: clamp(72px, 9vw, 136px); border-radius: var(--radius-none); background: var(--accent); translate: -50% -50%; transition: scale var(--ksu-hover), background var(--ksu-hover); }
.ksu-video--tall .ksu-video__play { width: 72px; height: 72px; }
.ksu-video__play svg { width: 26%; height: 26%; fill: currentColor; translate: 8% 0; }
.ksu-video__cover:hover .ksu-video__play { scale: 1.1; background: var(--ink); }
.ksu-video__cover:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ksu-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ksu-video__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-top: var(--space-4); }
.ksu-video__title { color: var(--ink); font: 500 clamp(16px, 1.5vw, 22px) / 1.25 var(--font-heading); letter-spacing: -0.01em; text-transform: uppercase; }
.ksu-video__meta { color: var(--ink-muted); font: 400 12px/17px var(--font-mono); text-transform: uppercase; }

/* Collage: photos on a 12-column grid, placed off the rhythm on purpose; the page sets each item's columns and offsets */
.ksu-collage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2); align-items: start; }
.ksu-collage > * { min-width: 0; min-height: 0; }

.ksu-intro--xl { font-size: clamp(24px, 3.2vw, 48px); line-height: 1.2; }

/* Badge: the round booking badge, text on a circle around the CTA arrow */
.ksu-badge { display: block; width: clamp(96px, 10vw, 148px); height: auto; color: var(--accent); }
.ksu-badge text { fill: currentColor; font: 500 15px var(--font-label); letter-spacing: 0.08em; text-transform: uppercase; }
.ksu-badge circle, .ksu-badge #badge-arrow { fill: none; stroke: currentColor; }
.ksu-badge circle { stroke-width: 1.5px; }
.ksu-badge #badge-arrow { stroke-width: 4px; }
a:hover > .ksu-badge, a:focus-visible > .ksu-badge { color: var(--ink); }

/* Waveform: 96 bars; in the player, bars up to the playhead turn accent */
.ksu-wave { display: block; width: 100%; height: 32px; }
.ksu-wave rect { fill: var(--ink-ghost); transition: fill var(--ksu-hover); }
.ksu-wave rect.is-hover { fill: var(--ink-muted); }
.ksu-wave rect.is-on { fill: var(--accent); }
/* Playhead: where the mix is now. Seek marker: where a press would jump to, with the time there. */
.ksu-player__head, .ksu-player__seek { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; pointer-events: none; }
/* The playhead is the same height as the bars and only shows once the mix has moved off the start */
.ksu-player__head { background: var(--ink); opacity: 0; transition: opacity var(--ksu-hover); }
.ksu-player__head.is-on { opacity: 1; }
.ksu-player__seek { background: var(--ink-muted); opacity: 0; }
.ksu-player__progress.is-hover .ksu-player__seek { opacity: 1; }
.ksu-player__seek::after { content: attr(data-time); position: absolute; left: 50%; bottom: 100%; padding: 2px 6px; background: var(--ink); color: var(--on-accent); font: 400 11px/15px var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; translate: -50% -4px; }
.ksu-player__seek[data-time=""]::after { display: none; }

/* Equaliser: three bars that move while a mix plays */
.ksu-eq { width: 12px; height: 12px; flex: none; fill: var(--accent); }
.ksu-eq rect { transform-box: fill-box; transform-origin: 50% 100%; }

/* BeatRing: a circular waveform. A ring with 96 bars standing around it; the script makes them jump on the beat. */
.ksu-beat { display: block; width: min(640px, 90%); height: auto; overflow: visible; pointer-events: none; }
.ksu-beat circle, .ksu-beat path { fill: none; stroke: var(--accent); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ksu-beat line { stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; }

/* Grain: film grain over the whole page, drawn as an SVG noise filter */
.ksu-grain { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; opacity: 0.14; mix-blend-mode: overlay; }
.ksu-grain__tex {
  position: absolute;
  inset: -50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 256px 256px;
}

/* Curtain: the opening screen. The name KSU is the loader: an outline that fills with coral from left to right, then five shutters lift.
   Shown only while the head script has set .ksu-motion. */
.ksu-curtain { position: fixed; inset: 0; z-index: 50; display: none; color: var(--ink); }
.ksu-motion .ksu-curtain { display: block; }
.ksu-curtain__bars { position: absolute; inset: 0; display: flex; }
.ksu-curtain__bars i { flex: 1; margin-right: -1px; background: var(--bg-page); }
.ksu-curtain__top { position: absolute; top: var(--space-8); left: var(--space-8); right: var(--space-8); display: flex; justify-content: space-between; gap: var(--space-6); color: var(--ink-muted); font: 400 12px/17px var(--font-mono); font-variant-numeric: tabular-nums; text-transform: uppercase; }
.ksu-curtain__name { visibility: hidden; position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 500 30vw / 0.74 var(--font-heading); letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap; }
.ksu-curtain__name span { display: block; width: max-content; }
.ksu-curtain__ghost { color: transparent; -webkit-text-stroke: 1.5px var(--ink-ghost); }
.ksu-curtain__fill { position: absolute; left: 0; top: 0; color: var(--accent); clip-path: inset(-10% 100% -10% 0); }
@media (max-width: 720px) {
  .ksu-curtain__top { left: var(--space-4); right: var(--space-4); }
}

/* Cover: the image-led hero. A tall photograph on the right, the name across the bottom: solid beside the photo, outlined over it. */
.ksu-cover { position: relative; isolation: isolate; overflow: visible clip; min-height: calc(100svh - var(--space-16)); }
/* While the next section slides over the pinned hero, the hero dims by this much. */
.ksu-cover::after { content: ""; position: absolute; inset: 0 calc(var(--space-8) * -1); z-index: 5; background: var(--bg-backdrop); opacity: var(--ksu-dim, 0); pointer-events: none; }
.ksu-cover__media { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 58%; min-height: 0; }
.ksu-cover__info { position: relative; z-index: 3; display: grid; gap: var(--space-6); justify-items: start; width: 36%; min-width: 280px; padding-top: 112px; }
.ksu-cover__statement { margin: 0; color: var(--ink); font: 500 clamp(19px, 1.95vw, 28px) / 1.45 var(--font-label); text-transform: uppercase; }
.ksu-cover__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); margin-top: var(--space-4); }
.ksu-cover__title { position: absolute; left: 0; bottom: 0; z-index: 0; display: block; width: max-content; margin: 0; color: var(--accent); font: 500 22vw / 0.74 var(--font-heading); letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap; }
.ksu-cover__title--outline { z-index: 2; color: transparent; -webkit-text-stroke: 2px var(--accent); clip-path: inset(-10% 0 -10% 42%); pointer-events: none; }
.ksu-cover__info { padding-bottom: var(--space-16); }
@media (max-width: 720px) {
  .ksu-cover { display: flex; flex-direction: column; min-height: 0; }
  .ksu-cover__media { position: relative; order: 1; width: 100%; aspect-ratio: 4 / 5; }
  .ksu-cover__title { display: none; }
  .ksu-cover__title--outline { position: relative; order: 2; display: block; margin-top: -0.42em; clip-path: none !important; -webkit-text-stroke-width: 1.5px; }
  .ksu-cover__info { order: 3; width: 100%; padding-top: var(--space-8); }
}
.ksu-cta--xl { padding: var(--space-6) var(--space-12); font-size: clamp(20px, 1.9vw, 28px); }
.ksu-cta--solid:hover { background: var(--ink); }
/* Light solid: a white button with black type, for a solid CTA that sits next to large accent type (the hero) */
.ksu-cta--solid.ksu-cta--light { background: var(--ink); color: var(--on-accent); }
.ksu-cta--solid.ksu-cta--light:hover { background: var(--accent); }
/* Mega solid: the closing call to action. A full-width solid bar with the label at display size and the arrow at its far end. */
.ksu-cta--solid.ksu-cta--mega { display: flex; justify-content: space-between; box-sizing: border-box; width: 100%; padding: clamp(24px, 3.4vw, 56px) clamp(20px, 3.4vw, 56px); font: 500 clamp(44px, 9.6vw, 160px) / 0.85 var(--font-heading); letter-spacing: -0.03em; white-space: nowrap; }
.ksu-cta--mega .ksu-cta__arrow { width: 0.62em; height: 0.62em; stroke-width: 2; }
.ksu-cta--mega:hover .ksu-cta__arrow { transform: translate(0.06em, -0.06em); }
/* Inverse solid: for a solid CTA that sits on the accent ground */
.ksu-cta--solid.is-inverse { background: var(--on-accent); color: var(--accent); }
.ksu-cta--solid.is-inverse:hover { background: var(--ink); color: var(--on-accent); }
.ksu-badge--solid { border-radius: var(--radius-none); background: var(--accent); color: var(--on-accent); }
a:hover > .ksu-badge--solid, a:focus-visible > .ksu-badge--solid { background: var(--ink); color: var(--on-accent); }

/* Chapter: one numbered passage of the profile, with a label and a serif paragraph that lights up as it is read */
.ksu-chapter { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: var(--space-2) var(--space-6); align-items: baseline; padding-block: var(--space-12); border-top: var(--hairline) solid var(--line); }
.ksu-chapter__no { color: var(--ink-ghost); font: 700 clamp(56px, 6vw, 96px) / 0.8 var(--font-compressed); font-variant-numeric: tabular-nums; }
.ksu-chapter__label { margin: 0; color: var(--accent); font: 500 clamp(18px, 1.7vw, 26px) / 1.2 var(--font-heading); letter-spacing: -0.01em; text-transform: uppercase; }
.ksu-chapter__text { grid-column: 2; margin: var(--space-4) 0 0; color: var(--ink); font: 400 clamp(19px, 1.7vw, 26px) / 1.4 var(--font-serif); }
.ksu-mark { color: var(--accent); font-style: normal; }
.ksu-paper .ksu-chapter { border-color: var(--paper-line); }
.ksu-paper .ksu-chapter__no { color: var(--on-paper-muted); }
.ksu-paper .ksu-chapter__label, .ksu-paper .ksu-mark { color: var(--accent-deep); }
.ksu-paper .ksu-chapter__text { color: var(--on-paper); }
@media (max-width: 720px) { .ksu-chapter { grid-template-columns: 3.2em minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding-block: var(--space-8); } }

/* Marquee */
.ksu-marquee { overflow: hidden; padding-block: var(--space-6); border-block: var(--hairline) solid var(--line); }
.ksu-marquee__track { display: flex; gap: var(--space-12); width: max-content; margin: 0; padding: 0; list-style: none; color: var(--accent); font: 700 clamp(72px, 11vw, 160px) / 0.9 var(--font-display); text-transform: uppercase; white-space: nowrap; will-change: transform; }
.ksu-marquee__track li { display: flex; align-items: center; gap: var(--space-12); }
.ksu-marquee__track li::after { content: ""; width: 0.14em; height: 0.14em; border-radius: var(--radius-none); background: var(--ink); }

/* Motion: resting states GSAP animates from. The class is set in the page head and removed when the hero intro starts. */
.ksu-motion [data-ksu-hero], .ksu-motion [data-ksu-cover] { visibility: hidden; }
[data-ksu-enter="tilt"], [data-ksu-enter="clip"] > * { will-change: transform; }

/* FeatureIndex, large: three to a row in bigger type, for the experience list */
.ksu-index--xl .ksu-index__item, .ksu-index--xl .ksu-index__item:nth-child(n + 5) { grid-column: span 4; padding-block: var(--space-6); font-size: clamp(16px, 1.7vw, 26px); line-height: 1.15; }
.ksu-index--xl .ksu-index__label { max-width: 12em; }
@media (max-width: 720px) { .ksu-index--xl .ksu-index__item, .ksu-index--xl .ksu-index__item:nth-child(n + 5) { grid-column: span 12; } }

/* PhotoRail: tall photographs in a row that travels sideways while the section is held in place */
.ksu-rail { overflow: hidden; }
.ksu-rail__track { display: flex; gap: var(--space-2); width: max-content; margin: 0; padding: 0; list-style: none; will-change: transform; }
.ksu-rail__item { flex: none; height: clamp(360px, 72vh, 780px); overflow: hidden; background: var(--surface-1); }
.ksu-rail__item img { display: block; width: auto; height: 100%; filter: saturate(0.9) contrast(1.05); }
@media (max-width: 720px) {
  /* Swipe sideways on phones; the scrollbar itself is hidden */
  .ksu-rail { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
  .ksu-rail::-webkit-scrollbar { display: none; }
  .ksu-rail__item { height: 62vh; scroll-snap-align: start; }
}

/* SpecList: small mono labels against large values, on hairlines. For the profile's experience. */
.ksu-spec { display: grid; margin: 0; }
.ksu-spec > div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: var(--space-2) var(--space-6); align-items: baseline; padding-block: var(--space-6); border-top: var(--hairline) solid var(--line); }
.ksu-spec dt { color: var(--ink-muted); font: 400 12px/17px var(--font-mono); text-transform: uppercase; }
.ksu-spec dd { display: grid; gap: var(--space-2); margin: 0; min-width: 0; }
.ksu-spec b { color: var(--ink); font: 500 clamp(28px, 3.6vw, 56px) / 0.95 var(--font-heading); letter-spacing: -0.02em; text-transform: uppercase; }
.ksu-spec span { color: var(--ink-muted); font: 400 16px/22px var(--font-sans); }
.ksu-spec__run { color: var(--ink); font: 500 clamp(14px, 1.2vw, 18px) / 1.5 var(--font-heading); letter-spacing: -0.01em; text-transform: uppercase; }
.ksu-spec__run i { margin-inline: 0.4em; color: var(--accent); font-style: normal; }
.ksu-spec__val { color: var(--ink); font: 500 clamp(18px, 2vw, 30px) / 1.15 var(--font-heading); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ksu-spec a { color: inherit; text-decoration: none; transition: color var(--ksu-hover); }
.ksu-spec a:hover { color: var(--accent); }
.ksu-spec a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ksu-paper .ksu-spec > div { border-color: var(--paper-line); }
.ksu-paper .ksu-spec dt, .ksu-paper .ksu-spec span { color: var(--on-paper-muted); }
.ksu-paper .ksu-spec b, .ksu-paper .ksu-spec__run { color: var(--on-paper); }
.ksu-paper .ksu-spec__run i { color: var(--accent-deep); }
@media (max-width: 720px) { .ksu-spec > div { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-4); } }

/* PaperSection: rows */
.ksu-paper .ksu-mix { border-color: var(--paper-line); }
.ksu-paper .ksu-mix__title, .ksu-paper .ksu-mix:hover .ksu-mix__title { color: var(--on-paper); }
.ksu-paper .ksu-mix__meta { color: var(--on-paper-muted); }