/* ============================================================================
   Type scale — one file, every page.
   ----------------------------------------------------------------------------
   The site is two typefaces and nothing else: Source Serif 4 for headings,
   Hanken Grotesk for everything else. Sizes come from the steps below rather
   than being invented per page — before this the same kind of page heading
   appeared at six different clamps and section headings at 22/25/26/27/28px,
   which is what made the pages feel like different sites stitched together.

   Headings hold a 1.15 line-height, body copy 1.65. Inline font-size on an
   element still wins, so tools/typography.py rewrites those inline values to
   these same steps; this file is what governs everything else and is the one
   place to change the scale.
   ========================================================================== */

:root{
  --t-display:clamp(38px,5.2vw,68px);  /* hero headline, one per page       */
  --t-h1:clamp(32px,3.6vw,46px);       /* page title below a hero           */
  --t-h2:clamp(28px,3vw,40px);         /* major section heading             */
  --t-h3:26px;                         /* sub-section / card group heading  */
  --t-h4:21px;                         /* small heading                     */
  --t-body:17px;                       /* paragraph copy                    */
  --t-small:15px;                      /* captions, meta, fine print        */
  --t-eyebrow:13px;                    /* the uppercase kicker above a head */
  --lh-tight:1.05;
  --lh-head:1.15;
  --lh-body:1.65;
  --serif:'Source Serif 4',Georgia,serif;
  --sans:'Hanken Grotesk',Arial,sans-serif;
}

/* Headings: serif, normal weight, one line-height. Sizes stay per-element so
   a hero headline and a card heading can differ, but only along the scale. */
h1,h2,h3,h4,h5,h6{
  font-family:var(--serif);
  font-weight:400;
  line-height:var(--lh-head);
  text-wrap:pretty;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
h4{font-size:var(--t-h4)}

/* The uppercase kicker that sits above most section headings. It appeared as
   12.5px/.2em on some pages and 13px/.22em on others. */
.cd-eyebrow,.kick{
  font-family:var(--sans);
  font-size:var(--t-eyebrow);
  font-weight:700;
  letter-spacing:.2em;
  line-height:1.4;
  text-transform:uppercase;
}

body{font-family:var(--sans)}

/* Form controls default to the system face unless told otherwise — that is
   why the calculator's inputs and buttons rendered in Arial. */
input,select,textarea,button{font-family:inherit}

/* The visualizer's hero is sized in its own stylesheet; put it on the same
   display step as every other hero headline. */
.vzhero-h{font-size:var(--t-display);line-height:var(--lh-tight)}

/* Legacy visualizer styles reach for a third typeface (Bebas Neue) that
   appears nowhere else on the site. Two elements still render through them. */
.vz-side h2,.vz-side h3,.vz-sel-info .pr,.disp,.sec-head h2,.pd-info h2{
  font-family:var(--serif)!important;
  letter-spacing:normal!important;
}
.vz-sel-info .pr small,.samples-band .big small{font-family:var(--sans)!important}