@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

/* ─────────────────────────────────────
   DESIGN TOKENS
   NYRB cover · New Yorker / Atlantic editorial
   ───────────────────────────────────── */
:root {

  /* ── Type ──
     Libre Franklin  → NYRB cover boxes, kickers, labels, nav  (Franklin/News Gothic)
     Libre Caslon    → editorial headlines & body  (New Yorker Caslon feel)        */
  /* Single typeface across the whole site — Libre Franklin (the NYRB cover-box font).
     --serif / --display kept as token names for legacy usage; all map to Franklin. */
  --sans:    'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --serif:   'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;

  /* ── Palette — drawn from the cover photograph ── */
  --paper:      #F4F0E6;   /* warm newsprint */
  --paper-2:    #ECE5D6;   /* card / panel tint */
  --ink:        #211E18;   /* near-black, warm */
  --ink-soft:   #4D483D;   /* body text */
  --ink-faint:  #8B8472;   /* captions, meta */
  --hair:       rgba(33, 30, 24, 0.16);
  --hair-soft:  rgba(33, 30, 24, 0.09);

  /* Accent — NYRB "Divorcing" cover box · canonical across the site */
  --claret:     #1A88B5;   /* primary accent — teal, drawn from the cover image */
  --blush:      #F5A895;   /* coral/salmon, from the image */
  --gold:       #EFD23C;   /* yellow, from the image */

  /* ── Scale ── */
  --t-2xs: 0.6875rem; --t-xs: 0.75rem;  --t-sm: 0.875rem;
  --t-base:1rem;      --t-md: 1.125rem; --t-lg: 1.375rem;
  --t-xl:  1.75rem;   --t-2xl:2.25rem;  --t-3xl:3rem;
  --t-4xl: 4rem;      --t-5xl:5.5rem;

  /* ── Tracking ── */
  --tr-tight:-0.015em; --tr-base:0.01em;
  --tr-wide:0.08em;    --tr-wider:0.16em; --tr-widest:0.24em;

  /* ── Spacing ── */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem;
  --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem;

  /* ── Layout ── */
  --measure: 68ch;
  --maxw:    1200px;

  /* ── Motion ── */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 560ms;
}

/* ─────────────────────────────────────
   RESET
   ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

img, svg { display: block; max-width: 100%; }
button   { cursor: pointer; font-family: inherit; }
a        { color: inherit; text-decoration: none; }

::selection { background: var(--claret); color: var(--paper); }

/* Smooth in-page scrolling (nav anchors) */
html { scroll-behavior: smooth; }

/* Scroll-reveal — sections fade + settle as they enter the viewport */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}