/* Articles: index and reading pages. Loaded only by articles.php on /articles/ and its children.
   Wide screens use two columns: a right-aligned margin for lead-in terms, section numbers and
   the byline, and a reading column. Narrow screens fold the margin back into the text. */

.osp-articles-main {
    --osp-paper: #f5f1e8;
    --osp-body: #d5dee7;
    --osp-muted: #9fb2c4;
    --osp-gold: #d6a33d;
    --osp-gold-light: #f0c867;
    --osp-rule: rgb(192 207 221 / 16%);
    --osp-rule-strong: rgb(214 163 61 / 55%);
    --osp-display: "Figtree", sans-serif;
    --osp-text: "Inter", sans-serif;
    --osp-size: 1.0625rem;
    --osp-leading: 1.75;
    max-width: none;
    /* The hero sits under the sticky header, as on the marketing pages. */
    padding: 0 20px clamp(4rem, 9vw, 7.5rem);
}

.osp-reading {
    display: grid;
    grid-template-columns: [margin-start text-start] minmax(0, 1fr) [margin-end text-end];
    max-width: 40rem;
    margin-inline: auto;
    color: var(--osp-body);
    font-family: var(--osp-text);
    font-size: var(--osp-size);
    line-height: var(--osp-leading);
}

/* Zero-specificity defaults so element and class rules below always win. */
.osp-reading > :where(*),
.osp-reading :where(.osp-article > *) {
    grid-column: text;
    margin: 0 0 1.15em;
}

/* Seeded article bodies keep their wrapper; its children join the page grid. */
.osp-reading .osp-article {
    display: contents;
}

.osp-reading :is(h2, h3) {
    color: var(--osp-paper);
    font-family: var(--osp-display);
    text-wrap: balance;
}


.osp-reading h2 {
    margin: 1.8em 0 0.8em;
    padding-top: 1.1rem;
    border-top: 1px solid var(--osp-rule);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.osp-reading h3 {
    margin: 1.9em 0 0.5em;
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.35;
}

.osp-reading ul {
    padding-left: 1.2em;
}

.osp-reading li + li {
    margin-top: 0.45em;
}

.osp-reading li::marker {
    color: var(--osp-gold);
}

.osp-reading a {
    color: var(--osp-gold-light);
    text-decoration: underline;
    text-decoration-color: var(--osp-rule-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

.osp-reading a:hover {
    text-decoration-color: currentColor;
}

.osp-reading a:focus-visible {
    outline: 2px solid var(--osp-gold-light);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Hero: matches the marketing pages (laptop photo, 83% navy overlay, textured title). */

.osp-page-hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(260px, 30vw, 436px);
    margin: 0 calc(50% - 50vw) clamp(2.5rem, 6vw, 4.5rem);
    padding: 8.5rem 20px 3.5rem;
    background: url("/wp-content/uploads/2026/09/podcaster-using-a-laptop.jpg") 100% 100% / cover;
    text-align: center;
}

.osp-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #08213a;
    opacity: 0.83;
}

.osp-page-hero-inner {
    position: relative;
    max-width: 52rem;
}

.osp-page-hero h1 {
    margin: 0;
    font-family: var(--osp-display);
    font-size: clamp(2rem, 1.2rem + 3.6vw, 3.8rem);
    font-weight: 500;
    line-height: 1.05;
    text-wrap: balance;
}

.osp-page-hero h1 span {
    color: transparent;
    background: url("/wp-content/uploads/2026/09/ChatGPT-Image-Sep-9-2026-06_28_02-PM.png") center / cover;
    -webkit-background-clip: text;
    background-clip: text;
}

.osp-page-hero-lead {
    max-width: 34rem;
    margin: 1.1rem auto 0;
    color: var(--osp-paper);
    font-family: var(--osp-display);
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    font-weight: 300;
    line-height: 1.45;
}

/* Long article titles read better solid; the texture stays for short page names. */
.osp-page-hero-article h1 {
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
    line-height: 1.12;
}

.osp-page-hero-article h1 span {
    color: var(--osp-paper);
    background: none;
}

.osp-page-hero-meta {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin: 0 0 1rem;
    color: var(--osp-muted);
    font-family: var(--osp-display);
    font-size: 0.9375rem;
}

.osp-page-hero-meta a {
    color: var(--osp-gold-light);
    font-weight: 600;
    text-decoration: none;
}

.osp-page-hero-meta a:hover {
    text-decoration: underline;
}

.osp-page-hero-meta a:focus-visible {
    outline: 2px solid var(--osp-gold-light);
    outline-offset: 3px;
}

/* Article header */




.osp-reading .osp-article-review {
    margin-bottom: 2.25rem;
    padding: 0.15rem 0 0.15rem 1rem;
    border-left: 2px solid var(--osp-gold);
    color: var(--osp-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

.osp-reading .osp-article-review strong {
    color: var(--osp-paper);
    font-weight: 600;
}

.osp-reading .osp-article-byline {
    margin-bottom: 0.5rem;
    color: var(--osp-paper);
    font-family: var(--osp-display);
    font-size: 0.9375rem;
    font-weight: 600;
}

.osp-reading .osp-article-byline + p {
    color: var(--osp-paper);
    font-size: 1.2em;
    line-height: 1.6;
}

/* Lead-in terms read as a spec sheet: consecutive terms share hairlines. */

.osp-reading .osp-spec {
    margin: 0;
    padding: 0.8rem 0;
    border-top: 1px solid var(--osp-rule);
}

.osp-reading .osp-spec:has(+ :not(.osp-spec)) {
    margin-bottom: 1.6em;
    border-bottom: 1px solid var(--osp-rule);
}

/* A following section heading draws its own rule. */
.osp-reading .osp-spec:has(+ :is(h2, .osp-section)) {
    margin-bottom: 0;
    border-bottom: 0;
}

.osp-reading :not(.osp-spec) + .osp-spec {
    margin-top: 0.4em;
}

.osp-spec-term {
    color: var(--osp-paper);
    font-family: var(--osp-display);
    font-weight: 600;
}

.osp-section-number {
    color: var(--osp-gold);
    font-variant-numeric: tabular-nums;
}

/* Article footer */

.osp-reading .osp-article-context {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--osp-rule);
    color: var(--osp-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

.osp-reading .osp-article > p:last-child {
    font-family: var(--osp-display);
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Planning figures: numbers quoted from the article, set as the page's one bold device. */

.osp-figure {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
}

.osp-figure-value {
    color: var(--osp-gold);
    font-family: var(--osp-display);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.osp-figure-label {
    color: var(--osp-muted);
    font-family: var(--osp-display);
    font-size: 0.9375rem;
    line-height: 1.35;
}

/* Visually after the opening paragraph; first in the source so it reads as a summary. */
.osp-reading :is(.osp-article-review, .osp-article-byline, .osp-article-byline + p) {
    order: -2;
}

.osp-reading .osp-figures {
    order: -1;
    margin: 0.75rem 0 2.25rem;
    padding: 1.25rem 0 1.4rem;
    border-block: 1px solid var(--osp-rule);
}

.osp-figures-title {
    margin: 0 0 1rem;
    color: var(--osp-paper);
    font-family: var(--osp-display);
    font-size: 0.9375rem;
    font-weight: 600;
}

.osp-figures-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 1.25rem 1.75rem;
}

/* Index: Frank's resource-library card grid (3 / 2 / 1 columns), in the site palette. */

.osp-reading.osp-reading-index {
    display: block;
    max-width: 78rem;
}

.osp-page-hero-intro {
    max-width: 40rem;
    margin: 0.9rem auto 0;
    color: var(--osp-body);
    font-size: 1rem;
    line-height: 1.6;
}

.osp-reading .osp-article-cards {
    display: grid;
    /* Two wide columns on desktop so Frank's figures stay readable; one column on phones. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.osp-article-card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid var(--osp-rule);
    border-radius: 14px;
    background: #0f2944;
}

.osp-article-card-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 12 / 7;
    object-fit: cover;
    background: #f4f8fb;
}

.osp-article-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.25rem 1.3rem 1.35rem;
}

.osp-reading .osp-article-card-tag {
    margin: 0 0 0.45rem;
    color: var(--osp-gold);
    font-family: var(--osp-display);
    font-size: 0.875rem;
    font-weight: 500;
}

.osp-reading .osp-article-card h2 {
    margin: 0 0 0.6rem;
    padding: 0;
    border: 0;
    font-size: 1.1875rem;
    line-height: 1.3;
    text-wrap: pretty;
}

.osp-reading .osp-article-card h2 a {
    color: var(--osp-paper);
    text-decoration: none;
}

/* The whole card opens the article. */
.osp-reading .osp-article-card h2 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.osp-reading .osp-article-card h2 a:focus-visible {
    outline: none;
}

.osp-article-card:focus-within {
    outline: 2px solid var(--osp-gold-light);
    outline-offset: 3px;
}

.osp-reading .osp-article-card-summary {
    margin: 0 0 1.1rem;
    color: var(--osp-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.osp-article-card-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 0.9rem;
    border-top: 1px solid var(--osp-rule);
}

.osp-reading .osp-article-card-stat {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
}

.osp-article-card-stat-value {
    color: var(--osp-gold);
    font-family: var(--osp-display);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.osp-article-card-stat-label {
    color: var(--osp-muted);
    font-family: var(--osp-display);
    font-size: 0.8125rem;
    line-height: 1.3;
}

.osp-reading .osp-article-card-time {
    flex: none;
    margin: 0;
    color: var(--osp-muted);
    font-family: var(--osp-display);
    font-size: 0.8125rem;
}

.osp-article-card-action {
    margin-top: 1.1rem;
    padding: 0.7rem 1rem;
    border: 1px solid var(--osp-rule-strong);
    border-radius: 999px;
    color: var(--osp-paper);
    font-family: var(--osp-display);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: center;
}

.osp-article-card:hover {
    border-color: var(--osp-rule-strong);
}

.osp-article-card:hover .osp-article-card-action {
    border-color: var(--osp-gold);
    background: var(--osp-gold);
    color: #08213a;
}

/* Article illustration and book panel */

.osp-reading .osp-reading-image {
    order: -3;
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 2rem;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: #f4f8fb !important;
    cursor: zoom-in;
}

.osp-reading-image img {
    display: block;
    width: 100%;
    height: auto;
}

.osp-reading-image-hint {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgb(8 33 58 / 82%);
    color: var(--osp-paper);
    font: 500 0.8125rem/1 var(--osp-display);
    opacity: 0.85;
    transition: opacity 160ms ease;
}

.osp-reading-image:hover .osp-reading-image-hint,
.osp-reading-image:focus-visible .osp-reading-image-hint {
    opacity: 1;
}

.osp-reading-image:focus-visible {
    outline: 2px solid var(--osp-gold-light);
    outline-offset: 3px;
}

.osp-reading-image-hint svg,
.osp-figure-view-close svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Full-screen illustration: upright, zoomable (see articles.js). */
.osp-figure-view {
    width: min(96vw, 1600px);
    max-width: none;
    max-height: 94vh;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 12px;
    background: #f4f8fb;
}

.osp-figure-view::backdrop {
    background: rgb(4 15 26 / 90%);
}

.osp-figure-view[open] {
    display: flex;
    flex-direction: column;
}

.osp-figure-view-stage {
    display: grid;
    place-items: center;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 12px;
    touch-action: none;
    cursor: zoom-in;
}

.osp-figure-view.is-zoomed .osp-figure-view-stage {
    cursor: grab;
}

.osp-figure-view-stage img {
    display: block;
    width: 100%;
    max-height: 94vh;
    height: auto;
    object-fit: contain;
    transform-origin: center;
    user-select: none;
    -webkit-user-drag: none;
}

.osp-figure-view-hint {
    position: absolute;
    left: 50%;
    bottom: -2.6rem;
    margin: 0;
    transform: translateX(-50%);
    color: var(--osp-muted);
    font: 500 0.8125rem/1 var(--osp-display);
    white-space: nowrap;
    pointer-events: none;
}

.osp-hint-mouse { display: none; }

@media (hover: hover) and (pointer: fine) {
    .osp-hint-touch { display: none; }
    .osp-hint-mouse { display: inline; }
}

.osp-figure-view.is-zoomed .osp-figure-view-hint {
    opacity: 0;
}

.osp-figure-view-close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--osp-rule-strong) !important;
    border-radius: 50%;
    background: #0a1d31 !important;
    color: var(--osp-paper) !important;
    cursor: pointer;
}

.osp-figure-view-close svg {
    width: 18px;
    height: 18px;
}

/* Phones and tablets: the whole screen is the viewer; the figure sits upright in the middle. */
@media (max-width: 900px) {
    .osp-figure-view {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
        background: transparent;
    }

    .osp-figure-view-stage {
        border-radius: 0;
        padding: 3.75rem 0.75rem;
    }

    .osp-figure-view-stage img {
        max-height: 100%;
        border-radius: 8px;
        background: #f4f8fb;
    }

    .osp-figure-view-close {
        position: fixed;
        top: calc(0.75rem + env(safe-area-inset-top));
        right: 0.75rem;
    }

    .osp-figure-view-hint {
        position: fixed;
        bottom: calc(1.25rem + env(safe-area-inset-bottom));
    }
}

.osp-reading .osp-reading-book {
    margin: 2.5rem 0 0;
    padding: 1.4rem 1.5rem;
    border-radius: 12px;
    background: #0f2944;
}

.osp-reading-book p {
    margin: 0;
}

.osp-reading .osp-reading-book-title {
    margin-bottom: 0.6rem;
    color: var(--osp-paper);
    font-family: var(--osp-display);
    font-size: 1.125rem;
    font-weight: 600;
}

.osp-reading-book a {
    font-family: var(--osp-display);
    font-weight: 600;
}

/* Wide screens: hang terms, numbers, byline and reading times in the margin column. */

@media (min-width: 1024px) {
    .osp-articles-main {
        --osp-size: 1.125rem;
        padding-inline: 2rem;
    }

    .osp-reading {
        grid-template-columns: [margin-start] 11rem [margin-end text-start] minmax(0, 40rem) [text-end];
        column-gap: 3rem;
        max-width: 54rem;
    }

    .osp-reading .osp-article-byline {
        grid-column: margin;
        margin: 0.3rem 0 0;
        text-align: right;
        line-height: 1.4;
    }

    .osp-reading :is(.osp-spec, .osp-section) {
        grid-column: margin-start / text-end;
        display: grid;
        grid-template-columns: subgrid;
        align-items: baseline;
    }

    .osp-reading .osp-spec,
    .osp-reading .osp-section {
        border-top-color: transparent;
        background: linear-gradient(var(--osp-rule), var(--osp-rule)) top right / calc(100% - 14rem) 1px no-repeat;
    }

    .osp-reading .osp-spec:has(+ :not(.osp-spec, h2)) {
        border-bottom: 0;
        background:
            linear-gradient(var(--osp-rule), var(--osp-rule)) top right / calc(100% - 14rem) 1px no-repeat,
            linear-gradient(var(--osp-rule), var(--osp-rule)) bottom right / calc(100% - 14rem) 1px no-repeat;
    }

    .osp-spec-term,
    .osp-section-number,
    .osp-figures-title {
        grid-column: margin;
        text-align: right;
    }

    .osp-reading .osp-reading-image {
        grid-column: margin-start / text-end;
    }

    .osp-reading .osp-figures {
        grid-column: margin-start / text-end;
        display: grid;
        grid-template-columns: subgrid;
        align-items: start;
        border-block-color: transparent;
        background:
            linear-gradient(var(--osp-gold), var(--osp-gold)) top right / calc(100% - 14rem) 2px no-repeat,
            linear-gradient(var(--osp-rule), var(--osp-rule)) bottom right / calc(100% - 14rem) 1px no-repeat;
    }

    .osp-figures-title {
        margin: 0.35rem 0 0;
        line-height: 1.4;
    }

    .osp-figures-list {
        grid-column: text;
    }


    .osp-spec-term {
        font-size: 0.9375rem;
        line-height: 1.45;
        text-wrap: balance;
    }

    .osp-margin-mark {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .osp-spec-text,
    .osp-section-title,
    .osp-reading-book {
        grid-column: text;
    }


}

/* ---------- Navigation: contents list, sidebar, pager, mobile bar and sheet ---------- */

/* Shared compact list: thumbnail, number, title, tag and reading time. */
.osp-article-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.osp-article-list li {
    margin: 0;
}

.osp-article-list li + li {
    margin-top: 0;
}

.osp-article-list a {
    display: grid;
    grid-template-columns: 6rem 1.75rem minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    color: var(--osp-paper);
    font-family: var(--osp-display);
    text-decoration: none;
}

.osp-article-list a:hover {
    background: rgb(192 207 221 / 7%);
}

.osp-article-list a[aria-current="page"] {
    background: #0f2944;
    box-shadow: inset 3px 0 0 var(--osp-gold);
}

.osp-article-list a:focus-visible {
    outline: 2px solid var(--osp-gold-light);
    outline-offset: 1px;
}

.osp-article-list-thumb {
    display: block;
    width: 6rem;
    height: auto;
    aspect-ratio: 12 / 7;
    object-fit: cover;
    border-radius: 6px;
    background: #f4f8fb;
}

.osp-article-list-number {
    color: var(--osp-gold);
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.osp-article-list-text {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.osp-article-list-title {
    font-size: 0.9875rem;
    font-weight: 500;
    line-height: 1.3;
    text-wrap: pretty;
}

.osp-article-list-meta {
    color: var(--osp-muted);
    font-size: 0.8125rem;
    line-height: 1.3;
}

/* Index: one browser, list or cards. */
.osp-article-contents {
    margin: 0;
    padding: clamp(1.1rem, 2.5vw, 1.75rem);
    border: 1px solid var(--osp-rule);
    border-radius: 14px;
    background: rgb(15 41 68 / 55%);
}

.osp-article-contents-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem 1.5rem;
    margin-bottom: 1.25rem;
}

.osp-reading .osp-article-browser h2#osp-article-browser-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.375rem;
}

.osp-article-browser [data-view][hidden],
.osp-article-tools[hidden] {
    display: none !important;
}

.osp-article-browser > [data-view] + [data-view] {
    margin-top: 2rem;
}

.osp-article-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.osp-article-views {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--osp-rule);
    border-radius: 999px;
}

.osp-article-views button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 0;
    border-radius: 999px;
    background: none !important;
    color: var(--osp-muted) !important;
    font: 500 0.875rem/1.2 var(--osp-display);
    cursor: pointer;
}

.osp-article-views button[aria-pressed="true"] {
    background: rgb(192 207 221 / 12%) !important;
    color: var(--osp-paper) !important;
}

.osp-article-views button:focus-visible {
    outline: 2px solid var(--osp-gold-light);
    outline-offset: 2px;
}

.osp-article-views svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.osp-article-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.osp-article-filters button {
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--osp-rule);
    border-radius: 999px;
    background: none !important;
    color: var(--osp-body) !important;
    font: 500 0.875rem/1.2 var(--osp-display);
    cursor: pointer;
}

.osp-article-filters button:hover {
    border-color: var(--osp-rule-strong);
    color: var(--osp-paper) !important;
}

.osp-article-filters button[aria-pressed="true"] {
    border-color: var(--osp-gold);
    background: rgb(214 163 61 / 14%) !important;
    color: var(--osp-gold-light) !important;
}

.osp-article-filters button:focus-visible {
    outline: 2px solid var(--osp-gold-light);
    outline-offset: 2px;
}

.osp-article-browser li[hidden] {
    display: none;
}

@media (max-width: 640px) {
    .osp-article-contents {
        padding: 0;
        border: 0;
        background: none;
    }

    .osp-article-list a {
        grid-template-columns: 3.75rem minmax(0, 1fr);
        gap: 0.8rem;
        padding: 0.65rem 0.25rem;
    }

    .osp-article-list-thumb {
        width: 3.75rem;
        grid-row: span 2;
    }

    .osp-article-list-number {
        display: none;
    }

    .osp-article-list-title {
        font-size: 0.9rem;
    }

    .osp-article-list-meta {
        font-size: 0.78rem;
    }

    .osp-article-filters button {
        padding: 0.4rem 0.8rem;
        font-size: 0.8125rem;
    }
}

@media (min-width: 900px) {
    .osp-article-contents .osp-article-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.25rem;
    }
}

/* Article sidebar and sheet content. */
.osp-article-nav-back {
    margin: 0 0 1.25rem;
    font-family: var(--osp-display);
    font-size: 0.9375rem;
    font-weight: 600;
}

.osp-article-nav-back a {
    color: var(--osp-gold-light);
    text-decoration: none;
}

.osp-article-nav-back a:hover {
    text-decoration: underline;
}

.osp-article-nav-heading {
    margin: 0 0 0.5rem;
    padding-left: 0.7rem;
    color: var(--osp-gold);
    font-family: var(--osp-display);
    font-size: 0.875rem;
    font-weight: 500;
}

.osp-article-outline {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--osp-rule);
}

.osp-article-outline a {
    display: block;
    margin-left: -1px;
    padding: 0.35rem 0.7rem;
    border-left: 2px solid transparent;
    color: var(--osp-body);
    font-family: var(--osp-display);
    font-size: 0.9rem;
    line-height: 1.35;
    text-decoration: none;
}

.osp-article-outline-3 a {
    padding-left: 1.4rem;
    color: var(--osp-muted);
    font-size: 0.85rem;
}

.osp-article-outline a:hover {
    color: var(--osp-paper);
}

.osp-article-outline a[aria-current] {
    border-left-color: var(--osp-gold);
    color: var(--osp-gold-light);
}

/* Section anchors land below the sticky header. */
.osp-reading :is(h2, h3)[id] {
    scroll-margin-top: 7rem;
}

/* End of article: previous / next cards and a way back to the list. */
.osp-reading .osp-reading-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 2.5rem 0 0;
    padding-top: 1.75rem;
    border-top: 2px solid var(--osp-gold);
}

.osp-reading .osp-reading-pager :is(.osp-reading-pager-prev, .osp-reading-pager-next) {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--osp-rule);
    border-radius: 12px;
    background: #0f2944;
    text-decoration: none;
}

.osp-reading .osp-reading-pager-next {
    text-align: right;
}

.osp-reading .osp-reading-pager :is(.osp-reading-pager-prev, .osp-reading-pager-next):hover {
    border-color: var(--osp-rule-strong);
}

.osp-reading-pager-label {
    color: var(--osp-gold-light);
    font-family: var(--osp-display);
    font-size: 0.875rem;
    font-weight: 600;
}

.osp-reading-pager-title {
    color: var(--osp-paper);
    font-family: var(--osp-display);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    text-wrap: pretty;
}

.osp-reading .osp-reading-pager-all {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 0.4rem;
    padding: 0.65rem 1.4rem;
    border: 1px solid var(--osp-rule-strong);
    border-radius: 999px;
    color: var(--osp-paper);
    font-family: var(--osp-display);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}

.osp-reading .osp-reading-pager-all:hover {
    border-color: var(--osp-gold);
    color: var(--osp-gold-light);
}

@media (max-width: 560px) {
    .osp-reading .osp-reading-pager {
        grid-template-columns: 1fr;
    }

    .osp-reading-pager-empty {
        display: none;
    }
}

/* Reading progress: a thin gold line along the top of the window. */
.osp-reading-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 120;
    height: 3px;
    pointer-events: none;
}

.osp-reading-progress span {
    display: block;
    height: 100%;
    background: var(--osp-gold);
    transform: scaleX(0);
    transform-origin: left;
}

/* Narrow screens: bottom bar plus a sheet. Wide screens: a sticky sidebar instead. */
.osp-reading-sidebar {
    display: none;
}

.osp-article-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 110;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem max(0.75rem, env(safe-area-inset-right)) calc(0.5rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    border-top: 1px solid var(--osp-rule);
    background: rgb(8 26 43 / 96%);
    backdrop-filter: blur(8px);
    font-family: var(--osp-display);
}

.osp-article-bar :is(a, button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    border: 0;
    background: none !important;
    color: var(--osp-paper) !important;
    font: 500 0.9375rem/1 var(--osp-display);
    text-decoration: none;
    cursor: pointer;
}

.osp-article-bar a:first-child {
    justify-self: start;
    padding-inline: 0.5rem;
}

.osp-article-bar-step:nth-child(3) {
    justify-self: end;
    padding-inline: 0.5rem;
}

.osp-article-bar-menu {
    padding: 0 1.1rem !important;
    border: 1px solid var(--osp-rule-strong) !important;
    border-radius: 999px;
}

.osp-article-bar svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.osp-article-bar-top {
    width: 44px;
    border: 1px solid var(--osp-rule) !important;
    border-radius: 50%;
    visibility: hidden;
    opacity: 0;
    transition: opacity 160ms ease;
}

.osp-article-bar-top.is-visible {
    visibility: visible;
    opacity: 1;
}

.osp-article-bar :is(a, button):focus-visible {
    outline: 2px solid var(--osp-gold-light);
    outline-offset: 2px;
}

/* Keep the footer clear of the fixed bar. */
body.osp-articles-article {
    padding-bottom: calc(62px + env(safe-area-inset-bottom));
}

.osp-article-sheet {
    width: 100%;
    max-width: 40rem;
    max-height: min(82vh, 46rem);
    margin: auto auto 0;
    padding: 0;
    border: 1px solid var(--osp-rule);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: #0a1d31;
    color: var(--osp-body);
    font-family: var(--osp-text);
}

.osp-article-sheet::backdrop {
    background: rgb(4 15 26 / 65%);
}

.osp-article-sheet[open] {
    display: flex;
    flex-direction: column;
}

.osp-article-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem 0.9rem 1.25rem;
    border-bottom: 1px solid var(--osp-rule);
}

.osp-article-sheet-head p {
    margin: 0;
    color: var(--osp-paper);
    font: 600 1.0625rem/1.2 var(--osp-display);
}

.osp-article-sheet-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgb(192 207 221 / 8%) !important;
    color: var(--osp-paper) !important;
    cursor: pointer;
}

.osp-article-sheet-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.osp-article-sheet-body {
    overflow-y: auto;
    padding: 1.1rem 0.75rem calc(1.25rem + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
}

@media (prefers-reduced-motion: no-preference) {
    .osp-article-sheet[open] {
        animation: osp-sheet-in 220ms ease-out;
    }

    @keyframes osp-sheet-in {
        from { transform: translateY(24px); opacity: 0; }
    }
}

@media (min-width: 1280px) {
    .osp-reading-layout {
        display: grid;
        grid-template-columns: 16rem minmax(0, 54rem);
        justify-content: center;
        column-gap: 1.5rem;
        align-items: start;
    }

    .osp-reading-layout > .osp-reading {
        margin-inline: 0;
    }

    .osp-reading-sidebar {
        position: sticky;
        top: 6.5rem;
        display: block;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
        padding-right: 0.5rem;
        scrollbar-width: thin;
        scrollbar-color: rgb(192 207 221 / 20%) transparent;
    }

    .osp-reading-sidebar .osp-article-list a {
        grid-template-columns: 1.5rem minmax(0, 1fr);
        gap: 0.5rem;
        padding: 0.5rem 0.7rem;
    }

    .osp-reading-sidebar .osp-article-list-thumb,
    .osp-reading-sidebar .osp-article-list-meta {
        display: none;
    }

    .osp-reading-sidebar .osp-article-list-title {
        font-size: 0.875rem;
    }

    .osp-article-bar,
    .osp-article-sheet {
        display: none !important;
    }

    body.osp-articles-article {
        padding-bottom: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .osp-reading a {
        transition: color 120ms ease, text-decoration-color 120ms ease;
    }
}