/* Consider the Source — shared editorial styles
   Cream-and-color system from the collection's own design language. */
:root{
  /* patriot-theme — red / white / blue + a little gold (fleet Mode A) */
  --patriot-navy:#0A3161; --patriot-white:#F7F5F0; --patriot-red:#B31942; --patriot-gold:#C5A046;
  --navy:#0A3161; --navy-900:#061f3d; --red:#B31942; --red-600:#971532; --gold:#C5A046;
  --paper:#F7F5F0; --panel:#EAEDF2; --card:#FFFFFF; --ink:#0A3161; --mute:#3c5a83;
  --line:rgba(10,49,97,.15); --gold-line:rgba(197,160,70,.55);
  /* series accents kept as a navy→federal-blue arc so each season still reads distinct,
     while the whole book stays on the flag palette (red reserved for CTA/alert, gold for detail) */
  --s1:#0A3161; --s2:#0e2f57; --s3:#123f74; --s4:#16487f; --s5:#1e4d80;
  --s6:#265a8c; --s7:#0d3568; --s8:#082744; --s9:#2c5f94;
  --acc:var(--navy);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:19px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono)}

/* ---- top nav ---- */
.topnav{position:sticky;top:0;z-index:40;background:var(--navy);border-bottom:3px solid var(--gold)}
.topnav .row{max-width:1180px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:20px}
.topnav .brand{font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;color:var(--patriot-white)}
.topnav .brand .dot{color:var(--red)}
.topnav nav{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.topnav nav a{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#c2cede;text-decoration:none;padding:7px 12px;border-radius:999px}
.topnav nav a:hover{color:var(--patriot-white);background:rgba(255,255,255,.12)}
.topnav nav a.active{color:var(--navy);background:var(--patriot-white)}

/* ---- kickers / rules ---- */
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);margin:0}
.rule{width:64px;height:3px;background:var(--red);border:0;margin:26px 0}
.rule.c{margin-left:auto;margin-right:auto}
.tagline{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--red)}

/* ---- buttons — navy default, red for true CTAs, gold-detail focus ---- */
.btn{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border-radius:999px;
  text-decoration:none;cursor:pointer;border:1.5px solid var(--navy);background:var(--navy);color:var(--patriot-white);
  transition:transform .12s ease,background .15s ease,color .15s ease}
.btn:hover{transform:translateY(-1px);background:var(--navy-900);border-color:var(--navy-900)}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:var(--patriot-white)}
.btn.acc{background:var(--red);border-color:var(--red);color:var(--patriot-white)}
.btn.acc:hover{background:var(--red-600);border-color:var(--red-600)}
.btn.small{padding:8px 14px;font-size:11.5px}

/* ---- essay typography (shared by reader) ---- */
.prose h2{font-family:var(--display);font-weight:900;font-size:clamp(23px,3.4vw,29px);line-height:1.14;
  letter-spacing:-.01em;margin:2.1em 0 .55em}
.prose p{margin:0 0 1.15em}
.prose p.signoff{font-family:var(--display);font-style:italic;color:var(--acc);font-size:22px;margin-top:1.6em}
.prose em{font-style:italic}
.prose strong{font-weight:600}

/* ---- footer ---- */
footer.site{text-align:center;padding:64px 0 84px;margin-top:70px;border-top:3px solid var(--gold)}
footer.site .q{color:var(--navy)}
footer.site .q{font-family:var(--display);font-weight:900;font-size:clamp(24px,5vw,36px);margin:0 0 8px;letter-spacing:-.01em}
footer.site .m{color:var(--mute);font-size:15px;margin:6px 0 0}

/* ---- generic card ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}

/* ---- pills ---- */
.pill{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mute);display:inline-block}
.pill.acc{color:var(--acc);border-color:var(--acc)}

/* ---- progress bar ---- */
.bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--acc);border-radius:999px;transition:width .4s ease}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}