style.css

/* Namaran — one stylesheet, shared by every page. No build step touches this file. */

/* ---------- the plan ----------

   Three typefaces, three jobs, and nothing crosses over:
     serif   prose you read slowly — lede, question, answer
     sans    labels that name a thing — exercise types, footer
     mono    data — dates, file names, language versions, code

   One fixed palette, not a light/dark pair. The page is warm paper; the
   machine's voice — code frames and the footer — is a cool dark slab. There is
   no switch and no client JS to run one (`script-src 'none'`).

   Vertical space comes from one scale, and each step means one thing:
     0.5rem   inside a unit      label to the thing it labels
     1rem     between siblings   paragraph to paragraph
     2rem     between blocks     code frame to question
     3.5rem   between sections   nav row to the drill, question to answer
     6rem     between movements  masthead to content, content to footer
   A gap that is not on this list is a mistake, not a nuance.

   The gap is always owned by the element below it. Flex and grid containers do
   not collapse margins, so two elements that both claim the space between them
   would silently add up; only one of them is allowed to claim it.

   Horizontal structure is two rules and one column. A 2px rule closes the
   masthead; hairlines mark every section head and run to the right edge of the
   measure. Everything else hangs off the left edge of that column.
*/

:root {
  /* the page: warm paper */
  --bg: #fdfaf4;
  --panel: #f3ecde;
  --ink: #1d1a15;
  --ink-muted: #6b6455;
  --rule: #e3dac9;
  --accent: #c2611a;
  --accent-strong: #9a4a12;
  /* DEBUG answers: the Wrong and Right stamps. Both >= 6:1 on --bg. */
  --wrong: #a2302a;
  --right: #2e6b3a;

  /* the slab: cool dark — code frames and the footer */
  --slab: #141a23;
  --slab-bar: #1e2531;
  --slab-ink: #c9d4e2;
  --slab-muted: #9aa7b8;
  --slab-rule: #29323f;
  --slab-accent: #7fb2e8;

  /* syntax: token classes written by script/highlight.sh. Warm keywords
     against the cool slab echo the page; every colour is >= 5:1 on --slab. */
  --syn-kw: #f29e5c;
  --syn-ty: #6fcfc0;
  --syn-fn: #82aaff;
  --syn-st: #a5d47f;
  --syn-nu: #f2c46d;
  --syn-cm: #7d8ba0;
  --syn-pp: #e889b5;

  /* the window title bar: its height, and the three lights drawn into it.
     Each light is a 0.75rem-wide tile as tall as the bar with a circle
     centred in it, so one layer list serves any element whose bar starts at
     its top edge. */
  --bar: 2.25rem;
  --window-lights:
    radial-gradient(circle 0.36rem, #ed6a5e calc(100% - 1px), transparent) 1rem 0 / 0.75rem var(--bar) no-repeat,
    radial-gradient(circle 0.36rem, #f5bf4f calc(100% - 1px), transparent) 2.25rem 0 / 0.75rem var(--bar) no-repeat,
    radial-gradient(circle 0.36rem, #61c554 calc(100% - 1px), transparent) 3.5rem 0 / 0.75rem var(--bar) no-repeat;

  /* the space scale — see the plan above */
  --s-unit: 0.5rem;
  --s-sibling: 1rem;
  --s-block: 2rem;
  --s-section: 3.5rem;
  --s-major: 6rem;

  /* Latin first, then the Japanese face that matches it. Without the second
     half the browser picks its own default for kana and the paragraph ends up
     half serif, half gothic. */
  --font-body: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
    "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  color-scheme: light;
}

/* ---------- reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2 {
  margin: 0;
  padding: 0;
}

p {
  margin: 0 0 var(--s-sibling);
  padding: 0;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- base ---------- */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.85;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

/* ---------- containers ----------
   Both containers reserve the full viewport height so the footer band always
   lands at the bottom of short pages (404) instead of floating mid-screen. */

.wrap,
.page {
  --gutter: 2rem;
  min-height: 100vh;
  margin: 0 auto;
  padding: var(--s-major) var(--gutter) 0;
}

.wrap {
  max-width: 36rem;
  display: flex;
  flex-direction: column;
}

/* One direction, one owner: nothing at page level carries a bottom margin.
   On the home page the prose sits one level down, in a .copy per language. */
.wrap > p,
.copy > p {
  margin-bottom: 0;
}

.wrap > p + p,
.copy > p + p {
  margin-top: var(--s-sibling);
}

.lede + p {
  margin-top: var(--s-block);
}

.guide + p {
  margin-top: var(--s-section);
}

main > :last-child {
  margin-bottom: 0;
}

.wrap > footer {
  margin-top: auto;
}

/* ---------- page: the drill layout (main + margin column) ---------- */

.page {
  max-width: 58rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto auto;
  grid-template-areas:
    "header"
    "langnav"
    "typenav"
    "main"
    "past"
    "footer";
}

.page > header { grid-area: header; }
.page > .lang-nav { grid-area: langnav; }
.page > .type-nav { grid-area: typenav; }
.page > main { grid-area: main; min-width: 0; }
.page > .past { grid-area: past; margin-top: var(--s-section); }
.page > footer { grid-area: footer; }

.page > .lang-nav { margin-bottom: var(--s-unit); }
.page > .type-nav { margin-bottom: var(--s-section); }

@media (min-width: 52rem) {
  .page {
    grid-template-columns: minmax(0, 1fr) 9rem;
    grid-template-rows: auto auto 1fr auto;
    column-gap: 3.5rem;
    align-items: start;
    grid-template-areas:
      "header header"
      "nav    nav"
      "main   past"
      "footer footer";
  }

  /* Both navs share one row: languages left, exercise types right, sitting on
     a common baseline despite being different sizes and different faces. */
  .page > .lang-nav,
  .page > .type-nav {
    grid-area: nav;
    align-self: baseline;
    margin-bottom: var(--s-section);
  }

  .page > .lang-nav { justify-self: start; }
  .page > .type-nav { justify-self: end; }

  .page > .past {
    position: sticky;
    top: var(--s-block);
    margin-top: 0;
    padding-left: 1.25rem;
    border-left: 1px solid var(--rule);
  }

  .page:not(:has(.past)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
  }
}

/* ---------- masthead ----------
   Name and tagline share a baseline, pushed to opposite ends of one line, and
   a 2px rule closes the block — the only heavy rule on the page. */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-unit) 1.5rem;
  padding-bottom: 0.7rem;
  margin-bottom: var(--s-block);
  border-bottom: 2px solid var(--ink);
}

.masthead h1 {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
}

.masthead h1 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
  text-decoration-color: var(--accent);
}

.tagline {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  /* Tracked capitals carry a trailing space after the last letter. When the
     line is set flush right, pull it back or the edge reads as ragged. */
  margin-right: -0.18em;
}

/* ---------- section heads ----------
   A label, then a hairline that runs out to the edge of the column. Used for
   the date on a drill, "Archive", "Past", "Choose a drill" — every one of them
   is a stamp on the page rather than a title above it. */

h2 {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 var(--s-sibling);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

h2::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}

/* ---------- home (index.html) ---------- */

.lede {
  max-width: 30rem;
  font-size: 1.3125rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* The drill index reads as a table of contents: the language version holds a
   fixed column on the left, the three types hang off it. */
.guide {
  margin-top: var(--s-section);
}

.guide h2 {
  margin-bottom: var(--s-unit);
}

.guide p {
  margin: 0;
  /* Uneven because the links inside carry an underline slot below the
     baseline; this is what makes the rows optically evenly split. */
  padding: 0.75rem 0 0.45rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.guide p:last-of-type {
  border-bottom: 1px solid var(--rule);
}

.guide strong {
  display: inline-block;
  min-width: 8rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* ---------- language switch (home only) ----------
   English and Japanese are both in the page; two radio buttons decide which
   one shows. The buttons sit ahead of everything they steer, as siblings, so
   `:checked ~` reaches the switch, the copy and the footer without any
   script. English is `checked` in the markup, so it is what loads. The
   buttons themselves are hidden but still take focus and arrow keys; the
   labels are what the reader sees and clicks. */

.lang-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#lang-en:checked ~ .copy[lang="ja"],
#lang-en:checked ~ footer > [lang="ja"],
#lang-ja:checked ~ .copy[lang="en"],
#lang-ja:checked ~ footer > [lang="en"] {
  display: none;
}

/* It belongs to the masthead, so it hangs just under the rule — the label
   step, not the block step. */
.masthead:has(+ .lang-switch) {
  margin-bottom: var(--s-unit);
}

.lang-switch {
  display: flex;
  align-self: flex-end;
  gap: 1.25rem;
  margin-right: -0.14em; /* see .tagline */
  margin-bottom: var(--s-block);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lang-switch label {
  display: inline-block;
  padding-bottom: 0.25rem;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.lang-switch label:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

#lang-en:checked ~ .lang-switch label[for="lang-en"],
#lang-ja:checked ~ .lang-switch label[for="lang-ja"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

#lang-en:focus-visible ~ .lang-switch label[for="lang-en"],
#lang-ja:focus-visible ~ .lang-switch label[for="lang-ja"] {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---------- navigation ----------
   Two rows of identical links read as one undifferentiated list, so the two
   navs are told apart by face, not by position alone: language versions are
   data (mono), exercise types are labels (tracked sans). Face alone still left
   the type links looking like plain text, so they are also drawn as badges —
   the one control on the page that looks pressable. */

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1.25rem;
}

.lang-nav {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.type-nav,
.guide a {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

nav a,
.guide a {
  display: inline-block;
  padding-bottom: 0.25rem;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
}

nav a:hover,
.guide a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

nav a.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* Exercise types: pill badges. The border replaces the underline, so every
   state sets all four sides. Tracked capitals carry a trailing space after the
   last letter (see .tagline); the extra left padding re-centres the word. */
.type-nav {
  gap: var(--s-unit);
}

.type-nav a {
  padding: 0.4em 0.9em 0.4em calc(0.9em + 0.14em);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--panel);
  line-height: 1;
}

.type-nav a:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
}

.type-nav a.active {
  color: var(--bg);
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

/* ---------- code: windows ----------
   Every listing is a small window lying on the paper: a title bar with the
   three lights, the file name centred in it, the code below. Listings with no
   file name (the ones inside answers) get the same bar, empty, so both kinds
   read as one object. The bar is painted with backgrounds rather than extra
   elements — the markup belongs to published pages and stays as it is. */

.code-frame,
pre.code {
  border-radius: 10px;
  background-color: var(--slab);
  color: var(--slab-ink);
  color-scheme: dark;
  /* rgb(20 26 35) is --slab: a tight edge, then a soft shadow on the paper */
  box-shadow:
    0 0 0 1px rgb(20 26 35 / 0.9),
    0 1px 2px rgb(20 26 35 / 0.16),
    0 14px 30px -16px rgb(20 26 35 / 0.55);
}

.code-frame {
  margin: 0 0 var(--s-block);
  overflow: hidden;
}

/* The title bar. Symmetric side padding keeps the name centred on the window,
   not on the space right of the lights. */
.code-filename {
  margin: 0;
  padding: 0 4.75rem;
  line-height: var(--bar);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--slab-muted);
  background: var(--window-lights), var(--slab-bar);
  border-bottom: 1px solid var(--slab-rule);
}

/* A bare listing draws its own bar and hairline. Backgrounds of a scroll
   container stay put while its content scrolls, so the bar does not slide
   away with long lines. */
pre.code {
  margin: 0 0 var(--s-block);
  padding: calc(var(--bar) + 1px + 1.2rem) 1.5rem 1.35rem;
  background:
    var(--window-lights),
    linear-gradient(var(--slab-rule), var(--slab-rule)) 0 var(--bar) / 100% 1px no-repeat,
    linear-gradient(var(--slab-bar), var(--slab-bar)) 0 0 / 100% var(--bar) no-repeat,
    var(--slab);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--slab-rule) transparent;
}

.code-frame pre.code {
  margin: 0;
  padding: 1.2rem 1.5rem 1.35rem;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

pre.code code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre;
  tab-size: 4;
}

pre.code ::selection {
  background: var(--slab-accent);
  color: var(--slab);
}

/* ---------- syntax ---------- */

pre.code .kw,
pre.code .op { color: var(--syn-kw); }
pre.code .ty { color: var(--syn-ty); }
pre.code .lt { color: var(--syn-ty); font-style: italic; }
pre.code .fn { color: var(--syn-fn); }
pre.code .st { color: var(--syn-st); }
pre.code .nu { color: var(--syn-nu); }
pre.code .cm { color: var(--syn-cm); font-style: italic; }
pre.code .pp,
pre.code .mc { color: var(--syn-pp); }

/* ---------- the question ----------
   The one thing on the page the reader has to sit with, so it gets the widest
   leading and the most air under it. */

.question {
  margin: 0 0 var(--s-section);
  font-size: 1.1875rem;
  line-height: 1.95;
  text-wrap: pretty;
}

/* ---------- WRITE examples ----------
   Each example is one row: input on the left, its output on the right, so
   pair n reads across and never has to be matched by eye. They are data, so
   mono on the paper panel — not the slab, which means "code to compile". The
   examples take over the question's section step; the question keeps a block
   step above them. */

.question:has(+ .examples) {
  margin-bottom: var(--s-block);
}

.examples {
  display: grid;
  gap: var(--s-sibling);
  margin: 0 0 var(--s-section);
}

.example {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  column-gap: var(--s-sibling);
}

.example-label {
  margin: 0 0 var(--s-unit);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}

pre.io {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--panel);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* Too narrow for two columns: input above its output, then the next pair. */
@media (max-width: 39.99rem) {
  .example {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  pre.io + .example-label {
    margin-top: var(--s-sibling);
  }
}

/* ---------- answer ---------- */

/* One rule, not two: the summary draws its own hairline, so the details box
   adds none. The question's section step is the whole gap above it. */
details.answer summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

details.answer summary::-webkit-details-marker {
  display: none;
}

/* One glyph that turns, not two that swap: swapping ▸ for ▾ shifts every
   letter after it by the difference in the two glyphs' widths. */
details.answer summary::before {
  content: "\25b8";
  flex: none;
  font-size: 0.7em;
  color: var(--accent);
}

details.answer[open] summary::before {
  transform: rotate(90deg);
}

details.answer summary::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}

/* Indented to start where the word ANSWER starts, so the answer reads as
   something said underneath the label rather than a new section. Like the
   question, it runs to the right edge of the code frame above it: one column,
   one right edge. */
.answer-body {
  margin-top: var(--s-block);
  padding-left: 1.55rem;
  border-left: 1px solid var(--rule);
  line-height: 1.95;
}

.answer-body pre.code {
  margin-top: var(--s-sibling);
}

/* A DEBUG answer's two stamps, Wrong and Right, each over the listing it
   names. Styled like the ANSWER label, in red and green. Right opens a new
   block; Wrong is the first thing in the answer and needs no gap. */
.answer-body h3 {
  margin: var(--s-block) 0 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.answer-body > h3:first-child {
  margin-top: 0;
}

.answer-body h3.wrong { color: var(--wrong); }
.answer-body h3.right { color: var(--right); }

/* The rule on the left ends with the answer, not a margin after it. */
.answer-body > :last-child {
  margin-bottom: 0;
}

/* Only inline code, in the question as well as the answer: WRITE questions
   before .examples carried theirs as `input -> output` pairs. A listing's
   <code> sits inside <pre> and must stay on the slab, where the chip is
   unreadable. */
.question code,
.answer-body :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--panel);
  padding: 0.12em 0.34em;
  border-radius: 3px;
}

/* ---------- footnotes ----------
   A side note that would stall the explanation — history, the standard's
   exact wording, one implementation's quirk — goes under the answer as a
   numbered note. check-patch.sh allows no `id`, so there are no jump links:
   the reference is a bare <sup class="fn-ref"> number, and the <ol> below
   counts the same way.

   Without a link, the reader matches a reference to its note by eye, so both
   numbers are the same small filled chip, in the fill the active type badge
   uses — a plain raised digit was lost in the text. A raised number would
   open up the leading of its line, so it is lifted by position, not by
   vertical-align. The notes themselves are prose, one step smaller and muted,
   on the panel: the answer's tail, quieter than the answer itself. */

.question sup,
.question sub,
.answer-body sup,
.answer-body sub {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

.question sup,
.answer-body sup {
  top: -0.5em;
}

.question sub,
.answer-body sub {
  bottom: -0.25em;
}

.answer-body .fn-ref,
.answer-body .footnotes > li::before {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--bg);
  background: var(--accent-strong);
  border-radius: 999px;
}

.answer-body .fn-ref {
  top: -0.6em;
  margin-left: 0.15em;
  padding: 0 0.42em;
  font-size: 0.68em;
}

.answer-body .footnotes {
  margin: var(--s-block) 0 0;
  padding: var(--s-sibling) 1.25rem var(--s-sibling) 3rem;
  border-radius: 8px;
  background: var(--panel);
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--ink-muted);
}

/* A stamp, like the other labels on the page. It starts at the box's own
   side padding, where the number chips start. */
.answer-body .footnotes::before {
  content: "Notes";
  display: block;
  margin: 0 0 var(--s-unit) -1.75rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* The notes are one block; inside it they sit at the unit step. */
.answer-body .footnotes > li {
  position: relative;
}

.answer-body .footnotes > li + li {
  margin-top: var(--s-unit);
}

/* The note's number hangs in the left padding, level with its first line. */
.answer-body .footnotes > li::before {
  content: counter(list-item);
  position: absolute;
  top: 0.3em;
  right: calc(100% + 0.6rem);
  padding: 0 0.45em;
  font-size: 0.6875rem;
  line-height: 1.7;
}

/* The code chip is --panel, which would vanish on the panel here. */
.answer-body .footnotes code {
  background: var(--bg);
}

/* ---------- past: the date column ---------- */

.past {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 2;
}

.past h2 {
  margin-bottom: var(--s-unit);
}

.past-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.past-list a {
  color: var(--ink-muted);
}

.past-list a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* Stacked under the drill on a narrow screen, the pane is a footnote: its
   links run in one row, like the navs at the top, not four lines each. */
@media (max-width: 51.99rem) {
  .past .past-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
  }
}

/* The same list is the whole body of an archive page, where one thin column of
   dates would run off the bottom of the screen. Let it fill the measure. */
main > .past-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.4rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 2;
}

/* ---------- the topic index ----------
   An archive line, and every line on topics.html, carries what the drill was
   about (script/topics.sh writes them). A date is 10 characters and tiles into
   columns; a topic is a sentence and does not, so a list that has topics in it
   becomes one line per drill: mono date, then prose. The drill page itself
   never shows this — naming the concept there would answer half the question
   (doc/basic-design.md §7.3). */

main > .past-list:has(.past-topic) {
  grid-template-columns: 1fr;
  gap: 0.6rem 1.5rem;
  line-height: 1.6;
}

main > .past-list:has(.past-topic) > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.9rem;
}

.past-topic {
  flex: 1 1 20rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}

/* Other wordings of the same subject — the words someone would actually type
   into a search box. They sit behind the topic, not beside it. */
.past-concepts {
  flex: 1 1 100%;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* An archive line is a date and a short heading, so two fit across a wide
   screen. A tag page's lines carry the search wordings as well and do not. */
main > .past-list:has(.past-topic):not(:has(.past-concepts)) {
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
}

/* The tag list on /topics is the date grid again, in the reading face: these
   are Japanese names, not ten fixed characters of date. */
.tag-list {
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.8;
}

.tag-list a {
  color: var(--ink);
}

/* How many drills carry that tag. It is information, not decoration, but it
   is never the reason someone is on this page. */
.tag-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-muted);
}

/* ---------- difficulty: four animals ----------
   Hedgehog, peacock, bison, whale — easiest to hardest (doc/requirements.md
   §7). Each is a silhouette in /level/ used as a mask, so the animal is inked
   in the colour of the text around it, like a glyph, and stays one colour on
   a page that allows one accent.

   A drill page says nothing but <main data-level="…">: the animal is drawn
   here, at the far end of the date's hairline, so no published page carries
   markup for it. The index pages spell it out as <span class="level"> with
   an accessible name, because they list many drills at once
   (script/topics.sh). The feet sit on the baseline: an empty inline box's
   baseline is its bottom edge. */

[data-level="hedgehog"] { --level-mark: url(/level/hedgehog.svg); }
[data-level="peacock"] { --level-mark: url(/level/peacock.svg); }
[data-level="bison"] { --level-mark: url(/level/bison.svg); }
[data-level="whale"] { --level-mark: url(/level/whale.svg); }

.level,
main[data-level] > h2::before {
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--level-mark) center bottom / contain no-repeat;
  mask: var(--level-mark) center bottom / contain no-repeat;
}

.level {
  display: inline-block;
  width: 1.5rem;
  height: 1rem;
  color: var(--ink-muted);
}

/* Last in the row, after the hairline. The second `content` carries the
   name for screen readers; a browser that can't parse it keeps the first. */
main[data-level] > h2::before {
  content: "";
  order: 1;
  width: 2.25rem;
  height: 1.5rem;
}

main[data-level="hedgehog"] > h2::before { content: "" / "ハリネズミ（基礎）"; }
main[data-level="peacock"] > h2::before { content: "" / "孔雀（初級）"; }
main[data-level="bison"] > h2::before { content: "" / "バイソン（中級）"; }
main[data-level="whale"] > h2::before { content: "" / "クジラ（上級）"; }

/* The key on the home page. It must not read as more links: the drill index
   right above it is a column of rows you click, so this is set as a small
   centred table on a panel, the way a legend sits under a figure. Nothing in
   it is a link and nothing reacts to the pointer. */
.level-key {
  margin: var(--s-section) auto 0;
  border-collapse: separate;
  border-spacing: 0;
  padding: var(--s-sibling) var(--s-unit);
  background: var(--panel);
  border-radius: 8px;
  font-family: var(--font-ui);
  text-align: center;
}

.level-key caption {
  padding-bottom: var(--s-unit);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.level-key th,
.level-key td {
  padding: 0 0.9rem;
}

.level-key th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

.level-key th .level {
  display: block;
  width: 2.25rem;
  height: 1.5rem;
  margin: 0 auto var(--s-unit);
}

.level-key td {
  font-size: 0.75rem;
  color: var(--ink-muted);
}

/* The way onward after an index list ("ほかの難易度を見る", "Browse by
   topic") is a new block, not the list's last line. */
main > .past-list + p {
  margin-top: var(--s-block);
}

/* On an index page the lede explains the list; the list itself is the next
   block, not the next paragraph. */
main > .lede + .past-list {
  margin-top: var(--s-block);
}

/* ---------- a level page: one compact row per drill ----------
   A difficulty gathers drills from every language, type and day, so its page
   is for scanning, not reading: a table per month, jump links to the months
   at the top, the date once per day, and the topic as the only link. */

.month-nav {
  margin-top: var(--s-block);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

main > h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: var(--s-section) 0 var(--s-unit);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* The month links are the page's own contents, so the first month follows
   them at the block step, not a full section away. */
.month-nav + h3 {
  margin-top: var(--s-block);
}

/* Fixed columns, so every month's table lines up with the one above it. */
.drill-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.drill-table th {
  padding: 0 1.25rem var(--s-unit) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--ink-muted);
}

.drill-table td {
  padding: 0.2rem 1.25rem 0.2rem 0;
  vertical-align: baseline;
}

/* A hairline opens each day; the drills of one day sit together under it. */
.drill-table tr.day-start td {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-unit);
}

.drill-table tr:last-child td {
  padding-bottom: var(--s-unit);
}

.drill-date,
.drill-lang,
.drill-type {
  white-space: nowrap;
  font-family: var(--font-mono);
  color: var(--ink-muted);
}

.drill-date {
  vertical-align: top;
}

.drill-table th:nth-child(1) { width: 4.5rem; }
.drill-table th:nth-child(2) { width: 6.5rem; }
.drill-table th:nth-child(3) { width: 5rem; }

.drill-topic {
  padding-right: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.drill-topic a:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--accent);
}

main > .drill-table + p {
  margin-top: var(--s-block);
}

/* /levels: the tag grid, with the animal in front of its name. */
.level-list .level {
  margin-right: 0.6rem;
}

/* ---------- footer ----------
   A band, not a card: it runs to both edges of the viewport and pins to the
   bottom. The transparent top border is the 6rem gap above it — an outer
   margin would be eaten by `margin-top: auto` on short pages.

   The box itself stays inside the container so its text lines up with the
   column; the slab past the container edge is a spread shadow, which paints
   but never adds scroll width (100vw would, by the scrollbar's width). The
   clip cuts the shadow off above the padding box, where the gap is. */

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-unit) var(--s-block);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--s-block) var(--gutter) var(--s-section);
  border-top: var(--s-major) solid transparent;
  background: var(--slab);
  background-clip: padding-box;
  box-shadow: 0 0 0 100vmax var(--slab);
  clip-path: inset(var(--s-major) -100vmax 0);
  color: var(--slab-muted);
  color-scheme: dark;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.7;
}

footer p {
  margin: 0;
}

footer a {
  color: var(--slab-accent);
}

footer a:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* ---------- narrow screens ----------
   Tighter gutters. Code stays a window — running it edge to edge would cut
   off the frame that makes it one — and wins its columns back from padding. */

@media (max-width: 39.99rem) {
  .wrap,
  .page {
    --gutter: 1.25rem;
    --s-major: 3.5rem;
    --s-section: 2.5rem;
    padding-top: 3rem;
  }

  pre.code,
  .code-frame pre.code {
    padding-inline: 1rem;
  }

  .masthead {
    gap: 0.35rem;
  }

  /* A level table folds each row into two lines: language and type, then the
     topic under them. The day's date heads its group; the column heads stay
     for screen readers only. */
  .drill-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .drill-table,
  .drill-table tbody {
    display: block;
  }

  .drill-table tr {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.75rem;
    padding: 0.35rem 0;
  }

  .drill-table tr.day-start {
    margin-top: var(--s-unit);
    border-top: 1px solid var(--rule);
    padding-top: var(--s-unit);
  }

  .drill-table td,
  .drill-table tr.day-start td,
  .drill-table tr:last-child td {
    padding: 0;
    border: 0;
  }

  .drill-date,
  .drill-topic {
    flex-basis: 100%;
  }

  /* The version column only needs its longest label ("Haskell 2010"), or
     the last row's DEBUG wraps onto a line of its own. */
  .guide strong {
    min-width: 6.75rem;
  }

  /* Four equal columns across the measure; the cells give up their padding
     before the table would push the page sideways. */
  .level-key {
    width: 100%;
    table-layout: fixed;
  }

  .level-key th,
  .level-key td {
    padding: 0 0.2rem;
  }
}

/* ---------- focus ---------- */

a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

footer a:focus-visible {
  outline-color: var(--slab-accent);
}