:root {
  /* Campaign palette, round 3.1 (11 Aug 2026), taken from the CryptPad hexes and
     checked against the Figma "logo colours" frames. Body text and headings on
     the off-white ground are the DARK BLUE, not a black; the only genuinely
     near-black surface is the footer, which is --ink. --orange-dark is the one
     value still derived, a hover shade the design does not specify. */
  --cream: #EBE8DD;        /* off-white, page ground */
  --orange: #BF5000;       /* display headings, primary buttons */
  --orange-dark: #983F00;  /* derived: hover state for --orange */
  --blue-dark: #004784;    /* filled sections, body text on cream, badges */
  --blue: #015EB8;         /* tally numbers ONLY, per the spec */
  --ink: #10161C;          /* footer only */
  --cream-line: rgba(0, 71, 132, 0.25);
  --cream-line-soft: rgba(235, 232, 221, 0.4);
  --mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* One button shape across the site (round 3: "effectively just 1 component
     but in different colours"), so every variant reads from this. */
  --btn-radius: 999px;
}
* { box-sizing: border-box; margin: 0; }
body {
  font-family: var(--mono); color: var(--blue-dark); background: var(--cream);
  font-size: 1rem; line-height: 1.65;
}
h1, h2, h3 { font-weight: 700; line-height: 1.15; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.prose { max-width: 720px; }

a { color: inherit; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.75rem; }
p + p { margin-top: 0.9rem; }
section.wrap, section.hero { padding-top: 3rem; padding-bottom: 3rem; }

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--cream);
  padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* Header */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: 1.25rem; padding-bottom: 1.25rem;
}
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
/* Round 4: "a weee bit bigger (esp on desktop)" */
.brand-logo { height: 60px; width: auto; display: block; }
@media (min-width: 720px) { .brand-logo { height: 76px; } }
.wordmark {
  font-weight: 700; font-size: 1.0625rem; line-height: 1.3;
  color: var(--blue-dark); text-decoration: none; max-width: 12ch;
}
.site-header nav { display: flex; align-items: center; gap: 1.5rem; }
.site-header nav a {
  color: var(--blue-dark); text-decoration: none; font-size: .9375rem;
}
.site-header nav a:hover { text-decoration: underline; }
.site-header nav a[aria-current="page"]:not(.btn-nav) { text-decoration: underline; }

/* Hamburger (mobile only, Figma "hamburger open/closed"). The button is hidden
   on desktop, where the nav is always a visible row.
   Round 5: breakpoint moved 720 -> 820 because the fifth nav item (Resources)
   overflows the row between those widths. nav.mjs matches this value. */
.nav-toggle {
  display: none; background: transparent; border: 0; cursor: pointer;
  padding: 8px; margin: -8px; color: var(--blue-dark); line-height: 0;
}
.nav-toggle .bar {
  display: block; width: 26px; height: 2.5px; background: currentColor;
  border-radius: 2px; transition: transform .2s ease, opacity .15s ease;
}
.nav-toggle .bar + .bar { margin-top: 6px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

@media (max-width: 819.98px) {
  .nav-toggle { display: block; }
  /* The header MUST be allowed to wrap here: the open nav takes
     flex-basis:100% to drop onto its own row below the logo, and with nowrap
     that instruction is silently ignored - the menu rendered crammed beside
     the brand in one row (Amber's screenshot, 12 Aug). Brand and toggle still
     share the first row because together they never exceed the viewport. */
  .site-header { flex-wrap: wrap; }
  .site-header nav {
    display: none; order: 3; flex-basis: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    border-top: 1px solid var(--cream-line); margin-top: 1rem;
  }
  .site-header nav.is-open { display: flex; }
  .site-header nav a {
    width: 100%; padding: 0.9rem 0; font-size: 1.0625rem;
    border-bottom: 1px solid var(--cream-line);
  }
  .site-header nav a:last-child { border-bottom: 0; }
  /* The "Take action" pill would stretch edge to edge in a stacked menu. */
  .site-header nav a.btn-nav { width: auto; margin: 0.9rem 0; }
}

/* Hero */
.stats { display: flex; gap: clamp(2rem, 8vw, 7rem); flex-wrap: wrap; margin-bottom: 1rem; }
@media (max-width: 719.98px) { .stats { flex-direction: column; gap: 1.5rem; } }
.stat { display: flex; flex-direction: column; }
.hero h1 { color: var(--orange); }
.stat .num {
  font-weight: 700;
  font-size: clamp(5rem, 10vw, 9.375rem); color: var(--blue);
  display: block; line-height: 1;
}
.stat .label { font-size: clamp(1.25rem, 2.5vw, 2rem); color: var(--blue-dark); }
.hero h1 {
  font-size: clamp(2.75rem, 8vw, 6.875rem); letter-spacing: -0.01em;
  margin: 0.5rem 0 2.5rem; color: var(--orange); line-height: 1.1;
}
.standfirst {
  font-size: 1.1875rem; margin: 0 auto 2rem; text-align: center; max-width: 640px;
}
.standfirst strong { color: var(--orange); font-weight: 700; }
.hero .cta-row { justify-content: center; }

/* Buttons: one shape, several colours. */
.btn {
  padding: 12px 26px; font-weight: 700; font-family: var(--mono);
  font-size: .9375rem; text-decoration: none; border-radius: var(--btn-radius);
  display: inline-block; line-height: 1.2; border: none; cursor: pointer;
}
.btn-primary { background: var(--orange); color: var(--cream); letter-spacing: 0.04em; }
.btn-primary:hover { background: var(--orange-dark); }
.btn-pill { background: var(--cream); color: var(--blue-dark); font-weight: 500; }
.btn-pill:hover { background: #F7F4EA; }
.btn-dark { background: var(--ink); color: var(--cream); font-weight: 500; }
.btn-dark:hover { background: #24303B; }
.btn-nav, .site-header nav a.btn-nav { background: var(--orange); color: var(--cream); padding: 8px 18px; }
.btn-nav:hover, .site-header nav a.btn-nav:hover { background: var(--orange-dark); }
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Section inner. Round 3 asked for the About section to use the same wrapper as
   the section above it, so this is a standalone class rather than one nested
   under .section-filled. */
.inner { max-width: 1200px; margin: 0 auto; padding: 3rem 1.25rem; }

/* Filled (dark blue) sections */
.section-filled { background: var(--blue-dark); color: var(--cream); }
.section-filled a { color: var(--cream); }
.section-filled a.btn-pill { color: var(--blue-dark); }
.section-filled .muted { color: var(--cream-line-soft); }
.section-filled + .section-filled .inner { padding-top: 0; }

/* Map */
.map-frame { background: var(--cream); padding: 0; margin-top: 2rem; }
#map-slot { margin-top: 1.5rem; }
.map-canvas { width: 100%; height: 70vh; min-height: 320px; border: 1px solid var(--cream-line); background: var(--cream); }

/* Lists */
ul.plain { list-style: none; padding: 0; }
ul.plain li { padding: 0.35rem 0; border-bottom: 1px solid var(--cream-line); }
ul.plain li:last-child { border-bottom: none; }

/* Round 3: .muted was too light against cream, so it now takes the same dark
   blue as body text. It stays a separate class because .section-filled
   repaints it for dark grounds. */
.muted { color: var(--blue-dark); }

/* Footer */
.site-footer {
  background: var(--ink); color: var(--cream);
  padding: 3rem 0; margin-top: 4rem;
}
.site-footer a { color: var(--cream); }
.footer-cols { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-cols { grid-template-columns: 1.4fr 1fr; } }
.site-footer.footer-flush { margin-top: 0; }
.site-footer h3 { font-size: 1.375rem; margin-bottom: 0.5rem; }
.site-footer .small { font-size: .8125rem; color: var(--cream-line-soft); max-width: 34ch; }
.footer-signup { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.footer-signup input {
  flex: 1; min-width: 0; max-width: 320px; padding: 10px 16px;
  border: 1px solid var(--cream); border-radius: 999px;
  background: transparent; color: var(--cream); font: inherit; font-size: .8125rem;
}
.footer-signup input::placeholder { color: var(--cream-line-soft); font-style: italic; }
.footer-links { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.footer-note { margin-top: 2.5rem; font-size: .8125rem; color: var(--cream-line-soft); }

/* "If you want to find out more, please read:" list in the About section. */
.read-more { list-style: none; padding: 0; margin-top: 0.9rem; }
.read-more li { padding: 0.2rem 0 0.2rem 1.1rem; text-indent: -1.1rem; }
.read-more li::before { content: "\2022"; padding-right: 0.5rem; }

/* Coalition logos (round 3.1). Logos drop into /assets/coalition/ and are
   listed in coalition.mjs; the section hides itself while that list is empty. */
.coalition { border-top: 1px solid var(--cream-line); }
.coalition h2 { text-align: center; }
.coalition-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 2.5rem 3rem; margin-top: 2rem;
}
.coalition-grid img {
  height: 64px; width: auto; max-width: 200px; object-fit: contain; display: block;
}
/* Round 5: real logos sit on the same cream plates as the round-4 placeholders,
   so light-background lockups stay legible on the blue section. */
.coalition-grid a {
  background: var(--cream); padding: 18px 26px; display: flex;
  align-items: center; justify-content: center;
}
/* Placeholder tiles until the real logos arrive (round 4): cream plates the
   size a logo will occupy, so orgs can picture themselves on the page. */
.coalition-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 180px; height: 88px; background: var(--cream);
  color: var(--blue-dark); font-size: .875rem; border-radius: 6px;
}
.coalition.section-filled { border-top: 0; }
.coalition.section-filled h2 { text-align: left; }

/* Full list page */
.filter {
  width: 100%; max-width: 320px; padding: 10px 14px; margin: 1.5rem 0;
  border: 1px solid var(--blue-dark); border-radius: 6px; font: inherit;
  background: transparent; color: var(--blue-dark);
}
.backer-list { margin-bottom: 2.5rem; }
.list-page h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); margin-bottom: 1rem; }
.list-page section h2 { color: var(--blue-dark); margin-top: 2.5rem; }
.backer-list details { border-bottom: 1px solid var(--cream-line); }
.backer-list details:first-of-type { border-top: 1px solid var(--cream-line); }
.backer-list summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.6rem 0.25rem; cursor: pointer; list-style: none;
}
.backer-list summary::-webkit-details-marker { display: none; }
.backer-list summary::after { content: "+"; font-weight: 500; font-size: 1.25rem; line-height: 1; }
.backer-list details[open] summary::after { content: "\2212"; }
.backer-list details[open] summary { font-weight: 700; }
.backer-list .row-detail { padding: 0 0.25rem 0.9rem; }

/* Postcode search */
.pc-form { display: flex; flex-wrap: wrap; gap: .75rem; max-width: 480px; margin: 1.5rem 0; }
.pc-form input {
  flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--cream);
  border-radius: 6px; font: inherit; background: transparent; color: var(--cream);
}
.pc-form input::placeholder { color: var(--cream-line-soft); }
.pc-form .btn { background: var(--cream); color: var(--blue-dark); font-weight: 500; letter-spacing: 0; }
.pc-form .btn:hover { background: #F7F4EA; }
.result-card { background: var(--cream); color: var(--blue-dark); border-left: 4px solid var(--orange); padding: 1.5rem 1.75rem; margin: 1.5rem 0; }
.result-card h3 { margin-bottom: 0.25rem; }
.result-card h3 + .result-lines { margin-bottom: 1.25rem; }
.result-lines { list-style: none; padding: 0; margin: 0; }
.result-lines li { padding: 0.15rem 0; }
.result-card a { color: var(--blue-dark); }
.result-card .btn { background: var(--orange); color: var(--cream); }
/* Round 3 (Figma "map section v2.1"): the per-result buttons collapse into a
   single CTA below the cards, so it needs its own spacing. */
.result-cta { margin: 1.5rem 0 0.5rem; }
.badge { font-weight: 500; font-size: .875rem; padding: 2px 10px; border-radius: 999px; }
.badge-yes { background: var(--blue-dark); color: var(--cream); }
.badge-no { background: rgba(0, 71, 132, 0.12); color: var(--blue-dark); }
.error { color: var(--cream); font-weight: 700; }
.section-filled .muted a { color: var(--cream); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Constituency map */
/* Popups render inside .section-filled and after Leaflet's own stylesheet, so
   both would otherwise recolour this text: section-filled paints .muted cream,
   and .leaflet-container a paints links blue. These rules win on specificity. */
.map-popup { min-width: 200px; }
.map-popup .result-name { font-weight: 700; margin-bottom: 0.25rem; color: var(--blue-dark); }
.map-popup .badge { display: inline-block; margin: 0.25rem 0; }
.map-popup .btn { margin-top: 0.5rem; padding: 8px 16px; font-size: .875rem; }
.section-filled .map-popup .muted,
.leaflet-popup-content .map-popup .muted { color: rgba(0, 71, 132, 0.8); }
.section-filled .map-popup a,
.leaflet-popup-content .map-popup a { color: var(--blue-dark); }
.section-filled .map-popup a.btn-primary,
.leaflet-popup-content .map-popup a.btn-primary { color: var(--cream); }

/* Council markers: diamond, to read as distinct from round trust markers */
.council-diamond { display: block; width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid #fff; box-sizing: border-box; }

/* Map section v2 (Figma "map section v2"): key + submit card sit beside the
   map on desktop, stack above it on mobile with the submit card collapsed. */
.map-layout { display: grid; gap: 0; margin-top: 1.5rem; grid-template-columns: 320px 1fr; align-items: stretch; }
.map-layout #map-slot { margin-top: 0; }
.map-layout .map-canvas { height: 100%; min-height: 560px; border-left: 0; }
.map-aside { display: flex; flex-direction: column; background: var(--cream); color: var(--blue-dark); border: 1px solid var(--cream-line); }
.key-card { padding: 1rem 1.1rem; border-bottom: 1px solid var(--blue-dark); }
.key-title, .key-subtitle { font-weight: 700; margin: 0 0 0.5rem; }
.key-cols ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.key-cols ul:last-child { margin-bottom: 0; }
.key-cols li { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; }
.key-cols li.key-subtitle { padding-top: 0.35rem; }
.key-cols .key { display: inline-block; width: 14px; height: 14px; flex: 0 0 14px; }
.key-cols .key-circle { border-radius: 50%; border: 2px solid var(--blue-dark); }
.key-cols .key-diamond { transform: rotate(45deg); width: 11px; height: 11px; border: 2px solid var(--blue-dark); }
.key-cols .key-area { border: 2px solid var(--blue-dark); }
.key-cols .key-swatch { border-radius: 50%; }
.key-cols .key-backed { background: var(--blue-dark); }
.key-cols .key-not { background: #d8d4cc; }
.missing-card { padding: 0; }
.missing-card summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-weight: 700; padding: 0.9rem 1.1rem; }
.missing-card summary::-webkit-details-marker { display: none; }
.missing-card summary::after { content: "+"; font-size: 1.25rem; line-height: 1; }
.missing-card[open] summary::after { content: "\2212"; }
.missing-card .missing-body { padding: 0 1.1rem 1.1rem; }
.missing-card .prose { color: var(--blue-dark); }
/* The design's submit button is the orange pill; the default cream pill would
   vanish against the card. Also wins over .section-filled a.btn-pill. */
.section-filled .missing-card a.btn-pill { background: var(--orange); border-color: var(--orange); color: var(--cream); }
.section-filled .missing-card a.btn-pill:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
/* Round 3: the submit button was sitting flush against the copy either side. */
.missing-card .submit-row { margin: 1.25rem 0; }
.missing-card .muted,
.section-filled .missing-card .muted { color: var(--blue-dark); font-style: italic; font-size: .8125rem; }

@media (max-width: 719.98px) {
  .map-layout { grid-template-columns: 1fr; }
  .map-layout .map-canvas { height: 60vh; min-height: 320px; border-left: 1px solid var(--cream-line); }
  .map-aside { border-bottom: 0; }
  .key-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
  .key-cols ul { margin-bottom: 0; font-size: .8125rem; }
  .key-cols li.key-subtitle { display: none; }
  /* Round 3: the hero sits directly under the header on mobile, so its own
     top padding doubled up. */
  section.hero { padding-top: 0; }
}

/* View more (list page) */
.view-more {
  background: transparent; color: var(--blue-dark);
  border: 1.5px solid var(--blue-dark); border-radius: var(--btn-radius);
  padding: 10px 24px; margin-top: 1rem; cursor: pointer;
  font: inherit; font-weight: 500; font-size: .9375rem; line-height: 1.2;
}
.view-more:hover { background: rgba(0, 71, 132, 0.08); }

/* Take action / letters page */
/* Round 4: the four letter downloads stack vertically (Figma "taking action"),
   with margin between the copy and the first button. */
#downloads .cta-row { flex-direction: column; align-items: flex-start; margin-top: 1.5rem; }
#leaflet .cta-row { margin-top: 1rem; }

#newscord-slot { margin: 1rem 0 2rem; }
/* The frame sizes itself: the loader sets an inline height from the campaign
   page's own content. NewsCord's runaway resize loop was fixed their end on
   14 Aug, so the 900px pin that used to live here is gone and nobody has to
   scroll inside the frame. min-height only guards the gap while it loads. */
#newscord-embed iframe { width: 100%; min-height: 600px; border: 0; }
.diy-heading { margin: 3rem 0 0.5rem; }

.action-hero { text-align: center; padding: 3rem 1.25rem 1rem; }
.action-hero h1 {
  font-size: clamp(1.75rem, 4.5vw, 3.375rem); max-width: 22ch; margin: 0 auto 1rem;
}
.action-hero h1 .accent { color: var(--orange); }
.lead-in { margin: 1rem auto 2rem; }
.action-hero .lead-in { max-width: 640px; }
.letter {
  border: 1px solid var(--blue-dark); border-radius: 16px;
  padding: 2rem; margin: 2rem 0; max-width: 720px;
}
.letter h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); }
.letter-text { margin: 1.25rem 0; }
.letter-text p + p { margin-top: 0.9rem; }
.letter .cta-row { margin-top: 1.5rem; }
.btn-secondary {
  background: transparent; color: var(--blue-dark); border: 1.5px solid var(--blue-dark);
  font-weight: 500;
}
.btn-secondary:hover { background: rgba(0, 71, 132, 0.08); }
.letter button.btn { cursor: pointer; }

/* Downloads callout (round 3.1). Same component as a postcode result card, on
   the take action page and the local demos page. */
.callout { background: var(--cream); color: var(--blue-dark); border-left: 4px solid var(--orange); padding: 1.25rem 1.5rem; margin: 2rem 0; max-width: 720px; }
.callout h2, .callout h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.callout .cta-row { margin-top: 1.25rem; }
.section-filled .callout a:not(.btn) { color: var(--blue-dark); }
/* Round 5: buttons inside a cream callout keep their own text colour - Amber
   flagged the leaflet button rendering with blue text on the demos page. */
.section-filled .callout a.btn-primary { color: var(--cream); }
.section-filled .callout .muted { color: rgba(0, 71, 132, 0.8); }

/* Local demos page. The design puts this whole page on the dark blue ground, so
   the cards are cream-on-blue rather than the other way round. */
.demos-page h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); margin-bottom: 1rem; }
.demos-page .prose + .prose { margin-top: 1rem; }
.demo-list-heading { margin-top: 2.5rem; }
.demo-list { display: grid; gap: 1.25rem; margin: 1.5rem 0 0; grid-template-columns: 1fr; }
@media (min-width: 860px) { .demo-list { grid-template-columns: 1fr 1fr; } }
.demo-card {
  background: var(--cream); color: var(--blue-dark);
  border-left: 4px solid var(--orange); padding: 1.25rem 1.5rem;
}
.demo-card h3 { font-size: 1.1875rem; margin-bottom: 0.35rem; }
.demo-when { font-weight: 700; }
.demo-where { margin-bottom: 0.5rem; }
.demo-card .demo-contact { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 0.9rem; font-size: .875rem; }
.section-filled .demo-card a { color: var(--blue-dark); }
.demo-empty { margin: 1.5rem 0; }
.section-filled .demo-empty { color: var(--cream); }
.organise-note { margin-top: 2.5rem; }
/* The footer's usual breathing room would show as a cream band under a page
   that is filled edge to edge. */
.demos-page + .site-footer { margin-top: 0; }


/* Round 5: why-take-action items on the home page (Figma "Desktop - home - logo colours") */
.why-heading { margin-top: 2rem; font-size: 1.375rem; }
.why-list { display: flex; flex-direction: column; gap: 1.75rem; margin-top: 1.25rem; }
.why-item { border-left: 4px solid var(--orange); padding-left: 1.25rem; max-width: 720px; }
.why-item h4 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
.why-item p { font-size: .9375rem; line-height: 1.55; }

/* Round 5: demo list accordion (Figma "Desktop - upcoming events - logo colours") */
.demo-list { display: block; margin-top: 1rem; }
.demo-acc { border-bottom: 1px solid var(--cream-line-soft); }
.demo-acc summary {
  cursor: pointer; padding: 0.9rem 2rem 0.9rem 0; font-weight: 700;
  list-style: none; position: relative;
}
.demo-acc summary::-webkit-details-marker { display: none; }
.demo-acc summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); font-weight: 400; font-size: 1.25rem;
}
.demo-acc[open] summary::after { content: "\2212"; }
.demo-acc-body { padding: 0 0 1.1rem; max-width: 820px; }
.demo-acc-body .demo-contact { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 0.75rem; font-size: .875rem; }

/* Round 5: resources page (Figma "Desktop - resources - logo colours"): cream page,
   tagged cards in a three-column grid, client-side search. Cards whose real URL
   Amber has not supplied yet carry data-link-pending and stay hidden; delete the
   attribute as links arrive. */
.resources-page h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); margin-bottom: 1rem; }
.resource-search {
  width: min(420px, 100%); padding: 10px 16px; margin: 1.5rem 0 0.5rem;
  border: 2px solid var(--blue-dark); border-radius: 8px;
  background: transparent; color: var(--blue-dark); font: inherit; font-size: .9375rem;
}
.resource-section h2 { margin-top: 2.5rem; font-size: 1.5rem; }
.resource-grid { display: grid; gap: 1.5rem 2.25rem; margin-top: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .resource-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .resource-grid { grid-template-columns: 1fr 1fr 1fr; } }
.resource-card {
  border-left: 4px solid var(--orange); background: #fbf9f3;
  padding: 1.4rem 1.5rem 1.25rem; display: flex; flex-direction: column;
}
.resource-card h3 { font-size: 1.0625rem; margin: 0 0 1.1rem; }
.resource-card h3 a { color: var(--blue-dark); }
.resource-card p { font-size: .875rem; line-height: 1.5; margin: 0 0 1.1rem; }
.resource-card .resource-tag { margin-top: auto; align-self: flex-start; }
.resource-tag {
  display: inline-block; border: 1.5px solid var(--blue-dark); border-radius: 6px;
  padding: 2px 8px; font-size: .75rem;
}
.resource-section:not(:has(.resource-card:not([data-filtered-out]))) { display: none; }
.resource-card[data-filtered-out] { display: none; }

/* NewsCord subscribe embed: the widget card centres inside a full-width iframe,
   so the iframe's own dark ground read as black slabs either side (Amber, 1 Sep).
   Cap the iframe at the card's width so it sits flush in the footer column. */
.site-footer iframe { max-width: 420px; display: block; }