/* ============================================================
   THE RESISTANCE ARCHIVES — shared stylesheet
   Warm paper ground, ink + a single crimson accent — an
   independent-press palette rather than a coded rainbow. Structure
   comes from type and thin ink borders; interaction comes from a
   quiet lift + soft shadow on hover, not a hard offset "sticker"
   shadow.
   ============================================================ */

/* ---------- self-hosted fonts ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/fraunces-normal-latinext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/fonts/fraunces-italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/karla-latinext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/karla-italic400-latin.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/karla-italic400-latinext.woff') format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/spacemono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/spacemono-400-latinext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/spacemono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/spacemono-700-latinext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* surfaces */
  --paper:      #FBF6E9;
  --paper-2:    #F4EAD3;
  --paper-3:    #EDE0C2;
  --ink:        #1B1712;
  --ink-soft:   #554C3E;
  --rule:       #DDCFB2;

  /* crimson is the primary/brand accent (buttons, links, focus state
     of most things). teal/ochre/olive are a small decorative rotation
     used purely for visual rhythm on repeating lists (drawer cards,
     archive rows) — position-based, not tied to any category label. */
  --crimson:    #8B1A1A;
  --crimson-2:  #A82626;   /* hover shift for solid-crimson surfaces */
  --teal:       #0F5F68;
  --highlight:  #96630B;   /* also used for focus rings */
  --olive:      #4E6B33;

  --cat: var(--crimson);

  --shadow: 0 14px 30px rgba(27,23,18,.16);
  --shadow-sm: 0 8px 18px rgba(27,23,18,.14);
  --wrap: 1180px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Karla', system-ui, sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.page{ position:relative; }

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:'Karla', system-ui, sans-serif;
  font-variation-settings:'SOFT' 0, 'WONK' 0, 'opsz' 144;
  line-height:1.04;
  letter-spacing:-.015em;
}
a{ color:inherit; text-decoration:none; }
p{ max-width:66ch; }

.label{
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cat);
  display:inline-block;
}
.section-head{ margin-bottom:34px; }
.section-head h2{
  font-size:clamp(30px,4vw,46px);
  margin-top:10px;
}
.section-head p{ margin-top:12px; color:var(--ink-soft); }

/* ---------- layout ---------- */
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 32px; }
section{ padding:88px 0; }
.band-2{ background:var(--paper-2); border-block:1px solid var(--rule); }
.band-3{ background:var(--paper-3); border-block:1px solid var(--rule); }

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--ink); color:var(--paper);
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:10px 16px; border:2px solid var(--paper);
  transition:top .15s;
}
.skip-link:focus{ top:12px; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  padding:14px 32px;
  background:rgba(251,246,233,.94);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--ink);
}
.nav-brand{ display:flex; align-items:center; gap:12px; }
.nav-mark{
  width:38px; height:38px;
  display:block; object-fit:cover;
  border:2px solid var(--ink);
}
.nav-word{
  font-family:'Space Mono',monospace;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
}
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  font-family:'Space Mono',monospace;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 11px;
  border-bottom:3px solid transparent;
  transition:border-color .18s, color .18s;
}
.nav-links a:hover{ border-bottom-color:var(--rule); }
.nav-links a[aria-current="page"]{ border-bottom-color:var(--crimson); color:var(--crimson); }
.nav-toggle{
  display:none; background:none; border:2px solid var(--ink);
  padding:7px 12px; cursor:pointer;
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.1em;
}
@media(max-width:1040px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:2px solid var(--ink);
    padding:8px 20px 18px;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 4px; border-bottom:1px solid var(--rule); }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Space Mono',monospace;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:14px 24px;
  border:2px solid var(--ink);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn-solid{ background:var(--crimson); color:var(--paper); }
.btn-solid:hover{ background:var(--crimson-2); }
.btn-line{ background:var(--paper); color:var(--ink); }
.btn-line:hover{ background:var(--paper-2); }
.btn-cat{ background:var(--cat); color:var(--paper); }
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:32px; }

/* ---------- hero ---------- */
.hero{ padding:76px 0 92px; }
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:start;
}
.hero h1{
  font-family:'Fraunces', Georgia, serif; 
  font-size:clamp(56px,9.5vw,124px);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:.86;
}
.hero h1 .red{ color:var(--crimson); }
.hero-lede{
  font-family:'Karla',sans-serif; font-variation-settings:'SOFT' 0,'opsz' 20;
  font-size:19px; line-height:1.55;
  margin:30px 0 0; padding-left:20px;
  border-left:4px solid var(--crimson);
  max-width:52ch;
}

/* hero card stack — the drawer */
.drawer{ display:flex; flex-direction:column; gap:14px; margin-top:14px; }
.drawer-card{
  display:block;
  background:var(--paper);
  border:2px solid var(--ink);
  border-top:4px solid var(--card-accent, var(--crimson));
  padding:16px 18px 15px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.drawer-card:nth-child(4n+1){ --card-accent: var(--crimson); }
.drawer-card:nth-child(4n+2){ --card-accent: var(--teal); }
.drawer-card:nth-child(4n+3){ --card-accent: var(--highlight); }
.drawer-card:nth-child(4n+4){ --card-accent: var(--olive); }
.drawer-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.drawer-card h2{ font-size:20px; }
@media(max-width:900px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero{ padding:52px 0 64px; }
}

/* ---------- card grid ---------- */
.grid{ display:grid; gap:22px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:980px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .grid-3{ grid-template-columns:1fr; } }

.card{
  display:flex; flex-direction:column;
  background:var(--paper);
  border:2px solid var(--ink);
  border-top:4px solid var(--crimson);
  padding:20px 20px 18px;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); background:var(--paper-2); }
.card h3{ font-size:21px; margin-bottom:10px; }
.card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; flex:1; }
.card-foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:16px; padding-top:12px; border-top:1px solid var(--rule);
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em;
  color:var(--ink-soft);
}
.card-foot .arrow{ color:var(--crimson); font-size:17px; }

/* ---------- page banner ---------- */
.banner{
  padding:64px 0 52px;
  border-bottom:2px solid var(--ink);
  background:var(--paper-2);
}
.banner h1{ font-size:clamp(44px,7.5vw,86px); font-weight:900; letter-spacing:-.03em; margin-top:10px; }
.banner p{ margin-top:16px; font-size:18px; color:var(--ink-soft); max-width:60ch; }

/* ---------- filter bar ---------- */
.filters{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  padding:18px 0; border-bottom:2px solid var(--ink);
}
.filter-search{
  font-family:'Space Mono',monospace; font-size:12px;
  padding:9px 14px; background:var(--paper); border:2px solid var(--ink); min-width:230px;
}
.filter-search:focus{ outline:3px solid var(--highlight); outline-offset:1px; }
.filter-count{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- archive rows ---------- */
.rows{ margin-top:6px; margin-bottom:72px; }
.row{
  display:grid; grid-template-columns:120px 1fr 34px;
  align-items:center; gap:16px;
  padding:17px 18px 17px 19px;
  border-bottom:1px solid var(--rule);
  border-left:3px solid var(--row-accent, var(--crimson));
  transition:background .14s, padding-left .14s;
}
/* alternating accent so a long list doesn't read as one flat stream */
.row:nth-child(odd){ --row-accent: var(--crimson); }
.row:nth-child(even){ --row-accent: var(--teal); }
.row:hover{ background:var(--paper-2); padding-left:29px; }
.row-date{ font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-soft); }
.row-title{ font-family:'Karla',sans-serif; font-weight:700; font-size:19px; line-height:1.25; }
.row-title small{ display:block; font-family:'Karla',sans-serif; font-weight:400; font-size:13px; color:var(--ink-soft); margin-top:3px; }
.row-go{ color:var(--row-accent, var(--crimson)); font-size:19px; text-align:right; }
@media(max-width:760px){
  .row{ grid-template-columns:1fr auto; row-gap:6px; }
  .row-date{ order:1; } .row-title{ order:2; grid-column:1/-1; } .row-go{ display:none; }
}
.empty{
  padding:48px 20px; text-align:center; color:var(--ink-soft);
  font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.1em;
}

/* ---------- statement ---------- */
.statement{ background:var(--crimson); color:var(--paper); border-block:2px solid var(--ink); }
.statement blockquote{
  font-family:'Karla',sans-serif; font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 60;
  font-size:clamp(23px,3.2vw,38px); line-height:1.28; max-width:24ch; font-weight:700;
}
.statement .sig{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  margin-top:26px; display:inline-block; border-bottom:2px solid var(--paper); padding-bottom:4px;
}
.statement-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:end; }
.statement-grid p{ color:rgba(251,246,233,.88); font-size:19px; line-height:1.5; }
@media(max-width:820px){ .statement-grid{ grid-template-columns:1fr; gap:28px; } }

/* ---------- legal pages ---------- */
.legal{ max-width:70ch; }
.legal h2{ font-size:24px; margin:40px 0 12px; }
.legal h2:first-child{ margin-top:0; }
.legal p{ margin-bottom:16px; color:var(--ink-soft); }

/* ---------- numbered principles ---------- */
.principle{
  border-top:3px solid var(--ink); padding-top:16px;
}
.principle .n{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em; color:var(--cat);
}
.principle h3{ font-size:20px; margin:8px 0 8px; }
.principle p{ font-size:14.5px; color:var(--ink-soft); }

.btn-sm{ padding:10px 16px; font-size:11px; margin-top:auto; align-self:flex-start; }

/* ---------- support tiers ---------- */
.tier{
  border:2px solid var(--ink); background:var(--paper); padding:24px 22px;
  display:flex; flex-direction:column; transition:box-shadow .16s ease, transform .16s ease;
}
.tier:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.tier.featured{ background:var(--ink); color:var(--paper); }
.tier.featured .tier-amt{ color:var(--paper); }
.tier .tier-name{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.tier .tier-amt{ font-family:'Karla',sans-serif; font-weight:900; font-size:44px; line-height:1; margin:10px 0 4px; }
.tier .tier-per{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; color:var(--ink-soft); margin-bottom:24px; }
.tier.featured .tier-per{ color:rgba(251,246,233,.7); }

/* ---------- subscribe strip ---------- */
.subscribe{ background:var(--ink); color:var(--paper); border-block:2px solid var(--ink); padding:56px 0; }
.subscribe h2{ font-size:clamp(26px,3.4vw,38px); max-width:16ch; }
.subscribe p{ color:rgba(251,246,233,.78); margin-top:12px; font-size:15px; }
.sub-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.sub-cta{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:15px 22px; background:var(--crimson); color:var(--paper);
  border:2px solid var(--crimson); transition:background .15s, border-color .15s, color .15s, transform .15s;
}
.sub-cta:hover{ background:var(--paper); border-color:var(--paper); color:var(--ink); transform:translateY(-2px); }
@media(max-width:820px){ .sub-grid{ grid-template-columns:1fr; gap:24px; } }

/* ---------- footer ---------- */
.footer{ background:var(--paper-3); border-top:2px solid var(--ink); padding:56px 0 0; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; }
.footer-brand p{ font-size:14.5px; color:var(--ink-soft); margin-top:14px; }
.footer-brand .fb-name{ font-family:'Karla',sans-serif; font-weight:900; font-size:20px; margin-top:14px; }
.footer h3{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; margin-bottom:14px; color:var(--crimson);
}
.footer-col a{ display:block; font-size:15px; padding:4px 0; color:var(--ink-soft); transition:color .15s, padding-left .15s; }
.footer-col a:hover{ color:var(--crimson); padding-left:5px; }
.footer-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:48px; padding:18px 0; border-top:1px solid var(--rule);
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}
@media(max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

@media(prefers-reduced-motion:reduce){ *{ scroll-behavior:auto!important; } }

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--highlight); outline-offset:2px;
}

/* ---------- helpers ---------- */
.center{ text-align:center; }
.center p{ margin-inline:auto; }
.note-strip{
  border-left:4px solid var(--crimson);
  padding:2px 0 2px 24px; margin-top:36px;
}
/* .note-strip's heading tag varies by page (h2/h3/h4) to keep each page's
   outline skip-free — styled identically regardless of level. */
.note-strip h2, .note-strip h3, .note-strip h4{ font-family:'Karla',sans-serif; font-size:18px; margin-bottom:8px; }
.note-strip p{ font-size:14.5px; color:var(--ink-soft); }