/* ==========================================================================
   PAIKALLISLEHTI - DESIGN SYSTEM & CONTRAST TOKENS
   WCAG AA/AAA High-Contrast Design System for Light & Dark Modes
   ========================================================================== */

:root {
    /* Archivo carries the mark and the headlines: its width axis runs 75-125, so one
       face narrows for a headline and widens for the nameplate. Newsreader sets running
       text, because it was drawn for news. Montserrat and Raleway were geometric
       general-purpose faces and read as "app" rather than "paper". */
    /* The masthead panel. Light in both themes, dark type on it in both, so the
       letters never land on the red block — which is where an outlined or
       transparent panel measured 2.00:1 and failed every contrast threshold.
       In light mode the panel is close to the page colour, so it is given a
       hard offset shadow: a second impression rather than a soft UI shadow. */
    --color-masthead-panel: #FFFFFF;
    --color-masthead-panel-ink: #14161A;
    --color-masthead-panel-shadow: .035em .035em 0 0 #14161A;

    --font-headline: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;

    /* --- Light Theme (Default) --- */
    --color-primary-light: #C1121F;          /* Deep Crimson Red - High Contrast */
    --color-primary-hover-light: #9B0E19;
    --color-secondary-light: #0F172A;        /* Slate 900 - Crisp dark headings */
    --color-accent-light: #D97706;           /* Warm Amber/Gold */
    --color-background-light: #F1F5F9;       /* Slate 100 - Clean modern neutral */
    --color-text-light: #0F172A;             /* Slate 900 - 14:1 contrast ratio */
    --color-muted-light: #475569;            /* Slate 600 - High legibility meta */
    --color-card-bg-light: #FFFFFF;          /* Pure White cards */
    --color-card-border-light: #CBD5E1;      /* Slate 300 - Distinct boundaries */
    --color-link-light: #C1121F;             /* Deep Crimson */
    --color-link-visited-light: #7F1D1D;     /* Dark Crimson */
    --color-navbar-bg-light: #0F172A;        /* Slate 900 */
    --color-navbar-text-light: #F8FAFC;
    --color-navbar-text-hover-light: #FFFFFF;
    --color-footer-bg-light: #0F172A;
    --color-footer-text-light: #94A3B8;
    --color-sidebar-hover-bg-light: #E2E8F0;
    --color-headline-card-hover-bg-light: #F8FAFC;
    --color-edit-control-bg-light: #F8FAFC;
    --color-surface-secondary-light: #E2E8F0;

    /* --- Dark Theme --- */
    --color-primary-dark: #EF4444;           /* Vibrant Red / Coral - High contrast against dark */
    --color-primary-hover-dark: #FCA5A5;
    --color-secondary-dark: #FFFFFF;         /* Pure White headings in dark mode */
    --color-accent-dark: #FBBF24;            /* Amber 400 */
    --color-background-dark: #0B0F19;        /* Deep Slate Black */
    --color-text-dark: #F1F5F9;              /* Slate 100 - High contrast body text */
    --color-muted-dark: #94A3B8;             /* Slate 400 - Clear secondary text */
    --color-card-bg-dark: #151D2E;           /* Slate 800+ - Rich dark card surface */
    --color-card-border-dark: #2A374D;       /* Slate 700 - Distinct visible border */
    --color-link-dark: #F87171;              /* Coral Red - High contrast on dark */
    --color-link-visited-dark: #FCA5A5;
    --color-navbar-bg-dark: #080C14;         /* Near black */
    --color-navbar-text-dark: #F1F5F9;
    --color-navbar-text-hover-dark: #FFFFFF;
    --color-footer-bg-dark: #080C14;
    --color-footer-text-dark: #94A3B8;
    --color-sidebar-hover-bg-dark: #1E293B;
    --color-headline-card-hover-bg-dark: #1E293B;
    --color-edit-control-bg-dark: #151D2E;
    --color-surface-secondary-dark: #1E293B;

    /* --- Default Active Theme Tokens (Light) --- */
    --color-primary: var(--color-primary-light);
    --color-primary-hover: var(--color-primary-hover-light);
    --color-secondary: var(--color-secondary-light);
    --color-accent: var(--color-accent-light);
    --color-background: var(--color-background-light);
    --color-text: var(--color-text-light);
    --color-muted: var(--color-muted-light);
    --color-card-bg: var(--color-card-bg-light);
    --color-card-border: var(--color-card-border-light);
    --color-link: var(--color-link-light);
    --color-link-visited: var(--color-link-visited-light);
    --color-navbar-bg: var(--color-navbar-bg-light);
    --color-navbar-text: var(--color-navbar-text-light);
    --color-navbar-text-hover: var(--color-navbar-text-hover-light);
    --color-footer-bg: var(--color-footer-bg-light);
    --color-footer-text: var(--color-footer-text-light);
    --color-sidebar-hover-bg: var(--color-sidebar-hover-bg-light);
    --color-headline-card-hover-bg: var(--color-headline-card-hover-bg-light);
    --color-edit-control-bg: var(--color-edit-control-bg-light);
    --color-surface-secondary: var(--color-surface-secondary-light);
}

/* ==========================================================================
   DARK THEME OVERRIDES
   ========================================================================== */
[data-theme="dark"],
[data-bs-theme="dark"] {
    /* A light panel on a dark ground already has an edge, so no shadow here.
       Adding one would be decoration, and would quietly make the two themes
       two different marks. */
    --color-masthead-panel: #EDEBE5;
    --color-masthead-panel-ink: #0F1114;
    --color-masthead-panel-shadow: none;

    --color-primary: var(--color-primary-dark);
    --color-primary-hover: var(--color-primary-hover-dark);
    --color-secondary: var(--color-secondary-dark);
    --color-accent: var(--color-accent-dark);
    --color-background: var(--color-background-dark);
    --color-text: var(--color-text-dark);
    --color-muted: var(--color-muted-dark);
    --color-card-bg: var(--color-card-bg-dark);
    --color-card-border: var(--color-card-border-dark);
    --color-link: var(--color-link-dark);
    --color-link-visited: var(--color-link-visited-dark);
    --color-navbar-bg: var(--color-navbar-bg-dark);
    --color-navbar-text: var(--color-navbar-text-dark);
    --color-navbar-text-hover: var(--color-navbar-text-hover-dark);
    --color-footer-bg: var(--color-footer-bg-dark);
    --color-footer-text: var(--color-footer-text-dark);
    --color-sidebar-hover-bg: var(--color-sidebar-hover-bg-dark);
    --color-headline-card-hover-bg: var(--color-headline-card-hover-bg-dark);
    --color-edit-control-bg: var(--color-edit-control-bg-dark);
    --color-surface-secondary: var(--color-surface-secondary-dark);

    /* Bootstrap 5 Theme Variables */
    --bs-body-color: var(--color-text-dark);
    --bs-body-bg: var(--color-background-dark);
    --bs-card-bg: var(--color-card-bg-dark);
    --bs-card-border-color: var(--color-card-border-dark);
    --bs-card-cap-bg: var(--color-card-bg-dark);
    --bs-secondary-bg: var(--color-surface-secondary-dark);
    --bs-tertiary-bg: #1A2333;
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-color: var(--color-muted-dark);
    --bs-border-color: var(--color-card-border-dark);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
    --bs-link-color: var(--color-link-dark);
    --bs-link-hover-color: var(--color-link-hover-dark);
    --bs-heading-color: var(--color-secondary-dark);
}

/* ==========================================================================
   BASE & TYPOGRAPHY
   ========================================================================== */
body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    font-weight: 700;
    color: var(--color-secondary);
    letter-spacing: -0.25px;
}

h1 { font-weight: 900; }

/* ==========================================================================
   BREAKING LONG FINNISH WORDS
   --------------------------------------------------------------------------
   Finnish breaks a narrow column with single long words, not long sentences.
   "ympäristöterveydenhuollon" is twenty-five characters and a 176px card
   column cannot hold it: without a break it simply hangs out of the card.

   Two mechanisms, and they cooperate rather than compete. The browser's own
   hyphenation works from the Finnish patterns it ships with and breaks by
   syllable; the soft hyphens we insert server-side mark where the compound is
   actually JOINED, which is the break a reader expects. `hyphens: auto`
   honours both, preferring nothing in particular — it simply has more legal
   break points to choose from, and the compound seams are the good ones.

   Only on headings and card text. Running body copy is wide enough not to
   need it, and hyphenating a whole article reads as a printed page rather
   than a screen.

   overflow-wrap is the floor beneath both: a word with no legal break at all
   — a URL, a registration code — breaks anywhere rather than overflowing.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.card-text,
.story-ingress {
    hyphens: auto;
    overflow-wrap: break-word;
}

.text-muted {
    color: var(--color-muted) !important;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
    background-color: var(--color-navbar-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar .navbar-brand {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 1.35rem;
    color: var(--color-navbar-text-hover) !important;
}

.navbar .nav-link,
.navbar .dropdown-toggle {
    color: var(--color-navbar-text) !important;
    font-weight: 500;
}

.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover,
.navbar .nav-link.active {
    color: var(--color-navbar-text-hover) !important;
}

/* ==========================================================================
   CARDS & SURFACES
   ========================================================================== */
.card,
.admin-card {
    background-color: var(--color-card-bg) !important;
    border: 1px solid var(--color-card-border) !important;
    color: var(--color-text);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.card-header {
    background-color: var(--color-card-bg) !important;
    border-bottom: 1px solid var(--color-card-border) !important;
    color: var(--color-secondary);
    font-weight: 600;
}

/* Override utility classes that fight theme */
[data-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-white {
    background-color: var(--color-card-bg) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-light {
    background-color: var(--color-surface-secondary) !important;
    color: var(--color-text) !important;
}

[data-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-dark {
    color: var(--color-text) !important;
}

/* ==========================================================================
   MASTER TABS & SUB-TABS
   ========================================================================== */
.nav-tabs {
    border-bottom: 1px solid var(--color-card-border);
    background-color: var(--color-card-bg);
}

.nav-tabs .nav-link {
    color: var(--color-muted) !important;
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.85rem 1.25rem;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--color-secondary) !important;
    background-color: rgba(125, 125, 125, 0.05);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--color-primary) !important;
    background-color: transparent !important;
    border-bottom: 3px solid var(--color-primary) !important;
}

.nav-pills .nav-link {
    color: var(--color-muted);
    font-weight: 600;
    border-radius: 0.375rem;
}

.nav-pills .nav-link.active {
    background-color: var(--color-primary);
    color: #FFFFFF !important;
}

/* ==========================================================================
   TABLES & DATA LISTS
   ========================================================================== */
.table {
    color: var(--color-text);
    border-color: var(--color-card-border);
}

.table th,
.table thead th,
.table-light th {
    background-color: var(--color-surface-secondary) !important;
    color: var(--color-secondary) !important;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--color-card-border) !important;
}

.table td {
    color: var(--color-text);
    border-color: var(--color-card-border);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(125, 125, 125, 0.08) !important;
    color: var(--color-text);
}

.table a {
    color: var(--color-link);
    font-weight: 500;
    text-decoration: none;
}

.table a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* ==========================================================================
   BADGES & STATUS CHIPS (WCAG Compliant Contrast)
   ========================================================================== */
.badge {
    font-weight: 600;
    letter-spacing: 0.25px;
    border-radius: 0.25rem;
}

/* Success Badges */
.badge.bg-success,
.badge.bg-success.bg-opacity-10 {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
[data-theme="dark"] .badge.bg-success,
[data-theme="dark"] .badge.bg-success.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.bg-success.bg-opacity-10 {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34D399 !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
}

/* Primary / Processing Badges */
.badge.bg-primary,
.badge.bg-primary.bg-opacity-10 {
    background-color: rgba(37, 99, 235, 0.15) !important;
    color: #1D4ED8 !important;
    border: 1px solid rgba(37, 99, 235, 0.35) !important;
}
[data-theme="dark"] .badge.bg-primary,
[data-theme="dark"] .badge.bg-primary.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-primary.bg-opacity-10 {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #60A5FA !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
}

/* Danger / Error Badges */
.badge.bg-danger,
.badge.bg-danger.bg-opacity-10 {
    background-color: rgba(220, 38, 38, 0.15) !important;
    color: #B91C1C !important;
    border: 1px solid rgba(220, 38, 38, 0.35) !important;
}
[data-theme="dark"] .badge.bg-danger,
[data-theme="dark"] .badge.bg-danger.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.bg-danger.bg-opacity-10 {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #F87171 !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
}

/* Warning Badges */
.badge.bg-warning,
.badge.bg-warning.bg-opacity-10 {
    background-color: rgba(217, 119, 6, 0.15) !important;
    color: #B45309 !important;
    border: 1px solid rgba(217, 119, 6, 0.35) !important;
}
[data-theme="dark"] .badge.bg-warning,
[data-theme="dark"] .badge.bg-warning.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-warning.bg-opacity-10 {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #FBBF24 !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

/* Info Badges */
.badge.bg-info,
.badge.bg-info.bg-opacity-10 {
    background-color: rgba(14, 165, 233, 0.15) !important;
    color: #0369A1 !important;
    border: 1px solid rgba(14, 165, 233, 0.35) !important;
}
[data-theme="dark"] .badge.bg-info,
[data-theme="dark"] .badge.bg-info.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.bg-info.bg-opacity-10 {
    background-color: rgba(56, 189, 248, 0.2) !important;
    color: #38BDF8 !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}

/* Secondary / Neutral Badges */
.badge.bg-secondary {
    background-color: var(--color-surface-secondary) !important;
    color: var(--color-muted) !important;
    border: 1px solid var(--color-card-border) !important;
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */
.form-control,
.form-select,
.input-group-text {
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    color: var(--color-text);
    border-radius: 0.375rem;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-card-bg);
    border-color: var(--color-primary);
    color: var(--color-text);
    box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.15);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text,
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: #0D1424 !important;
    border-color: var(--color-card-border) !important;
    color: #F8FAFC !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-control::placeholder {
    color: #64748B;
}

/* ==========================================================================
   ACCORDIONS & LIST GROUPS
   ========================================================================== */
.accordion-item {
    background-color: var(--color-card-bg);
    border-color: var(--color-card-border);
    color: var(--color-text);
}

.accordion-button {
    background-color: var(--color-card-bg);
    color: var(--color-secondary);
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    background-color: var(--color-surface-secondary);
    color: var(--color-primary);
    box-shadow: none;
}

.list-group-item {
    background-color: var(--color-card-bg);
    border-color: var(--color-card-border);
    color: var(--color-text);
}

/* ==========================================================================
   PROGRESS BARS
   ========================================================================== */
.progress {
    background-color: var(--color-surface-secondary);
    border-radius: 999px;
    overflow: hidden;
}

/* ==========================================================================
   SVG CHARTS & CONTAINERS
   ========================================================================== */
.svg-chart-box {
    background-color: var(--color-surface-secondary);
    border: 1px solid var(--color-card-border);
    border-radius: 0.5rem;
    padding: 1rem;
}

.svg-chart-box text {
    fill: var(--color-text);
}

.svg-chart-box text.text-meta {
    fill: var(--color-muted);
}

/* ==========================================================================
   STORY CARDS & EDIT CONTROLS
   ========================================================================== */
.story-card {
    border: 1px solid var(--color-card-border);
    background-color: var(--color-card-bg);
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}

.story-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

h5.card-title {
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--color-secondary);
    line-height: 1.3;
}

h5.card-title a {
    color: inherit !important;
    text-decoration: none;
}

h5.card-title a:hover {
    color: var(--color-primary) !important;
}

.edit-control-block {
    background-color: var(--color-surface-secondary);
    border: 1px solid var(--color-card-border);
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    color: var(--color-text);
}

/* Pulse animation for active AI processing */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.animate-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ── Page-specific rules, moved out of the views ──────────────────────────
   index.ejs, story.ejs, nearby.ejs and nearby-results.ejs each opened their
   own <!DOCTYPE>, <html> and <head> and then included partials/header.ejs,
   which opens all three again. Every one of those pages shipped two complete
   documents and two <title>s, which is why the tab read
   "Paikallislehti - Joensuu - Paikallislehti". The heads are gone; the CSS
   that lived in them is here.
   ──────────────────────────────────────────────────────────────────────── */

/* from views/index.ejs */
.daily-digest-banner {
            background: linear-gradient(to right, #f8f9fa, #ffffff);
            border-left: 4px solid #0d6efd !important;
        }

/* from views/story.ejs */
.audio-reader-box {
            background-color: var(--bs-tertiary-bg, #f8f9fa);
            border: 1px solid var(--bs-border-color, #dee2e6);
            transition: all 0.2s ease;
        }
        .audio-reading-active {
            border-color: #0d6efd !important;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
        }
        .developing-story-box {
            border-left: 4px solid #0d6efd;
            background-color: rgba(13, 110, 253, 0.04);
        }
        .timeline-item {
            position: relative;
            padding-left: 20px;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 6px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #6c757d;
        }
        .timeline-item.active::before {
            background-color: #0d6efd;
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
        }

/* from views/nearby-results.ejs */
#nearby-map {
            height: 380px;
            width: 100%;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            margin-bottom: 2rem;
            z-index: 1;
        }
        .distance-badge {
            background-color: #00baf1;
            color: #fff;
            font-weight: 600;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.85em;
        }
        .location-header {
            background: linear-gradient(135deg, #0d6efd 0%, #00baf1 100%);
            color: white;
            padding: 2rem;
            border-radius: 12px;
            margin-bottom: 2rem;
        }
        .radius-pill-btn {
            border-radius: 20px !important;
            padding: 0.25rem 0.75rem !important;
            font-size: 0.85rem !important;
        }


/* ==========================================================================
   THE MASTHEAD
   --------------------------------------------------------------------------
   joensuun.tienoilla.fi already reads as a Finnish sentence, so the mark only
   has to say it.

   Two blocks. The town is the variable and carries the colour; "tienoilla" is
   the constant and is a light panel set in italic. Two voices rather than two
   shouts: an offset between two identically-set words reads as a mistake, and
   an offset between two different kinds of thing reads as deliberate. Same
   reason the Guardian's masthead pairs a serif italic with a bold sans.

   GEOMETRY, and why each number is what it is:

     .34 / .17   horizontal padding, upper / lower, both measured from --fs
                 rather than from each block's own font-size. The panel's type
                 is larger, so an identical em value there would produce a
                 LARGER padding — the opposite of what is wanted.

     letters     the panel is offset by (.34 - .17), which puts the two words'
     align       first letters on one vertical line. The stagger is not chosen;
                 it is the remainder once the type lines up. It also cannot be
                 centred at any name length, because the left is pinned.

     -.16em      overlap. At 0 the mark reads as two objects; deeper than this
                 the panel starts eating the capitals.

     trim        both blocks are trimmed to cap-height and baseline, so padding
                 is measured from ink rather than from the em box. The em box
                 reserves descender space, and all-caps has no descenders, so
                 without this the block sits visibly low in its own box.

     -.035em /   the panel's own trim. "tienoilla" in italic has ascenders and
     -.205em     no descenders at all, so its ink is top-weighted: a box split
                 evenly LOOKS bottom-heavy. Optical, not geometric.
   ========================================================================== */

.masthead { margin: 0 0 2rem; }
/* In the sidebar the plate has a column to fit, not a page. */
.sidebar-column .plate { --plate-fs: clamp(1.4rem, calc(min(15rem, 22vw) / var(--len, 9) * 1.44), 2.6rem); }

.plate {
    display: inline-grid;
    justify-items: start;
    isolation: isolate;
    --plate-fs: clamp(2rem, calc(min(34rem, 76vw) / var(--len, 9) * 1.44), 5rem);
    --plate-pu: calc(var(--plate-fs) * .34);
    --plate-pl: calc(var(--plate-fs) * .17);
    --plate-vp: calc(var(--plate-fs) * .17);
}

.plate-town,
.plate-tienoilla {
    display: block;
    width: max-content;
    max-width: 100%;
    position: relative;
    line-height: 1;
}

.plate-town {
    background: var(--color-primary);
    padding: var(--plate-vp) var(--plate-pu);
    font-family: var(--font-headline);
    font-weight: 800;
    font-variation-settings: "wdth" 86;
    text-transform: uppercase;
    letter-spacing: -.012em;
    font-size: var(--plate-fs);
}
/* a folded compound: second half directly beneath the first, same block */
.plate-town + .plate-town { margin-top: .06em; }

.plate-out,
.plate-in { display: block; white-space: nowrap; }
.plate-out::before, .plate-out::after,
.plate-in::before,  .plate-in::after { content: ''; display: block; height: 0; }
.plate-out::before, .plate-in::before { margin-bottom: -.055em; }
.plate-out::after,  .plate-in::after  { margin-top: -.213em; }

/* the layer that is only ever seen ABOVE the block: the escaping diacritics */
.plate-out {
    position: absolute;
    top: var(--plate-vp);
    left: var(--plate-pu);
    color: var(--color-primary);
}
/* the reversed layer, cut off exactly where the block ends */
.plate-in {
    position: relative;
    color: #FFFFFF;
    clip-path: inset(0 -60% -60% -60%);
}

.plate-tienoilla {
    background: var(--color-masthead-panel);
    color: var(--color-masthead-panel-ink);
    padding: var(--plate-vp) var(--plate-pl);
    margin-top: -.16em;
    margin-left: calc(var(--plate-pu) - var(--plate-pl));
    box-shadow: var(--color-masthead-panel-shadow);
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.005em;
    font-size: calc(var(--plate-fs) * 1.16);
}
.plate-tienoilla::before,
.plate-tienoilla::after { content: ''; display: block; height: 0; }
.plate-tienoilla::before { margin-bottom: -.035em; }
.plate-tienoilla::after  { margin-top: -.205em; }

/* Where the browser can read the font's own metrics, say it declaratively and
   drop the hand-measured numbers above. They are correct for Archivo and
   Newsreader and for nothing else. */
@supports (text-box: trim-both cap alphabetic) {
    .plate-out, .plate-in, .plate-tienoilla { text-box: trim-both cap alphabetic; }
    .plate-out::before, .plate-out::after,
    .plate-in::before,  .plate-in::after,
    .plate-tienoilla::before, .plate-tienoilla::after { margin: 0; }
}

.masthead-dateline {
    margin: 1rem 0 0;
    font-family: var(--font-headline);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   THE NAVBAR MARK
   --------------------------------------------------------------------------
   The same mark one line high: the town in its block, "tienoilla" plain in the
   same face beside it. A different lockup here would mean the bar carried a
   different mark from the page it sits on.

   Both parts are inline-block so they share a baseline. As plain inlines with
   padding they do not - padding on an inline does not move its baseline - which
   is what made the two words sit crooked.
   ========================================================================== */

.navbar-mark {
    display: inline-flex;
    align-items: baseline;
    gap: .3em;
    text-decoration: none;
    line-height: 1;
}
.navbar-mark:hover { text-decoration: none; }

.navbar-mark-town,
.navbar-mark-tienoilla {
    display: inline-block;
    vertical-align: baseline;
    font-family: var(--font-headline);
    font-weight: 800;
    font-variation-settings: "wdth" 86;
    text-transform: uppercase;
    letter-spacing: -.012em;
    font-size: 1rem;
    line-height: 1;
}
.navbar-mark-town {
    background: var(--color-primary);
    color: #FFFFFF;
    padding: .17em .28em .21em;
}
/* The masthead's second voice, at bar size. Not the same face as the town:
   the nameplate pairs a bold sans with a serif italic, and a bar that used one
   voice for both would be carrying a different mark from the page it sits on.

   No escaping diacritics here. At this size the dots would be a couple of
   pixels above a block that is itself only a few tall, which is fussy rather
   than characterful — the flourish belongs to the nameplate. */
.navbar-mark-tienoilla {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    font-variation-settings: normal;
    text-transform: none;
    letter-spacing: -.005em;
    font-size: 1.16rem;
    color: var(--color-navbar-text);
    padding: .17em 0 .21em;
    margin-left: .1em;
}

.navbar-change {
    font-family: var(--font-headline);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    margin-left: 1rem;
}

/* The count on a topic chip. Without it every topic promises the same, and half of
   them promise a single story. */
.tag-count {
    margin-left: .4em;
    opacity: .65;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}
.tag-more {
    border: 1px solid var(--color-card-border);
    color: var(--color-primary) !important;
    background: transparent;
}


/* ==========================================================================
   CHROME THAT SURVIVES A SCROLL
   --------------------------------------------------------------------------
   Two faults, one cause. On desktop the mark appeared twice - once as the
   nameplate above the topics, once in the bar - and scrolling past the top
   left the reader with no chrome at all: no way back, no topics, no search.

   So the bar sticks, and its mark is the nameplate's understudy: hidden while
   the nameplate is on screen, revealed the moment it leaves. One mark visible
   at a time, and something always in reach.
   ========================================================================== */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
}

@media (min-width: 768px) {
    /* The bar's mark waits offstage while the nameplate is doing the naming.
       Only on desktop: the sidebar - and so the nameplate - is not rendered on
       narrow screens, where the bar is the only mark there is. */
    .navbar-mark {
        opacity: 0;
        transform: translateY(-.35em);
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease;
    }
    body.masthead-hidden .navbar-mark {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    /* Topics stay with the reader instead of scrolling away with the top of
       the page. align-self is load-bearing: a stretched flex item is full
       height, and a sticky box cannot move inside its own full height. */
    .sidebar-column {
        position: sticky;
        top: 4.5rem;
        align-self: flex-start;
        max-height: calc(100vh - 5.5rem);
        overflow-y: auto;
        scrollbar-width: thin;
    }
    /* Once the bar has taken over the naming, the nameplate's own space in the
       sidebar is dead weight; the topics move up into it. */
    body.masthead-hidden .sidebar-column .masthead {
        display: none;
    }
}

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