/* The site's look: a folio. One reading column on green-grey paper, titles in IM Fell English, numbered leaves, thin rules.
   The same colours as the landing page (a test holds them equal). The fonts are the program's own, served from this site. */
@font-face { font-family: "IM Fell English"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/im-fell-english.woff2") format("woff2"); }
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/im-fell-english-italic.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/public-sans.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/public-sans-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("fonts/jetbrains-mono.woff2") format("woff2"); }

:root {
  color-scheme: dark light;
  --bg: #101713;
  --surface: #17201b;
  --surface-2: #1d3730;
  --border: #2b3a32;
  --fg: #e2e9e3;
  --muted: #98a99f;
  --accent: #7cc0ad;
  --accent-fg: #101713;
  --ochre: #d8a852;
  --ochre-soft: #33291a;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #edf0ea;
    --surface: #f8faf6;
    --surface-2: #dce9e2;
    --border: #cbd5cc;
    --fg: #1b2620;
    --muted: #56675d;
    --accent: #2c6b5e;
    --accent-fg: #ffffff;
    --ochre: #8f6218;
    --ochre-soft: #f1e6cf;
  }
}
html {
  --display: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 16px; line-height: 1.65; }
a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; text-wrap: balance; }
h1 em, h2 em { color: var(--accent); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)) 0 max(16px, env(safe-area-inset-right, 0px)); }

/* the bar at the top: the name in the book face, the pages beside it, and it stays while you read */
header.top {
  position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding: 12px 0 10px;
}
.brand { font-family: var(--display); font-size: 28px; line-height: 1; color: var(--fg); text-decoration: none; }
.brand:hover { color: var(--accent); }
nav.site { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14.5px; font-weight: 500; }
nav.site a { color: var(--fg); text-decoration: none; white-space: nowrap; }
@media (max-width: 620px) { header.top { position: static; } html { scroll-padding-top: 16px; } }
nav.site a:hover { color: var(--accent); }
nav.site a[aria-current] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* the guide and the manual */
h1 { font-size: clamp(38px, 6.5vw, 58px); letter-spacing: -0.01em; margin: 40px 0 14px; }
h2 { font-size: clamp(27px, 3.6vw, 34px); margin: 52px 0 12px; padding-top: 18px; border-top: 1px solid var(--border); }
h3 { font-size: 23px; margin: 30px 0 8px; }
.lead { font-size: 17.5px; color: var(--muted); max-width: 64ch; margin: 0 0 28px; }
.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 44px; align-items: start; }
.toc { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; font-size: 14px; padding: 4px 0; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a { display: block; padding: 4px 10px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--fg); border-left-color: var(--accent); background: var(--surface); }
.toc .group { margin: 16px 10px 4px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; gap: 8px; }
  .toc { position: static; max-height: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4px 0 12px; }
}
article { min-width: 0; max-width: 780px; }
article p, article li { max-width: 72ch; }
.shot { margin: 20px 0 10px; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(16, 23, 19, 0.18); }
.shot figcaption { color: var(--muted); font-size: 14px; margin-top: 8px; }
.note { background: var(--surface-2); border-radius: 6px; padding: 10px 14px; margin: 18px 0; font-size: 15px; }
.note p { margin: 0; }
.note strong:first-child { color: var(--fg); }

/* steps: big numerals in the book face, as the roadmap's order */
ol.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; max-width: 880px; }
.step { counter-increment: step; }
ol.steps > li.step { position: relative; padding: 22px 0 6px 64px; margin: 0; border-top: 1px solid var(--border); }
ol.steps > li.step:last-child { border-bottom: 1px solid var(--border); padding-bottom: 18px; }
ol.steps > li.step::before { content: counter(step); position: absolute; left: 0; top: 18px; font-family: var(--display); font-size: 44px; line-height: 1; color: var(--accent); }
@media (max-width: 620px) { ol.steps > li.step { padding-left: 44px; } ol.steps > li.step::before { font-size: 34px; } }

kbd { background: var(--surface); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; font-size: 0.86em; font-family: var(--mono); }
code { font-family: var(--mono); font-size: 0.86em; background: var(--surface-2); padding: 0.08em 0.38em; border-radius: 4px; overflow-wrap: anywhere; }
table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 14px 0; }
th, td { border-top: 1px solid var(--border); padding: 9px 10px; text-align: left; vertical-align: top; }
tr:last-child td { border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; }

/* questions: rows with thin rules, the question in the book face */
details { border-top: 1px solid var(--border); padding: 14px 0; margin: 0; }
details:last-of-type { border-bottom: 1px solid var(--border); }
summary { cursor: pointer; font-family: var(--display); font-size: 21px; line-height: 1.3; list-style: none; display: flex; gap: 14px; align-items: baseline; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; font-family: var(--mono); font-size: 16px; color: var(--accent); width: 14px; flex: none; }
details[open] summary::before { content: "\2212"; }
details p { margin: 10px 0 0 28px; color: var(--muted); max-width: 70ch; }

.button { display: inline-block; background: var(--accent); color: var(--accent-fg); font-weight: 600; text-decoration: none; padding: 11px 20px; border-radius: 6px; }
.button:hover { filter: brightness(1.08); }
.button.quiet { background: transparent; color: var(--fg); border: 1px solid var(--border); }
.button.quiet:hover { border-color: var(--accent); color: var(--accent); filter: none; }
footer { margin-top: 64px; padding: 24px 0 48px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
footer p { margin: 0 0 8px; max-width: 80ch; }