/* Self-hosted for handbook. Regenerate with fetch_fonts.py. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/-F63fjptAgt5VM-kVkqdyU8n1iEq129k.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/-F6qfjptAgt5VM-kVkqdyU8n3twJwl5FgtIU.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/-F6qfjptAgt5VM-kVkqdyU8n3vAOwl5FgtIU.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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgg.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3jWuZEC.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;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3bWuQ.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3jWuZEC.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;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3bWuQ.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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B47b1z3jWuZEC.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;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B47b1z3bWuQ.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;
}

/* Döner Handbook — a shop manual. Numbered sections, spec tables, plan drawings. */

:root {
    --page: #f7f7f5;
    --card: #ffffff;
    --slate: #16191d;
    --slate-soft: #2a2f36;
    --ink: #1b1f24;
    --ink-soft: #5a626c;
    --line: #dfe1e4;
    --line-firm: #c3c7cc;
    --signal: #f2b705;
    --signal-deep: #8a6a02;
    --radius: 4px;
    --index: 17rem;
    --gutter: clamp(1.1rem, 3.5vw, 2.5rem);
    --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.62;
}

.skip {
    position: absolute;
    left: -9999px;
}

.skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: 20;
    background: var(--signal);
    color: var(--slate);
    padding: 0.6rem 1rem;
}

a {
    color: #0f5fa8;
    text-underline-offset: 0.15em;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---------- bar ---------- */

.bar {
    background: var(--slate);
    color: #e9ebee;
    border-bottom: 3px solid var(--signal);
    position: sticky;
    top: 0;
    z-index: 10;
}

.bar-in {
    max-width: 82rem;
    margin: 0 auto;
    padding: 0.65rem var(--gutter);
    display: flex;
    align-items: center;
    gap: 0.8rem 1.4rem;
    flex-wrap: wrap;
}

.logo {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    text-decoration: none;
    color: #fff;
    margin-right: auto;
}

.logo-name {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.logo-sub {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal);
}

.bar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
}

.bar-nav a {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    color: #a9b0b9;
    text-decoration: none;
    padding: 0.2rem 0;
    border-bottom: 2px solid transparent;
}

.bar-nav a:hover {
    color: #fff;
}

.bar-nav a[aria-current="page"] {
    color: #fff;
    border-bottom-color: var(--signal);
}

.bar-nav .nav-drop {
    position: relative;
}

.bar-nav .nav-drop>summary {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    color: #a9b0b9;
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0;
    border-bottom: 2px solid transparent;
}

.bar-nav .nav-drop>summary::-webkit-details-marker {
    display: none;
}

.bar-nav .nav-drop>summary::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4.5px solid currentColor;
}

.bar-nav .nav-drop.is-on>summary,
.bar-nav .nav-drop>summary:hover,
.bar-nav .nav-drop:focus-within>summary {
    color: #fff;
}

.bar-nav .nav-drop.is-on>summary {
    border-bottom-color: var(--signal);
}

/* The panel starts flush at the bottom of the summary. Any vertical gap between
   them is outside the details element, so the pointer loses :hover crossing it
   and the menu closes before it can be clicked. */
.bar-nav .nav-drop ul {
    display: none;
    position: absolute;
    top: 100%;
    left: -0.85rem;
    min-width: 15rem;
    margin: 0;
    padding: 0.45rem 0;
    list-style: none;
    background: #1c2128;
    border: 1px solid #3a424c;
    z-index: 60;
}

.bar-nav .nav-drop[open]>ul,
.bar-nav .nav-drop:hover>ul,
.bar-nav .nav-drop:focus-within>ul {
    display: block;
}

/* Current browsers put everything after the summary inside ::details-content and
   hide it with content-visibility while the element is closed, so showing the
   panel on hover takes more than display: block on the list. Browsers that do
   not know this pseudo-element drop the rule and fall back to click-to-open. */
.bar-nav .nav-drop:hover::details-content,
.bar-nav .nav-drop:focus-within::details-content {
    content-visibility: visible;
}

/* The panel is much wider than its label, so a pointer heading for it at a
   shallow angle leaves the label sideways before it arrives and the menu shuts
   under the cursor. This extends the panel's own hover area up across the
   label's row, and it only exists while the panel is showing. */
@media (hover: hover) {
    .bar-nav .nav-drop ul::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 0.6rem;
    }
}

.bar-nav .nav-drop a {
    display: block;
    padding: 0.45rem 0.85rem;
    border-bottom: 0;
}

.bar-nav .nav-drop a:hover {
    color: #fff;
    background: #262d36;
}

/* Without a pointer there is no hover to open on, so the group expands in
   place rather than floating a panel over the page. */
@media (max-width: 46rem) {
    .bar-nav .nav-drop {
        flex: 1 1 100%;
    }

    .bar-nav .nav-drop ul {
        position: static;
        left: auto;
        min-width: 0;
        border: 0;
        background: transparent;
        padding: 0.1rem 0 0.3rem 0.9rem;
    }
}

/* Every hover state here changes only colour, so one short transition covers
   them all and stops the whole page flicking between two states. */
.bar-nav a,
.bar-nav .nav-drop>summary,
.index a,
.jump a,
.step a,
.alsolist a {
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {

    .bar-nav a,
    .bar-nav .nav-drop>summary,
    .index a,
    .jump a,
    .step a,
    .alsolist a {
        transition: none;
    }
}

/* ---------- frame ---------- */

.frame {
    max-width: 82rem;
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: var(--index) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.index {
    position: sticky;
    top: 4rem;
    padding: 2rem 0;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

.index-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line-firm);
}

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

.index a {
    display: grid;
    grid-template-columns: 1.9rem 1fr;
    gap: 0.35rem;
    padding: 0.36rem 0.5rem 0.36rem 0;
    text-decoration: none;
    color: var(--ink-soft);
    font-size: 0.85rem;
    line-height: 1.32;
    border-left: 3px solid transparent;
    padding-left: 0.5rem;
}

.index-no {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--line-firm);
}

.index a:hover {
    color: var(--ink);
    background: #eeeff1;
}

.index a[aria-current="page"] {
    color: var(--slate);
    font-weight: 600;
    border-left-color: var(--signal);
    background: #eeeff1;
}

.index a[aria-current="page"] .index-no {
    color: var(--signal-deep);
}

main {
    min-width: 0;
    padding: 2rem 0 0;
    max-width: 47rem;
}

/* ---------- section head ---------- */

.tag {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.8rem;
}

.tag-no {
    background: var(--signal);
    color: var(--slate);
    padding: 0.22rem 0.5rem;
    font-weight: 600;
}

.tag-rev {
    color: var(--ink-soft);
}

h1 {
    font-size: clamp(1.85rem, 1.4rem + 2vw, 2.7rem);
    font-weight: 600;
    letter-spacing: -0.024em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
}

.abstract {
    font-size: 1.08rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0.75rem 0 0;
    max-width: 40rem;
    text-wrap: pretty;
}

/* The page hero, cropped to a consistent banner. Scoped to the direct child so
   it does not reach the diagram plates in the body, whose labels sit close
   enough to the edge that a 2:1 crop eats them. */
.section>.plate {
    margin: 1.8rem 0 0;
}

.section>.plate img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border: 1px solid var(--line-firm);
}

/* ---------- jump bar ---------- */

.jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.8rem 0 0;
    padding: 0.8rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.jump a {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-decoration: none;
    color: var(--ink-soft);
    background: var(--card);
    border: 1px solid var(--line-firm);
    padding: 0.28rem 0.6rem;
}

.jump a:hover {
    color: var(--slate);
    border-color: var(--slate);
}

/* ---------- prose ---------- */

.prose {
    padding-top: 1.9rem;
}

.prose p {
    margin: 0 0 1.1em;
    max-width: 42rem;
    text-wrap: pretty;
}

.prose h2 {
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 2.5rem 0 0.8rem;
    padding-left: 0.7rem;
    border-left: 4px solid var(--signal);
    scroll-margin-top: 5rem;
}

.prose h3 {
    font-family: var(--mono);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 1.8rem 0 0.5rem;
}

.prose ul,
.prose ol {
    margin: 0 0 1.2em;
    padding-left: 1.3em;
    max-width: 42rem;
}

.prose li {
    margin: 0.32em 0;
}

.prose li::marker {
    color: var(--signal-deep);
    font-family: var(--mono);
}

.prose strong {
    font-weight: 600;
}

/* ---------- plates ---------- */

figure {
    margin: 2rem 0;
}

figure img {
    width: 100%;
    border: 1px solid var(--line-firm);
    background: var(--card);
}

figcaption {
    font-family: var(--mono);
    font-size: 0.7rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    margin-top: 0.5rem;
}

/* A drawing is reference material: never crop it, never upscale it past the
   point the linework blurs, and give it white space to be read in. */
.drawing img {
    width: min(100%, 27rem);
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
    margin: 0 auto;
    padding: 1.5rem;
}

.pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.pair figure {
    margin: 0;
}

.pair img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Finish samples read as a schedule, four across, not as photographs. */
.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.9rem;
    margin: 1.6rem 0 2rem;
}

.swatches figure {
    margin: 0;
}

.swatches img {
    aspect-ratio: 1;
    object-fit: cover;
}

.swatches figcaption {
    font-size: 0.66rem;
}

/* ---------- spec block ---------- */

.spec {
    margin: 2rem 0;
    border: 1px solid var(--line-firm);
    background: var(--card);
}

.spec>p:first-child {
    margin: 0;
    padding: 0.55rem 1rem;
    background: var(--slate);
    color: var(--signal);
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.spec>*:not(:first-child) {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: none;
}

.spec>ul,
.spec>ol {
    padding-left: 2.3rem;
    padding-bottom: 0.9rem;
}

.spec>p:nth-child(2) {
    padding-top: 0.9rem;
}

.spec> :last-child {
    margin-bottom: 0;
    padding-bottom: 0.9rem;
}

/* ---------- tables ---------- */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.88rem;
    background: var(--card);
    border: 1px solid var(--line-firm);
    font-variant-numeric: tabular-nums;
}

th {
    background: #eef0f2;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: left;
    color: var(--ink-soft);
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--line-firm);
}

td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

tbody tr:last-child td {
    border-bottom: 0;
}

/* ---------- queries ---------- */

.queries {
    margin-top: 3rem;
    border-top: 3px solid var(--slate);
    padding-top: 1.5rem;
}

.queries h2 {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 1.1rem;
}

.queries dl {
    margin: 0;
    display: grid;
    gap: 1px;
    background: var(--line-firm);
    border: 1px solid var(--line-firm);
}

.queries div {
    background: var(--card);
    padding: 0.9rem 1rem;
}

.queries dt {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}

.queries dd {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

/* ---------- step ---------- */

.step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line-firm);
    border: 1px solid var(--line-firm);
    margin-top: 3rem;
}

.step a {
    background: var(--card);
    padding: 0.95rem 1.1rem;
    text-decoration: none;
    color: var(--ink);
}

.step a:hover {
    background: #eef0f2;
}

.step span {
    display: block;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--signal-deep);
    margin-bottom: 0.25rem;
}

.step strong {
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.25;
}

.step-next {
    text-align: right;
}

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

.foot {
    margin-top: 2.5rem;
    padding: 1.4rem 0 3rem;
    border-top: 1px solid var(--line-firm);
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.foot nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin-bottom: 0.6rem;
    font-family: var(--mono);
    font-size: 0.74rem;
}

.foot p {
    margin: 0;
    max-width: 44rem;
}

@media (max-width: 62rem) {
    .frame {
        grid-template-columns: minmax(0, 1fr);
    }

    .index {
        position: static;
        max-height: none;
        padding: 1.5rem 0 0;
        order: 2;
    }

    .index ol {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    }

    main {
        max-width: none;
    }
}

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

    .step-next {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Publication gold. The bright value is only ever used on black; on a light ground it
   drops to the deeper mix, which is the same hue at a legible contrast. */
:root {
    --gold: #f7b001;
    --gold-lift: #ffc93a;
    --gold-ink: #8a6a02;
    --black: #0b0b0b;
    --poster: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
}

/* ---------- editorial style: bands, posters, stats, plates ----------
   Shared vocabulary across the five sites so a diagram or a stat row can move
   between them. The tokens above are what makes this one look like the shop manual. */

body {
    /* Bands bleed their background past the column with an over-wide pseudo
       element, which needs a clip that is not a scroll container, or a sticky
       header stops sticking. */
    overflow-x: clip;
}

.band {
    position: relative;
    isolation: isolate;
    margin: clamp(2.2rem, 5vw, 3.4rem) 0;
    padding: clamp(2.2rem, 5vw, 3.6rem) 0;
}

.band::before {
    content: "";
    position: absolute;
    inset: 0 -100vw;
    z-index: -1;
    background: var(--card);
    border-block: 1px solid var(--line);
}

.band.dark {
    color: #e6e8ea;
}

.band.dark::before {
    background: var(--black);
    border-block: 0;
    border-top: 4px solid var(--gold);
}

.band.dark a {
    color: var(--gold);
}

.band.dark strong {
    color: #fff;
}

.band> :first-child {
    margin-top: 0;
}

.band> :last-child {
    margin-bottom: 0;
}

.eyebrow {
    font-family: var(--poster);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin: 0 0 0.75rem;
}

.dark .eyebrow {
    color: var(--gold);
}

/* The poster heading: heavy condensed caps, with a gold clause inside it. */
.display,
.prose h2.display,
.prose h3.display {
    font-family: var(--poster);
    font-weight: 700;
    font-size: clamp(1.85rem, 1.2rem + 3.2vw, 3.3rem);
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 1.1rem;
    text-wrap: balance;
    color: var(--ink);
}

.display b,
.display strong {
    color: var(--gold-ink);
    font-weight: inherit;
}

/* Two classes deep, because `.prose h2.display` above sets the light colour and
   would otherwise leave the non-gold half of the heading black on black. */
.band.dark .display {
    color: #fff;
}

.dark .display b,
.dark .display strong {
    color: var(--gold);
}

.lede {
    font-size: 1.06rem;
    max-width: 42rem;
    margin: 0 0 1.4rem;
}

/* ---------- stat rows ---------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1.6rem;
    margin: 2.2rem 0;
}

.stat {
    border-top: 4px solid var(--gold);
    padding-top: 0.85rem;
}

.stat b,
.stat strong {
    display: block;
    font-family: var(--poster);
    font-weight: 700;
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--ink);
}

/* Needs both halves spelled out: `.band.dark strong` is more specific than
   `.stat strong` and would otherwise paint the number white. */
.dark .stat b,
.dark .stat strong {
    color: var(--gold);
}

.stat span {
    display: block;
    font-family: var(--poster);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 0.5rem;
}

.stat p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0.55rem 0 0;
}

.dark .stat span,
.dark .stat p {
    color: #a3a9b0;
}

/* ---------- diagram plates ---------- */

/* Detailed diagrams carry their own frame and dark ground, so they sit
   on a light panel rather than bleeding to the edge like a photograph. */
.plate {
    margin: 2.4rem 0;
    padding: clamp(0.85rem, 2.2vw, 1.5rem);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

.dark .plate {
    background: #131313;
    border-color: #2c2c2c;
    box-shadow: none;
}

.plate img {
    width: 100%;
    border-radius: calc(var(--radius) - 2px);
}

.plate figcaption {
    border: 0;
    margin: 0;
    padding: 0.85rem 0.2rem 0.1rem;
    font-style: italic;
    font-size: 0.86rem;
    text-align: center;
    color: var(--ink-soft);
}

.dark .plate figcaption {
    color: #a3a9b0;
}

/* A portrait diagram would otherwise run past a full screen height. */
.plate.tall img {
    max-height: 44rem;
    width: auto;
    margin: 0 auto;
}

/* ---------- split: artwork one side, argument the other ---------- */

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: clamp(1.3rem, 3.5vw, 2.6rem);
    align-items: center;
    margin: 2.2rem 0;
}

.split figure {
    margin: 0;
}

.split img {
    width: 100%;
}

.split>div> :first-child {
    margin-top: 0;
}

.split>div> :last-child {
    margin-bottom: 0;
}

/* ---------- pill button ---------- */

.pill {
    display: inline-block;
    font-family: var(--poster);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    background: var(--gold);
    color: var(--black);
    text-decoration: none;
    padding: 0.8rem 1.55rem;
    border-radius: 999px;
}

.pill:hover {
    background: var(--gold-lift);
}

.band.dark .pill {
    color: var(--black);
}

/* ---------- press row ---------- */

.press {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.3rem, 4vw, 2.8rem);
    margin: 1.8rem 0;
}

.press img {
    height: 2.3rem;
    width: auto;
}

.dark .press img {
    filter: grayscale(1) brightness(1.9);
    opacity: 0.9;
}

/* ---------- card row ---------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1.2rem, 3vw, 2.1rem);
    margin: 2.2rem 0;
}

.card {
    border-top: 4px solid var(--ink);
}

.card:nth-child(even) {
    border-top-color: var(--gold);
}

.dark .card {
    border-top-color: var(--gold);
}

.card h3 {
    font-family: var(--poster);
    font-weight: 700;
    font-size: 1.22rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0.85rem 0 0.5rem;
    color: inherit;
}

.card p {
    font-size: 0.95rem;
    margin: 0 0 0.6rem;
}

.card p:last-child {
    margin-bottom: 0;
}

/* A gold-caps status line closes each card. */
.card .status {
    font-family: var(--poster);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-ink);
}

.dark .card .status {
    color: var(--gold);
}

/* ---------- publication treatment of the shell ---------- */

:root {
    --signal: var(--gold);
}

.logo-name,
.logo-sub,
.index-label,
.tag,
.bar-nav a {
    font-family: var(--poster);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.queries dt,
.step span {
    font-family: var(--poster);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* The handbook hero already uses .plate for a photograph; the panel gives it a
   frame, and .drawing keeps a reference graphic from being cropped inside it. */
.section>.plate.drawing img {
    object-fit: contain;
    max-height: 34rem;
}

.section-head h1 {
    font-family: var(--poster);
    font-weight: 700;
    font-size: clamp(2rem, 1.3rem + 3.2vw, 3.2rem);
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

/* Section headings use a solid black bar of poster caps for clear hierarchy. */
.queries h2 {
    font-family: var(--poster);
    font-weight: 700;
    font-size: clamp(1.15rem, 1rem + 0.9vw, 1.5rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    background: var(--black);
    color: #fff;
    padding: 0.85rem 1rem;
    margin: 0 0 1.5rem;
    border: 0;
}

/* The logo row arrives from markdown as one paragraph of images, so the flex
   container has to be the paragraph as well as the wrapper. */
.press p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: inherit;
    margin: 0;
}

/* Every press logo is a 100px square tile, so the row is a row of badges
   rather than a row of wordmarks. */
.press img {
    height: 3.4rem;
    width: 3.4rem;
    border-radius: 6px;
}

.dark .press img {
    filter: none;
    opacity: 1;
}

/* The number and its label share one paragraph; only the sentence under them
   wants the caption margin. */
.stat>p:first-child {
    margin: 0;
}

/* ---------- directory and Item 7 tables ---------- */

main.wide {
    max-width: 68rem;
    margin: 0 auto;
    padding: 2rem var(--gutter) 0;
}

.table-wrap {
    margin: 2.2rem 0 0;
}

.table-head h2 {
    font-family: var(--poster);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: clamp(1.3rem, 1rem + 1.4vw, 1.8rem);
    line-height: 1.05;
    margin: 0;
}

.table-head p {
    margin: 0.45rem 0 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
}

table.rank {
    width: 100%;
    margin: 1.1rem 0 0;
    border-collapse: collapse;
    font-size: 0.92rem;
}

table.rank thead th {
    background: var(--slate);
    color: #fff;
    text-align: left;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0.55rem 0.65rem;
    white-space: nowrap;
}

table.rank tbody tr {
    border-bottom: 1px solid var(--line);
}

table.rank tbody tr:nth-child(even) {
    background: var(--card);
}

table.rank td,
table.rank tbody th {
    padding: 0.65rem;
    text-align: left;
    vertical-align: top;
    font-weight: 400;
}

.c-rank {
    font-family: var(--mono);
    color: var(--ink-soft);
    width: 2.2rem;
}

.c-name a {
    font-weight: 700;
    color: var(--ink);
    text-decoration-color: var(--line-firm);
}

.row-meta {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.c-lead {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 700;
    color: var(--signal-deep);
}

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    background: var(--line-firm);
    border: 1px solid var(--line-firm);
    margin: 0 0 1.6rem;
}

.fact {
    background: var(--card);
    padding: 0.85rem 1rem;
}

.fact b {
    display: block;
    font-family: var(--mono);
    font-size: 1.15rem;
    line-height: 1.15;
}

.fact span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.callout {
    margin: 0 0 1.4rem;
    padding: 0.8rem 1rem;
    background: #eeeff1;
    border-left: 4px solid var(--signal);
    font-size: 0.95rem;
}

table.spec {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.8rem;
    font-size: 0.9rem;
}

table.spec th,
table.spec td {
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

table.spec th[scope="row"] {
    font-weight: 600;
    color: var(--ink-soft);
}

table.spec tr.total th,
table.spec tr.total td {
    border-top: 1px solid var(--slate);
    border-bottom: 2px solid var(--slate);
    color: var(--ink);
    font-weight: 700;
}

.league {
    margin: 1.6rem 0 2rem;
    overflow-x: auto;
}

.league table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.league caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 0.6rem;
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.league thead th {
    background: var(--slate);
    color: #fff;
    text-align: left;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0.5rem 0.6rem;
    white-space: nowrap;
}

.league tbody tr {
    border-bottom: 1px solid var(--line);
}

.league td,
.league tbody th {
    padding: 0.5rem 0.6rem;
    text-align: left;
    vertical-align: top;
    font-weight: 400;
}

.league tbody th {
    font-weight: 700;
}

.league .lead-cell {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--signal-deep);
    font-weight: 700;
}

.league .labels {
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.alsolist {
    margin: 2rem 0 0;
}

.alsolist-label {
    margin: 0 0 0.45rem;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.alsolist ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.alsolist a {
    display: inline-block;
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--line-firm);
    font-size: 0.82rem;
    text-decoration: none;
    color: var(--ink);
}

.alsolist a:hover {
    border-color: var(--slate);
}

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

    .index {
        position: static;
        max-height: none;
        padding: 1rem 0 0;
    }
}