/* Self-hosted for landscape. Regenerate with fetch_fonts.py. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjgn7MsNo.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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjjH7M.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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/jizBRFtNs2ka5fXjeivQ4LroWlx-6zsTjmbI.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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/jizBRFtNs2ka5fXjeivQ4LroWlx-6zUTjg.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: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.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: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/static/fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.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: 'Antonio';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/gNMEW3NwSYq_9WD3yHoiFbez.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: 'Antonio';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/gNMEW3NwSYq_9WD3yHQiFQ.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 Landscape — a ranking desk. White paper, claret, black masthead. */

:root {
    --paper: #ffffff;
    --card: #ffffff;
    --ink: #121212;
    --ink-soft: #5a5a5a;
    --line: #e6e6e6;
    --line-firm: #cfcfcf;
    --accent: #9f1239;
    --accent-soft: #fce7ee;
    --flag: #be123c;
    --gutter: clamp(1.1rem, 4vw, 3rem);
    --wide: 68rem;
    --read: 40rem;
    --display: "Instrument Serif", Georgia, serif;
    --ui: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--ui);
    font-size: 16.5px;
    line-height: 1.6;
}

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

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

a {
    color: var(--accent);
    text-underline-offset: 0.14em;
}

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

/* ---------- masthead ---------- */

.head {
    background: #121212;
    border-bottom: 0;
    color: #fff;
}

.head-in {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 1.5rem var(--gutter) 1.1rem;
}

.title {
    font-family: var(--display);
    font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
    letter-spacing: -0.01em;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    line-height: 1;
}

.strap {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: #b8b8b8;
    max-width: 42rem;
}

.tabs {
    border-top: 1px solid #2a2a2a;
    background: #121212;
    position: sticky;
    top: 0;
    z-index: 10;
}

.tabs-in {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.6rem;
}

.tabs a {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #b0b0b0;
    text-decoration: none;
    padding: 0.75rem 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.tabs a:hover {
    color: #fff;
}

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

.tab-drop {
    position: relative;
}

.tab-drop>summary {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #b0b0b0;
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

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

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

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

.tab-drop.is-on>summary {
    border-bottom-color: var(--flag);
}

/* 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. */
.tab-drop ul {
    display: none;
    position: absolute;
    top: 100%;
    left: -0.9rem;
    min-width: 16rem;
    margin: 0;
    padding: 0.45rem 0;
    list-style: none;
    background: #1c1c1c;
    border: 1px solid #3a3a3a;
    box-shadow: none;
    z-index: 60;
}

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

.tab-drop a {
    display: block;
    padding: 0.5rem 0.9rem;
    border-bottom: 0;
    margin: 0;
    color: #e8e8e8;
}

.tab-drop a:hover {
    color: #fff;
    background: #2a2a2a;
}

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

    .tab-drop ul {
        position: static;
        left: auto;
        min-width: 0;
        border: 0;
        box-shadow: none;
        padding: 0.1rem 0 0.4rem 0.9rem;
    }
}

/* Every hover state here changes only colour, so one short transition covers
   them all and stops the whole page flicking between two states. */
.tabs a,
.tab-drop>summary,
.operators a,
.chip,
.c-name a,
.alsolist a,
tbody td,
table.rank tbody tr {
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

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

    .tabs a,
    .tab-drop>summary,
    .operators a,
    .chip,
    .c-name a,
    .alsolist a,
    tbody td,
    table.rank tbody tr {
        transition: none;
    }
}

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

main {
    max-width: var(--wide);
    margin: 0 auto;
    padding: clamp(1.8rem, 5vw, 3rem) var(--gutter) 0;
}

.eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--flag);
    margin: 0 0 0.6rem;
}

h1 {
    font-family: var(--display);
    font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.4rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.03;
    margin: 0;
    max-width: 22ch;
    text-wrap: balance;
}

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

.stamp {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
    margin: 1.1rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line-firm);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.lead {
    margin: 1.8rem 0 0;
}

.lead img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

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

.prose {
    padding-top: 2rem;
}

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

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

.prose h2 {
    font-family: var(--display);
    font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 2.6rem 0 0.7rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--ink);
    scroll-margin-top: 4rem;
}

.prose h3 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 1.8rem 0 0.45rem;
}

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

.prose li {
    margin: 0.3em 0;
}

figure {
    margin: 2rem 0;
}

figure img {
    width: 100%;
}

figcaption {
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--ink-soft);
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--line);
    max-width: var(--read);
}

/* ---------- operator cards ---------- */

.operators {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.operators>* {
    margin: 0;
}

.operators a {
    display: block;
    height: 100%;
    padding: 1.1rem 1.2rem;
    background: var(--card);
    border: 1px solid var(--line-firm);
    text-decoration: none;
    color: var(--ink);
}

.operators a:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.operators strong {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1.1;
    margin-bottom: 0.4rem;
}

.operators em {
    display: block;
    font-style: normal;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--ink-soft);
}

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

.prose table,
table {
    width: 100%;
    max-width: none;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.85rem;
    line-height: 1.45;
    background: var(--card);
    border: 1px solid var(--line-firm);
    font-variant-numeric: tabular-nums lining-nums;
}

/* Wide comparison grids scroll rather than squeeze. */
.scroll {
    overflow-x: auto;
    margin: 2rem -0.5rem;
    padding: 0 0.5rem;
}

.scroll table {
    margin: 0;
    min-width: 46rem;
}

thead th {
    position: sticky;
    top: 0;
    background: var(--ink);
    color: #f4f2ee;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    padding: 0.6rem 0.75rem;
    vertical-align: bottom;
}

tbody th,
tbody td:first-child {
    font-weight: 600;
    color: var(--ink);
    background: #f8f5f6;
}

td,
tbody th {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

td:last-child,
tbody th:last-child {
    border-right: 0;
}

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

tbody tr:hover td {
    background: var(--accent-soft);
}

/* ---------- source note ---------- */

.source {
    margin: 2rem 0;
    padding: 0.9rem 1.1rem;
    background: var(--accent-soft);
    border-left: 3px solid var(--line-firm);
    font-size: 0.85rem;
    color: var(--ink-soft);
    max-width: none;
}

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

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

.source strong {
    color: var(--ink);
}

/* ---------- qa ---------- */

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

.qa h2 {
    font-family: var(--display);
    font-size: 1.7rem;
    font-weight: 400;
    margin: 0 0 1rem;
}

.qa dl {
    margin: 0;
    max-width: 46rem;
}

.qa dt {
    font-weight: 600;
    font-size: 0.97rem;
    margin-top: 1.1rem;
}

.qa dd {
    margin: 0.25rem 0 0;
    color: var(--ink-soft);
    font-size: 0.94rem;
}

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

.foot {
    margin-top: 3rem;
    border-top: 1px solid var(--line-firm);
    background: var(--card);
}

.foot-in {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 1.6rem var(--gutter) 3rem;
}

.foot-title {
    font-family: var(--display);
    font-size: 1.15rem;
    margin: 0 0 0.3rem;
}

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

.foot nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    font-size: 0.82rem;
}

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

/* Claret on black bands; the deeper mix keeps contrast on white paper. */
:root {
    --gold: #fb7185;
    --gold-lift: #fda4af;
    --gold-ink: #9f1239;
    --black: #121212;
    --poster: Antonio, "Arial Narrow", Impact, sans-serif;
}

/* ---------- editorial components: bands, posters, stats, plates ---------- */

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

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

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

.band.dark {
    color: #e7e6e3;
}

.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: 600;
    font-size: clamp(1.85rem, 1.2rem + 3.2vw, 3.3rem);
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 1.1rem;
    text-wrap: balance;
    color: var(--ink);
}

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

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

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

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

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

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

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

.stat b,
.stat strong {
    display: block;
    font-family: var(--poster);
    font-weight: 600;
    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: #a6a49e;
}

/* ---------- 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(--card);
    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: #a6a49e;
}

/* 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: 600;
    font-size: 1.22rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0.85rem 0 0.5rem;
    color: inherit;
}

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

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

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

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

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

.title {
    font-family: var(--display);
    text-transform: none;
    letter-spacing: -0.01em;
    font-weight: 400;
    color: #fff;
}

.tabs a,
.tab-drop>summary {
    font-family: var(--ui);
}

.tabs a[aria-current="page"] {
    border-bottom-color: var(--flag);
}

.entry-head h1 {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -0.015em;
    text-transform: none;
}

.qa h2 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.7rem;
    letter-spacing: -0.01em;
    text-transform: none;
    text-align: left;
    background: none;
    color: var(--ink);
    padding: 0 0 0.4rem;
    margin: 0 0 1rem;
    border-bottom: 2px solid var(--accent);
}

/* 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;
}

/* ---------- the ranked directory ---------- */

/* The table needs the full measure, not the reading column the essays use. */
.entry.wide {
    max-width: none;
}

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

.table-wrap.sub {
    margin-top: 3.5rem;
}

.table-head {
    border-top: 3px solid var(--ink);
    padding-top: 0.9rem;
}

.table-head h2 {
    font-family: var(--poster);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
    line-height: 1;
    margin: 0;
}

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

/* ---------- filters ---------- */

.filters {
    display: grid;
    gap: 0.9rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 1.4rem 0 0;
    padding: 1.1rem 1.2rem;
    background: var(--card);
    border: 1px solid var(--line);
}

.filters fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.filters legend {
    padding: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border: 1px solid var(--line-firm);
    border-radius: 999px;
    font-size: 0.82rem;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
    background: var(--paper);
}

/* The radio itself is the accessible control; the pill is what is looked at. */
.chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.chip:hover {
    border-color: var(--accent);
}

.chip:has(input:checked) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

.chip:has(input:focus-visible) {
    outline: 2px solid var(--flag);
    outline-offset: 2px;
}

.filter-count {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ---------- the rank table ---------- */

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

table.rank thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ink);
    color: #fff;
    text-align: left;
    font-family: var(--poster);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.76rem;
    font-weight: 500;
    padding: 0.6rem 0.7rem;
    white-space: nowrap;
}

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

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

table.rank tbody tr:hover {
    background: var(--accent-soft);
}

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

.c-rank {
    font-family: var(--poster);
    font-size: 1.2rem;
    line-height: 1.1;
    color: var(--ink-soft);
    width: 2.5rem;
}

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

.c-name a:hover {
    color: var(--accent);
}

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

.c-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The ranked metric is the one number the table exists to show. */
.c-lead b {
    font-family: var(--poster);
    font-size: 1.35rem;
    line-height: 1;
    color: var(--gold-ink);
}

.none {
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.c-flag .yes,
.c-flag .no {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.c-flag .yes {
    background: var(--accent-soft);
    color: var(--accent);
}

.c-flag .no {
    background: #f3f3f3;
    color: var(--ink-soft);
}

.empty {
    padding: 2rem 0;
    text-align: center;
    color: var(--ink-soft);
}

.plainlist {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
}

.plainlist li {
    margin-bottom: 0.5rem;
}

/* Below the point where seven columns stop fitting, each row becomes a card and
   the column headings come back as labels on each cell. */
@media (max-width: 60rem) {
    table.rank thead {
        display: none;
    }

    table.rank,
    table.rank tbody,
    table.rank tr,
    table.rank td,
    table.rank tbody th {
        display: block;
        width: auto;
    }

    table.rank tbody tr {
        position: relative;
        border: 1px solid var(--line);
        margin-bottom: 0.7rem;
        padding: 0.9rem 0.9rem 0.5rem 3.2rem;
        background: var(--card);
    }

    table.rank .c-rank {
        position: absolute;
        left: 0.9rem;
        top: 0.8rem;
        padding: 0;
    }

    table.rank .c-name {
        padding: 0 0 0.6rem;
    }

    table.rank td:not(.c-rank) {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.25rem 0;
        border-top: 1px dotted var(--line);
    }

    table.rank td:not(.c-rank)::before {
        content: attr(data-label);
        font-size: 0.74rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }
}

/* ---------- brand profile ---------- */

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

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

.fact b {
    display: block;
    font-family: var(--poster);
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
    line-height: 1.05;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.fact:first-child b {
    color: var(--gold-ink);
}

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

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

table.spec th[scope="row"] {
    width: 40%;
    text-align: left;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 0.55rem 0.8rem 0.55rem 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

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

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

table.spec tr.total b {
    font-family: var(--poster);
    font-size: 1.25rem;
    color: var(--gold-ink);
}

.callout {
    margin: 0 0 1.8rem;
    padding: 0.9rem 1.1rem;
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
    font-size: 0.98rem;
}

.commentary {
    margin-top: 2.5rem;
    padding-top: 1.6rem;
    border-top: 3px solid var(--ink);
}

.commentary h2 {
    font-family: var(--poster);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.05;
    font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.9rem);
    margin: 0 0 0.9rem;
}

.commentary h3 {
    margin: 2rem 0 0.6rem;
    font-size: 1.1rem;
}

.commentary p,
.commentary ul {
    max-width: var(--read);
}

.commentary figure {
    margin: 1.6rem 0;
}

.provenance {
    margin: 2rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line-firm);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.alsolist {
    margin: 2rem 0 0;
}

.alsolist-label {
    margin: 0 0 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

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

.alsolist a {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--line-firm);
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--ink);
}

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

.league {
    margin: 1.8rem 0 2.2rem;
    max-width: none;
    overflow-x: auto;
}

.league table {
    min-width: 36rem;
}

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

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

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