:root {
    --blue: #133C86;
    --blue-deep: #0C2A61;
    --gold: #E1A730;
    --grey: #737373;
    --grey-light: #E4E7EC;
    --paper: #F4F6FA;
    --ink: #12151B;
    --white: #FFFFFF;
    --radius-s: 4px;
    --radius-m: 8px;
    --max-w: 760px;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, .display {
    font-family: 'Exo 2', 'Arial Narrow', sans-serif;
    margin: 0;
    letter-spacing: -0.01em;
  }

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

  button {
    font-family: 'Exo 2', sans-serif;
    cursor: pointer;
    border: none;
  }

  input, textarea {
    font-family: 'Lato', sans-serif;
  }

  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important;
    }
  }

  /* ---------- Layout shell ---------- */
  .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }

  header.top {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--grey-light);
  }

  .top-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }

  .mark-mini {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    color: var(--ink);
  }
  .mark-mini .msa {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--blue);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 1px;
  }
  .mark-mini .sub {
    font-size: 12.5px;
    color: var(--grey);
  }

  nav.tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }
  nav.tabs button {
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
    padding: 7px 11px;
    border-radius: var(--radius-s);
  }
  nav.tabs button.active {
    background: var(--blue);
    color: var(--white);
  }
  nav.tabs button:not(.active):hover {
    background: var(--paper);
  }

  main { min-height: 60vh; }

  .view { display: none; }
  .view.active { display: block; }

  section.band { padding: 56px 0; }
  section.band.paper { background: var(--paper); }
  section.band.blue { background: var(--blue); color: var(--white); }

  /* ---------- Hero / identity ---------- */
  .hero {
    padding: 64px 0 48px;
    position: relative;
    overflow: hidden;
  }
  .hero .waves {
    position: absolute;
    top: -20px;
    right: -60px;
    width: 340px;
    opacity: 0.10;
    pointer-events: none;
  }
  .eyebrow-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--blue);
    margin-bottom: 18px;
  }
  .eyebrow-mark .bar { width: 22px; height: 2px; background: var(--gold); }

  .hero h1 {
    font-size: clamp(2rem, 6vw, 3.1rem);
    font-weight: 800;
    line-height: 1.04;
    color: var(--blue-deep);
  }
  .hero h1 .gold-underline {
    display: inline-block;
    border-bottom: 5px solid var(--gold);
    padding-bottom: 2px;
  }
  .hero p.lede {
    max-width: 46ch;
    font-size: 1.08rem;
    color: #33394a;
    margin-top: 18px;
  }

  .cta-row { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
  .btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: var(--radius-s);
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .btn-primary { background: var(--gold); color: var(--blue-deep); }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(225,167,48,0.35); }
  .btn-secondary { background: transparent; color: var(--blue); border: 1.5px solid var(--blue); padding: 10.5px 20px; }
  .btn-secondary:hover { background: var(--paper); }
  .btn-ghost { background: transparent; color: var(--grey); text-decoration: underline; padding: 6px 0; font-size: 13.5px; font-weight: 600; }

  .stat-row {
    display: flex;
    gap: 28px;
    margin-top: 44px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid var(--grey-light);
  }
  .stat .num { font-family:'Exo 2', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--blue); }
  .stat .lab { font-size: 12.5px; color: var(--grey); }

  /* ---------- Generic content blocks ---------- */
  .kicker { font-weight: 800; font-size: 1.6rem; color: var(--blue-deep); margin-bottom: 6px; }
  .section-lede { color: var(--grey); max-width: 52ch; margin-bottom: 30px; }

  .step {
    display: flex;
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid var(--grey-light);
  }
  .step:last-child { border-bottom: 1px solid var(--grey-light); }
  .step .n {
    flex: none;
    width: 34px; height: 34px;
    background: var(--blue);
    color: var(--white);
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-s);
  }
  .step h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 4px; }
  .step p { margin: 0; color: #33394a; font-size: 0.96rem; }

  .callout {
    background: var(--paper);
    border-left: 3px solid var(--gold);
    padding: 16px 20px;
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    font-size: 0.95rem;
    margin: 26px 0;
  }
  .callout strong { color: var(--blue-deep); }

  /* ---------- Vote view ---------- */
  .field { margin-bottom: 22px; }
  .field label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 7px; color: var(--blue-deep); }
  .field input[type=text] {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--grey-light);
    border-radius: var(--radius-s);
    font-size: 15px;
  }
  .field input[type=text]:focus { border-color: var(--blue); outline: none; }
  .field .hint { font-size: 12.5px; color: var(--grey); margin-top: 6px; }

  .pool { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    background: var(--white);
    border: 1.5px solid var(--grey-light);
    color: var(--ink);
    padding: 9px 14px;
    border-radius: var(--radius-s);
    font-size: 14px;
    font-weight: 600;
  }
  .chip:hover { border-color: var(--blue); background: var(--paper); }

  .ranked-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .ranked-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--paper);
    border: 1.5px solid var(--grey-light);
    border-radius: var(--radius-s);
    padding: 10px 12px;
  }
  .ranked-item .badge {
    flex: none;
    width: 28px; height: 28px;
    background: var(--blue);
    color: var(--white);
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px;
  }
  .ranked-item .name { flex: 1; font-weight: 700; font-size: 14.5px; }
  .ranked-item .ctrls { display: flex; gap: 4px; }
  .ranked-item .ctrls button {
    background: var(--white);
    border: 1px solid var(--grey-light);
    width: 26px; height: 26px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--grey);
  }
  .ranked-item .ctrls button:hover { border-color: var(--blue); color: var(--blue); }
  .ranked-item .ctrls button.remove:hover { border-color: #B23A3A; color: #B23A3A; }

  .empty-note {
    color: var(--grey);
    font-size: 13.5px;
    padding: 14px;
    border: 1.5px dashed var(--grey-light);
    border-radius: var(--radius-s);
    text-align: center;
  }

  .confirm-box {
    background: var(--blue);
    color: var(--white);
    border-radius: var(--radius-m);
    padding: 30px;
    text-align: center;
  }
  .confirm-box h2 { font-size: 1.4rem; margin-bottom: 8px; }
  .confirm-box p { color: #C7D3EA; margin: 0 0 18px; }

  /* ---------- Results / admin ---------- */
  .pin-gate { max-width: 340px; margin: 60px auto; text-align: center; }
  .pin-gate input {
    width: 100%; text-align: center; letter-spacing: 0.3em; font-size: 20px;
    padding: 14px; border: 1.5px solid var(--grey-light); border-radius: var(--radius-s); margin: 16px 0;
  }
  .error-text { color: #B23A3A; font-size: 13.5px; margin-top: 8px; }

  .admin-block {
    border: 1.5px solid var(--grey-light);
    border-radius: var(--radius-m);
    padding: 22px;
    margin-bottom: 20px;
  }
  .admin-block h3 { font-size: 1rem; margin-bottom: 14px; }
  .admin-block textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1.5px solid var(--grey-light);
    border-radius: var(--radius-s);
    font-size: 14px;
    resize: vertical;
  }
  .row-flex { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .toggle-group { display: flex; border: 1.5px solid var(--grey-light); border-radius: var(--radius-s); overflow: hidden; }
  .toggle-group button {
    background: var(--white); color: var(--ink); padding: 9px 16px; font-size: 13.5px; font-weight: 700;
  }
  .toggle-group button.active { background: var(--blue); color: var(--white); }
  .quota-note { font-size: 12.5px; color: var(--grey); margin-top: 8px; }

  .podium {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 22px 0 8px;
  }
  .podium .seat {
    background: var(--blue-deep);
    color: var(--white);
    border-radius: var(--radius-m);
    padding: 20px;
    text-align: center;
  }
  .podium .seat .star { color: var(--gold); font-size: 20px; margin-bottom: 6px; }
  .podium .seat .name { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 1.15rem; }
  .podium .seat .votes { font-size: 12.5px; color: #C7D3EA; margin-top: 4px; }
  .podium .seat.empty { background: var(--paper); color: var(--grey); }

  table.tally { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 10px; }
  table.tally th, table.tally td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--grey-light); }
  table.tally th { color: var(--grey); font-weight: 700; font-size: 12px; }
  table.tally tr.elected-row td { color: var(--blue); font-weight: 700; }
  table.tally tr.eliminated-row td { color: var(--grey); text-decoration: line-through; }

  .round-card {
    border: 1px solid var(--grey-light);
    border-radius: var(--radius-s);
    padding: 14px 16px;
    margin-bottom: 10px;
  }
  .round-card .round-label { font-weight: 700; font-size: 12.5px; color: var(--blue); margin-bottom: 8px; }
  .round-note { font-size: 12.5px; color: var(--grey); margin-top: 8px; font-style: italic; }

  .turnout-list { font-size: 13px; color: var(--grey); line-height: 1.9; }

  footer {
    border-top: 1px solid var(--grey-light);
    padding: 30px 0 60px;
    color: var(--grey);
    font-size: 12.5px;
    text-align: center;
  }

  @media (max-width: 480px) {
    .podium { grid-template-columns: 1fr; }
    .top-inner { padding: 10px 16px; }
    nav.tabs button { font-size: 12px; padding: 6px 8px; }
    section.band { padding: 40px 0; }
  }

/* ---------- name form (two-field) ---------- */
.name-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 480px) {
  .name-form { grid-template-columns: 1fr; }
}

/* ---------- admin header variant ---------- */
.admin-badge {
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--blue);
  padding: 3px 8px;
  border-radius: 3px;
}

/* ---------- Candidate grid ---------- */
.pool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.pool-grid .chip {
  width: 100%;
  text-align: left;
}
@media (min-width: 460px) {
  .pool-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 700px) {
  .pool-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Learn-more resources ---------- */
.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--grey-light);
  margin-bottom: 10px;
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.caption {
  font-size: 12.5px;
  color: var(--grey);
  margin: 0 0 28px;
}
.resource {
  display: block;
  border: 1.5px solid var(--grey-light);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  padding: 15px 18px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.resource:hover {
  background: var(--paper);
  border-color: var(--grey-light);
  border-left-color: var(--blue);
}
.resource .r-title {
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--blue-deep);
  margin-bottom: 3px;
}
.resource .r-desc { font-size: 13.5px; color: #33394a; }
.resource .r-host { font-size: 11.5px; color: var(--grey); margin-top: 5px; letter-spacing: 0.03em; }

/* ---------- Schedule notice ---------- */
.schedule-note {
  background: var(--paper);
  border-radius: var(--radius-m);
  padding: 24px;
  text-align: center;
}
.schedule-note h3 {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.15rem;
  color: var(--blue-deep);
  margin: 0 0 6px;
}
.schedule-note p { margin: 0; color: var(--grey); font-size: 14px; }
.schedule-note .when {
  display: inline-block;
  margin-top: 12px;
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  color: var(--blue);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}

/* ---------- Fixed-slot ranking ---------- */
.rank-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.rank-count {
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--grey);
}
.rank-count.full { color: var(--blue); }
.slot {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--radius-s);
  padding: 10px 12px;
  margin-bottom: 8px;
  min-height: 52px;
}
.slot.filled {
  background: var(--paper);
  border: 1.5px solid var(--grey-light);
}
.slot.empty {
  background: transparent;
  border: 1.5px dashed var(--grey-light);
}
.slot .badge {
  flex: none;
  width: 30px;
  height: 30px;
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.slot.filled .badge { background: var(--blue); color: var(--white); }
.slot.empty .badge { background: var(--grey-light); color: var(--grey); }
.slot .name { flex: 1; font-weight: 700; font-size: 14.5px; }
.slot.empty .name { font-weight: 400; font-size: 13.5px; color: var(--grey); }
.slot .ctrls { display: flex; gap: 4px; }
.slot .ctrls button {
  background: var(--white);
  border: 1px solid var(--grey-light);
  width: 28px; height: 28px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--grey);
}
.slot .ctrls button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.slot .ctrls button.remove:hover { border-color: #B23A3A; color: #B23A3A; }
.slot .ctrls button:disabled { opacity: 0.35; cursor: default; }
.chip:disabled {
  opacity: 0.4;
  cursor: default;
  background: var(--paper);
}
.pool-full-note {
  font-size: 12.5px;
  color: var(--blue);
  background: var(--paper);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  margin-bottom: 10px;
}

/* ---------- Published results ---------- */
.captain-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--blue-deep);
  color: var(--white);
  border-radius: var(--radius-m);
  padding: 20px 22px;
  margin-bottom: 12px;
}
.captain-card .star { color: var(--gold); font-size: 22px; flex: none; }
.captain-card .who { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 1.2rem; }
.captain-card .how { font-size: 12.5px; color: #C7D3EA; margin-top: 2px; }
.captain-card.appointed { background: var(--blue); }
.results-meta {
  font-size: 12.5px;
  color: var(--grey);
  margin-top: 18px;
}