/* Shared page chrome: colour/font tokens, header bar, nav, language switch,
   footer and the build-line — injected into every page by apply.sh's
   render() via the __SITE_CSS__ placeholder so it cannot drift page to
   page. Page-specific styles (hero, cards, article typography, etc.) stay
   in each page's own <style> block. */
:root{
  --porcelain:#FAFAF7; --ink:#16161D; --ink-2:#4A4A55; --ink-3:#63636E;
  --red:#B5121B; --red-dark:#8E0E15; --gold:#D9A400; --gold-soft:#F3E3B2;
  --paper:#F6EFDC; --paper-edge:#E4D9BC; --code-bg:#14141B; --code-ink:#E8E6DF;
  --rule:#E3E2DC;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--porcelain);color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
/* Long-form prose (blog articles, legal pages) keeps a narrower text
   column for readability while the chrome around it stays full width. */
.prose{max-width:760px}
header{border-bottom:1px solid var(--rule);background:var(--porcelain)}
.bar{display:flex;align-items:center;gap:12px;padding:14px 0}
.sealmark{width:34px;height:34px;border-radius:8px;background:radial-gradient(circle at 32% 26%, #D91A25, #8E0E15);display:grid;place-items:center;color:#fff;font:700 17px "Libre Caslon Text",serif;box-shadow:inset 0 0 0 2px rgba(243,196,0,.85)}
.wordmark{font:600 15px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;color:var(--ink);text-decoration:none}
.bar nav{margin-left:auto;display:flex;gap:22px;font-size:15px}
.bar nav a{color:var(--ink-2)}
.lang{display:inline-flex;margin-left:18px;border:1px solid var(--rule);border-radius:999px;overflow:hidden;font:600 12px/1 "IBM Plex Mono",monospace}
.lang a,.lang .off{padding:7px 12px;color:var(--ink-3);text-decoration:none;letter-spacing:.06em}
.lang a:hover{color:var(--ink);text-decoration:none}
.lang a.on{background:var(--ink);color:var(--porcelain)}
footer{border-top:1px solid var(--rule);padding:34px 0 22px;font-size:13.5px;color:var(--ink-3);text-align:center}
footer .wrap{display:grid;gap:8px}
.build-v{text-align:center;font:400 11px/1 "IBM Plex Mono",monospace;color:var(--ink-3);opacity:.55;padding:0 24px 26px;letter-spacing:.04em}
@media (max-width:480px){
  .bar{flex-wrap:wrap}
  .sealmark,.lang{flex-shrink:0}
  .bar nav:not(.lang){gap:12px;font-size:13px;flex-basis:100%;order:3;margin-left:0}
  .wordmark{font-size:13px}
}

/* Nothing may push the page sideways on a phone. Long inline <code> (URLs,
   gazette shorthand) has no spaces to break at, and a wide table drags the
   whole document with it — both were doing exactly that on /partners and the
   open-data article. Blocks that must keep their shape scroll inside
   themselves instead. Lives here so every page inherits the guarantee. */
code{overflow-wrap:anywhere;word-break:break-word}
pre{max-width:100%;overflow-x:auto}
img,svg,video{max-width:100%;height:auto}
@media (max-width:640px){
  table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* A flex row refuses to shrink its items below their content width, so a
   longer label in another language pushes the whole page sideways — the
   Spanish "Enviarme una clave gratis" did exactly that where the English
   "Email me a free key" fitted. Let the field shrink, and stack the form
   when there is genuinely no room. Any future locale inherits the fix. */
.wl input{min-width:0}
@media (max-width:520px){
  .wl{flex-wrap:wrap}
  .wl .btn,.wl button{width:100%}
}

/* A language with no translation of THIS page is shown inert rather than
   linked: sending a reader from /contact to the Spanish home page loses their
   place and looks like a bug. Dim it and say why on hover -- but only far
   enough to read as unavailable. At .4 it composited to #BEBEC0 on the bar,
   1.77:1, which does not read as disabled so much as absent: the reader sees
   no switch at all and cannot learn that the other language exists. */
.lang .off{opacity:.7;cursor:default}