/* ============================================================================
   The Constellation — type.css
   Self-hosted WOFF2 (Latin subset). Two families + one mono.
   Display: Space Grotesk · Body: Newsreader · Data/labels: IBM Plex Mono.
   Production paths are absolute under /assets/design/fonts/.
   ========================================================================== */

/* --- Display: Space Grotesk (500, 600) --- */
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/design/fonts/SpaceGrotesk-500.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/design/fonts/SpaceGrotesk-600.woff2') format('woff2');
}

/* --- Body: Newsreader (400 roman + italic) --- */
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/design/fonts/Newsreader-400.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/design/fonts/Newsreader-400.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/assets/design/fonts/Newsreader-400-italic.woff2') format('woff2');
}

/* --- Data / labels: IBM Plex Mono (400, 500, 600) --- */
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/design/fonts/IBMPlexMono-400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/design/fonts/IBMPlexMono-500.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/design/fonts/IBMPlexMono-600.woff2') format('woff2');
}

:root{
  --sans:'Space Grotesk', ui-sans-serif, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* type scale (px; fluid where it earns it) */
  --fs-display: clamp(32px, 5vw, 48px);   /* front-page / masthead title */
  --fs-title:   clamp(27px, 4.6vw, 38px); /* edition headline */
  --fs-work:    clamp(21px, 3.4vw, 26px); /* piece title */
  --fs-heading: 19px;                     /* subsection h3 */
  --fs-body:    18px;                      /* reading body */
  --fs-small:   14.5px;                    /* teasers, captions */
  --fs-eyebrow: 11px;                      /* mono kicker */
  --lh-body: 1.7;
  --lh-tight: 1.14;
}

/* --- base --- */
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .35s, color .35s;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--ink); }

/* --- roles --- */
.display{ font-family:var(--sans); font-weight:600; font-size:var(--fs-display);
  line-height:1.02; letter-spacing:-.03em; }
.title{ font-family:var(--sans); font-weight:600; font-size:var(--fs-title);
  line-height:1.06; letter-spacing:-.025em; }
.work-title, h2.wt{ font-family:var(--sans); font-weight:600; font-size:var(--fs-work);
  line-height:var(--lh-tight); letter-spacing:-.018em; }
h3.sub, h3, .heading{ font-family:var(--sans); font-weight:600; font-size:var(--fs-heading);
  line-height:1.25; letter-spacing:-.01em; }
.eyebrow{ font-family:var(--mono); font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.lede{ color:var(--ink2); }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }