/* ─────────────────────────────────────────────────────────────
   Hunter House Archive — Verso design system
   Shared CSS for every page on the site.
   ─────────────────────────────────────────────────────────── */

:root{
  --ink:#1e1c1a;
  --muted:#76726a;
  --hint:#a8a59c;
  --rule:#d6d2c8;
  --rule-soft:#e3dfd5;
  --soft:#ebe8df;
  --paper:#fafaf5;
  --bg:#f3f1ec;
  --red:#8b3a2a;
  --red-deep:#6b2a1e;
  --red-pale:#ecddd3;
  --red-tint:rgba(139,58,42,0.07);
  --copper:#4f7a6b;
  --copper-deep:#365549;
  --copper-pale:#dde6df;
  --sans:"Inter Tight",-apple-system,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,monospace;
}

html.dark{
  --ink:#f0ede6;
  --muted:rgba(240,237,230,0.52);
  --hint:rgba(240,237,230,0.32);
  --rule:rgba(240,237,230,0.13);
  --rule-soft:rgba(240,237,230,0.08);
  --soft:#26231e;
  --paper:#201e1a;
  --bg:#1a1816;
  --red:#c4826e;
  --red-deep:#d49a86;
  --red-pale:rgba(196,130,110,0.18);
  --red-tint:rgba(196,130,110,0.09);
  --copper:#7aaa98;
  --copper-deep:#9dc2b2;
  --copper-pale:rgba(122,170,152,0.2);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";font-optical-sizing:auto;
}
a{color:inherit}
.ital{font-style:italic}

/* ────────── site header ────────── */
.site-top{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:14px 28px;border-bottom:1px solid var(--ink);background:var(--bg);
}
.markid{display:flex;align-items:baseline;gap:12px}
.markid .name{font-size:13px;font-weight:500;letter-spacing:-0.005em;white-space:nowrap}
.markid .name .dim{color:var(--muted);font-weight:400}
.site-nav{
  display:flex;gap:0;justify-content:center;
  font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:0.18em;text-transform:uppercase;
}
.site-nav a{
  color:inherit;text-decoration:none;padding:5px 14px;
  border-left:1px solid var(--rule);white-space:nowrap;
}
.site-nav a:first-child{border-left:0}
.site-nav a:hover{color:var(--ink)}
.site-nav a.on{color:var(--ink);background:var(--soft)}
.site-topright{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:0.04em;white-space:nowrap;justify-self:end;display:flex;align-items:center;gap:8px}
.theme-btn{background:none;border:1px solid var(--rule);border-radius:1px;color:var(--muted);cursor:pointer;font-family:var(--mono);font-size:9px;padding:2px 5px;line-height:1;display:flex;align-items:center}
.theme-btn:hover{color:var(--ink);border-color:var(--muted)}

/* ────────── crumbs ────────── */
.crumbs{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;
  padding:14px 28px;border-bottom:1px solid var(--ink);
  font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:0.06em;
}
.crumbs .path{display:flex;gap:12px;align-items:center;text-transform:uppercase;min-width:0;overflow:hidden}
.crumbs .path > *{white-space:nowrap}
.crumbs .path a{color:var(--muted);text-decoration:none}
.crumbs .path a:hover{color:var(--ink)}
.crumbs .path .sep{color:var(--hint)}
.crumbs .right{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:0.06em;white-space:nowrap;text-transform:uppercase}

/* ────────── page frame ────────── */
.frame{max-width:1080px;margin:0 auto;padding:48px 28px 80px}
.frame.wide{max-width:1280px}
.frame.narrow{max-width:780px}

/* ────────── titles ────────── */
.page-stamp{
  font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:0.22em;text-transform:uppercase;
  display:flex;gap:14px;align-items:baseline;margin-bottom:14px;
}
.page-stamp .n{color:var(--red);font-weight:500;font-size:10px}
.page-sub{
  font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:0.06em;
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  padding-bottom:24px;border-bottom:1px solid var(--ink);margin-bottom:36px;
}
.page-sub b{color:var(--ink);font-weight:500}
.page-sub > *{white-space:nowrap}
.page-sub a{color:var(--copper-deep);text-decoration:none;border-bottom:1px solid var(--copper-pale)}
.page-sub a:hover{border-bottom-color:var(--copper-deep)}

/* ────────── prose ────────── */
.lede{
  font-family:var(--sans);font-size:19px;line-height:1.55;color:var(--ink);
  margin-bottom:32px;letter-spacing:-0.005em;font-weight:300;max-width:740px;
}
.prose{max-width:680px}
.prose p{font-size:15px;line-height:1.7;color:var(--ink);margin-bottom:18px;letter-spacing:-0.005em}
.prose p strong{font-weight:500;color:var(--ink)}
.prose a{color:var(--copper-deep);text-decoration:none;border-bottom:1px solid var(--copper-pale)}
.prose a:hover{border-bottom-color:var(--copper-deep)}
.prose h2{
  font-family:var(--mono);font-size:11px;color:var(--ink);letter-spacing:0.22em;text-transform:uppercase;
  padding-bottom:10px;border-bottom:1px solid var(--ink);margin:48px 0 24px;font-weight:500;
  display:flex;justify-content:space-between;align-items:baseline;
}
.prose h2 > *{white-space:nowrap}
.prose h2 .n{color:var(--red);font-weight:400}
.prose h3{
  font-size:18px;font-weight:500;letter-spacing:-0.015em;margin:28px 0 8px;color:var(--ink);
}
.prose ul,.prose ol{margin:0 0 18px 18px}
.prose li{font-size:15px;line-height:1.65;margin-bottom:6px}
.prose hr{border:0;border-top:1px dotted var(--rule);margin:32px 0}

.pullquote{
  font-family:var(--sans);font-size:21px;line-height:1.5;color:var(--ink);
  padding:6px 0 6px 24px;border-left:2px solid var(--copper);margin:36px 0;max-width:640px;
  font-weight:300;letter-spacing:-0.01em;
}
.pullquote .attr{
  display:block;margin-top:18px;
  font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:0.06em;text-transform:uppercase;font-weight:400;
}

/* ────────── pathway cards ────────── */
.pathways{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-bottom:64px;
}
.pathway{
  background:var(--bg);padding:24px 26px;text-decoration:none;color:inherit;display:block;
  transition:background 0.12s;
}
.pathway:hover{background:var(--paper)}
.pathway .num{
  font-family:var(--mono);font-size:10.5px;color:var(--red);letter-spacing:0.16em;
  margin-bottom:14px;font-weight:500;
}
.pathway h3{
  font-size:20px;font-weight:500;margin:0 0 10px;color:var(--ink);letter-spacing:-0.015em;
}
.pathway p{
  margin:0;font-size:13.5px;color:var(--muted);line-height:1.55;
}
.pathway .more{
  margin-top:14px;font-size:11px;color:var(--copper-deep);
  font-family:var(--mono);letter-spacing:0.06em;text-transform:uppercase;
}

/* ────────── columns ────────── */
.columns{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:56px}
.columns h2{
  font-family:var(--mono);font-size:11px;color:var(--ink);letter-spacing:0.22em;text-transform:uppercase;
  padding-bottom:10px;border-bottom:1px solid var(--ink);margin-bottom:18px;font-weight:500;
}
.columns p{font-size:14.5px;line-height:1.65;margin-bottom:14px}
.columns p.muted{color:var(--muted)}
.columns a{color:var(--copper-deep);text-decoration:none;border-bottom:1px solid var(--copper-pale)}
.columns a:hover{border-bottom-color:var(--copper-deep)}

/* ────────── data tables (finding aid) ────────── */
.kv-table{
  display:grid;grid-template-columns:140px 1fr;gap:0;margin:24px 0 32px;max-width:780px;
}
.kv-table .row{
  display:contents;
}
.kv-table dt{
  font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;
  padding:14px 18px 14px 0;border-top:1px solid var(--rule-soft);white-space:nowrap;
}
.kv-table dd{
  font-size:14.5px;color:var(--ink);padding:14px 0;border-top:1px solid var(--rule-soft);letter-spacing:-0.005em;
}
.kv-table .row:first-child dt,
.kv-table .row:first-child dd{border-top:1px solid var(--ink)}
.kv-table .row:last-child dt,
.kv-table .row:last-child dd{border-bottom:1px solid var(--rule-soft)}

/* generic stamp/badge */
.archid-mono{
  font-family:var(--mono);font-size:12px;color:var(--red);background:var(--red-pale);
  padding:1.5px 7px;letter-spacing:0.04em;white-space:nowrap;
}
.pill{
  display:inline-flex;align-items:center;height:20px;padding:0 8px;
  background:var(--copper-pale);color:var(--copper-deep);font-size:11px;
  margin:0 3px 0 0;border-radius:1px;white-space:nowrap;
}


/* ────────── mobile (≤ 767 px) ────────── */
@media (max-width:767px){

  /* header: 2-row layout */
  .site-top{
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    padding:12px 16px 0;
  }
  .site-top .markid{grid-column:1;grid-row:1}
  .site-top .site-topright{grid-column:2;grid-row:1}
  .site-top .site-nav{
    grid-column:1 / -1;grid-row:2;
    margin:10px -16px 0;border-top:1px solid var(--rule);
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    justify-content:flex-start;
  }
  .site-nav a{padding:8px 14px;flex-shrink:0}

  /* crumbs */
  .crumbs{padding:10px 16px}
  .crumbs .right{display:none}

  /* frame */
  .frame{padding:32px 16px 56px}

  /* lede */
  .lede{font-size:15px}

  /* columns: 1-col */
  .columns{grid-template-columns:1fr;gap:32px}

}