/* Beacon — shared foundation.
   ==========================================================================
   Every page used to carry its own complete stylesheet. That is why, in August
   2026, one gutter fix had to be applied five times, and why a mobile-nav rule
   written as `nav .wrap` silently did nothing on the two pages whose markup said
   `navwrap` — nobody could see the divergence, because there was nothing to
   compare against.

   What belongs here: design tokens, the page container, and the behaviours every
   page owes a reader regardless of what it is about — a way past the navigation,
   a visible focus ring, a scroll region that a keyboard can reach.

   What does not: anything a single page needs. Page stylesheets load after this
   file and win, so a page can always override a token or a rule locally.

   Tokens are declared here as DEFAULTS. Pages may still override any of them,
   but no token name means two different things any more: the support colours
   used to have one name per ROLE and two values per name, one for the pages that
   sit on paper and one for the pages that sit on ink, so one and the same teal
   token painted #2E6E6A on one page and #3E8B86 on the next. Every distinct value
   now carries the ground in its own name — see the Support block below.
   ========================================================================== */

:root{
  /* Ground and ink */
  --ink:#0E1A2B;
  --ink-2:#1B2C44;
  --paper:#F8F6F1;
  --white:#FFFFFF;

  /* Accent */
  --amber:#D98E32;

  /* --amber-deep is the accent on a LIGHT ground. It was #B26E1D, which is
     3.78:1 on paper and fails WCAG 2.1 AA for body text. #8F5714 is 5.49:1 on
     paper, 5.93:1 on white and 5.11:1 on the pale amber wash — the three grounds
     it actually sits on. */
  --amber-deep:#8F5714;

  /* Support — two families, one name each.
     These colours are used on both grounds the site has, and the same role needs
     a different value on each: a teal that reads on paper is too dark to read on
     ink, and a teal that reads on ink is too pale to pass on paper. Each pair
     used to share a single ground-less name, with the ink pages redefining it
     locally — which meant a rule copied from one page to another silently
     changed colour.

     Each name now says which ground it belongs to, in the same spirit as
     `--amber-deep` ("the accent on a LIGHT ground") and `--mist` (muted text on a
     DARK ground):

       -on-paper  a readable stroke/text colour on the paper ground
       -on-ink    the same role, lifted so it reads on the ink ground
       -wash      a pale FILL. Paper only — a wash on ink would be a light box.
       -mist      a muted stroke/text colour on ink, the counterpart of a wash.

     All nine are declared here, so a page needs no local override at all; the
     ink pages carry ink names and the paper pages carry paper names, and neither
     can pick up the other's value by accident. */
  --teal-on-paper:#2E6E6A;
  --teal-on-ink:#3E8B86;
  --teal-wash:#E4EEED;
  --teal-mist:#7FB5B1;
  --red-on-paper:#A4432E;
  --red-on-ink:#D97A5E;
  --red-wash:#F6E9E4;
  --amber-wash:#F7EDDD;
  --amber-on-ink:#E8B36B;

  /* Text */
  --slate:#5B6B80;
  /* Muted text on a LIGHT ground. Was #8D99AB at 2.67:1, which failed even the
     large-text threshold. #5F6C7E is 4.94:1 on paper. Muted text on a DARK
     ground is --mist, which stays #8D99AB because it reads 6.06:1 there. */
  --slate-light:#5F6C7E;
  --mist:#8D99AB;
  --cloud:#B9C2CF;
  --light:#F3EEE3;

  /* Rules and glass */
  --line:#E3DED4;
  --line-soft:#EDE9DF;
  --glass-line:rgba(255,255,255,.09);

  /* Type */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;

  /* Page container. A page sets --wrap-max for its own measure, and may set a
     different gutter pair; the RULES that consume them live only here, so the
     gutter can never again be set in five places and missed in two.
     Both sizes are tokens rather than one token plus a media override, because a
     page's own stylesheet loads after this file: a `:root{--gutter:…}` in a page
     would otherwise shadow the small-screen value too, and quietly widen the
     gutter on phones. */
  --wrap-max:1060px;
  --gutter:32px;
  --gutter-sm:20px;
}

*{margin:0;padding:0;box-sizing:border-box}

/* The page container.
   Declared with padding LONGHANDS on purpose. The original bug was that later
   rules of equal specificity (.head, .surfaces-head) set the `padding` shorthand
   to style their vertical rhythm, which silently reset padding-left and
   padding-right to zero. Above the container's max-width the centring margin hid
   it; below it, text sat flush against both screen edges on every phone. Those
   rules are longhands now too, but keeping this one explicit means a future
   shorthand cannot quietly undo it. */
.wrap{
  width:100%;
  max-width:var(--wrap-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

@media(max-width:520px){
  .wrap{
    padding-left:var(--gutter-sm);
    padding-right:var(--gutter-sm);
  }
}

/* Skip link — the first thing a keyboard or screen-reader user meets, and the
   only way past a navigation block without tabbing through all of it. WCAG 2.4.1.

   Hidden with the clip technique rather than `left:-9999px`: an element parked
   far off-canvas is still laid out there, which reads as content the viewport
   cannot reach. This keeps it a 1px box at the origin until it is focused, and
   then pins it with `position:fixed` so it stays visible however far the page has
   been scrolled. */
.skip-link{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.skip-link:focus{
  position:fixed;
  top:0;
  left:0;
  z-index:200;
  width:auto;
  height:auto;
  margin:0;
  padding:10px 18px;
  overflow:visible;
  clip:auto;
  clip-path:none;
  background:var(--ink);
  color:#F3EEE3;
  border:1px solid var(--amber);
  border-radius:0 0 6px 0;
  font-family:var(--sans);
  font-size:14px;
  text-decoration:underline;
}

/* A visible focus ring on everything focusable. :focus-visible so a mouse click
   does not leave a ring behind, but a keyboard always does. WCAG 2.4.7. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
  border-radius:2px;
}

/* Wide content scrolls inside its own region rather than pushing the page
   sideways. Give the element tabindex="0", role="region" and an aria-label when
   you use this, or a keyboard cannot reach what is inside it. */
.scroll-x{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}

/* Text selection carries the brand: amber ground, ink text. One rule serves both
   page grounds — the pale amber reads on paper cards and lifts on the ink pages. */
::selection{background:var(--amber);color:var(--ink)}

/* Scrollbars in the site's own palette rather than the platform's chrome grey.
   The standard property only — subtle, and inert where unsupported. */
html{scrollbar-color:var(--mist) transparent}