/* ==========================================================================
   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. See audit/02-findings.md B3. */
.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 — flagged in audit/05-verification.md. */
@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
   Mirrors the Mission Targets / Homepage / About footer, which agree on
   structure, copy and link set. The four content pages keep their own inline
   footer markup so their copy is preserved verbatim; these classes carry the
   same treatment onto 404.html.
   ========================================================================== */

.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 {
  max-width: var(--tgn-container-max);
  margin: 0 auto;
  padding: clamp(96px, 10vw, 140px) clamp(24px, 2.8vw, 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;
  color: var(--tgn-white);
}
.tgn-footer__follow { flex: none; text-align: right; }
.tgn-footer__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tgn-parchment-300);
}
.tgn-footer__follow-link {
  margin-top: 10px;
  display: inline-block;
  color: var(--tgn-parchment-50);
  text-decoration: none;
  border-bottom: 1px solid var(--tgn-parchment-400);
  transition: border-color 150ms ease;
}
.tgn-footer__follow-link:hover {
  color: var(--tgn-parchment-50);
  border-bottom-color: var(--tgn-brick);
}

.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;
  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);
  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; }

.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: 15px;
  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; }
}

/* ---------- 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. Flagged as a decision in audit/05-verification.md.
   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
   ==========================================================================
   Twelve pages carry the link grid as an INLINE style attribute
   (grid-template-columns:repeat(4,1fr)), which no stylesheet rule can reach.
   !important is required to defeat it and matches the pattern already
   established in about.html. See audit/02-findings.md B2.

   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, and the lg rule carries NO !important on purpose:
   the twelve inline pages let their own declaration win at desktop, while
   404 and assessment (class-driven, no inline) still get a rule. That is
   what keeps desktop byte-identical instead of merely re-specified. */
@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. Twelve
   pages carry it as an inline `1fr 1.6fr` grid with no class; the hook class
   is added to those, and .tgn-footer__top / .tgn-footer-top cover the two
   naming conventions already in the codebase. */
@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. */
/* .tgn-footer__link only exists on 404 and assessment; the other thirteen
   pages style their footer links inline with no class. Targeting the link
   grid as well takes this fix from 2 pages to 15. */
.tgn-footer__list { gap: 10px; }
.tgn-footer__link,
footer .tgn-footer-cols li > a {
  display: inline-block;
  padding: 12px 0;
  min-height: 44px;
}
.tgn-footer__legal-links { gap: 8px 20px; }
.tgn-footer__legal a {
  display: inline-block;
  padding: 11px 0;
  min-height: 44px;
}