/* ============================================================
   HIST 101 · Background Essay Library
   Light archival, reading-first. WCAG 2.1 AA contrast throughout.
   ============================================================ */

:root{
  --paper:#faf6ef;
  --paper-2:#f4ede1;
  --surface:#ffffff;
  --ink:#1e1a15;
  --ink-2:#3b342b;
  --muted:#5f574a;
  --rule:#e0d5c2;
  --rule-soft:#ece3d4;

  --teal:#14524f;
  --teal-tint:#e9f3f2;
  --gold:#7a5c0f;
  --gold-tint:#fdf6e3;
  --clay:#6b4423;
  --clay-tint:#f4efe6;
  --plum:#5d3a63;
  --plum-tint:#f4eef5;
  --slate:#2b5570;
  --slate-tint:#ebf1f6;

  --serif:"Spectral","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --measure:37rem;
  --wide:74rem;
  --radius:4px;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.7;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}

a{color:var(--teal);text-underline-offset:.16em;text-decoration-thickness:.06em;}
a:hover{color:#0d3a38;}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:3px solid var(--slate);outline-offset:2px;border-radius:2px;
}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1rem;line-height:1.5;
}

/* ============================================================ INDEX */
.page-index main{max-width:var(--wide);margin:0 auto;padding:0 1.5rem 5rem;}

.hero{
  padding:5rem 0 3rem;
  border-bottom:1px solid var(--rule);
  max-width:52rem;
}
.hero h1{
  font-size:clamp(2.6rem,7vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.022em;
  font-weight:700;
  margin:0 0 1.1rem;
}
.hero__deck{
  font-size:clamp(1.1rem,2.2vw,1.3rem);
  line-height:1.62;
  color:var(--ink-2);
  max-width:44rem;
  margin:0 0 2.4rem;
}
.stats{display:flex;flex-wrap:wrap;gap:2.6rem;margin:0;}
.stats div{margin:0;}
.stats dt{
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .3rem;
}
.stats dd{margin:0;font-size:1.9rem;font-weight:600;line-height:1;letter-spacing:-.01em;color:var(--teal);}

.controls{
  display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;
  padding:1.75rem 0;position:sticky;top:0;z-index:20;
  background:linear-gradient(var(--paper) 78%,rgba(250,246,239,0));
}
.search{
  display:flex;align-items:center;gap:.6rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:999px;
  padding:.55rem 1.1rem;min-width:min(100%,22rem);flex:1 1 18rem;color:var(--muted);
}
.search:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint);}
.search input{
  border:0;outline:0;background:transparent;font:inherit;font-size:.98rem;
  color:var(--ink);width:100%;padding:.1rem 0;
}
.search input::placeholder{color:#6f6659;}

.chips{display:flex;flex-wrap:wrap;gap:.45rem;}
.chip{
  font-family:var(--sans);font-size:.8rem;font-weight:500;
  padding:.42rem .85rem;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--rule);color:var(--ink-2);
  transition:background .15s,border-color .15s,color .15s;
}
.chip:hover{border-color:var(--teal);color:var(--teal);}
.chip.is-active{background:var(--teal);border-color:var(--teal);color:#fff;}

.noresults{font-family:var(--sans);color:var(--muted);padding:2rem 0;}

.unit{padding:3rem 0 1rem;border-top:1px solid var(--rule-soft);}
.unit:first-of-type{border-top:0;}
.unit__head{max-width:44rem;margin-bottom:1.9rem;}
.unit__head h2{
  font-size:clamp(1.35rem,3vw,1.7rem);line-height:1.25;margin:0 0 .5rem;
  font-weight:600;letter-spacing:-.012em;
}
.unit__head p{margin:0;color:var(--muted);font-size:1rem;line-height:1.6;}

.cards{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));
}
.card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.4rem 1.5rem 1.25rem;text-decoration:none;color:inherit;
  border-top:3px solid var(--teal);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px -14px rgba(30,26,21,.32);
  border-color:var(--rule);border-top-color:#0d3a38;
}
.card--recon{border-top-color:var(--clay);}
.card--recon:hover{border-top-color:#50331a;}
.card__badge{
  font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal);margin:0 0 .7rem;
}
.card--recon .card__badge{color:var(--clay);}
.card__title{
  font-size:1.16rem;line-height:1.32;margin:0 0 .5rem;font-weight:600;letter-spacing:-.008em;
}
.card__sub{margin:0 0 1.1rem;color:var(--muted);font-size:.95rem;line-height:1.55;flex:1;}
.card__meta{
  font-family:var(--sans);font-size:.75rem;color:var(--muted);margin:0;
  display:flex;gap:.5rem;align-items:center;
  padding-top:.85rem;border-top:1px solid var(--rule-soft);
}

/* ============================================================ ESSAY PAGE */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:60;}
.progress span{display:block;height:100%;width:0;background:var(--teal);}

.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1rem;
  padding:.85rem 1.5rem;
  background:rgba(250,246,239,.985);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-size:.82rem;
}
.topbar__back{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--teal);font-weight:500;text-decoration:none;
}
.topbar__back:hover{text-decoration:underline;}
.topbar__meta{color:var(--muted);margin-left:auto;}
.topbar__print{
  font:inherit;font-weight:500;cursor:pointer;color:var(--ink-2);
  background:transparent;border:1px solid var(--rule);border-radius:999px;padding:.3rem .8rem;
}
.topbar__print:hover{border-color:var(--teal);color:var(--teal);}

.page-essay main{max-width:var(--measure);margin:0 auto;padding:0 1.5rem 4rem;}

.essay__head{padding:3.6rem 0 2rem;border-bottom:1px solid var(--rule);margin-bottom:2.4rem;}
.essay__head h1{
  font-size:clamp(2rem,5.2vw,2.85rem);line-height:1.1;letter-spacing:-.018em;
  font-weight:700;margin:0 0 .8rem;text-wrap:balance;
}
.deck{font-size:1.16rem;line-height:1.55;color:var(--ink-2);margin:0 0 1.5rem;font-style:italic;}
.readmeta{
  font-family:var(--sans);font-size:.78rem;color:var(--muted);margin:0;
  display:flex;gap:.5rem;align-items:center;
}

.toc{
  background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:var(--radius);
  padding:1rem 1.3rem;margin:0 0 2.6rem;
}
.toc summary{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);cursor:pointer;list-style-position:outside;
}
.toc ol{margin:.9rem 0 .2rem;padding-left:1.35rem;}
.toc li{margin:.35rem 0;font-size:.96rem;line-height:1.45;}
.toc a{text-decoration:none;color:var(--ink-2);}
.toc a:hover{color:var(--teal);text-decoration:underline;}

/* --------------------------------------------------------- prose */
.prose{font-size:1.115rem;line-height:1.78;}
.prose p{margin:0 0 1.35rem;}
.prose > p:first-of-type{font-size:1.16rem;}

.prose h2{
  font-size:clamp(1.5rem,3.6vw,1.9rem);line-height:1.2;letter-spacing:-.014em;
  font-weight:700;margin:3.4rem 0 1.1rem;padding-top:1.5rem;
  border-top:1px solid var(--rule);scroll-margin-top:5rem;
}
.prose h2:first-child{margin-top:.5rem;border-top:0;padding-top:0;}
.prose h3{
  font-size:1.24rem;line-height:1.32;font-weight:600;color:var(--teal);
  margin:2.4rem 0 .85rem;letter-spacing:-.006em;
}
.prose h4{
  font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin:2rem 0 .7rem;
}
.structural-label{
  font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:2.4rem 0 .9rem;
}

.prose ol,.prose ul{margin:0 0 1.5rem;padding-left:1.45rem;}
.prose li{margin:.5rem 0;}
.prose li::marker{color:var(--muted);}

.prose strong{font-weight:600;}
.prose em{font-style:italic;}
.prose .annot{
  font-size:1rem;color:var(--muted);border-left:2px solid var(--rule);
  padding-left:1rem;margin-left:0;
}

.prose blockquote{margin:0 0 1.5rem;padding-left:1.2rem;border-left:3px solid var(--rule);color:var(--ink-2);}

/* --------------------------------------------------------- callouts */
.callout{
  margin:2rem 0;padding:1.25rem 1.5rem;border-radius:var(--radius);
  border:1px solid transparent;border-left-width:4px;font-size:1.03rem;line-height:1.68;
}
.callout p{margin:0 0 .8rem;}
.callout p:last-child{margin-bottom:0;}
.callout ol,.callout ul{margin:.4rem 0 .4rem;padding-left:1.3rem;}
.callout li{margin:.32rem 0;}
.callout__label{
  font-family:var(--sans)!important;font-size:.7rem!important;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;margin:0 0 .6rem!important;
}

.callout--payoff{background:var(--teal-tint);border-color:#cfe4e2;border-left-color:var(--teal);}
.callout--payoff .callout__label{color:var(--teal);}

.callout--outline{background:var(--teal-tint);border-color:#cfe4e2;border-left-color:var(--teal);}
.callout--outline .callout__label{color:var(--teal);}
.callout--outline ol{counter-reset:none;}

.callout--note{background:var(--clay-tint);border-color:#e3dac9;border-left-color:var(--clay);font-size:.99rem;}
.callout--note .callout__label{color:var(--clay);}

.callout--source{background:var(--gold-tint);border-color:#ecdfba;border-left-color:var(--gold);}
.callout--source .callout__label{color:var(--gold);}
.callout--source .quote{font-size:1.14rem;line-height:1.6;font-style:italic;}
.callout--source .attrib{
  font-family:var(--sans);font-size:.8rem;font-style:normal;color:var(--muted);
}

.callout--prompt{background:var(--plum-tint);border-color:#e4d8e6;border-left-color:var(--plum);}
.callout--prompt .callout__label{color:var(--plum);}

.callout--question{background:var(--slate-tint);border-color:#d5e2ec;border-left-color:var(--slate);}
.callout--question .callout__label{color:var(--slate);}

.callout--sidebox{background:var(--paper-2);border-color:var(--rule);border-left-color:var(--ink-2);}
.callout--sidebox .callout__label{color:var(--ink-2);}
.callout--sidebox h4{margin-top:0;}

/* --------------------------------------------------------- bibliography */
.bib-entry{
  padding:1.05rem 0;border-bottom:1px solid var(--rule-soft);
}
.bib-entry .bib-title,.bib-entry p:first-child{font-weight:600;margin-bottom:.4rem;}
.bib-entry .bib-note,.bib-entry p + p{
  font-weight:400;color:var(--muted);font-size:1rem;margin-bottom:0;
}
.prose .bib{font-size:1rem;color:var(--ink-2);margin-bottom:1rem;}

/* --------------------------------------------------------- tables */
.table-wrap{overflow-x:auto;margin:0 0 1.8rem;-webkit-overflow-scrolling:touch;}
table{border-collapse:collapse;width:100%;font-size:.95rem;font-family:var(--sans);}
th,td{
  text-align:left;vertical-align:top;padding:.7rem .85rem;
  border-bottom:1px solid var(--rule-soft);
}
thead th{
  background:var(--paper-2);font-weight:600;font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid var(--rule);
}

/* --------------------------------------------------------- pager + foot */
.pager-row{
  display:grid;gap:1rem;grid-template-columns:1fr 1fr;
  margin:3.5rem 0 0;padding-top:2rem;border-top:1px solid var(--rule);
}
.pager{
  display:block;padding:1rem 1.2rem;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius);
  text-decoration:none;color:var(--ink);font-size:1rem;line-height:1.35;
  transition:border-color .16s,transform .16s;
}
.pager:hover{border-color:var(--teal);transform:translateY(-1px);}
.pager span{
  display:block;font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem;
}
.pager--next{text-align:right;grid-column:2;}
.pager--prev{grid-column:1;}

.foot{
  border-top:1px solid var(--rule);padding:2.2rem 1.5rem 3rem;
  font-family:var(--sans);font-size:.82rem;color:var(--muted);text-align:center;
}
.foot p{margin:0;}

/* ============================================================ RESPONSIVE */
@media (max-width:640px){
  .hero{padding:3.2rem 0 2.2rem;}
  .stats{gap:1.6rem;}
  .stats dd{font-size:1.5rem;}
  .controls{position:static;padding:1.25rem 0;}
  .pager-row{grid-template-columns:1fr;}
  .pager--next,.pager--prev{grid-column:1;text-align:left;}
  .callout{padding:1.05rem 1.15rem;}
  .prose{font-size:1.06rem;}
}

/* ============================================================ PRINT */
@media print{
  :root{--paper:#fff;}
  body{background:#fff;font-size:11pt;line-height:1.5;}
  .topbar,.progress,.pager-row,.controls,.foot,.toc{display:none!important;}
  .page-essay main{max-width:none;padding:0;}
  .essay__head{padding-top:0;}
  .prose h2{break-after:avoid;page-break-after:avoid;}
  .callout{break-inside:avoid;page-break-inside:avoid;border:1px solid #999;background:#fff!important;}
  a{color:#000;text-decoration:none;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555;}
}