/* statac.dev, design A ("Plain & Honest").
   A dark band for the header; then contents | article | on this page,
   stacking on a phone. The home page is laid out by its own section ids. */

/* Recursive, by the Recursive Project Authors, under the SIL Open Font
   License: fonts/OFL.txt. Taken from @fontsource-variable/recursive 5.3.0,
   with the slant and cursive axes fixed (slnt=0, CRSV=0.5) to halve the
   files, using fontTools:
   fonttools varLib.instancer recursive-latin-full-normal.woff2 slnt=0 CRSV=0.5
   It keeps weight, CASL (casual, for headings) and MONO (for code). */
@font-face {
  font-family: "Recursive";
  font-style: normal;
  font-weight: 300 1000;
  font-display: swap;
  src: url("fonts/recursive-latin.9d676ffe.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Recursive";
  font-style: normal;
  font-weight: 300 1000;
  font-display: swap;
  src: url("fonts/recursive-latin-ext.dfe878ee.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* The home page's hand-written note and a callout's label: the same
   font's slanted, cursive cut, Basic Latin only, made from the full file:
   fonttools varLib.instancer recursive-latin-full-normal.woff2 slnt=-15 CRSV=1 CASL=1 MONO=0 wght=400:800
   pyftsubset <that file> --unicodes="U+0020-007E,U+2018,U+2019" --flavor=woff2 */
@font-face {
  font-family: "Recursive Note";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/recursive-note.2ffc4387.woff2") format("woff2");
}

:root {
  --bg: #fbfbf8;
  --surface: #f2f1eb;
  --line: #e1e0d7;
  --fg: #23252d;
  --muted: #4a4d57;
  --faint: #5d606b;
  --band: #1c1e26;
  --band-fg: #ecebe4;
  --band-muted: #b9b7ae;
  --band-line: #3a3e4a;
  --accent: #F76C14;
  --accent-soft: rgba(247, 108, 20, 0.4);
  --on-accent: #1c1e26;
  --code-bg: #efeee7;
  --callout-bg: #fff1e6;
  --callout-line: #f3c6a5;
  --terminal: #13151b;
  --terminal-line: #353844;
  --terminal-fg: #e6e4da;
  --font: "Recursive", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Recursive", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171d;
    --surface: #1d2028;
    --line: #2e323c;
    --fg: #e8e6de;
    --muted: #bdbbb2;
    --faint: #9fa2ad;
    --band: #0e1014;
    --band-muted: #a9a79e;
    --accent-soft: #a8420a;
    --code-bg: #252831;
    --callout-bg: #2a1e15;
    --callout-line: #6e3c1c;
    --terminal: #0b0c10;
    --terminal-line: #2e323c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15171d;
  --surface: #1d2028;
  --line: #2e323c;
  --fg: #e8e6de;
  --muted: #bdbbb2;
  --faint: #9fa2ad;
  --band: #0e1014;
  --band-muted: #a9a79e;
  --accent-soft: #a8420a;
  --code-bg: #252831;
  --callout-bg: #2a1e15;
  --callout-line: #6e3c1c;
  --terminal: #0b0c10;
  --terminal-line: #2e323c;
  color-scheme: dark;
}

/* The page */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 19px;
  line-height: 1.6;
}
img, video { max-width: 100%; height: auto; }
a { color: var(--fg); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; padding: 8px 14px; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.skip:focus { left: 16px; }

/* macOS thickens light text on a dark ground. These two thin it there,
   and do nothing on other systems. */
.top, .foot, pre.code.terminal, .home-hero, .home pre, .home #start + pre + p, .home #start + pre + p + p, :root[data-theme="dark"] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

/* Header band */
.top { background: var(--band); color: var(--band-fg); }
.top-inner { max-width: 1240px; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--band-fg); text-decoration: none; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; font-variation-settings: "CASL" 1; }
.brand img { display: block; width: 32px; height: 32px; }
.top-nav { display: flex; flex-wrap: wrap; gap: 0 4px; font-size: 17px; }
.top-link { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--band-fg); text-decoration: none; }
.top-link svg { flex: none; width: 0.8em; height: 0.8em; margin-left: 5px; fill: none; stroke: var(--band-muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.top-link:hover, .top-link[aria-current] { color: #ffffff; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 8px; }

/* Search: the box in the header */
.search { display: block; position: relative; flex: 0 1 280px; min-width: 200px; }
.search form { margin: 0; }
.search input { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--band-line); border-radius: 5px; background: #262934; color: var(--band-fg); font: inherit; font-size: 16px; }
.search input::placeholder { color: #a9a79e; }
.search-results { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(440px, calc(100vw - 32px)); margin: 0; padding: 6px; list-style: none; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); }
.search-results[hidden] { display: none; }
.search-results a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 5px; color: var(--fg); text-decoration: none; }
.search-results a:hover, .search-results a:focus-visible { background: var(--surface); }
.search-title { font-size: 16px; font-weight: 700; }
.search-summary { font-size: 14px; color: var(--faint); }
.search-empty { padding: 8px 10px; font-size: 15px; color: var(--faint); }

/* Light or dark: one button beside the search box. Hidden until
   assets/theme.js runs, as it does nothing without it. It shows the look
   in force, and is ringed in the accent while that isn't the device's. */
.top-tools { display: flex; flex: 0 1 auto; align-items: center; gap: 12px; }
.theme { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--band-line); border-radius: 5px; background: #262934; color: var(--band-muted); cursor: pointer; }
.theme[hidden] { display: none; }
.theme:hover { color: var(--band-fg); }
.theme[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme[data-look="light"] .theme-dark, .theme[data-look="dark"] .theme-light { display: none; }
/* One row where there is room for it, the search box giving way first.
   Narrower, the name, the search box and the button share the first row
   and the links take the second. GitHub is in the footer too, so its
   link goes where the three won't fit. */
@media (min-width: 900px) {
  .top-inner { flex-wrap: nowrap; }
  .top-nav { flex: none; flex-wrap: nowrap; }
  .top-tools { flex: 0 1 332px; min-width: 0; }
  .top-tools .search { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 899.98px) {
  .top-inner { gap: 0 12px; padding-block: 8px 4px; }
  .top-tools { order: 1; flex: 1 1 0; min-width: 0; justify-content: flex-end; }
  .top-tools .search { flex: 1 1 auto; min-width: 0; max-width: 320px; }
  .top-nav { order: 2; flex: 1 1 100%; margin-inline: -10px; font-size: 16px; }
  .top-link { padding: 0 10px; }
}
@media (max-width: 479.98px) {
  .top-link[href^="https://github.com"] { display: none; }
}
@media (max-width: 359.98px) {
  .top-nav { font-size: 15px; }
  .top-link { padding: 0 8px; }
}

/* Contents | article | on this page */
.layout { flex: 1 0 auto; width: 100%; max-width: 1240px; margin: 0 auto; padding: 36px 24px 72px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 48px; }
.eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

.contents { flex: 1 1 220px; max-width: 250px; display: flex; flex-direction: column; gap: 24px; font-size: 16px; line-height: 1.4; }
.contents ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.contents a { display: block; padding: 4px 10px; margin-left: -10px; border-radius: 4px; color: var(--fg); text-decoration: none; }
.contents a:hover { background: var(--surface); }
.contents a[aria-current="page"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }

.on-page { flex: 1 1 170px; max-width: 210px; position: sticky; top: 16px; font-size: 15px; line-height: 1.4; }
.on-page ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.on-page a { color: var(--muted); text-decoration: none; }
.on-page a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); }

/* The article */
.article { flex: 999 1 560px; min-width: 0; max-width: 720px; }
.eyebrow-page { margin-bottom: 0; font-size: 15px; }
.article h1 { margin: 6px 0 14px; font-size: 48px; line-height: 1.1; font-weight: 820; letter-spacing: -0.015em; font-variation-settings: "CASL" 1; text-wrap: balance; }
.prose > p:first-child { font-size: 21px; color: var(--muted); text-wrap: pretty; }
.prose h2 { margin: 48px 0 14px; font-size: 27px; line-height: 1.2; font-weight: 750; font-variation-settings: "CASL" 1; text-wrap: balance; scroll-margin-top: 16px; }
.prose .step { color: var(--faint); }
.prose h3 { margin: 32px 0 10px; font-size: 21px; line-height: 1.3; font-weight: 750; scroll-margin-top: 16px; }
.prose h4 { margin: 24px 0 8px; font-size: 19px; line-height: 1.3; font-weight: 750; }
.prose p, .prose ul, .prose ol, .prose dl, .prose pre, .prose table, .prose figure, .prose blockquote, .prose .callout { margin: 14px 0 0; }
.prose p { text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li + li { margin-top: 6px; }
.prose li > ul, .prose li > ol { margin-top: 6px; }
.prose dt { margin-top: 16px; font-weight: 700; }
.prose dd { margin: 4px 0 0; padding-left: 20px; }
.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
.prose blockquote { padding-left: 18px; border-left: 3px solid var(--line); color: var(--muted); }

/* Code */
code { font-family: var(--mono); font-variation-settings: "MONO" 1; font-size: 0.84em; background: var(--code-bg); padding: 1px 5px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
pre { padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; overflow-x: auto; font-family: var(--mono); font-variation-settings: "MONO" 1; font-size: 16px; line-height: 1.7; }
pre code { background: none; padding: 0; font-size: inherit; border-radius: 0; }

/* snippets/markdown/code.html: a command with its prompt, never copied,
   and a message as the terminal draws it. */
pre.code.command { color: var(--fg); }
pre.command .line:not(:empty)::before { content: "$ "; color: #7a7d88; user-select: none; }
pre.code.terminal { background: var(--terminal); border-color: var(--terminal-line); color: var(--terminal-fg); }
pre.terminal .sev { margin: 0; padding: 0 6px; border-radius: 2px; font-size: inherit; }
pre.terminal .dim, .home pre.command .dim { color: #a9acb6; }
pre.command .dim { color: var(--faint); }
pre.terminal .caret { color: var(--accent); }
/* code.css, linked after this file, brings a background with each code
   style. Keep the design's own surface, as the starter's stylesheet does. */
pre.code { background: var(--surface); }
figure.code { background: none; }
figure.code { margin-inline: 0; }
figure.code figcaption { margin-bottom: 6px; font-family: var(--mono); font-variation-settings: "MONO" 1; font-size: 15px; color: var(--faint); }
figure.code pre { margin: 0; }

/* Callouts */
.callout { padding: 16px 20px; background: var(--callout-bg); border: 1px solid var(--callout-line); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }
.callout-title { font-family: "Recursive Note", var(--font); font-style: italic; font-weight: 700; }
.callout-body { flex: 1 1 300px; text-wrap: pretty; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.5; }
table code { overflow-wrap: anywhere; }
th, td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
/* `anywhere` lets a column shrink to one letter, so a name in the first
   column would break mid-word beside a long description. As a box of
   its own, a name stays on one line up to 20em and wraps beyond it. */
@media (min-width: 600px) {
  td:first-child code { display: inline-block; width: max-content; max-width: 20em; overflow-wrap: break-word; }
  th { white-space: nowrap; }
}
/* The line under a problem page's sample message. */
.prose #what-youll-see + pre + p { margin-top: 10px; font-size: 16px; color: var(--faint); }
/* A problem page's name, the command that explains it and the line
   that quietens it: a boxed table with its headings down the side. */
table.named { border: 1px solid var(--line); border-radius: 6px; border-collapse: separate; border-spacing: 0; }
.named th, .named td { padding: 12px 16px; }
.named th { width: 170px; font-size: 15px; letter-spacing: 0; text-transform: none; }
.named tr:last-child > * { border-bottom: 0; }
@media (max-width: 599.98px) {
  .named th, .named td { display: block; width: auto; }
  .named th { padding-bottom: 0; border-bottom: 0; }
  .named td { padding-top: 4px; }
}

/* Footnotes */
.footnotes { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.footnotes ol { padding-left: 24px; }

/* Previous, next, and the issue line */
.pager { margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.pager-link { flex: 0 1 320px; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--fg); }
.pager-link:hover { border-color: var(--accent); }
.pager-next { margin-left: auto; align-items: flex-end; text-align: right; }
.pager-dir { font-size: 15px; color: var(--faint); }
.pager-title { font-weight: 700; }
.issue { margin-top: 28px; font-size: 16px; color: var(--faint); }
.issue a { color: var(--faint); }

/* Problem pages: the kind's badge */
.sev-line { margin: 0 0 6px; font-size: 17px; color: var(--muted); }
.sev { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 3px; font-family: var(--mono); font-variation-settings: "MONO" 1; font-size: 14px; font-weight: 700; text-decoration: none; }
.sev-error { background: #c62828; color: #ffffff; }
.sev-warning { background: #f2c230; color: #111111; }
.sev-note { background: #48c2d0; color: #111111; }
a.sev:hover { text-decoration: underline; }
.article.problem-list { max-width: none; }
.problem-list .prose > p:first-child { max-width: 720px; }
.problem-list .prose h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.problem-list .prose h2 .sev { margin: 0; }
.problem-list .kinds { font-size: 16px; font-weight: 400; font-variation-settings: "CASL" 0; color: var(--faint); }
.problem-list .prose ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14em, 100%), 1fr)); gap: 0 24px; padding: 0; list-style: none; }
.problem-list .prose li { margin: 0; border-bottom: 1px solid var(--line); }
.problem-list .prose li a { display: block; padding: 5px 0; font-size: 17px; text-decoration: none; }
.problem-list .prose li a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

/* Footer band */
.foot { background: var(--band); color: var(--band-muted); font-size: 16px; }
.foot-inner { max-width: 1240px; margin: 0 auto; padding: 26px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
/* The home page is narrower than the rest: its header and footer keep to it. */
body:has(> main.home) :is(.top-inner, .foot-inner) { max-width: 1120px; }
.foot p { margin: 0; }
.foot a { color: var(--band-fg); }

/* The home page. templates/home.html writes the hero; the
   rest is content/index.md, placed here by each section's id:
   #start beside the hero with its last line under both, #wrong in two
   columns, #features as tiles. */
.home {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: [full-start] 16px [main-start gap-start mid] minmax(0, 1fr) [main-end] 16px [full-end];
  align-content: start;
}
.home > * { grid-column: main-start / main-end; min-width: 0; margin: 0; }
.home::before { content: ""; grid-column: full-start / full-end; grid-row: 1 / 6; background: var(--band); }
.home-hero { grid-row: 1; padding: 40px 0 8px; color: var(--band-fg); display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.home-hero h1 { margin: 0; font-size: clamp(40px, 6vw, 58px); line-height: 1.03; font-weight: 820; letter-spacing: -0.02em; font-variation-settings: "CASL" 1; text-wrap: balance; }
.hero-sub { margin: 0; max-width: 30em; font-size: 21px; line-height: 1.5; color: #c4c2b8; text-wrap: pretty; }
.hero-row { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hero-meta { font-size: 16px; color: var(--band-muted); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 4px; background: var(--accent); color: var(--on-accent); font-weight: 750; text-decoration: none; }
.btn:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--on-accent); }

.home #start { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* On a phone each command keeps to a line, 39 characters at 0.6em each,
   and what serve prints wraps. */
.home #start + pre { grid-row: 3; margin-top: 32px; white-space: pre-wrap; font-size: clamp(12px, calc((100vw - 68px) / 23.4), 14px); }
.home #start + pre + p { grid-row: 4; margin-top: 10px; display: flex; justify-content: flex-end; align-items: flex-end; gap: 6px; font-family: "Recursive Note", var(--font); font-style: italic; font-size: 20px; line-height: 1.3; color: #d4d2c8; }
.home #start + pre + p::before { content: ""; flex: none; width: 52px; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 40' fill='none' stroke='%23F76C14' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 34C36 33 18 28 11 9'/%3E%3Cpath d='M5 15l5-9 8 6'/%3E%3C/svg%3E") no-repeat; }
.home #start + pre + p + p { grid-row: 5; margin: 32px 0 40px; font-size: 16px; color: var(--band-muted); text-wrap: pretty; }
.home #start + pre + p + p a { color: var(--band-fg); }
.home pre, .home pre.code, .home pre.code.command { padding: 16px; background: var(--terminal); border: 1px solid var(--terminal-line); border-radius: 6px; color: var(--terminal-fg); font-size: 14px; line-height: 1.8; }

.home #wrong { margin-top: 72px; font-size: 34px; line-height: 1.15; font-weight: 800; font-variation-settings: "CASL" 1; text-wrap: balance; }
.home #wrong + pre { margin-top: 20px; font-size: 15px; }
.home #wrong + pre + p { margin-top: 16px; color: var(--muted); text-wrap: pretty; }

.home #features { margin-top: 88px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.home #features + ul { margin-top: 20px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 40px 56px; color: var(--muted); }
.home #features + ul li { margin: 0; text-wrap: pretty; }
.home #features + ul strong:first-child { font-size: 25px; line-height: 1.25; font-weight: 750; font-variation-settings: "CASL" 1; color: var(--fg); padding: 0 3px; background: linear-gradient(transparent 56%, var(--accent-soft) 56%, var(--accent-soft) 92%, transparent 92%); }
.home #features + ul strong:first-child::after { content: "\A"; white-space: pre; }

.home #also { margin-top: 72px; padding-top: 40px; border-top: 2px dashed var(--line); font-size: 27px; line-height: 1.3; font-weight: 700; font-variation-settings: "CASL" 1; }
.home #also + p { margin-top: 10px; max-width: 40em; text-wrap: pretty; }
.home #also + p + p { margin-top: 20px; }
.home #also + p + p a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 4px; background: var(--fg); color: var(--bg); font-weight: 700; text-decoration: none; }
.home #also + p + p a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home #licence { margin-top: 56px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.home #licence + p { margin: 6px 0 72px; max-width: 46em; font-size: 16px; color: var(--faint); }
.home #licence + p a { color: var(--faint); }

@media (min-width: 960px) {
  .home pre, .home pre.code, .home pre.code.command { padding: 22px 24px; font-size: 15.5px; }
  .home { grid-template-columns: [full-start] minmax(24px, 1fr) [main-start] minmax(0, 504px) [gap-start] 64px [mid] minmax(0, 504px) [main-end] minmax(24px, 1fr) [full-end]; grid-template-rows: 1fr auto auto 1fr; }
  .home::before { grid-row: 1 / 6; }
  .home-hero { grid-column: main-start / gap-start; grid-row: 1 / 5; align-self: center; padding: 64px 0; }
  /* Sized so that its longest line, 49 characters at 0.6em each, fits the
     column without scrolling. */
  .home #start + pre { grid-column: mid / main-end; grid-row: 2; margin-top: 0; white-space: pre; font-size: clamp(12px, calc((50vw - 106px) / 29.4), 15px); }
  .home #start + pre + p { grid-column: mid / main-end; grid-row: 3; }
  .home #start + pre + p + p { grid-row: 5; margin: 0 0 48px; }
  .home #also + p { grid-column: main-start / mid; }
  .home #also + p + p { grid-column: mid / main-end; justify-self: end; align-self: center; margin-top: 0; }
  .home #wrong { grid-column: main-start / gap-start; margin-top: 96px; align-self: end; }
  .home #wrong + pre { grid-column: mid / main-end; grid-row: span 2; margin-top: 96px; align-self: center; }
  .home #wrong + pre + p { grid-column: main-start / gap-start; align-self: start; }
}

@media (max-width: 860px) {
  .contents { order: 3; max-width: none; }
  .on-page { display: none; }
  .article h1 { font-size: 38px; }
  .layout, .top-inner, .foot-inner { padding-inline: 16px; }
}