/* =====================================================================
   magneticnorse.com - the one stylesheet. "Cold North" (design locked
   2026-08-16, DESIGN-SPEC.md). Every hostname loads this file first.
   Page-specific rules live in /assets/pages/<page>.css and may only use
   the tokens below. No inline styles anywhere.
   ===================================================================== */

/* ---- fonts (self-hosted, OFL) ---- */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/archivo-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/archivo-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/archivo-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/archivo-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/archivo-narrow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/archivo-narrow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/archivo-narrow-latin-700-normal.woff2) format("woff2")}

/* ---- tokens ---- */
:root{
  --bg:#0e1116;          /* page background */
  --surface:#131922;     /* cards, stat cells, masthead, footer */
  --line:#1f262f;        /* hairline */
  --line-2:#2b3540;      /* outlined buttons, inputs */
  --muted:#6b7b8d;       /* labels, captions */
  --body:#8b9dae;        /* body text on the page */
  --body-2:#93a4b6;      /* body text on raised surfaces */
  --bright:#cddced;      /* strong text, links */
  --head:#f4f8fc;        /* headlines */
  --accent:#7fb2d6;      /* the ONE accent */
  --accent-deep:#5f97bf; /* accent hover only */
  --danger:#d98a83;      /* form errors only - a status, not an accent */
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --narrow:"Archivo Narrow","Archivo",system-ui,sans-serif;
  --wrap:780px;
  --r-card:12px;
  --r-btn:9px;
  --r-pill:7px;
  --gap:12px;
}

/* ---- reset + base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{
  font-family:var(--sans);font-size:15px;line-height:1.6;
  background:var(--bg);color:var(--body-2);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--bright);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
a:hover{color:var(--head);text-decoration-color:var(--accent)}
b,strong{color:var(--bright);font-weight:700}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;color:var(--bright);background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
hr,.rule-thin{border:none;border-top:1px solid var(--line);margin:34px 0}
.rule{border:none;border-top:1px solid var(--line);margin:28px 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
::selection{background:var(--accent);color:var(--bg)}

/* ---- type ---- */
h1,h2,h3,h4{color:var(--head);font-family:var(--sans);font-weight:700;letter-spacing:-.015em;line-height:1.15}
h1{font-weight:800;font-size:clamp(34px,8vw,62px);line-height:.94;letter-spacing:-.035em;text-transform:uppercase}
h2{font-size:clamp(20px,4.6vw,26px)}
h3{font-size:18px}
h4{font-size:15px}
p{max-width:64ch}
.eyebrow,.kicker,.dk,.label{
  font-family:var(--narrow);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.rd,.hl,.accent{color:var(--accent)}
.lede{font-size:17px;line-height:1.55;color:var(--body-2);max-width:60ch}
.lede strong{color:var(--head)}
.subquote{font-size:18px;line-height:1.5;color:var(--body-2);max-width:44ch;margin:16px auto 0}
.muted,.fine,.dlnote,.givenote,.thanks-fine,.gp-fine,.lfine,.fineprint{font-size:12.5px;line-height:1.6;color:var(--muted)}
.fine a,.fineprint a{color:var(--body-2)}

/* ---- pills / badges ---- */
.stamp,.pill,.badge{
  display:inline-block;font-family:var(--narrow);font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
  padding:8px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);color:var(--bright);
}
.badge.on,.pill.on{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:700}

/* ---- buttons ---- */
.btn,.btn-primary,.btn-ghost,.fundbtn,.go,.dl,.give,.gp-btn,.thanks-btn,.lfund,.lnombtn,.navbtn,
.subform button,button.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--narrow);font-weight:700;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;line-height:1;text-decoration:none;white-space:nowrap;
  padding:13px 22px;border-radius:var(--r-btn);border:1px solid transparent;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s,transform .06s;
}
.btn-primary,.fundbtn,.go,.dl,.give,.gp-btn,.thanks-btn,.lfund,.subform button,.navbtn{
  background:var(--accent);border-color:var(--accent);color:var(--bg);
}
.btn-primary:hover,.fundbtn:hover,.go:hover,.dl:hover,.give:hover,.gp-btn:hover,.thanks-btn:hover,.lfund:hover,.subform button:hover,.navbtn:hover{
  background:var(--accent-deep);border-color:var(--accent-deep);color:var(--bg);
}
.btn-ghost,.lnombtn{background:transparent;border-color:var(--line-2);color:var(--bright)}
.btn-ghost:hover,.lnombtn:hover{border-color:var(--accent);color:var(--head);background:transparent}
.btn:active,.btn-primary:active,.btn-ghost:active,.fundbtn:active,.go:active,.dl:active,.give:active,.gp-btn:active,.thanks-btn:active,.lfund:active,.lnombtn:active,.subform button:active,.navbtn:active{transform:translateY(1px)}
.btn-primary[disabled],.subform button:disabled,.btn[disabled]{opacity:.5;cursor:default;transform:none}
.btn-sm,.fundbtn{font-size:12px;padding:10px 14px}
.btn-lg{font-size:15px;padding:15px 26px}
.btn-block{width:100%}

/* ---- cards ---- */
.card,.callout,.email,.door,.release,.money,.nextup,.getpack,.thanks,.rq-done,.rq-why,.terms,.posture,.lnominate,.ltotals,.mathstrip,.filestrip{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
}
.card{padding:22px 24px}
.card h2,.card h3{margin-bottom:6px}
.card .sub{font-size:14px;color:var(--body);margin-bottom:16px;max-width:none}
.card p{font-size:14px;line-height:1.55;color:var(--body)}
.callout{padding:18px 20px;margin:22px 0 0}
.callout h3{font-size:14px;letter-spacing:.02em;margin-bottom:8px}
.callout p{font-size:14px;color:var(--body);line-height:1.6}
.callout p:last-child{margin-bottom:0}
.callout b{color:var(--bright)}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.grid{display:grid;gap:var(--gap)}

/* ---- stat band ---- */
.stats,.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gap)}
.stats>div,.figs>div{padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.stats .n,.figs .n{font-size:clamp(30px,6vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--head)}
.stats .n.accent,.figs .n.accent{color:var(--accent)}
@media (max-width:560px){.stats,.figs{grid-template-columns:repeat(2,1fr)}}
.stats .l,.figs .l{font-family:var(--narrow);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* ---- index rows (subdomain doors, manifests) ---- */
.rows{display:flex;flex-direction:column;gap:var(--gap)}
.row{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px 22px;display:flex;align-items:center;gap:24px;color:inherit;text-decoration:none;
}
.row .k{font-family:var(--narrow);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);width:88px;flex:none}
.row .t{font-size:21px;font-weight:700;letter-spacing:-.015em;color:var(--head);margin-bottom:5px}
.row .b{flex:1;min-width:0}
.row .b p{font-size:14px;line-height:1.55;color:var(--body)}
.row .act{font-family:var(--narrow);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--bright);white-space:nowrap}
@media (max-width:560px){
  .row{flex-wrap:wrap;gap:10px 16px}
  .row .k{width:auto}
  .row .b{flex-basis:100%}
}

/* ---- sections ---- */
.hero{padding:40px 0 34px;text-align:center;border-bottom:4px solid var(--line)}
.hero .kicker{margin-bottom:16px}
.hero .stamp{margin-top:22px}
.hero+.rule-thin,.hero+hr{display:none}
.hero .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.sec,.story,.about{margin:34px 0 0}
.sec h2,.story h2,.about h2{margin-bottom:10px}
.sec p,.story p,.about p{color:var(--body-2);line-height:1.7;margin-bottom:12px}
.sec p b,.story p b{color:var(--bright)}
.sec p:last-child{margin-bottom:0}
.list{list-style:none;margin:8px 0 0}
.list li{padding:12px 0 12px 22px;position:relative;border-bottom:1px solid var(--line);color:var(--body-2);line-height:1.6}
.list li:last-child{border-bottom:none}
.list li::before{content:"";position:absolute;left:0;top:21px;width:8px;height:8px;border-radius:2px;background:var(--accent)}
.list li b{color:var(--bright)}
.timeline{list-style:none;margin:10px 0 0}
.timeline li{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.timeline li:last-child{border-bottom:none}
.timeline .d{font-family:var(--narrow);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.timeline .t{color:var(--body-2);line-height:1.6}
.timeline .t b{color:var(--bright)}
@media (max-width:460px){.timeline li{grid-template-columns:1fr;gap:4px}}

/* ---- forms ---- */
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--narrow);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field label .opt{color:var(--muted);font-weight:500;letter-spacing:.06em;text-transform:none}
.field input,.field select,.field textarea,.subform input[type=email],input[type=text],input[type=email],select,textarea{
  width:100%;font-family:var(--sans);font-size:16px;line-height:1.3;
  color:var(--head);background:var(--bg);
  border:1px solid var(--line-2);border-radius:var(--r-btn);padding:12px 14px;
  outline:none;transition:border-color .12s;
}
.field textarea,textarea{min-height:110px;resize:vertical;line-height:1.5}
.field select,select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%237fb2d6' stroke-width='2'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.field input:focus,.field select:focus,.field textarea:focus,.subform input[type=email]:focus,input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--muted)}
.counter{font-size:11px;color:var(--muted);text-align:right;margin-top:4px;letter-spacing:.04em}
.agreerow{display:flex;gap:10px;align-items:flex-start;margin:14px 0}
.agreerow input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--accent)}
.agreerow label{font-size:14px;color:var(--body-2);line-height:1.5}
.trust{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.6}
.trust b{color:var(--body-2)}
.msg,.submsg,.formnote{font-size:14px;line-height:1.5;margin-top:12px;min-height:1.2em;color:var(--body-2)}
.msg{display:none}
.msg.show{display:block}
.msg.ok,.submsg.good{color:var(--accent)}
.msg.err,.submsg.bad,.formnote{color:var(--danger)}
.msg b{color:inherit}

/* ---- email capture (same markup on home, foia, donate) ---- */
.email{padding:22px 22px 24px;margin:34px 0 0;text-align:center}
.email h2{font-size:clamp(19px,4.4vw,24px);line-height:1.1}
.email p{color:var(--body);font-size:14px;margin:8px auto 14px;max-width:44ch}
.email .subform{max-width:440px;margin:0 auto}
.subform{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.subform input[type=email]{flex:1;min-width:200px}
.subform button{font-size:14px;padding:13px 20px}
.email .fine{margin-top:12px}
@media (max-width:460px){
  .subform{flex-direction:column;gap:8px}
  .subform input[type=email],.subform button{width:100%;min-width:0}
}

/* =====================================================================
   PARTIAL: SITE HEADER  (markup lives in src/partials/header.html)
   ===================================================================== */
.masthead{background:var(--surface);border-bottom:1px solid var(--line);color:var(--body-2)}
.mhrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;min-height:60px}
.brandwrap{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:inherit;flex:none}
.brandwrap:hover{color:inherit}
.avatar{width:34px;height:34px;flex:none;border-radius:8px;border:1px solid var(--line-2);object-fit:cover}
.masthead .brand{
  font-family:var(--narrow);font-weight:700;font-size:17px;letter-spacing:.08em;
  text-transform:uppercase;color:#eef3f8;white-space:nowrap;line-height:1;
}
.masthead .tag{
  font-family:var(--narrow);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
  padding-left:12px;border-left:1px solid var(--line-2);line-height:1;
}
.sitenav{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}
.sitenav a{
  font-family:var(--narrow);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--body-2);text-decoration:none;white-space:nowrap;
  padding:8px 10px;border-radius:var(--r-pill);border:1px solid transparent;line-height:1;
}
.sitenav a:hover{color:var(--head);background:var(--bg)}
.menubtn{display:none}
/* active page: the body carries data-nav="<key>", each link data-k="<key>" */
body[data-nav=home] .sitenav a[data-k=home],
body[data-nav=logs] .sitenav a[data-k=logs],
body[data-nav=foia] .sitenav a[data-k=foia],
body[data-nav=news] .sitenav a[data-k=news],
body[data-nav=donate] .sitenav a[data-k=donate],
body[data-nav=merch] .sitenav a[data-k=merch]{color:var(--head);border-color:var(--line-2);background:var(--bg)}
.utility{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0 12px;border-top:1px solid var(--line);
}
.socialbar{display:flex;gap:8px;flex-wrap:wrap}
.socialbar a{
  width:32px;height:32px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  color:var(--body-2);border:1px solid var(--line-2);text-decoration:none;
  transition:background .12s,border-color .12s,color .12s,transform .06s;
}
.socialbar a:hover{background:var(--accent);border-color:var(--accent);color:var(--bg);transform:translateY(-1px)}
.socialbar svg{width:15px;height:15px;fill:currentColor;display:block}
/* Merch made it six nav items. Between the phone menu (720) and about 1000 the
   tagline and the nav cannot both fit, and FILE ROOM was running off the edge.
   The tagline goes first - it is decoration, the nav is not. */
@media (max-width:1000px){.masthead .tag{display:none}}
@media (max-width:720px){
  .masthead .tag{display:none}
  .menubtn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--narrow);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--bright);background:transparent;border:1px solid var(--line-2);border-radius:var(--r-pill);
    padding:9px 12px;line-height:1;cursor:pointer;
  }
  .menubtn::before{content:"";width:14px;height:10px;
    background:linear-gradient(var(--bright) 0 2px,transparent 2px 4px,var(--bright) 4px 6px,transparent 6px 8px,var(--bright) 8px 10px)}
  .menubtn[aria-expanded=true]{color:var(--head);border-color:var(--accent)}
  .sitenav{display:none;flex-direction:column;align-items:stretch;gap:2px;flex-basis:100%;order:3;padding:4px 0 10px}
  .sitenav.open{display:flex}
  .sitenav a{padding:12px 12px;font-size:13px;border-bottom:1px solid var(--line);border-radius:0}
  .sitenav a:last-child{border-bottom:none}
  .mhrow{flex-wrap:wrap}
}
@media (max-width:460px){
  .utility{flex-direction:column;align-items:stretch;gap:10px}
  .socialbar{justify-content:center}
  .fundbtn{width:100%;font-size:13px;padding:12px 14px}
}
/* ============ END PARTIAL: SITE HEADER ============ */

/* =====================================================================
   PARTIAL: SITE FOOTER  (markup lives in src/partials/footer.html)
   ===================================================================== */
.sitefoot{
  background:var(--surface);border-top:1px solid var(--line);color:var(--body-2);
  margin-top:56px;padding:30px 0 34px;text-align:center;
}
.sitefoot .f1{
  font-family:var(--narrow);font-weight:700;font-size:15px;letter-spacing:.2em;
  text-transform:uppercase;color:#eef3f8;margin-bottom:14px;
}
.footnav{display:flex;justify-content:center;flex-wrap:wrap;gap:2px 4px;margin-bottom:16px}
.footnav a{
  font-family:var(--narrow);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--body-2);text-decoration:none;padding:6px 10px;border-radius:var(--r-pill);
}
.footnav a:hover{color:var(--head);background:var(--bg)}
.sitefoot .socialbar{justify-content:center;margin-bottom:18px}
.sitefoot .fundrow{margin-bottom:18px}
.sitefoot .f2{font-size:12.5px;color:var(--muted);line-height:1.75;max-width:none}
.sitefoot .txtlink{color:var(--body-2)}
.sitefoot .txtlink:hover{color:var(--head)}
/* ============ END PARTIAL: SITE FOOTER ============ */