/* =============================================================================
 * App/Main/Publish/assets/app.css — public news site
 *
 * One accent variable drives everything; layout.php overrides --pub-accent
 * from the public_theme_color setting and the darker shades derive from it
 * via color-mix(), so a single hex changes the whole site.
 * ========================================================================== */

:root {
    --pub-accent: #b91c1c;
    --pub-accent-dark: color-mix(in srgb, var(--pub-accent) 78%, black);
    --pub-ink: #1f2328;
    --pub-ink-soft: #5b6472;
    --pub-line: #e7e3dd;
    /* Cards need a harder edge than the hairlines do. --pub-line is tuned for
       rules that should almost disappear (header, footer, field borders); on a
       white card against a near-white page it vanished completely on dimmer
       screens, so the card outline gets its own, darker value. */
    --pub-card-line: #c8c1b6;
    --pub-bg: #fffdfa;
    --pub-bg-soft: #f6f2ec;
    --pub-radius: 6px;
    --pub-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --pub-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --pub-max: 1120px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--pub-bg);
    color: var(--pub-ink);
    font-family: var(--pub-sans);
    font-size: 16px;
    line-height: 1.6;
}

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

.pub-container { max-width: var(--pub-max); margin: 0 auto; padding: 0 20px; }
.pub-narrow { max-width: 720px; }
.pub-muted { color: var(--pub-ink-soft); }
.pub-empty { color: var(--pub-ink-soft); padding: 48px 0; text-align: center; }

/* ------------------------------- header ---------------------------------- */

/* No hard rule under the header — the hero already provides the edge, and a
   2px near-black line read as a stray border sitting on top of it. */
.pub-header {
    border-bottom: 1px solid transparent;
    background: var(--pub-bg);
    position: sticky;
    top: 0;
    z-index: 20;
}
/* Once the page scrolls under it, a hairline keeps the header readable. */
.pub-header.is-stuck { border-bottom-color: var(--pub-line); }

.pub-header-inner {
    max-width: var(--pub-max);
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.pub-logo {
    font-family: var(--pub-serif);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.pub-nav { display: flex; gap: 16px; margin-right: auto; }

.pub-nav a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pub-ink-soft);
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}
.pub-nav a:hover { color: var(--pub-ink); }
.pub-nav a.is-active { color: var(--pub-accent); border-bottom-color: var(--pub-accent); }

.pub-header-actions { display: flex; align-items: center; gap: 8px; }

.pub-lang {
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    padding: 6px 8px;
    font: inherit;
    font-size: 13px;
    background: var(--pub-bg);
}

/* ------------------------------- buttons --------------------------------- */

.pub-btn {
    display: inline-block;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    background: var(--pub-bg);
    color: var(--pub-ink);
    padding: 8px 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
}
.pub-btn:hover { border-color: var(--pub-ink-soft); }

.pub-btn-primary {
    background: var(--pub-accent);
    border-color: var(--pub-accent);
    color: #fff;
}
.pub-btn-primary:hover { background: var(--pub-accent-dark); border-color: var(--pub-accent-dark); }

.pub-btn-ghost { background: transparent; }
.pub-btn.is-on { border-color: var(--pub-accent); color: var(--pub-accent); }

/* ------------------------------- filters --------------------------------- */

.pub-filters {
    padding: 20px 0;
    border-bottom: 1px solid var(--pub-line);
    margin-bottom: 28px;
}

.pub-filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pub-filter-row + .pub-filter-row { margin-top: 10px; }
.pub-filter-row-secondary select,
.pub-filter-row-secondary input { font-size: 14px; }

.pub-search {
    flex: 1 1 260px;
    min-width: 0;
    padding: 10px 12px;
    font: inherit;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
}
.pub-search:focus,
.pub-filters select:focus,
.pub-filters input:focus {
    outline: 2px solid color-mix(in srgb, var(--pub-accent) 45%, white);
    outline-offset: 1px;
}

.pub-filters select,
.pub-filters input[type="date"] {
    padding: 8px 10px;
    font: inherit;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    background: var(--pub-bg);
    max-width: 100%;
}

.pub-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pub-ink-soft); }

/* -------------------------------- cards ---------------------------------- */

/* Card grid.
 *
 * Twelve tracks: full 12, half 6, third 4 — so the default (third) is three
 * across. A card is ALWAYS the width its post asked for; nothing is widened
 * to close a gap, because a card stretched to fill a hole is a size nobody
 * chose and reads as a layout bug.
 *
 * `dense` lets a later card drop into an earlier hole when it genuinely fits
 * — which is what keeps mixed-size rows tight. Note it can therefore place a
 * newer card after an older one to fill a row; with uniform sizes (the
 * default) it never reorders anything.
 */
.pub-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: row dense;
    gap: 24px;
}
.pub-card-full  { grid-column: span 12; }
.pub-card-half  { grid-column: span 6; }
.pub-card-third { grid-column: span 4; }

/* A third is too narrow to read below the desktop breakpoint: thirds and
   halves both become half rows, full stays full. */
@media (max-width: 1000px) {
    .pub-card-full  { grid-column: span 12; }
    .pub-card-half  { grid-column: span 6; }
    .pub-card-third { grid-column: span 6; }
}
@media (max-width: 640px) {
    .pub-grid { gap: 18px; }
    .pub-card-full, .pub-card-half, .pub-card-third { grid-column: span 12; }
}

.pub-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--pub-card-line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: var(--pub-ink);
    /* A tight dark shadow under the border does the work the border alone
       could not: the card still reads as a card on a washed-out display. */
    box-shadow: 0 1px 2px rgba(31, 35, 40, .10), 0 6px 16px rgba(31, 35, 40, .07);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pub-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--pub-accent) 55%, var(--pub-card-line));
    box-shadow: 0 12px 26px rgba(31, 35, 40, .14);
}

.pub-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background-color: var(--pub-bg-soft);
    background-size: cover;
    background-position: center;
}
/* No image? Keep the band, warm it up — never collapse to bare text. */
.pub-card-media.is-empty {
    background-image:
        radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--pub-accent) 16%, white), transparent),
        linear-gradient(135deg, var(--pub-bg-soft), #ece6dd);
}
.pub-card-kind {
    position: absolute; top: 12px; left: 12px;
    background: rgba(255, 255, 255, .94);
    color: var(--pub-accent);
    font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.pub-card-body {
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px 18px 18px;
    flex: 1;
}
.pub-card-date {
    font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--pub-ink-soft);
}
.pub-card-title {
    font-family: var(--pub-serif);
    font-size: 20px; line-height: 1.25; letter-spacing: -.01em;
    font-weight: 700;
}
.pub-card:hover .pub-card-title { color: var(--pub-accent); }
.pub-card-summary { color: var(--pub-ink-soft); font-size: 15px; line-height: 1.55; }
.pub-card-more {
    margin-top: auto; padding-top: 6px;
    font-size: 13px; font-weight: 600; color: var(--pub-accent);
}

/* Lead story: same card, wider, image beside the text on roomy screens. */
.pub-card-lead { grid-column: span 12; }   /* legacy alias */
@media (min-width: 800px) {
    .pub-card-lead, .pub-card-full { flex-direction: row; }
    .pub-card-lead .pub-card-media,
    .pub-card-full .pub-card-media { flex: 0 0 55%; aspect-ratio: 16 / 9; }
    .pub-card-lead .pub-card-body,
    .pub-card-full .pub-card-body { justify-content: center; padding: 28px 30px; gap: 10px; }
    .pub-card-lead .pub-card-title,
    .pub-card-full .pub-card-title { font-size: 30px; }
    .pub-card-lead .pub-card-summary,
    .pub-card-full .pub-card-summary { font-size: 16px; }
    /* A half-width card sits between the two: stacked, but roomier type. */
    .pub-card-half .pub-card-title { font-size: 22px; }
}

/* -------------------------------- pager ---------------------------------- */

.pub-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 40px 0;
    font-size: 14px;
}
.pub-pager a { text-decoration: none; font-weight: 600; }
.pub-pager a:hover { color: var(--pub-accent); }

/* ------------------------------- article --------------------------------- */

.pub-article { padding: 32px 0 8px; }

/* Back to the list the reader arrived from. Quiet by default — it is a way
   out, not a call to action — and it gains the accent on hover. */
.pub-backlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pub-ink-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}
.pub-backlink:hover { color: var(--pub-accent); }
.pub-backlink svg { flex: 0 0 auto; transition: transform .15s; }
.pub-backlink:hover svg { transform: translateX(-2px); }
@media (prefers-reduced-motion: reduce) {
    .pub-backlink svg { transition: none; }
    .pub-backlink:hover svg { transform: none; }
}

.pub-article-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.pub-article-title {
    font-family: var(--pub-serif);
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
@media (max-width: 720px) { .pub-article-title { font-size: 30px; } }

.pub-article-date {
    color: var(--pub-ink-soft);
    font-size: 14px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--pub-line);
}

/* The hero sits inside the narrow reading column but is allowed to grow past
   it, up to the page width — a banner held to 720px reads as a figure. The
   negative margins are capped by the viewport clamp so it can never overflow
   on a phone. */
.pub-article-hero {
    --pub-hero-bleed: min(140px, calc((100vw - 40px - 720px) / 2));
    margin: 0 calc(var(--pub-hero-bleed) * -1) 26px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--pub-bg-soft);
    border: 1px solid var(--pub-card-line);
}
.pub-article-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 800px) {
    .pub-article-hero { --pub-hero-bleed: 0px; border-radius: 10px; margin-bottom: 20px; }
}

.pub-article-lead {
    font-size: 19px;
    line-height: 1.55;
    color: var(--pub-ink-soft);
    margin: 0 0 24px;
}

.pub-save-form { margin: 0 0 24px; }

.pub-article-body { font-family: var(--pub-serif); font-size: 18px; line-height: 1.75; }
.pub-article-body p { margin: 0 0 1.15em; }
.pub-article-body a { color: var(--pub-accent); }

/* =============================================================================
 * Blocks emitted by pl_posts_render_block()
 *
 * These selectors track the RENDERER, not the old block vocabulary. When the
 * plugin moved to title/text/images/link/video/map/dates/contact, this file
 * still styled .pp-heading, .pp-images, .pp-divider and .pp-video-frame —
 * class names the renderer had stopped emitting — so most of the article body
 * fell back to browser defaults. Keep the two in step.
 * ========================================================================== */

.pp-block { margin: 0 0 1.4em; }

/* ---- title ---- */
.pp-title { font-family: var(--pub-serif); line-height: 1.25; margin: 1.6em 0 .5em; }
h2.pp-title { font-size: 26px; }
h3.pp-title { font-size: 21px; }
h4.pp-title { font-size: 18px; }
.pp-align-left { text-align: left; }
.pp-align-center { text-align: center; }
.pp-align-right { text-align: right; }
/* An anchor target sitting under the sticky header would be hidden by it. */
.pp-title[id] { scroll-margin-top: 84px; }

/* ---- article index (built from the title elements) ---- */
.pp-index {
    font-family: var(--pub-sans);
    border: 1px solid var(--pub-line);
    border-left: 3px solid var(--pub-accent);
    border-radius: var(--pub-radius);
    background: var(--pub-bg-soft);
    padding: 16px 20px;
    margin: 0 0 28px;
}
.pp-index-title {
    font-family: var(--pub-sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pub-ink-soft);
    margin: 0 0 10px;
    font-weight: 700;
}
.pp-index-list { margin: 0; padding: 0; list-style: none; counter-reset: ppidx; }
.pp-index-item { margin: 0; padding: 3px 0; font-size: 15px; line-height: 1.4; }
.pp-index-item a { color: inherit; text-decoration: none; }
.pp-index-item a:hover { color: var(--pub-accent); text-decoration: underline; }
/* Depth mirrors the heading level the author chose. */
.pp-index-lvl2 { padding-left: 16px; font-size: 14px; }
.pp-index-lvl3 { padding-left: 32px; font-size: 14px; }
.pp-index-lvl4 { padding-left: 48px; font-size: 13px; }

/* ---- text ---- */
.pp-text > :first-child { margin-top: 0; }
.pp-text > :last-child { margin-bottom: 0; }
.pp-text ul, .pp-text ol { padding-left: 1.4em; margin: 0 0 1.15em; }
.pp-text li { margin: 0 0 .35em; }
.pp-text h2, .pp-text h3, .pp-text h4 { font-family: var(--pub-serif); line-height: 1.25; }
.pp-text pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    background: var(--pub-bg-soft);
    border-radius: var(--pub-radius);
    padding: 12px 14px;
    overflow-x: auto;
}
.pp-text code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }

/* ---- quote ---- */
.pp-quote {
    margin: 1.6em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--pub-accent);
    font-size: 21px;
    font-style: italic;
}
.pp-quote p { margin: 0; }
.pp-quote cite {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    font-style: normal;
    color: var(--pub-ink-soft);
    font-family: var(--pub-sans);
}

/* ---- images: single figure ---- */
.pp-figure { margin: 1.6em 0; }
.pp-figure img { border-radius: var(--pub-radius); width: 100%; }
.pp-figure figcaption,
.pp-caption {
    font-family: var(--pub-sans);
    font-size: 13px;
    color: var(--pub-ink-soft);
    margin-top: 8px;
}

/* ---- images: carousel ---- */
.pp-carousel { margin: 1.6em 0; }
.pp-carousel-main { position: relative; border-radius: var(--pub-radius); overflow: hidden; background: var(--pub-bg-soft); }
.pp-carousel-slide { display: none; }
.pp-carousel-slide.is-active { display: block; }
.pp-carousel-slide img { width: 100%; }
.pp-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: var(--pub-radius);
}
.pp-carousel-nav.prev { left: 10px; }
.pp-carousel-nav.next { right: 10px; }
.pp-carousel-nav:hover { background: rgba(0, 0, 0, .75); }
.pp-carousel-counter {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-family: var(--pub-sans);
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 999px;
}
.pp-carousel-thumbs { display: flex; gap: 8px; overflow-x: auto; margin-top: 8px; }
.pp-carousel-thumb {
    flex: 0 0 auto;
    border: 2px solid transparent;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: var(--pub-radius);
    overflow: hidden;
    line-height: 0;
}
.pp-carousel-thumb.is-active { border-color: var(--pub-accent); }
.pp-carousel-thumb img { width: 72px; height: 54px; object-fit: cover; }

/* ---- link ---- */
.pp-linkwrap { margin: 1.6em 0; font-family: var(--pub-sans); }
.pp-link-btn {
    display: inline-block;
    background: var(--pub-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 11px 20px;
    border-radius: var(--pub-radius);
}
.pp-link-btn:hover { background: var(--pub-accent-dark); }
.pp-link-inline { color: var(--pub-accent); font-weight: 600; }

/* ---- video ---- */
.pp-video {
    position: relative;
    padding-top: 56.25%;
    border-radius: var(--pub-radius);
    overflow: hidden;
    background: #000;
    margin: 1.6em 0;
}
.pp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pp-video-title { font-family: var(--pub-sans); font-weight: 600; margin: 1.6em 0 .5em; }

/* ---- map ---- */
.pp-map {
    height: 340px;
    margin: 1.6em 0;
    border-radius: var(--pub-radius);
    border: 1px solid var(--pub-line);
    overflow: hidden;
}
/* Leaflet writes its own font sizes; keep them off the article's serif scale. */
.pp-map, .pp-map * { font-family: var(--pub-sans); }

/* ---- dates calendar ---- */
.pp-cal-wrap { font-family: var(--pub-sans); margin: 1.6em 0; }
.pp-cal-title { font-size: 16px; font-weight: 600; margin: 0 0 10px; }
.pp-cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pp-cal-nav-title { font-weight: 600; font-size: 14px; min-width: 150px; }
.pp-cal-prev, .pp-cal-next {
    border: 1px solid var(--pub-line);
    background: var(--pub-bg);
    border-radius: var(--pub-radius);
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
}
.pp-cal-prev:disabled, .pp-cal-next:disabled { opacity: .4; cursor: default; }
.pp-cal { display: none; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 340px; }
.pp-cal.is-active { display: grid; }
.pp-cal-wd { font-size: 11px; color: var(--pub-ink-soft); text-align: center; padding: 4px 0; }
.pp-cal-day {
    text-align: center;
    font-size: 13px;
    padding: 7px 0;
    border-radius: var(--pub-radius);
    border: 1px solid var(--pub-line);
}
.pp-cal-day.is-blank { border-color: transparent; }
.pp-cal-day.is-on {
    background: var(--pub-accent);
    border-color: var(--pub-accent);
    color: #fff;
    font-weight: 700;
}

/* ---- contact ---- */
.pp-contact {
    font-family: var(--pub-sans);
    margin: 1.8em 0;
    padding: 20px;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    background: var(--pub-bg-soft);
}
.pp-contact-intro { margin: 0 0 12px; }
.pp-contact-form textarea {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    padding: 10px 12px;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    background: var(--pub-bg);
    resize: vertical;
    margin-bottom: 10px;
}
.pp-contact-form button { border: 0; cursor: pointer; }

.pp-hint { font-family: var(--pub-sans); font-size: 13px; color: var(--pub-ink-soft); }


/* --------------------------------- tags ---------------------------------- */

.pub-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; }

.pub-chip {
    display: inline-block;
    font-family: var(--pub-sans);
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--pub-line);
    border-radius: 999px;
    color: var(--pub-ink-soft);
}
.pub-chip:hover { border-color: var(--pub-accent); color: var(--pub-accent); }

/* ------------------------------- comments -------------------------------- */

.pp-comments-section { padding: 12px 0 60px; }
.pp-comments-section h2 { font-family: var(--pub-serif); font-size: 22px; margin: 0 0 16px; }

.pub-comment-form { margin: 0 0 28px; }
.pub-comment-form textarea {
    width: 100%;
    padding: 12px;
    font: inherit;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    resize: vertical;
}
.pub-comment-form-actions { display: flex; gap: 8px; margin-top: 8px; }

.pp-comments { list-style: none; margin: 0; padding: 0; }
.pp-comments-nested {
    margin-top: 14px;
    padding-left: 18px;
    border-left: 2px solid var(--pub-line);
}
/* Deep threads stop indenting instead of running off the screen. */
.pp-comments-nested .pp-comments-nested .pp-comments-nested .pp-comments-nested {
    padding-left: 8px;
    border-left-style: dotted;
}

.pp-comment { padding: 14px 0; border-top: 1px solid var(--pub-line); }
.pp-comments-nested > .pub-comment:first-child { border-top: 0; padding-top: 0; }

.pp-comment-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 13px;
    color: var(--pub-ink-soft);
}
.pp-comment-author { font-weight: 700; color: var(--pub-ink); }
.pp-comment-body { margin: 6px 0; }
.pp-comment-removed { color: var(--pub-ink-soft); font-style: italic; }

.pp-comment-actions { display: flex; gap: 6px; align-items: center; }

.pp-vote, .pp-reply-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--pub-radius);
    padding: 3px 8px;
    font: inherit;
    font-size: 13px;
    color: var(--pub-ink-soft);
    cursor: pointer;
}
.pp-vote:hover:not(:disabled),
.pp-reply-btn:hover { border-color: var(--pub-line); color: var(--pub-ink); }
.pp-vote:disabled { cursor: default; opacity: .55; }
.pp-vote.is-on { color: var(--pub-accent); border-color: var(--pub-accent); font-weight: 700; }

/* -------------------------------- account -------------------------------- */

.pub-panel {
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    padding: 20px;
    margin: 0 0 24px;
}
.pub-panel h2 { font-family: var(--pub-serif); font-size: 19px; margin: 0 0 14px; }

.pub-label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }

.pub-panel input[type="text"],
.pub-panel select,
.pub-login-form input[type="email"] {
    width: 100%;
    max-width: 380px;
    padding: 10px 12px;
    font: inherit;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
}
.pub-panel button, .pub-login-form button { margin-top: 14px; }

.pub-my-comments { list-style: none; margin: 0; padding: 0; }
.pub-my-comments li { padding: 14px 0; border-top: 1px solid var(--pub-line); }
.pub-my-comment-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.pub-my-comment-body { margin: 6px 0; color: var(--pub-ink-soft); }

.pub-badge {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--pub-line);
}
.pub-badge-visible { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.pub-badge-flagged { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.pub-badge-removed { color: #7f1d1d; border-color: #fecaca; background: #fef2f2; }

/* -------------------------------- flashes -------------------------------- */

.pub-flash {
    padding: 12px 14px;
    border-radius: var(--pub-radius);
    margin: 16px 0;
    font-size: 15px;
}
.pub-flash.ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.pub-flash.err { background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; }

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

.pub-footer { border-top: 1px solid var(--pub-line); margin-top: 40px; padding: 28px 0; }
.pub-footer-inner {
    max-width: var(--pub-max);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--pub-ink-soft);
}
.pub-footer-links { display: flex; gap: 16px; }
.pub-footer-links a { text-decoration: none; }
.pub-footer-links a:hover { color: var(--pub-accent); }

/* ---------------------------- cookie notice ------------------------------ */

.pub-cookie {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 50;
    max-width: 620px;
    margin: 0 auto;
    background: var(--pub-ink);
    color: #f3f4f6;
    border-radius: var(--pub-radius);
    padding: 16px 18px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
.pub-cookie p { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 1.5; }
.pub-cookie a { color: #fff; }
.pub-cookie form { margin: 0; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ---------------------------- offline page ------------------------------- */

.pub-offline-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(1200px 400px at 50% -10%, color-mix(in srgb, var(--pub-accent) 10%, white), transparent),
        var(--pub-bg);
    padding: 24px;
}
.pub-offline { max-width: 460px; text-align: center; }
.pub-offline-mark {
    width: 76px; height: 76px; margin: 0 auto 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--pub-accent);
    background: color-mix(in srgb, var(--pub-accent) 8%, white);
    border: 1px solid color-mix(in srgb, var(--pub-accent) 22%, white);
}
.pub-offline h1 {
    font-family: var(--pub-serif);
    font-size: 30px; letter-spacing: -0.02em; margin: 0 0 6px;
}
.pub-offline h2 {
    font-size: 15px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: var(--pub-accent); margin: 0 0 14px;
}
.pub-offline p { margin: 0; color: var(--pub-ink-soft); font-size: 16px; line-height: 1.6; }

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

.pub-legal { padding: 32px 0 60px; }
.pub-legal h1 { font-family: var(--pub-serif); font-size: 32px; letter-spacing: -0.02em; margin: 0 0 20px; }
.pub-legal-fields { margin: 0 0 28px; padding: 18px 20px; border: 1px solid var(--pub-line); border-radius: var(--pub-radius); }
.pub-legal-fields dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--pub-ink-soft); margin-top: 12px; }
.pub-legal-fields dd { margin: 2px 0 0; }
.pub-legal-address { margin: 0 0 4px !important; font-weight: 600; line-height: 1.5; }
.pub-legal-body { font-family: var(--pub-serif); font-size: 17px; line-height: 1.75; }
.pub-legal-body h2 { font-size: 22px; margin: 1.6em 0 .4em; }
.pub-legal-body h3 { font-size: 18px; margin: 1.4em 0 .4em; }
.pub-legal-body a { color: var(--pub-accent); }

/* header logo */
.pub-logo-img { max-height: 34px; width: auto; }

/* footer legal menu — deliberately subtle */
.pub-footer-links a { color: var(--pub-ink-soft); font-size: 13px; }
.pub-footer-links a:hover, .pub-footer-links a.is-active { color: var(--pub-accent); }


/* =============================================================================
 * Hero, category tiles, filter popup — the warm landing treatment
 * ========================================================================== */

.pub-hero {
    background: linear-gradient(135deg, var(--pub-accent), color-mix(in srgb, var(--pub-accent) 55%, #111827));
    color: #fff;
    padding: 72px 20px 78px;
    text-align: center;
}
.pub-hero.has-image { background-size: cover; background-position: center; }
/* Whatever comes first after the hero — the category row on a full index, the
   cards directly when there are no categories — starts well clear of it. The
   cards used to butt straight against the hero image on a filtered view. */
.pub-hero + .pub-container { margin-top: 48px; }
@media (max-width: 640px) { .pub-hero + .pub-container { margin-top: 30px; } }
.pub-hero-inner { max-width: 760px; margin: 0 auto; }
.pub-hero h1 {
    font-family: var(--pub-serif);
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.pub-hero-sub { font-size: 17px; opacity: .93; margin: 0 auto 26px; max-width: 560px; }

.pub-hero-search { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pub-hero-search input[type="search"] {
    flex: 1 1 340px;
    max-width: 520px;
    padding: 14px 18px;
    border: none;
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    background: #fff;
    color: var(--pub-ink);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.pub-icon-btn {
    position: relative;
    width: 48px; height: 48px;
    display: inline-grid; place-items: center;
    border: none; border-radius: 10px;
    background: rgba(255,255,255,.92);
    color: var(--pub-ink);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    transition: transform .12s, background .12s;
}
.pub-icon-btn:hover { transform: translateY(-1px); background: #fff; }
.pub-icon-btn.primary { background: var(--pub-accent); color: #fff; }
.pub-icon-btn.ghost { box-shadow: none; background: transparent; width: 34px; height: 34px; font-size: 16px; }
.pub-icon-badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--pub-accent); color: #fff;
    font-size: 11px; font-weight: 700; display: grid; place-items: center;
}

/* category tiles — cards, not a dropdown. They sit BELOW the hero, and wrap
   onto a second row; anything past the cap goes to the » tile / its own page. */
/* Top spacing now belongs to the container (see `.pub-hero + .pub-container`),
   so the gap under the hero is identical whether or not this row is drawn. */
.pub-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 0 0 30px;
}
.pub-cat-tile {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--pub-card-line);
    border-radius: 10px;
    text-decoration: none;
    color: var(--pub-ink);
    box-shadow: 0 2px 8px rgba(31,35,40,.05);
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.pub-cat-tile:hover { border-color: var(--pub-accent); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(31,35,40,.08); }
.pub-cat-tile.is-on { border-color: var(--pub-accent); box-shadow: inset 0 0 0 1px var(--pub-accent); }
.pub-cat-label { font-weight: 600; font-size: 14px; }
.pub-cat-count {
    background: var(--pub-bg-soft); color: var(--pub-ink-soft);
    padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
}

/* active filter pills */
.pub-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pub-pill {
    display: inline-block; padding: 5px 12px; border-radius: 999px;
    background: var(--pub-bg-soft); border: 1px solid var(--pub-line);
    font-size: 13px; color: var(--pub-ink-soft); text-decoration: none;
}
.pub-pill-clear { color: var(--pub-accent); border-color: color-mix(in srgb, var(--pub-accent) 35%, var(--pub-line)); }
.pub-pill:hover { border-color: var(--pub-accent); }

/* filter popup */
.pub-modal {
    display: none;
    position: fixed; inset: 0; z-index: 60;
    background: rgba(20,22,26,.5);
    backdrop-filter: blur(2px);
    padding: 20px;
}
.pub-modal.is-open { display: grid; place-items: center; }
.pub-modal-box {
    width: min(520px, 100%);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
    overflow: hidden;
}
.pub-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--pub-line);
}
.pub-modal-body { padding: 18px; display: grid; gap: 16px; }
.pub-field { display: grid; gap: 6px; }
.pub-field > span { font-size: 13px; font-weight: 600; color: var(--pub-ink-soft); }
.pub-field select, .pub-field input[type="date"] {
    padding: 10px 12px; font: inherit; border: 1px solid var(--pub-line);
    border-radius: 8px; background: #fff; width: 100%;
}
.pub-daterow { display: flex; align-items: center; gap: 8px; }
.pub-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pub-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding-top: 4px; border-top: 1px solid var(--pub-line); margin-top: 4px; padding-top: 14px;
}

/* cards get a little warmth and lift */


/* ------------------------- period range slider --------------------------- */

.pub-period { gap: 10px; }

.pub-slider { position: relative; height: 34px; margin: 2px 4px 0; }

.pub-slider-track {
    position: absolute; left: 0; right: 0; top: 15px; height: 4px;
    background: var(--pub-bg-soft);
    border: 1px solid var(--pub-line);
    border-radius: 999px;
}
.pub-slider-fill {
    position: absolute; top: -1px; height: 4px;
    background: var(--pub-accent);
    border-radius: 999px;
}
/* today's mark sits dead centre — the axis runs two years either way */
.pub-slider-today {
    position: absolute; left: 50%; top: 8px; width: 2px; height: 18px;
    background: color-mix(in srgb, var(--pub-accent) 45%, white);
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Two range inputs stacked on one track: the tracks are transparent and only
   the thumbs take pointer events, so both handles stay grabbable. */
.pub-slider-in {
    position: absolute; left: 0; right: 0; top: 6px;
    width: 100%; height: 22px; margin: 0;
    background: none; -webkit-appearance: none; appearance: none;
    pointer-events: none;
}
.pub-slider-in:focus { outline: none; }
.pub-slider-in::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 2px solid var(--pub-accent);
    box-shadow: 0 2px 6px rgba(31,35,40,.18);
    cursor: grab; pointer-events: auto;
}
.pub-slider-in::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 2px solid var(--pub-accent);
    box-shadow: 0 2px 6px rgba(31,35,40,.18);
    cursor: grab; pointer-events: auto;
}
.pub-slider-in:active::-webkit-slider-thumb { cursor: grabbing; }
.pub-slider-in::-webkit-slider-runnable-track { background: none; }
.pub-slider-in::-moz-range-track { background: none; }

.pub-slider-out {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 13px; font-weight: 600; color: var(--pub-ink);
}
.pub-slider-out output {
    background: var(--pub-bg-soft); border: 1px solid var(--pub-line);
    border-radius: 8px; padding: 5px 10px; min-width: 108px; text-align: center;
}
.pub-slider-dash { color: var(--pub-ink-soft); }

.pub-quick button.pub-pill { cursor: pointer; font: inherit; font-size: 13px; }
.pub-quick .pub-pill.is-on { border-color: var(--pub-accent); color: var(--pub-accent); }

/* » overflow tile and the all-categories page */
.pub-cat-more .pub-cat-label { font-size: 18px; line-height: 1; color: var(--pub-accent); }
.pub-cat-more { justify-content: center; gap: 10px; }
.pub-cats-page { padding-top: 32px; }
.pub-cats-page h1 { font-family: var(--pub-serif); font-size: 30px; letter-spacing: -.02em; margin: 0 0 4px; }

/* ------------------------------- charts ---------------------------------- */
/* Chart.js canvases embedded in article content. The wrapper owns the size:
   Chart.js resizes to its container, and a canvas with no bounded parent
   grows on every resize event. */
.pp-chart {
    position: relative;
    margin: 1.8em 0;
    height: 340px;
}
.pp-chart canvas { width: 100% !important; height: 100% !important; }
.pp-chart-caption {
    font-family: var(--pub-sans);
    font-size: 13px;
    color: var(--pub-ink-soft);
    margin-top: 8px;
}
/* The JSON config lives in the markup; it must never be shown. */
.pp-chart-config { display: none; }

@media (max-width: 640px) {
    .pp-chart { height: 260px; }
}

/* --------------------- article not available in language ------------------ */
.pub-nolang {
    text-align: center;
    padding: 40px 24px;
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    background: var(--pub-bg-soft);
}
.pub-nolang h1 {
    font-family: var(--pub-serif);
    font-size: 26px;
    margin: 0 0 12px;
}
.pub-nolang p { margin: 0 0 8px; color: var(--pub-ink-soft); }
.pub-nolang-avail { margin-top: 20px !important; font-weight: 600; color: var(--pub-ink) !important; }
.pub-nolang-langs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.pub-nolang .pub-backlink { justify-content: center; margin: 0; }

/* ------------------------------ references -------------------------------- */

/* Barely there while reading, unmistakable once looked for: a muted
   superscript that only takes colour on hover, focus or when open. */
.pp-ref-wrap { position: relative; display: inline-block; vertical-align: baseline; }
.pp-ref-mark {
    border: 0;
    background: none;
    padding: 0 1px;
    margin: 0 1px;
    font: inherit;
    line-height: 1;
    color: var(--pub-ink-soft);
    opacity: .55;
    cursor: pointer;
}
.pp-ref-mark sup { font-size: .72em; }
.pp-ref-mark:hover,
.pp-ref-mark:focus-visible,
.pp-ref-mark[aria-expanded="true"] { opacity: 1; color: var(--pub-accent); }

/* The element-level mark (※): everything the author left untokened, parked
   at the end of the element rather than mid-sentence. */
.pp-refs-tail { display: block; text-align: right; margin: .2em 0 1.2em; }

/* Pre-rendered, hidden markup — no fetch. CSS opens it on hover and on
   keyboard focus, so it still works with the script gone; the script adds
   click/tap, which is the only way in on touch. */
.pp-ref-pop {
    display: none;
    position: absolute;
    z-index: 30;
    left: 0;
    top: 1.7em;
    min-width: 240px;
    max-width: min(360px, 86vw);
    padding: 10px 12px;
    text-align: left;
    white-space: normal;
    background: var(--pub-bg);
    border: 1px solid var(--pub-line);
    border-radius: var(--pub-radius);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
    font-family: var(--pub-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--pub-ink);
}
.pp-ref-wrap:hover > .pp-ref-pop,
.pp-ref-wrap:focus-within > .pp-ref-pop,
.pp-ref-wrap.is-open > .pp-ref-pop { display: block; }
/* A tail mark sits at the right edge; opening leftwards keeps it on screen. */
.pp-refs-tail > .pp-ref-pop { left: auto; right: 0; }

.pp-ref-item { display: block; }
.pp-ref-item + .pp-ref-item {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--pub-line);
}
.pp-ref-num { font-size: 11px; font-weight: 700; color: var(--pub-ink-soft); margin-right: 4px; }
.pp-ref-label { display: block; font-weight: 600; }
.pp-ref-note { display: block; color: var(--pub-ink-soft); margin-top: 2px; }
.pp-ref-act {
    display: inline-block;
    margin-top: 6px;
    color: var(--pub-accent);
    font-weight: 600;
    text-decoration: none;
}
.pp-ref-act:hover { text-decoration: underline; }

/* On a phone an absolutely positioned popover ends up half off-screen, so it
   becomes a sheet pinned to the bottom instead. */
@media (max-width: 560px) {
    .pp-ref-pop,
    .pp-refs-tail > .pp-ref-pop {
        position: fixed;
        left: 12px;
        right: 12px;
        top: auto;
        bottom: 12px;
        max-width: none;
    }
}