/* =========================================================================
   PAGE MARGINS — ONE SOURCE, LOADED BY BOTH PAGES.  v=2  (2026-10-11)

   Modelled on the Brikken+Co footer (www.brikken.co): a single fluid gutter
   that every edge on the page is measured from, rather than a per-breakpoint
   ladder. The ramp is the user's, stated explicitly, so the expression below is
   a transcription and not a derivation:

       320    16px     (the floor; 3.5vw would give 11.2)
       390    16px     (the floor; 3.5vw would give 13.65)
       457    16px     (where 3.5vw overtakes the floor)
       768    26.88px
       1024   35.84px
       1440   50.4px
       beyond  keeps growing — there is NO ceiling, by instruction

   CORRECTED 2026-10-11: the first pass shipped clamp(16px, 6.25vw, 96px), which
   gave 90 at 1440 and 24.4 at 390. 6.25vw was wrong; the ramp is 3.5vw with a
   16px floor and no cap.

   WHY A NEW FILE. index.html and about.html shared no stylesheet, which is why
   the previous pass had to copy the overlay's numbers into css/about-v2.css by
   hand and say so in a comment. This file is the fix: both pages link it, both
   read the same two custom properties, and a change here moves both. It is the
   FIRST sheet in each page's head so every later sheet can spend the tokens.

   IT DEFINES TOKENS ONLY — no selectors, no resets, nothing that can cascade
   into either page's existing rules. Adding it cannot change anything that does
   not explicitly ask for --page-margin or --page-top.

   THE CENTRING TERM IS NOT IN THE TOKEN. Both pages cap their content box at
   1440 and centre it beyond that, so an element that must sit on the margin
   line uses `--page-inset` instead, which adds the centring offset. For
   fixed/absolute children of the viewport, 100% IS the viewport width, which is
   what makes one expression work for both pages.
   ========================================================================= */

:root {
  --page-margin: max(16px, 3.5vw);
  --page-top:    var(--page-margin);

  /* The content box both pages cap at. Stated here because --page-inset needs
     it and because two pages agreeing on it by coincidence is how drift starts. */
  --page-max:    1440px;
}

/* The left/right margin LINE measured from the viewport edge, centring included.
   Use this for position:fixed / position:absolute corner controls; use plain
   --page-margin for padding inside an already-centred box. */
:root {
  --page-inset: calc(max(0px, (100% - var(--page-max)) / 2) + var(--page-margin));
}