/* ================================================================
   THE FENCE LINE — Newspaper Stylesheet
   Seegars Fence Company, April 2026
   ================================================================ */

/* ─── CSS Custom Properties — Carolina summer palette ─────────────
   August 2026: the flag palette retires with July. Deep sky over a hot
   afternoon — ocean blue as the primary, sun gold and sunset coral as the
   accents. The --usa-* names are kept only so older rules keep resolving;
   they no longer hold flag colors. */
:root {
    /* ─── AUTUMN 2026 ───────────────────────────────────────────────────
       The newsletter is re-skinned each season and the variable NAMES are
       kept, so "usa-blue" is simply whatever the primary is this time.
       Rename nothing; change values here and the whole issue follows.

       This season is burnt olive, red mahogany and toffee on ecru — the
       three things every fall 2026 forecast agrees on (muted earthy greens
       leading, chocolate/toffee browns, oxblood and clay reds, and warm
       off-whites instead of crisp white).

       Olive is doing double duty: it is the season's dominant colour AND
       it sits next to the Seegars green, so the issue reads autumnal
       without the masthead looking like another company's. */

    --usa-blue: #405227;              /* burnt olive — PRIMARY */
    --usa-blue-bright: #6B7F3A;       /* moss, for hovers and links */
    --usa-red: #9A3B2C;               /* red mahogany */
    --usa-red-bright: #C4632F;        /* muted clay */
    --usa-white: #FFFCF5;

    /* Brand colors (variable names kept for compatibility) */
    --seegars-green: #405227;         /* PRIMARY — burnt olive */
    --seegars-green-light: #9A3B2C;   /* ACCENT — red mahogany */
    --seegars-green-dark: #2E3B1B;    /* deeper olive for hover/active */

    /* Surfaces & paper — ecru and bone, never optic white */
    --paper-bg: #FBF4E6;              /* warm bone — never optic white */
    --paper-bg-dark: #D9C7A4;         /* toasted sand outer surround */
    --cream: #F2E5CA;                 /* ecru paper panel surface */
    --surface-elevated: #FEFAF1;
    --surface-warm: #EEDFC0;          /* toasted panel */

    /* Ink (text) — warm toffee-black rather than a cold grey */
    --ink: #2B2418;
    --ink-light: #4A4133;
    --ink-faded: #7C7060;

    /* Accent aliases (variable names kept for backward compatibility) */
    --sepia: #9A3B2C;                 /* mahogany accents & links */
    --sepia-light: #C4632F;
    --sepia-rule: #E2D4B8;            /* warm sand rule */
    --purple: #8A6A1F;                /* eyebrow — acacia, the season's yellow */
    --purple-light: #C9A227;

    /* Rules */
    --rule-thin: 1px solid #4A4133;
    --rule-thick: 3px solid #405227;
    --rule-double: 4px double #9A3B2C;
    --rule-sepia: 1px solid var(--sepia-rule);

    --font-masthead: 'UnifrakturMaguntia', cursive;
    --font-headline: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Lora', 'Source Serif 4', Georgia, serif;
    --font-label: 'Oswald', 'Arial Narrow', sans-serif;

    --max-width: 1200px;
    --gutter: 24px;
}

/* ─── Dark mode (SeegarsONE palette inverted) ─── */
:root[data-theme="dark"] {
    --paper-bg: #1A1712;
    --paper-bg-dark: #110F0B;
    --cream: #241F18;
    --surface-elevated: #2F2A21;
    --surface-warm: #29241C;

    --ink: #D9C7A4;
    --ink-light: #CFC7B6;
    --ink-faded: #A09683;

    --seegars-green: #A3B86B;         /* olive, lifted for dark ground */
    --seegars-green-light: #D98C5F;   /* clay */
    --seegars-green-dark: #7E9350;

    --sepia: #D98C5F;
    --sepia-light: #E8A87C;
    --sepia-rule: #3A362C;
    --purple: #C9A227;                /* acacia */
    --purple-light: #DCBB4A;

    --rule-thin: 1px solid #3D372C;
    --rule-thick: 3px solid #4E4738;
    --rule-double: 4px double #3D372C;
}

/* Smooth crossfade when toggling */
html { transition: background-color 0.25s ease; }
body { transition: background-color 0.25s ease, color 0.25s ease; }

/* ─── Reset & Base ─── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Scoped to the newsletter root instead of body/a so these rules can't
   restyle the rest of Seegars One if the stylesheet is ever co-loaded. */
.newsletter-root {
    min-height: 100vh;
    font-family: var(--font-body);
    color: var(--ink);
    background-color: var(--paper-bg-dark);
    line-height: 1.7;
}

.newsletter-root a {
    color: var(--sepia);
    transition: color 0.2s;
}
.newsletter-root a:hover {
    color: var(--seegars-green);
}

/* ─── Paper Container ─── */
.newspaper {
    max-width: var(--max-width);
    margin: 0 auto;
    background-color: var(--paper-bg);
    position: relative;
    /* Lifted off the light-grey body — a crisp halo on all edges (so the
       sides read as raised) plus a soft downward cast for depth. */
    box-shadow:
        0 0 0 1px rgba(20, 33, 61, 0.06),
        0 0 13px rgba(20, 33, 61, 0.18),
        0 14px 34px rgba(20, 33, 61, 0.16),
        0 30px 80px rgba(20, 33, 61, 0.12);
}

/* Paper texture overlay */
.newspaper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(139, 115, 85, 0.015) 2px,
            rgba(139, 115, 85, 0.015) 4px
        );
    mix-blend-mode: multiply;
}

/* Faint watermark */
.newspaper::after {
    content: 'SFC';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-family: var(--font-headline);
    font-size: 20vw;
    font-weight: 900;
    color: rgba(139, 115, 85, 0.03);
    pointer-events: none;
    z-index: 0;
    letter-spacing: 0.2em;
}

.newspaper > * {
    position: relative;
    z-index: 2;
}

/* ─── Page curl effect ─── */
@supports (background: conic-gradient(red, blue)) {
    .newspaper {
        position: relative;
    }
    .newspaper-footer::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 60px;
        height: 60px;
        background: linear-gradient(
            225deg,
            var(--paper-bg-dark) 0%,
            var(--paper-bg-dark) 45%,
            #d4cfc5 50%,
            transparent 50%
        );
        box-shadow: -2px -2px 5px rgba(0,0,0,.08);
        z-index: 10;
    }
}

/* ================================================================
   MASTHEAD
   ================================================================ */
.masthead {
    padding: 0 var(--gutter);
    z-index: 10;
}

.masthead-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px var(--gutter);
    font-family: var(--font-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ink-faded);
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--paper-bg);
    box-shadow: 0 1px 0 transparent;
    transition: box-shadow 0.2s;
}

.masthead-top-bar.stuck {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.masthead-social {
    display: flex;
    gap: 12px;
}

.social-link {
    color: var(--ink-faded);
    text-decoration: none;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
}

.social-link:hover {
    color: var(--seegars-green);
}

.social-icon-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.4);
    transition: filter 0.2s;
}

.social-link:hover .social-icon-img {
    filter: none;
}

/* Reader count in masthead top bar */
.reader-count-sep {
    color: var(--sepia-rule);
    margin: 0 2px;
}

.reader-count {
    font-family: var(--font-label);
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sepia);
    white-space: nowrap;
}

.home-link {
    color: var(--ink-faded);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.2em;
    transition: color 0.2s;
}

.home-link:hover {
    color: var(--seegars-green);
}

.masthead-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-btn {
    background: none;
    border: none;
    font-family: var(--font-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 500;
    color: var(--ink-faded);
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.nav-dropdown-btn:hover {
    color: var(--seegars-green);
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--paper-bg);
    border: 1px solid var(--sepia);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    z-index: 1000;
    padding: 6px 0;
}

.nav-dropdown-menu a {
    display: block;
    padding: 8px 16px;
    font-family: var(--font-label);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-faded);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.nav-dropdown-menu a:hover {
    background: var(--sepia-bg);
    color: var(--seegars-green);
}

.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}

.masthead-edition {
    font-weight: 500;
    color: var(--sepia);
}

/* Masthead Rules */
.masthead-rule-thin {
    border: none;
    border-top: var(--rule-thin);
}

.masthead-rule-thick {
    border: none;
    border-top: var(--rule-thick);
    margin: 0;
}

.masthead-rule-double {
    border: none;
    border-top: var(--rule-double);
}

/* Company name above nameplate */
.masthead-company {
    text-align: center;
    font-family: var(--font-label);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--purple);
    padding-top: 14px;
}

/* Nameplate */
.masthead-nameplate {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 8px 0 6px;
}

.nameplate-title {
    font-family: var(--font-headline);
    font-size: clamp(2.8rem, 8vw, 5.5rem);
    font-weight: 900;
    text-align: center;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    /* Gradient filling the letters — olive into acacia into mahogany, the
       autumn 2026 palette. Replaces the flag photo (retired with the July
       issue); a gradient is also one less image for a phone to download.

       HARDCODED, NOT VARIABLES — so a seasonal re-skin has to change it here
       as well, or the masthead keeps wearing last season while everything
       under it moves on. It also animates across 220% of its own width, so
       the visible colours shift over 16s; judge it over a few seconds rather
       than from one screenshot. */
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(100deg,
        #3E4A26 0%, #6B7F3A 20%, #9BA84A 38%,
        #C9A227 58%, #C4632F 78%, #8C2F27 100%);
    background-size: 220% 220%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 1px 1px rgba(43, 36, 24, 0.4));
    animation: nameplate-heat-shimmer 16s ease-in-out infinite;
}

@keyframes nameplate-heat-shimmer {
    0%   { background-position: 0% 42%; }
    50%  { background-position: 100% 58%; }
    100% { background-position: 0% 42%; }
}

@media (prefers-reduced-motion: reduce) {
    .nameplate-title {
        animation: none;
        background-position: 35% 50%;
    }
}

.nameplate-ornament {
    font-size: 1.2rem;
    color: var(--purple);
    flex-shrink: 0;
}

/* Info line */
.masthead-info {
    text-align: center;
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-faded);
    padding: 6px 0 10px;
}

.masthead-dot {
    margin: 0 8px;
    color: var(--sepia);
}

/* Motto bar */
.masthead-motto-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    gap: 0;
    flex-wrap: wrap;
    font-family: var(--font-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-faded);
    text-align: center;
}

.motto-item {
    white-space: nowrap;
}

.motto-dot {
    margin: 0 10px;
    color: var(--sepia);
}

/* ================================================================
   FOLD INDICATOR
   ================================================================ */
.fold-indicator {
    position: relative;
    height: 1px;
    margin: 0 var(--gutter);
    margin-bottom: 20px;
    overflow: visible;
}

.fold-text {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-label);
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--sepia-rule);
    background: var(--paper-bg);
    padding: 0 12px;
    white-space: nowrap;
}

/* ================================================================
   COMMON ARTICLE STYLES
   ================================================================ */

/* Headlines */
.headline {
    font-family: var(--font-headline);
    color: var(--ink);
    line-height: 1.15;
    font-weight: 900;
}

.headline-lead {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin-bottom: 6px;
    text-align: center;
    white-space: nowrap;
}

.headline-subtitle {
    font-family: var(--font-headline);
    font-style: italic;
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--ink-faded);
    text-align: left;
    margin-bottom: 12px;
    line-height: 1.4;
}

.article-subheading {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--seegars-green);
    margin: 1.2em 0 0.4em;
    line-height: 1.3;
}

.headline-sidebar {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    margin-bottom: 8px;
    line-height: 1.25;
}

.headline-feature {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin-bottom: 14px;
    position: relative;
    padding-bottom: 10px;
}

/* Lime accent underline beneath every featured headline */
.headline-feature::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg,
        var(--seegars-green) 0%,
        var(--seegars-green-light) 100%);
    border-radius: 2px;
}

/* Center the accent under titles that are themselves centered (full-width sections) */
.tech-talk-header .headline-feature::after,
.celebrations-header .headline-feature::after {
    left: 50%;
    transform: translateX(-50%);
}

.headline-section {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    margin-bottom: 8px;
    white-space: nowrap;
}

/* Article meta / bylines */
.article-meta {
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: var(--rule-sepia);
}

.byline {
    font-family: var(--font-label);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faded);
}

.byline strong {
    color: var(--ink);
    font-weight: 600;
}

.byline-title {
    color: var(--seegars-green);
}

/* Dateline */
.dateline {
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Article body */
.article-body {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

.article-body p {
    margin-bottom: 1em;
    font-size: 0.95rem;
    line-height: 1.75;
}

/* Multi-column body for Tech Talk */
.article-body-columns {
    column-count: 2;
    column-gap: var(--gutter);
    column-rule: var(--rule-sepia);
}

/* Drop caps */
.has-dropcap::first-letter {
    float: left;
    font-family: var(--font-headline);
    font-size: 4.2em;
    line-height: 0.8;
    font-weight: 900;
    padding-right: 8px;
    padding-top: 6px;
    color: var(--ink);
}

/* Section banners */
.section-banner {
    display: inline-block;
    background: none;
    color: var(--ink);
    padding: 0;
    margin-bottom: 12px;
    font-family: var(--font-label);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.banner-safety {
    background: none;
}

.banner-tech {
    background: none;
}

/* Pull quotes */
.pull-quote {
    margin: 1.5em 1em;
    padding: 0.8em 1.2em 0.8em 1.4em;
    border-top: 1px solid var(--sepia-rule);
    border-bottom: 1px solid var(--sepia-rule);
    border-left: 4px solid var(--seegars-green-light);
    font-family: var(--font-headline);
    font-style: italic;
    font-size: 1.45rem;
    line-height: 1.5;
    color: var(--purple);
    text-align: center;
    background: linear-gradient(90deg,
        rgba(10, 49, 97, 0.08) 0%,
        rgba(179, 25, 66, 0.05) 30%,
        transparent 70%);
}

/* Contributor headshots */
.contributor-headshot {
    float: left;
    width: 75px;
    height: 75px;
    object-fit: cover;
    object-position: center top;
    margin: 4px 12px 8px 0;
    padding: 0;
    border-radius: 50%;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.35));
    shape-outside: margin-box;
    transition: filter 0.25s ease;
}

[data-theme="dark"] .contributor-headshot {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.55));
}

/* A co-written piece: the authors' photos sit side by side where one
   contributor's photo would, and the text wraps around the pair. */
.contributor-headshots {
    float: left;
    display: flex;
    gap: 6px;
    margin: 4px 12px 8px 0;
}

.contributor-headshots .contributor-headshot {
    float: none;
    margin: 0;
}

/* Section dividers */
.section-divider {
    text-align: center;
    padding: 16px 0;
    margin: 0 var(--gutter);
    position: relative;
}

/* Lime-into-green gradient line that runs behind the ornament */
.section-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--sepia-rule) 18%,
        var(--seegars-green-light) 48%,
        var(--seegars-green) 52%,
        var(--sepia-rule) 82%,
        transparent 100%);
    z-index: 0;
}

.divider-ornament {
    font-size: 0.9rem;
    color: var(--seegars-green);
    letter-spacing: 0.3em;
    font-family: 'Segoe UI Symbol', 'Apple Symbols', sans-serif;
    text-decoration: none;
    position: relative;
    z-index: 1;
    background: var(--paper-bg);
    padding: 0 14px;
}

.divider-ornament * {
    font-variant-emoji: text;
}

/* Scroll fade animation */
.section-fade {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.section-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================================
   SKYBOX BANNER — Newspaper "refer" strip
   ================================================================ */
.skybox-banner {
    background: linear-gradient(180deg,
        rgba(10, 49, 97, 0.10) 0%,
        rgba(179, 25, 66, 0.06) 100%);
    border-top: 3px solid var(--seegars-green);
    border-bottom: 3px solid var(--seegars-green-light);
    padding: 5px var(--gutter);
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
}

[data-theme="dark"] .skybox-banner {
    background: linear-gradient(180deg,
        rgba(0, 184, 110, 0.18) 0%,
        rgba(0, 184, 110, 0.06) 100%);
}

.skybox-divider {
    color: var(--purple);
    font-size: 0.7rem;
    opacity: 0.6;
}

@media (max-width: 720px) {
    .skybox-divider { display: none; }
}

.skybox-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-label);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: color 0.2s;
}

.skybox-link:hover {
    color: var(--seegars-green);
}

.skybox-label {
    font-weight: 700;
    color: var(--purple);
}

.skybox-sep {
    color: var(--sepia-rule);
    font-weight: 300;
}

.skybox-text {
    font-weight: 400;
}

.skybox-text strong {
    font-weight: 700;
    color: var(--seegars-green-dark);
}

/* ─── CEO Letter Sign-off ─── */
.ceo-sign-off {
    text-align: left;
    font-style: italic;
    font-family: var(--font-body);
    margin-top: 0.8em;
    font-size: 1.05rem;
    color: var(--ink-light);
}

/* ================================================================
   ABOVE THE FOLD — Lead Story + Sidebar
   ================================================================ */
.above-fold {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 0;
    padding: 0 var(--gutter);
    margin-top: 16px;
}

.lead-story-area {
    padding-right: var(--gutter);
    border-right: var(--rule-sepia);
    min-width: 0;
}

.sidebar-area {
    padding-left: var(--gutter);
    min-width: 0;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Lead story body in two columns */
.lead-body {
    column-count: 2;
    column-gap: var(--gutter);
    column-rule: var(--rule-sepia);
}

/* Subsection boxes within the lead story */
.subsections-row {
    column-span: all;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 1em;
    padding-top: 1em;
    border-top: var(--rule-sepia);
}

.subsection-box {
    padding: 12px;
    border: var(--rule-sepia);
    background: var(--cream);
}

.subsection-box h4 {
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 6px;
    color: var(--seegars-green);
}

.subsection-box p {
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
}

/* ─── SPIRIT Contest ─── */
.contest-prize {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--seegars-green);
    text-align: center;
    margin-bottom: 12px;
}

.spirit-image-wrapper {
    margin-top: 1.2em;
    text-align: center;
}

.spirit-image-float {
    float: right;
    width: 45%;
    margin: 0 0 4px 16px;
    text-align: center;
}

.spirit-logo {
    max-width: 100%;
    height: auto;
    border: var(--rule-sepia);
    padding: 8px;
    background: #fff;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
}

.spirit-logo:hover,
.spirit-logo:focus-visible {
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
    transform: scale(1.01);
    outline: 2px solid var(--seegars-green);
    outline-offset: 2px;
}

.spirit-image-caption {
    font-family: var(--font-label);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faded);
    margin-top: 6px;
}

/* ─── Lightbox (click to enlarge) ─── */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.lightbox.active {
    display: flex;
}

.newspaper.lightbox-open {
    filter: blur(6px);
    pointer-events: none;
}

.lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 4px 40px rgba(0,0,0,.5);
    background: #fff;
    padding: 10px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2.5rem;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    font-weight: 300;
    transition: color 0.2s;
}

.lightbox-close:hover {
    color: var(--sepia-light);
}

.lightbox-prev,
.lightbox-next {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.5rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    cursor: pointer;
    padding: 12px 16px;
    line-height: 1;
    z-index: 10001;
    transition: background 0.2s;
    border-radius: 2px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(0, 0, 0, 0.7);
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox.has-gallery .lightbox-prev,
.lightbox.has-gallery .lightbox-next {
    display: block;
}

@media (max-width: 767px) {
    .lightbox-prev,
    .lightbox-next {
        font-size: 1.8rem;
        padding: 8px 12px;
    }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
}

/* ─── Inner article divider (between stacked articles in same column) ─── */
.inner-article-divider {
    text-align: center;
    padding: 18px 0;
    border-top: var(--rule-sepia);
    margin-top: 1.2em;
}

/* Left-column dividers get extra breathing room so the column bottom lines up
   with the right sidebar (which now extends down with the word search). */
.lead-story-area .inner-article-divider {
    padding: 32px 0;
    margin-top: 2em;
}

/* Ornament removed — drop the empty space below the rule so the next
   section pulls up to fill the gap. */
.inner-article-divider-bare {
    padding-bottom: 0;
}

/* ─── HR Corner structured content ─── */
.hr-subtitle {
    font-family: var(--font-headline);
    font-style: italic;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink-light);
    margin-bottom: 10px;
    line-height: 1.35;
}

.hr-section-heading {
    font-family: var(--font-label);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--seegars-green);
    margin-top: 1em;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: var(--rule-sepia);
}

.hr-criteria-list,
.hr-bullet-list {
    margin: 0.5em 0 1em;
    padding-left: 1.4em;
    font-size: 0.95rem;
    line-height: 1.75;
}

.hr-criteria-list li,
.hr-bullet-list li {
    margin-bottom: 0.6em;
    list-style-type: disc;
}

.hr-section-subheading {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--ink-faded);
    margin: -2px 0 10px;
    letter-spacing: 0.02em;
}

/* Eric Church "six strings" pillar list */
.hr-pillar-list {
    margin: 0.6em 0 1.1em;
    padding-left: 1.4em;
    font-size: 0.95rem;
    line-height: 1.7;
    list-style: none;
}

.hr-pillar-list li {
    position: relative;
    margin-bottom: 0.7em;
    padding-left: 0.2em;
}

.hr-pillar-list li::before {
    content: "\1F3B8"; /* guitar */
    position: absolute;
    left: -1.4em;
    top: 0;
    font-size: 0.9em;
}

.hr-pillar-list li strong {
    color: var(--seegars-green);
}

/* YouTube video card (embedding disabled on source, links out) */
.hr-video-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1em 0 0.4em;
    border: var(--rule-sepia);
    background: #000;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hr-video-card:hover,
.hr-video-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.hr-video-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* hqdefault has black bars; nudge scale to fill the 16:9 card */
    transform: scale(1.36);
}

.hr-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.72);
    border-radius: 12px;
    transition: background 0.18s ease;
}

.hr-video-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-42%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 19px;
    border-color: transparent transparent transparent #fff;
}

.hr-video-card:hover .hr-video-play,
.hr-video-card:focus-visible .hr-video-play {
    background: #c00;
}

.hr-video-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-family: var(--font-label);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: rgba(0, 0, 0, 0.72);
    padding: 4px 8px;
    border-radius: 3px;
}

.awards-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.6em 0 1.4em;
    font-family: var(--font-body);
    font-size: 0.92rem;
    background: var(--cream);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
}

.awards-table thead th {
    font-family: var(--font-label);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--seegars-green);
    padding: 8px 10px;
    border-bottom: 1px solid var(--sepia-rule);
    text-align: left;
    white-space: nowrap;
}

.awards-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px dotted var(--sepia-rule);
    vertical-align: top;
}

.awards-table tbody tr:last-child td {
    border-bottom: none;
}

.awards-table .awards-rank {
    width: 36px;
    text-align: center;
    font-family: var(--font-headline);
    font-weight: 700;
    color: var(--purple);
}

.awards-table thead .awards-rank {
    text-align: center;
}

.awards-table .awards-name {
    color: var(--ink);
}

.awards-table .awards-location {
    color: var(--ink-faded);
    font-style: italic;
    white-space: nowrap;
}

.awards-table .awards-value {
    text-align: right;
    font-family: var(--font-headline);
    font-weight: 700;
    color: var(--seegars-green-dark);
    white-space: nowrap;
}

.awards-crew {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--ink-faded);
    margin-top: 2px;
    letter-spacing: 0.02em;
}

@media (max-width: 600px) {
    .awards-table {
        font-size: 0.85rem;
    }
    .awards-table thead th,
    .awards-table tbody td {
        padding: 6px 6px;
    }
    .awards-table .awards-location {
        white-space: normal;
    }
}

/* ─── Weather Widget ─── */
.weather-widget {
    margin-bottom: 20px;
    padding: 12px 16px;
    text-align: center;
    font-family: var(--font-label);
}

.weather-loading {
    font-size: 0.75rem;
    color: var(--ink-faded);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.weather-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 6px;
}

.weather-icon {
    font-size: 2.2rem;
    line-height: 1;
}

.weather-temp {
    font-family: var(--font-headline);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
}

.weather-desc {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-faded);
    margin-bottom: 6px;
}

.weather-details {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 0.72rem;
    color: var(--sepia);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.weather-location {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--seegars-green);
    margin-top: 8px;
}

.weather-forecast {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--sepia-rule);
}

.forecast-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.forecast-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-faded);
}

.forecast-icon {
    font-size: 1rem;
    line-height: 1;
}

.weather-icon svg {
    width: 2.2rem;
    height: 2.2rem;
    display: block;
}

.forecast-icon svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.forecast-temps {
    font-size: 0.58rem;
    color: var(--sepia);
    white-space: nowrap;
}

.weather-rule {
    border: none;
    border-bottom: var(--rule-sepia);
    margin-top: 12px;
}

/* ─── Vintage Ad ─── */
.vintage-ad {
    margin-top: 30px;
    padding: 4px;
    border: 2px solid var(--ink);
}

/* America's 250th sticker (transparent PNG + CSS shadow, no white box) */
.anniversary-sticker {
    text-align: center;
    margin: 10px 0 2px;
}

.anniversary-sticker img {
    display: inline-block;
    width: 100%;
    max-width: 290px;
    height: auto;
    filter: drop-shadow(0 7px 11px rgba(10, 33, 57, 0.30));
}

.ad-border {
    border: 1px solid var(--ink);
    padding: 2px;
}

.ad-inner {
    border: 1px solid var(--sepia-rule);
    padding: 20px 12px;
    text-align: center;
}

.ad-stars {
    font-size: 0.85rem;
    color: var(--sepia);
    letter-spacing: 0.3em;
    margin: 6px 0;
}

.ad-company {
    font-family: var(--font-headline);
    font-size: 1.35rem;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: 0.15em;
    margin: 8px 0 4px;
    color: var(--seegars-green);
}

.ad-tagline {
    font-family: var(--font-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-faded);
}

.ad-rule {
    width: 60%;
    height: 1px;
    background: var(--sepia-rule);
    margin: 12px auto;
}

.ad-body {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink-light);
    line-height: 1.6;
}

.ad-cta {
    font-family: var(--font-label);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 6px;
    color: var(--seegars-green);
}

/* ================================================================
   COMPANY PARTY SECTION
   ================================================================ */
.party-eyebrow {
    font-family: var(--font-label);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--purple);
    margin: 0 0 4px;
    text-align: center;
}

.party-hero {
    margin: 16px 0 14px;
    text-align: center;
}

.party-hero img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    object-position: center top;
    border-radius: 14px;
    cursor: pointer;
    box-shadow:
        0 0 0 1px rgba(29, 78, 216, 0.30),
        0 0 22px rgba(200, 16, 46, 0.32),
        0 0 38px rgba(29, 78, 216, 0.20),
        0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.party-hero img:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(29, 78, 216, 0.40),
        0 0 28px rgba(200, 16, 46, 0.42),
        0 0 50px rgba(29, 78, 216, 0.28),
        0 12px 36px rgba(0, 0, 0, 0.30);
}

.party-hero-caption {
    margin: 6px 0 0;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-style: italic;
    color: var(--ink-faded);
    text-align: center;
    letter-spacing: 0.02em;
}

.party-gallery-wrap {
    position: relative;
    margin: 14px 0 4px;
}

.party-gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    max-height: 480px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.party-gallery-wrap.expanded .party-gallery {
    max-height: none;
}

.party-gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.party-gallery img:hover {
    transform: scale(1.04);
    box-shadow:
        0 0 0 2px var(--seegars-green),
        0 4px 10px rgba(0, 0, 0, 0.22);
    z-index: 2;
    position: relative;
}

.party-gallery-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 56px;
    height: 90px;
    background: linear-gradient(180deg, transparent 0%, var(--paper-bg) 95%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.party-gallery-wrap.expanded::after {
    opacity: 0;
}

.party-gallery-toggle {
    display: block;
    margin: 14px auto 4px;
    padding: 8px 22px;
    font-family: var(--font-label);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cream);
    background: var(--seegars-green);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(200, 16, 46, 0.25);
    transition: background 0.2s ease, transform 0.15s ease;
}

.party-gallery-toggle:hover {
    background: var(--seegars-green-dark);
    transform: translateY(-1px);
}

.party-gallery-toggle .party-gallery-toggle-less { display: none; }
.party-gallery-wrap.expanded .party-gallery-toggle .party-gallery-toggle-more { display: none; }
.party-gallery-wrap.expanded .party-gallery-toggle .party-gallery-toggle-less { display: inline; }

@media (max-width: 720px) {
    .party-gallery {
        grid-template-columns: repeat(4, 1fr);
        max-height: 360px;
    }
}

@media (max-width: 480px) {
    .party-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
        max-height: 300px;
    }
    .party-hero img {
        max-height: 280px;
    }
}

/* ================================================================
   SAFETY SECTION — Full Width
   ================================================================ */
.safety-section-wrapper {
    padding: 0 var(--gutter);
}

.safety-categories-span {
    column-span: all;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 1em;
    padding-top: 1em;
    border-top: var(--rule-sepia);
}

/* Safety layout — text + image side by side */
.safety-layout {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: var(--gutter);
    align-items: center;
    margin-top: 12px;
}

.safety-image {
    background: var(--cream);
}

.safety-image > img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mask-based animated safety image — letterform fill + lime laser sweep */
.safety-image-mask {
    position: relative;
    background: transparent;
    overflow: hidden;
    isolation: isolate;
}

.safety-image-mask .safety-image-sizer {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    pointer-events: none;
}

.safety-image-fill,
.safety-image-laser {
    position: absolute;
    inset: 0;
    -webkit-mask: var(--safety-mask) center/contain no-repeat;
            mask: var(--safety-mask) center/contain no-repeat;
    pointer-events: none;
}

.safety-image-fill {
    background: var(--ink);
}

.safety-image-laser {
    background: linear-gradient(105deg,
        transparent 32%,
        rgba(255, 94, 20, 0.0) 42%,
        rgba(255, 94, 20, 0.95) 48%,
        #ffffff 50%,
        rgba(255, 59, 36, 0.95) 52%,
        rgba(255, 59, 36, 0.0) 58%,
        transparent 68%);
    background-size: 220% 100%;
    background-position: -120% 0;
    animation: safety-laser-sweep 7.5s linear infinite;
    filter: drop-shadow(0 0 4px rgba(255, 94, 20, 0.95))
            drop-shadow(0 0 12px rgba(255, 59, 36, 0.55));
}

@keyframes safety-laser-sweep {
    0%   { background-position: -120% 0; }
    100% { background-position: 220% 0; }
}

/* Dark mode: brighter laser glow, lighter shadow falloff */
[data-theme="dark"] .safety-image-laser {
    filter: drop-shadow(0 0 5px #FF5E14)
            drop-shadow(0 0 16px rgba(255, 94, 20, 0.75))
            drop-shadow(0 0 28px rgba(255, 59, 36, 0.35));
}

@media (prefers-reduced-motion: reduce) {
    .safety-image-laser { animation: none; }
}

.safety-purpose {
    margin-bottom: 1em;
}

.safety-eyebrow,
.benefits-eyebrow {
    font-family: var(--font-label);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--purple);
    margin: 0 0 4px;
    text-align: center;
}

.benefits-closing {
    margin-top: 14px;
    font-style: italic;
    color: var(--ink-faded);
}

.benefits-heads-up {
    margin: 14px 0;
    padding: 10px 14px 12px;
    background: rgba(200, 16, 46, 0.08);
    border-left: 4px solid var(--seegars-green);
    border-radius: 3px;
}

[data-theme="dark"] .benefits-heads-up {
    background: rgba(188, 213, 49, 0.12);
    border-left-color: var(--seegars-green-light);
}

.benefits-heads-up-label {
    display: block;
    font-family: var(--font-label);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--seegars-green);
    margin-bottom: 4px;
}

.benefits-heads-up-text {
    font-size: 0.95rem;
    line-height: 1.5;
}

.safety-subheading {
    font-family: var(--font-label);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--seegars-green);
    margin-bottom: 8px;
}

.safety-requirements {
    margin: 0.5em 0 1em;
    padding-left: 1.4em;
    font-size: 0.95rem;
    line-height: 1.75;
}

.safety-requirements li {
    margin-bottom: 0.4em;
    list-style-type: disc;
}

.safety-closing {
    font-weight: 600;
    font-style: italic;
}

.safety-image-inline {
    margin-top: 1em;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.safety-image-top {
    margin-top: 0;
    margin-bottom: 1.5em;
}

/* ================================================================
   TECH TALK — Full Width
   ================================================================ */
.tech-section {
    padding: 0 var(--gutter);
}

.tech-article {
    padding-top: 4px;
}

/* ─── Employee Spotlight ─── */
.spotlight-article {
    padding-top: 4px;
}

/* Sidebar article — depth + subtle lime accent strip on the left edge */
.sidebar-article {
    position: relative;
    padding: 4px 0 4px 14px;
    border-radius: 4px;
}

.sidebar-article::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    background: linear-gradient(180deg,
        var(--seegars-green) 0%,
        var(--seegars-green-light) 55%,
        var(--seegars-green) 100%);
    border-radius: 2px;
    opacity: 0.85;
}

/* Buttons + interactive elements — lime hover accent */
.rightnow-btn:hover,
.skybox-link:hover .skybox-text,
.party-gallery-toggle:hover,
.word-search-toggle:hover,
.word-search-clear:hover {
    color: var(--seegars-green);
    border-color: var(--seegars-green-light);
}

/* ─── Employee Spotlight "Coming Soon" placeholder ─── */
.spotlight-blur-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.spotlight-coming-soon .spotlight-blur-content {
    filter: blur(11px) saturate(0.85);
    -webkit-filter: blur(11px) saturate(0.85);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

/* Big short text like the name reads through a moderate blur — give it extra. */
.spotlight-coming-soon .spotlight-blur-content .spotlight-name,
.spotlight-coming-soon .spotlight-blur-content .spotlight-location {
    filter: blur(6px);
    -webkit-filter: blur(6px);
}

.spotlight-coming-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-14deg);
    padding: 14px 36px;
    font-family: var(--font-headline);
    font-size: 2.4rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--seegars-green);
    background: rgba(253, 252, 248, 0.92);
    border: 4px double var(--seegars-green);
    border-radius: 6px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(155, 11, 34, 0.20);
    box-shadow:
        0 0 0 2px rgba(253, 252, 248, 0.5),
        0 6px 22px rgba(0, 0, 0, 0.20),
        0 0 24px rgba(200, 16, 46, 0.25);
    white-space: nowrap;
    pointer-events: none;
}

@media (max-width: 600px) {
    .spotlight-coming-stamp {
        font-size: 1.6rem;
        padding: 10px 22px;
        border-width: 3px;
    }
}

.spotlight-name {
    font-family: var(--font-headline);
    font-size: 1.4rem;
    text-align: center;
    margin: 8px 0 12px;
    color: var(--ink);
}

.spotlight-location {
    text-align: center;
    font-family: var(--font-label);
    font-size: 0.9rem;
    color: var(--seegars-green);
    margin: -8px 0 12px;
    font-weight: 600;
}

.spotlight-photo-wrapper {
    text-align: center;
    margin-bottom: 16px;
}

.spotlight-photo {
    width: 100%;
    max-width: 350px;
    /* The wrapper sets text-align:center, but a global `img { display:block }`
       means the photo is a block box and ignores it — so it sat hard against
       the left edge of a much wider column. Auto margins are what actually
       centers a block with a max-width. */
    margin-inline: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
}

/* ─── Spotlight media: tab toggle between video and photo ─── */
.spotlight-media {
    margin: 0 auto 16px;
    text-align: center;
}

.spotlight-media-tabs {
    display: inline-flex;
    margin: 0 auto 12px;
    border: 1px solid var(--sepia-rule);
    border-radius: 999px;
    overflow: hidden;
    background: var(--cream);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.spotlight-media-tab {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ink);
    padding: 6px 18px;
    font-family: var(--font-label);
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.spotlight-media-tab + .spotlight-media-tab {
    border-left: 1px solid var(--sepia-rule);
}

.spotlight-media-tab.is-active {
    background: var(--seegars-green);
    color: #ffffff;
}

.spotlight-media-tab:hover:not(.is-active) {
    background: rgba(179, 25, 66, 0.18);
    color: var(--seegars-green);
}

.spotlight-media-tab:focus-visible {
    outline: 2px solid var(--seegars-green-light);
    outline-offset: 2px;
}

.spotlight-media-stage {
    position: relative;
    max-width: 350px;
    margin: 0 auto;
    /* Lock the stage to the cutout photo's natural aspect so video and photo render at identical dimensions */
    aspect-ratio: 800 / 957;
}

.spotlight-media-pane {
    display: none;
    width: 100%;
    height: 100%;
}

.spotlight-media-pane.is-active {
    display: block;
}

.spotlight-media-pane[data-pane="photo"] .spotlight-photo-wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spotlight-media-pane[data-pane="photo"] .spotlight-photo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.spotlight-video-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28),
                0 0 0 1px var(--sepia-rule);
}

.spotlight-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    background: #000;
}

/* Custom play overlay — replaces native controls so no timer/progress shows */
.spotlight-play-overlay {
    position: absolute;
    inset: 0;
    appearance: none;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.25s ease, background-color 0.25s ease;
    padding: 0;
}

.spotlight-play-overlay:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

.spotlight-play-overlay::before {
    content: '\25B6';
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.spotlight-play-overlay:hover::before {
    transform: scale(1.06);
    background: rgba(0, 0, 0, 0.7);
}

.spotlight-video-wrap.is-playing .spotlight-play-overlay {
    opacity: 0;
    pointer-events: none;
}

.spotlight-video-caption {
    margin: 10px auto 0;
    max-width: 350px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-style: italic;
    color: var(--ink-faded);
    text-align: center;
    line-height: 1.4;
}

.spotlight-qa {
    padding-top: 4px;
}

.spotlight-qa-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dotted var(--sepia-rule);
    gap: 12px;
}

.spotlight-question {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--ink);
    flex: 0 1 auto;
}

.spotlight-answer {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--ink-faded);
    text-align: right;
    flex: 1 1 60%;
}

/* ================================================================
   READER POLL
   ================================================================ */
.reader-poll {
    padding-top: 30px;
}

/* Standalone reader-poll band near the top of the page */
.poll-band {
    padding: 26px var(--gutter) 10px;
}

.poll-band-inner {
    max-width: 620px;
    margin: 0 auto;
    border: 2px solid var(--seegars-green);
    background: var(--paper-bg);
    padding: 18px 30px 22px;
}

.poll-band-header {
    text-align: center;
    margin-bottom: 16px;
}

.poll-band-eyebrow {
    display: block;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.7rem;
    color: var(--seegars-green);
    margin-bottom: 6px;
}

.poll-band .poll-question {
    margin-bottom: 0;
    text-align: center;
}

.poll-question {
    font-family: var(--font-headline);
    font-style: italic;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 6px;
    color: var(--ink-light);
    margin-bottom: 10px;
    line-height: 1.3;
}

.poll-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.poll-choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.poll-choice {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 8px;
    cursor: pointer;
    padding: 2px 0;
    font-size: 0.82rem;
    line-height: 1.3;
    transition: color 0.15s;
}

.poll-choice:hover {
    color: var(--seegars-green);
}

.poll-choice input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border: 2px solid var(--sepia-rule);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s;
}

.poll-choice input[type="radio"]:checked {
    border-color: var(--seegars-green);
}

.poll-choice input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--seegars-green);
}

.poll-choice input[type="radio"]:disabled {
    cursor: default;
    opacity: 0.5;
}

.poll-choice.voted-disabled {
    cursor: default;
}

.poll-choice-label {
    grid-column: 2 / -1;
    grid-row: 1;
    font-family: var(--font-body);
    font-size: 0.92rem;
    white-space: nowrap;
}

.poll-bar-track {
    grid-column: 1 / 3;
    grid-row: 2;
    height: 14px;
    background: var(--paper-bg-dark);
    border: 1px solid var(--sepia-rule);
    position: relative;
    overflow: hidden;
    min-width: 60px;
}

.poll-bar-fill {
    display: block;
    height: 100%;
    background: var(--seegars-green-light);
    transition: width 0.5s ease;
    min-width: 0;
}

.poll-choice-count {
    grid-column: 3;
    grid-row: 2;
    font-family: var(--font-label);
    font-size: 0.78rem;
    text-align: left;
    min-width: 20px;
    font-weight: 600;
    color: var(--ink-faded);
    text-align: left;
    white-space: nowrap;
    letter-spacing: 0.05em;
}

.poll-vote-btn {
    align-self: flex-start;
    font-family: var(--font-label);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--paper-bg);
    background: var(--seegars-green-light);
    border: none;
    padding: 6px 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.poll-vote-btn:hover:not(:disabled) {
    background: var(--seegars-green);
}

.poll-vote-btn:disabled {
    background: var(--sepia-rule);
    color: var(--ink-faded);
    cursor: default;
}

/* Mobile adjustments for poll */
@media (max-width: 767px) {
    .poll-choice {
        grid-template-columns: auto 1fr auto;
        gap: 2px 6px;
        font-size: 0.82rem;
    }

    .poll-choice-label {
        font-size: 0.82rem;
        white-space: normal;
    }
}

/* ================================================================
   NEWS & SPORTS WIRE
   ================================================================ */
.news-wire-section {
    padding: 0 var(--gutter);
    padding-bottom: 10px;
}

.news-wire-header {
    text-align: center;
    margin-bottom: 20px;
}

.news-wire-rule {
    height: 1px;
    background: var(--sepia-rule);
    margin: 8px 0;
}

.news-wire-title {
    font-family: var(--font-headline);
    font-size: 1.8rem;
    font-weight: 800;
    font-style: italic;
    margin: 8px 0 2px;
}

.news-wire-subtitle {
    font-family: var(--font-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--seegars-green);
}

.news-wire-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
}

.news-wire-col {
    padding: 0 var(--gutter);
}

.news-wire-col:not(:last-child) {
    border-right: 1px solid var(--sepia-rule);
}

.news-wire-col:first-child {
    padding-left: 0;
}

.news-wire-col:last-child {
    padding-right: 0;
}

.news-wire-col-title {
    font-family: var(--font-headline);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: var(--rule-sepia);
}

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

.news-wire-item {
    margin-bottom: 12px;
    font-size: 0.88rem;
    line-height: 1.6;
}

.news-wire-headline {
    font-weight: 700;
}

.news-wire-summary {
    color: var(--ink-faded);
}

.news-wire-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.news-wire-link:hover .news-wire-headline {
    text-decoration: underline;
}

/* Medal Table */
.medal-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-label);
    font-size: 0.82rem;
}

.medal-table thead {
    border-bottom: 2px solid var(--sepia-rule);
}

.medal-country-header {
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    padding: 4px 0;
    color: var(--ink-faded);
}

.medal-header {
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    padding: 4px 6px;
    color: var(--ink-faded);
}

.medal-gold { color: #b8860b; }
.medal-silver { color: #808080; }
.medal-bronze { color: #a0522d; }

.medal-country {
    padding: 6px 0;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    border-bottom: 1px solid var(--sepia-rule);
    white-space: nowrap;
}

.medal-count {
    text-align: center;
    padding: 6px;
    border-bottom: 1px solid var(--sepia-rule);
    font-size: 0.88rem;
}

.medal-total-count {
    font-weight: 700;
}

/* ─── Word Search puzzle (sidebar) ─── */
.word-search-block {
    margin-top: 26px;
    padding: 14px 14px 16px;
    background: var(--cream);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.word-search-header {
    margin-bottom: 10px;
}

.word-search-title {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 800;
    font-style: italic;
    margin: 0;
    color: var(--ink);
}

.word-search-subtitle {
    font-family: var(--font-label);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--seegars-green);
    margin: 2px 0 0;
}

.word-search-grid {
    display: grid;
    /* Column count comes from the puzzle (data-cols), with 14 as the historical
       default — a 12- or 16-word grid used to render squashed against a
       hard-coded 14. */
    /* minmax(0, 1fr), NOT bare 1fr: the cells' aspect-ratio gives each one an
       intrinsic minimum that 1fr tracks will not shrink below, so a 14-column
       grid held ~425px no matter the device and the last columns hung outside
       the playing area on phones. A zero minimum lets every track shrink. */
    grid-template-columns: repeat(var(--ws-cols, 14), minmax(0, 1fr));
    gap: 1px;
    /* Use the width a phone actually has; 340px left dead margin on a handset
       and made every cell a smaller tap target than it needed to be. */
    margin: 10px auto 12px;
    /* Sized against the CONTAINER, never the viewport: vw units ignored the
       block's own padding, so on a phone the grid's right column hung outside
       the cream playing area. 100% + border-box cannot overflow. */
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
    min-width: 0;
    padding: 6px;
    background: var(--paper-bg);
    border: 1px solid var(--ink);
    touch-action: none;
    cursor: crosshair;
}

/* First tap of a tap-tap selection — shows where the word will start. */
.word-search-cell.anchored {
    background: var(--seegars-green);
    color: var(--paper-bg);
    outline: 2px solid var(--sepia);
    outline-offset: -2px;
    border-radius: 2px;
}

.word-search-cell {
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-headline);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ink);
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    transition: background 0.18s ease, color 0.18s ease;
    border-radius: 2px;
}

.word-search-cell.selecting {
    background: rgba(29, 78, 216, 0.25);
    color: var(--ink);
}

.word-search-cell.user-found {
    background: var(--seegars-green);
    color: var(--cream);
}

.word-search-cell.solution-hint {
    background: rgba(200, 16, 46, 0.25);
    color: var(--ink);
}

/* User-found wins over both selecting and solution-hint */
.word-search-cell.user-found.selecting,
.word-search-cell.user-found.solution-hint {
    background: var(--seegars-green);
    color: var(--cream);
}

.word-search-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 320px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 14px;
    font-family: var(--font-label);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    text-align: left;
}

.word-search-word {
    cursor: pointer;
    padding: 1px 0;
    transition: color 0.15s ease;
}

.word-search-word:hover {
    color: var(--seegars-green);
}

.word-search-word.crossed {
    text-decoration: line-through;
    color: var(--ink-faded);
}

.word-search-word.found {
    color: var(--seegars-green);
    font-weight: 700;
}

.word-search-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.word-search-toggle,
.word-search-clear {
    padding: 6px 18px;
    font-family: var(--font-label);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.word-search-toggle {
    color: var(--cream);
    background: var(--purple);
}

.word-search-toggle:hover {
    background: var(--sepia);
}

.word-search-clear {
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink);
}

.word-search-clear:hover {
    background: var(--ink);
    color: var(--cream);
}

.word-search-toggle .word-search-toggle-hide { display: none; }
.word-search-grid.solution-shown ~ .word-search-actions .word-search-toggle .word-search-toggle-show { display: none; }
.word-search-grid.solution-shown ~ .word-search-actions .word-search-toggle .word-search-toggle-hide { display: inline; }

/* Bigger touch targets on phones — grid stretches to nearly full width
   so each cell becomes a comfortable finger-sized tap area. */
@media (max-width: 600px) {
    .word-search-grid {
        max-width: 420px;
        gap: 2px;
        padding: 8px;
    }
    .word-search-cell {
        font-size: 0.95rem;
    }
    .word-search-list {
        max-width: 380px;
        font-size: 0.85rem;
        gap: 4px 16px;
    }
    .word-search-toggle,
    .word-search-clear {
        padding: 9px 22px;
        font-size: 0.78rem;
    }
}

/* ─── Word Search completion celebration ─── */
.word-search-celebration {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 24, 0.55);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.word-search-celebration.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.word-search-celebration-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.word-search-celebration-banner {
    position: relative;
    z-index: 1;
    background: var(--cream);
    border: 3px double var(--seegars-green);
    border-radius: 8px;
    padding: 18px 24px 16px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
    max-width: 88%;
    text-align: center;
    transform: scale(0.85);
    transition: transform 0.4s cubic-bezier(0.18, 1.15, 0.4, 1.05);
}
.word-search-celebration.is-visible .word-search-celebration-banner {
    transform: scale(1);
}
.word-search-celebration-emoji {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 4px;
}
.word-search-celebration-title {
    font-family: var(--font-headline);
    font-size: 1.4rem;
    font-weight: 800;
    font-style: italic;
    color: var(--seegars-green);
    margin-bottom: 4px;
}
.word-search-celebration-subtitle {
    font-family: var(--font-label);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink);
    margin-bottom: 12px;
}
.word-search-celebration-close {
    padding: 8px 22px;
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cream);
    background: var(--seegars-green);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.word-search-celebration-close:hover {
    background: var(--ink);
}

/* ─── News Wire — Sidebar variant ─── */
.news-wire-sidebar {
    margin-top: 20px;
}

.news-wire-sidebar .news-wire-header {
    padding: 0;
    margin-top: -6px;
    margin-bottom: 12px;
}

.news-wire-sidebar .news-wire-title {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.news-wire-sidebar .news-wire-subtitle {
    font-size: 0.7rem;
}

.news-wire-sidebar .news-wire-col {
    padding: 0;
    border-right: none;
}

.news-wire-sidebar .news-wire-col:not(:last-child) {
    border-bottom: 1px solid var(--sepia-rule);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.news-wire-sidebar .news-wire-col-title {
    font-size: 0.78rem;
}

.news-wire-sidebar .news-wire-headline {
    font-size: 0.82rem;
}

.news-wire-sidebar .news-wire-summary {
    font-size: 0.8rem;
}

.news-wire-sidebar .medal-table {
    font-size: 0.8rem;
}

.news-wire-sidebar .medal-country {
    font-size: 0.8rem;
}

.news-wire-sidebar .medal-count {
    font-size: 0.8rem;
    padding: 4px;
}

@media (max-width: 767px) {
    .news-wire-grid {
        grid-template-columns: 1fr;
    }

    .news-wire-col {
        padding: 0;
    }

    .news-wire-col:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid var(--sepia-rule);
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
}

/* ================================================================
   CELEBRATIONS — Birthdays & Anniversaries
   ================================================================ */
.celebrations-section {
    padding: 0 var(--gutter);
    position: relative;
    overflow: hidden;
}

/* Fireworks canvas overlay */
.fireworks-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.celebrations-section > *:not(.fireworks-canvas) {
    position: relative;
    z-index: 1;
}

.celebrations-header {
    text-align: center;
    margin-bottom: 20px;
}

.celebrations-rule {
    height: 1px;
    background: var(--sepia-rule);
    margin: 8px 0;
}

.celebrations-title {
    font-family: var(--font-headline);
    font-size: 1.8rem;
    font-weight: 800;
    font-style: italic;
    margin: 8px 0 2px;
}

.celebrations-subtitle {
    font-family: var(--font-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--purple);
}

.celebrations-columns {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
}

.celebrations-divider {
    width: 1px;
    background: var(--sepia-rule);
    margin: 0 var(--gutter);
}

.celebrations-col-title {
    font-family: var(--font-headline);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: var(--rule-sepia);
}

.celebration-entry {
    display: flex;
    align-items: baseline;
    font-size: 0.88rem;
    margin-bottom: 8px;
    gap: 4px;
}

.celebration-name {
    font-weight: 600;
    white-space: nowrap;
}

.celebration-dots {
    flex: 1;
    border-bottom: 1px dotted var(--sepia-rule);
    min-width: 20px;
    margin: 0 4px;
    position: relative;
    top: -3px;
}

.celebration-detail {
    font-style: italic;
    white-space: nowrap;
    color: var(--ink-faded);
}

.celebration-location {
    font-family: var(--font-label);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sepia);
    margin-left: 6px;
    white-space: nowrap;
}

/* ─── Celebrate sign (replaces image) ─── */
.celebrate-sign {
    margin-top: 24px;
    padding: 4px;
    border: 2px solid var(--ink);
}

.celebrate-sign-full {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Inline variant — sits inside the anniversaries column, sized to fill it */
.celebrate-sign-inline {
    margin-top: 28px;
}

.celebrate-sign-inline .celebrate-sign-inner {
    padding: 16px 12px;
}

.celebrate-sign-inline .celebrate-sign-heading {
    font-size: 1.3rem;
}

.celebrate-sign-inline .celebrate-sign-amp {
    font-size: 1.05rem;
    margin: 2px 0;
}

.celebrate-sign-inline .celebrate-sign-from {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    margin-top: 8px;
}

.celebrate-sign-inline .celebrate-sign-rule {
    margin: 6px auto;
}

.celebrate-sign-border {
    border: 1px solid var(--ink);
    padding: 2px;
}

.celebrate-sign-inner {
    border: 1px solid var(--sepia-rule);
    padding: 20px 16px;
    text-align: center;
}

.celebrate-sign-stars {
    font-size: 0.7rem;
    color: var(--sepia);
    letter-spacing: 0.3em;
    margin: 4px 0;
}

.celebrate-sign-rule {
    width: 60%;
    height: 1px;
    background: var(--sepia-rule);
    margin: 8px auto;
}

.celebrate-sign-heading {
    font-family: var(--font-headline);
    font-size: 1.8rem;
    font-weight: 800;
    font-style: italic;
    color: var(--ink);
    line-height: 1.2;
}

.celebrate-sign-amp {
    font-family: var(--font-headline);
    font-size: 1.3rem;
    font-style: italic;
    color: var(--sepia);
    margin: 4px 0;
}

.celebrate-sign-from {
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--seegars-green);
    margin-top: 10px;
}

/* ================================================================
   CONTRIBUTORS / EDITORIAL BOARD
   ================================================================ */
.contributors-section {
    padding: 0 var(--gutter);
}

.staff-box {
    border: var(--rule-thin);
    padding: 20px 24px;
    text-align: center;
}

.staff-box-title {
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    margin-bottom: 12px;
}

.staff-box-rule {
    height: 1px;
    background: var(--sepia-rule);
    margin: 12px 0;
}

.staff-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px 40px;
}

.staff-member {
    text-align: center;
}

.staff-name {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.95rem;
}

.staff-title {
    font-family: var(--font-label);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faded);
}

.staff-section {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--sepia);
}

.staff-box-footer {
    font-size: 0.75rem;
    color: var(--ink-faded);
    font-style: italic;
}

/* ================================================================
   CLASSIFIEDS / RESOURCES
   ================================================================ */
.classifieds-section {
    padding: 0 var(--gutter);
    padding-bottom: 30px;
}

.classifieds-header {
    text-align: center;
    margin-bottom: 20px;
}

.classifieds-title {
    font-family: var(--font-headline);
    font-size: 1.4rem;
    font-weight: 800;
}

.classifieds-subtitle {
    font-family: var(--font-label);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--seegars-green);
}

.classifieds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.classified-card {
    display: block;
    border: 2px solid var(--ink);
    padding: 3px;
    text-decoration: none;
    color: var(--ink);
    transition: background 0.2s, transform 0.15s;
}

.classified-card:hover {
    background: var(--cream);
    transform: translateY(-1px);
}

.classified-inner {
    border: 1px solid var(--sepia-rule);
    padding: 14px 10px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.classified-name {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 4px;
    line-height: 1.2;
}

.classified-desc {
    font-size: 0.72rem;
    color: var(--ink-faded);
    line-height: 1.4;
    margin-bottom: 8px;
    flex: 1;
}

.classified-cta {
    font-family: var(--font-label);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--seegars-green);
}

/* ================================================================
   RIGHTNOW MEDIA
   ================================================================ */
.rightnow-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: var(--rule-sepia);
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.rightnow-image {
    width: 220px;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: contain;
    align-self: center;
    cursor: pointer;
}

.rightnow-title {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--seegars-green);
    margin-bottom: 8px;
}

.rightnow-body p {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--ink);
    margin-bottom: 10px;
}

.rightnow-btn {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--paper-bg);
    background: var(--seegars-green-light);
    padding: 8px 18px;
    text-decoration: none;
    transition: background 0.2s;
}

.rightnow-btn:hover {
    background: var(--seegars-green);
}

@media (max-width: 767px) {
    .rightnow-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .rightnow-image {
        width: 140px;
    }
}

/* ================================================================
   FOOTER
   ================================================================ */
.newspaper-footer {
    padding: 0 var(--gutter);
    position: relative;
}

.footer-rule-thick {
    height: 3px;
    background: var(--ink);
    margin-bottom: 0;
}

.footer-rule-thin {
    height: 1px;
    background: var(--ink-faded);
    margin-top: 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    flex-wrap: wrap;
    gap: 8px;
}

.footer-tagline {
    font-family: var(--font-label);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--seegars-green);
}

.footer-copy {
    font-size: 0.72rem;
    color: var(--ink-faded);
}

.footer-tagline {
    font-family: var(--font-label);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.footer-top-link {
    font-family: var(--font-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--sepia);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-top-link:hover {
    color: var(--seegars-green);
}

/* ================================================================
   RESPONSIVE — Tablet (768–1199px)
   ================================================================ */
@media (max-width: 1199px) {
    :root {
        --gutter: 20px;
    }

    .above-fold {
        grid-template-columns: 1fr 280px;
    }

    .lead-body {
        column-count: 1;
    }

    .subsections-row {
        grid-template-columns: 1fr;
    }

    .article-body-columns {
        column-count: 1;
    }

    .ad-company {
        font-size: 1.2rem;
    }

}

/* ================================================================
   RESPONSIVE — Small Tablet / Large Phone (< 768px)
   ================================================================ */
@media (max-width: 767px) {
    :root {
        --gutter: 16px;
    }

    body {
        background-color: var(--paper-bg);
    }

    .skybox-banner {
        padding: 5px var(--gutter);
    }

    .skybox-link {
        font-size: 0.62rem;
        gap: 5px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Prevent any horizontal overflow on mobile */
    .newspaper {
        box-shadow: none;
        overflow-x: clip;
    }

    .newspaper::after {
        display: none;
    }

    /* Hide page curl on mobile */
    .newspaper-footer::after {
        display: none !important;
    }

    /* Hide fold indicator on mobile — not meaningful */
    .fold-indicator {
        display: none;
    }

    .nameplate-title {
        font-size: 2.4rem;
    }

    .nameplate-ornament {
        display: none;
    }

    /* Masthead top bar: slim sticky bar — icons only */
    .masthead-nav {
        display: none;
    }

    .masthead-top-bar .reader-count,
    .masthead-top-bar .reader-count-sep {
        display: none;
    }

    .masthead-top-bar {
        justify-content: center;
        padding: 6px var(--gutter);
    }

    .masthead-motto-bar {
        flex-direction: column;
        text-align: center;
        justify-content: center;
        gap: 2px;
        line-height: 1.5;
    }

    .motto-item {
        white-space: normal;
    }

    .motto-dot {
        display: none;
    }

    /* Larger tap targets for social links on touch devices */
    .social-link {
        padding: 10px;
        margin: -10px;
    }

    .social-link svg {
        width: 20px;
        height: 20px;
    }

    .social-icon-img {
        width: 20px;
        height: 20px;
    }

    .masthead-social {
        gap: 24px;
    }

    /* Switch to left-aligned text on mobile — justified creates ugly rivers in narrow columns */
    .article-body {
        text-align: left;
        hyphens: none;
        -webkit-hyphens: none;
    }

    /* Slightly larger body text for mobile readability */
    .article-body p {
        font-size: 1rem;
        line-height: 1.8;
    }

    /* Stack above the fold */
    .above-fold {
        grid-template-columns: 1fr;
    }

    .lead-story-area {
        padding-right: 0;
        border-right: none;
        padding-bottom: 20px;
        border-bottom: var(--rule-sepia);
        margin-bottom: 20px;
    }

    .sidebar-area {
        padding-left: 0;
    }

    .lead-body {
        column-count: 1;
    }

    .subsections-row {
        grid-template-columns: 1fr;
    }

    /* Safety layout stacks on mobile */
    .safety-layout {
        grid-template-columns: 1fr;
    }

    .safety-image {
        max-width: 320px;
        margin: 0 auto;
    }

    .article-body-columns {
        column-count: 1;
    }

    /* Stack celebrations */
    .celebrations-columns {
        grid-template-columns: 1fr;
    }

    .celebrations-divider {
        width: 100%;
        height: 1px;
        margin: 16px 0;
    }

    /* Classifieds — 2 columns with larger tap targets */
    .classifieds-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .classified-inner {
        padding: 16px 12px;
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    /* Pull quotes — give breathing room */
    .pull-quote {
        margin: 1.2em 0;
        padding: 1em 0.8em;
        font-size: 1.05rem;
    }

    .headline-lead {
        font-size: 1.6rem;
    }

    .headline-feature {
        font-size: 1.4rem;
    }

    .headline-subtitle {
        font-size: 0.95rem;
    }

    /* Staff grid — 2 per row on tablet-ish mobile */
    .staff-grid {
        gap: 16px 24px;
    }

    /* Drop cap — scale down to avoid layout collision */
    .has-dropcap::first-letter {
        font-size: 3.5em;
        padding-right: 6px;
        padding-top: 4px;
    }

    /* Dateline inside drop-cap paragraph — keep it readable */
    .dateline {
        font-size: 0.75rem;
    }

    /* Section banners — center on mobile */
    .section-banner {
        text-align: center;
    }
}

/* ================================================================
   RESPONSIVE — Phone (< 480px)
   ================================================================ */
@media (max-width: 479px) {
    :root {
        --gutter: 14px;
    }

    .nameplate-title {
        font-size: 2rem;
    }

    /* Tighter social icon spacing on small phones */
    .masthead-social {
        gap: 18px;
    }

    /* Wrap masthead info gracefully instead of cramming onto one line */
    .masthead-info {
        font-size: 0.62rem;
        line-height: 1.8;
    }

    .masthead-dot {
        margin: 0 4px;
    }

    /* Classifieds go single column on small phones */
    .classifieds-grid {
        grid-template-columns: 1fr;
    }

    /* Celebrations — stack name/detail vertically when space is tight */
    .celebration-entry {
        font-size: 0.78rem;
    }

    .celebration-name {
        font-size: 0.78rem;
    }

    .celebration-location {
        font-size: 0.58rem;
    }

    /* Further scale drop caps for narrow screens */
    .has-dropcap::first-letter {
        font-size: 3em;
        padding-right: 5px;
    }

    .headline-lead {
        font-size: 1.4rem;
    }

    .headline-feature {
        font-size: 1.25rem;
    }

    .headline-section {
        font-size: 1.15rem;
    }

    .headline-sidebar {
        font-size: 1.15rem;
    }

    /* Staff grid — single column on small phones */
    .staff-grid {
        flex-direction: column;
        gap: 14px;
    }

    /* Subsection boxes — slightly tighter padding */
    .subsection-box {
        padding: 10px;
    }

    /* Safety category boxes */
    .safety-cat-box {
        padding: 8px 10px;
    }

    /* Vintage ad — keep it compact */
    .vintage-ad {
        margin-top: 16px;
    }

    .ad-company {
        font-size: 1.1rem;
    }
}

/* ================================================================
   BACK TO TOP BUTTON
   ================================================================ */
.back-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 24px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper-bg);
    font-size: 1.2rem;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 900;
}

.back-to-top.visible {
    opacity: 0.7;
    pointer-events: auto;
}

.back-to-top:hover,
.back-to-top:focus {
    opacity: 1;
}

/* ================================================================
   PRINT STYLESHEET
   ================================================================ */
@media print {
    body {
        background: white;
        color: black;
        font-size: 10pt;
    }

    .newspaper {
        box-shadow: none;
        max-width: 100%;
        background: white;
    }

    .newspaper::before,
    .newspaper::after {
        display: none;
    }

    .newspaper-footer::after {
        display: none;
    }

    .social-link,
    .home-link,
    .footer-top-link,
    .back-to-top,
    .nav-dropdown,
    .reader-count,
    .reader-count-sep,
    .skybox-banner {
        display: none;
    }

    .masthead-top-bar {
        justify-content: center;
        position: static;
        box-shadow: none;
    }

    .wx-rays, .wx-cloud, .wx-drop, .wx-flake, .wx-bolt, .wx-fog {
        animation: none !important;
    }

    .section-fade {
        opacity: 1 !important;
        transform: none !important;
    }

    .classified-card {
        break-inside: avoid;
    }

    .above-fold {
        grid-template-columns: 1fr 280px;
    }

    .lead-body {
        column-count: 2;
    }

    .article-body-columns {
        column-count: 2;
    }

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

    .section-banner,
    .banner-safety,
    .banner-tech {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .vintage-ad {
        break-inside: avoid;
    }

    .fold-indicator {
        display: none;
    }
}

/* ================================================================
   THE FUNNIES — Comic Strip
   ================================================================ */
.funnies-section {
    padding: 0 var(--gutter);
    padding-bottom: 30px;
    text-align: center;
}

.funnies-header {
    text-align: center;
    margin-bottom: 16px;
}

.funnies-rule {
    height: 1px;
    background: var(--sepia-rule);
    margin: 6px 0;
}

.funnies-title {
    font-family: var(--font-headline);
    font-size: 1.4rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.05em;
}

.funnies-subtitle {
    font-family: var(--font-label);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--seegars-green);
}

.comic-strip {
    display: flex;
    justify-content: center;
    gap: 0;
    border: 3px solid var(--ink);
    background: #e8e0c8;
    position: relative;
    overflow: hidden;
    max-width: fit-content;
    margin: 0 auto;
}

/* Newspaper aging overlay */
.comic-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(139, 115, 85, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse at 80% 30%, rgba(139, 115, 85, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 2;
}

.comic-panel {
    position: relative;
    overflow: hidden;
}

.comic-panel:not(:last-child) {
    border-right: 2.5px solid var(--ink);
}

.comic-panel img {
    display: block;
    width: 100%;
    height: auto;
    filter: contrast(1.05) brightness(0.95);
}

.funnies-credit {
    text-align: right;
    font-family: var(--font-label);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sepia);
    margin-top: 6px;
    font-style: italic;
}

@media (max-width: 767px) {
    .comic-strip {
        flex-direction: column;
    }

    .comic-panel:not(:last-child) {
        border-right: none;
        border-bottom: 2.5px solid var(--ink);
    }
}

/* ================================================================
   WEATHER ANIMATIONS
   ================================================================ */
@keyframes wx-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes wx-drift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

@keyframes wx-fall {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(6px); opacity: 0; }
}

@keyframes wx-flash {
    0%, 90%, 100% { opacity: 0.15; }
    93%, 97% { opacity: 1; }
}

@keyframes wx-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.wx-rays {
    animation: wx-spin 12s linear infinite;
    transform-origin: 24px 24px;
}

.wx-cloud {
    animation: wx-drift 6s ease-in-out infinite;
}

.wx-drop {
    animation: wx-fall 1.5s ease-in infinite;
}

.wx-drop-2 { animation-delay: 0.5s; }
.wx-drop-3 { animation-delay: 1s; }

.wx-flake {
    animation: wx-fall 2.5s ease-in infinite;
}

.wx-flake-2 { animation-delay: 0.8s; }
.wx-flake-3 { animation-delay: 1.6s; }

.wx-bolt {
    animation: wx-flash 3s ease-in-out infinite;
}

.wx-fog {
    animation: wx-pulse 4s ease-in-out infinite;
}

.wx-fog-2 { animation-delay: 1.3s; }
.wx-fog-3 { animation-delay: 2.6s; }

/* ================================================================
   ACCESSIBILITY — Reduced Motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .section-fade {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .wx-rays, .wx-cloud, .wx-drop, .wx-flake, .wx-bolt, .wx-fog {
        animation: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ================================================================
   LOGIN OVERLAY
   ================================================================ */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(21, 66, 139, 0.55) 0%, transparent 60%),
        linear-gradient(180deg, #0A1D38 0%, #06101F 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Summer accent stripe across the top of the login card */
.login-card-stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, #405227 0%, #6B7F3A 30%, #C9A227 65%, #9A3B2C 100%);
    border-bottom: 1px solid rgba(43, 36, 24, 0.15);
}

/* Split light/dark INSIDE the login card — pure site colors, no red/blue tint */
.login-card-split {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: transparent;
}

.login-card-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 0;
    pointer-events: none;
}

.login-card-bg-light { left: 0;  background: #F5F6F4; }
.login-card-bg-dark  { right: 0; background: #161A16; }

.login-card-saber {
    position: absolute;
    top: 6%;
    bottom: 6%;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.7) 10%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.7) 90%,
        transparent 100%);
    box-shadow:
        0 0 5px rgba(255, 255, 255, 0.9),
        0 0 12px rgba(255, 255, 255, 0.55),
        -6px 0 20px rgba(120, 195, 255, 0.6),
         6px 0 20px rgba(255, 70, 70, 0.6),
        -14px 0 44px rgba(120, 195, 255, 0.25),
         14px 0 44px rgba(255, 70, 70, 0.25);
}

.login-card-inner {
    position: relative;
    z-index: 2;
    padding: 26px 28px 22px;
    text-align: center;
}

/* ─── Split text across the centerline (dark on light half, light on dark half) ─── */
.login-card-split .login-title,
.login-card-split .login-company,
.login-card-split .login-subtitle,
.login-card-split .login-footer,
.login-card-split .login-side-pick legend,
.login-card-split .login-field label {
    background: linear-gradient(to right, #231F20 50%, #E5E8E2 50%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    text-shadow: none;
}

.login-card-split .login-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, rgba(35, 31, 32, 0.35) 50%, rgba(229, 232, 226, 0.35) 50%) 1;
}

.login-card-split .login-footer {
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid;
    border-image: linear-gradient(to right, rgba(35, 31, 32, 0.35) 50%, rgba(229, 232, 226, 0.35) 50%) 1;
    font-size: 0.6rem;
}

.login-card-split .login-title { font-size: 2rem; margin-bottom: 4px; }
.login-card-split .login-company { margin-bottom: 2px; }
.login-card-split .login-subtitle { font-size: 0.65rem; }

/* ─── Input fields: split background with side-themed text ─── */
.login-card-split .login-field { margin-bottom: 12px; }

.login-card-split .login-field input {
    background: linear-gradient(to right, #FCFCFB 50%, #161A16 50%);
    border: 1px solid;
    border-image: linear-gradient(to right, #DEE0D9 50%, #2F352F 50%) 1;
    color: #008752;
    font-weight: 600;
    caret-color: #008752;
    padding: 8px 12px;
}

.login-card-split .login-field input:focus {
    border-image: linear-gradient(to right, #008752 50%, #00B86E 50%) 1;
    box-shadow: none;
}

.login-card-split .login-field input::placeholder { color: rgba(150, 150, 150, 0.6); }

/* ─── Side picker — naked LEGO with a glowing saber halo behind ─── */
.login-card-split .login-side-pick {
    margin: 16px 0 14px;
}

.login-card-split .login-side-pick legend {
    margin-bottom: 8px;
    font-size: 0.62rem;
}

.login-card-split .login-side-option-card {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 6px 4px 4px;
    position: relative;
    transition: transform 0.15s ease;
}

.login-card-split .login-side-option-card::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    z-index: 0;
    transition: width 0.2s ease, height 0.2s ease, background 0.2s ease;
}

.login-card-split .login-side-option-light .login-side-option-card::before {
    background: radial-gradient(circle,
        rgba(120, 195, 255, 0.55) 0%,
        rgba(120, 195, 255, 0.28) 40%,
        transparent 75%);
}

.login-card-split .login-side-option-dark .login-side-option-card::before {
    background: radial-gradient(circle,
        rgba(255, 70, 70, 0.55) 0%,
        rgba(255, 70, 70, 0.28) 40%,
        transparent 75%);
}

.login-card-split .login-side-option-card img {
    position: relative;
    z-index: 1;
    height: 64px;
    width: auto;
}

.login-card-split .login-side-option-light .login-side-option-label { color: #231F20; }
.login-card-split .login-side-option-dark  .login-side-option-label { color: #E5E8E2; }

/* Hover / selected — bigger, brighter halo, no card chrome */
.login-card-split .login-side-option:hover .login-side-option-card { transform: translateY(-2px); }

.login-card-split .login-side-option-light input:checked + .login-side-option-card::before {
    width: 96px; height: 96px;
    background: radial-gradient(circle,
        rgba(120, 195, 255, 0.85) 0%,
        rgba(120, 195, 255, 0.45) 40%,
        transparent 78%);
}

.login-card-split .login-side-option-dark input:checked + .login-side-option-card::before {
    width: 96px; height: 96px;
    background: radial-gradient(circle,
        rgba(255, 70, 70, 0.85) 0%,
        rgba(255, 70, 70, 0.45) 40%,
        transparent 78%);
}

.login-card-split .login-side-option input:focus-visible + .login-side-option-card {
    outline: 2px solid var(--seegars-green);
    outline-offset: 4px;
    border-radius: 6px;
}

.login-card-split .login-btn { padding: 9px; margin-top: 6px; }

.login-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border: 1px solid var(--sepia-rule);
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        0 18px 50px rgba(6, 16, 31, 0.45),
        0 2px 12px rgba(6, 16, 31, 0.25);
    padding: 48px 40px 36px;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Side picker — two big radio-card options */
.login-side-pick {
    margin: 22px 0 18px;
    padding: 0;
    border: none;
}

.login-side-pick legend {
    width: 100%;
    text-align: center;
    font-family: var(--font-label);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--ink-faded);
    margin-bottom: 12px;
    padding: 0;
}

.login-side-pick {
    display: block;
}

.login-side-pick-row {
    display: flex;
    gap: 12px;
}

.login-side-option {
    flex: 1;
    cursor: pointer;
    position: relative;
    display: block;
}

.login-side-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.login-side-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px 10px;
    border: 2px solid var(--sepia-rule);
    border-radius: 6px;
    background: var(--paper-bg);
    transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease, background 0.2s ease;
}

.login-side-option-card img {
    height: 56px;
    width: auto;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.login-side-option-label {
    font-family: var(--font-label);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink);
}

.login-side-option:hover .login-side-option-card {
    transform: translateY(-2px);
}

.login-side-option-light:hover .login-side-option-card {
    border-color: rgba(120, 195, 255, 0.7);
}

.login-side-option-dark:hover .login-side-option-card {
    border-color: rgba(255, 70, 70, 0.7);
}

.login-side-option input:checked + .login-side-option-card {
    transform: translateY(-2px);
}

.login-side-option-light input:checked + .login-side-option-card {
    border-color: #66c5ff;
    background: rgba(120, 195, 255, 0.10);
    box-shadow:
        0 0 0 1px #66c5ff,
        0 0 14px rgba(120, 195, 255, 0.5),
        0 0 32px rgba(120, 195, 255, 0.28);
}

.login-side-option-dark input:checked + .login-side-option-card {
    border-color: #ff4444;
    background: rgba(255, 70, 70, 0.10);
    box-shadow:
        0 0 0 1px #ff4444,
        0 0 14px rgba(255, 70, 70, 0.5),
        0 0 32px rgba(255, 70, 70, 0.28);
}

.login-side-option input:focus-visible + .login-side-option-card {
    outline: 2px solid var(--seegars-green);
    outline-offset: 3px;
}

.login-header {
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: var(--rule-double);
}

.login-company {
    font-family: var(--font-label);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--seegars-green);
    margin-bottom: 4px;
}

.login-title {
    font-family: var(--font-headline);
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 8px;

    /* Heat-shimmer gradient filling the letters (matches the masthead) */
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(100deg, #405227 0%, #6B7F3A 25%, #C9A227 65%, #9A3B2C 100%);
    background-size: 130% 130%;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 1px 1px rgba(43, 36, 24, 0.4));
}

.login-subtitle {
    font-family: var(--font-label);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sepia);
}

.login-error {
    background: #fdf0ef;
    color: #9b2c2c;
    border: 1px solid #e8aaaa;
    font-family: var(--font-body);
    font-size: 0.85rem;
    padding: 10px 16px;
    margin-bottom: 20px;
    border-radius: 2px;
}

.login-form {
    text-align: left;
}

.login-field {
    margin-bottom: 18px;
}

.login-field label {
    display: block;
    font-family: var(--font-label);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faded);
    margin-bottom: 6px;
}

.login-field input {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper-bg);
    border: 1px solid var(--sepia-rule);
    border-radius: 2px;
    outline: none;
    transition: border-color 0.2s;
}

.login-field input:focus {
    border-color: var(--seegars-green);
    box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.15);
}

.login-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--seegars-green);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.2s;
}

.login-btn:hover {
    background: var(--seegars-green-dark);
}

.login-footer {
    margin-top: 28px;
    padding-top: 16px;
    border-top: var(--rule-sepia);
    font-family: var(--font-label);
    font-weight: 400;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sepia-light);
}

/* Login — responsive */
@media (max-width: 480px) {
    .login-card {
        padding: 36px 24px 28px;
    }

    .login-title {
        font-size: 2rem;
    }
}

/* ================================================================
   TECH TALK — Claude chat demo
   ================================================================ */
.tech-talk-section {
    padding: 0 var(--gutter) 30px;
}

.tech-talk-header {
    text-align: center;
    margin-bottom: 20px;
}

.tech-talk-rule {
    height: 1px;
    background: var(--sepia-rule);
    margin: 8px 0;
}

.tech-talk-eyebrow {
    font-family: var(--font-label);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--seegars-green);
    margin: 6px 0 2px;
}

.tech-talk-byline {
    font-family: var(--font-label);
    font-size: 0.78rem;
    color: var(--ink-faded);
    margin: 0 0 8px;
}

.tech-talk-byline .byline-title {
    color: var(--seegars-green);
    font-weight: 600;
}

.tech-talk-body {
    max-width: 760px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
}

.tech-talk-body p {
    margin: 0 0 1em;
}

.tech-talk-chat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 22px 0;
    padding: 18px 16px;
    background: var(--surface-warm);
    border: 1px solid var(--sepia-rule);
    border-radius: 12px;
}

.chat-message {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.chat-message.visible {
    opacity: 1;
    transform: translateY(0);
}

.chat-message-user {
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-avatar-user {
    border: 2px solid var(--cream);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.chat-avatar-claude {
    background: #c97d56; /* Anthropic clay */
    color: #fff;
}

.chat-avatar-mark {
    font-size: 1.35rem;
    line-height: 1;
}

.chat-bubble {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 16px;
    line-height: 1.5;
    font-size: 0.98rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.chat-message-user .chat-bubble {
    background: var(--seegars-green);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chat-message-claude .chat-bubble {
    background: var(--surface-elevated);
    color: var(--ink);
    border-bottom-left-radius: 4px;
}

.chat-bubble p {
    margin: 0;
}

.chat-bubble p + p {
    margin-top: 8px;
}

.typing-indicator {
    display: inline-flex;
    gap: 5px;
    padding: 4px 2px;
}

.typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b0b0b0;
    animation: typing-bounce 1.2s infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.chat-response p {
    margin: 0;
}

.chat-response p + p {
    margin-top: 8px;
}

.chat-cursor {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    vertical-align: text-bottom;
    background: var(--ink);
    margin-left: 1px;
    animation: chat-cursor-blink 0.9s steps(1) infinite;
}

@keyframes chat-cursor-blink {
    50% { opacity: 0; }
}

@media (max-width: 600px) {
    .tech-talk-title { font-size: 1.45rem; }
    .chat-bubble { max-width: 82%; font-size: 0.95rem; }
    .chat-avatar { width: 34px; height: 34px; }
}

/* ================================================================
   THEME TOGGLE — light/dark switch in the masthead-nav
   ================================================================ */
.theme-toggle {
    /* Re-enabled 2026-08-29 (Brad: "I don't see a sun/moon button"). The
       July Americana edition hid it; the dark palette has been kept current
       since, so readers get the switch back. */
    display: inline-flex;
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    transition: transform 0.18s ease, filter 0.2s ease;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* No tooltip — the sun and the moon speak for themselves (Brad, 2026-08-29). */
.theme-toggle::before,
.theme-toggle::after {
    pointer-events: none;
    opacity: 0;
    z-index: 100;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 0.85, 0.42, 1.05);
}

.theme-toggle::after {
    content: none;
    position: absolute;
    top: 50%;
    right: calc(100% + 14px);
    transform: translateY(-50%) translateX(8px);
    background: rgba(8, 8, 12, 0.96);
    color: #f3ecd9;
    font-family: var(--font-label);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 8px 14px;
    border-radius: 3px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.theme-toggle:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

[data-theme="dark"] .theme-toggle::after {
    content: none;
    background: rgba(243, 236, 217, 0.96);
    color: #2B2418;
    border-color: rgba(0, 0, 0, 0.1);
}

.theme-toggle:hover {
    transform: scale(1.08);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--seegars-green);
    outline-offset: 4px;
    border-radius: 4px;
}

.theme-toggle:active {
    transform: scale(0.96);
}

.theme-toggle-img {
    width: 26px;
    height: 26px;
    display: block;
    color: var(--seegars-green);
}

/* Light mode: show the moon (tap → switch to dark) */
.theme-toggle-img-todark  { display: block; }
.theme-toggle-img-tolight { display: none; }

/* Dark mode: show the sun (tap → switch to light) */
[data-theme="dark"] .theme-toggle-img-todark  { display: none; }
[data-theme="dark"] .theme-toggle-img-tolight { display: block; }

.masthead-nav {
    display: inline-flex;
    align-items: center;
}



/* ================================================================
   ARCHIVED PALETTE — Americana (July 2026 and earlier)
   ================================================================
   An issue can pin the palette it was published under via
   meta.palette, so changing the site's colors for a new month does
   not silently repaint every back issue. Without this, July's
   Independence Day issue would render in August's summer colors and
   read as though it had always looked that way. */
.newspaper[data-palette="americana"] {
    --usa-blue: #0A3161;
    --usa-blue-bright: #15428B;
    --usa-red: #B31942;
    --usa-red-bright: #C8102E;
    --usa-white: #FCFCFB;
    --seegars-green: #0A3161;
    --seegars-green-light: #B31942;
    --seegars-green-dark: #07223F;
    --paper-bg-dark: #ECEDEF;
    --cream: #F4F6FB;
    --surface-warm: #F3F1F4;
    --ink: #14213D;
    --ink-light: #2A3A5C;
    --ink-faded: #5B6B8A;
    --sepia: #B31942;
    --sepia-light: #C8102E;
    --sepia-rule: #C9D3E6;
    --purple: #B31942;
    --purple-light: #C8102E;
    --rule-thin: 1px solid #2A3A5C;
    --rule-thick: 3px solid #0A3161;
    --rule-double: 4px double #B31942;
}

/* The waving flag inside the letterforms, restored for archived issues. */
.newspaper[data-palette="americana"] .nameplate-title {
    background-image: url('../images/american_flag.jpg');
    background-size: 118% 118%;
    background-position: 0% 50%;
    filter: drop-shadow(0 1px 1px rgba(10, 33, 57, 0.45));
    animation: nameplate-flag-fly 16s ease-in-out infinite;
}

@keyframes nameplate-flag-fly {
    0%   { background-position: 0% 42%; }
    50%  { background-position: 100% 58%; }
    100% { background-position: 0% 42%; }
}

@media (prefers-reduced-motion: reduce) {
    .newspaper[data-palette="americana"] .nameplate-title {
        animation: none;
        background-position: 35% 50%;
    }
}

/* ─── Inline article figure (screenshots inside a walkthrough) ─── */
.article-figure {
    margin: 22px 0;
    padding: 10px;
    background: var(--surface-warm);
    border: var(--rule-sepia);
    border-radius: 4px;
}

.article-figure img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--sepia-rule);
    border-radius: 2px;
    /* Screenshots are light-on-light against warm paper; a hairline keeps the
       edge of the screen from dissolving into the page. */
}

.article-figure figcaption {
    margin-top: 8px;
    font-family: var(--font-label);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faded);
    text-align: center;
}

/* ─── This or That — live picks band ───
   Ten questions, each a row of big image tiles. Built thumb-first: the tile is
   the tap target, the label is big, the result sweeps in over the picture. */
.tot-band {
    padding: 34px var(--gutter) 30px;
    background:
        radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--seegars-green) 18%, transparent), transparent 60%),
        var(--surface-warm);
    border-top: var(--rule-sepia);
    border-bottom: var(--rule-sepia);
}

.tot-inner {
    max-width: 880px;
    margin: 0 auto;
}

.tot-header {
    text-align: center;
    margin-bottom: 22px;
}

.tot-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.7rem;
    color: var(--seegars-green);
    margin-bottom: 8px;
}

.tot-eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--seegars-green);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--seegars-green) 60%, transparent);
    animation: tot-pulse 2.2s ease-out infinite;
}

@keyframes tot-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--seegars-green) 55%, transparent); }
    100% { box-shadow: 0 0 0 10px transparent; }
}

.tot-title {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 8px;
    text-wrap: balance;
}

.tot-intro {
    max-width: 52ch;
    margin: 0 auto 14px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink-light);
}

/* One dot per question: filled once picked, ringed for the one on stage. */
.tot-progress {
    display: flex;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.tot-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 16%, transparent);
    transition: background 0.3s ease, transform 0.3s ease;
}
.tot-dot.is-done { background: var(--seegars-green); }
.tot-dot.is-current {
    transform: scale(1.3);
    box-shadow: 0 0 0 2px var(--paper-bg), 0 0 0 4px var(--seegars-green);
}

/* The stage holds one card; during a slide the leaving card and the entering
   card share the same grid cell, so the stage is as tall as the taller one and
   nothing below it jumps. */
.tot-stage {
    display: grid;
    overflow: hidden;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.tot-stage > .tot-card {
    grid-area: 1 / 1;
    min-width: 0;
}

.tot-card {
    background: var(--paper-bg);
    border: var(--rule-sepia);
    border-radius: 12px;
    padding: 14px 14px 12px;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 14px 30px -22px color-mix(in srgb, var(--ink) 70%, transparent);
}

@keyframes tot-in-forward { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tot-in-back    { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tot-out-forward { from { transform: none; opacity: 1; } to { transform: translateX(-70px); opacity: 0; } }
@keyframes tot-out-back    { from { transform: none; opacity: 1; } to { transform: translateX(70px); opacity: 0; } }

.tot-enter-forward { animation: tot-in-forward 0.42s cubic-bezier(.2,.8,.2,1) both; }
.tot-enter-back    { animation: tot-in-back 0.42s cubic-bezier(.2,.8,.2,1) both; }
.tot-leave-forward { animation: tot-out-forward 0.42s cubic-bezier(.4,0,.8,.4) both; pointer-events: none; }
.tot-leave-back    { animation: tot-out-back 0.42s cubic-bezier(.4,0,.8,.4) both; pointer-events: none; }

.tot-card-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.tot-card-num {
    font-family: var(--font-label);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--seegars-green);
}

.tot-prompt {
    flex: 1;
    margin: 0;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.15;
    color: var(--ink);
}

.tot-card-total {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.66rem;
    color: var(--ink-faded);
    white-space: nowrap;
}

.tot-tiles {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tot-tiles-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tot-tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--ink) 10%, var(--paper-bg));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-shadow: 0 0 0 0 var(--seegars-green), 0 6px 16px -10px color-mix(in srgb, var(--ink) 55%, transparent);
    transition: transform 0.18s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    text-align: left;
}

.tot-tiles-3 .tot-tile {
    aspect-ratio: 4 / 5;
}

.tot-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1), filter 0.3s ease;
}

.tot-tile-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.22) 42%, rgba(0,0,0,0) 70%);
    transition: background 0.3s ease;
}

.tot-tile-label {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: clamp(1rem, 3.6vw, 1.45rem);
    font-weight: 600;
    line-height: 1.05;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    transition: bottom 0.3s cubic-bezier(.2,.8,.2,1);
}

.tot-tile-check {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--seegars-green);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    animation: tot-pop 0.35s cubic-bezier(.2,1.4,.4,1);
}

@keyframes tot-pop {
    from { transform: scale(0.2); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.tot-tile-result {
    position: absolute;
    left: 12px;
    top: 10px;
    z-index: 2;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
}

.tot-tile-pct {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: clamp(1.6rem, 6vw, 2.6rem);
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
    font-variant-numeric: tabular-nums;
}

/* The count under the share. Deliberately quiet — the percentage is the
   headline, this is the thing that tells you how much weight it carries. */
.tot-tile-votes {
    display: block;
    margin-top: 2px;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.6rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    font-variant-numeric: tabular-nums;
}

.tot-tile-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 7px;
    z-index: 3;
    background: rgba(255,255,255,0.22);
}

.tot-tile-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--seegars-green);
    transition: width 0.9s cubic-bezier(.2,.8,.2,1);
}

/* Hover / press on devices that have a pointer; touch just gets the press. */
@media (hover: hover) {
    .tot-tile:hover img { transform: scale(1.04); }
    .tot-tile:hover { transform: translateY(-2px); }
}
.tot-tile:active { transform: scale(0.98); }
.tot-tile:focus-visible {
    outline: 3px solid var(--seegars-green);
    outline-offset: 3px;
}
.tot-tile:disabled { cursor: progress; }

/* After a pick: the chosen side gets the ring, both sides show their number,
   the side that is not leading dims a touch so the split reads at a glance. */
.tot-tile.is-mine {
    box-shadow: 0 0 0 3px var(--seegars-green), 0 10px 22px -12px color-mix(in srgb, var(--ink) 65%, transparent);
}
.is-revealed .tot-tile-result {
    opacity: 1;
    transform: translateY(0);
}
.is-revealed .tot-tile-shade {
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.18) 100%);
}
.is-revealed .tot-tile:not(.is-leading) img {
    filter: saturate(0.7);
}
.is-revealed .tot-tile.is-leading .tot-tile-pct {
    color: color-mix(in srgb, var(--seegars-green) 45%, #fff);
}

.tot-hint {
    margin: 10px 0 0;
    text-align: center;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.66rem;
    color: var(--ink-faded);
    min-height: 1em;
}

/* Back on the left, the counter on the right. There is no Next: the next
   question arrives on its own once this one is picked. */
.tot-nav {
    display: grid;
    /* Back | counter | (New player, when a half-finished game gets handed
       over). With no third button the counter still sits at the right edge. */
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}
.tot-new-player {
    padding: 0 14px;
    font-size: 0.68rem;
    white-space: nowrap;
}
.tot-nav .tot-nav-count { justify-self: end; }
.tot-nav-count {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.7rem;
    color: var(--ink-faded);
    text-align: center;
}

/* Thumb-sized: 48px tall, wide enough to hit without looking. */
.tot-btn {
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    border: 2px solid var(--seegars-green);
    background: var(--seegars-green);
    color: #fff;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.tot-btn:active { transform: scale(0.97); }
.tot-btn:disabled { opacity: 0.35; cursor: default; }
.tot-btn:focus-visible { outline: 3px solid var(--seegars-green); outline-offset: 3px; }
.tot-btn-ghost {
    background: transparent;
    color: var(--seegars-green);
}

/* The closing card. */
.tot-done {
    text-align: center;
    padding: 34px 18px 28px;
    display: grid;
    gap: 10px;
    justify-items: center;
}
.tot-done-line {
    margin: 0;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: clamp(1.4rem, 5vw, 2rem);
    line-height: 1.15;
    color: var(--ink);
}
.tot-done-line strong { color: var(--seegars-green); }
.tot-done-sub {
    margin: 0 0 6px;
    max-width: 44ch;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--ink-light);
}

/* "Change a pick" + "Pass it on" side by side, stacking on narrow phones. */
.tot-done-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

.tot-error {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: #b8392c;
}

@media (max-width: 480px) {
    .tot-band { padding: 26px 12px 24px; }
    .tot-card { padding: 10px 10px 12px; border-radius: 8px; }
    .tot-tiles { gap: 8px; }
    .tot-tile { border-radius: 8px; }
    .tot-tiles-3 .tot-tile { aspect-ratio: 3 / 4; }
    .tot-tiles-3 .tot-tile-label { font-size: 0.85rem; letter-spacing: 0.05em; left: 8px; right: 8px; bottom: 10px; }
    .tot-tiles-3 .tot-tile-pct { font-size: 1.3rem; }
    .tot-tile-votes { font-size: 0.54rem; letter-spacing: 0.06em; }
    .tot-tile-check { width: 26px; height: 26px; top: 8px; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .tot-eyebrow::before { animation: none; }
    .tot-tile, .tot-tile img, .tot-tile-bar-fill, .tot-tile-result, .tot-tile-label, .tot-progress-fill { transition: none; }
    .tot-tile-check { animation: none; }
    .tot-enter-forward, .tot-enter-back { animation: none; }
    .tot-leave-forward, .tot-leave-back { display: none; }
}

/* A figure set inside the text, magazine-inset style: it takes a little under
   half the column and the paragraphs after it wrap around. `clear: both` keeps
   consecutive insets from stacking beside each other. */
.article-figure--float {
    width: 46%;
    max-width: 360px;
    clear: both;
    margin: 6px 0 14px 20px;
    padding: 8px;
}

.article-figure--right {
    float: right;
}

.article-figure--left {
    float: left;
    margin: 6px 20px 14px 0;
}

.article-figure--float figcaption {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
}

/* Nothing after the article inherits a dangling float. */
.article-body::after {
    content: '';
    display: table;
    clear: both;
}

@media (max-width: 720px) {
    /* A phone column is too narrow to share with a picture — the inset goes
       back to being a full-width block between the steps. */
    .article-figure--float,
    .article-figure--left {
        float: none;
        width: 100%;
        max-width: none;
        margin: 22px 0;
        padding: 10px;
    }
}

/* ─── Newsletter gate: the Employee Links PIN door in The Fence Line's clothes ───
   Reuses the login-card family above; these are only the pieces the PIN flow
   adds — the "I don't have a PIN yet" button, the PIN box, the register form's
   select, and the Seegars One sign-in option. */
.newsletter-gate { overflow-y: auto; align-items: flex-start; }
.newsletter-gate .gate-card { margin-block: auto; flex-shrink: 0; }
.gate-card { max-width: 440px; }
.gate-s1 { margin: 0 0 20px; padding: 20px 16px; border: 2px solid var(--seegars-green); border-radius: 10px; background: color-mix(in srgb, var(--seegars-green) 7%, var(--paper-bg)); text-align: center; }
.gate-s1 .gate-heading { margin: 0 0 10px; }
.gate-s1 .gate-copy { margin-bottom: 16px; }
.newsletter-gate .gate-s1 a.gate-s1-btn { display: block; padding: 16px 12px; border-radius: 6px; background: #254636; color: #fff; font: 700 1.05rem/1.4 var(--font-label); text-decoration: none; }
.newsletter-gate .gate-s1 a.gate-s1-btn:hover { background: #163a28; color: #fff; }
.gate-pin-intro { padding-top: 18px; border-top: var(--rule-sepia); margin: 0 0 16px; font: 600 0.95rem/1.5 var(--font-body); color: var(--ink-light); text-align: center; }
.newsletter-gate button:focus-visible,
.newsletter-gate a:focus-visible { outline: 3px solid var(--sepia); outline-offset: 3px; }

.gate-kicker {
    margin: 0 0 12px;
    text-align: center;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.7rem;
    color: var(--ink-faded);
}

.gate-alt-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 16px;
    border-radius: 8px;
    border: 2px solid color-mix(in srgb, var(--seegars-green) 45%, transparent);
    background: color-mix(in srgb, var(--seegars-green) 7%, transparent);
    color: var(--seegars-green);
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.gate-alt-btn:hover { border-color: var(--seegars-green); background: color-mix(in srgb, var(--seegars-green) 12%, transparent); }
.gate-alt-icon { font-size: 1rem; line-height: 1; }

.gate-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.66rem;
    color: var(--ink-faded);
}
.gate-or::before, .gate-or::after { content: ''; flex: 1; height: 1px; background: var(--sepia-rule); }

.login-field input.gate-pin {
    text-align: center;
    font-size: 1.6rem;
    letter-spacing: 0.4em;
    font-variant-numeric: tabular-nums;
}

.login-field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--sepia-rule);
    border-radius: 6px;
    background: var(--paper-bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
}
.login-field select:focus { outline: none; border-color: var(--seegars-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seegars-green) 25%, transparent); }

.gate-link {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 4px;
    background: none;
    border: 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-faded);
    cursor: pointer;
    text-underline-offset: 3px;
}
.gate-link:hover { color: var(--seegars-green); text-decoration: underline; }

.gate-heading {
    margin: 0 0 4px;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--ink);
}
.gate-copy { margin: 0 0 12px; font-family: var(--font-body); font-size: 0.92rem; line-height: 1.5; color: var(--ink-light); }
.gate-copy-muted { color: var(--ink-faded); margin-bottom: 18px; }

.gate-done { text-align: center; padding: 8px 0 4px; }
.gate-done-mark {
    width: 52px; height: 52px; margin: 0 auto 14px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--seegars-green) 12%, transparent);
    color: var(--seegars-green);
    font-size: 1.6rem; font-weight: 700;
}

/* ─── This or That: the results list on the closing card ─── */
.tot-results {
    list-style: none;
    margin: 6px 0 4px;
    padding: 0;
    width: 100%;
    max-width: 560px;
    display: grid;
    gap: 10px;
    text-align: left;
}
.tot-result {
    padding: 10px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.tot-result-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}
.tot-result-prompt {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
}
.tot-result-bars { display: grid; gap: 4px; }
.tot-result-row {
    display: grid;
    grid-template-columns: minmax(84px, 30%) 1fr 3.2em;
    align-items: center;
    gap: 8px;
    font-family: var(--font-label);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--ink-light);
}
.tot-result-label { display: flex; align-items: center; gap: 6px; text-transform: uppercase; min-width: 0; }
.tot-result-label > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tot-result-you {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--seegars-green);
    color: #fff;
    flex: none;
}
.tot-result-track {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 12%, transparent);
    overflow: hidden;
}
.tot-result-fill {
    display: block;
    height: 100%;
    background: color-mix(in srgb, var(--ink) 35%, transparent);
    transition: width 0.6s cubic-bezier(.2,.8,.2,1);
}
.tot-result-row.is-leading .tot-result-fill { background: var(--seegars-green); }
.tot-result-row.is-leading .tot-result-pct,
.tot-result-row.is-leading .tot-result-label { color: var(--ink); font-weight: 600; }
.tot-result-pct { text-align: right; font-variant-numeric: tabular-nums; }

/* The raw count sits under the percentage in the summary, in the same column,
   so the rows keep their grid and nothing reflows. */
.tot-result-votes {
    display: block;
    font-family: var(--font-label);
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    line-height: 1.3;
    color: var(--ink-faded);
    font-weight: 400;
}
@media (max-width: 420px) {
    .tot-result-row { grid-template-columns: minmax(72px, 34%) 1fr 3em; font-size: 0.72rem; }
}

/* ─── Help us build next month: the ribbon at the top and the band at the bottom ─── */
.hb-ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 var(--gutter) 14px;
    padding: 10px 16px;
    border: 1.5px solid var(--seegars-green);
    border-radius: 6px;
    background: color-mix(in srgb, var(--seegars-green) 8%, var(--paper-bg));
    color: var(--ink) !important;
    font-family: var(--font-body);
    font-size: 0.92rem;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.hb-ribbon:hover { background: color-mix(in srgb, var(--seegars-green) 14%, var(--paper-bg)); color: var(--ink) !important; }
.hb-ribbon strong { color: var(--seegars-green); }
.hb-ribbon-icon { font-size: 1.1rem; line-height: 1; }
.hb-ribbon-arrow { font-family: var(--font-label); font-weight: 600; color: var(--seegars-green); animation: hb-bob 1.6s ease-in-out infinite; }
@keyframes hb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

.hb-band {
    padding: 36px var(--gutter) 34px;
    background:
        radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--seegars-green) 16%, transparent), transparent 60%),
        var(--surface-warm);
    border-top: var(--rule-sepia);
}
.hb-inner { max-width: 880px; margin: 0 auto; }
.hb-header { text-align: center; margin-bottom: 22px; }
.hb-eyebrow {
    display: block;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.7rem;
    color: var(--seegars-green);
    margin-bottom: 8px;
}
.hb-title {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: clamp(1.9rem, 5.5vw, 2.8rem);
    line-height: 1.02;
    color: var(--ink);
    margin: 0 0 10px;
    text-wrap: balance;
}
.hb-intro { max-width: 58ch; margin: 0 auto; font-family: var(--font-body); font-size: 0.98rem; line-height: 1.55; color: var(--ink-light); }
.hb-sofar {
    margin: 12px 0 0;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    color: var(--ink-faded);
}

.hb-thanks {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 560px;
    margin: 0 auto 18px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--seegars-green);
    background: var(--paper-bg);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink);
}
.hb-thanks-mark {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--seegars-green); color: #fff; font-weight: 700;
}

.hb-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.hb-card {
    display: grid;
    gap: 6px;
    justify-items: start;
    text-align: left;
    padding: 16px 16px 18px;
    border-radius: 12px;
    border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
    background: var(--paper-bg);
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 8px 20px -16px color-mix(in srgb, var(--ink) 60%, transparent);
}
@media (hover: hover) { .hb-card:hover { transform: translateY(-2px); border-color: var(--seegars-green); } }
.hb-card:active { transform: scale(0.98); }
.hb-card:focus-visible { outline: 3px solid var(--seegars-green); outline-offset: 3px; }
.hb-card.is-active { border-color: var(--seegars-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seegars-green) 25%, transparent); }
.hb-card-icon { font-size: 1.7rem; line-height: 1; }
.hb-card-title { font-family: var(--font-headline); font-weight: 700; font-size: 1.05rem; line-height: 1.15; }
.hb-card-blurb { font-family: var(--font-body); font-size: 0.85rem; line-height: 1.4; color: var(--ink-light); }

.hb-form {
    max-width: 620px;
    margin: 18px auto 0;
    padding: 18px 18px 20px;
    border-radius: 12px;
    border: 1.5px solid var(--seegars-green);
    background: var(--paper-bg);
    scroll-margin-top: 16px;
}
.hb-form-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hb-form-icon { font-size: 1.3rem; }
.hb-form-title { flex: 1; margin: 0; font-family: var(--font-headline); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.hb-form-close {
    width: 36px; height: 36px; border-radius: 50%; border: 0;
    background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-light);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.hb-field { margin-bottom: 14px; }
.hb-label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.66rem;
    color: var(--ink-faded);
}
.hb-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--sepia-rule);
    border-radius: 8px;
    background: var(--paper-bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
}
.hb-input:focus { outline: none; border-color: var(--seegars-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--seegars-green) 22%, transparent); }
.hb-textarea { resize: vertical; min-height: 96px; }
.hb-hint { margin: 6px 0 0; font-family: var(--font-body); font-size: 0.78rem; color: var(--ink-faded); }
.hb-center { text-align: center; }
.hb-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.hb-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.hb-photo { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.hb-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-photo-x {
    position: absolute; top: 4px; right: 4px;
    width: 26px; height: 26px; border-radius: 50%; border: 0;
    background: rgba(0,0,0,0.6); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.hb-photo-add {
    aspect-ratio: 1;
    display: grid; place-content: center; gap: 4px; justify-items: center;
    border-radius: 8px;
    border: 2px dashed color-mix(in srgb, var(--seegars-green) 55%, transparent);
    background: color-mix(in srgb, var(--seegars-green) 6%, transparent);
    color: var(--seegars-green);
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.66rem;
    cursor: pointer;
    min-height: 88px;
}
.hb-photo-add-icon { font-size: 1.6rem; line-height: 1; }

.hb-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #fdf0ef; color: #9b2c2c; font-family: var(--font-body); font-size: 0.9rem; }
.hb-send {
    display: block;
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 999px;
    background: var(--seegars-green);
    color: #fff;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.2s;
}
.hb-send:active { transform: scale(0.98); }
.hb-send:disabled { opacity: 0.6; cursor: progress; }
.hb-send:focus-visible { outline: 3px solid var(--seegars-green); outline-offset: 3px; }

@media (max-width: 860px) { .hb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
    .hb-band { padding: 28px 14px 26px; }
    .hb-ribbon { margin-left: 12px; margin-right: 12px; font-size: 0.85rem; padding: 10px 12px; }
    .hb-cards { gap: 10px; }
    .hb-card { padding: 14px; }
    .hb-form { padding: 14px 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .hb-ribbon-arrow { animation: none; } .hb-card { transition: none; } }

/* ─── Topic tiles: the compact strip under the masthead, one per section ───
   An icon and a short label each — no pictures, no headings. */
.topic-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 14px var(--gutter) 20px;
}
.topic-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 12px 8px 10px;
    border: 1px solid var(--sepia-rule);
    border-radius: 8px;
    background: var(--paper-bg);
    color: var(--ink) !important;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
}
.topic-tile:hover {
    color: var(--ink) !important;
    border-color: var(--seegars-green);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -14px color-mix(in srgb, var(--ink) 70%, transparent);
}
.topic-tile:focus-visible { outline: 3px solid var(--seegars-green); outline-offset: 2px; }
.topic-tile-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--seegars-green) 10%, transparent);
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: -0.08em;
    white-space: nowrap;
}
/* Two glyphs "clashing": drawn smaller and overlapped so the pair still sits
   inside the circle. */
.topic-tile-icon--duo { position: relative; }
.topic-tile-icon--duo span {
    position: absolute;
    font-size: 0.95rem;
    line-height: 1;
}
.topic-tile-icon--duo span:first-child { left: 5px; top: 7px; transform: rotate(-12deg); }
.topic-tile-icon--duo span:last-child  { right: 5px; bottom: 6px; transform: rotate(12deg); }
@media (max-width: 480px) {
    .topic-tile-icon--duo span { font-size: 0.8rem; }
    .topic-tile-icon--duo span:first-child { left: 4px; top: 6px; }
    .topic-tile-icon--duo span:last-child { right: 4px; bottom: 5px; }
}

.topic-tile-label {
    flex: 1;
    min-width: 0;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.topic-tile-arrow {
    flex: none;
    font-family: var(--font-label);
    color: var(--seegars-green);
    opacity: 0.75;
    transition: transform 0.2s ease;
}
.topic-tile:hover .topic-tile-arrow { transform: translateX(3px); }

@media (max-width: 860px) { .topic-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
    .topic-tiles { margin: 12px 12px 16px; gap: 6px; }
    .topic-tile { min-height: 50px; padding: 6px 10px 6px 8px; gap: 8px; }
    .topic-tile-icon { width: 32px; height: 32px; font-size: 1rem; }
    .topic-tile-label { font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) { .topic-tile, .topic-tile-arrow { transition: none; } }

/* Earlier editions use a white sign-in card in either theme, so everything inside it
   reads the LIGHT palette — otherwise dark mode put near-black input boxes
   and grey copy on a white card (found 2026-08-29). */
.newsletter-gate:not(.october-edition) .gate-card {
    --ink: #2B2418;
    --ink-light: #5A5142;
    --ink-faded: #8A8072;
    --paper-bg: #FFFFFF;
    --sepia-rule: #E4DACB;
    --seegars-green: #405227;
    --surface-warm: #F1EBDD;
}

/* Rich text saved by Newsletter Studio. Scoped to editorial content so the
   newsletter's navigation, games and milestone layout keep their own lists. */
.newsletter-rich-text { overflow-wrap: anywhere; }
.newsletter-rich-text ul { list-style: disc; padding-left: 1.5em; margin: .75em 0; }
.newsletter-rich-text ol { list-style: decimal; padding-left: 1.5em; margin: .75em 0; }
.newsletter-rich-text li { margin: .25em 0; }
.newsletter-rich-text li > p { margin: 0; text-indent: 0; }
.newsletter-rich-text > p { margin: 0 0 .8em; }
.newsletter-rich-text > :last-child { margin-bottom: 0; }
.newsletter-rich-text blockquote { border-left: 3px solid var(--seegars-green); padding-left: 1em; margin: 1em 0; }
.newsletter-rich-text h2 { font-size: 1.5em; font-weight: 700; margin: 1em 0 .5em; }
.newsletter-rich-text h3 { font-size: 1.3em; font-weight: 700; margin: 1em 0 .5em; }
.newsletter-rich-text h4 { font-size: 1.1em; font-weight: 700; margin: 1em 0 .5em; }