/* ------------------------------------------------------------------------------------------
   Public stylesheet for a common website.
   No framework and no build step: this file is served as-is, so it is written mobile first
   (360px is the design target) and grows into wider layouts with a handful of media queries.

   Third-party code shares the page: ads (AdSense, Ad Manager), native widgets, social embeds,
   consent banners. So the element-wide rules below sit in :where() (specificity 0: any class of
   theirs wins), the icon rule only matches our own icons (svg focusable="false"), and the
   .article-body rules for media and quotes skip ad slots and embeds (see "Third-party" there).
   ------------------------------------------------------------------------------------------ */

:root {
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;

    --ink: #12161c;
    --ink-soft: #55606e;
    --ink-faint: #7b8694;
    --paper: #ffffff;
    --paper-alt: #f5f7fa;
    --line: #e2e7ee;
    --accent: #b3261e;
    --accent-ink: #ffffff;
    --focus: #1a73e8;

    --radius: 10px;
    --gap: 1rem;
    --gap-lg: 1.5rem;
    --wrap: 1120px;
    --header-h: 56px;

    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);

    /* Fluid type: comfortable on a phone, never gigantic on a desktop. */
    --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --fs-lead: clamp(1.5rem, 1.25rem + 1.6vw, 2.4rem);
    --fs-article: clamp(1.75rem, 1.35rem + 2.2vw, 2.85rem);
    --fs-h2: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    --fs-card: clamp(1.02rem, 0.97rem + 0.3vw, 1.18rem);
    --fs-small: 0.8125rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e8ecf2;
        --ink-soft: #a7b2c0;
        --ink-faint: #8792a1;
        --paper: #111418;
        --paper-alt: #171c22;
        --line: #262d36;
        --accent: #ff6b5e;
        --accent-ink: #14181d;
        --focus: #8ab4f8;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    }
}

/* ---- Reset ------------------------------------------------------------------------------- */

/* Inherited, not forced: a widget that sets content-box on its box keeps it for its insides. */
html { box-sizing: border-box; }
:where(*):not(:where(.article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list), .article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list) *, .article-title *, .article-standfirst *, body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer), body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer) *, ins, ins *, [id^="div-gpt-ad"] *, [id^="google_ads"] *, .gam-unit, .gam-unit *, .video-js, .video-js *, .no-style, .no-style *, .third-party, .third-party *)),
:where(*):not(:where(.article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list), .article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list) *, .article-title *, .article-standfirst *, body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer), body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer) *, ins, ins *, [id^="div-gpt-ad"] *, [id^="google_ads"] *, .gam-unit, .gam-unit *, .video-js, .video-js *, .no-style, .no-style *, .third-party, .third-party *))::before,
:where(*):not(:where(.article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list), .article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list) *, .article-title *, .article-standfirst *, body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer), body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer) *, ins, ins *, [id^="div-gpt-ad"] *, [id^="google_ads"] *, .gam-unit, .gam-unit *, .video-js, .video-js *, .no-style, .no-style *, .third-party, .third-party *))::after { box-sizing: inherit; }

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: anywhere;
}

/* Element-wide defaults, all at specificity 0 (:where) so anything a third party styles wins, and
   none of them reaching into third-party code at all: not what an ad script or a player put in the
   article or its title (see .article-body below), nor what is appended to <body> outside our layout
   (floating players, sticky ads), nor known ad / player boxes (ins, div-gpt-ad-*,
   google_ads*, .gam-unit, .video-js), nor anything wrapped in .no-style / .third-party. */
/* Images: only our own (the article's text images have their rules under .article-body);
   an ad's or a widget's picture keeps the browser's defaults. */
:where(.brand-logo, .lead-media img, .article-figure img, .card-media img, .side-thumb) { max-width: 100%; height: auto; border: 0; display: block; }

:where(a):not(:where(.article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list), .article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list) *, .article-title *, .article-standfirst *, body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer), body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer) *, ins, ins *, [id^="div-gpt-ad"] *, [id^="google_ads"] *, .gam-unit, .gam-unit *, .video-js, .video-js *, .no-style, .no-style *, .third-party, .third-party *)) { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
:where(a:hover):not(:where(.article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list), .article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list) *, .article-title *, .article-standfirst *, body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer), body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer) *, ins, ins *, [id^="div-gpt-ad"] *, [id^="google_ads"] *, .gam-unit, .gam-unit *, .video-js, .video-js *, .no-style, .no-style *, .third-party, .third-party *)) { text-decoration-color: currentColor; }

:where(h1, h2, h3, h4):not(:where(.article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list), .article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list) *, .article-title *, .article-standfirst *, body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer), body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer) *, ins, ins *, [id^="div-gpt-ad"] *, [id^="google_ads"] *, .gam-unit, .gam-unit *, .video-js, .video-js *, .no-style, .no-style *, .third-party, .third-party *)) { line-height: 1.22; margin: 0 0 .4em; font-weight: 700; letter-spacing: -0.012em; }
:where(p):not(:where(.article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list), .article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list) *, .article-title *, .article-standfirst *, body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer), body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer) *, ins, ins *, [id^="div-gpt-ad"] *, [id^="google_ads"] *, .gam-unit, .gam-unit *, .video-js, .video-js *, .no-style, .no-style *, .third-party, .third-party *)) { margin: 0 0 1em; }
:where(ul, ol):not(:where(.article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list), .article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list) *, .article-title *, .article-standfirst *, body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer), body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer) *, ins, ins *, [id^="div-gpt-ad"] *, [id^="google_ads"] *, .gam-unit, .gam-unit *, .video-js, .video-js *, .no-style, .no-style *, .third-party, .third-party *)) { margin: 0; padding: 0; }

:where(button, input, select, textarea):not(:where(.article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list), .article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list) *, .article-title *, .article-standfirst *, body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer), body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer) *, ins, ins *, [id^="div-gpt-ad"] *, [id^="google_ads"] *, .gam-unit, .gam-unit *, .video-js, .video-js *, .no-style, .no-style *, .third-party, .third-party *)) { font: inherit; color: inherit; }

:where(:focus-visible):not(:where(.article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list), .article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list) *, .article-title *, .article-standfirst *, body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer), body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer) *, ins, ins *, [id^="div-gpt-ad"] *, [id^="google_ads"] *, .gam-unit, .gam-unit *, .video-js, .video-js *, .no-style, .no-style *, .third-party, .third-party *)) {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* Our regions only: players and ads appended to <body> keep their own motion. */
    :where(.site-header, .site-main, .site-footer, .nav-backdrop) :where(*):not(:where(.article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list), .article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list) *, .article-title *, .article-standfirst *, body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer), body > :not(.skip-link, .site-header, .nav-backdrop, .site-main, .site-footer) *, ins, ins *, [id^="div-gpt-ad"] *, [id^="google_ads"] *, .gam-unit, .gam-unit *, .video-js, .video-js *, .no-style, .no-style *, .third-party, .third-party *)),
    :where(.site-header, .site-main, .site-footer, .nav-backdrop) { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Every icon in our markup is a stroked inline SVG marked focusable="false"; other SVGs on the
   page (ad badges, players, widgets) are not ours to restyle. */
:where(svg[focusable="false"]) {
    max-width: 100%;
    width: 1.35em;
    height: 1.35em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Helpers ----------------------------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 16px;
}

.wrap--narrow { max-width: 760px; }
/* Reading column of an article: title, meta, images and text all line up on the same measure. */
.wrap--article { max-width: 768px; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--accent);
    color: var(--accent-ink);
    padding: .75rem 1rem;
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 44px;
    padding: 0 1.1rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { filter: brightness(1.06); }

/* ---- Header ------------------------------------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--line);
}

.header-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-height: var(--header-h);
}

.brand {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    overflow: hidden;
}

.brand-name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-logo { max-height: 34px; width: auto; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius);
    color: inherit;
    cursor: pointer;
}
.icon-btn:hover { background: var(--paper-alt); }

/* Without JavaScript the drawer can never open, so both toggles stay hidden and the
   navigation and the search field are simply part of the page. */
.nav-toggle, .search-toggle, .nav-head { display: none; }
.js .nav-toggle, .js .search-toggle { display: inline-flex; }

/* ---- Navigation -------------------------------------------------------------------------- */

.site-nav {
    order: 3;
    flex: 1 0 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }

.nav-list {
    display: flex;
    gap: .25rem;
    list-style: none;
    padding: 0 0 .35rem;
}

.nav-list a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 .7rem;
    border-radius: var(--radius);
    white-space: nowrap;
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink-soft);
}
.nav-list a:hover { background: var(--paper-alt); color: var(--ink); }
.nav-list a.is-current { color: var(--accent); }

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(8, 11, 15, .5);
}
.nav-backdrop[hidden] { display: none; }

.nav-locked, .nav-locked body { overflow: hidden; }

/* ---- Search ------------------------------------------------------------------------------ */

.site-search {
    order: 4;
    flex: 1 0 100%;
    display: flex;
    gap: .5rem;
    padding-bottom: .5rem;
}

.site-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 .85rem;
    font-size: 16px; /* anything smaller makes iOS zoom the whole page on focus */
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-alt);
    cursor: pointer;
}
.search-submit:hover { background: var(--line); }

/* ---- Phone layout: drawer + collapsible search -------------------------------------------- */

@media (max-width: 767px) {
    .js .site-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        width: min(82vw, 320px);
        padding: .5rem 1rem 2rem;
        background: var(--paper);
        border-right: 1px solid var(--line);
        box-shadow: var(--shadow);
        transform: translateX(-102%);
        transition: transform .22s ease;
        overflow-y: auto;
    }
    .js .site-nav.is-open { transform: translateX(0); }

    .js .nav-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        min-height: var(--header-h);
        margin-bottom: .5rem;
        border-bottom: 1px solid var(--line);
    }

    .nav-title { font-weight: 800; }

    .js .nav-list {
        display: block;
        padding: 0;
    }
    .js .nav-list a {
        min-height: 48px;
        padding: 0 .5rem;
        font-size: 1.05rem;
        border-radius: 8px;
    }
    .js .nav-list li + li { border-top: 1px solid var(--line); }

    /* The search field is an overlay strip: hidden until the magnifier is tapped. */
    .js .site-search { display: none; }
    .js .site-search.is-open { display: flex; }
}

@media (min-width: 768px) {
    :root { --header-h: 64px; }

    .header-bar { flex-wrap: nowrap; gap: 1rem; }
    .brand { flex: 0 0 auto; margin-right: .5rem; }
    .brand-logo { max-height: 40px; }
    .site-nav { order: 0; flex: 1 1 auto; }
    .site-search { order: 0; flex: 0 0 clamp(200px, 26vw, 320px); padding-bottom: 0; }
    .js .site-search { display: flex; }
    /* The drawer and the magnifier belong to the phone layout: the menu and the field are
       both on screen here, so the two buttons would only be duplicates. */
    .js .nav-toggle, .js .search-toggle { display: none; }
}

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

.site-main { padding: 1.25rem 0 3rem; }

.site-footer {
    margin-top: 2rem;
    padding: 1.75rem 0 2.5rem;
    background: var(--paper-alt);
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .9rem;
}

.footer-inner { display: grid; gap: .75rem; }
.footer-text { margin: 0; }

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    list-style: none;
}
.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    font-weight: 600;
}
.footer-links a:hover { color: var(--ink); text-decoration: underline; }

@media (min-width: 768px) {
    .footer-inner { grid-template-columns: 1fr auto; align-items: center; }
    .footer-links a { min-height: 0; }
}

/* ---- Lead story -------------------------------------------------------------------------- */

.lead { margin-bottom: 2rem; }

.lead-media {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--paper-alt);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: .9rem;
}
.lead-media img { width: 100%; height: 100%; object-fit: cover; }

.lead-title { font-size: var(--fs-lead); margin-bottom: .45rem; }
.lead-title a { text-decoration: none; }
.lead-title a:hover { text-decoration: underline; }

.lead-excerpt {
    color: var(--ink-soft);
    font-size: 1.05rem;
    max-width: 62ch;
}

@media (min-width: 900px) {
    .lead {
        display: grid;
        grid-template-columns: 1.35fr 1fr;
        gap: var(--gap-lg);
        align-items: center;
    }
    .lead-media { margin-bottom: 0; }
}

/* ---- Blocks and cards -------------------------------------------------------------------- */

.block { margin: 2.25rem 0; }

.block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--ink);
}

.block-title { font-size: var(--fs-h2); margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.block-title a { text-decoration: none; }

.block-more {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
}
.block-more svg { width: 1em; height: 1em; }
.block-more:hover { color: var(--accent); }

.grid {
    display: grid;
    gap: var(--gap-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 560px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.card { display: flex; flex-direction: column; min-width: 0; }

.card-media {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--paper-alt);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: .65rem;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }

.card-media-empty {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--ink-faint);
}
.card-media-empty svg { width: 2rem; height: 2rem; opacity: .5; }

.card-body { display: flex; flex-direction: column; min-width: 0; }

.card-kicker {
    align-self: flex-start;
    font-size: var(--fs-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent);
    text-decoration: none;
    margin-bottom: .3rem;
}
.card-kicker:hover { text-decoration: underline; }

.card-title { font-size: var(--fs-card); margin: 0 0 .35rem; }
.card-title a { text-decoration: none; }
.card-title a:hover { text-decoration: underline; }

.card-excerpt {
    color: var(--ink-soft);
    font-size: .95rem;
    margin: 0 0 .5rem;
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .6rem;
    margin: auto 0 0;
    color: var(--ink-faint);
    font-size: var(--fs-small);
}
.card-meta > * + *::before { content: "·"; margin-right: .6rem; color: var(--line); }
.card-author { font-weight: 600; color: var(--ink-soft); }

.card--compact .card-media { aspect-ratio: 16 / 9; }

/* Search results read as a list, not a poster wall. */
.result-list { display: grid; gap: 1.25rem; }
.result-list .card--row { border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; }
.result-list .card--row:last-child { border-bottom: 0; }

@media (min-width: 560px) {
    .card--row { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; align-items: start; }
    .card--row .card-media { margin-bottom: 0; }
}

/* ---- Page heads, breadcrumb, empty states ------------------------------------------------- */

.breadcrumb { margin: .25rem 0 1rem; font-size: var(--fs-small); color: var(--ink-faint); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-right: .35rem; color: var(--line); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] {
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-head { margin-bottom: 1.5rem; }
.page-title { font-size: var(--fs-lead); margin-bottom: .3rem; }
.page-sub { color: var(--ink-soft); max-width: 62ch; }
.page-count { color: var(--ink-faint); font-size: var(--fs-small); margin: 0; }

.search-page-form { display: flex; gap: .5rem; margin: 1rem 0; }
.search-page-form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 .9rem;
    font-size: 16px;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.empty-state {
    padding: 2.5rem 1rem;
    margin: 1rem 0 2rem;
    text-align: center;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.empty-state h1, .empty-state h2 { font-size: var(--fs-h2); }
.empty-state p { color: var(--ink-soft); margin-bottom: .6rem; }

/* ---- Pagination -------------------------------------------------------------------------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin: 2rem 0 1rem;
}

.page-numbers { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; }

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
}
.page-link:hover { background: var(--paper-alt); }
.page-link.is-current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.page-link.is-disabled { color: var(--ink-faint); opacity: .55; }
.page-gap { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .3rem; color: var(--ink-faint); }

/* ---- Article ----------------------------------------------------------------------------- */

.article { margin-bottom: 2rem; }

.article-head { max-width: none; }
.article-title {
    /* Capped lower than the page titles: the column is narrower here. */
    font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.35rem);
    line-height: 1.2;
    margin-bottom: .55rem;
}

.article-standfirst {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: .75rem;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: var(--fs-small);
}
.article-meta .card-kicker { margin-bottom: 0; }
.article-author { font-weight: 600; color: var(--ink-soft); }

.article-figure {
    margin: 0 0 1.75rem;
    max-width: none;
}
.article-figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--paper-alt);
    border-radius: var(--radius);
}

/* The reading column: the one place on the site that is deliberately slow and roomy.
   The width comes from .wrap--article so every part of the article shares one edge.

   Third-party code puts things in here too: ad units (Ad Manager / AdSense wrappers, vinavine's
   .gam-unit), video players (video.js), embeds. They must look the way their owners made them, so
   the text rules below only match the article's own markup. That markup is easy to tell apart: the
   platform's sanitizer (code/app/Services/HtmlSanitizer.php) lets through plain tags only (p, h2,
   ul, blockquote, img, table…), never a class, an id, a div, a span or an iframe. So a rule matches
   an element without class or id that is not inside anything carrying one (or a div, iframe…):
   :where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *))
   (all :where/:not(:where), so it adds no specificity). Our own page buttons carry classes and have
   their own rules further down. */
.article-body {
    max-width: none;
    /* Settings › Typography can set these three (App\Support\Typography); unset, the defaults below.
       line-height is the spacing inside a paragraph; the space between paragraphs is
       --article-paragraph-spacing, on the paragraphs below. */
    font-family: var(--font-article, var(--font-serif));
    font-size: var(--article-font-size, clamp(1.0625rem, 1rem + 0.35vw, 1.185rem));
    line-height: var(--article-line-height, 1.75);
}

/* What a third party puts in the text (or, by an ad script's placement, in the title) would inherit
   the article's serif, size and spacing: give it the site's plain body text instead, as anywhere
   else on the page. Specificity 0, so every rule of its own wins. */
:where(.article-body > :is(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, figure, table, hr, br, img, a, strong, em, u, s, sub, sup, code), [class], [id]):not(.page-nav, .page-nav-bar, .page-nav-pill, .page-numbers, .chapter-list)),
:where(.article-title > *, .article-standfirst > *) {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 400;
    font-style: normal;
    line-height: 1.55;
    letter-spacing: normal;
    text-transform: none;
}

:where(.article-body > :not([class], [id]) + :not([class], [id], div, span, ins, section, aside, iframe, video, script)) { margin-top: 1.2em; }
.article-body p:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) { margin: 0; }
/* Settings › Typography › Paragraph spacing (App\Support\Typography); unset, paragraphs touch. */
.article-body p:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) + p:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) { margin-top: var(--article-paragraph-spacing, 0); }
.article-body a:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) { color: var(--accent); }

.article-body h2:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)),
.article-body h3:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)),
.article-body h4:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) {
    font-family: var(--font-sans);
    line-height: 1.25;
    margin: 2rem 0 .6rem;
}
.article-body h2:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) { font-size: 1.5em; }
.article-body h3:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) { font-size: 1.25em; }
.article-body h4:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) { font-size: 1.1em; }

.article-body ul:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)), .article-body ol:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) { padding-left: 1.3em; }
.article-body li + li:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) { margin-top: .4em; }

/* Pictures inside the text are centred on the column and never wider than it, whatever
   width the editor gave them; a paragraph that holds only an image gets its own breathing room. */
.article-body img:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) {
    display: block;
    /* No width here: a width the editor set on the image (its resize buttons) must survive. */
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: var(--radius);
    background: var(--paper-alt);
}
.article-body p:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)):has(> img:only-child) { margin-block: 1.75em; }

.article-body figure:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) { margin: 1.75rem 0; text-align: inherit; }
.article-body figcaption:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) {
    margin-top: .5rem;
    font-family: var(--font-sans);
    font-size: .85rem;
    line-height: 1.45;
    color: var(--ink-faint);
}

.article-body blockquote:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) {
    margin: 1.75rem 0;
    padding: .25rem 0 .25rem 1.1rem;
    border-left: 4px solid var(--accent);
    color: var(--ink-soft);
    font-style: italic;
}
.article-body blockquote p:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) { margin: 0; }
.article-body blockquote > * + *:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) { margin-top: .6em; }

.article-body pre:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) {
    overflow-x: auto;
    padding: 1rem;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: .9rem;
    line-height: 1.5;
}
.article-body code:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
}
.article-body :not(pre) > code:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) {
    padding: .1em .35em;
    background: var(--paper-alt);
    border-radius: 4px;
}

.article-body hr:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* Tables from the platform can be wide; the wrapper scrolls instead of stretching the page. */
.article-body table:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: .92rem;
    white-space: nowrap;
}
.article-body th:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)), .article-body td:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) {
    padding: .55rem .75rem;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.article-body th:where(:not([class], [id])):not(:where(.article-body :is([class], [id], div, span, ins, section, aside, iframe, video) *)) { background: var(--paper-alt); font-weight: 700; }

.article-pages { justify-content: flex-start; max-width: 68ch; }

/* ---- Tags, prev/next --------------------------------------------------------------------- */

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    max-width: 68ch;
    margin-top: 2rem;
}

.tag {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 .7rem;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
}
.tag:hover { color: var(--accent); border-color: var(--accent); }

.post-nav {
    display: grid;
    gap: .75rem;
    margin: 2rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.post-nav-link {
    display: block;
    padding: .9rem 1rem;
    min-height: 44px;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
}
.post-nav-link:hover { border-color: var(--accent); }

.post-nav-label {
    display: block;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-faint);
    margin-bottom: .2rem;
}
.post-nav-title { display: block; font-weight: 700; }
.post-nav-next { text-align: right; }

@media (min-width: 768px) {
    .post-nav { grid-template-columns: 1fr 1fr; }
    .post-nav-next { grid-column: 2; }
}

/* ---- Print: the article only --------------------------------------------------------------- */

@media print {
    .site-header,
    .nav-backdrop,
    .site-footer,
    .breadcrumb,
    .pagination,
    .post-nav,
    .tags,
    .block,
    .skip-link { display: none !important; }

    body { background: #fff; color: #000; font-size: 12pt; }

    .wrap { max-width: none; padding: 0; }

    .article-body,
    .article-head { max-width: none; }

    .article-body { font-size: 12pt; line-height: 1.5; }

    .article-body a { color: #000; text-decoration: underline; }
    .article-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }

    .article-figure img, .article-body img { max-height: 9cm; object-fit: contain; }

    h1, h2, h3 { break-after: avoid; }
    p, blockquote, figure, table { break-inside: avoid; }
}


/* ---- Two columns on wide screens: article left, sidebar right --------------------------- */

.with-sidebar-main { min-width: 0; }
/* One column layout: the article keeps its own measure, centred in the page. */
.single-col { max-width: 768px; margin-inline: auto; }

/* Below 1024px the sidebar is furniture a phone does not need: only the ads stay. */
.sidebar { display: none; }


.side-block { margin-bottom: 1.75rem; }
.side-title {
    margin: 0 0 .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--ink);
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.side-list { margin: 0; padding: 0; list-style: none; counter-reset: side; }
.side-list li + li { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--line); }

.side-item { display: flex; gap: .7rem; align-items: flex-start; text-decoration: none; color: inherit; }
.side-item:hover .side-headline { color: var(--accent); }
.side-thumb {
    flex: 0 0 76px;
    width: 76px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    background: var(--paper-alt);
}
.side-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.side-kicker {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
}
.side-headline { font-weight: 600; line-height: 1.35; font-size: .95rem; }
.side-date { font-size: var(--fs-small); color: var(--ink-faint); }

/* Ranked list: the number replaces the bullet and lines the headlines up. */
.side-list--ranked li { counter-increment: side; }
.side-list--ranked .side-item::before {
    content: counter(side);
    flex: 0 0 auto;
    min-width: 1.4rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink-faint);
}

@media (min-width: 1024px) {
    .with-sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 2.5rem;
        align-items: start;
    }
    .sidebar { display: block; }
    /* The article keeps its reading measure inside the left column. */
    .with-sidebar-main .article-head,
    .with-sidebar-main .article-body { max-width: 46rem; }
    /* Card grids lose the fourth column: the sidebar took that space. */
    .with-sidebar-main .grid { grid-template-columns: repeat(3, 1fr); }
}


/* ---- Walking through the pages of one article ------------------------------------------- */

/* All three styles size from two settings (Admin › Settings › Article pages), set inline on the nav:
   --pn-font, the text size every other size follows (icons, corners, the list button), and --pn-pad,
   the room inside the buttons. Phones get the whole block a little smaller. */
.page-nav, .page-nav-bar, .page-nav-pill { --pn-scale: 1; }
@media (max-width: 599px) {
    .page-nav, .page-nav-bar, .page-nav-pill { --pn-scale: .78; }
}

/* Fitting the room the buttons really have, whatever the style, the sizes set in the admin and the
   labels: the article column can be narrow on a wide screen too (two columns, framed themes), so each
   nav is a size container and its buttons size themselves on its width (cqi = 1% of it):
   - text: the admin's size, but at most N cqi (never under 12px);
   - side padding: the admin's padding, but at most a few cqi;
   - widths follow the labels (flex-basis: auto): the longer one ("Next Episode") gets its room first,
     what is left is shared;
   - a label never breaks inside a word; only a label too long for any phone ends with "…".
   Each cqi line follows the same line without it, for browsers older than container units. */
.page-nav, .page-nav-bar, .page-nav-pill { container-type: inline-size; }
.page-nav-btn, .pn-btn { min-width: 0; overflow-wrap: normal; white-space: nowrap; }
.page-nav-btn > span, .pn-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.page-nav-btn svg, .pn-btn svg { flex: none; }

/* Classic: two buttons in the button colour. */
.page-nav {
    display: flex;
    gap: .75rem;
    gap: min(.75rem, 2.5cqi);
    margin: 2rem 0 1rem;
    font-size: calc(var(--pn-font, 17px) * var(--pn-scale));
}
.page-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    font-size: 1em;
    font-size: max(12px, min(1em, 5.4cqi));
    padding: calc(var(--pn-pad, 14px) * var(--pn-scale)) calc(var(--pn-pad, 14px) * var(--pn-scale) * 1.4);
    padding: min(calc(var(--pn-pad, 14px) * var(--pn-scale)), 3.5cqi) min(calc(var(--pn-pad, 14px) * var(--pn-scale) * 1.4), 4cqi);
    border-radius: .5em;
    background: var(--page-nav-bg, #e60000);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    line-height: 1.25;
}
.page-nav-btn:hover, .page-nav-btn:focus-visible { filter: brightness(.92); color: #fff; text-decoration: none; }
.page-nav-btn svg { width: 1.15em; height: 1.15em; }
/* "Next" carries the reading flow, so it takes more of the room; "Prev" stays the quieter button. */
.page-nav-btn--prev { flex: 1 1 auto; }
.page-nav-btn--next { flex: 2 1 auto; }
/* One button alone spans the row instead of hugging one side. */
.page-nav-btn:only-child { flex: 1 1 100%; }

.page-numbers { margin: 0 0 1.5rem; }


/* ---- Page buttons: "bar" and "pill" styles, and the list of chapters ------------------------------
   Chosen in Admin › Settings › Article pages; --page-nav-bg is the button colour set there. */

.pn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    padding: calc(var(--pn-pad) * var(--pn-scale)) calc(var(--pn-pad) * var(--pn-scale) * 1.3);
    padding: min(calc(var(--pn-pad) * var(--pn-scale)), 3.5cqi) min(calc(var(--pn-pad) * var(--pn-scale) * 1.3), 3.5cqi);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: filter .15s, background-color .15s;
}
.pn-btn:hover, .pn-btn:focus-visible { text-decoration: none; filter: brightness(.94); }
.pn-btn.is-disabled { opacity: .55; cursor: default; filter: none; }

/* Bar: a framed row – grey back button, the list button, the coloured next button. */
.page-nav-bar {
    --pn-font: 22px;
    --pn-pad: 24px;
    max-width: 52rem;
    margin: 2.25rem auto 1.5rem;
    padding: .5rem;
    border: 1px solid #dfe6e2;
    border-radius: .9em;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .07);
    font-size: calc(var(--pn-font) * var(--pn-scale));
}
.page-nav-bar-row {
    display: flex;
    gap: .55em;
    gap: min(.55em, 2cqi);
    font-size: 1em;
    font-size: max(12px, min(1em, 4.6cqi));
}
.page-nav-bar .pn-btn { flex: 1 1 auto; border-radius: .72em; }
.page-nav-bar .pn-btn--next { flex-grow: 1.3; }
.page-nav-bar .pn-btn svg { width: 1.6em; height: 1.2em; }
@container (max-width: 360px) { .page-nav-bar .pn-btn { gap: .35em; } .page-nav-bar .pn-btn svg { width: 1.1em; } }
.page-nav-bar .pn-btn--prev { background: #eceeec; color: #8a908b; border: 1px solid #e1e4e1; }
.page-nav-bar .pn-btn--prev:hover { color: #6b716c; }
.page-nav-bar .pn-btn--next { background: var(--page-nav-bg, #188a5a); color: #fff; }
.page-nav-bar .pn-btn--next:hover, .page-nav-bar .pn-btn--next:focus-visible { color: #fff; }
/* Square, as tall as the buttons beside it. */
.pn-list {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    /* As wide as the buttons are tall: their line (1.2em), their padding, the prev button's border. */
    width: calc(1.2em + 2 * calc(var(--pn-pad) * var(--pn-scale)) + 2px);
    width: calc(1.2em + 2 * min(calc(var(--pn-pad) * var(--pn-scale)), 3.5cqi) + 2px);
    padding: 0;
    border: 2px solid var(--page-nav-bg, #188a5a);
    border-radius: .72em;
    background: color-mix(in srgb, var(--page-nav-bg, #188a5a) 8%, #fff);
    color: var(--page-nav-bg, #188a5a);
    font-size: inherit;
    cursor: pointer;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--page-nav-bg, #188a5a) 22%, transparent);
}
.pn-list:hover { background: color-mix(in srgb, var(--page-nav-bg, #188a5a) 15%, #fff); }
.pn-list svg { width: 1.3em; height: 1.3em; }

/* Pill: rounded buttons side by side (back paler), "List of chapters" as a link underneath. */
.page-nav-pill {
    --pn-font: 22px;
    --pn-pad: 20px;
    margin: 2.25rem 0 1.5rem;
    text-align: center;
    font-size: calc(var(--pn-font) * var(--pn-scale));
}
.page-nav-pill-row { display: flex; justify-content: center; gap: 1.4em; gap: min(1.4em, 2.5cqi); font-size: 1em; font-size: max(12px, min(1em, 5cqi)); }
.page-nav-pill .pn-btn {
    flex: 0 1 auto;
    /* Both pills at least 11em (a pair), unless the row cannot hold two of them. */
    min-width: min(11em, calc(50% - .7em));
    min-width: min(11em, calc(50% - 1.25cqi));
    padding-left: calc(var(--pn-pad) * var(--pn-scale) * 1.6);
    padding-left: min(calc(var(--pn-pad) * var(--pn-scale) * 1.6), 4cqi);
    padding-right: calc(var(--pn-pad) * var(--pn-scale) * 1.6);
    padding-right: min(calc(var(--pn-pad) * var(--pn-scale) * 1.6), 4cqi);
    border-radius: 999px;
    font-weight: 800;
    color: #fff;
}
.page-nav-pill .pn-btn svg { width: 1.1em; height: 1.1em; }
.page-nav-pill .pn-btn--prev { background: color-mix(in srgb, var(--page-nav-bg, #821c1f) 50%, #fff); }
.page-nav-pill .pn-btn--next { background: var(--page-nav-bg, #821c1f); }
.page-nav-pill .pn-btn:hover, .page-nav-pill .pn-btn:focus-visible { color: #fff; }
.page-nav-pill .pn-btn.is-disabled { opacity: .45; }
@container (max-width: 360px) { .page-nav-pill .pn-btn { gap: .3em; } }
.pn-list-link {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    margin-top: 1.4em;
    padding: .3em .45em;
    border: 0;
    background: none;
    color: var(--page-nav-bg, #821c1f);
    font: inherit;
    font-size: .95em;
    font-size: max(12px, min(.95em, 5cqi));
    cursor: pointer;
}
.pn-list-link:hover span { text-decoration: underline; }
.pn-list-link svg { width: 1.2em; height: 1.2em; }

/* The list of chapters (a modal dialog). */
.chapter-list {
    width: min(30rem, calc(100vw - 2rem));
    max-height: min(80vh, 40rem);
    padding: 0;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
    color: var(--ink);
}
.chapter-list::backdrop { background: rgba(15, 23, 42, .45); }
.chapter-list-head {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.chapter-list-head h2 { margin: 0; font-size: 1.15rem; }
.chapter-list-close { border: 0; background: none; font-size: 1.75rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0 .25rem; }
.chapter-list-items { list-style: none; margin: 0; padding: .5rem; }
.chapter-list-items a {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .7rem .9rem;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
}
.chapter-list-items a:hover { background: var(--paper-alt); text-decoration: none; }
.chapter-list-items a.is-current { background: color-mix(in srgb, var(--page-nav-bg, #b3261e) 10%, #fff); color: var(--page-nav-bg, #b3261e); }
.chapter-list-num { font-weight: 700; }
.chapter-list-title { font-size: .92rem; color: var(--ink-soft); }
.chapter-list-items a.is-current .chapter-list-title { color: inherit; }


/* The page buttons sit inside .article-body (post.blade.php): keep the article's text styles – serif
   type, its size and line height, its link colour, its list indents – off the buttons and the list. */
.article-body .page-nav,
.article-body .page-nav-bar,
.article-body .page-nav-pill,
.article-body .page-numbers,
.article-body .chapter-list { font-family: var(--font-sans); line-height: 1.25; }
.article-body .page-nav-btn,
.article-body .page-nav-btn:hover,
.article-body .page-nav-pill .pn-btn,
.article-body .page-nav-bar .pn-btn--next { color: #fff; }
.article-body .page-nav-bar .pn-btn--prev { color: #8a908b; }
.article-body .page-nav-bar .pn-btn--prev:hover { color: #6b716c; }
.article-body .pn-list-link { color: var(--page-nav-bg, #821c1f); }
.article-body .page-link { color: var(--ink); }
.article-body .page-link.is-current { color: var(--paper); }
.article-body .chapter-list-items a { color: var(--ink); }
.article-body .chapter-list-items a.is-current { color: var(--page-nav-bg, #b3261e); }
.article-body .page-numbers,
.article-body .chapter-list-items { padding-left: 0; }
.article-body .page-numbers li + li,
.article-body .chapter-list-items li + li { margin-top: 0; }
@media print {
    .article-body .page-nav, .article-body .page-nav-bar, .article-body .page-nav-pill, .article-body .page-numbers { display: none; }
}