/* ──────────────────────────────────────────────────────────────────
   topic.css — shared editorial stylesheet for the /topics/* format
   guides (and the /topics hub). Light, professional, reference-grade:
   a clean reading column, serif display headings (Fraunces, the brand's
   editorial face), Inter for body, hairline section rules, real card
   elevation. Replaces the per-page hardcoded near-black palette.

   The original inline blocks defined --bg/--fg/--muted/--accent/--card
   /--line and the page bodies still use them via inline styles, so the
   same var NAMES are kept here with light values — existing markup
   adapts without per-element edits.
   ────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400;500;600;700;800;900&display=swap');

:root{
  --bg:#fbfaf7;            /* warm paper, not stark white */
  --fg:#1b1b21;            /* ink */
  --muted:#5f5f6a;         /* secondary text */
  --faint:#8c8c97;         /* eyebrows, crumbs */
  --accent:#dc2626;        /* brand red */
  --accent-soft:rgba(220,38,38,.07);
  --card:#ffffff;
  --line:rgba(20,20,30,.10);
  --line-2:rgba(20,20,30,.18);
  /* Editorial serif on purpose — the marketing/landing pages render their
     headlines in the house Crimson Pro, so the reference pages lead with Fraunces
     to read as a distinct "docs/editorial" surface, not a landing clone. */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Crimson Pro','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;color:var(--fg);
  font:400 17px/1.7 var(--sans);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:760px;margin:0 auto;padding:64px 24px 40px}

/* ── breadcrumb masthead ── */
.crumbs{
  font:600 12px/1 var(--sans);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin:0 0 26px;
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent);text-decoration:none}
.crumbs .sep{color:var(--line-2)}

/* ── headings: editorial serif display ── */
h1{font:600 clamp(33px,5vw,49px)/1.06 var(--serif);letter-spacing:-.02em;margin:0 0 18px;color:var(--fg)}
h2{font:600 clamp(22px,3vw,28px)/1.2 var(--serif);letter-spacing:-.01em;margin:54px 0 14px;color:var(--fg);border-top:1px solid var(--line);padding-top:30px}
h3{font:700 17px/1.35 var(--sans);letter-spacing:-.01em;margin:30px 0 8px;color:var(--fg)}

.lede{font:400 19px/1.62 var(--sans);color:var(--muted);max-width:660px;margin:0 0 10px}

p{margin:0 0 16px}
strong{color:var(--fg);font-weight:700}
em{font-style:normal}

ul{padding-left:20px;line-height:1.72;margin:14px 0}
ul li{margin:7px 0}

blockquote{border-left:3px solid var(--accent);padding:4px 0 4px 18px;margin:20px 0;color:var(--muted);font-style:normal}

/* ── "format at a glance" / generic card ── */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:22px 24px;margin:24px 0;
  box-shadow:0 1px 2px rgba(20,20,30,.04),0 16px 36px -26px rgba(20,20,30,.22);
}
.card .label,.card .fmt{font:800 11px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:11px;display:block}
.card .res{font:600 18px/1.5 var(--serif);color:var(--fg)}
.card .meta{font-size:14px;color:var(--muted);margin-top:11px}
.card .name{font:700 17px/1.3 var(--sans);margin-bottom:6px;color:var(--fg)}
.card .desc{font-size:14px;color:var(--muted);line-height:1.55}

/* ── hub grid of format cards (/topics index) ── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px;margin:30px 0}
a.card{display:block;color:var(--fg);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
a.card:hover{border-color:rgba(220,38,38,.45);transform:translateY(-2px);text-decoration:none;box-shadow:0 1px 2px rgba(20,20,30,.05),0 22px 44px -26px rgba(220,38,38,.45)}
header{margin-bottom:10px}

/* ── "why" callout (hub) ── */
.why{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin:40px 0;box-shadow:0 1px 2px rgba(20,20,30,.04),0 16px 36px -26px rgba(20,20,30,.2)}
.why p{margin:0 0 10px}
.why p:last-child{margin-bottom:0}

/* ── past final motions ── */
.past{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:18px 0}
.past .item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:15px;line-height:1.5;color:var(--fg)}
.past .item .d{font:800 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}

/* ── secondary inline nav row (some pages) ── */
.nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;font-size:14px;color:var(--muted)}
.nav a{color:var(--muted)}

/* ── primary CTA ── */
.cta{
  display:inline-block;background:var(--accent);color:#fff;
  padding:14px 26px;border-radius:10px;
  font:800 13px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;
  margin-top:10px;box-shadow:0 10px 24px -12px rgba(220,38,38,.7);
  transition:background .15s ease,transform .15s ease;
}
.cta:hover{background:#b91c1c;text-decoration:none;transform:translateY(-1px)}

/* ── practice block ── */
.practice{
  background:linear-gradient(135deg,var(--accent-soft),rgba(220,38,38,.015));
  border:1px solid rgba(220,38,38,.16);border-radius:18px;
  padding:32px;margin:60px 0 0;text-align:center;
}
.practice h3{margin:0 0 8px;font:600 24px/1.2 var(--serif);color:var(--fg)}
.practice p{color:var(--muted);margin:0 0 18px}

/* ── footer aside (format-guide cross-links) ── */
aside{max-width:760px;margin:8px auto 0;padding:30px 24px 72px;border-top:1px solid var(--line);font:14px/1.6 var(--sans);color:var(--muted)}
aside a{color:var(--fg)}
aside a:hover{color:var(--accent)}

@media (max-width:620px){
  .wrap{padding:44px 18px 32px}
  h2{margin-top:42px;padding-top:26px}
}