/* ==========================================================================
   The Go Network — shared nav + footer
   Base structure and CTAs from the Get Involved draft; logo mark and Mission
   Targets dropdown from the Mission Targets draft (single currentColor symbol).
   Properties are written explicitly so the nav renders identically on top of
   each page's own base stylesheet, which differ from one another.
   ========================================================================== */

/* The four drafts disagree on box-sizing: Mission Targets and Get Involved
   set *{box-sizing:border-box} globally, Homepage and About do not. The shared
   nav and footer therefore normalise it themselves, so they lay out identically
   on every page rather than inheriting each page's box model. */
.tgn-nav, .tgn-nav *,
.tgn-footer, .tgn-footer * { box-sizing: border-box; }

/* ---------- shared logo sprite ---------- */
.tgn-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- nav shell ---------- */
.tgn-nav {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--tgn-parchment-50);
  border-bottom: 1px solid var(--tgn-parchment-200);
  font-family: var(--font-body);
}
.tgn-nav__inner {
  max-width: var(--tgn-container-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 2.8vw, 40px);
  height: 80px;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 24px);
}

/* ---------- logo ---------- */
.tgn-nav__logo {
  display: flex;
  align-items: center;
  flex: none;
  color: #19153d;              /* carried from the Mission Targets draft */
  text-decoration: none;
}
.tgn-nav__logo:hover { color: #19153d; }
.tgn-nav__logo-svg {
  height: clamp(24px, 2.2vw, 32px);
  width: auto;
  display: block;
}

/* ---------- link list ---------- */
.tgn-nav__links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  gap: clamp(9px, 0.9vw, 20px);
}
.tgn-nav__links > li { margin: 0; padding: 0; list-style: none; }

.tgn-nav__link {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tgn-ink);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-bottom-color 150ms ease;
}
.tgn-nav__link:hover {
  color: var(--tgn-ink);
  border-bottom-color: var(--tgn-brick);
}

/* ---------- Mission Targets dropdown ---------- */
.tgn-nav__item { position: relative; }
.tgn-nav__link--menu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tgn-nav__caret { font-size: 10px; line-height: 1; }

.tgn-nav__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -24px;
  width: 360px;
  background: var(--tgn-parchment-50);
  border: 1px solid var(--tgn-parchment-200);
  border-radius: var(--tgn-radius-card);
  padding: 16px 8px;
  z-index: 90;
}
.tgn-nav__menu[hidden] { display: none; }

.tgn-nav__menu-link {
  display: block;
  padding: 9px 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tgn-ink);
  text-decoration: none;
  border-radius: var(--tgn-radius-badge);
  transition: background 150ms ease, color 150ms ease;
}
.tgn-nav__menu-link:hover {
  background: var(--tgn-parchment-100);
  color: var(--tgn-brick);
}

/* Two entries sit at parent weight inside the panel: Find Your Path and
   Overview. The five Mission Target pages nest under Overview as children,
   marked by an indent and a left rule, matching the mobile panel's sublist
   treatment. */
.tgn-nav__menu-link--primary { font-weight: 600; }

.tgn-nav__menu-sublist {
  list-style: none;
  margin: 2px 0 2px 20px;
  padding: 0;
  border-left: 2px solid var(--tgn-parchment-200);
}
.tgn-nav__menu-sublist li { margin: 0; padding: 0; list-style: none; }
.tgn-nav__menu-link--child {
  font-weight: 400;
  padding-left: 14px;
}
.tgn-nav__menu-link[aria-current="page"] {
  background: var(--tgn-parchment-100);
  color: var(--tgn-brick-label);
}

/* The trigger is a <button> rather than a link now, so it needs the button
   defaults neutralised to match the sibling .tgn-nav__link anchors. */
button.tgn-nav__link--menu {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-body);
  cursor: pointer;
  appearance: none;
}

/* ---------- CTAs ---------- */
.tgn-nav__ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex: none;
}
.tgn-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 22px;
  border-radius: var(--tgn-radius-pill);
  white-space: nowrap;
  text-decoration: none;
}
.tgn-nav__cta--filled {
  border: 1.5px solid transparent;
  background: var(--tgn-cta-surface);
  color: var(--tgn-cta-ink);
  transition: background 150ms ease, color 150ms ease;
}
.tgn-nav__cta--filled:hover {
  background: var(--tgn-cta-surface-hover);
  color: var(--tgn-cta-ink-hover);
}
.tgn-nav__cta--outline {
  border: 1.5px solid var(--tgn-parchment-300);
  background: transparent;
  color: var(--tgn-ink);
  transition: border-color 150ms ease;
}
.tgn-nav__cta--outline:hover {
  border-color: var(--tgn-ink);
  color: var(--tgn-ink);
}

/* ---------- F2: CTA cluster must be allowed to shrink ----------
   Was `flex: none`, which let the 250px cluster push the page to 488px wide
   inside a 320px viewport on all 15 pages. */
.tgn-nav__ctas { flex: 0 1 auto; min-width: 0; }

/* F2 as approved hid only the outline CTA ("Donate", verified from rendered
   text on all 15 pages) below 480px. Adding F1's 44px toggle changed the
   arithmetic and both CTAs have to go at xs:
     logo 201 + "Get Involved" 123 + toggle 44 + gaps 24 + padding 48 = 440
   against a 320px viewport. Dropping both leaves 201 + 44 + 12 + 48 = 305,
   which fits, and keeps the logo legible rather than shrinking it to ~120px.
   Both CTAs remain in the mobile panel and in the footer.
   Widened beyond the approved scope. */
@media (max-width: 479px) {
  .tgn-nav__ctas > .tgn-nav__cta { display: none; }
  .tgn-nav__cta { padding: 13px 16px; }
}
/* 480–1080: primary CTA returns alongside the toggle; outline stays out. */
@media (min-width: 480px) and (max-width: 1080px) {
  .tgn-nav__ctas > .tgn-nav__cta--outline { display: none; }
}

/* ---------- F6: tap targets (WCAG 2.2 SC 2.5.8) ----------
   CTAs measured 40px tall on every page; nav links 35px; logo 24px. */
.tgn-nav__cta { padding: 13px 22px; }          /* 40px -> 44px */
.tgn-nav__link { padding: 11px 0; }            /* 35px -> 44px */
.tgn-nav__logo { padding: 10px 0; }            /* 24px -> 44px hit area */

/* Matches the Get Involved draft's 1080px breakpoint. The hamburger fallback
   that no source file provided is now built by tgn-nav.js (audit F1). */
@media (max-width: 1080px) {
  .tgn-nav__links { display: none; }
}

/* ==========================================================================
   F1 — mobile disclosure navigation
   Markup is created by assets/js/tgn-nav.js from the existing link list, so
   no page carries nav markup of its own. Tokens only: ink, parchment, brick.
   ========================================================================== */

.tgn-nav__toggle {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid var(--tgn-parchment-300);
  border-radius: var(--tgn-radius-pill);
  background: transparent;
  color: var(--tgn-ink);
  cursor: pointer;
}
.tgn-nav__toggle:hover { border-color: var(--tgn-ink); }
.tgn-nav__toggle-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 18px;
}
.tgn-nav__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
}

/* Must come AFTER .tgn-nav__toggle's own `display: inline-flex`. Declared
   before it, this rule ties on specificity and loses on source order, which
   left the hamburger visible next to the full desktop nav at 1081px+. */
@media (min-width: 1081px) {
  .tgn-nav__toggle { display: none; }
}

.tgn-nav__scrim {
  position: fixed;
  inset: 0;
  background: var(--tgn-ink);
  opacity: 0.5;
  z-index: 90;
}
.tgn-nav__scrim[hidden] { display: none; }

.tgn-nav__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  z-index: 95;
  background: var(--tgn-parchment-50);
  border-left: 1px solid var(--tgn-parchment-200);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* gesture bar / notch safety on the anchored edges */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.tgn-nav__panel[hidden] { display: none; }

.tgn-nav__panel-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--tgn-parchment-200);
}
.tgn-nav__panel-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tgn-parchment-400);
}
.tgn-nav__panel-close {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  border: none;
  border-radius: var(--tgn-radius-badge);
  background: transparent;
  color: var(--tgn-ink);
  cursor: pointer;
}
.tgn-nav__panel-close:hover { background: var(--tgn-parchment-100); }

.tgn-nav__panel-body { flex: 1 1 auto; padding: 8px 12px 16px; }
.tgn-nav__panel-list,
.tgn-nav__panel-sublist { list-style: none; margin: 0; padding: 0; }
.tgn-nav__panel-item { margin: 0; }

.tgn-nav__panel-link,
.tgn-nav__panel-sublink {
  display: block;
  padding: 12px;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.25;
  color: var(--tgn-ink);
  text-decoration: none;
  border-radius: var(--tgn-radius-inset);
}
.tgn-nav__panel-link { font-weight: 600; }

/* The dropdown parent is a <button> on desktop and carries no destination of
   its own, so in the mobile panel it renders as a group heading. Overview,
   which does carry the destination, sits inside the sublist. */
.tgn-nav__panel-heading {
  display: block;
  padding: 12px 12px 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tgn-parchment-400);
}
.tgn-nav__panel-link:hover,
.tgn-nav__panel-sublink:hover { background: var(--tgn-parchment-100); }
.tgn-nav__panel-link[aria-current="page"],
.tgn-nav__panel-sublink[aria-current="page"] {
  color: var(--tgn-brick);
  background: var(--tgn-parchment-100);
}
.tgn-nav__panel-sublist { margin: 0 0 4px 12px; border-left: 2px solid var(--tgn-parchment-200); }
.tgn-nav__panel-sublink { font-weight: 400; font-size: 15px; }

.tgn-nav__panel-ctas {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 24px;
  border-top: 1px solid var(--tgn-parchment-200);
}
/* The panel CTAs are full-width rows, so the nav's own inline sizing and the
   xs rule that hides the outline CTA must not follow them into the panel. */
.tgn-nav__panel-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 13px 22px;
}
@media (max-width: 479px) {
  .tgn-nav__panel-cta.tgn-nav__cta--outline { display: flex; }
}

.tgn-nav :focus-visible {
  outline: 2px solid var(--tgn-brick);
  outline-offset: 3px;
}

/* ==========================================================================
   Shared footer treatment
   One footer markup on every page, styled only here. It renders exactly as
   the homepage's original inline footer did: same geometry, type and hover
   at every width.
   ========================================================================== */

.tgn-footer {
  background: var(--tgn-ink);
  color: var(--tgn-parchment-200);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
}
.tgn-footer__inner {
  /* content-box: the container maximum is the content width, with the
     40px gutters outside it, as on the homepage footer. */
  box-sizing: content-box;
  max-width: var(--tgn-container-max);
  margin: 0 auto;
  padding: clamp(96px, 10vw, 140px) 40px 0;
}

.tgn-footer__brandrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--tgn-parchment-400);
}
.tgn-footer__logo {
  width: 180px;
  height: auto;
  display: block;
}
/* The symbol's wordmark fills with currentColor; white is set on the <use>
   so the svg itself keeps the footer's inherited colour. */
.tgn-footer__logo use { color: var(--tgn-white); }
/* Shrinkable so the social row can wrap at 320 instead of pushing the share
   pill past the viewport; at wider widths it is never squeezed. */
.tgn-footer__follow { flex: 0 1 auto; min-width: 0; max-width: 100%; text-align: right; position: relative; }
/* Follow us: two pills on one row, "Follow us" (Facebook) then "Share the
   network", one markup on all 19 pages. Both are .tgn-share-btn, so height,
   padding, radius, border, type, hover and focus are one rule block.
   Icons: Bootstrap Icons (MIT). The row wraps rather than overflow at 320. */
.tgn-footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

/* Share the network: copies the site home URL (assets/js/tgn-nav.js). On
   success the button takes .is-copied for 2.5s: the share icon fades and
   scales out as the check icon fades and scales in, and the label reads
   "Link copied". The Facebook link reuses this class as the "Follow us" pill.
   The border is parchment-300, not parchment-400 (2.72:1), to clear 3:1 as
   a UI boundary on the ink ground; focus-visible mirrors .tgn-nav. */
.tgn-share-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--tgn-parchment-300);
  border-radius: var(--tgn-radius-pill);
  background: transparent;
  color: var(--tgn-parchment-50);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms ease;
}
.tgn-share-btn:hover {
  color: var(--tgn-parchment-50);
  border-color: var(--tgn-brick);
}
.tgn-share-btn:focus-visible {
  outline: 2px solid var(--tgn-brick);
  outline-offset: 3px;
}
.tgn-share-btn__icons {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}
.tgn-share-btn__icons svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  display: block;
  transition: opacity 200ms ease, transform 200ms ease;
}
.tgn-share-btn__check,
.tgn-share-btn.is-copied .tgn-share-btn__share { opacity: 0; transform: scale(.5); }
.tgn-share-btn.is-copied .tgn-share-btn__check { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tgn-share-btn,
  .tgn-share-btn__icons svg { transition: none; }
}
/* The live region that announces the copy result. The button label shows it
   visually, so the region is visually hidden but stays in the
   accessibility tree. */
.tgn-footer__share-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* The class-based brand row stacks left-aligned below 768; the follow block
   follows it there instead of right-aligning inside its own box. */
@media (max-width: 767px) {
  .tgn-footer__brandrow .tgn-footer__follow { text-align: left; }
  .tgn-footer__brandrow .tgn-footer__social { justify-content: flex-start; }
}

.tgn-footer__top {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.tgn-footer__mail-h {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tgn-parchment-50);
  margin: 0;
}
.tgn-footer__mail-row {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--tgn-parchment-400);
  padding-bottom: 12px;
  max-width: 400px;
}
.tgn-footer__mail-row input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--tgn-parchment-50);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
}
/* F8 — this input previously set `outline: none` with no replacement, the
   only focusable control on the site with no visible focus indicator
   (WCAG 2.4.7). Amber reads against the ink footer; brick does not. */
.tgn-footer__mail-row input:focus-visible {
  outline: 2px solid var(--tgn-amber);
  outline-offset: 3px;
  border-radius: 2px;
}
.tgn-footer__mail-row input::placeholder { color: var(--tgn-parchment-300); }
.tgn-footer__mail-btn {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: var(--tgn-cta);
  color: var(--tgn-ink);
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease;
}
.tgn-footer__mail-btn:hover { background: var(--tgn-amber); }
.tgn-footer__mail-btn svg { display: block; }

/* Footer hardening against page-level resets. Some pages reset every element
   (padding, text-align, list colour) in their own stylesheets, and those
   resets reached the footer. These values are what the homepage footer
   already computes, set explicitly so every page renders the same footer. */
.tgn-footer .tgn-footer__mail-row input { padding: 1px 2px; }
.tgn-footer .tgn-footer__mail-btn { padding: 1px 6px; text-align: center; }
.tgn-footer button.tgn-share-btn { text-align: center; }
.tgn-footer .tgn-footer__list li,
.tgn-footer .tgn-footer__share-status { color: var(--tgn-parchment-200); }

.tgn-footer__col-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tgn-parchment-300);
}
.tgn-footer__list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tgn-footer__list li { margin: 0; padding: 0; list-style: none; }
.tgn-footer__link {
  color: var(--tgn-parchment-200);
  font-size: 16px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease;
}
.tgn-footer__link:hover {
  color: var(--tgn-parchment-50);
  border-bottom-color: var(--tgn-brick);
}

.tgn-footer__legal {
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--tgn-parchment-400);
  padding: 28px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--tgn-parchment-300);
}
.tgn-footer__legal-links { display: flex; flex-wrap: wrap; gap: 20px; }
.tgn-footer__legal a {
  color: var(--tgn-parchment-300);
  text-decoration: none;
  transition: color 150ms ease;
}
.tgn-footer__legal a:hover { color: var(--tgn-parchment-50); }

/* ==========================================================================
   Responsive grid hooks for inline multi-column grids
   ==========================================================================
   Several pages declare grid-template-columns inline and carry no media
   query at all (mission-targets, index and 404 have none), so their content
   grids keep a desktop column count all the way down to 320px. These hooks
   collapse them on the canonical ladder. !important is required to beat the
   inline declaration; `body` raises specificity above page-level rules.

   Apply the class matching the DESKTOP column count; the ladder does the
   rest. Reusable on any page and portable to the Beaver Builder rebuild.
   ========================================================================== */

/* Every band is BOUNDED. A bare `@media (min-width: 768px)` keeps applying at
   1280 and 1920, so "no lg rule" would leave the md override in force at
   desktop instead of handing back to the inline value. Bounding each band is
   what actually makes desktop untouched. */
@media (max-width: 479px) {
  body .tgn-rgrid-2,
  body .tgn-rgrid-3,
  body .tgn-rgrid-4,
  body .tgn-rgrid-5,
  body .tgn-rgrid-6 { grid-template-columns: minmax(0, 1fr) !important; }
}
/* sm: two-up for the denser grids; asymmetric pairs stay stacked because
   their two halves are a text block and a media block, not peers. */
@media (min-width: 480px) and (max-width: 767px) {
  body .tgn-rgrid-2 { grid-template-columns: minmax(0, 1fr) !important; }
  body .tgn-rgrid-3,
  body .tgn-rgrid-4,
  body .tgn-rgrid-5,
  body .tgn-rgrid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body .tgn-rgrid-2 { grid-template-columns: minmax(0, 1fr) !important; }
  body .tgn-rgrid-3,
  body .tgn-rgrid-4,
  body .tgn-rgrid-5,
  body .tgn-rgrid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* `1fr` is minmax(auto,1fr), so a track cannot shrink below its content's
   min-content width — index.html had a 376px card in a "1 column" grid inside
   a 320px viewport. minmax(0,1fr) lets the track shrink and min-width:0 lets
   the child do the same. Scoped below lg: left unbounded it re-sized desktop
   grid tracks and grew index.html by 1,532px. */
@media (max-width: 1023px) {
  body .tgn-rgrid-2 > *,
  body .tgn-rgrid-3 > *,
  body .tgn-rgrid-4 > *,
  body .tgn-rgrid-5 > *,
  body .tgn-rgrid-6 > * { min-width: 0; }
}

/* lg and up: no rule of any kind. Each element's own inline declaration —
   including asymmetric ratios like 1.18fr 0.82fr — takes over untouched. */

/* A flex child with a hard min-width wider than an xs viewport cannot shrink
   and forces the whole page wide. get-involved.html carries one at 300px. */
body .tgn-flex-min0 { min-width: 0 !important; }
@media (min-width: 480px) {
  body .tgn-flex-min0 { min-width: 300px !important; }
}

/* A deliberate desktop overlap — a 70%-width photo with a fixed 280px card
   pulled -112px across it — cannot survive a narrow viewport: the card is
   flex:none so it never shrinks. Below lg the row stacks and both halves go
   full width. Written as a max-width query on purpose: above 1023px these
   declarations do not exist at all, so the inline desktop values apply
   untouched and the composition is provably unchanged. */
@media (max-width: 1023px) {
  body .tgn-stack-below-lg {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* border-box is not optional here. index.html and about.html never set a
     global box-sizing (only .tgn-nav/.tgn-footer normalise it), so on those
     pages width:100% plus padding:32px renders a 359px box inside a 295px
     column. Any percentage-width fix on this site has to carry it. */
  body .tgn-stack-below-lg > * {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ---------- F13: section padding that never scaled down ----------
   index.html carries no media query of its own, so its inline 100–120px
   section padding applied unchanged at 320px. Every other page scales its
   sections down (typically 144 -> 104). Written as a max-width query so the
   desktop values are handed straight back to the inline declaration. */
@media (max-width: 1023px) {
  body .tgn-sec-pad { padding-top: 64px !important; padding-bottom: 64px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body .tgn-sec-pad { padding-top: 80px !important; padding-bottom: 80px !important; }
}

/* R5: the same hook, top edge only.
   Some sections end with padding-bottom:0 on purpose because the next block
   butts against them (mission-*'s .sec--roster is 104px 0 0). Applying the
   symmetric hook there would ADD 64px of bottom padding and make the page
   taller, which is the opposite of the fix. This is the same hook-class
   pattern, not a second one — only the edge differs. */
@media (max-width: 1023px) {
  body .tgn-sec-pad-t { padding-top: 64px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body .tgn-sec-pad-t { padding-top: 80px !important; }
}

/* ---------- F10: sticky rails are gated on width, but the constraint is
   viewport HEIGHT ----------
   resources' .rs-ct-rail (228px) plus the 81px nav consumed 71.9% of a
   932x430 landscape viewport against a 25% threshold. about's .tgn-faq-rail
   already un-sticks below 920px, but that is a width rule, so it still
   failed at 932x430 where the viewport is short rather than narrow.

   A height media feature is not a new width breakpoint, so the ladder in
   §3.1 is not affected.
   Below lg both rails are stacked content anyway and gain nothing from
   position:sticky. */
@media (max-width: 1023px), (max-height: 700px) {
  .rs-ct-rail,
  .tgn-faq-rail { position: static !important; }
}

/* Footer links include info@thegonetwork.org, a 181px unbreakable token.
   It fit while the footer grid was (wrongly) 4 columns wide; in a correct
   2-column grid at 320px the column is ~150px and the address overhangs.
   Exposed by the footer fix, not caused by it. */
@media (max-width: 1023px) {
  .tgn-footer__link,
  footer .tgn-footer-cols a { overflow-wrap: anywhere; }
}
/* Bounded below lg deliberately. overflow-wrap:anywhere changes a token's
   min-content width, and `1fr` is minmax(auto,1fr) — so leaving it on at
   desktop re-sized the footer's four columns from the original
   126/126/126/181 (the last sized by "Ministries Planting New Ministries")
   to an even 140 each. Correct at 320, a desktop change nobody asked for. */

/* ==========================================================================
   F3 / F4 — footer link grid, standardised on .tgn-footer-cols
   ==========================================================================
   The link grid once carried an inline style on twelve pages; every page
   now shares the class-based footer markup. The below-lg bands keep
   !important so no page-level grid rule can override the column ladder.

   Column ladder per spec §7.1:
     xs 320-479  -> 2      sm 480-767  -> 2
     md 768-1023 -> 3      lg 1024+    -> 4 (desktop unchanged)

   The old 920/760/480 breakpoints are retired here; the four shared
   nav/footer breakpoints move to ladder values in this pass by agreement.
   ========================================================================== */

/* The `footer` prefix is load-bearing, not decoration. get-involved.html
   carries [data-r~="col1"]{grid-template-columns:1fr!important} in its own
   <style> for eleven page elements including this grid. That selector ties
   this one on specificity (0,1,0) and wins on source order. `footer .x`
   is (0,1,1) and wins outright, without disturbing the other ten. */
/* Bands are bounded; the lg rule is the desktop declaration itself. */
@media (max-width: 1023px) {
  footer .tgn-footer-cols {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 20px !important;              /* row 28, column 20 per §7.1 */
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  footer .tgn-footer-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 40px !important;
  }
}
@media (min-width: 1024px) {
  footer .tgn-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
}

/* The region holding the mailing-list block beside the link grid. Every
   page uses .tgn-footer__top; .tgn-footer-top stays as the documented hook. */
@media (max-width: 1023px) {
  footer .tgn-footer-top,
  footer .tgn-footer__top { grid-template-columns: 1fr !important; }
}
@media (min-width: 1024px) {
  footer .tgn-footer-top,
  footer .tgn-footer__top { grid-template-columns: 1fr 1.6fr; }
}

.tgn-footer__brandrow { flex-direction: column; align-items: flex-start; gap: 24px; }
@media (min-width: 768px) {
  .tgn-footer__brandrow { flex-direction: row; align-items: flex-end; gap: clamp(24px, 3vw, 48px); }
}

/* ---------- F7: footer tap targets ----------
   .tgn-footer__link measured 44x19, legal links 85x23 — both below the
   24x24 floor, let alone 44x44. Padding gives the row real height while
   the 10px list gap keeps 44px of separation between adjacent targets.
   The link box is content-box on purpose: the 44px minimum applies to the
   content and the padding sits outside it, which is the homepage footer's
   geometry (a 69px row) and so the geometry of every page. */
.tgn-footer__list { gap: 10px; }
.tgn-footer__link {
  box-sizing: content-box;
  display: inline-block;
  padding: 12px 0;
  min-height: 44px;
}
/* Legal links keep the homepage's 23px text line, so the legal row does
   not grow; a 44px pseudo-element hit area meets the tap target minimum. */
.tgn-footer__legal-links { gap: 20px; }
.tgn-footer__legal a { position: relative; }
.tgn-footer__legal a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Assessment results: the share confirmation sits in the button row. Empty,
   it is taken out of the flex flow (no gap, no height) but stays in the
   accessibility tree so the live region still announces. */
.tgn-ax__share-status { margin: 0; }
.tgn-ax__share-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}