/* Google Fonts substitutes for the book's licensed print faces:
   Archivo ≈ Trade Gothic Next LT Pro (headings/UI)
   EB Garamond ≈ Sabon LT Pro (long-form body) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
/* base — sampled from the book layout PDF */
--ink:#2c2e35; /* body ink, primary dark */
--ink-deep:#030b10; /* near-black, inverse surfaces */
--paper:#ffffff;
--yellow:#ffe454; /* the accent. use sparingly, at full strength */
--yellow-press:#f0d43e;
/* neutral ramp (cool, derived from ink) */
--n-50:#f7f7f8;--n-100:#eeeff1;--n-200:#dcdee2;--n-300:#c1c4cb;--n-400:#989da6;--n-500:#70757f;--n-600:#545861;--n-700:#40434c;--n-800:#2c2e35;--n-900:#1b1d22;
/* semantic */
--text-body:var(--ink);
--text-muted:var(--n-600);
--text-faint:var(--n-400);
--text-inverse:#ffffff;
--surface-page:var(--paper);
--surface-alt:var(--n-50);
--surface-inverse:var(--ink-deep);
--accent:var(--yellow);
--accent-ink:var(--ink-deep); /* text on accent */
--border:var(--n-200);
--border-strong:var(--ink);
--link:var(--ink);
--link-underline:var(--yellow);
}

:root{
--font-display:'Archivo',system-ui,sans-serif; /* headings, UI, labels — sub for Trade Gothic Next */
--font-serif:'EB Garamond',Georgia,serif; /* long-form body, quotes — sub for Sabon */
/* scale */
--text-xs:.8125rem;   /* 13 — captions, credits */
--text-sm:.9375rem;   /* 15 — UI, nav */
--text-base:1.0625rem;/* 17 — sans body */
--text-serif:1.1875rem;/* 19 — serif long-form */
--text-lg:1.375rem;   /* 22 — lede, pull text */
--text-xl:1.75rem;    /* 28 — h3 */
--text-2xl:2.25rem;   /* 36 — h2 */
--text-3xl:clamp(2.5rem,5.5vw,4.25rem); /* h1 / hook headline */
/* details */
--leading-tight:1.08;
--leading-snug:1.25;
--leading-body:1.62;
--tracking-label:.14em; /* uppercase kicker labels, e.g. CHAPTER 4 */
--tracking-display:-.015em;
--weight-heading:700;
}

:root{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:144px;
--measure:66ch;        /* long-form text width */
--content-max:1160px;  /* page container */
--gutter:clamp(20px,4vw,48px); /* @kind spacing */
--section-gap:clamp(64px,10vw,144px); /* vertical rhythm between page sections */
}

:root{
--radius-sm:3px;  /* the only radius — buttons, inputs, cards, media */
--radius-md:3px;  /* alias of radius-sm; kept for compatibility */
--radius-lg:3px;  /* alias of radius-sm; kept for compatibility */
--shadow-card:none; /* @kind shadow */ /* no shadows, ever */
--shadow-lift:none; /* @kind shadow */
--ease:cubic-bezier(.2,.7,.3,1); /* @kind other */
--dur:160ms; /* @kind other */ /* all transitions fast + quiet; fades and small translates only */
}

body{margin:0;font-family:var(--font-display);font-size:var(--text-base);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:underline;text-decoration-color:var(--link-underline);text-decoration-thickness:2px;text-underline-offset:3px;transition:background var(--dur) var(--ease)}
a:hover{background:var(--yellow)}
::selection{background:var(--yellow);color:var(--ink-deep)}