/* Base rules that every page needs and no page owns.
 *
 * Its own file for the same reason consent.css is: the alternative is copying four declarations
 * into ten pages, six of which keep their styles inline, and that is exactly how the consent
 * banner CSS came to exist in three places that could drift apart.
 *
 * Findings 2, 3 and 5 in docs/WEB-INTERFACE-AUDIT.md. */

/* ---------------------------------------------------------------- fonts, self-hosted
 *
 * These used to come from fonts.googleapis.com and fonts.gstatic.com on all ten pages. Two
 * reasons they no longer do. A webfont request carries the visitor's IP and User-Agent to a
 * third party before the consent banner has been answered, which is the one thing consent.js
 * exists to prevent everywhere else. And it put the typography of every page behind somebody
 * else's uptime for no benefit the same bytes on our own origin do not give.
 *
 * Licences verified against upstream METADATA.pb on 8 August 2026, both permit web embedding
 * and self-hosting. The full texts sit next to the files rather than being described here:
 *   Instrument Sans   SIL Open Font License 1.1   assets/fonts/InstrumentSans-OFL.txt
 *   Permanent Marker  Apache License 2.0          assets/fonts/PermanentMarker-LICENSE.txt
 *
 * Instrument Sans is a variable font, so one file serves 400 to 700 and the weight range is
 * declared rather than shipping four near-identical faces. font-stretch is pinned to 100%
 * because the file also carries a wdth axis and the default is not otherwise guaranteed.
 *
 * unicode-range is kept exactly as Google served it. It is what stops a visitor whose page has
 * no accented characters from ever downloading latin-ext. */

@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url('/assets/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url('/assets/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Permanent Marker';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/permanent-marker-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Native controls, the two consent checkboxes and both email inputs, are drawn by the OS.
     Without this a visitor with dark mode forced at OS level gets a dark checkbox on a cream
     card. This declares the palette the site actually has rather than adding a dark theme. */
  color-scheme: light;
}

/* Mobile browsers hold a tap for roughly 300ms to see whether a double-tap zoom is coming. On a
   seventeen-question diagnostic that is seventeen delays, and it reads as the site being slow
   rather than as a browser default. Applied to interactive elements only, so pinch-zoom on the
   page itself still works, which some people need to read at all. */
a, button, summary, input, label, .d-opt{
  touch-action: manipulation;
}

/* iOS paints a translucent blue rectangle over every tapped element. On a paper-coloured design
   it looks like a rendering fault. Removed here because :focus-visible and :hover already give
   clearer feedback, and removing it without a replacement would be worse than leaving it. */
a, button, summary, .d-opt{
  -webkit-tap-highlight-color: rgba(22, 21, 15, .08);
}

/* Tap targets, finding from tools/verify-consent.mjs measured at a 375px viewport.
 *
 * Navigation and footer links rendered at 23px tall. They are links you are meant to hit with a
 * thumb, not words inside a sentence, so they belong at 44px. inline-flex with a minimum height
 * is used rather than padding so the horizontal rhythm of the footer row does not change.
 *
 * Inline links inside body copy are deliberately left alone. Holding those to 44px would mean a
 * 44px line height in running text, which is worse for everyone. */
.nav nav a,
.fnav a,
.brand{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}