/* MARKETING SCALE — the type and rhythm of the front door.

   Larger than the app at every step, and that is the point: the app's base is
   13px for a panel read all day at desk distance; a landing page read once by a
   stranger needs air. Sharing one scale would make one of the two wrong.

   The display steps are tuned for a SERIF, not a grotesque: a serif needs more
   size and less negative tracking to hold the same presence, so these are not the
   old grotesque numbers with a new family dropped in.

   ⚠ WORTH RE-MEASURING. These values were set against Instrument Serif, which had
   an unusually small x-height. Source Serif 4's is much larger, so the same px
   value now reads noticeably bigger. Nothing is broken and nothing overflows, but
   --m-display and --m-h2 could each come down a step if the hero feels shouty.
   Left as-is rather than changed silently, because that is a judgement call on
   live pages. */

:root {
  --m-display: clamp(2.6rem, 1.6rem + 2.8vw, 4.25rem); /* @kind other */
  --m-h2:      clamp(2rem, 1.3rem + 2.2vw, 3.15rem); /* @kind other */
  --m-h3:      clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); /* @kind other */
  --m-lead:    clamp(1.05rem, 0.98rem + 0.4vw, 1.22rem); /* @kind other */
  --m-body:    1rem;
  --m-small:   0.875rem;
  --m-eyebrow: 0.75rem;

  /* Three container widths. Prose never gets the full one. */
  --w-page:    80rem;
  --w-centred: 60rem;
  --w-measure: 46rem;

  /* Band rhythm, stepped at the breakpoints. */
  --band-y: 5.5rem;
  --gutter: 1.5rem;

  /* --- the graticule ----------------------------------------------------
     What replaced the drifting gradient blobs. See patterns/brand.css. */
  /* Minor cell, then a major line every fourth — the structure real graph paper
     and every oscilloscope screen has. One flat grid reads as a texture; a
     major/minor graticule reads as a measuring surface, which is the point. */
  --grat-step: 30px;
  /* Pulled back with the tape behind them. These were tuned when the grid was
     the only thing in the background; over a moving field the same values read
     as twice as much structure as the page needs. */
  --grat-line: light-dark(rgba(26, 31, 38, 0.038), rgba(242, 238, 229, 0.034));
  --grat-line-major: light-dark(rgba(26, 31, 38, 0.075), rgba(242, 238, 229, 0.07));
  --grat-rule: light-dark(rgba(138, 90, 24, 0.15), rgba(192, 138, 62, 0.16));

  /* --- the tape --------------------------------------------------------
     The two colours the defocused field is drawn in. They are full rgba
     rather than a reuse of --text-muted for one reason: the same alpha is
     not the same weight in both themes. Light ink on a dark ground reads
     far softer than dark ink on cream, and the first pass — which used
     --text-muted for both — was pleasant in dark and nearly legible in
     light, competing with the body copy it sits behind.

     Tuned by eye against the hero at 1440px, then checked at 390px. */
  --tape-ink: light-dark(rgba(26, 31, 38, 0.20), rgba(242, 238, 229, 0.55));
  --tape-hot: light-dark(rgba(138, 90, 24, 0.24), rgba(192, 138, 62, 0.60));
  --grat-fade: 68%;
}

@media (min-width: 1440px) { :root { --band-y: 6.5rem; --gutter: 2rem; } }
@media (max-width: 991px)  { :root { --band-y: 4.5rem; } }
@media (max-width: 767px)  { :root { --band-y: 3.25rem; --gutter: 1rem; --grat-step: 22px; } }