/* ZipLaw — WebsiteV2 design tokens.
   Values normalised from the Figma export, which is scaled 0.9x
   (1728 = 1920 x 0.9); its 21.6 / 43.2 / 129.6px are that artifact. */

/* --- self-hosted faces (CSP stays default-src 'self') --- */
@font-face{font-family:'Open Sans';src:url('../fonts/open-sans-400.woff2')format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('../fonts/open-sans-600.woff2')format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url('../fonts/open-sans-700.woff2')format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-400.woff2')format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  /* brand */
  --teal-900:#093133;
  --teal-800:#184548;
  --teal-700:#26393D;
  --slate:#0F383B;
  --gold:#FFBE24;

  /* neutrals */
  --ink:#010101;
  --body:#686868;        /* 5.57:1 on white — AA */
  --body-on-card:#4D5B53;
  --hint:#828282;        /* placeholders only — 3.84:1 */
  --line:#D6E5E5;
  --sand:#E6DFD5;
  --white:#FFFFFF;

  /* type — display is Trebuchet per the design file; see spec section 4 */
  --font-display:'Trebuchet MS','Lucida Grande','Lucida Sans Unicode','Lucida Sans',Tahoma,sans-serif;
  --font-body:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-accent:'Newsreader',Georgia,'Times New Roman',serif;

  /* fluid scale, 390px -> 1728px */
  --step--2:clamp(0.688rem,0.66rem + 0.11vw,0.75rem);   /* 11-12  eyebrow */
  --step--1:clamp(0.875rem,0.85rem + 0.11vw,1rem);      /* 14-16  fine print */
  --step-0:clamp(1rem,0.96rem + 0.18vw,1.125rem);       /* 16-18  body */
  --step-1:clamp(1.125rem,1.06rem + 0.27vw,1.375rem);   /* 18-22  lead */
  --step-2:clamp(1.25rem,1.14rem + 0.45vw,1.563rem);    /* 20-25  card title */
  --step-3:clamp(1.5rem,1.3rem + 0.8vw,2rem);           /* 24-32  h3 */
  --step-4:clamp(1.75rem,1.4rem + 1.4vw,2.625rem);      /* 28-42  step numeral */
  --step-5:clamp(2rem,1.55rem + 1.8vw,2.75rem);         /* 32-44  h2 */
  --step-6:clamp(2.25rem,1.6rem + 2.6vw,3.813rem);      /* 36-61  page title */
  --step-7:clamp(2.25rem,1.35rem + 3.7vw,4.781rem);     /* 36-76.5 hero */

  /* shape */
  --radius-panel:20px;
  --radius-card:18px;
  --radius-input:12px;
  --radius-pill:90px;

  /* layout */
  /* Both bands were pulled in by a fifth: the site read as too wide.
     --container-media keeps the pre-narrowing width, used by the grids
     that hold photographs so those are not scaled down with the text. */
  --container:884px;
  --container-wide:1175px;
  --container-media:1469px;
  --gutter:clamp(1rem,4vw,4.5rem);
  --panel-inset:clamp(0px,0.64vw,11px);

  /* rhythm */
  --space-section:clamp(3.5rem,7vw,7.5rem);
  --space-block:clamp(2rem,4vw,3.6rem);

  --focus:0 0 0 3px rgba(255,190,36,0.55),0 0 0 5px rgba(9,49,51,0.9);
}