/* 2026 campaign site.

   PALETTE CHANGED 2026-09-21 (Craig, from Phillipa's T-shirt and letterhead
   artwork): teal #00B4CE -> #20B2AA, navy #1B1464 -> #634073, a purple. The
   2022 Hawthorn colours are gone, and with them the recognition equity this
   file used to argue for keeping them - a deliberate campaign decision, not a
   drift. site.json's `brand` carries the same two values for anything that
   reads them from data.

   THE TWO DARKER SHADES ARE DERIVED, NOT PICKED BY EYE. --teal-dark is what
   links and small bold labels use on white, so it has to clear 4.5:1 for
   contrast; #20B2AA itself is 2.6:1 and would fail on every link on the site.
   --navy-light is only ever the far end of a gradient behind white text. */

:root {
  --teal: #20B2AA;
  --teal-dark: #147a74;
  --navy: #634073;
  --navy-light: #86569b;
  /* Teal for TEXT ON THE PURPLE: the brand teal is 3.2:1 on #634073, which
     fails for the hero kicker, the footer links and anything else small and
     teal on a dark panel. The old palette got away with it at 6.3:1. This is
     the same hue lifted until it clears 4.5:1 on the purple - use it whenever
     teal type sits on --navy, and --teal itself for borders, rules and fills,
     where contrast rules do not apply. */
  --teal-on-navy: #26d5cb;
  --ink: #16181d;
  --muted: #5b6270;
  --line: #e2e5ea;
  --paper: #ffffff;
  --grey: #f5f7f9;
  --warn-bg: #fff8e6;
  --warn-line: #e0b400;
  --draft-bg: #fdecef;
  --draft-ink: #a3123a;
  --wrap: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.wrap.narrow { max-width: 44rem; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .85rem; }
/* An h2 that FOLLOWS something needs air above it; one that opens a section
   does not, and giving it any would push every band's heading off its own top
   padding. Craig, 2026-09-23, after the contact and press pages read as one
   run-on column. */
.wrap > h2:not(:first-child),
.prose h2:not(:first-child) { margin-top: .625rem; }
h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
p { margin: 0 0 1rem; }
a { color: var(--teal-dark); }

/* ---------- banners ---------- */

.draft-banner {
  background: var(--draft-ink); color: #fff; text-align: center;
  padding: .7rem 1.25rem; font-size: .9rem; line-height: 1.45;
}

.draft-flag {
  display: inline-block; background: var(--draft-bg); color: var(--draft-ink);
  border-left: 3px solid var(--draft-ink); padding: .35rem .6rem;
  font-size: .9rem; border-radius: 0 3px 3px 0;
}

.verify-note {
  background: var(--warn-bg); border-left: 4px solid var(--warn-line);
  padding: .85rem 1rem; font-size: .88rem; line-height: 1.55;
  color: #5c4700; border-radius: 0 4px 4px 0; margin-top: 1.5rem;
}
.verify-note code { background: rgba(0,0,0,.07); padding: .1em .35em; border-radius: 3px; }

/* ---------- header ---------- */

.site-header { background: var(--navy); color: #fff; }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem;
}
.brand { text-decoration: none; color: #fff; line-height: 1.15; }
.brand-name { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.brand-sub { display: block; font-size: .78rem; color: var(--teal-on-navy); text-transform: uppercase; letter-spacing: .06em; }

.site-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }
.site-nav a {
  color: rgba(255,255,255,.88); text-decoration: none; font-weight: 600;
  font-size: .95rem; padding: .35rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a:focus { color: #fff; border-bottom-color: var(--teal); }
.site-nav a.active { color: #fff; border-bottom-color: var(--teal); }

/* ---------- hero ---------- */

.hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff; padding: clamp(3rem, 8vw, 5.5rem) 0;
}
.kicker {
  text-transform: uppercase; letter-spacing: .09em; font-size: .78rem;
  font-weight: 700; color: var(--teal-on-navy); margin-bottom: .75rem;
}
.hero .lede { font-size: 1.2rem; max-width: 42rem; color: rgba(255,255,255,.92); }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 46rem; }
.hero .lede .draft-flag { display: block; margin-bottom: .6rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.btn {
  display: inline-block; padding: .8rem 1.5rem; border-radius: 4px;
  font-weight: 700; text-decoration: none; font-size: 1rem; border: 2px solid transparent;
}
.btn-primary { background: var(--teal); color: #05202a; }
.btn-primary:hover { background: #22c8e0; }
.btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* ---------- bands ---------- */

.band { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.band-grey { background: var(--grey); }
.band-teal { background: var(--teal); color: #05202a; }
.band-teal a { color: #05202a; }
.band-teal .verify-note { background: rgba(255,255,255,.85); }
.band-lede { font-size: 1.1rem; max-width: 44rem; }

.page-head { background: var(--grey); padding: clamp(2rem, 5vw, 3.5rem) 0; border-bottom: 1px solid var(--line); }

.priorities { max-width: 46rem; padding-left: 1.2rem; }
.priorities li { margin-bottom: .5rem; }

/* ---------- ballot diagram ---------- */

.ballot {
  background: #fff; border: 2px solid var(--navy); border-radius: 6px;
  padding: 1.25rem; max-width: 34rem; margin: 1.5rem 0 0;
}
.ballot-head {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--muted); margin-bottom: .75rem;
}
.ballot-boxes { display: flex; gap: .5rem; flex-wrap: wrap; }
.bx {
  width: 3rem; height: 3rem; border: 2px solid var(--navy); border-radius: 3px;
  display: grid; place-items: center; background: #fff;
}
.bx .num { font-size: 1.35rem; font-weight: 800; color: var(--navy); }
.ballot-note { margin: .9rem 0 0; color: var(--ink); }

/* ---------- cards ---------- */

.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.card { border: 1px solid var(--line); border-radius: 6px; padding: 1.25rem; background: #fff; }
.card-district {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--teal-dark); margin: 0 0 .3rem;
}
.card-blurb { color: var(--muted); font-size: .95rem; }
.card-link { font-weight: 600; text-decoration: none; font-size: .92rem; }
.card-link:hover { text-decoration: underline; }

/* ---------- events ---------- */

.events { display: grid; gap: 1rem; }
/* The past section ships in every build and is hidden when empty, so
   events.js can fill it from the feed without a rebuild. `hidden`
   alone would be enough on a bare section, but stating it means a
   later display rule on .band cannot quietly un-hide it. */
#events-past-section[hidden] { display: none; }
.event {
  display: flex; gap: 1.25rem; border: 1px solid var(--line);
  border-radius: 6px; padding: 1.25rem; background: #fff;
}
.event-unconfirmed { border-style: dashed; opacity: .8; }
.event-date {
  flex: 0 0 4rem; text-align: center; background: var(--navy); color: #fff;
  border-radius: 4px; padding: .6rem .3rem; height: fit-content;
}
.event-date .day { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.event-date .mon { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.event-body { flex: 1 1 auto; }
.event-where { color: var(--muted); font-size: .92rem; margin-bottom: .5rem; }
.empty { color: var(--muted); font-style: italic; }

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

.invite-form { display: grid; gap: .9rem; max-width: 34rem; margin-top: 1.25rem; }
.invite-form label { display: grid; gap: .3rem; font-weight: 600; font-size: .92rem; }
.invite-form input, .invite-form textarea {
  font: inherit; padding: .6rem .7rem; border: 1px solid var(--navy);
  border-radius: 4px; background: #fff; width: 100%;
}
.invite-form button { justify-self: start; cursor: pointer; }

.amounts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.amt {
  border: 2px solid var(--navy); border-radius: 4px; padding: .55rem 1.1rem;
  font-weight: 700; color: var(--navy);
}

/* ---------- carried-over content ---------- */

.review-flag {
  background: var(--draft-bg); border-left: 4px solid var(--draft-ink);
  color: var(--draft-ink); padding: .7rem .9rem; font-size: .87rem;
  line-height: 1.55; border-radius: 0 4px 4px 0; margin: .75rem 0 0;
}

.prose p { max-width: 40rem; }

.policy-block { margin-bottom: 2.25rem; }
.policy-block h2 { color: var(--navy); }
.policy-block ul { padding-left: 1.2rem; margin: 0 0 .75rem; }
.policy-block li { margin-bottom: .45rem; }

.plan-footer { color: var(--muted); font-style: italic; font-size: .93rem; }

/* ---------- FAQs ---------- */

.faq { border-bottom: 1px solid var(--line); padding: .35rem 0; }
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 1.05rem; padding: .85rem 0;
  list-style: none; display: flex; gap: .6rem; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; color: var(--teal-dark); font-weight: 800; flex: 0 0 auto;
}
.faq[open] summary::before { content: "−"; }
.faq summary:hover { color: var(--teal-dark); }
.faq-body { padding: 0 0 1rem 1.3rem; }
.faq-body p { max-width: 40rem; }

/* ---------- district lookup ---------- */

.district-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0 1.5rem; }
.district-tag {
  background: #fff; border: 1px solid var(--navy); color: var(--navy);
  border-radius: 999px; padding: .3rem .85rem; font-size: .88rem; font-weight: 600;
}

.lookup { margin-top: 1.5rem; }
.lookup label { display: block; margin-bottom: .4rem; }
.lookup input {
  font: inherit; width: 100%; max-width: 26rem; padding: .7rem .8rem;
  border: 2px solid var(--navy); border-radius: 4px;
}
.lookup-help { font-size: .85rem; color: var(--muted); margin: .4rem 0 0; }
.lookup-result { margin-top: 1rem; }
.lookup-hit {
  background: #fff; border-left: 4px solid var(--teal);
  padding: .7rem .9rem; margin: 0 0 .5rem; border-radius: 0 4px 4px 0;
}
.lookup-split { display: block; font-size: .85rem; color: var(--muted); margin-top: .3rem; }
.lookup-miss { color: var(--muted); }
.lookup-official { font-size: .9rem; color: var(--muted); margin-top: 1.5rem; }

/* ---------- map ---------- */

.district-map {
  height: clamp(24rem, 60vh, 34rem); width: 100%;
  border: 1px solid var(--line); border-radius: 6px; background: var(--grey);
}
.district-map[hidden] { display: none; }
.district-map .leaflet-interactive:focus { outline: 3px solid var(--navy); outline-offset: 1px; }
.map-hint { font-weight: 600; color: var(--navy); min-height: 1.5em; margin-top: .6rem; }
.leaflet-control-attribution { font-size: .7rem; }
.leaflet-container { font: inherit; }

.card-empty { border-style: dashed; background: transparent; }
.card-empty h3 { color: var(--muted); font-weight: 600; font-size: 1rem; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--navy); color: rgba(255,255,255,.75);
  padding: 2.5rem 0; margin-top: 0; font-size: .9rem;
}
.site-footer a { color: var(--teal-on-navy); }
.auth {
  color: #fff; font-weight: 600; border-left: 3px solid var(--teal);
  padding-left: .8rem; margin-bottom: 1rem;
}
.footer-meta { margin-bottom: .5rem; }

@media (max-width: 34rem) {
  .event { flex-direction: column; gap: .75rem; }
  .event-date { flex: none; width: 3.5rem; }
}

/* ==========================================================================
   The three-page public site (/live/)
   The logo lockup carries its own navy and teal on a light ground, so this
   header is white - dropping it on the navy header muddies both.
   ========================================================================== */

.preview-bar {
  background: var(--draft-ink); color: #fff; text-align: center;
  font-size: .82rem; padding: .5rem 1rem; line-height: 1.4;
}

.live-header { background: var(--paper); border-bottom: 3px solid var(--teal); }
.live-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1rem;
}
.live-brand { display: block; line-height: 0; }
/* Vector now, so it can be sized freely. The 2026 lockup drops the photo the
   composite PNG carried, so it is squarer (330x127, ratio 2.6) than the old
   484x132 export - hence a narrower max-width for the same header height. */
.live-brand img { width: 100%; max-width: 265px; height: auto; }

.live-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.live-nav a {
  color: var(--navy); text-decoration: none; font-weight: 700;
  font-size: .95rem; padding-bottom: .2rem;
  border-bottom: 3px solid transparent;
}
.live-nav a:hover, .live-nav a:focus, .live-nav a.active {
  color: var(--navy); border-bottom-color: var(--teal);
}

.live-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff; padding: 3.5rem 0;
}
.live-hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2.5rem; align-items: center;
}
.live-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 1rem;
}
.live-hero .lede { color: rgba(255,255,255,.92); max-width: none; }
.live-hero .kicker {
  text-transform: uppercase; letter-spacing: .08em; font-size: .78rem;
  font-weight: 700; color: var(--teal-on-navy); margin-bottom: .75rem;
}

.video-block { margin: 0; }
.video-block video {
  width: 100%; height: auto; display: block; border-radius: 6px;
  background: #000; box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.video-block figcaption {
  font-size: .8rem; color: rgba(255,255,255,.75); margin-top: .6rem;
}

@media (max-width: 800px) {
  .live-hero-grid { grid-template-columns: 1fr; }
  .live-hero { padding: 2.5rem 0; }
}

.page-head { background: var(--grey); padding: 2.5rem 0 2rem; }
.page-head h1 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin: 0 0 .75rem;
  color: var(--navy); letter-spacing: -.02em;
}

.prose p { margin: 0 0 1.15rem; font-size: 1.05rem; line-height: 1.65; }
.prose p:last-child { margin-bottom: 0; }

.district-grid {
  list-style: none; padding: 0; margin: 1.5rem 0 1rem;
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.district-tile {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 4px solid var(--teal); border-radius: 4px;
  padding: .7rem .9rem; font-weight: 600; color: var(--navy);
}
.muted-note { font-size: .9rem; color: var(--muted); }

/* ==========================================================================
   v2 - the approval build (/v2/)
   The public site plus the donate page, the lockup moved to the top right, a
   standing Donate button, and the three flags in the footer.
   ========================================================================== */

/* Header. DOM order is brand, nav, button; `order` moves the brand right on
   wide viewports so the markup can keep the campaign's name first for screen
   readers and for the stacked phone layout. */
/* Self-contained rather than leaning on .live-header-inner, so the v2 header
   cannot be broken by a change to the public site's header. */
.v2-header-inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1rem 1.75rem; padding-top: 1rem; padding-bottom: 1rem;
}
.v2-nav { order: 1; margin-right: auto; }
.v2-brand { order: 3; }
.v2-brand img { max-width: 300px; }

.btn-donate-top {
  order: 2;
  display: inline-block; background: var(--teal); color: #05202a;
  font-weight: 800; text-decoration: none; text-transform: uppercase;
  letter-spacing: .05em; font-size: .95rem;
  padding: .75rem 1.6rem; border-radius: 4px;
  border: 2px solid transparent;
}
.btn-donate-top:hover, .btn-donate-top:focus {
  background: var(--navy); color: #fff;
}

@media (max-width: 60rem) {
  /* Stacked: lockup on its own line, then the nav, then a full-width Donate.
     The button is the one thing that must stay thumb-sized on a phone. */
  .v2-header-inner { flex-direction: column; align-items: stretch; }
  .v2-brand { order: 0; align-self: center; }
  .v2-nav { order: 1; margin-right: 0; justify-content: center; }
  .btn-donate-top { order: 2; text-align: center; }
}

/* ---------- about page portrait ---------- */

/* Text first in the DOM so the page still leads with the heading when the
   layout collapses, and on a phone the portrait sits under the lede rather
   than pushing the h1 below the fold. */
.about-head {
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
}
.about-head-text { flex: 1 1 22rem; min-width: 0; }
.about-portrait {
  flex: 0 0 auto;
  width: clamp(9rem, 22vw, 14rem); height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 6px; display: block;
  /* Crop the square from the TOP of the frame, not the middle. The portrait
     is 3:4, so a centred square crop lands on the chest and cuts the head off
     completely. From the top it is a head-and-shoulders shot, which is what a
     candidate portrait is for. */
  object-position: center top;
  /* Teal edge rather than a drop shadow: the page-head sits on the grey band
     and a shadow there reads as a rendering artefact. */
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--teal);
}

@media (max-width: 44rem) {
  .about-head { flex-direction: column; align-items: flex-start; }
  .about-portrait { width: 11rem; align-self: center; }
}

/* ---------- footer nav ---------- */

/* The header nav plus Donate, repeated at the foot of the page. On a phone the
   v2 header stacks to full height, so by the time someone has read a page the
   nav is a long way back up; this is the way on to the next page. */
.footer-nav {
  display: flex; flex-wrap: wrap; gap: .6rem 1.75rem;
  padding-bottom: 1.5rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.footer-nav a {
  color: #fff; text-decoration: none; font-weight: 600;
  /* Underline on hover only, but reserve the space always, so the row does
     not shift by a pixel as the pointer crosses it. */
  border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.footer-nav a:hover, .footer-nav a:focus { border-bottom-color: var(--teal); }
.footer-nav a[aria-current="page"] { color: var(--teal-on-navy); }

/* ---------- footer flags ---------- */

.footer-flags {
  display: flex; gap: .7rem; align-items: center;
  margin: 1.5rem 0 .6rem;
}
/* The hairline matters: the Australian flag's navy field is very close to the
   footer's navy and would otherwise dissolve into it. */
.footer-flags img {
  width: 34px; height: 23px; display: block; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35);
}
.footer-flags-note {
  font-size: .82rem; color: rgba(255,255,255,.65); margin: 0; max-width: 40rem;
}

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

/* Two columns, the case on the left and the panel on the right - the same
   arrangement the 2022 Hawthorn page used, and it worked. */
.donate-grid {
  display: grid; grid-template-columns: 1fr minmax(20rem, 24rem);
  gap: 3rem; align-items: start;
}
@media (max-width: 62rem) {
  .donate-grid { grid-template-columns: 1fr; gap: 2rem; }
  /* Panel first on a phone: someone who arrived to give should not have to
     scroll past the argument for giving. */
  .donate-panel { order: -1; }
}

.donate-copy h2 { color: var(--navy); margin-top: 2rem; }

/* The two fine-print headings ("$5,190 Maximum donation allowed", "Donations
   can be tax deductible"). Real h2s, because they head real sections of the
   left column - but sized to sit with the small print underneath them rather
   than compete with "What your donation buys". */
.donate-copy h2.note-head {
  font-size: 1.02rem; margin: 1.9rem 0 .35rem;
}
.donate-copy h2.note-head + .legal-note,
.donate-copy h2.note-head + .muted-note { margin-top: 0; }

/* The ask under the ladder. Not muted: it is an invitation to talk to the
   campaign, and greying it out would file it with the fine print. */
.contact-note { margin: 1.25rem 0 0; }

.ask-ladder { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.ask-ladder li {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.ask-ladder li:last-child { border-bottom: 0; }
.ask-amt {
  flex: 0 0 5.5rem; font-weight: 800; color: var(--teal-dark);
  font-size: 1.05rem;
}
.ask-buys { color: var(--ink); }

.donate-panel {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 1.5rem; box-shadow: 0 6px 24px rgba(99,64,115,.10);
  position: sticky; top: 1.5rem;
}
@media (max-width: 62rem) { .donate-panel { position: static; } }

.goal-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .5rem;
}
.goal-amount { font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.goal-pct { font-weight: 700; color: var(--teal-dark); }

.progress {
  height: .7rem; background: var(--grey); border-radius: 999px;
  overflow: hidden; margin-bottom: 1.5rem;
  box-shadow: inset 0 0 0 1px var(--line);
}
.progress-bar { height: 100%; background: var(--teal); border-radius: 999px; }

.panel-label {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--muted); margin: 0 0 .6rem;
}

.amount-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  margin-bottom: .5rem;
}
.interval-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1.25rem; }

/* Radio-as-button. The real input stays in the DOM and keeps keyboard and
   screen-reader behaviour; only its appearance is replaced. */
.amt-opt { display: block; cursor: pointer; }
.amt-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.amt-opt span {
  display: block; text-align: center; padding: .65rem .4rem;
  border: 2px solid var(--line); border-radius: 4px;
  font-weight: 700; color: var(--navy); font-size: .95rem;
  transition: background .12s, border-color .12s, color .12s;
}
.amt-opt:hover span { border-color: var(--teal); }
.amt-opt input:checked + span {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
/* Focus has to be visible on the span, because the input it belongs to is
   visually hidden - without this the whole picker is unusable by keyboard. */
.amt-opt input:focus-visible + span {
  outline: 3px solid var(--teal); outline-offset: 2px;
}

.btn-block { display: block; width: 100%; text-align: center; border: 0; font-size: 1.05rem; cursor: pointer; }
.btn-block:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }

.panel-foot { font-size: .8rem; color: var(--muted); margin: .8rem 0 0; }

/* ---------- the supporter feed ---------- */

.supporter-feed {
  margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.supporter-feed-head {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--muted); margin: 0 0 .5rem;
}
.supporter-feed-line {
  margin: 0; font-weight: 600; color: var(--navy); font-size: .98rem;
  min-height: 1.5rem;
  opacity: 0; transform: translateY(.35rem);
  transition: opacity .4s ease, transform .4s ease;
}
.supporter-feed-line.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .supporter-feed-line { transition: none; transform: none; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- donate: link-routed button ---------- */

/* The Donate control is an <a>, not a <button> - there is no server to submit
   to. When no Payment Link exists for the chosen combination it loses its
   href, so it must stop looking clickable without moving anything. */
.btn.is-disabled,
a.btn[aria-disabled="true"] {
  background: var(--line); color: var(--muted); cursor: not-allowed;
  pointer-events: none;
}

.donate-route-note {
  font-size: .88rem; line-height: 1.45; color: var(--navy);
  background: #fff6e5; border-left: 3px solid #e0a33a;
  padding: .6rem .75rem; margin: 0 0 .9rem; border-radius: 3px;
}

/* The no-JavaScript ladder. Every rung as a plain link, so the page is fully
   usable rather than stuck on whichever href was rendered as the default. */
.link-ladder { list-style: none; margin: .5rem 0 0; padding: 0; }
.link-ladder li { border-bottom: 1px solid var(--line); }
.link-ladder li:last-child { border-bottom: 0; }
.link-ladder a {
  display: block; padding: .6rem .2rem; font-weight: 600;
  color: var(--navy); text-decoration: none;
}
.link-ladder a:hover, .link-ladder a:focus { color: var(--teal-dark); }

/* Verified legal figures - a statement of fact, not a warning. Bordered so it
   reads as the fine print it is, without the alarm colouring of .verify-note. */
.legal-note {
  font-size: .88rem; line-height: 1.5; color: var(--muted);
  border-left: 3px solid var(--line); padding-left: .8rem; margin: 1.5rem 0;
}

/* ---------- donate: the Stripe return notice ---------- */

.donate-notice {
  padding: .85rem 1rem; margin-bottom: 1.25rem; border-radius: 4px;
  font-size: .95rem; line-height: 1.5; font-weight: 600;
}
.donate-notice:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Teal for success rather than green: it is the brand colour and the page has
   no other green, so a green box would read as borrowed from somewhere else. */
.donate-notice.is-thanks {
  background: #e6f7fa; color: #05303a; border-left: 4px solid var(--teal);
}
.donate-notice.is-cancelled {
  background: var(--grey); color: var(--navy); border-left: 4px solid var(--line);
}

/* ==========================================================================
   The pledge page (/v3/pledge.html)
   Reuses the donate page's grid, panel, thermometer and amount picker
   wholesale - the two are the same ask with a different trigger, and should
   look it. Only what is genuinely new to the pledge page is below.
   ========================================================================== */

/* The cross-link block on the donate page. This is the ONLY navigation to the
   pledge page - there is no nav item anywhere - so it is bordered and given
   the teal edge to stop it reading as another paragraph of body copy. */
.pledge-callout {
  margin: 2rem 0 0; padding: 1.1rem 1.25rem;
  background: var(--grey); border: 1px solid var(--line);
  border-left: 4px solid var(--teal); border-radius: 4px;
}
.pledge-callout h2 {
  margin: 0 0 .5rem; font-size: 1.1rem; color: var(--navy);
}
.pledge-callout p { margin: 0 0 .6rem; font-size: .97rem; }
.pledge-callout p:last-child { margin-bottom: 0; }
.pledge-callout .card-link { color: var(--teal-dark); }

/* "How it works" - numbered, because the order is the explanation. The count
   is a real <ol>, so it is announced as a four-step list rather than as four
   paragraphs that happen to start with a digit. */
.pledge-steps {
  list-style: none; counter-reset: step; padding: 0; margin: 1rem 0 1.5rem;
}
.pledge-steps li {
  counter-increment: step; position: relative;
  padding: 0 0 1rem 2.6rem; margin: 0;
}
.pledge-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: .05rem;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--teal); color: #05202a;
  font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.step-what {
  display: block; font-weight: 700; color: var(--navy); margin-bottom: .15rem;
}
.step-detail { display: block; color: var(--ink); }

/* ---------- the pledge panel's own fields ---------- */

/* The donate panel needs no text inputs at all - names and cards are entered
   on Stripe - so these are new here rather than shared. */
.panel-input {
  width: 100%; padding: .6rem .7rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: 4px; background: var(--paper);
  color: var(--ink);
}
.panel-input:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal);
}

.pledge-custom { margin: .75rem 0 0; }
.pledge-custom input {
  width: 100%; padding: .6rem .7rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: 4px;
}
.pledge-custom input:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal);
}

/* The consent line. Checkbox and text sit on a grid rather than inline so the
   wrapped second line stays aligned under the first instead of sliding back
   under the box - this is the one control on the page a person must actually
   read, and a ragged left edge is how it stops being read. */
.consent-row {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem;
  align-items: start; margin: 1.25rem 0 .25rem;
  font-size: .88rem; line-height: 1.5; color: var(--muted); cursor: pointer;
}
.consent-row input { margin-top: .22rem; width: 1rem; height: 1rem; }

/* On a phone the donate page puts its panel first, because someone who came to
   give should not scroll past the argument for giving. The pledge page is the
   other way round and deliberately so: nobody arrives already knowing what a
   pledge is, and a form asking for a promise before it has explained what the
   promise means is how you get promises people did not understand - which is
   the one failure mode this whole page has to avoid. Copy first, form after. */
@media (max-width: 62rem) {
  .pledge-grid .donate-panel { order: 0; }
}

/* ==========================================================================
   The pledge page, launch-site furniture
   Craig, 2026-09-01: work like a pledge on a product launch site. So: a stats
   row, a heavier progress bar, selectable reward tiers and an FAQ.
   ========================================================================== */

.launch-stats {
  background: var(--grey); border-bottom: 1px solid var(--line);
  padding: 1.5rem 0 1.75rem;
}
.progress-lg { height: 12px; margin-bottom: 1.1rem; }

.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.stat { display: flex; flex-direction: column; gap: .1rem; }
.stat-n {
  font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 800;
  color: var(--navy); letter-spacing: -.02em; line-height: 1.1;
}
.stat-l {
  font-size: .8rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700;
}
@media (max-width: 46rem) {
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
}

/* The one sentence that stops a backer applying the wrong mental model. On a
   launch site you pay when the project succeeds; here it is the reverse. It
   sits in the stats row rather than further down the page because that row is
   the part people recognise, and so the part that plants the assumption. */
.launch-inversion {
  margin: 1.25rem 0 0; padding: .8rem 1rem; font-size: .92rem; line-height: 1.55;
  background: var(--paper); border: 1px solid var(--line);
  border-left: 4px solid var(--teal); border-radius: 4px;
}
.launch-inversion strong { color: var(--navy); }

/* ---------- reward tiers ---------- */

/* The tiers ARE the amount picker: same radio name and values the plain grid
   used, so a card and the selected amount cannot disagree. */
.tiers { display: grid; gap: .6rem; margin: .75rem 0 0; }
.tier { display: block; cursor: pointer; }
.tier input { position: absolute; opacity: 0; width: 0; height: 0; }
.tier-card {
  display: block; padding: .8rem .9rem;
  border: 2px solid var(--line); border-radius: 5px; background: var(--paper);
}
.tier:hover .tier-card { border-color: var(--teal); }
.tier input:checked + .tier-card {
  border-color: var(--navy); background: #f7f8fd;
  box-shadow: inset 0 0 0 1px var(--navy);
}
.tier input:focus-visible + .tier-card {
  outline: 2px solid var(--teal); outline-offset: 2px;
}
.tier-head {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .2rem;
}
.tier-amt { font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.tier-name {
  font-weight: 700; color: var(--teal-dark); font-size: .88rem;
  text-transform: uppercase; letter-spacing: .05em;
}
/* "Suggested", never "Most popular". Popularity is a claim about what other
   people chose, and at zero backers it would be a false one. */
.tier-badge {
  margin-left: auto; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--teal); color: #05202a;
  padding: .12rem .45rem; border-radius: 3px;
}
.tier-blurb {
  display: block; font-size: .88rem; line-height: 1.45; color: var(--ink);
}
.tier-backers {
  display: block; margin-top: .35rem;
  font-size: .78rem; color: var(--muted); font-weight: 600;
}
.tier-other .tier-name { color: var(--navy); }

/* The panel is a long column on this page - six tiers, three fields and a
   consent line - so it gets its own padding rather than the donate panel's. */
.pledge-panel { padding: 1.25rem; }

/* ---------- FAQ ---------- */

/* <details>, not a scripted accordion: it opens with no JavaScript, it is
   keyboard operable for free, and screen readers already know what it is. */
.faqs { margin: 1rem 0 1.5rem; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: .8rem 0; font-weight: 700; color: var(--navy);
  list-style: none; display: flex; align-items: baseline; gap: .6rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; color: var(--teal-dark); font-weight: 800; font-size: 1.1rem;
  line-height: 1; flex: none;
}
.faq[open] summary::before { content: "\2212"; }
.faq summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.faq p { margin: 0 0 1rem 1.4rem; font-size: .97rem; line-height: 1.6; }

/* ==========================================================================
   Your Community Independent (/v3/priorities.html)
   ========================================================================== */

.priorities-hero { padding: 3rem 0; }
.priorities-hero h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.15;
  letter-spacing: -.02em; margin: 0 0 1rem; max-width: 40rem;
}
.hero-cta {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--teal); margin: 0;
}

.priorities {
  display: grid; gap: 1rem; margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.priority {
  background: var(--paper); border: 1px solid var(--line);
  border-top: 4px solid var(--teal); border-radius: 5px;
  padding: 1.1rem 1.2rem;
}
.priority h3 {
  margin: 0 0 .5rem; color: var(--navy); font-size: 1.15rem;
  letter-spacing: -.01em;
}
.priority p { margin: 0; font-size: .97rem; line-height: 1.6; }

/* The sign-off. Big, because it is the line the page is built to land. */
.closer {
  margin: 0; font-size: clamp(1.2rem, 2.8vw, 1.6rem); font-weight: 800;
  line-height: 1.35; letter-spacing: -.01em;
}

/* ---------- credited portraits ---------- */

/* The priorities hero: text and portrait side by side. The photo is a 2:3
   studio shot on a blue ground that sits close to the brand teal, so it is
   given a teal edge rather than being floated on the navy unframed. */
.priorities-hero-grid {
  display: grid; grid-template-columns: 1fr minmax(0, 20rem);
  gap: 2.5rem; align-items: center;
}
.hero-photo, .events-photo { margin: 0; }
.hero-photo img, .events-photo img {
  width: 100%; height: auto; display: block; border-radius: 6px;
}
.hero-photo img {
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  border-bottom: 4px solid var(--teal);
}
.hero-photo figcaption {
  font-size: .78rem; color: rgba(255,255,255,.75); margin-top: .5rem;
}
.events-photo figcaption {
  font-size: .78rem; color: var(--muted); margin-top: .5rem;
}

.events-head {
  display: grid; grid-template-columns: 1fr minmax(0, 13rem);
  gap: 2.5rem; align-items: center;
}

@media (max-width: 62rem) {
  /* Text first on a phone in both cases. The portrait is supporting material,
     and pushing the headline below a tall 2:3 image costs a screenful before
     the page has said anything. */
  .priorities-hero-grid, .events-head { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-photo, .events-photo { max-width: 15rem; }
}


/* ---------- credits page ---------- */

/* Sections of people rather than a flat list, because this is on its way to
   being a team page and a flat list would have to be torn up to become one. */
.credit-group { margin: 0 0 2rem; }
.credit-group h2 { margin: 0 0 .75rem; color: var(--navy); font-size: 1.2rem; }
.credit-list { list-style: none; padding: 0; margin: 0; }
.credit-list li {
  display: grid; grid-template-columns: minmax(0, 11rem) 1fr;
  gap: .2rem 1rem; align-items: baseline;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.credit-list li:last-child { border-bottom: 0; }
.credit-role {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--muted);
}
.credit-name { font-weight: 700; color: var(--navy); font-size: 1.02rem; }
.credit-note {
  grid-column: 2; font-size: .9rem; color: var(--muted); line-height: 1.5;
}
@media (max-width: 40rem) {
  .credit-list li { grid-template-columns: 1fr; }
  .credit-note { grid-column: 1; }
}

/* The photo caption is a link to the credits page rather than the
   photographer's name (Craig, 2026-09-01). Styled as the quiet caption it
   replaced, not as body-copy link furniture - it should read as a credit, and
   be findable by someone looking for one, without competing with the picture. */
.hero-photo figcaption a, .events-photo figcaption a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.hero-photo figcaption a:hover, .hero-photo figcaption a:focus { color: #fff; }
.events-photo figcaption a:hover,
.events-photo figcaption a:focus { color: var(--teal-dark); }

/* ---------- ballot diagram on the home page ---------- */

/* Replaced five CSS boxes with a real ballot image, 2026-09-02. White ground
   because the source PNG is transparent and this sits on the teal band. */
.ballot-img {
  display: block; width: 100%; max-width: 46rem; height: auto;
  margin: 0 auto; border-radius: 4px; background: #fff;
  border: 1px solid rgba(0,0,0,.12);
}

/* ---------- candidate cards on the independents page ---------- */

/* One card per CONFIRMED candidate. Everything on it is a fact: district,
   name, who endorsed them, a link to their own site. There is deliberately no
   blurb - a candidate's positions are theirs to write, per CLAUDE.md rule 3.
   The accent comes from candidates.json so a partner's colour is a content
   decision, not a code change. */
.cands {
  display: grid; gap: 1rem; margin: 1.5rem 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.cand {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 5px solid var(--cand-accent, var(--teal));
  border-radius: 5px; padding: 1.1rem 1.2rem;
}
.cand-district {
  margin: 0 0 .3rem; font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--cand-accent, var(--teal-dark));
}
.cand h3 { margin: 0 0 .5rem; color: var(--navy); font-size: 1.2rem; }
.cand-by { margin: 0 0 .6rem; font-size: .92rem; color: var(--muted); }
.cand-by a { color: var(--cand-accent, var(--teal-dark)); }
.cand p:last-child { margin-bottom: 0; }
.cand .card-link { color: var(--cand-accent, var(--teal-dark)); }

/* ---------- past events ---------- */

/* Quieter than upcoming, and the link says "Details" rather than "RSVP" -
   nothing on this page should read as an invitation to attend something that
   has already happened. */
.events-past { margin-top: .5rem; }
.event-past { background: var(--paper); opacity: .92; }
.event-past .event-date { background: var(--muted); }
.event-note {
  margin: .4rem 0 0; font-size: .88rem; color: var(--muted); font-style: italic;
}

/* Honeypot. Hidden from people, visible to bots that fill in every field they
   find. Not display:none - some bots skip those - and kept out of the tab
   order so a keyboard user never lands in it. */
.invite-form .hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Listmonk subscription form ---------- */

.sub-form { max-width: 28rem; margin: 1.25rem 0 0; }
.sub-row { margin: 0 0 .7rem; }
.sub-row input {
  width: 100%; padding: .7rem .8rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 4px; background: var(--paper);
  color: var(--ink);
}
.sub-row input:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal);
}
.sub-lists { margin: 0 0 1rem; display: grid; gap: .45rem; }
.sub-list {
  display: grid; grid-template-columns: auto 1fr; gap: .55rem;
  align-items: start; font-size: .92rem; line-height: 1.5; cursor: pointer;
}
.sub-list input { margin-top: .25rem; width: 1rem; height: 1rem; }
.sub-note { margin: .9rem 0 0; font-size: .85rem; color: var(--muted); }

/* Visually hidden but read aloud. The inputs carry placeholders, which are a
   hint and not a label - a screen reader gets nothing useful from them, and
   they vanish the moment someone starts typing. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Donate / Volunteer menu in the header ---------- */

/* CSS only, and it degrades. The button itself still links straight to
   donate.html, so with no CSS, no JavaScript, or a browser that never fires
   hover, the primary action still works. :focus-within is what opens it for a
   keyboard, with no script involved. */
.donate-wrap { position: relative; order: 2; }
.donate-menu {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  margin: .3rem 0 0; padding: .3rem; list-style: none;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display: none;
}
.donate-wrap:hover .donate-menu,
.donate-wrap:focus-within .donate-menu { display: block; }
.donate-menu a {
  display: block; padding: .55rem .7rem; text-decoration: none;
  color: var(--navy); font-weight: 700; font-size: .92rem; border-radius: 3px;
  white-space: nowrap;
}
.donate-menu a:hover, .donate-menu a:focus { background: var(--grey); color: var(--teal-dark); }

@media (max-width: 60rem) {
  /* Stacked header: a floating menu over a full-width button is worse than
     just showing both, so the menu sits inline and stays open. */
  .donate-wrap { order: 2; }
  .donate-menu {
    position: static; display: block; box-shadow: none; border: 0;
    padding: .4rem 0 0; background: transparent;
  }
  .donate-menu a { text-align: center; }
}

/* ---------- volunteer page ---------- */

.ways {
  display: grid; gap: 1rem; margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.way {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 4px solid var(--teal); border-radius: 5px; padding: 1.1rem 1.2rem;
}
.way h3 { margin: 0 0 .5rem; color: var(--navy); font-size: 1.1rem; }
.way p { margin: 0; font-size: .97rem; line-height: 1.6; }

/* Housekeeping links - Privacy, Credits. Small, unbold, below the rule.
   They are not navigation and should not read like it. Deliberately kept
   away from the authorisation statement, which is the one line in this
   footer that must stay easy to find. */
.footer-meta-links {
  margin: .9rem 0 0; font-size: .78rem; line-height: 1.6;
  color: rgba(255,255,255,.55);
}
.footer-meta-links a {
  color: rgba(255,255,255,.6); font-weight: 400; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.footer-meta-links a + a { margin-left: .9rem; }
.footer-meta-links a:hover, .footer-meta-links a:focus {
  color: #fff; border-bottom-color: rgba(255,255,255,.6);
}

/* ---------- socials ---------- */

/* One list, two contexts: the footer of every page and the contact page.
   Network name above, handle below, because "Instagram" on its own does not
   tell somebody which account they are about to follow. */
.footer-follow { margin: 1.5rem 0 .25rem; }
.footer-follow h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: rgba(255,255,255,.75); margin: 0 0 .6rem;
}
.socials { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.socials a {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem; border-radius: 8px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.28); color: #fff;
}
/* 20px glyph, currentColor, so one set of paths works on the navy footer and
   on a white page. A 44px hit area either way - these are thumb targets on a
   phone, and an icon-only link that is hard to hit is worse than a text one. */
.social-icon { width: 20px; height: 20px; display: block; flex: 0 0 auto; }
.socials a { min-width: 44px; min-height: 44px; justify-content: center; }
.socials a:hover, .socials a:focus-visible {
  border-color: var(--teal); background: rgba(255,255,255,.06);
}
.social-net { font-weight: 600; font-size: .9rem; }
.social-handle { font-size: .82rem; color: rgba(255,255,255,.75); }

/* The contact page shows the handle beside the glyph, so those links are as
   wide as their text rather than square. */
.socials-page a { justify-content: flex-start; padding: .5rem .75rem; }

/* On the page rather than in the footer: same shape, dark ink on light. */
.socials-page { margin: .75rem 0 1.25rem; }
.socials-page a { border-color: rgba(99,64,115,.25); color: var(--navy); }
.socials-page a:hover, .socials-page a:focus-visible {
  border-color: var(--teal); background: rgba(32,178,170,.09);
}
.socials-page .social-handle { color: var(--muted); }

/* ---------- Mel's statement, on the home page ---------- */

/* Two quotations in her words, straight after the hero. A teal rule down the
   left and her name underneath: plainly a quotation, not more campaign copy. */
.statement .wrap { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .statement .wrap { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.statement-quote { margin: 0; padding-left: 1.25rem; border-left: 4px solid var(--teal); }
.statement-quote blockquote { margin: 0; }
.statement-quote p {
  font-size: 1.2rem; line-height: 1.55; color: var(--navy); margin: 0 0 .75rem;
}
.statement-quote figcaption {
  font-size: .85rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--teal-on-navy);
}

/* Hero with nothing beside the copy - no video, no picture. One column, and
   the measure held to something readable rather than letting a line run the
   full 1120px of the wrap. */
.live-hero-grid.live-hero-solo { grid-template-columns: 1fr; max-width: 48rem; }


/* ---------- press releases ---------- */

.releases { margin-bottom: 2.5rem; }
.release + .release {
  margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line);
}
.release h2 { margin: .2rem 0 .5rem; font-size: 1.15rem; }
.release-date {
  margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--teal-dark);
}
/* The media enquiries heading is a different subject from the list above it,
   so it gets a rule and real space rather than following on as if it were
   another release. */
.releases + h2 {
  margin-top: 2.5rem; padding-top: 2rem; border-top: 2px solid var(--line);
}