/* Guides section — shares the landing page's tokens deliberately.
   ⚠ The landing is a single centred lockup on dark ink; a guide is READING, so it inverts:
   paper ground, ink text, a measure that stays readable. The tokens are the same so the two
   surfaces feel like one product. */
:root{
  --ink:#0B1B2B;
  --paper:#F6F2E8;
  --tag:#5B6B7C;
  --bluepen:#4A90E2;
  --rule:rgba(11,27,43,0.14);
  --display:"Fraunces","Big Caslon","Hoefler Text",Georgia,serif;
  --reading:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--reading); font-size:1.0625rem; line-height:1.62;
  padding:6vmin 5vmin; -webkit-text-size-adjust:100%;
}
main{max-width:34rem;margin:0 auto}          /* ~66 characters: a reading measure, not a screen width */
h1{font-family:var(--display);font-size:clamp(1.9rem,5.2vw,2.6rem);line-height:1.12;margin:0 0 .5rem}
h2{font-family:var(--display);font-size:clamp(1.25rem,3.4vw,1.5rem);line-height:1.2;margin:2.2rem 0 .4rem}
p{margin:0 0 1rem}
a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--bluepen)}
.dek{color:var(--tag);margin:0 0 2rem}
.back{display:inline-block;margin-bottom:2rem;font-size:.94rem;color:var(--tag)}
ul{margin:0 0 1rem 1.1rem}
li{margin:0 0 .5rem}
.card{display:block;padding:1rem 0;border-top:1px solid var(--rule);text-decoration:none}
.card:last-child{border-bottom:1px solid var(--rule)}
.card h3{font-family:var(--display);font-size:1.2rem;font-weight:600;margin:0 0 .25rem}
.card p{color:var(--tag);margin:0;font-size:.97rem}
.cta{display:inline-block;margin-top:2.5rem;padding:.7rem 1.2rem;background:var(--ink);color:var(--paper);text-decoration:none;font-family:var(--display)}
footer{margin-top:3.5rem;padding-top:1.2rem;border-top:1px solid var(--rule);color:var(--tag);font-size:.9rem}

/* Guide-content components — extracted from the careless-mistakes pillar 2026-09-14 when the
   sign-errors spoke became the second guide to use them (extract-before-duplicating). Used by
   every /guides/<slug>/ article page. Depends on --bluepen/--ink/--paper/--display/--tag above. */
.cite{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;align-items:start;
      margin:1.8rem 0;padding:1rem 1.2rem;border-left:3px solid var(--bluepen);
      background:rgba(74,144,226,0.06)}
.cite-avatar{grid-row:1 / span 2;display:inline-flex;align-items:center;justify-content:center;
      width:2.4rem;height:2.4rem;border-radius:50%;background:var(--ink);color:var(--paper);
      font-family:var(--display);font-size:.9rem;font-weight:600;letter-spacing:.02em;flex:0 0 auto}
.cite blockquote{grid-column:2;margin:0;font-style:italic;font-size:1.08rem;line-height:1.5}
.cite figcaption{grid-column:2;font-size:.9rem;color:var(--tag)}
.cite figcaption a{color:var(--tag)}
.refs{font-size:.95rem}
.refs li{margin-bottom:.7rem}
.byline{color:var(--tag);font-style:italic;margin-bottom:1.2rem}
ol{margin:0 0 1rem 1.2rem}
ol li{margin:0 0 .5rem}
.faq h3{font-family:var(--display);font-size:1.08rem;margin:1.4rem 0 .3rem}