:root {
  --bg: #0c0d0e;
  --panel: rgba(22, 24, 26, 0.94);
  --green: #4db95c;
  --green-deep: #1f6b32;
  --danger: #cf3f3f; /* dark enough for white button text to clear 4.5:1 */
  --danger-deep: #8d2424;
  --ink: #f4f5f5;
  --muted: #c4c5c7;
  --line: rgba(77, 185, 92, 0.4);
  --ok: #c8f0d0;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }

/* Components below set their own display, which would otherwise beat the UA
   rule for the hidden attribute. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background:
    radial-gradient(ellipse 70% 45% at 0% -10%, rgba(77, 185, 92, 0.22), transparent 55%),
    radial-gradient(ellipse 50% 35% at 100% 0%, rgba(209, 210, 211, 0.08), transparent 50%),
    var(--bg);
}

main,
.site-footer { position: relative; z-index: 1; }

img { max-width: 100%; }

a { color: var(--green); }

h1, h2, h3, .brand, .btn, .reg-id, .stat-card strong, .section-kicker {
  font-family: Oswald, "Arial Narrow", Impact, sans-serif;
}

h1, h2, h3 { line-height: 1.05; font-weight: 600; }

p { line-height: 1.55; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--green);
  color: #0c0d0e;
  padding: 0.6rem 1rem;
  z-index: 30;
  border-radius: 8px;
}

.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: rgba(0, 0, 0, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: white;
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.05rem;
}

.brand img {
  height: 38px;
  width: auto;
  display: block;
}

.brand-event {
  border-left: 2px solid var(--green);
  padding-left: 0.75rem;
  line-height: 1.1;
}

.site-nav { display: flex; gap: 1rem; align-items: center; }

.site-nav a {
  color: white;
  text-decoration: none;
  font-weight: 700;
}

.nav-cta {
  border: 1px solid var(--green);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}

.wrap { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }

.narrow { width: min(760px, calc(100% - 2rem)); margin-inline: auto; }

.page { padding: 2rem 0 4rem; }

#register { scroll-margin-top: 5.5rem; }
.page > .card { margin-top: 1.25rem; }

.hero { position: relative; padding: 2.75rem 0 2rem; }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
  align-items: center;
}

.kicker {
  margin: 0 0 0.6rem;
  color: var(--green);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: Oswald, sans-serif;
  font-size: 0.95rem;
}

.hero-grid > * { min-width: 0; }

.hero h1 {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: clamp(2.6rem, 12vw, 5.6rem);
  letter-spacing: 0.02em;
  line-height: 0.84;
  text-transform: uppercase;
  text-shadow: 0.045em 0.045em 0 #163d22;
}

.hero-sub {
  margin: 1rem 0 0;
  color: var(--green);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 600;
}

.lede { color: var(--muted); font-size: 1.12rem; max-width: 36rem; }

.hero-stage { position: relative; }

.hero-photo {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  object-position: center top;
  border-radius: 24px;
}

.button-row, .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.button-row { margin-top: 1.5rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.75rem 1.3rem;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.05rem;
  background: transparent;
  color: white;
}

.btn-power {
  background: var(--green);
  color: #0c0d0e;
  box-shadow: 0 7px 0 var(--green-deep);
}

.btn-power:hover { transform: translateY(2px); box-shadow: 0 5px 0 var(--green-deep); }

.btn-ghost { border-color: rgba(255, 255, 255, 0.35); }

.btn-ghost:hover { border-color: var(--green); color: var(--green); }

.btn-danger {
  background: var(--danger);
  color: white;
  box-shadow: 0 6px 0 var(--danger-deep);
}

.btn-small { min-height: 38px; padding: 0.35rem 0.8rem; font-size: 0.92rem; }

.btn-xl { min-height: 64px; width: 100%; font-size: 1.35rem; }

.btn:disabled { opacity: 0.65; cursor: wait; transform: none; }

.facts, .steps-grid, .stats {
  display: grid;
  gap: 1rem;
}

.facts { grid-template-columns: 1fr; margin: 1.5rem 0 0.5rem; padding: 0; list-style: none; }

.facts li, .card, .stat-card, .pass-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.facts li { padding: 1.1rem 1.2rem 1.2rem; }

.facts li::before, .card::before, .stat-card::before, .pass-card::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--green);
}

.facts span, .stat-card span, .section-kicker {
  display: block;
  color: var(--green);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.facts strong { display: block; margin-top: 0.35rem; font-size: 1.35rem; font-family: Oswald, sans-serif; }

.steps-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 1rem 0 3rem; }

.card-pad { padding: 1.25rem 1.3rem 1.4rem; }

.card h2, .pass-card h2 { margin: 0.35rem 0 0.5rem; font-size: 1.8rem; text-transform: uppercase; }

/* Cards clip their overflow, so guest names have to break rather than run out. */
.card h2, body.pass-page .card .muted { overflow-wrap: anywhere; }

.muted { color: var(--muted); }

.pass-card { padding: 1.4rem; text-align: center; }

.pass-card img {
  width: 190px;
  height: 190px;
  background: white;
  padding: 8px;
  border-radius: 12px;
}

.sample-tag {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--green);
  color: var(--green);
  letter-spacing: 0.14em;
  font-size: 0.75rem;
}

.site-footer {
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer p { margin: 0.25rem 0; }

.flash {
  width: min(1120px, calc(100% - 2rem));
  margin: 1rem auto 0;
  padding: 0.85rem 1rem;
  border-radius: 12px;
}

.flash-success { background: #123828; color: var(--ok); }

.flash-error { background: #3d1520; color: #ffd5da; }

.steps {
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1.25rem;
  list-style: none;
}

.steps li {
  flex: 1;
  display: flex;
  gap: 0.45rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.steps span {
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.steps .is-current, .steps .is-done { color: white; }

.steps .is-current span, .steps .is-done span {
  background: var(--green);
  color: #0c0d0e;
  border-color: var(--green);
}

.stack { display: grid; gap: 1rem; }

.form-grid { display: grid; gap: 1rem; }

.split { display: grid; gap: 1rem; }

.field { display: flex; flex-direction: column; gap: 0.35rem; }

label { font-weight: 700; }

input, select {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(197, 210, 234, 0.35);
  background: #0c0d0e;
  color: white;
  font: inherit;
  font-size: 1rem;
}

input:focus, select:focus, .btn:focus-visible, .btn-add:focus-visible,
.btn-remove:focus-visible, a:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

input.invalid, select.invalid { border-color: #ff8b98; }

.field-error, .form-errors { color: #ffd0d6; }

.form-errors {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: rgba(225, 29, 46, 0.16);
}

.form-errors ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

.hint { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.92rem; }

.member-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.85rem;
}

.btn-remove, .btn-add {
  font: inherit;
  cursor: pointer;
}

.btn-remove {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(225, 29, 46, 0.7);
  background: rgba(225, 29, 46, 0.14);
  color: white;
  font-size: 1.5rem;
  line-height: 1;
}

.btn-add {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border: 1px dashed rgba(77, 185, 92, 0.75);
  background: transparent;
  color: var(--green);
  font-weight: 700;
}

.group-title { margin: 0.4rem 0; font-size: 1.15rem; letter-spacing: 0.08em; text-transform: uppercase; }

.form-step { display: grid; gap: 0.8rem; }

.form-step[hidden] { display: none !important; }

/* One screen, no scrollbar. The header stays put and the form or pass fills
   whatever height is left. */
body.register-page,
body.pass-page {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.register-page .site-header,
body.pass-page .site-header { flex: none; }

body.register-page main,
body.pass-page main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body.register-page .page {
  width: calc(100% - 3rem);
  max-width: none;
  margin-inline: auto;
  padding: 1rem 0 1.5rem;
  transform-origin: top center;
}

/* Phones keep a full-size card and scroll. The one-screen shrink is for laptops. */
@media (max-width: 1023px) {
  body.register-page {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  body.register-page main { overflow: visible; }
}

body.register-page .steps { margin-bottom: 0.75rem; }

body.register-page h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.5rem); }

@media (min-width: 720px) {
  body.register-page .family-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
  }
}

body.register-page .stack { gap: 0.8rem; }

@keyframes step-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

body.register-page .steps { animation: step-rise 0.6s ease-in-out both; }

body.register-page .card {
  animation: step-rise 0.7s ease-in-out both;
  animation-delay: 0.08s;
}

/* Replays when a panel goes from hidden to shown, so step changes animate too. */
body.register-page .form-step { animation: step-rise 0.45s ease-in-out both; }

/* Laptop: title on the left, fields on the right, no wide empty card. */
@media (min-width: 1024px) {
  body.register-page main {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  body.register-page .page {
    width: min(1080px, calc(100% - 6rem));
    padding: 0;
  }

  body.register-page .page > .card { margin-top: 0; }

  body.register-page .card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
  }

  body.register-page .card::before { display: none; }

  body.register-page .steps {
    width: 100%;
    margin-bottom: 1.5rem;
  }

  body.register-page .form-step {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 4vw, 4.5rem);
    row-gap: 0;
    align-items: start;
  }

  body.register-page .form-intro { padding-top: 0.35rem; }

  body.register-page .form-intro .muted { max-width: 20rem; }

  body.register-page h1 { font-size: clamp(2.4rem, 3.4vw, 3.2rem); }

  body.register-page .split .field:last-child { grid-column: 1 / -1; max-width: calc(50% - 0.5rem); }

  body.register-page .form-fields { display: grid; gap: 1.1rem; }

  body.register-page .button-row { margin-top: 0.15rem; justify-content: flex-start; }

  body.register-page .family-grid { gap: 1.75rem; }
}

body.pass-page main {
  display: flex;
  flex-direction: column;
}

body.pass-page .pass-layout {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding: 0.85rem clamp(1.5rem, 4vw, 3rem) 1rem;
  display: grid;
  grid-template-columns: auto minmax(240px, 340px);
  justify-content: center;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

body.pass-page .pass-banner { grid-column: 1 / -1; margin: 0 0 0.75rem; }

body.pass-page .entry-pass {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.pass-page .entry-pass img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

body.pass-page .pass-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

body.pass-page .pass-copy > p,
body.pass-page .pass-after > p { margin: 0.12rem 0; }

body.pass-page .pass-side .muted { overflow-wrap: anywhere; }

body.pass-page h1 {
  margin: 0.15rem 0 0.35rem;
  font-size: clamp(1.8rem, 4.2vh, 3.1rem);
  text-align: left;
}

body.pass-page .pass-id-label {
  margin: 0.7rem 0 0;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

body.pass-page .reg-id {
  margin: 0.1rem 0 0.7rem;
  font-size: clamp(1.6rem, 3.6vh, 2.6rem);
}

body.pass-page .pass-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  width: 100%;
  margin-top: 1.1rem;
}

body.pass-page .pass-buttons .btn { width: 100%; }

/* Phones keep the earlier centered card and scroll. The open layout is for laptops. */
@media (max-width: 1023px) {
  body.pass-page {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  body.pass-page main { overflow: visible; }

  body.pass-page .pass-layout {
    flex: none;
    height: auto;
    min-height: 0;
    width: min(480px, calc(100% - 1.5rem));
    margin: 1rem auto 1.5rem;
    padding: 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: visible;
    column-gap: 0;
    justify-content: flex-start;
  }

  body.pass-page .pass-layout::before {
    content: "";
    display: block;
    flex: none;
    height: 4px;
    width: calc(100% + 2rem);
    margin: 0 -1rem 0.75rem;
    background: var(--green);
  }

  body.pass-page .pass-banner { width: 100%; margin: 0 0 0.75rem; }

  body.pass-page .pass-side { display: contents; }

  body.pass-page .pass-copy,
  body.pass-page .pass-after {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  body.pass-page .pass-copy { order: 1; }

  body.pass-page .entry-pass {
    order: 2;
    flex: none;
    height: auto;
    width: 100%;
    max-height: none;
    margin: 0.35rem 0;
  }

  body.pass-page .entry-pass img {
    width: min(240px, 70vw);
    height: auto;
    max-width: 100%;
    max-height: none;
  }

  body.pass-page .pass-after { order: 3; flex: none; }

  body.pass-page h1 {
    font-size: clamp(1.55rem, 6vw, 2.2rem);
    text-align: center;
  }

  body.pass-page .hero-sub { font-size: 1.05rem; }

  body.pass-page .reg-id {
    font-size: clamp(1.35rem, 5vw, 2rem);
    margin-bottom: 0.35rem;
  }

  body.pass-page .pass-buttons {
    gap: 0.55rem;
    margin-top: 0.75rem;
  }

  body.pass-page .pass-buttons .btn {
    min-height: 48px;
    padding: 0.7rem 1rem;
    font-size: 1rem;
  }
}

/* The profile card is much taller than the QR card, so top-align them instead
   of floating the QR card in the middle of the row. */
body.admin-detail .hero-grid { align-items: start; }

.entry-pass {
  display: inline-block;
  max-width: 100%;
  margin: 0.4rem 0 0.9rem;
}

.entry-pass img {
  display: block;
  width: min(340px, 84vw);
  height: auto;
  aspect-ratio: 638 / 1013;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

.profile { margin: 0; }

.profile div { padding: 0.85rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.profile dt { color: var(--green); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }

.profile dd { margin: 0.25rem 0 0; font-size: 1.25rem; overflow-wrap: anywhere; }

.profile ol { margin: 0.35rem 0 0; padding-left: 1.2rem; }

.reg-id {
  margin: 0.2rem 0 1rem;
  font-size: clamp(2rem, 6vw, 3.2rem);
  letter-spacing: 0.08em;
  color: var(--green);
}

.qr-frame {
  display: inline-block;
  background: white;
  padding: 14px;
  border-radius: 18px;
  box-shadow: 0 0 0 4px #d1d2d3, 0 0 0 8px var(--green);
}

.qr-frame img { width: min(280px, 70vw); height: auto; display: block; }

.center { text-align: center; }

.banner {
  padding: 0.9rem 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.banner-ok { background: rgba(61, 214, 140, 0.16); color: var(--ok); }

.banner-warn { background: rgba(225, 29, 46, 0.16); color: #ffd0d4; }

.banner-info { background: rgba(77, 185, 92, 0.14); color: #d7f5dc; }

.stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.stat-card { padding: 1rem 1rem 1.2rem; }

.stat-card strong { font-size: clamp(2.4rem, 4vw, 3.4rem); }

.filters {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; min-width: 880px; }

th, td { padding: 0.8rem 0.65rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

th {
  color: var(--green);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

tr:hover td { background: rgba(255, 255, 255, 0.03); }

.clip { max-width: 180px; overflow-wrap: anywhere; }

.badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
}

.badge-registered { color: #d7f5dc; }
.badge-checked_in { color: var(--ok); }
.badge-cancelled { color: #ffb3bc; }

.pager { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 1rem; }

.roster { list-style: none; padding: 0; margin: 0; }

.roster li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.roster li > span { color: var(--green); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; }

/* Long names must wrap rather than push the check-in button out of the card. */
.roster li > div, .roster li > strong { min-width: 0; overflow-wrap: anywhere; }

.roster .badge { letter-spacing: 0; text-transform: none; }

.roster li form { margin: 0; }
.roster strong { display: block; }

.headcount {
  font-family: Oswald, sans-serif;
  font-size: 2.4rem;
  margin: 0;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.auth-wrap { min-height: calc(100vh - 220px); display: grid; place-items: center; }

.scanner-layout { display: grid; gap: 1rem; }

.viewfinder {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  min-height: 280px;
  aspect-ratio: 3 / 4;
}

.viewfinder video,
.viewfinder canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.viewfinder canvas { display: none; }

.scan-frame {
  position: absolute;
  inset: 12% 10%;
  border: 3px solid var(--green);
  border-radius: 16px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.scan-status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.8rem;
  text-align: center;
  color: white;
  font-weight: 700;
}

.result-panel[hidden] { display: none; }

@media (min-width: 560px) {
  .facts { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 720px) {
  .split { grid-template-columns: 1fr 1fr; }
  .filters { grid-template-columns: 1fr 1fr; align-items: end; }
}

@media (min-width: 900px) {
  .scanner-layout { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
  .viewfinder { aspect-ratio: 4 / 5; max-height: none; }
}

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
  .facts { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1100px) {
  .filters { grid-template-columns: 1.4fr 0.8fr 0.7fr 0.7fr auto auto auto; }
}

@media (max-width: 800px) {
  .site-header {
    flex-wrap: wrap;
    padding: 0.7rem 0.85rem;
    gap: 0.55rem 0.75rem;
  }
  .brand { min-width: 0; font-size: 0.92rem; gap: 0.5rem; }
  .brand img { height: 32px; }
  .brand-event { padding-left: 0.5rem; }
  .site-nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.45rem 0.9rem;
  }
  .hero { padding: 1.4rem 0 0.5rem; }
  .hero-photo { max-height: 460px; border-radius: 18px; }
  .page { padding: 1.25rem 0 2.5rem; }
  .card-pad { padding: 1rem 0.95rem 1.15rem; }
  .card h2, .pass-card h2 { font-size: 1.45rem; }
  .button-row .btn, .actions .btn { flex: 1 1 100%; }
  .roster li { flex-wrap: wrap; align-items: flex-start; }
  .viewfinder { aspect-ratio: 1 / 1; min-height: 0; max-height: 78vw; }
  .auth-wrap { min-height: auto; padding: 1.5rem 0 2rem; }
}

@media (max-width: 420px) {
  .wrap, .narrow, .flash { width: min(1120px, calc(100% - 1.25rem)); }
  .facts { grid-template-columns: 1fr; }
  .hero h1 { letter-spacing: 0; }
  .site-nav a { font-size: 0.95rem; }
}

body.landing {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.landing .site-header { flex: none; flex-wrap: nowrap; padding: 0.85rem 1.5rem; }

body.landing .site-nav { width: auto; flex-wrap: nowrap; }

body.landing main {
  flex: 1 1 auto;
  display: flex;
  /* Column, so a flash message stacks above the hero instead of becoming a
     sibling column that squeezes the grid and slides the countdown row under
     the photo. */
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0.5rem 1.5rem 1rem;
}

body.landing .flash { flex: none; }

body.landing .hero {
  flex: 1 1 auto;
  width: min(1360px, 100%);
  min-height: 0;
  margin-inline: auto;
  padding: 0;
  display: flex;
}

body.landing .hero-grid {
  flex: 1 1 auto;
  width: min(1320px, 100%);
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: clamp(1.75rem, 3vw, 3.25rem);
  align-items: stretch;
}

body.landing .hero-copy {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: clamp(0.85rem, 2.4vh, 1.75rem);
  padding: 0.15rem 0;
}

body.landing .hero-copy > * { margin: 0; }

body.landing .hero-intro {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body.landing .kicker { font-size: 1.28rem; margin: 0; }

body.landing .hero h1 {
  font-size: clamp(3.6rem, 9vh, 6.2rem);
  line-height: 0.9;
  margin: 0;
}

body.landing .hero-sub {
  margin: 0;
  font-size: clamp(1.6rem, 3.4vh, 2.15rem);
}

body.landing .lede {
  margin: 0;
  max-width: 42rem;
  font-size: clamp(1.28rem, 2.5vh, 1.5rem);
}

body.landing .hero-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
}

body.landing .countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  gap: 0.85rem;
}

body.landing .countdown { margin: 0; text-align: center; }

body.landing .countdown-label {
  margin: 0 0 0.45rem;
  color: var(--green);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: Oswald, sans-serif;
  font-size: 0.95rem;
}

body.landing .countdown-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.45rem;
}

body.landing .countdown-grid div {
  min-width: 4.15rem;
  padding: 0.45rem 0.55rem 0.5rem;
  text-align: center;
  background: rgba(22, 24, 26, 0.94);
  border: 1px solid var(--line);
  border-radius: 14px;
}

body.landing .countdown-grid strong {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: clamp(1.65rem, 3.6vh, 2.35rem);
  line-height: 1;
}

body.landing .countdown-grid span {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.landing .button-row { margin: 0; justify-content: center; }

body.landing .btn-power {
  min-height: 56px;
  padding: 0.85rem 1.9rem;
  font-size: 1.2rem;
}

body.landing .hero-side {
  min-width: 0;
  min-height: 0;
  height: 100%;
}

body.landing .facts {
  display: flex;
  justify-content: flex-start;
  flex: none;
  flex-wrap: nowrap;
  gap: 0.65rem;
  margin: 0;
}

body.landing .facts li { width: auto; padding: 0.55rem 0.9rem 0.65rem; }

body.landing .facts span { font-size: 0.75rem; letter-spacing: 0.1em; }

body.landing .facts strong { margin-top: 0.1rem; font-size: 1.15rem; }

body.landing .hero-stage {
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden;
  border-radius: 28px;
}

body.landing .hero-photo {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
}

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

body.landing .hero-intro,
body.landing .hero-center {
  animation: landing-rise 0.85s ease-in-out both;
}

body.landing .hero-center { animation-delay: 0.16s; }

body.landing .hero-stage {
  animation: landing-rise 0.95s ease-in-out both;
}

@media (max-width: 860px) {
  body.landing {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  body.landing main {
    overflow: visible;
    padding: 1rem 1rem 2rem;
  }

  body.landing .hero { display: block; }

  body.landing .hero-grid {
    grid-template-columns: 1fr;
    height: auto;
    gap: 1.25rem;
  }

  body.landing .hero h1 { font-size: clamp(3rem, 15vw, 4.4rem); }

  body.landing .hero-copy {
    height: auto;
    justify-content: flex-start;
    gap: 1.15rem;
  }

  body.landing .hero-center {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  body.landing .countdown-block { width: 100%; }

  body.landing .facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  body.landing .countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  body.landing .countdown-grid div { min-width: 0; }

  body.landing .button-row { width: 100%; }

  body.landing .button-row .btn { flex: 0 0 auto; }

  body.landing .hero-side {
    height: auto;
    width: min(100%, 480px);
    margin-inline: auto;
  }

  body.landing .hero-stage {
    height: min(68vh, 520px);
    width: 100%;
  }

  body.landing .hero-photo {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center top;
  }
}

@media (max-width: 560px) {
  body.landing .button-row .btn { flex: 1 1 100%; }
}

@media (max-width: 420px) {
  body.landing .hero h1 { font-size: clamp(2.5rem, 13vw, 3.6rem); }

  body.landing .kicker { font-size: 1.05rem; }

  body.landing .hero-sub { font-size: 1.3rem; }

  body.landing .lede { font-size: 1.08rem; }

  body.landing .countdown-grid { gap: 0.35rem; }

  body.landing .countdown-grid div { padding: 0.4rem 0.3rem 0.45rem; }

  body.landing .countdown-grid strong { font-size: 1.4rem; }

  body.landing .countdown-grid span { font-size: 0.55rem; letter-spacing: 0.04em; }

  body.landing .facts li { min-width: 0; }

  body.landing .hero-stage { height: min(60vh, 420px); }
}

/* Short desktop viewports: fit the single screen by letting the vh term of the
   existing clamps take over, never by dropping copy. Each clamp resolves to the
   same size as the unscoped rule at the top of its range, so there is no jump. */
@media (min-width: 861px) and (max-height: 800px) {
  body.landing .site-header { padding: 0.7rem 1.5rem; }

  body.landing main { padding: 0.4rem 1.5rem 0.8rem; }

  body.landing .hero-copy { gap: clamp(0.65rem, 2vh, 1.5rem); }

  body.landing .hero-intro { gap: clamp(0.35rem, 1.1vh, 0.75rem); }

  body.landing .kicker { font-size: clamp(1rem, 3vh, 1.28rem); }

  body.landing .hero h1 { font-size: clamp(2.4rem, 9vh, 6.2rem); }

  body.landing .hero-sub { font-size: clamp(1.1rem, 3.8vh, 1.7rem); }

  body.landing .lede { font-size: clamp(1.05rem, 2.97vh, 1.28rem); }

  body.landing .countdown-block { gap: clamp(0.45rem, 1.5vh, 0.85rem); }
}

@media (min-width: 861px) and (max-height: 620px) {
  body.landing .site-header { padding: 0.5rem 1.5rem; }

  body.landing main { padding: 0.35rem 1.5rem 0.6rem; }

  body.landing .countdown-label { margin-bottom: 0.3rem; }

  body.landing .countdown-grid div { padding-block: 0.35rem 0.4rem; }

  body.landing .countdown-grid strong { font-size: clamp(1.15rem, 4.3vh, 1.65rem); }

  body.landing .facts li { padding-block: 0.45rem 0.55rem; }

  body.landing .facts strong { font-size: 1.05rem; }
}

@media (min-width: 861px) and (max-height: 530px) {
  body.landing .kicker { font-size: clamp(0.9rem, 3vh, 1.28rem); }

  body.landing .hero h1 { font-size: clamp(1.75rem, 8.6vh, 2.95rem); }

  body.landing .hero-sub { font-size: clamp(0.98rem, 3.8vh, 1.7rem); }

  body.landing .lede { font-size: clamp(0.9rem, 2.97vh, 1.28rem); }

  body.landing .countdown-label { font-size: 0.74rem; }

  body.landing .facts span, body.landing .countdown-grid span { font-size: 0.58rem; }

  body.landing .btn-power { min-height: 44px; padding: 0.6rem 1.4rem; font-size: 1.02rem; }
}

/* Narrow desktop widths: keep Date/Venue on one row beside the countdown by
   scaling that row with the viewport width, instead of letting it run past the
   text column and under the photo. Only inline metrics are set here, so the
   height tiers above keep control of vertical rhythm. Each clamp meets its
   unscoped value at 1279px, so nothing changes on wider screens. */
@media (min-width: 861px) and (max-width: 1279px) {
  body.landing .hero-center { column-gap: clamp(0.7rem, 1.563vw, 1.25rem); }

  body.landing .facts { column-gap: clamp(0.4rem, 0.813vw, 0.65rem); }

  body.landing .facts li { padding-inline: clamp(0.5rem, 1.126vw, 0.9rem); }

  body.landing .facts span { font-size: clamp(0.62rem, 0.938vw, 0.75rem); }

  body.landing .facts strong { font-size: clamp(0.98rem, 1.44vw, 1.15rem); }

  body.landing .countdown-label { font-size: clamp(0.78rem, 1.188vw, 0.95rem); }

  body.landing .countdown-grid { column-gap: clamp(0.25rem, 0.563vw, 0.45rem); }

  body.landing .countdown-grid div {
    min-width: clamp(3.1rem, 5.2vw, 4.15rem);
    padding-inline: clamp(0.3rem, 0.688vw, 0.55rem);
  }

  body.landing .countdown-grid span { font-size: clamp(0.5rem, 0.776vw, 0.62rem); }
}

/* Extreme aspect ratios only: release the height lock and let the page
   scroll rather than clip the Register button. */
@media (min-width: 861px) and (max-height: 450px) {
  body.landing {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  body.landing main { overflow: visible; }

  body.landing .hero-grid { height: auto; }

  body.landing .hero-copy { height: auto; gap: 1rem; justify-content: flex-start; }

  body.landing .hero-stage { height: min(70vh, 360px); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .btn-power:hover { transform: none; }
}

@media print {
  body.register-page,
  body.pass-page {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  body.register-page main,
  body.pass-page main { overflow: visible; }

  body.register-page .page,
  body.pass-page .page { transform: none !important; height: auto; }

  body.pass-page .pass-layout { display: block; width: auto; }

  body.pass-page .entry-pass { display: block; height: auto; max-height: none; }

  body.pass-page .entry-pass img {
    width: 72mm;
    height: auto;
    max-height: none;
  }

  .hero-stage { display: none !important; }
  body { background: white !important; color: black !important; }
  .site-header, .site-footer, .steps, .no-print, .flash, .skip-link { display: none !important; }
  .card, .pass-card, .facts li, .stat-card { box-shadow: none; background: white; color: black; }
  /* The green accent bar is decoration only, so it just costs ink on paper. */
  .card::before, .pass-card::before, .facts li::before, .stat-card::before { display: none; }
  .reg-id, .profile dt, .kicker, .section-kicker, .hero-sub, .muted, .hint, .badge, a { color: black; }
  .badge { background: none; border: 1px solid black; }
  .banner { background: none; border: 1px solid black; color: black; }
  .qr-frame { box-shadow: none; border: 2px solid black; }
  .entry-pass img { width: 72mm; box-shadow: none; }
  @page { margin: 1.4cm; }
}