/*
Theme Name: Hostage Nation
Theme URI: https://hostagenation.com
Author: Hostage Nation
Description: Block theme for the Hostage Nation report — a long-form, chapter-per-page political report. Design system lives in theme.json.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Version: 0.6.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hostage-nation
*/

/* ==========================================================
   BACKGROUND GRAPHIC — ghosted texture, stretched over the whole page
   ========================================================== */
body {
  background-image: url("/wp-content/uploads/2026/09/bg-7da42d.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;            /* stretch to the full page, vertically and horizontally */
  background-color: var(--wp--preset--color--mint);
}

/* ==========================================================
   SITE FRAME — 28px inset carbon border
   ========================================================== */
.wp-site-blocks {
  border: 1px solid var(--wp--preset--color--carbon);
  margin: 28px;
  box-sizing: border-box;
}

/* ==========================================================
   SITE HEADER — stacked masthead
   Row 1: [ logo | strapline ]      Row 2: full-width nav
   ========================================================== */
.site-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
/* Bottom line on the OUTER header only. Scoping to .is-layout-flex stops
   the inner flow wrapper (which also carries .site-header) drawing a
   second coincident line that reads as 2px. */
.site-header.is-layout-flex {
  border-bottom: 1px solid var(--wp--preset--color--carbon);
}

/* --- Row 1: masthead top (logo + strapline) --- */
.masthead-top {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 80px;                                          /* height of the top row */
  border-bottom: 1px solid var(--wp--preset--color--carbon); /* rule between the two rows */
}

/* Logo — fixed size, vertical rule to its right */
.site-header .wp-block-image {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  margin: 0 !important;
  border-right: 1px solid var(--wp--preset--color--carbon);
}
.site-header .wp-block-image img { height: 32px; width: auto; display: block; }

/* Strapline — same idiom as the nav, larger. Tune font-size to your mock. */
.masthead-strapline {
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 1.5rem;
  font-size: 1.5rem;              /* ~24px; bump to 1.625rem if you want it closer to the mock */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--carbon);
}

/* --- Row 2: nav --- */
/* If you kept a group wrapping the nav, class it "masthead-nav" and this
   neutralises its padding. If you ungrouped the nav, this rule is inert. */
.masthead-nav {
  margin: 0 !important;
  padding: 0 !important;
}

/* Nav fills the row width (comes free from the column) */
.site-header .wp-block-navigation {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* The <ul> row — full width, six items with even gaps, ends inset to match the logo */
.site-header .wp-block-navigation__container {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 1.5rem !important;
  gap: 0 !important;
  justify-content: space-between !important;
}

/* Each item — natural width (even gaps between, not equal-width cells) */
.site-header .wp-block-navigation-item {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Links — 16px, uppercase. min-height sets the nav row height. */
.site-header .wp-block-navigation-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80px;              /* height of the nav row (matches the masthead row) */
  margin: 0 !important;
  padding: 0 0.5rem !important;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--wp--preset--color--carbon);
}

/* Hide the strapline on very small screens (logo + hamburger only) */
@media (max-width: 600px) {
  .masthead-strapline { display: none; }
}

/* ==========================================================
   NAV + RAIL HOVER STATES
   ========================================================== */
.wp-block-navigation a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.chapter-rail a:hover {
  text-decoration-thickness: 2px;
}

/* ==========================================================
   CHAPTER ACTION BUTTONS — primary (orange) + secondary (mint)
   Hard carbon shadow; hover = carbon fill, platinum text
   ========================================================== */
.hn-chapter-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-right: clamp(20px, 4vw, 80px);
  padding-top: clamp(28px, 3.13vw, 60px);   /* space below the nav; padding, so WP's first-child reset can't zero it */
  margin-bottom: 2.5rem;
}
.hn-btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 500;
  font-size: var(--wp--preset--font-size--small, 16px);
  line-height: 1;
  padding: 12px 18px;
  color: var(--wp--preset--color--carbon, #16191D);
  border: 1px solid var(--wp--preset--color--carbon, #16191D);
  background: var(--wp--preset--color--mint, #EAF1EF);
  box-shadow: 4px 4px 0 var(--wp--preset--color--carbon, #16191D);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}
.hn-btn--primary {
  background: var(--wp--preset--color--orange, #F98701);
}
/* Hover: carbon fill, platinum text (both button types) */
.hn-btn:hover {
  background: var(--wp--preset--color--carbon, #16191D);
  color: var(--wp--preset--color--platinum, #F1F4F4);
}
/* Focus: orange outline */
.hn-btn:focus-visible {
  outline: 3px solid var(--wp--preset--color--orange, #F98701);
  outline-offset: 2px;
}
/* Disabled: muted, no shadow */
.hn-btn:disabled,
.hn-btn[aria-disabled="true"] {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
}
/* ==========================================================
   CHAPTER GRID
   ========================================================== */
.chapter-grid {
  width: 100%;
  max-width: 2300px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 80px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 0;
}
.chapter-grid > * { margin-block: 0; }

.chapter-grid .chapter-header,
.chapter-grid .chapter-rail {
  max-width: none;
  width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}
.chapter-grid .chapter-content {
  max-width: 1200px;
  min-width: 0;
  justify-self: start;
}
.chapter-grid .chapter-header  { grid-column: 4 / 12; grid-row: 1; }
.chapter-grid .chapter-rail    { grid-column: 1 / 4;  grid-row: 2; }
.chapter-grid .chapter-content { grid-column: 4 / 12; grid-row: 2; }

.chapter-header > * { max-width: none; }
/* ==========================================================
   CHAPTER FIGURES — widths, border, figure number
   ========================================================== */

/* Let figures measure the real grid instead of the browser window */
.chapter-grid { container-type: inline-size; }

.chapter-content {
  --fig-gap: 32px;                                  /* your column-gap */
  --fig-grid: 100cqw;                               /* the REAL grid inner width */
  --fig-col:  calc((100cqw - 11 * var(--fig-gap)) / 12);
  --fig-shift: calc(3 * var(--fig-col) + 3 * var(--fig-gap));
}

/* THE THREE WIDTHS. Change only the pixel number on each. */

/* Significantly wider, near full width */
.chapter-content .is-wider {
  --w: min(1700px, var(--fig-grid));
  width: var(--w);
  max-width: none;
  margin-left: calc((var(--fig-grid) - var(--w)) / 2 - var(--fig-shift));
}

/* Just wider than the body text */
.chapter-content .is-wide {
  --w: min(1240px, var(--fig-grid));
  width: var(--w);
  max-width: none;
  margin-left: calc((var(--fig-grid) - var(--w)) / 2 - var(--fig-shift));
}

/* Sits within the body text column */
.chapter-content .is-body {
  width: 100%;
  max-width: 100%;
}

/* Make the picture fill whichever width it's set to */
.chapter-content .is-wider img,
.chapter-content .is-wide img,
.chapter-content .is-body img,
.chapter-content img {
  display: block;
  width: 100%;
  height: auto;
}

/* 1px carbon border on every image in the chapter body */
.chapter-content img {
  border: 1px solid var(--wp--preset--color--carbon, #16191D);
  box-sizing: border-box;
}

/* The "Figure 23" caption: 16px, carbon */
.chapter-content figcaption,
.chapter-content .wp-element-caption {
  font-size: 16px;
  line-height: 1.4;
  color: var(--wp--preset--color--carbon, #16191D);
  text-align: center;
  margin-top: 12px;
}
/* ==========================================================
   HEADER BAND
   ========================================================== */
.chapter-header .back-link { display: inline-block; margin-bottom: 1.5rem; }
.chapter-header .chapter-kicker { margin-bottom: 0.5rem; }
.chapter-header .chapter-readingtime { margin-top: 0.75rem; margin-bottom: clamp(40px, 5.21vw, 100px); }

.chapter-kicker {
  font-size: clamp(22px, 1.67vw, 32px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--carbon);
}
.chapter-readingtime {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--carbon);
}

/* Title */
.chapter-header .wp-block-post-title,
.chapter-header h1.wp-block-post-title,
.chapter-header h1 {
  font-size: clamp(64px, 40px + 2.1vw, 88px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.015em;
  margin: 0 0 1rem 0;
  max-width: none;
}

/* ==========================================================
   BODY
   ========================================================== */
.chapter-content > * { margin-top: 0; margin-bottom: 1.5rem; }
.chapter-content p {
  font-size: clamp(20px, 16px + 0.35vw, 24px);
  line-height: 1.4;
  letter-spacing: 0.025rem;
}
.chapter-content h2 {
  font-size: clamp(28px, 22.7px + 1.2vw, 40px);
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.chapter-content .has-body-lg-font-size {
  font-size: clamp(24px, 18px + 0.6vw, 32px);
  line-height: 1.43;
  letter-spacing: 0.035rem;
  margin-bottom: 2rem;
}

/* Body links — teal + underline; hover swaps emphasis to carbon */
.chapter-content p a:not(.back-link) {
  color: var(--wp--preset--color--teal);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  font-weight: 500;
}
.chapter-content p a:not(.back-link):hover {
  color: var(--wp--preset--color--carbon);
  text-decoration-thickness: 3px;
  font-weight: 700;
}

/* ==========================================================
   PULL-QUOTE
   ========================================================== */
.chapter-content .wp-block-pullquote {
  border: 1px solid var(--wp--preset--color--carbon);
  border-bottom: 6px solid var(--wp--preset--color--carbon);
  padding: 2rem;
  margin: 3rem 0;
  text-align: left;
}
.chapter-content .wp-block-pullquote blockquote { margin: 0; border: none; }
.chapter-content .wp-block-pullquote p {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  margin: 0;
}

/* ==========================================================
   RAIL
   ========================================================== */
.chapter-rail h3 {
  font-size: var(--wp--preset--font-size--small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1rem 0;
}
.chapter-rail .wp-block-page-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--wp--preset--font-size--small);
}
.chapter-rail .wp-block-page-list li { margin: 0 0 0.75rem 0; }
.chapter-rail ul.wp-block-page-list li a,
.chapter-rail .wp-block-page-list a {
  font-weight: 400;
  text-decoration: none;
  color: var(--wp--preset--color--carbon);
  background-color: transparent;
  padding: 0;
  line-height: 1.3;
}
.chapter-rail ul.wp-block-page-list li a:hover,
.chapter-rail .wp-block-page-list a:hover { text-decoration: underline; }
.chapter-rail .wp-block-page-list a[aria-current="page"] { font-weight: 700; }

/* ==========================================================
   RAIL SCOPING — show only the current section's branch
   ========================================================== */
/* Hide all top-level section items by default */
.chapter-rail .wp-block-page-list > .wp-block-pages-list__item {
  display: none;
}
/* Show only the current section (the ancestor of the current chapter,
   or the current item itself if the section has no children) */
.chapter-rail .wp-block-page-list > .wp-block-pages-list__item.current-menu-ancestor,
.chapter-rail .wp-block-page-list > .wp-block-pages-list__item.current-menu-item {
  display: list-item;
}
/* Make sure the current section's nested chapter list shows */
.chapter-rail .wp-block-page-list > .current-menu-ancestor .wp-block-navigation__submenu-container,
.chapter-rail .wp-block-page-list > .current-menu-ancestor ul {
  display: block;
}
/* Hide the section's OWN title line at the top of the rail: it repeats the
   kicker, and the section pages are empty containers we don't link to.
   Keeps the nested chapter list. Two selectors cover Page List markup
   differences across versions; the non-matching one does nothing. */
.chapter-rail .wp-block-page-list > .current-menu-ancestor > .wp-block-pages-list__item__link,
.chapter-rail .wp-block-page-list > .current-menu-ancestor > a {
  display: none;
}

/* Rule line above the "In this section" rail */
.chapter-rail {
  border-top: 1px solid var(--wp--preset--color--carbon, #16191D);
  padding-top: 24px;
}

/* "In this section" heading — 24px */
.chapter-rail .wp-block-heading {
  font-size: 24px;
}

/* ==========================================================
   BACK LINK + PREV/NEXT  (plain, no highlight)
   ========================================================== */
.chapter-header a.back-link,
.chapter-prevnext a {
  font-weight: 400;
  background-color: transparent;
  color: var(--wp--preset--color--carbon);
  text-decoration: underline;
  padding: 0;
}
.chapter-header a.back-link:hover,
.chapter-prevnext a:hover { text-decoration-thickness: 2px; }
.back-link[hidden] { display: none; }
.chapter-prevnext {
  border-top: 1px solid var(--wp--preset--color--carbon);
  padding-top: 1rem;
  margin-top: 2.5rem;
  font-size: var(--wp--preset--font-size--small);
}

/* ==========================================================
   STANDARD PROSE PAGES (About, and future text pages)
   Chapter typography, minus the chapter grid + rail. Wrap the
   page content in a Group with the class "hn-page".
   ========================================================== */

/* Paragraph-to-paragraph rhythm. Floor = body token (28), opens to 40 wide. */
.hn-page > * { margin-top: 0; margin-bottom: clamp(28px, 3vw, 40px); }

.hn-page p {
  font-size: clamp(20px, 16px + 0.35vw, 24px);
  line-height: 1.4;
  letter-spacing: 0.025rem;
}

/* Section headings: big break above, bound tighter to the paragraph below.
   Clamp slope steepened so it actually reaches 40px by ~1440px. */
.hn-page h2 {
  font-size: clamp(28px, 22.7px + 1.2vw, 40px);
  font-weight: 600;
  margin-top: clamp(56px, 6vw, 80px);      /* section gap above (jumper lg-rg) */
  margin-bottom: clamp(20px, 2vw, 28px);   /* heading -> its paragraph */
}

/* Optional lead paragraph — add class "has-body-lg-font-size" to a paragraph */
.hn-page .has-body-lg-font-size {
  font-size: clamp(24px, 18px + 0.6vw, 32px);
  line-height: 1.43;
  letter-spacing: 0.035rem;
}

/* Body links — teal, matching chapters */
.hn-page p a {
  color: var(--wp--preset--color--teal);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  font-weight: 500;
}
.hn-page p a:hover {
  color: var(--wp--preset--color--carbon);
  text-decoration-thickness: 3px;
  font-weight: 700;
}

/* Page title — token-aligned (60 -> 96), centred to the body column,
   min 100px clear of the nav above. Chapter titles keep their own, more
   specific .chapter-header rule and are untouched. */
.wp-block-post-title,
.hn-page h1 {
  font-size: clamp(60px, 49.3px + 2.43vw, 96px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.015em;
  margin: clamp(100px, 8vw, 140px) auto 1.5rem;    /* top gap, centred, 24px below */
  max-width: var(--wp--style--global--content-size);
}

/* Small-width gutters: title + body share one generous side margin, so
   their edges stay aligned (~a column's worth at tablet). */
@media (max-width: 1000px) {
  .wp-block-post-title,
  .hn-page h1 { padding-inline: clamp(24px, 8vw, 80px); }
  .hn-page   { padding-inline: clamp(24px, 8vw, 80px) !important; } /* beats has-global-padding */
}

/* ==========================================================
   FOOTNOTES — single column, aligned to body band, inverting :target
   ========================================================== */
.wp-block-footnotes {
  box-sizing: border-box;
  width: 100%;
  max-width: 2300px;
  margin: 3rem auto 0;
  padding-inline: clamp(20px, 4vw, 80px);
  list-style: none;
  counter-reset: fn;
  font-size: var(--wp--preset--font-size--small);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 0.75rem;
}
.wp-block-footnotes li {
  grid-column: 4 / 12;
  counter-increment: fn;
  position: relative;
  background-color: var(--wp--preset--color--mint);
  color: var(--wp--preset--color--carbon);
  border: 1px solid var(--wp--preset--color--carbon);
  padding: 1rem 1.25rem 1rem 2.75rem;
  margin: 0;
  line-height: 1.4;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.wp-block-footnotes li::before {
  content: counter(fn); position: absolute; left: 1.25rem; font-weight: 700;
}
.wp-block-footnotes li a { color: var(--wp--preset--color--carbon); text-decoration: none; }
.wp-block-footnotes li a:hover { text-decoration: underline; }
.wp-block-footnotes li:target { background-color: var(--wp--preset--color--carbon); color: var(--wp--preset--color--platinum); }
.wp-block-footnotes li:target a { color: var(--wp--preset--color--platinum); }

@media (max-width: 1000px) {
  .wp-block-footnotes { grid-template-columns: 1fr; padding-inline: clamp(24px, 8vw, 80px); column-gap: 0; }
  .wp-block-footnotes li { grid-column: 1; }
}

/* ==========================================================
   TABLET & MOBILE
   ========================================================== */
@media (max-width: 1000px) {
  .chapter-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding-inline: clamp(24px, 8vw, 80px);
  }
  .chapter-grid .chapter-header,
  .chapter-grid .chapter-rail,
  .chapter-grid .chapter-content {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
  }
  .chapter-grid .chapter-rail { margin: 2rem 0; }
  .chapter-header .wp-block-post-title,
  .chapter-header h1 { font-size: clamp(44px, 40px + 2vw, 64px); }

  .wp-block-footnotes {
    grid-template-columns: 1fr;
    padding-inline: clamp(24px, 8vw, 80px);
    column-gap: 0;
  }
  .wp-block-footnotes li:nth-child(odd),
  .wp-block-footnotes li:nth-child(even) { grid-column: 1; }
}

/* ==========================================================
   NAV HAMBURGER BREAKPOINT + "MENU" TOGGLE
   WordPress switches to the overlay menu at 600px. This lifts that
   to 1200px by forcing the block's own "mobile" behaviour in the
   600–1200 range: reveal the toggle, hide the flat menu until it is
   opened. The overlay's open/close JS is untouched, so it just works.

   Requires, in the Navigation block's settings:
     - Overlay Menu = "Mobile"
     - "Show icon button" UNTICKED  (renders the word "Menu" instead
       of the hamburger icon; also gives "Close" in the overlay)

   Change 1199.98px to move the breakpoint (not below ~1140px).
   ========================================================== */
@media (max-width: 1199.98px) {
  /* "Menu" stays on the nav row, aligned right, at the row's 80px
     height. No repositioning, so the masthead's border lines stay. */
  .site-header .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    min-height: 80px;
    padding: 0 1.5rem;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wp--preset--color--carbon);
  }

  /* Keep the flat menu hidden until the overlay opens */
  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}

/* ==========================================================
   SITE FOOTER — hatched band, two bordered panels
   Left: utility links (dividered).  Right: colophon.
   Panels sit in the body content columns (4–12) via the same grid.
   ========================================================== */
.site-footer {
  box-sizing: border-box;
  width: 100%;
  max-width: 2300px;
  margin-inline: auto;
  border-top: 1px solid var(--wp--preset--color--carbon);
  background-color: var(--wp--preset--color--mint);
  /* Diagonal hatch as a tiling SVG. Every tile is pixel-identical, so the
     lines keep an even weight. (A repeating-linear-gradient renders 1px
     diagonals unevenly, because each line lands differently on the pixel
     grid.) Density = the 14 in width/height, raise both for sparser;
     line colour = the %23... hex (carbon now, %23DCDED7 for alabaster);
     slant = the path direction. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M-1,1 l2,-2 M0,14 l14,-14 M13,15 l2,-2' stroke='%2316191D' stroke-width='1'/%3E%3C/svg%3E");
  padding-block: clamp(40px, 5vw, 80px);
  padding-inline: clamp(20px, 4vw, 80px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
}

/* Both panels sit in the content band (cols 4–12), lined up with the body */
.footer-row {
  grid-column: 4 / 12;
  max-width: none;
  margin-inline: 0;
  display: flex;
  gap: 32px;
  align-items: stretch;      /* equal-height panels; use "flex-start" for natural heights */
}

/* --- Left panel: utility links, dividered --- */
.footer-nav {
  flex: 0 0 auto;
  min-width: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--wp--preset--color--mint);
  border: 1px solid var(--wp--preset--color--carbon);
  font-size: var(--wp--preset--font-size--small);
  display: flex;
  flex-direction: column;    /* let the rows share the panel height */
}
.footer-nav li {
  margin: 0;
  flex: 1 1 0;               /* equal-height rows filling the panel */
  display: flex;
  align-items: center;       /* centre each link in its row */
}
.footer-nav li:not(:last-child) {
  border-bottom: 1px solid var(--wp--preset--color--carbon);
}
.footer-nav a {
  flex: 1;                   /* fill the row width */
  padding: 0.85rem 1.5rem;
  color: var(--wp--preset--color--carbon);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: 500;
}
.footer-nav a:hover { text-decoration-thickness: 2px; }

/* --- Right panel: colophon --- */
.footer-colophon {
  flex: 1 1 auto;
  background-color: var(--wp--preset--color--mint);
  border: 1px solid var(--wp--preset--color--carbon);
  padding: 2rem;
  font-size: var(--wp--preset--font-size--small);
}
.footer-colophon p { margin: 0 0 0.85rem 0; line-height: 1.5; }
.footer-colophon p:last-child { margin-bottom: 0; }
.footer-colophon a {
  color: var(--wp--preset--color--carbon);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: 500;
}
.footer-colophon a:hover { text-decoration-thickness: 2px; }

/* Footer stacks at the same point the nav becomes the Menu button */
@media (max-width: 1199.98px) {
  .site-footer {
    grid-template-columns: 1fr;
    padding-inline: 16px;
    column-gap: 0;
  }
  .footer-row {
    grid-column: 1;
    flex-direction: column;
  }
  .footer-nav { width: 100%; }
}

/* ==========================================================
   HOMEPAGE
   Full-width bands (mint or hatch); content capped by .home-inner.
   Building top-down: 1) hero   [2) trap/plan  3) support to follow]
   ========================================================== */

/* Content width shared by every homepage band */
.home-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 2300px;
  margin-inline: auto;
  padding-inline: clamp(24px, 8vw, 200px);
}

/* Front page runs full width. WordPress's constrained layout otherwise caps
   content to ~57.5rem; here we clear that cap and the global side padding
   down the whole front-page content chain, so the bands span the frame and
   .home-inner alone sets the content width. No "Full width" block alignment
   needed — and it must NOT be applied, or the bands overflow the frame. */
body.home main,
body.home .wp-block-post-content,
body.home .wp-block-post-content > * {          /* main, content wrapper, each band */
  max-width: none !important;
  padding-inline: 0 !important;                 /* bands bleed full width; padding lives on .home-inner */
}
body.home .home-inner > * {
  max-width: none !important;
}
body.home .home-inner {
  max-width: 2300px !important;
  margin-inline: auto !important;
}

/* Inline highlight box (the carbon/platinum device from the logo). Colours
   are set per use with the editor's Highlight format; this only adds the
   padding and lets a highlight wrap cleanly across lines. Applies site-wide. */
mark {
  padding: 0.08em 0.35em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Offset-shadow button, reused across the homepage. Apply the class
   "btn-offset" to a Button block, then set its Background and Text colours
   in the block (Tiger orange fill + Carbon text for the primary action).
   This handles the square shape, border, hard shadow and press effect. */
.btn-offset .wp-block-button__link {
  display: inline-block;
  border: 1px solid var(--wp--preset--color--carbon);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--wp--preset--color--carbon);
  padding: 0.85rem 1.6rem;
  font-size: clamp(18px, 1.4vw, 28px);   /* scales with the body copy — lead-paragraph size at wide, 18px at narrow */
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-offset .wp-block-button__link:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--wp--preset--color--carbon);
}

/* Focus state — a thick tiger-orange ring on keyboard focus, site-wide. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 4px solid var(--wp--preset--color--orange);
  outline-offset: 2px;
}

/* --- Hero: text column on the left, brick-map as a background on the right.
   Using a background sidesteps WordPress's grid/flex/constrained layout
   entirely — which is what kept undermining the two-column version. The map
   is decorative here (its "the money is there" message is in the copy), so
   nothing is lost by dropping the <img>. --- */
.home-hero {
  background-color: var(--wp--preset--color--mint);
}
.hero-top {
  display: flex !important;                       /* overrides the Group's layout; one child (the text) */
  flex-direction: column;
  align-items: flex-start;
  min-height: clamp(620px, 76vh, 1040px);         /* hero band height — the map scales against this */
  padding-block: clamp(56px, 6vw, 112px);
  background-image: url("/wp-content/uploads/2026/09/money-is-there-map.svg");
  background-repeat: no-repeat;
  background-position: right center;              /* map sits on the right */
  background-size: auto 88%;                      /* map height = 88% of the band; raise for a bigger map */
}
.hero-left {
  flex: 1;                                        /* fill the band height */
  max-width: clamp(440px, 40vw, 760px) !important; /* wide enough for the headline on one line, still leaving the map room */
  margin-inline: 0 !important;                    /* beats the constrained auto-centering */
  display: flex;
  flex-direction: column;
  justify-content: space-between;                 /* headline at top, statement toward the base */
  gap: clamp(56px, 5vw, 120px);
}
/* Hero copy at a comfortable fixed size (the earlier aggressive scaling made
   it too small). */
.hero-headline-block p,
.home-hero .hero-statement p {
  font-size: clamp(18px, 1.4vw, 28px);            /* body-large at wide, eases down to 18px on narrow */
}

/* Minty-cream backing on each text sub-block (not the whole column), so where
   the copy overlaps the map it stays readable. */
.hero-headline-block,
.hero-statement {
  background-color: var(--wp--preset--color--mint);
  padding: 0.5rem 0.75rem;
}

.hero-headline {
  margin: 0 0 1.5rem 0;
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 700;
  line-height: 1.12;                 /* dial up if the boxed line still touches the one above */
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
/* Snug the highlight box at headline size — the site-wide em padding is too
   generous on 76px text. Near-zero top/bottom, a little on the sides. */
.hero-headline mark {
  padding: 0.02em 0.28em;
}
.hero-headline-block p { margin: 0 0 1rem 0; line-height: 1.4; }
/* Hero CTA: primary button + plain download link, side by side */
.hero-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.hero-cta p { margin: 0; }
.hero-cta .wp-block-buttons { margin: 0; }
.hero-cta a:not(.wp-block-button__link) {
  font-weight: 500;
  color: var(--wp--preset--color--carbon);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.home-hero .hero-quote,
.home-hero .hero-statement h2 {
  margin: 0 0 1.25rem 0;
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 500;
  line-height: 1.08;   /* forced tight — beats the theme's default H2 line-height */
}
.hero-statement p { line-height: 1.4; }

/* When the column narrows, stack the CTA so the download link sits under the
   button rather than crowding it. */
@media (max-width: 1200px) {
  .hero-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* Below this width the side-by-side no longer holds. Rather than stack a
   large map under the copy, drop the map and let the text run full width,
   capped for readability. The "the money is there" message is carried by
   the headline, so nothing essential is lost on small screens. */
@media (max-width: 820px) {
  .hero-top {
    display: block !important;
    background-image: none;              /* hide the map on small screens */
    min-height: 0;
  }
  .hero-left {
    max-width: 640px !important;
    gap: 56px;
  }
}

/* ==========================================================
   HOMEPAGE — MIDDLE SECTION (The Trap / The Plan / The Facts)
   Hatch band, ruled top and bottom, holding one bordered card.
   The card is a container (container-type: inline-size); the big
   display type is sized in cqi so it tracks the card width, and the
   card scales with the viewport up to a wide cap.

   --cell-pad-x / --cell-pad-y drive the cell padding AND the negative
   margins that pull the corner titles and chips flush, so retuning the
   padding keeps the corners aligned automatically.

   carbon #16191D · mint cream #EAF1EF · tiger orange #F98701 · rosewood #C72351
   ========================================================== */
.home-trap {
  background-color: var(--wp--preset--color--mint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M-1,1 l2,-2 M0,14 l14,-14 M13,15 l2,-2' stroke='%2316191D' stroke-width='1'/%3E%3C/svg%3E");
  border-top: 1px solid var(--wp--preset--color--carbon);      /* item 3 */
  border-bottom: 1px solid var(--wp--preset--color--carbon);   /* item 3 */
  padding-block: clamp(48px, 6vw, 112px);
  padding-inline: clamp(24px, 8vw, 200px);   /* item 5 — same inset as the hero's .home-inner */
}

/* Full-width safety net: forces any .home-trap full width and flattens a
   nested duplicate so it can't pinch the card. Harmless once the editor
   duplicate is removed. */
body.home .home-trap {
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: clamp(24px, 8vw, 200px) !important;   /* beats has-global-padding */
}
body.home .home-trap .home-trap {
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
/* .home-trap > :not(.trap-card) { display: none !important; }  <- stray-block guard */

/* The card. Its edges now line up with the hero content above: the band
   inset above matches .home-inner's padding, and this max-width matches
   .home-inner's content cap (2300 minus that inset, doubled). The internal
   sizes are all cqi-based, so they scale with this wider card automatically.
   --body-pad-* set the reading padding on the Trap/Plan body copy (item 1). */
.trap-card {
  --cell-pad-y: clamp(28px, 4cqi, 72px);
  --cell-pad-x: clamp(24px, 3cqi, 56px);
  --body-pad-left: clamp(24px, 4cqi, 60px);      /* item 1 — left reading padding, up to 60px */
  --body-pad-right: clamp(40px, 12cqi, 200px);   /* item 1 — right reading padding, up to 200px */
  container-type: inline-size;
  width: 100%;
  max-width: calc(2300px - clamp(48px, 16vw, 400px));   /* item 5 — matches the hero content width */
  margin-inline: auto;                    /* centred; set to 0 to pin left (see footer note) */
  background-color: var(--wp--preset--color--mint);
  border: 1px solid var(--wp--preset--color--carbon);
  border-bottom: 4px solid var(--wp--preset--color--carbon);   /* item 13 */
}
.trap-card > * {
  max-width: none !important;
  margin: 0 !important;
}

/* Rows: flex, divided by a rule. gap:0 removes WordPress's default 24px flex
   gap between cells — that gap was holding The Trap column off the divider. */
.trap-row {
  display: flex !important;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0 !important;
  border-bottom: 1px solid var(--wp--preset--color--carbon);
}
.trap-row:last-child { border-bottom: none; }
.trap-row > * {
  max-width: none !important;
  margin: 0 !important;
  padding: var(--cell-pad-y) var(--cell-pad-x);
  min-width: 0;
}

/* Row 1 — Trap | Plan: equal columns, vertical divider */
.trap-diagnosis > * { flex: 1 1 0; }
.trap-diagnosis > * + * { border-left: 1px solid var(--wp--preset--color--carbon); }
.trap-col { position: relative; }
.trap-col strong { font-weight: 700; }

/* Tile titles (item 5): single outlined box, ~48px, tracked, uppercase.
   DOM text stays sentence case; text-transform does the caps for SR safety. */
.tile-title {
  display: block;                        /* block, so the chip below drops to a new line */
  width: fit-content;
  margin: 0;
  font-weight: 700;
  font-size: clamp(28px, 3cqi, 48px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.4em 0.55em 0.4em 0.7em;     /* extra left pad offsets the tracking */
  border: 1px solid var(--wp--preset--color--carbon);
  border-top: none;                      /* the card/row border above serves as the top */
  border-left: none;                     /* the card border/divider serves as the left — avoids a doubled line */
}

/* Item 1 — anchor the Trap/Plan titles (and their chips) flush into the
   block's top-left corner. WordPress's constrained layout was auto-centring
   these, so neutralise that first, then drop the cell's top and left padding
   so the title and chip sit hard in the corner. */
.trap-col > * {
  margin-inline: 0 !important;
  max-width: none !important;
}
.trap-diagnosis > .trap-col {
  padding-top: 0;
  padding-left: 0;
  padding-right: var(--body-pad-right);   /* item 1 — wider right padding for reading width */
}
/* Body copy indented back to the reading margin. Every paragraph carries the
   WordPress class wp-block-paragraph, so target by what it ISN'T (the chips
   and the FALSE stamp keep their corner/absolute positioning). */
.trap-diagnosis > .trap-col > p:not(.chip-carbon):not(.chip-orange):not(.false-stamp) {
  padding-left: var(--body-pad-left);
}
.trap-col > .tile-title {
  margin: 0 !important;
}
/* Item 1 — "The facts" is a direct card child, already at the card edge, so
   it just sits flush in the corner of the facts block. */
.trap-card > .tile-title {
  margin: 0 !important;
}

/* Label chips (shared) */
.chip-carbon,
.chip-orange,
.chip-label {
  display: inline-block;
  width: fit-content;
  margin: 0 0 1.5rem 0 !important;
  padding: 0.2em 0.7em;
  font-weight: 500;
  line-height: 1.3;
}
.chip-carbon { background: var(--wp--preset--color--carbon); color: var(--wp--preset--color--platinum); }
.chip-orange {
  background: #F98701;
  color: var(--wp--preset--color--carbon);
  border: 1px solid var(--wp--preset--color--carbon);          /* item 10 */
}
.chip-label {
  background: #F98701;
  color: var(--wp--preset--color--carbon);
  border: 1px solid var(--wp--preset--color--carbon);
  font-size: clamp(16px, 1.75cqi, 28px);   /* 16px min, up to 28px on wide desktop */
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Item 2 — Diagnosis / Way out chips sit on their own line directly under the
   title box, flush-left in the corner (the cell's zeroed left padding puts
   them there). */
.trap-col > .chip-carbon,
.trap-col > .chip-orange {
  display: block;                        /* own line, directly under the title */
  width: fit-content;
  margin: 0 0 1.5rem 0 !important;
}

/* Item 3 — FALSE stamp sits in the right padding gutter (beside the lead,
   not over it). Nudge `top`/`right` to taste. */
.false-stamp {
  position: absolute;
  top: clamp(120px, 15cqi, 190px);
  right: clamp(20px, 4cqi, 56px);        /* sits within the ~200px right padding, clear of the text */
  margin: 0 !important;
  transform: rotate(-8deg);
  border: 2px solid #C72351;
  color: #C72351;
  padding: 0.2em 0.6em;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Item 4 — decorative corner tiles: three touching 60px cells, flush into the
   bottom-right corner. The tile graphic draws only its top and left edges plus
   the two inner dividers — the card border (right) and the row border (bottom)
   complete the grid, so no lines double up. */
.trap-diagnosis > *,
.trap-stats { position: relative; }
.trap-diagnosis > *,
.trap-stats > * {
  padding-bottom: calc(var(--cell-pad-y) + 60px);   /* reserve clear space below text for the 60px tiles */
}
.trap-diagnosis > .trap-col::after,
.trap-stats::after {
  content: "";
  position: absolute;
  right: 0;                              /* flush into the bottom-right corner */
  bottom: 0;
  width: 180px;                          /* three touching 60px cells */
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='60'%3E%3Cpath fill='none' stroke='%2316191D' d='M0 .5H180M.5 0V60M60 0V60M120 0V60'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Body copy: match the hero/lead paragraph size, scale down on narrow screens.
   Line spacing eased a touch for item 5. */
.trap-col p,
.stat-body,
.example-panel > p:last-child,
.cta-left > p {
  font-size: clamp(18px, 1.4vw, 28px);
  line-height: 1.5;
}
.trap-col p { margin: 0 0 1.25rem 0; }
.trap-col p:last-child { margin-bottom: 0; }

/* Row 2 — three stats. Figures 140px at the card's wide cap (item 6), sized
   in cqi so they stay inside their column. */
.trap-stats { flex-wrap: wrap; }
.trap-stats > * { flex: 1 1 0; min-width: 200px; }
.stat-num {
  margin: 0 0 clamp(16px, 1.6cqi, 28px) 0 !important;   /* item 3 — more gap above the label */
  font-size: clamp(48px, 8.75cqi, 140px);
  font-weight: 700;
  line-height: 0.9;
  text-transform: uppercase;
}
.stat-label {
  margin: 0 0 1rem 0 !important;
  font-size: clamp(18px, 2cqi, 32px);    /* item 3 — up to 32px on wide desktop */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.stat-body { margin: 0 !important; }

/* Row 3 — narrow label | orange panel */
.trap-example > .example-left {
  flex: 0 0 auto;
  width: clamp(240px, 26cqi, 415px);     /* item 4 — wider box, up to 415px */
  max-width: 415px !important;
  display: flex;
  align-items: center;
}
.example-left p {
  margin: 0 !important;
  font-size: clamp(28px, 3cqi, 48px);    /* item 4 — up to 48px */
  font-weight: 700;
  line-height: 1.1;
}
.trap-example > .example-panel {
  flex: 1 1 auto;
  position: relative;                     /* anchor for the "For example" chip (item 11) */
  padding-top: clamp(52px, 4.5cqi, 80px); /* item 2/4.1 — clears the absolute FOR EXAMPLE chip, esp. at narrow widths */
  background-color: #F98701;
  color: var(--wp--preset--color--carbon);
  border-left: 1px solid var(--wp--preset--color--carbon);   /* item 6 — rule down the left of the orange panel */
}
/* Item 5 — the panel is a constrained group, so WordPress was centring the
   supporting sentence. Neutralise that so every line left-aligns to the panel
   edge. (The chip is absolutely positioned, so this doesn't affect it.) */
.example-panel > * {
  margin-inline: 0 !important;
  max-width: none !important;
}
/* Keep the supporting sentence to a readable measure on the now-wider card */
.example-panel > p:last-child { max-width: 62ch !important; }
/* Item 11 — "For example" chip pinned to the panel's top-left corner */
.example-panel > .chip-label {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 !important;
}
.example-figure {
  margin: 0 0 0.5rem 0 !important;
  font-size: clamp(48px, 8.75cqi, 140px);
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
}
.example-sub {
  margin: 0 0 1rem 0 !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Row 4 — CTA content | cover image */
.trap-cta > .cta-left { flex: 1 1 auto; }
.trap-cta > .cta-cover {
  flex: 0 0 auto;
  max-width: 300px !important;
  display: flex;
  align-items: flex-start;               /* item 3 — cover stays at the top; a tall title no longer pushes it down */
}
.trap-cta .cta-cover img,
.trap-cta > .cta-cover img { width: 100%; height: auto; display: block; }

/* CTA title (item 7): ~60px / 1.2 line-height */
.cta-title {
  margin: 0 0 1.5rem 0 !important;
  font-size: clamp(32px, 3.75cqi, 60px);
  font-weight: 700;
  line-height: 1.2;
}
/* Highlight (item 8): carbon block + mint text, matching the hero */
.cta-title mark {
  background-color: var(--wp--preset--color--carbon);
  color: var(--wp--preset--color--mint);
  padding: 0.02em 0.28em;
}
.cta-left > p { margin: 0 0 2rem 0 !important; max-width: 48ch; }

/* Item 6 — the button row sits inside the constrained .cta-left group, which
   WordPress otherwise centres (margin: 0 auto). This pins it left so the
   button lines up with the heading and invite line above it. */
.trap-cta .hero-cta {
  max-width: none !important;
  margin-inline: 0 !important;
}

/* Read-the-report button (item 12): mint fill + carbon text, scoped to the
   trap CTA so the hero's orange button is untouched. */
.trap-cta .btn-offset .wp-block-button__link {
  background-color: var(--wp--preset--color--mint) !important;
  color: var(--wp--preset--color--carbon) !important;
}

/* Stack on small screens */
@media (max-width: 820px) {
  .trap-row { flex-direction: column; }
  .trap-diagnosis > * + * {
    border-left: none;
    border-top: 1px solid var(--wp--preset--color--carbon);
  }
  .trap-example > .example-left { max-width: none !important; }
  .trap-cta > .cta-cover { display: none; }   /* item 4.2 — hide the oversized cover when stacked */
  .false-stamp {
    position: static;
    display: inline-block;
    margin-top: 1rem !important;
  }
  /* Drop the reserved tile space and hide the decorative tiles once stacked */
  .trap-diagnosis > *,
  .trap-stats > * { padding-bottom: var(--cell-pad-y); }
  .trap-diagnosis > .trap-col::after,
  .trap-stats::after { display: none; }
}

/* ==========================================================
   HOMEPAGE — FOOTER ALIGNMENT (item 6)
   On the homepage the body content is the centred trap card, not the
   12-column chapter grid, so the footer's grid placement made it a
   different width. Here the footer becomes a full-width hatch band with its
   content in the SAME centred column as the card, panels hard-left within it,
   so the two line up. Chapter-page footers are untouched.

   To pin everything left instead of centred (hatch reveal on the right only),
   set margin-inline: 0 on BOTH .trap-card (above) and .footer-row (here).
   ========================================================== */
body.home .site-footer {
  max-width: none;
  display: block;
  padding-inline: clamp(24px, 8vw, 200px);
}
body.home .site-footer .footer-row {
  max-width: calc(2300px - clamp(48px, 16vw, 400px));   /* same column as the card + hero */
  margin-inline: auto;
}

/* ==========================================================
   HOMEPAGE — SUPPORT BAND (Donate / Subscribe)
   Mint band between the trap card and the footer. One bordered card split
   into two panels by a vertical divider, at the same content width as the
   hero and trap card. It carries no band border of its own — the trap's
   bottom rule and the footer's top rule already frame it.
   ========================================================== */
.home-support {
  background-color: var(--wp--preset--color--mint);
  padding-block: clamp(48px, 6vw, 112px);
  padding-inline: clamp(24px, 8vw, 200px);
}
body.home .home-support {
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: clamp(24px, 8vw, 200px) !important;   /* beats has-global-padding */
}

/* The card — same width mechanism as the trap card, so its edges line up */
.support-card {
  container-type: inline-size;
  width: 100%;
  max-width: calc(2300px - clamp(48px, 16vw, 400px));
  margin-inline: auto;
  background-color: var(--wp--preset--color--mint);
  display: flex !important;
  flex-wrap: nowrap;
  gap: 0 !important;                     /* kill WordPress's default flex gap */
  align-items: stretch;
}
.support-card > * { max-width: none !important; margin: 0 !important; }

.support-panel {
  flex: 1 1 0;
  min-width: 0;
  padding: clamp(28px, 4cqi, 72px) clamp(24px, 3cqi, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2cqi, 1.75rem);
}
.support-panel > * { max-width: none !important; margin: 0 !important; }
/* Push the action to the bottom of each panel so the two line up */
.support-panel > .wp-block-buttons,
.support-panel > .support-form { margin-top: auto !important; }

/* Icon above each panel. Centred in its panel (item 6). For left-aligned to
   the title instead, change align-self to flex-start. */
.support-icon { align-self: center; }
.support-icon img {
  height: clamp(80px, 10cqi, 140px);
  width: auto;
  display: block;
}

.support-title {
  font-size: clamp(24px, 2.6cqi, 40px);
  font-weight: 700;
  line-height: 1.1;
}
.support-panel p {
  font-size: clamp(18px, 1.4vw, 28px);
  line-height: 1.5;
  max-width: 42ch;
}

/* Buttons (item 3): both use the secondary style — mint fill, carbon text,
   1px border and the offset shadow, matching the 'Read the report' button.
   Donate is a Button block (.btn-offset); Subscribe is the form's button. */
.home-support .btn-offset .wp-block-button__link {
  background-color: var(--wp--preset--color--mint) !important;
  color: var(--wp--preset--color--carbon) !important;
}

/* Subscribe form (item 4): label, then the field, then the button beneath it.
   Point the form's `action` at your mailing-list provider (Mailchimp,
   Buttondown, etc.), or swap the whole HTML block for that provider's embed. */
.support-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}
.support-form label {                    /* item 3 — matches the body paragraph, scales like the buttons */
  font-weight: 400;
  font-size: clamp(18px, 1.4vw, 28px);
  line-height: 1.5;
}
.support-form input[type="email"] {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: clamp(18px, 1.4vw, 28px);   /* item 4 — matches the paragraph, so the hint text does too */
  color: var(--wp--preset--color--carbon);
  background-color: var(--wp--preset--color--mint);
  border: 1px solid var(--wp--preset--color--carbon);
  border-bottom: 4px solid var(--wp--preset--color--carbon);   /* heavier bottom rule */
  border-radius: 0;
}
.support-form input[type="email"]::placeholder {   /* darker hint text */
  color: rgba(22, 25, 29, 0.65);
  opacity: 1;
}
.support-form button {                   /* secondary style, matching Donate; sits below the field */
  align-self: flex-start;
  margin-top: clamp(1rem, 2cqi, 1.75rem);
  border: 1px solid var(--wp--preset--color--carbon);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--wp--preset--color--carbon);
  padding: 0.85rem 1.6rem;
  font-family: inherit;
  font-size: clamp(18px, 1.4vw, 28px);   /* matches the Donate button */
  font-weight: 700;
  color: var(--wp--preset--color--carbon);
  background-color: var(--wp--preset--color--mint);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.support-form button:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--wp--preset--color--carbon);
}

/* Stack at the same breakpoint as the rest of the homepage */
@media (max-width: 820px) {
  .support-card { flex-direction: column; }
  .support-panel + .support-panel {
    border-top: 1px solid var(--wp--preset--color--carbon);   /* separates the stacked panels */
  }
}

/* ==========================================================
   PRINT — strip the site furniture, print the chapter only
   ========================================================== */
@media print {
  /* Hide everything that isn't the chapter content */
  .wp-block-template-part,          /* header + footer template parts */
  .site-header,
  .site-footer,
  .chapter-rail,                    /* "In this section" rail */
  .hn-chapter-actions,              /* Share / Print / Download */
  .back-link,
  #wpadminbar,                      /* WP admin bar if logged in */
  .skip-link {
    display: none !important;
  }

  /* Drop the site frame + background texture */
  .wp-site-blocks {
    border: none !important;
    margin: 0 !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Let the body content run full width down the page */
  .chapter-grid {
    display: block !important;
    max-width: none !important;
    padding: 0 !important;
  }
  .chapter-grid .chapter-header,
  .chapter-grid .chapter-content {
    grid-column: auto !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* Tidy type for paper: black, no fancy sizing */
  .chapter-content p,
  .chapter-content li {
    font-size: 12pt !important;
    line-height: 1.4 !important;
    color: #000 !important;
  }

  /* Body links: show the URL after each so a printed page is still usable */
  .chapter-content a[href]:not(.back-link)::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #000;
  }

  /* Avoid awkward breaks */
  h1, h2, h3 { break-after: avoid; }
  figure, .wp-block-pullquote { break-inside: avoid; }

  /* Footnotes: plain, no inverted :target box on paper */
  .wp-block-footnotes li {
    background: #fff !important;
    color: #000 !important;
    border: none !important;
    border-top: 1px solid #000 !important;
    padding-left: 2.75rem !important;
  }
}
::selection      { background: #F98701; color: #16191D; text-shadow: none; }
::-moz-selection { background: #F98701; color: #16191D; text-shadow: none; }

/* Arrivals from a shared text-fragment link, styled to match */
::target-text    { background: #F98701; color: #16191D; }

/* ==========================================================
   NEWSLETTER FORM (MC4WP)
   Matched to the Subscribe panel: mint field with a heavy bottom
   rule, secondary (mint) button with the offset shadow. Focus rings
   come from the site-wide :focus-visible rule higher up.
   ========================================================== */
.mc4wp-form {
    color: var(--wp--preset--color--carbon, #16191D);
}

/* Email field */
.mc4wp-form .hn-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.mc4wp-form .hn-field label {
    font-weight: 400;
    font-size: clamp(18px, 1.4vw, 28px);
    line-height: 1.5;
}
.mc4wp-form input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    font-family: inherit;
    font-size: clamp(18px, 1.4vw, 28px);
    color: var(--wp--preset--color--carbon, #16191D);
    background-color: var(--wp--preset--color--mint, #EAF1EF);
    border: 1px solid var(--wp--preset--color--carbon, #16191D);
    border-bottom: 4px solid var(--wp--preset--color--carbon, #16191D);
    border-radius: 0;
}
.mc4wp-form input[type="email"]::placeholder {
    color: rgba(22, 25, 29, 0.65);
    opacity: 1;
}

/* Consent (fine print stays small, not field-label size) */
.mc4wp-form .hn-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
}
.mc4wp-form .hn-consent label {
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.4;
}
.mc4wp-form .hn-consent input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--wp--preset--color--carbon, #16191D);
}
.mc4wp-form .hn-consent a {
    color: var(--wp--preset--color--carbon, #16191D);
    text-underline-offset: 2px;
}

/* Submit — secondary style (mint fill, carbon text) */
.mc4wp-form input[type="submit"] {
    padding: 0.85rem 1.6rem;
    font-family: inherit;
    font-size: clamp(18px, 1.4vw, 28px);
    font-weight: 700;
    color: var(--wp--preset--color--carbon, #16191D);
    background-color: var(--wp--preset--color--mint, #EAF1EF);
    border: 1px solid var(--wp--preset--color--carbon, #16191D);
    border-radius: 0;
    box-shadow: 5px 5px 0 var(--wp--preset--color--carbon, #16191D);
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.mc4wp-form input[type="submit"]:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 var(--wp--preset--color--carbon, #16191D);
}

/* Response messages */
.mc4wp-form .mc4wp-response {
    margin-top: 1rem;
    font-size: 0.95rem;
}