/* Shared stylesheet for the four plain pages: privacy, terms, licenses,
   contact. They used to carry four near-identical copies of this block —
   privacy.html and terms.html were byte-identical — and drifted anyway:
   licenses.html hard-coded #1C0E02, a landing-page token, for one heading.

   These pages are DELIBERATELY plainer than index.html. They load no webfonts
   (a legal page is read, not composed) and no mascot script. What they must
   not do is look like a different studio, so the palette below is the landing
   page's own set of tokens rather than a second cream. */

:root{
  --paper:#FDF6E3;          /* the landing page's paper, not a second cream */
  --ink:#221105;
  --brown:#3A2313;          /* --serif-ink on the landing page */
  --head:#1C0E02;
  --link:#6B3F1D;
  --muted:#5F5140;          /* 5.6:1 on --paper; the old #6d6558 was 4.4:1 */
  --line:rgba(42,33,24,.18);
  --card:#F7EDD4;           /* --band-warm on the landing page */
  /* The game's Wong blue, matching the landing page. The two palettes are
     deliberately distinct everywhere else, but the focus ring belongs to the
     interaction layer rather than to either page's decoration, so it is the
     one colour they share. */
  --focus:#017AB9;
  /* Copied from site.css, not imported - there is no build step. The values
     are asserted equal across the two stylesheets by tests/palette.spec.ts, so
     a copy that drifts fails rather than rots. */
  --game-red:#D74C3F;
  --game-blue:#5387C0;
  --game-red-ink:#AC2F24;
}
/* The same warm selection the landing page uses, so a reader who follows a
   footer link does not get the browser's blue on the other side. Both halves
   pinned for the same reason as there: a background alone leaves the selected
   text in whatever ink it had. */
::selection{background-color:var(--game-red-ink); color:var(--paper);}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height:1.6;
}
.wrap{max-width:720px; margin:0 auto; padding:28px 24px 64px; position:relative;}

/* WCAG 2.4.1: every page here repeats the studio mark before its content, so
   every page gets the same bypass the landing page has. Off-screen until it is
   focused, then it sits over the mark it skips. `main` carries tabindex="-1"
   so the jump actually moves focus rather than only the scroll position. */
.skip{
  position:absolute; left:50%; top:8px; transform:translate(-50%,-160%);
  z-index:20; padding:11px 18px; border-radius:999px;
  background:var(--head); color:var(--paper, #FDF6E3);
  font-size:14px; font-weight:700; text-decoration:none;
  transition:transform .12s;
}
.skip:focus{transform:translate(-50%,0);}
#content:focus{outline:none;}
#content:focus-visible{outline:3px solid var(--head); outline-offset:6px;}
@media (prefers-reduced-motion: reduce){ .skip{transition:none;} }

/* The studio mark, so a visitor who lands here from a search result can see
   whose page this is and get back to the game in one click. */
.pagemark{
  display:flex; align-items:center; gap:10px;
  margin:0 0 26px; padding-bottom:14px; border-bottom:1px solid var(--line);
  font-size:14px; font-weight:700; color:var(--head); text-decoration:none;
}
.pagemark img{width:22px; height:22px; display:block;}
.pagemark span{font-weight:400; color:var(--muted);}

/* 40px made "Privacy Policy" the largest type on the site, larger than the
   landing page's own band headings at 26px. */
h1{font-family:ui-serif, Georgia, serif; color:var(--brown); font-size:30px; line-height:1.2; margin:0 0 6px;}
h2{font-family:ui-serif, Georgia, serif; color:var(--brown); font-size:22px; margin:32px 0 8px;}
h3{font-size:16px; margin:20px 0 2px; color:var(--head);}
.date{color:var(--muted); font-size:14px; margin:0 0 24px;}
a{color:var(--link);}
ul{margin:8px 0 0; padding-left:20px;}
li{margin:4px 0;}
.pagenav{margin-top:36px; padding-top:14px; border-top:1px solid var(--line); font-size:15px;}
/* WCAG 2.5.8: these links rendered 132x18. The padding lifts them past the
   24x24 minimum and the equal negative margin keeps the row laid out exactly
   as before — the same technique the landing page's footer uses. */
.pagenav a{
  display:inline-block; font-weight:700; text-decoration:underline;
  padding:6px 4px; margin:-6px -4px;
}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px;}
/* The licence page carries full URLs, which have no break opportunity and push
   the layout wider than the viewport once the text is enlarged past the 320 CSS
   px reflow floor (WCAG 1.4.10). */
main a{overflow-wrap:anywhere;}
@media (forced-colors: active){
  :focus-visible{outline:3px solid Highlight;}
}

/* contact.html */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; margin:14px 0;
}
.card p{margin:0;}
.addr{font-weight:700; font-size:17px;}
.note{color:var(--muted); font-size:14px; margin-top:4px;}

/* licenses.html */
p.credit{margin:0 0 2px;}
p.meta{margin:0 0 10px; color:var(--muted); font-size:14px;}
details{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:10px 14px; margin:12px 0;
}
/* padding takes the line box past the 24px WCAG 2.5.8 minimum: 14px text on
   its own line measures 22.4px, and a <summary> is a control. */
summary{cursor:pointer; font-weight:700; font-size:14px; padding:4px 0;}
details pre{
  white-space:pre-wrap; font-size:12.5px; line-height:1.5;
  margin:12px 0 2px; max-height:320px; overflow-y:auto;
}

/* ---- error pages ---------------------------------------------------------
   The sketches are inline SVG rather than a sprite file: an external <use>
   would be a document fetch, and the CSP is default-src 'none'. Their styling
   lives here so the pages carry no inline <style> either. */
.errorhead{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin:0 0 6px;}
.ducksketch{width:170px; height:139px; flex:none; display:block;}
.errorcode{
  font-family:ui-serif, Georgia, serif; font-size:52px; line-height:1;
  color:var(--brown); margin:0;
}
.errorpage h1{margin:2px 0 10px;}
.errorpage .lede{font-size:17px; line-height:1.5; margin:0 0 18px;}
.errorlinks{list-style:none; margin:0; padding:0;}
.errorlinks li{margin:0 0 10px;}
.errorlinks a{font-weight:700;}
.errorlinks span{color:var(--muted);}
@media (max-width:420px){
  .ducksketch{width:130px; height:106px;}
  .errorcode{font-size:40px;}
}
.dk-body{fill:#F6D77A; stroke:#1C0E02; stroke-width:5; stroke-linejoin:round;}
.dk-bill{fill:#E08A2E; stroke:#1C0E02; stroke-width:5; stroke-linejoin:round;}
.dk-eye{fill:#1C0E02;}
.dk-line{fill:none; stroke:#1C0E02; stroke-width:5; stroke-linecap:round; stroke-linejoin:round;}
.dk-paper{fill:#FFFDF6; stroke:#1C0E02; stroke-width:5; stroke-linejoin:round;}
/* The two toppled cylinders on error.html are the game's pieces - the copy
   says as much ("we will go and stand the cylinders back up") - so they are
   the game's own red and blue rather than the near-misses #C0392B and #2D6CB5
   that were here before. Against the 5px #1C0E02 stroke that carries every
   shape, this also reads better: 3.47 -> 4.49 and 3.53 -> 5.03.
   These fills are decorative: the sketch is role="img" with an aria-label that
   describes it in words and NAMES NO COLOUR, which is the condition under
   which they stay decorative. tests/palette.spec.ts asserts that. */
.dk-red{fill:var(--game-red); stroke:#1C0E02; stroke-width:5; stroke-linejoin:round;}
.dk-blue{fill:var(--game-blue); stroke:#1C0E02; stroke-width:5; stroke-linejoin:round;}
.dk-mark{fill:#B08A4A;}