/* ---------------------------------------------------------------------------
   overrides.css — loaded AFTER /site/styles.css on the resident-facing site.

   Two jobs:

   1. WIN AGAINST THE APP'S TAILWIND SHEET. The root layout imports
      `globals.css`, which declares its own `--ink`, `--line`, a body
      background/colour/font and a dark-scheme block on
      `:root:not([data-theme="light"])` (specificity 0,2,0). The campaign
      site's own palette sits on a bare `:root` (0,1,0) and loses — in dark
      mode the site's near-black ink would flip to near-white on the paper
      background and the page would read as blank. Re-declaring the palette at
      (0,3,0) restores it on every scheme without touching globals.css.

   2. EXTEND THE PROTOTYPE'S DESIGN LANGUAGE to the parts of the site that did
      not exist in it: live listening figures, the accountability ledger, the
      question tables, real form states. Everything below is built from the
      same six variables, the same uppercase display type and the same lime
      accent, so a new section is not visibly a different site.
   --------------------------------------------------------------------------- */

:root:root:root {
  --ink: #08242b;
  --bay: #123f48;
  --water: #4d8990;
  --paper: #f3f0e6;
  --white: #fffdf7;
  --lime: #ddff51;
  --line: rgba(8, 36, 43, 0.16);
}

html body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  padding-bottom: 0;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 800px) {
  html body { padding-bottom: 52px; }
}

/* Tailwind preflight strips list styling and heading sizes in @layer base.
   Unlayered rules beat it, but only where a rule exists — these fill the gaps
   the prototype never needed because it had no lists or tables. */
.content ul, .content ol { padding-left: 20px; margin: 18px 0; }
.content li { line-height: 1.7; margin: 8px 0; font-size: 17px; }
.content ul { list-style: disc; }
.content ol { list-style: decimal; }
.section ul, .section ol { padding-left: 20px; }
.section li { line-height: 1.6; margin: 8px 0; }

/* Skip link — invisible until focused. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--lime); color: var(--ink);
  padding: 14px 18px; font-weight: 900; font-size: 11px; letter-spacing: 1px;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- live band */

.databand { background: var(--ink); color: #fff; padding: 10vw 5vw; }
.databand h2 {
  font-size: clamp(42px, 6.5vw, 92px); line-height: .88; letter-spacing: -5px;
  margin: 25px 0; font-weight: 900;
}
.databand h2 i { font-style: normal; color: var(--lime); }
.databand .intro { color: #ffffffcc; max-width: 720px; font-size: 21px; line-height: 1.55; }
.bars { margin-top: 50px; border-top: 4px solid var(--lime); }
.bars .bar {
  display: block; padding: 22px 0; border-bottom: 1px solid #ffffff2e;
}
.bars .bar .barhead {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
}
.bars .bar .rank { color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: 2px; }
.bars .bar .name { display: block;
  font-size: clamp(24px, 3.6vw, 46px); font-weight: 900; letter-spacing: -2px; line-height: 1;
}
.bars .bar .count { display: block;
  font-size: clamp(24px, 3.6vw, 46px); font-weight: 900; letter-spacing: -2px;
  color: var(--lime); white-space: nowrap;
}
.bars .bar .count small { display: block; font-size: 10px; letter-spacing: 2px; color: #ffffff8c; text-align: right; margin-top: 6px; }
.bars .bar .track { display: block; margin-top: 14px; height: 8px; background: #ffffff1f; overflow: hidden; }
.bars .bar .fill { display: block; height: 100%; background: var(--lime); }
.bars .bar .meta { display: block; margin-top: 10px; font-size: 11px; letter-spacing: 1px; color: #ffffff8c; }

.provenance {
  margin-top: 42px; border-left: 3px solid var(--lime); padding-left: 16px;
  font-size: 14px; line-height: 1.6; color: #ffffffcc; max-width: 760px;
}
.provenance strong { color: #fff; }
.provenance a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

.bandactions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }

/* Light variant of the same figures, for use on paper sections. */
.bars.light { border-top-color: var(--ink); }
.bars.light .bar { border-bottom-color: var(--line); }
.bars.light .bar .rank { color: var(--water); }
.bars.light .bar .count { color: var(--ink); }
.bars.light .bar .count small { color: #08242b8c; }
.bars.light .bar .track { background: #08242b1a; }
.bars.light .bar .fill { background: var(--water); }
.bars.light .bar .meta { color: #08242b99; }

/* ------------------------------------------------------- withheld / notes */

.withheld {
  border: 1px dashed #08242b55; padding: 16px 18px; margin: 16px 0;
  font-size: 14px; line-height: 1.6; color: #08242bb3; max-width: 780px;
}
.dark .withheld, .databand .withheld { border-color: #ffffff55; color: #ffffffb3; }

.caveat {
  margin-top: 18px; border-left: 3px solid var(--water); padding-left: 14px;
  font-size: 13px; line-height: 1.6; color: #08242bb3; max-width: 780px;
}
.dark .caveat, .databand .caveat { border-left-color: var(--lime); color: #ffffffb3; }

.notebox {
  border: 1px solid var(--line); background: var(--white); padding: 20px;
  font-size: 14px; line-height: 1.65; max-width: 820px; margin-top: 24px;
}
.notebox strong { font-weight: 900; }

.eyebrow.water { color: var(--water); }

/* ----------------------------------------------------------------- tables */

.tablewrap { overflow-x: auto; margin-top: 30px; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; min-width: 460px; border-collapse: collapse; text-align: left; }
table.data th {
  font-size: 10px; font-weight: 900; letter-spacing: 2px; padding: 12px 12px 12px 0;
  border-bottom: 3px solid var(--ink); white-space: nowrap;
}
table.data td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 900; }
table.data tr:last-child td { border-bottom: 0; }
table.data .big { font-size: 22px; font-weight: 900; letter-spacing: -1px; }
table.data .warnnum { color: #a1441f; }

/* ------------------------------------------------------------ stat blocks */

.statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 45px; }
.statgrid .stat { padding: 28px; background: var(--white); border-top: 4px solid var(--ink); }
.statgrid .stat:nth-child(2) { background: var(--lime); }
.statgrid .stat b {
  display: block; font-size: clamp(44px, 7vw, 78px); font-weight: 900;
  letter-spacing: -4px; line-height: .9; font-variant-numeric: tabular-nums;
}
.statgrid .stat span { display: block; margin-top: 14px; font-size: 14px; line-height: 1.5; max-width: 34ch; }

.tilegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 28px; }
.tilegrid .tile { padding: 20px; background: var(--white); border-top: 3px solid var(--water); }
.tilegrid .tile b { display: block; font-size: 40px; font-weight: 900; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; }
.tilegrid .tile span { display: block; margin-top: 8px; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; }
.tilegrid .tile.ok { border-top-color: #2e6b4e; }
.tilegrid .tile.warn { border-top-color: #a1441f; }
.tilegrid .tile.flat { border-top-color: var(--ink); }

/* ------------------------------------------------------------- settings   */

.settinggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 35px; }
.setting { background: var(--white); padding: 24px; border-top: 4px solid var(--water); }
.setting .settinghead { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.setting h4 { margin: 0; font-size: 15px; font-weight: 900; letter-spacing: -.2px; max-width: 30ch; }
.setting .val { font-size: 30px; font-weight: 900; letter-spacing: -2px; color: var(--water); white-space: nowrap; }
.setting p { margin: 12px 0 0; font-size: 14px; line-height: 1.55; }
.setting p.risk { color: #08242bab; }
.setting p.risk b { color: var(--ink); }

/* --------------------------------------------------------------- ledger   */

.ledger { margin-top: 45px; display: grid; gap: 10px; }
.entry { background: var(--white); border-top: 4px solid var(--ink); padding: 30px; }
.entry.delivered { border-top-color: #2e6b4e; }
.entry.blocked, .entry.overdue { border-top-color: #a1441f; }
.entry.withdrawn { border-top-color: #6b8087; }
.entry h3 { margin: 0; font-size: clamp(24px, 3vw, 38px); letter-spacing: -2px; line-height: 1.02; max-width: 22ch; }
.entry .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.badge {
  display: inline-block; padding: 7px 11px; font-size: 9px; font-weight: 900;
  letter-spacing: 1.5px; background: var(--ink); color: #fff;
}
.badge.ok { background: #2e6b4e; }
.badge.warn { background: #a1441f; }
.badge.lime { background: var(--lime); color: var(--ink); }
.badge.quiet { background: #08242b1a; color: var(--ink); }
.entry .summary { margin-top: 18px; font-size: 17px; line-height: 1.6; max-width: 68ch; }
.entry .why { margin-top: 20px; background: #e7ede7; padding: 18px; font-size: 14px; line-height: 1.6; }
.entry .why .eyebrow { display: block; margin-bottom: 8px; color: var(--water); }
.entry .dates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.entry .dates div .eyebrow { display: block; color: var(--water); }
.entry .dates div b { display: block; margin-top: 6px; font-size: 15px; font-variant-numeric: tabular-nums; }
.entry .block { margin-top: 24px; }
.entry .block > .eyebrow { display: block; margin-bottom: 12px; color: var(--water); }
.entry .log { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.entry .log li { margin: 0 0 18px; }
.entry .log li:last-child { margin-bottom: 0; }
.entry .log .when { font-size: 10px; font-weight: 900; letter-spacing: 1.5px; color: var(--water); }
.entry .log p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; }
.entry .evidence { list-style: none; margin: 0; padding: 0; }
.entry .evidence li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.entry .evidence li:last-child { border-bottom: 0; }
.entry .evidence .kind { display: inline-block; margin-right: 10px; font-size: 9px; font-weight: 900; letter-spacing: 1.5px; color: var(--water); }
.entry .evidence a { text-decoration: underline; text-underline-offset: 3px; }
.entry .evidence .on { font-variant-numeric: tabular-nums; color: #08242b99; margin-left: 8px; font-size: 13px; }

/* --------------------------------------------------------------- quotes   */

.quote { border-left: 4px solid var(--lime); padding-left: 18px; margin: 24px 0; max-width: 68ch; }
.quote blockquote { margin: 0; font-size: 19px; line-height: 1.55; font-style: italic; }
.quote figcaption { margin-top: 10px; font-size: 11px; font-weight: 900; letter-spacing: 1.5px; color: var(--water); }
.dark .quote figcaption, .databand .quote figcaption { color: var(--lime); }

/* -------------------------------------------------------------- updates   */

.update { border-top: 1px solid var(--line); padding: 26px 0; }
.update:first-child { border-top: 0; padding-top: 0; }
.update h3 { margin: 10px 0 0; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -1.5px; line-height: 1.06; max-width: 26ch; }
.update p { margin: 12px 0 0; font-size: 16px; line-height: 1.65; max-width: 70ch; }

/* ------------------------------------------------------------ issue panel */

.issuepanel { border-top: 1px solid var(--line); padding: 34px 0; }
.issuepanel h3 { margin: 0; font-size: clamp(26px, 3.4vw, 44px); letter-spacing: -2px; line-height: 1; }
.issuepanel .meta { margin-top: 10px; font-size: 12px; font-weight: 900; letter-spacing: 1.5px; color: var(--water); font-variant-numeric: tabular-nums; }
.issuepanel .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 26px; }
.issuepanel .cols > div > .eyebrow { display: block; margin-bottom: 14px; color: var(--water); }
.hoodbars { list-style: none; margin: 0; padding: 0; }
.hoodbars li { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.hoodbars .who { width: 40%; flex: 0 0 auto; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoodbars .track { flex: 1; height: 8px; background: #08242b1a; overflow: hidden; }
.hoodbars .fill { display: block; height: 100%; background: var(--water); }
.hoodbars .n { width: 34px; flex: 0 0 auto; text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; font-size: 13px; }

/* ----------------------------------------------------------------- forms  */

/* The prototype's `.form` is a two-column split panel. These add the states a
   real submission needs: a select, a checkbox, an error, a pending button and
   a genuine confirmation. */
.form select {
  border: 0; border-bottom: 1px solid #9aa8a5; outline: 0;
  padding: 12px 22px 12px 0; border-radius: 0; color: inherit;
  -webkit-appearance: none; appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2308242b' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px 8px;
}
.form .hint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #08242b9e; }
.form .consent {
  display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0;
  font-size: 13px; line-height: 1.45; font-weight: 400; letter-spacing: 0;
  text-transform: none; cursor: pointer;
}
.form .consent input {
  width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px;
  padding: 0; border: 0; border-bottom: 0; border-radius: 0;
  -webkit-appearance: auto; appearance: auto; accent-color: var(--ink);
}
/* A group of radios, for a question where every option changes what happens
   next — so all of them are readable at once rather than hidden in a select. */
.form .label-ish {
  display: block; margin: 22px 0 6px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600; color: var(--ink);
}
.form .choices { display: flex; flex-direction: column; gap: 2px; }
.form .choices .consent { margin: 8px 0 0; }
.form .choices .consent input { border-radius: 50%; }
.form .choice-hint {
  display: block; font-style: normal; font-size: 12px; line-height: 1.4;
  color: #08242bab; margin-top: 2px;
}
.form .hint {
  margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #08242bab;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.form button[disabled] { opacity: .55; cursor: progress; }
.form .formerror {
  margin-top: 20px; background: #ffe4df; border-left: 4px solid #b63424;
  padding: 14px; font-size: 14px; line-height: 1.5;
}
.form .legal { margin: 22px 0 0; font-size: 11px; line-height: 1.6; color: #08242b9e; }
.form .legal a { text-decoration: underline; text-underline-offset: 3px; }

/* Honeypot: off-screen, not display:none, and never reachable by keyboard or
   a screen reader. */
.hp {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.thanks { padding: 0; }
.thanks .eyebrow { color: var(--water); }
.thanks h2 { font-size: clamp(44px, 6vw, 84px); font-weight: 900; letter-spacing: -5px; line-height: .85; margin: 18px 0 0; }
.thanks p { margin: 20px 0 0; font-size: 17px; line-height: 1.6; max-width: 46ch; }
.thanks .next { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.thanks .next a {
  display: inline-block; padding: 14px 18px; border: 1px solid var(--ink);
  border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: 1px;
}
.thanks .next a:first-child { background: var(--lime); border-color: var(--lime); }

/* A standalone form on a paper page (get involved, notify me, contact). */
.panelform { max-width: 760px; margin: 45px auto 0; background: var(--white); padding: 45px; }
.panelform h3 { margin: 12px 0 0; font-size: clamp(30px, 4vw, 52px); letter-spacing: -3px; line-height: .95; }
.panelform > p { font-size: 16px; line-height: 1.6; max-width: 60ch; }
.panelform .form { padding: 0; background: transparent; }

/* --------------------------------------------------------------- donate   */

.rules { list-style: none; margin: 30px 0 0; padding: 0; border-top: 4px solid var(--ink); }
.rules li {
  padding: 22px 0; border-bottom: 1px solid var(--line);
  display: flex; gap: 22px; align-items: flex-start;
}
.rules li b { font-size: clamp(20px, 2.4vw, 30px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.05; flex: 0 0 42%; max-width: 42%; }
.rules li span { font-size: 15px; line-height: 1.6; }

.giveways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 40px; }
.giveway { background: var(--white); padding: 30px; border-top: 4px solid var(--water); }
.giveway:nth-child(2) { background: var(--lime); border-top-color: var(--ink); }
.giveway h3 { margin: 14px 0 0; font-size: clamp(26px, 3vw, 40px); letter-spacing: -2px; line-height: 1; }
.giveway p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; }

.statusbox {
  background: var(--ink); color: #fff; padding: 34px; margin-top: 40px;
  border-left: 8px solid var(--lime);
}
.statusbox .eyebrow { color: var(--lime); }
.statusbox h3 { margin: 14px 0 0; font-size: clamp(28px, 4vw, 52px); letter-spacing: -3px; line-height: .95; }
.statusbox p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; max-width: 62ch; color: #ffffffd6; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 800px) {
  .statgrid, .settinggrid, .giveways, .issuepanel .cols { grid-template-columns: 1fr; }
  .issuepanel .cols { gap: 28px; }
  .tilegrid { grid-template-columns: repeat(2, 1fr); }
  .entry { padding: 24px 20px; }
  .entry .dates { grid-template-columns: 1fr 1fr; }
  .panelform { padding: 28px 20px; }
  .rules li { flex-direction: column; gap: 10px; }
  .rules li b { flex: none; max-width: none; }
  .databand { padding-top: 90px; padding-bottom: 90px; }
  .bars .bar .barhead { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bars .bar .count small { text-align: left; }
}

/* Footer route row — the prototype's footer had no links at all. */
.footlinks {
  border-top: 1px solid #ffffff33; padding-top: 20px; margin-bottom: 26px;
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  font-size: 9px; font-weight: 900; letter-spacing: 1px;
}
.footlinks a { text-decoration: underline; text-underline-offset: 4px; }
.footlinks a:hover { color: var(--lime); }

/* `.btn` is drawn for a dark ground. These are the grounds the prototype never
   put a button on. */
.showwork .btn, .content .btn, .paper .btn { border-color: var(--ink); color: var(--ink); }
.showwork .btn.primary, .content .btn.primary {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.showwork .btn.primary:hover, .content .btn.primary:hover { background: var(--bay); }
.content p .btn { margin-top: 10px; }

/* --------------------------------------------------- meet / invite form   */

/* v12's `.event-form` styles every input as an underlined field and every
   label as a 10px uppercase micro-label. These are the states a real
   submission adds on top: a consent checkbox that still looks like a
   checkbox, an error, and a pending button. */
.event-form .consent {
  display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 0;
  font-size: 13px; line-height: 1.45; font-weight: 400; letter-spacing: 0;
  text-transform: none; cursor: pointer;
}
.event-form .consent input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px;
  padding: 0; border: 0; border-bottom: 0; border-radius: 0;
  background: transparent; -webkit-appearance: auto; appearance: auto;
  accent-color: var(--ink);
}
.event-form .formerror {
  margin-top: 22px; background: #ffe4df; border-left: 4px solid #b63424;
  padding: 14px; font-size: 14px; line-height: 1.5;
}
.event-form button[disabled] { opacity: .55; cursor: progress; }
.event-form .thanks { padding: 0; }

/* The invite panel sits on the water-blue band, so the confirmation that
   replaces the form keeps the form's own paper panel rather than inheriting
   white-on-blue. */
.invite-form-wrap .event-form .thanks h2 { color: var(--ink); }
.invite-form-wrap .event-form .thanks p { max-width: 54ch; }

/* ---------------------------------------------------------------- the song */
/* A control that sits out of the way and is never a trap: play or pause, mute,
   and stop entirely. On phones it rides above the fixed action bar rather than
   under it. */
.song{
  position:fixed; z-index:46; left:14px; bottom:14px;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  font-family:Arial,Helvetica,sans-serif;
}
.song-bar{
  display:flex; align-items:stretch; gap:1px;
  background:var(--ink); border:1px solid rgba(243,240,230,.18);
  box-shadow:0 10px 34px rgba(8,36,43,.45);
}

/* The offer: a bubble that mentions the song exists, rather than a track that
   starts playing at somebody who came to read about roads. */
.song-offer{
  position:relative; max-width:260px;
  background:var(--white,#fffdf7); color:var(--ink);
  border:1px solid rgba(8,36,43,.14); border-radius:14px;
  box-shadow:0 12px 34px rgba(8,36,43,.28);
  padding:14px 34px 12px 14px;
  animation:songOffer .32s cubic-bezier(.16,1,.3,1) both;
}
/* The tail, pointing down at the button it belongs to. */
.song-offer::after{
  content:""; position:absolute; left:20px; bottom:-7px;
  width:12px; height:12px; background:var(--white,#fffdf7);
  border-right:1px solid rgba(8,36,43,.14); border-bottom:1px solid rgba(8,36,43,.14);
  transform:rotate(45deg);
}
.song-offer-text{
  margin:0 0 10px; font-size:13.5px; line-height:1.45; font-weight:600;
  letter-spacing:0; text-transform:none;
}
.song-offer-actions{ display:flex; gap:8px; }
.song-offer-yes,.song-offer-no{
  appearance:none; cursor:pointer; border-radius:999px;
  padding:7px 13px; font-size:11px; font-weight:900; letter-spacing:1.2px;
  text-transform:uppercase; line-height:1; transition:background .15s,color .15s;
}
.song-offer-yes{ background:var(--ink); color:var(--lime); border:1px solid var(--ink); }
.song-offer-yes:hover{ background:var(--lime); color:var(--ink); }
.song-offer-no{ background:transparent; color:#08242b9e; border:1px solid rgba(8,36,43,.2); }
.song-offer-no:hover{ color:var(--ink); border-color:var(--ink); }
.song-offer-close{
  position:absolute; top:8px; right:8px; appearance:none; border:0; cursor:pointer;
  background:transparent; color:#08242b7a; padding:4px; line-height:0; border-radius:6px;
}
.song-offer-close:hover{ color:var(--ink); }
.song-offer-yes:focus-visible,.song-offer-no:focus-visible,.song-offer-close:focus-visible{
  outline:3px solid var(--lime); outline-offset:2px;
}
@keyframes songOffer{
  from{ opacity:0; transform:translateY(6px) scale(.97); }
  to  { opacity:1; transform:none; }
}
@media(prefers-reduced-motion:reduce){ .song-offer{ animation:none; } }
.song-btn{
  appearance:none; border:0; cursor:pointer;
  background:var(--ink); color:var(--paper,#f3f0e6);
  display:flex; align-items:center; gap:9px;
  padding:11px 14px; font-size:11px; font-weight:900; letter-spacing:1.4px;
  text-transform:uppercase; line-height:1; transition:background .15s,color .15s;
}
.song-btn:hover{ background:var(--lime); color:var(--ink); }
.song-btn:focus-visible{ outline:3px solid var(--lime); outline-offset:2px; }
.song-play .song-glyph{ display:flex; color:var(--lime); }
.song-play:hover .song-glyph{ color:var(--ink); }
.song-play[aria-pressed="true"] .song-glyph{ color:var(--lime); }
.song-label{ white-space:nowrap; }
.song-icon{ padding:11px 12px; letter-spacing:0; }
.song-icon svg{ display:block; }

@media(max-width:800px){
  .song{ left:10px; right:auto; bottom:72px; }
  .song-label{ display:none; }
  .song-play{ padding:11px 13px; }
  /* The bubble keeps its words on a phone — it is the only thing explaining
     what the button does once the label is hidden. */
  .song-offer{ max-width:calc(100vw - 32px); }
}
@media(max-width:360px){
  .song{ bottom:66px; }
}

/* The waking pulse belonged to autoplay: it marked a track that was already
   running silently, waiting to be let through. Nothing runs unasked now, so
   there is nothing for it to announce. */

/* --------------------------------------------------------------- photographs */
/* The slots were teal gradients waiting for pictures. Now they hold them, and
   the gradient stays underneath as the colour a slow connection sees first. */
.photo img,
.photo-slot img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
.photo-slot{ margin:0; }          /* it is a <figure> now */

/* A caption that reads on any photograph, dark or bright, without a box. */
.photo-slot figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 16px 12px;
  font-size:10px; font-weight:900; letter-spacing:1.6px;
  color:var(--paper,#f3f0e6);
  background:linear-gradient(to top, rgba(8,36,43,.82), rgba(8,36,43,0));
  pointer-events:none;
}

/* The family shot is the one portrait in the set, and it sits in the tallest
   slot. Anchor it high so nobody is cropped at the forehead. */
.photo-slot img[src*="family"]{ object-position:center 22%; }
/* The boys are right of centre in the harbour shot; keep them in frame when
   the slot goes wide and short. */
.photo-slot img[src*="harbour"]{ object-position:58% center; }

/* A wash over every photograph, so five pictures taken on different days in
   different light read as one set and sit inside the site's palette rather
   than beside it. Two layers: a flat teal tint, and a deeper pull at the
   bottom edge that also carries the caption. */
.photo::after,
.photo-slot::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,36,43,.10) 0%, rgba(8,36,43,.34) 100%),
    linear-gradient(0deg, rgba(18,63,72,.30), rgba(18,63,72,.30));
  transition:opacity .45s ease;
}
/* The caption has to sit above the wash. */
.photo-slot figcaption{ z-index:2; }

/* Let a photograph come forward when someone is actually looking at it. */
@media(hover:hover){
  .photo-slot:hover::after{ opacity:.45; }
}

/* ------------------------------------------------------- responsive repairs */

/* The three data tables are each already wrapped in .tablewrap, but the class
   had no rules at all, so on a phone the table simply ran off the side of the
   page. It scrolls inside its own box now, and the page does not. */
.tablewrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.tablewrap > .data{ min-width:520px; }

/* Belt and braces on the horizontal clip. body already has overflow-x:hidden,
   which is what stops the reveal animations' entry transforms from creating a
   sideways scrollbar, but overflow on body alone is unreliable on iOS Safari.
   `clip` rather than `hidden` because it does not create a scroll container,
   so position:sticky keeps working. */
html{ overflow-x:clip; }
body{ overflow-x:clip; }

/* Tap targets. The footer links were 14px tall and the filter pills 17px,
   which is a coin toss with a thumb. Nothing here changes how they look at
   rest, it just gives them something to hit. */
@media(max-width:800px){
  .foot a, .footlinks a, footer a{
    display:inline-block;
    padding-top:9px; padding-bottom:9px;
  }
  .menu{
    min-width:44px; min-height:44px;
    display:grid; place-items:center; padding:0;
  }
  .issue-pill, .topic, .chip, .filters a, .filters button{
    min-height:32px;
    display:inline-flex; align-items:center;
  }
}

/* The wordmark's second line was 7px, which is below the size at which the
   letterforms hold together at all. */
.brandmark small, .logo small, nav small{ font-size:9px !important; letter-spacing:1.6px; }

/* Links inside the data tables are their own row, not words in a sentence, so
   they get something to hit. Inline links inside a paragraph are deliberately
   left alone: padding them out would open up the line spacing of the prose,
   and the accessibility guidance exempts a link that sits inside a sentence. */
.data td a, .data th a{ display:inline-block; padding:6px 0; }

/* ------------------------------------------------- mobile nav and hero crop */
@media(max-width:800px){
  /* The element carrying margin-left:auto is .navlinks, and .navlinks is
     display:none on a phone, so nothing was pushing the right hand side of the
     bar to the right: the logo, DONATE and the menu button simply sat in a row
     from the left with a 30px gap. Move the spacer onto DONATE, which is the
     first thing still visible, and the pair pins to the edge again. */
  nav{ gap:14px; }
  nav .donate{ margin-left:auto; }
  nav .menu{ margin-left:0; margin-right:-4px; }
}

/* Jon stands in the right third of the hero photograph, at about 77% across.
   `cover` on a tall narrow screen shows only a slice of the frame's width, so
   the focal point has to move right as the screen narrows or that slice lands
   on the harbour with the candidate outside it. The Terminals stay behind him
   at every width. */
@media(max-width:900px){
  .hero{ background-position:78% center !important; }
}
@media(max-width:600px){
  .hero{ background-position:82% center !important; }
}
@media(max-width:420px){
  .hero{ background-position:84% center !important; }
}

/* The headline's floor was 58px, set for a desktop clamp, which meant on a
   phone "COLLINGWOOD," was simply wider than the screen and the last letters
   were cut off the right edge. The word has to fit the screen it is on. */
@media(max-width:600px){
  .hero h1, .pagehero h1, .huge{
    font-size:clamp(30px,10.4vw,58px) !important;
    letter-spacing:-2px !important;
  }
}
@media(max-width:380px){
  .hero h1, .pagehero h1, .huge{ letter-spacing:-1.5px !important; }
}

/* On a phone the bottom of the screen is crowded: the hero's two buttons sit
   there, and the fixed Tell Jon / Donate bar sits under them. Left or right,
   a bottom docked control lands on one of them. So on a phone it moves out of
   that band entirely and tucks under the nav, where nothing else lives. */
@media(max-width:800px){
  .song{ left:auto; right:10px; top:88px; bottom:auto; }
}

/* ------------------------------------------------------------------ booking

   The campaign's own calendar, in the shell that used to hold Calendly. The
   shell keeps its 690px minimum on desktop so the section does not resize
   under the visitor as the times load, and drops it on a phone where 690px of
   white is most of a screen.

   Colours are the site's own: lime for the chosen thing, water for the
   secondary type, ink for everything with weight. A booking button that
   looked like a booking button from somewhere else would be the one control
   on the site that was not the campaign's.                                  */

.calendly-shell{ display:flex; flex-direction:column; }
.booking-panel{
  padding:44px 40px;
  display:flex;
  flex-direction:column;
  min-height:0;
  flex:1;
}
.booking-panel .eyebrow{ color:var(--water); }
.booking-panel h3{
  font-size:clamp(34px,4.2vw,54px);
  font-weight:900; letter-spacing:-3px; line-height:.86;
  margin:14px 0 18px;
}
.booking-panel p{ line-height:1.6; margin:0 0 14px; max-width:46ch; }
.booking-when{ font-size:20px; font-weight:900; letter-spacing:-.4px; }
.booking-note{ font-size:12px; line-height:1.6; opacity:.68; }
.booking-empty{ opacity:.7; }
.booking-error{
  background:#08242b; color:#fff; padding:12px 14px;
  font-size:13px; line-height:1.5; margin:16px 0 0; max-width:none;
}

/* Days: a horizontal strip that scrolls rather than wrapping, because the
   number of open days is not known in advance and a wrapped second row
   pushes the times below the fold. */
.booking-days{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:6px;
  margin:6px 0 20px; scrollbar-width:thin;
}
.booking-day{
  flex:0 0 auto; min-width:92px; min-height:64px;
  padding:12px 14px; cursor:pointer; text-align:left;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  transition:background .18s, border-color .18s, transform .18s;
}
.booking-day b{ display:block; font-size:11px; font-weight:900; letter-spacing:1px; }
.booking-day span{ display:block; margin-top:6px; font-size:15px; font-weight:700; }
.booking-day:hover{ border-color:var(--ink); }
.booking-day.on{ background:var(--ink); border-color:var(--ink); color:#fff; }

.booking-times{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px;
}
.booking-time{
  min-height:48px; padding:13px 10px; cursor:pointer;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  font-weight:800; font-size:13px; letter-spacing:.3px;
  transition:background .18s, border-color .18s;
}
.booking-time:hover{ border-color:var(--ink); }
.booking-time.on{ background:var(--lime); border-color:var(--ink); }

.booking-form{ margin-top:8px; border-top:1px solid var(--line); padding-top:8px; }
.booking-form .field{ display:flex; flex-direction:column; gap:7px; margin-top:15px; }
.booking-form .field label{ font-size:10px; font-weight:900; letter-spacing:1px; }
.booking-form .field input,
.booking-form .field textarea{
  padding:13px; border:1px solid var(--line); background:#fff; width:100%;
}
.booking-form .field textarea{ resize:vertical; min-height:78px; }
.booking-form .help{ font-size:11px; line-height:1.55; opacity:.65; margin:16px 0 0; }
.booking-form .btn{
  margin-top:18px; width:100%; text-align:center; border:0; cursor:pointer;
  background:var(--lime); color:var(--ink); padding:17px;
}
.booking-form .btn[disabled]{ opacity:.55; cursor:default; }

.booking-chosen{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  background:#e5ebe5; padding:13px 15px; margin-top:16px;
}
.booking-chosen span{ font-size:11px; font-weight:900; letter-spacing:1px; opacity:.7; }
.booking-chosen strong{ font-size:19px; letter-spacing:-.4px; }

.booking-manage{ margin-top:18px; }
.booking-manage .btn{ border:1px solid var(--ink); cursor:pointer; background:transparent; }
.booking-manage .btn.primary{ background:var(--lime); border-color:var(--ink); }

@media(max-width:700px){
  .calendly-shell{ min-height:0; }
  .booking-panel{ padding:30px 20px; }
  .booking-times{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); }
}

/* A grid item's default minimum is its content's min-content width, so the
   horizontally scrolling day strip inside the booking panel was pushing the
   whole column wider than a phone screen. `html{overflow-x:clip}` then hid the
   evidence: no scrollbar appeared, and the right-hand third of the form —
   including the confirm button — was simply off the screen and unreachable.
   `minmax(0,1fr)` and an explicit `min-width:0` let the column be narrower
   than its contents so the strip does its own scrolling, which is what it was
   for. */
@media(max-width:900px){
  .booking-wrap{ grid-template-columns:minmax(0,1fr) !important; }
}
.calendly-shell, .booking-panel, .booking-days, .booking-times, .booking-form{
  min-width:0;
  max-width:100%;
}
.booking-form .field input, .booking-form .field textarea{ max-width:100%; }

/* The open mobile menu.

   Two things it was not doing. Its height came from its contents, so it ended
   under the last link and the page showed through beneath it — which reads as
   a menu that failed to load rather than one that is open, now that the page
   behind it no longer scrolls. And the song control sits at z-index 46, one
   above the sheet, so it floated over the links with its own ✕ a few pixels
   from the menu's ✕. Two close buttons that do different things is a trap.

   The nav itself stays at z-index 50, so the hamburger is still on top and
   still closes the menu. */
.mobile.open{
  bottom:0;
  z-index:47;
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* ----------------------------------------------------------------- donating

   The contribution form. Two columns on a desktop, one on a phone, and the
   attestations given room rather than squeezed into fine print — they are the
   part a contributor is actually agreeing to.                              */

.donatewrap{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:5vw; align-items:start; max-width:1400px; margin:auto;
}
.donatecopy h2{
  font-size:clamp(38px,5.2vw,72px); font-weight:900;
  letter-spacing:-4px; line-height:.86; margin:16px 0 20px;
}
.donatecopy h2 i{ font-style:normal; color:var(--water); }
.donatecopy p{ font-size:18px; line-height:1.6; max-width:46ch; }
.donatecopy p.small{ font-size:14px; opacity:.72; margin-top:14px; }

.donateform{
  background:var(--white); border:1px solid var(--line);
  padding:38px 34px; box-shadow:0 24px 70px rgba(8,36,43,.09);
  min-width:0; max-width:100%;
}
.donateform .amounts{ margin:10px 0 4px; }
.donateform .amounts button{ cursor:pointer; min-height:52px; }
.donateform .amounts button.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.donateform .field input{ width:100%; }
.donateform .help{ font-size:12px; line-height:1.6; opacity:.68; margin:14px 0 0; }
.donateform .formerror{
  background:var(--ink); color:#fff; padding:13px 15px;
  font-size:13px; line-height:1.55; margin:18px 0 0;
}
.donateform > .btn.primary{
  margin-top:20px; width:100%; text-align:center; border:0; cursor:pointer;
  background:var(--lime); color:var(--ink); padding:18px;
}
.donateform > .btn.primary[disabled]{ opacity:.55; cursor:default; }

/* The three attestations. Deliberately not small print: a contributor is
   confirming things that carry legal weight, so they get real line height and
   a target big enough to hit on a phone. */
.attest{
  margin-top:22px; border-top:1px solid var(--line); padding-top:18px;
  display:flex; flex-direction:column; gap:14px;
}
.attest label{
  display:flex; gap:11px; align-items:flex-start;
  font-size:13.5px; line-height:1.55; cursor:pointer;
}
.attest input[type="checkbox"]{
  flex:0 0 auto; width:20px; height:20px; margin-top:1px; accent-color:var(--ink);
}

@media(max-width:900px){
  .donatewrap{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .donateform{ padding:26px 20px; }
  .donateform .amounts{ grid-template-columns:repeat(3,1fr); }
}


/* On the narrowest screens the song control sat at top-right, which is exactly
   where the crop puts Jon's head — so the one thing the hero exists to show
   was behind a widget. Below 420px it moves to the left, over sky and the
   Terminals, where it covers nothing that matters. The headline starts lower
   than the control ends, so they do not meet. */
@media(max-width:420px){
  .song{ left:10px; right:auto; top:88px; bottom:auto; }
}