/* Self-hosted fonts (moved off fonts.googleapis.com 2026-09-17). These are the
   same variable-weight latin woff2 files Google was serving, so rendering is
   identical; the difference is one fewer render-blocking origin. Any weight
   in the 100-900 range resolves to the same file, so there is nothing to add
   when a new weight is used. Fonts under /assets/ are cached immutable for a
   year: if a file ever changes, rename it. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   DESIGN TOKENS — the only file where a colour, size or spacing is defined.
   Nothing else in the codebase should hardcode a hex value or a px font size.
   Change a value here and it changes everywhere.
   ========================================================================== */

:root{
  /* ---------- BRAND PALETTE ----------
     Supplied by the client. Do not add hues outside this set.            */
  --peri:        #DADFEB;   /* periwinkle — brand tint                     */
  --red:         #CF0910;   /* brand red — CTAs and accents                */
  --slate:       #333949;   /* body text, dark surfaces                    */
  --ink:         #231F20;   /* headlines, darkest surface                  */
  --paper:       #FFFFFF;

  /* ---------- DERIVED SURFACES ----------
     Tints of the brand palette only. No new hues.                        */
  --peri-soft:   #EBEEF5;   /* hover states, soft callouts                 */
  --gray:        #F5F6F9;   /* alternating section background              */
  --line:        #E5E8F0;   /* hairline borders                            */
  --line-dk:     rgba(255,255,255,.14);
  --mute:        #6A7082;   /* secondary text                              */
  --red-dk:      #B00810;   /* button hover; also AA-safe red on periwinkle */

  /* ---------- RED VARIANTS ----------
     --red-on-peri is still the AA-safe deepened red on periwinkle.

     --red-on-dark WAS #FF7A7A (4.9:1 on ink, 4.6:1 on slate). Robin does not
     like the lighter red and asked for brand red on dark surfaces, so this now
     resolves to brand red at her explicit direction. That is 2.03:1 on slate
     and FAILS WCAG AA for text contrast. The site can no longer be described
     as AA-clean while this holds — see CLAUDE.md.

     Kept as a token rather than inlined so the decision is one line to revisit. */
  --red-on-dark: #CF0910;   /* brand red, by Robin's request — see note above */
  --red-on-peri: #B00810;   /* 5.45:1 on periwinkle                        */

  /* ---------- TYPE ---------- */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;

  /* NOTE: page templates declare their own :root using the short names --disp
     and --ui. Do NOT alias them here yet. base.css @imports this file and is
     linked after those inline blocks, so on the templates that load base.css
     an alias here would win and quietly change their font stack. Add the
     aliases in the same change that retires the inline :root blocks. */

  --fs-h1:    clamp(30px, 3.8vw, 52px);
  --fs-h2:    clamp(26px, 3.0vw, 42px);
  --fs-h3:    clamp(19px, 1.6vw, 24px);
  --fs-lead:  clamp(17.5px, 1.3vw, 20px);
  --fs-body:  17px;
  --fs-prose: 19px;          /* long-form article body                     */
  --fs-small: 14.5px;
  --fs-eyebrow: 12.5px;

  --lh-tight: 1.06;
  --lh-head:  1.2;
  --lh-body:  1.62;
  --lh-prose: 1.78;

  --ls-display: -.032em;     /* Archivo needs negative tracking when large */
  --ls-eyebrow: .15em;

  --measure: 38em;           /* ~65 chars — comfortable reading width      */

  /* ---------- SPACING ---------- */
  --gut:       clamp(20px, 5vw, 44px);   /* page gutter                    */
  --max:       1180px;                    /* content container             */
  --max-wide:  1560px;
  --section-y: clamp(54px, 6.5vw, 92px); /* vertical section rhythm        */

  /* ---------- SHAPE ----------
     Robin's stated preference: flowing, rounded lines.                   */
  --r:      18px;    /* cards, panels                                     */
  --r-sm:   14px;    /* nested elements                                   */
  --r-pill: 999px;   /* buttons, chips, inputs                            */

  /* ---------- ELEVATION ---------- */
  --sh:     0 10px 30px rgba(35,31,32,.08);
  --sh-lg:  0 20px 45px rgba(35,31,32,.13);
  --sh-red: 0 10px 24px rgba(207,9,16,.28);

  /* ---------- MOTION ---------- */
  --ease:      cubic-bezier(.22,.7,.28,1);
  --dur-fast:  .16s;
  --dur:       .3s;
  --dur-slow:  .7s;

  /* ---------- LAYOUT CONSTANTS ---------- */
  --nav-h:     78px;
  --scroll-pad: 92px;   /* anchor offset so the sticky nav doesn't cover headings */
}

/* ---------- HERO SWOOP ARTWORK ----------
   The ribbon SVG is anchored to the container, never the viewport.
   Learned the hard way: a 100vw gradient drifts across the copy on wide
   screens. Left edge sits just past the copy column and bleeds right.     */
:root{
  --swoop-offset: 24px;                  /* clearance past the copy column */
  --swoop-w: calc(50vw - var(--swoop-offset));
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast: 0s; --dur: 0s; --dur-slow: 0s; }
}