/* ─────────────────────────────────────────────────────────────────────────────
   site.css — the site-wide accessibility and reading layer (2026-09-22).
   Injected LAST into every page's <head> by .eleventy.js, so it overrides the
   per-page inline styles without editing 50+ templates. Keep it small.
   ───────────────────────────────────────────────────────────────────────────── */

/* Skip link (keyboard / screen-reader users jump past the masthead) */
.skip-link{position:absolute;left:12px;top:-80px;z-index:1000;background:#001A3D;color:#F5F2ED;
  padding:12px 18px;font:700 12px/1 'Montserrat',sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{top:12px}
#main:focus{outline:none}

/* Focus: navy ring on cream (gold was 2.57:1, under the 3:1 WCAG minimum); cream ring on navy */
:focus-visible{outline:2px solid #001A3D !important;outline-offset:3px !important}
.sec-cta :focus-visible,.final-cta :focus-visible,footer :focus-visible,.hero :focus-visible,
.tl-hero :focus-visible,.art-hero :focus-visible,.art-divider :focus-visible,.issue-grid-section :focus-visible,
.circuit-feat :focus-visible,.launch-banner :focus-visible,.mem-signup :focus-visible{outline-color:#F5F2ED !important}

/* Masthead nav: legible type, 24px+ tap targets (WCAG 2.5.8), passing colours */
header.ascnav nav{font-size:11px;gap:0 18px}
header.ascnav nav>a,header.ascnav .navdd-btn{min-height:32px;display:inline-flex;align-items:center;font-size:11px}
header.ascnav nav a{color:#5E5E5E}
header.ascnav nav a:hover,header.ascnav nav a[aria-current],header.ascnav .navdd-btn[aria-current]{color:#AD5334}
header.ascnav nav a.issue,header.ascnav nav a.nav-join{color:#83691E}
header.ascnav .navdd-menu a{min-height:36px;display:flex;align-items:center}
@media(max-width:560px){header.ascnav nav{gap:0 13px;font-size:11px;letter-spacing:.08em}
  header.ascnav nav>a,header.ascnav .navdd-btn{font-size:11px}}

/* Gold and terracotta used as TEXT on cream fail AA (2.57:1 and 3.89:1).
   On cream grounds only, the same hues darkened to pass (4.7:1 and 4.6:1).
   Navy grounds keep the brand values, where they already pass (gold 6.0:1). */
.issue-reads,.other-sections,.sec-hero,.sec-body,.toc-wrap,.ed-head,.art-body,.art-foot,.amend-list,
.pullquote,.premise,.nf,.mem-hero,.tier-card,.b-side-index,.kit-note,.more-from,.series-page{
  --gold:#83691E;--terra:#AD5334;--terracotta:#AD5334}

/* Publication date: its own quiet line under the byline */
.pubdate{display:block;margin-top:.55em;font-weight:500;opacity:.75}

/* ── Reading layer (2026-09-22) ─────────────────────────────────────────────
   Body copy in Newsreader, a text serif sized for screen reading. Cormorant
   stays for display (titles, standfirsts, captions); Montserrat for labels. */
.art-body p,.art-body li,.art-body blockquote,.mod p,.mod li,.b-side-body p{
  font-family:'Newsreader',Georgia,'Times New Roman',serif;
  font-size:1.28rem;line-height:1.62;letter-spacing:0;font-optical-sizing:auto}
.art-body p.lede{font-size:1.42rem;line-height:1.55}
.art-body p.lede::first-letter{font-family:'Cormorant Garamond',serif}
@media(max-width:560px){
  .art-body p,.art-body li,.art-body blockquote,.mod p,.mod li{font-size:1.19rem;line-height:1.6}
  .art-body p.lede{font-size:1.3rem}}

/* Masthead on one line at phone width: The Circuit, The Sessions and About
   move into the Sections menu (same links, no duplication in the tab order). */
.dd-sm-only{display:none}
@media(max-width:560px){
  header.ascnav nav>a.nav-sm-hide{display:none}
  .navdd-menu .dd-sm-only{display:flex}
  header.ascnav nav{flex-wrap:nowrap;gap:0 16px}}

/* "More from this section" at the end of a piece */
.more-from{max-width:680px;margin:0 auto;padding:8px 24px 0}
.more-from .mf-label{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold,#83691E);margin:0 0 6px;padding-top:44px;border-top:1px solid rgba(0,26,61,.12)}
.more-from a{display:block;text-decoration:none;border-top:1px solid rgba(0,26,61,.12);padding:18px 0}
.more-from a:first-of-type{border-top:0}
.more-from .mf-title{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:500;color:#001A3D;margin:0 0 4px;line-height:1.15}
.more-from .mf-dek{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;line-height:1.4;color:rgba(0,26,61,.6);margin:0}
.more-from a:hover .mf-title{color:#AD5334}
@media(max-width:560px){.more-from{padding:8px 20px 0}}

/* Footer: the sections, the podcast, the dispatch and search — one quiet row */
.sec-foot{flex-wrap:wrap}
.foot-links{flex-basis:100%;display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;align-items:center;
  padding:0 0 22px;margin:0 0 18px;border-bottom:1px solid rgba(245,242,237,.09)}
.foot-links a{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(245,242,237,.62);text-decoration:none}
.foot-links a:hover{color:#F5F2ED}
.foot-links .foot-sep{color:rgba(245,242,237,.25);font-size:10px}
@media(max-width:560px){.foot-links{gap:8px 14px;padding-bottom:18px}.foot-links .foot-sep{display:none}}
.teaser-footer{flex-wrap:wrap}

/* Footer band: was defined per page, so pages that only include the partial
   (search, series, generated covers) rendered it unstyled. */
.sec-foot{background:#001A3D;padding:28px 52px 36px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  border-top:1px solid rgba(245,242,237,.06)}
.sec-foot p{margin:0;font-family:'Montserrat',sans-serif;font-size:10px;color:rgba(245,242,237,.5);letter-spacing:.04em}
.sec-foot .right{text-transform:uppercase;letter-spacing:.12em}
.sec-foot a{color:inherit}
@media(max-width:900px){.sec-foot{padding:24px 22px 32px;flex-direction:column;gap:12px;text-align:center}}