/* The site's look: Paper when the device is in light mode, Night when it is in dark mode. Every page loads this
   after global.css; the one-page readers load reader.css after it. The token blocks come first, then global.css's
   remaining names mapped onto them, the page layout (body.page, the top bar, the column) and the footer. */

:root {
  color-scheme: dark;

  /* Night: the site's own tokens */
  --bg: #060606;
  --ink: #f4efe5;
  --ink2: #e2dccf;
  --muted: #9b958a;
  --rule: rgba(244, 239, 229, 0.14);
  --well: rgba(255, 255, 255, 0.045);
  --accent: #d6b36a;
  --scrim: rgba(0, 0, 0, 0.62);

  /* The figures' two category tints (figures.css: the grid's "open-stack window" and "exit narrowing" cells; --well is
     the third, "neither yet"). In each theme the three differ pairwise by ΔE2000 10 or more and by L* 5 or more, so
     they read apart in grey too, and the cells' words (--ink, --ink2) reach 4.5:1 on each (tests/figures.test.ts).
     Here: open L* 19.3, narrowing 12.0, well 5.1; ΔE2000 13.2 to 14.7; --ink2 9.85:1 or more. */
  --fig-open: color-mix(in srgb, var(--accent) 23%, var(--bg));
  --fig-narrow: color-mix(in srgb, #a4482f 28%, var(--bg));
  /* The figures' one warm colour (print's "warm"): the architecture map's triad, its outlines and links. A shape colour,
     3:1 or more on --bg and --well and apart from --accent by ΔE2000 15 or more (tests/figures.test.ts). Here print's
     own: 5.98:1 on --bg, 5.56:1 on --well. */
  --fig-warm: #dd6b20;

  /* global.css's names, so its element rules (links, code, maths) follow the palette */
  --text: var(--ink);
  --line: var(--rule);
  --gold: var(--accent);
  --surface: var(--well);
  --faint: var(--muted);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --bar-h: 44px;
  --gutter: 22px;
  --col: 640px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    /* Paper. The accent is the gold darkened to 5.0:1 on the ground and 4.55:1 on the wells. */
    --bg: #f6f1e7;
    --ink: #1f1a14;
    --ink2: #2e2820;
    --muted: #6f665a;
    --rule: rgba(31, 26, 20, 0.16);
    --well: #eee6d6;
    --accent: #826224;
    --scrim: rgba(31, 26, 20, 0.4);

    /* the figures' category tints, held to Night's rule. The mockup's 18% and 14% barely differ from each other or
       from --well (ΔE2000 3.5 to 5.8), so they are deepened: open L* 74.3, narrowing 80.9, well 91.5; ΔE2000 11.7 to
       13.1; --ink2 7.23:1 or more. Words on them are --ink or --ink2: --muted and --accent fall under 4.5:1 here. */
    --fig-open: color-mix(in srgb, var(--accent) 42%, var(--bg));
    --fig-narrow: color-mix(in srgb, #a4482f 27%, var(--bg));
    /* the warm colour, deepened from print's #dd6b20 (3.01:1 here) to 4.06:1 on --bg and 3.68:1 on --well */
    --fig-warm: #c05621;
  }
}

/* global.css's other names, so its rules (cards, buttons, wells) follow the palette */
:root {
  --bg-soft: var(--bg);
  --surface-strong: color-mix(in srgb, var(--ink) 8%, transparent);
  --fg: var(--ink);
  --hairline: var(--rule);
  --card: var(--well);
  --border: var(--rule);
}

/* Scrolling to a target or a focused control keeps it clear of the sticky bar, on the readers and on every other page.
   Jumps are instant, over global.css's smooth: the browser's own jump to a deep link's fragment on a first visit must
   land at once, so it can hold the target in place while late fonts reflow the text above. A smooth jump runs on to
   where the target was when it began, and lands hundreds or thousands of pixels off. The browser holds the target only
   if no box around it changes its width or height rules as the fonts arrive; global.css's --content is in em, not ch,
   for that reason.
   The readers' Contents sheet's and rail's links glide in script (reader.ts). */
html {
  scroll-behavior: auto;
  scroll-padding-top: var(--bar-h);
}

/* a control scrolled to the edge of the screen or of a table's box stops far enough in to show its whole ring */
:is(a, button, [tabindex]) { scroll-margin: 8px; }

/* and a jump to any id stops a little below it, inside the screen region where the browser picks what to hold */
[id] { scroll-margin-top: 16px; }

body.page {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.page::before { content: none; }

body.page :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Top bar: the way home and the page's name, as the readers' bar has them ── */

.page-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: var(--bar-h);
  padding: 0 var(--gutter) 2px;
  background: var(--bg);
  font: 500 13px/1 var(--serif);
  color: var(--muted);
  white-space: nowrap;
}

/* only the page's name gives way on a narrow screen, so the home link's focus ring is never clipped */
.page-bar-title {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  min-width: 0;
  margin: 0;
}

.page-bar-title a {
  flex: none;
  margin: 0 -6px;
  padding: 12px 6px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.page-bar-title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-bar :focus-visible { outline-offset: -3px; }

/* ── Column ─────────────────────────────────────── */

.page-main {
  width: min(100% - 2 * var(--gutter), var(--col));
  margin-inline: auto;
  padding-block: 20px 8px;
}

/* The column already sets the gutter, so a .container inside it adds none of its own. */
.page-main .container { width: auto; }

/* ── Footer: one line where it fits, wrapping on a phone ── */

.site-footer {
  width: min(100% - 2 * var(--gutter), var(--col));
  margin: 40px auto 0;
  padding: 6px 0 24px;
  border-top: 1px solid var(--rule);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 20px;
  font: 500 13px/1 var(--serif);
}

.site-footer a {
  padding: 14px 0;
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible { color: var(--accent); }