/* ===========================================================================
   LEAD48 - site-fixes.css
   Review fixes, 30 August 2026.

   Loaded LAST on every public page, after every other stylesheet.

   The site runs two parallel design systems - audience.css (index, speakers,
   about, attend, participate, organize) and styles.css (recruitment,
   selection, journey, conversation, changelog, privacy) - with different
   values behind the same token names. This file corrects both, so it has to
   come after whichever one the page loaded. Once the two systems are
   reconciled, fold these rules back into source and delete this file.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Copper contrast on light grounds
   ---------------------------------------------------------------------------
   --copper is the eyebrow / label / small-CTA colour across the whole site.
   Both values failed WCAG AA for text under 24px on the cream and paper
   grounds:

     audience.css  #bd6c35   3.48 on --cream, 3.85 on --paper
     styles.css    var(--copper,#87401d)   3.02 on --cream, 3.55 on --paper

   AA needs 4.5. var(--copper,#87401d) clears it on every light ground in both systems, and
   keeps white legible where copper is the button or panel background:

     var(--copper,#87401d)   5.24 on audience --cream   5.80 on --paper
               4.93 on styles   --cream   5.90 white-on-copper

   The hue is held; only luminance moves, so the brand still reads as copper.
   --------------------------------------------------------------------------- */

:root {
  --copper: var(--copper,#87401d);
}

/* --muted at 11px on the cream panels measured 4.16. Nudged to clear 4.5:
   5.19 on audience --cream, 4.88 on styles --cream, 5.74 on --paper. */
:root {
  --muted: #5c6672;
}


/* ---------------------------------------------------------------------------
   2. Eyebrow contrast on DARK grounds
   ---------------------------------------------------------------------------
   Darkening --copper fixes the cream grounds but breaks the navy ones, where
   the same token colours eyebrow text on white-on-navy sections. Against the
   dark grounds var(--copper,#87401d) measures 1.72-3.15 - worse than the original copper,
   which passed on the flat navies (4.99 / 4.74) and failed only on the
   lighter gradient stops.

   So on dark grounds the eyebrow switches to the gold token, which is the
   pattern the repo already uses - see .speaker-call-head .eyebrow,
   .faq-section .eyebrow, .selection-hero .eyebrow and friends. Measured
   against every dark ground on the site:

     --gold on the flat navies (#071326 / #07172a)        9.71 - 10.03
     --gold on the lightest gradient stops (#174564)      5.46
     --gold on .selection-strip #142e4c                   7.43
     --gold on .brief-hero lightest stop #123c5f          6.17
     --gold on the hero radial lightest stop #294867      5.10

   Every one clears 4.5. Sections whose own stylesheet already sets a light
   eyebrow (.selection-hero, .journey-hero, .framework-hero, .framework-close,
   .decision-note, .change-close, .principles, .speaker-call-head,
   .conversation-preview, .faq-section) are deliberately left alone.
   --------------------------------------------------------------------------- */

/* Dark grounds in the styles.css system. */
.hero .eyebrow,
.fit-intro .eyebrow,
.fit-section > .eyebrow,
.application-intro .eyebrow,
.change-hero .eyebrow,
/* Dark grounds in the audience.css system. */
.hero-card .eyebrow,
.page-hero .eyebrow,
.relay-copy .eyebrow,
.closing-cta .eyebrow,
.selection-strip .eyebrow,
.question-band .eyebrow,
.brief-hero .eyebrow,
/* journey.css sets these four explicitly to var(--copper,#87401d); only
   .overlap-section is dark (#07172a), the other three are #fff / #efe5d8. */
.overlap-section .eyebrow {
  color: var(--gold,#e4b85d);
}

/* .guardrails-section's background IS var(--copper,#87401d), so a var(--copper,#87401d)
   eyebrow on it measures 1.00 - the label is invisible, and was at the old
   copper value too. #ffe0b0 gives 4.64 here and matches what the other
   copper-ground sections already use (.change-close, .decision-note). */
.guardrails-section .eyebrow {
  color: #ffe0b0;
}

/* The flight plan label is an unclassed span rather than an .eyebrow, but it
   is the same copper-on-navy problem: audience.css sets it to var(--copper,#87401d)
   and it sits on the navy relay ground. */
.flight-plan-head span {
  color: var(--gold,#e4b85d);
}


/* ---------------------------------------------------------------------------
   3. Anchor targets landing under the sticky header
   ---------------------------------------------------------------------------
   Do NOT set a global scroll-padding-top here. The repo already carries about
   eleven scroll-margin-top declarations (styles.css sets 82px on #pathways,
   #next-gen, #roles, #faq and #apply; journey.css, selection.css,
   conversation.css and audience.css set their own). A global scroll-padding
   stacks on top of those and double-offsets every anchor that already works -
   it pushed #apply, the primary call to action, about 96px past its target.

   Only the targets that genuinely lack an offset are listed here, at the 82px
   the rest of the repo already uses. That clears both headers: .site-header is
   76px on the audience pages, .topbar is roughly 74px on the styles pages.
   --------------------------------------------------------------------------- */

/* #relay-how and #top on recruitment.html; #pathways on the homepage, which
   loads audience.css and so never saw the styles.css rule. #pathways on
   recruitment already resolves to 82px, so this changes nothing there. */
#relay-how,
#top,
#pathways {
  scroll-margin-top: 82px;
}


/* ---------------------------------------------------------------------------
   4. Clearance for the fixed bottom widgets
   ---------------------------------------------------------------------------
   .global-pulse (fixed, ~50px tall) floats over the page on every public
   page, and .assistant-launcher (fixed, right:22px bottom:22px, ~47px tall)
   sits at the same bottom edge on the opposite side. The launcher is static
   markup on recruitment.html and injected at runtime by audience.js on the
   nine pages that load it, so between them the two widgets are on every
   public page - the clearance is not recruitment-only. Nothing reserved space
   for either, so they covered the last ~75px of every page, including the
   footer Privacy and Applicant status links.

   The space is reserved on the FOOTER, not on body. Padding the body pushes
   the reserved band below the footer, where it paints in the body background
   - a near-white strip under the dark footer on every page. The footer is
   #050f1b (styles.css) and #050d19 (audience.css), so padding the footer
   keeps the reserved band dark and part of the footer.

   Scope: this stylesheet is only loaded by the pages that render the pulse
   dock. admin.html and status.html load neither it nor global-pulse.js.

   The breakpoint is 760px to match global-pulse.css, which is where the dock
   moves to bottom:calc(76px + safe-area). Keying this to 700px instead leaves
   a 701-760px band where the dock has already moved up but the clearance has
   not, and the dock lands back on top of the footer links.
   --------------------------------------------------------------------------- */

body > footer {
  /* dock at bottom:18px + ~50px tall; launcher at bottom:22px + ~47px */
  padding-bottom: 96px;
}

@media (max-width: 760px) {
  /* styles.css reserves the mobile dock's space with body{padding-bottom:72px}.
     That band sits BELOW the footer and paints in the body background, so it
     shows as a cream strip under the dark footer - and .mobile-dock only
     exists on recruitment.html, so on privacy, selection, journey,
     conversation and changelog nothing even covers it. Fold that allowance
     into the footer with the rest. */
  body {
    padding-bottom: 0;
  }

  body > footer {
    /* Clears both fixed widgets at this width: global-pulse.css moves the dock
       to bottom:calc(76px + safe-area) with a ~47px height (top edge ~123px),
       and .mobile-dock sits at bottom:max(7px, safe-area) at ~61px tall (top
       edge ~68px). */
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }
}


/* ---------------------------------------------------------------------------
   5. Note, not a rule
   ---------------------------------------------------------------------------
   responsive.css opens with "Loaded last so every public route shares the
   same rules" - but index.html, speakers.html, about.html, attend.html,
   participate.html and organize.html load only audience.css and
   global-pulse.css. Its mobile type scale, tap-highlight and reduced-motion
   rules have never applied to those pages. Either add responsive.css to them
   or move its shared rules here. Left alone deliberately: it changes how six
   pages render on mobile, which is more than a contrast-and-anchor pass
   should carry.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   6. Spacing pass, 24 September 2026
   ---------------------------------------------------------------------------
   The owner flagged too much empty space in the desktop view. Layout only:
   no colour, type scale, copy or markup changes. Section padding comes down,
   and the two-column sections that left one column mostly empty are
   rebalanced so the content fills the width instead of trailing down one side.
   Below 851px (the audience.css single-column breakpoint) the existing mobile
   layout is kept, with only the gaps tightened.
   --------------------------------------------------------------------------- */

/* Methodology on /research: the topic headings sat 22px below the previous
   box and every box carried its own 10px margins on top of the grid gap. */
.research-topics h3 {
  margin: 0 0 6px;
}

.research-topics p {
  margin: 0;
}

.research-topics {
  gap: 16px;
}

@media (min-width: 851px) {
  /* Oversized vertical rhythm: 95px (audience.css) and up to 118px
     (styles.css) above and below every section. */
  .section {
    padding-top: clamp(56px, 5vw, 72px);
    padding-bottom: clamp(56px, 5vw, 72px);
  }

  .split {
    gap: clamp(40px, 5vw, 80px);
  }

  /* The Output: the copy stopped at 900px and left the right half of the
     band empty. The title holds the left column and the three paragraphs
     read down the right. */
  .report-band {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .report-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: clamp(32px, 5vw, 80px);
    max-width: none;
  }

  .report-copy > .eyebrow {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .report-copy > h2 {
    grid-column: 1;
    grid-row: 2 / span 3;
    align-self: start;
  }

  .report-copy > p:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .report-copy > p:nth-of-type(3) { grid-column: 2; grid-row: 3; }
  .report-copy > p:nth-of-type(4) { grid-column: 2; grid-row: 4; }

  .report-copy > p:nth-of-type(2) {
    margin-top: 0;
  }

  /* Research methodology: the two short topics pair up; the two topics with a
     full paragraph keep the whole width. */
  .research-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
  }

  #contributor-enrichment,
  #sdg-method {
    grid-column: 1 / -1;
  }

  #methodology .research-topics > section {
    display: flex;
    flex-direction: column;
  }

  #methodology .research-topics > section > p {
    flex: 1;
  }
}

/* "The world receives one baton." The heading sat alone in a wide left
   column above ~400px of nothing while six beats ran down the right. The
   heading column narrows and the beats run down two columns, in order. Only
   from 1100px: narrower than that, two beat columns would be too cramped and
   the single column is kept. */
@media (min-width: 1100px) {
  .relay-idea {
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.6fr);
    align-items: start;
  }

  .relay-idea .stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: clamp(28px, 3.5vw, 56px);
  }

  .relay-idea .stack article {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .relay-idea .stack > .text-link {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}

/* "Tell me when applications open": a full-width form under the closing call
   left large gaps above and below it. The block keeps its width to the form
   it holds and the gaps around it come down. */
.closing-cta h2 {
  margin-bottom: 22px;
}

.closing-cta .notify-block {
  max-width: 760px;
  margin: 22px auto 0;
}

.closing-cta .hero-note {
  margin: 8px 0 0;
}

@media (min-width: 851px) {
  .closing-cta {
    padding-top: clamp(52px, 4.5vw, 68px);
    padding-bottom: clamp(52px, 4.5vw, 68px);
  }
}

@media (max-width: 850px) {
  .split .stack {
    margin-top: 28px;
  }
}

/* ---------------------------------------------------------------------------
   7. Region route: the "Receives from" and "Passes to" links
   ---------------------------------------------------------------------------
   The route sits in a <nav>, so styles.css's `nav a` (white, for the dark site
   header) painted its links white on the white route cells, and "Receives
   from Sub-Saharan Africa" read as an empty box. Ink on the light cells; the
   current movement's dark cell keeps light text.
   --------------------------------------------------------------------------- */
.region-route li:not([aria-current]) a {
  color: var(--ink, #11110f);
}

/* ---------------------------------------------------------------------------
   8. Theme grid overflow between 851px and 1023px
   ---------------------------------------------------------------------------
   Above audience.css's 850px breakpoint the theme grid switches to four 1fr
   columns. A 1fr column cannot shrink below its longest word, so at 851-870px
   the four theme cards on /speakers came to ~806px inside a ~703px container
   and the page scrolled sideways. Columns now shrink with the container, and
   until there is room for four the cards sit two to a row. At 850px and below
   the single-column layout in audience.css is untouched.
   --------------------------------------------------------------------------- */
@media (min-width: 851px) {
  .theme-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .theme-grid h3 {
    overflow-wrap: break-word;
  }
}

@media (min-width: 851px) and (max-width: 1023px) {
  .theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ---------------------------------------------------------------------------
   9. The public inquiry (2026-09-24)
   ---------------------------------------------------------------------------
   The homepage's question and themes, the research framing on region pages,
   and the broad window. Existing tokens only: warm neutrals, the burgundy
   accent and the serif type scale.
   --------------------------------------------------------------------------- */
.seed-question {
  margin: 0 0 18px;
  padding-left: 18px;
  border-left: 3px solid var(--copper, #87401d);
  font: 400 clamp(1.35rem, 2.2vw, 1.75rem)/1.3 var(--serif, Georgia, "Times New Roman", serif);
  color: var(--ink, #11110f);
}

.inquiry-themes {
  display: grid;
  /* Twelve themes: one, two, three or four columns, so no row is left half empty. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line, #d9cfbf);
  border: 1px solid var(--line, #d9cfbf);
}

@media (min-width: 700px) {
  .inquiry-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .inquiry-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .inquiry-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.inquiry-theme {
  padding: 20px 22px;
  background: var(--paper, #fffdf8);
}

.inquiry-theme > a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  align-items: baseline;
  color: var(--ink, #11110f);
  text-decoration: none;
}

.inquiry-theme > a:hover strong,
.inquiry-theme > a:focus-visible strong {
  text-decoration: underline;
}

.inquiry-number {
  grid-row: span 2;
  color: var(--accent-text, #87401d);
  font: 400 1.4rem/1 var(--serif, Georgia, "Times New Roman", serif);
}

.inquiry-theme strong {
  font: 500 1.08rem/1.25 var(--serif, Georgia, "Times New Roman", serif);
}

.inquiry-theme em {
  color: var(--muted, #5c6672);
  font-size: 0.82rem;
  font-style: normal;
}

.inquiry-theme > p {
  margin: 10px 0 0;
  color: var(--muted, #5c6672);
  font-size: 0.92rem;
  line-height: 1.5;
}

.inquiry-global,
.inquiry-return {
  background: var(--cream, #f2eadc);
}

.research-framing {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--gold, #e4b85d);
  background: rgba(228, 184, 93, 0.1);
  color: var(--ink, #11110f);
  font-size: 0.95rem;
  line-height: 1.6;
}

.programme-window {
  margin: 12px 0;
}


/* ---------------------------------------------------------------------------
   10. The one public inquiry map (2026-09-25)
   ---------------------------------------------------------------------------
   The twelve themes: region links on each card, the curated Return, the
   enduring and edition questions, the cross-links from region pages and the
   /themes page. Existing tokens only.
   --------------------------------------------------------------------------- */
.inquiry-contexts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 0.8rem;
}

.inquiry-contexts a {
  padding: 2px 8px;
  border: 1px solid var(--line, #d9cfbf);
  border-radius: 999px;
  color: var(--accent-text, #87401d);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.inquiry-contexts a:hover,
.inquiry-contexts a:focus-visible {
  text-decoration: underline;
}

.inquiry-return {
  margin: 16px 0 0;
  color: var(--muted, #5c6672);
  font-size: 0.92rem;
  line-height: 1.5;
}

.inquiry-return a {
  margin-right: 6px;
  color: var(--ink, #11110f);
}

.inquiry-return em {
  margin-left: 6px;
  color: var(--muted, #5c6672);
  font-size: 0.82rem;
  font-style: normal;
}

.question-enduring,
.question-edition {
  margin: 0 0 8px;
  color: var(--muted, #5c6672);
  font-size: 0.95rem;
  line-height: 1.5;
}

.question-enduring .pair-label,
.question-edition .pair-label,
.programme-themes .pair-label,
.theme-where .pair-label,
.theme-research .pair-label {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-text, #87401d);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.programme-themes {
  margin: 12px 0;
  line-height: 1.6;
}

.inquiry-map-list {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inquiry-map-theme {
  padding: 24px 0 0;
  border-top: 1px solid var(--line, #d9cfbf);
  scroll-margin-top: 96px;
}

.inquiry-map-theme h2 {
  margin: 4px 0 8px;
  overflow-wrap: anywhere;
}

.theme-meaning {
  font: 400 1.15rem/1.4 var(--serif, Georgia, "Times New Roman", serif);
  color: var(--ink, #11110f);
}

.theme-where,
.theme-research {
  margin-top: 16px;
}

.theme-sources {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.theme-sources a {
  overflow-wrap: anywhere;
}