/* Porsche Palooza — shared stylesheet.
   Extracted from the design handoff. Shell (tokens, nav, footer, stripe) is
   shared; page-specific rules are scoped under a body.page-* class so the
   small per-page differences from the design don't collide. */

:root {
  --bg: #161513;
  --bg-alt: #1e1c19;
  --text: #f3f1ec;
  --text-dim: rgba(243, 241, 236, 0.68);
  --text-faint: rgba(243, 241, 236, 0.45);
  /* Primary event color — the ONE knob to change per year.
     Every accent on the site derives from this. --accent-dark is
     computed from it (used for pressed/active states), so you only
     ever edit --accent. e.g. 2026: #e8621a (orange). */
  --accent: #e8621a;
  --accent-dark: color-mix(in srgb, var(--accent) 77%, #000);
  --line: rgba(243, 241, 236, 0.16);
  /* Decorative-only colours sampled from this year's event badge. They are
     NOT interchangeable with --accent: #bf040b on --bg is 3.2:1, which fails
     AA for text, where --accent is 5.5:1. Use these for fills and rules that
     carry no information; every link, button, focus ring and piece of accent
     text stays --accent. Re-sample them when the badge changes (or delete the
     .stripe override below to go back to the plain orange racing stripe). */
  --flag-navy: #06153c;
  --flag-red: #bf040b;
  /* Light backing for sponsor logos (the About page's sponsor wall, region
     cards, title sponsor) — most sponsor artwork is drawn for a white page and
     disappears on --bg. White rather than the --text cream so logos supplied
     as white-background JPEGs blend in instead of showing as boxes. */
  --plate: #fff;
  --plate-ink: var(--bg);
  --edge: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  text-wrap: pretty;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }

.stripe {
  height: 6px;
  background: repeating-linear-gradient(115deg, var(--accent) 0 18px, var(--bg) 18px 36px);
}
/* 2026 only: run the racing stripe in the badge's flag colours. Purely
   decorative — it carries no text, so the AA note on --flag-red doesn't bite.
   Delete this rule to return the stripe to the --accent orange above. */
.stripe {
  background: repeating-linear-gradient(
    115deg,
    var(--flag-red) 0 18px,
    var(--text) 18px 36px,
    var(--flag-navy) 36px 54px,
    var(--bg) 54px 72px
  );
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--edge); }

/* ------------------------------------------------- This year's event badge */
/* Edition.logo, rendered by content/_event_badge.html. Shared because the same
   mark appears on the login panel, the registration gate and receipt, and the
   shop — the home hero styles its own copy (see .page-home .hero-badge). The
   drop shadow keeps the badge's navy edge from dissolving into --bg. */
.event-badge {
  /* Centred wherever it stands on its own — the gates, the auth panel, the
     receipt, the error pages — whatever the alignment of the text under it.
     The two flex headers below opt out with `margin: 0`, which they must:
     auto side margins on a flex item eat the row's free space. */
  display: block;
  height: auto;
  margin: 0 auto 22px;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
}
.event-badge--sm { width: 96px; }
.event-badge--md { width: 132px; }
.event-badge--lg { width: 190px; }
@media (max-width: 640px) {
  .event-badge--lg { width: 150px; }
}

/* ---------------------------------------------- Downloadable documents */
/* events/_document_link.html — the attendee PDFs (event summary, tour sheet).
   Shared (not scoped to a page) because the same links sit on the schedule
   page, the wizard's activity steps and the registration dashboard, each under
   a different body.page-*. --locked is the not-yet-registered state: still
   legible and still clickable (it routes to registration), just not dressed as
   a live download. .doc-links is the row they share: equal-width columns, so a
   pair reads as a pair rather than two ragged blocks of whatever length their
   own copy happens to be. It collapses to nothing when neither document has
   been uploaded. */
.doc-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 22px 0;
  /* There are only ever two of these, so cap the row: left to fill the
     schedule page's full measure they either sprawl or split into three
     columns and shrink. */
  max-width: 680px;
}
.doc-links .doc-link { margin-top: 0; }
.doc-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 12px 18px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-alt);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.doc-link:hover {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-alt));
}
.doc-link-tag {
  flex: none;
  padding: 5px 9px;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}
.doc-link-text { display: flex; flex-direction: column; gap: 3px; }
.doc-link-title { font-weight: 600; line-height: 1.2; }
.doc-link-meta {
  color: var(--text-faint);
  font-size: 0.8125rem;
  line-height: 1.2;
}
/* The revision date is its own line rather than a "· updated" tail on the
   description: in a fixed-width column that tail wrapped mid-phrase, so the
   break now falls where it means something. */
.doc-link-date {
  color: var(--text-faint);
  font-size: 0.75rem;
  line-height: 1.2;
  opacity: 0.85;
}
.doc-link--locked .doc-link-tag { background: var(--line); color: var(--text-dim); }
.doc-link--locked:hover .doc-link-tag { background: var(--accent); color: #fff; }

@media (max-width: 560px) {
  .doc-links { grid-template-columns: 1fr; }
  .doc-link { display: flex; }
}

/* ------------------------------------------------------------------ Nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--edge);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  row-gap: 10px;
  /* Minimum gap between the three groups (brand / links / account). Without it,
     a staff login's extra items crowd the last link right up against the account
     cluster; with it, the account cluster keeps breathing room and, when the row
     can't fit everything, wraps to its own line (right-aligned by nav-account's
     margin-left:auto) instead of colliding. */
  column-gap: 40px;
}
.nav-brand {
  font-family: 'Archivo Black', sans-serif;
  font-size: 19px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.nav-links a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.nav-login {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.nav-back {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-dim);
}
.nav-exits { display: flex; align-items: center; gap: 24px; }
/* Authenticated account controls on the right of the main nav. margin-left:auto
   keeps them right-aligned even when the row wraps at mid-desktop widths. */
.nav-account { display: flex; align-items: center; gap: 20px; margin-left: auto; }
/* The links + account cluster share one wrapper for the mobile toggle to control.
   `display: contents` makes the wrapper vanish on desktop, so brand / nav-links /
   nav-account stay the three flex children the desktop layout is tuned for. */
.nav-menu { display: contents; }
/* Hamburger button — hidden except on small screens with JS (see the media query). */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 9px; margin: -9px -9px -9px auto;
  background: none; border: none; cursor: pointer;
}
.nav-toggle-bar { display: block; width: 24px; height: 2px; background: var(--text); transition: transform .2s, opacity .2s; }
.nav.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 640px) {
  /* Link lists stack full-width on mobile (both the JS-collapsed and no-JS forms). */
  .nav-links { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .nav-links a { font-size: 14px; width: 100%; padding: 11px 0; border-bottom: 1px solid var(--line); }
  .nav-account { margin-left: 0; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .nav-menu > .nav-login,
  .nav-account .nav-login { display: block; width: 100%; padding: 11px 0; }
  .nav-account .nav-login { border-top: 1px solid var(--line); }

  /* No-JS fallback: the old stacked column, menu always visible, no toggle. */
  .nav { flex-direction: column; align-items: flex-start; padding: 18px var(--edge); }

  /* JS on: brand + hamburger on one row; the menu drops below when opened. */
  .js .nav { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .js .nav-toggle { display: flex; }
  .js .nav-menu { display: none; order: 3; width: 100%; margin-top: 10px; }
  .js .nav.is-open .nav-menu { display: flex; flex-direction: column; }
}

/* --------------------------------------------------------------- Kicker */
.kicker {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}

/* --------------------------------------------------------------- Footer */
footer {
  padding: 40px 0 48px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-faint);
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
footer .foot-links { display: flex; gap: 18px; margin-top: 10px; }
footer .foot-links a { color: var(--text-faint); }
footer .foot-links a:hover { color: var(--accent); }

/* ------------------------------------------ Reusable media section (CMS) */
.media-section {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 40px clamp(24px, 5vw, 80px);
  align-items: center;
  padding: 56px 0;
}
.media-section.full { grid-template-columns: 1fr; }
.media-title {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 34px);
  margin: 0;
  letter-spacing: -0.005em;
}
.media-copy .addr {
  font-size: 15px;
  color: var(--accent);
  font-weight: 700;
  margin: 14px 0 0;
  letter-spacing: 0.02em;
}
.media-copy .body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-dim);
  margin: 14px 0 0;
  max-width: 48ch;
}
.media-figure { margin: 0; width: 100%; }
.media-figure img,
.media-figure .placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.media-figure .placeholder {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.media-section.image-left .media-copy { order: 2; }
.media-section.image-left .media-figure { order: 1; }
@media (max-width: 720px) {
  .media-section { grid-template-columns: 1fr; }
  .media-figure { order: -1; }
}

/* ==================================================================
   HOME
   ================================================================== */
.page-home .hero { padding: 88px 0 56px; }
.page-home .hero.has-bg { position: relative; padding: 96px 0 72px; overflow: hidden; }
.page-home .hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-home .hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-home .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Dark behind the copy (a bright car or a white parking line under the
       intro made it hard to read at 55%), lifting only past the copy column,
       where the badge sits on the photo. */
    linear-gradient(100deg, rgba(22,21,19,0.82) 0%, rgba(22,21,19,0.72) 45%, rgba(22,21,19,0.2) 78%, rgba(22,21,19,0.1) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 30%);
}
.page-home .hero-inner { position: relative; z-index: 1; }
.page-home .hero.has-bg .hero-inner {
  text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}
/* This year's event badge beside the headline. The hero photo's overlay is
   deliberately weakest on the right (see .hero-bg::after), so the badge lands
   on the most visible part of the photo and the copy keeps the dark side. */
.page-home .hero-inner.has-badge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(210px, 26vw, 340px);
  align-items: center;
  gap: clamp(28px, 5vw, 68px);
}
.page-home .hero-badge img {
  display: block;
  width: 100%;
  height: auto;
  /* Reads as a sticker laid on the photo rather than a flat paste-up, and
     keeps the badge's navy edge off a bright patch of the background. */
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.6));
}
@media (max-width: 860px) {
  .page-home .hero-inner.has-badge {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 30px;
  }
  /* Badge first on a narrow screen — it's the fastest read of what this is. */
  .page-home .hero-badge { order: -1; }
  .page-home .hero-badge img { width: clamp(150px, 42vw, 220px); }
}
@media (max-width: 720px) {
  .page-home .hero.has-bg { padding: 90px 0 56px; }
  /* Heavier than it was: the orange kicker sits mid-photo on a phone, and at
     0.55 it vanished over a bright car. The top stays lighter for the badge. */
  .page-home .hero.has-bg .hero-bg::after {
    background: linear-gradient(to top, var(--bg) 10%, rgba(22,21,19,0.74) 55%, rgba(22,21,19,0.45) 100%);
  }
  /* The small orange kicker lands mid-photo on a phone, over whatever car is
     there; the soft hero shadow isn't enough behind 13px type, so give it a
     tight dark halo of its own. */
  .page-home .hero.has-bg .kicker {
    text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.85);
  }
}
.page-home .display {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: clamp(40px, 6.6vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0;
}
.page-home .display .line { display: block; }
.page-home .display .line.accent { color: var(--accent); }
.page-home .hero .sub {
  font-size: 18px;
  line-height: 1.6;
  max-width: 62ch;
  margin: 28px 0 0;
  color: var(--text-dim);
}
/* The kicker is "Place · Dates": each part holds together, so a phone breaks
   between them rather than inside "November 11–15". */
.page-home .kicker-part { white-space: nowrap; }
.page-home .nowrap { white-space: nowrap; }
/* The hero's one call to action — follows the registration window. */
.page-home .hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 34px;
}
.page-home .btn {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 26px;
  border: 2px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: var(--bg);
  text-shadow: none;
  transition: background 0.15s, color 0.15s;
}
.page-home .btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--text); }
.page-home .btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.page-home .btn-ghost { background: rgba(22,21,19,0.4); color: var(--text); }
.page-home .btn-ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.page-home .cta-note {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.page-home .cta-note time { color: var(--text); white-space: nowrap; }

/* Key dates — built from the current Edition (content/key_dates.py). One
   ruled grid like "What to expect"; the next date carries the accent, the
   ones already behind us step back. */
.page-home .key-dates { padding: 56px 0 8px; }
.page-home .kd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  /* Rules on the cells, not a filled gap: the count varies by year, and a
     short last row would otherwise show the grid background as a grey box. */
  padding: 1px 0 0 1px;
}
.page-home .kd {
  background: var(--bg);
  padding: 22px 24px 24px;
  margin: -1px 0 0 -1px;
  border: 1px solid var(--line);
  box-shadow: inset 0 3px 0 transparent;
}
.page-home .kd.is-next { box-shadow: inset 0 3px 0 var(--accent); background: var(--bg-alt); }
.page-home .kd p { margin: 0; }
.page-home .kd-date { display: block; }
.page-home .kd-day {
  display: block;
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: 28px;
  line-height: 1;
  color: var(--accent);
}
.page-home .kd-time {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.page-home .kd .kd-label { margin-top: 14px; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--text); }
.page-home .kd .kd-label a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.page-home .kd .kd-label a:hover { color: var(--accent); }
.page-home .kd .kd-note { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.page-home .kd-flag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  vertical-align: 2px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
}
.page-home .kd.is-past .kd-day { color: var(--text-faint); }
.page-home .kd.is-past .kd-label,
.page-home .kd.is-past .kd-note { color: var(--text-faint); }
/* On a phone: a ruled list, the date in a left column. */
@media (max-width: 560px) {
  .page-home .kd-list { grid-template-columns: 1fr; }
  .page-home .kd {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 16px;
    padding: 18px 18px 18px 16px;
  }
  .page-home .kd.is-next { box-shadow: inset 3px 0 0 var(--accent); }
  .page-home .kd-date { grid-row: span 2; }
  .page-home .kd-day { font-size: 22px; }
  .page-home .kd-time { font-size: 11px; line-height: 1.45; }
  .page-home .kd .kd-label { margin-top: 0; }
}
.page-home .stats { padding: 52px 0; }
/* Three equal columns. It was `repeat(3, auto)` + space-between, which pinned
   the first stat hard left and the last hard right and squeezed the middle
   label to three lines — the row read as uneven. */
.page-home .stats .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
/* Three columns are too narrow on a phone ("Days of drives, dinners & a car
   show" ran to five lines), so each stat becomes a row: number, then label. */
@media (max-width: 560px) {
  .page-home .stats .grid { grid-template-columns: 1fr; gap: 22px; }
  .page-home .stats .grid > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
  }
  .page-home .stat-label { margin: 0; max-width: none; }
}
.page-home .stat-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(40px, 4vw, 60px);
  line-height: 1;
  color: var(--accent);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.page-home .stat-label {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 12px 0 0;
  max-width: 24ch;
  font-weight: 600;
}
/* The countdown bar under the hero: the clock to the first drive on the left,
   the title sponsor (on a --plate, like the About page) on the right. The
   numbers share the stats row's Archivo Black so the two read as one system. */
.page-home .countdown-bar {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
}
.page-home .countdown-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 40px;
}
.page-home .countdown p { margin: 0; }
.page-home .countdown-clock { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.page-home .countdown-clock .unit { display: inline-flex; align-items: baseline; gap: 8px; }
.page-home .countdown-clock .num {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.page-home .countdown-clock .lbl,
.page-home .countdown-when,
.page-home .countdown-sponsor .lead {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.page-home .countdown-when { margin-top: 10px; color: var(--text-dim); }
.page-home .countdown-live {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  text-transform: uppercase;
  color: var(--accent);
}
.page-home .countdown-sponsor { display: flex; align-items: center; gap: 16px; }
.page-home .countdown-sponsor .plate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 12px 22px;
  background: var(--plate);
  color: var(--plate-ink);
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
}
.page-home .countdown-sponsor .plate:has(img) { padding: 0; }
/* Sponsor artwork usually arrives with its own white margin (Porsche Tulsa's
   is ~40% whitespace), so the image fills the plate edge to edge and the
   file's margin does the padding. */
.page-home .countdown-sponsor img { display: block; height: 84px; width: auto; max-width: 260px; object-fit: contain; }
.page-home .countdown-sponsor:hover .plate { box-shadow: inset 0 0 0 2px var(--accent); }
.page-home .countdown-sponsor:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 700px) {
  .page-home .countdown-inner { flex-direction: column; align-items: flex-start; }
  .page-home .countdown-sponsor { width: 100%; justify-content: space-between; }
}

.page-home .features { padding: 56px 0; }
/* The media section's own top padding stacked on the features' bottom
   padding left the widest gap on the page before the host hotel. */
.page-home .features + .media-section { padding-top: 8px; }
.page-home .section-title {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 32px;
  letter-spacing: -0.005em;
}
.page-home .cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-home .col { background: var(--bg); padding: 30px 28px; }
.page-home .col h3 {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: 19px;
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}
.page-home .col p { font-size: 15px; line-height: 1.65; margin: 0; color: var(--text-dim); }
@media (max-width: 900px) { .page-home .cols { grid-template-columns: 1fr; } }

/* ==================================================================
   ABOUT & SPONSORS
   ================================================================== */
.page-about .page-head { padding: 64px 0 40px; }
.page-about .page-title {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.02;
  margin: 0;
  letter-spacing: -0.005em;
}
.page-about .page-head .sub {
  font-size: 17px;
  line-height: 1.6;
  max-width: 62ch;
  margin: 22px 0 0;
  color: var(--text-dim);
}
.page-about section.block { padding: 40px 0; }
.page-about .section-title {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 28px;
  letter-spacing: -0.005em;
}
.page-about .regions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.page-about .region-card { background: var(--bg); padding: 26px 24px; }
.page-about .region-card h3 {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: 17px;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}
.page-about .region-card p { font-size: 14px; margin: 0; color: var(--text-dim); }
/* An uploaded region logo sits on a --plate band across the top of its card. */
.page-about .region-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  margin: -26px -24px 22px;
  padding: 16px 24px;
  background: var(--plate);
}
.page-about .region-logo-link:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.page-about .region-logo {
  display: block;
  max-height: 80px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
@media (max-width: 800px) { .page-about .regions-grid { grid-template-columns: 1fr; } }
.page-about .tier-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 44px 0 16px;
}
.page-about .tier-label.first { margin-top: 0; }
.page-about .title-sponsor {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: 32px;
  margin: 0;
  letter-spacing: -0.005em;
}
/* The sponsor wall: every tile (logo or name) on a --plate. The grid itself is
   transparent, so the 1px gaps show the dark page through as hairlines and a
   short last row simply ends instead of leaving a filled block. The tiers use
   auto-*fit*, not auto-fill: a tier with fewer sponsors than one row holds
   (five Silver in a six-up grid) stretches across the row instead of leaving an
   empty slot hanging off its end. */
.page-about .tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px;
}
.page-about .tier-grid a,
.page-about .tier-grid .tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  background: var(--plate);
  padding: 18px 16px;
  font-size: 14.5px;
  color: var(--plate-ink);
  text-align: center;
  font-weight: 500;
}
.page-about .tier-grid a:hover {
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 2px var(--accent);
}
/* Gold outranks Silver by size: bigger tiles, logos and names, fewer per row. */
.page-about .tier-grid--gold { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.page-about .tier-grid--gold a,
.page-about .tier-grid--gold .tile {
  min-height: 116px;
  padding: 22px 24px;
  font-size: 16px;
  font-weight: 600;
}
.page-about .tier-grid--gold .sponsor-logo { max-height: 68px; }
.page-about .tier-grid--silver { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.page-about .tier-grid--silver a,
.page-about .tier-grid--silver .tile {
  min-height: 96px;
  padding: 16px;
  font-size: 13.5px;
}
/* Nearly Gold's height: square, detailed logos (a badge, a car drawing) are
   height-bound and turn to specks at ~50px. Silver still reads smaller through
   the tighter 6-up grid and the shorter tile. */
.page-about .tier-grid--silver .sponsor-logo { max-height: 62px; }
@media (max-width: 600px) {
  /* Keep Gold two-up on phones rather than one huge tile per row. */
  .page-about .tier-grid--gold { grid-template-columns: repeat(2, 1fr); }
}
.page-about .sponsor-logo {
  display: block;
  max-height: 46px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
/* The title sponsor is one full-width plate: the top of the sponsor hierarchy
   (title 1-up, then Gold 4-up, then Silver 6-up). */
.page-about .title-sponsor a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 24px;
  background: var(--plate);
  color: var(--plate-ink);
}
.page-about .title-sponsor a:hover {
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.page-about .title-sponsor-logo {
  display: block;
  max-height: 132px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* ==================================================================
   CONTACT & FAQ
   ================================================================== */
.page-contact .wrap { max-width: 900px; }
.page-contact .page-head { padding: 64px 0 40px; }
.page-contact .page-title {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.02;
  margin: 0;
  letter-spacing: -0.005em;
}
.page-contact .page-head .sub {
  font-size: 17px;
  line-height: 1.6;
  margin: 22px 0 0;
  color: var(--text-dim);
}
.page-contact .contact-card {
  border: 1px solid var(--line);
  padding: 26px 28px;
  margin: 8px 0 40px;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.page-contact .contact-card .item h3 {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}
.page-contact .contact-card .item p { margin: 0; font-size: 15px; color: var(--text-dim); }
.page-contact .faq { padding: 8px 0 56px; }
.page-contact .faq-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.page-contact .faq-item:first-child { border-top: 1px solid var(--line); }
.page-contact .faq-q { font-weight: 700; font-size: 16.5px; margin: 0; color: var(--text); }
.page-contact .faq-a { font-size: 15px; line-height: 1.65; margin: 10px 0 0; color: var(--text-dim); }

/* ==================================================================
   PRIVACY / LEGAL
   ================================================================== */
.page-privacy .wrap { max-width: 760px; }
.page-privacy .page-head { padding: 64px 0 32px; }
.page-privacy .page-title {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.02;
  margin: 0;
  letter-spacing: -0.005em;
}
.page-privacy .page-head .sub {
  font-size: 15px;
  margin: 18px 0 0;
  color: var(--text-dim);
}
.page-privacy .legal-body { padding: 0 0 72px; color: var(--text-dim); }
.page-privacy .legal-body h2 {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 40px 0 12px;
}
.page-privacy .legal-body h3 {
  font-weight: 700;
  font-size: 16.5px;
  color: var(--text);
  margin: 28px 0 8px;
}
.page-privacy .legal-body h4 {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin: 20px 0 6px;
}
.page-privacy .legal-body p,
.page-privacy .legal-body li { font-size: 15px; line-height: 1.7; }
.page-privacy .legal-body p { margin: 0 0 14px; }
.page-privacy .legal-body ul { margin: 0 0 16px; padding-left: 22px; }
.page-privacy .legal-body li { margin: 0 0 6px; }
.page-privacy .legal-body a { color: var(--accent); }

/* ==================================================================
   LOGIN
   ================================================================== */
.page-login .stage { display: flex; justify-content: center; padding: 80px var(--edge) 100px; }
.page-login .panel { width: 100%; max-width: 420px; }
.page-login .panel h1 {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: clamp(30px, 4vw, 40px);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.page-login .panel .lead { font-size: 15px; line-height: 1.6; color: var(--text-dim); margin: 0 0 36px; }
.page-login form { display: flex; flex-direction: column; gap: 20px; }
.page-login .field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.page-login .field input {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  padding: 13px 14px;
  border-radius: 2px;
}
.page-login .field input::placeholder { color: var(--text-faint); }
.page-login .field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.page-login .row-between { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
.page-login .row-between a { color: var(--text-dim); }
.page-login .row-between a:hover { color: var(--accent); }
.page-login .btn-submit {
  margin-top: 4px;
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
  padding: 15px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.page-login .btn-submit:hover { background: var(--accent); color: var(--bg); }
.page-login .btn-submit:active { background: var(--accent-dark); border-color: var(--accent-dark); }
.page-login .divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0;
  color: var(--text-faint);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-login .divider::before, .page-login .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.page-login .register-note { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); text-align: center; }
.page-login .register-note a { color: var(--accent); font-weight: 600; }
.page-login .note-box {
  margin-top: 28px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-faint);
  border: 1px solid var(--line);
  padding: 14px 16px;
}

/* Social login (django-allauth). Secondary buttons, subtler than .btn-submit. */
.page-login .providers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-login .btn-provider {
  display: block;
  text-align: center;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.page-login .btn-provider:hover { border-color: var(--accent); color: var(--accent); }

/* allauth form/message feedback, styled to the panel. */
.page-login .form-errors,
.page-login .auth-messages {
  list-style: none;
  margin: 0 0 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
/* An error is not a notice: same red family as the field-level errorlist. */
.page-login .form-errors {
  border-color: rgba(229, 115, 90, 0.45);
  border-left-color: #e5735a;
  background: rgba(229, 115, 90, 0.08);
  color: #f0b7b2;
}
.page-login .auth-messages li + li { margin-top: 6px; }
.page-login .errorlist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 13px;
  color: #e5735a;
}

/* Logout affordance in the main-site nav (a POST form, not a link). */
.nav-logout { margin: 0; display: inline; }
button.nav-login,
button.nav-back {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
/* Match the sibling <a> account links: same weight, and block display so the
   button isn't dropped ~1.5px by the form's inline baseline strut next to them. */
button.nav-login { display: block; font-weight: 400; }
button.nav-back { font-weight: 600; }
button.nav-back { color: var(--text-dim); }
button.nav-login:hover,
button.nav-back:hover { color: var(--accent); }

/* ------------------------------------------------------ Schedule page */
.page-schedule { --tabs-h: 58px; }
html:has(.page-schedule) { scroll-behavior: smooth; }

.page-schedule .page-head { padding: 64px 0 28px; }
.page-schedule .page-title {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.02;
  margin: 0;
  letter-spacing: -0.005em;
}
.page-schedule .page-head .sub {
  font-size: 17px;
  line-height: 1.6;
  margin: 22px 0 0;
  color: var(--text-dim);
}

/* Sticky day tabs (jump-nav) */
.page-schedule .sched-days {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.page-schedule .sched-days-inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.page-schedule .sched-days-inner::-webkit-scrollbar { display: none; }
.page-schedule .sched-days a {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
}
.page-schedule .sched-days a:hover {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.page-schedule .sched-days .d-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.page-schedule .sched-days .d-date { font-size: 12.5px; color: var(--text-faint); }

.page-schedule .sched-day {
  margin-bottom: 40px;
  scroll-margin-top: calc(var(--tabs-h) + 10px);
}
.page-schedule .sched-date {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: clamp(18px, 2.4vw, 22px);
  letter-spacing: 0.01em;
  margin: 0 0 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.page-schedule .sched-list { display: flex; flex-direction: column; gap: 3px; }

/* Each activity is a segmented card with a left accent tick */
.page-schedule .sched-item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 6px 28px;
  padding: 22px 20px 22px 18px;
  border-left: 2px solid var(--line);
  border-radius: 0 3px 3px 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.page-schedule .sched-item:hover {
  background: var(--bg-alt);
  border-left-color: var(--accent);
}

/* Time stays with its (possibly tall) entry as you scroll it */
.page-schedule .sched-time {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  position: sticky;
  top: calc(var(--tabs-h) + 16px);
  align-self: start;
}
.page-schedule .sched-time-end {
  display: block;
  color: var(--text-faint);
  font-weight: 500;
  margin-top: 2px;
}

.page-schedule .sched-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.page-schedule .sched-name {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  margin: 0;
  letter-spacing: 0.01em;
}
.page-schedule .sched-type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}

/* Meta tag row — the scannable info, pulled up under the title */
.page-schedule .sched-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
}
.page-schedule .sched-tags .tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
}
.page-schedule .sched-tags .tag a { color: inherit; }
.page-schedule .sched-tags .tag-cost {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}
.page-schedule .sched-tags .tag-map { color: var(--accent); }
.page-schedule .sched-tags .tag-map,
.page-schedule .sched-tags .tag-place {
  transition: border-color 0.12s ease, color 0.12s ease;
}
.page-schedule .sched-tags .tag-map:hover,
.page-schedule .sched-tags .tag-place:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Description + no-JS read-more (a <details> whose <summary> is the preview) */
.page-schedule .sched-desc {
  margin: 12px 0 0;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.65;
}
.page-schedule .sched-desc p { margin: 0 0 10px; }
.page-schedule .sched-desc :last-child { margin-bottom: 0; }
.page-schedule .sched-desc a { color: var(--text); border-bottom: 1px solid var(--line); }
.page-schedule .sched-desc a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.page-schedule details.sched-desc summary {
  display: block;
  cursor: pointer;
  list-style: none;
}
.page-schedule details.sched-desc summary::-webkit-details-marker { display: none; }
.page-schedule .sched-readmore {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.page-schedule .sched-readmore::after { content: "Read more \2193"; }
.page-schedule details[open].sched-desc .sched-readmore::after { content: "Read less \2191"; }
.page-schedule details.sched-desc summary:hover .sched-readmore { color: var(--accent-dark); }
.page-schedule .sched-rest { margin-top: 10px; }

.page-schedule .sched-map {
  display: block;
  margin-top: 18px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.page-schedule .sched-empty {
  padding: 32px 0 80px;
  color: var(--text-dim);
  font-size: 17px;
  max-width: 640px;
}
@media (max-width: 640px) {
  .page-schedule .sched-item {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 18px 14px;
  }
  .page-schedule .sched-time { position: static; }
  .page-schedule .sched-time-end { display: inline; margin-left: 6px; }
  .page-schedule .sched-days a { padding: 11px 15px; }
}

/* ------------------------------------------------------ Who's coming page */
.page-whos-coming .page-head { padding: 64px 0 28px; }
.page-whos-coming .page-title {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.02;
  margin: 0;
  letter-spacing: -0.005em;
}
.page-whos-coming .page-head .sub {
  font-size: 17px;
  line-height: 1.6;
  margin: 22px 0 0;
  color: var(--text-dim);
}

/* Headline numbers — the home page's stat type, five across */
.page-whos-coming .wc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 28px 32px;
  padding: 8px 0 36px;
}
.page-whos-coming .wc-stat-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1;
  color: var(--accent);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.page-whos-coming .wc-stat-unit { font-size: 0.45em; margin-left: 4px; letter-spacing: 0.04em; }
.page-whos-coming .wc-stat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 10px 0 0;
  line-height: 1.4;
}

/* The towns map (registration.hometowns + static/js/whos_coming_map.js) */
.page-whos-coming .wc-map-figure { margin: 0 0 44px; }
.page-whos-coming .wc-map {
  height: clamp(340px, 55vh, 560px);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  /* Leaflet's panes climb to z-index 1000; keep them under the sticky nav. */
  isolation: isolate;
  z-index: 0;
}
/* No Mapbox token: darken the OpenStreetMap tiles to sit on the site. */
.page-whos-coming .wc-map--osm .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.4);
}
.page-whos-coming .wc-map-caption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-faint);
}
.page-whos-coming .wc-key {
  display: inline-block;
  vertical-align: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin: 0 4px 0 0;
}
.page-whos-coming .wc-key-town {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  border: 1.5px solid var(--accent);
}
.page-whos-coming .wc-key-hq {
  margin-left: 12px;
  background: var(--text);
  border: 3px solid var(--flag-red);
}
.page-whos-coming .wc-hq-dot {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  border: 4px solid var(--flag-red);
  box-shadow: 0 0 0 2px var(--bg);
}
.page-whos-coming .wc-hq--badge img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
.page-whos-coming .leaflet-container {
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--bg-alt);
}
.page-whos-coming .leaflet-tooltip.wc-tip {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  line-height: 1.45;
  padding: 6px 10px;
}
.page-whos-coming .leaflet-tooltip-top.wc-tip::before { border-top-color: var(--bg); }
.page-whos-coming .leaflet-bar a {
  background: var(--bg);
  color: var(--text);
  border-bottom-color: var(--line);
}
.page-whos-coming .leaflet-bar a:hover { background: var(--bg-alt); color: var(--accent); }
.page-whos-coming .leaflet-control-attribution {
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  color: var(--text-faint);
}
.page-whos-coming .leaflet-control-attribution a { color: var(--text-dim); }

/* Roster table (CSS grid; collapses to stacked cards on narrow screens) */
.page-whos-coming .wc-table { padding-bottom: 80px; }
.page-whos-coming .wc-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr);
  gap: 16px 24px;
  align-items: start;
  padding: 18px 8px;
  border-bottom: 1px solid var(--line);
}
.page-whos-coming .wc-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--line);
}
.page-whos-coming .wc-head span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.page-whos-coming .wc-c-people { font-weight: 600; }
.page-whos-coming .wc-c-region,
.page-whos-coming .wc-c-cars { color: var(--text-dim); line-height: 1.5; }
.page-whos-coming .wc-c-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.page-whos-coming .wc-photo {
  display: block;
  width: 84px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.page-whos-coming .wc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-whos-coming .wc-photo:hover { border-color: var(--accent); }
.page-whos-coming .wc-empty { color: var(--text-dim); font-size: 16px; padding: 20px 0 80px; }

@media (max-width: 720px) {
  .page-whos-coming .wc-head { display: none; }
  .page-whos-coming .wc-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px 4px;
  }
  .page-whos-coming .wc-row > span[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 2px;
  }
  .page-whos-coming .wc-c-photos { justify-content: flex-start; margin-top: 8px; }
}

/* ============================================================
   Registration wizard (body.page-register)
   Reuses the site's form primitives (field/input/.btn-submit),
   scoped here per the per-page convention. Adds the wizard-only
   progress indicator, step chrome and access-gate layout.
   ============================================================ */
.page-register {
  --bg-alt2: #242119;      /* a slightly raised surface (matches the shop scope) */
  --line-soft: rgba(243, 241, 236, 0.09);  /* hairline between bill lines */
  --good: #5a9e6f;         /* "included at no charge" accent */
  --bad: #d9534f;          /* destructive-action hover (Remove photo) */
  --warn: #d9a441;         /* the "spots held until" lease notice */
}
.page-register .reg { max-width: 1080px; margin: 0 auto; padding: 40px var(--edge) 100px; }

/* --- Progress indicator --- */
.page-register .reg-progress { margin-bottom: 46px; }
.page-register .reg-progress ol {
  list-style: none; display: flex; gap: 6px; margin: 0; padding: 0;
}
.page-register .reg-progress li { flex: 1 1 0; min-width: 0; }
.page-register .pstep {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 8px 0; border-top: 2px solid var(--line);
  color: var(--text-faint); text-decoration: none;
}
.page-register .reg-progress li.is-done .pstep,
.page-register .reg-progress li.is-current .pstep {
  border-top-color: var(--accent); color: var(--text);
}
.page-register a.pstep:hover { color: var(--accent); }
.page-register a.pstep:hover { border-top-color: var(--accent); }
.page-register .bubble {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%;
  font-family: 'Archivo Black', sans-serif; font-size: 12px; line-height: 1;
}
.page-register .is-current .bubble { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.page-register .is-done .bubble { color: var(--accent); border-color: var(--accent); }
.page-register .plabel {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Step chrome --- */
.page-register .reg-stage { max-width: 640px; }
/* A step under the progress rail matches the rail's measure, so the two share a
   right edge instead of the content huddling under a much wider indicator. Only
   the wizard steps get this: the receipt, the "confirming..." screen and the
   gate carry no rail, so they keep the narrower reading column. */
.page-register .reg-progress + .reg-stage { max-width: none; }
.page-register .reg-head { margin-bottom: 26px; }
.page-register .reg-head h1 {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.02; margin: 10px 0 0;
  letter-spacing: -0.005em;
}
.page-register .reg-panel { border: 1px solid var(--line); background: var(--bg-alt); padding: 26px 28px; }
.page-register .reg-panel p { color: var(--text-dim); margin: 0 0 1em; }
.page-register .reg-panel p:last-child { margin-bottom: 0; }
.page-register .reg-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent);
  padding: 3px 8px; margin-bottom: 14px;
}

/* --- Form primitives (mirrors the login panel) --- */
.page-register .field { margin-bottom: 20px; }
.page-register .field label {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px;
}
.page-register .field label .req { color: var(--accent); }
.page-register .field input,
.page-register .field select,
.page-register .field textarea {
  width: 100%; background: var(--bg-alt); border: 1px solid var(--line); color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; padding: 13px 14px; border-radius: 2px;
}
.page-register .field input::placeholder { color: var(--text-faint); }
.page-register .field input:focus,
.page-register .field select:focus,
.page-register .field textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

/* --- Buttons & step navigation --- */
.page-register .btn-submit {
  display: inline-block; background: transparent; border: 2px solid var(--accent); color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 14px; padding: 14px 24px; border-radius: 2px;
  cursor: pointer; text-decoration: none; transition: background 0.15s, color 0.15s;
}
.page-register .btn-submit:hover { background: var(--accent); color: var(--bg); }
.page-register .btn-submit:active { background: var(--accent-dark); border-color: var(--accent-dark); }
.page-register .btn-ghost {
  display: inline-block; background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 14px; padding: 14px 24px; border-radius: 2px;
  cursor: pointer; text-decoration: none; transition: border-color 0.15s, color 0.15s;
}
.page-register .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.page-register .reg-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 30px;
}

/* --- Access gate / confirmation --- */
/* The gate sits on its own between the nav and the footer, so centre it in
   that space rather than hanging it off a fixed top margin. */
.page-register .reg--gate {
  display: flex; align-items: center; justify-content: center;
  min-height: min(60vh, 560px);
}
.page-register .reg--gate .reg-stage { max-width: 460px; margin: 0 auto; text-align: center; }
.page-register .reg-gate { padding: 36px 30px; }
.page-register .reg-gate h1 {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: clamp(26px, 4vw, 36px); line-height: 1.04; margin: 10px 0 14px;
}
.page-register .reg-gate p { margin: 0 0 26px; }
/* The opening time is the thing people came for — give it room, then the
   countdown and the early-access note as quieter supporting lines. */
.page-register .reg-gate .reg-when { margin-bottom: 10px; color: var(--text); }
/* Keep the date whole — it read as "opens October / 8, 2026" when it wrapped. */
.page-register .reg-gate .reg-when strong { font-weight: 700; white-space: nowrap; }
.page-register .reg-gate .reg-countdown {
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.page-register .reg-gate .reg-early { font-size: 14px; color: var(--text-dim); margin-bottom: 22px; }

@media (max-width: 640px) {
  .page-register .plabel { display: none; }
  .page-register .pstep { justify-content: center; padding-top: 11px; }
  .page-register .reg-nav .btn-submit,
  .page-register .reg-nav .btn-ghost { padding: 13px 18px; }
}

/* --- Wizard step forms (Phase 2) --- */
.page-register .reg-intro { color: var(--text-dim); max-width: 60ch; margin: 0 0 26px; }
.page-register .reg-intro--aside { font-size: 14.5px; margin-top: -12px; padding-left: 14px; border-left: 3px solid var(--accent); }
.page-register .reg-intro--aside a { color: var(--accent); }
.page-register .reg-group { border: none; padding: 0; margin: 0 0 8px; }
.page-register .reg-group legend {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 15px;
  letter-spacing: 0.01em; padding: 0; margin: 22px 0 16px; color: var(--text);
}
.page-register .reg-group-note { font-size: 13.5px; color: var(--text-dim); margin: -6px 0 18px; }
.page-register .reg-group-note a { color: var(--accent); font-weight: 600; }
.page-register .field-help { font-size: 12px; color: var(--text-faint); margin: 6px 0 0; }
.page-register .field--error input,
.page-register .field--error select { border-color: #e5735a; }
.page-register .errorlist { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: #e5735a; }
/* Form-level errors read as errors, not as the brand-orange notices every
   positive affordance uses — the same red family as the field-level messages. */
.page-register .form-errors {
  list-style: none; margin: 0 0 20px; padding: 12px 14px; border: 1px solid rgba(229, 115, 90, 0.45);
  border-left: 3px solid #e5735a; background: rgba(229, 115, 90, 0.08);
  font-size: 13.5px; color: #f0b7b2;
}
.page-register .field-row { display: flex; gap: 16px; }
.page-register .field-row > .field { flex: 1; }
.page-register .field-row--city > .field:nth-child(2) { flex: 0 0 90px; }
.page-register .field-row--city > .field:nth-child(3) { flex: 0 0 130px; }
.page-register .field-row--year > .field:first-child { flex: 0 0 110px; }
@media (max-width: 560px) { .page-register .field-row { flex-direction: column; gap: 0; } }

/* In the widened step column a lone field would stretch the full measure, so a
   one-line answer sat in a 900px box. Cap it at one column of the two-up rows
   beside it (.field-row's 16px gap halved), so the step reads as a two-column
   form whose single fields occupy the first column. */
.page-register .reg-progress + .reg-stage .reg-group > .field,
.page-register .reg-progress + .reg-stage .reg-row > .field {
  max-width: calc(50% - 8px);
}
@media (max-width: 720px) {
  .page-register .reg-progress + .reg-stage .reg-group > .field,
  .page-register .reg-progress + .reg-stage .reg-row > .field { max-width: none; }
}

/* Repeatable rows (party, cars) */
.page-register .reg-row { border: 1px solid var(--line); background: var(--bg-alt); padding: 22px 22px 6px; margin-bottom: 16px; }
.page-register .reg-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.page-register .reg-row-title { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 13px; color: var(--text-dim); }
.page-register .reg-row-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.page-register .reg-remove {
  background: none; border: none; color: var(--text-faint); font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; padding: 4px;
}
.page-register .reg-remove:hover { color: #e5735a; }
.page-register .reg-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.page-register .btn-add { margin: 4px 0 8px; padding: 12px 18px; font-size: 13px; }

/* Car riders (badge-car checkboxes) */
.page-register .reg-riders { margin-bottom: 20px; }
.page-register .reg-riders > label {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px;
}
/* CheckboxSelectMultiple renders <div id=…><div><label><input> Name</label></div>… */
.page-register .reg-riders > div { margin: 10px 0 18px; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.page-register .reg-riders > div label {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 2px; color: var(--text-dim); font-size: 14px; cursor: pointer;
}
.page-register .reg-riders > div label:has(input:checked) { border-color: var(--accent); color: var(--text); }
.page-register .reg-riders input { accent-color: var(--accent); }

/* Car photo — two states: an upload slot when empty, a preview frame with
   rotate + remove controls when a photo is present (ported from
   design_handoff/Registration.dc.html). The extra descendant selectors keep
   these above the global `.field label` rule (block/uppercase). */
.page-register .reg-image { position: relative; }
/* `!important` so the hidden state always beats a descendant's own `display`
   (e.g. .upload-slot sets `display: block`, same specificity — without this the
   emptied slot stays visible above the photo preview). */
.page-register .reg-image [hidden] { display: none !important; }

/* Empty state: the drop/click upload slot (a <label> wrapping the file input). */
.page-register .reg-image .upload-slot {
  display: block; border: 1px dashed var(--line); border-radius: 2px; padding: 22px;
  text-align: center; font-size: 13px; font-weight: 400; letter-spacing: normal;
  text-transform: none; color: var(--text-faint); margin: 4px 0 0; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.page-register .reg-image .upload-slot:hover,
.page-register .reg-image .upload-slot.drag {
  border-color: var(--accent); background: var(--bg-alt2); color: var(--text-dim);
}
.page-register .reg-image .upload-slot input[type="file"] { display: none; }

/* Photo state: the framed preview + tools. */
.page-register .reg-image .photo-frame {
  margin-top: 4px; border: 1px solid var(--line); border-radius: 2px;
  overflow: hidden; background: var(--bg-alt2);
}
.page-register .reg-image .photo-view {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #000;
}
.page-register .reg-image .photo-view img { max-width: none; transition: transform .1s; }
.page-register .reg-image .photo-view img.rot-0,
.page-register .reg-image .photo-view img.rot-180 { width: 100%; height: 100%; object-fit: contain; }
.page-register .reg-image .photo-view img.rot-90,
.page-register .reg-image .photo-view img.rot-270 { width: auto; height: 100%; max-height: none; }
.page-register .reg-image .photo-tools {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; gap: 10px;
}
.page-register .reg-image .photo-tools .grp { display: flex; gap: 8px; }
.page-register .reg-image .photo-tools button {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 7px 11px; border: 1px solid var(--line); background: var(--bg-alt);
  color: var(--text); border-radius: 2px; cursor: pointer;
}
.page-register .reg-image .photo-tools button svg { width: 17px; height: 17px; display: block; }
.page-register .reg-image .photo-tools button:hover { border-color: var(--accent); color: var(--accent); }
/* Remove is a <label> around the (hidden) clear checkbox, styled as a text button. */
.page-register .reg-image .photo-tools .rm {
  display: inline-flex; align-items: center; margin: 0; padding: 7px 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-faint); background: none; border: none; cursor: pointer;
}
.page-register .reg-image .photo-tools .rm:hover { color: var(--bad); }
.page-register .reg-image .photo-tools .rm input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.page-register .reg-image-field .photo-hint {
  font-size: 12px; color: var(--text-faint); margin: 0; padding: 0 12px 12px;
}

/* Activities list (drives step, then socials step — see registration/wizard.py) */
.page-register .reg-day {
  position: sticky; top: 0; z-index: 2;
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 18px;
  letter-spacing: 0.02em; color: var(--accent);
  margin: 34px 0 4px; padding: 12px 14px;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 2px;
}
.page-register .reg-day:first-child { margin-top: 8px; }
.page-register .reg-acts { list-style: none; margin: 0; padding: 0; }
.page-register .reg-act { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.page-register .reg-act-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.page-register .reg-act-main { flex: 1; min-width: 0; }
.page-register .reg-act-name { display: block; font-weight: 600; }
.page-register .reg-act-meta { font-size: 12.5px; color: var(--text-faint); }
.page-register .reg-full { color: #e5735a; text-transform: uppercase; }
.page-register .reg-act.is-full { opacity: 0.6; }
.page-register .reg-act-qty { display: flex; align-items: center; gap: 8px; }
.page-register .reg-act-unit { flex: 0 0 3.8em; font-size: 12.5px; color: var(--text-dim); }
.page-register .reg-act-qty input { width: 70px; padding: 9px 10px; background: var(--bg-alt); border: 1px solid var(--line); color: var(--text); border-radius: 2px; font-size: 15px; }
/* Quantity only applies once the row is checked (activity_step.js disables it
   until then) — dim it so an unchecked row doesn't read as already-selected. */
.page-register .reg-act.qty-off .reg-act-qty { opacity: 0.35; }
.page-register .reg-act-qty input:disabled { cursor: not-allowed; }

/* Review */
/* Done page: onward links (schedule, Showcase, shop, dashboard). */
.page-register .reg-next { margin: 34px 0 8px; }
.page-register .reg-next h3 { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 13px; color: var(--text-dim); margin: 0 0 12px; }
.page-register .reg-next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.page-register .reg-next-card {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  border: 1px solid var(--line); background: var(--bg-alt); border-radius: 2px;
  color: var(--text); text-decoration: none; transition: border-color 0.15s;
}
.page-register .reg-next-card:hover, .page-register .reg-next-card:focus-visible { border-color: var(--accent); }
.page-register .reg-next-name { font-weight: 700; }
.page-register .reg-next-sub { font-size: 13px; color: var(--text-dim); }
.page-register .reg-sum h3 { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 13px; color: var(--text-dim); margin: 0 0 10px; }
.page-register .reg-sum ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text); }
.page-register .reg-muted { color: var(--text-faint); }
.page-register .reg-bill { border: 1px solid var(--line); background: var(--bg-alt); padding: 22px 24px; margin-bottom: 24px; }
.page-register .reg-bill h3 { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 14px; margin: 0 0 14px; }
.page-register .reg-bill table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.page-register .reg-bill td { padding: 8px 0; border-bottom: 1px solid var(--line); }
.page-register .reg-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-register .reg-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-size: 15px; }
.page-register .reg-total b { font-family: 'Archivo Black', sans-serif; font-size: 22px; }

/* Dashboard (body.page-register, the returning-purchaser view). A wider single
   column than the wizard steps: the party, per-car photo cards, a netted
   "what you're registered for" summary, the order-history ledger, and account.
   Ported from design_handoff/Dashboard.dc.html. */
/* Same measure as a wizard step (see .reg-progress + .reg-stage): the purchaser
   moves between the two, and the column shouldn't jump width when they do. */
.page-register .reg-stage--wide { max-width: none; }
.page-register .dash-block { padding: 34px 0; border-bottom: 1px solid var(--line); }
.page-register .dash-block:last-of-type { border-bottom: none; }
.page-register .dash-title { font-family: 'Archivo Black', sans-serif; font-size: 18px; text-transform: uppercase; margin: 0 0 6px; }
.page-register .dash-sub { font-size: 13.5px; color: var(--text-faint); margin: 0 0 20px; max-width: 62ch; }
.page-register .dash-saved { font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--good); margin: 14px 0 0; }

/* Party roster — name + role tag. */
.page-register .party-list { display: flex; flex-direction: column; }
.page-register .party-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.page-register .party-row:last-child { border-bottom: none; }
.page-register .party-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }

/* Netted "what you're registered for" — categories, flat lines, one grand total. */
.page-register .cat-group { margin-bottom: 26px; }
.page-register .cat-group:last-of-type { margin-bottom: 0; }
.page-register .cat-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
.page-register .cat-note { font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--text-dim); }
.page-register .cat-line { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.page-register .cat-line:last-child { border-bottom: none; }
.page-register .cat-line .amt { font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; }
.page-register .cat-line .amt.free { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--good); }
/* Merchandise card — the net summary's merch, pulled out with a check-in note. */
.page-register .merch-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.page-register .merch-head .dash-title { margin: 0; }
.page-register .merch-status {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); white-space: nowrap;
  padding: 3px 10px; border: 1px solid var(--accent); border-radius: 999px;
}
.page-register .merch-line { align-items: center; }
.page-register .merch-line-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.page-register .merch-thumb { width: 44px; height: 44px; flex: none; border-radius: 3px; object-fit: cover; border: 1px solid var(--line); background: var(--bg-alt); }
.page-register .merch-thumb--empty { display: inline-block; }
.page-register .merch-shop-link { margin: 16px 0 0; font-size: 14px; }
.page-register .merch-shop-link a { color: var(--accent); font-weight: 600; text-decoration: none; }
.page-register .merch-shop-link a:hover { text-decoration: underline; }

/* Order-history ledger — collapsible <details>, one card per paid order. The
   summary is styled as a bordered, hoverable control (with a Show/Hide cue and
   a rotating caret) so it plainly reads as expandable, not an empty heading. */
.page-register .ledger-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  cursor: pointer; list-style: none; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--bg-alt);
  transition: border-color .12s, background .12s;
}
.page-register .ledger-toggle::-webkit-details-marker { display: none; }
.page-register .ledger-toggle:hover { border-color: var(--accent); background: var(--bg-alt2); }
.page-register .ledger-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-register .ledger-toggle .dash-title { margin: 0; }
.page-register .ledger-toggle-text .dash-sub { margin: 6px 0 0; }
.page-register .ledger-cue {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  color: var(--text-dim);
}
.page-register .ledger-toggle:hover .ledger-cue { color: var(--accent); }
.page-register .ledger-cue-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.page-register .ledger-cue-label::after { content: "Show"; }
.page-register details[open] .ledger-cue-label::after { content: "Hide"; }
.page-register .ledger-car {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%;
  font-size: 11px; transition: transform .15s;
}
.page-register details[open] .ledger-car { transform: rotate(90deg); }
.page-register .dash-ledger[open] > .ledger-toggle { margin-bottom: 18px; }
.page-register .ledger { display: flex; flex-direction: column; gap: 18px; }
.page-register .order-card { border: 1px solid var(--line); border-radius: 2px; background: var(--bg-alt); padding: 16px 20px; }
.page-register .order-head { display: flex; justify-content: space-between; gap: 16px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.page-register .order-head.refund { color: var(--bad); }
.page-register .order-line { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding: 5px 0; }
.page-register .order-line .amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-register .order-line .amt.neg { color: var(--bad); }
.page-register .order-receipt { font-size: 13px; margin: 12px 0 0; }

/* Primary edit-registration CTA, surfaced under the intro (and repeated in the
   footer nav) — the returning purchaser's main action, so it leads the page. */
.page-register .dash-actions { margin: 0 0 30px; }

/* Account section — inline set-a-new-password form. */
.page-register .dash-password { max-width: 360px; }

.page-register .reg-carcard { border: 1px solid var(--line); background: var(--bg-alt); padding: 20px 22px; margin-bottom: 16px; }
.page-register .reg-carcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.page-register .reg-carcard-title { font-family: 'Archivo Black', sans-serif; font-size: 15px; text-transform: uppercase; }
.page-register .reg-saved { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--good); white-space: nowrap; }
/* Persistent cross-reference chip tying a photo card back to its priced
   "Reg Fee" line above — muted, not a fresh-save confirmation. */
.page-register .reg-registered {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim); white-space: nowrap;
  padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-alt); vertical-align: middle;
}
/* Keep the photo control a sensible width on the wide dashboard column. */
.page-register .reg-photo-form .reg-image-field { max-width: 460px; }
.page-register .reg-photo-actions { margin-top: 14px; }
.page-register .reg-photo-actions .btn-submit { padding: 10px 20px; font-size: 13px; }
/* Read-only car photo (registration closed): the same framed preview, no tools. */
.page-register .reg-ro-photo { max-width: 460px; }
.page-register .reg-ro-photo .photo-frame { margin-top: 0; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--bg-alt2); }
.page-register .reg-ro-photo .photo-view { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; }
.page-register .reg-ro-photo .photo-view img.rot-0 { width: 100%; height: 100%; object-fit: contain; }

/* Grouped review bill (Cars / Drives / Socials), ported from the design. */
.page-register .bill-group { border: 1px solid var(--line); border-radius: 2px; background: var(--bg-alt); padding: 18px 20px; margin-bottom: 14px; }
.page-register .bill-group-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.page-register .bill-group-head h3 { font-family: 'Archivo Black', sans-serif; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; color: var(--text-faint); }
.page-register .bill-group-sub { font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 600; }
.page-register .bill-line { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.page-register .bill-line:last-child { border-bottom: none; }
.page-register .bill-line .amt { font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; }
.page-register .bill-day {
  display: inline-block; min-width: 2.6em; margin-right: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-faint);
}
.page-register .bill-line.is-free .amt {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--good);
}
.page-register .total-block { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 3px solid var(--accent); margin-top: 22px; padding-top: 20px; font-family: 'Archivo Black', sans-serif; }
.page-register .total-block span:first-child { font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.page-register .total-block span:last-child { font-size: 32px; color: var(--accent); font-variant-numeric: tabular-nums; }
/* Dashboard "Total paid to date" is a reference figure, not an amount due — so
   it drops the accent bar + orange number the review bill's live total earns. */
.page-register .total-block--reference { border-top-color: var(--line); }
.page-register .total-block--reference span:last-child { font-size: 24px; color: var(--text); }

/* Review notes (the payment/confirm callouts + the "included at no charge" list). */
.page-register .note-box {
  border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--bg-alt);
  padding: 16px 20px; border-radius: 2px; margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--text-dim);
}
.page-register .note-box--good { border-left-color: var(--good); }
.page-register .note-box code { background: var(--bg-alt2); border: 1px solid var(--line-soft); padding: 0.08em 0.4em; border-radius: 2px; }
.page-register .note-tag {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.page-register .note-box--good .note-tag { color: var(--good); }
/* The "spots held until" lease notice (registration/holds.py). Warm rather than
   alarming — it's a courtesy, not an error. */
.page-register .note-box--hold { border-left-color: var(--warn); }
.page-register .note-box--hold .note-tag { color: var(--warn); }
/* The spots the hold actually covers, named in the middle of the sentence —
   on an edit that list is the whole point of the notice, so it reads as the
   page's own text rather than as dim prose. */
.page-register .hold-spots { display: block; margin: 6px 0; color: var(--text); font-weight: 600; }

/* --- Payment (Phase 3) --- */
.page-register .reg-pay-head { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 14px; margin: 26px 0 14px; }
/* The Payment Element is one form control, not page furniture: in the widened
   step column it keeps a card-form measure rather than running the full width. */
.page-register .reg-pay { border: 1px solid var(--line); background: var(--bg-alt); padding: 20px; border-radius: 2px; }
.page-register #payment-message { margin-top: 16px; }
.page-register .reg-spinner {
  width: 34px; height: 34px; margin: 0 auto 20px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: reg-spin 0.8s linear infinite;
}
@keyframes reg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .page-register .reg-spinner { animation-duration: 2.4s; } }

/* =================================================================
   Merchandise shop (body.page-shop)
   Ported from design_handoff/Shop.dc.html. Reuses the shared tokens;
   a few shop-local tokens (alt surface + status colors) live here.
   ================================================================= */
.page-shop {
  --bg-alt2: #242119;
  --line-soft: rgba(243, 241, 236, 0.09);
  --good: #5a9e6f;
  --warn: #d9a441;
  --bad: #d9534f;
}
.page-shop .nav-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.page-shop .cart-chip {
  border: 1px solid var(--line); padding: 8px 14px; border-radius: 2px; color: var(--text);
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.page-shop .cart-chip:hover { border-color: var(--accent); color: var(--accent); }
.page-shop .cart-chip .n { color: var(--accent); font-weight: 700; }

.page-shop .shop-wrap { padding-top: 44px; padding-bottom: 100px; }
/* Store header: this year's badge beside the title. The badge is the artwork
   being sold, so it sits at the top of the catalog rather than only appearing
   on the product photos below. */
.page-shop .shop-head.has-badge {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
}
.page-shop .shop-head .event-badge { flex: none; margin: 0; }
.page-shop .shop-head .shop-sub { margin-bottom: 0; }
.page-shop .shop-head { margin-bottom: 34px; }
@media (max-width: 640px) {
  .page-shop .shop-head.has-badge { flex-direction: column; align-items: flex-start; gap: 18px; }
}
.page-shop .wrap.narrow { max-width: 760px; }
.page-shop .shop-title {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.05; margin: 0 0 10px;
}
.page-shop .shop-sub { font-size: 15.5px; line-height: 1.6; color: var(--text-dim); max-width: 62ch; margin: 0 0 34px; }
.page-shop .muted { color: var(--text-faint); }
.page-shop .link-plain {
  display: inline-block; font-size: 13.5px; color: var(--text-dim);
  background: none; border: none; cursor: pointer; padding: 0; margin: 0 0 24px;
  font-family: inherit; text-decoration: underline;
}
.page-shop .link-plain:hover { color: var(--accent); }

/* --- Buttons --- */
.page-shop .btn {
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 13.5px; padding: 13px 22px; border-radius: 2px;
  cursor: pointer; border: 2px solid var(--accent); background: transparent; color: var(--text);
  transition: background 0.15s, color 0.15s; display: inline-block; text-align: center;
}
.page-shop .btn:hover { background: var(--accent); color: var(--bg); }
.page-shop .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.page-shop .btn-ghost { border-color: var(--line); color: var(--text-dim); }
.page-shop .btn-ghost:hover { background: var(--bg-alt2); color: var(--text); }
.page-shop .btn-row { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

/* --- Catalog --- */
.page-shop .cat-section { margin-bottom: 44px; }
.page-shop .cat-section h2 {
  font-family: 'Archivo Black', sans-serif; font-size: 18px; text-transform: uppercase;
  margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.page-shop .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.page-shop .tile {
  border: 1px solid var(--line); border-radius: 2px; background: var(--bg-alt);
  overflow: hidden; display: flex; flex-direction: column; color: var(--text);
}
.page-shop .tile:hover { border-color: var(--accent); }
.page-shop .tile-img { aspect-ratio: 4 / 3; position: relative; background: var(--bg-alt2); }
.page-shop .tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-shop .tile-ph, .page-shop .product-img .tile-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center; font-size: 13px; color: var(--text-faint);
}
.page-shop .tile-body { padding: 14px 16px; }
.page-shop .tile-body .t { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.page-shop .tile-body .p { font-family: 'Archivo Black', sans-serif; font-size: 15px; color: var(--accent); }
.page-shop .badge {
  position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px;
  background: var(--bg); border: 1px solid var(--line); z-index: 2;
}
.page-shop .badge.low { color: var(--warn); border-color: var(--warn); }
.page-shop .badge.out { color: var(--bad); border-color: var(--bad); }

/* --- Product page --- */
.page-shop .product-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 44px; }
@media (max-width: 800px) { .page-shop .product-layout { grid-template-columns: 1fr; } }
.page-shop .product-img {
  aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 2px;
  overflow: hidden; position: relative; background: var(--bg-alt2);
}
.page-shop .product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-shop .product-price { font-family: 'Archivo Black', sans-serif; font-size: 26px; color: var(--accent); margin: 10px 0 20px; }
.page-shop .product-desc { font-size: 15px; line-height: 1.65; color: var(--text-dim); margin-bottom: 24px; }
.page-shop .product-desc p { margin: 0 0 1em; }
.page-shop .picker-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 10px;
}

/* Size chips (radio + label) */
.page-shop .chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.page-shop .chip-opt {
  border: 1px solid var(--line); background: var(--bg-alt); color: var(--text);
  font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 2px; cursor: pointer;
}
.page-shop .chip-opt input { position: absolute; opacity: 0; pointer-events: none; }
.page-shop .chip-opt:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--bg-alt2); }
.page-shop .chip-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Color swatches (radio + label) */
.page-shop .swatch-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.page-shop .swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.page-shop .swatch input { position: absolute; opacity: 0; pointer-events: none; }
.page-shop .swatch .dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); }
.page-shop .swatch:has(input:checked) .dot { border-color: var(--accent); box-shadow: 0 0 0 2px var(--bg-alt2), 0 0 0 3px var(--accent); }
.page-shop .swatch:has(input:focus-visible) .dot { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-shop .swatch .lbl { font-size: 11.5px; color: var(--text-faint); }

/* Quantity stepper */
.page-shop .qty-stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.page-shop .qty-stepper button {
  width: 32px; height: 32px; border: 1px solid var(--line); background: var(--bg-alt2);
  color: var(--text); border-radius: 2px; cursor: pointer; font-size: 16px; line-height: 1;
}
.page-shop .qty-stepper button:hover { border-color: var(--accent); color: var(--accent); }
.page-shop .qty-input {
  width: 52px; text-align: center; font-variant-numeric: tabular-nums; font-size: 15px;
  padding: 7px 4px; background: var(--bg-alt); border: 1px solid var(--line); color: var(--text); border-radius: 2px;
}
.page-shop .qty-val { font-variant-numeric: tabular-nums; font-size: 15px; width: 24px; text-align: center; }

/* Notes / callouts */
.page-shop .note {
  border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--bg-alt);
  padding: 16px 20px; border-radius: 2px; margin: 0 0 24px; font-size: 14px; color: var(--text-dim);
}
.page-shop .add-form + #add-result .note { margin-top: 20px; }
.page-shop .note.bad { border-left-color: var(--bad); }
.page-shop .note.warn { border-left-color: var(--warn); }
.page-shop .note.good { border-left-color: var(--good); }
.page-shop .note .tag {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.page-shop .note.bad .tag { color: var(--bad); }
.page-shop .note.warn .tag { color: var(--warn); }
.page-shop .note.good .tag { color: var(--good); }
.page-shop .note code { background: var(--bg-alt2); border: 1px solid var(--line-soft); padding: 0.08em 0.4em; border-radius: 2px; }

/* Sizing-chart lightbox */
.page-shop .sizing-modal {
  border: 1px solid var(--line); background: var(--bg-alt); color: var(--text);
  border-radius: 2px; padding: 0; max-width: min(520px, 92vw); position: relative;
}
.page-shop .sizing-modal::backdrop { background: rgba(0, 0, 0, 0.72); }
.page-shop .sizing-modal img { display: block; width: 100%; height: auto; }
.page-shop .sizing-close {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 2px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; font-size: 18px;
}
.page-shop .sizing-close:hover { border-color: var(--accent); color: var(--accent); }

/* --- Cart --- */
.page-shop .cart-line { display: flex; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.page-shop .cart-thumb { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 2px; flex-shrink: 0; overflow: hidden; background: var(--bg-alt2); }
.page-shop .cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-shop .cart-info { flex: 1; min-width: 0; }
.page-shop .cart-info .t { font-weight: 600; font-size: 14.5px; }
.page-shop .cart-info .meta { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; }
.page-shop .cart-line .qty-stepper { margin: 0; }
.page-shop .qty-cart { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--bg-alt2); color: var(--text); border-radius: 2px; cursor: pointer; font-size: 15px; }
.page-shop .qty-cart:hover { border-color: var(--accent); color: var(--accent); }
.page-shop .cart-price { font-size: 14px; width: 74px; text-align: right; font-variant-numeric: tabular-nums; }
.page-shop .cart-remove {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-faint); background: none; border: none; cursor: pointer; margin-left: 6px;
}
.page-shop .cart-remove:hover { color: var(--bad); }
.page-shop .cart-summary { display: flex; justify-content: space-between; align-items: baseline; padding-top: 22px; margin-top: 6px; }
.page-shop .cart-summary .lbl { font-size: 14px; color: var(--text-dim); }
.page-shop .cart-summary .amt { font-family: 'Archivo Black', sans-serif; font-size: 22px; color: var(--accent); }
.page-shop .empty-state { text-align: center; padding: 70px 0; }
.page-shop .empty-state .btn { margin-top: 8px; }

/* --- Review & pay / receipt --- */
.page-shop .review-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.page-shop .review-table td { padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.page-shop .review-table td.amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-shop .review-table tfoot td { border-bottom: none; padding-top: 18px; font-family: 'Archivo Black', sans-serif; font-size: 19px; color: var(--accent); }
.page-shop .pay-head { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 14px; margin: 26px 0 14px; }
.page-shop .pay-panel { border: 1px solid var(--line); border-radius: 2px; padding: 22px; background: var(--bg-alt); }
.page-shop .shop-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.page-shop .form-errors {
  border: 1px solid var(--bad); background: rgba(217, 83, 79, 0.1); color: #f0b7b2;
  padding: 12px 16px; border-radius: 2px; font-size: 14px; margin-top: 16px;
}
.page-shop .receipt-box { border: 1px solid var(--line); border-radius: 2px; background: var(--bg-alt); padding: 28px; }
.page-shop .receipt-box .ordno { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--text-faint); margin-bottom: 20px; }

/* --- Gate / processing --- */
.page-shop .gate-stage { display: flex; align-items: center; justify-content: center; min-height: 62vh; text-align: center; }
.page-shop .gate-inner { max-width: 520px; }
.page-shop .gate-inner .btn-row { justify-content: center; }
.page-shop .spinner-wrap { text-align: center; padding: 60px 0; }
.page-shop .spinner {
  width: 40px; height: 40px; border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; margin: 0 auto 24px; animation: shop-spin 0.8s linear infinite;
}
@keyframes shop-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .page-shop .spinner { animation-duration: 2.4s; } }

/* =================================================================
   Staff back-office (body.page-staff)
   The ops dashboard: edition picker + report catalog + recent jobs.
   Reuses the shared dark tokens; status colors mirror the shop's.
   ================================================================= */
.page-staff {
  --good: #5a9e6f;
  --warn: #d9a441;
  --bad: #d9534f;
}
.page-staff .staff { padding: 56px 0 100px; }

.page-staff .staff-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 24px; margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.page-staff .staff-eyebrow {
  margin: 0 0 6px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.page-staff .staff-head h1 {
  margin: 0; font-family: 'Archivo Black', sans-serif; font-weight: 400;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.05;
}

.page-staff .staff-edition { display: flex; align-items: center; gap: 10px; }
.page-staff .staff-edition label {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
}
.page-staff .staff-edition select {
  appearance: none; background: var(--bg-alt); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px;
  font: inherit; font-size: 15px; cursor: pointer;
}
.page-staff .staff-edition select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.page-staff .staff-messages { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 8px; }
.page-staff .staff-message {
  padding: 12px 16px; border-radius: 8px; font-size: 14px;
  background: var(--bg-alt); border: 1px solid var(--line);
}
.page-staff .staff-message.error { border-color: var(--bad); }
.page-staff .staff-message.success { border-color: var(--good); }

.page-staff .staff-empty { color: var(--text-dim); font-size: 16px; }

/* Section rhythm + headings ----------------------------------------
   One consistent parent-level heading for every dashboard zone, so the
   section labels clearly outrank the cards/rows inside them. */
.page-staff .staff-section { margin-bottom: 64px; }
.page-staff .staff-section:last-child { margin-bottom: 0; }
.page-staff .staff-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-staff .staff-section-title {
  display: flex; align-items: center; gap: 12px;
  margin: 0; font-size: 20px; font-weight: 700; letter-spacing: 0.01em; color: var(--text);
}
.page-staff .staff-section-title::before {
  content: ''; width: 3px; height: 20px; border-radius: 2px;
  background: var(--accent); flex: none;
}
.page-staff .staff-section-link { font-size: 14px; font-weight: 600; color: var(--accent); }
.page-staff .staff-section-link:hover { color: var(--accent-dark); }
.page-staff .staff-section-hint { margin: 0; font-size: 14px; color: var(--text-dim); }
/* Stacked head: title with a descriptive subtitle underneath (not a right-rail link) */
.page-staff .staff-section-head-stacked { flex-direction: column; align-items: stretch; gap: 6px; }
.page-staff .staff-section-head-stacked .staff-section-hint { padding-left: 15px; }

/* Report catalog ---------------------------------------------------- */
.page-staff .report-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.page-staff .report-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 24px; transition: border-color 0.15s, transform 0.15s;
}
.page-staff .report-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  transform: translateY(-2px);
}
.page-staff .report-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.page-staff .report-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.page-staff .report-card-action {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.page-staff .report-format {
  font-size: 11px; letter-spacing: 0.1em; color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px;
}
.page-staff .btn-report {
  display: inline-block; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  background: var(--accent); color: #161513; border: none; border-radius: 8px;
  padding: 10px 20px; transition: background 0.15s;
}
.page-staff .btn-report:hover { background: var(--accent-dark); color: #161513; }

/* Report button "working…" state — immediate feedback while a PDF renders */
.page-staff .btn-report.is-busy {
  opacity: 0.8; cursor: progress; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.page-staff .btn-spin {
  width: 14px; height: 14px; flex: none;
  border: 2px solid color-mix(in srgb, #161513 30%, transparent);
  border-top-color: #161513; border-radius: 50%;
  animation: staff-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .page-staff .btn-spin { animation-duration: 2.4s; } }

/* Stats: dashboard summary band + full stats page ------------------- */
.page-staff .staff-summary-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px;
}
.page-staff .staff-summary-head h2 { font-size: 16px; letter-spacing: 0.02em; margin: 0; }
.page-staff .staff-summary-link { font-size: 14px; font-weight: 600; color: var(--accent); }
.page-staff .staff-summary-link:hover { color: var(--accent-dark); }

.page-staff .stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px;
}
.page-staff .stat-row-wide { margin-bottom: 48px; }
.page-staff .stat-tile {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px;
}
.page-staff .stat-num {
  font-family: 'Archivo Black', sans-serif; font-weight: 400;
  font-size: clamp(26px, 3.4vw, 34px); line-height: 1; color: var(--text);
}
.page-staff .stat-label {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-top: 6px;
}
.page-staff .stat-sub { font-size: 13px; color: var(--text-dim); }
.page-staff .stat-refund { color: var(--warn); }

/* Pulse strip — reads as the footer of the stat band, not orphaned text */
.page-staff .staff-pulse {
  display: flex; flex-wrap: wrap; gap: 10px 40px; margin: 16px 0 0;
  padding: 16px 22px; background: var(--bg-alt);
  border: 1px solid var(--line); border-radius: 12px;
}
.page-staff .staff-pulse > div { display: flex; align-items: baseline; gap: 8px; }
.page-staff .staff-pulse dt {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.page-staff .staff-pulse dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }

.page-staff .staff-stats-block { margin-bottom: 48px; }
.page-staff .staff-stats-block h2 { font-size: 16px; letter-spacing: 0.02em; margin: 0 0 8px; }
.page-staff .staff-stats-note { margin: 0 0 20px; font-size: 14px; color: var(--text-dim); }
.page-staff .staff-back { color: var(--text-faint); }
.page-staff .staff-back:hover { color: var(--accent); }

/* Velocity chart — pure CSS bars, no JS/chart lib */
.page-staff .velocity-scroll { overflow-x: auto; padding-bottom: 4px; }
.page-staff .velocity-chart {
  display: flex; align-items: flex-end; gap: 10px; min-width: min-content; padding-top: 8px;
}
.page-staff .vbar { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 34px; }
.page-staff .vbar-count { font-size: 12px; color: var(--text-dim); }
.page-staff .vbar-track {
  display: flex; align-items: flex-end; justify-content: center; height: 160px; width: 26px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 6px;
}
.page-staff .vbar-fill {
  width: 100%; min-height: 2px; display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 5px;
}
.page-staff .vbar-confirmed { width: 100%; background: var(--accent); border-radius: 5px; }
.page-staff .vbar-day { font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* Activity fill table */
.page-staff .fill-table td { vertical-align: middle; }
.page-staff .fill-name { color: var(--text); }
.page-staff .fill-date { display: block; font-size: 12px; color: var(--text-faint); }
.page-staff .fill-col { width: 240px; }
.page-staff .fill-bar {
  display: inline-block; vertical-align: middle; width: 140px; height: 8px; margin-right: 10px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
}
.page-staff .fill-bar-in { height: 100%; background: var(--accent); }
.page-staff .fill-remaining { font-size: 12px; color: var(--text-faint); }
.page-staff .fill-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.page-staff .fill-full { color: var(--bad); background: color-mix(in srgb, var(--bad) 15%, transparent); }

/* Recent jobs ------------------------------------------------------- */
.page-staff .staff-jobs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.page-staff .staff-jobs-table td.job-name { color: var(--text); font-weight: 600; }
.page-staff .staff-jobs-table th {
  text-align: left; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.page-staff .staff-jobs-table td { padding: 12px; border-bottom: 1px solid var(--line); color: var(--text-dim); }
.page-staff .job-status { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.page-staff .job-status.job-pending { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.page-staff .job-status.job-running { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.page-staff .job-status.job-succeeded { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.page-staff .job-status.job-failed { color: var(--bad); background: color-mix(in srgb, var(--bad) 15%, transparent); }

/* Registration lookup — the primary check-in tool, so it gets a panel -- */
.page-staff .staff-lookup-panel {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 12px;
  padding: 24px;
}
.page-staff .staff-lookup-hint { margin: 0 0 16px; font-size: 14px; color: var(--text-dim); }
.page-staff .staff-lookup-form { display: flex; gap: 10px; max-width: 560px; }
.page-staff .staff-lookup-form input[type="search"] {
  flex: 1; background: var(--bg); color: var(--text); font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px;
}
.page-staff .staff-lookup-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-staff .staff-lookup-form .btn-report { padding-inline: 26px; }
.page-staff .staff-lookup-empty { margin: 18px 0 0; }
.page-staff .staff-lookup-results { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.page-staff .staff-lookup-results li {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px;
}
.page-staff .lookup-name { font-weight: 600; }
.page-staff .lookup-meta { color: var(--text-faint); font-size: 13px; flex: 1; }

.page-staff .btn-quiet {
  display: inline-block; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--text); background: transparent; border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 18px; transition: border-color 0.15s;
}
.page-staff .btn-quiet:hover { border-color: var(--accent); color: var(--accent); }

/* Drive routes — the dashboard's pointer into the route editor (/staff/routes/) */
.page-staff .staff-routes .staff-section-hint { margin-top: -8px; }
.page-staff .staff-routes-gap { color: var(--warn); font-weight: 600; }

/* Batch job progress screen ---------------------------------------- */
.page-staff .job-progress { max-width: 560px; }
.page-staff .job-running { padding: 8px 0; }
.page-staff .job-count { font-size: 15px; color: var(--text-dim); margin: 0 0 14px; }
.page-staff .reg-spinner,
.page-staff .job-running .reg-spinner {
  width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; margin: 0 0 20px; animation: staff-spin 0.8s linear infinite;
}
@keyframes staff-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .page-staff .reg-spinner { animation-duration: 2.4s; } }
.page-staff .progress-track { height: 8px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.page-staff .progress-fill { height: 100%; background: var(--accent); transition: width 0.4s ease; }

.page-staff .job-result h2 { font-size: 22px; margin: 0 0 6px; }
.page-staff .job-result p { color: var(--text-dim); margin: 0 0 20px; }
.page-staff .job-result.job-err h2 { color: var(--bad); }
.page-staff .job-actions { display: flex; gap: 12px; align-items: center; }

/* Registration detail / edit -------------------------------------- */
.page-staff .staff-detail .staff-eyebrow a { color: var(--accent); }
.page-staff .detail-sub { color: var(--text-dim); font-size: 14px; margin: 6px 0 0; }
.page-staff .detail-actions { display: flex; align-items: center; }
.page-staff .detail-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 8px; }
@media (min-width: 900px) { .page-staff .detail-grid { grid-template-columns: 2fr 1fr; align-items: start; } }
.page-staff .card {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px; margin-bottom: 20px;
}
.page-staff .card h2 { font-size: 16px; margin: 0 0 16px; }
.page-staff .detail-note { color: var(--text-faint); font-size: 13px; margin: 12px 0 0; }
.page-staff .detail-empty { color: var(--text-dim); font-size: 14px; margin: 0; }

.page-staff .field-rows { display: grid; gap: 12px; margin-bottom: 16px; }
.page-staff .field-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.page-staff .field-row:last-child { border-bottom: none; padding-bottom: 0; }
.page-staff .field-row label,
.page-staff label.stacked {
  display: flex; flex-direction: column; gap: 5px; font-size: 12px;
  letter-spacing: 0.04em; color: var(--text-faint); flex: 1; min-width: 110px;
}
.page-staff .car-row label { min-width: 90px; }
.page-staff .field-row input, .page-staff .field-row select,
.page-staff label.stacked input {
  background: var(--bg); color: var(--text); font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px;
}
.page-staff .field-row input:focus-visible, .page-staff .field-row select:focus-visible,
.page-staff label.stacked input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.page-staff label.stacked { margin-bottom: 12px; }

.page-staff .detail-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.page-staff .detail-table th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-faint); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.page-staff .detail-table td { padding: 8px; border-bottom: 1px solid var(--line); color: var(--text-dim); }
.page-staff .detail-table td.num, .page-staff .detail-table th.num { text-align: right; }

.page-staff .detail-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.page-staff .detail-dl dt { color: var(--text-faint); }
.page-staff .detail-dl dd { margin: 0; color: var(--text); }
.page-staff .detail-paid { font-size: 15px; margin: 0 0 12px; }
.page-staff .form-error { color: var(--bad); font-size: 13px; margin: 4px 0 0; }

/* Registration editor — add/remove + settle -------------------------- */
.page-staff .pending-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-alt)); border: 1px solid var(--accent);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 24px; font-size: 15px;
}
.page-staff .pending-banner.refund { background: color-mix(in srgb, var(--good) 14%, var(--bg-alt)); border-color: var(--good); }
.page-staff .remove-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 4px; }
.page-staff .remove-form { display: flex; align-items: center; gap: 8px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px 6px 12px; font-size: 13px; }
.page-staff .btn-danger { cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--bad); background: transparent; border: 1px solid var(--bad); border-radius: 6px; padding: 5px 12px; }
.page-staff .btn-danger:hover { background: var(--bad); color: #fff; }
.page-staff .add-block { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.page-staff .add-block summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent); }
.page-staff .add-block form { margin-top: 14px; }
.page-staff .qty-input { width: 64px; background: var(--bg); color: var(--text); font: inherit;
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; text-align: right; }
.page-staff .qty-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.page-staff .signup-table td { vertical-align: middle; }
/* Rows the party is actually signed up for stand out from the full activity list. */
.page-staff .signup-table tr.is-signed-up td { background: var(--bg-alt2); color: var(--text); }
.page-staff .signup-table tr.is-signed-up td:first-child {
  font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }

.page-staff .staff-settle .settle-card { max-width: 640px; }
.page-staff .settle-total td { border-top: 2px solid var(--line); font-weight: 700; font-size: 15px; padding-top: 10px; }
.page-staff .settle-note { color: var(--text-dim); font-size: 14px; margin: 18px 0; }
.page-staff .settle-note.error { color: var(--bad); }
.page-staff .settle-pay { margin: 18px 0; }

/* ============================================================
   Car-show voting (body.page-vote)
   Mobile-first — voters use this on their phones while walking the
   show field. Big tap targets, one card per car, single-choice per
   category. Reuses the shared tokens + form-button primitives.
   ============================================================ */
.page-vote .vote { max-width: 760px; margin: 0 auto; padding: 32px var(--edge) 120px; }
.page-vote .vote--centered { display: grid; place-items: start center; min-height: 60vh; }

.page-vote .vote-head { margin-bottom: 26px; }
.page-vote .vote-head .kicker { color: var(--accent); }
.page-vote .vote-head h1 {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: clamp(28px, 6vw, 42px); line-height: 1.03; margin: 8px 0 12px;
}
.page-vote .vote-head p { color: var(--text-dim); margin: 0 0 14px; max-width: 52ch; }
.page-vote .vote-as {
  display: inline-flex; align-items: baseline; gap: 6px; max-width: none;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-alt));
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 999px; padding: 8px 16px; font-size: 14px;
}
.page-vote .vote-as strong { color: var(--accent); font-weight: 700; }
.page-vote .vote-progress {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-dim); background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px;
}
.page-vote .vote-progress strong { color: var(--accent); }

/* --- One category --- */
.page-vote .vcat { margin: 0 0 30px; }
.page-vote .vcat-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 2px solid var(--line); padding-bottom: 6px; margin-bottom: 12px;
}
.page-vote .vcat.is-voted .vcat-head { border-bottom-color: var(--accent); }
.page-vote .vcat-head h2 {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: clamp(15px, 3.5vw, 19px); letter-spacing: -0.01em; margin: 0;
}
.page-vote .vcat-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; color: var(--accent);
}
.page-vote .vcat-tag--none { color: var(--text-faint); }
.page-vote .vcat-empty { color: var(--text-faint); font-style: italic; }

/* --- Car options (single-choice tap targets) --- */
.page-vote .vcars { display: grid; gap: 10px; }
.page-vote .vcars form { margin: 0; }
.page-vote .vcar {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); padding: 12px 14px; cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif; transition: border-color .12s, background .12s;
}
.page-vote .vcar:hover { border-color: var(--accent); }
.page-vote .vcar.is-chosen { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-alt)); }
.page-vote .vcar-no {
  flex: none; min-width: 2.6em; text-align: center; font-family: 'Archivo Black', sans-serif;
  font-size: 15px; color: #fff; background: var(--accent); border-radius: 4px; padding: 6px 4px;
}
.page-vote .vcar-photo {
  flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 4px;
  background: var(--bg); border: 1px solid var(--line);
}
.page-vote .vcar-photo--empty { display: grid; place-items: center; font-size: 22px; opacity: .5; }
.page-vote .vcar-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.page-vote .vcar-name { font-weight: 700; font-size: 15px; line-height: 1.2; }
.page-vote .vcar-owner { font-size: 13px; color: var(--text-dim); }
.page-vote .vcar-check {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border: 2px solid var(--line); border-radius: 50%; color: transparent; font-weight: 700;
}
.page-vote .vcar.is-chosen .vcar-check { border-color: var(--accent); background: var(--accent); color: var(--bg); }

/* --- Done bar --- */
.page-vote .vote-donebar {
  position: sticky; bottom: 0; margin-top: 24px; padding: 14px 0;
  background: linear-gradient(to top, var(--bg) 65%, transparent);
  display: flex; justify-content: center;
}
.page-vote .btn-submit {
  display: inline-block; background: var(--accent); border: 2px solid var(--accent); color: #fff;
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 15px; padding: 15px 28px; border-radius: 3px;
  cursor: pointer; text-decoration: none;
}
.page-vote .btn-submit:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

/* --- Panels (gate / need-link / error / done) --- */
.page-vote .vote-panel {
  max-width: 460px; background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 8px; padding: 30px 28px; margin-top: 24px;
}
.page-vote .vote-panel--wide { max-width: 560px; }
.page-vote .vote-panel h1 {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: clamp(24px, 5vw, 34px); line-height: 1.04; margin: 8px 0 12px;
}
.page-vote .vote-panel p { color: var(--text-dim); margin: 0 0 14px; }
.page-vote .vote-muted { color: var(--text-faint); font-size: 14px; }
.page-vote .vote-muted a, .page-vote .vote-panel a:not(.btn-submit) { color: var(--accent); }
.page-vote .vote-note { color: var(--accent); font-size: 14px; }
.page-vote .vote-empty { color: var(--text-faint); font-style: italic; }

/* --- Recap list --- */
.page-vote .vote-recap { list-style: none; margin: 0 0 18px; padding: 0; }
.page-vote .vote-recap li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.page-vote .vote-recap-cat { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.page-vote .vote-recap-car { font-weight: 700; display: flex; align-items: center; gap: 8px; text-align: right; }

/* --- Winners --- */
.page-vote .vwin {
  display: flex; gap: 16px; align-items: flex-start; padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.page-vote .vwin-cat {
  flex: none; width: 34%; font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: 14px; color: var(--accent); padding-top: 2px;
}
.page-vote .vwin-car { display: flex; gap: 14px; align-items: center; flex: 1 1 auto; min-width: 0; }
.page-vote .vwin-photo { width: 84px; height: 84px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); }
.page-vote .vwin-name { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.page-vote .vwin-owner { color: var(--text-dim); font-size: 14px; margin-top: 2px; }
.page-vote .vwin-votes { color: var(--text-faint); font-size: 13px; margin-top: 4px; }

@media (max-width: 520px) {
  .page-vote .vwin { flex-direction: column; gap: 6px; }
  .page-vote .vwin-cat { width: auto; }
}

/* =================================================================
   Stuttgart Showcase (body.page-showcase)
   Three surfaces in one scope: the public field page, the applicant's
   application flow, and the committee review board. Reuses the shared
   tokens and the register scope's form primitives (restated here so
   the scopes stay independent). The staff console screens are styled
   by the page-staff scope instead — they belong to the back-office.
   ================================================================= */
.page-showcase {
  --bg-alt2: #242119;
  --line-soft: rgba(243, 241, 236, 0.09);
  --good: #5a9e6f;
  --warn: #d9a441;
  --bad: #d9534f;
}
.page-showcase .wrap { padding-top: 44px; padding-bottom: 100px; }
.page-showcase .sc-title {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase;
  font-size: clamp(28px, 3.8vw, 44px); line-height: 1.03; margin: 8px 0 12px;
}
.page-showcase .kicker {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.page-showcase .sc-sub { color: var(--text-dim); font-size: 15.5px; line-height: 1.6; max-width: 62ch; margin: 0 0 18px; }
.page-showcase .sc-intro { color: var(--text-dim); font-size: 16px; line-height: 1.65; max-width: 62ch; }
.page-showcase .sc-intro p { margin: 0 0 1em; }
.page-showcase .sc-head { display: flex; align-items: center; gap: clamp(20px, 4vw, 40px); margin-bottom: 40px; }
.page-showcase .sc-head .event-badge { flex: none; margin: 0; }
.page-showcase .sc-head--slim { display: block; margin-bottom: 30px; }
@media (max-width: 640px) { .page-showcase .sc-head { flex-direction: column; align-items: flex-start; gap: 18px; } }

.page-showcase .sc-section { margin: 0 0 56px; }
.page-showcase .sc-section-title {
  font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 19px;
  margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.page-showcase .sc-count { font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-faint); letter-spacing: 0.06em; }
.page-showcase .sc-committee { color: var(--text-dim); font-size: 15.5px; margin-bottom: 20px; border-left: 3px solid var(--accent); padding-left: 16px; }
.page-showcase .sc-committee p { margin: 0 0 0.6em; }

/* --- The public explainer (/stuttgart-showcase/) --- */
.page-showcase .sc-about-call { align-items: center; margin-top: 20px; }
.page-showcase .sc-about-call .sc-sub { margin: 0; font-size: 14.5px; }
.page-showcase .sc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; max-width: 760px; }
.page-showcase .sc-step { display: flex; gap: 18px; align-items: flex-start; }
.page-showcase .sc-step-no {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border: 2px solid var(--accent); color: var(--accent); border-radius: 50%;
  font-family: 'Archivo Black', sans-serif; font-size: 16px;
}
.page-showcase .sc-step-title { font-size: 17px; font-weight: 700; margin: 6px 0 6px; }
.page-showcase .sc-step-body { color: var(--text-dim); font-size: 15px; line-height: 1.65; max-width: 62ch; }
.page-showcase .sc-step-body p { margin: 0 0 0.6em; }
.page-showcase .sc-dates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.page-showcase .sc-date { border: 1px solid var(--line); background: var(--bg-alt); padding: 16px 18px; display: grid; gap: 4px; }
.page-showcase .sc-date-day { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 20px; color: var(--accent); }
.page-showcase .sc-date-label { font-weight: 700; font-size: 15px; }
.page-showcase .sc-date-note { font-size: 13px; color: var(--text-faint); }
.page-showcase .sc-date.is-past { opacity: 0.55; }
.page-showcase .sc-date.is-past .sc-date-day { color: var(--text-dim); }
.page-showcase .sc-faq { max-width: 760px; }
.page-showcase .sc-faq-item { padding: 20px 0; border-bottom: 1px solid var(--line); }
.page-showcase .sc-faq-item:first-child { padding-top: 4px; }
.page-showcase .sc-faq-q { font-size: 16.5px; font-weight: 700; margin: 0; }
.page-showcase .sc-faq-a { font-size: 15px; line-height: 1.65; margin: 8px 0 0; color: var(--text-dim); }
.page-showcase .sc-faq-a p { margin: 0 0 0.6em; }
.page-showcase .sc-faq-a p:last-child { margin-bottom: 0; }
.page-showcase .sc-howlink { font-size: 14px; margin: 10px 0 0; }
.page-showcase .sc-howlink a { color: var(--text-dim); }
.page-showcase .sc-howlink a:hover { color: var(--accent); }

/* --- Buttons (mirrors the shop's) --- */
.page-showcase .btn {
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 13.5px; padding: 13px 22px; border-radius: 2px;
  cursor: pointer; border: 2px solid var(--accent); background: transparent; color: var(--text);
  transition: background 0.15s, color 0.15s; display: inline-block; text-align: center;
}
.page-showcase .btn:hover { background: var(--accent); color: var(--bg); }
.page-showcase .btn-ghost { border-color: var(--line); color: var(--text-dim); }
.page-showcase .btn-ghost:hover { background: var(--bg-alt2); color: var(--text); border-color: var(--accent); }
.page-showcase .sc-btn-row { display: flex; gap: 14px; margin: 24px 0 8px; flex-wrap: wrap; }
.page-showcase .sc-link-plain, .page-showcase .sc-link-danger {
  background: none; border: none; padding: 4px 0; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; text-decoration: underline;
  color: var(--text-dim);
}
.page-showcase .sc-link-plain:hover { color: var(--accent); }
.page-showcase .sc-link-danger { color: var(--text-faint); }
.page-showcase .sc-link-danger:hover { color: var(--bad); }
.page-showcase .sc-back { margin-top: 36px; font-size: 14px; }
.page-showcase .sc-back a { color: var(--text-dim); }
.page-showcase .sc-back a:hover { color: var(--accent); }

/* --- Gate --- */
.page-showcase .sc-gate-stage { display: grid; place-items: start center; min-height: 55vh; padding-top: 80px; }
.page-showcase .sc-gate { max-width: 480px; text-align: center; }
.page-showcase .sc-gate .sc-sub { margin-left: auto; margin-right: auto; }
.page-showcase .sc-gate .sc-btn-row { justify-content: center; }

/* --- The announced field --- */
.page-showcase .sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.page-showcase .sc-card { border: 1px solid var(--line); background: var(--bg-alt); border-radius: 2px; overflow: hidden; }
.page-showcase .sc-card-photo { position: relative; aspect-ratio: 4 / 3; background: var(--bg-alt2); }
.page-showcase .sc-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-showcase .sc-card-photo--empty {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: var(--text-faint);
}
.page-showcase .sc-no {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: 'Archivo Black', sans-serif; font-size: 14px;
  background: var(--bg); color: var(--accent); border: 1px solid var(--accent);
  border-radius: 2px; padding: 4px 9px;
}
.page-showcase .sc-no--inline { position: static; display: inline-block; margin-right: 8px; }
.page-showcase .sc-card-body { padding: 16px 18px 20px; }
.page-showcase .sc-card-title { font-size: 16.5px; margin: 0 0 4px; font-weight: 700; }
.page-showcase .sc-card-owner { margin: 0 0 10px; font-size: 14px; color: var(--accent); }
.page-showcase .sc-card-story { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }

/* --- Awards --- */
.page-showcase .sc-awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.page-showcase .sc-award { border: 1px solid var(--line); background: var(--bg-alt); padding: 20px 22px; }
.page-showcase .sc-award h3 { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 15px; margin: 0 0 8px; }
.page-showcase .sc-award-desc { font-size: 14px; color: var(--text-dim); margin: 0 0 10px; }
.page-showcase .sc-award-winner { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.page-showcase .sc-award-sponsor { font-size: 13px; color: var(--text-faint); margin: 0; }
.page-showcase .sc-sponsor-logo { max-height: 42px; width: auto; background: var(--plate); padding: 6px 10px; border-radius: 2px; }

/* --- Applying --- */
.page-showcase .sc-notice {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  padding: 12px 16px; font-size: 14px; color: var(--text-dim); margin: 0 0 20px;
}
.page-showcase .sc-notice--good { border-left-color: var(--good); }
.page-showcase .sc-error { color: #e5735a; font-size: 13.5px; margin: 8px 0 0; }
.page-showcase .sc-rows { display: grid; gap: 16px; }
.page-showcase .sc-row { display: flex; gap: 20px; border: 1px solid var(--line); background: var(--bg-alt); padding: 18px; }
.page-showcase .sc-row-photo { flex: none; width: 150px; aspect-ratio: 4 / 3; position: relative; background: var(--bg-alt2); border-radius: 2px; overflow: hidden; }
.page-showcase .sc-row-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-showcase .sc-row-body { flex: 1; min-width: 0; }
.page-showcase .sc-row-title { font-size: 17px; margin: 0 0 8px; }
.page-showcase .sc-row-actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 620px) {
  .page-showcase .sc-row { flex-direction: column; }
  .page-showcase .sc-row-photo { width: 100%; }
}
.page-showcase .sc-state { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.page-showcase .sc-state--in { color: var(--good); }
.page-showcase .sc-state--out { color: var(--text-faint); }
.page-showcase .sc-state--draft { color: var(--warn); }
.page-showcase .sc-state--none { color: var(--text-faint); }

.page-showcase .sc-panel { border: 1px solid var(--line); background: var(--bg-alt); padding: 24px 26px; margin: 0 0 22px; }
.page-showcase .sc-panel-title { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 15px; margin: 0 0 8px; }
.page-showcase .field { margin-bottom: 22px; }
.page-showcase .field label {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px;
}
.page-showcase .field textarea, .page-showcase .field input[type="text"] {
  width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; line-height: 1.6;
  padding: 13px 14px; border-radius: 2px; resize: vertical;
}
.page-showcase .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.page-showcase .field-help { font-size: 12px; color: var(--text-faint); margin: 6px 0 0; }
.page-showcase .field--error textarea { border-color: #e5735a; }
.page-showcase .errorlist { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: #e5735a; }
.page-showcase .sc-form-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.page-showcase .sc-withdraw { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 0; }
.page-showcase .sc-withdraw .sc-sub { margin: 0; }

/* Photo strip — one upload per request (a memory budget, not a style choice) */
.page-showcase .sc-photo-strip { display: flex; gap: 14px; flex-wrap: wrap; margin: 16px 0; }
.page-showcase .sc-photo { position: relative; margin: 0; width: 180px; }
.page-showcase .sc-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 1px solid var(--line); border-radius: 2px; }
.page-showcase .sc-photo.is-hero img { border-color: var(--accent); }
.page-showcase .sc-photo-tag {
  position: absolute; bottom: 8px; left: 8px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; background: var(--bg); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 2px; padding: 2px 6px;
}
.page-showcase .sc-photo-remove {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; line-height: 1;
  background: var(--bg); color: var(--text-dim); border: 1px solid var(--line);
  border-radius: 50%; cursor: pointer; font-size: 16px;
}
.page-showcase .sc-photo-remove:hover { color: var(--bad); border-color: var(--bad); }
.page-showcase .sc-photo-empty { margin: 0; }
.page-showcase .sc-photo-add { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.page-showcase .sc-file { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-dim); }
.page-showcase .sc-file-label { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; color: var(--text-faint); }
.page-showcase .sc-photo-count { font-size: 12.5px; color: var(--text-faint); }

/* --- The committee board --- */
.page-showcase .sc-filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; }
.page-showcase .sc-filter {
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
}
.page-showcase .sc-filter:hover { border-color: var(--accent); color: var(--accent); }
.page-showcase .sc-filter.is-on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.page-showcase .sc-review-list { display: grid; gap: 20px; }
.page-showcase .sc-review { display: flex; gap: 22px; border: 1px solid var(--line); background: var(--bg-alt); padding: 20px; }
.page-showcase .sc-review.is-voted { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.page-showcase .sc-review-photos { flex: none; width: 260px; display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
.page-showcase .sc-review-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; border: 1px solid var(--line); }
.page-showcase .sc-review-photo.is-hero { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.page-showcase .sc-review-nophoto {
  grid-column: 1 / -1; display: grid; place-items: center; aspect-ratio: 16 / 9;
  border: 1px dashed var(--line); border-radius: 2px; color: var(--text-faint); font-size: 13px;
}
.page-showcase .sc-review-body { flex: 1; min-width: 0; }
.page-showcase .sc-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.page-showcase .sc-review-title { font-size: 18px; margin: 0; }
.page-showcase .sc-review-tally { font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.page-showcase .sc-score { color: var(--accent); font-weight: 700; margin-left: 8px; }
.page-showcase .sc-review-meta { margin: 4px 0 12px; font-size: 14px; color: var(--accent); }
.page-showcase .sc-review-story, .page-showcase .sc-review-history {
  font-size: 14.5px; line-height: 1.6; color: var(--text-dim); margin: 0 0 12px;
}
.page-showcase .sc-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-right: 8px; }
.page-showcase .sc-marks { display: flex; gap: 10px; margin: 14px 0 10px; flex-wrap: wrap; }
.page-showcase .sc-mark {
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 10px 20px; border-radius: 2px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
}
.page-showcase .sc-mark:hover { border-color: var(--accent); color: var(--accent); }
.page-showcase .sc-mark--yes.is-chosen { background: var(--good); border-color: var(--good); color: var(--bg); }
.page-showcase .sc-mark--maybe.is-chosen { background: var(--warn); border-color: var(--warn); color: var(--bg); }
.page-showcase .sc-mark--no.is-chosen { background: var(--bad); border-color: var(--bad); color: var(--bg); }
.page-showcase .sc-note-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.page-showcase .sc-note {
  width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; padding: 10px 12px; border-radius: 2px; resize: vertical;
}
.page-showcase .sc-others { margin-top: 14px; font-size: 14px; color: var(--text-dim); }
.page-showcase .sc-others summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.page-showcase .sc-others ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.page-showcase .sc-mark-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 8px; }
.page-showcase .sc-mark-tag.sc-mark--yes { color: var(--good); }
.page-showcase .sc-mark-tag.sc-mark--maybe { color: var(--warn); }
.page-showcase .sc-mark-tag.sc-mark--no { color: var(--bad); }
.page-showcase .sc-other-note { display: block; color: var(--text-faint); font-size: 13.5px; margin-top: 2px; }
.page-showcase .sc-others-locked { font-size: 13px; margin-top: 12px; }
@media (max-width: 760px) {
  .page-showcase .sc-review { flex-direction: column; }
  .page-showcase .sc-review-photos { width: 100%; }
}

/* --- Showcase screens inside the staff back-office (body.page-staff) --- */
.page-staff .btn-report:disabled { opacity: 0.45; cursor: not-allowed; }
.page-staff .sc-staff-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 18px 0 8px; }
.page-staff .sc-topn { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 18px; font-size: 14px; }
.page-staff .sc-topn input[type="number"] {
  width: 90px; background: var(--bg-alt); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 8px 10px; font: inherit;
}
.page-staff .sc-decide, .page-staff .sc-winner-form, .page-staff .sc-order-cell form {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.page-staff .sc-decide-btn, .page-staff .sc-nudge {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--text-dim);
  border-radius: 6px; padding: 6px 12px;
}
.page-staff .sc-decide-btn:hover, .page-staff .sc-nudge:hover { border-color: var(--accent); color: var(--accent); }
.page-staff .sc-decide-btn--selected.is-on { background: var(--good); border-color: var(--good); color: #161513; }
.page-staff .sc-decide-btn--declined.is-on { background: var(--bad); border-color: var(--bad); color: #161513; }
.page-staff .sc-decide-btn--undecided.is-on { background: var(--bg-alt); border-color: var(--line); color: var(--text); }
.page-staff .sc-winner-form input[type="number"] {
  width: 80px; background: var(--bg-alt); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 7px 9px; font: inherit;
}
.page-staff .sc-publish { font-size: 13px; color: var(--text-dim); display: inline-flex; gap: 6px; align-items: center; }
.page-staff .sc-row-gone td { opacity: 0.55; }
.page-staff .sc-link-danger {
  background: none; border: none; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--text-faint); text-decoration: underline;
}
.page-staff .sc-link-danger:hover { color: var(--bad); }
.page-staff .sc-award-form { max-width: 520px; }
.page-staff .sc-award-form p { margin: 0 0 16px; }
.page-staff .sc-award-form label { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.page-staff .sc-award-form input[type="text"],
.page-staff .sc-award-form input[type="number"],
.page-staff .sc-award-form textarea,
.page-staff .sc-award-form select {
  width: 100%; background: var(--bg-alt); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 10px 12px; font: inherit;
}

/* =================================================================
   Error pages (body.page-error)
   400 / 403 / 404 / CSRF. One centred block under the shared nav, so a
   dead link still leaves the visitor somewhere they can navigate from.
   500.html carries its own copy of this look inline — it renders with no
   context processors and no stylesheet, so keep the two in step by eye.
   ================================================================= */
.page-error .err {
  max-width: 620px;
  padding: 88px 0 110px;
}
/* The block is left-aligned, so the badge is too — centred (its default) it
   floated over the middle of a column whose text starts at the left edge. */
.page-error .err .event-badge { margin: 0 0 26px; }
.page-error .err-code {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.page-error .err-title {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;  /* like every other page's headline */
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}
.page-error .err-lead p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0 0 16px;
}
.page-error .err-detail {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--text-faint);
}
.page-error .err-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.page-error .err-btn {
  display: inline-block;
  padding: 14px 24px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.page-error .err-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-error .err-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.page-error .err-btn--primary:hover { background: var(--text); border-color: var(--text); color: var(--bg); }