/* Mine America Great Again — base: tokens, type, chrome. Loaded by every page. */

/* Red, white and blue, in a deep register. --copper keeps its name because every stylesheet, every
   hand-drawn SVG and every status chip refers to it; it now holds the flag red.
   --patina is the true blue, --steel the structural slate. --navy is fixed in
   both themes because the footer band has to stay dark either way. */
:root{
  --paper:#F3F5F9;
  --surface:#FFFFFF;
  --surface-2:#E3E9F2;
  --ink:#121A2B;
  --ink-2:#3E4C63;
  --ink-3:#5A6880;
  --rule:#CBD4E2;
  --rule-strong:#9EAABE;
  --copper:#8E1223;
  --copper-2:#A8182A;
  --patina:#1B4FA0;
  --steel:#54657F;
  --navy:#12213F;
  --accent-solid:#8E1223;
  --accent-solid-2:#A8182A;
  color-scheme:light;
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  /* Only the email address and the plain-text listing block are monospace now,
     so a system stack does the job and no web font is fetched for it. */
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --barh:142px;
  --barh-min:96px;
  --gutter:104px;
  /* One height for every photographic band on the site — the home hero and all
     six page heads. Fixed rather than viewport-relative so the pages are the
     same size as each other, which is the point; stepped down by width because
     headlines wrap to more lines on narrow screens and still have to fit. */
  --bandh:780px;
  /* A contour-map texture laid under the whole page. The tile is flattened onto
     --paper at build time, so it carries the ground colour with it and there is
     one file per theme. See process_texture.py. */
  --texture:url("../img/topo-l.webp");
  /* One red for the dark grounds — photographs, the navy ticker and footer.
     There used to be three, because small text on a dark ground needs 4.5:1 and
     a red that bright is nowhere near the site red. So the small text on those
     grounds is no longer red at all: the eyebrow over a photograph and the
     figures in the ticker are set in the light ink instead. That leaves red for
     display emphasis and marks, which need only 3:1 — and at 3:1 the red can be
     this deep, one step off the site red rather than a different colour.
     Fixed in both themes; its ground is dark either way. */
  --red-on-dark:#C4243B;
}
@media (max-width:1200px){ :root{--bandh:740px} }
@media (max-width:1000px){ :root{--bandh:700px} }
@media (max-width:760px){ :root{--bandh:620px} }
@media (max-width:560px){ :root{--bandh:580px} }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0B1220; --surface:#131C2E; --surface-2:#172239;
    --ink:#E8EDF5; --ink-2:#A6B2C6; --ink-3:#8A98AF;
    --rule:#2B3750; --rule-strong:#44526C;
    --copper:#EF5160; --copper-2:#B82740; --patina:#6FA8FF; --steel:#94A6C0;
    --navy:#12213F; --accent-solid:#A81A2E; --accent-solid-2:#C4243B;
    --texture:url("../img/topo-d.webp");
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0B1220; --surface:#131C2E; --surface-2:#172239;
  --ink:#E8EDF5; --ink-2:#A6B2C6; --ink-3:#8A98AF;
  --rule:#2B3750; --rule-strong:#44526C;
  --copper:#EF5160; --copper-2:#B82740; --patina:#6FA8FF; --steel:#94A6C0;
  --navy:#12213F; --accent-solid:#A81A2E; --accent-solid-2:#C4243B;
  --texture:url("../img/topo-d.webp");
  color-scheme:dark;
}

*{box-sizing:border-box}
/* Root size drives every rem on the site — change this to scale all text. */
html{scroll-behavior:smooth;font-size:19px}
@media (max-width:1000px){ html{font-size:18px} }
@media (max-width:760px){ html{font-size:17.5px} }
@media (max-width:640px){ html{font-size:17px} }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1.04rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--copper);outline-offset:2px}

/* Text selection and tap feedback were falling through to the browser's
   default blue. Both now use the site's own accent. */
::selection{background:rgba(142,18,35,.28)}
::-moz-selection{background:rgba(142,18,35,.28)}
html{-webkit-tap-highlight-color:rgba(142,18,35,.20)}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }

.wrap{max-width:1380px;margin:0 auto;padding-inline:var(--gutter)}
@media (max-width:1200px){ :root{--gutter:80px} }
@media (max-width:1000px){ :root{--gutter:60px} }
@media (max-width:760px){ :root{--gutter:48px} }
@media (max-width:640px){ :root{--gutter:40px} }
@media (max-width:420px){ :root{--gutter:30px} }

h1,h2,h3,h4{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.08;letter-spacing:-.018em}
h1{font-size:clamp(2.3rem,6.4vw,4.3rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:700}
h3{font-size:1.16rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}

.eyebrow{font-family:var(--f-display);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.eyebrow.q{color:var(--ink-3)}
.mono{font-family:var(--f-display);font-variant-numeric:tabular-nums}
.lede{font-size:clamp(1.12rem,1.9vw,1.38rem);line-height:1.56;color:var(--ink-2)}
.prose{max-width:66ch}
.prose p + p{margin-top:.95em}
.srcnote{font-family:var(--f-display);font-size:.78rem;font-weight:500;letter-spacing:.01em;color:var(--ink-3);line-height:1.8}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
header.site{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
  /* Solid, not translucent: backdrop-filter is unevenly supported and the
     page scrolls content directly beneath this bar. */
  background:var(--paper);
  /* A red rule closes the header and a navy band closes the page. Between them
     the body stays white: the whole scheme in three moves, no bunting. */
  border-bottom:3px solid var(--copper);
}
.bar{display:flex;align-items:center;gap:20px;height:var(--barh);transition:height .22s ease}
header.site.is-compact .bar{height:var(--barh-min)}
.brand{display:flex;align-items:center;flex:0 0 auto;min-width:0;text-decoration:none}
/* The logo is a complete lockup and carries the name, so it is sized to be read,
   not treated as a small mark. It shrinks once the page is scrolled. */
.brand .logo{display:block;height:116px;width:auto;max-width:100%;transition:height .22s ease}
header.site.is-compact .brand .logo{height:74px}
.brand:hover .logo{opacity:.88}
nav.main{margin-left:auto;display:flex;gap:4px;align-items:center;overflow-x:auto;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main a{
  font-family:var(--f-display);font-size:.88rem;font-weight:500;letter-spacing:.012em;
  text-decoration:none;color:var(--ink-2);padding:9px 13px;border-radius:5px;white-space:nowrap;
}
nav.main a:hover{color:var(--ink);background:var(--surface-2)}
nav.main a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--copper)}
nav.main a.cta{background:var(--accent-solid);color:#fff;font-weight:600;margin-left:6px}
nav.main a.cta:hover,nav.main a.cta[aria-current="page"]{background:var(--accent-solid-2);color:#fff;box-shadow:none}
/* Seven nav items plus the call to action need more room than five did. The bar
   steps down before the tablet breakpoint so the CTA never scrolls out of sight
   on a laptop, and below 1240 the header pulls its own gutter in tighter than
   the content's — buying width from the margin rather than from the type or the
   logo, both of which are the size they are on purpose. */
@media (max-width:1240px){
  header.site .wrap.bar{padding-inline:max(26px,calc(var(--gutter) - 26px))}
}
@media (max-width:1240px){
  .brand .logo{height:104px}
  header.site.is-compact .brand .logo{height:70px}
  nav.main a{padding:8px 10px;font-size:.84rem}
}
@media (max-width:1060px){
  :root{--barh:124px;--barh-min:90px}
  .bar{gap:16px}
  .brand .logo{height:92px}
  header.site.is-compact .brand .logo{height:64px}
  nav.main a{padding:7px 9px;font-size:.82rem}
}
@media (max-width:900px){
  :root{--barh:112px;--barh-min:84px}
  .bar{gap:14px}
  .brand .logo{height:90px}
  header.site.is-compact .brand .logo{height:64px}
  nav.main a{padding:7px 9px;font-size:.82rem}
}
@media (max-width:560px){
  :root{--barh:92px;--barh-min:74px}
  .brand .logo{height:72px}
  header.site.is-compact .brand .logo{height:56px}
  nav.main a{padding:7px 9px;font-size:.82rem}
}
/* Once the nav has to scroll sideways, say so. Without a cue nobody discovers
   the items past the edge; a soft trailing fade is the cue. It is driven by
   --nav-fade, which site.js sets to 0 when the nav is scrolled to the end. */
@media (max-width:940px){
  nav.main{
    --nav-fade:26px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--nav-fade)),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - var(--nav-fade)),transparent);
    transition:none;
  }
}
@media (prefers-reduced-motion:reduce){ .bar,.brand .logo{transition:none} }

/* ---------- layout primitives ---------- */
section{padding-block:clamp(48px,6vw,78px);border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:0}

/* ---------- charcoal bands ----------
   These pages are long, and a single paper colour from top to bottom gives a
   reader nothing to measure progress against. Alternate sections are set on
   charcoal instead. Rather than restyling every component for a dark ground,
   the band simply redefines the tokens everything is already built from — so
   cards, tables, rules, chips and links all follow without a single extra rule.
   One definition serves both themes: charcoal sits well clear of the light
   paper and of the navy-black used in dark mode.
   `build.py` applies the class, alternating and counting the photographic
   bands as dark, so two dark sections never end up adjacent. */
section.band{
  --paper:#252B33;
  --surface:#2E353F;
  --surface-2:#3A424E;
  --ink:#F0F3F7;
  --ink-2:#C2CAD6;
  /* --ink-3 and --copper are lighter here than they are in the dark theme.
     They are the two that carry small text — source notes, eyebrows, status
     chips — and on charcoal the darker values land at about 3.9:1, under the
     4.5:1 AA needs for text that size. Measured against the lightest ground a
     band uses (--surface-2, the callout panels), these clear it. */
  --ink-3:#B0BAC8;
  --rule:#404955;
  --rule-strong:#5C6775;
  --copper:#FF8D97;
  --copper-2:#E8566A;
  --patina:#84B6FF;
  --steel:#9FAEC2;
  --accent-solid:#A81A2E;
  --accent-solid-2:#C4243B;
  color-scheme:dark;
  background:var(--paper);
  color:var(--ink);
}
/* The colour change is the divider, so drop the hairline on both sides of it. */
section.band{border-bottom:0}
section:has(+ section.band){border-bottom:0}

/* ---------- textured sections ----------
   The contour drawing, used sparingly: on some light sections and not others.
   The tile already carries --paper as its ground, so the colour underneath is
   only what shows while it loads, or if it never does. `bands()` in build.py
   places these so a textured section and a plain one are never adjacent — the
   difference is quiet enough that it wants a charcoal or photographic band
   between them rather than a hard edge. */
section.tex{
  background-color:var(--paper);
  background-image:var(--texture);
  background-repeat:repeat;
  background-size:860px;
  background-position:center top;
}
.sechead{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:26px}
.sechead h1,.sechead h2{flex:1 1 320px}
.sechead .note{font-family:var(--f-display);font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,52px);align-items:start}
@media (max-width:860px){ .split{grid-template-columns:1fr} }

/* page masthead used by inner pages */
.masthead{padding-block:clamp(34px,5vw,58px) clamp(22px,3vw,32px);border-bottom:1px solid var(--rule)}
.masthead h1{font-size:clamp(2rem,5vw,3.4rem)}
.masthead .lede{margin-top:18px;max-width:64ch}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--f-display);font-weight:600;font-size:.98rem;cursor:pointer;border-radius:4px;
  padding:12px 22px;border:1px solid transparent;text-decoration:none;display:inline-block;
}
.btn.primary{background:var(--accent-solid);color:#fff}
.btn.primary:hover{background:var(--accent-solid-2)}
.btn.ghost{background:transparent;border-color:var(--rule-strong);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink-3)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--copper);cursor:pointer;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid currentColor}

.addr{
  font-family:var(--f-mono);font-size:.9rem;color:var(--ink);background:var(--surface-2);
  padding:9px 12px;border-radius:3px;display:inline-block;user-select:all;overflow-wrap:anywhere;
  cursor:text;
}

/* ---------- next-page rail ---------- */
.nextup{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:6px}
.nextup a{background:var(--surface);padding:24px 22px;text-decoration:none;display:block}
.nextup a:hover{background:var(--surface-2)}
.nextup .k{font-family:var(--f-display);font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--copper)}
.nextup h3{margin-top:8px;font-size:1rem}
.nextup p{margin-top:8px;font-size:.93rem;color:var(--ink-2);line-height:1.45}

/* ---------- footer ---------- */
footer{
  padding-block:44px 52px;
  background:var(--navy);
  border-top:3px solid var(--copper);
}
/* A short link row above the footer proper, for the pages that are not part of
   the argument the main navigation makes. */
.footnav{
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;
  padding-bottom:22px;margin-bottom:26px;
  border-bottom:1px solid rgba(242,245,250,.16);
}
.footnav a{
  font-family:var(--f-display);font-size:.78rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(242,245,250,.74);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s ease,border-color .2s ease;
}
/* Not var(--copper-2): the base red is now deep enough that it disappears
   against the navy footer, and this underline is the only thing marking which
   page you are on down here. Fixed to the red used over photographs. */
.footnav a:hover{color:#FFFFFF;border-bottom-color:var(--red-on-dark)}
.footnav a[aria-current="page"]{color:#FFFFFF;border-bottom-color:var(--red-on-dark)}
.footnav a:focus-visible{outline:2px solid var(--red-on-dark);outline-offset:3px}

.foot{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-start}
.foot p{font-family:var(--f-display);font-size:.82rem;font-weight:500;line-height:1.7;color:rgba(242,245,250,.72);letter-spacing:0}
/* The footer band is navy in both themes now, so the mark is always lifted. */
.foot .footmark{width:240px;height:auto;display:block;margin-bottom:14px;filter:brightness(1.14)}
.foot a{color:rgba(242,245,250,.82);text-decoration:none;border-bottom:1px solid rgba(242,245,250,.28)}
.foot a:hover{color:#FFFFFF;border-color:rgba(242,245,250,.7)}
.foot b{color:#F2F5FA;font-family:var(--f-display);letter-spacing:.05em}

/* The sticky header animates its height as it un-compacts. Scroll anchoring reads
   that as content growing above the viewport and nudges scrollY to compensate,
   which fights an in-progress smooth scroll and strands the page about 40px short
   of the top — reproducibly, on the longer pages. Turning anchoring off for the
   page body ends the tug-of-war. Nothing is lost: every image here carries an
   explicit width and height, so there is no late reflow for anchoring to absorb. */
main,footer{overflow-anchor:none}

/* ---------- back to top ----------
   Bottom-left, out of the way of the sticky header and of anything a phone
   browser parks at the bottom-right. Hidden until the page has actually been
   scrolled, and hidden with `visibility` rather than opacity alone so it never
   catches a tab stop while it is invisible. */
.totop{
  position:fixed;z-index:70;
  left:calc(20px + env(safe-area-inset-left,0px));
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:9px;
  margin:0;padding:11px 16px 11px 13px;
  border:1px solid rgba(242,245,250,.24);border-radius:4px;
  background:var(--navy);color:#F2F5FA;
  font-family:var(--f-display);font-size:.74rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;line-height:1;
  cursor:pointer;
  box-shadow:0 6px 22px rgba(6,10,20,.30);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,background .16s ease,border-color .16s ease;
}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--accent-solid);border-color:var(--accent-solid)}
.totop:active{background:var(--accent-solid-2)}
.totop:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.totop svg{width:15px;height:15px;flex:0 0 auto}

/* On a phone the label is dropped and the control becomes a square. */
@media (max-width:560px){
  .totop{
    left:calc(14px + env(safe-area-inset-left,0px));
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    padding:13px;gap:0;
  }
  .totop span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .totop svg{width:17px;height:17px}
}