/* What every page shares: the palette in both themes, the page frame, the masthead with its
   logo and buttons, the loading dots, and section headings. Each page links this first and
   keeps only its own rules inline. test.mjs holds the palette to WCAG AA. */
:root {
  color-scheme: light dark;
  --serif: Fraunces, Georgia, serif;
  --sans: Inter, system-ui, sans-serif;

  --bg: #faf8f4;
  --surface: #ffffff;
  --text: #1d1b18;
  --muted: #6b665d;
  --rule: #e6e1d8;
  --line: #2d5b8a;
  --line2: #b4531a;
  --grid: #ece7de;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614;
    --surface: #1f1d1a;
    --text: #efebe4;
    --muted: #a39d92;
    --rule: #34302b;
    --line: #8fb8e3;
    --line2: #eea46c;
    --grid: #2a2723;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body { margin: 0 auto; max-width: 760px; padding: 24px clamp(16px, 4vw, 32px) 48px;
       background: var(--bg); color: var(--text); font: 15px/1.6 var(--sans);
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 2px solid var(--line); outline-offset: 2px; }

.mast { display: flex; justify-content: space-between; align-items: center; gap: 12px;
        border-bottom: 1px solid var(--rule); padding-bottom: 12px; color: var(--muted); font-size: 13px; }
.mast b { color: var(--text); font-weight: 600; letter-spacing: .02em; }
/* The favicon as a logo (favicon.svg's drawing, inline so the page can animate it); it and
   the title are one link home, named by the title. On hover each wind line is blown out to
   the right and drawn back in from the left, one after another, once per hover. Every line has pathLength 1,
   so the dash is a whole line and the 2-long gap hides it at either end of the offset. */
.mast .home:hover path, .mast .home:focus-visible path { stroke-dasharray: 1 2; animation: gust 1.4s ease-in-out; }
.mast .home path:nth-child(2) { animation-delay: .12s; }
.mast .home path:nth-child(3) { animation-delay: .24s; }
@keyframes gust {
  0% { stroke-dashoffset: 0; } 45% { stroke-dashoffset: -1.1; }
  45.01% { stroke-dashoffset: 1.1; } 100% { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mast .home:hover path, .mast .home:focus-visible path { animation: none; }
}
.mast .home { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; text-decoration: none; }
.mast .home:focus-visible { outline: 2px solid var(--line); outline-offset: 2px; }
.mast .actions { display: flex; gap: 6px; flex: none; }
/* The title, the separator and the update time are centred on one row, so the title (centred on
   the logo) and the time share a baseline. A flex item drops its edge spaces; pre keeps " · ". */
.mast > span:first-child { display: flex; flex-wrap: wrap; align-items: center; }
.mast .sep { white-space: pre; }
/* On phones the update time drops to its own row, lined up under the title (past the 28px
   logo and its 8px gap), so the buttons keep their place on the right. */
@media (max-width: 560px) {
  .mast .sep { display: none; }
  #stamp { flex-basis: 100%; padding-left: 36px; }
}
.link { background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 3px 10px; cursor: pointer; }
.link:hover { background: var(--surface); }
.link:disabled { opacity: .5; cursor: default; }

/* Loading: three dots pulsing in turn, sized to the headline they stand in for. */
.dots { display: inline-flex; gap: .2em; }
.dots i { width: .22em; height: .22em; border-radius: 50%; background: currentColor;
          animation: dot 1.2s ease-in-out infinite both; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .6; } }

h2 { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: 40px 0 4px; }
.sub { color: var(--muted); font-size: 13px; margin: 0 0 12px; }