/* ═══════════════════════════════════════════════════════════════════════════
   NSAG — shared stylesheet for the umbrella pages.
   Typography follows the module pages: Cormorant Garamond display,
   Syne for labels and navigation, Manrope for reading text.
   Every text/background pairing below was computed against its real
   background and clears WCAG AA (≥4.5 for body text, ≥3 for large display).
   No inline styles: this file exists so the report-only CSP, which forbids
   inline style, is satisfied on these pages.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --nsag:#2E2A63;        /* 6.94 on --bg, 7.69 reversed on white          */
  --nsag-l:#3F3A83;
  --nsag-p:#E2E3EE;
  --bg:#E9EAE4;
  --white:#fff;
  --text:#14161A;        /* 15.46 on --bg                                 */
  --muted:#474C52;       /* 6.24 on --bg, 6.92 on white                   */
  --border:#C6C8C1;
  --gold:#5E4310;        /* 6.41 on --pause-bg — deepened for AA          */
  --gold-line:#8C6A20;
  --pause-bg:#F3EBD8;
  --teal:#12513F;        /* 6.68 on --live-bg                             */
  --live-bg:#E1EBE7;
  --ink-soft:#D9D7E8;    /* 10.11 on --text panels                        */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);
  line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:'EB Garamond',ui-serif,'Iowan Old Style',serif;line-height:1.2;font-weight:600}
a{color:var(--nsag);text-decoration:underline;text-underline-offset:3px}
a:hover{color:#221E4C}
:focus-visible{outline:3px solid var(--nsag);outline-offset:3px;border-radius:0}
img,svg{display:block;max-width:100%}

.skip{position:absolute;left:12px;top:-100px;background:var(--nsag);color:#fff;padding:12px 20px;z-index:200;
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:600;border-radius:0;text-decoration:none;transition:top .15s}
.skip:focus{top:0;color:#fff}

.wrap{max-width:1060px;margin:0 auto;padding:0 clamp(1.1rem,5vw,2rem)}
.narrow{max-width:780px}

/* ── navigation: wraps on small screens rather than disappearing ── */
.nav{background:var(--white);border-bottom:1px solid var(--border);padding:.85rem 0}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap}
.nav__brand{font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:1.05rem;color:var(--nsag);letter-spacing:.08em;text-decoration:none}
.nav__links{display:flex;flex-wrap:wrap;gap:.55rem 1.15rem;font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:.82rem;font-weight:600}
.nav__links a{color:var(--muted);text-decoration:none}
.nav__links a:hover{color:var(--nsag);text-decoration:underline}
.nav__links a[aria-current="page"]{color:var(--nsag);text-decoration:underline;text-underline-offset:5px}

/* ── page head ── */
.phead{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem)}
.slabel{display:inline-block;font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--nsag);background:var(--nsag-p);padding:.25rem .65rem;border-radius:0;margin-bottom:1.1rem}
h1{font-size:clamp(2.3rem,6vw,4rem);max-width:20ch;letter-spacing:-.01em}
.lede{max-width:64ch;font-size:clamp(1.02rem,1.6vw,1.16rem);color:var(--muted);margin-top:1.2rem}

.section{padding:0 0 clamp(2.5rem,5vw,4rem)}
.section h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:2.6rem 0 .9rem;max-width:26ch}
.section h3{font-size:1.28rem;margin:1.9rem 0 .5rem}
.section p{max-width:68ch;margin-bottom:1rem}
.section ul,.section ol{max-width:68ch;margin:0 0 1.15rem 1.2rem}
.section li{margin-bottom:.5rem}

/* ── panels ── */
.note{border-left:4px solid var(--gold-line);background:var(--pause-bg);color:var(--gold);
  padding:1.1rem 1.3rem;border-radius:0;margin:1.6rem 0;max-width:68ch}
.note strong{color:#5C3E0D}
.note a{color:#5C3E0D}
.live{border-left:4px solid var(--teal);background:var(--live-bg);color:var(--teal);
  padding:1.1rem 1.3rem;border-radius:0;margin:1.6rem 0;max-width:68ch}
.live strong{color:#12463C}
.live a{color:#12463C}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1rem;margin:1.6rem 0}
.card{background:var(--white);border:1px solid var(--border);border-radius:0;padding:1.35rem}
.card h3{margin:0 0 .5rem;font-size:1.22rem}
.card p{font-size:.93rem;color:var(--muted);margin-bottom:.6rem}
.card p:last-child{margin-bottom:0}
.card .slabel{margin-bottom:.7rem}

.steps{counter-reset:step;list-style:none;margin-left:0}
.steps>li{counter-increment:step;position:relative;padding-left:3.1rem;margin-bottom:1.5rem;max-width:68ch}
.steps>li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:.05rem;
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:.82rem;color:var(--nsag);
  background:var(--nsag-p);border-radius:0;padding:.25rem .5rem}
.steps h3{margin:0 0 .3rem}

.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:0;background:var(--white);margin:1.6rem 0}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--border);vertical-align:top}
th{font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}

.btn{display:inline-block;background:var(--nsag);color:#fff;font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:600;font-size:.88rem;
  padding:.75rem 1.2rem;border-radius:0;text-decoration:none;margin:.35rem .5rem .35rem 0}
.btn:hover{background:#221E4C;color:#fff}
.btn--ghost{background:transparent;color:var(--nsag);border:1px solid var(--nsag)}
.btn--ghost:hover{background:var(--nsag-p);color:#221E4C}

.srcnote{display:block;margin-top:2rem;padding:.9rem 0 0 .95rem;border-left:3px solid var(--border);
  font-size:.85rem;line-height:1.6;color:var(--muted);max-width:68ch}

footer{background:var(--text);color:var(--ink-soft);padding:2.6rem 0;margin-top:2rem;font-size:.9rem}
footer a{color:#fff}
footer p{max-width:68ch;margin-bottom:.6rem}
footer .fnav{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:.8rem;font-weight:600;margin-top:.9rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:var(--nsag-p);
  color:#221E4C;padding:.12em .4em;border-radius:0;overflow-wrap:anywhere}
.section p a,.section li a{overflow-wrap:anywhere}