@charset "utf-8";
/* Assembled from two halves: a structural base (the sidebar shell, the drawer,
   the reading grid) followed by skin A, "Manual". The skin loads second so it
   can override the base.

   Five other skins were built and rejected — Ledger, Broadsheet, Blueprint,
   Almanac and Press. They are not deleted, only unpicked: both halves of all
   six, plus a README explaining how to swap them, are in commit cb70bbc.
   Switching skins also means updating `fonts:` in _config.yml.

   Colours here are measured, not eyeballed: body text 16.4:1, secondary text
   and navigation 7:1, nothing below the 4.5:1 AA requirement in either
   colour scheme. */
/* Structure only — the sidebar shell, the drawer, the reading grid.
   Colour, type and density live in the skin. */

/* Height of the pinned footer. Declared here so the layout script can read it
   rather than hard-coding a second copy of the number. */
:root { --bar: 2.75rem; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: var(--size, 1.0625rem);
  line-height: var(--leading, 1.62);
  -webkit-font-smoothing: antialiased;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 60;
  padding: .55rem .9rem; background: var(--accent); color: var(--bg);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--bg); }

/* ------------------------------------------------------------------ shell */

.shell {
  display: grid;
  grid-template-columns: var(--rail, 19rem) minmax(0, 1fr);
  min-height: 100vh;
  padding-bottom: var(--bar, 2.75rem);   /* clear the pinned footer */
}

.sidebar {
  grid-column: 1;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  margin-bottom: calc(-1 * var(--bar, 2.75rem));  /* cancel the shell's bar gutter */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--rail-pad, 2rem 1.5rem 3rem);
  background: var(--rail-bg, var(--bg));
  border-right: 1px solid var(--rule);
  scrollbar-width: thin;
}

main {
  grid-column: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0 clamp(2rem, 4vw, 4rem);
  padding: var(--main-pad, 3.5rem clamp(1.25rem, 3.5vw, 4rem) 5rem);
}

/* Wide screens get a third column rather than an empty right half. */
@media (min-width: 78rem) {
  main { grid-template-columns: minmax(0, 1fr) var(--toc, 15rem); }
  article { grid-column: 1; }
  .onpage { grid-column: 2; grid-row: 1; }
}

/* Prose holds a comfortable measure; lists, tables and figures take the
   whole column. Capping the ARTICLE is what leaves a wide screen empty. */
/* End-of-page breathing room. Pages with an on-this-page column have this
   replaced by a measured tail — enough for the last heading to reach the
   highlight line, never less than this. */
article { min-width: 0; padding-bottom: 28vh; }
article > p,
article > ul,
article > ol,
article > blockquote,
article > h1,
article > h2,
article > h3,
article > h4 { max-width: var(--measure, 42rem); }

/* No third column on this page? Then the prose takes some of that width back
   rather than leaving it empty. */
main:has(.onpage[hidden]) > article > p,
main:has(.onpage[hidden]) > article > ul,
main:has(.onpage[hidden]) > article > ol,
main:has(.onpage[hidden]) > article > blockquote,
main:has(.onpage[hidden]) > article > h1,
main:has(.onpage[hidden]) > article > h2,
main:has(.onpage[hidden]) > article > h3 { max-width: var(--measure-wide, 52rem); }

/* A clicked heading must not land under the sticky topbar, and wants some
   air above it. Matches the LINE constant the highlight uses. */
article > h2, article > h3 { scroll-margin-top: 5rem; }

/* --------------------------------------------------------- on this page */

.onpage { position: sticky; top: 3.5rem; align-self: start; max-height: calc(100vh - 6rem - var(--bar, 2.75rem)); overflow-y: auto; }
.onpage[hidden] { display: none; }
.onpage-head { font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 .7rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rule); }
.onpage ol { list-style: none; margin: 0; padding: 0; }
.onpage li { margin: 0 0 .1rem; }
.onpage a { display: block; padding: .3rem .5rem .3rem .65rem; font-size: .82rem; line-height: 1.35; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; }
.onpage a:hover { color: var(--fg); }
.onpage a.here { color: var(--accent); border-left-color: var(--accent); }
@media (max-width: 78rem) { .onpage { display: none; } }

/* ----------------------------------------------------------------- the rail */

.wordmark { text-decoration: none; color: inherit; display: block; }
.wordmark-rail { margin-bottom: 2rem; }
.rail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.rail-top .wordmark-rail { flex: 1 1 auto; }
.drawer-close { display: none; flex: 0 0 auto; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin: -.5rem -.5rem 0 0; cursor: pointer;
  color: var(--rail-name, var(--fg)); border-radius: 3px; }
.drawer-close svg { width: 1.35rem; height: 1.35rem; }
.drawer-close:hover { color: var(--rail-accent, var(--accent)); background: var(--rail-hover, rgba(128,128,128,.12)); }
.wordmark-title { display: flex; align-items: baseline; gap: .45em; font-family: var(--display); font-size: 1.02rem; font-weight: 600; letter-spacing: -.008em; line-height: 1.2; color: var(--rail-name, var(--fg)); }
.wordmark-title i { font-style: normal; font-size: .8em; }
.wordmark-name { display: block; margin-top: .2rem; font-family: var(--body); font-size: .8rem; font-weight: 400; line-height: 1.3; color: var(--rail-fg, var(--muted)); }
.wordmark-name strong { font-weight: 600; color: var(--rail-name, var(--fg)); }
.wordmark-rail:hover .wordmark-title { color: var(--rail-accent, var(--accent)); }
.rail-meta .mk { font-family: var(--mono); font-size: .78em; opacity: .6; }

.rail-group { margin-bottom: 1.75rem; }
.rail-head {
  display: flex;
  align-items: baseline;
  gap: .6em;
  margin: 0 0 .55rem;
}
.rail-head i { font-style: normal; opacity: .5; }

.rail-nav ul { list-style: none; margin: 0; padding: 0; }
.rail-nav li { margin: 0; }

.rail-nav a {
  display: grid;
  grid-template-columns: 1.1em 1fr;
  gap: .1em .35em;
  align-items: baseline;
  padding: var(--rail-item-pad, .3rem .5rem .3rem .25rem);
  color: var(--rail-fg, var(--muted));
  text-decoration: none;
  border-radius: 2px;
}
.rail-nav a:hover { color: var(--fg); background: var(--rail-hover, transparent); }
.rail-nav a[aria-current="page"] { color: var(--rail-accent, var(--accent)); font-weight: 600; }

.mk { display: inline-block; text-align: left; font-size: .85em; line-height: 1.4; }
.mk-original { color: var(--accent); }
.rail-nav .mk-original, .rail-head i, .wordmark-star { color: var(--rail-accent, var(--accent)); }
.mk-extends  { opacity: .55; }

/* --------------------------------------------------------- topbar + drawer */

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.topbar { display: none; }
.scrim { display: none; }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 2.5rem; height: 2.5rem;
  padding: .55rem;
  cursor: pointer;
}
.burger span {
  display: block; height: 1.5px; width: 100%;
  background: var(--fg);
  transition: transform .18s ease, opacity .18s ease;
}

@media (max-width: 60rem) {
  .shell { grid-template-columns: 1fr; }

  /* Stacking order matters: drawer above scrim above topbar. With the topbar
     under the scrim the burger became untappable once the drawer opened. */
  .topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem;
    background: var(--rail-bg, var(--bg));
    border-bottom: 1px solid var(--rule);
  }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 70;
    width: min(100%, 26rem);
    height: 100dvh;
    max-height: 100dvh;
    padding-bottom: max(3rem, env(safe-area-inset-bottom));
    border-right: 0;
    transform: translateX(-101%);
    transition: transform .22s cubic-bezier(.3,.7,.3,1);
    box-shadow: 0 0 3rem rgba(0,0,0,.45);
  }
  .nav-toggle:checked ~ .shell .sidebar { transform: none; }

  .scrim {
    display: block;
    position: fixed; inset: 0; z-index: 65;
    background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
    touch-action: none;          /* no dragging the page through the overlay */
  }
  .nav-toggle:checked ~ .scrim { opacity: 1; pointer-events: auto; }

  .drawer-close { display: inline-flex; }
  .wordmark-rail { display: block; }
  main { padding: 2.25rem 1.25rem 4rem; }
}

/* Lock the page behind the drawer. Without this the background scrolls under
   the overlay and you lose your place. */
body:has(.nav-toggle:checked) { overflow: hidden; }
body.nav-open { overflow: hidden; }   /* fallback where :has() is unavailable */

@media (prefers-reduced-motion: reduce) {
  .sidebar, .scrim, .burger span { transition: none; }
}

/* ---------------------------------------------------------------- content */

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.3rem; }
li { margin-bottom: .45em; }
li > ul, li > ol { margin-top: .45em; }

main a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .17em; text-decoration-thickness: 1px; }
main a:hover { color: var(--accent); }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

img { display: block; max-width: 100%; height: auto; }
article > p:has(> img:only-child) { max-width: none; margin: 0 0 2.5rem; }
article > p > img:only-child { width: 100%; }

blockquote {
  margin: 1.6rem 0; padding-left: 1.2rem;
  border-left: 2px solid var(--accent);
  color: var(--muted);
}
blockquote p:last-child { margin-bottom: 0; }

code, kbd, samp {
  font-family: var(--mono);
  font-size: .85em;
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .1em .35em;
}
pre {
  background: var(--sunk); border: 1px solid var(--rule); border-radius: 3px;
  padding: .95rem 1.1rem; overflow-x: auto; font-size: .9rem; line-height: 1.55;
}
pre code { background: none; border: 0; padding: 0; }

/* --------------------------------------------------- finding lists + tables */

table.entries { display: block; width: 100%; max-width: none; border-collapse: collapse; margin: .4rem 0 2.2rem; }
table.entries thead { display: none; }
table.entries tbody { display: block; }
table.entries tr { display: block; padding: .95rem 0; border-top: 1px solid var(--rule); }
table.entries tr:first-child { border-top: 0; }
table.entries td { display: block; padding: 0; border: 0; }
table.entries td:first-child { font-family: var(--display); font-weight: 600; line-height: 1.28; }
table.entries td:last-child { margin-top: .35rem; color: var(--muted); font-size: .95rem; line-height: 1.55; }
table.entries .mk { margin-right: .4em; }

@media (min-width: 62rem) {
  table.entries tr { display: grid; grid-template-columns: minmax(13rem, 22rem) 1fr; gap: 0 2.5rem; align-items: baseline; }
  table.entries td:last-child { margin-top: 0; }
}

/* Two-up on a wide screen. Each entry stacks again, because the column is
   now half as wide. */
@media (min-width: 96rem) {
  table.entries tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3.5rem; }
  table.entries tr { display: block; }
  table.entries tr:nth-child(2) { border-top: 0; }
  table.entries td:last-child { margin-top: .35rem; }
}

.table-wrap { overflow-x: auto; margin: .4rem 0 2.2rem; border: 1px solid var(--rule); border-radius: 3px; }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .92rem; line-height: 1.5; }
main th, main td { text-align: left; vertical-align: baseline; padding: .68rem .9rem; border-bottom: 1px solid var(--rule); }
main th { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--sunk); white-space: nowrap; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
article > table { display: block; overflow-x: auto; }



/* ------------------------------------------------------------ pinned footer */

.sitebar {
  position: fixed; left: var(--rail, 19rem); right: 0; bottom: 0; z-index: 55;
  height: var(--bar, 2.75rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(.9rem, 2.5vw, 1.5rem);
  background: var(--rail-bg, var(--bg));
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .03em;
}
.sitebar-id { display: flex; align-items: center; gap: .5em; margin: 0; color: var(--rail-fg, var(--muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sitebar-id i { font-style: normal; color: var(--rail-accent, var(--accent)); }
.sitebar-sep { opacity: .45; }
.sitebar-links { display: flex; align-items: center; gap: 0 1.15rem; white-space: nowrap; }
.sitebar-links a { color: var(--rail-name, var(--fg)); text-decoration: none; padding: .35rem 0; border-bottom: 1px solid transparent; }
.sitebar-links a:hover { color: var(--rail-accent, var(--accent)); border-bottom-color: currentColor; }

@media (max-width: 46rem) {
  .sitebar-id span:not(:first-of-type), .sitebar-sep { display: none; }
  .sitebar-links { gap: 0 .9rem; }
  .sitebar { font-size: .7rem; }
}

/* One column on mobile, and the drawer covers the bar rather than the
   other way round. */
@media (max-width: 60rem) { .sitebar { left: 0; z-index: 30; } }


/* ------------------------------------------------------------------ search */

.search { position: relative; display: block; margin: 0 0 1.25rem; }
.search input {
  width: 100%;
  padding: .55rem 2rem .55rem .7rem;
  font-family: var(--body);
  font-size: .9rem;
  color: var(--rail-name, var(--fg));
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  -webkit-appearance: none;
  appearance: none;
}
.search input::placeholder { color: var(--rail-fg, var(--muted)); opacity: 1; }
.search input:focus { outline: none; border-color: var(--rail-accent, var(--accent)); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-key {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: .68rem; line-height: 1;
  padding: .2rem .35rem;
  color: var(--rail-fg, var(--muted));
  border: 1px solid var(--rule); border-radius: 3px;
  pointer-events: none;
}
.search input:focus ~ .search-key, .search input:not(:placeholder-shown) ~ .search-key { opacity: 0; }

.results[hidden] { display: none; }
.results-count, .results-none {
  margin: 0 0 .6rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rail-fg, var(--muted));
}
.results-none { text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: .85rem; }
.results ul { list-style: none; margin: 0; padding: 0; }
.results li { margin: 0 0 .15rem; }
.results a {
  display: block; padding: .5rem .6rem;
  color: var(--rail-fg, var(--muted)); text-decoration: none;
  border-radius: 3px; border-left: 2px solid transparent;
}
.results a:hover, .results a.on {
  background: var(--rail-hover, var(--sunk));
  border-left-color: var(--rail-accent, var(--accent));
}
.results-title {
  display: block; font-family: var(--display); font-size: .9rem; font-weight: 600;
  line-height: 1.25; color: var(--rail-name, var(--fg)); margin-bottom: .2rem;
}
.results-snip { display: block; font-size: .76rem; line-height: 1.45; }
.results mark {
  background: var(--rail-accent, var(--accent));
  color: var(--rail-bg, var(--bg));
  padding: 0 .1em; border-radius: 2px;
}

@charset "utf-8";
/* A — MANUAL. A technical specification sheet: bone stock, near-black ink,
   one signal colour, everything on a hard left axis. Dense, engineered, quiet. */

:root {
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "Source Serif 4", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --bg:       #f4f2ed;
  --sunk:     #eae7e0;
  --rail-bg:  #edeae4;
  --fg:       #16150f;
  --muted:    #555147;
  --rule:     #d5d1c6;
  --accent:   #c12f0c;
  --rail-fg:  #504d44;   /* 7.0:1 on the rail — a 14px serif list needs more than the AA floor */

  --rail: clamp(19rem, 20vw, 26rem);
  --rail-pad: 2.1rem 1.4rem 3rem;
  --measure: 45rem;
  --measure-wide: 54rem;
  --entries-max: 56rem;
  --size: 1.0625rem;
  --leading: 1.64;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121210; --sunk: #1a1a17; --rail-bg: #0e0e0c;
    --fg: #e8e5dc; --muted: #a29e92; --rule: #2a2925; --accent: #ff6a3d;
    --rail-fg: #a09c90;
  }
}

/* wordmark: a stamped part number */
.wordmark-rail { padding-bottom: 1.3rem; border-bottom: 2px solid var(--fg); }
.wordmark-star { color: var(--accent); }
.topbar .wordmark { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }

.rail-head { font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--rail-fg); margin-top: .3rem; }
.rail-head i { color: var(--accent); opacity: 1; }

.rail-nav a { font-family: var(--body); font-size: .875rem; line-height: 1.4; --rail-hover: var(--sunk); }
.rail-nav a[aria-current="page"] { background: var(--sunk); box-shadow: inset 2px 0 0 var(--accent); border-radius: 0 2px 2px 0; }

h1 { font-family: var(--display); font-size: clamp(2rem, 1.2rem + 3vw, 2.9rem); font-weight: 700; line-height: 1.06; letter-spacing: -.024em; margin: 0 0 .55em; text-wrap: balance; }
h2 { font-family: var(--display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.2; margin: 2.6em 0 .6em; padding-top: .85rem; border-top: 2px solid var(--fg); text-wrap: balance; }
h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 600; margin: 2em 0 .5em; }
h4 { font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 2em 0 .6em; }

h1 + p { font-size: 1.16rem; line-height: 1.5; color: var(--fg); }

strong { font-weight: 700; }

table.entries td:first-child { font-family: var(--display); font-size: 1.02rem; font-weight: 600; letter-spacing: -.008em; }
table.entries tr { border-top-color: var(--rule); }
table.entries tr:hover td:first-child { color: var(--accent); }