/*
 * The reader's typefaces (ADR-0091): Newsreader for headlines and numerals, Schibsted Grotesk for
 * the interface. Both are under the SIL Open Font License 1.1 and are served from the site's own
 * assets, fingerprinted by AssetMapper, so nothing is asked of another origin and they work offline.
 * assets/fonts/README.md records where each file came from.
 *
 * Each family is cut in the subsets Google Fonts serves, with their exact unicode-range: the latin
 * file holds Albanian (ë, ç), English and the other Western European languages; the latin-ext file
 * (Turkish, among others) is fetched only by a page that has one of its characters. A script neither
 * covers, such as Hindi, falls through to the system fonts named after these in tokens.css.
 *
 * font-display: swap paints the text at once in a local stand-in and changes it when the file
 * arrives. The "Fallback" faces are those stand-ins, scaled to the web face: size-adjust matches the
 * advance width of a fixed Albanian and English corpus, and the vertical overrides put the baseline
 * and the line where the web face puts them, so the swap moves text as little as possible. The values
 * were measured and checked in headless Chrome, as the README describes, and not in Safari or
 * Firefox; a browser that ignores the vertical overrides still gets matching widths wherever it
 * applies size-adjust. Georgia and Arial are the stand-ins because Windows, macOS and iOS all have
 * them. Where they are missing (Android, most Linux systems) the fallback face is skipped and the
 * system stack stands in, untuned.
 */

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/newsreader/newsreader-latin-wght-normal-99CxVbS.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/newsreader/newsreader-latin-ext-wght-normal-0bCqcbW.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* A real italic, so the browser never slants the upright face. Latin only: the italic lines are short. */
@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/newsreader/newsreader-latin-wght-italic-WkjgNIF.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Schibsted Grotesk";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/schibsted-grotesk/schibsted-grotesk-latin-wght-normal-2JMSASU.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Schibsted Grotesk";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/schibsted-grotesk/schibsted-grotesk-latin-ext-wght-normal-bCMKxYZ.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * The stand-ins. A regular and a bold face each, so a bold headline is drawn from the bold cut and
 * never from a thickened regular, and an italic for the italic lines. Each stands in only for the
 * characters its web face will draw.
 */
@font-face {
    font-family: "Newsreader Fallback";
    font-style: normal;
    font-weight: 400;
    src: local("Georgia");
    size-adjust: 95.88%;
    ascent-override: 76.66%;
    descent-override: 27.64%;
    line-gap-override: 0%;
    unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20C4, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader Fallback";
    font-style: normal;
    font-weight: 700;
    src: local("Georgia Bold"), local("Georgia-Bold");
    size-adjust: 89.26%;
    ascent-override: 82.35%;
    descent-override: 29.69%;
    line-gap-override: 0%;
    unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20C4, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader Fallback";
    font-style: italic;
    font-weight: 400;
    src: local("Georgia Italic"), local("Georgia-Italic");
    size-adjust: 89.61%;
    ascent-override: 82.02%;
    descent-override: 29.57%;
    line-gap-override: 0%;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Schibsted Grotesk Fallback";
    font-style: normal;
    font-weight: 400;
    src: local("Arial"), local("ArialMT");
    size-adjust: 103.25%;
    ascent-override: 94.58%;
    descent-override: 24.99%;
    line-gap-override: 0%;
    unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20C4, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Schibsted Grotesk Fallback";
    font-style: normal;
    font-weight: 700;
    src: local("Arial Bold"), local("Arial-BoldMT");
    size-adjust: 101.56%;
    ascent-override: 96.15%;
    descent-override: 25.4%;
    line-gap-override: 0%;
    unicode-range: U+0000-02CC, U+02CE-02D7, U+02DA, U+02DC-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20C4, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

/*
 * Mosaic design tokens (ADR-0091): every colour, type step, space, width, elevation and motion value
 * the reader app draws with, as custom properties, so a page is styled from one vocabulary.
 *
 * Direction: an editorial front page. Serif headlines over a quiet sans for everything that is
 * interface, warm paper with ink in the light scheme and a lighter blue slate in the dark one, rules
 * instead of boxes. Ink is the accent: links, focus and marks are ink. One colour is kept for the
 * action that is a screen's next step, a yellow with an ink label and a dark-gold edge. Fonts are Newsreader and Schibsted Grotesk, served from the site's own assets
 * (fonts.css: no other origin, ë/ç covered, works offline), with system fonts for other scripts.
 *
 * The colours below are the defaults. The theme stylesheet of the published configuration
 * (/theme/<hash>.css, Settings module) overrides the brand colours after this file, and every
 * derived colour is computed from them, so a site's palette changes the whole system at once.
 */

:root {
    color-scheme: light dark;

    /* Brand colours (overridden by the theme stylesheet). */
    --colour-bg: #fbf9f4;
    --colour-surface: #ffffff;
    --colour-text: #141b2d;
    --colour-muted: #5b6377;
    --colour-accent: #141b2d;
    --colour-accent-contrast: #ffffff;
    --colour-action: #ffce2e;
    --colour-action-text: #141b2d;
    --colour-action-edge: #8a6d00;
    --colour-danger: #b42318;

    /* Fixed message colours. */
    --colour-warning-bg: #fff1cf;
    --colour-warning-text: #5a4300;
    --colour-success-bg: #e3f1e4;
    --colour-success-text: #14532d;
    --colour-error-bg: #fde4e4;
    --colour-error-text: #7f1d1d;

    /* Section hues (Rreze boards): a section's small tile and name, a story's number, a topic tile.
       Never a button, a band or a headline; the name always goes with the hue. */
    --hue-politike: #5b3fb8;
    --hue-ekonomi: #0b7a53;
    --hue-bota: #1f5fbf;
    --hue-sport: #c2371e;
    --hue-kulture: #a1237a;
    --hue-shendet: #0e7c86;
    --hue-teknologji: #3d4fd1;
    --hue-arsim: #8a4b2a;
    --hue-mjedis: #2f7d32;
    --hue-infrastrukture: #4a6076;
    /* The numeral on a filled hue tile. Every stored category colour reads at 4.5:1 or more on the
       light ground (CategoryColour), which puts it at or under 0.17 relative luminance, so white
       reads at 4.7:1 or more on it in either scheme. */
    --hue-on: #ffffff;

    /* Derived from the brand colours, so they follow a changed palette and either scheme. */
    --colour-rule: var(--colour-text);
    --colour-hairline: color-mix(in srgb, var(--colour-text) 9%, var(--colour-bg));
    --colour-border: var(--colour-hairline);
    /* Second ink: text that is not a headline and not secondary either. */
    --colour-text-2: color-mix(in srgb, var(--colour-text) 82%, var(--colour-bg));
    /* The action under the pointer: a shade deeper, whatever palette is published. */
    --colour-action-hover: color-mix(in srgb, var(--colour-action) 94%, var(--colour-action-text));
    --colour-wash: color-mix(in srgb, var(--colour-text) 4%, var(--colour-bg));
    --colour-accent-soft: color-mix(in srgb, var(--colour-accent) 10%, var(--colour-bg));
    --colour-focus: var(--colour-accent);
    /* The edge of a control (field, chip, quiet button) must be seen at 3:1 against the page, which the
       hairline between stories is not meant to be. */
    --colour-control: color-mix(in srgb, var(--colour-text) 50%, var(--colour-bg));
    /* What a picture's box shows before the picture arrives, or when there is none to show. */
    --colour-placeholder: color-mix(in srgb, var(--colour-text) 8%, var(--colour-bg));
    --colour-placeholder-tile: color-mix(in srgb, var(--colour-accent) 9%, var(--colour-placeholder));
    --image-brightness: 1;
    --state-hover: color-mix(in srgb, var(--colour-text) 6%, transparent);
    --state-active: color-mix(in srgb, var(--colour-text) 11%, transparent);

    /* Type. Newsreader headlines and Schibsted Grotesk interface; fonts.css declares the faces. */
    --font-body: "Schibsted Grotesk", "Schibsted Grotesk Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Newsreader", "Newsreader Fallback", "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Bitstream Charter", "Noto Serif", Georgia, serif;
    /* The smallest step, for uppercase labels and counts: 13px, the size the Rreze boards set kickers in, and never smaller. */
    --step--2: 0.8125rem;
    --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
    --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --step-1: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
    --step-2: clamp(1.3rem, 1.15rem + 0.75vw, 1.75rem);
    --step-3: clamp(1.6rem, 1.3rem + 1.5vw, 2.5rem);
    --step-4: clamp(2rem, 1.4rem + 3vw, 3.5rem);
    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-body: 1.55;

    /* Space and shape. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --space-6: 4rem;
    --radius: 0.25rem;
    --radius-small: 0.25rem;
    --rule-heavy: 2px;
    --rule-light: 1px;
    --touch-target: 44px;
    --tab-bar-height: 3.5rem;

    /* Widths. --content-width is the reading column (set per page by the design classes); the page
       width is for compositions of several columns, such as the front page. */
    --content-width: 44rem;
    --page-width: 82rem;
    --rail-width: 21rem;
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

    /* Elevation: almost none. A menu or a sheet lifts; nothing else does. */
    --shadow-1: 0 1px 2px color-mix(in srgb, var(--colour-text) 14%, transparent);
    --shadow-2: 0 8px 24px color-mix(in srgb, var(--colour-text) 18%, transparent);

    /* Motion: short, and only to clarify. */
    --motion-fast: 120ms;
    --motion-base: 200ms;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --colour-bg: #1c3043;
        --colour-surface: #253d52;
        --colour-text: #f5fbff;
        --colour-muted: #bfd2e2;
        --colour-accent: #76d2ff;
        --colour-accent-contrast: #123247;
        --colour-action: #76d2ff;
        --colour-action-text: #123247;
        --colour-action-edge: #76d2ff;
        --colour-danger: #ffb4ab;
        --colour-border: #496479;
        --colour-warning-bg: #3a2f0b;
        --colour-warning-text: #ffe7a3;
        --colour-success-bg: #10301c;
        --colour-success-text: #bbf7d0;
        --colour-error-bg: #3b1212;
        --colour-error-text: #fecaca;
        --colour-control: color-mix(in srgb, var(--colour-text) 42%, var(--colour-bg));
        --colour-placeholder: color-mix(in srgb, var(--colour-text) 11%, var(--colour-bg));
        /* Photographs sit a little lower in a dark page, so they do not glare out of it. */
        --image-brightness: 0.9;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0.01ms;
        --motion-base: 0.01ms;
    }
}

/*
 * Print edition (ADR-0091): a newspaper appearance the reader switches on from the About page and
 * off again from the line at the foot of every page. Newsprint, black rules, serif throughout, no
 * rounding. It only changes tokens and a few shapes in editorial.css.
 */
html[data-edition="print"] {
    color-scheme: light;
    --colour-bg: #ece6d6;
    --colour-surface: #f4efe1;
    --colour-text: #151310;
    --colour-muted: #4a443a;
    --colour-accent: #151310;
    --colour-accent-contrast: #f4efe1;
    --colour-action: var(--colour-accent);
    --colour-action-text: var(--colour-accent-contrast);
    --colour-action-edge: var(--colour-control);
    --colour-danger: #b42318;
    --colour-border: #b9b09b;
    --colour-control: color-mix(in srgb, var(--colour-text) 50%, var(--colour-bg));
    --colour-placeholder: color-mix(in srgb, var(--colour-text) 8%, var(--colour-bg));
    --image-brightness: 1;
    --font-body: var(--font-serif);
    --radius: 0;
    --radius-small: 0;
}

/*
 * Mosaic reader components. Mobile-first, logical properties; every value is a design token from
 * tokens.css, whose brand colours the theme stylesheet of the published configuration
 * (/theme/<hash>.css, Settings module) overrides. editorial.css, loaded after this file, composes
 * the shell and the front page.
 */

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

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

body {
    margin: 0;
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--colour-bg);
    color: var(--colour-text);
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.55;
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
    /* Room for the fixed tab bar, so the footer is never under it. */
    padding-block-end: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
}

a {
    color: var(--colour-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

@media (hover: hover) {
    a:hover {
        text-decoration-thickness: 2px;
    }
}

.skip-link {
    position: absolute;
    inset-inline-start: var(--space-3);
    inset-block-start: -100%;
    padding: var(--space-2) var(--space-3);
    background: var(--colour-accent);
    color: var(--colour-accent-contrast);
    border-radius: var(--radius);
    z-index: 10;
}

.skip-link:focus {
    inset-block-start: var(--space-2);
}

.app-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 5;
    padding-block-start: env(safe-area-inset-top);
    background: color-mix(in srgb, var(--colour-surface) 92%, transparent);
    border-block-end: 1px solid var(--colour-border);
    backdrop-filter: blur(8px);
}

.app-header__bar {
    display: flex;
    align-items: center;
    min-block-size: calc(var(--touch-target) + var(--space-3));
    padding-inline: var(--space-3);
}

/* Sections: one row that scrolls sideways on narrow screens. */
.site-nav__list {
    display: flex;
    gap: var(--space-1);
    margin: 0;
    padding: 0 var(--space-3) var(--space-2);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-3);
    border-radius: 999px;
    color: var(--colour-text);
    text-decoration: none;
    white-space: nowrap;
}

.site-nav__link[aria-current="page"] {
    background: var(--colour-accent);
    color: var(--colour-accent-contrast);
}

/* Bottom tabs, fixed above the home indicator; on wide screens a floating bar. */
.tab-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 5;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    min-block-size: var(--tab-bar-height);
    padding-block-end: env(safe-area-inset-bottom);
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
    background: color-mix(in srgb, var(--colour-surface) 94%, transparent);
    border-block-start: 1px solid var(--colour-border);
    backdrop-filter: blur(8px);
}

.tab-bar__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-block-size: var(--touch-target);
    color: var(--colour-muted);
    font-size: 0.8125rem;
    text-decoration: none;
}

.tab-bar__tab[aria-current="page"] {
    color: var(--colour-accent);
    font-weight: 700;
}

.tab-bar__tab:active {
    background: var(--colour-border);
}

/* The bar's icons are 22 px at the reader's text size (a medium icon is 1.25 times this font size),
   which with the header's 11 px padding is a 44 px touch target. */
.tab-bar__icon,
.header-nav__icon {
    font-size: 1.1rem;
    line-height: 1;
}

/* Icons (ADR-0098): Tabler's outlines, drawn by the icon() Twig function. The file carries the
   outline (fill none, stroke currentColor, stroke-width 2, round caps); sizes, weights and tones are
   these presets and nothing else. Sizes are in em, so larger text makes larger icons. */
.icon {
    flex: none;
    inline-size: 1em;
    block-size: 1em;
    vertical-align: -0.15em;
}

.icon--sm {
    inline-size: 1em;
    block-size: 1em;
}

.icon--md {
    inline-size: 1.25em;
    block-size: 1.25em;
}

.icon--lg {
    inline-size: 1.5em;
    block-size: 1.5em;
}

.icon--xl {
    inline-size: 2em;
    block-size: 2em;
}

.icon--stroke-light {
    stroke-width: 1.5;
}

.icon--stroke-regular {
    stroke-width: 2;
}

.icon--stroke-bold {
    stroke-width: 2.5;
}

.icon--tone-muted {
    color: var(--colour-muted);
}

.icon--tone-accent {
    color: var(--colour-accent);
}

/* A button's icon sits before its words. */
.button .icon {
    margin-inline-end: 0.5em;
}

/* A category's or topic's icon sits before its name, a little way off, and never shrinks. */
.chip .icon,
.site-nav__link .icon {
    margin-inline-end: 0.4em;
}

.page-header__icon {
    margin-inline-end: 0.3em;
    vertical-align: -0.2em;
}

@media (min-width: 64rem) {
    .tab-bar {
        inset-inline: 50%;
        inset-block-end: var(--space-3);
        inline-size: 28rem;
        margin-inline-start: -14rem;
        border: 1px solid var(--colour-border);
        border-radius: 999px;
        padding-block-end: 0;
    }
}

/* A bottom sheet (the iOS install hint). */
.sheet {
    inline-size: min(100%, 32rem);
    margin-block: auto 0;
    margin-inline: auto;
    padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    border: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--colour-surface);
    color: var(--colour-text);
}

.sheet::backdrop {
    background: rgb(0 0 0 / 40%);
}

.sheet__title {
    margin-block-start: 0;
    font-size: 1.125rem;
}

/* Reserve the optional install affordance before the browser offers it. Visibility keeps it
   out of the accessibility tree and keyboard order without moving the reader when revealed. */
.header-nav__install[hidden] {
    display: inline-flex;
    visibility: hidden;
}

.header-nav__install {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-2);
    border: 1px solid var(--colour-control);
    border-radius: var(--radius);
    background: transparent;
    color: var(--colour-text);
    font: inherit;
    font-weight: 600;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--touch-target);
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.125rem;
}

/* An uploaded logo keeps its proportions at the height the image presets set. */
.brand__logo {
    display: block;
    inline-size: auto;
    max-inline-size: 60vw;
}

/* Rreze "No connection" (States board, section 3): an ink row, the status, then «Provoni sërish». */
.connection-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 12px;
    margin: 0;
    padding: 12px 14px 12px 16px;
    background: var(--colour-text);
    color: var(--colour-surface);
    font-size: 0.9375rem;
    line-height: 1.4;
}

.connection-banner:has(> [data-connection-banner][hidden]) {
    display: none;
}

/* The button moves under the words when both do not fit (narrow screens, enlarged text). */
.connection-banner__text {
    flex: 1 1 10rem;
    min-inline-size: 0;
    margin: 0;
}

.connection-banner__retry {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-block-size: 44px;
    margin-inline-start: auto;
    padding: 0 12px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.connection-banner__retry:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .connection-banner {
        border-block-end: 1px solid CanvasText;
    }
}

/* A controlled worker fills only this public UTC provenance marker for a no-JS kept copy. */
.saved-copy-fallback {
    display: none;
}

html[data-saved-copy] .saved-copy-fallback {
    display: flex;
}

html[data-saved-copy]:not([data-saved-copy=""]) [data-saved-copy-time-unknown] {
    display: none;
}

.request-error {
    position: fixed;
    inset-inline: var(--space-3);
    inset-block-end: calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + var(--space-3));
    z-index: 6;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    background: var(--colour-error-bg);
    color: var(--colour-error-text);
    text-align: center;
}

.app-content {
    flex: 1;
    inline-size: 100%;
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding: var(--space-4) var(--space-3) var(--space-5);
}

.hero__title {
    margin-block: var(--space-4) var(--space-2);
    font-size: clamp(2rem, 1.5rem + 3vw, 3rem);
    line-height: 1.1;
}

.hero__lead {
    font-size: 1.15em;
    color: var(--colour-muted);
}

.hero__status {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--colour-border);
    border-radius: 999px;
    background: var(--colour-surface);
}

.principles__list {
    padding-inline-start: var(--space-4);
}

.principles__list li + li {
    margin-block-start: var(--space-2);
}

/*
 * Design tokens a page may set for itself (DesignSettings): the body names them as classes.
 */
.width-narrow {
    --content-width: 36rem;
}

.width-normal {
    --content-width: 44rem;
}

.width-wide {
    --content-width: 60rem;
}

.density-compact {
    --space-2: 0.375rem;
    --space-3: 0.75rem;
    --space-4: 1.125rem;
    --space-5: 1.875rem;
}

.density-comfortable {
    --space-2: 0.625rem;
    --space-3: 1.25rem;
    --space-4: 1.875rem;
    --space-5: 3.125rem;
}

/*
 * Layout blocks (templates/components/Block) and story cards. Columns are classes, per screen
 * size: mobile first, then tablet and desktop override.
 */
.preview-banner {
    margin-block: 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    background: var(--colour-warning-bg);
    color: var(--colour-warning-text);
}

.block {
    margin-block: var(--space-5);
}

.block__title {
    margin-block: 0 var(--space-1);
    font-size: 1.35rem;
}

.block__subtitle {
    margin-block: 0;
    color: var(--colour-muted);
}

.block__header {
    margin-block-end: var(--space-3);
}

.cards {
    --cols: 1;

    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.cards--list {
    gap: 0;
}

.cards--list > li + li {
    border-block-start: 1px solid var(--colour-border);
}

.cards--list .card {
    border: 0;
    border-radius: 0;
    background: none;
    padding-inline: 0;
}

/* In a list, the image sits beside the text, small, instead of across the card. */
.cards--list .card--with-image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem;
    column-gap: var(--space-3);
}

.cards--list .card--with-image > * {
    grid-column: 1;
}

.cards--list .card__image {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
}

.cards--list .card__image img {
    border-radius: calc(var(--radius) / 2);
}

.cols-m-2 {
    --cols: 2;
}

@media (min-width: 40rem) {
    .cols-t-1 {
        --cols: 1;
    }

    .cols-t-2 {
        --cols: 2;
    }

    .cols-t-3 {
        --cols: 3;
    }

    .cols-t-4 {
        --cols: 4;
    }
}

@media (min-width: 64rem) {
    .cols-d-1 {
        --cols: 1;
    }

    .cols-d-2 {
        --cols: 2;
    }

    .cols-d-3 {
        --cols: 3;
    }

    .cols-d-4 {
        --cols: 4;
    }

    .cols-d-5 {
        --cols: 5;
    }

    .cols-d-6 {
        --cols: 6;
    }
}

.carousel {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    border-radius: var(--radius);
}

.carousel:focus-visible {
    outline: 3px solid var(--colour-accent);
    outline-offset: 2px;
}

.carousel__track {
    display: grid;
    grid-auto-columns: min(80%, 18rem);
    grid-auto-flow: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0 0 var(--space-2);
    list-style: none;
}

.carousel__track > li {
    scroll-snap-align: start;
}

/*
 * A story card adapts to the width its block gives it, not to the screen's: the same card is a
 * sixth of a desktop row, a list's full width or a carousel's slide. Each list item is the card's
 * container (inline-size only, so the card's height still follows its content); the narrow and
 * wide steps below are on that container. The screen-width rules above still choose how many
 * columns a block has.
 */
/* The cards of a list, a carousel, the front page's supporting headlines and its rail. */
.cards > li,
.carousel__track > li,
.hero-block__support > li,
.rail__item {
    container: card / inline-size;
}

.card {
    block-size: 100%;
    padding: var(--space-3);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    background: var(--colour-surface);
}

.card__title {
    margin: 0 0 var(--space-2);
    font-size: 1.1rem;
    line-height: 1.3;
}

.card--small .card__title {
    font-size: 1rem;
}

.card--large .card__title {
    font-size: 1.3rem;
}

.card--hero .card__title {
    font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2rem);
    line-height: 1.2;
}

.card__title a {
    color: inherit;
    text-decoration: none;
}

.card__title a:hover {
    text-decoration: underline;
}

.card__image {
    display: block;
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-2);
}

.card__image img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--colour-placeholder);
    object-fit: cover;
}

/* Native layered pixels reserve the real image's existing geometry, including no-JS readers. */
.card__image--blurhash { position: relative; overflow: hidden; background: var(--colour-placeholder); border-radius: var(--radius) var(--radius) 0 0; }
.card__image--blurhash::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid var(--colour-border); border-radius: inherit; pointer-events: none; }
.card__image--blurhash .card__blurhash { position: absolute; inset: 0; block-size: 100%; pointer-events: none; color: transparent; }
.card__picture { position: relative; z-index: 1; display: block; block-size: 100%; }
.card__image--blurhash .card__picture img { block-size: 100%; background: transparent; color: transparent; }
.card--hero .card__image--blurhash { max-block-size: 26rem; }
.card__pixels--unavailable { opacity: 0; }
.card__image--framed .card__picture { block-size: 100%; }
.card__picture img::before, .card__blurhash::before { content: ""; position: absolute; inset: 0; background: var(--colour-placeholder); }

/* A list's picture sits at the right in a fixed frame; a story without one draws no frame. */
.card__image--framed {
    align-self: start;
    overflow: hidden;
    background: var(--colour-placeholder);
    border-radius: calc(var(--radius) / 2);
}

.card__image--framed img {
    block-size: 100%;
}

.card__image--1x1 { aspect-ratio: 1 / 1; }
.card__image--4x3 { aspect-ratio: 4 / 3; }
.card__image--3x2 { aspect-ratio: 3 / 2; }
.card__image--16x9 { aspect-ratio: 16 / 9; }

.card__excerpt {
    margin: 0 0 var(--space-2);
    color: var(--colour-muted);
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    font-size: 0.875rem;
    color: var(--colour-muted);
}

.card__source {
    font-weight: 600;
}

.button {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-4);
    border-radius: var(--radius);
    background: var(--colour-action);
    color: var(--colour-action-text);
    text-decoration: none;
    font-weight: 600;
}

.button:active {
    transform: translateY(1px);
}

.app-footer {
    padding: var(--space-4) var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom));
    color: var(--colour-muted);
    text-align: center;
    border-block-start: 1px solid var(--colour-border);
}

/* Header navigation (account entry point). */
.header-nav {
    margin-inline-start: auto;
    display: flex;
    gap: var(--space-2);
}

.header-nav__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-3);
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
}

.header-nav__link:active {
    background: var(--colour-border);
}

/* On a phone the header's search link is its icon, the word kept as its name (the header is wider
   than an iPhone otherwise); from 40rem the word shows. */
.header-nav__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* On a phone the header's icons are as wide as a touch target and no wider, and the bar's gap is
   smaller: with the install button showing, the bar is otherwise wider than a 360 px phone at the
   reader's own text size. */
@media (max-width: 39.999rem) {
    .app-header__bar {
        gap: var(--space-2);
    }

    .header-nav__link:not(.display-menu__button),
    .header-nav__install {
        min-inline-size: var(--touch-target);
        padding-inline: 0.6875rem;
        justify-content: center;
    }
}

@media (min-width: 40rem) {
    .header-nav__install {
        padding-inline: var(--space-3);
    }

    .header-nav__label {
        position: static;
        inline-size: auto;
        block-size: auto;
        margin: 0 0 0 0.35em;
        overflow: visible;
        clip-path: none;
    }
}

/* Messages */
.flash {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
}

.flash--success {
    background: var(--colour-success-bg);
    color: var(--colour-success-text);
}

.flash--error {
    background: var(--colour-error-bg);
    color: var(--colour-error-text);
}

.flash--warning {
    background: var(--colour-warning-bg);
    color: var(--colour-warning-text);
}

/* Forms: Symfony's div layout plus hand-written rows share the same look. */
.auth {
    max-inline-size: 28rem;
}

/* Every grid here has a column that may shrink to the form: an automatic column is as wide as the
   widest control's intrinsic width (a text input is twenty characters wide, and wider as the text
   is), which pushed rows past the screen on a phone at the larger text steps. */
.form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin-block: var(--space-3);
}

.form > div,
.form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
}

.form > .form__row--inline,
.form .form__row--inline {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
}

.form__row--inline > label {
    display: flex;
    align-items: center;
    min-block-size: var(--touch-target);
}

/* A form drawn by Symfony's default theme wraps all its rows in one more div: each row is a label
   above its control, a checkbox or radio beside its label, and the controls are as wide as the form. */
/* The wrapper holds the rows apart; a row holds its label close to its field (proximity says which
   label belongs to which field). */
.form > div:has(> div) {
    gap: var(--space-3);
}

.form > div > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
}

.form > div > div:has(> input[type="checkbox"], > input[type="radio"]) {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
}

.form > div > div > :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
    inline-size: 100%;
    box-sizing: border-box;
}

.form label {
    font-weight: 600;
}

.form input:not([type="checkbox"], [type="radio"]),
.form select,
.form textarea {
    box-sizing: border-box;
    max-inline-size: 100%;
    min-block-size: var(--touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--colour-control);
    border-radius: var(--radius);
    background: var(--colour-surface);
    color: var(--colour-text);
    font: inherit;
}

/* Keep native pickers and field behavior; use the same states for every reader form. */
.form .button:disabled,
.display .button:disabled {
    background: var(--colour-wash);
    color: var(--colour-muted);
    border: var(--rule-light) solid var(--colour-control);
    cursor: not-allowed;
}
.form[aria-busy="true"] .button { cursor: progress; }
.form :is(input:not([type="checkbox"], [type="radio"]), select, textarea):disabled {
    background: var(--colour-wash);
    color: var(--colour-muted);
    cursor: not-allowed;
}
.form :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--colour-danger);
    border-style: dashed;
}
.form :is(input, select, textarea):focus-visible {
    outline: var(--rule-heavy) solid var(--colour-focus);
    outline-offset: 2px;
}
.form input[type="checkbox"],
.form input[type="radio"] {
    inline-size: 1.25rem;
    block-size: 1.25rem;
}

.form fieldset {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.form legend {
    margin-block-end: var(--space-1);
    padding: 0;
    font-weight: 600;
}

.push-offer {
    margin: var(--space-2) 0 0;
    color: var(--colour-muted);
    font-size: 0.9em;
}

.form ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--colour-danger);
}

.form .help-text {
    color: var(--colour-muted);
    font-size: 0.9em;
}

/* A plain button is a screen's next step and takes the action role; the others are quiet. */
.button {
    border: 1px solid var(--colour-action-edge);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

@media (forced-colors: active) {
    .button {
        background: ButtonFace;
        color: ButtonText;
        border-color: ButtonText;
    }
}

.button--secondary {
    background: var(--colour-surface);
    color: var(--colour-text);
    border: 1px solid var(--colour-control);
}

.button--danger {
    border: 1px solid var(--colour-danger);
    background: var(--colour-surface);
    color: var(--colour-danger);
}

.link-button {
    min-block-size: var(--touch-target);
    padding: 0;
    border: 0;
    background: none;
    color: var(--colour-accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Account */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    margin-block: var(--space-3);
    border-block-end: 1px solid var(--colour-border);
}

.tabs__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-3);
    text-decoration: none;
    color: var(--colour-muted);
}

.tabs__link[aria-current="page"] {
    color: var(--colour-text);
    font-weight: 700;
    border-block-end: 3px solid var(--colour-accent);
}

.badge {
    display: inline-block;
    padding: 0 var(--space-2);
    border-radius: 999px;
    background: var(--colour-success-bg);
    color: var(--colour-success-text);
    font-size: 0.85em;
}

.badge--warning {
    background: var(--colour-warning-bg);
    color: var(--colour-warning-text);
}

.card-list {
    display: grid;
    gap: var(--space-2);
    padding: 0;
    list-style: none;
}

.card {
    padding: var(--space-3);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    background: var(--colour-surface);
}

.card__title,
.card__meta {
    margin: 0;
}

.card__meta {
    color: var(--colour-muted);
    font-size: 0.9em;
}

/* A narrow card (a sixth of a wide row): tighter, and its meta one item to a line. */
@container card (inline-size < 15rem) {
    .card {
        padding: var(--space-2);
    }

    .card__image {
        margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) var(--space-2);
    }

    .card__meta {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* A list card's image column follows the container: smaller when narrow, larger when wide. */
@container card (inline-size < 22rem) {
    .cards--list .card--with-image {
        grid-template-columns: minmax(0, 1fr) 5rem;
        column-gap: var(--space-2);
    }
}

@container card (inline-size >= 40rem) {
    .cards--list .card--with-image {
        grid-template-columns: minmax(0, 1fr) 10rem;
    }
}

.qr svg {
    inline-size: min(240px, 100%);
    block-size: auto;
    background: #ffffff;
    border-radius: var(--radius);
}

.secret,
.backup-codes code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    word-break: break-all;
}

.backup-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--space-2);
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--colour-focus);
    outline-offset: 3px;
}

/* Reader pages: headings, directories, the story page, preferences. */
.page-header {
    margin-block-end: var(--space-4);
}

.page-header__logo {
    display: block;
    block-size: 40px;
    inline-size: 120px;
    object-fit: contain;
    object-position: left center;
    max-inline-size: 100%;
    margin-block-end: var(--space-2);
}

.page-header__portrait {
    display: block;
    block-size: 64px;
    inline-size: 64px;
    object-fit: contain;
    margin-block-end: var(--space-2);
}

.page-header__kind {
    margin: 0;
    color: var(--colour-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page-header__title {
    margin-block: var(--space-1) var(--space-2);
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
    line-height: 1.2;
}

.page-header__lead {
    margin: 0;
    color: var(--colour-muted);
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-3);
    border: 1px solid var(--colour-control);
    border-radius: 999px;
    background: var(--colour-surface);
    color: var(--colour-text);
    text-decoration: none;
}

.directory + .directory {
    margin-block-start: var(--space-5);
}

.directory-list {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 16rem auto;
}

.directory-list__link {
    display: flex;
    align-items: center;
    min-block-size: var(--touch-target);
    break-inside: avoid;
}

.empty {
    color: var(--colour-muted);
}

.cards__more {
    display: flex;
    justify-content: center;
    padding-block: var(--space-2);
}

.button--quiet {
    border: 1px solid var(--colour-control);
    background: var(--colour-surface);
    color: var(--colour-text);
}

/* The "new stories" control: a pill fixed over the bottom of the screen, clear of the tab bar and the
   safe areas. It is out of the flow, so it takes no room and nothing the reader is reading moves
   when it appears, and at the bottom it never covers the top of the page where reading starts. */
.new-stories {
    position: fixed;
    inset-inline: var(--space-3);
    inset-block-end: calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + var(--space-3));
    z-index: 4;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.new-stories:empty {
    display: none;
}

.new-stories__banner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-4);
    border-radius: 999px;
    background: var(--colour-accent);
    color: var(--colour-accent-contrast);
    font-weight: 600;
    text-decoration: none;
    pointer-events: auto;
}

.toggle-hide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.toggle-hide__state,
.toggle-hide__error {
    margin: 0;
}

.toggle-hide__error {
    color: var(--colour-danger);
}

.preferences__list {
    display: grid;
    gap: var(--space-2);
    padding: 0;
    list-style: none;
}

.story__kicker {
    margin: 0;
    font-weight: 600;
}

.story__title {
    margin-block: var(--space-1) var(--space-2);
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
    line-height: 1.2;
}

.story__meta,
.story__summary {
    color: var(--colour-muted);
}

.story__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.story__first,
.story__coverage,
.story__topics,
.story__related {
    margin-block-start: var(--space-5);
}

.timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    border-inline-start: 2px solid var(--colour-border);
}

.timeline__item {
    position: relative;
    padding-inline-start: var(--space-4);
    padding-block-end: var(--space-4);
}

.timeline__item::before {
    content: "";
    position: absolute;
    inset-inline-start: -0.4rem;
    inset-block-start: 0.4rem;
    inline-size: 0.7rem;
    block-size: 0.7rem;
    border-radius: 50%;
    background: var(--colour-border);
}

.timeline__item--first::before {
    background: var(--colour-accent);
}

.timeline__time {
    color: var(--colour-muted);
    font-size: 0.875rem;
}

.timeline__source {
    margin: 0;
    font-weight: 600;
}

.timeline__title {
    margin-block: var(--space-1);
    font-size: 1.0625rem;
}

.timeline__excerpt {
    margin: 0;
    color: var(--colour-muted);
}

.prose {
    overflow-wrap: anywhere;
    max-inline-size: 38rem;
}

.error-page {
    text-align: center;
}

/* Boosted page changes fade across (htmx's view transitions), and not at all for readers who ask
   for reduced motion. Whole-page navigations (account, sign-in) have no transition: the pages they
   lead to do not take part in one. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Reader search (ADR-0060). */
.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.search__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: var(--space-3);
}

.search__form .search__suggestion-list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--colour-text);
}

.search__suggestion-list a {
    display: flex;
    align-items: center;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-3);
    border-radius: var(--radius);
    background: var(--colour-surface);
}

.search__count,
.search__hint {
    color: var(--colour-muted);
}

/* The model's summary, labelled (ADR-0062). */
.story__ai-summary {
    margin-block: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-inline-start: 3px solid var(--colour-border);
    background: var(--colour-surface);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.story__ai-label {
    margin: 0 0 var(--space-1);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--colour-muted);
}

.story__ai-note {
    margin: var(--space-1) 0 0;
    font-size: 0.85rem;
    color: var(--colour-muted);
}

/* Belonging (ADR-0091): real counts of readers, shown only once enough make them, and the number
   of outlets that cover a story, which is what a story page is for. */
.page-header__audience,
.story__together {
    margin: var(--space-2) 0 0;
    color: var(--colour-muted);
    font-size: 0.9375rem;
}

.story__together {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    padding: 0;
    list-style: none;
}

.story__outlets {
    color: var(--colour-text);
    font-size: 1.0625em;
}

/* Celebrations (ADR-0100): the canvas the confetti is drawn on. It covers the screen, takes no
   pointer and no focus, sits above the page and below the header and tab bar, and is removed when
   the burst ends. Readers who ask for less motion are shown none (celebrate.js asks too). */
.celebration {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: 4;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .celebration {
        display: none;
    }
}

/* Reviewed associated photos: fixed stage, overlap captions, controls reserved before JS. */
.media-gallery { margin: 0 0 var(--space-4); min-inline-size: 0; }
.media-gallery__stage { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; background: var(--colour-surface); overflow: hidden; }
.media-gallery__slide { position: absolute; inset: 0; }
.media-gallery__placeholder { position: absolute; inset: 0; display: grid; place-content: center; padding: var(--space-4); text-align: center; }
.media-gallery__status { block-size: 3lh; overflow: auto; margin-block: var(--space-2); }
.media-gallery [data-gallery-retry] { min-block-size: 44px; }
.media-gallery__retry-slot { block-size: 44px; }
.media-gallery [data-gallery-retry][hidden] { display: none; }
.media-gallery__slide[hidden] { display: none; }
.media-gallery__slide picture, .media-gallery__slide img { display: block; inline-size: 100%; block-size: 100%; }
.media-gallery__slide img { object-fit: contain; }
.media-gallery__slide .media-gallery__blurhash { position: absolute; inset: 0; color: transparent; }
.media-gallery__slide picture { position: relative; }
.media-gallery__captions { display: grid; overflow-wrap: anywhere; }
.media-gallery__caption { grid-area: 1 / 1; }
.media-gallery__caption[aria-hidden="true"] { visibility: hidden; }
.media-gallery__caption p { margin-block: var(--space-1); }
.media-gallery__controls { display: flex; align-items: center; block-size: 44px; visibility: hidden; gap: 4px; }
.media-gallery.is-enhanced .media-gallery__controls { visibility: visible; }
.media-gallery__controls button { flex: 0 0 44px; inline-size: 44px; block-size: 44px; padding: 0; border: 0; background: transparent; color: var(--colour-text); font: inherit; cursor: pointer; }
.media-gallery__positions { display: flex; flex: 1 1 auto; min-inline-size: 0; overflow-x: auto; scrollbar-width: none; block-size: 44px; }
.media-gallery__positions button { font-size: 8px; opacity: 0.45; }
.media-gallery__positions button[aria-current="true"] { opacity: 1; color: var(--colour-accent); }
.media-gallery__controls button:focus-visible { outline: 2px solid var(--colour-accent); outline-offset: -3px; }

.story-primary-photo__picture, .story-primary-photo__picture img { display: block; inline-size: 100%; block-size: 100%; }
.story-primary-photo__picture { position: relative; }
.story-primary-photo__picture img { object-fit: contain; }
.story-primary-photo__blurhash { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: contain; color: transparent; pointer-events: none; }

/* Native language choices share the content edge and stay reachable without JavaScript. */
.edition-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    inline-size: 100%;
    max-inline-size: calc(var(--page-width) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--space-2) var(--gutter);
}
.edition-nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    min-inline-size: 0;
    max-inline-size: 100%;
    padding-inline: var(--space-3);
    border-radius: var(--radius-small);
    color: var(--colour-muted);
    font-size: var(--step--1);
    line-height: var(--leading-snug);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.edition-nav a[aria-current] {
    background: var(--colour-accent-soft);
    color: var(--colour-accent);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 currentColor;
}
.edition-nav a:is(:hover, :focus-visible) {
    color: var(--colour-text);
    text-decoration: underline;
}
.edition-nav a:last-child { margin-inline-start: auto; }
.edition-notice { color: var(--colour-muted); margin-block: 0 1rem; font-size: .875rem; }
/* The measured slot remains stable before and after the reader chooses to load a video. */
.youtube-video { margin: 0 0 var(--space-4); }
.youtube-video__stage { aspect-ratio: 16 / 9; min-width: 200px; min-height: 200px; width: 100%; display: grid; place-content: center; position: relative; background: var(--colour-surface); }
.youtube-video [data-youtube-load][hidden] { display: none; }
.youtube-video__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.youtube-video figcaption { padding-block: var(--space-3); overflow-wrap: anywhere; }
.publisher-video { margin: 0 0 var(--space-4); }
.publisher-video__stage { aspect-ratio: 16 / 9; min-height: 200px; width: 100%; position: relative; display: grid; place-content: center; background: var(--colour-surface); }
.publisher-video__placeholder { padding: var(--space-4); text-align: center; }
.publisher-video__placeholder > span { font-size: 2rem; }
.publisher-video__placeholder .button { margin-block-start: var(--space-3); }
.publisher-video [data-publisher-video-load][hidden] { display: none; }
.publisher-video__stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--colour-surface); }
.publisher-video figcaption { padding-block: var(--space-3); overflow-wrap: anywhere; }
.publisher-video [data-publisher-video-status] { block-size: 3lh; overflow: auto; margin-block: var(--space-2); }

/* Native reviewed attachments remain readable and touchable at phone widths. */
.story__files { margin-block-start: var(--space-4); overflow-wrap: anywhere; }
.story__files a { display: inline-block; max-inline-size: 100%; min-inline-size: var(--touch-target); min-block-size: var(--touch-target); padding-block: var(--space-2); }

/* Reading CTAs share the action palette with every plain button; links keep the brand accent. */
.story__coverage-link.button,
.button--reading.button,
.story__coverage-link.button:hover,
.button--reading.button:hover {
    background: var(--colour-action);
    color: var(--colour-action-text);
    border: 1px solid var(--colour-action-edge);
}

.story__coverage-link.button:hover,
.button--reading.button:hover {
    text-decoration: underline;
}

@media print {
    .button:not(.button--quiet, .button--secondary, .button--danger),
    .story__coverage-link.button,
    .button--reading.button,
    .story__coverage-link.button:hover,
    .button--reading.button:hover {
        background: #fff;
        color: #000;
        border-color: #000;
    }
}

/* Optional Save invitation: native dialog owns focus/inertness; no automatic prompt or animation. */
.guest-save {
    inline-size: min(calc(100vw - 16px), 32rem);
    max-inline-size: calc(100vw - 16px);
    padding-inline: clamp(12px, 4vw, 24px);
    max-block-size: calc(100dvh - 1rem);
    overflow: auto;
    border: 1px solid var(--colour-border);
}
.guest-save:not([open]) { display: none; }
.guest-save__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--space-3);
}
.guest-save__title {
    flex: 1;
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--step-3);
    line-height: 1.15;
    overflow-wrap: normal;
}
.guest-save__mark {
    flex: none;
    inline-size: 2rem;
    block-size: auto;
    color: var(--colour-accent);
}
.guest-save__choices {
    display: grid;
    gap: var(--space-2);
}
.guest-save__choices form { margin: 0; }
.guest-save__choices .button {
    inline-size: 100%;
    min-block-size: 44px;
    padding-inline: clamp(12px, 3vw, 24px);
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}
.guest-save__dismiss {
    display: block;
    margin-inline: auto;
    min-block-size: 44px;
    padding-inline: var(--space-3);
}
.guest-save__optional { font-size: var(--step--1); }
@media (forced-colors: active) {
    .guest-save__mark { color: CanvasText; }
}
@media print { .guest-save { display: none; } }

/* Interface flow uses logical spacing throughout the reader. Publisher text chooses its own
   direction, isolated from neighbouring controls, dates and counters. */
:where([dir="auto"]) { unicode-bidi: isolate; }
:where(input[type="email"], input[type="url"], input[type="tel"], input[autocomplete="one-time-code"]) {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}
html[dir="rtl"] :is(.card__title, .story__title, .story__summary, .rreze-result__title) { letter-spacing: normal; }
.reader-directional-arrow { display: inline-block; }
html[dir="rtl"] .reader-directional-arrow { transform: scaleX(-1); }

/*
 * The reader pages' own styles (ADR-0092): the story page's sections, the Latest page's date groups,
 * the pager and the controls of browsing. They use the shell's custom properties and add none.
 */

.category-directory {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.category-directory__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    block-size: 100%;
    min-block-size: var(--touch-target);
    padding: var(--space-2);
    border-block-end: var(--rule-light) solid var(--colour-hairline);
    color: var(--colour-text);
    text-decoration: none;
}

.category-directory__link .icon {
    flex: none;
}

.category-directory__link span {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.category-directory__link:hover {
    background: var(--state-hover);
}

.story__actions {
    align-items: center;
    gap: var(--space-3);
}

.story__actions + .vote-block {
    margin-block-start: var(--space-3);
}

.story__coverage-link {
    flex-basis: 100%;
    justify-content: center;
}

.story__original-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--touch-target);
    max-inline-size: 100%;
    color: var(--colour-muted);
    text-underline-offset: 0.18em;
}

.story__original-link span:first-child {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
    .category-directory {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .story__coverage-link {
        flex-basis: auto;
    }
}

.story__times {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-3) 0;
}

.story__times div {
    display: grid;
}

.story__times dt {
    color: var(--colour-muted);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.story__times dd {
    margin: 0;
    font-weight: 600;
}

.story__what,
.story__new,
.story__uncertain,
.story__follow {
    margin-block-start: var(--space-5);
}

.story__block {
    max-inline-size: 38rem;
    margin-block: var(--space-3);
}

.story__block--publisher {
    padding-inline-start: var(--space-3);
    border-inline-start: 3px solid var(--colour-border);
}

/* Who wrote a text: the publisher, Mosaic or the model, said in words before the text. */
.story__kind {
    margin: 0 0 var(--space-1);
    color: var(--colour-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.story__note,
.timeline__published,
.story__new-source {
    color: var(--colour-muted);
    font-size: 0.875rem;
}

.timeline__published {
    margin: var(--space-1) 0 0;
}

.story__new-list,
.story__follow-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.story__new-list li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    align-items: baseline;
}

.story__follow-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), max-content));
    align-items: start;
}

/* The link from the front page's latest stories to the whole list. */
.block__all {
    display: flex;
    justify-content: flex-start;
    margin: var(--space-3) 0 0;
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--colour-border);
}

/* Browsing: day groups, load more, progress and the end of a list. */
.day-group {
    list-style: none;
    margin-block-start: var(--space-4);
    padding-block-end: var(--space-1);
    border-block-end: 2px solid var(--colour-border);
}

.day-group:first-child {
    margin-block-start: 0;
}

.day-group__title {
    margin: 0;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--colour-muted);
}

.cards__end {
    padding-block: var(--space-3);
    color: var(--colour-muted);
    text-align: center;
}

.listing__status {
    margin-block: var(--space-2);
    color: var(--colour-muted);
    font-size: 0.875rem;
    text-align: center;
}

.pager__previous {
    margin-block: 0 var(--space-3);
}

/* The state of a "More" request: loading while it runs, failed until the reader tries again. */
[data-load-more][aria-busy="true"] {
    opacity: 0.7;
    cursor: progress;
}

.next-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.next-actions a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
}

/* Back to the top: shown after a long scroll, clear of the tab bar and the safe areas. */
.back-to-top {
    position: fixed;
    inset-inline-end: max(var(--space-3), env(safe-area-inset-right));
    inset-block-end: calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + var(--space-3));
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-3);
    border: 1px solid var(--colour-control);
    border-radius: 999px;
    background: var(--colour-surface);
    color: var(--colour-text);
    text-decoration: none;
}

.back-to-top[hidden] {
    display: none;
}

/* Above the new-stories control when both are shown, so neither covers the other. */
body:has(.new-stories__banner) .back-to-top {
    inset-block-end: calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + var(--touch-target) + var(--space-3) * 2);
}

/* What to read next: a few next steps, each saying how it relates to what was read. */
.read-next {
    margin-block-start: var(--space-5);
}

.read-next__list {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.read-next__relation {
    margin: 0 0 var(--space-1);
    color: var(--colour-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.read-next__links {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-header__page {
    margin: var(--space-1) 0 0;
    color: var(--colour-muted);
    font-size: 0.875rem;
}

/* What a time rests on, and the way to question it: said beside the time, not behind a tooltip. */
.time-basis {
    color: var(--colour-muted);
    font-size: 0.8125rem;
    font-weight: 400;
}

.timeline__basis {
    display: block;
}

/*
 * The "coverage observed from … to …" caption (ADR-0123), one rule for every place it is said (the
 * front column, the briefing block, the board, the section aside). The caption is quiet metadata:
 * small, in the muted ink, with no margin of its own (each place sets its spacing). The connective
 * words stay muted; the two instants are <time> elements one step stronger (the second ink) and a
 * touch heavier, with equal-width digits, so the bounds read before the label does and the
 * label never competes with the headline above. A bound never breaks across lines.
 */
.observed-window {
    margin: 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
    font-weight: 400;
    line-height: var(--leading-snug);
}

.observed-window__time {
    color: var(--colour-text-2);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.story__label-links {
    margin-block: var(--space-1) 0;
    font-size: 0.875rem;
}

.story__method {
    margin-block-start: var(--space-5);
    max-inline-size: 38rem;
}

/*
 * The story page as a reading page (ADR-0092): the header and the reading column on the left, and
 * on a wide screen one side panel on the right with what a reader wants beside the text, namely
 * where the earliest report is, the three times, the follow controls and the way to speak back.
 * On a phone the panel follows the text. Nothing here hides content the page needs to say.
 */
.story__header {
    max-inline-size: 52rem;
}

.story__title {
    font-size: var(--step-4);
    line-height: 1.1;
    text-wrap: balance;
}

.story__layout {
    display: grid;
    gap: var(--space-5);
    margin-block-start: var(--space-4);
}

.story__main > :first-child {
    margin-block-start: 0;
}

.story__main {
    min-inline-size: 0;
    max-inline-size: 44rem;
}

/* The lead: the first report's own words, set larger than the rest and labelled as its text. */
.story__what h2,
.story__coverage h2,
.story__new h2,
.story__uncertain h2,
.story__topics h2,
.story__related h2 {
    margin-block: 0 var(--space-2);
    font-size: var(--step-1);
}

.story__summary {
    color: var(--colour-text);
    font-size: var(--step-1);
    line-height: 1.55;
}

.story__block {
    max-inline-size: none;
}

/* A short note, not a section: why the page cannot say more. */
.story__uncertain {
    padding: var(--space-2) var(--space-3);
    background: var(--colour-wash);
    border-radius: var(--radius-small);
}

.story__uncertain h2,
.story__uncertain .story__kind {
    display: none;
}

.story__uncertain ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--step--1);
}

/* Coverage is a comparison of retained reports, with dates and their basis always visible.
   Quiet row rules and square tiles echo the edition; no report disappears behind a carousel. */
.story__coverage .timeline {
    border-inline-start: 0;
}

.story__coverage .timeline__item {
    padding-block: var(--space-3) var(--space-4);
    padding-inline-start: var(--space-4);
    border-block-end: var(--rule-light) solid var(--colour-hairline);
}

.story__coverage .timeline__item:last-child {
    border-block-end: 0;
}

.story__coverage .timeline__item::before {
    inset-inline-start: 0;
    inset-block-start: calc(var(--space-3) + 0.3rem);
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border: var(--rule-light) solid var(--colour-control);
    border-radius: 0;
    background: transparent;
}

.story__coverage .timeline__item--first::before {
    background: var(--colour-accent);
    border-color: var(--colour-accent);
}

.story__coverage .timeline__item > article {
    display: grid;
    gap: var(--space-1);
    min-inline-size: 0;
}

.story__coverage .timeline__body,
.story__coverage .timeline__time,
.story__coverage .timeline__basis {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.story__coverage .timeline__time {
    font-variant-numeric: tabular-nums;
}

.story__coverage .timeline__source {
    margin-block-end: var(--space-1);
}

.story__coverage .timeline__source > a:first-child {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    max-inline-size: 100%;
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

.story__coverage .timeline__title {
    margin-block: 0 var(--space-2);
    font-size: var(--step-1);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

.story__coverage .timeline__excerpt {
    max-inline-size: 65ch;
    line-height: var(--leading-body);
    overflow-wrap: anywhere;
}

@media screen and (min-width: 48rem) {
    .story__coverage .timeline__item > article {
        grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
        column-gap: var(--space-3);
        align-content: start;
    }

    .story__coverage .timeline__time {
        grid-column: 1;
        grid-row: 1;
    }

    .story__coverage .timeline__basis {
        grid-column: 1;
        grid-row: 2;
    }

    .story__coverage .timeline__body {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
}

/* The side panel. */
.story__side {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.story__glance {
    padding: var(--space-3);
    background: var(--colour-surface);
    border: var(--rule-light) solid var(--colour-hairline);
    border-radius: var(--radius);
}

.story__glance .story__first {
    margin: 0;
}

.story__glance h2 {
    margin-block: 0 var(--space-1);
    font-size: var(--step-0);
}

.story__glance .story__times {
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding-block-start: var(--space-3);
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}

.story__side .story__follow {
    margin: 0;
}

.story__side .story__follow h2 {
    font-size: var(--step-0);
}

.story__follow-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.story__speak {
    margin: 0;
    font-size: var(--step--1);
}

/* The method: closed until asked for. */
.story__method {
    margin-block-start: var(--space-4);
    border-block: var(--rule-light) solid var(--colour-hairline);
}

.story__method summary {
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
    cursor: pointer;
    font-weight: 600;
}

.story__method-body {
    padding-block-end: var(--space-3);
    max-inline-size: 38rem;
}

@media (min-width: 64rem) {
    .story__layout {
        grid-template-columns: minmax(0, 44rem) minmax(16rem, 20rem);
        justify-content: space-between;
        align-items: start;
    }

    .story__side {
        position: sticky;
        inset-block-start: var(--space-4);
    }
}

/* The side panel's first report is stated just above its times: the list keeps it for readers who
   skip the panel's heading, and the panel does not say it twice. */
.story__glance .story__times > div:first-child {
    display: none;
}

.story__method summary h2 {
    margin: 0;
    font-family: inherit;
    font-size: var(--step-0);
    font-weight: 600;
}

/* A flex summary suppresses the browser's marker. Draw an explicit disclosure affordance; the
   native details element retains keyboard behavior and works before JavaScript arrives. */
.story__method summary::after,
.search__filter-disclosure summary::after {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    flex: 0 0 0.5rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
    margin-inline-start: auto;
    margin-inline-end: var(--space-2);
}

.story__method[open] summary::after,
.search__filter-disclosure[open] summary::after {
    transform: rotate(225deg);
}

.search__filter-disclosure summary {
    display: flex;
    align-items: center;
    min-block-size: 2.75rem;
    cursor: pointer;
    font-weight: 600;
}

/* Subject identity uses the existing theme contrast pipeline, never publisher-supplied colours. */
.subject-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid var(--colour-hairline);
    border-radius: var(--radius-small);
    background: var(--colour-wash);
    color: var(--colour-text);
    font-weight: 700;
    line-height: 1;
}

.subject-mark--large {
    inline-size: 3rem;
    block-size: 3rem;
}

.subject-mark--logo {
    inline-size: 120px;
    block-size: 40px;
    background: var(--colour-surface);
}

.subject-mark--logo.subject-mark--large {
    inline-size: 120px;
    block-size: 40px;
}

.subject-mark img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    padding: var(--space-1);
}

.subject-mark__initials {
    flex: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--colour-muted);
}

.subject-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.subject-heading .page-header__title {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.directory-list__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-inline-size: 0;
    min-block-size: var(--touch-target);
}

.sources-by-country {
    display: grid;
    gap: var(--space-5);
}

.sources-country {
    display: grid;
    gap: var(--space-3);
    padding-block-start: var(--space-3);
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}

.sources-country__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}

.sources-country__title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--step-1);
}

.sources-country__title[data-flag]::before {
    content: attr(data-flag);
    flex: none;
    font-size: 1.125rem;
    line-height: 1;
}

.directory-list__link > span:last-child,
.chip > span:last-child,
.site-nav__link > span:last-child {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.chip {
    gap: var(--space-2);
    max-inline-size: 100%;
}

/* Navigation keeps its compact icon geometry; directory and heading frames carry the larger mark. */
.site-nav__link .subject-mark {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: 0;
    background: transparent;
}

/* Initials are the native/no-script fallback until the admitted logo actually decodes. */
.subject-mark--logo { position: relative; }
.subject-mark--logo img { position: absolute; inset: 0; opacity: 0; background: var(--colour-surface); }
.subject-mark--logo img.card__pixels--ready:not(.card__pixels--unavailable) { opacity: 1; }

/* Story ancestors stay native links and wrap at large reader text sizes. */
.story__breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    margin: 0 0 var(--space-1);
    padding: 0;
    list-style: none;
    font-size: var(--step--1);
    color: var(--colour-muted);
}

.story__breadcrumb li {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-inline-size: 0;
}

.story__breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    min-inline-size: 0;
    color: inherit;
    overflow-wrap: anywhere;
}

/* Publisher excerpts retain long bylines and domains when readers enlarge text. */
.story__summary {
    overflow-wrap: anywhere;
}

/* Both timeline orders stay visible and wrap instead of scrolling on narrow screens. */
.timeline-sorts .chip {
    max-inline-size: 100%;
    white-space: normal;
    text-align: center;
}

.timeline-sorts [aria-current="page"] {
    border-color: currentColor;
    font-weight: 700;
}

/* The public boards (ADR-0210): the Rreze ink-and-rule list, a serif numeral beside an ordinary card. */
.board__back,
.board__window {
    margin: 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.board__back a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    color: inherit;
}

.board__window {
    margin-block: var(--space-3);
}

.board__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.board__item {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0 var(--space-3);
    align-items: start;
}

.board__rank {
    padding-block-start: 1.25rem;
    color: var(--colour-text);
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 700;
    font-variant-numeric: lining-nums;
    line-height: 0.8;
    text-align: end;
}

.board__rank::after {
    content: ".";
}

.board-index {
    margin: 0;
    padding: 0;
    list-style: none;
}

.board-index__item {
    padding-block: var(--space-3);
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}

.board-index__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
}

.board-index__title a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    color: var(--colour-text);
    text-decoration: none;
}

.board-index__title a:hover {
    text-decoration: underline;
}

.board-index__note {
    margin: var(--space-1) 0 0;
    color: var(--colour-muted);
}

/*
 * Reader votes (ADR-0094): a thumb up and a thumb down with the count the site may show. Quiet
 * controls in the editorial system: hairline edges, the accent only for the vote the reader cast,
 * 44px targets, no motion beyond a colour change that reduced motion removes.
 */

.vote-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.vote-block--compact {
    margin-block-start: var(--space-2);
}

.vote {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.vote__form {
    margin: 0;
}

.vote__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-inline-size: var(--touch-target);
    min-block-size: var(--touch-target);
    padding-inline: var(--space-3);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    background: var(--colour-surface);
    color: var(--colour-text);
    font: inherit;
    font-size: var(--step--1);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vote__button:hover {
    background: var(--state-hover);
    color: var(--colour-action-edge);
}

.vote__button:hover .icon path {
    fill: var(--colour-action);
    fill-opacity: 1;
}

.vote__button:active {
    background: var(--state-active);
}

.vote__button:focus-visible,
.vote__undo-button:focus-visible {
    outline: 3px solid var(--colour-focus);
    outline-offset: 2px;
}

.vote__button[aria-pressed='true'] {
    border-color: var(--colour-action);
    background: var(--colour-action);
    color: var(--colour-action-text);
    font-weight: 600;
}

@media (forced-colors: active) {
    .vote__button[aria-pressed='true'] {
        border-color: ButtonText;
        background: ButtonFace;
        color: ButtonText;
        outline: 2px solid ButtonText;
        outline-offset: -2px;
    }
}

.vote__button .icon {
    inline-size: 1.15rem;
    block-size: 1.15rem;
}

.vote__button[aria-pressed='true'] .icon path {
    fill: currentColor;
    fill-opacity: 1;
}

.vote--compact .vote__button {
    padding-inline: var(--space-2);
}

.vote__count,
.vote__totals {
    font-variant-numeric: tabular-nums;
}

.vote__totals,
.vote__reason {
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.vote__reason {
    flex-basis: 100%;
    max-inline-size: 60ch;
}

.vote__invite {
    gap: var(--space-2);
}

.vote__status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--step--1);
    color: var(--colour-muted);
}

.vote__message--refused {
    color: var(--colour-danger);
}

.vote__undo {
    margin: 0;
}

.vote__undo-button {
    min-block-size: var(--touch-target);
    padding-inline: var(--space-2);
    border: 0;
    background: none;
    color: var(--colour-accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.vote-explainer {
    margin-block: var(--space-2) 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
    max-inline-size: 60ch;
}

@media (prefers-reduced-motion: reduce) {
    .vote__button {
        transition: none;
    }
}

/* The Leaders page and the reader's own standing. */
.leaders {
    display: grid;
    gap: var(--space-5);
}

.leaders__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: leader;
    border-block-start: 2px solid var(--colour-rule);
}

.leaders__row {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: baseline;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-block-end: 1px solid var(--colour-hairline);
    counter-increment: leader;
}

.leaders__row::before {
    content: counter(leader);
    color: var(--colour-muted);
    font-variant-numeric: tabular-nums;
}

.leaders__handle {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.leaders__since {
    display: block;
    color: var(--colour-muted);
    font-size: var(--step--1);
    font-weight: 400;
}

.leaders__karma {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.standing__breakdown {
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--colour-hairline);
}

.standing__breakdown li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-block-end: 1px solid var(--colour-hairline);
}

.standing__form {
    display: grid;
    gap: var(--space-2);
    max-inline-size: 24rem;
}

.standing__error {
    color: var(--colour-danger);
}

/* Guest attempts use the same native thumbs; authentication follows a chosen action. */
.vote__attempt {
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    min-inline-size: var(--touch-target);
    padding: 0;
    flex: none;
    text-decoration: none;
}

/*
 * The editorial layer (ADR-0091): the masthead and navigation, the cards and headline rows, the
 * front page's composition and the small signatures that make Mosaic recognisable without a single
 * image: a heavy rule over every section, serif headlines, and the tile, a small square that stands
 * for one outlet or one piece of a picture. Loaded after app.css, whose components it refines, and
 * before the theme stylesheet, whose brand colours it draws with.
 */

body {
    font-size: var(--step-0);
    line-height: var(--leading-body);
}

h1,
h2,
h3,
.card__title,
.story__title,
.page-header__title,
.hero__title {
    font-family: var(--font-serif);
    text-wrap: balance;
}

p,
li,
blockquote,
.card__summary,
.story__summary {
    /* Avoids a single word alone on the last line; browsers without support ignore it. */
    text-wrap: pretty;
}

a {
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

:focus-visible {
    outline: 3px solid var(--colour-focus);
    outline-offset: 2px;
    border-radius: var(--radius-small);
}

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

/*
 * The masthead, with the sections under it. From a tablet up the whole of it stays at the top of the
 * page, so nothing it covers is ever half a target: a link scrolled partly under a bar is below the
 * minimum size (WCAG 2.2, target size) and cannot be pressed. On a phone, where the bottom bar is
 * always there, it scrolls away with the page instead of taking a sixth of the screen.
 */
.app-header {
    background: var(--colour-bg);
    backdrop-filter: none;
    border-block-end: var(--rule-light) solid var(--colour-hairline);
}

@media (min-width: 48rem) {
    :root {
        --header-height: 6rem;
    }

    html {
        scroll-padding-block-start: var(--header-height);
    }

    .app-header {
        position: sticky;
        inset-block-start: 0;
    }
}

.app-header__bar {
    flex-wrap: wrap;
    inline-size: 100%;
    max-inline-size: calc(var(--page-width) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
    min-block-size: 3.5rem;
    gap: var(--space-3);
}

/* Shared brand sizing; the fallback serif wordmark is defined by the footer identity rules. */
.brand {
    font-family: var(--font-body);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.brand__mark {
    display: block;
    flex: 0 0 auto;
}

/* On a phone the brand may shrink (its name ends in an ellipsis) rather than push the bar past the
   screen: fonts differ between machines, and the bar also holds up to four icons. */
@media (max-width: 39.999rem) {
    .brand {
        min-inline-size: 0;
        font-size: 1.1875rem;
    }

    .app-header__bar > .brand {
        flex-basis: 0;
        flex-grow: 1;
        min-inline-size: 3rem;
    }

    .brand__name {
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Keep the fallback wordmark readable on the smallest phones without reducing hit targets. */
@media (max-width: 22.5rem) {
    .app-header__bar {
        column-gap: var(--space-1);
    }

    .header-nav {
        column-gap: 0;
    }
}

.app-header__dateline {
    display: none;
    margin: 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
    white-space: nowrap;
}

.app-header__dateline::first-letter {
    text-transform: uppercase;
}

@media (min-width: 64rem) {
    .app-header__dateline {
        display: block;
        padding-inline-start: var(--space-3);
        border-inline-start: var(--rule-light) solid var(--colour-hairline);
    }
}

/* Browser font resizing does not set Mosaic's text-size classes. */
.header-nav {
    min-inline-size: 0;
    max-inline-size: 100%;
    flex-wrap: wrap;
}

.header-nav__link {
    border-radius: var(--radius);
    font-weight: 600;
    font-size: var(--step--1);
    color: var(--colour-text);
    text-decoration: none;
    transition: background var(--motion-fast) var(--ease);
}

/* Rreze: a navigation link under the pointer, or the current page's, takes the action fill. */
@media (hover: hover) {
    .header-nav__link:hover {
        background: var(--colour-action);
        color: var(--colour-action-text);
        text-decoration: none;
    }
}

.header-nav__link:focus-visible {
    text-decoration: none;
}

.header-nav__link:active {
    background: var(--state-active);
    text-decoration: none;
}

.header-nav__link[aria-current="page"] {
    background: var(--colour-action);
    color: var(--colour-action-text);
    font-weight: 700;
    text-decoration: none;
}

.header-nav__link[aria-current="page"]:active {
    background: var(--colour-action-hover);
    color: var(--colour-action-text);
}

/* The yellow fill is 1.4:1 on ivory: the current page is also bold, and outlined where colours are forced. */
@media (forced-colors: active) {
    .header-nav__link[aria-current="page"], .site-nav__link[aria-current="page"] { outline: 2px solid CanvasText; outline-offset: -2px; }
}

.header-nav__link--wide {
    display: none;
}

.header-nav__icon {
    display: inline-flex;
}

@media (min-width: 48rem) {
    .header-nav__link--wide {
        display: inline-flex;
    }
}

/* Sections: a thin row under the masthead bar, inside the masthead. */
.site-nav {
    position: relative;
    background: var(--colour-surface);
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}

.site-nav__list {
    inline-size: 100%;
    max-inline-size: calc(var(--page-width) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: 0;
    gap: var(--space-2);
    scrollbar-width: thin;
}

.site-nav__link {
    position: relative;
    border-radius: var(--radius);
    padding-inline: calc(var(--space-2) + var(--space-1));
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: normal;
    text-decoration: none;
    transition: background var(--motion-fast) var(--ease);
}

/* The category index is a destination of its own, rather than one more subject. */
.site-nav__list > li:first-child {
    padding-inline-end: var(--space-2);
    margin-inline-end: var(--space-1);
    border-inline-end: var(--rule-light) solid var(--colour-hairline);
}

@media (hover: hover) {
    .site-nav__link:hover {
        background: var(--colour-action);
        color: var(--colour-action-text);
        text-decoration: none;
    }
}

.site-nav__link:focus-visible,
.site-nav__link:active {
    text-decoration: none;
}

.site-nav__link[aria-current="page"] {
    background: var(--colour-action);
    color: var(--colour-action-text);
    font-weight: 700;
    text-decoration: none;
}

.site-nav__link[aria-current="page"]:active {
    background: var(--colour-action-hover);
    color: var(--colour-action-text);
}

/* A fading edge leaves the next section visibly clipped on a narrow screen. The native
   scrollbar and first "all categories" link remain available without JavaScript. */
@media (max-width: 47.999rem) {
    .site-nav::after {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        inline-size: var(--space-4);
        background: linear-gradient(to right, transparent, var(--colour-surface));
        pointer-events: none;
    }
}

/* The bottom bar: five destinations on a phone, replaced by the masthead's links from a tablet up. */
.tab-bar {
    grid-auto-columns: minmax(0, 1fr);
    background: var(--colour-surface);
    border-block-start: var(--rule-light) solid var(--colour-hairline);
    backdrop-filter: none;
}

.tab-bar__tab {
    gap: 2px;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    text-align: center;
    /* Five labels share the width: they follow the reader's text size until a label would outgrow its place. */
    font-size: min(0.75rem, 3.4vw);
    font-weight: 600;
    transition: color var(--motion-fast) var(--ease);
}

.tab-bar__tab[aria-current="page"] {
    color: var(--colour-accent);
    box-shadow: inset 0 var(--rule-heavy) 0 var(--colour-accent);
}

.tab-bar__icon {
    display: inline-flex;
}

@media (min-width: 48rem) {
    .tab-bar {
        display: none;
    }

    body {
        padding-block-end: 0;
    }

    .request-error {
        inset-block-end: var(--space-3);
    }
}

/* ---------------------------------------------------------------- pages */

.app-content {
    padding-inline: var(--gutter);
}

.app-content--page {
    max-inline-size: calc(var(--page-width) + 2 * var(--gutter));
}

.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* A section: a heavy rule and a small heading, the editorial signature of every block. */
.block {
    margin-block: var(--space-5);
}

.block__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    margin-block-end: var(--space-3);
    padding-block-start: var(--space-2);
    border-block-start: var(--rule-heavy) solid var(--colour-rule);
}

.block__title,
.rail__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.block__subtitle {
    margin: 0;
    font-size: var(--step--1);
}

/* ---------------------------------------------------------------- stories */

.card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    block-size: auto;
}

.card__title {
    margin: 0 0 var(--space-2);
    font-size: var(--step-1);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: -0.005em;
}

.card--small .card__title {
    font-size: 1.0625rem;
}

.card--large .card__title {
    font-size: var(--step-2);
    line-height: var(--leading-tight);
}

.card--hero .card__title {
    font-size: var(--step-3);
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
}


/*
 * A story is one target: the headline's link covers the whole card, so the picture, the headline
 * and the space around them all open the story and all answer together. The outlet's link, the
 * coverage list of a lead and the vote and save controls are raised above it and stay their own
 * targets. Hover underlines the headline and dims the picture; a press tints the whole story; the
 * keyboard gets a two-pixel ink outline around the whole story, never the same as hover.
 */
.card {
    position: relative;
}

.card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card__meta a,
.card__meta button,
.card .vote-block a,
.card .vote-block button,
.card .lead-headlines a,
.card form button,
.card form input:not([type="hidden"]),
.card .card__image {
    position: relative;
    z-index: 2;
}

.card__title a {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 0.07em;
    transition: text-decoration-color var(--motion-fast) var(--ease);
}

.card:active:not(:has(.card__meta a:active, .vote-block :active, .lead-headlines a:active, form :active)) {
    background: color-mix(in srgb, var(--colour-text) 5%, transparent);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--colour-text) 5%, transparent);
}

.card:has(.card__title a:focus-visible) {
    outline: 2px solid var(--colour-focus);
    outline-offset: 6px;
}

/* The title link gives up its own ring only where the rule above can draw one around the card; a
   browser without :has() keeps the link's ring. */
@supports selector(:has(*)) {
    .card__title a:focus-visible {
        outline: none;
    }
}

@media (hover: hover) {
    .card:hover .card__title a {
        text-decoration-color: currentColor;
    }
}

/* Only a pointer that hovers dims the related decorative picture; touch remains still. */
@media (hover: hover) and (pointer: fine) and (forced-colors: none) {
    .card__image {
        transition: opacity var(--motion-fast) var(--ease);
    }

    .card:hover .card__image {
        opacity: 0.86;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card__image {
        transition-property: none;
    }
}

.card__image {
    margin: 0 0 var(--space-2);
}

.card__image img {
    border-radius: var(--radius-small);
}

/* A lead picture is tall on a tablet, where its column is as wide as the page: it is cropped, not stretched. */
.card--hero .card__image img {
    max-block-size: 26rem;
    object-fit: cover;
}

/* A news-list row without a permitted photo keeps its 16:9 frame as a quiet category-hue surface
   carrying the reporting outlet's stamp (favicon or monogram). */
.card__image--fallback {
    display: block;
    text-decoration: none;
}

.card__thumbnail-fallback {
    --hue-bg: color-mix(in srgb, var(--hue, var(--colour-accent)) 12%, var(--colour-placeholder-tile));
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    background: var(--hue-bg);
    border: var(--rule-light) solid var(--colour-border);
    border-radius: inherit;
    box-sizing: border-box;
}

.card__fallback-stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    font: 700 var(--step--2)/1 var(--font-serif);
    color: var(--colour-text);
    background: var(--colour-surface);
    border: var(--rule-light) solid var(--colour-control);
    border-radius: 3px;
}

.card__image--fallback .card__fallback-stamp--favicon img {
    display: block;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border-radius: 0;
    background: none;
    object-fit: contain;
    filter: none;
}

.card__excerpt {
    margin: 0 0 var(--space-2);
    color: var(--colour-muted);
}

.card__meta {
    margin-block-start: var(--space-2);
    align-items: center;
    gap: var(--space-1) var(--space-3);
    font-size: 0.8125rem;
}

.card__source {
    color: var(--colour-muted);
    font-weight: 400;
}

.card__source::after {
    content: "\2197";
    margin-inline-start: 0.25em;
    font-size: 0.85em;
}

.card__coverage {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* One tile per outlet that covers the story: a small mosaic of the coverage there really is. */
.coverage-tiles {
    display: inline-flex;
    gap: 2px;
}

.coverage-tiles i {
    display: block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--colour-accent);
}

.coverage-tiles i:nth-child(odd) {
    opacity: 0.6;
}

/* In a list, headlines are rows between hairlines and a small picture sits beside them. */
.cards--list > li + li {
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}

.cards--list .card {
    padding-block: var(--space-3);
}

.cards--list > li:first-child .card {
    padding-block-start: 0;
}

/* A compact card is a headline row: no picture, no excerpt, the title and what matters under it. */
.card--compact .card__title {
    font-size: 1.0625rem;
    margin-block-end: var(--space-1);
}

/* ---------------------------------------------------------------- the front page */

.front {
    display: grid;
    gap: var(--space-4) var(--space-5);
    grid-template-columns: minmax(0, 1fr);
}

.front > * {
    min-inline-size: 0;
}

.front__lead .block,
.front__feed .block:first-child {
    margin-block-start: 0;
}

.front__lead .block__header {
    margin-block-end: var(--space-3);
}

/* The lead and the supporting headlines. */
/* Supporting headlines remain easier to scan beside the lead, using the reader's type scale. */
.hero-block__support .card__title {
    font-size: var(--step-1);
    line-height: var(--leading-snug);
}

.hero-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3) var(--space-4);
}

.hero-block__support {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-block__support > li {
    padding-block: var(--space-3);
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}

.hero-block__support > li:first-child {
    border-block-start: 0;
    padding-block-start: 0;
}

@media (min-width: 64rem) {
    .hero-block {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: start;
    }

    .hero-block__support {
        padding-inline-start: var(--space-4);
        border-inline-start: var(--rule-light) solid var(--colour-hairline);
    }
}

/* The rail of the day's developments: numbered headlines, text first. */
.rail__title {
    padding-block-start: var(--space-2);
    border-block-start: var(--rule-heavy) solid var(--colour-rule);
}

.rail__list {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: rail;
}

.rail__item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--space-2);
    padding-block: var(--space-3);
    border-block-start: var(--rule-light) solid var(--colour-hairline);
    counter-increment: rail;
}

.rail__item:first-child {
    border-block-start: 0;
    padding-block-start: 0;
}

.rail__item::before {
    content: counter(rail);
    font-family: var(--font-serif);
    font-size: var(--step-2);
    line-height: 1;
    color: var(--colour-accent);
    font-weight: 700;
}

@media (min-width: 64rem) {
    .front--with-rail {
        grid-template-columns: minmax(0, 1fr) var(--rail-width);
        grid-template-areas:
            "lead rail"
            "feed rail";
        align-items: start;
    }

    .front--with-rail .front__lead {
        grid-area: lead;
    }

    .front--with-rail .front__feed {
        grid-area: feed;
    }

    .front--with-rail .front__rail {
        grid-area: rail;
        position: sticky;
        inset-block-start: calc(var(--header-height, 0rem) + var(--space-3));
        padding-inline-start: var(--space-4);
        border-inline-start: var(--rule-light) solid var(--colour-hairline);
    }
}

/* The end of a briefing: a line, and the small mosaic that fills in. */
.briefing-end {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-4) 0;
    padding-block: var(--space-3);
    border-block: var(--rule-light) solid var(--colour-hairline);
    color: var(--colour-muted);
}

.briefing-end__line {
    min-inline-size: 0;
    overflow-wrap: anywhere;
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
}

.briefing-end__mosaic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.mosaic-mark {
    display: inline-grid;
    grid-template-columns: repeat(3, 0.5rem);
    gap: 2px;
    flex: none;
}

.mosaic-mark i {
    display: block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--colour-accent);
}

.mosaic-mark i:nth-child(2n) {
    opacity: 0.55;
}

.mosaic-mark i:nth-child(3n) {
    opacity: 0.3;
}

@media (prefers-reduced-motion: no-preference) {
    .briefing-end--arriving .mosaic-mark i {
        animation: tile-in 480ms var(--ease) both;
    }

    .briefing-end--arriving .mosaic-mark i:nth-child(2) { animation-delay: 70ms; }
    .briefing-end--arriving .mosaic-mark i:nth-child(3) { animation-delay: 140ms; }
    .briefing-end--arriving .mosaic-mark i:nth-child(4) { animation-delay: 210ms; }
    .briefing-end--arriving .mosaic-mark i:nth-child(5) { animation-delay: 280ms; }
    .briefing-end--arriving .mosaic-mark i:nth-child(6) { animation-delay: 350ms; }

    @keyframes tile-in {
        from {
            opacity: 0;
            transform: scale(0.4);
        }
    }
}

/* ---------------------------------------------------------------- the welcome */

.welcome {
    display: grid;
    gap: var(--space-2) var(--space-4);
    margin-block-end: var(--space-4);
    padding-block-end: var(--space-3);
    border-block-end: var(--rule-light) solid var(--colour-hairline);
}

/* An anonymous visitor's welcome is all in the page; visitor.js sets attributes on <html> before the
   first paint and these rules show what they ask for, so nothing arrives later to push the stories
   down. The line for "since your last visit" has its room reserved, and says so when there is nothing. */
.welcome[data-welcome] {
    display: none;
}

html[data-visit-greeting] .welcome[data-welcome],
html[data-visit-howto] .welcome[data-welcome] {
    display: grid;
}

.welcome[data-welcome] .welcome__greeting,
.welcome__greeting [data-part] {
    display: none;
}

html[data-visit-greeting] .welcome[data-welcome] .welcome__greeting {
    display: block;
}

html[data-visit-greeting="morning"] [data-part="morning"],
html[data-visit-greeting="afternoon"] [data-part="afternoon"],
html[data-visit-greeting="evening"] [data-part="evening"] {
    display: inline;
}

.welcome__since {
    font-size: var(--step--1);
    line-height: var(--leading-body);
}

html[data-visit-since] .welcome__since {
    min-block-size: calc(var(--step--1) * var(--leading-body));
}

html:not([data-visit-since]) .welcome__since:empty {
    display: none;
}

.welcome__greeting {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--step-1);
    font-weight: 700;
}

.since {
    margin: 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.since__line {
    margin: 0;
}

.since__line strong {
    color: var(--colour-text);
}

.since__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
}

.since__invite {
    margin: var(--space-1) 0 0;
}

.howto {
    display: none;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3);
    border: var(--rule-light) solid var(--colour-hairline);
    border-radius: var(--radius);
    background: var(--colour-surface);
    font-size: var(--step--1);
}

html[data-visit-howto] .howto {
    display: grid;
}

.howto__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 650;
}

.howto__list {
    margin: 0;
    padding-inline-start: var(--space-4);
}

.howto__list li + li {
    margin-block-start: var(--space-1);
}

/* On a phone the note is one point and the way to the rest, not a banner: the stories come first. */
@media (max-width: 47.999rem) {
    .howto__list li:nth-child(n + 2) {
        display: none;
    }
}

.howto__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
}

.howto .button {
    min-block-size: var(--touch-target);
    padding-inline: var(--space-3);
}

@media (min-width: 64rem) {
    .howto {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }

    .howto__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
        padding-inline-start: 0;
        list-style: none;
    }

    .howto__list li + li {
        margin-block-start: 0;
    }
}

@media (min-width: 48rem) {
    .welcome {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
    }

    .welcome > .howto {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------------- belonging and speaking back */

.page-header {
    padding-block-start: var(--space-2);
    border-block-start: var(--rule-heavy) solid var(--colour-rule);
}

.page-header__kind {
    font-weight: 800;
    font-size: 0.8125rem;
    letter-spacing: 0.09em;
}

.page-header__title {
    font-size: var(--step-3);
    letter-spacing: -0.015em;
}

.story__title {
    font-size: var(--step-3);
    letter-spacing: -0.015em;
}

.button {
    border-radius: var(--radius);
    transition: background var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}

.button:hover {
    background: var(--colour-action-hover);
}

.button--danger:hover {
    background: var(--colour-surface);
    color: var(--colour-danger);
    text-decoration: underline;
}

.button--quiet:hover,
.button--secondary:hover {
    border-color: var(--colour-text);
    background: var(--colour-wash);
}

.app-footer {
    padding-inline: var(--gutter);
    margin-block-start: var(--space-5);
    background: none;
    border-block-start: var(--rule-heavy) solid var(--colour-rule);
    text-align: start;
}

.app-footer > * {
    max-inline-size: var(--page-width);
    margin-inline: auto;
}

.app-footer > :first-child {
    margin-block-start: 0;
}

.app-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: 0 auto var(--space-2);
    padding: 0;
    list-style: none;
}

.app-footer__links a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    color: var(--colour-muted);
    font-size: var(--step--1);
    text-decoration: none;
}

.app-footer__links a:is(:hover, :focus-visible) {
    color: var(--colour-text);
    text-decoration: underline;
}

/* A stable mobile rhythm keeps legal and feedback links from forming ragged rows. */
@media (max-width: 47.999rem) {
    .app-footer__links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-1) var(--space-3);
        align-items: start;
    }

    .app-footer__links a {
        max-inline-size: 100%;
        overflow-wrap: anywhere;
    }
}

.app-footer__links--speak {
    padding-block-start: var(--space-2);
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}

/* ---------------------------------------------------------------- the print edition */

html[data-edition="print"] body {
    background-image: linear-gradient(color-mix(in srgb, var(--colour-text) 3%, transparent), transparent 40rem);
}

html[data-edition="print"] .card__title,
html[data-edition="print"] .block__title,
html[data-edition="print"] .brand__name {
    font-family: var(--font-serif);
}

html[data-edition="print"] .block__header,
html[data-edition="print"] .rail__title,
html[data-edition="print"] .page-header,
html[data-edition="print"] .app-footer {
    border-block-start-style: double;
    border-block-start-width: 6px;
}

html[data-edition="print"] .card__excerpt {
    text-align: justify;
    hyphens: auto;
    color: var(--colour-text);
}

html[data-edition="print"] .card--hero .card__title {
    text-transform: none;
    font-size: calc(var(--step-3) * 1.15);
}

html[data-edition="print"] .card__image img {
    filter: grayscale(1) contrast(1.05);
    background-image: none;
}

html[data-edition="print"] .front__lead .card--hero .card__excerpt::first-letter {
    float: inline-start;
    padding-inline-end: 0.12em;
    font-family: var(--font-serif);
    font-size: 3.4em;
    line-height: 0.82;
    font-weight: 700;
}

html[data-edition="print"] .app-header {
    background: var(--colour-bg);
    border-block-end: 3px double var(--colour-rule);
}

html[data-edition="print"] .button,
html[data-edition="print"] .header-nav__link,
html[data-edition="print"] .chip {
    border-radius: 0;
}

html[data-edition="print"] .coverage-tiles i,
html[data-edition="print"] .mosaic-mark i {
    background: var(--colour-text);
}

/* ---------------------------------------------------------------- Your space, forms, About */

.mine__section,
.mine__offer,
.about__section {
    margin-block: var(--space-5);
}

.mine__title {
    margin: 0 0 var(--space-3);
    padding-block-start: var(--space-2);
    border-block-start: var(--rule-heavy) solid var(--colour-rule);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Empty mosaics are quiet decoration, never a score or a second status announcement. */
.mine-empty {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    margin-block: var(--space-3);
    padding-block: var(--space-2);
}

.mine-empty__tiles {
    display: grid;
    grid-template-columns: repeat(3, 1rem);
    gap: 0.25rem;
    margin-block-start: 0.25rem;
}

.mine-empty__tiles i {
    aspect-ratio: 1;
    background: var(--colour-hairline);
}

.mine-empty--saved .mine-empty__tiles i:first-child {
    border: 1px solid var(--colour-control);
    background: var(--colour-surface);
}

.mine-empty--following .mine-empty__tiles i:nth-child(3n + 1) {
    background: color-mix(in srgb, var(--colour-accent) 22%, var(--colour-bg));
}

.mine-empty--following .mine-empty__tiles i:nth-child(3n + 2) {
    background: color-mix(in srgb, var(--colour-muted) 20%, var(--colour-bg));
}

.mine-empty__message {
    margin: 0;
    color: var(--colour-text);
    font-family: var(--font-serif);
    font-size: var(--step-1);
    font-weight: 600;
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

.mine-empty__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
}

@media (forced-colors: active) {
    .mine-empty__tiles i {
        border: 1px solid CanvasText;
        background: Canvas;
    }
}

.mine__offer {
    padding: var(--space-3) var(--space-4);
    border-inline-start: var(--rule-heavy) solid var(--colour-accent);
    background: var(--colour-accent-soft);
}

.mine__offer .mine__title {
    border-block-start: 0;
    padding-block-start: 0;
}

.mine__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.mine__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    padding-block: var(--space-2);
    border-block-end: var(--rule-light) solid var(--colour-hairline);
}

.mine__row > a {
    font-family: var(--font-serif);
    font-size: var(--step-1);
    font-weight: 700;
    text-decoration: none;
}

.mine__row > a:hover {
    text-decoration: underline;
}

.since__count {
    display: inline-block;
    min-inline-size: 1.4em;
    padding-inline: 0.35em;
    border-radius: 999px;
    background: var(--colour-accent-soft);
    color: var(--colour-text);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
}

.form textarea {
    min-block-size: 8rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--colour-control);
    border-radius: var(--radius);
    background: var(--colour-surface);
    color: var(--colour-text);
    font: inherit;
    resize: vertical;
}

.form--speak {
    max-inline-size: 36rem;
}

.form__choice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--touch-target);
    font-weight: 400;
}

.form__about {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-inline-start: var(--rule-heavy) solid var(--colour-border);
    background: var(--colour-wash);
}

.field-error {
    margin: var(--space-1) 0 0;
    color: var(--colour-danger);
    font-weight: 600;
}

.form [aria-invalid="true"] {
    border-color: var(--colour-danger);
}

.thanks__lead {
    font-size: var(--step-1);
}

.about {
    max-inline-size: var(--content-width);
}

.about__section h2 {
    margin: 0 0 var(--space-2);
    padding-block-start: var(--space-2);
    border-block-start: var(--rule-light) solid var(--colour-hairline);
    font-size: var(--step-2);
}

.mosaic-mark--large {
    grid-template-columns: repeat(3, 1.25rem);
    gap: 3px;
}

.mosaic-mark--large i {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    transition: transform var(--motion-base) var(--ease), opacity var(--motion-base) var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
    .mosaic-mark--large:hover i:nth-child(odd) {
        transform: rotate(90deg) scale(0.85);
    }

    .mosaic-mark--large:hover i:nth-child(even) {
        opacity: 1;
    }
}

/* Where a story's page says how many readers follow its topic or saved it: quietly, in the header. */
.story__together {
    margin-block: var(--space-2);
}

/* The new-stories banner sits under the masthead, which is the only sticky bar now. */
.new-stories__banner {
    inset-block-start: calc(env(safe-area-inset-top) + var(--header-height, 0rem) + var(--space-2));
    border-radius: var(--radius);
}

.story__speak {
    margin-block: var(--space-4) 0;
    font-size: var(--step--1);
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}

/* ---------------------------------------------------------------- craft: how it feels in the hand */

html {
    accent-color: var(--colour-accent);
    /* The scrollbar's room is kept whether or not a page scrolls, so the layout does not shift
       sideways between a short page and a long one (classic scrollbars; overlay ones are unaffected). */
    scrollbar-gutter: stable;
    /* A control reached by keyboard or an anchor is scrolled clear of the bars that stay on screen
       (WCAG 2.2, focus not obscured): on a phone the tab bar below, from a tablet up the masthead
       above as well. */
    scroll-padding-block-start: var(--space-3);
    scroll-padding-block-end: calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + var(--space-3));
    -webkit-tap-highlight-color: color-mix(in srgb, var(--colour-accent) 14%, transparent);
}

/* On a phone the masthead scrolls away with the page: a bar that stays costs a line of reading space on
   a small screen, covers what an anchor or a focus scrolls to, and comes back when it is not wanted.
   The bottom bar is the phone's navigation and stays. From a tablet up the masthead is the navigation
   and stays. */
@media (max-width: 47.999rem) {
    .app-header {
        position: static;
    }

    /* The bottom bar does not float over the keyboard while a field is being typed in. */
    body:has(input:focus-visible, textarea:focus-visible, select:focus-visible) .tab-bar {
        display: none;
    }
}

@media (min-width: 48rem) {
    html {
        scroll-padding-block-start: calc(3.5rem + env(safe-area-inset-top) + var(--space-3));
        scroll-padding-block-end: var(--space-3);
    }
}

/* The heading a boosted page gives the focus to is not a control: no ring around it. */
h1[tabindex="-1"]:focus {
    outline: none;
}

::selection {
    background: color-mix(in srgb, var(--colour-accent) 26%, transparent);
    color: inherit;
}

/* Numbers and times keep their width, so a column of them lines up and a changing one never shifts. */
time,
.since__count,
.rail__item::before,
.listing__status,
.search__count {
    font-variant-numeric: tabular-nums;
}

/* A long word in a narrow column or a long translated label wraps instead of pushing the page wide. */
.card__title,
.card__excerpt,
.story__title,
.page-header__title,
.timeline__title,
.button,
.chip {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}

/* The words a reader searched for, in the result that has them: a tint, not a different type. */
mark {
    padding-inline: 0.1em;
    border-radius: var(--radius-small);
    background: color-mix(in srgb, var(--colour-accent) 22%, transparent);
    color: inherit;
}

/* A picture's box is reserved by its width and height; until it arrives (or if it never does) the
   box shows a quiet checkerboard of tiles, the product's own signature, instead of an empty hole. */
.card__image img {
    background-color: var(--colour-placeholder);
    background-image: repeating-conic-gradient(var(--colour-placeholder-tile) 0% 25%, transparent 0% 50%);
    background-size: 1.25rem 1.25rem;
    filter: brightness(var(--image-brightness));
}

/* The headline leads; provenance stays readable without competing with it. */
.story__meta {
    font-size: 0.875em;
    line-height: 1.5;
}

.story__actions [data-share][hidden] {
    display: none;
}

/* Primary coverage and the original remain explicit; save and share form one quiet mobile row. */
@media (max-width: 47.999rem) {
    .story__actions {
        display: grid;
        align-items: stretch;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
    }

    .story__coverage-link,
    .story__original-link {
        grid-column: 1 / -1;
    }

    .story__actions > .toggle-save,
    .story__actions > .button--quiet {
        min-inline-size: 0;
    }

    .story__actions .button {
        inline-size: 100%;
        justify-content: center;
        padding-inline: var(--space-2);
    }

    .story__actions > .toggle-save .button {
        block-size: 100%;
    }
}

/* Real outlet names jump into the existing chronology; long names wrap without losing them. */
/* Original headlines use the same editorial link language as story cards. */
@media screen {
    .timeline__title a {
        color: inherit;
        text-decoration: none;
    }

    .timeline__title a:is(:hover, :focus-visible) {
        text-decoration: underline;
    }
}

.story__coverage-controls { display: grid; gap: var(--space-3); margin-block: var(--space-4); }
.story__coverage-controls > div { min-inline-size: 0; }
.story__coverage-controls label { display: block; margin-block-end: var(--space-2); }
/* Keep the browser's native picker while matching the reader's type, surfaces and focus ring. */
.story__coverage-controls select {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--touch-target);
    padding: var(--space-2) var(--space-3);
    border: var(--rule-light) solid var(--colour-control);
    border-radius: var(--radius);
    background-color: var(--colour-surface);
    color: var(--colour-text);
    font: inherit;
}
.story__coverage-controls select:focus-visible {
    outline: 2px solid var(--colour-focus);
    outline-offset: 2px;
}
.story__coverage-control-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.story__coverage-control-actions a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); }
@media (min-width: 48rem) {
    .story__coverage-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .story__coverage-control-actions { grid-column: 1 / -1; }
}
.story__outlet-nav { margin-block: var(--space-3); }
.story__outlet-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.story__outlet-nav li { max-inline-size: 100%; min-inline-size: 0; }
.story__outlet-nav a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); min-inline-size: var(--touch-target); max-inline-size: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--colour-border); border-radius: var(--radius-small); color: inherit; font-size: .875rem; line-height: 1.35; overflow-wrap: anywhere; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.story__outlet-nav a:hover { background: var(--colour-placeholder); }
.story__outlet-nav a:focus-visible { outline: 2px solid var(--colour-accent); outline-offset: 2px; }
.story__outlet-nav .story__outlet-more { color: var(--colour-muted); }
.story__coverage :is(.timeline__item, #coverage-title) { scroll-margin-block-start: calc(2 * var(--touch-target) + var(--space-3) + var(--space-2) + var(--space-4) + env(safe-area-inset-top, 0px)); }

/* The link to a publisher's own article is on every card, and a phone needs a thumb-sized target
   for it: the box grows downward only, into the room under the line (a card's bottom padding and the
   one above the next), and gives it back with the margin, so nothing moves and no headline is covered. */
.card__meta {
    align-items: flex-start;
    min-inline-size: 0;
}

.card__meta > * {
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}

.card__source {
    display: inline-block;
    min-inline-size: 1.5rem;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    padding-block: 0 1rem;
    margin-block-end: -1rem;
}

/* Where a row has a card's padding under it and another above the next, there is room for 44px. */
.cards--list .card__source,
.hero-block__support .card__source,
.rail__item .card__source {
    padding-block-end: 1.5rem;
    margin-block-end: -1.5rem;
}

/* A link that stands on its own line (not inside a sentence) is as easy to hit as a button. */
.howto__actions a,
.mine__actions a:not(.button),
.page-actions > a:not(.button) {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
}

/* Quiet, short feedback on press: a button settles, a chip and a quiet button take the pressed tint. */
.button--quiet:active,
.button--secondary:active,
.chip:active {
    background: var(--state-active);
}

.chip {
    transition: background var(--motion-fast) var(--ease);
}

.chip:hover {
    background: var(--state-hover);
}

/* Boosted pages cross-fade quickly: long enough to read as one page becoming the next, short enough
   never to be waited for. The reduced-motion rule in app.css stills it. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--motion-base);
}

/* Search filters: two to a row on a phone, so the results start on the first screen. */
@media (max-width: 39.999rem) {
    .search__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2) var(--space-3);
    }

    .search__filters select {
        inline-size: 100%;
        padding-inline: var(--space-2);
        font-size: 0.9375rem;
        text-overflow: ellipsis;
    }
}

/* The configured native bookmark is drawn once; a filled path marks the saved state. */
.toggle-save .button[aria-pressed="true"] {
    border-color: var(--colour-accent);
    background: var(--colour-accent-soft);
}

/* A toggle that has answered at once but not yet been confirmed looks settled; only if the server is
   slow does it dim a little, after 400ms, and the dimming goes with the swap. */
.toggle-save[aria-busy="true"] button,
.toggle-follow[aria-busy="true"] button,
.toggle-hide[aria-busy="true"] button {
    opacity: 0.7;
    transition: opacity var(--motion-fast) var(--ease) 400ms;
}

/* The reader's own quiet "undone" line after taking something off: a few seconds, then gone. */
.undo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
}

/* ---------------------------------------------------------------- the page on paper */

@media print {
    /* Beat the generated theme's later :root rules, including its dark-device palette. */
    html:root {
        color-scheme: light;
        --colour-bg: #fff;
        --colour-surface: #fff;
        --colour-text: #000;
        --colour-muted: #000;
        --colour-accent: #000;
        --colour-accent-contrast: #fff;
        --colour-danger: #000;
    }

    .app-header,
    .site-nav,
    .tab-bar,
    .new-stories,
    .back-to-top,
    .connection-banner,
    .request-error,
    .story__actions,
    .story__outlet-nav,
    .story__coverage-controls,
    .story__follow,
    .story__speak,
    .toggle-follow,
    .toggle-save,
    .cards__more,
    .app-footer nav,
    .app-footer__edition,
    .welcome,
    .skip-link {
        display: none !important;
    }

    html,
    body {
        background: #fff;
        color: #000;
        padding: 0;
    }

    body {
        font-size: 11pt;
        line-height: 1.45;
    }

    .app-content,
    .app-content--page {
        max-inline-size: none;
        padding: 0;
    }

    a {
        color: inherit;
        text-decoration: underline;
    }

    .card__title a {
        text-decoration-color: currentColor;
    }

    /* A link to another site says where it goes, since paper cannot be clicked. */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        overflow-wrap: anywhere;
    }

    .card,
    .timeline__item,
    .read-next__list > li {
        break-inside: avoid;
    }

    h1,
    h2,
    h3 {
        break-after: avoid;
        color: #000;
    }

    .card__image img {
        filter: none;
        background: none;
    }

    .app-footer {
        margin-block-start: var(--space-4);
        border-block-start: 1px solid #000;
    }
}

/* ---------------------------------------------------------------- how the reader likes it drawn */

/* Text size (ADR-0091): a share of the browser's own size, never pixels, so every rem scales with it
   and a reader who already enlarged their browser keeps that. The step is on the root, in the first
   paint, set by the server from the reader's cookie or account. Media queries do not scale with it
   (they read the browser's own size), so the layouts that need room give up their columns at the
   larger steps below. Print ignores the choice. */
html.text-875 { font-size: 87.5%; }
html.text-1125 { font-size: 112.5%; }
html.text-1250 { font-size: 125%; }
html.text-1375 { font-size: 137.5%; }
html.text-1500 { font-size: 150%; }

@media print {
    html[class*="text-"] {
        font-size: 100%;
    }
}

/* Density (ADR-0091): the reader's choice beats the site's, which is set per page with the same names. */
.app-content.look-density-compact {
    --space-2: 0.375rem;
    --space-3: 0.75rem;
    --space-4: 1.125rem;
    --space-5: 1.875rem;
}

/* The reader's compact choice is a headline mode for secondary cards. Keep the lead, headlines,
   source/time/coverage and vote controls; switching back immediately restores the same content. */
.look-density-compact .card:not(.card--hero) .card__image,
.look-density-compact .card:not(.card--hero) .card__excerpt {
    display: none;
}

.look-density-compact .cards--list .card--with-image:not(.card--hero) {
    display: block;
}

.look-density-compact .card:not(.card--hero) .card__title {
    font-size: 1.0625rem;
    margin-block-end: var(--space-1);
}

/* A reader who chose no pictures (ADR-0223) is served pages drawn without them: the server leaves each
   picture out, so no box is left behind. These rules cover only the moment after the choice is made, when
   the page on screen was drawn with them, until it is drawn again. */
.look-pictures-off :is(.card__image, .rreze-thumb, .mine-rz__thumb, .story-primary-photo, .media-gallery) {
    display: none;
}

.look-pictures-off .cards--list .card--with-image:not(.card--hero) {
    display: block;
}

.look-pictures-off .mine-rz__story--pictured {
    grid-template-columns: minmax(0, 1fr);
}

.app-content.look-density-comfortable {
    --space-2: 0.625rem;
    --space-3: 1.25rem;
    --space-4: 1.875rem;
    --space-5: 3.125rem;
}

/* The text-size and density control: a button in the masthead opens a panel (the popover attribute:
   no script, light dismiss, Escape, the focus back on the button). Where popover is not known the
   button is not drawn, and the same control is on the preferences page. */
.display-menu {
    flex: none;
}

.display-menu__button {
    inline-size: auto;
    min-inline-size: var(--touch-target);
    justify-content: center;
    padding-inline: 0.25em;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--colour-text);
    font: inherit;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}

@media (hover: hover) {
    .display-menu__button:hover {
        background: var(--colour-action);
        color: var(--colour-action-text);
    }
}

.display-menu:has(.display-menu__panel:popover-open) > .display-menu__button {
    background: var(--colour-action);
    color: var(--colour-action-text);
}

.display-menu__button:active {
    background: var(--colour-action-hover);
    color: var(--colour-action-text);
    transform: translateY(1px);
}

@supports not selector(:popover-open) {
    .display-menu {
        display: none;
    }
}

.display-menu__panel {
    position: fixed;
    inset: auto;
    inset-block-start: calc(env(safe-area-inset-top) + 3.5rem);
    inset-inline-end: var(--gutter);
    inline-size: min(22rem, calc(100vw - 2 * var(--gutter)));
    max-block-size: calc(100dvh - 5rem);
    margin: 0;
    padding: var(--space-4);
    overflow: auto;
    border: 1px solid var(--colour-control);
    border-radius: var(--radius);
    background: var(--colour-surface);
    color: var(--colour-text);
    box-shadow: var(--shadow-2);
}

.display-menu__panel:not(:popover-open) {
    display: none;
}

/* The notifications panel of a signed-in reader (ADR-0170, Rreze-Home «Njoftimet»): the same
   popover as the text-size control. Where popover is not known the button and panel are not drawn
   and a plain link leads to the notifications page instead. No count and no badge (ADR-0091). */
.notify-menu {
    flex: none;
}

.notify-menu__button {
    inline-size: auto;
    min-inline-size: var(--touch-target);
    justify-content: center;
    padding-inline: 0.25em;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--colour-text);
    font: inherit;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}

@media (hover: hover) {
    .notify-menu__button:hover {
        background: var(--colour-action);
        color: var(--colour-action-text);
    }
}

.notify-menu:has(.notify-menu__panel:popover-open) > .notify-menu__button {
    background: var(--colour-action);
    color: var(--colour-action-text);
}

.notify-menu__button:active {
    background: var(--colour-action-hover);
    color: var(--colour-action-text);
    transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
    .display-menu__button:active,
    .notify-menu__button:active {
        transform: none;
    }
}

.notify-menu__link {
    display: none;
    min-inline-size: var(--touch-target);
    justify-content: center;
    color: var(--colour-text);
}

@supports not selector(:popover-open) {
    .notify-menu__button,
    .notify-menu__panel {
        display: none;
    }

    .notify-menu__link {
        display: inline-flex;
    }
}

.notify-menu__panel {
    position: fixed;
    inset: auto;
    inset-block-start: calc(env(safe-area-inset-top) + 3.5rem);
    inset-inline-end: var(--gutter);
    inline-size: min(23.75rem, calc(100vw - 2 * var(--gutter)));
    max-block-size: calc(100dvh - 5rem);
    margin: 0;
    padding: 0.875rem 1.125rem 0.625rem;
    overflow: auto;
    border: 1px solid var(--colour-control);
    border-radius: var(--radius);
    background: var(--colour-surface);
    color: var(--colour-text);
    box-shadow: var(--shadow-2);
}

.notify-menu__panel:not(:popover-open) {
    display: none;
}

.notify-menu__title {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.notify-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notify-menu__item {
    display: grid;
    gap: 0.1875rem;
    padding-block: 0.875rem;
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}

.notify-menu__story {
    color: var(--colour-text);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.notify-menu__story:hover,
.notify-menu__story:focus-visible {
    text-decoration: underline;
}

.notify-menu__meta,
.notify-menu__state,
.notify-menu__privacy,
.notify-menu__empty {
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.notify-menu__empty,
.notify-menu__state,
.notify-menu__privacy {
    margin: 0.5rem 0 0;
}

.notify-menu__more {
    margin: 0.625rem 0 0;
    padding-block-start: 0.625rem;
    border-block-start: var(--rule-light) solid var(--colour-hairline);
    font-size: var(--step--1);
}

.display-menu__title {
    margin: 0 0 var(--space-3);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.display-menu__more {
    margin: var(--space-3) 0 0;
    font-size: var(--step--1);
}

.display {
    display: grid;
    gap: var(--space-3);
}

.display__form {
    margin: 0;
}

.display__group {
    margin: 0;
    padding: 0;
    border: 0;
}

.display__group legend {
    margin-block-end: var(--space-1);
    padding: 0;
    font-weight: 600;
}

.display__steps,
.display__choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* All density choices share an axis on phones; none wraps into an orphan control. */
.display__choices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.display__choices .button {
    inline-size: 100%;
    min-inline-size: 0;
    justify-content: flex-start;
    padding-block: var(--space-2);
    text-align: start;
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

@media (min-width: 48rem) {
    .preferences .display__choices {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.preferences {
    margin-block: var(--space-4);
}

.preferences + .preferences {
    padding-block-start: var(--space-4);
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}

.preferences > h2 {
    margin-block: 0 var(--space-2);
    font-family: var(--font-body);
    font-size: var(--step-1);
    font-weight: 700;
    line-height: var(--leading-snug);
    text-wrap: pretty;
}

.preferences > :last-child { margin-block-end: 0; }
.preferences .empty { margin-block: var(--space-2); }
.preferences > h2 a { color: inherit; }

.display__step {
    min-inline-size: var(--touch-target);
    justify-content: center;
    padding-inline: var(--space-2);
    font-family: var(--font-serif);
    font-weight: 700;
}

.display__step--smaller { font-size: 0.875rem; }
.display__step--larger { font-size: 1.25rem; }

.display__step[aria-disabled="true"] {
    color: var(--colour-muted);
    cursor: default;
}

.display__choices .button[aria-pressed="true"],
.display__step--reset[aria-pressed="true"] {
    border-color: var(--colour-accent);
    background: var(--colour-accent-soft);
    box-shadow: inset 0 calc(-1 * var(--rule-heavy)) 0 var(--colour-accent);
}

.display__size {
    color: var(--colour-muted);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
}

/* At the larger sizes the side-by-side compositions have too little room: the rail goes under the lead,
   the lead's headlines under its picture, and a long row of buttons wraps. */
html.text-1375 .front--with-rail,
html.text-1500 .front--with-rail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
}

html.text-1375 .front--with-rail .front__lead,
html.text-1375 .front--with-rail .front__feed,
html.text-1375 .front--with-rail .front__rail,
html.text-1500 .front--with-rail .front__lead,
html.text-1500 .front--with-rail .front__feed,
html.text-1500 .front--with-rail .front__rail {
    grid-area: auto;
}

html.text-1375 .front--with-rail .front__rail,
html.text-1500 .front--with-rail .front__rail {
    position: static;
    padding-inline-start: 0;
    border-inline-start: 0;
}

@media (min-width: 64rem) {
    html.text-1250 .hero-block,
    html.text-1375 .hero-block,
    html.text-1500 .hero-block {
        grid-template-columns: minmax(0, 1fr);
    }

    html.text-1250 .hero-block__support,
    html.text-1375 .hero-block__support,
    html.text-1500 .hero-block__support {
        padding-inline-start: 0;
        border-inline-start: 0;
    }
}

/* Two filters to a row stop fitting a phone once the text is larger: one to a row. */
html.text-1250 .search__filters,
html.text-1375 .search__filters,
html.text-1500 .search__filters {
    grid-template-columns: minmax(0, 1fr);
}

/* Printing keeps chronology precise even when the screen uses a recent relative label. */
@media print {
    [data-reader-time-relative] {
        display: none;
    }

    [data-reader-time-exact].visually-hidden {
        position: static;
        inline-size: auto;
        block-size: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
        white-space: normal;
    }
}

/* The homepage edition follows the Rreze front-page boards without changing the published blocks.
   The whole lead owns the first row; developments and later feeds follow in source order. */
.front--edition {
    row-gap: var(--space-5);
}

.front--edition .hero-block {
    grid-template-columns: minmax(0, 1fr);
}

.front--edition .hero-block__support {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.front--edition .front__rail {
    position: static;
    padding-inline-start: 0;
    border-inline-start: 0;
}

.front--edition .hero-block__lead .card__title {
    font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.625rem);
    line-height: 1.12;
}

@media (min-width: 64rem) {
    .front--edition.front--with-rail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "lead" "rail" "end" "feed";
    }

    .front--edition > .briefing-end {
        grid-area: end;
        margin-block: 0;
    }

    .front--edition .hero-block__lead .card--with-image {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
        gap: 0 var(--space-5);
        align-items: start;
    }

    .front--edition .hero-block__lead .card--with-image > .card__image {
        grid-column: 1;
        grid-row: 1 / span 4;
        max-inline-size: 100%;
        margin: 0;
        align-self: stretch;
    }

    .front--edition .hero-block__lead .card--with-image > :not(.card__image) {
        grid-column: 2;
        min-inline-size: 0;
    }

    .front--edition .hero-block__lead .card__image img {
        border-radius: 0;
    }

    .front--edition .hero-block__support {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-4);
        padding-block-start: var(--space-3);
        border-block-start: var(--rule-light) solid var(--colour-hairline);
    }

    .front--edition .hero-block__support > li {
        padding-block: 0;
        border-block-start: 0;
        min-inline-size: 0;
    }

    .front--edition .hero-block__support .card__title {
        font-size: 1.0625rem;
        line-height: 1.25;
    }

    .front--edition .rail__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-5);
    }
}

/* Larger reader type and print keep the same honest stories in an uncompressed reading column. */
html:is(.text-1250, .text-1375, .text-1500) .front--edition .hero-block__lead .card--with-image,
html[data-edition="print"] .front--edition .hero-block__lead .card--with-image {
    display: block;
}

html:is(.text-1250, .text-1375, .text-1500) .front--edition .hero-block__support,
html:is(.text-1250, .text-1375, .text-1500) .front--edition .rail__list,
html[data-edition="print"] .front--edition .hero-block__support,
html[data-edition="print"] .front--edition .rail__list {
    display: block;
}

@media print {
    .front--edition .hero-block__lead .card--with-image,
    .front--edition .hero-block__support,
    .front--edition .rail__list {
        display: block;
    }
}

html:is(.text-1375, .text-1500) .front--edition > .briefing-end {
    grid-area: auto;
}

/* The optional first-visit explanation starts as one native disclosure line, not a story-sized panel.
   All existing explanations and dismissal remain available by keyboard, touch and without a module. */
.howto--compact {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

html[data-visit-howto] .howto--compact {
    display: block;
}

.howto--compact > summary {
    min-block-size: var(--touch-target);
    align-content: center;
    cursor: pointer;
    font-size: var(--step--1);
    font-weight: 650;
}

.howto--compact[open] > summary {
    margin-block-end: var(--space-2);
}

.howto--compact[open] .howto__list {
    display: block;
    padding-inline-start: var(--space-4);
    list-style: disc;
}

.howto--compact[open] .howto__list li {
    display: list-item;
}

.howto--compact[open] .howto__list li + li {
    margin-block-start: var(--space-1);
}

.howto--compact[open] .howto__actions {
    margin-block-start: var(--space-2);
}

/* A Hero continuation's pager is a quiet full row, not a stretched fifth story cell. */
.front--edition .hero-block__support > .cards__more,
.front--edition .hero-block__support > .cards__end {
    grid-column: 1 / -1;
    align-self: start;
    padding-block: 0;
}

/* Phone editions keep supporting pictures beside their headlines, as in the Rreze mobile board.
   The lead, section heroes, desktop grid and the reader's text-only density retain their layouts. */
@media screen and (max-width: 47.999rem) {
    .front--edition .hero-block__support > li {
        container-type: inline-size;
    }

    .front--edition .hero-block__support .card--compact.card--with-image {
        display: grid;
        grid-template-columns: minmax(0, 1fr) min(7.5rem, 30vw);
        gap: 0 min(var(--space-3), 4vw);
        align-items: start;
    }

    .front--edition .hero-block__support .card--compact.card--with-image > .card__image {
        grid-column: 2;
        grid-row: 1 / span 3;
        margin: 0;
    }

    .front--edition .hero-block__support .card--compact.card--with-image > :not(.card__image) {
        grid-column: 1;
        min-inline-size: 0;
    }

    .look-density-compact .front--edition .hero-block__support .card--compact.card--with-image,
    .front--edition.look-density-compact .hero-block__support .card--compact.card--with-image {
        display: block;
    }
}

/* A row that cannot leave sixteen reader rems for its whole card uses the full-width reading column. */
@media screen and (max-width: 47.999rem) {
    @container (width < 16rem) {
        .front--edition .hero-block__support .card--compact.card--with-image {
            display: block;
        }
    }
}

.lead-headlines {
    margin-block-start: var(--space-3);
    min-inline-size: 0;
}

.lead-headlines__label {
    margin: 0 0 var(--space-2);
    color: var(--colour-muted);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lead-headlines__list {
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.lead-headlines__list a {
    display: grid;
    min-block-size: var(--touch-target);
    padding-block: var(--space-1);
    color: inherit;
    font-size: var(--step--1);
    overflow-wrap: anywhere;
}

.lead-headlines__source {
    color: var(--colour-muted);
}

.lead-headlines__title {
    font-family: var(--font-serif);
    font-weight: 650;
}

/* The finite jump index names selected stories; ordinals are not scores or reading progress. */
.briefing-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-3); }
.briefing-heading h1 { margin: 0; font-size: var(--step-1); line-height: 1.25; }
.briefing-heading ol { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.briefing-heading a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--touch-target); min-block-size: var(--touch-target); padding: var(--space-1); border-block-end: var(--rule-light) solid var(--colour-hairline); color: var(--colour-text); font-weight: 750; }
.briefing-card-number { display: block; margin-block-end: var(--space-1); font-size: var(--step--2); font-weight: 750; color: var(--colour-muted); }

/* Actual current selection and next native story, never a completion indicator. */
.story__context {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    margin-block-end: var(--space-2);
}

.story__context .story__breadcrumb,
.story__briefing-position {
    margin: 0;
}

.story__briefing-position {
    color: var(--colour-muted);
    font-size: var(--step--2);
    overflow-wrap: anywhere;
}

.briefing-next {
    margin-block-start: var(--space-5);
    padding: var(--space-4);
    max-inline-size: 44rem;
    border: var(--rule-light) solid var(--colour-hairline);
    background: var(--colour-surface);
}

.briefing-next__label {
    margin: 0 0 var(--space-1);
    color: var(--colour-muted);
    font-size: var(--step--2);
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.briefing-next__position {
    margin: 0 0 var(--space-2);
    color: var(--colour-muted);
    font-size: var(--step--2);
}

.briefing-next__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--step-2);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.briefing-next__action {
    min-block-size: var(--touch-target);
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (forced-colors: active) {
    .briefing-next { border-color: CanvasText; }
}

/* Enlarged translated briefing labels retain every word within the panel. */
.briefing-next__label,
.briefing-next__position {
    overflow-wrap: anywhere;
}

/* Keep enlarged next-story text readable instead of squeezing it between flex items. */
@media (max-width: 40rem) {
    .briefing-next {
        padding: clamp(12px, 4vw, 24px);
    }

    .briefing-next__action {
        display: inline-block;
        padding-inline: clamp(12px, 3vw, 24px);
        padding-block: var(--space-1);
        line-height: 1.35;
    }
}

/* A genuine retained next image stays small; enlarged type retains the full reading column. */
.briefing-next__image {
    float: inline-end;
    inline-size: clamp(64px, 10vw, 96px);
    margin: 0 0 var(--space-2) var(--space-3);
}

.briefing-next__image .card__picture {
    display: block;
}

.briefing-next__action {
    clear: both;
}

@media (max-width: 24rem) {
    .briefing-next__image {
        float: none;
        display: block;
        margin-inline-start: auto;
    }
}

/* Reader actions are stable icon targets, with their real names available to assistive technology. */
.story__after-reading .story__actions--after-reading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.story__after-reading .toggle-save .button,
.story__after-reading .saved__attempt,
.story__after-reading [data-share] {
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    min-inline-size: var(--touch-target);
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
}

.story__after-reading .story__actions .icon {
    margin-inline-end: 0;
}

.story__after-reading .story__actions [data-button-label],
.story__after-reading .saved__attempt > span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.story__after-reading .vote {
    min-inline-size: 0;
    max-inline-size: 100%;
}

.story__after-reading .vote__invite {
    max-inline-size: 100%;
    padding-inline: var(--space-2);
    overflow-wrap: anywhere;
}

.story__after-reading > .undo {
    display: flex;
    flex-wrap: wrap;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}

.story__after-reading .toggle-save {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* The reference's closing explanation is separate from the news and uses the reader's theme. */
.home-principles {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin-block: var(--space-6) var(--space-3);
    padding-block: var(--space-5);
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}
.home-principles > *, .home-principles__list > li { min-inline-size: 0; }
.home-principles__heading h2 { margin: 0; font-family: var(--font-serif); font-size: var(--step-2); }
.home-principles__links { display: flex; flex-wrap: wrap; column-gap: var(--space-3); }
.home-principles__links a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); max-inline-size: 100%; font-size: var(--step--1); overflow-wrap: anywhere; }
.home-principles .home-principles__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: 0; margin: 0; list-style: none; }
.home-principles__list > li { border: 0; padding: 0; margin: 0; overflow-wrap: anywhere; }
.home-principles__list > li + li { margin-block-start: 0; }
.home-principles__list > li::before { content: ""; display: block; inline-size: .4rem; block-size: .4rem; margin-block-end: var(--space-2); background: var(--colour-muted); }
@media (min-width: 64rem) {
    .home-principles { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
    .home-principles .home-principles__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
html:is(.text-1250, .text-1375, .text-1500) .home-principles,
html[data-edition="print"] .home-principles,
html:is(.text-1250, .text-1375, .text-1500) .home-principles .home-principles__list,
html[data-edition="print"] .home-principles .home-principles__list { grid-template-columns: minmax(0, 1fr); }
@media print { .home-principles, .home-principles .home-principles__list { grid-template-columns: minmax(0, 1fr); } }

/*
 * Category colours (Rreze, ADR-0151). Every category's name and tile carry hue--<address>; the
 * category colour stylesheet, linked after this bundle, gives each its colour, picked from the
 * wheel or by staff. A category without one stays ink. The tile always shows the colour; the name
 * shows it on the light page and falls back to the text colour in the dark scheme, where the
 * colours are not checked against the slate ground.
 */
.hue { --hue: var(--colour-text); --hue-text: var(--hue); --hue-bg: color-mix(in srgb, var(--hue) 12%, var(--colour-placeholder-tile)); }
@media (prefers-color-scheme: dark) { .hue { --hue-text: var(--colour-text); } }
.section-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4375rem; margin: 0; max-inline-size: 100%; overflow-wrap: anywhere; font-size: var(--step--1); font-weight: 700; color: var(--hue-text); }
a.section-label { text-decoration: none; min-block-size: var(--touch-target); }
.section-label__tile { flex: none; inline-size: 9px; block-size: 9px; background: var(--hue); }
/* A card's section label sits above its title; on a section's own page every card is in it, so none is shown. */
.card__section { margin-block-end: var(--space-1); font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; }
.rreze-subject--category .card__section { display: none; }
/* The genre above a card's title (ADR-0163): what kind of piece it is, quieter than its section. */
/* The Rreze taxonomy board's outlined label: a thin edge, never a fill (a filled ink label is Mosaic's own «Ekskluzive»). */
.card__genre { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0 0 var(--space-1); padding: 0.125rem 0.4375rem; border: 1px solid var(--colour-border); border-radius: 3px; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--colour-muted); }
/* In «Të fundit» and live coverage rows, `genre:LiveCoverage` carries the Rreze taxonomy board's red dot indicator. */
.card__genre[data-genre="genre:LiveCoverage"]::before { content: ""; display: inline-block; flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--colour-danger, #b4341c); }
@media (forced-colors: active) { .section-label__tile { background: CanvasText; } .card__genre[data-genre="genre:LiveCoverage"]::before { background: CanvasText; } }
/*
 * The editors' «E theksuar» (ADR-0234): a story keeps its place in whatever list it already falls in
 * and gains a quiet surface tint and its word, in an outlined tag. It claims no position, so there is
 * no rule at its start (that is the pinned story's) and no yellow (that is the one next step's); the
 * word carries the meaning, so colour is never the only sign, and forced colours keep an outline.
 */
.card--highlighted, .rreze-article--highlighted, .rreze-result--highlighted, .mine-rz__story--highlighted { padding: var(--space-3); border-radius: var(--radius); background: var(--colour-accent-soft); }
.card__highlight { display: inline-flex; align-items: center; margin: 0 0 var(--space-1); padding: 0.125rem 0.4375rem; border: 1px solid var(--colour-text); border-radius: 3px; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--colour-text); }
@media (forced-colors: active) { .card--highlighted, .rreze-article--highlighted, .rreze-result--highlighted, .mine-rz__story--highlighted { outline: 1px solid CanvasText; } .card__highlight { border-color: CanvasText; } }

/*
 * Place marks (Rreze): where a publisher is, one mark per place and never a colour of its own
 * (Rreze-Colour). Albania solid ink, Kosovo grey, North Macedonia half-filled, the diaspora hollow.
 * Decorative: the place's name always goes with it (components/place-mark.html.twig).
 */
.place-mark { --place-grey: #6b7591; display: inline-block; flex: none; inline-size: 10px; block-size: 10px; box-sizing: border-box; border: 1.5px solid var(--colour-text); background: var(--colour-text); vertical-align: -0.0625rem; }
.place-mark--kosovo { border-color: var(--place-grey); background: var(--place-grey); }
.place-mark--north-macedonia { background: linear-gradient(135deg, var(--colour-text) 50%, var(--colour-surface) 50%); }
.place-mark--diaspora { border-color: var(--colour-control); background: var(--colour-surface); }
.place-mark + .place-mark__name { margin-inline-start: 0.5rem; }
.place-mark__name[data-place="albania"]::before,
.place-mark__name[data-country="AL"]::before { content: "🇦🇱 "; }
.place-mark__name[data-place="kosovo"]::before,
.place-mark__name[data-country="XK"]::before { content: "🇽🇰 "; }
.place-mark__name[data-place="north-macedonia"]::before,
.place-mark__name[data-country="MK"]::before { content: "🇲🇰 "; }
.place-mark__name[data-place="diaspora"]::before { content: "🌍 "; }
.place-mark__name[data-country="ME"]::before { content: "🇲🇪 "; }
.place-mark__name[data-country="RS"]::before { content: "🇷🇸 "; }
.place-mark__name[data-country="GR"]::before { content: "🇬🇷 "; }
.place-mark__name[data-country="IT"]::before { content: "🇮🇹 "; }
.place-mark__name[data-country="DE"]::before { content: "🇩🇪 "; }
.place-mark__name[data-country="CH"]::before { content: "🇨🇭 "; }
.place-mark__name[data-country="GB"]::before { content: "🇬🇧 "; }
.place-mark__name[data-country="US"]::before { content: "🇺🇸 "; }
.place-mark__name[data-country="FR"]::before { content: "🇫🇷 "; }
.place-mark__name[data-country="AT"]::before { content: "🇦🇹 "; }
.place-mark__name[data-country="BE"]::before { content: "🇧🇪 "; }
.place-mark__name[data-country="SE"]::before { content: "🇸🇪 "; }
.place-mark__name[data-country="NO"]::before { content: "🇳🇴 "; }
.place-mark__name[data-country="NL"]::before { content: "🇳🇱 "; }
.place-mark__name[data-country="CA"]::before { content: "🇨🇦 "; }
.place-mark__name[data-country="AU"]::before { content: "🇦🇺 "; }
.place-mark__name[data-country="TR"]::before { content: "🇹🇷 "; }
@media (prefers-color-scheme: dark) { .place-mark { --place-grey: color-mix(in srgb, var(--colour-text) 55%, var(--colour-bg)); } }
@media (forced-colors: active) {
    .place-mark { forced-color-adjust: none; border-color: CanvasText; background: CanvasText; }
    .place-mark--kosovo { border-color: GrayText; background: GrayText; }
    .place-mark--north-macedonia { background: linear-gradient(135deg, CanvasText 50%, Canvas 50%); }
    .place-mark--diaspora { background: Canvas; }
}

/*
 * The Rreze front page (ADR-0091, boards Rreze-Home and Rreze-Home-M). It is part of the reader
 * bundle, after editorial.css, and every rule is scoped to the front page's main element
 * (.app-content--front), so it is there when a reader arrives by boosted navigation and touches no
 * other page. The source order is the reading order: the briefing (lead and supporting stories), the
 * developments, the most covered stories, the close, then the feed. A phone reads them one under
 * another under the large briefing heading and its jump tiles. A wide screen sets them as an edition:
 * the greeting as the page's line, then the developments, the lead and the ranked column side by
 * side between hairlines, and the close under all three. Larger reader type and print keep the
 * single reading column. Section labels are 13px capitals under a 3px ink rule.
 */

/* ---------------------------------------------------------------- the greeting */

.app-content--front .welcome {
    border-block-end: 0;
    margin-block-end: var(--space-2);
}

.app-content--front .welcome__greeting {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-style: italic;
    font-weight: 400;
    color: var(--colour-text);
}

/* ---------------------------------------------------------------- section labels */

.app-content--front .front .block__header,
.app-content--front .front .rail__title,
.app-content--front .most-covered > h2,
.app-content--front .hero-block__label {
    border-block-start: 3px solid var(--colour-text);
    padding-block: 0.6875rem 0.375rem;
}

.app-content--front .front .block__title,
.app-content--front .front .rail__title,
.app-content--front .most-covered > h2,
.app-content--front .hero-block__label {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--colour-text);
}

.app-content--front .front .block__header {
    margin-block-end: var(--space-2);
}

/* The wide edition names its lead in the middle column; on a phone the number and heading do it. */
.app-content--front .hero-block__label {
    display: none;
}

/* ---------------------------------------------------------------- the briefing heading (phone) */

.app-content--front .briefing-heading {
    display: block;
    margin-block-end: 0;
    padding-block: var(--space-4) 1.25rem;
}

.app-content--front .briefing-heading__eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--colour-muted);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-content--front .briefing-heading h1 {
    margin: 0 0 0.625rem;
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 1.9rem + 1.6vw, 2.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

.app-content--front .briefing-heading__feed,
.app-content--front .briefing-heading__count {
    margin: 0 0 var(--space-3);
    color: var(--colour-text-2);
    font-size: var(--step--1);
}

.app-content--front .briefing-heading ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A jump is a filled ink tile with its number in the headline serif; the story it reaches names it. */
.app-content--front .briefing-heading a {
    display: grid;
    place-items: center;
    min-inline-size: 46px;
    min-block-size: 46px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: var(--colour-text);
    color: var(--colour-bg);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: transform var(--motion-fast) ease-out, background var(--motion-fast) ease-out;
}

.app-content--front .briefing-heading a:hover {
    background: var(--colour-text-2);
    transform: translateY(-2px);
}

.app-content--front .briefing-heading a:active {
    transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
    .app-content--front .briefing-heading a:hover,
    .app-content--front .briefing-heading a:active {
        transform: none;
    }
}

/* A jump takes its story's section colour (Rreze XG-03, ADR-0151): every stored colour reads at
   4.5:1 on the light ground, so it is dark enough for the white numeral; a story filed nowhere keeps ink. */
.app-content--front .briefing-heading a.hue {
    background: var(--hue);
    color: var(--hue-on);
}

.app-content--front .briefing-heading a.hue:hover {
    background: color-mix(in srgb, var(--hue) 82%, var(--colour-text));
}

/* ---------------------------------------------------------------- the lead and its supporting stories */

.app-content--front .front--edition .hero-block {
    gap: 0;
}

.app-content--front .front--edition .hero-block__lead {
    padding-block: 0 1.625rem;
    border-block-start: 3px solid var(--colour-text);
}

/* The story's place in the briefing: a large serif numeral, decoration beside a named story. */
.app-content--front .front--edition .briefing-card-number {
    display: block;
    margin: 0;
    color: var(--colour-text);
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 0.9;
}

.app-content--front .front--edition .hero-block__lead > .briefing-card-number {
    margin-block: var(--space-3) var(--space-2);
    font-size: 2.5rem;
    line-height: 0.8;
}

.app-content--front .front--edition .hero-block__lead .card__title {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.625rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.015em;
}

.app-content--front .front--edition .hero-block__lead .card__excerpt {
    font-family: var(--font-serif);
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
    font-style: italic;
    line-height: 1.4;
    color: var(--colour-text-2);
}

/*
 * The Rreze lead (ADR-0213, Story/Lead): the kicker names the section in its colour and, after a
 * dot, how many publishers reported the story; the provenance says whose report Mosaic found first
 * and who covered it after. On a phone the picture comes first, as Rreze-Home-M draws it, and the
 * wide edition puts it back under the standfirst with the order rules below.
 */
.app-content--front .card--lead {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-inline-size: 0;
}

.app-content--front .card--lead .card__title {
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
}

.app-content--front .card--lead > .card__image {
    order: -1;
    margin-block: 0 var(--space-3);
}

.app-content--front .card__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    margin: 0 0 var(--space-2);
}

.app-content--front .card__kicker > .card__section {
    margin: 0;
}

.app-content--front .card__kicker-coverage {
    margin: 0;
    color: var(--colour-muted);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-content--front .card__kicker > .card__section + .card__kicker-coverage::before {
    content: "·";
    margin-inline-end: 0.5rem;
    color: var(--colour-muted);
}

.app-content--front .card__provenance {
    margin: 0 0 var(--space-2);
    color: var(--colour-text-2);
    font-size: var(--step--1);
    line-height: var(--leading-body);
    text-wrap: pretty;
}

.app-content--front .front--edition .hero-block__support > li:where(:not(.cards__more, .cards__end)) {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: start;
    padding-block: 1.125rem;
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}

.app-content--front .front--edition .hero-block__support > li > .card,
.app-content--front .front--edition .hero-block__support > li > .card:only-child {
    grid-column: 2;
}

.app-content--front .front--edition .hero-block__support > li:first-child {
    padding-block-start: 1.125rem;
}

/* The briefing's supporting headlines read a step lighter and a step smaller than the lead: editorial,
   not shouting. The lead (HISTORIA KRYESORE) keeps its weight and size as the page's one anchor. */
.app-content--front .front--edition .hero-block__support .card__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.18;
}

/* Each publisher's own headline, with a framed stamp of its initials and the words in quotes. */
.app-content--front .lead-headlines__label {
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.app-content--front .lead-headlines__list a {
    grid-template-columns: 1.625rem minmax(0, 1fr);
    column-gap: 0.625rem;
    padding-block: 0.4375rem;
    font-size: 1rem;
    line-height: 1.38;
    text-decoration: none;
}

.app-content--front .lead-headlines__list a:hover .lead-headlines__title {
    text-decoration: underline;
}

.app-content--front .lead-headlines__source {
    grid-column: 2;
}

.app-content--front .lead-headlines__title {
    grid-column: 2;
    font-family: var(--font-body);
    font-weight: 400;
    quotes: auto;
}

.app-content--front .lead-headlines__title:lang(sq) {
    quotes: "«" "»";
}

.app-content--front .lead-headlines__title::before {
    content: open-quote;
}

.app-content--front .lead-headlines__title::after {
    content: close-quote;
}

.app-content--front .publisher-stamp {
    display: grid;
    place-items: center;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    inline-size: 1.625rem;
    block-size: 1.625rem;
    border: var(--rule-light) solid var(--colour-control);
    border-radius: 3px;
    background: var(--colour-surface);
    color: var(--colour-text);
    font-family: var(--font-serif);
    font-size: var(--step--2);
    font-weight: 700;
    line-height: 1;
}

/* The first headline found is the earliest: its stamp is framed in ink. */
.app-content--front .lead-headlines__list li:first-child .publisher-stamp {
    border: var(--rule-heavy) solid var(--colour-text);
}

/*
 * A publisher's own logo in its stamp where one is permitted (Rreze XG-05): a wider frame, the
 * initials drawn under the picture until it arrives, and left in its place if the picture never
 * does (card-image.js marks what loaded). Never a colour of ours.
 */
.app-content--front .lead-headlines__list a:has(.publisher-stamp--logo) {
    grid-template-columns: 3.25rem minmax(0, 1fr);
}

.app-content--front .publisher-stamp--logo {
    position: relative;
    inline-size: 3.25rem;
    overflow: hidden;
}

.app-content--front .publisher-stamp--logo img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    padding: 2px;
    object-fit: contain;
    background: var(--colour-surface);
    opacity: 0;
}

.app-content--front .publisher-stamp--logo img.card__pixels--ready:not(.card__pixels--unavailable) {
    opacity: 1;
}

/*
 * A publisher's favicon in its stamp where one is collected (Rreze XG-05): a square frame a little
 * larger than the letter stamp, so the mark is recognisable; the initials are drawn under it until
 * it arrives and left in place if it never does (card-image.js marks what loaded). The favicon sits
 * on the surface tile, as the logo does, so a mark with its own background reads cleanly.
 */
.app-content--front .lead-headlines__list a:has(.publisher-stamp--favicon) {
    grid-template-columns: 2rem minmax(0, 1fr);
}

.app-content--front .publisher-stamp--favicon {
    position: relative;
    inline-size: 2rem;
    block-size: 2rem;
    overflow: hidden;
}

.app-content--front .publisher-stamp--favicon img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    padding: 2px;
    object-fit: contain;
    background: var(--colour-surface);
    opacity: 0;
}

.app-content--front .publisher-stamp--favicon img.card__pixels--ready:not(.card__pixels--unavailable) {
    opacity: 1;
}

.app-content--front .lead-headlines__list a:has(> .rreze-thumb) {
    grid-template-columns: 3.5rem minmax(0, 1fr);
}

.app-content--front .lead-headlines__list a:has(> .rreze-thumb) > .publisher-stamp {
    display: none;
}

.app-content--front .lead-headlines__list a > .rreze-thumb {
    position: relative;
    display: block;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    inline-size: 3.5rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 2px;
    background: var(--colour-placeholder);
}

.app-content--front .lead-headlines__list a > .rreze-thumb .card__picture,
.app-content--front .lead-headlines__list a > .rreze-thumb img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.app-content--front .lead-headlines__list a > .rreze-thumb .card__blurhash {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.look-pictures-off .app-content--front .lead-headlines__list a:has(> .rreze-thumb) {
    grid-template-columns: 1.625rem minmax(0, 1fr);
}

.look-pictures-off .app-content--front .lead-headlines__list a:has(> .rreze-thumb) > .publisher-stamp {
    display: grid;
}

/* The screen's one next step: on a phone a full-width yellow button under the headlines. */
.app-content--front .lead-headlines__coverage {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    min-block-size: 48px;
    font-size: 1.0625rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------- the developments */

.app-content--front .front--edition .rail__list {
    margin: 0;
}

.app-content--front .front--edition .rail__item {
    display: block;
    padding-block: 0.875rem;
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}

.app-content--front .front--edition .rail__item:first-child {
    border-block-start: 0;
}

/* The list is ordered for assistive technology; on the board the stories carry no numerals. */
.app-content--front .front--edition .rail__item::before {
    content: none;
}

.app-content--front .front--edition .rail__item .card__title {
    font-family: var(--font-serif);
    font-size: 1.3125rem;
    font-weight: 500;
    line-height: 1.2;
}

/* Each development shows its picture as a full-width 16:9 image above the headline, big in this narrow
   rail (a side thumbnail had no room here; supersedes ADR-0091's text-only rail). A development whose
   source permits no picture, or a block with pictures turned off, keeps its headline with no box. */
.app-content--front .front--edition .rail__item .card--with-image {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.app-content--front .front--edition .rail__item .card--with-image > .card__image {
    order: -1;
    inline-size: 100%;
    margin: 0;
}

/* ---------------------------------------------------------------- the most covered stories */

/* The observed-window caption (.observed-window, reader-pages.css) sits tight under the section label. */
.app-content--front .most-covered__window {
    container-type: inline-size;
    margin-block: 0 var(--space-1);
    font-size: 0.75rem;
}

@container (width < 16rem) {
    .app-content--front .most-covered__window .observed-window__time {
        white-space: normal;
    }
}

.app-content--front .most-covered__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-content--front .most-covered__item {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0 var(--space-3);
    align-items: start;
    padding-block: 1.125rem;
    border-block-end: var(--rule-light) solid var(--colour-hairline);
}

.app-content--front .most-covered__item:first-child {
    padding-block-start: 0.75rem;
}

.app-content--front .most-covered__item:last-child {
    border-block-end: 0;
}

.app-content--front .most-covered__rank {
    color: var(--colour-text);
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 700;
    font-variant-numeric: lining-nums;
    line-height: 0.8;
    text-align: end;
    padding-block-start: 0.08em;
}

.app-content--front .front__covered .most-covered__rank::after {
    content: ".";
}

.app-content--front .most-covered__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    min-inline-size: 0;
}

.app-content--front .most-covered__title {
    color: var(--colour-text);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.22;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    text-decoration: none;
    text-wrap: pretty;
}

.app-content--front .most-covered__title:hover {
    text-decoration: underline;
}

.app-content--front .most-covered__count {
    color: var(--colour-muted);
    font-size: var(--step--1);
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

/* An entry the page draws above keeps its rank and says so (ADR-0213); the board leaves nothing out. */
.app-content--front .most-covered__above {
    font-style: italic;
}

/* The ranked story's picture: a full-width 16:9 image above the rank and headline, big in this narrow
   column (a side thumbnail had no room here), present only on a story with a rights-permitted picture,
   so a story without one keeps its rank and headline and leaves no box. The headline stays the link; the
   image is decorative. Lazy, blurhash, like the cards' pictures. */
.app-content--front .most-covered__item--pictured {
    grid-template-columns: 2.25rem minmax(0, 1fr);
}

.app-content--front .most-covered--continued .most-covered__item--pictured {
    grid-template-columns: 2rem minmax(0, 1fr);
}

.app-content--front .most-covered__image {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: start;
    inline-size: 100%;
    margin-block-end: var(--space-3);
    border-radius: calc(var(--radius) / 2);
}

.app-content--front .most-covered__image .card__picture img,
.app-content--front .most-covered__image .card__blurhash {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* The column's one honest line when the board has nothing to rank, or no run has completed yet. */
.app-content--front .most-covered__empty {
    margin: 0;
    padding-block: 0.75rem;
    color: var(--colour-muted);
    font-size: var(--step--1);
    line-height: var(--leading-body);
    text-wrap: pretty;
}

/* The ranking's continuation beside the latest list: smaller numerals and a bar against the first. */
.app-content--front .most-covered--continued .most-covered__item {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0 0.75rem;
    padding-block: 0.875rem;
}

.app-content--front .most-covered--continued .most-covered__rank {
    color: var(--colour-muted);
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 0.95;
    text-align: start;
}

.app-content--front .most-covered--continued .most-covered__title {
    font-size: 1.125rem;
    line-height: 1.3;
}

.app-content--front .most-covered--continued .most-covered__body {
    gap: var(--space-1);
}

/* The coverage bar: ink on the light rule, no colour of its own. */
.app-content--front .most-covered__meter {
    inline-size: 100%;
    block-size: 4px;
    margin-block-start: var(--space-1);
    border: 0;
    background: var(--colour-hairline);
    appearance: none;
}

.app-content--front .most-covered__meter::-webkit-meter-bar {
    border: 0;
    border-radius: 0;
    background: var(--colour-hairline);
}

.app-content--front .most-covered__meter::-webkit-meter-optimum-value,
.app-content--front .most-covered__meter::-webkit-meter-suboptimum-value,
.app-content--front .most-covered__meter::-webkit-meter-even-less-good-value {
    background: var(--colour-text);
}

.app-content--front .most-covered__meter::-moz-meter-bar {
    background: var(--colour-text);
}

/* ---------------------------------------------------------------- the close */

.app-content--front .front--edition > .briefing-end {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3) 0.875rem;
    margin: 0;
    padding: var(--space-4) 1.25rem 1.625rem;
    border: var(--rule-light) solid var(--colour-hairline);
    border-radius: var(--radius);
    background: var(--colour-surface);
    color: var(--colour-text);
}

.app-content--front .front--edition .briefing-end__line {
    font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.5rem);
    line-height: 1.25;
    color: var(--colour-text-2);
}

/* The small mosaic: four tiles, two of ink, one of the action yellow, one slate; pressing cycles three arrangements (Rreze-Moments-M). */
.app-content--front .briefing-end__mosaic {
    display: inline-grid;
    place-items: center;
    min-inline-size: var(--touch-target);
    min-block-size: var(--touch-target);
    margin: -0.375rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.app-content--front .briefing-end .mosaic-mark {
    grid-template-columns: 15px 10px;
    grid-template-rows: 15px 10px;
    gap: 3px;
}

.app-content--front .briefing-end .mosaic-mark i {
    inline-size: auto;
    block-size: auto;
    border-radius: 2px;
    opacity: 1;
    background: var(--colour-text);
    transition: background-color var(--motion-fast) var(--ease);
}

.app-content--front .briefing-end .mosaic-mark i:nth-child(2) {
    background: var(--colour-action);
}

.app-content--front .briefing-end .mosaic-mark i:nth-child(3) {
    background: color-mix(in srgb, var(--colour-text) 45%, var(--colour-bg));
}

.app-content--front .briefing-end .mosaic-mark i:nth-child(4) {
    background: var(--colour-muted);
}

.app-content--front .briefing-end__mosaic[data-arrangement="1"] .mosaic-mark {
    grid-template-columns: 10px 15px;
    grid-template-rows: 15px 10px;
}

.app-content--front .briefing-end__mosaic[data-arrangement="1"] .mosaic-mark i:nth-child(1) {
    background: var(--colour-action);
}

.app-content--front .briefing-end__mosaic[data-arrangement="1"] .mosaic-mark i:nth-child(2) {
    background: var(--colour-text);
}

.app-content--front .briefing-end__mosaic[data-arrangement="1"] .mosaic-mark i:nth-child(3) {
    background: var(--colour-muted);
}

.app-content--front .briefing-end__mosaic[data-arrangement="1"] .mosaic-mark i:nth-child(4) {
    background: color-mix(in srgb, var(--colour-text) 45%, var(--colour-bg));
}

.app-content--front .briefing-end__mosaic[data-arrangement="2"] .mosaic-mark {
    grid-template-columns: 10px 15px;
    grid-template-rows: 10px 15px;
}

.app-content--front .briefing-end__mosaic[data-arrangement="2"] .mosaic-mark i:nth-child(1) {
    background: color-mix(in srgb, var(--colour-text) 45%, var(--colour-bg));
}

.app-content--front .briefing-end__mosaic[data-arrangement="2"] .mosaic-mark i:nth-child(2) {
    background: var(--colour-muted);
}

.app-content--front .briefing-end__mosaic[data-arrangement="2"] .mosaic-mark i:nth-child(3) {
    background: var(--colour-action);
}

.app-content--front .briefing-end__mosaic[data-arrangement="2"] .mosaic-mark i:nth-child(4) {
    background: var(--colour-text);
}

.app-content--front .briefing-end .mosaic-mark i:nth-child(n + 5) {
    display: none;
}

.app-content--front .briefing-end__next {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.375rem;
    margin: 0;
    padding-block-start: var(--space-2);
    border-block-start: var(--rule-light) solid var(--colour-hairline);
    font-size: 0.9375rem;
}

.app-content--front .briefing-end__next a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    color: var(--colour-text);
}

/* ---------------------------------------------------------------- Sot, beside the close */

/* The day's door: on a wide screen beside the close; a phone reaches it from the footer. */
.app-content--front .front-sot {
    display: none;
}

.app-content--front .front-sot__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
}

.app-content--front .front-sot__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-content--front .front-sot__note {
    margin: 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.app-content--front .front-sot__links {
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-2);
    border-block-start: var(--rule-light) solid var(--colour-hairline);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--step--1);
}

.app-content--front .front-sot__links a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    color: var(--colour-text);
}

.app-content--front .front-sot__open {
    font-weight: 700;
}

/* ---------------------------------------------------------------- what the reader follows */

.app-content--front .front-followed__header {
    justify-content: space-between;
}

.app-content--front .front-followed__mine,
.app-content--front .front .block__header > a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.app-content--front .front-followed__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-content--front .front-followed__list > li {
    padding-block: 1.125rem;
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}

.app-content--front .front-followed__list > li:first-child {
    border-block-start: 0;
}

/* A followed story keeps its picture small at the right of its headline, on every screen. */
.app-content--front .front-followed .card--with-image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6rem;
    gap: 0 0.875rem;
    align-items: start;
}

.app-content--front .front-followed .card--with-image > .card__image {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
}

.app-content--front .front-followed .card--with-image > :not(.card__image) {
    grid-column: 1;
    min-inline-size: 0;
}

.app-content--front .front-followed .card__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.22;
}

/* Why a followed story is here (Rreze H08): one muted line over its card, as the board's "Temë që ndiqni". */
.app-content--front .front-followed__reason {
    margin: 0 0 0.375rem;
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.app-content--front .front-followed__empty {
    margin: 0;
    padding-block: 1.125rem;
    color: var(--colour-muted);
}

/* ---------------------------------------------------------------- the editors' marks (ADR-0170) */

/* «E veçuar» is the board's action-yellow tag with an ink square; «E ngjitur» an ink tag with a pin,
   and a pinned story keeps the board's inset ink rule at its start. The words carry the meaning; in
   forced colours the tags keep an outline. */
.app-content--front .front-marks__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The editors' marks read at the same light headline weight as the rest of the front (the card title's
   editorial default is 700), so a marked story is no heavier than the lead. */
.app-content--front .front-marks__list .card__title {
    font-weight: 500;
}

.app-content--front .front-marks__item {
    padding-block: 1.125rem;
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}

.app-content--front .front-marks__item:first-child {
    border-block-start: 0;
}

.app-content--front .front-marks__item--pinned {
    padding-inline-start: 0.875rem;
    box-shadow: inset 3px 0 0 var(--colour-text);
}

[dir="rtl"] .app-content--front .front-marks__item--pinned {
    box-shadow: inset -3px 0 0 var(--colour-text);
}

.app-content--front .front-marks__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0 0 0.5rem;
}

.app-content--front .front-marks__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    background: var(--colour-action);
    color: var(--colour-action-text);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-content--front .front-marks__square {
    inline-size: 6px;
    block-size: 6px;
    background: currentColor;
}

.app-content--front .front-marks__tag--pinned {
    background: var(--colour-text);
    color: var(--colour-surface);
}

@media (forced-colors: active) {
    .app-content--front .front-marks__tag {
        outline: 1px solid CanvasText;
    }

    .app-content--front .front-marks__item--pinned {
        border-inline-start: 3px solid CanvasText;
    }
}

/* ---------------------------------------------------------------- the latest list and the continuation */

.app-content--front .front__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5) 3rem;
}

.app-content--front .front__columns .block {
    margin-block-start: 0;
}

.app-content--front .front--edition .block--list .card__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.28;
}

/* ---------------------------------------------------------------- the feed's pictures on a phone */

/*
 * On a phone a feed stops reading as a column of tiny side stamps. Every list row keeps a side thumbnail
 * that is comfortably larger than the old one, so the picture actually helps a reader tell stories apart
 * rather than being ignored weight (NN/G, mobile list thumbnails). The home and section feeds lead with
 * their own block (a hero where the edition opens with one), so their list rows stay side thumbnails; the
 * latest page is a flat list with no lead block, so its first story (the lead row) lifts its picture
 * full-width above the headline as a bounded lead, the way the home hero draws its own lead (.card--lead
 * above) and ADR-0240 draws the story page's lead at its column's full width. The thumbnail column is
 * capped at a fraction of the card, so it still leaves the headline its reading width when the reader
 * enlarges the text (the viewport query keeps matching while a rem floor would not). The wider edition
 * keeps its composed side-thumbnail rows unchanged, so the pictures grow on the phone and stay
 * proportionate on a larger screen; the 16:9 frame, srcset, lazy decoding and blurhash are all kept. The
 * section feed carries the same enlargement in rreze-subjects.css.
 */
@media (max-width: 40rem) {
    .app-content--front .block--list .cards--list .card--with-image,
    .app-content--latest .cards--list .card--with-image {
        grid-template-columns: minmax(0, 1fr) clamp(min(6.5rem, 38%), 34%, 9rem);
        column-gap: var(--space-3);
    }

    /* The lead row is marked on the first story itself (a day heading can be the list's first child, and
       newly arrived stories sit in their own control, never prepended here), so it is matched by class. */
    .app-content--latest .cards--list .card--list-lead.card--with-image {
        display: block;
    }

    .app-content--latest .cards--list .card--list-lead > .card__image {
        grid-column: auto;
        margin: 0 0 var(--space-2);
        inline-size: 100%;
    }
}

/* ---------------------------------------------------------------- the wide edition */

@media screen and (min-width: 64rem) {
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .welcome[data-welcome],
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .welcome:not([data-welcome]) {
        margin-block-end: 0;
        padding-block: 1.625rem 1.375rem;
        border-block-end: var(--rule-light) solid var(--colour-hairline);
    }

    .app-content--front .welcome__greeting {
        font-size: 1.875rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.01em;
    }

    /* Everything the board shows at once needs no jump index or heading line of its own; the
       heading stays for assistive technology and the page's outline. */
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .briefing-heading {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .briefing-heading nav {
        display: none;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition .briefing-card-number {
        display: none;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .hero-block__label {
        display: block;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition .hero-block__lead {
        border-block-start: 0;
    }

    .app-content--front .front--edition {
        padding-block-start: 1.875rem;
        row-gap: var(--space-5);
    }

    /*
     * One column first, in the source order, which is the reading order (the marks, the lead, the
     * developments, the ranking, the close, the feed): editorial.css names a two-column grid for a
     * page with a rail, and larger reader type and print keep this single column. The named areas
     * below are given only where a template defines them, so no part can fall into an implicit row.
     */
    .app-content--front .front--edition.front--with-rail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: none;
    }

    .app-content--front .front--edition > * {
        grid-area: auto;
    }

    /*
     * The Rreze-Home edition (ADR-0213): three columns with one job each. The briefs at the start
     * (the editors' marks over the developments, about a fifth of the width), the lead in the middle
     * (the widest), the coverage ranking at the end (a little wider than the briefs), the close and
     * Sot under the first two and the third, and the feed under all three. A column that has nothing
     * is left out and the others take its room; the ranking column is on every live page, with its
     * one honest line when the board has nothing to rank.
     */
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition:is(.front--with-rail, .front--with-marks).front--with-covered {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr) minmax(0, 1.35fr);
        grid-template-areas: "rail lead covered" "end end sot" "feed feed feed";
        column-gap: 0;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition.front--with-marks.front--with-rail.front--with-covered {
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        grid-template-areas: "marks lead covered" "rail lead covered" "end end sot" "feed feed feed";
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition.front--with-marks:not(.front--with-rail).front--with-covered {
        grid-template-areas: "marks lead covered" "feed feed feed";
    }

    /* A layout preview draws the layout alone: no ranking, no Sot, no marks. */
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition.front--with-rail:not(.front--with-covered) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr);
        grid-template-areas: "rail lead" "end end" "feed feed";
        column-gap: 0;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition.front--with-covered:not(.front--with-rail, .front--with-marks) {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        grid-template-areas: "lead covered" "feed feed";
        column-gap: 0;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition:is(.front--with-rail, .front--with-covered) > .front__lead {
        grid-area: lead;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition:is(.front--with-rail, .front--with-covered) > .front__feed {
        grid-area: feed;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition.front--with-rail > .front__rail {
        grid-area: rail;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition.front--with-rail > .briefing-end {
        grid-area: end;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition.front--with-rail.front--with-covered > .front-sot {
        grid-area: sot;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition.front--with-covered > .front__covered {
        grid-area: covered;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition.front--with-marks.front--with-covered > .front__marks {
        grid-area: marks;
        padding-inline-end: 1.75rem;
    }

    /* Under the marks, the developments' own rule separates the two; nothing else is drawn between them. */
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition.front--with-marks.front--with-rail > .front__rail {
        align-self: start;
    }

    /* Sot stands beside the close in a white panel, as the board draws it. */
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition > .front-sot {
        display: block;
        grid-area: sot;
        align-self: center;
        margin-inline-start: 3rem;
        padding: 1.25rem var(--space-4) 1.125rem;
        border: var(--rule-light) solid var(--colour-hairline);
        border-radius: var(--radius);
        background: var(--colour-surface);
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition > .briefing-end {
        align-self: center;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front-followed__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 2.75rem;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front-followed__list > li {
        border-block-start: 0;
    }

    /* The lead stands between hairlines wherever a column is beside it; with no briefs column its start edge is the page's. */
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition:is(.front--with-rail, .front--with-marks, .front--with-covered) > .front__lead {
        align-self: stretch;
        padding-inline: 1.75rem;
        border-inline: var(--rule-light) solid var(--colour-hairline);
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition.front--with-covered:not(.front--with-rail, .front--with-marks) > .front__lead {
        padding-inline-start: 0;
        border-inline-start: 0;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition.front--with-rail:not(.front--with-covered) > .front__lead {
        padding-inline-end: 0;
        border-inline-end: 0;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition > .front__rail {
        padding-inline-end: 1.75rem;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition > .front__covered {
        padding-inline-start: 1.75rem;
    }

    /* The lead reads down its column: label, headline, standfirst, then the picture. */
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition .hero-block__lead .card,
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition .hero-block__lead .card--with-image {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-inline-size: 0;
        padding-block-start: var(--space-2);
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition .hero-block__lead .card > .card__image {
        order: 3;
        margin-block: 0 var(--space-3);
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition .hero-block__lead .card > .card__title {
        order: 1;
        margin-block: 0 0.875rem;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition .hero-block__lead .card > .card__excerpt {
        order: 2;
        margin-block: 0 1.125rem;
    }

    /* The Rreze lead's kicker and genre open its column, before the headline. */
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition .hero-block__lead .card > :is(.card__kicker, .card__genre) {
        order: 0;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition .hero-block__lead .card > :not(.card__image, .card__title, .card__excerpt, .card__kicker, .card__genre) {
        order: 4;
    }

    .app-content--front .front--edition .hero-block__lead .card__title {
        font-size: clamp(2rem, 1rem + 1.8vw, 2.625rem);
        line-height: 1.04;
        letter-spacing: -0.018em;
    }

    /* The supporting stories sit in pairs under the lead, below an ink line. */
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition .hero-block__support {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 1.75rem;
        padding-block-start: 1.125rem;
        border-block-start: var(--rule-light) solid var(--colour-text);
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition .hero-block__support > li {
        display: block;
        padding-block: 0;
        border-block-start: 0;
    }

    .app-content--front .front--edition .hero-block__support .card__title {
        font-size: 1.375rem;
        line-height: 1.2;
    }

    .app-content--front .lead-headlines__coverage {
        display: inline-flex;
        inline-size: auto;
        min-block-size: var(--touch-target);
    }

    /* The developments read down their own column, one story under another. */
    .app-content--front .front--edition .rail__list {
        display: block;
    }

    /* Beside the lead the supporting stories are headlines; their pictures return on a phone. */
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition .hero-block__support .card > .card__image {
        display: none;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition .hero-block__support .card--with-image {
        display: block;
    }

    /* The close and its two quiet next steps run under all three columns, on the page itself. */
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition > .briefing-end {
        padding: 1.75rem 0 0;
        border: 0;
        border-block-start: var(--rule-light) solid var(--colour-hairline);
        border-radius: 0;
        background: none;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .briefing-end__next {
        padding-block-start: 0;
        border-block-start: 0;
    }

    .app-content--front .front__columns {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* Larger reader type: the ranked column takes its place in the reading order like the rest. */
html:is(.text-1375, .text-1500) .app-content--front .front--edition > .front__covered {
    grid-area: auto;
}

html:is(.text-1250, .text-1375, .text-1500) .app-content--front .front__columns,
html[data-edition="print"] .app-content--front .front__columns {
    display: block;
}

@media print {
    .app-content--front .front__columns {
        display: block;
    }

    .app-content--front .briefing-heading a {
        border: var(--rule-light) solid currentColor;
        background: none;
        color: inherit;
    }
}

@media (forced-colors: active) {
    .app-content--front .briefing-heading a,
    .app-content--front .publisher-stamp {
        border: var(--rule-light) solid CanvasText;
    }

    .app-content--front .briefing-end .mosaic-mark i {
        background: CanvasText;
    }
}

/* ---------------------------------------------------------------- generated translations on cards */

/*
 * A card of another language showing its article's generated translation (ADR-0161) carries the
 * label line the story page's coverage uses (Rreze-States-M, 2): muted, one step down, the label as
 * plain words rather than a pill; beneath it the publisher's own headline, in its language, linked
 * to the publisher's article in the secondary text colour. Cards sit on the front page, the
 * section and topic pages and the latest page, so this one rule is not scoped to the front page.
 */
.card__translation,
.card__original {
    margin: 0.3125rem 0 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.card__original a {
    color: var(--colour-text-2);
}

.card__translation .badge {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

/* ---------------------------------------------------------------- the Rreze birds (optional, ADR-0173) */

/* Gjumashi, Nervozi and Bosi perch on the lead's ink rule (Rreze-Home), 10px apart at the
   board's sizes. Only the wide edition draws that rule, so only it draws the birds; a phone, the
   enlarged text steps, forced colours and print never do. The perch has no height and the
   edition keeps room above the rule for them, so nothing moves or is covered; they never take a
   pointer, a tap or the focus. Without the motion below they are a still picture, which is all
   a reader who asked for less motion gets. */
.app-content--front .rreze-birds {
    display: none;
}

@media screen and (min-width: 64rem) {
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .rreze-birds {
        display: block;
        position: relative;
        block-size: 0;
        pointer-events: none;
        user-select: none;
    }

    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front--edition:has(.rreze-birds) {
        padding-block-start: 2.75rem;
    }

    .app-content--front .rreze-birds__flock {
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 0.75rem;
        display: flex;
        align-items: flex-end;
        gap: 10px;
    }

    .app-content--front .rreze-birds__bird {
        flex: none;
        display: block;
        transform-origin: 50% 100%;
    }

    .app-content--front .rreze-birds__blink {
        opacity: 0;
    }
}

/* An idle bob and a blink, each bird at its own pace, only for readers who have not asked for less. */
@media (prefers-reduced-motion: no-preference) {
    .app-content--front .rreze-birds__bird {
        animation: rreze-bird-bob 4.8s ease-in-out infinite;
    }

    .app-content--front .rreze-birds__bird--nervozi {
        animation-duration: 2.6s;
        animation-delay: -0.9s;
    }

    .app-content--front .rreze-birds__bird--bosi {
        animation-duration: 6.2s;
        animation-delay: -2.3s;
    }

    .app-content--front .rreze-birds__blink {
        animation: rreze-bird-blink 5.5s steps(1, end) infinite;
    }

    .app-content--front .rreze-birds__bird--nervozi .rreze-birds__blink {
        animation-duration: 3.7s;
        animation-delay: -1.2s;
    }

    .app-content--front .rreze-birds__bird--bosi .rreze-birds__blink {
        animation-duration: 7.3s;
        animation-delay: -4s;
    }

    @keyframes rreze-bird-bob {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-1.5px); }
    }

    @keyframes rreze-bird-blink {
        0%, 95% { opacity: 0; }
        96%, 98% { opacity: 1; }
    }
}

/* High-contrast modes would flatten them into shapes; the printed page carries news only. */
@media (forced-colors: active), print {
    .app-content--front .rreze-birds {
        display: none !important;
    }
}

/* ================================================================ the next-briefing hour (ADR-0233)
 * Added to the close (.briefing-end, _next_edition.html.twig): the quiet line under the "you're
 * caught up" line that names when the shared edition next turns over. It sits in the close's second
 * column, under the caught-up line and above the two doors, in muted ink so the hour is the only
 * part that carries weight. Rreze tokens only; no new palette, type or radius. */
.app-content--front .front--edition .briefing-end__edition {
    grid-column: 2;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--colour-muted);
    font-size: 0.9375rem;
    line-height: 1.35;
}

.app-content--front .briefing-end__edition .briefing-end__time {
    color: var(--colour-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ================================================================ the unnumbered final story (Rreze H05)
 * Sits at the start of the close (.briefing-end) when a 6th lead story is present, keeping the 5-story
 * briefing denominator untouched. */
.app-content--front .briefing-end__finally {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-1);
    padding-block-end: var(--space-3);
    border-block-end: var(--rule-light) solid var(--colour-hairline);
}

.app-content--front .briefing-end__finally-kicker {
    margin: 0;
    color: var(--colour-muted);
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-content--front .briefing-end__finally-story {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
}

.app-content--front .briefing-end__finally-link {
    color: var(--colour-text);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.22;
    text-decoration: none;
}

.app-content--front .briefing-end__finally-link:hover {
    text-decoration: underline;
}

.app-content--front .briefing-end__finally-source {
    color: var(--colour-muted);
    font-size: var(--step--1);
}

/* ================================================================ publishers by place (Rreze H10)
 * Four place groups (Shqipëri, Kosovë, Maqedonia e Veriut, Diaspora) derived strictly from explicit
 * Source::country() via PublisherPlace::ofCountry(). */
.app-content--front .front-publishers {
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-block-start: var(--space-6);
    padding-block-start: 0.6875rem;
    border-block-start: 3px solid var(--colour-text);
}

.app-content--front .front-publishers__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    margin-block-end: var(--space-4);
}

.app-content--front .front-publishers__title {
    margin: 0;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--colour-text);
}

.app-content--front .front-publishers__all {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.app-content--front .front-publishers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--space-4) var(--space-5);
}

.app-content--front .front-publishers__group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-2);
    min-inline-size: 0;
}

.app-content--front .front-publishers__place {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    padding-block-end: var(--space-2);
    border-block-end: var(--rule-light) solid var(--colour-hairline);
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--colour-text);
}

.app-content--front .front-publishers__place[data-flag]::before {
    content: attr(data-flag);
    flex: none;
    font-size: 1rem;
    line-height: 1;
}

.app-content--front .front-publishers__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    min-inline-size: 0;
}

.app-content--front .front-publishers__item {
    min-inline-size: 0;
    max-inline-size: 100%;
}

.app-content--front .front-publishers__link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2rem;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    color: var(--colour-text-2);
    font-size: var(--step--1);
    text-decoration: none;
}

.app-content--front .front-publishers__link:hover {
    color: var(--colour-text);
    text-decoration: underline;
}

/* ================================================================ active topics strip (Rreze H07)
 * Up to five enabled, reader-visible topics ordered by weekly story count ("Temat që po nxehen"). */
.app-content--front .front-topics {
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-block-end: var(--space-5);
}

.app-content--front .front-topics__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
}

.app-content--front .front-topics__all {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.app-content--front .front-topics__list {
    margin: 0;
    padding: var(--space-2) 0 var(--space-1);
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
    gap: 0.75rem;
}

@media screen and (min-width: 64rem) {
    html:not(.text-1250, .text-1375, .text-1500, [data-edition="print"]) .app-content--front .front-topics__list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.app-content--front .front-topics__item {
    min-inline-size: 0;
}

.app-content--front .front-topics__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 3.625rem;
    padding-block: 0.625rem;
    padding-inline: 0.625rem 0.875rem;
    border: var(--rule-light) solid var(--colour-hairline);
    border-radius: var(--radius);
    background: var(--colour-surface);
    color: var(--colour-text);
    text-decoration: none;
}

.app-content--front .front-topics__link:focus-visible {
    outline: 2px solid var(--colour-focus);
    outline-offset: 2px;
}

@media (hover: hover) {
    .app-content--front .front-topics__link:hover {
        border-color: var(--colour-text);
        background: var(--colour-wash);
    }
}

.app-content--front .front-topics__tile {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius);
    background: var(--colour-text);
    color: var(--colour-bg);
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
}

.app-content--front .front-topics__tile.hue {
    background: var(--hue);
    color: var(--hue-on);
}

.app-content--front .front-topics__body {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
}

.app-content--front .front-topics__name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.app-content--front .front-topics__count {
    font-size: 0.875rem;
    color: var(--colour-muted);
    overflow-wrap: anywhere;
}

/*
 * Section and topic pages in the Rreze design (boards Rreze-Section and Rreze-Topic, desktop and phone).
 * Part of the reader bundle (ReaderStylesCompiler): these pages are reached by boosted navigation,
 * which swaps only the page's content, so a stylesheet linked from their own head would not arrive.
 * Every rule is scoped to .rreze-subject; the blocks keep their own components and are only placed
 * and sized here.
 */

/* Where the page sits: Home / Sections / the section. Each link is a full touch target. */
.rreze-subject__trail { font-size: 0.875rem; color: var(--colour-muted); }
.rreze-subject__trail ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; margin: 0; padding: 0; list-style: none; }
.rreze-subject__trail a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); color: var(--colour-muted); }

/* The heading: the mark, the name, what it covers and who follows it, with the actions at the side. */
.rreze-subject__header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; padding-block: 1.25rem 2rem; }
.rreze-subject__identity { flex: 1 1 35rem; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
.rreze-subject__identity--marked { grid-template-columns: 4.5rem minmax(0, 1fr); }
.rreze-subject__intro { min-inline-size: 0; }
.rreze-subject__title { margin: 0 0 0.625rem; font-family: var(--font-serif); font-size: clamp(2.125rem, 1.45rem + 2.8vw, 3.5rem); line-height: 1; font-weight: 600; letter-spacing: -0.018em; overflow-wrap: anywhere; }
.rreze-subject__lead { margin: 0 0 0.375rem; max-inline-size: 62ch; font-size: 1.0625rem; color: var(--colour-text-2); text-wrap: pretty; }
.rreze-subject__facts { margin: 0; font-size: 0.875rem; color: var(--colour-muted); }

/* A section's mark: its colour as one tile of the mosaic, with the logo's four squares inside. A
   category without a colour is ink on ivory. Decorative: the name is beside it. */
.rreze-subject__mark { display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem; background: var(--hue); color: var(--hue-on); }
.rreze-subject__mark:not([class*="hue--"]) { background: var(--colour-text); color: var(--colour-bg); }
.rreze-subject__tiles { display: grid; grid-template-columns: 21px 14px; grid-template-rows: 21px 14px; gap: 4px; }
.rreze-subject__tiles > span { border-radius: 2px; background: currentColor; }

/* Following is the screen's one yellow step; hiding is quiet beside it. */
.rreze-subject__actions { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.rreze-subject__actions form { margin: 0; }
.rreze-subject__actions .button { justify-content: center; min-block-size: 3rem; padding-inline: 1.125rem; font-size: 1rem; text-align: center; }
.rreze-subject__actions .button:not(.button--quiet) { gap: 0.5625rem; padding-inline: 1.375rem; font-weight: 700; }
.rreze-subject__actions .button:not(.button--quiet)::before { content: ""; flex: none; inline-size: 1rem; block-size: 1rem; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; }
.rreze-subject__actions .toggle-hide__state { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--colour-muted); }

/* The reading column: the page's published blocks, each under a 3px ink rule and a small label; on a
   topic, what to read next beside it, and under it on a phone. */
.rreze-subject__columns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3rem 3.5rem; }
.rreze-subject__main { flex: 999 1 38.75rem; min-inline-size: 0; max-inline-size: 52.75rem; }
.rreze-subject__main > .block:first-child { margin-block-start: 0; }
.rreze-subject__main > .block:last-child { margin-block-end: 0; }
.rreze-subject__main .block { margin-block: 0 3rem; }
.rreze-subject__main .block__header { margin-block-end: 0; padding-block-start: 0.6875rem; border-block-start: 3px solid var(--colour-text); }
.rreze-subject__main .block__title { font-weight: 700; letter-spacing: 0.08em; }
.rreze-subject__main .cards { margin: 0; }

/* The lead story: the picture on the left and the words on the right, as wide as the column. */
.rreze-subject__main .hero-block { grid-template-columns: minmax(0, 1fr); gap: 0; }
.rreze-subject__main .hero-block__lead { padding-block: 1.625rem 2rem; }
.rreze-subject__main .card--hero .card__title { margin-block-end: 0.75rem; font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.125rem); line-height: 1.08; font-weight: 600; letter-spacing: -0.012em; }
.rreze-subject__main .card--hero .card__image { margin: 0 0 1.375rem; }
.rreze-subject__main .card--hero .card__excerpt { font-size: 1rem; color: var(--colour-text-2); }
.rreze-subject__main .card--hero .card__meta { font-size: 0.875rem; }
@media (min-width: 48rem) {
    .rreze-subject__main .card--hero.card--with-image { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); column-gap: 2rem; align-items: start; }
    .rreze-subject__main .card--hero.card--with-image > * { grid-column: 2; }
    .rreze-subject__main .card--hero.card--with-image > .card__image { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
}

/* The other top stories under the lead: headline rows between hairlines. */
.rreze-subject__main .hero-block__support { padding: 0; border: 0; }
.rreze-subject__main .hero-block__support > li { padding-block: 0.875rem; border-block-start: var(--rule-light) solid var(--colour-hairline); }
.rreze-subject__main .hero-block__support > li:first-child { padding-block-start: 0.875rem; border-block-start: var(--rule-light) solid var(--colour-hairline); }
.rreze-subject__main .hero-block__support .card__title { font-size: 1.125rem; line-height: 1.3; font-weight: 600; }

/* A list of stories: rows between hairlines, the words first and a 3:2 picture at the right. */
.rreze-subject__main .cards--list .card { padding-block: 1.25rem; }
.rreze-subject__main .cards--list > li:first-child .card { padding-block-start: 1.25rem; }
.rreze-subject__main .cards--list > li + li { border-block-start: var(--rule-light) solid var(--colour-hairline); }
.rreze-subject__main .cards--list .card--with-image { grid-template-columns: minmax(0, 1fr) 10rem; column-gap: 1.375rem; }
.rreze-subject__main .cards--list .card__title { margin-block-end: 0.5rem; font-size: 1.375rem; line-height: 1.2; font-weight: 600; }
.rreze-subject__main .cards--list .card__meta { font-size: 0.875rem; }
.rreze-subject__main .cards__more { justify-content: flex-start; padding-block: 1.5rem 0; border-block-start: var(--rule-light) solid var(--colour-hairline); }
.rreze-subject__main .cards__more .button { min-block-size: 3rem; padding-inline: 1.375rem; font-size: 1rem; }

/* A topic: its first letters on an ink tile (a topic belongs to no section, so it has no hue), the
   follow button over sharing and hiding, and its followers under them. */
.rreze-subject [hidden] { display: none !important; }
.rreze-subject--topic .rreze-subject__header { align-items: flex-start; }
.rreze-subject--topic .rreze-subject__title { margin-block-end: 0.75rem; line-height: 1.03; }
.rreze-subject--topic .rreze-subject__lead { margin-block-end: 0.5rem; }
.rreze-subject__mark--topic { border-radius: var(--radius); font-family: var(--font-serif); font-size: 1.875rem; font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.rreze-subject--topic .rreze-subject__actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; min-inline-size: min(100%, 22.5rem); }
.rreze-subject--topic .rreze-subject__actions .button { inline-size: 100%; }
.rreze-subject__more-actions { display: flex; gap: 0.5rem; }
/* Without a script that can share and for a guest, who cannot hide a topic, the row is empty. */
.rreze-subject__more-actions:not(:has(> :not([hidden]))) { display: none; }
.rreze-subject__more-actions > * { flex: 1 1 auto; min-inline-size: 0; }
.rreze-subject__more-actions .button { gap: 0.5rem; min-block-size: 2.75rem; padding-inline: 0.875rem; font-size: 0.9375rem; }
.rreze-subject--topic .rreze-subject__more-actions > .button { inline-size: auto; }
.rreze-subject--topic .rreze-subject__actions .rreze-subject__facts { margin-block-start: 0.25rem; }

/* A topic's pace (ENG-04): its label, count and trend on one wrapping line, with logical spacing so
   a right-to-left page reads it in its own order. */
.topic-heat { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-block: 0 1rem; }
.topic-heat__label { font-weight: 700; color: var(--colour-text); }

/* Beside the stories: what to read next, under the boards' small label. */
.rreze-subject__side { flex: 1 1 18.75rem; min-inline-size: 0; }
.rreze-subject__side .read-next { margin: 0; }
.rreze-subject__side .read-next > h2 { margin: 0 0 1rem; padding-block-start: 0.6875rem; border-block-start: 3px solid var(--colour-text); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rreze-subject__side .cards { margin: 0; }
.rreze-subject__side .cards--list .card { padding-block: 0.875rem; }
.rreze-subject__side .cards--list > li:first-child .card { padding-block-start: 0.25rem; }
.rreze-subject__side .cards--list .card--with-image { grid-template-columns: minmax(0, 1fr) 5.5rem; column-gap: 0.875rem; }
.rreze-subject__side .card__title { margin-block-end: 0.375rem; font-size: 1.125rem; line-height: 1.3; font-weight: 600; }

/* The line under the heading: what the last seven days held, on one wrapping line. */
.rreze-subject__week { margin-block: 0.25rem 0.5rem; }
.rreze-subject__week time { white-space: nowrap; }

/* The side's panels (ADR-0222): a 3px ink rule over a small capital label, then rows between hairlines.
   One named <aside> for both pages; each panel is a region named by its own heading. Everything is drawn
   with tokens and logical properties, so the dark scheme and a right-to-left page follow with no extra
   rule; bars are plain meters (the CSP forbids inline widths) and always sit beside the count in words. */
.rreze-subject__side > * + * { margin-block-start: 3rem; }
.rreze-panel { min-inline-size: 0; }
.rreze-panel__rule { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; padding-block: 0.6875rem 0.375rem; border-block-start: 3px solid var(--colour-text); }
.rreze-panel__label { margin: 0; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rreze-panel__note, .rreze-panel__more, .rreze-panel__foot { margin: 0; font-size: 0.875rem; color: var(--colour-muted); }
.rreze-panel__more, .rreze-panel__foot { margin-block-start: 0.5rem; }
.rreze-panel__rows { margin: 0; padding: 0; list-style: none; }
.rreze-panel__link { display: inline-flex; align-items: center; min-block-size: var(--touch-target); color: var(--colour-text-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.rreze-panel__link:hover { text-decoration-thickness: 2px; }

/* Plain meters, as the votes drew them: a 4px ink bar on the hairline. */
.rreze-outlet__meter, .rreze-covered__meter { display: block; inline-size: 100%; block-size: 4px; border: 0; background: var(--colour-hairline); appearance: none; }
.rreze-outlet__meter::-webkit-meter-bar, .rreze-covered__meter::-webkit-meter-bar { border: 0; border-radius: 0; background: var(--colour-hairline); }
.rreze-outlet__meter::-webkit-meter-optimum-value, .rreze-outlet__meter::-webkit-meter-suboptimum-value, .rreze-outlet__meter::-webkit-meter-even-less-good-value,
.rreze-covered__meter::-webkit-meter-optimum-value, .rreze-covered__meter::-webkit-meter-suboptimum-value, .rreze-covered__meter::-webkit-meter-even-less-good-value { background: var(--colour-text); }
.rreze-outlet__meter::-moz-meter-bar, .rreze-covered__meter::-moz-meter-bar { background: var(--colour-text); }

/* An outlet: its logo or initials, its name over its place, its articles, and the bar under both. */
.rreze-outlet { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; grid-template-areas: "mark body count" ". meter meter"; align-items: center; column-gap: 0.75rem; padding-block: 0.625rem; border-block-end: var(--rule-light) solid var(--colour-hairline); }
.rreze-outlet__mark { grid-area: mark; display: flex; }
.rreze-outlet__mark .subject-mark { inline-size: 2.25rem; block-size: 2.25rem; border-color: var(--colour-control); background: var(--colour-surface); color: var(--colour-text); font-family: var(--font-serif); font-size: 0.9375rem; }
.rreze-outlet__mark .subject-mark--logo { inline-size: 3.5rem; }
.rreze-outlet__body { grid-area: body; display: flex; flex-direction: column; min-inline-size: 0; }
.rreze-outlet__name { display: inline-flex; align-items: center; min-block-size: var(--touch-target); font-size: 1rem; font-weight: 600; color: var(--colour-text); text-decoration: none; overflow-wrap: anywhere; }
.rreze-outlet__name:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.rreze-outlet__place { margin-block-start: -0.375rem; font-size: 0.875rem; color: var(--colour-muted); }
.rreze-outlet__count { grid-area: count; font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rreze-outlet__meter { grid-area: meter; margin-block-start: 0.25rem; }

/* The places: a strip of one tile for each outlet, then a row for each place. */
.rreze-places__strip { display: flex; flex-wrap: wrap; gap: 4px; padding-block: 0.75rem 0.5rem; }
.rreze-places__strip .place-mark { inline-size: 1rem; block-size: 1rem; }
.rreze-place { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.125rem 0.75rem; padding-block: 0.625rem; border-block-start: var(--rule-light) solid var(--colour-hairline); }
.rreze-place__label { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 1rem; font-weight: 600; }
.rreze-place__name { overflow-wrap: anywhere; }
.rreze-place__count { font-size: 0.875rem; color: var(--colour-muted); font-variant-numeric: tabular-nums; }

/* The topics: a tile with the topic's initials, ink on a topic's page and the section's hue on a section's. */
.rreze-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); gap: 0.625rem; padding-block-start: 0.875rem; }
.rreze-topic__link { display: flex; align-items: center; gap: 0.625rem; min-block-size: 3.5rem; padding-block: 0.5rem; padding-inline: 0.5rem 0.875rem; border: var(--rule-light) solid var(--colour-hairline); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); text-decoration: none; }
.rreze-topic__body { display: flex; flex-direction: column; min-inline-size: 0; }
.rreze-topic__name { font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.rreze-topic__count { font-size: 0.875rem; color: var(--colour-muted); }
.rreze-topic__rising { margin-inline-start: auto; flex: none; padding: 0.0625rem 0.4375rem; border: var(--rule-light) solid var(--colour-text); border-radius: 3px; font-size: 0.8125rem; font-weight: 700; }
.rreze-tile { display: grid; place-items: center; flex: none; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius); background: var(--colour-text); color: var(--colour-bg); font-family: var(--font-serif); font-size: 0.9375rem; font-weight: 700; line-height: 1; transition: transform var(--motion-fast) var(--ease); }
.rreze-tile.hue { background: var(--hue); color: var(--hue-on); }
@media (hover: hover) {
    .rreze-topic__link:hover { border-color: var(--colour-text); background: var(--colour-wash); }
    .rreze-topic__link:hover .rreze-tile { transform: translateY(-2px); }
}

/* The most covered stories: a rank, a title, the publishers in words and a bar against the first. */
.rreze-covered { margin: 0; padding: 0; list-style: none; }
.rreze-covered__item { display: grid; grid-template-columns: 1.875rem minmax(0, 1fr); column-gap: 0.75rem; padding-block: 0.875rem; border-block-end: var(--rule-light) solid var(--colour-hairline); }
.rreze-covered__rank { font-family: var(--font-serif); font-size: 1.875rem; font-weight: 600; line-height: 1; color: var(--colour-muted); font-variant-numeric: tabular-nums; }
.rreze-covered__body { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; }
.rreze-covered__title { display: flex; align-items: center; min-block-size: var(--touch-target); font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--colour-text); text-decoration: none; overflow-wrap: anywhere; text-wrap: pretty; }
.rreze-covered__title:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.rreze-covered__count { font-size: 0.875rem; color: var(--colour-muted); }

.rreze-outlet__name:focus-visible, .rreze-covered__title:focus-visible, .rreze-topic__link:focus-visible, .rreze-panel__link:focus-visible { outline: 2px solid var(--colour-text); outline-offset: 2px; }

@media (max-width: 40rem) {
    .rreze-subject__side > * + * { margin-block-start: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .rreze-tile { transition: none; }
    .rreze-topic__link:hover .rreze-tile { transform: none; }
}

@media (forced-colors: active) {
    .rreze-tile { border: 1px solid CanvasText; }
    .rreze-outlet__meter, .rreze-covered__meter { forced-color-adjust: none; }
}

/* A phone: the mark beside the name, the description under both, the actions full width. */
@media (max-width: 40rem) {
    .rreze-subject__header { display: block; padding-block: 0.375rem 1.75rem; }
    .rreze-subject__identity--marked { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 0.875rem; }
    .rreze-subject__intro { display: contents; }
    .rreze-subject__title { align-self: center; margin: 0; font-size: 2.125rem; line-height: 1.05; letter-spacing: -0.016em; }
    .rreze-subject__lead, .rreze-subject__facts { grid-column: 1 / -1; }
    .rreze-subject__lead { margin-block: 0.875rem 0.5rem; font-size: 1rem; }
    .rreze-subject__identity:not(.rreze-subject__identity--marked) .rreze-subject__lead { margin-block-start: 0.625rem; }
    .rreze-subject__mark { inline-size: 3.5rem; block-size: 3.5rem; }
    .rreze-subject__tiles { grid-template-columns: 16px 11px; grid-template-rows: 16px 11px; gap: 3px; }
    .rreze-subject__mark--topic { font-size: 1.4375rem; }
    .rreze-subject--topic .rreze-subject__title { margin: 0; line-height: 1.04; }
    .rreze-subject--topic .rreze-subject__actions { display: flex; }
    .rreze-subject__more-actions .button { min-block-size: 3rem; }
    .rreze-subject__actions { display: grid; margin-block-start: 1.125rem; }
    .rreze-subject__actions .button { inline-size: 100%; }
    .rreze-subject__actions .button:not(.button--quiet) { font-size: 1.0625rem; }
    .rreze-subject__main .hero-block__lead { padding-block: 1rem 1.5rem; }
    .rreze-subject__main .card--hero .card__image { margin-block-end: 1rem; }
    .rreze-subject__main .cards--list .card { padding-block: 1rem; }
    .rreze-subject__main .cards--list > li:first-child .card { padding-block-start: 1rem; }
    /* The section feed leads with its own block, so its list rows keep a comfortably larger side thumbnail
       on a phone, matching the home feed in rreze-front.css, capped at a fraction of the card so enlarged
       text keeps its reading width, and keeping the 16:9 frame. */
    .rreze-subject__main .cards--list .card--with-image { grid-template-columns: minmax(0, 1fr) clamp(min(6.5rem, 38%), 34%, 9rem); column-gap: 0.875rem; }
    .rreze-subject__main .cards--list .card__title { font-size: 1.1875rem; line-height: 1.22; }
    .rreze-subject__main .cards__more .button { inline-size: 100%; justify-content: center; }
}

@media (forced-colors: active) {
    .rreze-subject__mark, .rreze-subject__mark:not([class*="hue--"]) { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
    .rreze-subject__tiles > span { background: CanvasText; }
}

/* Readers' votes on a subject's stories (ADR-0174), as the Rreze boards draw a score: a 13px capital
   label under a 3px ink rule, rows of label and muted value over a 4px ink bar on the hairline, a
   muted note and a plain link. Shared by the outlet's aside and a section's or topic's header. */
.rreze-votes { margin-block-start: 1.5rem; max-inline-size: 36rem; }
.rreze-source__aside > .rreze-votes { margin-block-start: 0; max-inline-size: none; }
.rreze-source__aside > .rreze-votes + .rreze-source__section { margin-block-start: 2.75rem; }
.rreze-votes__rule { border-block-start: 3px solid var(--colour-text); padding-block: 0.6875rem 0.875rem; }
.rreze-votes__label { margin: 0; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rreze-votes__rows { margin: 0; padding: 0; list-style: none; }
.rreze-votes__row { padding-block: 0.5625rem; }
.rreze-votes__row > p { display: flex; justify-content: space-between; gap: 0.75rem; margin: 0; font-size: 0.9375rem; }
.rreze-votes__value { color: var(--colour-muted); white-space: nowrap; }
.rreze-votes__meter { display: block; inline-size: 100%; block-size: 4px; margin-block-start: 0.375rem; border: 0; background: var(--colour-hairline); appearance: none; }
.rreze-votes__meter::-webkit-meter-bar { border: 0; border-radius: 0; background: var(--colour-hairline); }
.rreze-votes__meter::-webkit-meter-optimum-value,
.rreze-votes__meter::-webkit-meter-suboptimum-value,
.rreze-votes__meter::-webkit-meter-even-less-good-value { background: var(--colour-text); }
.rreze-votes__meter::-moz-meter-bar { background: var(--colour-text); }
.rreze-votes__few { margin: 0; font-size: 0.9375rem; color: var(--colour-text-2); }
.rreze-votes__note { margin: 0.5rem 0 0.5rem; font-size: 0.875rem; color: var(--colour-muted); }
.rreze-votes__link { margin: 0; font-size: 0.9375rem; }
.rreze-votes__link a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); color: var(--colour-text-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

@media (max-width: 40rem) {
    .rreze-subject__intro > .rreze-votes { grid-column: 1 / -1; }
}

/* A reader's own rating (ADR-0174): two 50px outlined controls in the Rreze button shape (4px
   radius, 1px edge on the surface, 16px semibold), the pressed one filled with ink; the status line
   muted under them. The slot keeps the height of the controls so the page does not move when the
   private fragment arrives. */
.rreze-rating, .rreze-rating-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block: 0.75rem 0.25rem; min-block-size: 3.125rem; }
.rreze-rating__form { margin: 0; }
.rreze-rating__button { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 3.125rem; padding: 0 1.125rem; box-sizing: border-box; border: 1px solid var(--colour-control); border-radius: 4px; background: var(--colour-surface); color: var(--colour-text); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }
.rreze-rating__button[aria-pressed="true"] { border-color: var(--colour-text); background: var(--colour-text); color: var(--colour-surface); }
.rreze-rating__button:disabled { cursor: not-allowed; opacity: 0.6; }
.rreze-rating__button:focus-visible, .rreze-rating__open:focus-visible, .rreze-rating__sign-in:focus-visible { outline: 2px solid var(--colour-text); outline-offset: 2px; }
.rreze-rating__status { flex-basis: 100%; margin: 0; min-block-size: 1.25rem; font-size: 0.875rem; color: var(--colour-muted); }
.rreze-rating__status:empty { min-block-size: 0; }
.rreze-rating-page { max-inline-size: 40rem; }
.rreze-rating-page__back { margin-block-start: 1.5rem; }

@media (max-width: 40rem) {
    .rreze-rating__form, .rreze-rating__button, .rreze-rating__open, .rreze-rating__sign-in { inline-size: 100%; }
    .rreze-rating__button { justify-content: center; }
}

/*
 * The public entity page in the Rreze design (the "Linked names" request): a named person, place or
 * organisation and the stories that mention it. It borrows the subject shell (.rreze-subject trail,
 * header and columns from rreze-subjects.css) and adds only its own mark, kind label and story list.
 * Part of the reader bundle (ReaderStylesCompiler): reached by boosted navigation, so a sheet linked
 * from its own head would not arrive. Every rule is scoped to .rreze-entity.
 */

.rreze-entity__mark { background: var(--colour-text); color: var(--colour-bg); font-family: var(--font-serif); font-size: 1.75rem; font-weight: 600; }

/* The kind sits above the name, quiet and spaced, so the name reads as the heading. */
.rreze-entity__kind { margin: 0 0 0.25rem; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--colour-muted); overflow-wrap: anywhere; }

.rreze-entity__heading { margin: 0 0 1rem; font-family: var(--font-serif); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }

@media (max-width: 40rem) {
    .rreze-entity .rreze-subject__mark { grid-row: 1 / span 2; }
    .rreze-entity__kind, .rreze-entity .rreze-subject__title { grid-column: 2; min-inline-size: 0; }
}

@media (forced-colors: active) {
    .rreze-entity__mark { background: Canvas; color: CanvasText; }
}

.rreze-entity__stories { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
.rreze-entity__story { margin: 0; }

/* Each story is a full-width touch target under a hairline rule; the title leads, the date trails. */
.rreze-entity__link { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; min-block-size: var(--touch-target); padding-block: 0.75rem; border-block-start: 1px solid var(--colour-border); color: inherit; text-decoration: none; }
.rreze-entity__story:first-child .rreze-entity__link { border-block-start: 0; }
.rreze-entity__link:hover .rreze-entity__story-title,
.rreze-entity__link:focus-visible .rreze-entity__story-title { text-decoration: underline; }
.rreze-entity__story-title { flex: 1 1 24rem; min-inline-size: 0; font-size: 1.0625rem; line-height: 1.35; text-wrap: pretty; }
.rreze-entity__story-time { flex: 0 0 auto; font-size: 0.8125rem; color: var(--colour-muted); font-variant-numeric: tabular-nums; }

/*
 * Sot (Rreze "Sot" boards, desktop and phone): today's date, the weather of a city the reader chose
 * and the horoscope of a sign, side by side from a wide screen down to one column on a phone. Every
 * rule is scoped to the page's root, `.daily-sot`, which `/sot` and `/sot/moti` share.
 */

.daily-sot { padding-block-end: clamp(2rem, 1rem + 4vw, 5rem); }
.daily-sot [hidden] { display: none !important; }
.daily-sot a { color: var(--colour-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
@media (hover: hover) { .daily-sot a:hover { text-decoration-thickness: 2px; } }

/* The date over the title, the lead at the right on a wide screen and under the title on a phone. */
.daily-sot__header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 3rem; padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(1.375rem, 1rem + 1.2vw, 2.125rem); }
.daily-sot__kicker, .daily-sot__label { margin: 0; font-family: var(--font-body); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.daily-sot__kicker { margin-block-end: 0.5rem; color: var(--colour-muted); }
.daily-sot__title { margin: 0; font-family: var(--font-serif); font-size: clamp(2.875rem, 2rem + 3vw, 4rem); line-height: 0.98; font-weight: 600; letter-spacing: -0.022em; overflow-wrap: anywhere; }
.daily-sot__lead { margin: 0 0 0.375rem; max-inline-size: 44ch; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); color: var(--colour-text-2); text-wrap: pretty; overflow-wrap: anywhere; }

/* Weather three parts, horoscope two; they stack when the row is too narrow for both. */
.daily-sot__grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 3rem 3.5rem; }
.daily-sot__weather { flex: 3 1 35rem; min-inline-size: 0; }
.daily-sot__horoscope { flex: 2 1 21.25rem; min-inline-size: 0; }

/* A section opens on a 3px ink rule with its name in small capitals. */
.daily-sot__rule { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; border-block-start: 3px solid var(--colour-text); padding-block: 0.625rem 1.25rem; }
.daily-sot__rule--centre { align-items: center; padding-block-end: 1.5rem; }
.daily-sot__note, .daily-sot__muted { font-size: 0.875rem; color: var(--colour-muted); }
.daily-sot__intro { margin: 0 0 1rem; color: var(--colour-text-2); text-wrap: pretty; }
.daily-sot__place { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.875rem; margin: 0; font-size: 0.9375rem; }
.daily-sot__place b { font-weight: 700; }
.daily-sot__place a, .daily-sot__links a, .daily-sot__return a, .daily-sot__session { display: inline-flex; align-items: center; min-block-size: var(--touch-target); }

/* The temperature in large serif figures, condition glyph, summary pills, and the hour it is forecast for. */
.daily-sot__now { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.25rem; }
.daily-sot__hero-temp { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; min-inline-size: 0; max-inline-size: 100%; }
.daily-sot__hero-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--colour-text); }
.daily-sot__weather-icon { display: block; flex-shrink: 0; }
.daily-sot__weather-icon--lg { inline-size: clamp(2.5rem, 2rem + 1.5vw, 4rem); block-size: clamp(2.5rem, 2rem + 1.5vw, 4rem); }
.daily-sot__weather-icon--md { inline-size: 1.5rem; block-size: 1.5rem; }
.daily-sot__weather-icon--sm { inline-size: 1.375rem; block-size: 1.375rem; }
.daily-sot__temperature { margin: 0; font-family: var(--font-serif); font-variant-numeric: tabular-nums; }
.daily-sot__degrees { display: flex; align-items: flex-start; gap: 0.25rem; font-size: clamp(4.75rem, 3.75rem + 3.5vw, 7.5rem); line-height: 0.82; font-weight: 500; letter-spacing: -0.04em; }
.daily-sot__unit { font-size: 0.353em; line-height: 0.9; font-weight: 400; letter-spacing: 0; }
.daily-sot__now-summary { flex: 1 1 15rem; min-inline-size: 0; display: grid; gap: 0.625rem; }
.daily-sot__when { margin: 0; font-size: 1.0625rem; color: var(--colour-text-2); text-wrap: pretty; overflow-wrap: anywhere; }
.daily-sot__when b { display: block; margin-block-end: 0.25rem; font-family: var(--font-serif); font-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.875rem); line-height: 1.15; font-weight: 600; color: var(--colour-text); overflow-wrap: anywhere; }
.daily-sot__pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.daily-sot__pill { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border: 1px solid var(--colour-hairline); border-radius: var(--radius); background: var(--colour-surface); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--colour-text); }
.daily-sot__pill--condition { background: var(--colour-wash); border-color: var(--colour-control); }

/* Atmospheric metrics grid (wind, humidity, precipitation, UV, sunrise/sunset) */
.daily-sot__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: 0.625rem; margin: 1.375rem 0 0; padding: 0; }
.daily-sot__metric { margin: 0; padding: 0.625rem 0.875rem; border: 1px solid var(--colour-hairline); border-radius: var(--radius); background: var(--colour-surface); min-inline-size: 0; }
.daily-sot__metric-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--colour-muted); overflow-wrap: anywhere; }
.daily-sot__metric-value { margin: 0.25rem 0 0; font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--colour-text); overflow-wrap: anywhere; }

/* Hourly strip and 7-day forecast blocks */
.daily-sot__forecast-block { margin-block-start: 1.5rem; padding-block-start: 1.125rem; border-block-start: 1px solid var(--colour-hairline); }
.daily-sot__subhead { margin: 0 0 0.75rem; font-family: var(--font-body); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--colour-muted); }

/* Next 12 hours responsive card grid */
.daily-sot__hourly-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 4.25rem), 1fr)); gap: 0.5rem; }
.daily-sot__hour { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.375rem; padding: 0.625rem 0.375rem; border: 1px solid var(--colour-hairline); border-radius: var(--radius); background: var(--colour-surface); font-variant-numeric: tabular-nums; text-align: center; min-inline-size: 0; }
.daily-sot__hour--now { background: var(--colour-wash); border-color: var(--colour-control); }
.daily-sot__hour-time { font-size: 0.8125rem; font-weight: 600; color: var(--colour-text-2); overflow-wrap: anywhere; }
.daily-sot__hour--now .daily-sot__hour-time { font-weight: 700; color: var(--colour-text); }
.daily-sot__hour-icon { display: inline-flex; color: var(--colour-text); }
.daily-sot__hour-temp { font-family: var(--font-serif); font-size: 1.125rem; font-weight: 600; color: var(--colour-text); }
.daily-sot__hour-pop { font-size: 0.75rem; font-weight: 600; color: var(--colour-text-2); line-height: 1.1; }
.daily-sot__hour-pop--dry { color: var(--colour-muted); }

/* Next 7 days list with visual temperature range bars */
.daily-sot__daily-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--colour-hairline); border-radius: var(--radius); background: var(--colour-surface); }
.daily-sot__day { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.6875rem 0.875rem; font-variant-numeric: tabular-nums; }
.daily-sot__day + .daily-sot__day { border-block-start: 1px solid var(--colour-hairline); }
.daily-sot__day--today { background: var(--colour-wash); }
.daily-sot__day-name { flex: 0 0 3.75rem; font-size: 0.9375rem; font-weight: 700; color: var(--colour-text); overflow-wrap: anywhere; }
.daily-sot__day-cond { flex: 1 1 9rem; min-inline-size: 0; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--colour-text-2); }
.daily-sot__day-cond-text { overflow-wrap: anywhere; }
.daily-sot__day-pop { padding: 0.1rem 0.375rem; border-radius: var(--radius); background: var(--colour-wash); font-size: 0.75rem; font-weight: 700; color: var(--colour-text); }
.daily-sot__day-range { flex: 1 1 9.5rem; max-inline-size: 14rem; min-inline-size: 0; display: inline-flex; align-items: center; gap: 0.5rem; }
.daily-sot__day-min, .daily-sot__day-max { flex: 0 0 2.125rem; font-family: var(--font-serif); font-size: 0.9375rem; font-weight: 600; text-align: end; }
.daily-sot__day-min { color: var(--colour-muted); }
.daily-sot__day-max { color: var(--colour-text); }
.daily-sot__range-bar { flex: 1 1 3.5rem; min-inline-size: 2.5rem; block-size: 0.375rem; overflow: visible; }
.daily-sot__range-track { fill: var(--colour-hairline); }
.daily-sot__range-fill { fill: var(--colour-text); }

.daily-sot__status { margin: 1.25rem 0 0; padding: 0.75rem 1rem; border-inline-start: 3px solid var(--colour-text); background: var(--colour-wash); }
.daily-sot__source { margin: 2rem 0 0; padding-block-start: 0.75rem; border-block-start: 1px solid var(--colour-hairline); font-size: 0.875rem; color: var(--colour-muted); text-wrap: pretty; }

/* Choosing a city: a native select and a quiet button; this board has no yellow next step. */
.daily-sot__city-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-block-start: 1.5rem; }
.daily-sot__intro + .daily-sot__city-form { margin-block-start: 0; }
.daily-sot__city-form label { flex-basis: 100%; font-size: 0.9375rem; font-weight: 600; }
.daily-sot__city-form select { flex: 1 1 12rem; min-inline-size: 0; max-inline-size: 22rem; min-block-size: var(--touch-target); padding: var(--space-2) var(--space-3); border: 1px solid var(--colour-control); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); font: inherit; }
.daily-sot__city-form .button { min-block-size: var(--touch-target); font-size: 0.9375rem; }
/* A suggestion from the approximate connection region, in the intro's quiet voice; it only preselects. */
.daily-sot__hint { margin: 0 0 1rem; font-size: 0.9375rem; color: var(--colour-text-2); text-wrap: pretty; }
/* "Find the nearest city" is another quiet button beside the select; its answer is a status line under the row. */
.daily-sot__locate-status { flex-basis: 100%; margin-block-start: 0.25rem; }
.daily-sot .form .daily-sot__locate { min-block-size: var(--touch-target); margin-block-start: 0.75rem; font-size: 0.9375rem; }

/* The reader's sign: a white card with the sign's drawing, today's line and the two ways on. */
.daily-sot__card { padding: 1.5rem 1.625rem 1.625rem; background: var(--colour-surface); border: 1px solid var(--colour-hairline); border-radius: var(--radius); }
.daily-sot__card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 0.875rem; }
.daily-sot__card-head > div { flex: 1 1 8rem; min-inline-size: 0; }
.daily-sot__card-kicker { margin: 0 0 0.125rem; font-size: 0.875rem; color: var(--colour-muted); overflow-wrap: anywhere; }
.daily-sot__sign-name { margin: 0; font-family: var(--font-serif); font-size: clamp(2.375rem, 2rem + 1vw, 2.75rem); line-height: 1.02; font-weight: 600; letter-spacing: -0.016em; overflow-wrap: anywhere; }
.daily-sot__reading { margin: 0 0 0.75rem; font-family: var(--font-serif); font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem); line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.daily-sot__fine { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--colour-muted); text-wrap: pretty; }
.daily-sot__fine:empty { display: none; }
.daily-sot__fine--status { margin-block: 0.75rem 0.25rem; }
.daily-sot__links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; font-size: 0.9375rem; }
.daily-sot__glyph { flex: none; inline-size: 1.125rem; block-size: 1.125rem; stroke-width: 1.6; }
.daily-sot__glyph--large { inline-size: 4.25rem; block-size: 4.25rem; stroke-width: 1; }

/* Keeping the sign on this device, offered only where the script can keep it. */
.daily-sot__remember { display: flex; align-items: center; gap: 0.625rem; min-block-size: var(--touch-target); margin-block-end: 0.5rem; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.daily-sot__remember input { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin: 0; accent-color: var(--colour-text); }

/* Twelve signs, three to a row. The chosen one has a 2px ink edge, a white ground and bold words. */
.daily-sot__sign-form { margin-block-start: 0.75rem; }
.daily-sot__signs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.daily-sot__sign { display: flex; align-items: center; justify-content: center; gap: 0.4375rem; box-sizing: border-box; inline-size: 100%; min-block-size: var(--touch-target); padding: 0.25rem; border: 1px solid var(--colour-control); border-radius: var(--radius); background: none; color: var(--colour-text); font: inherit; font-size: 0.9375rem; line-height: 1.2; cursor: pointer; overflow-wrap: anywhere; }
.daily-sot__sign[aria-pressed="true"], .daily-sot__sign[data-birthchart-match="true"] { padding: calc(0.25rem - 1px); border: 2px solid var(--colour-text); background: var(--colour-surface); font-weight: 700; }
.daily-sot__sign[aria-pressed="true"] .daily-sot__glyph { stroke-width: 1.8; }
.daily-sot__sign:active { transform: translateY(1px); }
@media (hover: hover) { .daily-sot__sign:hover { background: var(--colour-wash); border-color: var(--colour-text); } }
@media (prefers-reduced-motion: reduce) { .daily-sot__sign:active { transform: none; } }

/* Factual sky strip: Moon phase, illumination, Sun sign, and naked-eye planets. */
.daily-sot__sky { margin-block-end: 1.25rem; padding: 1.125rem 1.25rem; background: var(--colour-wash); border: 1px solid var(--colour-hairline); border-radius: var(--radius); }
.daily-sot__sky-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-block-end: 0.875rem; }
.daily-sot__sky-title { margin: 0; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.daily-sot__sky-badge { margin: 0; font-size: 0.8125rem; color: var(--colour-muted); }
.daily-sot__sky-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 1rem; margin-block-end: 1rem; }
.daily-sot__sky-item { min-inline-size: 0; padding: 0.875rem 1rem; background: var(--colour-surface); border: 1px solid var(--colour-hairline); border-radius: var(--radius); overflow-wrap: anywhere; }
.daily-sot__moon-figure, .daily-sot__sun-figure { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.daily-sot__moon-figure > div, .daily-sot__sun-figure > div { flex: 1 1 7rem; min-inline-size: 0; }
.daily-sot__moon-svg { flex: none; inline-size: 2.75rem; block-size: 2.75rem; color: var(--colour-text); }
.daily-sot__sky-label { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--colour-muted); overflow-wrap: anywhere; }
.daily-sot__sky-value { margin: 0.125rem 0 0; font-family: var(--font-serif); font-size: 1.1875rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.daily-sot__sky-dates, .daily-sot__sign-dates { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--colour-muted); overflow-wrap: anywhere; }
.daily-sot__sky-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(6rem, 100%), 1fr)); gap: 0.5rem 0.75rem; margin: 0.75rem 0 0; padding-block-start: 0.625rem; border-block-start: 1px solid var(--colour-hairline); font-size: 0.8125rem; }
.daily-sot__sky-facts > div { min-inline-size: 0; }
.daily-sot__sky-facts dt { color: var(--colour-muted); overflow-wrap: anywhere; }
.daily-sot__sky-facts dd { margin: 0.125rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.daily-sot__planets { padding-block-start: 0.75rem; border-block-start: 1px solid var(--colour-hairline); }
.daily-sot__planets-title { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--colour-muted); }
.daily-sot__planets-list { display: flex; flex-wrap: wrap; gap: 0.375rem 0.5rem; margin: 0; padding: 0; list-style: none; }
.daily-sot__planet-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; max-inline-size: 100%; padding: 0.25rem 0.625rem; background: var(--colour-surface); border: 1px solid var(--colour-hairline); border-radius: var(--radius); font-size: 0.8125rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.daily-sot__planet-name { font-weight: 700; }
.daily-sot__planet-motion { color: var(--colour-muted); }
.daily-sot__planet-motion--retrograde { font-weight: 600; color: var(--colour-text); }

/* Rich horoscope sections, metadata, compatibility and weekly/monthly horizons. */
.daily-zodiac__sections { display: grid; gap: 0.625rem; margin: 0.875rem 0; padding-block: 0.875rem; border-block: 1px solid var(--colour-hairline); }
.daily-zodiac__section { min-inline-size: 0; overflow-wrap: anywhere; }
.daily-zodiac__section dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--colour-muted); overflow-wrap: anywhere; }
.daily-zodiac__section dd { margin: 0.1875rem 0 0; font-size: 0.9375rem; line-height: 1.45; color: var(--colour-text-2); text-wrap: pretty; overflow-wrap: anywhere; }
.daily-zodiac__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(5.5rem, 100%), 1fr)); gap: 0.5rem; margin: 0 0 0.875rem; padding-block-end: 0.875rem; border-block-end: 1px solid var(--colour-hairline); font-size: 0.8125rem; }
.daily-zodiac__meta > div { min-inline-size: 0; overflow-wrap: anywhere; }
.daily-zodiac__meta dt { color: var(--colour-muted); overflow-wrap: anywhere; }
.daily-zodiac__meta dd { margin: 0.125rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.daily-zodiac__compatibility { margin-block-end: 0.875rem; padding-block-end: 0.875rem; border-block-end: 1px solid var(--colour-hairline); overflow-wrap: anywhere; }
.daily-zodiac__subhead { margin: 0 0 0.375rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--colour-muted); overflow-wrap: anywhere; }
.daily-zodiac__compatibility-pairs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 0.375rem; font-size: 0.875rem; }
.daily-zodiac__compatibility-pairs > div { display: flex; flex-wrap: wrap; gap: 0.375rem; min-inline-size: 0; }
.daily-zodiac__compatibility-pairs dt { color: var(--colour-muted); }
.daily-zodiac__compatibility-pairs dd { margin: 0; font-weight: 600; }
.daily-zodiac__compatibility-note { margin: 0; font-size: 0.875rem; color: var(--colour-text-2); text-wrap: pretty; overflow-wrap: anywhere; }
.daily-zodiac__horizons { display: grid; gap: 0.75rem; margin-block-end: 0.875rem; padding-block-end: 0.875rem; border-block-end: 1px solid var(--colour-hairline); }
.daily-zodiac__horizon { min-inline-size: 0; overflow-wrap: anywhere; }
.daily-zodiac__horizon p { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--colour-text-2); text-wrap: pretty; overflow-wrap: anywhere; }

/* Browser-only birth-date sign helper; never submitted over the network. */
.daily-sot__birthchart { margin-block: 0.75rem; padding: 0.875rem 1rem; background: var(--colour-wash); border: 1px solid var(--colour-hairline); border-radius: var(--radius); }
.daily-sot__birthchart-label { display: block; margin-block-end: 0.375rem; font-size: 0.875rem; font-weight: 600; }
.daily-sot__birthchart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-end: 0.375rem; }
.daily-sot__birthchart-input { flex: 1 1 10rem; min-block-size: var(--touch-target); padding-inline: 0.625rem; border: 1px solid var(--colour-control); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); font: inherit; font-size: 0.9375rem; }
.daily-sot__birthchart-submit { min-block-size: var(--touch-target); padding-inline: 0.875rem; border: 1px solid var(--colour-control); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.daily-sot__birthchart-result { margin: 0.25rem 0 0.375rem; font-size: 0.9375rem; font-weight: 600; }

/* "Në ekran dhe në raft": films, series and books as narrow cards under the 3px rule, a 2:3 tile
   (the title's first letter; no poster or cover is shown, ADR-0176), the kind in small capitals,
   the title in serif, then plain evidence lines. Two cards a row on a phone. */
.daily-sot__shelves { margin-block-start: clamp(3rem, 2rem + 2.5vw, 4rem); }
.daily-sot__shelf + .daily-sot__shelf { margin-block-start: 2.5rem; }
.daily-sot__shelf-title { margin: 0 0 0.75rem; font-family: var(--font-serif); font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.5rem); line-height: 1.15; font-weight: 600; }
.daily-sot__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: 2rem 1.75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.daily-sot__item { min-inline-size: 0; }
.daily-sot__tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 3; border-radius: 2px; background: var(--colour-wash); border: 1px solid var(--colour-hairline); color: var(--colour-muted); font-family: var(--font-serif); font-size: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); font-weight: 600; line-height: 1; }
.daily-sot__item-kind { margin: 0.75rem 0 0.25rem; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--colour-muted); }
.daily-sot__item-title { margin: 0 0 0.375rem; font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.14; font-weight: 600; overflow-wrap: anywhere; }
.daily-sot__item-title a { text-decoration: none; }
@media (hover: hover) { .daily-sot__item-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; } }
.daily-sot__item-where { margin: 0; font-size: 0.9375rem; overflow-wrap: anywhere; }
.daily-sot__item-line { margin: 0.1875rem 0 0; font-size: 0.8125rem; color: var(--colour-muted); overflow-wrap: anywhere; }

/* The way back to the news, under a light rule. */
.daily-sot__return { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.125rem; margin: clamp(2.75rem, 2rem + 2vw, 3.75rem) 0 0; padding-block-start: clamp(0.75rem, 0.6rem + 0.5vw, 1.375rem); border-block-start: 1px solid var(--colour-hairline); font-size: 1rem; }
.daily-sot__return-title { font-family: var(--font-serif); font-style: italic; font-size: 1.3125rem; }
.daily-sot__home { font-weight: 600; }

/* On a phone: one column, the city and its change link on their own lines, signs as taller tiles. */
@media (max-width: 40rem) {
    .daily-sot__header { display: block; padding-block: 1.5rem 1.375rem; }
    .daily-sot__title { margin-block-end: 0.625rem; }
    .daily-sot__lead { margin: 0; font-size: 1rem; }
    .daily-sot__rule--centre { display: block; padding-block-end: 0.75rem; }
    .daily-sot__place { display: block; margin-block-start: 0.75rem; }
    .daily-sot__place a { display: flex; inline-size: max-content; max-inline-size: 100%; overflow-wrap: anywhere; }
    .daily-sot__degrees { font-size: 6.75rem; }
    .daily-sot__unit { font-size: 0.37em; }
    .daily-sot__when { font-size: 1rem; }
    .daily-sot__when b { font-size: 1.6875rem; }
    .daily-sot__card { padding: 1.25rem 1.125rem 0.75rem; }
    .daily-sot__sign-name { font-size: 2.375rem; }
    .daily-sot__glyph--large { inline-size: 3.5rem; block-size: 3.5rem; stroke-width: 1.1; }
    .daily-sot__reading { font-size: 1.1875rem; margin-block-end: 0.375rem; }
    .daily-sot__sign { flex-direction: column; gap: 0.3125rem; min-block-size: 4rem; padding-inline: 0.25rem; font-size: 0.875rem; }
    .daily-sot__sign .daily-sot__glyph { inline-size: 1.375rem; block-size: 1.375rem; stroke-width: 1.5; }
    .daily-sot__return { padding-block-start: 1rem; }
    .daily-sot__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
    .daily-sot__item-title { font-size: 1.25rem; }
}
@media (forced-colors: active) { .daily-sot__sign[aria-pressed="true"] { border-width: 3px; padding: calc(0.25rem - 2px); } }

/*
 * Your space in the Rreze design (the "Hapësira ime" boards): /mine, and the following and saved pages
 * it leads to. Every rule sits under .mine-rz, so nothing here reaches another page; the shared
 * follow, hide and save controls are restyled here only, never in their own templates. Labels are
 * 13px uppercase under a 3px ink rule; a section's link sits at the right of its rule on a wide
 * screen and under its list on a phone; the one yellow button is the way to what is new.
 */

/* The boards' 1200px page: the same width as every other screen, set by the page frame. */
.mine-rz {
    max-inline-size: var(--page-width);
    margin-inline: auto;
    padding-block-end: clamp(2.5rem, 1.5rem + 3vw, 5rem);
    color: var(--colour-text);
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
}

.mine-rz a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.mine-rz a:hover { text-decoration-thickness: 2px; }

/* Where the page sits (following, saved and the preferences pages). */
.mine-rz__trail { padding-block-start: 0.625rem; font-size: var(--step--1); color: var(--colour-muted); }
.mine-rz__trail a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); color: inherit; }
.mine-rz .mine-rz__trail + .mine-rz__header, .mine-rz .mine-rz__trail + .pref-rz__form-page .mine-rz__header { padding-block-start: 0.25rem; }

/* The page's header: an eyebrow, the serif title, what the page holds, and the way to what is new. */
/* The boards draw no rule over the page's title: the site's header is above it. */
.mine-rz .mine-rz__header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin: 0; padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-block-start: 0; }
.mine-rz .mine-rz__header--page { padding-block: 1.125rem clamp(1.625rem, 1rem + 2vw, 2.5rem); }
.mine-rz__intro { flex: 1 1 35rem; min-inline-size: 0; }
.mine-rz__eyebrow { margin: 0 0 0.625rem; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--colour-muted); }
.mine-rz .mine-rz__title { margin: 0 0 0.75rem; font-family: var(--font-serif); font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); line-height: 1.03; font-weight: 600; letter-spacing: -0.018em; }
.mine-rz .mine-rz__lead { margin: 0 0 0.5rem; max-inline-size: 60ch; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); color: var(--colour-text-2); text-wrap: pretty; }
.mine-rz__private { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--step--1); color: var(--colour-muted); }
.mine-rz .mine-icon { flex: none; }
.mine-rz__next { flex: 0 1 auto; }
.mine-rz .mine-rz__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-block-size: 3rem; padding-inline: 1.375rem; font-size: 1rem; font-weight: 700; }
.mine-rz__cta-note { margin: 0.625rem 0 0; font-size: var(--step--1); color: var(--colour-muted); }

/* Two columns on a wide screen, one on a phone, in the order of the phone board. */
.mine-rz__columns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
.mine-rz__main { flex: 999 1 38.75rem; min-inline-size: 0; display: flex; flex-direction: column; gap: clamp(2rem, 1rem + 3vw, 3.75rem); }
.mine-rz__aside { flex: 1 1 21.25rem; min-inline-size: 0; display: flex; flex-direction: column; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
.mine-rz--page .mine-rz__section { margin-block-start: clamp(2rem, 1rem + 3vw, 3.25rem); }

/* A section: the rule, the label, and its link at the right of the rule on a wide screen. */
.mine-rz__section { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; column-gap: 1rem; border-block-start: 3px solid var(--colour-text); padding-block-start: 0.6875rem; }
.mine-rz__section > * { grid-column: 1 / -1; }
.mine-rz .mine-rz__label { grid-column: 1; margin: 0 0 1rem; font-family: var(--font-body); font-size: var(--step--2); font-weight: 700; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; }
.mine-rz__side { margin: 0; font-size: var(--step--1); color: var(--colour-muted); }
.mine-rz__side a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); color: inherit; }
.mine-rz__section--new > .mine-rz__side { margin-block: -0.75rem 0.875rem; }
.mine-rz__side--always { grid-column: 2; grid-row: 1; align-self: baseline; }
.mine-rz__only { display: inline-flex; align-items: center; gap: 0.375rem; }

@media (min-width: 64rem) {
    .mine-rz__section > .mine-rz__side { grid-column: 2; grid-row: 1; align-self: baseline; justify-self: end; margin: 0; text-align: end; }
    /* Still 44px to hit; the extra height overhangs the rule's padding instead of pushing the list down. */
    .mine-rz__section > .mine-rz__side a { margin-block: -0.75rem; }
}

/* A phone shows a section's "see all" as a quiet full-width button under its list. */
@media (max-width: 63.999rem) {
    .mine-rz__side--button a { display: flex; justify-content: center; min-block-size: 3rem; margin-block-start: 0.625rem; border: 1px solid var(--colour-control); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); font-size: 1rem; font-weight: 600; text-decoration: none; }
}

.mine-rz__line { margin: 0 0 0.75rem; font-size: 0.9375rem; }
.mine-rz__line--grown { margin-block-start: 1.25rem; }
.mine-rz__grown { margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.mine-rz__grown a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); }
.mine-rz__more { margin: 1rem 0 0; font-size: 0.9375rem; }
.mine-rz__more a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); }
.mine-rz__body { margin: 0; font-size: 0.9375rem; color: var(--colour-text-2); text-wrap: pretty; }
.mine-rz__body b { font-weight: 700; color: var(--colour-text); }
.mine-rz .mine-rz__hint { margin: 0.625rem 0 0; font-size: var(--step--1); color: var(--colour-muted); text-wrap: pretty; }
.mine-rz__links { display: flex; flex-wrap: wrap; gap: 0 1.375rem; margin: 0.375rem 0 0; font-size: 0.9375rem; }
.mine-rz__links a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); }
.mine-rz .mine-rz__none { margin: 0; font-size: 0.9375rem; }

/* The tiles that stand for subjects: a section in its hue, a topic on ink, an outlet in an outline. */
.mine-rz .mine-tile { flex: none; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; box-sizing: border-box; border-radius: var(--radius); font-family: var(--font-serif); font-size: 0.9375rem; font-weight: 700; line-height: 1; }
.mine-rz .mine-tile--topic { background: var(--colour-text); color: var(--colour-bg); }
.mine-rz .mine-tile--category { background: var(--hue); }
.mine-rz .mine-tile--source { border: 1px solid var(--colour-control); border-radius: 3px; background: var(--colour-surface); color: var(--colour-text); font-size: 0.8125rem; }
.mine-rz .mine-tile__mark { display: grid; grid-template-columns: 10fr 7fr; grid-template-rows: 10fr 7fr; gap: 2px; inline-size: 47%; block-size: 47%; }
.mine-rz .mine-tile__mark i { background: var(--colour-surface); }
@media (forced-colors: active) {
    .mine-rz .mine-tile,
    .mine-rz .mine-tile--topic { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
    .mine-rz .mine-tile__mark i { background: CanvasText; }
}

/* What is new: one bordered tile per followed subject with new stories. */
.mine-rz__subjects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.mine-rz__subject { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: 0 0.625rem; block-size: 100%; min-block-size: 3.75rem; padding: 0.5rem 0.625rem 0.5rem 0.5rem; box-sizing: border-box; border: 1px solid var(--colour-hairline); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); text-decoration: none; transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); }
.mine-rz__subject .mine-tile { grid-row: 1 / span 2; inline-size: 2rem; block-size: 2rem; font-size: 0.875rem; transition: transform 150ms ease-out; }
.mine-rz__subject .mine-tile--source { font-size: 0.75rem; }
.mine-rz__subject .mine-rz__name { align-self: end; font-size: 0.9375rem; }
.mine-rz__subject .mine-rz__kind { display: none; }
.mine-rz__count { grid-column: 2; align-self: start; min-inline-size: 0; font-size: var(--step--2); color: var(--colour-muted); overflow-wrap: anywhere; }
@media (min-width: 48rem) {
    .mine-rz__subjects { grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr)); gap: 0.625rem; }
    .mine-rz__subject { grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0 0.75rem; min-block-size: 3.5rem; padding: 0.5rem 0.875rem 0.5rem 0.5rem; }
    .mine-rz__subject .mine-tile { grid-row: auto; inline-size: 2.25rem; block-size: 2.25rem; font-size: 0.9375rem; }
    .mine-rz__subject .mine-tile--source { font-size: 0.8125rem; }
    .mine-rz__subject .mine-rz__name { align-self: center; font-size: 1rem; }
    .mine-rz__subject .mine-rz__kind { display: block; }
    .mine-rz__count { grid-column: 3; align-self: center; font-size: var(--step--1); font-weight: 600; color: var(--colour-text); }
}
@media (hover: hover) {
    .mine-rz__subject:hover { border-color: var(--colour-text); background: var(--colour-wash); }
    .mine-rz__subject:hover .mine-tile { transform: translateY(-2px); }
}
.mine-rz__subject:active { transform: translateY(1px); }

/* A subject's name, with what kind it is under it. */
.mine-rz__name { min-inline-size: 0; font-size: 1rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.mine-rz__kind { display: block; font-size: var(--step--2); font-weight: 400; color: var(--colour-muted); }

/* Rows of followed and hidden subjects, each with the control the site already has. */
.mine-rz__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.mine-rz__rows--following { column-gap: 2.5rem; }
@media (min-width: 64rem) {
    .mine-rz__main .mine-rz__rows--following { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
}
.mine-rz__row { min-inline-size: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; padding-block: 0.75rem; border-block-end: 1px solid var(--colour-hairline); }
.mine-rz__subject-name { flex: 1 1 12rem; min-inline-size: 0; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: 0 0.75rem; min-block-size: var(--touch-target); color: var(--colour-text); text-decoration: none; }
.mine-rz__subject-name .mine-tile { inline-size: 2.5rem; block-size: 2.5rem; font-size: 1rem; }
.mine-rz__subject-name .mine-tile--source { font-size: 0.875rem; }
a.mine-rz__subject-name .mine-tile { transition: transform 150ms ease-out; }
@media (hover: hover) {
    a.mine-rz__subject-name:hover .mine-rz__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
    a.mine-rz__subject-name:hover .mine-tile { transform: translateY(-2px); }
}
@media (min-width: 48rem) {
    .mine-rz__main .mine-rz__subject-name { grid-template-columns: 2.75rem minmax(0, 1fr); }
    .mine-rz__main .mine-rz__subject-name .mine-tile { inline-size: 2.75rem; block-size: 2.75rem; font-size: 1.0625rem; }
    .mine-rz__main .mine-rz__subject-name .mine-tile--source { font-size: 0.9375rem; }
    .mine-rz__main .mine-rz__name { font-size: 1.0625rem; }
}
.mine-rz__row > .undo,
.mine-rz__row > .toggle-follow__error,
.mine-rz__row > .toggle-hide__error { flex-basis: 100%; }

/* The shared follow and hide controls, as the boards' quiet bordered buttons; never yellow here. */
.mine-rz .toggle-follow,
.mine-rz .toggle-hide { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; margin: 0; }
.mine-rz .toggle-follow .button,
.mine-rz .toggle-hide .button { min-block-size: var(--touch-target); padding-inline: 0.75rem; border: 1px solid var(--colour-control); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); font-size: 0.875rem; font-weight: 600; text-align: start; }
.mine-rz .toggle-follow .button:not(.button--quiet) { border-color: var(--colour-text); box-shadow: inset 0 0 0 1px var(--colour-text); }
.mine-rz .toggle-follow .button:hover,
.mine-rz .toggle-hide .button:hover { border-color: var(--colour-text); background: var(--colour-wash); }
.mine-rz .toggle-hide__state { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mine-rz .toggle-follow__error,
.mine-rz .toggle-hide__error { flex-basis: 100%; margin: 0; font-size: var(--step--1); }
.mine-rz .push-offer { flex-basis: 100%; margin: 0; font-size: var(--step--1); }

/* Saved stories: the title in the serif, who covers it and when it changed, the way to take it off. */
.mine-rz__stories { margin: 0; padding: 0; list-style: none; }
.mine-rz__story { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 0.875rem; align-items: start; padding-block: 1rem 0.375rem; border-block-end: 1px solid var(--colour-hairline); }
.mine-rz__story:last-child { border-block-end: 0; }
.mine-rz__story--pictured { grid-template-columns: minmax(0, 1fr) 5.5rem; }
.mine-rz__story-title { margin: 0 0 0.25rem; font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.22; font-weight: 600; text-wrap: pretty; }
.mine-rz__story-title a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 0.07em no-repeat; transition: background-size 160ms ease-out; }
.mine-rz__story-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (hover: hover) {
    .mine-rz__story:hover .mine-rz__story-title a { background-size: 100% 0.07em; }
    .mine-rz__story:hover .mine-rz__thumb { opacity: 0.86; }
}
.mine-rz__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; font-size: var(--step--1); color: var(--colour-muted); }
.mine-rz__after { font-weight: 600; color: var(--colour-text); }
.mine-rz .toggle-save { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.mine-rz .toggle-save .button { gap: 0.375rem; min-block-size: var(--touch-target); padding: 0; border: 0; background: none; color: var(--colour-text); font-size: var(--step--1); font-weight: 400; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.mine-rz .toggle-save .button:hover { background: none; text-decoration-thickness: 2px; }
.mine-rz .toggle-save .icon,
.mine-rz .toggle-save svg { inline-size: 0.9375rem; block-size: 0.9375rem; }
.mine-rz .toggle-save__error { margin: 0; flex-basis: 100%; }
/* app.js puts the undo line after the save form, inside the meta: above the title's stretched link. */
.mine-rz__meta > .undo { position: relative; z-index: 2; flex-basis: 100%; }
.mine-rz__thumb { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--colour-placeholder); transition: opacity var(--motion-fast) ease-out; }
.mine-rz__thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.look-density-compact .mine-rz__thumb { display: none; }
.look-density-compact .mine-rz__story--pictured { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) {
    .mine-rz__story { gap: 0 1.25rem; }
    .mine-rz__story--pictured { grid-template-columns: minmax(0, 1fr) 6rem; }
    .mine-rz__story-title { margin-block-end: 0.125rem; font-size: 1.25rem; line-height: 1.25; }
}

/* Karma and votes: the number large, private while it is, and a tile for each accepted contribution. */
.mine-rz__karma { display: flex; align-items: baseline; gap: 0.625rem; margin: 0.25rem 0 0.875rem; }
.mine-rz__karma-number { font-family: var(--font-serif); font-size: 4.5rem; line-height: 0.85; font-weight: 600; letter-spacing: -0.02em; }
.mine-rz__karma-unit { font-size: 1.0625rem; font-weight: 600; }
.mine-rz .mine-rz__subhead { margin: 1.625rem 0 0.25rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.mine-rz__subhead + .mine-rz__hint { margin-block-start: 0; }
.mine-rz__mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.mine-rz__mosaic li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; gap: 0 0.625rem; font-size: var(--step--2); line-height: 1.35; }
.mine-rz__piece { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--radius); background: var(--colour-text); color: var(--colour-bg); }
.mine-rz__piece--correction { background: var(--colour-muted); }
@media (forced-colors: active) { .mine-rz__piece { border: 1px solid CanvasText; } }
.mine-rz__ledger { display: block; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.mine-rz__ledger li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 0.6875rem; border-block-end: 1px solid var(--colour-hairline); }
.mine-rz__points { font-family: var(--font-serif); font-size: 1.1875rem; font-weight: 600; white-space: nowrap; }
.mine-rz__standing .standing__form,
.mine-rz__standing form { margin-block-start: 0.75rem; }
.mine-rz__standing .button { min-block-size: var(--touch-target); padding-inline: 1rem; border: 1px solid var(--colour-control); background: var(--colour-surface); color: var(--colour-text); }

/* Notifications: what the account is sent, as plain facts. */
.mine-rz__facts { margin: 0; max-inline-size: 35rem; font-size: 0.9375rem; }
.mine-rz__facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.125rem 1rem; padding-block: 0.6875rem; border-block-end: 1px solid var(--colour-hairline); }
.mine-rz__facts div:last-child { border-block-end: 0; }
.mine-rz__facts dd { margin: 0; font-weight: 600; }

/* The offer of an account to a reader without one: said once, the yellow button its next step. */
.mine-rz .mine__offer { margin: 0; padding: 0.625rem 1.25rem 1.25rem; border: 1px solid var(--colour-control); border-radius: var(--radius); background: var(--colour-surface); }
.mine-rz__offer-title { margin: 0.5rem 0; font-family: var(--font-serif); font-size: clamp(1.625rem, 1.4rem + 0.8vw, 1.75rem); line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; }
.mine-rz__offer-body { margin: 0 0 1.125rem; font-size: 1rem; color: var(--colour-text-2); text-wrap: pretty; }
.mine-rz__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.mine-rz__actions .button { justify-content: center; min-block-size: 3rem; font-weight: 700; }
.mine-rz__quiet { display: inline-flex; align-items: center; justify-content: center; min-block-size: 3rem; padding-inline: 1.25rem; box-sizing: border-box; border: 1px solid var(--colour-control); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); font-weight: 600; text-decoration: none; }
.mine-rz__quiet:hover { border-color: var(--colour-text); background: var(--colour-wash); }
@media (max-width: 47.999rem) {
    .mine-rz__actions { flex-direction: column; }
}

/* What the reader sent in: the title and, beside it, where it stands (a state chip, as on the submissions page). */
.mine-rz__sent-row { flex-wrap: wrap; }
.mine-rz__sent-title { min-inline-size: 0; flex: 1 1 8rem; overflow-wrap: anywhere; font-weight: 600; color: var(--colour-text); }
.mine-rz__sent-row .submit-rz__state { flex: 0 1 auto; max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
.mine-rz__unread { color: var(--colour-text); font-weight: 600; }

/* Empty places (Rreze, small moments): a pale tile still open, the outlined one next, ink when done. */
.mine-rz .mine-empty { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: start; gap: 0 1rem; margin: 0; padding-block: 1.125rem; color: var(--colour-text); }
.mine-rz .mine-empty__tiles { display: grid; grid-template-columns: repeat(3, 1rem); grid-auto-rows: 1rem; gap: 0.25rem; margin-block-start: 0.25rem; }
.mine-rz .mine-empty__tiles i { background: var(--colour-hairline); }
.mine-rz .mine-empty--saved .mine-empty__tiles i:first-child,
.mine-rz .mine-empty--sent .mine-empty__tiles i:first-child { box-sizing: border-box; border: 1.5px solid var(--colour-control); background: var(--colour-surface); }
.mine-rz .mine-empty--following .mine-empty__tiles i:nth-child(1) { background: color-mix(in srgb, var(--hue-politike) 26%, var(--colour-bg)); }
.mine-rz .mine-empty--following .mine-empty__tiles i:nth-child(2) { background: color-mix(in srgb, var(--hue-ekonomi) 26%, var(--colour-bg)); }
.mine-rz .mine-empty--following .mine-empty__tiles i:nth-child(3) { background: color-mix(in srgb, var(--hue-bota) 26%, var(--colour-bg)); }
.mine-rz .mine-empty--following .mine-empty__tiles i:nth-child(4) { background: color-mix(in srgb, var(--hue-sport) 26%, var(--colour-bg)); }
.mine-rz .mine-empty--following .mine-empty__tiles i:nth-child(5) { background: color-mix(in srgb, var(--hue-kulture) 26%, var(--colour-bg)); }
.mine-rz .mine-empty--following .mine-empty__tiles i:nth-child(6) { background: color-mix(in srgb, var(--hue-shendet) 26%, var(--colour-bg)); }
.mine-rz .mine-empty--following .mine-empty__tiles i:nth-child(7) { background: color-mix(in srgb, var(--hue-teknologji) 26%, var(--colour-bg)); }
.mine-rz .mine-empty--following .mine-empty__tiles i:nth-child(8) { background: color-mix(in srgb, var(--hue-arsim) 26%, var(--colour-bg)); }
.mine-rz .mine-empty--following .mine-empty__tiles i:nth-child(9) { background: color-mix(in srgb, var(--hue-mjedis) 26%, var(--colour-bg)); }
.mine-rz .mine-empty--quiet .mine-empty__tiles i { background: var(--colour-text); }
.mine-rz .mine-empty--quiet .mine-empty__tiles i:nth-child(3n + 2) { background: var(--colour-muted); }
.mine-rz .mine-empty--quiet .mine-empty__tiles i:nth-child(4),
.mine-rz .mine-empty--quiet .mine-empty__tiles i:nth-child(9) { background: color-mix(in srgb, var(--colour-muted) 55%, var(--colour-bg)); }
.mine-rz .mine-empty__message { margin: 0; font-family: var(--font-serif); font-size: 1.3125rem; line-height: 1.22; font-weight: 600; color: var(--colour-text); text-wrap: pretty; }
.mine-rz .mine-empty__detail { margin: 0.25rem 0 0; font-size: 0.9375rem; color: var(--colour-text-2); text-wrap: pretty; }
.mine-rz .mine-empty__link { display: inline-flex; align-items: center; min-block-size: var(--touch-target); font-size: 0.9375rem; }
.mine-rz__next-actions { margin-block: 0; }
@media (forced-colors: active) {
    .mine-rz .mine-empty__tiles i { border: 1px solid CanvasText; background: Canvas; }
}

@media (prefers-reduced-motion: reduce) {
    .mine-rz__subject,
    .mine-rz__subject .mine-tile,
    a.mine-rz__subject-name .mine-tile,
    .mine-rz__story-title a,
    .mine-rz__thumb { transition: none; }
    .mine-rz__subject:hover .mine-tile,
    a.mine-rz__subject-name:hover .mine-tile,
    .mine-rz__subject:active { transform: none; }
}

/* Phone widths: the boards' 16px gutter comes from the page; the header's button spans the column. */
@media (max-width: 47.999rem) {
    .mine-rz__next { flex-basis: 100%; }
    .mine-rz .mine-rz__cta { display: flex; inline-size: 100%; font-size: 1.0625rem; }
    .mine-rz__cta-note { margin-block-start: 0.5rem; text-align: center; }
    .mine-rz__private { margin-block-end: 0.25rem; }
}

/*
 * Preferences in the Rreze design (the "Preferencat" boards): /preferences and the language and time
 * pages. Each choice is a block, its name and what it does at the left, the control at the right on a
 * wide screen and under it on a phone. The display control is the shared one (the masthead panel has
 * it too); here it is laid out, never changed.
 */
/* The shared .preferences sections keep the Rreze rule, not their own hairline and margins. */
.pref-rz .preferences { margin: 0; }
.pref-rz .preferences + .preferences { padding-block-start: 0.6875rem; border-block-start: 3px solid var(--colour-text); }
.pref-rz .pref-rz__form-page { border: 0; padding: 0; }
.pref-rz__instant { margin-block-start: 0.25rem; }
.pref-rz__section + .pref-rz__section { margin-block-start: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); }
.pref-rz .pref-rz__section > .mine-rz__label { margin-block-end: 0; }
.pref-rz__count { margin: 0; }

.pref-rz__block,
.pref-rz__display { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-block: 1.125rem 1.75rem; }
.pref-rz__block + .pref-rz__block,
.pref-rz__display + .pref-rz__block { padding-block-start: 1.5rem; border-block-start: 1px solid var(--colour-hairline); }
/* The print edition's block is drawn only by the script that keeps the choice: hidden until then, whatever the grid says. */
.pref-rz__block[hidden] { display: none; }
.pref-rz__about { min-inline-size: 0; }
.pref-rz .pref-rz__title { margin: 0 0 0.375rem; font-family: var(--font-serif); font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem); line-height: 1.15; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pref-rz__title a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); color: inherit; }
.pref-rz .pref-rz__title--list { margin-block: 1.5rem 0.25rem; font-size: 1.1875rem; }
.pref-rz__text { margin: 0; max-inline-size: 44ch; font-size: 0.9375rem; color: var(--colour-text-2); text-wrap: pretty; }
.pref-rz__control { min-inline-size: 0; }
.pref-rz__control .pref-rz__text { max-inline-size: 60ch; }
.pref-rz__go { margin: 0.75rem 0 0; }
.pref-rz__stored { margin-block: 0.25rem 0; }
.pref-rz .mine-rz__quiet { min-block-size: var(--touch-target); font-size: 0.9375rem; }

@media (min-width: 64rem) {
    .pref-rz__block { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 3.5rem; }
    .pref-rz__block > .pref-rz__about:only-child { grid-column: 1 / -1; }
}

/* Size, density and pictures: the shared control's three forms fall into the grid beside their descriptions. */
.pref-rz__display .display { display: contents; }
.pref-rz__display .display__form--size { grid-row: 2; }
.pref-rz__display .display__form--density { grid-row: 4; }
.pref-rz__display .display__form--pictures { grid-row: 6; }
.pref-rz__about--density, .pref-rz__about--pictures { padding-block-start: 1.5rem; border-block-start: 1px solid var(--colour-hairline); }
.pref-rz__about--size { grid-row: 1; }
.pref-rz__about--density { grid-row: 3; }
.pref-rz__about--pictures { grid-row: 5; }
@media (min-width: 64rem) {
    .pref-rz__display { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 3.5rem; row-gap: 0; }
    .pref-rz__about--size { grid-row: 1; grid-column: 1; padding-block-end: 1.75rem; }
    .pref-rz__display .display__form--size { grid-row: 1; grid-column: 2; padding-block-end: 1.75rem; }
    .pref-rz__about--density { grid-row: 2; grid-column: 1; padding-block-end: 1.75rem; }
    .pref-rz__display .display__form--density { grid-row: 2; grid-column: 2; padding-block: 1.5rem 1.75rem; border-block-start: 1px solid var(--colour-hairline); }
    .pref-rz__about--pictures { grid-row: 3; grid-column: 1; }
    .pref-rz__display .display__form--pictures { grid-row: 3; grid-column: 2; padding-block-start: 1.5rem; border-block-start: 1px solid var(--colour-hairline); }
}
.pref-rz .display__group legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pref-rz .display__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 0.5rem; max-inline-size: 35rem; }
.pref-rz .display__step { min-block-size: 3.875rem; padding-inline: 0.375rem; border: 1px solid var(--colour-control); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); font-weight: 600; justify-content: center; }
.pref-rz .display__step--smaller { font-size: 0.875rem; }
.pref-rz .display__step--reset { font-size: 1rem; }
.pref-rz .display__step--larger { font-size: 1.375rem; }
.pref-rz .display__size { padding-inline: 0.5rem; font-size: var(--step--1); font-weight: 600; color: var(--colour-text); }

/* The six steps as direct choices, each an A drawn at about its own size over its percentage: three to a row on a phone, six on a wide screen. */
.pref-rz .display__sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; max-inline-size: 35rem; }
@media (min-width: 40rem) {
    .pref-rz .display__sizes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.pref-rz .display__size-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; min-block-size: 3.875rem; padding: 0.25rem; border: 1px solid var(--colour-control); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); font-weight: 500; }
.pref-rz .display__glyph { font-family: var(--font-serif); line-height: 1; }
.pref-rz .display__size-choice--875 .display__glyph { font-size: 0.875rem; }
.pref-rz .display__size-choice--1000 .display__glyph { font-size: 1rem; }
.pref-rz .display__size-choice--1125 .display__glyph { font-size: 1.125rem; }
.pref-rz .display__size-choice--1250 .display__glyph { font-size: 1.25rem; }
.pref-rz .display__size-choice--1375 .display__glyph { font-size: 1.375rem; }
.pref-rz .display__size-choice--1500 .display__glyph { font-size: 1.5rem; }
.pref-rz .display__percent { font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.pref-rz .display__size-choice[aria-pressed="true"] { border: 2px solid var(--colour-text); font-weight: 700; box-shadow: none; }
.pref-rz .display__size-choice:hover { border-color: var(--colour-text); background: var(--colour-wash); }
.pref-rz .display__sample { display: grid; gap: 0.25rem; max-inline-size: 35rem; margin: 0.75rem 0 0; padding: 0.75rem 1rem; border: 1px solid var(--colour-hairline); border-radius: var(--radius); background: var(--colour-surface); }
.pref-rz .display__sample-label { font-size: var(--step--1); color: var(--colour-muted); }
.pref-rz .display__sample-headline { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.2; font-weight: 600; }

.pref-rz .display__choices { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0.5rem; max-inline-size: 35rem; }
.pref-rz .display__choices--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 23.25rem; }
.pref-rz .display__choices .button { justify-content: center; min-block-size: 3rem; padding: 0.25rem 0.75rem; border: 1px solid var(--colour-control); background: var(--colour-surface); color: var(--colour-text); font-size: 0.9375rem; font-weight: 500; text-align: center; }
/* The chosen one: a heavier ink edge and bold words, never colour alone. */
.pref-rz .display__choices .button[aria-pressed="true"],
.pref-rz .display__step--reset[aria-pressed="true"] { border: 2px solid var(--colour-text); background: var(--colour-surface); box-shadow: none; font-weight: 700; }
.pref-rz .display__step:hover,
.pref-rz .display__choices .button:hover { border-color: var(--colour-text); background: var(--colour-wash); }

/* What the control says about the choice and about the last save. Both are empty until there is something to say, and an empty one takes no room. */
.display__state { margin: 0.5rem 0 0; font-size: var(--step--1); color: var(--colour-muted); }
.display__save, .display__failed { margin: 0.375rem 0 0; font-size: var(--step--1); }
.display__save:empty, .display__failed:empty { display: none; }
.display__save { color: var(--colour-muted); font-weight: 600; }
.display__failed { color: var(--colour-danger); font-weight: 600; }
.display__failed .link-button { margin-inline-start: 0.5rem; min-block-size: var(--touch-target); color: inherit; text-decoration: underline; }

/* How lists load: the state, then the quiet button that changes it. */
.pref-rz .toggle-loading { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0; }
.pref-rz .toggle-loading__state { margin: 0; flex-basis: 100%; font-size: var(--step--1); color: var(--colour-muted); }
.pref-rz .toggle-loading .button { min-block-size: 3rem; padding-inline: 1rem; border: 1px solid var(--colour-control); background: var(--colour-surface); color: var(--colour-text); }
.pref-rz .toggle-loading .button:hover { border-color: var(--colour-text); background: var(--colour-wash); }

/* Sections as switches: the hue tile, the name, a square track, and the word for the eye. */
.pref-rz__switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16.25rem, 100%), 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.pref-rz .toggle-hide--switch { display: block; margin: 0; }
.pref-rz .toggle-hide--switch .toggle-hide__state { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pref-rz .toggle-hide--switch .toggle-hide__error { margin: 0 0 0.25rem; font-size: var(--step--1); }
.pref-rz .toggle-hide__switch { display: grid; grid-template-columns: 1rem minmax(0, 1fr) 2.125rem 5.5rem; align-items: center; gap: 0 0.75rem; inline-size: 100%; min-block-size: 3.25rem; padding: 0.25rem 0.875rem; box-sizing: border-box; border: 1px solid var(--colour-control); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); font: inherit; font-size: 1rem; text-align: start; cursor: pointer; }
.pref-rz .toggle-hide__switch:hover { border-color: var(--colour-text); background: var(--colour-wash); }
.pref-rz .toggle-hide__tile { inline-size: 1rem; block-size: 1rem; background: var(--hue); transition: transform 150ms ease-out; }
.pref-rz .toggle-hide__name { min-inline-size: 0; font-weight: 600; overflow-wrap: anywhere; }
.pref-rz .toggle-hide__track { display: flex; align-items: center; justify-content: flex-end; inline-size: 2.125rem; block-size: 1.125rem; box-sizing: border-box; padding-inline: 3px; border: 1.5px solid var(--colour-text); border-radius: 3px; background: var(--colour-surface); }
.pref-rz .toggle-hide__knob { inline-size: 10px; block-size: 10px; border-radius: 1px; background: var(--colour-text); }
.pref-rz .toggle-hide__word { font-size: 0.875rem; font-weight: 500; }
.pref-rz .toggle-hide__switch[aria-checked="false"] .toggle-hide__track { justify-content: flex-start; border-color: var(--colour-control); }
.pref-rz .toggle-hide__switch[aria-checked="false"] .toggle-hide__knob { box-sizing: border-box; border: 1.5px solid var(--colour-control); background: var(--colour-surface); }
.pref-rz .toggle-hide__switch[aria-checked="false"] .toggle-hide__word { font-weight: 700; }
@media (hover: hover) {
    .pref-rz .toggle-hide__switch:hover .toggle-hide__tile { transform: translateY(-2px); }
}
@media (forced-colors: active) {
    .pref-rz .toggle-hide__tile, .pref-rz .toggle-hide__knob { background: CanvasText; }
    .pref-rz .toggle-hide__switch[aria-checked="false"] .toggle-hide__knob { background: Canvas; border-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
    .pref-rz .toggle-hide__tile { transition: none; }
    .pref-rz .toggle-hide__switch:hover .toggle-hide__tile { transform: none; }
}

/* Outlets grouped by country on the preferences page. */
.pref-rz__countries { display: grid; gap: 1.5rem; margin-block-start: 1.25rem; }
.pref-rz__country { display: grid; gap: 0.5rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--colour-hairline); }
.pref-rz__country-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.pref-rz__country-title { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; font-weight: 700; }
.pref-rz__country-title[data-flag]::before { content: attr(data-flag); flex: none; font-size: 1.05rem; line-height: 1; }

/* Elsewhere: the related pages, after a light rule. */
.pref-rz__elsewhere { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 1.5rem; margin-block-start: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); padding-block-start: 1.125rem; border-block-start: 1px solid var(--colour-hairline); font-size: 0.9375rem; }
.pref-rz__elsewhere .mine-rz__label { margin: 0; }
.pref-rz__elsewhere ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.pref-rz__elsewhere a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); }
@media (max-width: 47.999rem) {
    .pref-rz__elsewhere { flex-direction: column; align-items: stretch; }
    .pref-rz__elsewhere ul { flex-direction: column; }
}

/* The language and time pages: the shared form under a rule. */
.pref-rz__form-page .form { max-inline-size: 36rem; margin-block: 1rem 0; }
.pref-rz__form-page .form .button { justify-self: start; min-block-size: 3rem; padding-inline: 1.375rem; font-weight: 700; }

/*
 * The story page as the Rreze story boards draw it (Rreze-Story, Rreze-Story-M). Every rule is
 * scoped under the page's root, `.story`, and the file comes after editorial.css in the reader
 * bundle, so it restyles the page without touching cards, the header or other screens.
 *
 * Sections open under a 3px ink rule with a 13px bold uppercase label; headlines are Newsreader;
 * the one yellow step is "compare the headlines"; everything else is ink on ivory. Each outlet
 * shows its initials in a frame of its own, never a colour of ours, and the earliest report gets
 * the heavier frame and says so in words.
 */

/* The header holds the section and update, the headline and its byline, directly under the hero
   picture. It shares the reading column's measure so the picture, the headline and the text sit in one
   column and the content, not the controls, leads the page; the reader's actions come after the
   reading, not here. */
.story .story__header {
    max-inline-size: 44rem;
    padding-block: 0.875rem 1.5rem;
}

.story .story__context {
    font-size: var(--step--1);
    color: var(--colour-muted);
}

.story .story__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.875rem;
    margin: 0 0 0.625rem;
    font-size: var(--step--1);
}

.story .story__updated {
    color: var(--colour-muted);
}

.story .story__title {
    margin: 0 0 1.25rem;
    font-family: var(--font-serif);
    font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.017em;
    text-wrap: balance;
}

.story .story__byline {
    margin: -0.5rem 0 1rem;
    color: var(--colour-muted);
    font-size: var(--step--1);
}

/* The public credit for an accepted reader suggestion (ADR-0216): a byline-like line in the quiet
   text on a story, outlet or author page, the pseudonymous handle a touch stronger. The handle is
   isolated with <bdi> so a Latin pseudonym reads correctly in the right-to-left edition. */
.suggestion-credit {
    margin-block: 0.25rem 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.suggestion-credit__handle {
    color: var(--colour-text);
    font-weight: 600;
}

/* After the reading, one deliberate control group, never a wall of buttons: our own actions lead —
   the yellow step and Save paired — and the off-site exit is quiet and last. A single light hairline
   over the row sets it apart as "what next" without wearing the 3px instrument rule the secondary
   sections carry, so it reads as the reader's actions, not one more module. The row gap keeps the
   off-site link clear of the pair when they wrap (the mobile E2E pins at least 12px). This is the only
   direct `.story__actions` child of the reading column, so the scope does not reach the share wrapper
   inside the band below. */
.story .story__main > .story__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem 0.75rem;
    margin-block-start: 2.5rem;
    padding-block-start: 1.25rem;
    border-block-start: var(--rule-light) solid var(--colour-hairline);
}

/* The one yellow step (background and ink come from .button): on the desktop a right-sized control,
   where it had sprawled to a full-width slab; on a phone editorial's `.story__actions` rule keeps it
   the full-width primary step on its own line (the story-actions E2E pins that mobile shape). */
.story .story__main > .story__actions .story__coverage-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-block-size: var(--touch-target);
    padding-inline: 1.125rem;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

.story .story__icon {
    flex: none;
}

/* Save: the yellow step's secondary peer, paired beside it — the same height and corner, a solid
   surface with a seen edge (never a hollow outline against the filled step), its icon then its label.
   Both the reader's Save and the guest's sign-in-to-save render the same `.toggle-save` form, so one
   rule styles both. The label shows wherever the row has room. */
.story .story__main > .story__actions .toggle-save .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-block-size: var(--touch-target);
    min-inline-size: var(--touch-target);
    margin: 0;
    padding-inline: 1rem;
    border: var(--rule-light) solid var(--colour-control);
    border-radius: var(--radius);
    background: var(--colour-surface);
    color: var(--colour-text);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.story .story__main > .story__actions .toggle-save .button .icon {
    margin: 0;
}

/* The label wraps rather than pushing the row wide when it flips ("Save" ↔ "Remove from saved"). */
.story .story__main > .story__actions .toggle-save .button span {
    overflow-wrap: break-word;
}

/* On the narrowest screens (and at large text there) the save label is for assistive technology
   only, so the control stays a square icon target that cannot overflow a 320px row (ST07). The
   reader's label is a [data-button-label] span and the guest's is a bare span; both are covered. */
@media (max-width: 21.999rem) {
    .story .story__main > .story__actions .toggle-save .button span {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .story .story__main > .story__actions .toggle-save .button {
        inline-size: var(--touch-target);
        padding-inline: 0;
    }
}

/* The off-site original is attribution and an exit, so it is a quiet link, never a lead action: no
   box, muted and a step lighter than our own controls, its words underlined so it still reads as a
   link and its arrow marking the leave. It never competes with the step and Save beside it. */
.story .story__main > .story__actions .story__original-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-inline-size: 0;
    min-block-size: var(--touch-target);
    color: var(--colour-muted);
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--motion-fast) ease-out;
}

.story .story__main > .story__actions .story__original-link > span:first-child {
    text-decoration: underline;
    text-decoration-color: var(--colour-control);
    text-underline-offset: 0.2em;
}

.story .story__original-arrow {
    flex: none;
}

/* Undo (app.js inserts it after the Save form) takes its own full-width line, after everything
   else in the row, so it never splits the reader's actions from the exit link. */
.story .story__main > .story__actions > .undo {
    order: 9;
    flex-basis: 100%;
    margin: 0;
}

@media (hover: hover) {
    .story .story__main > .story__actions .story__original-link:hover {
        color: var(--colour-text);
    }

    .story .story__main > .story__actions .story__original-link:hover > span:first-child {
        text-decoration-color: currentColor;
    }

    .story .story__main > .story__actions .toggle-save .button:hover {
        background: var(--colour-wash);
        border-color: var(--colour-text);
    }

    .story .story__after-reading [data-share]:hover {
        background: var(--colour-wash);
        border-color: var(--colour-text);
    }
}

.story .story__main > .story__actions .story__coverage-link:active,
.story .story__main > .story__actions .toggle-save .button:active,
.story .story__after-reading [data-share]:active {
    transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
    .story .story__main > .story__actions .story__coverage-link:active,
    .story .story__main > .story__actions .toggle-save .button:active,
    .story .story__after-reading [data-share]:active {
        transform: none;
    }
}

/* On a wider row the off-site exit sits at the end, set apart from the reader's own actions. */
@media (min-width: 30rem) {
    .story .story__main > .story__actions .story__original-link {
        margin-inline-start: auto;
    }
}

@media (min-width: 48rem) {
    .story .story__header {
        padding-block: 1.125rem 2rem;
    }

    .story .story__title {
        margin-block-end: 1.375rem;
    }
}

/* The section stays in the breadcrumb on a phone; the line above the headline keeps only the update. */
@media (max-width: 47.999rem) {
    .story .story__eyebrow .section-label {
        display: none;
    }
}

/* The reading column and, on a wide screen, the side panel at a glance. */
.story .story__layout {
    margin-block-start: 0;
    gap: 2rem;
}

/* The reading column is the hero and reads as one measured text column: paragraphs, the labelled
   summary, the counts line and the notes are held to a comfortable line length, while the picture,
   the coverage grid and the related cards keep the fuller figure width. The cap is on the text
   elements in characters (the serif summary and the sans notes differ in size), so each lands near
   its own comfortable measure against the same left edge. */
.story .story__main {
    max-inline-size: 44rem;
}

/* The model's summary and the publisher's own excerpt are the primary reading, so they take a
   generous serif measure (about 60 characters, comfortably under the 80 a reader tires at). The
   serif at this size carries a longer line than the sans body below it. */
.story .story__what .story__ai-summary > p {
    max-inline-size: 60ch;
}

.story .story__what .story__summary {
    max-inline-size: 62ch;
}

/* The sans body text: the counts line, the "what's new" and "why we can't say more" lists, and the
   caption under the picture, at about sixty-six characters. */
.story .story__part-note,
.story .story__what .story__ai-note,
.story .story__new-list,
.story .story__uncertain ul,
.story .story__main figcaption,
.story > .story-primary-photo figcaption,
.story > .media-gallery figcaption {
    max-inline-size: 66ch;
}

@media (min-width: 64rem) {
    .story .story__layout {
        grid-template-columns: minmax(0, 44rem) minmax(16.5rem, 21rem);
        justify-content: space-between;
        column-gap: 3rem;
    }

    .story .story__side {
        inset-block-start: 1.5rem;
    }
}

/* A section opens under a heavy ink rule with a small uppercase label. */
.story .story__part {
    margin-block-start: 2rem;
    padding-block-start: 0.625rem;
    border-block-start: 3px solid var(--colour-text);
}

.story .story__main > .story__part:first-child {
    margin-block-start: 0;
}

.story .story__part > h2,
.story .story__side-title,
.story .read-next > h2 {
    margin: 0 0 0.75rem;
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.story .story__part-note {
    margin: 0 0 0.875rem;
    color: var(--colour-muted);
    font-size: var(--step--1);
    line-height: 1.5;
    text-wrap: pretty;
}

.story .story__part-note .story__outlets {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

@media (min-width: 48rem) {
    .story .story__part {
        margin-block-start: 3.5rem;
        padding-block-start: 0.6875rem;
    }
}

/* The reading is a designed section led by its content, not prose stripped of chrome (ADR-0243). It
   is a `story__part`, so it regains the 3px instrument rule, and it opens with one strong tracked
   label plus the generated-origin disclosure as a muted caption on the same header row: right on a
   wide screen, stacked under the label on a phone. The content leads because it is the largest, first
   body text under the hero, not because the section lost its identity. */
.story .story__what-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-block-end: 0.75rem;
}

.story .story__what-head > h2 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* The generated-origin caption (ADR-0238): muted and sentence case beside the label. It is drawn
   only with a generated lead, so it never sits over a publisher's words. */
.story .story__what-head > .story__origin {
    margin: 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
    font-weight: 400;
    line-height: 1.4;
}

/* What happened: the model's summary large, labelled, then the first report's own words. */
.story .story__what .story__ai-summary {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.story .story__what .story__ai-summary > p {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.3125rem, 1.15rem + 0.8vw, 1.5rem);
    line-height: 1.5;
    text-wrap: pretty;
}

.story .story__what .story__ai-note {
    margin: 0.875rem 0 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.story .story__what .story__block--publisher {
    margin: 1.25rem 0 0;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--colour-hairline);
}

.story .story__what .story__ai-summary + .story__block--publisher {
    margin-block-start: 1.5rem;
}

.story .story__what .story__what-head + .story__block--publisher {
    margin-block-start: 0;
}

.story .story__what .story__kind {
    color: var(--colour-muted);
    font-size: var(--step--1);
    font-weight: 400;
}

.story .story__what .story__summary {
    margin: 0.25rem 0 0;
    color: var(--colour-text-2);
    font-family: var(--font-serif);
    font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    line-height: 1.5;
}

/* Mosaic's own overview of the event (ADR-0238), above the coverage. It keeps the section's instrument
   rule and tracked label; the "From Mosaic" line is a quiet eyebrow, and the overview reads as serif
   prose on a one-step wash surface so it is plainly ours and distinct from the outlets' linked blocks
   below, never a publisher's words. */
.story .story__synthesis .story__kind--platform {
    margin: 0 0 0.625rem;
    color: var(--colour-muted);
    font-size: var(--step--1);
    font-weight: 400;
}

.story .story__synthesis-body {
    padding: 1rem 1.125rem;
    border: var(--rule-light) solid var(--colour-hairline);
    border-radius: var(--radius);
    background: var(--colour-wash);
    color: var(--colour-text);
    font-family: var(--font-serif);
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    line-height: 1.6;
    text-wrap: pretty;
}

.story .story__synthesis-body > p {
    margin: 0;
    max-inline-size: 62ch;
}

.story .story__synthesis-body > p + p {
    margin-block-start: 0.75rem;
}

.story .story__synthesis .story__ai-note {
    margin: 0.75rem 0 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
}

/* The note that says a piece of generated text is in the story's original language: subtle, so it
   informs without competing with the text it sits under (the lead summary or the synthesis). */
.story .story__original-language {
    margin: 0.5rem 0 0;
    color: var(--colour-muted);
    font-size: var(--step--2);
    font-style: italic;
}

/* The lead picture is the hero: it opens the article above the headline at the full reading-column
   width while the headline and text sit in the same column, so the reading opens on the image. It
   draws nothing when there is no picture, so a text-only story opens on the headline with no empty box. */
.story > .story-primary-photo,
.story > .media-gallery {
    max-inline-size: 44rem;
    margin-block: 0 1.5rem;
}

/* The in-body media (a video or a files block) sits after the summary, set off from it. */
.story .story__main > .story__what + :is(figure, .media-gallery, .story__files, .youtube-video) {
    margin-block-start: 1.875rem;
}

/* Each coverage row's outlet thumbnail (ADR-0238). The Rreze thumb markup is styled on the publisher
   page; the story bundle restyles it here so it does not depend on that stylesheet: a 16:9 box above
   the outlet name and digest, the image cover-fit and the blurhash held behind it, at a modest width.
   A reader who has turned pictures off hides it through editorial.css's .look-pictures-off rule. */
.story .timeline__body .rreze-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    inline-size: 100%;
    max-inline-size: 12rem;
    margin-block-end: 0.75rem;
    border-radius: 2px;
    background: var(--colour-placeholder);
}

.story .timeline__body .rreze-thumb--16x9 {
    aspect-ratio: 16 / 9;
}

.story .timeline__body .rreze-thumb .card__picture,
.story .timeline__body .rreze-thumb img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.story .timeline__body .rreze-thumb .card__blurhash {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* How they headlined it: a row per report, two columns on a wide screen. */
@media (min-width: 64rem) {
    .story .story__coverage {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 1rem;
        align-items: baseline;
    }

    .story .story__coverage > * {
        grid-column: 1 / -1;
    }

    .story .story__coverage > h2 {
        grid-column: 1;
    }

    .story .story__coverage > h2 + .story__part-note {
        grid-column: 2;
    }
}

.story .story__coverage .story__outlet-nav {
    margin-block: 0 0.75rem;
}

/* Where the outlets covering this story publish from (ADR-0243, ADR-0250): a strip of one place
   mark per distinct outlet, then the named country counts in descending outlet order. */
.story .story__coverage .story__places {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin-block: 0 0.75rem;
    font-size: var(--step--1);
}

.story .story__coverage .story__places-strip {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.story .story__coverage .story__places-strip .place-mark {
    inline-size: 0.875rem;
    block-size: 0.875rem;
}

.story .story__coverage .story__places-list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.story .story__coverage .story__places-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--colour-text-2);
}

.story .story__coverage .story__places-count {
    color: var(--colour-muted);
    font-variant-numeric: tabular-nums;
}

.story .story__coverage .timeline__place {
    display: inline-flex;
    align-items: center;
    color: var(--colour-muted);
    font-weight: 400;
}

.story .story__coverage .story__outlet-nav a {
    border-color: var(--colour-control);
    background: var(--colour-surface);
    color: var(--colour-text);
    font-weight: 600;
    text-decoration: none;
}

.story .story__coverage .story__coverage-controls {
    margin-block: 0 0.5rem;
    font-size: var(--step--1);
}

/* The order and outlet choices stay one compact row on a wide screen. */
@media (min-width: 64rem) {
    .story .story__coverage .story__coverage-controls {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: end;
    }

    .story .story__coverage .story__coverage-control-actions {
        grid-column: auto;
    }
}

.story .story__coverage .timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));
    column-gap: 2.5rem;
    margin: 0.5rem 0 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.story .story__coverage .timeline__item {
    min-inline-size: 0;
    padding: 0.875rem 0;
    border-block-end: var(--rule-light) solid var(--colour-hairline);
}

.story .story__coverage .timeline__item::before {
    content: none;
}

.story .story__coverage .timeline__item:last-child {
    border-block-end: var(--rule-light) solid var(--colour-hairline);
}

.story .story__coverage .timeline__item > article {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0 0.875rem;
    align-items: start;
}

.story .story__coverage .timeline__body {
    grid-column: 2;
    grid-row: 1;
    min-inline-size: 0;
}

.story .story__stamp {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin-block-start: 0.25rem;
    box-sizing: border-box;
    border: var(--rule-light) solid var(--colour-control);
    border-radius: 3px;
    background: var(--colour-surface);
    color: var(--colour-text);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.story .story__stamp--first {
    border: 2px solid var(--colour-text);
}

.story .story__stamp--favicon {
    position: relative;
    overflow: hidden;
}

.story .story__stamp--favicon img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    padding: 3px;
    box-sizing: border-box;
    object-fit: contain;
    background: var(--colour-surface);
    opacity: 0;
}

.story .story__stamp--favicon img.card__pixels--ready:not(.card__pixels--unavailable) {
    opacity: 1;
}

.story .story__coverage .timeline__source {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.375rem;
    margin: 0 0 0.125rem;
    font-size: var(--step--1);
    line-height: 1.4;
}

.story .story__coverage .timeline__source > a:first-child {
    color: var(--colour-text);
    font-weight: 700;
    text-decoration: none;
}

.story .story__coverage .timeline__source > a:first-child:hover {
    text-decoration: underline;
}

.story .story__coverage .timeline__when {
    color: var(--colour-muted);
}

.story .story__coverage .timeline__basis {
    display: inline;
    font-size: var(--step--2);
}

.story .story__coverage .timeline__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.1875rem, 1.12rem + 0.3vw, 1.3125rem);
    font-weight: 600;
    line-height: 1.25;
}

.story .story__coverage .timeline__translated {
    margin: 0.25rem 0 0;
    color: var(--colour-text-2);
    font-size: var(--step--1);
    line-height: 1.45;
}

.story .story__coverage .timeline__published,
.story .story__coverage .timeline__note {
    margin: 0.3125rem 0 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.story .story__coverage .timeline__note a {
    color: inherit;
}

.story .story__coverage .timeline__note .badge {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

.story .story__coverage .timeline__excerpt {
    margin: 0.375rem 0 0;
    color: var(--colour-text-2);
    font-size: 0.9375rem;
}

/* How an outlet's own digest was made (ADR-0238): a quiet, secondary line under the digest, smaller
   than the digest so it labels without competing with it. */
.story .story__coverage .timeline__source-note {
    margin: 0.25rem 0 0;
    color: var(--colour-muted);
    font-size: var(--step--2);
    line-height: 1.4;
}

.story .story__coverage > .story__note {
    margin: 1.125rem 0 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
    text-wrap: pretty;
}

.story .story__coverage > .story__note a {
    color: inherit;
}

/* The method note, closed, between the coverage and the reader's own actions. */
.story .story__method {
    margin-block-start: 2rem;
}

/* After reading: the vote, sharing, following and a way to speak back, in one band. */
.story .story__after-reading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem 1.5rem;
    margin-block-start: 2rem;
    padding-block: 1.125rem;
    border-block: var(--rule-light) solid var(--colour-hairline);
}

.story .story__after-reading .vote-block {
    margin: 0;
}

/* The reader's controls after the reading read as one family: Vote, Share and Follow share the same
   corner, hairline edge and 44px target as Save in the header. The vote takes the family's radius
   here instead of the compact pill it keeps on cards (the shared base in votes.css is untouched, so
   cards, listings and Your space are unchanged); it keeps its own pressed accent and focus ring. */
.story .story__after-reading .vote__button {
    border-radius: var(--radius);
}

.story .story__after-reading [data-share] {
    border: var(--rule-light) solid var(--colour-control);
    border-radius: var(--radius);
    background: var(--colour-surface);
    color: var(--colour-text);
    font-weight: 600;
}

.story .story__after-reading [data-share][hidden] {
    display: none;
}

/* Share says its name beside the icon (the boards' "Ndajeni") wherever the row has room; on the
   narrowest screens, and at large text sizes there, it stays the compact icon target, still named. */
@media (min-width: 22rem) {
    .story .story__after-reading [data-share] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        inline-size: auto;
        padding: 0 1rem;
    }

    .story .story__after-reading [data-share] [data-button-label] {
        position: static;
        inline-size: auto;
        block-size: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
        white-space: normal;
    }
}

.story .story__after-reading .story__follow,
.story .story__after-reading .story__speak {
    flex-basis: 100%;
    margin: 0;
}

.story .story__after-reading .story__follow h2 {
    margin: 0 0 0.25rem;
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.story .story__after-reading .story__follow > p {
    margin: 0 0 0.625rem;
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.story .story__after-reading .story__follow-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.story .story__after-reading .story__speak {
    font-size: var(--step--1);
}

.story .story__after-reading .story__speak a {
    color: var(--colour-muted);
}

@media (min-width: 48rem) {
    .story .story__after-reading {
        margin-block-start: 3.25rem;
        padding-block: 1.375rem;
    }
}

/* Next in the briefing: a surface panel, the next headline beside its picture. */
.story .briefing-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "position" "title" "action";
    margin-block-start: 1.75rem;
    max-inline-size: none;
    /* Pixels on a phone, as the board draws it: at large text sizes the words keep the width. */
    padding: 22px 20px;
    border-color: var(--colour-hairline);
    border-radius: var(--radius);
}

.story .briefing-next--with-image {
    grid-template-columns: minmax(0, 1fr) 9rem;
    grid-template-areas: "label image" "position image" "title image" "action action";
    column-gap: 0.875rem;
}

.story .briefing-next__image {
    grid-area: image;
    float: none;
    inline-size: auto;
    margin: 0;
}

.story .briefing-next__label {
    grid-area: label;
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.story .briefing-next__position {
    grid-area: position;
}

.story .briefing-next__title {
    grid-area: title;
    margin-block-end: 1rem;
    font-size: clamp(1.625rem, 1.4rem + 0.9vw, 1.875rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* A block on a phone, so the label wraps between words at large text sizes; a flex row only
   where it has room. */
.story .briefing-next__action {
    grid-area: action;
    display: block;
    min-block-size: 3.25rem;
    padding: 12px clamp(12px, 3vw, 16px);
    border-radius: var(--radius);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-decoration: none;
}

@media (min-width: 48rem) {
    .story .briefing-next {
        margin-block-start: 2.75rem;
        padding: 1.75rem 2rem;
    }

    .story .briefing-next--with-image {
        grid-template-columns: minmax(0, 1fr) 12rem;
        column-gap: 1.375rem;
    }

    .story .briefing-next__action {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        justify-self: start;
        min-block-size: 3.125rem;
        margin-block-start: 0.25rem;
        padding-block: 0;
        padding-inline: 1.5rem;
    }
}

/* What to read next and the related stories: sections like the rest. */
.story .read-next {
    margin-block-start: 2rem;
    padding-block-start: 0.625rem;
    border-block-start: 3px solid var(--colour-text);
}

.story .story__related .muted {
    margin: 0.75rem 0 0.25rem;
    font-size: var(--step--1);
}

@media (min-width: 48rem) {
    .story .read-next {
        margin-block-start: 3.25rem;
    }
}

/* The side panel at a glance: label, the earliest report and the times as rows, then the readers. */
.story .story__side {
    gap: 0;
    min-inline-size: 0;
}

.story .story__side-title {
    margin: 0;
    padding-block: 0.6875rem 0.25rem;
    border-block-start: 3px solid var(--colour-text);
}

.story .story__glance {
    min-inline-size: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.story .story__glance .story__first {
    padding-block: 0.875rem;
    border-block-end: var(--rule-light) solid var(--colour-hairline);
}

.story .story__glance .story__first h2,
.story .story__glance .story__times dt {
    margin: 0;
    color: var(--colour-muted);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.story .story__glance .story__first p {
    margin: 0.1875rem 0 0;
    font-weight: 600;
}

.story .story__glance .story__first .story__label-links {
    font-size: var(--step--1);
    font-weight: 400;
}

.story .story__glance .story__times {
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.story .story__glance .story__times > div {
    padding-block: 0.875rem;
    border-block-end: var(--rule-light) solid var(--colour-hairline);
}

.story .story__glance .story__times dd {
    margin: 0.1875rem 0 0;
    font-weight: 600;
}

.story .story__glance .story__together {
    display: grid;
    gap: 0;
    margin: 0.375rem 0 0;
    font-size: var(--step--1);
    line-height: 1.6;
}

/* How the public score formed (ADR-0220): a researched, reproducible number with factors that add
   up, or the honest "not enough data yet" state said in words. The pending label is an outlined ink
   chip, never a colour or an invented number, matching the initial-assessment panel (rreze-assessment). */
.story .story__glance .story__formation {
    padding-block: 0.875rem 1rem;
    border-block-end: var(--rule-light) solid var(--colour-hairline);
}

.story .story__glance .story__formation h2 {
    margin: 0;
    color: var(--colour-muted);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.story .story__score {
    margin: 0.25rem 0 0;
    line-height: 0.9;
}

.story .story__score-number {
    font-family: var(--font-serif);
    font-size: clamp(2.75rem, 7vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.story .story__score-unit {
    margin-inline-start: 0.25rem;
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.story .story__score-fades {
    margin: 0.5rem 0 0;
    color: var(--colour-text-2);
    font-size: var(--step--1);
    line-height: 1.5;
}

.story .story__score-factors {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

/* A factor is a small row: its name and points, then its proportional meter, then the fact it
   rests on. A hairline separates the rows so the meters read as a sequence that adds up. */
.story .story__score-factor {
    padding-block: 0.4375rem;
    border-block-start: var(--rule-light) solid var(--colour-hairline);
    font-size: var(--step--1);
}

.story .story__score-factor:first-child {
    border-block-start: 0;
    padding-block-start: 0;
}

.story .story__score-factor-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 1rem;
}

.story .story__score-points {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The meter: a track the width of the total, the factor's slice filled at its place in the running
   sum, so reading down the slices march to the full width — the hero number. One ink tone on a quiet
   wash keeps it calm and monochrome; the yellow stays reserved for the next-step action. The fill is
   a percentage of the total in a 0–100 SVG viewBox, so it needs no inline style under the CSP. */
.story .story__score-meter {
    display: block;
    block-size: 0.25rem;
    margin-block-start: 0.4375rem;
    border-radius: 0.125rem;
    background: var(--colour-wash);
    overflow: hidden;
}

.story .story__score-meter-svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.story .story__score-meter-fill {
    fill: var(--colour-text);
}

/* A factor with no data yet: an empty dashed track, visibly present but not counted. */
.story .story__score-meter--pending {
    background: none;
    border: var(--rule-light) dashed var(--colour-control);
    box-sizing: border-box;
}

.story .story__score-fact {
    display: block;
    margin-block-start: 0.3125rem;
    color: var(--colour-muted);
}

.story .story__score-factor--pending .story__score-factor-name {
    color: var(--colour-muted);
}

/* The flip of the meter for a right-to-left reading (fa): the slices fill from the right, since SVG
   geometry does not mirror with the writing direction. */
[dir="rtl"] .story .story__score-meter-svg {
    transform: scaleX(-1);
}

.story .story__score-pending {
    display: inline-block;
    padding: 0 0.5rem;
    border: var(--rule-light) solid var(--colour-control);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--colour-text);
}

.story .story__score-pending-lead {
    margin: 0.375rem 0 0;
    font-weight: 600;
}

.story .story__score-pending-body {
    margin: 0.5rem 0 0;
    color: var(--colour-text-2);
    font-size: var(--step--1);
    line-height: 1.55;
}

.story .story__score-method {
    margin: 0.625rem 0 0;
    font-size: var(--step--1);
}

@media (prefers-reduced-motion: reduce) {
    .story .story__main > .story__actions .story__original-link {
        transition: none;
    }
}

/* Entities linked inside the model's summary (the "Linked names" request). The marking is subtle,
   so readability is not harmed, and never rests on colour alone: a thin dotted underline carries it,
   solid on hover or keyboard focus. First mention only and a bounded count keep the density low. */
.story .story__ai-summary .story__mention {
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--colour-muted);
}
.story .story__ai-summary .story__mention:hover,
.story .story__ai-summary .story__mention:focus-visible {
    text-decoration-style: solid;
    text-decoration-color: currentColor;
}

@media (forced-colors: active) {
    .story .story__stamp,
    .story .story__main > .story__actions .toggle-save .button,
    .story .story__after-reading [data-share] {
        border-color: CanvasText;
    }
    /* The score meter's fill and empty track stay visible when the system paints its own colours. */
    .story .story__score-meter-fill {
        fill: CanvasText;
    }
    /* Keep the link distinguishable where the system paints links its own colour. */
    .story .story__ai-summary .story__mention {
        text-decoration-color: LinkText;
    }
}

/*
 * The publisher page of the Rreze boards (Rreze-Publisher, Rreze-Publisher-M): reader/_rreze_source
 * and its partials. Ink on ivory; the one yellow thing is the next step (follow, or sign in to
 * follow). The publisher keeps its own logo in a neutral frame, never a colour of ours.
 */

/* The page is wider than a reading column: a main column of articles and an aside. */
.app-content:has(> .rreze-source) { max-inline-size: calc(75rem + 2 * var(--gutter)); }

.rreze-source { padding-block-end: var(--space-6); }

.rreze-source__trail { padding-block-start: 1.25rem; font-size: 0.875rem; color: var(--colour-muted); }
.rreze-source__trail ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; margin: 0; padding: 0; list-style: none; }
.rreze-source__trail a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); color: var(--colour-muted); }
.rreze-source__trail [aria-current] { overflow-wrap: anywhere; }

.rreze-source__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem 3rem; padding-block: 1.25rem 2rem; }
.rreze-source__identity { flex: 1 1 25rem; min-inline-size: 0; display: flex; align-items: flex-start; gap: 0 1.5rem; }
.rreze-source__identity > .subject-mark { inline-size: 4.5rem; block-size: 4.5rem; border: 1px solid var(--colour-control); border-radius: 3px; background: var(--colour-surface); color: var(--colour-text); font-family: var(--font-serif); font-size: 1.875rem; font-weight: 700; letter-spacing: -0.01em; }
.rreze-source__identity > .subject-mark--logo { inline-size: 9rem; }
.rreze-source__identity > .subject-mark--logo .subject-mark__initials { font-size: 1.875rem; color: var(--colour-text); }
.rreze-source__intro { min-inline-size: 0; }
.rreze-source__name { margin: 0 0 0.625rem; font-family: var(--font-serif); font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1.03; font-weight: 600; letter-spacing: -0.018em; overflow-wrap: anywhere; text-wrap: balance; }
.rreze-source__lead { margin: 0 0 0.5rem; max-inline-size: 62ch; font-size: 1.0625rem; color: var(--colour-text-2); }
.rreze-source__facts { margin: 0; font-size: 0.875rem; color: var(--colour-muted); }
.rreze-source__place { white-space: nowrap; }
.rreze-source__audience { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--colour-muted); }

.rreze-source__actions { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.375rem; }
.rreze-source__actions .toggle-follow { margin: 0; }
.rreze-source__follow,
.rreze-source__actions .toggle-follow .button:not(.button--quiet) { display: inline-flex; align-items: center; justify-content: center; gap: 0.5625rem; min-block-size: 3rem; max-inline-size: 100%; padding: 0.375rem 1.375rem; box-sizing: border-box; border: 1px solid var(--colour-action); border-radius: var(--radius); background: var(--colour-action); color: var(--colour-action-text); font-size: 1rem; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.rreze-source__actions .toggle-follow .button--quiet,
.rreze-source__website,
.rreze-source__button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5625rem; min-block-size: 3rem; max-inline-size: 100%; padding: 0.375rem 1.125rem; box-sizing: border-box; border: 1px solid var(--colour-control); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); font-size: 1rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.rreze-source__button { padding-inline: 1.375rem; }
.rreze-source__follow svg, .rreze-source__website svg { flex: none; }
.rreze-source__follow:active, .rreze-source__website:active, .rreze-source__button:active { transform: translateY(1px); }
@media (hover: hover) {
    .rreze-source__follow:hover { background: var(--colour-action-hover); }
    .rreze-source__website:hover, .rreze-source__button:hover { border-color: var(--colour-text); background: var(--colour-wash); }
}

@media (forced-colors: active) {
    .rreze-source__follow,
    .rreze-source__actions .toggle-follow .button:not(.button--quiet) {
        background: ButtonFace;
        color: ButtonText;
        border-color: ButtonText;
    }
}

.rreze-source__columns { display: flex; flex-wrap: wrap; gap: 3rem 3.5rem; }
.rreze-source__main { flex: 999 1 38.75rem; min-inline-size: 0; }
.rreze-source--more .rreze-source__main { max-inline-size: 51.25rem; }
.rreze-source__aside { flex: 1 1 18.75rem; min-inline-size: 0; }
.rreze-source__section + .rreze-source__section { margin-block-start: 0; }
.rreze-source__aside .rreze-source__section + .rreze-source__section { margin-block-start: 2.75rem; }

/* Section labels: 13px bold capitals under a 3px ink rule, as on every Rreze board. */
.rreze-source__rule { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; border-block-start: 3px solid var(--colour-text); padding-block: 0.6875rem 1.25rem; }
.rreze-source__label { margin: 0; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rreze-source__note { display: inline-flex; align-items: center; gap: 0.4375rem; margin: 0; font-size: 0.875rem; color: var(--colour-muted); }
.rreze-source__external { flex: none; }

/* A publisher's article: the headline opens it at the publisher, over the whole item; the story it is part of sits above. */
.rreze-article { position: relative; }
.rreze-article__link { color: inherit; text-decoration: none; }
.rreze-article__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.rreze-article__up, .rreze-article .section-label { position: relative; z-index: 2; }
.rreze-article__up { color: var(--colour-text-2); }
.rreze-article__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.875rem; }
.rreze-article .section-label { font-size: 0.875rem; }
.rreze-source__list .rreze-article__kicker { margin-block-end: 0.125rem; }
.rreze-article__title { margin: 0; font-family: var(--font-serif); font-weight: 600; overflow-wrap: anywhere; }
.rreze-article__kicker, .rreze-article__story, .rreze-article__coverage { margin: 0; font-size: 0.875rem; color: var(--colour-muted); }
.rreze-article__coverage b { font-weight: 700; color: var(--colour-text); }
/* The genre label (sponsored, press release, analysis…) sits on its own line above the headline. */
.rreze-article__genre { margin-block: 0 0.5rem; }
.rreze-source__list .rreze-article__genre { margin-block-end: 0.375rem; }
@media (hover: hover) {
    .rreze-article:hover .rreze-article__link { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; }
    .rreze-article:hover .rreze-thumb { opacity: 0.86; }
}

.rreze-article--lead { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; padding-block-end: 2.125rem; }
.rreze-article--lead .rreze-article__text { flex: 9 1 17.5rem; min-inline-size: 0; display: flex; flex-direction: column; }
.rreze-article--lead .rreze-thumb { flex: 11 1 21.25rem; min-inline-size: 0; align-self: flex-start; order: -1; }
.rreze-article--lead .rreze-article__kicker { margin-block-end: 0.625rem; }
.rreze-article--lead .rreze-article__title { margin-block-end: 1rem; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.125rem); line-height: 1.1; letter-spacing: -0.012em; text-wrap: balance; }
.rreze-article--lead .rreze-article__foot { margin-block-start: auto; padding-block-start: 0.875rem; border-block-start: 1px solid var(--colour-hairline); }
.rreze-article--lead .rreze-article__story { margin-block-end: 0.625rem; }

.rreze-source__list { margin: 0; padding: 0; list-style: none; }
.rreze-source__list > li { border-block-end: 1px solid var(--colour-hairline); }
.rreze-source__list .rreze-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.375rem; align-items: start; padding-block: 1.25rem; }
.rreze-source__list .rreze-article--picture { grid-template-columns: minmax(0, 1fr) 10rem; }
.rreze-source__list .rreze-article__title { margin-block-end: 0.5rem; font-size: 1.375rem; line-height: 1.2; text-wrap: pretty; }
.rreze-source__more { margin: 1.5rem 0 0; }

/* Pictures keep a fixed ratio and draw no box when the original has none. */
.rreze-thumb { position: relative; display: block; overflow: hidden; border-radius: 2px; background: var(--colour-placeholder); transition: opacity 0.12s ease-out; }
.rreze-thumb--16x9 { aspect-ratio: 16 / 9; }
.rreze-thumb--3x2 { aspect-ratio: 3 / 2; }
.rreze-thumb--1x1 { aspect-ratio: 1 / 1; }
.rreze-thumb .card__picture, .rreze-thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.rreze-thumb .card__blurhash { position: absolute; inset: 0; pointer-events: none; color: transparent; }
@media (prefers-reduced-motion: reduce) { .rreze-thumb { transition: none; } }

/* What Mosaic found about the publisher's week. */
.rreze-source__earliest { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0 0.75rem; align-items: start; margin: 0 0 0.25rem; font-size: 0.875rem; color: var(--colour-text-2); }
.rreze-source__earliest b { font-weight: 700; color: var(--colour-text); }
.rreze-source__stamp .subject-mark { inline-size: 2rem; block-size: 2rem; box-sizing: border-box; border: 2px solid var(--colour-text); border-radius: 3px; background: var(--colour-surface); color: var(--colour-text); font-family: var(--font-serif); font-size: 0.8125rem; font-weight: 700; }
.rreze-source__stamp .subject-mark--logo .subject-mark__initials { font-size: 0.8125rem; color: var(--colour-text); }
.rreze-source__caveat { margin: 0.625rem 0 0; font-size: 0.875rem; color: var(--colour-muted); }
.rreze-source__earliest-list { margin: 0.625rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; display: grid; gap: 0.375rem; }
.rreze-source__earliest-list li { padding-inline-start: 0.75rem; border-inline-start: 2px solid var(--colour-hairline); }
.rreze-source__earliest-list a { color: var(--colour-text); font-weight: 500; text-decoration: none; }
.rreze-source__earliest-list a:hover, .rreze-source__earliest-list a:focus-visible { text-decoration: underline; text-underline-offset: 0.16em; }
.rreze-source__method { margin: 0.375rem 0 0; font-size: 0.8125rem; }
.rreze-source__method a { color: var(--colour-text-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.rreze-source__categories { margin: 0; padding: 0; list-style: none; font-size: 0.875rem; display: grid; gap: 0.375rem; }
.rreze-source__categories li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding-block: 0.25rem; border-block-end: 1px solid var(--colour-hairline); }
.rreze-source__categories li:last-child { border-block-end: 0; }
.rreze-source__categories a { color: var(--colour-text); font-weight: 500; text-decoration: none; }
.rreze-source__categories a:hover, .rreze-source__categories a:focus-visible { text-decoration: underline; text-underline-offset: 0.16em; }
.rreze-source__category-count { color: var(--colour-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.rreze-source__more-about { margin: 2.25rem 0 0; padding: 1rem 0 0; border-block-start: 1px solid var(--colour-hairline); list-style: none; font-size: 0.9375rem; }
.rreze-source__aside > .rreze-source__more-about:first-child { margin-block-start: 0; }
.rreze-source__more-about .toggle-hide { margin: 0; }
.rreze-source__more-about .toggle-hide .button, .rreze-source__more-link { display: inline-flex; align-items: center; min-block-size: var(--touch-target); padding: 0; border: 0; background: none; color: var(--colour-text-2); font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.rreze-source__more-about .toggle-hide__state { margin: 0; font-size: 0.875rem; color: var(--colour-muted); }

/* A phone: the mark beside the name, the next step across the whole width. */
@media (max-width: 40rem) {
    .rreze-source__trail { padding-block-start: 0.25rem; }
    .rreze-source__header { display: block; padding-block: 0.5rem 1.75rem; }
    .rreze-source__identity { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 0.875rem; }
    .rreze-source__identity > .subject-mark { inline-size: 3.5rem; block-size: 3.5rem; font-size: 1.5rem; }
    .rreze-source__identity > .subject-mark--logo { inline-size: 7rem; }
    .rreze-source__intro { display: contents; }
    .rreze-source__name { margin: 0; font-size: 2.125rem; line-height: 1.05; letter-spacing: -0.016em; }
    .rreze-source__lead, .rreze-source__facts, .rreze-source__audience { grid-column: 1 / -1; }
    .rreze-source__lead { margin: 0.875rem 0 0.375rem; font-size: 1rem; }
    .rreze-source__actions { display: grid; gap: 0.5rem; margin-block-start: 1.125rem; }
    .rreze-source__follow, .rreze-source__actions .toggle-follow .button, .rreze-source__website { inline-size: 100%; }
    .rreze-source__follow, .rreze-source__actions .toggle-follow .button:not(.button--quiet) { font-size: 1.0625rem; }
    .rreze-source__columns { display: block; }
    .rreze-source__main > * + * { margin-block-start: 1.5rem; }
    .rreze-source__aside { margin-block-start: 2.25rem; }
    .rreze-source__rule { padding-block: 0.625rem 0.875rem; }
    .rreze-article--lead { flex-direction: column; gap: 0; padding-block-end: 0.25rem; }
    .rreze-article--lead .rreze-article__text, .rreze-article--lead .rreze-thumb { flex: none; }
    .rreze-article--lead .rreze-thumb { inline-size: 100%; margin-block-end: 0.875rem; }
    .rreze-source__main > .rreze-source__section + .rreze-source__section { margin-block-start: 1.5rem; }
    .rreze-article--lead .rreze-article__title { margin: 0; font-size: 1.75rem; }
    .rreze-article--lead .rreze-article__foot { margin-block-start: 0.375rem; padding: 0; border: 0; }
    .rreze-source__list .rreze-article { gap: 0 0.875rem; padding-block: 1rem 0.25rem; }
    .rreze-source__list .rreze-article--picture { grid-template-columns: minmax(0, 1fr) 7.5rem; }
    .rreze-source__list .rreze-article__title { margin: 0; font-size: 1.25rem; line-height: 1.22; }
    .rreze-source__list .rreze-article__text { display: contents; }
    .rreze-source__list .rreze-article__head { grid-area: 1 / 1; }
    .rreze-source__list .rreze-thumb { grid-area: 1 / 2; }
    .rreze-source__list .rreze-article__foot { grid-area: 2 / 1 / 3 / -1; }
    .rreze-article__story { margin-block-start: 0.375rem; padding-block: 0.5rem; line-height: 1.5; }
    .rreze-article__up { padding-block: 0.5rem; }
    .rreze-source__more { margin-block-start: 1rem; }
    .rreze-source__button { inline-size: 100%; }
    .rreze-source__more-about { margin-block-start: 1.75rem; padding-block-start: 0.5rem; }
}

/*
 * An initial assessment (ENG-03, ADR-0165) in the aside of a publisher's or a creator's page:
 * quality and quantity as two answers, a pending one said in words in an outlined ink label, never
 * a colour or an invented number.
 */
.rreze-assessment__facts { margin: 0; }
.rreze-assessment__fact { padding-block: 0.625rem; border-block-end: 1px solid var(--colour-hairline); }
.rreze-assessment__fact dt { font-size: 0.875rem; font-weight: 700; overflow-wrap: anywhere; }
.rreze-assessment__fact dd { margin: 0.25rem 0 0; font-size: 0.9375rem; color: var(--colour-text-2); overflow-wrap: anywhere; }
.rreze-assessment__pending { display: inline-block; margin-inline-end: 0.375rem; padding: 0 0.5rem; border: 1px solid var(--colour-control); border-radius: var(--radius); font-size: 0.8125rem; font-weight: 700; color: var(--colour-text); }
.rreze-assessment__dimensions { margin: 0; padding: 0; list-style: none; }
.rreze-assessment__dimensions li + li { margin-block-start: 0.25rem; }
.rreze-assessment__meta { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--colour-muted); }
/* The publisher quality rating (ADR-0226): neutral ink only, never a hue. */
.rreze-assessment__rating { margin: 0 0 0.5rem; }
.rreze-assessment__score { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--colour-text); }
.rreze-assessment__review { margin-inline-start: 0.375rem; font-size: 0.875rem; font-weight: 400; color: var(--colour-muted); }
.rreze-assessment__response { margin-block-start: 0.5rem; padding-inline-start: 0.625rem; border-inline-start: 2px solid var(--colour-hairline); overflow-wrap: anywhere; }
.rreze-assessment__response-title { margin: 0 0 0.25rem; font-size: 0.8125rem; font-weight: 700; color: var(--colour-text); }

/*
 * A creator's page and the creators directory (ADR-0164) are drawn as a publisher: the same trail,
 * header, ruled sections and rows. A person gets no colour of ours; initials sit in the same
 * neutral frame. Their channels are the next step, each a quiet outlined button.
 */
.rreze-creator__kind { margin: 0 0 0.375rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--colour-muted); overflow-wrap: anywhere; }
.rreze-creator__identity--verified { font-weight: 700; color: var(--colour-text); }
.rreze-creator__channels { margin-block-end: 0; padding: 0; list-style: none; }
.rreze-creator__channels li { display: contents; }
.rreze-creator__text { margin: 0 0 0.625rem; font-size: 0.9375rem; color: var(--colour-text-2); overflow-wrap: anywhere; }
.rreze-creator__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-block-start: 1.5rem; }
.rreze-creator__pager a:not(.rreze-source__button) { display: inline-flex; align-items: center; min-block-size: var(--touch-target); }
.rreze-creator__row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 0 1rem; align-items: center; min-block-size: var(--touch-target); padding-block: 0.875rem; color: inherit; text-decoration: none; }
.rreze-creator__row > .subject-mark { inline-size: 2.5rem; block-size: 2.5rem; box-sizing: border-box; border: 1px solid var(--colour-control); border-radius: 3px; background: var(--colour-surface); color: var(--colour-text); font-family: var(--font-serif); font-size: 0.9375rem; font-weight: 700; }
.rreze-creator__row-name { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; overflow-wrap: anywhere; }
.rreze-creator__row-state { font-size: 0.875rem; color: var(--colour-muted); }
@media (hover: hover) {
    .rreze-creator__row:hover .rreze-creator__row-name { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; }
}

/* A phone: the channels one under another, the directory's state under the name. */
@media (max-width: 40rem) {
    .rreze-creator .rreze-source__identity > .subject-mark { grid-row: 1 / span 2; }
    .rreze-creator__kind, .rreze-creator .rreze-source__name { grid-column: 2; min-inline-size: 0; }
    .rreze-creator__channels { display: grid; }
    .rreze-creator__row { grid-template-columns: 2.5rem minmax(0, 1fr); }
    .rreze-creator__row-state { grid-column: 2; }
}

/*
 * Search as the Rreze boards draw it (Rreze-Search, Rreze-Search-M): templates/search. The question
 * is the heading, the field is large, and the one yellow thing is "Kërkoni". The stories found sit in
 * a main column; finding a story from a link and the searches kept on this device sit beside them.
 */

/* Search is wider than a reading column: results and an aside. */
.app-content:has(> .rreze-search) { max-inline-size: calc(75rem + 2 * var(--gutter)); }

.rreze-search { padding-block: 2.5rem var(--space-6); }
.rreze-search__title { margin: 0 0 1rem; overflow-wrap: anywhere; font-family: var(--font-serif); font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.014em; }
.rreze-search__title label { cursor: text; }

.rreze-search__form { max-inline-size: 48.75rem; margin: 0; }
.rreze-search__box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-block-size: 4rem; padding: 0.375rem 0.375rem 0.375rem 1.125rem; box-sizing: border-box; border: 2px solid var(--colour-text); border-radius: var(--radius); background: var(--colour-surface); }
.rreze-search__box:focus-within { outline: 3px solid var(--colour-focus); outline-offset: 2px; }
.rreze-search__icon { flex: none; color: var(--colour-muted); }
.rreze-search__input { flex: 1 1 8rem; min-inline-size: 0; min-block-size: 3rem; padding: 0 0.5rem; border: 0; background: none; color: var(--colour-text); font-family: var(--font-serif); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 500; appearance: none; }
.rreze-search__input::-webkit-search-cancel-button { appearance: none; }
.rreze-search__clear { flex: none; display: grid; place-items: center; inline-size: var(--touch-target); block-size: var(--touch-target); border-radius: var(--radius); color: var(--colour-muted); }
.rreze-search__submit { flex: none; display: inline-flex; align-items: center; justify-content: center; max-inline-size: 100%; min-block-size: 3rem; padding: 0 1.625rem; box-sizing: border-box; border: 1px solid var(--colour-action-edge); border-radius: var(--radius); background: var(--colour-action); color: var(--colour-action-text); font: inherit; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; cursor: pointer; }
.rreze-search__button { display: inline-flex; align-items: center; justify-content: center; max-inline-size: 100%; min-block-size: 3rem; padding: 0 1.375rem; box-sizing: border-box; border: 1px solid var(--colour-control); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.rreze-search__submit:active, .rreze-search__button:active { transform: translateY(1px); }
@media (hover: hover) {
    .rreze-search__submit:hover { background: var(--colour-action-hover); }
    .rreze-search__button:hover, .rreze-search__clear:hover { border-color: var(--colour-text); background: var(--colour-wash); }
}

.rreze-search__suggestions:has(li) { margin-block-start: 0.5rem; padding: 0.25rem 0; border: 1px solid var(--colour-hairline); border-radius: var(--radius); background: var(--colour-surface); }
.rreze-search__suggestions .search__suggestion-list { margin: 0; padding: 0; list-style: none; }
.rreze-search__suggestions .search__suggestion-list a { display: flex; align-items: center; min-block-size: var(--touch-target); padding: 0 1rem; color: var(--colour-text); text-decoration: none; }
@media (hover: hover) { .rreze-search__suggestions .search__suggestion-list a:hover { background: var(--colour-wash); text-decoration: underline; } }

.rreze-search__count { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--colour-muted); }
.rreze-search__count:empty { display: none; }
.rreze-search__filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.125rem; margin-block-start: 1.375rem; font-size: 0.875rem; color: var(--colour-muted); }
.rreze-search__filter { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; min-inline-size: 0; }
.rreze-search__filter select { min-block-size: var(--touch-target); max-inline-size: 100%; padding: 0 0.625rem; box-sizing: border-box; border: 1px solid var(--colour-control); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); font: inherit; font-size: 0.9375rem; cursor: pointer; }
.rreze-search__chips { margin: 1rem 0 0; }
.rreze-search__scopes { margin: 1.5rem 0 0; border-block-end: 1px solid var(--colour-hairline); }
.rreze-search__scopes ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.rreze-search__scope { display: inline-flex; align-items: center; min-block-size: var(--touch-target); padding: 0 0.125rem; border-block-end: 3px solid transparent; margin-block-end: -1px; color: var(--colour-muted); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.rreze-search__scope[aria-current="page"] { border-block-end-color: var(--colour-text); color: var(--colour-text); }
@media (hover: hover) { .rreze-search__scope:hover { color: var(--colour-text); } }

.rreze-search__columns { display: flex; flex-wrap: wrap; gap: 3rem 3.5rem; margin-block-start: 2.25rem; }
.rreze-search__main { flex: 999 1 38.75rem; min-inline-size: 0; }
.rreze-search__aside { flex: 1 1 18.75rem; min-inline-size: 0; }
.rreze-search__main > * + *, .rreze-search__aside > * + * { margin-block-start: 3rem; }
.rreze-search__aside > [hidden] + * { margin-block-start: 0; }
.rreze-search__hint { margin: 0 0 1rem; max-inline-size: 60ch; color: var(--colour-text-2); }
/* Long words (an address, a name) wrap rather than push the page sideways, even with enlarged text. */
.rreze-search__main, .rreze-search__aside { overflow-wrap: anywhere; }

/* Section labels: 13px bold capitals under a 3px ink rule, as on every Rreze board. */
.rreze-search__rule { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.375rem 1rem; border-block-start: 3px solid var(--colour-text); padding-block: 0.6875rem 0.375rem; }
.rreze-search__label { margin: 0; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rreze-search__order { margin: 0; font-size: 0.875rem; color: var(--colour-muted); }
.rreze-search__order a { display: inline-flex; align-items: center; min-block-size: var(--touch-target); color: var(--colour-muted); }
.rreze-search__order a[aria-current] { font-weight: 600; color: var(--colour-text); text-decoration: none; }

/* A story found: the headline opens it over the whole row; the reader's words are in bold. */
.rreze-search__results { margin: 0; padding: 0; list-style: none; }
.rreze-search__results > li:not(.cards__more, .cards__end) { border-block-end: 1px solid var(--colour-hairline); }
.rreze-search__results > li:nth-last-child(2):not(.cards__more, .cards__end) { border-block-end: 0; }
.rreze-result { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 1.375rem; align-items: start; padding-block: 1.125rem; }
.rreze-result--picture { grid-template-columns: minmax(0, 1fr) 6rem; }
.rreze-result .rreze-thumb { grid-area: 1 / 2 / 3 / 3; }
.rreze-result__head { grid-area: 1 / 1; min-inline-size: 0; }
.rreze-result__section { margin: 0 0 0.125rem; }
.rreze-result .section-label { position: relative; z-index: 2; font-size: 0.875rem; }
.rreze-result__title { margin: 0 0 0.375rem; font-family: var(--font-serif); font-size: 1.3125rem; line-height: 1.24; font-weight: 500; letter-spacing: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.rreze-result__title a { color: inherit; text-decoration: none; }
.rreze-result__title mark { padding: 0; background: none; color: inherit; font-weight: 700; }
.rreze-result__meta { grid-area: 2 / 1; margin: 0; font-size: 0.875rem; color: var(--colour-muted); }
.rreze-result:has(.card__title a:focus-visible) { outline: 2px solid var(--colour-focus); outline-offset: 6px; }
@media (hover: hover) {
    .rreze-result:hover .rreze-result__title a { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; }
    .rreze-result:hover .rreze-thumb { opacity: 0.86; }
}
.rreze-search__results > .rreze-search__more { justify-content: flex-start; padding-block: 1.5rem 0; }
.rreze-search__results .cards__end { padding-block: 1.25rem 0; font-size: 0.875rem; color: var(--colour-muted); text-align: start; }
.rreze-search__progress { margin: 0.625rem 0 0; font-size: 0.875rem; color: var(--colour-muted); text-align: start; }

.rreze-search__people, .rreze-search__subjects { margin: 0; padding: 0; list-style: none; }
.rreze-search__people > li, .rreze-search__subjects > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; padding-block: 0.5rem; border-block-end: 1px solid var(--colour-hairline); }
.rreze-search__person, .rreze-search__subject { display: inline-flex; align-items: center; min-block-size: var(--touch-target); font-size: 1.0625rem; font-weight: 700; text-decoration: none; }
.rreze-search__person-outlets { font-size: 0.875rem; color: var(--colour-muted); }
.rreze-search__all { margin: 0.75rem 0 0; font-size: 0.9375rem; }

/* Beside the results: a story from a link, and the searches kept on this device. */
.rreze-search__aside .rreze-search__rule { padding-block-end: 0.875rem; }
.rreze-search__lead { margin: 0 0 0.875rem; font-size: 0.9375rem; color: var(--colour-text-2); }
.rreze-search__link label { display: block; margin: 0 0 0.375rem; font-size: 0.875rem; font-weight: 600; }
.rreze-search__link input { display: block; inline-size: 100%; min-block-size: 3rem; padding: 0 0.75rem; box-sizing: border-box; border: 1px solid var(--colour-control); border-radius: var(--radius); background: var(--colour-surface); color: var(--colour-text); font: inherit; font-size: 1rem; }
.rreze-search__aside .rreze-search__link .rreze-search__button { inline-size: 100%; margin-block-start: 0.625rem; }
.rreze-search__text-button { display: inline-flex; align-items: center; min-block-size: var(--touch-target); padding: 0; border: 0; background: none; color: var(--colour-muted); font: inherit; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.rreze-search__text-button[hidden] { display: none; }
.rreze-search__recent .rreze-search__rule { align-items: center; padding-block-end: 0.375rem; }
.rreze-search__recent-list { margin: 0; padding: 0; list-style: none; }
.rreze-search__recent-list li { border-block-end: 1px solid var(--colour-hairline); }
.rreze-search__recent-list .chip { display: flex; align-items: center; gap: 0.625rem; min-block-size: var(--touch-target); padding: 0; border: 0; border-radius: 0; background: none; color: var(--colour-text); font-size: 1rem; font-weight: 400; text-decoration: none; }
.rreze-search__recent-list .chip::before { content: ""; flex: none; inline-size: 1.0625rem; block-size: 1.0625rem; background: var(--colour-muted); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (hover: hover) { .rreze-search__recent-list .chip:hover { background: none; text-decoration: underline; } }
@media (forced-colors: active) {
    .rreze-search__submit { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
    .rreze-search__recent-list .chip::before { background: CanvasText; }
}
.rreze-search__remember { display: flex; align-items: center; gap: 0.625rem; min-block-size: var(--touch-target); margin-block-start: 0.5rem; font-size: 0.9375rem; }
.rreze-search__remember input { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin: 0; accent-color: var(--colour-text); }
.rreze-search__remember label { display: flex; align-items: center; min-block-size: var(--touch-target); cursor: pointer; }
.rreze-search__fine { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--colour-muted); }
.rreze-search__fine:empty { display: none; }

/* The page for an article's address alone. */
.rreze-search--url { max-inline-size: 40rem; }
.rreze-search--url .rreze-search__link { margin-block-start: 1rem; }
.rreze-search--url .rreze-search__submit, .rreze-search--url .rreze-search__link .rreze-search__button { margin-block-start: 0.625rem; }
.rreze-search__outcome { margin: 1.25rem 0 0.5rem; }

/* A phone: the field across the width, the filters as a two-column grid, the results in one column. */
@media (max-width: 40rem) {
    .rreze-search { padding-block-start: 1.375rem; }
    .rreze-search__title { margin-block-end: 0.75rem; font-size: 1.875rem; line-height: 1.08; letter-spacing: -0.012em; }
    .rreze-search__box { gap: 0.125rem; min-block-size: 3.5rem; padding: 0.125rem 0.125rem 0.125rem 0.5rem; }
    .rreze-search__icon { display: none; }
    .rreze-search__input { padding: 0 0.5rem; font-size: 1.375rem; }
    .rreze-search__submit { padding: 0 1rem; }
    .rreze-search__count { margin-block-start: 0.625rem; font-size: 0.875rem; }
    .rreze-search__filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin-block-start: 1rem; }
    .rreze-search__filter { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; }
    .rreze-search__filter select { inline-size: 100%; min-inline-size: 0; }
    .rreze-search__columns { display: block; margin-block-start: 2rem; }
    .rreze-search__aside { margin-block-start: 2.25rem; }
    .rreze-search__main > * + *, .rreze-search__aside > * + * { margin-block-start: 2.25rem; }
    .rreze-search__rule { padding-block: 0 0; align-items: center; }
    .rreze-search__rule > .rreze-search__label { padding-block: 0.625rem; }
    .rreze-result { grid-template-rows: auto auto; gap: 0 0.875rem; padding-block: 1rem; }
    .rreze-result--picture { grid-template-columns: minmax(0, 1fr) 5.5rem; }
    .rreze-result .rreze-thumb { grid-area: 1 / 2 / 2 / 3; }
    .rreze-result__title { margin: 0; font-size: 1.1875rem; line-height: 1.25; }
    .rreze-result__meta { grid-area: 2 / 1 / 3 / -1; margin-block-start: 0.5rem; }
    .rreze-search__more .rreze-search__button { flex: 1 1 auto; }
    .rreze-search__progress { text-align: center; }
}

/*
 * The reader's states as Rreze-States-M draws them: the language menu open. (The no-connection row
 * is app.css's, with its own retry.) In the reader bundle, which navigation.css follows, so each
 * rule is scoped one step deeper than the rule it refines there.
 */

/* 1. The language menu, open: a panel under the masthead, the languages two to a row at 17px, each
   a 48px target, the chosen one bold with a tick; the link to the language preferences closes it
   under a light rule. On a phone the panel spans the bar inside its margins; from a tablet it hangs
   from the menu's own button. */
.app-header .app-header__bar {
    position: relative;
}

.app-header .header-edition[open] > .header-edition__choices {
    position: absolute;
    inset-block-start: calc(100% + 0.25rem);
    inset-inline: var(--gutter);
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    min-inline-size: 0;
    max-inline-size: none;
    padding: 0.5rem 0.5rem 0;
    border: var(--rule-light) solid var(--colour-control);
    border-radius: 0.75rem;
    background: var(--colour-surface);
    box-shadow: 0 20px 44px -12px rgba(15, 23, 42, 0.22), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
}

.app-header .header-edition__choices > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-block-size: 3rem;
    padding: 0 0.6875rem;
    border: var(--rule-light) solid transparent;
    border-radius: 0.5rem;
    color: var(--colour-text);
    font-size: 0.96875rem;
    font-weight: 500;
    text-decoration: none;
    margin-inline-start: 0;
    transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}

.app-header .header-edition__choices > a[data-flag]::before {
    content: attr(data-flag);
    flex: none;
    font-size: 1.125rem;
    line-height: 1;
}

.app-header .header-edition__choices > a[aria-current] {
    border-color: var(--colour-control);
    background: var(--colour-wash);
    color: var(--colour-text);
    font-weight: 700;
    box-shadow: none;
}

/* The tick: a drawn check, decorative, since aria-current already names the choice. */
.app-header .header-edition__choices > a[aria-current]::after {
    content: "";
    flex: none;
    inline-size: 0.375rem;
    block-size: 0.6875rem;
    margin-inline-start: auto;
    margin-inline-end: 0.25rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: translateY(-0.125rem) rotate(45deg);
}

.app-header .header-edition__choices > a:last-child {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin: 0.25rem -0.5rem 0;
    padding: 0.75rem 1.125rem 0.875rem;
    border: 0;
    border-block-start: var(--rule-light) solid var(--colour-hairline);
    border-radius: 0 0 0.75rem 0.75rem;
    color: var(--colour-muted);
    font-size: 0.84375rem;
    font-weight: 600;
}

@media (hover: hover) {
    .app-header .header-edition__choices > a:hover {
        background: var(--colour-wash);
        text-decoration: none;
    }
}

.app-header .header-edition__choices > a:focus-visible {
    outline: 2px solid var(--colour-focus);
    outline-offset: -2px;
}

@media (min-width: 40rem) {
    .app-header .header-edition {
        position: relative;
    }

    .app-header .header-edition[open] > .header-edition__choices {
        inset-inline: auto 0;
        inline-size: 24rem;
        max-inline-size: calc(100vw - 2 * var(--gutter));
    }
}

@media (min-width: 110rem) {
    .app-header .header-edition[open] > .header-edition__choices {
        inline-size: 28rem;
    }
}

@media (forced-colors: active) {
    .app-header .header-edition[open] > .header-edition__choices {
        border: 1px solid CanvasText;
    }

    .app-header .header-edition__choices > a[aria-current]::after {
        border-color: CanvasText;
    }
}

/*
 * The breaking-news line (Rreze «Lajm i fundit», ADR-0155): a thin line above the masthead with its
 * label, the story's headline on one line and, from 800 pixels up, how many outlets cover it and
 * when it was first reported. It sits outside #app-content and comes with every full page load, so
 * its rules are in the reader bundle, every one under `.breaking`. Nothing moves: Rreze leaves out
 * tickers and carousels.
 *
 * Its colours are the page's own pair turned over, an ink ground under paper text, which the
 * brand check holds at 4.5:1 or more in either scheme and in any published palette. The board's
 * yellow is kept for the dot beside the label, which says nothing the label does not: yellow on
 * ink is checked for no palette, and it fails on the light line of the dark scheme and in the
 * print edition. The label is 13 pixels, the smallest step the tokens allow, where the board has 12.
 */
.breaking {
    /* The focus ring of the page is ink, which would vanish on the line. */
    --colour-focus: var(--colour-bg);
    background: var(--colour-text);
    color: var(--colour-bg);
}

/* The same width and gutters as the masthead under it. */
.breaking .breaking__bar {
    display: flex;
    align-items: center;
    gap: 0 var(--space-3);
    inline-size: 100%;
    max-inline-size: calc(var(--page-width) + 2 * var(--gutter));
    min-block-size: 3rem;
    margin-inline: auto;
    padding-inline: var(--gutter);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: var(--leading-snug);
}

.breaking .breaking__label {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.breaking .breaking__dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--colour-action);
}

.breaking .breaking__label-short {
    display: none;
}

/* One line, cut with an ellipsis; the link's name is the whole headline. */
.breaking .breaking__link {
    flex: 1 1 auto;
    display: block;
    min-inline-size: 0;
    min-block-size: var(--touch-target);
    overflow: hidden;
    color: inherit;
    font-weight: 600;
    line-height: var(--touch-target);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The ring stays inside the line's 48 pixels. */
.breaking .breaking__link:focus-visible {
    outline-offset: -1px;
}

.breaking .breaking__meta {
    flex: none;
    color: color-mix(in srgb, var(--colour-bg) 78%, var(--colour-text));
    white-space: nowrap;
}

/* A tablet held upright and a phone: the headline takes the room the count and time had. */
@media (max-width: 49.999rem) {
    .breaking .breaking__meta {
        display: none;
    }

    .breaking .breaking__bar {
        gap: 0 0.75rem;
    }
}

/* A phone held upright: the short label of the phone board. */
@media (max-width: 30rem) {
    .breaking .breaking__label-long {
        display: none;
    }

    .breaking .breaking__label-short {
        display: inline;
    }
}

@media (forced-colors: active) {
    .breaking {
        border-block-end: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .breaking .breaking__dot {
        background: CanvasText;
    }
}

@media print {
    .breaking {
        display: none;
    }
}

/*
 * A Mosaic original as the Rreze original boards draw it (Rreze-Original, Rreze-Original-M;
 * ADR-0171), and a reader contribution drawn the same way (ADR-0212, at the end of this file). Every
 * rule is scoped under `.original`, `.original-card`, `.original-tag`, `.original-index` or
 * `.submit-rz`, and uses the reader tokens: ink on ivory, Newsreader headlines and body,
 * sections under a 3px ink rule with a 13px bold uppercase label. The «Ekskluzive» tag is ink with
 * the logo's tiles and a yellow underline; yellow stays the only accent and is never a block here,
 * since this page has no "next step" button. Logical properties keep a Persian story right to left.
 */

/* The «Ekskluzive» tag: ink, the logo's four tiles, a yellow keel. */
.original-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6875rem 0.25rem 0.5rem;
    border-radius: 3px;
    background: var(--colour-text);
    color: var(--colour-bg);
    box-shadow: inset 0 -3px 0 var(--colour-action);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    vertical-align: middle;
}

.original-tag__mark {
    display: grid;
    grid-template-columns: 6px 5px;
    grid-template-rows: 6px 5px;
    gap: 1px;
}

.original-tag__mark span {
    display: block;
    background: var(--colour-bg);
}

.original-tag__mark span:nth-child(2) {
    background: var(--colour-action);
}

/* The trail back, with every original at the far end. */
.original__trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem 1.5rem;
    padding-block-start: 1.25rem;
    font-size: 0.875rem;
    color: var(--colour-muted);
}

.original__trail ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.original__trail li {
    display: flex;
    gap: 0.5rem;
}

.original__trail a {
    color: var(--colour-muted);
}

/* The way to every original, or every contribution, at the far end of the trail, on one line. */
.original__all {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.original__version-notice {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--colour-hairline);
    border-radius: 4px;
    background: var(--colour-surface);
    font-size: 0.9375rem;
}

/* The header: tag, section and reading time; headline; standfirst; byline row. */
.original__header {
    max-inline-size: 56.25rem;
    padding-block: 1.125rem 1.875rem;
}

.original__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.875rem;
    margin: 0 0 0.875rem;
    font-size: 0.875rem;
}

.original__only,
.original__muted {
    color: var(--colour-muted);
}

.original__title {
    margin: 0 0 1rem;
    font-family: var(--font-serif);
    font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.018em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.original__standfirst {
    margin: 0 0 1.375rem;
    font-family: var(--font-serif);
    font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.4375rem);
    font-style: italic;
    line-height: 1.4;
    color: var(--colour-text-2);
    text-wrap: pretty;
}

.original__byline-row {
    padding-block: 1rem;
    border-block: 1px solid var(--colour-hairline);
}

.original__byline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 0.9375rem;
}

.original__initials {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    background: var(--colour-text);
    color: var(--colour-bg);
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    font-weight: 700;
}

/* The body and the side column; one column on a phone, the side after the text. */
.original__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
}

@media (min-width: 64rem) {
    .original__layout {
        grid-template-columns: minmax(0, 47.5rem) minmax(18.75rem, 1fr);
        column-gap: 3.5rem;
        align-items: start;
    }
}

.original__body {
    min-inline-size: 0;
    padding-block: 2.25rem 1.75rem;
    padding-inline: 2.5rem;
    border: 1px solid var(--colour-hairline);
    border-radius: 6px;
    background: var(--colour-surface);
    overflow: hidden;
    overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
    .original__body {
        padding-block: 1.25rem 1rem;
        padding-inline: 1.125rem;
    }
}

.original__body p,
.original__body li {
    font-family: var(--font-serif);
    font-size: 1.3125rem;
    line-height: 1.6;
}

.original__body p {
    margin: 0 0 1.5rem;
}

.original__body > p:first-of-type {
    font-size: 1.4375rem;
    line-height: 1.5;
    font-weight: 500;
}

.original__body h2 {
    margin: 2.25rem 0 0.75rem;
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
}

.original__body h3 {
    margin: 1.75rem 0 0.5rem;
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
}

.original__body blockquote {
    margin: 1.875rem 0;
    padding-inline-start: 1.5rem;
    border-inline-start: 3px solid var(--colour-action);
}

.original__body blockquote p {
    font-size: 1.6875rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.original__body pre {
    overflow-x: auto;
    padding: 1rem;
    border: 1px solid var(--colour-hairline);
    border-radius: 4px;
    background: var(--colour-surface);
    font-size: 0.9375rem;
}

.original__body hr {
    margin: 2rem 0;
    border: 0;
    border-block-start: 1px solid var(--colour-hairline);
}

/* "Si e raportuam": a card on surface with square ink bullets; corrections inside it. */
.original__side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.original__reported {
    padding: 1.25rem 1.375rem 1.125rem;
    border: 1px solid var(--colour-hairline);
    border-radius: 4px;
    background: var(--colour-surface);
}

.original__reported h2,
.original__pickups h2,
.original__more h2,
.original__corrections h3 {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.original__facts {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.original__facts > li {
    position: relative;
    padding-block-end: 0.625rem;
    padding-inline-start: 1.25rem;
}

.original__facts > li::before {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0;
    inline-size: 8px;
    block-size: 8px;
    background: var(--colour-text);
    content: "";
}

.original__links {
    margin: 0.25rem 0 0;
    padding-inline-start: 1rem;
}

/* The method as the reporter typed it, line breaks kept, long words wrapped. */
.original__method {
    overflow-wrap: anywhere;
}

.original__format {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--colour-muted);
}

.original__corrections {
    margin-block-start: 0.875rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--colour-hairline);
    font-size: 0.875rem;
}

.original__corrections ol {
    margin: 0 0 0.5rem;
    padding-inline-start: 1.125rem;
}

.original__report {
    margin: 0;
    color: var(--colour-muted);
}

/* "Kush e mori më pas": under a heavy ink rule, each outlet in its own neutral frame. */
.original__pickups {
    padding-block-start: 0.6875rem;
    border-block-start: 3px solid var(--colour-text);
    font-size: 0.9375rem;
}

.original__pickups ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.original__pickups li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-block: 0.5rem;
    border-block-start: 1px solid var(--colour-hairline);
}

.original__pickups li:last-child {
    border-block-end: 1px solid var(--colour-hairline);
}

.original__pickups li a {
    flex: 1;
    min-block-size: var(--touch-target, 44px);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.original__outlet-mark {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    box-sizing: border-box;
    border: 1px solid var(--colour-control);
    border-radius: 3px;
    font-family: var(--font-serif);
    font-size: 0.75rem;
    font-weight: 700;
}

/* More originals and the index: cards in a grid that wraps to one column. */
.original__more {
    margin-block-start: 3.5rem;
}

.original__more-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.6875rem 0.375rem;
    border-block-start: 3px solid var(--colour-text);
}

.original__more-head a {
    font-size: 0.875rem;
    color: var(--colour-muted);
}

.original__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
    gap: 0 2.5rem;
}

.original-card {
    position: relative;
    padding-block: 1.5rem;
}

.original-card__tag {
    margin: 0 0 0.5rem;
}

.original-card__title {
    margin: 0 0 0.5rem;
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    text-wrap: pretty;
}

.original-card__standfirst {
    margin: 0 0 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--colour-text-2);
    overflow-wrap: anywhere;
}

.original-card__title a {
    color: inherit;
    text-decoration: none;
}

.original-card__title a::after {
    position: absolute;
    inset: 0;
    content: "";
}

.original-card__meta {
    margin: 0;
    font-size: 0.875rem;
    color: var(--colour-muted);
}

.original-card:has(a:focus-visible) {
    outline: 2px solid var(--colour-focus);
    outline-offset: 6px;
}

@media (hover: hover) {
    .original-card:hover .original-card__title a {
        text-decoration: underline;
        text-decoration-thickness: 0.07em;
        text-underline-offset: 0.2em;
    }
}

.original-index {
    padding-block: 1.5rem 3rem;
}

.original-index__title {
    margin: 0 0 0.75rem;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem);
    font-weight: 600;
    line-height: 1.05;
}

.original-index__lead {
    max-inline-size: 40rem;
    margin: 0 0 1.5rem;
    color: var(--colour-text-2);
}

/* Persian keeps its own letterforms; tracking is for Latin capitals only. */
:is(.original, .original-card)[dir="rtl"] :is(.original__title, .original-card__title) {
    letter-spacing: normal;
}

@media (forced-colors: active) {
    .original-tag {
        border: 1px solid CanvasText;
    }

    .original-tag__mark span,
    .original__facts > li::before {
        background: CanvasText;
    }
}

/*
 * Reader contributions (ADR-0212). The public page and index reuse every rule above: a contribution
 * is drawn as the board draws an original, with the contributor marked in the byline. The account
 * pages, a contributor's own list and the compose form, are pages of Your space (rreze-mine.css,
 * `.mine-rz`) and add only what those boards do not have: a state chip, the rows of articles, the
 * updates with an unread mark, the three groups of the form under ink rules, the editors' reason,
 * and the rights grant. Every rule here sits under `.original--contribution` or `.submit-rz`.
 */

/* The byline names the contributor where a staff original names the newsroom. */
.original--contribution .original__contributor {
    font-weight: 600;
}

/* A state chip: a word in a small square frame; the frame says where the piece stands, the word says it too. */
.submit-rz .submit-rz__state {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.625rem;
    max-inline-size: 100%;
    padding: 0 0.5rem;
    box-sizing: border-box;
    border: 1px solid var(--colour-control);
    border-radius: 3px;
    background: var(--colour-surface);
    color: var(--colour-text-2);
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

/* Open: the author's turn (a draft, a returned piece), so the word is in full ink. */
.submit-rz .submit-rz__state--open {
    color: var(--colour-text);
}

/* In review: with the editors; the frame firms up to ink. */
.submit-rz .submit-rz__state--review {
    border-color: var(--colour-text);
    color: var(--colour-text);
}

.submit-rz .submit-rz__state--public {
    border-color: var(--colour-text);
    background: var(--colour-text);
    color: var(--colour-bg);
}

.submit-rz .submit-rz__state--final {
    border-style: dashed;
    color: var(--colour-muted);
}

.submit-rz .submit-rz__eyebrow {
    margin-block-end: 0.75rem;
}

/* The contributor's articles: one row each, the title in the serif, the chip and the time beside it. */
.submit-rz__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.submit-rz__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding-block: 0.75rem;
    border-block-end: 1px solid var(--colour-hairline);
}

.submit-rz__piece {
    flex: 1 1 16rem;
    min-inline-size: 0;
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    font-family: var(--font-serif);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.22;
    color: var(--colour-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.submit-rz__when {
    font-size: var(--step--1);
    color: var(--colour-muted);
    white-space: nowrap;
}

/* The updates: an unread one carries a dot and bold words, and the quiet button that clears it. */
.submit-rz__notices {
    margin: 0;
    padding: 0;
    list-style: none;
}

.submit-rz__notice {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.875rem 0 0.875rem 1rem;
    border-block-end: 1px solid var(--colour-hairline);
}

.submit-rz__notice--unread::before {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 1.375rem;
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--colour-danger);
    content: "";
}

.submit-rz__notice-body {
    flex: 1 1 18rem;
    min-inline-size: 0;
}

.submit-rz__notice-text {
    margin: 0 0 0.1875rem;
    font-size: 0.9375rem;
    line-height: 1.35;
}

.submit-rz__notice--unread .submit-rz__notice-text {
    font-weight: 600;
}

.submit-rz__notice-text a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--touch-target);
    text-decoration: none;
}

.submit-rz__notice-text a:hover {
    text-decoration: underline;
}

.submit-rz__notice-meta {
    margin: 0;
    font-size: var(--step--2);
    color: var(--colour-muted);
    overflow-wrap: anywhere;
}

.submit-rz__read {
    margin: 0;
}

.submit-rz .submit-rz__read .mine-rz__quiet {
    min-block-size: var(--touch-target);
    font-size: 0.9375rem;
    cursor: pointer;
}

/* What the editors asked for: the reason, under its label, in a card with an ink keel. */
.submit-rz__reason {
    max-inline-size: 48rem;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem 1.125rem;
    border: 1px solid var(--colour-hairline);
    border-inline-start: 3px solid var(--colour-text);
    border-radius: 4px;
    background: var(--colour-surface);
}

.submit-rz__reason-label {
    margin: 0 0 0.375rem;
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.submit-rz__reason-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--colour-text-2);
    overflow-wrap: anywhere;
}

.submit-rz .submit-rz__error {
    max-inline-size: 48rem;
    margin: 0 0 1.5rem;
}

/* The form: three groups under ink rules, the fields as every reader form draws them, the article in the serif. */
.submit-rz .submit-rz__form {
    max-inline-size: 48rem;
    margin-block: 0.5rem 0;
    gap: 1.5rem;
}

.submit-rz .submit-rz__group {
    gap: 1rem;
    padding-block-start: 0.6875rem;
    border-block-start: 3px solid var(--colour-text);
}

.submit-rz .submit-rz__group > legend {
    float: inline-start;
    inline-size: 100%;
    margin: 0 0 0.25rem;
}

.submit-rz .submit-rz__body {
    min-block-size: 24rem;
    font-family: var(--font-serif);
    font-size: 1.125rem;
    line-height: 1.5;
}

.submit-rz__source {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem 1rem;
}

.submit-rz__source > label {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
}

@media (min-width: 48rem) {
    .submit-rz__source {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }
}

.submit-rz__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin: 0;
}

.submit-rz .submit-rz__actions .button {
    min-block-size: 3rem;
    padding-inline: 1.375rem;
    font-weight: 700;
}

/* The next step: the rights grant, read before the one yellow button sends the piece on. */
.submit-rz .submit-rz__next {
    max-inline-size: 48rem;
    margin-block-start: clamp(2rem, 1rem + 3vw, 3.25rem);
}

.submit-rz .submit-rz__submit {
    margin-block: 1rem 0;
    gap: 1rem;
}

.submit-rz__grant {
    padding: 1rem 1.25rem;
    border: 1px solid var(--colour-hairline);
    border-radius: 4px;
    background: var(--colour-surface);
}

.submit-rz__grant > summary {
    min-block-size: var(--touch-target);
    display: flex;
    align-items: center;
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.submit-rz__grant-text {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--colour-text-2);
    white-space: pre-line;
}

.submit-rz__quiet-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin-block-start: 1rem;
}

.submit-rz__withdraw {
    margin: 0;
}

.submit-rz .submit-rz__withdraw .mine-rz__quiet {
    cursor: pointer;
}

@media (forced-colors: active) {
    .original-tag,
    .original__initials {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
    }

    .submit-rz__notice--unread::before {
        background: CanvasText;
    }

    .submit-rz .submit-rz__state--public {
        border: 2px solid CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}

/*
 * Readers' comments (ADR-0189), in the Rreze story boards' manner: no board draws comments, so
 * the thread is a part of the page like the others. It opens under a 3px ink rule with a 13px
 * bold uppercase label, holds ink on paper, a hairline between comments and a light rule at the
 * start of each reply, and no colour of its own. A comment is the reader's words: shown as typed
 * (pre-wrap), its direction its own (dir="auto"), and never set like a headline.
 */

.comments {
    margin-block-start: 2rem;
    padding-block-start: 0.625rem;
    border-block-start: 3px solid var(--colour-text);
    max-inline-size: 45rem;
}

.comments > h2 {
    margin: 0 0 0.75rem;
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.comments__note,
.comments__empty,
.comments__refusal,
.comments__invite {
    margin: 0 0 0.875rem;
    color: var(--colour-muted);
    font-size: var(--step--1);
    line-height: 1.5;
}

.comments__refusal {
    padding: 0.75rem 0.875rem;
    color: var(--colour-text);
    background: var(--colour-wash);
    border-inline-start: 3px solid var(--colour-control);
}

.comments__bar-reason {
    display: block;
    margin-block: 0.25rem;
}

.comments__form,
.comments__erase {
    display: grid;
    gap: 0.5rem;
    margin-block-end: 1.25rem;
}

.comments__form textarea,
.comment__action textarea {
    inline-size: 100%;
    min-block-size: calc(var(--touch-target) * 2);
    font: inherit;
}

.comments__list,
.comment__replies {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comments__list > li + li {
    border-block-start: 1px solid var(--colour-hairline);
}

.comment {
    padding-block: 0.875rem;
}

.comment__replies {
    margin-block-start: 0.5rem;
    margin-inline-start: 1rem;
    padding-inline-start: 0.875rem;
    border-inline-start: 2px solid var(--colour-hairline);
}

.comment__replies .comment {
    padding-block: 0.5rem;
}

.comment__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.625rem;
    margin-block-end: 0.375rem;
    font-size: var(--step--1);
    color: var(--colour-muted);
}

.comment__by,
.comment__where {
    color: var(--colour-text);
    font-weight: 700;
}

.comment__state {
    padding-inline: 0.375rem;
    color: var(--colour-warning-text);
    background: var(--colour-warning-bg);
}

.comment__body {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.55;
    text-wrap: pretty;
}

.comment__body a {
    overflow-wrap: anywhere;
}

.comment--pending .comment__body,
.comment--hidden .comment__body {
    color: var(--colour-muted);
}

.comment__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.25rem 1rem;
    margin-block-start: 0.5rem;
    font-size: var(--step--1);
}

.comment__action > summary {
    min-block-size: var(--touch-target);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.comment__action[open] {
    flex-basis: 100%;
}

.comment__action .form {
    display: grid;
    gap: 0.5rem;
}

.comments__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    margin-block-start: 1rem;
    font-size: var(--step--1);
}

.comments-page__back {
    margin: 0 0 0.5rem;
    font-size: var(--step--1);
}

/*
 * First-party advertising and sponsored slots (Rreze-Home «Reklamë» / «E sponsorizuar», ADR-0170, ADR-0232).
 * Never mistaken for news: a dashed frame on its own tinted surface (a story card is a solid hairline on
 * the page surface), a solid badge that says in words what it is, and a sans headline where a story's
 * title is serif. Every colour is a token, so a published palette and the dark scheme follow; the
 * words, not a colour, say what it is, and a forced-colours palette keeps the dashed frame and the
 * badge's border. The explanation is a native disclosure, so it opens without JavaScript. The close
 * button and its note exist only once ads.js has proved this browser can remember the choice
 * (html.ads-ready, set by visitor.js): without that, no dead control is drawn. A closed ad is hidden
 * before the first paint by html.adx-<id> and the one-rule sheet linked beside the slot.
 */
.ad-slot {
    position: relative;
    margin-block: var(--space-4);
    padding: 1rem 1rem 1.125rem;
    border: 2px dashed var(--colour-control);
    border-radius: var(--radius);
    background: var(--colour-wash);
    color: var(--colour-text);
}

.ad-slot--banner {
    margin-block: var(--space-3) 0;
}

.ad-slot__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin: 0 0 0.5rem;
}

.ad-slot__label {
    flex: 1 1 auto;
    min-inline-size: 0;
    margin: 0;
    color: var(--colour-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

/* The word that says what this is: solid, the page's text colour on its ground, never the action colour. */
.ad-slot__badge {
    display: inline-block;
    max-inline-size: 100%;
    padding: 0.125rem 0.5rem;
    border: var(--rule-light) solid var(--colour-text);
    border-radius: var(--radius-small);
    background: var(--colour-text);
    color: var(--colour-bg);
    overflow-wrap: anywhere;
}

.ad-slot__close {
    display: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    margin-block: -0.5rem;
    margin-inline: 0 -0.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-small);
    background: transparent;
    color: var(--colour-text);
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.ad-slot__close:hover {
    background: var(--colour-hairline);
}

.ad-slot__close:focus-visible {
    outline: 2px solid var(--colour-focus);
    outline-offset: 0;
}

html.ads-ready .ad-slot__close {
    display: inline-flex;
}

.ad-slot__close-note {
    display: none;
}

html.ads-ready .ad-slot__close-note {
    display: block;
}

.ad-slot__why {
    color: var(--colour-muted);
    font-size: var(--step--1);
}

.ad-slot__why > summary {
    min-block-size: var(--touch-target);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    text-decoration: underline;
}

.ad-slot__why > p {
    max-inline-size: 36rem;
    margin: 0.25rem 0 0.5rem;
}

.ad-slot__headline {
    margin: 0 0 0.375rem;
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: pretty;
}

.ad-slot__headline a {
    color: var(--colour-text);
    text-decoration: none;
}

.ad-slot__headline a:hover,
.ad-slot__headline a:focus-visible {
    text-decoration: underline;
}

.ad-slot__body {
    margin: 0 0 0.375rem;
    color: var(--colour-text);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.ad-slot__paid {
    margin: 0;
    color: var(--colour-muted);
    font-size: var(--step--1);
    overflow-wrap: anywhere;
}

@media (forced-colors: active) {
    .ad-slot {
        border-color: CanvasText;
    }

    .ad-slot__badge {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}

/*
 * A paid or organisation-issued article (a publisher's «E sponsorizuar», «Reklamë» or «Njoftim për
 * shtyp», ADR-0232): the same fence as the slot above, so it is never read as a plain story: a dashed
 * frame on the tinted surface, the genre word as a solid badge, and a note that says in words what it
 * is. The headline keeps its place and its link; only the frame and the words differ.
 */
.card--commercial,
.rreze-article--commercial {
    padding: var(--space-3);
    border: 2px dashed var(--colour-control);
    border-radius: var(--radius);
    background: var(--colour-wash);
}

.rreze-result--commercial,
.mine-rz__story--commercial,
.timeline__item--commercial {
    padding: var(--space-3);
    border: 2px dashed var(--colour-control);
    border-radius: var(--radius);
    background: var(--colour-wash);
}

.card--commercial .card__genre,
.rreze-article--commercial .card__genre,
.rreze-result--commercial .card__genre,
.mine-rz__story--commercial .card__genre,
.timeline__item--commercial .card__genre,
.story__header .story__commercial ~ .story__genre,
.story__header .story__genre[data-genre="genre:Sponsored"],
.story__header .story__genre[data-genre="genre:Advertiser_Supplied"],
.story__header .story__genre[data-genre="genre:Press_Release"] {
    max-inline-size: 100%;
    border-color: var(--colour-text);
    background: var(--colour-text);
    color: var(--colour-bg);
    white-space: normal;
    overflow-wrap: anywhere;
}

.card__commercial {
    margin: 0 0 var(--space-1);
    color: var(--colour-muted);
    font-size: var(--step--1);
}

@media (forced-colors: active) {
    .card--commercial,
    .rreze-article--commercial,
    .rreze-result--commercial,
    .mine-rz__story--commercial,
    .timeline__item--commercial {
        border-color: CanvasText;
    }

    .card--commercial .card__genre,
    .rreze-article--commercial .card__genre,
    .rreze-result--commercial .card__genre,
    .mine-rz__story--commercial .card__genre,
    .timeline__item--commercial .card__genre,
    .story__header .story__genre[data-genre="genre:Sponsored"],
    .story__header .story__genre[data-genre="genre:Advertiser_Supplied"],
    .story__header .story__genre[data-genre="genre:Press_Release"] {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}

/* The footer's way back: there only when something was closed, and never in print. */
.app-footer__ads {
    display: none;
    margin: 0;
}

html.ads-some-dismissed .app-footer__ads {
    display: block;
}

@media print {
    .ad-slot,
    .app-footer__ads {
        display: none;
    }
}

/*
 * The staff view banner (ADR-0192): one line at the very top of every page while a member of
 * staff views the site as another account, before the breaking line and the masthead, so nothing
 * on the page can be mistaken for the staff member's own. Its colours are the warning pair of the
 * tokens under a rule in the action colour, so a published palette and the dark scheme follow;
 * the words, not the colour, say what it is. Every rule is under `.impersonation`. It never
 * moves, is never dismissed, and prints too: a printed page of a view says it was one.
 */
.impersonation {
    --colour-focus: var(--colour-warning-text);
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    border-block-end: 3px solid var(--colour-action);
    background: var(--colour-warning-bg);
    color: var(--colour-warning-text);
}

/* The same width and gutters as the masthead under it. */
.impersonation .impersonation__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    inline-size: 100%;
    max-inline-size: calc(var(--page-width) + 2 * var(--gutter));
    min-block-size: 3rem;
    margin-inline: auto;
    padding-block: var(--space-2);
    padding-inline: var(--gutter);
    font-family: var(--font-body);
    font-size: var(--step--1);
    line-height: var(--leading-snug);
}

.impersonation .impersonation__who,
.impersonation .impersonation__rule {
    flex: 1 1 16rem;
    min-inline-size: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.impersonation .impersonation__title {
    display: block;
    font-weight: 700;
}

.impersonation .impersonation__by {
    display: block;
}

.impersonation .impersonation__rule {
    font-weight: 600;
}

.impersonation .impersonation__rule time {
    font-weight: 400;
}

/* The way out: a quiet button of the warning pair, 44px tall, at the end of the line. */
.impersonation .impersonation__exit {
    flex: 0 1 auto;
    min-inline-size: 0;
    max-inline-size: 100%;
    margin: 0;
    margin-inline-start: auto;
}

.impersonation .impersonation__button {
    display: inline-flex;
    align-items: center;
    max-inline-size: 100%;
    min-block-size: 44px;
    padding: 0 var(--space-3);
    border: 2px solid currentColor;
    border-radius: var(--radius);
    background: var(--colour-surface);
    color: var(--colour-text);
    font: inherit;
    font-weight: 700;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.impersonation .impersonation__button:hover {
    background: var(--colour-action);
    color: var(--colour-action-text);
}

.impersonation .impersonation__button:focus-visible {
    outline: 2px solid var(--colour-focus);
    outline-offset: 2px;
}

@media print {
    .impersonation .impersonation__exit {
        display: none;
    }
}

/* The reader footer groups native destinations without adding content or motion. */
.app-footer--columns { padding-block: var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom)); }
.app-footer--columns .app-footer__main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: var(--space-5); }
.app-footer--columns .app-footer__identity { min-inline-size: 0; }
.app-footer--columns .app-footer__brand { inline-size: fit-content; max-inline-size: 100%; min-block-size: var(--touch-target); }
.app-footer--columns .app-footer__brand .brand__name { font-size: var(--step-1); }
.app-footer--columns .app-footer__description { max-inline-size: 35ch; margin: var(--space-2) 0 0; font-size: var(--step--1); line-height: var(--leading-body); overflow-wrap: anywhere; }
.app-footer--columns .app-footer__navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.app-footer--columns .app-footer__group { min-inline-size: 0; }
.app-footer--columns .app-footer__group h2 { margin: 0 0 var(--space-2); font: inherit; font-size: var(--step--2); font-weight: 750; letter-spacing: .075em; text-transform: uppercase; color: var(--colour-text); }
.app-footer--columns .app-footer__links { display: block; margin: 0; }
.app-footer--columns .app-footer__links a { min-inline-size: var(--touch-target); max-inline-size: 100%; overflow-wrap: anywhere; }
.app-footer--columns .app-footer__links--speak { padding: 0; border: 0; }
.app-footer--columns .app-footer__languages { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin-block-start: var(--space-4); padding-block-start: var(--space-3); border-block-start: var(--rule-light) solid var(--colour-hairline); }
.app-footer--columns .app-footer__languages[hidden] { display: none; }
.app-footer--columns .app-footer__languages > span { font-size: var(--step--2); font-weight: 750; letter-spacing: .075em; text-transform: uppercase; color: var(--colour-text); }
.app-footer--columns .app-footer__languages ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); list-style: none; padding: 0; margin: 0; }
.app-footer--columns .app-footer__languages a { display: inline-flex; align-items: center; gap: 0.35rem; min-block-size: var(--touch-target); min-inline-size: var(--touch-target); max-inline-size: 100%; color: var(--colour-muted); font-size: var(--step--1); }
.app-footer--columns .app-footer__languages a[data-flag]::before { content: attr(data-flag); flex: none; font-size: 1rem; line-height: 1; }
.app-footer--columns .app-footer__languages a[aria-current] { font-weight: 750; color: var(--colour-text); }
.app-footer--columns .app-footer__copyright { margin-block: var(--space-3) 0; font-size: var(--step--2); }
@media (max-width: 63.999rem) { .app-footer--columns .app-footer__main { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }
@media (max-width: 47.999rem) { .app-footer--columns .app-footer__navigation { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); } }
@media print { .app-footer--columns .app-footer__languages { display: none; } }

/* The fallback wordmark follows the supplied reader masthead; uploaded logo pixels stay untouched. */
.brand__name {
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: -0.035em;
}
.app-footer--columns .app-footer__brand { gap: var(--space-2); color: var(--colour-text); }
.app-footer--columns .app-footer__brand .brand__mark { inline-size: 20px; block-size: 20px; }