/* #region Reading progress */
/* The bar is drawn at full width and scaled, not widened. Width is a layout property: a 100 ms width
   transition on a bar stretched across the window, restarted on every frame of every scroll, lays the page
   out again for as long as the reading lasts. A scale is composited — the same movement, for the cost of
   placing a layer. */
#reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--gold);
    z-index: 9999;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.1s ease-out;
    will-change: transform;
}

.a-introduction {
    max-width: 62ch;
    margin: 2rem 0 0;
    color: var(--white-soft);
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.75;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s 0.52s var(--ease-house) forwards;
}
/* #endregion */

/* #region Hero */
/* The opening starts higher. Fifteen per cent of the screen above the crumbs put a line of small
   grey capitals — the one thing here nobody came to read — a whole hero's worth of air down the
   page, and the headline under it further still. */
.article-hero {
    position: relative;
    width: 100%;
    /* Never less than the fixed header, which a short screen's 9vh is not. */
    padding: max(9vh, calc(var(--site-header-h, 72px) + 1.5rem)) var(--hero-gutter) 12vh;
    overflow: hidden;
    isolation: isolate;
}

    .article-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(90deg, transparent 0 64%, var(--tint) 64% 64.08%, transparent 64.08%), radial-gradient(ellipse 900px 720px at 82% 62%, var(--tint), transparent 64%);
    }

    .article-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image: linear-gradient(45deg, transparent calc(50% - .5px), var(--hairline-mid) 50%, transparent calc(50% + .5px)), linear-gradient(-45deg, transparent calc(50% - .5px), var(--hairline-mid) 50%, transparent calc(50% + .5px));
        background-position: center;
        background-size: 72px 72px;
        -webkit-mask-image: radial-gradient(ellipse 62% 72% at 82% 38%, #050505 0%, rgba(5, 5, 5, .55) 45%, transparent 80%);
        mask-image: radial-gradient(ellipse 62% 72% at 82% 38%, #050505 0%, rgba(5, 5, 5, .55) 45%, transparent 80%);
        opacity: 0;
        transform: scale(1.08);
        animation: heroExhibitLatticeReveal 1.8s .35s var(--ease-house) forwards;
    }

@media (prefers-reduced-motion: reduce) {
    .article-hero::before {
        opacity: .82;
        transform: none;
        animation: none;
    }
}

.article-header {
    position: relative;
    min-height: clamp(650px, 62vw, 800px);
}

.a-copy {
    position: relative;
    z-index: 3;
    width: min(62%, 780px);
    min-width: 0;
    padding-top: clamp(4.5rem, 9vw, 8rem);
}

.a-tagline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 3vh;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s 0.3s var(--ease-house) forwards;
}

.a-tag {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: rgba(245, 245, 245, .5);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--motion-quick) var(--ease-house), color var(--motion-quick) var(--ease-house), opacity var(--motion-quick) var(--ease-house);
}

    .a-tag:hover,
    .a-tag:focus-visible {
        border-bottom-color: var(--gold);
        color: var(--gold);
    }

.a-tagline-sep {
    color: var(--white-ghost);
    font-size: 0.5rem;
}

.a-reading-time {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--white-ghost);
}

/* An article's title is a full sentence of a hundred characters and more: at 13ch it stood eight lines
   tall. The measure is wider; the hero scale is the house's and stays. */
.a-title {
    margin: 0;
    max-width: min(100%, 20ch);
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(3rem, 4.7vw, 5.5rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
    color: var(--white);
    text-wrap: balance;
    text-shadow: 0 3px 30px rgba(5, 5, 5, 0.95), 0 1px 8px rgba(5, 5, 5, 0.9);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s 0.42s var(--ease-house) forwards;
}

    .a-title i {
        font-style: italic;
        color: var(--gold);
    }

.a-figure {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: min(64vw, 790px);
    margin: 0;
    opacity: 0;
    transform: translateX(28px);
    animation: articleHeroReveal 1.4s 0.6s var(--ease-house) forwards;
}

@keyframes articleHeroReveal {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.a-figure-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--hairline-strong);
    overflow: hidden;
    background: var(--black-soft);
}

    .a-figure-stage::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background: linear-gradient(90deg, rgba(5, 5, 5, 0.82) 0%, rgba(5, 5, 5, 0.38) 25%, transparent 57%), linear-gradient(145deg, transparent 55%, rgba(5, 5, 5, 0.55));
    }

.a-figure-image {
    position: absolute;
    inset: 2.25%;
    width: 95.5%;
    height: 95.5%;
    object-fit: cover;
    object-position: center;
    filter: var(--photo-at-rest);
    box-shadow: 0 40px 100px rgba(5, 5, 5, 0.65);
    transform: scale(1.04);
    transition: transform 14s var(--ease-house);
}

.article-hero.loaded .a-figure-image {
    transform: scale(1);
}

/* #endregion */

/* #region Table of Contents */
.article-reading-layout {
    display: grid;
    grid-template-columns: minmax(11rem, 14rem) minmax(0, 760px) minmax(11rem, 14rem);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
    width: min(90vw, 1280px);
    margin-inline: auto;
}

.article-toc-shell {
    grid-column: 1;
    min-width: 0;
    align-self: stretch;
}

.article-toc {
    position: sticky;
    top: clamp(7rem, 12vh, 9rem);
    padding-left: 1.25rem;
    border-left: 1px solid var(--hairline-strong);
}

    .article-toc summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        list-style: none;
        cursor: pointer;
    }

        .article-toc summary::-webkit-details-marker {
            display: none;
        }

    .article-toc .h-tag {
        margin: 0;
    }

.article-toc-toggle {
    display: none;
    width: .5rem;
    height: .5rem;
    border-right: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    transform: rotate(45deg);
    transition: transform .3s var(--ease-house);
}

.article-toc[open] .article-toc-toggle {
    transform: rotate(225deg);
}

.article-toc ol {
    display: grid;
    gap: .85rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: article-toc;
}

.article-toc li {
    counter-increment: article-toc;
}

.article-toc a {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: .5rem;
    color: var(--white-ghost);
    font-size: .72rem;
    line-height: 1.55;
    text-decoration: none;
    transition: color var(--motion-quick) var(--ease-house), transform var(--motion-quick) var(--ease-house);
}

    .article-toc a::before {
        color: rgba(245, 245, 245, .4);
        content: counter(article-toc, decimal-leading-zero);
        font-family: var(--font-mono);
        font-size: .55rem;
        letter-spacing: .08em;
        padding-top: .15rem;
        transition: color var(--motion-quick) var(--ease-house);
    }

    .article-toc a:hover,
    .article-toc a.active {
        color: var(--white);
        transform: translateX(.2rem);
    }

        .article-toc a:hover::before,
        .article-toc a.active::before {
            color: var(--gold);
        }
/* #endregion */

/* #region Body */
.article-body {
    grid-column: 2;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    /* No side padding of its own: the reading layout already measures the column, and 5vw inside it
       narrowed the text as the window grew. Phones restore a gutter below. */
    padding: 0 0 8vh;
}

    /* On top of the page's scroll-padding for the header. */
    .article-body h2 {
        scroll-margin-top: 3rem;
    }

    .article-body > p {
        font-size: 1.15rem;
        line-height: 1.9;
        color: rgba(245, 245, 245, 0.7);
        margin-bottom: 2.5rem;
        text-align: left;
        -webkit-hyphens: manual;
        hyphens: manual;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s ease, transform 1s ease;
    }

        .article-body > p.visible,
        .article-body > p.active {
            opacity: 1;
            transform: translateY(0);
        }

    .article-body h2 {
        font-family: var(--font-display);
        font-weight: 300;
        font-size: clamp(1.9rem, 3.5vw, 2.8rem);
        color: var(--white);
        margin: 7rem 0 2rem;
        line-height: 1.2;
        padding-bottom: 1.2rem;
        border-bottom: 1px solid var(--hairline-mid);
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s ease, transform 1s ease;
    }

        .article-body h2.visible,
        .article-body h2.active {
            opacity: 1;
            transform: translateY(0);
        }

    .article-body h3 {
        font-family: var(--font-display);
        font-weight: 400;
        font-style: italic;
        font-size: clamp(1.25rem, 2.2vw, 1.6rem);
        color: var(--white);
        margin: 4rem 0 1.5rem;
        line-height: 1.3;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s ease, transform 1s ease;
    }

        .article-body h3.visible,
        .article-body h3.active {
            opacity: 1;
            transform: translateY(0);
        }

    /* A voice inside the article, and this file is the only place it is dressed. Nothing else in the site
       sets blockquote outside the bookshop's own page and nothing anywhere sets cite, so under the global
       reset a quotation renders as an ordinary paragraph with quotation marks typed into it, and the
       attribution as one more line of body text beneath.

       The device is the house's: the display face, a size above the body, and a single white hairline
       down the left — a rule the eye can follow, the same one the story steps use between their
       beats. No oversized „ glyph here: that belongs to the thesis on the bookshop's page, which is
       one statement on a whole screen, and repeating it inside running text would make every quote
       shout as loudly as that one does. */
    .article-body blockquote {
        max-width: 46ch;
        margin: clamp(2.8rem, 5vw, 4.2rem) 0 0;
        padding-left: clamp(1.5rem, 3vw, 2.4rem);
        border-left: 1px solid var(--hairline-strong);
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.25rem, 1.85vw, 1.7rem);
        font-weight: 300;
        letter-spacing: -.01em;
        line-height: 1.5;
    }

    /* Two things wear cite in these articles and both are credit lines: the person a quotation is
       taken from, and the sources under a section. One setting for both — quiet, in the interface
       face, the size of small print because that is what a credit is. */
    .article-body cite {
        display: block;
        /* The paragraph's own rhythm underneath: a source list is followed by running text, and with
           no bottom margin the next paragraph sat straight on it. */
        margin-top: 1.1rem;
        margin-bottom: 2.5rem;
        color: var(--text-muted);
        font-family: var(--font);
        font-size: .82rem;
        font-style: normal;
        font-weight: 300;
        line-height: 1.6;
    }

        /* The attribution belongs to the quotation above it, so it stands on the same left edge —
           it is a sibling of the blockquote, not a child, and without this it fell back to the
           column and read as the start of the next paragraph. */
        .article-body blockquote + cite {
            max-width: 46ch;
            margin-top: 1rem;
            margin-bottom: clamp(2.8rem, 5vw, 4.2rem);
            padding-left: clamp(1.5rem, 3vw, 2.4rem);
        }

    /* A link reads as white with a hairline under it; gold arrives on the line under the hand. */
    .article-body a {
        color: var(--white);
        text-decoration: none;
        border-bottom: 1px solid var(--hairline-strong);
        transition: border-color var(--motion-quick) var(--ease-house), color var(--motion-quick) var(--ease-house);
        overflow-wrap: anywhere;
    }

        .article-body a:hover,
        .article-body a:focus-visible {
            border-bottom-color: var(--gold);
            color: var(--gold);
        }

    .article-body > p b,
    .article-body > p strong {
        font-weight: 600;
        color: var(--white);
    }

    .article-body > p em {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 0.97em;
        color: rgba(245, 245, 245, 0.65);
        font-weight: 400;
        letter-spacing: 0.5px;
    }

    /* Section photos arrive as bare <img class="photo"> from the section view model — without this rule
       they render at their natural size and blow out the 90vw reading column on phones. */
    .article-body img,
    .article-body .photo {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 3rem 0;
    }

    .article-body .art-cta-wrapper {
        display: flex;
        justify-content: center;
        margin: 3.5rem 0;
    }

        .article-body .art-cta-wrapper .btn-main {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 18px 30px;
            border: 1px solid var(--button-border);
            background: var(--button-layers);
            color: var(--white);
            font-family: var(--font);
            font-size: 0.68rem;
            font-weight: 400;
            letter-spacing: 0.2em;
            text-align: center;
            text-transform: uppercase;
            text-decoration: none;
            transition: background-size var(--motion) var(--ease-house), border-color var(--motion) var(--ease-house), transform .2s var(--ease-house);
        }

            /* The house button (see --button-layers): drawn, never filled. */
            .article-body .art-cta-wrapper .btn-main:hover,
            .article-body .art-cta-wrapper .btn-main:focus-visible {
                background-size: 100% 1px, 100% 100%;
                border-color: var(--button-border-hover);
            }

            .article-body .art-cta-wrapper .btn-main:active {
                transform: translateY(1px);
            }

.article-source {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.78rem;
    line-height: 1.75;
    color: rgba(245, 245, 245, 0.35);
    border-left: 1px solid var(--hairline-mid);
    padding: 0.6rem 0 0.6rem 16px;
    margin: 2rem 0;
    display: block;
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

    .article-source.visible,
    .article-source.active {
        opacity: 1;
        transform: translateY(0);
    }

    .article-source a {
        color: var(--white-soft);
        text-decoration: none;
        border-bottom: 1px solid var(--hairline);
        transition: border-color var(--motion-quick) var(--ease-house), color var(--motion-quick) var(--ease-house);
        word-break: break-all;
    }

        .article-source a:hover,
        .article-source a:focus-visible {
            border-bottom-color: var(--gold);
            color: var(--gold);
        }

.article-quote {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 4rem auto;
    padding: 1.75rem 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

    .article-quote.visible,
    .article-quote.active {
        opacity: 1;
        transform: translateY(0);
    }

.aq-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: clamp(20px, 3vw, 26px) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(0.75rem, 1.6vw, 1.25rem);
    text-align: left;
}

.aq-icon {
    grid-row: 1 / span 2;
    margin: 0;
    line-height: 1;
    pointer-events: none;
}

    .aq-icon svg {
        width: 100%;
        height: auto;
        fill: none;
        stroke: var(--white);
        stroke-width: 0.7;
        opacity: 0.5;
    }

.article-quote p {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.75vw, 1.55rem);
    line-height: 1.5;
    color: var(--white-bright) !important;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.005em;
    text-wrap: balance;
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
    margin-bottom: 0 !important;
    opacity: 1 !important;
    transform: none !important;
}

.aq-author {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(245, 245, 245, .5);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.5rem;
}


    .aq-author a {
        color: var(--white-soft);
        text-decoration: none;
        border-bottom: 1px solid var(--hairline);
        transition: border-color var(--motion-quick) var(--ease-house), color var(--motion-quick) var(--ease-house);
    }

        .aq-author a:hover,
        .aq-author a:focus-visible {
            border-bottom-color: var(--gold);
            color: var(--gold);
        }

/* #endregion */

/* #region Social Share */
/* The bar itself is in site.css, because several pages render it. What stays here is where the journal
   puts it: centred under the text, with a rule above. */
.article-share {
    justify-content: center;
    margin-top: 4vh;
    padding: 4vh 0 0;
    border-top: 1px solid rgba(245, 245, 245, 0.05);
}

    .article-share .share-manual-note {
        text-align: center;
    }

/* #endregion */

/* #region Neighbours */
/* The older text and the newer one, so the journal can be read forward without going back to the list. */
.article-neighbours {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    /* The bare .container has no inline padding — without this the two cards touched the
       screen edges on phones. */
    width: min(90vw, var(--section-content-max));
    max-width: none;
    margin-inline: auto;
    /* No rule above the two cards and room under them. The line closed the article a second time —
       the share row above it already draws one — and with nothing below, the cards sat flush against
       the seam of the next section. */
    margin-top: 8vh;
    /* More room under the pair than over it, and a floor under the measure. These two cards close the
       article and the next thing down the page is a different section entirely, so the seam wants
       more air than the one above; and written as a bare 8vh the whole distance shrank with the
       window, which on a laptop left the cards sitting on that seam. */
    margin-bottom: clamp(5rem, 11vh, 8rem);
}

.article-neighbour {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1.6rem 1.8rem;
    text-decoration: none;
    border: 1px solid rgba(245, 245, 245, .08);
    transition: border-color var(--motion-quick) var(--ease-house), background var(--motion-quick) var(--ease-house);
}

    .article-neighbour--next {
        grid-column: 2;
        text-align: right;
    }

    .article-neighbour:hover,
    .article-neighbour:focus-visible {
        border-color: var(--gold-border, rgba(var(--gold-rgb),.35));
        background: rgba(var(--gold-rgb),.05);
    }

.article-neighbour-label {
    color: rgba(245, 245, 245, .45);
    font-family: var(--font);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.article-neighbour-title {
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 300;
    /* These titles are whole sentences with a colon in them, not headlines — they run to three and
       four lines, and 1.25 is a display heading's leading, set for one or two. */
    line-height: 1.42;
}

.article-neighbour:hover .article-neighbour-title,
.article-neighbour:focus-visible .article-neighbour-title {
    color: var(--gold);
}

@media (max-width: 700px) {
    .article-neighbours {
        grid-template-columns: minmax(0, 1fr);
    }

    .article-neighbour--next {
        grid-column: 1;
        text-align: left;
    }
}
/* #endregion */

/* #region Article List */
.article-list {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

    .article-list.visible,
    .article-list.active {
        opacity: 1;
        transform: translateY(0);
    }

    .article-list li {
        font-size: 1.1rem;
        line-height: 1.85;
        color: rgba(245, 245, 245, 0.7);
        padding: 0.55rem 0 0.55rem 1.6rem;
        position: relative;
        border-bottom: 1px solid rgba(245, 245, 245, 0.04);
        text-align: left;
        -webkit-hyphens: manual;
        hyphens: manual;
    }

/* Justified and divided only together, and only where the browser divides words in the page's language
   well — the class is set by the check at the top of Article.cshtml, which leaves Blink out. Justified
   without good hyphenation a line of long words is stretched into gaps, and hyphenated while ranged left
   a line breaks words it had room to keep, so every other browser gets plain ragged-right text. */
html.hyphenates .article-body > p,
html.hyphenates .article-source,
html.hyphenates .article-quote p,
html.hyphenates .article-list li {
    -webkit-hyphens: auto;
    hyphens: auto;
    text-align: justify;
    text-align-last: left;
}

        .article-list li:last-child {
            border-bottom: none;
        }

        .article-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 1.05em;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: var(--gold);
        }
/* #endregion */

/* #region Animations */
.article-body .reveal-elem {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

    .article-body .reveal-elem.visible {
        opacity: 1;
        transform: translateY(0);
    }
/* #endregion */

/* #region Responsive */
@media (max-width: 1100px) {
    .article-reading-layout {
        display: block;
        width: min(90vw, 760px);
    }

    .article-toc-shell {
        margin-bottom: clamp(3rem, 7vw, 5rem);
    }

    .article-toc {
        position: static;
        padding: 1rem 0;
        border-top: 1px solid var(--hairline-strong);
        border-bottom: 1px solid var(--section-divider);
        border-left: 0;
    }

        .article-toc summary {
            padding-inline: .25rem;
        }

    .article-toc-toggle {
        display: block;
    }

    .article-toc ol {
        padding: .5rem .25rem 0;
    }

    .article-toc a {
        min-height: 40px;
        align-items: center;
    }

    .article-body {
        width: 100%;
    }
}

@media (max-width: 1000px) {
    .article-hero {
        padding: max(16vh, calc(var(--site-header-h, 72px) + 2rem)) var(--hero-gutter) 8vh;
    }

    .article-header {
        min-height: clamp(580px, 72vw, 720px);
    }

    .a-copy {
        width: 72%;
        padding-top: clamp(4rem, 8vw, 6rem);
    }

    .a-title {
        max-width: min(100%, 20ch);
        font-size: clamp(2.8rem, 6.6vw, 4.5rem);
    }

    .a-figure {
        width: min(72vw, 680px);
    }

    .article-body {
        padding-bottom: 5vh;
    }
}

/* On tablets the copy still sits over the absolutely-positioned figure; a narrower column and a longer
   darkening gradient keep the introduction readable where it crosses the bright part of the photo. */
@media (min-width: 701px) and (max-width: 1000px) {
    .a-copy {
        width: 66%;
    }

    .a-figure-stage::after {
        background: linear-gradient(90deg, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 0.45) 40%, transparent 72%), linear-gradient(145deg, transparent 55%, rgba(5, 5, 5, 0.55));
    }
}

@media (max-width: 700px) {
    .article-hero {
        padding: max(14vh, calc(var(--site-header-h, 72px) + 2rem)) var(--hero-gutter) 6vh;
    }

    /* The reading layout is the full width here, so the contents take the same gutter as the text. */
    .article-toc-shell,
    .article-body {
        padding-inline: 5vw;
    }

    /* A single long word — „infrastrukturalnej", „Repräsentationsräume" — is wider than a phone's
       column at this size, and the hero clips it. */
    .a-title {
        max-width: none;
        font-size: clamp(2.35rem, 9.5vw, 3.6rem);
        line-height: 1.08;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .article-header {
        display: flex;
        flex-direction: column-reverse;
        gap: 2.5rem;
        min-height: 0;
        padding-top: 1.5rem;
    }

    .a-copy {
        position: static;
        width: 100%;
        padding-top: 0;
    }

    .a-figure {
        position: relative;
        top: auto;
        right: auto;
        width: 92%;
        margin-left: auto;
    }

    .a-tagline {
        gap: 0.6rem;
    }

    .article-body h2 {
        font-size: 2rem;
        margin-top: 4rem;
    }

    .article-body h3 {
        font-size: 1.25rem;
        margin-top: 3rem;
    }

    .article-body h2,
    .article-body h3 {
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .article-body > p {
        font-size: 1.05rem;
    }

    .article-quote {
        width: 100%;
        margin: 4rem auto;
        padding: 1.5rem 0;
    }

    .aq-inner {
        grid-template-columns: 20px minmax(0, 1fr);
        column-gap: 0.85rem;
    }

    .article-quote p {
        font-size: 1.25rem;
        line-height: 1.5;
    }

    .aq-author {
        letter-spacing: 2px;
    }

    /* One gutter, not two: the layout goes full width and .article-body keeps its 5vw padding. */
    .article-reading-layout {
        width: 100%;
    }

    /* Justified text over a ~34-character measure produces rivers of white space. */
    .article-body > p,
    .article-body .article-quote p,
    .article-body .article-list li,
    .article-body .article-source {
        text-align: left;
    }

    .article-body img,
    .article-body .photo {
        margin: 2.5rem 0;
    }

    .article-body .art-cta-wrapper .btn-main {
        width: 100%;
    }
}
/* #endregion */

/* #region Other */
.article-wrapper .core-interface.home-concierge {
    padding-bottom: clamp(6rem, 10vh, 9rem);
}

/* No .article-manifest-cta: the article's pairing is the ecosystem map, which brings its own section. */
.article-product-cta {
    border-top: 1px solid var(--hairline-strong);
}
/* #endregion */

/* #region Breadcrumbs */
/* A way back, not a title. Small mono capitals, and never gold: gold is the house's colour for what it
   wants read, and a trail the reader is standing at the end of is the opposite of that.

   How it looks is not written here — it lives in site.css under .breadcrumbs, so the report pages in
   Odoardo Research™ show the same trail rather than a second design of one. What
   stays is what belongs to this page alone: the space beneath it, and the entrance it makes with the
   rest of the article's opening. */
.a-breadcrumbs {
    margin-bottom: 5vh;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s 0.15s var(--ease-house) forwards;
}

/* #endregion */