/* ==========================================================================
   Renewal Record — Ghost theme stylesheet
   No build step. Sections:
   1 Fonts · 2 Tokens · 3 Base · 4 Utilities · 5 Header · 6 Footer · 7 Home
   8 Ledger + archives · 9 Post layouts · 10 Post content + Ghost cards
   11 Content kit (rr-*) · 12 Gate · 13 Check page · 14 Errors · 15 Print

   Ink on paper. Every measure is a multiple of 8px (--u), so line-heights and
   spacings land on one baseline. One accent, and it belongs to a single job:
   the link that joins a price to the document it was read off.
   ========================================================================== */

/* 1 Fonts — self-hosted, latin subsets ---------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2') tech('variations'),
         url(../fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
    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: 'Newsreader';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(../fonts/newsreader-latin-wght-normal.woff2) format('woff2') tech('variations'),
         url(../fonts/newsreader-latin-wght-normal.woff2) format('woff2-variations');
    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: 'Newsreader';
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url(../fonts/newsreader-latin-wght-italic.woff2) format('woff2') tech('variations'),
         url(../fonts/newsreader-latin-wght-italic.woff2) format('woff2-variations');
    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(../fonts/ibm-plex-mono-latin-400-normal.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;
}

/* 2 Tokens ---------------------------------------------------------------- */
:root {
    color-scheme: light;
    /* Paper and ink. Warm off-white stock, warm near-black, two greys, two hairlines. */
    --paper: #f7f4ed;
    --paper-2: #f1ede2;
    --paper-3: #e6e1d3;
    --ink: #1b1a16;
    --ink-2: #57544a;
    --ink-3: #6e6a5e;
    --rule: #ded9cb;
    --rule-2: #c4bda9;
    /* One accent, indigo. Ghost injects its own pink through --ghost-accent-color and the site
       accent cannot be set through the API, so the palette is the theme's own and nothing reads it. */
    --accent: #23408a;
    --accent-text: var(--accent);
    --mark-neutral: #8f8a7b;
    /* The one bar a release is about. The generator writes a white label inside it, so this fill
       has to stay dark enough for white in both schemes; it is the only other place the hue appears. */
    --bar-strong: #23408a;
    --warn: #8a5200;
    --bad: #a03127;
    --ok: #1f6f4a;
    --shadow: none;

    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-heading: var(--gh-font-heading, var(--font-serif));
    --font-body: var(--gh-font-body, var(--font-sans));
    --heading-weight: 500;
    --heading-tracking: -0.015em;

    /* One unit, 8px. Every space and every line-height in this file is a multiple of it. */
    --u: .5rem;
    --s-1: var(--u);
    --s-2: calc(2 * var(--u));
    --s-3: calc(3 * var(--u));
    --s-4: calc(4 * var(--u));
    --s-5: calc(6 * var(--u));
    --s-6: calc(8 * var(--u));
    --s-7: calc(12 * var(--u));
    --s-8: calc(16 * var(--u));

    --fs-xs: .75rem;
    --fs-sm: .8125rem;
    --fs-md: .9375rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-title: 2rem;
    --fs-statement: 2.25rem;
    --lh-title: 2.5rem;
    --lh-statement: 2.5rem;

    --head-h: 3.5rem;
    --pad: 1rem;
    --w-max: 78rem;
    --w-wide: 64rem;
    --w-prose: 42rem;
    --w-body: 58rem;
    --w-rail: 15rem;
    --radius: 0;
}
@media (min-width: 48rem) {
    :root { --pad: 2rem; --fs-title: 2.5rem; --lh-title: 3rem; --fs-statement: 3rem; --lh-statement: 3.5rem; }
}
@media (min-width: 64rem) {
    :root { --fs-title: 3rem; --lh-title: 3.5rem; --fs-statement: 3.5rem; --lh-statement: 4rem; }
}
@media (min-width: 80rem) {
    :root { --pad: 3rem; }
}
html.font-sans {
    --font-heading: var(--gh-font-heading, var(--font-sans));
    --heading-weight: 600;
    --heading-tracking: -0.025em;
}

/* Dark is not the light palette inverted. The ground is warm sumi-black, the ink is the paper
   colour cooled by one step, and the accent lifts to a dusk blue that still reads as one hue. */
@media (prefers-color-scheme: dark) {
    html:not(.scheme-light) {
        color-scheme: dark;
        --paper: #14130f;
        --paper-2: #1b1a15;
        --paper-3: #24221b;
        --ink: #e9e4d7;
        --ink-2: #b4ae9d;
        --ink-3: #8f8a7b;
        --rule: #2f2c24;
        --rule-2: #47443a;
        --accent: #8fb0e8;
        --mark-neutral: #6b675c;
        --bar-strong: #4568b3;
        --warn: #e0b978;
        --bad: #f2a79b;
        --ok: #7fc7a2;
    }
}
html.scheme-dark {
    color-scheme: dark;
    --paper: #14130f;
    --paper-2: #1b1a15;
    --paper-3: #24221b;
    --ink: #e9e4d7;
    --ink-2: #b4ae9d;
    --ink-3: #8f8a7b;
    --rule: #2f2c24;
    --rule-2: #47443a;
    --accent: #8fb0e8;
    --mark-neutral: #6b675c;
    --bar-strong: #4568b3;
    --warn: #e0b978;
    --bad: #f2a79b;
    --ok: #7fc7a2;
}

/* 3 Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + var(--s-2)); }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5rem;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
/* Ordinary links are ink with a hairline under them. The accent is spent on one thing only, below. */
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--rule-2); }
a:hover { text-decoration-color: currentColor; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
time, .num { font-variant-numeric: tabular-nums slashed-zero; }
code, kbd, .mono { font-family: var(--font-mono); font-size: .875em; }
::selection { background: color-mix(in oklab, var(--accent), transparent 82%); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-4) 0; }

/* The seam. A price is worth nothing without the document it was read off, so the link from the
   number to that document is the one place on the site that carries colour. */
.seam,
.rr-table td a,
.rr-source-list li a,
.rr-doc__link,
.post-content a[target="_blank"] {
    color: var(--accent-text);
    text-decoration-color: color-mix(in oklab, var(--accent-text), transparent 55%);
}
.seam:hover,
.rr-table td a:hover,
.rr-source-list li a:hover,
.rr-doc__link:hover,
.post-content a[target="_blank"]:hover { text-decoration-color: currentColor; }

/* 4 Utilities ------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--w-max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s-2); top: -3rem; z-index: 100; padding: var(--s-1) var(--s-2); background: var(--ink); color: var(--paper); text-decoration: none; }
.skip-link:focus { top: var(--s-1); }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.sep { color: var(--rule-2); margin: 0 .1em; }
.eyebrow { font-size: var(--fs-sm); line-height: 1rem; color: var(--ink-3); letter-spacing: .01em; }
.eyebrow__type, .type { text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-xs); line-height: 1rem; font-weight: 500; color: var(--ink-3); }
.eyebrow a { color: var(--ink-2); text-decoration-color: var(--rule-2); }
.eyebrow a:hover { color: var(--ink); }
.section-title { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.section-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.section-foot { margin-top: var(--s-2); font-size: var(--fs-sm); }
.text-link { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 500; text-decoration: none; color: var(--ink); }
.text-link:hover { text-decoration: underline; text-decoration-color: var(--rule-2); }
.icon { display: inline-block; vertical-align: -.12em; flex: none; }

/* Blocks, not buttons: a square of ink, or a hairline outline. Nothing is raised off the page. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
    min-height: 2.5rem; padding: var(--s-1) var(--s-2); border-radius: var(--radius);
    border: 1px solid transparent; background: transparent;
    font-size: var(--fs-md); font-weight: 500; line-height: 1.5rem; text-decoration: none; white-space: nowrap;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink-2); }
.btn--ghost { border-color: var(--rule-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { min-height: 2rem; padding: 0 var(--s-1); font-size: var(--fs-sm); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.field__label { font-size: var(--fs-sm); line-height: 1rem; color: var(--ink-2); font-weight: 500; }
.field__input {
    width: 100%; min-height: 2.5rem; padding: var(--s-1); border: 1px solid var(--rule-2); border-radius: var(--radius);
    background: var(--paper); color: var(--ink); font-size: var(--fs-md); line-height: 1.5rem;
    transition: border-color .12s ease;
}
.field__input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.field__input::placeholder { color: var(--ink-3); opacity: .8; }
select.field__input { appearance: none; -webkit-appearance: none; padding-right: var(--s-4); background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }

/* 5 Header ---------------------------------------------------------------- */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); }
.site-head__inner { display: flex; align-items: center; gap: var(--s-3); min-height: var(--head-h); }
.brand { display: inline-flex; align-items: baseline; gap: var(--s-1); color: var(--ink); text-decoration: none; flex: none; }
.brand__mark { color: var(--ink); align-self: center; display: inline-flex; }
.brand__name { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-xl); letter-spacing: -0.01em; line-height: 1.5rem; }
html.font-sans .brand__name { font-weight: 600; letter-spacing: -0.02em; font-size: 1.125rem; }
.brand__descriptor { font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); padding-left: var(--s-1); border-left: 1px solid var(--rule-2); line-height: 1rem; }
.brand__logo { height: 1.75rem; width: auto; }
.site-nav { flex: 1; min-width: 0; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); }
.nav-item a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 .125rem; font-size: var(--fs-md); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.nav-item a:hover { color: var(--ink); box-shadow: inset 0 -1px 0 var(--rule-2); }
.nav-item.is-current a { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.site-actions { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.action { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-width: 2.5rem; min-height: 2.5rem; padding: 0 var(--s-1); border: 0; background: transparent; font-size: var(--fs-md); color: var(--ink-2); text-decoration: none; }
.action:hover { color: var(--ink); }
.action__kbd { font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-3); border: 1px solid var(--rule); padding: 0 .25rem; line-height: 1rem; }
.menu-toggle { display: none; margin-left: auto; width: 2.75rem; height: 2.75rem; border: 0; background: transparent; position: relative; }
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { display: block; width: 1.125rem; height: 1px; background: var(--ink); position: absolute; left: 50%; margin-left: -.5625rem; transition: transform .12s ease, opacity .12s ease; }
.menu-toggle__bars { top: 50%; }
.menu-toggle__bars::before { content: ''; top: -6px; margin-left: 0; left: 0; }
.menu-toggle__bars::after { content: ''; top: 6px; margin-left: 0; left: 0; }
.is-open .menu-toggle__bars { background: transparent; }
.is-open .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.is-open .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 63.99rem) {
    .brand__descriptor { display: none; }
    .site-head__inner { gap: var(--s-1); }
    .brand__name { font-size: 1.125rem; }
    .brand__mark svg { width: 18px; height: 18px; }
    .action__label, .action__kbd { display: none; }
    .menu-toggle { display: inline-flex; align-items: center; justify-content: center; order: 3; margin-left: 0; }
    .site-actions { margin-left: auto; order: 2; }
    .site-nav { order: 4; flex-basis: 100%; display: none; padding-bottom: var(--s-1); }
    .nav-list { flex-direction: column; gap: 0; }
    .nav-item a { display: flex; min-height: 3rem; font-size: 1rem; border-top: 1px solid var(--rule); }
    .nav-item a:hover, .nav-item.is-current a { box-shadow: none; }
    .site-head.is-open .site-nav, html.no-js .site-nav { display: block; }
    .site-head__inner { flex-wrap: wrap; row-gap: 0; }
}
/* Touch: nothing tappable smaller than 40px, the source link on a stacked price row included. */
@media (pointer: coarse) {
    .nav-item a, .action, .btn, details.rr-faq summary, .pagination__link { min-height: 2.5rem; }
    .site-foot__nav a, .rail__list a, .rail__toc-list a, .rr-source-list li a, .rr-table--stack td:last-child a { display: inline-flex; align-items: center; min-height: 2.5rem; }
}

/* 6 Footer ---------------------------------------------------------------- */
.site-foot { margin-top: var(--s-8); border-top: 1px solid var(--ink); background: var(--paper); color: var(--ink-2); font-size: var(--fs-md); }
.site-foot__inner { display: grid; gap: var(--s-4); padding-top: var(--s-4); padding-bottom: var(--s-4); }
@media (min-width: 48rem) { .site-foot__inner { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.site-foot__about { max-width: 42ch; }
.site-foot__brand { display: inline-flex; align-items: center; gap: var(--s-1); text-decoration: none; color: var(--ink); }
.site-foot__brand .brand__mark { display: inline-flex; width: 1.5rem; height: 1.5rem; }
.site-foot__brand .brand__name { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.0625rem; letter-spacing: var(--heading-tracking); }
.site-foot__claim { margin-top: var(--s-2); line-height: 1.5rem; text-wrap: pretty; }
.site-foot__count { margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.5rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.site-foot__count strong { color: var(--ink); font-weight: 400; }
.site-foot__head { font-size: var(--fs-xs); line-height: 1rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2); }
.site-foot__nav ul, .site-foot__nav .nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.site-foot__nav a { color: var(--ink-2); text-decoration: none; }
.site-foot__nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); }
.site-foot__base { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); justify-content: space-between; padding-top: var(--s-2); padding-bottom: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--fs-sm); line-height: 1.25rem; color: var(--ink-3); }
.site-foot__base p { margin: 0; max-width: 60ch; }

/* 7 Home: statement, illustration, vendor grid --------------------------- */
/* Ma: the statement gets a column and a wide margin of nothing beside it, not a centred block. */
.home { display: flex; flex-direction: column; min-height: calc(100vh - var(--head-h)); }
.home__hero { display: grid; gap: var(--s-4); padding-top: var(--s-5); padding-bottom: var(--s-5); }
@media (min-width: 64rem) {
    .home__hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); align-items: start; padding-top: var(--s-6); padding-bottom: var(--s-6); }
    .home__text { grid-column: 1 / span 7; }
    .home__art { grid-column: 9 / -1; }
}
.home-statement { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-statement); line-height: var(--lh-statement); letter-spacing: var(--heading-tracking); max-width: 20ch; }
/* The subline is the caption voice: Newsreader italic, one step quieter than the statement. */
.home-subline { margin-top: var(--s-3); font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: var(--fs-lg); line-height: 1.75rem; color: var(--ink-2); max-width: 44ch; text-wrap: pretty; }
.stat-line { margin-top: var(--s-4); padding-top: var(--s-2); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0 var(--s-4); font-size: var(--fs-sm); line-height: 1.5rem; color: var(--ink-3); }
.stat-line b { color: var(--ink); font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums slashed-zero; }
.home__art { display: none; color: var(--ink-3); justify-self: end; }
@media (min-width: 64rem) { .home__art { display: block; width: min(100%, 20rem); } }
.illo { width: 100%; height: auto; display: block; }
.illo__label { fill: var(--ink-3); font-family: var(--font-sans); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.illo--chain { max-width: 40rem; margin: var(--s-4) 0; color: var(--ink-3); }
.home__vendors { padding-bottom: var(--s-7); flex: 1; }

/* The grid has a downbeat and a rest. Twelve cells on twelve columns, in four bars —
   6·3·3, 4·4·4, 3·3·3·3, 6·6 — so the leading vendor is read first and the eye is given
   somewhere to pause. Hairlines separate them; there are no cards. */
.vendor-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.vendor-card { min-width: 0; }
.vendor-card__link { display: grid; grid-template-rows: auto 1fr auto; row-gap: var(--s-2); height: 100%; padding-top: var(--s-2); padding-bottom: var(--s-3); border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: border-color .12s ease; }
.vendor-card__link:hover { border-top-color: var(--ink); }
.vendor-card__link:hover .vendor-card__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; text-decoration-color: var(--rule-2); }
/* A fixed height here keeps every vendor name in a bar on one line, whether the category runs to
   one line or two. Without it the names step up and down and the bar loses its beat. */
.vendor-card__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2); align-items: center; min-height: 2.5rem; }
.vendor-card__top .mark { width: 2rem; height: 2rem; }
.vendor-card__top .mark__letter { font-size: 1rem; }
/* Two lines keep the vendor names on one baseline across a row; a third would push one card's name down. */
.vendor-card__category { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); line-height: 1rem; text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* Names start on one line across a bar, prices end on one line: the space between them is the give. */
.vendor-card__name { align-self: start; font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--heading-weight); letter-spacing: -0.015em; line-height: 2rem; overflow-wrap: break-word; }
.vendor-card__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); align-items: end; }
.vendor-card__id { display: grid; gap: 0; min-width: 0; }
/* The figure is the point of the cell, so it is set like a ledger line: mono, tabular, ink. */
.vendor-card__figure { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 400; line-height: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums slashed-zero; text-wrap: pretty; overflow-wrap: break-word; }
/* What the vendor will not tell you, or that we found it anyway. Nearly every card in the top twelve
   carries one, so it stays quiet metadata under the number it explains. */
.vendor-card__note { margin-top: var(--s-1); font-size: var(--fs-xs); line-height: 1rem; color: var(--ink-3); text-wrap: pretty; }
.vendor-card__note--found { color: var(--ink-2); }
.vendor-card__arrow { color: var(--rule-2); align-self: end; line-height: 0; }
.vendor-card__link:hover .vendor-card__arrow { color: var(--ink); }
.vendor-card--empty { grid-column: 1 / -1; padding: var(--s-4) 0; color: var(--ink-3); border-top: 1px solid var(--rule); }

/* Tablet: two columns, the downbeat across both, one rest in the middle. */
@media (min-width: 40rem) and (max-width: 63.99rem) {
    .vendor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-3); row-gap: var(--s-3); }
    .vendor-card:nth-child(1) { grid-column: span 2; }
    .vendor-card:nth-child(1) .vendor-card__link { border-top-color: var(--ink); }
    .vendor-card:nth-child(1) .vendor-card__name { font-size: var(--fs-2xl); line-height: 2.5rem; }
    .vendor-card:nth-child(7), .vendor-card:nth-child(8) { margin-top: var(--s-3); }
}
@media (min-width: 64rem) {
    .vendor-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); row-gap: var(--s-4); }
    .vendor-card { grid-column: span 3; }
    .vendor-card__link { min-height: 9rem; }
    /* bar 1 — the downbeat and two after it */
    .vendor-card:nth-child(1) { grid-column: span 6; }
    .vendor-card:nth-child(1) .vendor-card__link { border-top-color: var(--ink); }
    .vendor-card:nth-child(1) .vendor-card__name { font-size: 2.25rem; line-height: 2.5rem; }
    .vendor-card:nth-child(1) .vendor-card__figure { font-size: 1rem; line-height: 1.5rem; }
    .vendor-card:nth-child(1) .vendor-card__top .mark { width: 2.5rem; height: 2.5rem; }
    .vendor-card:nth-child(2), .vendor-card:nth-child(3) { grid-column: span 3; }
    /* bar 2 */
    .vendor-card:nth-child(n+4):nth-child(-n+6) { grid-column: span 4; }
    /* the rest: a bar's worth of silence before the last two */
    .vendor-card:nth-child(n+7):nth-child(-n+10) { grid-column: span 3; margin-top: var(--s-4); }
    /* bar 4 — two wide cells close it, laid out as ledger lines: the same data turned on its side,
       so the grid resolves into the one-line list that follows it. */
    .vendor-card:nth-child(n+11) { grid-column: span 6; }
    .vendor-card:nth-child(n+11) .vendor-card__link { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); grid-template-rows: auto auto; column-gap: var(--s-3); row-gap: var(--s-1); min-height: 0; }
    .vendor-card:nth-child(n+11) .vendor-card__top, .vendor-card:nth-child(n+11) .vendor-card__name { grid-column: 1; }
    .vendor-card:nth-child(n+11) .vendor-card__name { align-self: start; }
    .vendor-card:nth-child(n+11) .vendor-card__foot { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
}

/* Everything past the first twelve: one line each, same data, a tenth of the height. */
.vendor-more__head { margin-top: var(--s-7); margin-bottom: var(--s-2); font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.vendor-more { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.vendor-more__item { border-bottom: 1px solid var(--rule); }
.vendor-more__link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; min-height: 2.5rem; padding: var(--s-1) 0; color: var(--ink); text-decoration: none; }
.vendor-more__link:hover .vendor-more__name { text-decoration: underline; text-decoration-color: var(--rule-2); }
.vendor-more__id { display: grid; gap: 0; min-width: 0; }
.vendor-more__name { font-size: var(--fs-md); font-weight: 500; line-height: 1.25rem; letter-spacing: -0.005em; overflow-wrap: break-word; }
.vendor-more__category { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1rem; }
/* The figure carries the contract count as well as the price now, so it is given the width to sit on
   two lines instead of three. */
.vendor-more__figure { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.25rem; color: var(--ink-2); font-variant-numeric: tabular-nums slashed-zero; text-align: right; max-width: 17rem; text-wrap: pretty; }
.vendor-more__note { display: block; font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1rem; color: var(--ink-3); }
.ledger__date--none { display: none; }
@media (min-width: 40rem) { .ledger__date--none { display: block; } }

@media (max-width: 40rem) {
    .vendor-more__link { grid-template-columns: auto minmax(0, 1fr); }
    .vendor-more__figure { grid-column: 2; text-align: left; max-width: none; }
}

/* Vendor mark: logo from the tag's feature image, else a monogram. A square of hairline, no fill:
   twelve tinted tiles would put twelve accent colours on a page that is allowed one. */
.mark { --brand: var(--ink); display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); flex: none; overflow: hidden; }
.mark--l { width: 3.5rem; height: 3.5rem; }
.mark--m { width: 3rem; height: 3rem; }
.mark--s { width: 1.75rem; height: 1.75rem; }
.mark__img { width: 100%; height: 100%; object-fit: contain; padding: 14%; }
.mark__letter { display: block; width: 100%; padding-left: .62em; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.125rem; line-height: 1; letter-spacing: 4em; white-space: nowrap; overflow: hidden; }
.mark--l .mark__letter { font-size: 1.5rem; }
.mark--m .mark__letter { font-size: 1.25rem; }
.mark--s .mark__letter { font-size: .875rem; }

/* 8 Ledger + archives ----------------------------------------------------- */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ledger__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 0 var(--s-3); align-items: start; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.ledger__date { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger__main { min-width: 0; }
.ledger__meta { font-size: var(--fs-xs); line-height: 1.5rem; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-1); }
.ledger__tag { color: var(--ink-2); text-decoration: none; }
.ledger__tag:hover { text-decoration: underline; text-decoration-color: var(--rule-2); }
.ledger__title { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 500; line-height: 1.5rem; letter-spacing: -0.005em; }
.ledger__title a { color: var(--ink); text-decoration: none; }
.ledger__title a:hover { text-decoration: underline; text-decoration-color: var(--rule-2); }
.ledger__excerpt { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.25rem; max-width: 70ch; font-variant-numeric: tabular-nums; }
.ledger__arrow { color: var(--rule-2); padding-top: var(--s-1); }
.ledger__row:hover .ledger__arrow { color: var(--ink); }
.ledger__empty { padding: var(--s-3) 0; color: var(--ink-3); }
.ledger--compact .ledger__row { padding: var(--s-1) 0; }
.ledger--compact .ledger__excerpt { display: none; }
@media (max-width: 47.99rem) {
    .ledger__row { grid-template-columns: minmax(0, 1fr) auto; }
    .ledger__date { grid-column: 1 / -1; line-height: 1rem; }
}
.archive { padding-bottom: var(--s-6); }
/* No max-width here: tag.hbs puts .wrap on this element, and a narrower box would centre the head. */
.archive-head { padding-top: var(--s-6); padding-bottom: var(--s-5); }
.archive-head .post-title { margin-top: var(--s-1); }
.archive-head .standfirst { margin-top: var(--s-2); }
.archive-count { margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.5rem; font-variant-numeric: tabular-nums; }
.archive-groups { display: grid; gap: var(--s-6); padding-bottom: var(--s-4); }
.archive-group .section-title { margin-bottom: var(--s-2); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-3) 0; font-size: var(--fs-sm); }
.pagination__link { display: inline-flex; align-items: center; color: var(--ink); font-weight: 500; text-decoration: none; }
.pagination__link:hover { text-decoration: underline; text-decoration-color: var(--rule-2); }
.pagination__link.is-disabled { color: var(--rule-2); }
.pagination__status { color: var(--ink-3); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* 9 Post layouts ---------------------------------------------------------- */
.post { padding-top: var(--s-6); }
.post-head { width: 100%; max-width: var(--w-max); margin: 0 auto; padding: 0 var(--pad) var(--s-5); }
.post-head--narrow { max-width: calc(var(--w-prose) + 2 * var(--pad)); }
.post-head--mark { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.post-head--mark .mark { margin-top: var(--s-1); }
/* On a phone the mark sits above the title like a seal, rather than taking 80px off the measure. */
@media (max-width: 40rem) {
    .post-head--mark { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
    .post-head--mark .mark { margin-top: 0; }
}
.post-head__text { min-width: 0; }
.post-title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-title); letter-spacing: var(--heading-tracking); line-height: var(--lh-title); max-width: 24ch; margin-top: var(--s-1); }
/* The standfirst is a caption, so it takes the serif italic; on a vendor page it is a price, so it
   takes the ledger face instead. */
.standfirst { margin-top: var(--s-2); font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: 1.25rem; line-height: 2rem; color: var(--ink-2); max-width: 52ch; font-variant-numeric: tabular-nums; }
.post--vendor .standfirst, .post--sku .standfirst { font-family: var(--font-mono); font-style: normal; font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; }
.post-head--narrow .post-title, .post-head--narrow .standfirst { max-width: none; }
.post-meta { margin-top: var(--s-3); padding-top: var(--s-1); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0 var(--s-3); font-size: var(--fs-sm); line-height: 1.5rem; color: var(--ink-3); }
.post-meta a { color: var(--ink-2); text-decoration-color: var(--rule-2); }
.post-meta a:hover { color: var(--ink); }
.post-meta time { font-family: var(--font-mono); font-size: var(--fs-xs); }
.post-grid { width: 100%; max-width: var(--w-max); margin: 0 auto; padding: 0 var(--pad); display: grid; gap: var(--s-5); }
@media (min-width: 64rem) {
    .post-grid { grid-template-columns: minmax(0, 1fr) var(--w-rail); column-gap: var(--s-7); align-items: start; }
    .rail { position: sticky; top: calc(var(--head-h) + var(--s-3)); max-height: calc(100vh - var(--head-h) - var(--s-4)); overflow-y: auto; scrollbar-width: thin; }
}
.post-body { min-width: 0; max-width: var(--w-body); }
.post-body--narrow { width: 100%; max-width: calc(var(--w-prose) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.post-figure { width: 100%; max-width: var(--w-wide); margin: 0 auto var(--s-5); padding: 0 var(--pad); }
.post-figure__img { width: 100%; }
.post-figure__caption { margin-top: var(--s-1); font-family: var(--font-heading); font-style: italic; font-size: var(--fs-md); line-height: 1.5rem; color: var(--ink-3); }

.rail { font-size: var(--fs-sm); line-height: 1.25rem; color: var(--ink-2); }
.rail__block { padding: var(--s-2) 0; border-top: 1px solid var(--rule); }
.rail__block:first-child { border-top: 0; padding-top: 0; }
.rail__title { font-size: var(--fs-xs); line-height: 1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 500; margin-bottom: var(--s-1); }
.rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.rail__list a, .rail__toc-list a { color: var(--ink-2); text-decoration: none; }
.rail__list a:hover, .rail__toc-list a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); }
.rail__toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.rail__toc-list a.is-current { color: var(--ink); box-shadow: inset 2px 0 0 var(--ink); padding-left: var(--s-1); margin-left: calc(-1 * var(--s-1)); }
.rail__dates time { color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.related { margin-top: var(--s-6); }
.related .section-title { margin-bottom: var(--s-2); }
.vendor-link { margin-top: var(--s-5); font-size: var(--fs-md); }
/* The citation is the site's own proof of itself: a hairline, the line to quote, and a button. */
.cite { margin-top: var(--s-6); padding-top: var(--s-2); border-top: 1px solid var(--ink); }
.cite__title { font-size: var(--fs-xs); line-height: 1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 500; }
.cite__text { margin-top: var(--s-1); font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.5rem; color: var(--ink-2); overflow-wrap: anywhere; max-width: var(--w-prose); }
.cite__actions { margin-top: var(--s-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.cite .btn { margin-top: var(--s-2); }
.post-comments { margin-top: var(--s-6); }

/* 10 Post content + Ghost cards ------------------------------------------- */
/* Nearly every paragraph here carries a price, so figures are tabular throughout. */
.post-content { font-size: 1.0625rem; line-height: 1.75rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.post-content > * { margin-top: var(--s-3); margin-bottom: 0; }
.post-content > :first-child { margin-top: 0; }
.post-content > p, .post-content > ul, .post-content > ol, .post-content > h2, .post-content > h3, .post-content > h4, .post-content > blockquote:not(.rr-quote), .post-content > .kg-callout-card, .post-content > .kg-toggle-card, .post-content > .kg-button-card, .post-content > .kg-header-card, .post-content > .kg-signup-card, .post-content > .kg-bookmark-card, .post-content > .kg-file-card, .post-content > .kg-product-card, .post-content > .kg-audio-card, .post-content > details, .post-content > .rr-notice, .post-content > .rr-answer, .post-content > .rr-faq, .post-content > .rr-gap, .post-content > .rr-lede, .post-content > .rr-doc, .post-content > .rr-locked, .post-content > .rr-log, .post-content > .rr-quote { max-width: var(--w-prose); }
/* A section head is a hairline and a word. The space above it is the rest between two sections. */
.post-content h2 { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-2xl); letter-spacing: var(--heading-tracking); line-height: 2.5rem; margin-top: var(--s-7); padding-top: var(--s-2); border-top: 1px solid var(--ink); }
html.font-sans .post-content h2 { font-size: 1.5rem; }
.post-content h3 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.75rem; margin-top: var(--s-4); }
.post-content h4 { margin-top: var(--s-3); font-size: var(--fs-sm); line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.post-content ul, .post-content ol { padding-left: var(--s-3); }
.post-content li { margin-top: var(--s-1); }
.post-content li::marker { color: var(--ink-3); }
.post-content strong { font-weight: 600; }
.post-content code { background: var(--paper-2); padding: .1em .35em; }
.post-content pre { background: var(--paper-2); border-left: 2px solid var(--rule-2); padding: var(--s-2); overflow-x: auto; font-size: var(--fs-sm); line-height: 1.5rem; }
.post-content pre code { background: none; padding: 0; font-size: inherit; }
.post-content blockquote:not(.rr-quote) { margin-left: 0; padding-left: var(--s-2); border-left: 2px solid var(--rule-2); color: var(--ink-2); font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; line-height: 2rem; }
.post-content blockquote.kg-blockquote-alt { border: 0; padding: 0; text-align: center; font-size: 1.5rem; }
.post-content figure { margin-left: 0; margin-right: 0; }
.post-content figcaption, .post-content .kg-card figcaption { margin-top: var(--s-1); font-family: var(--font-heading); font-style: italic; font-size: var(--fs-md); line-height: 1.5rem; color: var(--ink-3); text-align: left; }
.post-content .kg-card { margin-top: var(--s-4); }
.post-content .kg-embed-card iframe { max-width: 100%; }
.post-content hr { margin: var(--s-5) 0; }
.post-content .kg-width-wide, .post-content .kg-width-full { max-width: none; }
.post-body--narrow .post-content .kg-width-wide, .post-body--narrow .post-content .rr-table-wrap, .post-body--narrow .post-content .rr-chart, .post-body--narrow .post-content table {
    width: min(var(--w-wide), calc(100vw - 2 * var(--pad)));
    margin-left: calc(50% - min(var(--w-wide), calc(100vw - 2 * var(--pad))) / 2);
}
.post-body--narrow .post-content .kg-width-full { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
/* Ghost's own card styles round their corners; nothing else on the page is rounded, so square them. */
.post-content .kg-button-card .kg-btn, .post-content .kg-signup-card .kg-signup-card-button { border-radius: var(--radius); font-family: var(--font-sans); }
.post-content img, .post-content .kg-callout-card, .post-content .kg-header-card, .post-content .kg-bookmark-card { border-radius: var(--radius); }

/* Tables: the ledger. Figures in the mono face, right-aligned and tabular, so a column of prices
   reads as a column. Rules are hairlines; the head sits under one firm line and nothing is boxed. */
.post-content table, .rr-table { width: 100%; font-size: var(--fs-sm); line-height: 1.25rem; font-variant-numeric: tabular-nums slashed-zero; }
.post-content table { display: block; overflow-x: auto; }
.post-content .rr-table-wrap table { display: table; overflow: visible; }
.post-content table caption, .rr-table caption { caption-side: top; text-align: left; padding: 0 0 var(--s-1); font-family: var(--font-heading); font-style: italic; font-size: var(--fs-md); line-height: 1.5rem; color: var(--ink-2); }
.post-content th, .post-content td, .rr-table th, .rr-table td { text-align: left; vertical-align: top; padding: var(--s-1) var(--s-2) var(--s-1) 0; border-bottom: 1px solid var(--rule); }
.post-content th:last-child, .post-content td:last-child, .rr-table th:last-child, .rr-table td:last-child { padding-right: 0; }
.post-content thead th, .rr-table thead th { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1rem; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--ink); vertical-align: bottom; }
.post-content tbody th, .rr-table tbody th { font-weight: 500; color: var(--ink); }
.post-content tfoot td, .rr-table tfoot td { border-bottom: 0; border-top: 1px solid var(--rule-2); font-weight: 500; }
.post-content tr:hover td, .rr-table tbody tr:hover td { background: var(--paper-2); }
.rr-num, .post-content td.rr-num, .post-content th.rr-num { text-align: right; font-variant-numeric: tabular-nums slashed-zero; }
.rr-table td.rr-num, .post-content td.rr-num { font-family: var(--font-mono); color: var(--ink); }
/* the figure is one unbreakable token; the unit beside it may wrap, so a long unit never widens the column */
.rr-unit { display: inline-block; font-family: var(--font-sans); color: var(--ink-3); font-size: .8em; margin-left: .2em; }
.rr-nowrap { white-space: nowrap; }
.rr-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; overscroll-behavior-x: contain;
    background:
        linear-gradient(to right, var(--paper) 30%, transparent) left center,
        linear-gradient(to left, var(--paper) 30%, transparent) right center,
        radial-gradient(farthest-side at 0 50%, color-mix(in oklab, var(--ink), transparent 86%), transparent) left center,
        radial-gradient(farthest-side at 100% 50%, color-mix(in oklab, var(--ink), transparent 86%), transparent) right center;
    background-repeat: no-repeat;
    background-size: 2.5rem 100%, 2.5rem 100%, .75rem 100%, .75rem 100%;
    background-attachment: local, local, scroll, scroll;
}
.rr-table-wrap > figcaption { font-family: var(--font-heading); font-style: italic; font-size: var(--fs-md); line-height: 1.5rem; color: var(--ink-3); margin-top: var(--s-1); }
.rr-table--dense th, .rr-table--dense td { padding-top: .25rem; padding-bottom: .25rem; font-size: var(--fs-sm); }
.rr-table .rr-part, .rr-part { font-family: var(--font-mono); font-size: .8125em; color: var(--ink-2); }
.rr-table .rr-tier { color: var(--ink-3); white-space: nowrap; }

/* SKU tables: the part number and its band are secondary to the product name and the price. */
.rr-table--sku td { vertical-align: top; }
.rr-table--sku .rr-sku__name { display: block; font-weight: 500; color: var(--ink); line-height: 1.25rem; }
.rr-table--sku .rr-part { display: block; margin-top: .125rem; }
.rr-table--sku .rr-sku__desc { display: block; margin-top: .125rem; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1rem; max-width: 42ch; text-wrap: pretty; }
.rr-table--sku .rr-tier { display: block; margin-top: .125rem; font-size: var(--fs-xs); white-space: normal; }
/* A vendor's own words for a unit can run to sixty characters; cap the column so it cannot widen the table. */
.rr-table--sku .rr-unitcell { max-width: 15rem; }
.rr-off { display: block; margin-top: .125rem; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.rr-page { display: block; margin-top: .125rem; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
/* Awards: the unit price leads, the contract total is the supporting number under it. */
.rr-sub { display: block; margin-top: .125rem; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.rr-table--award .rr-sku__desc { max-width: none; }
/* The award table's five columns are fixed, so the product name can be capped by position; left uncapped it
   took a third of the width and pushed the table past its container at 1024px. */
.rr-table--award td:nth-child(2) { max-width: 11rem; }

/* 11 Content kit (rr-*) --------------------------------------------------- */
/* Long tokens (URLs, hashes, part numbers) wrap instead of widening the page. */
.post-content :is(p, li, dd, dt, td, th, figcaption, blockquote) { overflow-wrap: break-word; }
.rr-table td a, .rr-source-list a { overflow-wrap: break-word; }
.rr-doc__link, .rr-doc__hash { overflow-wrap: anywhere; }
@media (max-width: 40rem) { .rr-table td a, .rr-source-list a { overflow-wrap: anywhere; } }

/* The standing note above the answer is a rubric, not a box: one hairline, one size down. */
.rr-notice { padding: 0 0 0 var(--s-2); border-left: 1px solid var(--rule-2); background: none; border-radius: 0; font-size: var(--fs-sm); line-height: 1.25rem; color: var(--ink-3); }
.rr-notice strong { color: var(--ink-2); font-weight: 500; }
.rr-notice--warn { border-left: 2px solid var(--warn); color: var(--ink-2); }
.rr-notice--error { border-left: 2px solid var(--bad); color: var(--ink-2); }
/* The answer is the solo: the page's one large voice, and everything under it is quiet. */
.rr-answer { margin-top: var(--s-4); font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.01em; color: var(--ink); max-width: 32ch; text-wrap: balance; font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) { .rr-answer { font-size: 2rem; line-height: 2.5rem; } }
/* The gap the page exists to fill: a tier the vendor names but will not price. The tier itself is the
   one word set in the italic, since it is the thing being quoted back at the vendor. */
.rr-gap { margin-top: var(--s-3); font-size: var(--fs-lg); line-height: 1.75rem; color: var(--ink); max-width: var(--w-prose); text-wrap: pretty; }
.rr-gap b { font-family: var(--font-heading); font-style: italic; font-weight: 500; font-size: 1.0625em; }
.rr-lede { margin-top: calc(-1 * var(--s-1)); margin-bottom: var(--s-2); font-family: var(--font-heading); font-style: italic; font-size: var(--fs-lg); line-height: 1.75rem; color: var(--ink-2); max-width: var(--w-prose); text-wrap: pretty; }
.rr-standfirst { font-size: var(--fs-lg); line-height: 1.75rem; color: var(--ink-2); max-width: var(--w-prose); }

/* The count line under the answer, ruled like a ledger: figure over label, all on one baseline. */
.rr-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: var(--s-2) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.rr-facts > div { display: flex; flex-direction: column-reverse; min-width: 5rem; }
.rr-facts dt { font-size: var(--fs-xs); line-height: 1rem; color: var(--ink-3); }
.rr-facts dd { margin: 0; font-family: var(--font-mono); font-size: 1.375rem; font-weight: 400; letter-spacing: -0.01em; line-height: 2rem; font-variant-numeric: tabular-nums slashed-zero; }
.rr-facts dd .rr-unit { font-size: .6em; }
.rr-facts dd small { font-size: .7em; color: var(--ink-2); }

.rr-conf { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border: 1px solid var(--rule-2); font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; line-height: 1; color: var(--ink); background: var(--paper); vertical-align: -.25em; }
.rr-conf--a { border-color: var(--ink); }
.rr-conf--b { border-color: var(--warn); color: var(--warn); }
.rr-conf--c { border-color: var(--bad); color: var(--bad); }
.rr-flag { display: inline-flex; align-items: flex-start; gap: var(--s-1); margin-top: .25rem; font-size: var(--fs-xs); line-height: 1rem; color: var(--warn); }
.rr-flag::before { content: '⚑'; flex: none; }
.rr-flag--bad { color: var(--bad); }

/* The document itself. Two hairlines and the address of the thing; the link is the seam. */
.rr-doc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); background: none; font-size: var(--fs-sm); line-height: 1.5rem; color: var(--ink-2); }
.rr-doc__type { grid-row: 1 / span 3; align-self: start; font-size: var(--fs-xs); line-height: 1.5rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 500; }
.rr-doc__link { font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
/* The hash is a <code>, and a chip of paper-2 behind forty hex characters is a box we do not need. */
.rr-doc__hash, .post-content .rr-doc__hash { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5rem; color: var(--ink-3); overflow-wrap: anywhere; background: none; padding: 0; }
.rr-doc__meta { font-size: var(--fs-xs); line-height: 1.5rem; color: var(--ink-3); }

.rr-range { margin: 0; padding: 0; border: 0; background: none; max-width: var(--w-prose); }
.rr-range > figcaption { font-family: var(--font-heading); font-style: italic; font-size: var(--fs-md); line-height: 1.5rem; color: var(--ink-2); }
.rr-range .rr-dist { margin-top: var(--s-4); }

.rr-dist { --min: 0; --p25: 25; --med: 50; --p75: 75; --max: 100; --you: 50; margin: var(--s-4) 0 var(--s-1); padding-top: var(--s-3); }
.rr-dist__track { position: relative; height: 6px; background: var(--paper-3); }
.rr-dist__iqr { position: absolute; top: 0; bottom: 0; left: calc(var(--p25) * 1%); width: calc((var(--p75) - var(--p25)) * 1%); background: var(--mark-neutral); }
.rr-dist__med { position: absolute; top: -5px; bottom: -5px; left: calc(var(--med) * 1%); width: 1px; background: var(--ink); }
.rr-dist__you { position: absolute; top: 50%; left: calc(var(--you) * 1%); transform: translate(-50%, -50%); }
.rr-dist__you i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--paper); }
.rr-dist__you b { position: absolute; bottom: calc(100% + var(--s-1)); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 400; color: var(--ink); background: var(--paper); padding: 0 .2rem; }
.rr-dist__scale { display: flex; justify-content: space-between; margin-top: var(--s-1); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rr-dist__scale span:nth-child(2) { color: var(--ink-2); }
.rr-dist__legend { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); margin-top: var(--s-1); font-size: var(--fs-xs); line-height: 1.5rem; color: var(--ink-3); }
.rr-dist__legend i { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin-right: var(--s-1); background: var(--mark-neutral); }
.rr-dist__legend i.you { border-radius: 50%; background: var(--accent); }
.rr-dist__legend i.med { width: 1px; background: var(--ink); }

.rr-locked { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--s-2); align-items: center; padding: var(--s-2) 0; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); font-size: var(--fs-sm); line-height: 1.5rem; color: var(--ink-2); }
.rr-locked__dots { display: inline-flex; gap: 4px; grid-row: 1 / span 2; }
.rr-locked__dots i { width: 8px; height: 8px; background: var(--paper-3); }
.rr-locked__dots i.is-on { background: var(--ink); }
.rr-locked strong { color: var(--ink); font-size: var(--fs-md); }
.rr-locked a { font-weight: 500; }

.rr-badge { display: inline-block; padding: 0 .375rem; border: 1px solid var(--rule-2); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); line-height: 1.25rem; white-space: nowrap; vertical-align: middle; }
.rr-badge--muted { color: var(--ink-3); border-style: dashed; }
.rr-badge--ok { color: var(--ok); border-color: currentColor; }
.rr-badge--warn { color: var(--warn); border-color: currentColor; }
.rr-badge--type { text-transform: uppercase; letter-spacing: .08em; }

.rr-quote { margin: 0; padding: 0 0 0 var(--s-2); border-left: 2px solid var(--rule-2); }
.rr-quote blockquote { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; line-height: 2rem; color: var(--ink); }
.rr-quote figcaption { margin-top: var(--s-1); font-size: var(--fs-sm); line-height: 1.25rem; color: var(--ink-3); }
.rr-quote figcaption a { color: var(--ink-2); }

.rr-contribute { display: grid; gap: var(--s-2); max-width: var(--w-prose); padding-top: var(--s-2); border-top: 1px solid var(--rule-2); }
.rr-contribute__note { font-size: var(--fs-sm); line-height: 1.25rem; color: var(--ink-3); }
@media (max-width: 40rem) { .rr-contribute .field-row { grid-template-columns: 1fr; } }

.rr-log ol { list-style: none; margin: var(--s-2) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.rr-log li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-2); padding: var(--s-1) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-md); line-height: 1.5rem; }
.rr-log li time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.rr-log__empty { color: var(--ink-3); font-size: var(--fs-md); }
@media (max-width: 40rem) {
    .rr-log li { grid-template-columns: 1fr; gap: 0; }
    .rr-col-2 { display: none; }
    /* Price tables become one block per row: name and price on the first line, source under it.
       The header row stays in the DOM for assistive tech; the caption carries the unit visually. */
    .rr-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .rr-table--stack tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-2); padding: var(--s-1) 0; border-bottom: 1px solid var(--rule); }
    .rr-table--stack tbody tr:hover td { background: none; }
    .rr-table--stack td { border: 0; padding: 0; }
    .rr-table--stack td:first-child { grid-column: 1; font-weight: 500; }
    .rr-table--stack td.rr-num { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
    .rr-table--stack td:last-child { grid-column: 1 / -1; margin-top: .25rem; font-size: var(--fs-xs); }
    /* The page number rides beside the source rather than under it: one line saved on every row. */
    .rr-table--stack td:last-child .rr-page { display: inline; margin-left: var(--s-1); }
    .rr-table--stack tfoot td { padding: var(--s-1) 0; }
}

/* Questions and answers, ruled top and bottom. The generator emits a div of h3 + p; a hand-written
   page may use details + summary, and both read the same. */
.rr-faq { border-top: 1px solid var(--rule); padding: var(--s-2) 0; max-width: var(--w-prose); }
.rr-faq + .rr-faq { margin-top: 0; }
.rr-faq:last-of-type { border-bottom: 1px solid var(--rule); }
details.rr-faq { padding: var(--s-1) 0; }
details.rr-faq summary { cursor: pointer; font-weight: 500; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 2.5rem; font-size: 1rem; line-height: 1.5rem; }
details.rr-faq summary::-webkit-details-marker { display: none; }
details.rr-faq summary::after { content: '+'; font-family: var(--font-mono); color: var(--ink-3); flex: none; }
details.rr-faq[open] summary::after { content: '−'; }
details.rr-faq > :not(summary) { margin-top: var(--s-1); padding-bottom: var(--s-1); color: var(--ink-2); font-size: 1rem; line-height: 1.5rem; max-width: 62ch; }
.rr-faq h3 { font-family: var(--font-sans); font-size: var(--fs-md); line-height: 1.5rem; font-weight: 600; margin-top: var(--s-3); }
.rr-faq h3:first-child { margin-top: 0; }
.rr-faq p { margin-top: 0; font-size: 1rem; line-height: 1.5rem; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }

.rr-chart { margin: 0; padding: 0; border: 0; background: none; }
.rr-chart svg { width: 100%; height: auto; color: var(--ink-2); font-family: var(--font-sans); }
.rr-chart figcaption { margin-top: var(--s-1); font-family: var(--font-heading); font-style: italic; font-size: var(--fs-md); line-height: 1.5rem; color: var(--ink-3); }
.rr-chart__title { font-size: 1rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.5rem; }
.rr-chart__sub { font-size: var(--fs-sm); line-height: 1.5rem; color: var(--ink-3); margin-bottom: var(--s-2); }
.rr-chart .bar { fill: var(--mark-neutral); }
.rr-chart .bar--accent { fill: var(--bar-strong); }
.rr-chart .grid { stroke: var(--rule); stroke-width: 1; }
.rr-chart .axis { stroke: var(--rule-2); stroke-width: 1; }
.rr-chart text { fill: var(--ink-3); font-size: 11px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rr-chart text.label { fill: var(--ink); font-family: var(--font-sans); font-weight: 500; }

.rr-download-wrap { margin-top: var(--s-3); }
.rr-download { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 2.5rem; padding: var(--s-1) var(--s-2); border: 1px solid var(--rule-2); text-decoration: none; color: var(--ink); font-size: var(--fs-md); font-weight: 500; background: var(--paper); }
.rr-download:hover { border-color: var(--ink); }
.rr-download small { color: var(--ink-3); font-weight: 400; font-size: var(--fs-xs); font-family: var(--font-mono); }
.rr-download::before { content: 'CSV'; font-family: var(--font-mono); font-size: .6875rem; padding: 0 .25rem; background: var(--ink); color: var(--paper); }

.rr-result { padding: var(--s-2) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); background: none; box-shadow: var(--shadow); }
.rr-result__eyebrow { font-size: var(--fs-xs); line-height: 1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 500; }
.rr-result__you { margin-top: var(--s-1); font-family: var(--font-heading); font-size: 1.75rem; line-height: 2.5rem; letter-spacing: -0.01em; }
.rr-result__you strong { font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.rr-result__line { margin-top: var(--s-2); font-size: 1rem; line-height: 1.5rem; color: var(--ink-2); }
.rr-result__line strong { color: var(--ink); font-family: var(--font-mono); font-weight: 400; }
.rr-result__delta { margin-top: var(--s-2); padding-top: var(--s-1); border-top: 1px solid var(--rule); font-size: 1rem; line-height: 1.5rem; color: var(--ink); }
.rr-result__delta strong { font-family: var(--font-mono); font-weight: 400; }
.rr-result .rr-dist { margin-top: var(--s-4); }

.rr-source-list { list-style: none; margin: 0; padding: 0; display: grid; font-size: var(--fs-md); border-top: 1px solid var(--rule); }
.rr-source-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); gap: var(--s-2); padding: var(--s-1) 0; border-bottom: 1px solid var(--rule); }
.rr-source-list .rr-source__type { font-family: var(--font-mono); color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.5rem; text-transform: uppercase; letter-spacing: .04em; overflow-wrap: anywhere; }
.rr-source-list li a { text-decoration: none; overflow-wrap: anywhere; line-height: 1.5rem; }
.rr-source-list li a:hover { text-decoration: underline; }
/* Kit lists are not prose lists: no bullet indent from .post-content ul. */
.post-content .rr-source-list, .post-content .rr-dims { padding-left: 0; }
@media (max-width: 48rem) {
    .rr-source-list li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Units: pictogram and words, no chips. The icon carries the shape, the words carry the unit. */
.rr-dims { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.rr-dim { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0; border: 0; font-size: var(--fs-sm); line-height: 1.5rem; color: var(--ink-2); background: none; }
.rr-dim .icon { color: var(--ink-3); flex: none; }
.rr-evidence { display: inline-block; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.rr-evidence--paid { color: var(--ok); font-weight: 500; }

/* 12 Gate ------------------------------------------------------------------ */
/* The public part of a gated page sits in its own wrapper, so the content rhythm that hangs off
   .post-content > * has to be restated for one level down. */
.gate-preview > * { margin-top: var(--s-3); margin-bottom: 0; }
.gate-preview > :first-child { margin-top: 0; }
.gate-preview > :is(p, ul, ol, h2, h3, h4, details, .rr-notice, .rr-answer, .rr-faq, .rr-gap, .rr-lede, .rr-doc, .rr-locked) { max-width: var(--w-prose); }
.gate-note { margin-top: var(--s-4); padding: 0 0 0 var(--s-2); border-left: 1px solid var(--rule-2); color: var(--ink-3); font-size: var(--fs-md); line-height: 1.5rem; max-width: var(--w-prose); }

/* Ghost prints its own upgrade CTA inside {{content}} when the reader cannot see the rest of a members
   post. It arrives centred, rounded, in Ghost's own font, with white type on the site accent set inline
   — which on this paper reads as a white box with invisible words. Every colour it sets is restated here
   in the theme's tokens. Ghost's stylesheet is injected by {{ghost_head}}, after this file, so each rule
   is prefixed with .post-content to outrank it, and its two inline styles need !important. Nothing here
   reads --ghost-accent-color, and Ghost's own words are left alone. */
.post-content .gh-post-upgrade-cta {
    margin-top: var(--s-4); align-items: stretch; text-align: left;
    font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.5rem; color: var(--ink);
}
.post-content .gh-post-upgrade-cta-content {
    align-items: flex-start; text-align: left; max-width: var(--w-prose);
    font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.5rem;
    padding: var(--s-3) 0 var(--s-4);
    border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
    border-radius: var(--radius); box-shadow: var(--shadow);
    background-color: transparent !important; color: var(--ink);
}
.post-content .gh-post-upgrade-cta h2 {
    font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-xl);
    letter-spacing: var(--heading-tracking); line-height: 2rem; color: var(--ink); text-wrap: balance;
    margin: 0; padding: 0; border: 0;
}
.post-content .gh-post-upgrade-cta p { margin-top: var(--s-2); color: var(--ink-2); }
.post-content .gh-post-upgrade-cta small { font-size: var(--fs-md); line-height: 1.5rem; color: var(--ink-2); }
.post-content .gh-post-upgrade-cta a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--rule-2); }
.post-content .gh-post-upgrade-cta a:hover { color: var(--ink); opacity: 1; text-decoration-color: currentColor; }
/* Both ways in are hit targets: the block button, and the sign-in link under it, are 40px tall. */
.post-content .gh-post-upgrade-cta small a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.post-content .gh-post-upgrade-cta a.gh-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin: var(--s-3) 0 0; min-height: 2.5rem; padding: var(--s-1) var(--s-3);
    border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow);
    background: var(--accent) !important; color: var(--paper) !important;
    font-family: var(--font-body); font-size: var(--fs-md); font-weight: 500; text-decoration: none;
}
.post-content .gh-post-upgrade-cta a.gh-btn:hover { opacity: 1; background: var(--ink) !important; color: var(--paper) !important; }
/* partials/content-cta.hbs is the theme's own gate and the one that should render. Where it has,
   Ghost's default is a second gate saying the same thing. */
.post-content .gate-preview ~ .gh-post-upgrade-cta, .post-content .gate-note ~ .gh-post-upgrade-cta { display: none; }

/* 14 Errors ---------------------------------------------------------------- */
.error-page { padding-top: var(--s-8); padding-bottom: var(--s-6); max-width: calc(var(--w-prose) + 2 * var(--pad)); }
.error-page .post-title { margin-top: var(--s-1); }
.error-page .standfirst { margin-top: var(--s-2); }
.error-page__actions { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* 15 Print, motion, forced colours ---------------------------------------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .rr-dist__iqr, .rr-dist__you i, .rr-locked__dots i.is-on { forced-color-adjust: none; } .rr-conf { border-width: 2px; } }
@media print {
    :root { --paper: #fff; --paper-2: #fff; --paper-3: #eee; --ink: #000; --ink-2: #222; --ink-3: #555; --rule: #bbb; --rule-2: #888; --accent: #000; --bar-strong: #000; }
    .site-head, .site-actions, .menu-toggle, .rail__toc, .post-comments, .cite__actions, .skip-link { display: none !important; }
    .post-grid { grid-template-columns: 1fr; }
    .rail { position: static; border-top: 1px solid #888; padding-top: var(--s-2); margin-top: var(--s-4); }
    .post-content a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .8em; color: #555; word-break: break-all; }
    a { color: #000; }
}