/**
 * PAP theme — Atlas wearing the Pan-African Parliament palette.
 * An organ theme of the design system: built to dist/themes/pap.css
 * (scripts/build-themes.mjs) and loaded AFTER dist/atlas.css by a PAP page.
 *
 * This file redeclares TOKENS ONLY. Not one component rule is overridden and
 * not one class is redefined: if a PAP page needs a control Atlas does not
 * have, that is a gap in Atlas, not a licence to write CSS here. The whole
 * point of the organ folders is that PAP, ECOSOCC and ECHO are the same
 * system with different values — the moment this file grows selectors, they
 * have become three systems again.
 *
 * GREEN IS THE AU'S, NOT PAP'S OWN [owner 2026-09-24]. It used to be
 * #2D7D46, lifted with the rest of this palette from the members portal's
 * Tailwind config (utils/pap-members-portal/index.html) — a mock-up, not a
 * brand source. ECOSOCC carries the AU green, #1A5632, straight from the
 * generated AU tokens, and the two organs were sitting side by side in
 * different greens. PAP now stops overriding it: the accent is not restated
 * here at all, so it resolves to the same AU token ECOSOCC uses and cannot
 * drift from it again.
 *
 * The red and the gold below still come from that Tailwind config and have
 * not been checked against a PAP brand source.
 *
 * SINGLE ACCENT holds here exactly as it does on ECOSOCC. Green is the accent.
 * The maroon is a GROUND — one full-bleed band a page, never a second accent —
 * and the gold stays parked, as it is system-wide. The portal today runs green
 * nav + gold underline + maroon wordmark all in one bar; that does not carry
 * over.
 *
 * The tint ramps are DERIVED from the accent with color-mix at the same
 * proportions the Atlas ramp uses (11% / 7% / 3.5% on the canvas, measured off
 * the generated AU tokens), so re-pointing one hue moves its whole ramp with
 * it instead of leaving five hand-picked tints behind.
 */
:root {
  /* brand */
  --atlas-color-primary: var(--atlas-color-background-green-accent);
  --atlas-green: var(--atlas-color-background-green-accent);
  --atlas-red: oklch(0.395664 0.126545 5.230408);
  --atlas-gold: oklch(0.651233 0.104004 84.541022);

  /* accents — what the palette layer actually reads */
  --atlas-color-background-red-accent: oklch(0.395664 0.126545 5.230408);
  --atlas-color-background-gold-accent: oklch(0.651233 0.104004 84.541022);

  /* green ramp, derived from the accent above */
  --atlas-color-background-green-muted:    color-mix(in srgb, var(--atlas-green) 45%, oklch(1 0 0));
  --atlas-color-background-green-soft:     color-mix(in srgb, var(--atlas-green) 22%, oklch(1 0 0));
  --atlas-color-background-green-subtle:   color-mix(in srgb, var(--atlas-green) 11%, oklch(1 0 0));
  --atlas-color-background-green-delicate: color-mix(in srgb, var(--atlas-green) 7%,  oklch(1 0 0));
  --atlas-color-background-green-faint:    color-mix(in srgb, var(--atlas-green) 3.5%, oklch(1 0 0));

  /* maroon ramp, same treatment */
  --atlas-color-background-red-muted:      color-mix(in srgb, var(--atlas-red) 55%, oklch(1 0 0));
  --atlas-color-background-red-soft:       color-mix(in srgb, var(--atlas-red) 22%, oklch(1 0 0));
  --atlas-color-background-red-subtle:     color-mix(in srgb, var(--atlas-red) 11%, oklch(1 0 0));
  --atlas-color-background-red-delicate:   color-mix(in srgb, var(--atlas-red) 7%,  oklch(1 0 0));
  --atlas-color-background-red-faint:      color-mix(in srgb, var(--atlas-red) 3.5%, oklch(1 0 0));
}
@supports not (color: oklch(0% 0 0)) {
  :root {
  --atlas-red: #7a1f3d;
  --atlas-gold: #ad8a3d;
  --atlas-color-background-red-accent: #7a1f3d;
  --atlas-color-background-gold-accent: #ad8a3d;
  }
}

/* DARK. The accents are FOREGROUND tokens in dark — Atlas lightens them so
   text keeps its contrast on the dark canvas (see the note in global-nav.css
   about the one place the maroon is used as a fill). PAP's greens and maroon
   are darker than the AU pair, so they need more lift, not less. */
[data-theme='dark'], .atlas-dark {
  --atlas-color-background-red-accent: oklch(0.721539 0.100765 359.462756);
  --atlas-color-background-gold-accent: oklch(0.83672 0.048725 91.352264);
  --atlas-color-background-green-soft:     oklch(0.268989 0.025386 156.089686);
  --atlas-color-background-green-subtle:   oklch(0.301616 0.023684 159.533405);
  --atlas-color-background-green-delicate: oklch(0.329222 0.02326 159.757666);
  --atlas-color-background-green-faint:    oklch(0.374876 0.026329 147.112197);
  --atlas-color-background-red-soft:       oklch(0.242785 0.020081 356.866718);
  --atlas-color-background-red-subtle:     oklch(0.270685 0.023006 355.471538);
  --atlas-color-background-red-delicate:   oklch(0.296221 0.023873 356.809921);
  --atlas-color-background-red-faint:      oklch(0.365448 0.050685 2.711329);
}
@supports not (color: oklch(0% 0 0)) {
  [data-theme='dark'], .atlas-dark {
  --atlas-color-background-red-accent: #d98aa3;
  --atlas-color-background-gold-accent: #d5c9a6;
  --atlas-color-background-green-soft:     #1c2a21;
  --atlas-color-background-green-subtle:   #24322a;
  --atlas-color-background-green-delicate: #2b3931;
  --atlas-color-background-green-faint:    #384539;
  --atlas-color-background-red-soft:       #281c20;
  --atlas-color-background-red-subtle:     #302227;
  --atlas-color-background-red-delicate:   #37282d;
  --atlas-color-background-red-faint:      #55333c;
  }
}


/* ══════════════════════════════════════════════════════════════════
   PAP homepage + publications components, promoted out of page-local \3c style>
   (index.html / publications.html). PAP-specific, so they live in the PAP
   theme rather than the shared Atlas molecules. 2026-10-29.
   ══════════════════════════════════════════════════════════════════ */

  /* ░░ STRUCTURE MAP — page-local while the template site settles. To be
     promoted to src/molecules/structure-map.css + a behavior, dropping the
     pap- prefix. Tokens only: caucus colours are --atlas-caucus-*, already
     in src/tokens/categorical.css. ░░ */
  /* a painted band: it takes .atlas-band's own knobs rather than setting
     background and padding itself, so it joins the page's section rhythm
     (main > section + band, molecules/section.css) instead of sitting
     hard against the cards above it. */
  .pap-map-band {
    --atlas-band-surface: var(--atlas-color-primary);
    --atlas-band-padding-block: clamp(var(--atlas-sp-5), 6vw, var(--atlas-sp-9));
  }
  .pap-map-shell { display: flex; flex-direction: column; gap: var(--atlas-sp-4); }
  .pap-map-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--atlas-sp-2); color: var(--atlas-color-lightest); }
  .pap-map-title { margin: 0; font-size: var(--atlas-type-ramp-pagetitle); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: inherit; }
  .pap-map-eyebrow { margin: 0; font-size: var(--atlas-type-caption); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--atlas-palette-default-text-subtle); }
  .pap-map-eyebrow-green { color: var(--atlas-palette-default-active); }

  .pap-map-card { background: var(--atlas-palette-default-surface-1); border-radius: var(--atlas-theme-border-radius); padding: clamp(var(--atlas-sp-2), 2.5vw, var(--atlas-sp-4)); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: clamp(var(--atlas-sp-2), 2.5vw, var(--atlas-sp-4)); align-items: stretch; }

  /* ---- the map ---- */
  .pap-map-diagram { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--atlas-sp-4); align-items: center; }
  .pap-map-col { display: flex; flex-direction: column; gap: var(--atlas-sp-2); }
  .pap-map-node { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--atlas-sp-0-5); padding: var(--atlas-sp-2); border-radius: var(--atlas-theme-border-radius); border: 1px solid var(--atlas-palette-default-border); background: var(--atlas-palette-default-surface-1); color: var(--atlas-palette-default-text); font: inherit; text-align: start; cursor: pointer; transition: background-color var(--atlas-duration-fast-02) var(--atlas-ease-standard), border-color var(--atlas-duration-fast-02) var(--atlas-ease-standard); }
  .pap-map-node:hover { border-color: var(--atlas-palette-default-active); }
  .pap-map-node[aria-pressed='true'] { background: var(--atlas-palette-default-active); border-color: var(--atlas-palette-default-active); color: var(--atlas-palette-default-text-on-active, #fff); }
  .pap-map-node-title { font-size: var(--atlas-type-body-s); font-weight: 700; line-height: 1.2; }
  .pap-map-node-meta { font-size: var(--atlas-type-caption); opacity: .8; }
  /* the stub that ties a node to the chamber */
  .pap-map-node[data-side]::after { content: ''; position: absolute; inset-block-start: 50%; inline-size: var(--atlas-sp-4); block-size: 1px; background: var(--atlas-palette-default-border); }
  .pap-map-node[data-side='left']::after { inset-inline-start: 100%; }
  .pap-map-node[data-side='right']::after { inset-inline-end: 100%; }
  .pap-map-node-wide { flex-direction: row; align-items: center; gap: var(--atlas-sp-1-5); }
  .pap-map-node-wide > span:last-child { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
  .pap-map-avatar { flex: none; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; overflow: hidden; }
  .pap-map-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
  .pap-map-stem { align-self: center; inline-size: 1px; block-size: var(--atlas-sp-2); background: var(--atlas-palette-default-border); }

  .pap-map-chamber { display: flex; flex-direction: column; align-items: center; gap: var(--atlas-sp-0-5); padding: var(--atlas-sp-2) var(--atlas-sp-1-5); border-radius: var(--atlas-theme-border-radius); border: 1px solid var(--atlas-palette-default-border); background: var(--atlas-palette-default-surface-1); cursor: pointer; }
  .pap-map-chamber:hover, .pap-map-chamber:focus-visible { border-color: var(--atlas-palette-default-active); }
  .pap-map-chamber svg { display: block; inline-size: 100%; block-size: auto; }
  .pap-map-chamber-title { margin: 0; font-size: var(--atlas-type-h5); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; text-align: center; }
  .pap-map-chamber-meta { text-align: center; }
  .pap-map-wedge { cursor: pointer; }
  .pap-map-wedge circle { transition: fill var(--atlas-duration-fast-02) var(--atlas-ease-standard); }
  .pap-map-wedge[data-region='west'] circle { fill: var(--atlas-caucus-west); }
  .pap-map-wedge[data-region='north'] circle { fill: var(--atlas-caucus-north); }
  .pap-map-wedge[data-region='central'] circle { fill: var(--atlas-caucus-central); }
  .pap-map-wedge[data-region='east'] circle { fill: var(--atlas-caucus-east); }
  .pap-map-wedge[data-region='south'] circle { fill: var(--atlas-caucus-south); }
  .pap-map-chamber[data-focus] .pap-map-wedge:not([data-focus]) circle { fill: var(--atlas-palette-default-surface-3); }

  /* ---- the panel ---- */
  .pap-map-panel { background: var(--atlas-palette-default-surface-2); border-radius: var(--atlas-theme-border-radius); padding: clamp(var(--atlas-sp-2-5), 2.5vw, var(--atlas-sp-4)); min-block-size: 29rem; }
  .pap-map-panel-body { display: flex; flex-direction: column; gap: var(--atlas-sp-2); }
  /* display:flex would beat [hidden]'s display:none, so say it here */
  .pap-map-panel-body[hidden] { display: none; }
  .pap-map-panel-head { display: flex; flex-direction: column; gap: var(--atlas-sp-1); border-block-end: 1px solid var(--atlas-palette-default-border); padding-block-end: var(--atlas-sp-2); }
  .pap-map-panel-title { margin: 0; font-size: var(--atlas-type-h4); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
  .pap-map-panel-lede { margin: 0; font-size: var(--atlas-type-body-s); color: var(--atlas-palette-default-text); text-wrap: pretty; }
  .pap-map-note { margin: 0; font-size: var(--atlas-type-body-s); color: var(--atlas-palette-default-text-subtle); }
  .pap-map-actions { margin: var(--atlas-sp-1) 0 0; display: flex; flex-wrap: wrap; gap: var(--atlas-sp-1-5); }

  .pap-map-person { display: flex; gap: var(--atlas-sp-2); align-items: center; }
  .pap-map-person img { inline-size: 5rem; block-size: 5rem; border-radius: 50%; object-fit: cover; flex: none; }
  .pap-map-person-name { margin: 2px 0 0; font-size: var(--atlas-type-body-l); font-weight: 700; }
  .pap-map-person-meta { margin: 2px 0 0; font-size: var(--atlas-type-body-s); color: var(--atlas-palette-default-text-subtle); }

  .pap-map-rows { list-style: none; margin: 0; padding: 0; }
  .pap-map-rows > li + li .pap-map-row { border-block-start: 1px solid var(--atlas-palette-default-border); }
  .pap-map-row { display: flex; justify-content: space-between; align-items: center; gap: var(--atlas-sp-1-5); padding: var(--atlas-sp-1-5) var(--atlas-sp-1); color: var(--atlas-palette-default-text); text-decoration: none; }
  .pap-map-row:hover { background: var(--atlas-palette-default-surface-1); }
  .pap-map-row > span { display: flex; flex-direction: column; gap: 2px; }
  .pap-map-row-country { flex-direction: row !important; align-items: center; gap: var(--atlas-sp-1); }
  .pap-map-states a { display: inline-flex; align-items: center; gap: var(--atlas-sp-0-5); }
  .pap-map-deleg-name { display: flex; align-items: center; gap: var(--atlas-sp-1); }
  .pap-map-row-name { font-size: var(--atlas-type-body-s); font-weight: 600; }
  .pap-map-row-sub { font-size: var(--atlas-type-caption); color: var(--atlas-palette-default-text-subtle); }
  .pap-map-row-cta { font-size: var(--atlas-type-caption); font-weight: 600; color: var(--atlas-palette-default-active); flex: none; }
  /* a numbered row reads from the number, so it packs to the start rather
     than throwing the name to the far edge */
  .pap-map-row:has(.pap-map-row-num) { justify-content: flex-start; gap: var(--atlas-sp-1-5); }
  .pap-map-row-num { font-size: var(--atlas-type-caption); font-weight: 600; letter-spacing: .09em; color: var(--atlas-palette-default-text-subtle); inline-size: 1.5rem; flex: none; font-variant-numeric: tabular-nums; }
  .pap-map-scroll { max-block-size: 17rem; overflow: auto; scrollbar-gutter: stable; border-block-start: 1px solid var(--atlas-palette-default-border); }

  /* a country is always shown with its flag */
  .pap-map-flag { inline-size: 1.25rem; block-size: .9375rem; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--atlas-palette-default-border); flex: none; }

  /* THE DRAW BEHAVIOUR. Hover a country anywhere in the widget and the widget
     answers everywhere: its five seats come forward, the rest of the chamber
     drops back, and its row or chip lifts. Same as hovering a name in a
     tournament draw and seeing its line light up. */
  .pap-map-card[data-hl] .pap-map-seatset:not([data-hl]) circle { fill: var(--atlas-palette-default-surface-3); }
  .pap-map-seatset[data-hl] circle { stroke: var(--atlas-palette-default-text); stroke-width: 1.1; }
  .pap-map-seatset { cursor: pointer; }
  .pap-map-row[data-hl], .pap-map-states a[data-hl] { background: var(--atlas-palette-default-surface-1); border-color: var(--atlas-palette-default-active); }
  .pap-map-row[data-hl] .pap-map-row-name { color: var(--atlas-palette-default-active); }

  .pap-map-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--atlas-sp-1); }
  .pap-map-stats li { background: var(--atlas-palette-default-surface-1); border-radius: var(--atlas-theme-border-radius); padding: var(--atlas-sp-1-5) var(--atlas-sp-2); display: flex; flex-direction: column; gap: 2px; font-size: var(--atlas-type-caption); color: var(--atlas-palette-default-text-subtle); }
  .pap-map-stats span { font-size: var(--atlas-type-h4); font-weight: 800; letter-spacing: -0.02em; color: var(--atlas-palette-default-active); font-variant-numeric: tabular-nums; }

  .pap-map-deleg { background: var(--atlas-palette-default-surface-1); border-radius: var(--atlas-theme-border-radius); padding: var(--atlas-sp-2-5); display: flex; flex-direction: column; gap: var(--atlas-sp-1); }
  .pap-map-deleg-name { margin: 0; font-size: var(--atlas-type-h4); font-weight: 800; letter-spacing: -0.02em; }
  .pap-map-seats { margin: 0; display: flex; align-items: center; gap: var(--atlas-sp-0-5); }
  .pap-map-seat { inline-size: .875rem; block-size: .875rem; border-radius: 50%; background: var(--atlas-palette-default-active); }
  .pap-map-seats-label { margin-inline-start: var(--atlas-sp-1); font-size: var(--atlas-type-body-s); color: var(--atlas-palette-default-text-subtle); }

  .pap-map-tabs { display: flex; flex-wrap: wrap; gap: var(--atlas-sp-0-5); }
  .pap-map-tab { padding: var(--atlas-sp-1) var(--atlas-sp-1-5); border-radius: var(--atlas-theme-border-radius); border: 1px solid var(--atlas-palette-default-border); background: var(--atlas-palette-default-surface-1); color: var(--atlas-palette-default-text); font: inherit; font-size: var(--atlas-type-body-s); font-weight: 600; cursor: pointer; }
  .pap-map-tab[aria-pressed='true'] { background: var(--atlas-palette-default-active); border-color: var(--atlas-palette-default-active); color: #fff; }
  .pap-map-states { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--atlas-sp-0-5); }
  .pap-map-states a { display: inline-flex; align-items: center; gap: var(--atlas-sp-1); padding: var(--atlas-sp-0-5) var(--atlas-sp-1-5); border-radius: var(--atlas-size-rounded-pill, 999px); border: 1px solid var(--atlas-palette-default-border); background: var(--atlas-palette-default-surface-1); font-size: var(--atlas-type-body-s); color: var(--atlas-palette-default-text); text-decoration: none; }
  .pap-map-states a:hover { border-color: var(--atlas-palette-default-active); color: var(--atlas-palette-default-active); }

  .pap-map-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--atlas-sp-1-5); }
  .pap-map-cards a { display: flex; flex-direction: column; gap: var(--atlas-sp-0-5); padding: var(--atlas-sp-2); border-radius: var(--atlas-theme-border-radius); border: 1px solid var(--atlas-palette-default-border); background: var(--atlas-palette-default-surface-1); text-decoration: none; color: var(--atlas-palette-default-text); }
  .pap-map-cards a:hover { border-color: var(--atlas-palette-default-active); }
  .pap-map-card-name { font-size: var(--atlas-type-body-m); font-weight: 700; }
  .pap-map-card-text { font-size: var(--atlas-type-body-s); color: var(--atlas-palette-default-text-subtle); }

  .pap-map-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--atlas-sp-1); }
  .pap-map-chips { display: flex; flex-wrap: wrap; gap: var(--atlas-sp-0-5); }
  .pap-map-chip { display: inline-flex; }
  .pap-map-chip input { position: absolute; opacity: 0; pointer-events: none; }
  .pap-map-chip span { display: inline-block; padding: var(--atlas-sp-0-5) var(--atlas-sp-1-5); border-radius: var(--atlas-size-rounded-pill, 999px); border: 1px solid var(--atlas-palette-default-border); background: var(--atlas-palette-default-surface-1); font-size: var(--atlas-type-body-s); cursor: pointer; }
  .pap-map-chip input:checked + span { background: var(--atlas-palette-default-active); border-color: var(--atlas-palette-default-active); color: #fff; }
  .pap-map-chip input:focus-visible + span { outline: 2px solid var(--atlas-palette-default-active); outline-offset: 2px; }

  .pap-map-lang { display: flex; flex-wrap: wrap; gap: var(--atlas-sp-1-5); align-items: flex-end; }
  .pap-map-lang > div { flex: 1 1 11rem; }

  @media (width < 64rem) {
    .pap-map-diagram { grid-template-columns: minmax(0, 1fr); }
    .pap-map-node[data-side]::after { display: none; }
  }

  /* ░░ THEME OF THE YEAR band. Page-local while the template site settles,
     same as the structure map above. Lifted from theme-band.html. ░░ */
  /* ── measured tokens ───────────────────────────────────────────────── */
  .au-theme {
    --au-theme-paper:   #f7f5ec;
    --au-theme-ink:     #142d52;
    --au-theme-water:   #5ac3e3;
    --au-theme-line:    #e0e0e0;
    --au-theme-maroon:  #502030;
    --au-theme-deep:    #146487;   /* darkest blue in the Africa motif */
    --au-theme-shallow: #58c9eb;   /* lightest blue in the Africa motif */

    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(.9rem, 2vw, 2rem);
    padding: clamp(1rem, 2.2vw, 1.6rem) clamp(1rem, 3vw, 2.5rem);
    background: var(--au-theme-paper);
    color: var(--au-theme-ink);
    text-decoration: none;
    overflow: clip;
    isolation: isolate;
  }

  /* THE REAL PAPER. This was concentric CSS arcs standing in for a texture I
     had only seen compressed inside a 1280x175 slide; the owner supplied the
     AU's asset pack and Theme2026_Offwhite_BG1 is the actual thing — flowing
     contour waves, dense at the edges and open in the middle, nothing like
     concentric circles. Downscaled 2560x1440 -> 1600x900. */
  .au-theme::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: var(--au-theme-paper) center / cover no-repeat;
    /* AVIF with a PNG fallback. The texture is a field of fine wave lines —
       exactly the content PNG compresses worst — so the format matters more
       here than anywhere else on the page: 384 KB PNG against 36 KB AVIF at
       the same 1200x675. image-set() lets the browser choose; anything that
       cannot read AVIF silently takes the PNG. */
    background-image: image-set(
      url("/examples/assets/theme-2026/texture-offwhite.avif") type("image/avif"),
      url("/examples/assets/theme-2026/texture-offwhite@band.png") type("image/png"));
  }

  /* ── the Africa water motif ────────────────────────────────────────────
     THE REAL ILLUSTRATION. My first pass masked africa-au.svg with a gradient,
     which was wrong in kind: the AU map is a 55-country political map, and the
     theme's motif is a bespoke layered paper-cut of water with droplets, a
     white inner outline and a navy stroke. No gradient through a political
     map produces that, and redrawing it by hand would be inventing artwork.

     So the master lockup is used directly and WINDOWED to the illustration
     with background-position — original pixels, nothing re-encoded, no crop
     step and no second asset to keep in sync. The numbers are measured, not
     guessed: an alpha scan of lockup-horizontal-en.png (1400x909) finds the
     illustration at x 238..729, y 174..734.

     CORRECTED: that column run MERGED the illustration with the "20"/"26"
     tiles, which sit at the same x range higher up — so the window was
     showing the year twice, once as artwork and once as the HTML tiles
     beside it. Caught by tracing the window and finding tile rectangles in
     the path data. Africa alone ends at x 638, so the window is 400 wide:
     size 1400/400 = 350%, position 238/(1400-400) = 23.80%,
     174/(909-560) = 49.86%. [measured 2026-10-02] */
  .au-theme-africa {
    inline-size: clamp(3rem, 7vw, 5.4rem);
    aspect-ratio: 400 / 560;
    background-repeat: no-repeat;
    /* 800px wide is ample: the band renders this at box-width x 3.5, so a
       63px box needs 220px, or 440px on a 2x screen. The 1400px master stays
       in the folder for print and for re-measuring the window. */
    background-image: image-set(
      url("/examples/assets/theme-2026/lockup-horizontal-en.avif") type("image/avif"),
      url("/examples/assets/theme-2026/lockup-horizontal-en@band.png") type("image/png"));
    background-size: 350% auto;
    background-position: 23.80% 49.86%;
    flex: none;
  }

  /* ── the year, as four tiles ──────────────────────────────────────────── */
  .au-theme-year {
    display: grid;
    gap: 4px;
    flex: none;
  }
  /* TWO boxes, not four. The master lockup sets "20" and "26" as two
     outlined tiles stacked vertically, each holding a PAIR of digits — I had
     built a 2x2 grid of single digits off the low-resolution slide. */
  .au-theme-year span {
    display: grid;
    place-items: center;
    border: 2px solid var(--au-theme-ink);
    padding: .12em .22em;
    color: var(--au-theme-ink);
    font-family: var(--atlas-font-display, system-ui);
    font-weight: 800;
    font-size: clamp(.72rem, 1.5vw, 1.15rem);
    line-height: 1;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
  }

  /* ── the words ─────────────────────────────────────────────────────────
     The headline sits on a highlight bar drawn with box-decoration-break so
     it wraps correctly on a narrow screen — the artwork's marker-pen bar is
     a single rectangle because a PNG cannot wrap. */
  .au-theme-words { min-inline-size: 0; display: block; }
  .au-theme-eyebrow {
    display: block;
    margin: 0 0 .2em;
    font-size: clamp(.58rem, 1vw, .72rem);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .72;
  }
  .au-theme-headline {
    display: block;
    margin: 0;
    font-family: var(--atlas-font-display, system-ui);
    font-size: clamp(.95rem, 2.3vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.12;
    text-transform: uppercase;
  }
  .au-theme-headline span {
    background: var(--au-theme-water);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: .06em .3em;
  }
  .au-theme-sub {
    display: block;
    margin: .45em 0 0;
    font-size: clamp(.72rem, 1.25vw, 1rem);
    font-weight: 700;
    line-height: 1.3;
    max-inline-size: 46ch;
  }

  /* ── the lock-ups ─────────────────────────────────────────────────────── */
  .au-theme-marks {
    display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.1rem);
    flex: none;
  }
  /* THE REAL AGENDA 2063 MARK, lifted from the official banner artwork
     (_theme-src/banner.png). It is the only copy we hold that a browser can
     read: the vector we have is an Illustrator EPS with no PDF stream, and
     nothing here converts PostScript. So it is a raster and it carries the
     banner's own paper behind it [owner: use it as it is, 2026-10-29]. */
  .au-theme-agenda img { display: block; inline-size: clamp(4.5rem, 8.5vw, 7rem); block-size: auto; }
  .au-theme-rule { inline-size: 1px; align-self: stretch; background: var(--au-theme-ink); opacity: .25; }
  .au-theme-au { display: flex; align-items: center; gap: .45rem; }
  /* the real AU logo, emblem and wordmark together, not the bare emblem
     with a line of type beside it [owner 2026-10-29] */
  .au-theme-au img { inline-size: clamp(4.5rem, 8.5vw, 7rem); block-size: auto; }
  .au-theme-au span { font-size: clamp(.5rem, .85vw, .62rem); line-height: 1.2; max-inline-size: 7ch; opacity: .85; }

  /* ── interaction ──────────────────────────────────────────────────────
     It is a link, which the AU's own banner fails to be. The water rises
     slightly and the highlight deepens — restrained, because this sits on
     every page and anything livelier becomes wallpaper by the third visit. */
  a.au-theme { cursor: pointer; }
  a.au-theme .au-theme-africa,
  a.au-theme .au-theme-headline span { transition: all var(--atlas-duration-slow-01, 400ms) cubic-bezier(.645,.045,.355,1); }
  a.au-theme:hover .au-theme-africa { transform: translateY(-2px) scale(1.03); }
  a.au-theme:hover .au-theme-headline span { background: color-mix(in oklch, var(--au-theme-water), var(--au-theme-ink) 12%); }
  a.au-theme:focus-visible { outline: 3px solid var(--au-theme-ink); outline-offset: -3px; }

  /* ── narrow ───────────────────────────────────────────────────────────
     A CONTAINER QUERY, and it has to be. This first shipped as
     `@media (width < 48rem)`, which asks how wide the WINDOW is — so in a
     720px column on a 1440px screen the band still believed it was wide and
     the Agenda 2063 lock-up sat on top of the headline. Where this component
     ends up is undecided, which is exactly the case a media query cannot
     serve: it must answer to the width it is GIVEN.

     The artwork, at 7.3:1, can do neither — it can only scale, so on a phone
     it becomes a strip of 6px type or it gets cropped. */
  .au-theme-shell { container-type: inline-size; }
  /* ...and no closing air either. section.css has main pay for the page's
     last gap once (main { padding-block-end }), which here put 80px of white
     between the theme band and the newsletter. When the page ENDS on this
     band there is nothing to separate it from, so main pays nothing. */
  main:has(> .au-theme-shell:last-child) { padding-block-end: 0; }
  /* The theme band sits HARD against the band above it. .atlas-band-flush
     says so in the markup and carries no padding of its own; note it is
     used INSTEAD of .atlas-band, not beside it, because the rhythm rule
     in molecules/section.css is the more specific of the two and would
     win. The band's own air is inside .au-theme, so a gap out here would
     be white space for nothing. [owner, 2026-10-29] */

  @container (width < 48rem) {
    .au-theme { grid-template-columns: auto auto minmax(0, 1fr); row-gap: .9rem; }
    .au-theme-marks { grid-column: 1 / -1; justify-content: flex-start; }
    .au-theme-sub { max-inline-size: none; }
  }
  @container (width < 30rem) {
    .au-theme { grid-template-columns: auto minmax(0, 1fr); }
    .au-theme-year { grid-row: 1; justify-self: start; }   /* the tiles are their own width, not the column's */
    .au-theme-africa { grid-row: 1; }
    /* THE WORDS MUST SPAN, or they size column 1 from row 2 and the year is
       left with nothing: the auto column grew to the full measure of the
       headline and the four year tiles resolved to 0px, hard against the
       right edge. Spanning puts the measure on the row that owns it. */
    .au-theme-words { grid-column: 1 / -1; }
  }

  /* ── dark ─────────────────────────────────────────────────────────────── */
  [data-theme="dark"] .au-theme, .atlas-dark .au-theme {
    --au-theme-paper: #0f1a2b;
    --au-theme-ink:   #eaf4fb;
    --au-theme-line:  #1d2c42;
    --au-theme-maroon:#e6a8b8;
  }
  [data-theme="dark"] .au-theme-year span, .atlas-dark .au-theme-year span {
    border-color: var(--au-theme-water); color: var(--au-theme-water);
  }
  [data-theme="dark"] .au-theme-headline span, .atlas-dark .au-theme-headline span {
    background: var(--au-theme-water); color: #0f1a2b;
  }

  @media (prefers-reduced-motion: reduce) {
    a.au-theme .au-theme-africa, a.au-theme .au-theme-headline span { transition: none; }
    a.au-theme:hover .au-theme-africa { transform: none; }
  }

  /* ░░ The homepage opens straight into the lead band. Every other page opens
     with a breadcrumb and a pagehead, which carry the air under the nav; this
     one has neither, and section.css deliberately gives a FIRST child no
     leading margin so a stack does not open with a gap. So the first band
     takes the section rhythm itself, the same 80px that separates every band
     below it. [owner: spacing against the nav, 2026-10-29] ░░ */
  main > .atlas-section:first-of-type { margin-block-start: var(--atlas-spacing-section); }

  .atlas-records-feature { --atlas-records-tile: 22rem; }