/* ============================================================
   ORDOVA DOC SITE — design tokens (single source for the doc site).
   Member of the Ordova · Canon family: shares EB Garamond + IBM Plex
   Mono and the Canon type-role vocabulary with charter-site, on a
   near-white ground (vs the charter codex's parchment). Pages link
   this file instead of inlining their own :root — one source of truth.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ground + ink (near-white) */
  --od-bg:#FDFBF7; --od-bg-2:#F4F0E8; --od-panel:#F8F5EE;
  --od-line:rgba(31,28,24,.12); --od-rule:rgba(31,28,24,.16);
  --od-ink:#1F1C18; --od-ink-2:#3a3530; --od-muted:#6B6560; --od-faint:#8a8278;
  --od-primary:#8B3A2A; --od-slate:#2A3A4A;
  --od-accent:#8B3A2A; --od-accent-soft:rgba(139,58,42,.08); --od-accent-line:rgba(139,58,42,.30);
  --od-on-primary:#FFFFFF;
  /* status / semantic scale (drift ladder + status tokens) */
  --od-good:#3A6B4A; --od-amber:#B98A2E; --od-amber-ink:#8a6620;
  /* type */
  --od-serif:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --od-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --od-mono:"IBM Plex Mono","SF Mono",Menlo,Consolas,monospace;
  /* type scale */
  --fs-display:clamp(40px,5.4vw,64px); --fs-h1:clamp(27px,3.2vw,40px); --fs-h2:24px;
  --fs-lede:clamp(18px,1.7vw,20.5px); --fs-body:19px; --fs-small:16px; --fs-caption:13px; --fs-micro:11px;
  /* space + shape */
  --od-4:16px; --od-5:24px; --od-7:48px; --wrap:880px;
  --radius:10px; --radius-lg:16px; --radius-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:200ms;

  /* --- compatibility aliases: the names the pages' bespoke CSS already uses --- */
  --bg:var(--od-bg); --card:var(--od-panel); --border:var(--od-line); --text:var(--od-ink);
  --muted:var(--od-muted); --primary:var(--od-primary); --accent:var(--od-slate); --on-primary:var(--od-on-primary);
  --good:var(--od-good); --amber:var(--od-amber); --amber-ink:var(--od-amber-ink);
  --font-serif:var(--od-serif); --font-sans:var(--od-sans); --mono:var(--od-mono);
  --border-hairline:1px solid var(--od-line);
  /* legacy size/scale names referenced by pages' bespoke (viz) CSS */
  --size-h1:var(--fs-h1); --size-h2:var(--fs-h2); --size-h3:20px;
  --size-intro:var(--fs-lede); --size-body:var(--fs-body); --size-small:var(--fs-small);
  --lh-tight:1.1; --lh-snug:1.25; --lh-normal:1.4; --lh-relaxed:1.56;
  --weight-regular:400; --weight-medium:600; --weight-bold:700;
  --space-md:16px; --space-lg:24px; --space-xl:44px;
  --radius-sm:4px; --ease-out:var(--ease); --dur-2:var(--dur);
  --focus-ring:3px solid color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ============================ BASE ============================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--od-bg);color:var(--od-ink);
  font-family:var(--od-serif);font-size:var(--fs-body);line-height:1.56;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(24px,5vw,40px)}

/* ============================ TOPBAR + BRAND ============================ */
header.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--od-bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:var(--border-hairline)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--od-mono);font-weight:600;font-size:15px;letter-spacing:.01em;color:var(--od-ink)}
.brand .mark{width:24px;height:24px;color:var(--od-primary);flex:0 0 auto;display:inline-flex}
.brand .mark svg{width:100%;height:100%;display:block}
.brand .sub{color:var(--od-faint);font-weight:400;font-size:13px}
.topbar-nav{display:flex;gap:22px;font-family:var(--od-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--od-muted)}
.topbar-nav a{text-decoration:none;transition:color var(--dur) var(--ease)}
.topbar-nav a:hover{color:var(--od-ink)}

/* ============================ TYPE ROLES ============================ */
.od-display{font-family:var(--od-serif);font-weight:700;font-size:var(--fs-display);line-height:1.06;letter-spacing:-.005em;color:var(--od-slate);margin:0}
.od-lead,p.lede{font-family:var(--od-serif);font-weight:500;font-size:var(--fs-lede);line-height:1.56;color:var(--od-ink-2);max-width:60ch}
.od-lead b,p.lede b{font-weight:700;color:var(--od-ink)}
.od-h1{font-family:var(--od-serif);font-weight:600;font-size:var(--fs-h1);line-height:1.1;letter-spacing:.004em;color:var(--od-ink);margin:0}
.od-body{font-family:var(--od-serif);font-weight:500;font-size:var(--fs-body);line-height:1.56;color:var(--od-ink-2);max-width:64ch}
.od-body b{font-weight:700;color:var(--od-ink)}
.od-eyebrow,.kicker{display:block;font-family:var(--od-mono);font-weight:600;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--od-muted)}
.pill{display:inline-block;font-family:var(--od-mono);font-weight:600;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--od-primary);border:var(--border-hairline);background:var(--od-panel);padding:6px 12px;border-radius:var(--radius-pill)}

/* ============================ RULES + SECTIONS ============================ */
.rule{border:0;border-top:1px solid var(--od-rule);margin:clamp(28px,3.5vw,44px) 0}

/* doc-page section vocabulary shared by the showcase pages */
.hero{padding:clamp(48px,6vw,80px) 0 clamp(20px,3vw,32px)}
.hero .eyebrow{margin-bottom:var(--od-5)}
.hero h1{font-family:var(--od-serif);font-weight:700;font-size:var(--fs-display);line-height:1.06;letter-spacing:-.005em;color:var(--od-slate);margin:0 0 var(--od-5)}
.hero p.lede{margin:0}
.eyebrow{display:inline-block;font-family:var(--od-mono);font-weight:600;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--od-primary);border:var(--border-hairline);background:var(--od-panel);padding:6px 12px;border-radius:var(--radius-pill)}
.block{padding:clamp(4px,1vw,8px) 0}
.block .kicker{margin-bottom:10px}
.block h2{font-family:var(--od-serif);font-weight:600;font-size:var(--fs-h1);line-height:1.1;letter-spacing:.004em;color:var(--od-ink);margin:0 0 var(--od-4)}
.block p{font-family:var(--od-serif);font-weight:500;font-size:var(--fs-body);line-height:1.56;color:var(--od-ink-2);margin:0 0 12px;max-width:64ch}
.block p b{font-weight:700;color:var(--od-ink)}

/* ============================ CARD GRIDS ============================ */
.model{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:var(--od-5) 0}
.node{background:var(--od-panel);border:var(--border-hairline);border-radius:var(--radius-lg);padding:18px 20px}
.node .role{font-family:var(--od-mono);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--od-primary)}
.node h3{font-family:var(--od-serif);font-weight:600;font-size:var(--fs-h2);line-height:1.1;margin:8px 0 6px;color:var(--od-ink)}
.node p{font-family:var(--od-serif);font-weight:500;font-size:var(--fs-small);line-height:1.5;color:var(--od-muted);margin:0;max-width:none}
.node.personal .role{color:var(--od-slate)}

.more{font-family:var(--od-mono);font-size:12px;letter-spacing:.03em;color:var(--od-primary);margin-top:var(--od-4)}
.more a{color:inherit;text-decoration:none;border-bottom:1px solid var(--od-accent-line)}
.more a:hover{border-bottom-color:var(--od-primary)}

.onward{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:var(--od-5) 0}
.onward a{display:block;background:var(--od-panel);border:var(--border-hairline);border-radius:var(--radius-lg);padding:18px 20px;text-decoration:none;color:inherit;transition:border-color var(--dur) var(--ease)}
.onward a:hover{border-color:var(--od-muted)}
.onward .role{font-family:var(--od-mono);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--od-primary)}
.onward h3{font-family:var(--od-serif);font-weight:600;font-size:22px;line-height:1.12;margin:6px 0 5px;color:var(--od-ink)}
.onward p{font-family:var(--od-serif);font-weight:500;font-size:var(--fs-small);line-height:1.5;color:var(--od-muted);margin:0}

/* ============================ FOOTER ============================ */
footer.foot,footer{border-top:1px solid var(--od-rule);margin-top:clamp(40px,6vw,72px);padding:28px 0 48px;color:var(--od-muted);font-size:var(--fs-caption)}
.foot-inner,.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
footer .brand{font-size:14px}
footer .brand .mark{width:20px;height:20px}
footer .meta{font-family:var(--od-mono);font-size:12px;color:var(--od-faint)}

@media (max-width:560px){.model,.onward{grid-template-columns:1fr}}