/* ============================================================
   TERRITORIAL CHRONICLES  ·  Broadsheet design system
   Shared across the front page and every article.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Playfair+Display:ital,wght@0,400;0,700;0,800;0,900;1,400;1,700;1,900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Oswald:wght@300;400;500;600;700&display=swap');

:root {
    --paper: #f3eede;
    --paper-2: #faf6ea;
    --ink: #1a1712;
    --ink-soft: #423b2d;
    --muted: #6d6553;
    --faint: #8b8271;
    --rule: #c9bfa5;
    --rule-strong: #1a1712;
    --accent: #8c1913;
    --accent-deep: #5f0f0a;
    --serif: 'PT Serif', Georgia, 'Times New Roman', serif;
    --display: 'Playfair Display', Georgia, serif;
    --gothic: 'UnifrakturCook', 'Playfair Display', serif;
    --label: 'Oswald', 'Arial Narrow', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--serif);
    background-color: var(--paper);
    color: var(--ink);
    line-height: 1.5;
    background-image:
        radial-gradient(circle at 12% 20%, rgba(80, 60, 20, 0.035) 0, transparent 45%),
        radial-gradient(circle at 88% 12%, rgba(80, 60, 20, 0.03) 0, transparent 45%),
        radial-gradient(circle at 70% 85%, rgba(80, 60, 20, 0.03) 0, transparent 45%);
}

a { color: inherit; }

.paper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 clamp(18px, 3.5vw, 68px) 64px;
}

/* Article pages: full-bleed too, but text flows into readable newspaper columns */
.paper--narrow { max-width: 100%; }

/* ---------- Utility strip ---------- */
.util-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--label);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 13px 0 11px;
}

.util-bar .brand-mini { display: flex; align-items: center; gap: 10px; }
.util-bar .brand-mini img { width: 22px; height: 22px; border-radius: 3px; object-fit: cover; }

.btn-ink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: var(--paper-2);
    text-decoration: none;
    font-family: var(--label);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 2px;
    transition: background 0.2s;
}
.btn-ink:hover { background: var(--accent); }

/* ---------- Masthead ---------- */
.masthead {
    text-align: center;
    border-top: 4px double var(--rule-strong);
    border-bottom: 4px double var(--rule-strong);
    padding: 24px 0 22px;
}

.masthead .flourish {
    font-family: var(--label);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

.nameplate {
    font-family: var(--gothic);
    font-weight: 700;
    font-size: clamp(2.9rem, 9vw, 6.4rem);
    line-height: 0.92;
    letter-spacing: 0.01em;
    color: var(--ink);
    text-decoration: none;
    display: block;
}

.masthead .tagline {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(0.95rem, 2vw, 1.18rem);
    color: var(--ink-soft);
    margin-top: 16px;
}

/* Compact masthead for article pages */
.masthead--sm { padding: 16px 0 14px; }
.masthead--sm .nameplate { font-size: clamp(1.9rem, 6vw, 3.2rem); }
.masthead--sm .flourish { margin-bottom: 8px; }

/* ---------- Folio line ---------- */
.folio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--label);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 9px 2px;
    border-bottom: 1px solid var(--rule-strong);
}
.folio .center { color: var(--accent); font-weight: 600; }

/* ---------- Section navigation bar ---------- */
.sectionnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 3px double var(--rule-strong);
}
.sectionnav a {
    font-family: var(--label);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    padding: 13px 26px;
    border-right: 1px solid var(--rule);
    transition: background 0.2s, color 0.2s;
}
.sectionnav a:first-child { border-left: 1px solid var(--rule); }
.sectionnav a:hover { background: var(--ink); color: var(--paper-2); }
@media (max-width: 640px) {
    .sectionnav a { padding: 10px 15px; font-size: 0.7rem; letter-spacing: 0.12em; }
}

/* Clan tag badge (used for the clan literally named "0", which reads oddly in serif) */
.clan-zero {
    display: inline-block;
    font-family: var(--label);
    font-weight: 600;
    font-size: 0.68em;
    letter-spacing: 0.04em;
    line-height: 1;
    border: 0.13em solid currentColor;
    border-radius: 0.2em;
    padding: 0.14em 0.34em 0.1em;
    vertical-align: 0.16em;
}

/* ---------- Kickers / labels ---------- */
.kicker {
    font-family: var(--label);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.kicker::after { content: ''; width: 34px; height: 1px; background: var(--accent); opacity: 0.5; }

/* ---------- Section band ---------- */
.band { display: flex; align-items: center; gap: 20px; margin: 0 0 26px; }
.band::before, .band::after { content: ''; flex: 1; height: 1px; background: var(--rule-strong); }
.band h2 {
    font-family: var(--label);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink);
}

/* ---------- Back link ---------- */
.backlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--label);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
}
.backlink:hover { color: var(--accent); }

/* ---------- Article ---------- */
.dateline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--label);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 14px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 34px;
}

.article-head { text-align: center; margin: 40px 0 30px; }

.article-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(2.2rem, 5.5vw, 3.8rem);
    line-height: 1.03;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 14px 0 16px;
}

.article-subhead {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.05rem, 2.2vw, 1.32rem);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 42em;
    margin: 0 auto;
}

.rule-orn {
    text-align: center;
    color: var(--accent);
    font-size: 1.1rem;
    letter-spacing: 0.5em;
    margin: 0 0 30px;
}

.prose {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--ink-soft);
    column-width: 20rem;
    column-gap: 2.6rem;
    column-rule: 1px solid var(--rule);
    column-fill: balance;
    orphans: 3;
    widows: 3;
    text-align: justify;
}
.prose p { margin-bottom: 18px; text-align: justify; hyphens: auto; }
.prose p:first-of-type::first-letter {
    initial-letter: 3;
    -webkit-initial-letter: 3;
    font-family: var(--display);
    font-weight: 900;
    font-size: 3.2em;
    line-height: 0.78;
    float: left;
    padding: 6px 12px 0 0;
    color: var(--accent);
}
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--accent-deep); }

.prose h2 {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.55rem;
    line-height: 1.2;
    color: var(--ink);
    margin: 34px 0 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
}

.prose ul { margin: 0 0 20px 1.3em; break-inside: avoid; }
.prose li { margin-bottom: 9px; padding-left: 4px; }
.prose li::marker { color: var(--accent); }

/* Elements that break out of the column flow and span the full page */
.prose h2,
.prose .subhead-label,
.prose .callout,
.prose .figure {
    column-span: all;
}
.prose .figure,
.prose .callout { break-inside: avoid; }
/* On a single narrow column, restore comfortable heading spacing */
@media (max-width: 640px) {
    .prose { column-width: auto; column-count: 1; column-rule: none; }
}

.subhead-label {
    font-family: var(--label);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 34px 0 14px;
}

/* Figures */
.figure { margin: 28px 0; text-align: center; break-inside: avoid; }
.figure img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    border: 1px solid var(--ink);
    padding: 7px;
    background: var(--paper-2);
    box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--rule);
    filter: saturate(0.9) contrast(1.03);
}
/* Lead / hero photo sits under the headline, prominent but never upscaled */
.figure.lead { margin: 0 auto 32px; }
.figure.lead img { width: 100%; max-width: 1080px; }
/* Two photos side by side */
.figure.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: initial; align-items: start; }
.figure.duo img { width: 100%; }
.figcaption {
    font-family: var(--label);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 10px auto 0;
    max-width: 1080px;
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
}
.figure.duo .figcaption { grid-column: 1 / -1; }

/* Pull quote / call-out box */
.callout {
    border-top: 3px solid var(--rule-strong);
    border-bottom: 3px double var(--rule-strong);
    padding: 26px 30px;
    margin: 34px 0;
    text-align: center;
    background: rgba(255,255,255,0.35);
}
.callout .q {
    font-family: var(--display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--ink);
}
.callout .q-sub { font-family: var(--label); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }

/* ---------- Colophon / footer ---------- */
.colophon {
    text-align: center;
    margin-top: 48px;
    padding-top: 22px;
    border-top: 4px double var(--rule-strong);
    font-family: var(--label);
    font-size: 0.76rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.colophon a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 1px;
    transition: color 0.2s;
}
.colophon a:hover { color: var(--accent); }

/* ============================================================
   DATA REPORT COMPONENTS  ·  used by profile / stats / comparison pages
   ============================================================ */

.report-head { text-align: center; margin: 38px 0 8px; }
.report-head .article-title { margin-top: 12px; }

/* Section header with kicker + rule */
.report-section { margin: 46px 0 22px; }
.report-section .sec-kicker {
    font-family: var(--label);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}
.report-section .sec-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    padding-bottom: 12px;
    border-bottom: 3px double var(--rule-strong);
}
.report-section .sec-note {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.98rem;
    color: var(--muted);
    margin-top: 8px;
}

/* Stat strip (framed boxes) */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 2px solid var(--rule-strong);
    background: var(--paper-2);
}
.stat-box { padding: 24px 20px; text-align: center; border-right: 1px solid var(--rule); }
.stat-strip .stat-box:last-child { border-right: none; }
.stat-box .s-label {
    font-family: var(--label);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
}
.stat-box .s-val {
    font-family: var(--display);
    font-weight: 900;
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 8px;
}
.stat-box .s-val .arrow { color: var(--faint); font-size: 0.7em; margin: 0 4px; }
.stat-box .s-val .was { color: var(--faint); }
.stat-box .s-desc { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.4; }
.pill { display: inline-block; font-family: var(--label); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; padding: 3px 10px; border: 1px solid; border-radius: 2px; }
.pill.down { color: var(--accent); border-color: var(--accent); }
.pill.up { color: #2f6b2f; border-color: #2f6b2f; }

/* Chart frame */
.fig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.fig-grid.one { grid-template-columns: 1fr; }
.fig-card {
    border: 2px solid var(--rule-strong);
    background: var(--paper-2);
    padding: 26px 26px 22px;
}
.fig-card.wide { grid-column: 1 / -1; }
.fig-card .f-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--ink);
    margin-bottom: 4px;
}
.fig-card .f-note { font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--muted); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.chart-box { position: relative; height: 320px; }
.chart-box.tall { height: 420px; }
.chart-box.short { height: 250px; }
.fig-legend { display: flex; justify-content: center; gap: 26px; margin-top: 18px; flex-wrap: wrap; }
.fig-legend .li { display: flex; align-items: center; gap: 8px; font-family: var(--label); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.fig-legend .dot { width: 12px; height: 12px; border-radius: 50%; }

/* Ledger (data table list) */
.ledger { border: 2px solid var(--rule-strong); background: var(--paper-2); padding: 8px 26px 18px; }
.ledger .l-title {
    font-family: var(--label);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 16px 0 12px;
    border-bottom: 2px solid var(--rule-strong);
    margin-bottom: 4px;
}
.l-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.l-row:last-child { border-bottom: none; }
.l-name { font-family: var(--serif); font-size: 1rem; color: var(--ink-soft); }
.l-vals { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); }
.l-val { font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.l-val.was { color: var(--faint); font-weight: 700; }
.l-sub { font-family: var(--label); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--muted); }
.l-arrow { color: var(--faint); font-family: var(--label); }
.l-tag { font-family: var(--label); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; padding: 2px 8px; border: 1px solid; border-radius: 2px; }
.l-tag.down { color: var(--accent); border-color: var(--accent); }
.l-tag.up { color: #2f6b2f; border-color: #2f6b2f; }

/* Metric band (framed number boxes) */
.metric-band { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--rule-strong); background: var(--ink); color: var(--paper-2); }
.metric-box { padding: 28px 22px; text-align: center; border-right: 1px solid rgba(255,255,255,0.18); }
.metric-band .metric-box:last-child { border-right: none; }
.metric-box .m-label { font-family: var(--label); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #cbc3ad; margin-bottom: 14px; }
.metric-box .m-val { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--paper-2); }
.metric-box .m-val .was { opacity: 0.5; }
.metric-box .m-val .arrow { opacity: 0.4; font-size: 0.7em; margin: 0 4px; }
.metric-box .m-sub { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.04em; color: #b7ae97; }
.metric-box .m-sub.down { color: #e6a39c; }
.metric-box .m-sub.up { color: #a9d0a3; }

/* Tag row (recent activity) */
.tag-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; border: 2px solid var(--rule-strong); background: var(--paper-2); padding: 24px; }
.tag { font-family: var(--label); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); padding: 10px 20px; border-radius: 2px; }

/* Verdict box */
.verdict {
    border: 3px double var(--rule-strong);
    background: var(--ink);
    color: var(--paper-2);
    text-align: center;
    padding: 50px 40px;
}
.verdict .v-label { font-family: var(--label); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: #cbc3ad; margin-bottom: 18px; }
.verdict .v-grade { font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 8vw, 5rem); line-height: 1; letter-spacing: -0.02em; margin-bottom: 18px; color: var(--paper-2); }
.verdict .v-text { font-family: var(--serif); font-size: 1.08rem; line-height: 1.65; color: #ddd4bf; max-width: 46em; margin: 0 auto; }
.verdict .v-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; margin-top: 30px; }
.verdict .v-stat .vs-val { font-family: var(--display); font-weight: 800; font-size: 1.6rem; }
.verdict .v-stat .vs-label { font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #b7ae97; margin-top: 4px; }
.verdict .v-note { margin-top: 26px; font-family: var(--label); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: #b7ae97; }

/* Candidate cards (elections) */
.cand-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.cand { width: 210px; border: 2px solid var(--rule-strong); background: var(--paper-2); padding: 24px; text-align: center; }
.cand.win { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cand .c-photo { width: 108px; height: 108px; margin: 0 auto 16px; border: 2px solid var(--rule-strong); object-fit: cover; filter: saturate(0.9) contrast(1.02); }
.cand.win .c-photo { border-color: var(--accent); }
.cand .c-name { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.cand .c-nick { font-family: var(--label); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--muted); margin: 4px 0 14px; }
.cand .c-role { font-family: var(--label); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 12px; border: 1px solid var(--rule-strong); border-radius: 2px; display: inline-block; }
.cand.win .c-role { background: var(--accent); color: var(--paper-2); border-color: var(--accent); }
.cand.co .c-role { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }

/* Timeline (voting rounds) */
.rounds { display: flex; flex-direction: column; gap: 14px; }
.round { display: grid; grid-template-columns: 90px 1fr; gap: 18px; align-items: center; }
.round .r-label { font-family: var(--label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-size: 0.9rem; }
.round .r-body { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border: 1px solid var(--rule-strong); background: var(--paper-2); padding: 14px 20px; }
.round .r-votes { display: flex; gap: 22px; }
.round .r-v .rv-num { font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--ink); }
.round .r-v .rv-name { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.round .r-elim { font-family: var(--label); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--accent); border: 1px solid var(--accent); padding: 4px 10px; border-radius: 2px; }
.round .r-elim.win { color: #2f6b2f; border-color: #2f6b2f; }

/* Announcement split (elections) */
.announce { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; border: 2px solid var(--rule-strong); background: var(--paper-2); padding: 30px; }
.announce img { width: 100%; border: 1px solid var(--rule-strong); }
.announce .a-quote { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.3rem; line-height: 1.5; color: var(--ink); border-left: 3px solid var(--accent); padding-left: 22px; }
.announce .a-label { font-family: var(--label); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }

.showcase-img { width: 100%; border: 2px solid var(--rule-strong); padding: 6px; background: var(--paper-2); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .fig-grid { grid-template-columns: 1fr; }
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
    .stat-box:nth-child(2) { border-right: none; }
    .metric-band { grid-template-columns: 1fr; }
    .metric-box { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.18); }
    .announce { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .paper { padding: 0 22px 48px; }
    .figure.duo { grid-template-columns: 1fr; }
    .prose { font-size: 1.06rem; }
    .util-bar { flex-direction: column; gap: 12px; }
    .folio { justify-content: center; text-align: center; }
    .dateline { justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
    .stat-strip { grid-template-columns: 1fr; }
    .stat-box { border-right: none; border-bottom: 1px solid var(--rule); }
    .round { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================================
   NEWSPAPER FLOURISHES  ·  top rule + refinements
   ============================================================ */
body { border-top: 6px solid var(--ink); box-shadow: inset 0 8px 0 var(--paper), inset 0 9px 0 var(--accent); }

/* Masthead "ears" that flank the nameplate on wide screens */
.masthead { position: relative; }
.ear {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    font-family: var(--label);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.7;
}
.ear.left { left: 4px; text-align: left; border-left: 2px solid var(--accent); padding-left: 12px; }
.ear.right { right: 4px; text-align: right; border-right: 2px solid var(--accent); padding-right: 12px; }
.ear span { display: block; }
.ear strong { display: block; color: var(--ink); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.1em; margin-bottom: 2px; }
@media (max-width: 1080px) { .ear { display: none; } }

/* ============================================================
   ENTRANCE ANIMATIONS
   ============================================================ */
@keyframes np-down  { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes np-up    { from { opacity: 0; transform: translateY(30px); }  to { opacity: 1; transform: none; } }
@keyframes np-left  { from { opacity: 0; transform: translateX(-52px); } to { opacity: 1; transform: none; } }
@keyframes np-right { from { opacity: 0; transform: translateX(52px); }  to { opacity: 1; transform: none; } }
@keyframes np-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes np-pop   { from { opacity: 0; transform: scale(0.93); } to { opacity: 1; transform: none; } }

/* Article + report pages: staggered entrance on load */
.util-bar        { animation: np-down 0.55s ease-out both; }
.masthead        { animation: np-down 0.7s 0.05s ease-out both; }
.masthead .nameplate { animation: np-pop 0.85s 0.12s ease-out both; display: block; }
.dateline        { animation: np-left 0.7s 0.2s ease-out both; }
.article-head,
.report-head     { animation: np-up 0.75s 0.28s ease-out both; }
.rule-orn        { animation: np-fade 1s 0.5s both; }
.prose           { animation: np-up 0.8s 0.42s ease-out both; }
.analysis        { animation: np-left 0.8s 0.42s ease-out both; }
.announce        { animation: np-pop 0.8s 0.42s ease-out both; }

/* Report sections alternate the side they arrive from */
.stat-strip      { animation: np-up 0.75s 0.46s ease-out both; }
.report-section  { animation: np-fade 0.7s ease-out both; }
.fig-grid        { animation: np-up 0.7s ease-out both; }
.metric-band     { animation: np-pop 0.7s ease-out both; }
.cand-row > .cand { animation: np-up 0.6s ease-out both; }
.cand-row > .cand:nth-child(1) { animation-delay: 0.05s; }
.cand-row > .cand:nth-child(2) { animation-delay: 0.13s; }
.cand-row > .cand:nth-child(3) { animation-delay: 0.21s; }
.cand-row > .cand:nth-child(4) { animation-delay: 0.29s; }
.cand-row > .cand:nth-child(5) { animation-delay: 0.37s; }
.round           { animation: np-left 0.6s ease-out both; }
.round:nth-child(2) { animation-delay: 0.08s; }
.round:nth-child(3) { animation-delay: 0.16s; }
.round:nth-child(4) { animation-delay: 0.24s; }
.verdict         { animation: np-up 0.8s ease-out both; }

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