/* ============================================================
   Ovations '26 — "Lumiêra" · Loyola Students Council
   Dark, immersive, celestial-renaissance. Deep navy night,
   gold constellation, Cinzel display (matches the logo + rulebook).
   ============================================================ */

:root {
  color-scheme: dark;

  /* night */
  --bg:        #05070F;
  --bg-2:      #080B18;
  --panel:     #0C1329;
  --panel-2:   #111a37;
  --panel-hi:  #16224a;

  /* gold — sampled from the rulebook border (#DCA552) */
  --gold:        #C99A46;
  --gold-bright: #E7C271;
  --gold-glow:   #F1D68C;
  --gold-deep:   #8C6B2C;

  /* text (warm parchment on night) */
  --ink:      #ECE3CA;
  --ink-soft: #C4BEA6;
  --muted:    #8B8B7C;

  --star: #E0685C;

  /* category accents, luminous on dark */
  --cat-onstage: #E7C271;
  --cat-offstage: #86A8EC;
  --cat-online:  #5FC9B6;

  --line:        #223056;
  --line-strong: #364266;
  --line-gold:   rgba(201, 154, 70, .38);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow:    0 2px 10px rgba(0, 0, 0, .5), 0 22px 60px rgba(0, 0, 0, .55);
  --glow-gold: 0 0 24px rgba(231, 194, 113, .28);

  --serif:  "Cinzel", "Trajan Pro", "Times New Roman", serif;   /* the logo face, site-wide display */
  /* hero display face — heavy Didone, matches the rulebook's gold cover type */
  --display: "Playfair Display", "Cinzel", Georgia, "Times New Roman", serif;
  --script: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif; /* italic accents */
  --sans:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;  /* body / UI */
  --radius: 14px;
  --ease:   cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(231, 194, 113, .28); color: #fff; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }

.skip-link {
  position: fixed; left: -999px; top: 0; background: var(--gold); color: #14100a;
  padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ============================================================
   Cinematic background: starfield + nebula + gold frame
   ============================================================ */
#starfield {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -3; display: block; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, #0d1533 0%, transparent 55%),
    linear-gradient(180deg, #05070F 0%, #070A16 50%, #04060C 100%);
}
.cosmos { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.neb {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  mix-blend-mode: screen; animation: drift 46s ease-in-out infinite alternate;
}
.neb-a { width: 46vw; height: 46vw; top: -8vw; left: -6vw;
  background: radial-gradient(circle, rgba(120, 86, 40, .55), transparent 68%); }
.neb-b { width: 40vw; height: 40vw; top: 8vw; right: -8vw;
  background: radial-gradient(circle, rgba(70, 60, 120, .5), transparent 68%); animation-duration: 60s; }
.neb-c { width: 52vw; height: 52vw; bottom: -16vw; left: 22vw;
  background: radial-gradient(circle, rgba(40, 70, 110, .4), transparent 70%); animation-duration: 74s; }

/* faint double gold frame around the viewport, like the rulebook page border */
.gold-frame {
  position: fixed; inset: 14px; z-index: -1; pointer-events: none;
  border: 1px solid var(--line-gold);
  box-shadow: inset 0 0 0 4px rgba(5, 7, 15, .0), inset 0 0 0 5px rgba(201, 154, 70, .12);
  border-radius: 4px;
}
@media (max-width: 640px) { .gold-frame { inset: 8px; } }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--line-gold);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 70px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-gold), 0 0 18px rgba(231, 194, 113, .3);
  transition: transform .4s var(--ease);
}
.brand:hover .brand-mark { transform: rotate(8deg) scale(1.06); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-title { font-family: var(--serif); font-weight: 700; font-size: 1.12rem; letter-spacing: .06em; color: var(--ink); }
.brand-year { color: var(--gold-bright); }
.brand-sub { font-size: .58rem; text-transform: uppercase; letter-spacing: .26em; color: var(--muted); margin-top: 4px; }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 30px); }
/* only does anything in the two-row phone layout below */
.nav-break { display: none; }
.site-nav a { font-size: .82rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-soft); padding: 6px 2px; position: relative; transition: color .2s; }
.site-nav a:hover { color: var(--gold-bright); }
.site-nav a.is-active { color: var(--gold-bright); }
.site-nav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); border-radius: 2px;
}
.nav-rulebook {
  border: 1px solid var(--line-gold); border-radius: 999px; padding: 8px 16px !important;
  color: var(--gold-bright) !important; font-weight: 600; transition: all .2s;
}
.nav-rulebook:hover { background: rgba(201, 154, 70, .12); border-color: var(--gold); box-shadow: var(--glow-gold); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans);
  font-weight: 600; font-size: .9rem; letter-spacing: .02em; padding: 12px 24px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s, background .2s, border-color .2s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #1a1305; border-color: var(--gold);
  box-shadow: 0 6px 22px rgba(201, 154, 70, .35);
}
.btn-gold:hover { box-shadow: 0 8px 30px rgba(231, 194, 113, .5); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--gold-bright); border-color: var(--line-gold); }
.btn-ghost:hover { border-color: var(--gold); background: rgba(201, 154, 70, .1); box-shadow: var(--glow-gold); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold-bright); }

.loading { padding-block: 26vh; text-align: center; color: var(--gold); font-family: var(--serif); letter-spacing: .1em; font-size: 1.2rem; animation: pulse 1.8s ease-in-out infinite; }

/* ============================================================
   Hero — illustrated Lumiêra logo as the single centerpiece
   ============================================================ */
.hero {
  position: relative; text-align: center; overflow: hidden;
  min-height: min(94vh, 900px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(70px, 12vh, 130px) 0 clamp(60px, 10vh, 110px);
}

/* ============================ the arch frame ==============================
   Strokes are vector so the frame is crisp full-bleed at any viewport, and
   `vector-effect: non-scaling-stroke` keeps every line the same hairline
   weight however far the viewBox is stretched. The ornament that must not
   distort (keystone star, corner art) sits outside the SVG as real elements. */
.hero-frame {
  position: absolute; inset: clamp(10px, 1.8vw, 30px);
  pointer-events: none; z-index: 1;
}
/* the art is wrapped in <picture> for the WebP fallback; display:contents keeps
   that wrapper out of layout so the absolute positioning below is unaffected */
.hero-frame picture, #ov-intro picture { display: contents; }
.hero-frame-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.hf-line {
  fill: none; stroke: var(--gold);
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: hfDraw 1.9s cubic-bezier(.33, .9, .28, 1) forwards;
}
.hf-b1    { stroke-width: 1.6; opacity: .82; animation-delay: .05s; }
.hf-b2    { stroke-width: .8;  opacity: .45; animation-delay: .22s; }
.hf-arch  { stroke-width: 1.6; opacity: .8;  animation-delay: .42s; }
.hf-arch2 { stroke-width: .8;  opacity: .4;  animation-delay: .58s; }

/* keystone medallion at the apex of the arch */
.hero-keystone {
  position: absolute; left: 50%; top: -1.6%;
  width: clamp(46px, 5.2vw, 74px); aspect-ratio: 1; translate: -50% 0;
  display: grid; place-items: center; opacity: 0;
  animation: heroFade 1.2s var(--ease) 1.5s forwards;
}
.hero-keystone::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, var(--panel) 30%, var(--bg) 78%);
  border: 1px solid rgba(201, 154, 70, .55);
  box-shadow: 0 0 26px rgba(231, 194, 113, .3);
}
.hero-keystone img {
  position: relative; width: 74%;
  animation: spinSlow 80s linear infinite;
}

/* ---- the reveal countdown, living inside the keystone medallion ----------
   The disc grows from 74px to fit four readable values, so .hero.has-clock
   also adds top padding: the lockup is flex-centred, and without it the disc
   would grow down over the eyebrow line. Once the reveal passes, both the
   class and these styles stop applying and the medallion is a star again. */
.hero.has-clock { padding-top: clamp(126px, 21vh, 250px); }

.hero-keystone.is-clock {
  width: clamp(112px, 12.5vw, 158px);
  text-decoration: none;
}
.hero-keystone.is-clock::before {
  background: radial-gradient(circle, #0d1530 26%, #05070f 82%);
  border-color: rgba(201, 154, 70, .7);
  box-shadow: 0 0 34px rgba(231, 194, 113, .26), inset 0 0 22px rgba(0, 0, 0, .6);
}

/* the sweep hand: one full turn a minute, drawn as a stroked arc */
.rc-ring { position: absolute; inset: 4%; transform: rotate(-90deg); }
.rc-track, .rc-sweep { fill: none; stroke-linecap: round; }
.rc-track { stroke: rgba(201, 154, 70, .16); stroke-width: 2.4; }
.rc-sweep {
  stroke: var(--gold-glow); stroke-width: 2.4;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgba(241, 214, 140, .75));
  transition: stroke-dashoffset .4s linear;
}

/* the ornament stays, dimmed, so the disc still reads as part of the frame.
   Two classes deep on purpose: `.hero-keystone img` is a class+type selector
   and outranks a lone `.rc-glyph`, which left the image in flow and stretched
   the disc from a circle to a 158x176 oval. */
.hero-keystone .rc-glyph {
  position: absolute; width: 74%; opacity: .1;
  animation: spinSlow 80s linear infinite;
}

.rc-face {
  position: relative; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; line-height: 1;
}
.rc-kicker {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(.42rem, .62vw, .52rem);
  text-transform: uppercase; letter-spacing: .2em; color: var(--gold);
}
.rc-lead { display: flex; align-items: baseline; gap: .16em; }
.rc-num {
  font-family: var(--display), var(--serif); font-weight: 700;
  font-size: clamp(1.5rem, 3.1vw, 2.35rem); color: var(--ink);
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.rc-unit {
  font-family: var(--sans); font-style: normal; font-weight: 600;
  font-size: clamp(.44rem, .66vw, .56rem);
  text-transform: uppercase; letter-spacing: .14em; color: var(--gold-bright);
}
.rc-rest {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(.52rem, .78vw, .68rem);
  letter-spacing: .1em; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* corner moon + banjo removed by request — the frame is strokes only now */
.hero-base {
  position: absolute; left: 50%; bottom: 1.8%; translate: -50% 0;
  width: min(46vw, 420px); opacity: 0;
  animation: heroFade 1.4s var(--ease) 1.6s forwards;
}

/* ============================ the lockup ================================= */
.hero-inner { position: relative; z-index: 3; }

.hero-eyebrow {
  font-family: var(--sans); font-size: clamp(.54rem, 1.1vw, .68rem);
  text-transform: uppercase; letter-spacing: .34em; color: var(--gold-bright);
  /* ch ignores letter-spacing, and .34em of tracking is most of this line's
     width — so cap in px, not ch, or it wraps mid-phrase */
  margin: 0 auto 22px; max-width: min(94vw, 820px); padding-left: .34em;
  hyphens: none; text-wrap: balance;
  opacity: 0; animation: heroRise 1.1s var(--ease) 1.05s forwards;
}

/* OVATIONS '26 — the banner line above the name */
.hero-fest {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.35rem, 4.6vw, 3.1rem);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-bright); margin: 0 0 .18em; padding-left: .2em;
  text-shadow: 0 0 30px rgba(231, 194, 113, .35);
  opacity: 0; animation: heroRise 1.2s var(--ease) 1.25s forwards;
}
.hero-fest .hero-year { color: var(--ink); font-style: italic; letter-spacing: .06em; }

.hero-emblem-slot { width: 0; height: 0; }

/* LUMIÊRA — the hero element. One text run so background-clip:text works;
   revealed by a left-to-right wipe on the inner span. */
.hero-word {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.6rem, 12.4vw, 9.4rem);
  line-height: 1; letter-spacing: .015em;
  /* the clipped gradient paints only inside this box, so pad above the caps
     or the circumflex on Ê renders transparent */
  margin: 0 auto; padding: .1em .06em .04em;
  background: linear-gradient(100deg,
    #F6EDD4 10%, var(--gold-glow) 32%, #FFFBEF 44%,
    var(--gold-glow) 56%, #F6EDD4 80%);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 42px rgba(231, 194, 113, .3));
  animation: shimmer 8s linear 2.6s infinite;
}
.hero-word .hero-word-in {
  display: block;
  clip-path: inset(0 100% 0 0);
  animation: heroWipe 1.5s cubic-bezier(.22, .8, .2, 1) 1.55s forwards;
}

.hero-rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 20px auto 0; max-width: min(560px, 74vw);
  opacity: 0; animation: heroFade 1.2s var(--ease) 2.5s forwards;
}
.hero-rule i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-gold), transparent); }
.hero-rule span {
  width: 7px; height: 7px; flex: none; transform: rotate(45deg);
  background: var(--gold-bright); box-shadow: 0 0 14px rgba(231, 194, 113, .8);
  animation: halo 4s ease-in-out infinite;
}

@keyframes hfDraw   { to { stroke-dashoffset: 0; } }
@keyframes heroFade { to { opacity: 1; } }
@keyframes heroRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes heroWipe { to { clip-path: inset(0 -6% 0 0); } }

@media (max-width: 700px) {
  /* the mobile header is two rows, so drop the frame far enough that the
     keystone medallion clears it, and tighten the box so the lockup does not
     float in dead space above the base flourish */
  .hero { min-height: min(80vh, 640px); }
  .hero-frame { top: 34px; }
  /* the phone header is two rows, so the disc has less sky above it */
  .hero.has-clock { padding-top: clamp(96px, 15vh, 130px); }
  /* the vw-based clamps fall to 6-8px on a phone, so the countdown gets fixed
     sizes here instead: a 118px disc holds a 27px figure and an 11px readout */
  .hero-keystone.is-clock { width: clamp(116px, 31vw, 136px); }
  .rc-kicker { font-size: 9px; letter-spacing: .16em; }
  .rc-num    { font-size: 27px; }
  .rc-unit   { font-size: 9px; }
  .rc-rest   { font-size: 11px; letter-spacing: .08em; }
  .rc-face   { gap: 2px; }
  .hero-dates { letter-spacing: .16em; font-size: .74rem; }
  .hero-fest { letter-spacing: .14em; }
  .hero-word { letter-spacing: 0; }
  .hero-base { width: 68vw; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-line { stroke-dashoffset: 0; animation: none; }
  .hero-eyebrow, .hero-fest, .hero-rule, .hero-keystone, .hero-base { opacity: 1; animation: none; transform: none; }
  .hero-word { animation: none; }
  .hero-word .hero-word-in { clip-path: none; animation: none; }
  .hero-keystone img, .hero-rule span { animation: none; }
  .rc-glyph { animation: none; }
  .rc-sweep { transition: none; }
}

.hero-tagline {
  font-family: var(--script); font-style: italic; font-size: clamp(1.15rem, 3vw, 1.9rem);
  color: var(--ink); margin: 26px 0 6px; letter-spacing: .02em;
  background: linear-gradient(100deg, var(--ink) 20%, var(--gold-glow) 50%, var(--ink) 80%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}
.hero-dates {
  font-family: var(--sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .22em;
  color: var(--ink-soft); margin: 14px 0 30px;
}
.hero-dates strong { color: var(--gold-bright); font-weight: 700; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   Ornament divider (real starburst art from the rulebook)
   ============================================================ */
.ornament { display: flex; align-items: center; justify-content: center; gap: 18px; margin: clamp(28px, 6vw, 60px) 0; }
.ornament::before, .ornament::after {
  content: ""; height: 1px; width: min(28vw, 260px);
  background: linear-gradient(90deg, transparent, var(--line-gold), transparent);
}
.ornament img { width: 56px; opacity: .96;
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 46%, transparent 70%);
          mask-image: radial-gradient(circle at 50% 48%, #000 46%, transparent 70%); }

/* ============================================================
   Section frames
   ============================================================ */
/* padding-block, NOT the `padding` shorthand: this class is used as
   `class="section container"`, and a shorthand with 0 horizontal silently wiped
   .container's gutter (it is declared earlier in this file). Invisible on
   desktop, where max-width centres the container anyway — but on a phone the
   container is full-width, so every page ran edge to edge. */
.section { padding-block: clamp(38px, 6vw, 66px); position: relative; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; }
/* for sections whose body is a centred block, so the heading lines up with it */
.section-head.is-centered { justify-content: center; text-align: center; }
.section-eyebrow { display: block; font-family: var(--serif); font-size: .68rem; text-transform: uppercase; letter-spacing: .3em; color: var(--gold); font-weight: 600; margin-bottom: 10px; }
.section-title { font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.08; letter-spacing: .02em; margin: 0; color: var(--ink); }
.section-link { font-size: .85rem; font-weight: 600; color: var(--gold); transition: color .2s, transform .2s; display: inline-block; }
.section-link:hover { color: var(--gold-bright); transform: translateX(3px); }

/* ============================================================
   Home stats
   ============================================================ */
.home-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat-card {
  background: linear-gradient(160deg, var(--panel), var(--bg-2)); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 18px; text-align: center; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .6;
}
.stat-num { font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 5vw, 2.8rem); color: var(--gold-bright); line-height: 1; }
.stat-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-top: 10px; }

/* ---- the figures are links (Events -> programme, Teams -> leaderboard) ---- */
.stat-card.is-link {
  display: block; cursor: pointer;
  transition: border-color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}
.stat-card.is-link:hover, .stat-card.is-link:focus-visible {
  border-color: var(--line-gold); transform: translateY(-3px);
  box-shadow: var(--shadow); outline: none;
}
.stat-card.is-link:hover::before, .stat-card.is-link:focus-visible::before { opacity: 1; }
.stat-card.is-link:hover .stat-label, .stat-card.is-link:focus-visible .stat-label { color: var(--ink-soft); }

/* the cue sits in its own reserved line so hovering never shifts the figure */
.stat-go {
  display: block; margin-top: 10px; height: 1em;
  font-family: var(--sans); font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em; color: var(--gold);
  opacity: 0; transform: translateY(3px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.stat-card.is-link:hover .stat-go, .stat-card.is-link:focus-visible .stat-go {
  opacity: 1; transform: none;
}
/* a phone has no hover, so show the cue outright there */
@media (hover: none) {
  .stat-go { opacity: .85; transform: none; }
}

/* ============================================================
   Cards (events)
   ============================================================ */
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 16px; }
.event-card {
  display: flex; flex-direction: column; gap: 11px; text-align: left; position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 19px; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .25s, border-color .25s;
  border-top: 3px solid var(--cat, var(--line-strong));
}
.event-card::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--cat, var(--gold)) 16%, transparent), transparent 60%);
}
.event-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--cat, var(--gold)) 55%, var(--line)); }
.event-card:hover::after { opacity: 1; }
.event-card.cat-onstage { --cat: var(--cat-onstage); }
.event-card.cat-offstage { --cat: var(--cat-offstage); }
.event-card.cat-online { --cat: var(--cat-online); }
.ec-top { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.ec-cat { font-size: .6rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--cat); }
.ec-flag { font-size: .6rem; color: var(--gold-bright); margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-weight: 600; letter-spacing: .08em; }
.ec-name { font-family: var(--serif); font-weight: 600; font-size: 1.24rem; line-height: 1.16; margin: 0; color: var(--ink); position: relative; z-index: 1; letter-spacing: .01em; }
.ec-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--muted); margin-top: auto; position: relative; z-index: 1; }
.ec-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ec-winner { font-size: .74rem; color: var(--gold-bright); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; position: relative; z-index: 1; }

/* ============================================================
   Schedule
   ============================================================ */
.filters-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 28px; }
.month-group { margin-bottom: 38px; }
.date-heading { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; letter-spacing: .02em; margin: 0 0 4px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; color: var(--ink); }
.date-heading .dow { font-size: .72rem; font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); }
.date-heading .count { font-size: .7rem; font-family: var(--sans); font-weight: 500; color: var(--muted); }
.date-rule { height: 1px; background: linear-gradient(90deg, var(--line-gold), transparent); border: 0; margin: 10px 0 20px; }

/* chips / filters */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-size: .8rem; font-weight: 500; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink-soft); cursor: pointer;
  transition: all .18s var(--ease);
}
.chip:hover { border-color: var(--gold); color: var(--gold-bright); }
.chip.is-active { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #1a1305; border-color: var(--gold); box-shadow: 0 4px 16px rgba(201,154,70,.34); }
.search-input {
  font-family: var(--sans); font-size: .9rem; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); min-width: 210px;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { outline: 2px solid rgba(201, 154, 70, .5); outline-offset: 1px; border-color: var(--gold); }

/* ============================================================
   Leaderboard
   ============================================================ */
.lb-note { font-size: .84rem; color: var(--muted); margin: -6px 0 24px; max-width: 62ch; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; align-items: end; }
.podium-card {
  background: linear-gradient(165deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 16px; text-align: center; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.podium-card.rank-1 { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--glow-gold), var(--shadow); transform: translateY(-8px); }
.podium-card.rank-1::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold-bright), transparent); }
.podium-rank { font-family: var(--serif); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--gold-bright); }
.podium-card.rank-2 .podium-rank { color: var(--ink-soft); }
.podium-card.rank-3 .podium-rank { color: var(--star); }
.podium-dept { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin: 10px 0 2px; color: var(--ink); }
.podium-tags { font-size: .68rem; color: var(--muted); }
.podium-pts { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; margin-top: 12px; color: var(--gold-bright); }
.podium-pts span { font-family: var(--sans); font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); display: block; font-weight: 500; }

.lb-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.lb-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.lb-table th { text-align: left; font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); font-weight: 700; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.lb-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: .9rem; color: var(--ink); }
.lb-table tr:last-child td { border-bottom: none; }
.lb-table tbody tr { transition: background .15s; }
.lb-table tr:hover td { background: var(--panel-2); }
.lb-rank { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--muted); width: 46px; }
.lb-row-top td { background: rgba(201, 154, 70, .07); }
.lb-row-top .lb-rank { color: var(--gold-bright); }
.lb-dept { font-weight: 600; }
.lb-dept small { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); }
/* shown only where the Shift/Level columns are hidden — see the .hide-sm rule */
.lb-dept small.lb-inline-tags { display: none; }
.lb-pill { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-soft); white-space: nowrap; }
.lb-pts { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem; color: var(--gold-bright); }
th.lb-pts { color: var(--gold); }

/* ============================================================
   Event detail
   ============================================================ */
.detail { max-width: 800px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--muted); margin-bottom: 24px; transition: color .2s, transform .2s; }
.back-link:hover { color: var(--gold-bright); transform: translateX(-3px); }
.detail-cat { display: block; font-family: var(--serif); font-size: .72rem; text-transform: uppercase; letter-spacing: .22em; font-weight: 700; color: var(--cat, var(--gold)); }
.detail-title { font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.06; letter-spacing: .01em; margin: 10px 0 16px; color: var(--ink); }
.detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.badge {
  font-size: .72rem; font-weight: 600; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel);
}
.badge-flag { border-color: var(--gold); color: var(--gold-bright); }
.badge-date { border-color: var(--line-gold); color: var(--ink); }
.detail-note { background: rgba(201, 154, 70, .09); border: 1px solid var(--line-gold); border-radius: 12px; padding: 13px 16px; font-size: .88rem; margin-bottom: 14px; color: var(--ink-soft); }
.detail-note strong { color: var(--gold-bright); }
.rules-head { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; letter-spacing: .02em; margin: 26px 0 14px; color: var(--ink); }
.rules-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rules-list li { position: relative; padding-left: 28px; font-size: .95rem; color: var(--ink-soft); }
.rules-list li::before { content: "✦"; position: absolute; left: 0; top: 1px; color: var(--gold); font-size: .82rem; }
/* ============================================================
   Theme concept block (on each event page)
   ============================================================ */
.theme-block {
  position: relative; margin: 0 0 26px; padding: 18px 20px 18px 22px;
  background: linear-gradient(135deg, rgba(201,154,70,.10), rgba(12,19,41,.5));
  border: 1px solid var(--line-gold); border-radius: var(--radius);
  overflow: hidden;
}
.theme-block::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold-bright), transparent);
}
.theme-eyebrow { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .2em; color: var(--gold); font-weight: 700; }
.theme-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: var(--gold-bright); margin: 8px 0 8px; letter-spacing: .02em; }
.theme-purpose { margin: 0 0 12px; font-size: .93rem; color: var(--ink-soft); max-width: 62ch; }
.theme-link { font-size: .82rem; font-weight: 600; color: var(--gold); transition: color .2s, transform .2s; display: inline-block; }
.theme-link:hover { color: var(--gold-bright); transform: translateX(3px); }

/* 15% rubric callout */
.rubric-note {
  display: flex; gap: 14px; align-items: flex-start; margin: 20px 0 0;
  background: rgba(201,154,70,.09); border: 1px solid var(--line-gold);
  border-radius: 12px; padding: 14px 16px; font-size: .88rem; color: var(--ink-soft);
}
.rubric-note strong { color: var(--gold-bright); }
.rubric-badge {
  flex: none; font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  color: #1a1305; background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-radius: 999px; padding: 6px 12px; line-height: 1.1;
}

/* ============================================================
   Forms & documents
   ============================================================ */
/* ==================== registration call-to-action ========================
   The one thing a student came to the page to do, so it gets the loudest panel
   on it and sits above the rules. */
.reg-box {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin: 26px 0 8px; padding: 22px 26px; border-radius: 16px;
  background: linear-gradient(140deg, rgba(201, 154, 70, .15), var(--bg-2) 64%);
  border: 1px solid var(--line-gold);
}
.reg-main { flex: 1 1 300px; }
.reg-eyebrow {
  display: block; font-family: var(--sans); font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; color: var(--gold);
  margin-bottom: 7px;
}
.reg-head {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem); margin: 0 0 8px; line-height: 1.2;
}
.reg-note { margin: 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.6; }
.reg-note strong { color: var(--gold-bright); font-weight: 600; }
.reg-signin { display: block; margin-top: 6px; color: var(--muted); font-size: .84rem; }
.reg-cta { flex: none; white-space: nowrap; }

@media (max-width: 700px) {
  .reg-box { padding: 18px; gap: 16px; }
  /* full-width tap target rather than a pill floating beside the text */
  .reg-cta { width: 100%; text-align: center; min-height: 46px;
             display: inline-flex; align-items: center; justify-content: center; }
}

/* ======================= grievance page ================================== */
.griev-lede {
  font-size: 1.02rem; color: var(--ink-soft); line-height: 1.72;
  max-width: 72ch; margin: 0 0 30px;
}
.griev-lede strong { color: var(--gold-bright); font-weight: 600; }
.griev-sub { font-size: .9rem; color: var(--muted); margin: -6px 0 16px; }

/* the form itself is the point of the page, so it gets the loudest card */
.griev-form {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 24px 26px; border-radius: 16px;
  background: linear-gradient(150deg, rgba(201, 154, 70, .13), var(--bg-2) 62%);
  border: 1px solid var(--line-gold);
  transition: transform .22s ease, border-color .22s, box-shadow .22s;
}
.griev-form:hover {
  transform: translateY(-3px); border-color: var(--gold);
  box-shadow: var(--shadow);
}
.griev-form-icon {
  flex: none; width: 52px; height: 52px; border-radius: 12px;
  display: grid; place-items: center; color: var(--gold-bright);
  background: rgba(201, 154, 70, .12); border: 1px solid var(--line-gold);
}
.griev-form-icon svg { width: 26px; height: 26px; }
.griev-form-body { flex: 1 1 260px; display: flex; flex-direction: column; gap: 5px; }
.griev-form-kicker {
  font-family: var(--sans); font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; color: var(--gold);
}
.griev-form-title {
  font-family: var(--serif); font-size: clamp(1.05rem, 2.4vw, 1.32rem);
  font-weight: 600; color: var(--ink); line-height: 1.24;
}
.griev-form-note { font-size: .82rem; color: var(--muted); }
.griev-form-cta {
  flex: none; font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #14100a;
  background: linear-gradient(180deg, var(--gold-glow), var(--gold));
  border-radius: 999px; padding: 12px 22px; white-space: nowrap;
}

/* numbered steps — an ordered list, but the marker is ours */
.griev-steps { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 16px; }
.griev-steps li { display: flex; gap: 16px; align-items: flex-start; }
.griev-step-n {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
  font-family: var(--serif); font-size: .84rem; font-weight: 700;
  color: var(--gold-bright); background: rgba(201, 154, 70, .1);
  border: 1px solid var(--line-gold);
}
.griev-steps strong { display: block; color: var(--ink); font-weight: 600; font-size: .98rem; }
.griev-steps p { margin: 4px 0 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.62; }
.griev-back { margin-top: 34px; }
.griev-back .back-link { margin-bottom: 0; }

.docs-box { margin-top: 30px; }
.docs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.doc-card {
  display: flex; gap: 13px; align-items: flex-start; padding: 15px 16px;
  background: linear-gradient(160deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), border-color .2s, box-shadow .2s;
}
.doc-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow); }
.doc-card.is-required { border-color: var(--line-gold); background: linear-gradient(160deg, rgba(201,154,70,.10), var(--bg-2)); }
.doc-icon { flex: none; color: var(--gold); }
.doc-icon svg { width: 26px; height: 26px; }
.doc-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.doc-title { font-family: var(--serif); font-weight: 600; font-size: 1rem; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-req {
  font-family: var(--sans); font-size: .58rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: #1a1305; background: var(--gold-bright);
  border-radius: 4px; padding: 2px 6px;
}
.doc-note { font-size: .8rem; color: var(--muted); line-height: 1.5; }
.doc-cta { font-size: .78rem; font-weight: 600; color: var(--gold); margin-top: 2px; }

/* ============================================================
   Theme page
   ============================================================ */
.theme-hero { text-align: center; padding: clamp(46px, 8vh, 90px) 0 clamp(26px, 4vh, 44px); }
.theme-title {
  font-family: var(--serif); font-weight: 700; font-size: clamp(2.6rem, 9vw, 5rem);
  letter-spacing: .06em; line-height: 1; margin: 14px 0 6px; color: var(--ink);
  background: linear-gradient(100deg, var(--ink) 24%, var(--gold-glow) 50%, var(--ink) 76%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: shimmer 7s linear infinite;
}
.theme-sub { font-family: var(--script); font-style: italic; font-size: clamp(1.05rem, 2.6vw, 1.5rem); color: var(--gold-bright); margin: 0 0 22px; }
.theme-tagline { font-family: var(--script); font-style: italic; font-size: clamp(1rem, 2.2vw, 1.3rem); color: var(--ink); margin: 0 auto 16px; max-width: 46ch; }
.theme-motto { font-size: .84rem; color: var(--muted); margin: 0 0 28px; line-height: 1.7; }
.theme-motto em { color: var(--gold); font-style: italic; display: block; font-size: .95rem; }
.theme-motto span { display: block; font-size: .78rem; }

.sub-head { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--gold-bright); margin: 30px 0 14px; letter-spacing: .02em; }

.duality-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.duality-card {
  background: linear-gradient(165deg, var(--panel), var(--bg-2)); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow-sm); text-align: center;
}
.duality-card:first-child { border-color: rgba(231,194,113,.32); }
.duality-name { font-family: var(--serif); font-size: 1.7rem; font-weight: 700; margin: 0; color: var(--gold-bright); letter-spacing: .04em; }
.duality-sub { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); margin: 6px 0 14px; }
.duality-card p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.pillar-card {
  position: relative; background: linear-gradient(165deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px;
  box-shadow: var(--shadow-sm); border-top: 3px solid var(--gold);
}
.pillar-num { font-family: var(--serif); font-size: .8rem; font-weight: 700; color: var(--gold); }
.pillar-name { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; margin: 6px 0 8px; color: var(--ink); letter-spacing: .02em; }
.pillar-meaning { font-size: .88rem; color: var(--gold-bright); margin: 0 0 8px; }
.pillar-conn { font-size: .85rem; color: var(--muted); margin: 0; }

.manifesto {
  margin: 0; padding: 28px clamp(20px, 4vw, 40px);
  background: linear-gradient(160deg, rgba(201,154,70,.07), var(--bg-2));
  border: 1px solid var(--line-gold); border-radius: var(--radius);
  font-family: var(--script); font-style: italic; font-size: clamp(1rem, 2.1vw, 1.22rem);
  color: var(--ink); line-height: 1.85; max-width: 76ch;
  /* max-width without an auto margin left this hugging the container's left
     edge instead of sitting centred on the page */
  margin-inline: auto;
}
.manifesto p { margin: 0 0 16px; }
.manifesto p:last-child { margin: 0; color: var(--gold-bright); }

.palette-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.swatch { display: flex; gap: 14px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.swatch-chip { flex: none; width: 42px; height: 42px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 14px rgba(0,0,0,.4); }
.swatch-name { font-family: var(--serif); font-weight: 600; font-size: .96rem; color: var(--ink); }
.swatch-text { font-size: .8rem; color: var(--muted); margin-top: 3px; }

.rubric-hero {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(201,154,70,.16), var(--bg-2));
  border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--glow-gold);
}
.rubric-big { font-family: var(--serif); font-weight: 700; font-size: clamp(2.6rem, 7vw, 3.8rem); color: var(--gold-bright); line-height: 1; }
.rubric-hero h3 { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 6px; color: var(--ink); }
.rubric-hero p { margin: 0; font-size: .9rem; color: var(--ink-soft); max-width: 62ch; }

.flow-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.flow-list li { display: flex; gap: 14px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; }
.flow-step { flex: none; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #1a1305; font-family: var(--mono, var(--sans)); font-weight: 700; font-size: .82rem; }
.flow-list strong { display: block; font-family: var(--serif); font-size: 1rem; color: var(--ink); margin-bottom: 2px; }
.flow-list span { font-size: .85rem; color: var(--muted); }

.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.panel-card { background: linear-gradient(160deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: 12px; padding: 17px 18px; }
.panel-card h4 { font-family: var(--serif); font-size: 1.03rem; margin: 0 0 7px; color: var(--gold-bright); font-weight: 600; }
.panel-card p { margin: 0; font-size: .86rem; color: var(--ink-soft); }

/* event blueprint */
.bp-group { margin-bottom: 34px; }
.bp-cat { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--ink); margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; }
.bp-cat span { font-family: var(--sans); font-size: .7rem; color: var(--muted); font-weight: 500; }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 13px; }
.bp-card {
  display: flex; flex-direction: column; gap: 5px; padding: 16px 17px;
  background: linear-gradient(165deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 12px; box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), border-color .2s, box-shadow .2s;
}
.bp-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: var(--shadow); }
.bp-event { font-size: .64rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); font-weight: 700; }
.bp-title { font-family: var(--serif); font-size: 1.14rem; font-weight: 600; color: var(--gold-bright); line-height: 1.2; }
.bp-purpose { font-size: .82rem; color: var(--ink-soft); line-height: 1.55; }

.sign-row { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line-gold); }
.sign { text-align: center; }
.sign-name { font-family: var(--serif); font-weight: 600; color: var(--ink); font-size: 1rem; }
.sign-role { font-size: .76rem; color: var(--muted); margin-top: 3px; }
/* the signatories used to sit under the Execution Directives grid; with that
   block removed they lead the closing band, so drop the stacked top spacing
   that would otherwise leave ~190px of dead night sky above the divider */
.theme-close { padding-top: 0; }
.theme-close .sign-row { margin-top: 0; }
.theme-foot-cta { text-align: center; margin-top: 34px; }

@media (max-width: 560px) {
  .rubric-hero { gap: 12px; }
  .docs-grid { grid-template-columns: 1fr; }
  .sign-row { gap: 24px; }
}

/* Event incharges */
.incharges-box { margin-top: 30px; }
.incharges-note { font-size: .82rem; color: var(--muted); margin: -4px 0 16px; }
.incharge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.incharge {
  background: linear-gradient(160deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  box-shadow: var(--shadow-sm); transition: border-color .2s, transform .15s;
}
.incharge:hover { border-color: var(--line-gold); transform: translateY(-2px); }
.incharge-name { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--ink); letter-spacing: .01em; }
.incharge-role { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); margin: 3px 0 9px; font-weight: 600; }
.incharge-phone { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 600; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
a.incharge-phone:hover { color: var(--gold-glow); text-decoration: underline; }
@media (max-width: 560px) { .incharge-grid { grid-template-columns: 1fr; } }

.winners-box { margin-top: 32px; background: linear-gradient(160deg, var(--panel), var(--bg-2)); border: 1px solid var(--line-gold); border-radius: var(--radius); padding: 22px; box-shadow: var(--glow-gold); }
.winners-box h3 { font-family: var(--serif); margin: 0 0 16px; font-size: 1.25rem; color: var(--gold-bright); letter-spacing: .02em; }
.winner-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.winner-row:last-child { border-bottom: none; }
.winner-place { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; width: 40px; color: var(--gold-bright); }

.empty-state { text-align: center; padding-block: 70px; color: var(--muted); }
.empty-state .es-mark { font-size: 2.2rem; color: var(--gold); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { border-top: 1px solid var(--line-gold); margin-top: 40px; background: linear-gradient(180deg, transparent, var(--bg-2)); }
.footer-inner { text-align: center; padding-block: 40px 48px; }
/* ---- footer divider (vector; replaced the raster flourish) --------------
   The PNG it replaced was a page crop with an opaque navy ground, and no
   amount of masking hid the rectangle. Hairlines are CSS gradients so they
   fade to nothing at the ends; the ornament is stroked SVG so it is sharp at
   any width and costs no request. */
.footer-rule {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  max-width: min(620px, 86%); margin: 0 auto 22px;
}
.fr-line {
  flex: 1; height: 1px; min-width: 24px;
  background: linear-gradient(90deg, transparent, var(--line-gold) 55%, var(--gold) 100%);
}
.fr-line:last-child { background: linear-gradient(270deg, transparent, var(--line-gold) 55%, var(--gold) 100%); }

.fr-orn { flex: none; width: clamp(190px, 36vw, 260px); height: auto; overflow: visible; }
.fr-half path { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linecap: round; }
.fr-mirror { transform: translateX(240px) scaleX(-1); }

.fr-gem { fill: none; stroke: var(--gold-bright); stroke-width: 1.1; }
/* the glow lives on the small solid core only — on the outer diamond it bled
   inward and made an open outline look like a murky filled shape */
.fr-gem-in { fill: var(--gold-glow); filter: drop-shadow(0 0 5px rgba(241, 214, 140, .85)); }

@media (prefers-reduced-motion: no-preference) {
  /* halo scales, and an SVG path scales about the viewBox origin by default,
     which would fling the gem off to the left instead of breathing in place */
  .fr-gem-in { transform-box: fill-box; transform-origin: center; animation: halo 4s ease-in-out infinite; }
}
.footer-motto { font-family: var(--script); font-style: italic; font-size: 1.3rem; color: var(--gold-bright); margin: 0 0 10px; }
.footer-org { font-family: var(--serif); font-weight: 600; letter-spacing: .04em; margin: 0 0 6px; color: var(--ink); font-size: .92rem; }
.footer-note { font-size: .78rem; color: var(--muted); margin: 0; }

/* ============================================================
   Scroll-reveal + counters (JS toggles .in)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .06s; }
.reveal.d2 { transition-delay: .12s; }
.reveal.d3 { transition-delay: .18s; }
.reveal.d4 { transition-delay: .24s; }
.reveal.d5 { transition-delay: .30s; }

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes halo { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }
@keyframes shimmer { to { background-position: -220% center; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translate3d(3vw, 2vw, 0) scale(1.08); } }
@keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ============================================================
   Event page — one rules block per stage (prelims / on-stage final)
   ============================================================ */
.stage-block + .stage-block {
  margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line);
}
.stage-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.stage-head .rules-head { margin-bottom: 0; }
.stage-cat {
  font-family: var(--sans); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  padding: 4px 10px; border-radius: 999px;
  color: var(--cat); border: 1px solid currentColor; opacity: .9;
}
.stage-meta {
  font-family: var(--sans); font-size: .82rem; color: var(--muted);
  margin: 8px 0 14px; letter-spacing: .02em;
}

@media (max-width: 700px) {
  .stage-cat  { font-size: .7rem; }
  .stage-meta { font-size: .8rem; }
  .stage-block + .stage-block { margin-top: 26px; padding-top: 24px; }
}

/* ============================================================
   Patrons + Students Council band (above the footer, every page)
   ============================================================ */
.people-band {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line);
  padding: clamp(42px, 7vh, 78px) 0 clamp(34px, 6vh, 62px);
  background: linear-gradient(180deg, transparent, rgba(12, 19, 41, .45));
}
.people-group + .people-group { margin-top: clamp(34px, 5vh, 58px); }

.people-label {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(.62rem, 1.5vw, .76rem);
  text-transform: uppercase; letter-spacing: .3em;
  color: var(--gold-bright); text-align: center;
  margin: 0 0 6px; padding-left: .3em;
}
/* the little gold rule under each label */
.people-label::after {
  content: ""; display: block; width: 46px; height: 1px; margin: 11px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.people-note {
  text-align: center; font-family: var(--script); font-style: italic;
  font-size: .92rem; color: var(--muted); margin: 0 0 4px;
}

.people-grid {
  display: grid; gap: 14px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  /* every row as tall as the tallest, so a name that needs three lines on a
     narrow screen does not leave the row below it shorter */
  grid-auto-rows: 1fr;
}
/* patrons and deans are few — keep them on one centred row rather than
   letting auto-fit stretch three cards across a 1600px screen */
.is-patrons  .people-grid { max-width: 1040px; margin-inline: auto; }
.is-guidance .people-grid { max-width: 640px; margin-inline: auto; }
/* 3 across so the rows read exactly like the official Council poster:
   President / General Secretary / Council Coordinator, and so on. 12 members
   divide evenly into 4 rows of 3. */
.is-council  .people-grid { grid-template-columns: repeat(3, 1fr); max-width: 940px; margin-inline: auto; }

/* Grid stretches the boxes to equal heights already, but a one-line name and a
   two-line name pushed the role to different heights inside them. So the name
   block always reserves two lines and centres in them, and the role is pinned
   to the bottom of the card. Every row now aligns: name band, role band. */
.pc {
  text-align: center; padding: 16px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel);
  display: flex; flex-direction: column; align-items: center;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.pc:hover { border-color: var(--line-gold); transform: translateY(-2px); }
.pc-name {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(.94rem, 1.7vw, 1.06rem);
  color: var(--ink); line-height: 1.25;
  /* exactly two lines of headroom, whatever the name does inside it */
  min-height: 2.5em; width: 100%; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
}
.pc-role {
  font-family: var(--sans); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--muted); width: 100%;
  /* `auto` pins it to the foot of the card. With grid-auto-rows: 1fr every card
     in the group is the same height, so every role lands on the same line. */
  margin-top: auto;
  /* exactly two lines reserved at this line-height, and content aligned to the
     top of that box: a two-line role like "Secretary & Correspondent" then
     starts on the same line as every one-line role instead of straddling it */
  line-height: 1.3; min-height: 2.6em;
  display: flex; align-items: flex-start; justify-content: center;
}
.pc-tel {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 11px;
  font-family: var(--sans); font-size: .82rem; font-variant-numeric: tabular-nums;
  color: var(--gold-bright); letter-spacing: .04em;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(201, 154, 70, .3);
  transition: background .2s, border-color .2s, color .2s;
}
.pc-tel-ico { width: 12px; height: 12px; fill: currentColor; flex: none; }
.pc-tel:hover, .pc-tel:focus-visible {
  background: rgba(201, 154, 70, .14);
  border-color: rgba(231, 194, 113, .7); color: var(--gold-glow); outline: none;
}

@media (max-width: 560px) {
  .people-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; }
  .is-council .people-grid { grid-template-columns: 1fr 1fr; max-width: none; }
  .pc { padding: 13px 10px; }
  .pc-role { font-size: .66rem; letter-spacing: .1em; }
  .people-label { letter-spacing: .22em; }
}

@media (prefers-reduced-motion: reduce) {
  .pc:hover { transform: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 680px) {
  .brand-text { display: none; }
  .brand-mark { width: 38px; height: 38px; }
  .header-inner { gap: 10px; height: 62px; }
  .podium { grid-template-columns: 1fr; }
  .podium-card.rank-1 { transform: none; }
  .lb-table .hide-sm { display: none; }
  .lb-dept small.lb-inline-tags { display: block; }
  .home-strip { grid-template-columns: 1fr; }
  .site-nav a:not(.nav-rulebook) { font-size: .78rem; }
  .nav-rulebook { padding: 6px 12px !important; }

  /* brand + nav together overflow 390px and space-between shoves the brand
     off-screen, so stack them: brand on top, nav centred underneath.
     This header is sticky, so every pixel here is permanently off the screen —
     keep it compact: small mark, no sub-line, and a nav that fits ONE line.
     (44px tap targets made the nav wrap to two lines and the header hit 171px,
     a fifth of an 844px phone.) */
  .header-inner { flex-direction: column; height: auto; gap: 5px; padding-block: 7px; }
  .brand { justify-content: center; min-height: 0; gap: 9px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-title { font-size: 1rem; }
  .brand-text { display: flex; }
  /* the sub-line duplicates the footer and was the last sub-11px text left */
  .brand-sub { display: none; }
  /* Six items do not fit a 390px row inside the container gutter, so the nav
     runs full-bleed and stays one swipeable line rather than growing the
     sticky header to two rows. `flex-start` + auto margins on the end items
     centres it when it fits and keeps BOTH ends reachable when it does not
     (plain `center` clips the first item off the left edge, unreachable). */
  .site-nav {
    width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 12px;
    justify-content: flex-start; flex-wrap: nowrap; gap: 11px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav > :first-child { margin-inline-start: auto; }
  .site-nav > :last-child  { margin-inline-end: auto; }
  .site-nav a { flex: none; }
  /* fade the end you can still swipe toward, so a half-shown Rulebook pill
     reads as "keep going" instead of a clipped layout */
  .site-nav.can-scroll {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
  }
  .site-nav.can-scroll.at-start {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
  }
  .site-nav.can-scroll.at-end {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 100%);
  }
  .site-nav.can-scroll.at-start.at-end { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 430px) {
  .site-nav { gap: 12px; }
  .site-nav a:not(.nav-rulebook) { font-size: .74rem; }
}

/* ============================================================
   Smartphone pass
   Audited at 390px and 360px on every route. Horizontal overflow was already
   clean; these two blocks fix the things that actually hurt on a phone:
   (1) touch targets — most links/chips were 21-35px tall, under the 44px
       guidance, and the phone-number links were the worst at 24px
   (2) micro-type — letterspaced caps had bottomed out at 8.6-10px
   Desktop values are untouched; everything here is mobile-only.
   ============================================================ */
@media (max-width: 700px) {

  /* ---- touch targets ---- */
  /* 44px of tappable height without adding visual bulk: the padding grows the
     hit area, inline-flex keeps the label optically centred. */
  .site-nav a:not(.nav-rulebook) { min-height: 40px; display: inline-flex; align-items: center; padding: 6px 0; }
  .nav-rulebook  { min-height: 40px; display: inline-flex; align-items: center; padding: 6px 11px !important; }
  .brand         { min-height: 44px; }
  .chip          { min-height: 44px; display: inline-flex; align-items: center; }
  .section-link,
  .back-link,
  .theme-link    { min-height: 44px; display: inline-flex; align-items: center; }
  .pc-tel        { min-height: 44px; padding: 10px 16px; }
  /* these are phone numbers people will actually tap — they were 24px */
  .incharge-phone {
    min-height: 44px; padding: 9px 16px; border-radius: 999px;
    border: 1px solid rgba(201, 154, 70, .3);
  }

  /* ---- readable micro-type (nothing below ~11px) ---- */
  .hero-eyebrow    { font-size: .7rem; letter-spacing: .24em; }
  .section-eyebrow { font-size: .72rem; letter-spacing: .22em; }
  .ec-cat,
  .ec-flag         { font-size: .7rem; }
  .lb-pill         { font-size: .7rem; padding: 4px 10px; }
  .lb-table th     { font-size: .7rem; }
  .lb-dept small   { font-size: .74rem; }
  .bp-event        { font-size: .7rem; letter-spacing: .13em; }
  .theme-eyebrow   { font-size: .7rem; }
  .duality-sub     { font-size: .72rem; letter-spacing: .18em; }
  .incharge-role   { font-size: .72rem; }
  .stat-label      { font-size: .72rem; letter-spacing: .13em; }
  .date-heading .dow,
  .date-heading .count { font-size: .74rem; }
  .pc-role         { font-size: .7rem; }

  /* iOS Safari zooms the whole page when a focused input is under 16px, which
     yanks the layout sideways mid-typing. 16px exactly is the threshold. */
  .search-input { font-size: 16px; min-height: 44px; }
}

/* the smaller/older phones still in use (iPhone SE, 360dp Androids) */
@media (max-width: 430px) {
  .site-nav a:not(.nav-rulebook) { font-size: .74rem; }
  .site-nav { gap: 8px; }
  .nav-rulebook { padding: 6px 10px !important; }
}

/* Six items genuinely will not fit one row below ~420px at a legible size, and
   a half-cut Rulebook pill reads as broken however you fade it. So under 420px
   the nav wraps to two centred rows of three; above it, it stays one line.
   Costs ~40px of sticky header, which is the honest trade. */
@media (max-width: 420px) {
  .site-nav {
    flex-wrap: wrap; overflow: visible;
    justify-content: center; column-gap: 14px; row-gap: 2px;
    width: 100%; margin-inline: 0; padding-inline: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  .site-nav > :first-child, .site-nav > :last-child { margin-inline: 0; }
  /* without a forced break the row fills 5-then-1 and Rulebook sits alone */
  .nav-break { display: block; flex: 0 0 100%; height: 0; }
  /* claw back some of the second row from the brand line above it */
  .brand-mark { width: 27px; height: 27px; }
  .brand-title { font-size: .95rem; }
  .header-inner { gap: 2px; padding-block: 6px; }
}
@media (max-width: 360px) {
  .site-nav a:not(.nav-rulebook) { font-size: .72rem; }
  .site-nav { gap: 6px; padding-inline: 10px; }
  .nav-rulebook { padding: 6px 9px !important; font-size: .72rem; }
}

/* a blue flash on tap looks wrong on a gold-on-navy page */
* { -webkit-tap-highlight-color: rgba(231, 194, 113, .18); }

/* ============================================================
   Reduced motion — kill the heavy stuff, keep it dignified
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  #starfield { animation: none; }
}