/* Self-hosted for fieldguide. Regenerate with fetch_fonts.py. */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/rnCt-xNNww_2s0amA9M8onTmTMuk.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: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/rnCt-xNNww_2s0amA9M8onrmTA.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: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/rnCr-xNNww_2s0amA9M3knj-SA.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: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/rnCr-xNNww_2s0amA9M5kng.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: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/rnCs-xNNww_2s0amA9vmtm3PafadWQ.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: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/rnCs-xNNww_2s0amA9vmtm3BafY.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: 'Spectral';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/rnCs-xNNww_2s0amA9uetG3PafadWQ.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: 'Spectral';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/rnCs-xNNww_2s0amA9uetG3BafY.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPb94C-s0.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.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: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/EJRLQgErUN8XuHNEtX81i9TmEkrnfc9Q-a2fli0.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: 'Saira Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/EJRLQgErUN8XuHNEtX81i9TmEkrnfc9Q962f.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: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/EJRLQgErUN8XuHNEtX81i9TmEkrnGc5Q-a2fli0.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: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/EJRLQgErUN8XuHNEtX81i9TmEkrnGc5Q962f.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: 'Saira Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/EJRLQgErUN8XuHNEtX81i9TmEkrnBc1Q-a2fli0.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: 'Saira Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/EJRLQgErUN8XuHNEtX81i9TmEkrnBc1Q962f.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;
}

/* QSR Field Guide — a pocket manual. Numbered entries, checklists, marginalia. */

:root {
    --field: #f4f2ea;
    --leaf: #ffffff;
    --ink: #22231e;
    --ink-soft: #5f6157;
    --line: #ded9c9;
    --line-firm: #bdb69f;
    --olive: #4a5334;
    --olive-soft: #eaeddd;
    --alert: #8c3b16;
    --gutter: clamp(1.1rem, 4vw, 2.5rem);
    --read: 36rem;
    --body: Spectral, Georgia, "Times New Roman", serif;
    --label: "Space Grotesk", system-ui, -apple-system, sans-serif;
}

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

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

body {
    margin: 0;
    background: var(--field);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17.5px;
    line-height: 1.68;
}

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

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

a {
    color: var(--olive);
    text-underline-offset: 0.16em;
}

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

/* ---------- banner ---------- */

.banner {
    background: var(--olive);
    color: #e7ead9;
}

.banner-in {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.1rem var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.8rem 1.5rem;
}

.imprint {
    text-decoration: none;
    color: inherit;
    display: block;
}

.imprint-name {
    display: block;
    font-family: var(--label);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
}

.imprint-line {
    display: block;
    font-size: 0.85rem;
    font-style: italic;
    color: #c8cfb2;
    margin-top: 0.2rem;
    max-width: 34rem;
}

.banner-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.1rem;
}

.banner-nav a {
    font-family: var(--label);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #c8cfb2;
    text-decoration: none;
    padding-bottom: 0.15rem;
    border-bottom: 2px solid transparent;
}

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

.banner-nav a[aria-current="page"] {
    color: #fff;
    border-bottom-color: #d8c15f;
}

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

.banner-nav .nav-drop>summary {
    font-family: var(--label);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #c8cfb2;
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-bottom: 0.15rem;
    border-bottom: 2px solid transparent;
}

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

.banner-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;
}

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

.banner-nav .nav-drop.is-on>summary {
    border-bottom-color: #d8c15f;
}

/* 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. */
.banner-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: #1b2218;
    border: 1px solid #3a4434;
    z-index: 60;
}

.banner-nav .nav-drop[open]>ul,
.banner-nav .nav-drop:hover>ul,
.banner-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. */
.banner-nav .nav-drop:hover::details-content,
.banner-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) {
    .banner-nav .nav-drop ul::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 0.6rem;
    }
}

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

.banner-nav .nav-drop a:hover {
    color: #fff;
    background: #2a3325;
}

/* 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) {
    .banner-nav .nav-drop {
        flex: 1 1 100%;
    }

    .banner-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 nav flicking between two states. */
.banner-nav a,
.banner-nav .nav-drop>summary,
.entries a,
.onward a,
.foot nav a {
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

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

    .banner-nav a,
    .banner-nav .nav-drop>summary,
    .entries a,
    .onward a,
    .foot nav a {
        transition: none;
    }
}

/* ---------- entry ---------- */

main {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.entry {
    background: var(--leaf);
    border: 1px solid var(--line-firm);
    border-top: 0;
    padding: clamp(1.6rem, 5vw, 3.2rem) clamp(1.2rem, 5vw, 4rem) clamp(2rem, 5vw, 3.5rem);
}

.folio {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1rem;
}

.folio-no {
    font-family: var(--label);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    background: var(--olive);
    color: #fff;
    padding: 0.2rem 0.5rem;
}

.folio-of {
    font-family: var(--label);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

h1 {
    font-family: var(--body);
    font-weight: 800;
    font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
    line-height: 1.08;
    letter-spacing: -0.018em;
    margin: 0;
    max-width: 20ch;
    text-wrap: balance;
}

.lede {
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0.8rem 0 0;
    max-width: var(--read);
    padding-bottom: 1.3rem;
    border-bottom: 2px solid var(--ink);
    text-wrap: pretty;
}

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

.prose {
    padding-top: 1.7rem;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote {
    max-width: var(--read);
}

.prose p {
    margin: 0 0 1.1em;
    text-wrap: pretty;
}

.prose h2 {
    font-family: var(--label);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--olive);
    margin: 2.5rem 0 0.8rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--line-firm);
    scroll-margin-top: 2rem;
}

.prose h3 {
    font-weight: 600;
    font-size: 1.08rem;
    margin: 1.8rem 0 0.4rem;
}

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

.prose li {
    margin: 0.35em 0;
}

.prose li::marker {
    color: var(--olive);
    font-family: var(--label);
    font-weight: 600;
}

.prose blockquote {
    margin: 1.8rem 0;
    padding-left: 1.2rem;
    border-left: 3px solid var(--line-firm);
    font-style: italic;
    color: var(--ink-soft);
}

.prose strong {
    font-weight: 600;
}

figure {
    margin: 2rem 0;
    max-width: var(--read);
}

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

figcaption {
    font-family: var(--label);
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--ink-soft);
    margin-top: 0.5rem;
}

.hero {
    max-width: none;
    margin: 1.7rem 0 0;
}

.hero img {
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

/* Drawings are reference material: never crop them. */
.drawing {
    max-width: none;
}

.drawing img {
    width: min(100%, 26rem);
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    margin: 0 auto;
    padding: 1.2rem;
    background: var(--leaf);
}

/* ---------- checklist ---------- */

.checklist {
    margin: 2rem 0;
    padding: 1.2rem 1.4rem 1.3rem;
    background: var(--olive-soft);
    border: 1px solid #cdd4b8;
}

.checklist>p:first-child {
    font-family: var(--label);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--olive);
    margin: 0 0 0.7rem;
    max-width: none;
}

.checklist ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
}

.checklist li {
    position: relative;
    padding-left: 1.9rem;
    margin: 0.5em 0;
    font-size: 0.98rem;
    line-height: 1.5;
}

.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.32em;
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid var(--olive);
    background: var(--leaf);
}

/* ---------- warning ---------- */

.warning {
    margin: 2rem 0;
    padding: 1rem 1.2rem;
    background: #fbf1e9;
    border-left: 4px solid var(--alert);
}

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

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

.warning strong {
    color: var(--alert);
}

/* ---------- entry list ---------- */

.entries {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
    max-width: none;
    counter-reset: entry;
    border-top: 2px solid var(--ink);
}

.entries li {
    counter-increment: entry;
    margin: 0;
    border-bottom: 1px solid var(--line);
}

/* The counter is absolute so the title and its gloss share one text column
   instead of becoming separate grid tracks. */
.entries a {
    display: block;
    position: relative;
    padding: 0.85rem 0.3rem 0.85rem 3.2rem;
    text-decoration: none;
    color: var(--ink);
}

.entries a::before {
    content: counter(entry, decimal-leading-zero);
    position: absolute;
    left: 0.3rem;
    top: 1.05rem;
    font-family: var(--label);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--olive);
}

.entries strong {
    display: block;
    font-weight: 600;
    font-size: 1.06rem;
}

.entries em {
    display: block;
    font-style: normal;
    font-size: 0.88rem;
    color: var(--ink-soft);
    margin-top: 0.1rem;
}

.entries a:hover {
    background: var(--olive-soft);
}

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

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

th {
    background: var(--olive-soft);
    font-family: var(--label);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    color: var(--olive);
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--line-firm);
}

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

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

/* ---------- asked ---------- */

.asked {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--ink);
}

.asked h2 {
    font-family: var(--label);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--olive);
    margin: 0 0 1rem;
}

.asked dl {
    margin: 0;
    max-width: 44rem;
}

.asked dt {
    font-weight: 600;
    margin-top: 1.1rem;
    font-size: 1rem;
}

.asked dd {
    margin: 0.2rem 0 0;
    color: var(--ink-soft);
    font-size: 0.96rem;
}

/* ---------- onward ---------- */

.onward {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line-firm);
    border: 1px solid var(--line-firm);
    border-top: 0;
}

.onward a {
    background: var(--leaf);
    padding: 0.95rem 1.2rem;
    text-decoration: none;
    color: var(--ink);
}

.onward a:hover {
    background: var(--olive-soft);
}

.onward span {
    display: block;
    font-family: var(--label);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--olive);
    margin-bottom: 0.25rem;
}

.onward strong {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
}

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

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

.foot {
    margin-top: 2.5rem;
}

.foot-in {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem var(--gutter) 3rem;
    border-top: 1px solid var(--line-firm);
}

.foot-rule {
    margin: 0 0 0.9rem;
    font-size: 0.86rem;
    font-style: italic;
    color: var(--ink-soft);
    max-width: 46rem;
}

.foot-disclosure {
    margin: 0 0 0.9rem;
    font-family: var(--label);
    font-size: 0.76rem;
    color: var(--ink-soft);
    max-width: 46rem;
}

.foot nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    font-family: var(--label);
    font-size: 0.78rem;
}

.foot-fine {
    margin: 0.8rem 0 0;
    font-size: 0.76rem;
    color: var(--ink-soft);
}

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

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

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

/* Publication accent gold. The bright value is only 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: #8a6300;
    --black: #0b0b0b;
    --poster: "Saira Condensed", "Arial Narrow", Impact, sans-serif;
}

/* ---------- editorial components: bands, posters, stats, plates ----------
   These components keep diagrams and comparisons consistent within the field guide. */

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(--leaf);
    border-block: 1px solid var(--line);
}

.band.dark {
    color: #eae8e0;
}

.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: 600;
    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);
}

/* The entry-head .lede above is muted italic, which is right under a title and
   wrong inside a band, where it has to carry the argument on a black ground. */
.band .lede {
    font-size: 1.06rem;
    font-style: normal;
    max-width: 42rem;
    margin: 0 0 1.4rem;
    color: inherit;
}

/* ---------- 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: 600;
    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: #a8a69c;
}

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

/* The commissioned 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(--leaf);
    border: 1px solid var(--line);
    border-radius: 3px;
    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(3px - 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: #a8a69c;
}

/* 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: 600;
    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 comparison card. */
.card .status {
    font-family: var(--poster);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-ink);
}

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

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

:root {
    --olive: #7a5600;
    --olive-soft: #f6efdc;
}

.imprint-name,
.banner-nav a,
.folio {
    font-family: var(--poster);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.imprint-name {
    text-transform: uppercase;
}

.folio-no {
    background: var(--gold);
    color: var(--black);
}

/* The olive survives as a link and rule colour, but as a large surface it went
   muddy against the gold; the chrome is black like every other site's bands. */
.banner {
    background: var(--black);
    color: #d8d5cb;
}

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

.entry-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;
}

/* A section heading uses a solid black bar of poster caps. */
.asked 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;
}

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

/* One Item of the disclosure document, every brand in the set, side by side.
   Wider than the reading column on purpose: this is the part of the page that
   is worth the horizontal room. */
.league {
    margin: 1.8rem 0 2.2rem;
    max-width: none;
    overflow-x: auto;
}

.league table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-family: var(--label);
    font-size: 0.88rem;
}

.league caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 0.7rem;
    font-family: var(--label);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ink-soft);
    max-width: var(--read);
}

.league thead th {
    background: var(--ink);
    color: var(--field);
    text-align: left;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.5rem 0.65rem;
    white-space: nowrap;
}

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

.league tbody tr:nth-child(even) {
    background: var(--leaf);
}

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

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

.league .lead-cell {
    font-family: var(--poster);
    font-size: 1.15rem;
    line-height: 1;
    color: var(--olive);
    white-space: nowrap;
}

.league .year {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.league .yes,
.league .no {
    display: inline-block;
    padding: 0.08rem 0.45rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.league .yes {
    background: var(--olive-soft);
    color: var(--olive);
}

.league .no {
    background: #ece7db;
    color: var(--ink-soft);
}