/* Stylesheet for NOTES — the lightweight tier of guide.
   Source file; build_notes.py copies it to web/static/notes.css, which every
   note LINKS (rather than inlines, the way the six full guides inline theirs).
   Linked on purpose: notes are a growing set and one cached stylesheet across
   all of them beats the same bytes repeated in every file.

   Same tokens as the guides — this is deliberately not a third look. What it
   does NOT carry is the guides' bespoke furniture: no hero artwork, no diagram
   styles, no per-page layout. That absence IS the format: a note is cheap
   because there is nothing to art-direct. */

:root{
  --bg:#121116; --panel:#1B1A20; --paper:#EDE8DE; --muted:#8B8790;
  --gold:#C89B3C; --hair:#302E37;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0; background:var(--bg); color:var(--paper);
  font-family:'Space Grotesk',system-ui,sans-serif; line-height:1.62;
  -webkit-font-smoothing:antialiased;}
a{color:var(--gold);}
.wrap{max-width:720px; margin:0 auto; padding:0 28px;}

/* ---- head ---- */
.note-hero{padding:76px 0 34px; border-bottom:1px solid var(--hair);}
.note-eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 16px;}
.note-hero h1{font-family:'Fraunces',Georgia,serif; font-weight:600;
  font-size:clamp(32px,5vw,48px); line-height:1.06; margin:0 0 18px; max-width:20ch;}
.note-hero p.lead{font-size:17px; color:var(--muted); max-width:56ch; margin:0;}

/* ---- body ---- */
.note-body{padding:40px 0 64px;}
.note-body h2{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:23px;
  line-height:1.25; margin:38px 0 12px;}
.note-body h2:first-child{margin-top:0;}
.note-body p{margin:0 0 17px;}
.note-body ul{margin:0 0 17px; padding-left:22px;}
.note-body li{margin:0 0 9px;}
.note-body b{color:var(--paper);}
/* The pull quote — a note's only piece of emphasis furniture, so it has to
   carry its weight. Gold rule, not a box: a box would read as a callout on a
   page with no other boxes. */
.note-body blockquote{margin:26px 0; padding:2px 0 2px 20px;
  border-left:2px solid var(--gold); color:var(--paper);
  font-family:'Fraunces',Georgia,serif; font-size:19px; line-height:1.45;}
.note-body blockquote p{margin:0;}

/* ---- foot ---- */
.note-foot{border-top:1px solid var(--hair); background:var(--panel);
  padding:30px 0 40px;}
.note-foot .wrap{display:flex; gap:18px; flex-wrap:wrap;}
.note-foot a{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;}
.note-foot a:hover{text-decoration:underline;}

/* ---- the index at /guides/ ---- */
.idx-section{padding:8px 0 56px;}
.idx-kicker{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin:44px 0 18px; padding-top:22px; border-top:1px solid var(--hair);}
.idx-list{display:grid; gap:12px; grid-template-columns:1fr;}
@media (min-width:700px){ .idx-list{grid-template-columns:1fr 1fr;} }
.idx-list a{display:flex; flex-direction:column; gap:5px; text-decoration:none;
  padding:17px 19px; border:1px solid var(--hair); border-radius:3px;
  background:var(--panel); transition:border-color .18s ease;}
.idx-list a:hover{border-color:var(--gold);}
@media (prefers-reduced-motion:reduce){ .idx-list a{transition:none;} }
.idx-list b{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:17.5px;
  line-height:1.25; color:var(--paper);}
.idx-list span{font-size:14px; color:var(--muted); line-height:1.45;}