/* Conservative Iranian - shared foundation.
   Loaded by every generated page, before the page-type sheet.

   What belongs here: the design tokens, the reset, the page ground and its
   dawn gradient, links, the masthead, the hero block, and the closing
   source/CTA/footer. Anything a single page type owns belongs in that page
   type's sheet instead - lecture.css or archive.css.

   The hub at public/index.html keeps its own inline styles. It is a
   deliberately separate design: a centred splash with a stronger glow and a
   different h1. Only the :root palette below is common to it, and that copy is
   marked in the hub's own <style> block. */

/* ---------- tokens ---------- */
:root{
  --ink:#0B0906; --ink-2:#13100B;
  --gold:#FFB81C; --gold-lite:#FFD777; --gold-deep:#C98A12;
  --ivory:#F3ECDF; --muted:#A2977F;
  --line:rgba(255,184,28,.20); --line-strong:rgba(255,184,28,.42);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --measure:66ch;
  --pad:clamp(20px,5vw,40px);
}

/* ---------- reset + ground ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  background:var(--ink); color:var(--ivory);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding:0 var(--pad) calc(72px + env(safe-area-inset-bottom));
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(255,184,28,.11), rgba(255,184,28,.03) 34%, transparent 62%),
    radial-gradient(140% 100% at 50% 130%, rgba(201,138,18,.07), transparent 55%),
    linear-gradient(180deg,var(--ink-2),var(--ink) 34%);
}
.shell{max-width:960px;margin:0 auto}
.prose{max-width:var(--measure)}

a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--line-strong)}
a:hover{color:var(--gold-lite);border-bottom-color:var(--gold-lite)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- masthead ---------- */
.top{
  display:flex;align-items:center;gap:11px;
  padding:22px 0 0;
}
.top a{display:flex;align-items:center;gap:11px;border:0}
.top img{width:34px;height:auto;display:block;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.6))}
.top span{font-family:var(--serif);font-size:15px;color:var(--gold);letter-spacing:.01em}
.top nav{margin-left:auto;font-size:13.5px}
.top nav a{color:var(--muted);border:0}
.top nav a:hover{color:var(--gold)}

/* ---------- title block ---------- */
.hero{padding:clamp(38px,7vw,62px) 0 0}
.eyebrow{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 16px
}
h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(31px,5.6vw,50px);line-height:1.07;
  letter-spacing:-.005em;color:var(--gold);
  margin:0;max-width:24ch;
}
.facts{
  margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 30px;font-size:13.5px;color:var(--muted);
}
.facts b{display:block;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:3px}
/* the facts line is all counts and durations, so it sets tabular numerals */
.facts span{color:var(--ivory);font-variant-numeric:tabular-nums}

/* ---------- framing ---------- */
.framing{padding:clamp(34px,6vw,54px) 0 0}
.framing p{margin:0 0 1.15em}
.framing p:first-child{font-size:19px;color:var(--ivory)}
.framing p:last-child{margin-bottom:0}

/* ---------- source + cta ---------- */
.end{margin:clamp(40px,6vw,58px) 0 0;padding:30px 0 0;border-top:1px solid var(--line)}
/* .books is lecture-only; the closing-section heading is one style, kept in
   one rule so the two sections cannot drift apart. */
.books h2,.end h2{
  font-family:var(--serif);font-size:clamp(21px,3vw,26px);
  color:var(--gold);margin:0 0 18px;font-weight:600
}
.end p{margin:0 0 .9em;font-size:14.5px;color:var(--muted);max-width:60ch}
.cta{
  display:flex;align-items:center;gap:14px;margin:30px 0 0;
  padding:17px 19px;border-radius:14px;
  background:var(--gold);border:1px solid var(--gold);
  box-shadow:0 10px 30px rgba(255,184,28,.13);
  text-decoration:none;max-width:var(--measure)
}
.cta:hover{background:var(--gold-lite);border-color:var(--gold-lite)}
.cta:focus-visible{outline:2px solid var(--ivory);outline-offset:3px}
.cta b{display:block;font-family:var(--serif);font-size:16.5px;color:#120E07}
.cta em{display:block;font-style:normal;font-size:12.5px;color:rgba(18,14,7,.72);margin-top:1px}
.cta span:last-child{margin-left:auto;color:#120E07;opacity:.7}
.foot{margin:44px 0 0;font-size:12.5px;color:var(--muted)}
.foot a{color:var(--muted);border-bottom-color:var(--line)}

/* ---------- responsive ---------- */
@media (max-width:560px){
  body{font-size:16.5px}
  .facts{gap:14px 24px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}