/* =========================================================
   Data Center Engineering — design system
   Palette: graphite #1A1F2B + signal lime #C8F26C + warm cream #F7F4ED
   Fonts:   Fraunces (display), Manrope (UI), IBM Plex Mono (technical)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    --graphite: #1A1F2B;
    --graphite-2: #0F131C;
    --graphite-3: #2A3140;
    --lime: #C8F26C;
    --lime-dim: #9FCC4A;
    --cream: #F7F4ED;
    --cream-2: #EEEAE0;
    --ink: #0B1220;
    --ink-soft: #2B3340;
    --muted: #5C6B7A;
    --hairline: rgba(11, 18, 32, 0.10);
    --hairline-strong: rgba(11, 18, 32, 0.20);
    --paper: #ffffff;
    --shadow: 0 1px 2px rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.06);
    --shadow-lg: 0 4px 12px rgba(11,18,32,.06), 0 24px 60px rgba(11,18,32,.12);
    --accent: var(--lime);
    --radius: 6px;
    --radius-lg: 12px;

    --red: #E53935;
    --amber: #FFB547;
    --green: #1A9C6E;
    --blue: #4DA3FF;
    --purple: #A855F7;
}

[data-theme="dark"] {
    --paper: #14181F;
    --cream: #0F131C;
    --cream-2: #1A1F2B;
    --ink: #ECEFF4;
    --ink-soft: #C5CCD6;
    --muted: #8A99AB;
    --hairline: rgba(255,255,255,.10);
    --hairline-strong: rgba(255,255,255,.20);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --shadow-lg: 0 4px 12px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--graphite); }
[data-theme="dark"] a:hover { color: var(--lime); }

img, svg { max-width: 100%; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--lime); color: var(--graphite); }

/* ---------- Typography ---------- */

h1, h2, h3, h4, h5 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.6em;
    color: var(--ink);
}

h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

.eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
}

.meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* ---------- Layout ---------- */

.container {
    /* Wide layouts on big screens (~80vw, capped at 1600px),
       full-width on tablets and phones with normal side padding. */
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 28px;
    box-sizing: border-box;
}

/* On big screens, target ~80% of viewport */
@media (min-width: 1400px) {
    .container {
        width: 80vw;
        max-width: 1600px;
    }
}

.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 28px; }
.container-wide {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 28px;
    box-sizing: border-box;
}
@media (min-width: 1400px) {
    .container-wide {
        width: 85vw;
        max-width: 1700px;
    }
}

.section { padding: 64px 0; }
.section-sm { padding: 36px 0; }
.divider-rule { border: 0; border-top: 1px solid var(--hairline); margin: 36px 0; }

/* ---------- Header ---------- */

.site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(8px);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
}

.header-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0; gap: 24px;
}

.header-logo {
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
}
.header-logo img { height: 40px; }

.header-search {
    flex: 1; max-width: 520px;
    display: flex; align-items: center;
    background: var(--cream-2);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 4px 4px 4px 18px;
}
.header-search input {
    flex: 1; border: 0; background: transparent;
    padding: 8px 0;
    font-size: 0.92rem;
}
.header-search input:focus { outline: none; }
.header-search button {
    background: var(--graphite); color: white;
    border: 0; padding: 8px 18px; border-radius: 999px;
    cursor: pointer; font-weight: 500; font-size: 0.88rem;
}
.header-search button:hover { background: var(--graphite-2); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}
.header-actions a, .header-actions button {
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-soft);
    white-space: nowrap;
}
.header-actions a:hover { color: var(--ink); }
.btn-pill {
    background: var(--graphite); color: white !important;
    padding: 9px 20px; border-radius: 999px;
    font-weight: 500;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
}
.btn-pill:hover { background: var(--graphite-2); color: white !important; }
.theme-toggle {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--cream-2);
    border: 1px solid var(--hairline);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
}

.header-nav {
    border-top: 1px solid var(--hairline);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.header-nav-inner {
    display: flex; gap: 4px;
    padding: 8px 0;
    white-space: nowrap;
}
.header-nav a {
    padding: 6px 14px; border-radius: 999px;
    font-size: 0.85rem; font-weight: 500;
    color: var(--ink-soft);
    transition: background .15s ease, color .15s ease;
}
.header-nav a:hover, .header-nav a.active { background: var(--graphite); color: white; }

/* Mobile nav button */
.mobile-toggle { display: none; background: transparent; border: 0; cursor: pointer; padding: 6px; }

@media (max-width: 768px) {
    .header-search { display: none; }
    .header-actions .auth-link-text { display: none; }
    .mobile-toggle { display: inline-flex; }
}

/* ---------- Breaking bar ---------- */

.breaking-bar {
    background: var(--graphite);
    color: white;
    border-bottom: 1px solid var(--graphite-3);
}
.breaking-bar-inner {
    display: flex;
    align-items: center;
    padding: 8px 0;
    position: relative;
    min-height: 36px;
}
.breaking-tag {
    background: var(--red);
    color: white;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    white-space: nowrap;
}
.breaking-track {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    margin-left: 18px;
    align-self: stretch;
    display: flex;
    align-items: center;
}
/* Solid edge guard — guarantees nothing peeks past the left boundary */
.breaking-track::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 1px;
    background: var(--graphite);
    z-index: 2;
}
.breaking-track-inner {
    display: inline-flex;
    gap: 38px;
    width: max-content;
    animation: ticker 60s linear infinite;
    white-space: nowrap;
}
.breaking-track a { color: white; font-size: 0.88rem; }
.breaking-track a:hover { color: var(--lime); }
.breaking-track .sep { color: var(--lime); opacity: 0.7; }
@keyframes ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- Hero ---------- */

.hero {
    padding: 56px 0 24px;
}
.hero-grid {
    display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px;
}
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-featured {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
    background: var(--paper); border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow);
    border: 1px solid var(--hairline);
}
@media (max-width: 600px) { .hero-featured { grid-template-columns: 1fr; } }
.hero-featured-image {
    background: var(--cream-2);
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.hero-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-featured-body { padding: 30px 32px; display: flex; flex-direction: column; }
.hero-featured-body h1 { font-size: clamp(1.7rem, 2.4vw, 2.3rem); margin-bottom: 14px; }
.hero-featured-body p { color: var(--ink-soft); font-size: 1rem; }
.hero-featured-meta { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: var(--muted); border-top: 1px solid var(--hairline); }

.hero-rail {
    display: flex; flex-direction: column; gap: 0;
    background: var(--paper);
    border-radius: var(--radius-lg);
    border: 1px solid var(--hairline);
    overflow: hidden;
}
.hero-rail-header {
    padding: 14px 22px;
    background: var(--graphite);
    color: white;
}
.hero-rail-header .eyebrow { color: var(--lime); }
.hero-rail-item {
    padding: 16px 22px; border-bottom: 1px solid var(--hairline);
}
.hero-rail-item:last-child { border-bottom: 0; }
.hero-rail-item .eyebrow { color: var(--red); font-size: 0.68rem; }
.hero-rail-item h4 {
    font-family: 'Manrope', sans-serif; font-weight: 600;
    font-size: 0.98rem; line-height: 1.35;
    letter-spacing: -0.005em;
    margin: 6px 0 6px;
}

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

.cat-tag {
    display: inline-flex; align-items: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 500;
    color: var(--graphite);
    background: var(--lime);
    padding: 4px 10px; border-radius: 4px;
}

.cat-tag-outline {
    display: inline-flex; align-items: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 500;
    color: var(--ink);
    background: transparent;
    padding: 4px 10px; border-radius: 4px;
    border: 1px solid var(--hairline-strong);
}

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

.card-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}

.article-card {
    display: flex; flex-direction: column;
    background: var(--paper);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--hairline);
    transition: transform .15s ease, box-shadow .15s ease;
}
.article-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.article-card-image {
    aspect-ratio: 16 / 10;
    background: var(--cream-2);
    overflow: hidden;
}
.article-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.article-card:hover .article-card-image img { transform: scale(1.04); }

.article-card-body { padding: 20px 22px; display: flex; flex-direction: column; flex: 1; gap: 10px; }
.article-card-body h3 {
    font-family: 'Manrope', sans-serif; font-weight: 700;
    font-size: 1.05rem; line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0;
}
.article-card-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem; color: var(--muted);
    margin-top: auto; padding-top: 8px;
    display: flex; justify-content: space-between; gap: 12px;
}

.article-card.horizontal {
    flex-direction: row;
}
.article-card.horizontal .article-card-image {
    width: 200px; flex-shrink: 0; aspect-ratio: auto;
}
@media (max-width: 540px) { .article-card.horizontal { flex-direction: column; } .article-card.horizontal .article-card-image { width: 100%; aspect-ratio: 16/10; } }

/* ---------- Section sweeps ---------- */

.section-sweep { padding: 48px 0; }
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    border-bottom: 2px solid var(--graphite);
    padding-bottom: 12px;
}
.section-head h2 {
    margin: 0;
    font-size: 1.6rem;
    min-width: 0;
    flex: 1 1 auto;
}
.section-head a {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.section-head a:hover { color: var(--ink); }

/* ---------- Newsletter CTA block ---------- */

.newsletter-cta {
    background: var(--graphite);
    color: white;
    border-radius: var(--radius-lg);
    padding: 44px 48px;
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px;
    align-items: center;
}
.newsletter-cta h2 { color: white; margin-bottom: 10px; }
.newsletter-cta p { color: rgba(255,255,255,.78); margin: 0; }
.newsletter-cta-form { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter-cta-form input {
    padding: 12px 18px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
    color: white;
    border-radius: 999px;
    flex: 1 1 200px;
    min-width: 0;
}
.newsletter-cta-form input[name="name"] { flex: 1 1 140px; max-width: 200px; }
.newsletter-cta-form input[name="email"] { flex: 2 1 220px; }
.newsletter-cta-form input::placeholder { color: rgba(255,255,255,.5); }
.newsletter-cta-form button {
    background: var(--lime); color: var(--graphite);
    border: 0; padding: 12px 26px; border-radius: 999px;
    font-weight: 600; cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
}
.newsletter-cta-form button:hover { background: #B7E150; }
@media (max-width: 768px) { .newsletter-cta { grid-template-columns: 1fr; padding: 32px 28px; } }

/* ---- Jobs page: filter bar + external listings ---- */
.jobs-filter-bar {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 12px;
    margin-bottom: 28px;
    background: var(--paper);
    padding: 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hairline);
}
.external-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: white;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.external-job-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--hairline);
    text-decoration: none;
    color: inherit;
    background: white;
    transition: background 0.12s;
}
.external-job-row:last-child { border-bottom: 0; }
.external-job-row:hover { background: var(--cream-2); }
.external-job-row .ej-main { flex: 1; min-width: 0; }
.external-job-row .ej-title {
    font-family: 'Fraunces', serif;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 4px;
    font-weight: 600;
}
.external-job-row .ej-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.external-job-row .ej-apply {
    flex-shrink: 0;
    background: var(--graphite);
    color: var(--lime);
    padding: 8px 14px;
    border-radius: 999px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .jobs-filter-bar {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px;
    }
    .external-job-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 16px;
    }
    .external-job-row .ej-apply {
        align-self: stretch;
        text-align: center;
    }
}

/* =========================================================
   HOMEPAGE MODULES (v2 newspaper-style layout)
   ========================================================= */

/* ---- Lead-sub strip (2 secondary stories under the hero) ---- */
.leadsub-strip {
    padding: 22px 0 36px;
    border-bottom: 1px solid var(--hairline);
}
.leadsub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}
.leadsub-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    text-decoration: none;
    color: inherit;
}
.leadsub-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--cream-2);
}
.leadsub-image img { width: 100%; height: 100%; object-fit: cover; }
.leadsub-body h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 8px 0 8px;
    color: var(--ink);
}
.leadsub-body p {
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin-bottom: 10px;
    line-height: 1.55;
}
.leadsub-card:hover h3 { color: var(--ink-soft); }

/* ---- Briefs strip (more headlines) ---- */
.briefs-strip {
    padding: 30px 0;
    background: var(--cream-2);
}
.briefs-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
    gap: 14px;
}
.briefs-all {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.briefs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 40px;
}
.briefs-list li {
    padding: 12px 0;
    border-top: 1px solid var(--hairline);
    break-inside: avoid;
}
.briefs-list li:first-child { border-top: 0; }
.brief-eyebrow {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}
.briefs-list a {
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
    line-height: 1.32;
    color: var(--ink);
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}
.briefs-list a:hover { color: var(--ink-soft); }
.brief-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--muted);
}

/* ---- Section feature (lead + 3 supporting) ---- */
.section-feature {
    padding: 56px 0 32px;
}
.section-feature.alt { background: var(--paper); }
.feature-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: start;
}
.feature-grid.reverse { grid-template-columns: 1fr 1.4fr; }
.feature-grid.reverse .feature-lead { order: 2; }
.feature-grid.reverse .feature-supporting { order: 1; }

.feature-lead {
    text-decoration: none;
    color: inherit;
    display: block;
}
.feature-lead-image {
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--cream-2);
    margin-bottom: 16px;
}
.feature-lead-image img { width: 100%; height: 100%; object-fit: cover; }
.feature-lead-body h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.75rem;
    line-height: 1.18;
    margin: 8px 0 10px;
    color: var(--ink);
}
.feature-lead-body p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 10px;
}
.feature-lead:hover h3 { color: var(--ink-soft); }

.feature-supporting {
    display: flex;
    flex-direction: column;
    border-top: 2px solid var(--graphite);
}
.feature-supporting-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--hairline);
    text-decoration: none;
    color: inherit;
    display: block;
}
.feature-supporting-item h4 {
    font-family: 'Fraunces', serif;
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0 0 6px;
    color: var(--ink);
}
.feature-supporting-item:hover h4 { color: var(--ink-soft); }
.feature-supporting-item:last-child { border-bottom: 0; }

/* ---- Mixed module (jobs / companies / market reports) ---- */
.section-mixed {
    padding: 48px 0;
    background: var(--graphite);
    color: rgba(255,255,255,.92);
}
.section-mixed .mixed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 36px;
}
.mixed-block {
    min-width: 0;
}
.mixed-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.15);
    gap: 10px;
}
.mixed-head h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.25rem;
    color: white;
    margin: 0;
}
.mixed-head a {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lime);
    text-decoration: none;
    white-space: nowrap;
}
.mixed-row {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-decoration: none;
    color: inherit;
}
.mixed-row:last-child { border-bottom: 0; }
.mixed-row-title {
    font-weight: 600;
    color: white;
    line-height: 1.35;
    margin-bottom: 4px;
}
.mixed-row:hover .mixed-row-title { color: var(--lime); }
.mixed-row-sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    color: rgba(255,255,255,.55);
    letter-spacing: 0.03em;
}
.mixed-empty {
    color: rgba(255,255,255,.55);
    font-size: 0.9rem;
    font-style: italic;
}
.company-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.company-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    padding: 14px 8px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    aspect-ratio: 1/1;
    transition: background 0.15s;
}
.company-tile:hover { background: rgba(200,242,108,.08); border-color: var(--lime); }
.company-tile img { max-width: 80%; max-height: 40px; margin-bottom: 8px; filter: brightness(1.3); }
.company-tile-mono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--lime);
    color: var(--graphite);
    border-radius: 50%;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 8px;
}
.company-tile-name {
    font-size: 0.78rem;
    color: rgba(255,255,255,.85);
    line-height: 1.3;
}

/* ---- Section digest (three-column section fronts) ---- */
.section-digest {
    padding: 56px 0;
    border-top: 1px solid var(--hairline);
}
.digest-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}
.digest-col {
    min-width: 0;
}
.digest-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid var(--graphite);
    padding-bottom: 8px;
    margin-bottom: 12px;
    gap: 10px;
}
.digest-head h4 {
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
    margin: 0;
    color: var(--ink);
}
.digest-head a {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}
.digest-item {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
    text-decoration: none;
    color: inherit;
}
.digest-item:last-child { border-bottom: 0; }
.digest-item h5 {
    font-family: 'Fraunces', serif;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0 0 4px;
    color: var(--ink);
    font-weight: 500;
}
.digest-item:hover h5 { color: var(--ink-soft); }

/* ---- Most read (numbered newspaper list) ---- */
.section-popular {
    padding: 48px 0 56px;
}
.popular-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 4px;
}
.popular-list li {
    display: flex;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
    align-items: baseline;
}
.popular-num {
    font-family: 'Fraunces', serif;
    font-size: 2rem;
    line-height: 1;
    color: var(--lime-dark, #8FB539);
    font-weight: 600;
    flex-shrink: 0;
    min-width: 36px;
}
.popular-body { flex: 1; min-width: 0; }
.popular-body a {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--ink);
    text-decoration: none;
    margin: 4px 0;
}
.popular-body a:hover { color: var(--ink-soft); }

/* ---- Quick stats row (bottom of homepage) ---- */
.home-stats {
    padding: 36px 0;
    background: var(--graphite);
    color: white;
}
.home-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    text-align: center;
}
.home-stat-num {
    font-family: 'Fraunces', serif;
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--lime);
    line-height: 1;
    margin-bottom: 6px;
}
.home-stat-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
}

/* ---- Homepage modules: tablet responsiveness ---- */
@media (max-width: 980px) {
    .leadsub-grid { grid-template-columns: 1fr; gap: 22px; }
    .feature-grid,
    .feature-grid.reverse { grid-template-columns: 1fr; gap: 26px; }
    .feature-grid.reverse .feature-lead { order: 1; }
    .feature-grid.reverse .feature-supporting { order: 2; }
    .section-mixed .mixed-grid { grid-template-columns: 1fr; gap: 30px; }
    .digest-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .home-stats-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .popular-list { grid-template-columns: 1fr; column-gap: 0; }
}

/* ---- Homepage modules: mobile ---- */
@media (max-width: 768px) {
    .leadsub-strip { padding: 18px 0 26px; }
    .leadsub-card { grid-template-columns: 1fr; gap: 12px; }
    .leadsub-image { aspect-ratio: 16/9; }

    .briefs-strip { padding: 22px 0; }
    .briefs-list { columns: 1; column-gap: 0; }

    .section-feature { padding: 34px 0 18px; }
    .feature-lead-body h3 { font-size: 1.4rem; }
    .feature-lead-image { aspect-ratio: 16/10; }

    .section-mixed { padding: 32px 0; }
    .mixed-head h3 { font-size: 1.1rem; }
    .company-grid { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .company-tile { padding: 10px 6px; }
    .company-tile-name { font-size: 0.72rem; }

    .section-digest { padding: 32px 0; }
    .digest-grid { grid-template-columns: 1fr; gap: 22px; }

    .section-popular { padding: 28px 0 36px; }
    .popular-list { grid-template-columns: 1fr; column-gap: 0; }
    .popular-num { font-size: 1.6rem; min-width: 28px; }
    .popular-body a { font-size: 1rem; }

    .home-stats { padding: 26px 0; }
    .home-stats-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
    .home-stat-num { font-size: 1.9rem; }
}

/* Extra-tight phones (most common screens are 360–414px wide) */
@media (max-width: 480px) {
    .company-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
    .company-grid { grid-template-columns: 1fr 1fr; }
    .home-stats-grid { grid-template-columns: 1fr; gap: 18px; }
    .home-stat-num { font-size: 1.7rem; }
}

/* =========================================================
   HERO — NYT-style homepage (matches nytimes.com)
   ========================================================= */

.hero-nyt {
    padding: 20px 0 36px;
    background: white;
}

.nyt-top-rule {
    border-top: 1px solid rgba(0,0,0,.4);
    margin-bottom: 24px;
}

.nyt-grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr 1fr;
    gap: 30px;
    align-items: start;
}

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

/* All headlines share this base — Fraunces serif, tight */
.nyt-stack-headline,
.nyt-center-headline,
.nyt-right-headline,
.nyt-bottom-headline {
    font-family: 'Fraunces', 'Cheltenham', Georgia, serif;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.005em;
    margin: 0 0 10px;
}
.nyt-link-block:hover .nyt-stack-headline,
.nyt-link-block:hover .nyt-center-headline,
.nyt-link-block:hover .nyt-right-headline,
.nyt-link-block:hover .nyt-bottom-headline {
    color: #5c6b7a;
}

/* Deks — Fraunces, lighter, gray */
.nyt-stack-dek,
.nyt-center-dek,
.nyt-right-dek {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1rem;
    line-height: 1.45;
    color: #444;
    margin: 0 0 14px;
    font-weight: 400;
}

/* MIN READ meta — small tracked sans-serif uppercase */
.nyt-min-read {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    font-weight: 500;
    margin-top: 8px;
}

/* ===== LEFT COLUMN ===== */
.nyt-stack-item {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(0,0,0,.15);
}
.nyt-stack-item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

.nyt-stack-headline {
    font-size: 1.5rem;
}
.nyt-stack-headline.is-lead-stack {
    font-size: 1.7rem;
}

/* LIVE row — red small caps + time */
.nyt-live-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}
.nyt-live-tag {
    color: #d72b2b;
    letter-spacing: 0.1em;
}
.nyt-live-time {
    color: #d72b2b;
}
.nyt-more-updates {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 0.95rem;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: 6px;
    font-style: normal;
}

/* ===== CENTER COLUMN — big image with headline BELOW ===== */
.nyt-center-lead { min-width: 0; }
.nyt-big-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #ECE9DF;
    margin-bottom: 14px;
}
.nyt-big-image img {
    width: 100%; height: 100%; object-fit: cover;
}
.nyt-img-credit {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: #888;
    margin: -10px 0 12px;
    font-style: italic;
    text-align: right;
}
.nyt-center-headline {
    font-size: 1.85rem;
}
.nyt-center-dek {
    font-size: 1rem;
}

/* ===== RIGHT COLUMN — photo on top ===== */
.nyt-right-lead { min-width: 0; }
.nyt-right-image {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #ECE9DF;
    margin-bottom: 4px;
}
.nyt-right-image img {
    width: 100%; height: 100%; object-fit: cover;
}
.nyt-img-credit-right {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: #888;
    margin: 0 0 14px;
    font-style: italic;
    text-align: right;
}
.nyt-right-headline {
    font-size: 1.55rem;
    font-weight: 600;
}
.nyt-right-dek {
    font-size: 0.98rem;
}

/* ===== BOTTOM STRIP: 4 thumbnail cards ===== */
.nyt-bottom-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 24px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(0,0,0,.15);
}
.nyt-bottom-card { min-width: 0; }
.nyt-bottom-card .nyt-link-block {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.nyt-bottom-thumb {
    flex-shrink: 0;
    width: 90px;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #ECE9DF;
}
.nyt-bottom-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nyt-bottom-body { flex: 1; min-width: 0; }
.nyt-bottom-headline {
    font-size: 1.05rem;
    line-height: 1.2;
    margin-bottom: 6px;
}
.nyt-bottom-card .nyt-min-read {
    margin-top: 4px;
}

/* =========================================================
   BREAKING SUB-HERO STRIP
   ========================================================= */
.hero-breaking-strip {
    margin-top: 0;
    background: var(--graphite);
    color: white;
    padding: 14px 0;
}
.hbs-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
}
.hbs-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.hbs-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #d72b2b;
    box-shadow: 0 0 0 0 rgba(215,43,43,.7);
    animation: hbs-pulse 1.8s infinite;
}
@keyframes hbs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(215,43,43,.7); }
    70%  { box-shadow: 0 0 0 10px rgba(215,43,43,0); }
    100% { box-shadow: 0 0 0 0 rgba(215,43,43,0); }
}
.hbs-label-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lime);
    font-weight: 600;
}
.hbs-items {
    display: flex;
    gap: 28px;
    overflow: hidden;
    min-width: 0;
}
.hbs-item {
    display: flex;
    gap: 10px;
    align-items: baseline;
    text-decoration: none;
    color: rgba(255,255,255,.92);
    white-space: nowrap;
    min-width: 0;
}
.hbs-item:hover { color: var(--lime); }
.hbs-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: rgba(255,255,255,.5);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.hbs-title {
    font-size: 0.92rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hbs-all {
    flex-shrink: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lime);
    text-decoration: none;
}

/* =========================================================
   NYT HERO — responsive
   ========================================================= */

@media (max-width: 1100px) {
    .nyt-grid {
        grid-template-columns: 1fr 1.5fr;
        gap: 26px;
    }
    .nyt-right-lead {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 20px;
        align-items: start;
        padding-top: 24px;
        border-top: 1px solid rgba(0,0,0,.15);
    }
    .nyt-right-lead .nyt-link-block {
        display: contents;
    }
    .nyt-right-image { margin-bottom: 0; }
    .nyt-center-headline { font-size: 1.7rem; }
    .nyt-stack-headline { font-size: 1.4rem; }
    .nyt-stack-headline.is-lead-stack { font-size: 1.55rem; }
    .nyt-bottom-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .hero-nyt { padding: 14px 0 24px; }
    .nyt-top-rule { margin-bottom: 18px; }
    .nyt-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    /* On mobile the center lead comes first */
    .nyt-center-lead { order: 1; }
    .nyt-col-left    { order: 2; }
    .nyt-right-lead  { order: 3; grid-template-columns: 1fr; }
    .nyt-right-lead .nyt-link-block { display: block; }

    .nyt-center-headline { font-size: 1.55rem; }
    .nyt-center-dek { font-size: 0.95rem; }
    .nyt-stack-headline { font-size: 1.25rem; }
    .nyt-stack-headline.is-lead-stack { font-size: 1.4rem; }
    .nyt-right-headline { font-size: 1.35rem; }

    .nyt-big-image,
    .nyt-right-image { aspect-ratio: 16/10; }

    .nyt-bottom-strip {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 24px;
        padding-top: 18px;
    }
    .nyt-bottom-thumb { width: 80px; }
    .nyt-bottom-headline { font-size: 1rem; }

    /* Breaking strip stacks on mobile */
    .hbs-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .hbs-items {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .hbs-item { white-space: normal; align-items: flex-start; }
    .hbs-all { align-self: flex-end; }
}

@media (max-width: 380px) {
    .nyt-center-headline { font-size: 1.35rem; }
    .nyt-stack-headline.is-lead-stack { font-size: 1.25rem; }
}

/* =========================================================
   v2.2 HOMEPAGE MODULES
   ========================================================= */

/* ---- Sector pulse: 3 dense columns ---- */
.section-pulse {
    padding: 40px 0;
    background: var(--cream-2);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.pulse-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
}
.pulse-col { min-width: 0; }
.pulse-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--graphite);
    margin-bottom: 10px;
    text-decoration: none;
    color: inherit;
}
.pulse-head h4 {
    font-family: 'Fraunces', serif;
    font-size: 1.1rem;
    margin: 0;
    font-weight: 600;
}
.pulse-head span {
    font-family: 'IBM Plex Mono', monospace;
    color: var(--muted);
    font-size: 0.85rem;
}
.pulse-head:hover h4 { color: var(--ink-soft); }
.pulse-item {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--hairline);
    text-decoration: none;
    color: inherit;
}
.pulse-item:last-child { border-bottom: 0; }
.pulse-title {
    font-family: 'Fraunces', serif;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 4px;
    font-weight: 500;
}
.pulse-item:hover .pulse-title { color: var(--ink-soft); }
.pulse-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--muted);
    letter-spacing: 0.04em;
}

/* ---- Careers & certifications strip ---- */
.section-careers-strip {
    padding: 36px 0;
}
.careers-strip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}
.careers-strip-card {
    display: block;
    background: white;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    padding: 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s, transform 0.12s;
}
.careers-strip-card:hover {
    border-color: var(--lime);
    transform: translateY(-1px);
}
.careers-strip-card .eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 8px;
}
.careers-strip-card h4 {
    font-family: 'Fraunces', serif;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--ink);
    font-weight: 600;
}
.careers-strip-card .meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--muted);
}

/* ---- Glossary + Events two-up ---- */
.section-glossary-events {
    padding: 40px 0;
    background: var(--graphite);
    color: rgba(255,255,255,.92);
}
.ge-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 30px;
    align-items: start;
}
.ge-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lime);
    margin-bottom: 12px;
}
.glossary-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    padding: 24px;
}
.glossary-card h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.6rem;
    color: white;
    margin: 0 0 10px;
    font-weight: 600;
}
.glossary-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255,255,255,.85);
    margin: 0 0 14px;
}
.ge-link {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lime);
    text-decoration: none;
}
.events-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    padding: 12px 24px;
}
.event-row {
    display: flex;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    text-decoration: none;
    color: inherit;
    align-items: center;
}
.event-row:last-child { border-bottom: 0; }
.event-date {
    flex-shrink: 0;
    background: rgba(200,242,108,.12);
    border: 1px solid rgba(200,242,108,.3);
    border-radius: var(--radius);
    width: 56px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--lime);
}
.event-day {
    font-family: 'Fraunces', serif;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 600;
}
.event-month {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    margin-top: 2px;
}
.event-body { flex: 1; min-width: 0; }
.event-title {
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
    color: white;
    line-height: 1.3;
    margin-bottom: 4px;
    font-weight: 600;
}
.event-row:hover .event-title { color: var(--lime); }
.event-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    color: rgba(255,255,255,.6);
}

/* ---- Responsive: tablet ---- */
@media (max-width: 980px) {
    .pulse-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
    .pulse-col:nth-child(3) { grid-column: 1 / -1; }
    .careers-strip-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ge-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- Responsive: mobile ---- */
@media (max-width: 768px) {
    .section-pulse { padding: 28px 0; }
    .pulse-grid { grid-template-columns: 1fr; gap: 20px; }
    .pulse-col:nth-child(3) { grid-column: auto; }

    .section-careers-strip { padding: 24px 0; }
    .careers-strip-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .careers-strip-card { padding: 12px; }

    .section-glossary-events { padding: 28px 0; }
    .glossary-card { padding: 18px; }
    .glossary-card h3 { font-size: 1.3rem; }
    .events-card { padding: 8px 16px; }
    .event-row { gap: 12px; padding: 12px 0; }
    .event-date { width: 48px; height: 48px; }
    .event-day { font-size: 1.2rem; }
}

@media (max-width: 480px) {
    .careers-strip-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--graphite);
    color: rgba(255,255,255,.7);
    padding: 56px 0 28px;
    margin-top: 64px;
}
.footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.footer-grid h5 {
    color: var(--lime); font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
    margin: 0 0 14px; font-weight: 500;
}
.footer-grid a { display: block; color: rgba(255,255,255,.7); padding: 5px 0; font-size: 0.9rem; }
.footer-grid a:hover { color: var(--lime); }
.footer-grid p { color: rgba(255,255,255,.55); font-size: 0.9rem; line-height: 1.6; }
.footer-bottom {
    padding-top: 24px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem; letter-spacing: 0.08em;
    color: rgba(255,255,255,.45);
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Article page ---------- */

.article-hero {
    padding: 36px 0 0;
}
.article-hero .meta-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.article-hero h1 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); max-width: 880px; }
.article-hero .lead { font-size: 1.18rem; color: var(--ink-soft); max-width: 760px; margin-bottom: 24px; line-height: 1.55; }
.article-hero .author-row {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.article-hero .author-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--cream-2); flex-shrink: 0; display:flex; align-items: center; justify-content: center; color: var(--ink); font-weight: 700; }

.article-body {
    display: grid; grid-template-columns: 1fr 280px;
    gap: 56px; padding: 40px 0 80px;
    max-width: 1180px; margin: 0 auto;
}
@media (max-width: 940px) { .article-body { grid-template-columns: 1fr; max-width: 760px; padding-left: 28px; padding-right: 28px; } }

.article-content {
    font-size: 1.07rem;
    line-height: 1.75;
    color: var(--ink);
}
.article-content p, .article-content ul, .article-content ol { margin-bottom: 1.3em; }
.article-content h2, .article-content h3 { margin: 1.7em 0 0.6em; }
.article-content h2 { font-size: 1.55rem; }
.article-content h3 { font-size: 1.25rem; }
.article-content img { border-radius: var(--radius); margin: 1.5em 0; }
.article-content blockquote {
    border-left: 3px solid var(--lime);
    padding-left: 22px; margin: 1.5em 0;
    font-style: italic; color: var(--ink-soft);
}
.article-content figure { margin: 1.6em 0; }
.article-content figcaption { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: var(--muted); margin-top: 6px; text-align: center; }
.article-content a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.article-sidebar { display: flex; flex-direction: column; gap: 24px; }
.sidebar-block {
    background: var(--paper); border: 1px solid var(--hairline);
    border-radius: var(--radius-lg); padding: 20px 22px;
}
.sidebar-block h4 {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 14px;
}

.share-rail { display: flex; flex-wrap: wrap; gap: 8px; }
.share-rail a {
    width: 38px; height: 38px;
    background: var(--cream-2); border: 1px solid var(--hairline);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-soft);
}
.share-rail a:hover { background: var(--graphite); color: var(--lime); border-color: var(--graphite); }

/* ---------- Comments ---------- */

.comments-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--hairline); }
.comment { padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.comment-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.comment-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--cream-2); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink); }
.comment-name { font-weight: 600; }
.comment-time { font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem; color: var(--muted); }
.comment-body { margin-left: 50px; color: var(--ink-soft); }
.comment-replies { margin-left: 50px; margin-top: 14px; border-left: 2px solid var(--hairline); padding-left: 20px; }

.comment-form { background: var(--cream-2); border-radius: var(--radius-lg); padding: 22px; margin-top: 28px; }
.comment-form textarea { width: 100%; min-height: 100px; padding: 12px 14px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--paper); }

/* ---------- Forms ---------- */

.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 6px;
}
.form-control {
    width: 100%; padding: 11px 14px;
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font-size: 0.95rem;
}
.form-control:focus { outline: 2px solid var(--lime); border-color: var(--graphite); }
textarea.form-control { min-height: 140px; line-height: 1.5; resize: vertical; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235C6B7A' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

.form-help { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }

.btn {
    display: inline-block;
    padding: 11px 22px;
    background: var(--graphite); color: white;
    border: 0; border-radius: 999px;
    font-weight: 500; font-size: 0.92rem;
    cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--graphite-2); color: white; }
.btn-lime { background: var(--lime); color: var(--graphite); }
.btn-lime:hover { background: #B7E150; color: var(--graphite); }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--hairline-strong); }
.btn-outline:hover { background: var(--graphite); color: white; border-color: var(--graphite); }
.btn-danger { background: var(--red); color: white; }
.btn-sm { padding: 7px 14px; font-size: 0.82rem; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------- Alerts ---------- */

.alert {
    padding: 12px 18px;
    border-radius: var(--radius);
    margin-bottom: 18px;
    font-size: 0.92rem;
}
.alert-success { background: rgba(26,156,110,0.08); border: 1px solid rgba(26,156,110,0.3); color: #0F6E4F; }
.alert-error   { background: rgba(229,57,53,0.08);  border: 1px solid rgba(229,57,53,0.3);   color: #B71C1C; }
.alert-info    { background: rgba(77,163,255,0.08); border: 1px solid rgba(77,163,255,0.3); color: #1E5BA8; }

/* ---------- Pagination ---------- */

.pagination { display: flex; gap: 6px; justify-content: center; margin: 36px 0; }
.pagination a, .pagination span {
    padding: 8px 14px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--ink-soft); font-size: 0.88rem;
    font-family: 'IBM Plex Mono', monospace;
}
.pagination a:hover { background: var(--graphite); color: white; border-color: var(--graphite); }
.pagination .active { background: var(--graphite); color: white; border-color: var(--graphite); }
.pagination .disabled { opacity: 0.4; }

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

.auth-page {
    max-width: 440px; margin: 64px auto;
    padding: 0 28px;
}
.auth-card {
    background: var(--paper); border: 1px solid var(--hairline);
    border-radius: var(--radius-lg); padding: 38px 36px;
    box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 1.6rem; margin-bottom: 6px; }
.auth-card .sub { color: var(--muted); margin-bottom: 24px; }
.auth-card .form-actions { margin-top: 22px; display: flex; justify-content: space-between; align-items: center; }

/* ---------- Admin layout ---------- */

.admin-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; background: var(--cream); }
@media (max-width: 880px) { .admin-shell { grid-template-columns: 1fr; } }

.admin-sidebar {
    background: var(--graphite); color: rgba(255,255,255,.8);
    padding: 28px 22px;
    position: sticky; top: 0; height: 100vh;
    overflow-y: auto;
}
@media (max-width: 880px) { .admin-sidebar { position: static; height: auto; } }
.admin-sidebar-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.admin-sidebar-logo img { height: 32px; }
.admin-sidebar-logo span { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: white; }

.admin-nav-group { margin-bottom: 22px; }
.admin-nav-group h6 {
    font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,.45); margin: 0 0 8px; padding: 0 12px;
}
.admin-nav-group a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius);
    color: rgba(255,255,255,.75); font-size: 0.9rem;
}
.admin-nav-group a:hover { background: rgba(255,255,255,.08); color: white; }
.admin-nav-group a.active { background: var(--lime); color: var(--graphite); font-weight: 600; }
.admin-nav-group a .badge {
    margin-left: auto;
    background: var(--red); color: white;
    font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; font-weight: 600;
}

.admin-main { padding: 36px 40px; }
@media (max-width: 880px) { .admin-main { padding: 20px; } }

.admin-page-head {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
}
.admin-page-head h1 { font-size: 1.7rem; margin: 0; }

.admin-card {
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    margin-bottom: 22px;
}
.admin-card h2 { font-size: 1.15rem; margin-bottom: 16px; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 28px; }
.stat-card {
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
}
.stat-card .label { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.stat-card .value { font-family: 'Fraunces', Georgia, serif; font-size: 2.1rem; font-weight: 600; line-height: 1.05; margin-top: 6px; color: var(--ink); }
.stat-card .delta { font-size: 0.82rem; color: var(--green); margin-top: 4px; }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
    text-align: left; padding: 12px 14px;
    font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--hairline);
}
.admin-table td {
    padding: 14px; vertical-align: middle;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.92rem;
}
.admin-table tr:hover td { background: var(--cream-2); }
.admin-table .actions { display: flex; gap: 6px; justify-content: flex-end; }

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.status-published { background: rgba(26,156,110,0.15); color: #0F6E4F; }
.status-pending   { background: rgba(255,181,71,0.18); color: #B86A00; }
.status-draft     { background: rgba(11,18,32,0.08); color: var(--muted); }
.status-rejected  { background: rgba(229,57,53,0.12); color: #B71C1C; }
.status-approved  { background: rgba(26,156,110,0.15); color: #0F6E4F; }
.status-active    { background: rgba(26,156,110,0.15); color: #0F6E4F; }
.status-inactive  { background: rgba(11,18,32,0.08); color: var(--muted); }

.filter-bar {
    display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap;
    align-items: center;
}
.filter-bar .form-control { padding: 8px 12px; font-size: 0.9rem; width: auto; }
.filter-bar input.form-control { min-width: 200px; }

/* ---------- Bar chart (simple CSS) ---------- */

.bar-chart {
    display: flex; align-items: flex-end; gap: 4px;
    height: 140px;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 0;
}
.bar-chart .bar {
    flex: 1; background: var(--lime); border-radius: 4px 4px 0 0;
    min-height: 4px;
    position: relative;
}
.bar-chart .bar:hover { background: var(--graphite); }
.bar-chart .bar .tooltip {
    position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
    background: var(--graphite); color: white;
    font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem;
    padding: 3px 8px; border-radius: 4px;
    opacity: 0; pointer-events: none; transition: opacity .15s;
    white-space: nowrap;
}
.bar-chart .bar:hover .tooltip { opacity: 1; }
.bar-chart-labels { display: flex; gap: 4px; margin-top: 6px; }
.bar-chart-labels span { flex: 1; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: var(--muted); }

/* ---------- Misc ---------- */

.empty {
    text-align: center; padding: 56px 20px;
    color: var(--muted);
}
.empty h3 { color: var(--ink); margin-bottom: 6px; }

.tag-pill {
    display: inline-block;
    padding: 3px 10px;
    background: var(--cream-2);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 0.78rem;
    margin: 2px;
}

.ad-block {
    background: var(--paper); border: 1px solid var(--hairline);
    border-radius: var(--radius-lg); padding: 22px;
    text-align: center;
    margin: 28px 0;
}
.ad-block .ad-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ad-block img { margin: 0 auto; border-radius: 6px; }

.kicker {
    display: inline-block; background: var(--graphite); color: var(--lime);
    font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem;
    letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
    padding: 6px 14px; border-radius: 999px; margin-bottom: 12px;
}

/* Page hero (category, search, etc.) */
.page-hero {
    background: var(--graphite); color: white;
    padding: 60px 0 50px;
    margin-bottom: 36px;
}
.page-hero .eyebrow { color: var(--lime); }
.page-hero h1 { color: white; margin: 8px 0 10px; }
.page-hero p { color: rgba(255,255,255,.7); max-width: 640px; }

/* Two-col layouts */
.split-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
@media (max-width: 880px) { .split-2 { grid-template-columns: 1fr; } }

/* Job cards */
.job-card {
    background: var(--paper); border: 1px solid var(--hairline);
    border-radius: var(--radius-lg); padding: 22px 24px;
    margin-bottom: 14px;
}
.job-card h3 { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.08rem; margin-bottom: 6px; }
.job-card .job-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.86rem; color: var(--muted); margin-bottom: 10px; }

/* =========================================================
   RESPONSIVE — comprehensive breakpoints for all devices
   ========================================================= */

/* Default desktop visibility */
.cta-desktop-only { display: inline-flex; }
.cta-mobile-only { display: none; }

/* ---------- TABLET (≤880px) ---------- */
@media (max-width: 880px) {
    .container, .container-narrow, .container-wide { padding: 0 20px; }
    .section { padding: 48px 0; }
    .section-sweep { padding: 36px 0; }

    /* Collapse 3-col and split inline grids to 2-col or single on tablet */
    [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
    [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
    [style*="grid-template-columns: 2fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }

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

    /* Article editor split */
    [style*="grid-template-columns: 2fr 1fr; gap: 24px"] { grid-template-columns: 1fr !important; }

    /* Breaking bar — tablet */
    .breaking-track { margin-left: 14px; }
    .breaking-track-inner { gap: 30px; }
}

/* ---------- MOBILE (≤768px) ---------- */
@media (max-width: 768px) {
    .container, .container-narrow, .container-wide { padding: 0 16px; }
    .section, .section-sweep { padding: 32px 0; }
    .section-sm { padding: 22px 0; }

    /* HEADER */
    .header-top { padding: 12px 0; gap: 10px; }
    .header-logo img { height: 32px; }
    .header-actions { gap: 8px; flex-wrap: nowrap; }
    .btn-pill { padding: 8px 14px; font-size: 0.82rem; }
    .theme-toggle { width: 32px; height: 32px; font-size: 1rem; }
    .auth-link-text { font-size: 0.85rem; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Header CTAs: Submit Article stays as primary on mobile; Subscribe hides */
    .cta-desktop-only { display: none; }
    .cta-mobile-only { display: inline-flex; }
    /* Sign in stays visible but trimmed; .auth-link-text truncates */

    /* Nav: scroll horizontally */
    .header-nav-inner { padding: 6px 0; gap: 2px; }
    .header-nav a { padding: 6px 12px; font-size: 0.82rem; }

    /* Breaking bar — mobile */
    .breaking-bar-inner { padding: 6px 0; min-height: 32px; }
    .breaking-tag { font-size: 0.62rem; padding: 4px 9px; letter-spacing: 0.1em; }
    .breaking-track { margin-left: 12px; }
    .breaking-track a { font-size: 0.8rem; }
    .breaking-track-inner { gap: 26px; }

    /* PAGE HEROES */
    .page-hero { padding: 36px 0 26px; margin-bottom: 22px; }
    .page-hero h1 { font-size: 1.7rem; }
    .page-hero p { font-size: 0.95rem; }

    /* HERO */
    .hero { padding: 28px 0 12px; }
    .hero-featured-body { padding: 22px 22px; }
    .hero-featured-body h1 { font-size: 1.5rem; }

    /* SECTION HEAD */
    .section-head { margin-bottom: 20px; padding-bottom: 10px; gap: 10px; }
    .section-head h2 { font-size: 1.15rem; }
    .section-head a { font-size: 0.68rem; letter-spacing: 0.08em; }

    /* ARTICLE */
    .article-hero { padding: 18px 0 0; }
    .article-hero h1 { font-size: 1.7rem; }
    .article-hero .lead { font-size: 1.02rem; }
    .article-hero .author-row { flex-wrap: wrap; gap: 10px; padding: 12px 0; }
    .article-body { padding: 28px 18px 48px; gap: 28px; }
    .article-content { font-size: 1rem; line-height: 1.7; }
    .article-content h2 { font-size: 1.3rem; }
    .article-content h3 { font-size: 1.13rem; }
    .comment-body { margin-left: 0; }
    .comment-replies { margin-left: 0; border-left: 2px solid var(--hairline); padding-left: 14px; }

    /* NEWSLETTER CTA */
    .newsletter-cta { padding: 26px 22px; gap: 22px; }
    .newsletter-cta h2 { font-size: 1.45rem; }

    /* FOOTER */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .site-footer { padding: 40px 0 24px; }

    /* GENERIC: collapse all inline grids to single column on mobile */
    [style*="grid-template-columns:"] { grid-template-columns: 1fr !important; }
    /* …but keep stat tiles 2-up for at-a-glance scanning */
    [style*="grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* CARD GRIDS — slightly smaller min */
    .card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }

    /* FILTER BAR */
    .filter-bar { gap: 8px; }
    .filter-bar input.form-control, .filter-bar select.form-control { min-width: 0; flex: 1; }

    /* ADMIN */
    .admin-main { padding: 18px 16px; }
    .admin-sidebar { padding: 18px 16px; }
    .admin-sidebar-logo { margin-bottom: 16px; }
    .admin-nav-group { margin-bottom: 12px; }
    .admin-nav-group h6 { font-size: 0.64rem; }
    .admin-nav-group a { padding: 7px 10px; font-size: 0.86rem; }
    .admin-page-head { margin-bottom: 20px; gap: 10px; }
    .admin-page-head h1 { font-size: 1.4rem; }
    .admin-card { padding: 18px 16px; margin-bottom: 16px; }
    .admin-card h2 { font-size: 1.05rem; }

    /* Make wide admin tables horizontally scrollable */
    .admin-card[style*="padding: 0"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-card[style*="padding: 0"] .admin-table {
        min-width: 560px;
    }
    .admin-table th, .admin-table td { padding: 10px 12px; font-size: 0.85rem; }

    /* STATS */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
    .stat-card { padding: 16px 18px; }
    .stat-card .value { font-size: 1.65rem; }

    /* FORMS */
    .form-control { padding: 10px 12px; font-size: 16px; /* 16px prevents iOS auto-zoom */ }
    textarea.form-control { font-size: 0.95rem; }

    /* JOB CARDS */
    .job-card { padding: 18px 18px; }
    .job-card .job-meta { gap: 10px; font-size: 0.82rem; }

    /* AUTH */
    .auth-card { padding: 28px 22px; }

    /* PAGINATION */
    .pagination a, .pagination span { padding: 7px 11px; font-size: 0.82rem; }

    /* BAR CHARTS */
    .bar-chart { height: 120px; }
    .bar-chart-labels span { font-size: 0.62rem; }
}

/* ---------- VERY SMALL (≤380px) ---------- */
@media (max-width: 380px) {
    .header-logo img { height: 28px; }
    .auth-link-text { display: none; }
    .btn-pill { padding: 7px 11px; font-size: 0.78rem; }
    .theme-toggle { width: 30px; height: 30px; }
    .stats-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .page-hero h1 { font-size: 1.45rem; }
    .article-hero h1 { font-size: 1.5rem; }
    .card-grid { grid-template-columns: 1fr; }
    /* Tighter section heads so title + "more in X →" fit on one line */
    .section-head h2 { font-size: 1rem; }
    .section-head a { font-size: 0.62rem; letter-spacing: 0.06em; }
}

/* ---------- LANDSCAPE PHONE / SHORT VIEWPORT ---------- */
@media (max-height: 480px) and (orientation: landscape) {
    .page-hero { padding: 24px 0 20px; }
    .article-hero { padding: 14px 0 0; }
}

/* =========================================================
   MOBILE POLISH — additional fixes for layouts/buttons/links
   These run on top of the base responsive breakpoints to
   make sure every interactive element is touch-friendly and
   no row can blow out the viewport.
   ========================================================= */

/* Universal: prevent any overflow at the document level */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Long URLs, code samples, and table cells must break, not overflow */
.article-content a,
.article-content code,
.admin-table td,
.admin-table th,
.comment-body {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Meta lines wrap by word, never by character */
.meta {
    overflow-wrap: break-word;
    word-break: normal;
}

/* Pre blocks: scroll horizontally rather than blow out the layout */
pre {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Images and embedded media always bounded */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Tables in v2 admin pages: always horizontally scrollable on narrow */
.admin-card[style*="padding: 0"],
.admin-card:has(> .admin-table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-table { min-width: 100%; }

/* All buttons get a touch-friendly minimum hit area */
.btn, .btn-pill, .btn-outline, .btn-sm, .btn-lime, .btn-danger,
button[type="submit"], input[type="submit"], input[type="button"] {
    min-height: 36px;
    line-height: 1.2;
}

/* Action button rows in tables wrap rather than overflow */
.admin-table .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}
.admin-table .actions .btn,
.admin-table .actions .btn-sm,
.admin-table .actions .btn-outline,
.admin-table .actions .btn-danger {
    flex-shrink: 0;
}

/* ===== Tablet polish (≤880px) ===== */
@media (max-width: 880px) {
    /* Admin page heads: title + action wrap to two rows cleanly */
    .admin-page-head {
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }
    .admin-page-head h1 { flex: 1 1 100%; }

    /* Split-2 layouts already collapse, but make sticky elements release */
    .split-2 > aside,
    .article-sidebar { position: static !important; top: auto !important; }
}

/* ===== Mobile polish (≤768px) ===== */
@media (max-width: 768px) {

    /* HEADER ─────────────────── */
    .header-top {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .header-actions {
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 100%;
    }
    .header-actions > * { white-space: nowrap; }

    /* NAV ─────────────────── */
    .header-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .header-nav::-webkit-scrollbar { display: none; }
    .header-nav-inner {
        flex-wrap: nowrap;
        white-space: nowrap;
        padding-right: 16px;
    }
    .header-nav a { flex-shrink: 0; }

    /* BUTTONS — larger touch targets on mobile ─────────────────── */
    .btn {
        padding: 11px 18px;
        min-height: 42px;
        font-size: 0.92rem;
    }
    .btn-sm {
        padding: 7px 12px;
        min-height: 32px;
        font-size: 0.8rem;
    }
    .btn-pill {
        min-height: 36px;
    }

    /* FORMS ─────────────────── */
    /* All form inputs and textareas full-width by default */
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="search"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="file"],
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        font-size: 16px; /* prevents iOS zoom */
    }

    /* Filter / search bars stack */
    .filter-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .filter-bar > * { flex: 1 1 100%; min-width: 0; }
    .filter-bar button[type="submit"],
    .filter-bar .btn { flex: 0 0 auto; }

    /* ARTICLE PAGE ─────────────────── */
    /* Author row: avatar + meta on first line, share buttons full-width below */
    .author-row {
        flex-wrap: wrap;
        row-gap: 14px;
        align-items: center;
    }
    .author-row > .author-avatar { flex: 0 0 auto; }
    .author-row > div:not(.author-avatar) {
        flex: 1 1 0;
        min-width: 0;
    }
    /* The share buttons rail drops to its own row */
    .author-row .share-rail {
        flex: 1 1 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .author-row .meta {
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        line-height: 1.5;
    }

    /* Series strip pills wrap (already do via flex-wrap, but ensure overflow contained) */
    .article-body article .admin-card,
    .container-narrow .admin-card { word-wrap: break-word; }

    /* Comments — vote button + name row */
    .comment-head {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .comment-head > form { margin-left: auto; }

    /* TOC sidebar always static on mobile so it doesn't pin */
    .article-sidebar .sidebar-block[style*="sticky"] {
        position: static !important;
    }

    /* Tags — wrap and keep tappable */
    .tag-pill { padding: 6px 12px; font-size: 0.84rem; }

    /* PREMIUM page card stickiness off */
    .container-narrow aside .admin-card[style*="sticky"] {
        position: static !important;
    }

    /* ADMIN PAGE HEADS ─────────────────── */
    .admin-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .admin-page-head > * { width: 100%; }
    .admin-page-head .btn { text-align: center; }

    /* ADMIN TABLES — bigger × buttons + word break ─────────────────── */
    .admin-table .actions {
        justify-content: flex-start;
    }
    .admin-table .actions .btn-sm {
        padding: 6px 11px;
        min-height: 32px;
        min-width: 32px;
    }
    /* First/title column gets more room */
    .admin-table td:first-child,
    .admin-table th:first-child { min-width: 180px; }

    /* CARDS WITH INLINE GRIDS  ─────────────────── */
    /* Sources / corrections inline grids stack cleanly */
    .admin-card[style*="display: grid"][style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column;
        gap: 10px !important;
    }
    .admin-card[style*="display: grid"] button.btn { width: 100%; }

    /* NEWSLETTER article picker — comfy tap rows */
    .admin-card label[style*="display: flex"] {
        padding: 12px 10px !important;
    }

    /* SPONSORED BANNER on article — wrap cleanly */
    [class*="container-narrow"] [style*="display: flex"][style*="gap: 12px"][style*="align-items: center"] {
        flex-wrap: wrap;
    }

    /* HERO featured image card body padding tighter */
    .hero-featured-body { padding: 22px 18px; }

    /* PAGE HEADS / HEROES — better line-height on small */
    .page-hero h1 { line-height: 1.2; }
    .article-hero h1 { line-height: 1.2; }

    /* PAGINATION wraps */
    .pagination {
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
    }
    .pagination a, .pagination span { min-width: 36px; text-align: center; }

    /* FORMS — fieldset rows collapse */
    .form-row,
    .form-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* USER avatar in header doesn't overflow */
    .author-avatar { flex-shrink: 0; }

    /* SOCIAL share buttons wrap */
    .social-share {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* FOOTER links wider tap target */
    .site-footer a {
        display: inline-block;
        padding: 6px 0;
        min-height: 32px;
    }

    /* DASHBOARD widgets full-width */
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns: 1fr 2fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ===== Very small phones (≤380px) ===== */
@media (max-width: 380px) {
    /* Single column for header CTAs — Submit takes priority */
    .header-actions { row-gap: 6px; }
    .cta-signin { font-size: 0.82rem; }

    /* Tighter padding on cards */
    .admin-card { padding: 14px 14px; }
    .sidebar-block { padding: 16px; }

    /* Smaller meta text */
    .meta { font-size: 0.78rem; }

    /* Stretch primary buttons full-width for thumb reach */
    .article-content .btn,
    .auth-card .btn {
        width: 100%;
    }
}

/* ---------- PRINT ---------- */
@media print {
    .site-header, .site-footer, .breaking-bar, .ad-block, .newsletter-cta, .header-actions, .article-sidebar { display: none !important; }
    body { background: white; color: black; }
    .article-content { font-size: 11pt; }
    a { color: black; text-decoration: none; }
}

/* ===========================================================
   tagDiv NEWSPAPER-style homepage layout
   =========================================================== */

:root {
    --np-green: #4DB849;
    --np-green-dark: #3A8E37;
    --np-orange: #F5811E;
    --np-text: #222;
    --np-muted: #888;
    --np-line: #E5E5E5;
}

/* ---- Breaking news bar ---- */
.np-breaking-bar {
    background: #fff;
    border-bottom: 1px solid var(--np-line);
    padding: 10px 0;
}
.np-breaking-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}
.np-breaking-tag {
    background: var(--np-green);
    color: white;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 3px;
    flex-shrink: 0;
}
.np-breaking-scroller {
    display: flex;
    gap: 28px;
    overflow: hidden;
    min-width: 0;
    flex: 1;
}
.np-breaking-item {
    color: var(--np-text);
    text-decoration: none;
    font-size: 0.92rem;
    white-space: nowrap;
}
.np-breaking-item:hover { color: var(--np-green); }

/* ---- Hero band ---- */
.np-hero { padding: 24px 0; background: #fff; }
.np-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "leadL leadR rail";
    gap: 18px;
    align-items: start; /* don't stretch rail items to match lead height */
}
.np-hero-card { text-decoration: none; color: inherit; display: block; }
.np-hero-card-lead:nth-of-type(1) { grid-area: leadL; }
.np-hero-card-lead:nth-of-type(2) { grid-area: leadR; }
.np-hero-rail { grid-area: rail; display: flex; flex-direction: column; gap: 12px; align-self: start; }

.np-hero-card-image {
    position: relative;
    aspect-ratio: 4/5;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    overflow: hidden;
}
.np-image-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; opacity: 0.3; color: white;
}
.np-image-placeholder-sm {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; opacity: 0.3; color: white;
}
.np-image-placeholder-xs {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; opacity: 0.3; color: white;
}
.np-card-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 28px 24px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0) 100%);
    color: white;
}
.np-card-overlay h2 {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 1.55rem;
    line-height: 1.15;
    margin: 8px 0 10px;
    color: white;
    font-weight: 700;
}
.np-cat-pill {
    display: inline-block;
    background: var(--np-green);
    color: white;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 2px;
    margin-bottom: 6px;
}
.np-card-meta { font-size: 0.85rem; color: rgba(255,255,255,0.85); line-height: 1.4; }
.np-byline { font-style: italic; }

/* ---- Hero rail ---- */
.np-rail-card {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-height: 0;
}
.np-rail-card-image {
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    position: relative;
}
.np-rail-card-body { padding: 4px 0; min-width: 0; }
.np-cat-pill-sm {
    display: inline-block;
    background: var(--np-green);
    color: white;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 2px;
    margin-bottom: 4px;
}
.np-rail-card-body h4 {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 0.92rem;
    line-height: 1.25;
    color: var(--np-text);
    margin: 0 0 4px;
    font-weight: 700;
}
.np-rail-card:hover .np-rail-card-body h4 { color: var(--np-green); }
.np-meta-sm { font-size: 0.74rem; color: var(--np-muted); }

/* ---- Logo divider ---- */
.np-divider { padding: 36px 0; background: #fff; }
.np-divider-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.np-divider-tag {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--np-text);
    letter-spacing: 0.04em;
}
.np-divider-line {
    flex: 0 1 200px;
    height: 1px;
    background: var(--np-line);
}
.np-divider-sub {
    font-size: 0.85rem;
    color: var(--np-muted);
    font-style: italic;
}
.np-divider-mark {
    background: var(--np-green);
    color: white;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 700;
}

/* ---- 3-col grid + Feature card ---- */
.np-feature-row { padding: 8px 0; background: #fff; }
.np-3col-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
.np-3col-grid-mixed { gap: 30px; }

.np-feature-card {
    text-decoration: none;
    color: inherit;
    display: block;
}
.np-feature-image {
    position: relative;
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    margin-bottom: 14px;
}
.np-image-overlay-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--np-green);
    color: white;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 2px;
}
.np-feature-body { padding: 0 4px; }
.np-cat-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--np-green);
    display: block;
    margin-bottom: 8px;
}
.np-cat-text-sm {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--np-green);
    display: block;
    margin-bottom: 4px;
}
.np-feature-body h3 {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--np-text);
    margin: 0 0 10px;
    font-weight: 700;
}
.np-feature-card:hover .np-feature-body h3 { color: var(--np-green); }
.np-feature-excerpt {
    font-size: 0.9rem;
    color: var(--np-muted);
    line-height: 1.5;
    margin: 0 0 10px;
}
.np-byline-row {
    display: flex;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--np-muted);
    flex-wrap: wrap;
}
.np-byline-name { color: var(--np-text); font-weight: 500; }
.np-byline-name::after { content: ' ·'; color: var(--np-muted); }

/* ---- Mixed module 3-col with thumbnail rows ---- */
.np-mixed-module { padding: 24px 0; background: #fff; }
.np-section-title {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--np-text);
    border-bottom: 2px solid var(--np-text);
    padding-bottom: 6px;
    margin: 0 0 16px;
}
.np-thumb-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 12px 0;
    border-bottom: 1px solid var(--np-line);
}
.np-thumb-row:last-child { border-bottom: 0; }
.np-thumb-img {
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    position: relative;
}
.np-thumb-body { min-width: 0; }
.np-thumb-body h5 {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--np-text);
    margin: 0 0 6px;
    font-weight: 700;
}
.np-thumb-row:hover .np-thumb-body h5 { color: var(--np-green); }
.np-thumb-meta { font-size: 0.74rem; color: var(--np-muted); }

.np-thumb-row-lg { grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; }
.np-thumb-img-lg {
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    position: relative;
}

/* ---- General News + 2-col grid ---- */
.np-general-news { padding: 24px 0; background: #fff; }
.np-section-banner {
    background: var(--np-text);
    color: white;
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    padding: 10px 16px;
    margin: 0 0 22px;
    display: inline-block;
}
.np-section-banner-left {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--np-text);
    border-bottom: 2px solid var(--np-text);
    padding-bottom: 6px;
    margin: 0 0 16px;
    display: block;
}
.np-2col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

/* ---- Thumb list pair ---- */
.np-thumb-list-pair { padding: 16px 0; background: #fff; }

/* ---- Circular category buttons ---- */
.np-circle-cats { padding: 40px 0; background: #fff; }
.np-circle-cats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
    max-width: 900px;
    margin: 0 auto;
}
.np-circle-cat {
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    background-size: cover;
    background-position: center;
    transition: transform 0.2s;
}
.np-circle-cat:hover { transform: scale(1.03); }
.np-circle-cat-label {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.02em;
}

/* ---- Exclusive content ---- */
.np-exclusive { padding: 24px 0; background: #fff; }
.np-exclusive-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; }
.np-exclusive-big .np-feature-image { aspect-ratio: 4/3; }
.np-exclusive-big .np-feature-body h3 { font-size: 1.7rem; }
.np-exclusive-small-stack { display: grid; gap: 18px; }
.np-exclusive-small-stack .np-feature-image { aspect-ratio: 16/10; }
.np-exclusive-small-stack .np-feature-body h3 { font-size: 1.1rem; }

/* ---- Latest articles + sidebar ---- */
.np-latest-section { padding: 24px 0 40px; background: #fff; }
.np-latest-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 36px; }

.np-latest-row {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 18px;
    text-decoration: none;
    color: inherit;
    padding: 20px 0;
    border-bottom: 1px solid var(--np-line);
}
.np-latest-row:first-child { padding-top: 0; }
.np-latest-img {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    position: relative;
}
.np-latest-body h3 {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 1.35rem;
    line-height: 1.2;
    color: var(--np-text);
    margin: 4px 0 10px;
    font-weight: 700;
}
.np-latest-row:hover .np-latest-body h3 { color: var(--np-green); }
.np-latest-excerpt { font-size: 0.92rem; line-height: 1.55; color: var(--np-muted); margin: 0 0 10px; }

/* ---- Subscribe widget sidebar ---- */
.np-subscribe-widget {
    background: #F5F5F5;
    padding: 22px 20px;
    border-radius: 4px;
}
.np-subscribe-label {
    font-weight: 700;
    margin: 0 0 12px;
    font-size: 1rem;
    color: var(--np-text);
}
.np-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--np-line);
    border-radius: 3px;
    font-size: 0.9rem;
    margin-bottom: 12px;
    box-sizing: border-box;
}
.np-subscribe-fine {
    font-size: 0.74rem;
    color: var(--np-muted);
    margin: 0;
    line-height: 1.4;
}

/* ===========================================================
   tagDiv responsive
   =========================================================== */

@media (max-width: 1100px) {
    .np-hero-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "leadL leadR" "rail rail";
    }
    .np-hero-rail { flex-direction: row; gap: 12px; }
    .np-hero-rail .np-rail-card { flex: 1; grid-template-columns: 80px 1fr; }
    .np-3col-grid { grid-template-columns: 1fr 1fr; }
    .np-3col-grid > :last-child { grid-column: 1 / -1; }
    .np-circle-cats-grid { gap: 18px; }
    .np-circle-cat-label { font-size: 1.2rem; }
}

@media (max-width: 768px) {
    .np-breaking-inner { flex-wrap: wrap; }
    .np-breaking-scroller { gap: 14px; }

    .np-hero-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "leadL" "leadR" "rail";
    }
    .np-hero-rail { flex-direction: column; }
    .np-hero-rail .np-rail-card { grid-template-columns: 100px 1fr; }
    .np-hero-card-image { aspect-ratio: 4/3; }
    .np-card-overlay h2 { font-size: 1.25rem; }

    .np-divider-line { display: none; }
    .np-divider-inner { gap: 10px; flex-wrap: wrap; justify-content: center; }
    .np-divider-tag { font-size: 1.2rem; }

    .np-3col-grid,
    .np-3col-grid-mixed { grid-template-columns: 1fr; gap: 22px; }
    .np-3col-grid > :last-child { grid-column: auto; }
    .np-2col-grid { grid-template-columns: 1fr; gap: 22px; }

    .np-circle-cats-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        max-width: 280px;
    }

    .np-exclusive-grid { grid-template-columns: 1fr; gap: 22px; }
    .np-exclusive-big .np-feature-body h3 { font-size: 1.3rem; }

    .np-latest-grid { grid-template-columns: 1fr; gap: 30px; }
    .np-latest-row { grid-template-columns: 1fr; gap: 12px; }
    .np-latest-img { aspect-ratio: 16/10; }
    .np-thumb-row-lg { grid-template-columns: 90px 1fr; padding: 14px 0; }
}

@media (max-width: 480px) {
    .np-hero-card-image { aspect-ratio: 16/10; }
    .np-card-overlay { padding: 18px 14px 14px; }
    .np-card-overlay h2 { font-size: 1.1rem; }
    .np-feature-body h3 { font-size: 1.1rem; }
    .np-latest-body h3 { font-size: 1.1rem; }
}

/* ===========================================================
   Section heads with "More in {Category} →" links
   =========================================================== */
.np-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid var(--np-text);
    padding-bottom: 10px;
    margin-bottom: 22px;
    gap: 12px;
    flex-wrap: wrap;
}
.np-section-h2 {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--np-text);
    margin: 0;
    line-height: 1.2;
}
.np-section-h3 {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--np-text);
    margin: 0;
}
.np-section-h3-sidebar {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--np-text);
    margin: 0;
}
.np-more-in {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    color: var(--np-green);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}
.np-more-in:hover {
    color: var(--np-green-dark);
    text-decoration: underline;
}
.np-section-head-sm {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid var(--np-text);
    padding-bottom: 6px;
    margin-bottom: 16px;
    gap: 8px;
}
.np-more-in-sm {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--np-green);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.np-more-in-sm:hover {
    color: var(--np-green-dark);
    text-decoration: underline;
}

/* ===========================================================
   Full-width section: big card on left + thumbs on right
   =========================================================== */
.np-full-section { padding: 24px 0; background: #fff; }
.np-bigleft-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 28px;
    align-items: start;
}
.np-feature-card-big .np-feature-image { aspect-ratio: 16/10; }
.np-feature-card-big .np-feature-body h3 {
    font-size: 1.55rem;
    line-height: 1.2;
}

/* ===========================================================
   Pair sections (2-col)
   =========================================================== */
.np-pair-section { padding: 24px 0; background: #fff; }
.np-pair-section .np-feature-card { display: block; }

/* ===========================================================
   Category navigation tiles (replaces circle buttons)
   Clean grid with color accent bars
   =========================================================== */
.np-cat-nav { padding: 40px 0; background: #fff; }
.np-cat-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.np-cat-tile {
    background: #fff;
    border: 1px solid var(--np-line);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    position: relative;
}
.np-cat-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-color: var(--cat-color, var(--np-green));
}
.np-cat-tile-accent {
    height: 4px;
    background: var(--cat-color, var(--np-green));
    width: 100%;
}
.np-cat-tile-body {
    padding: 18px 18px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.np-cat-tile-body h4 {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--np-text);
    margin: 0 0 8px;
    line-height: 1.25;
}
.np-cat-tile-body p {
    font-size: 0.83rem;
    color: var(--np-muted);
    line-height: 1.45;
    margin: 0 0 14px;
    flex: 1;
}
.np-cat-tile-count {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    color: var(--cat-color, var(--np-green));
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.np-cat-tile-count span {
    font-size: 0.9rem;
}

/* ===========================================================
   Popular sidebar list (numbered)
   =========================================================== */
.np-popular-row {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--np-line);
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}
.np-popular-row:last-child { border-bottom: 0; }
.np-popular-num {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--np-green);
    line-height: 1;
    text-align: center;
}
.np-popular-body { min-width: 0; }
.np-popular-body h5 {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 0.92rem;
    line-height: 1.3;
    color: var(--np-text);
    margin: 0 0 4px;
    font-weight: 700;
}
.np-popular-row:hover .np-popular-body h5 { color: var(--np-green); }

/* ===========================================================
   Subscribe widget — better styling
   =========================================================== */
.np-subscribe-widget {
    background: var(--cream-2, #F7F4ED);
    border: 1px solid var(--np-line);
    border-radius: 6px;
    padding: 20px;
}
.np-subscribe-label {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--np-text);
    margin: 0 0 6px;
}
.np-subscribe-blurb {
    font-size: 0.82rem;
    color: var(--np-muted);
    line-height: 1.5;
    margin: 0 0 14px;
}

/* ===========================================================
   Responsive for new pieces
   =========================================================== */
@media (max-width: 980px) {
    .np-bigleft-grid { grid-template-columns: 1fr; }
    .np-cat-tiles { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .np-section-h2 { font-size: 1.2rem; }
}

@media (max-width: 768px) {
    .np-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .np-more-in { font-size: 0.74rem; }
    .np-cat-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
    .np-cat-tile-body { padding: 14px; }
    .np-cat-tile-body h4 { font-size: 0.98rem; }
    .np-cat-tile-body p { font-size: 0.78rem; }
}

@media (max-width: 480px) {
    .np-cat-tiles { grid-template-columns: 1fr; }
    .np-section-h2 { font-size: 1.1rem; }
}

/* ===========================================================
   Author profile page
   =========================================================== */

.author-hero {
    background: var(--graphite, #1A1F2B);
    color: white;
    padding: 60px 0 50px;
    position: relative;
    overflow: hidden;
}
.author-hero::before {
    content: '';
    position: absolute;
    top: 0; right: -120px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(200,242,108,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.author-hero-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 36px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.author-avatar-wrap {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}
.author-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.author-avatar-initials {
    width: 100%;
    height: 100%;
    background: var(--lime, #C8F26C);
    color: var(--graphite, #1A1F2B);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 3.4rem;
    border: 4px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.author-hero-body { min-width: 0; }
.author-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lime, #C8F26C);
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}
.author-name {
    font-family: 'Fraunces', serif;
    font-size: 2.6rem;
    line-height: 1.1;
    color: white;
    margin: 0 0 10px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.author-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 8px;
    width: 28px;
    height: 28px;
    background: var(--lime, #C8F26C);
    color: var(--graphite, #1A1F2B);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
}
.author-title {
    color: rgba(255,255,255,0.85);
    font-size: 1.05rem;
    margin-bottom: 6px;
}
.author-verified-role {
    color: var(--lime, #C8F26C);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.author-quickstats {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    margin: 16px 0 18px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.author-quickstats strong {
    color: white;
    font-weight: 600;
}
.author-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.author-social-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 8px 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    color: white;
    text-decoration: none;
    font-size: 0.88rem;
    transition: background 0.15s, border-color 0.15s;
}
.author-social-link:hover {
    background: rgba(200,242,108,0.15);
    border-color: var(--lime, #C8F26C);
    color: var(--lime, #C8F26C);
}
.author-social-link svg { flex-shrink: 0; }

/* Bio section */
.author-bio-section {
    background: var(--cream-2, #F7F4ED);
    padding: 40px 0;
    border-bottom: 1px solid var(--hairline, #E5E5E5);
}
.author-bio-wrap {
    max-width: 720px;
}
.author-section-title {
    font-family: 'Fraunces', serif;
    font-size: 1.5rem;
    margin: 0 0 16px;
    color: var(--ink, #1A1F2B);
    font-weight: 600;
}
.author-bio-text {
    font-family: 'Fraunces', serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--ink-soft, #444);
}

/* Articles list */
.author-articles-section { padding: 40px 0 60px; background: #fff; }
.author-articles-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--ink, #1A1F2B);
    padding-bottom: 10px;
}
.author-articles-head .meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    color: var(--muted, #888);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .author-hero { padding: 36px 0 30px; }
    .author-hero-inner {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
        justify-items: center;
    }
    .author-avatar-wrap { width: 110px; height: 110px; }
    .author-avatar-initials { font-size: 2.6rem; }
    .author-name { font-size: 1.9rem; }
    .author-quickstats { justify-content: center; }
    .author-socials { justify-content: center; }
    .author-articles-section .card-grid { grid-template-columns: 1fr !important; }
}

/* ===========================================================
   Contributors index page
   =========================================================== */
.contributors-hero {
    background: var(--cream-2, #F7F4ED);
    padding: 50px 0 40px;
    border-bottom: 1px solid var(--hairline, #E5E5E5);
}
.contributors-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--np-green, #4DB849);
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}
.contributors-title {
    font-family: 'Fraunces', serif;
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--ink, #1A1F2B);
    margin: 0 0 12px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.contributors-intro {
    font-size: 1.1rem;
    color: var(--ink-soft, #444);
    margin: 0;
    max-width: 720px;
}

.contributors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.contributor-card {
    display: flex;
    gap: 18px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--hairline, #E5E5E5);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.contributor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-color: var(--np-green, #4DB849);
}
.contributor-avatar-wrap {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    position: relative;
}
.contributor-avatar-img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.contributor-avatar-initials {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--lime, #C8F26C);
    color: var(--graphite, #1A1F2B);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.8rem;
}
.contributor-verified-badge {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 22px; height: 22px;
    background: var(--lime, #C8F26C);
    color: var(--graphite, #1A1F2B);
    border: 2px solid #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}
.contributor-card-body { flex: 1; min-width: 0; }
.contributor-name {
    font-family: 'Fraunces', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink, #1A1F2B);
    margin: 0 0 4px;
    line-height: 1.2;
}
.contributor-card:hover .contributor-name { color: var(--np-green, #4DB849); }
.contributor-title {
    font-size: 0.85rem;
    color: var(--muted, #888);
    margin-bottom: 8px;
}
.contributor-bio {
    font-size: 0.88rem;
    color: var(--ink-soft, #444);
    line-height: 1.5;
    margin: 0 0 10px;
}
.contributor-count {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    color: var(--np-green, #4DB849);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 980px) {
    .contributors-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .contributors-title { font-size: 2rem; }
}
@media (max-width: 600px) {
    .contributors-grid { grid-template-columns: 1fr; }
    .contributor-card { flex-direction: column; align-items: flex-start; }
    .contributors-title { font-size: 1.7rem; }
}

/* ===========================================================
   Article page — enriched sidebar, prev/next, related grid
   =========================================================== */

/* --- Sidebar section title — unified style across all blocks --- */
.sidebar-section-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 600;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ink);
}

/* --- Newsletter signup block --- */
.sidebar-newsletter {
    background: var(--graphite, #1A1F2B);
    color: white;
    border: 0 !important;
    padding: 20px !important;
}
.sidebar-newsletter-title {
    font-family: 'Fraunces', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lime, #C8F26C);
    margin: 0 0 8px;
    line-height: 1.2;
}
.sidebar-newsletter-desc {
    color: rgba(255,255,255,.78);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 14px;
}
.sidebar-newsletter-input {
    width: 100%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    color: white;
    padding: 10px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 0.92rem;
}
.sidebar-newsletter-input::placeholder { color: rgba(255,255,255,.4); }
.sidebar-newsletter-input:focus {
    outline: none;
    border-color: var(--lime, #C8F26C);
    background: rgba(255,255,255,.12);
}
.sidebar-newsletter-btn {
    display: block;
    width: 100%;
    background: var(--lime, #C8F26C);
    color: var(--graphite, #1A1F2B);
    border: 0;
    padding: 11px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.sidebar-newsletter-btn:hover { background: #d8ff7d; }
.sidebar-newsletter-foot {
    color: rgba(255,255,255,.55);
    font-size: 0.74rem;
    margin: 12px 0 0;
    text-align: center;
}
.sidebar-newsletter-foot strong { color: rgba(255,255,255,.85); }

/* --- Article items (Editor's picks, More in Category) --- */
.sidebar-article-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.sidebar-article-item:last-child { border-bottom: 0; }
.sidebar-article-item:hover .sidebar-article-title { color: var(--np-green, #4DB849); }
.sidebar-article-thumb {
    width: 72px;
    height: 56px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}
.sidebar-article-thumb-placeholder {
    background: linear-gradient(135deg, var(--graphite, #1A1F2B), #2c3344);
}
.sidebar-article-body { flex: 1; min-width: 0; }
.sidebar-article-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 0.94rem;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 4px;
    transition: color 0.15s;
}
.sidebar-article-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sidebar-more-link {
    display: block;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--hairline);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.76rem;
    color: var(--np-green, #4DB849);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.sidebar-more-link:hover { text-decoration: underline; }

/* --- Popular this week list with rank numbers --- */
.sidebar-popular-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: pop-counter;
}
.sidebar-popular-list li {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
    align-items: flex-start;
}
.sidebar-popular-list li:last-child { border-bottom: 0; }
.sidebar-popular-num {
    font-family: 'Fraunces', serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--lime, #C8F26C);
    line-height: 1;
    min-width: 28px;
    font-feature-settings: "tnum";
    -webkit-text-stroke: 1px var(--graphite, #1A1F2B);
}
.sidebar-popular-link {
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}
.sidebar-popular-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 0.94rem;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 4px;
    transition: color 0.15s;
}
.sidebar-popular-link:hover .sidebar-popular-title { color: var(--np-green, #4DB849); }
.sidebar-popular-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Tags cloud --- */
.sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sidebar-tag {
    display: inline-block;
    padding: 5px 10px;
    background: var(--cream-2, #F7F4ED);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--ink-soft);
    text-decoration: none;
    transition: all 0.15s;
}
.sidebar-tag:hover {
    background: var(--graphite, #1A1F2B);
    color: var(--lime, #C8F26C);
    border-color: var(--graphite, #1A1F2B);
}

/* --- Ad slot --- */
.sidebar-ad-slot { padding: 16px !important; }
.ad-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}
.sidebar-ad-placeholder {
    height: 250px;
    background: repeating-linear-gradient(45deg, var(--cream-2, #F7F4ED), var(--cream-2, #F7F4ED) 10px, #fff 10px, #fff 20px);
    border: 1px dashed var(--hairline);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sidebar-ad-placeholder span {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.84rem;
    color: var(--muted);
    font-weight: 600;
}
.sidebar-ad-placeholder small {
    font-size: 0.72rem;
    color: var(--muted);
}
.sidebar-ad-link { text-decoration: none; color: inherit; }
.sidebar-ad-link img { width: 100%; border-radius: 3px; }
.sidebar-ad-headline {
    margin: 10px 0 6px;
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0;
}
.sidebar-ad-copy {
    font-size: 0.86rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

/* ===========================================================
   Previous / Next navigation strip
   =========================================================== */
.prevnext-strip {
    background: var(--cream-2, #F7F4ED);
    padding: 30px 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    margin-top: 40px;
}
.prevnext-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.prevnext-card {
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    padding: 18px 22px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s;
}
.prevnext-card:hover {
    border-color: var(--np-green, #4DB849);
    transform: translateY(-1px);
}
.prevnext-next { text-align: right; }
.prevnext-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    font-weight: 600;
}
.prevnext-title {
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

/* ===========================================================
   Related articles strip (3-up at the bottom)
   =========================================================== */
.related-section {
    background: #fff;
    padding: 50px 0 60px;
}
.related-heading {
    font-family: 'Fraunces', serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ink);
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.related-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s;
}
.related-card:hover { transform: translateY(-2px); }
.related-card-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 12px;
}
.related-card-img-placeholder {
    background: linear-gradient(135deg, var(--graphite, #1A1F2B), #2c3344);
}
.related-card-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--np-green, #4DB849);
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}
.related-card-title {
    font-family: 'Fraunces', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    margin: 0 0 8px;
    transition: color 0.15s;
}
.related-card:hover .related-card-title { color: var(--np-green, #4DB849); }
.related-card-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 880px) {
    .prevnext-grid { grid-template-columns: 1fr; }
    .prevnext-next { text-align: left; }
    .related-grid { grid-template-columns: 1fr; gap: 24px; }
    .related-heading { font-size: 1.35rem; }
}

/* ===========================================================
   Inline in-article ads (injected between paragraphs)
   =========================================================== */
.inline-ad {
    display: block;
    margin: 36px 0;
    padding: 20px;
    background: var(--cream-2, #F7F4ED);
    border: 1px solid var(--hairline, #E5E5E5);
    border-left: 3px solid var(--lime, #C8F26C);
    border-radius: 4px;
    position: relative;
}
.inline-ad-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted, #888);
    font-weight: 600;
    margin-bottom: 12px;
}
.inline-ad-link {
    display: flex;
    gap: 18px;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}
.inline-ad-img {
    width: 140px;
    height: 100px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}
.inline-ad-body { flex: 1; min-width: 0; }
.inline-ad-headline {
    font-family: 'Manrope', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink, #1A1F2B);
    margin: 0 0 6px;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
.inline-ad-copy {
    font-family: 'Manrope', sans-serif;
    font-size: 0.92rem;
    color: var(--ink-soft, #444);
    margin: 0 0 10px;
    line-height: 1.5;
}
.inline-ad-cta {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    color: var(--np-green, #4DB849);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.15s;
}
.inline-ad-link:hover .inline-ad-cta { color: var(--ink, #1A1F2B); }
.inline-ad-link:hover .inline-ad-headline { color: var(--np-green, #4DB849); }

@media (max-width: 680px) {
    .inline-ad-link { flex-direction: column; }
    .inline-ad-img { width: 100%; height: 180px; }
}

/* ===========================================================
   ARTICLE PAGE — UNIFIED COLUMN ALIGNMENT
   ============================================================
   The hero, featured image, body, and below-body sections all
   align to the same left edge and same width.

   Outer width: 1180px (matches .article-body grid container)
   Inner content width: 844px (matches the body column inside
   the 1180px grid: 1180 - 280 sidebar - 56 gap = 844px)
   =========================================================== */

.article-page-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
}

.article-content-col {
    max-width: 844px;
}

/* Override the hero's old 880px h1 cap so it matches the content column */
.article-hero .article-content-col h1 {
    max-width: 100%;
    margin-bottom: 0.4em;
}
.article-hero .article-content-col .lead {
    max-width: 100%;
    font-size: 1.18rem;
    color: var(--ink-soft);
    margin-bottom: 24px;
    line-height: 1.55;
}

/* Featured image card sits in the body column too */
.article-featured-wrap {
    max-width: 844px;
    margin-top: 28px;
}
.article-featured-wrap img {
    border-radius: var(--radius-lg);
    width: 100%;
    display: block;
}

/* Below-body sections (comments, sources, prev/next, related)
   when wrapped in article-page-wrap stay aligned to body column */
.article-page-wrap > .article-content-col {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 940px) {
    .article-page-wrap {
        max-width: 760px;
        padding: 0 28px;
    }
    .article-content-col,
    .article-featured-wrap {
        max-width: 100%;
    }
}

/* ===========================================================
   ARTICLE PAGE — FULL-HEIGHT SHELL GRID
   ============================================================
   The whole article (hero, featured image, series, corrections,
   body, sidebar) lives in ONE two-column grid so the sidebar
   begins at the top of the page next to the title.
   =========================================================== */

.article-shell {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 56px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 36px 28px 80px;
    align-items: start; /* sidebar doesn't stretch to body height */
}

/* Main column = vertical stack of hero, featured image, body, etc */
.article-main {
    min-width: 0; /* allow grid item to shrink for long text */
}

/* Hero inside the shell — no extra width constraints needed */
.article-hero {
    padding: 0;
}
.article-hero-inner {
    /* No max-width — the grid column already constrains it */
}
.article-hero h1 {
    max-width: 100% !important;
    margin-bottom: 0.4em;
}
.article-hero .lead {
    max-width: 100% !important;
    font-size: 1.18rem;
    color: var(--ink-soft);
    margin-bottom: 24px;
    line-height: 1.55;
}

/* Featured image inside shell */
.article-featured {
    margin-top: 28px;
}
.article-featured img {
    border-radius: var(--radius-lg);
    width: 100%;
    display: block;
}

/* Series + corrections blocks no longer need outer wrappers */
.article-series,
.article-corrections {
    margin-top: 28px;
}

/* Article body content inside the shell */
.article-main .article-content {
    margin-top: 32px;
}

/* Sidebar — flows naturally as a long column of blocks.
   No sticky, no internal scroll — just a normal vertical stack next to the body.
   Once the reader scrolls past the sidebar, the right side is empty, which is fine.
   That's how every editorial publication handles a rich sidebar. */
.article-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Override any inline sticky positioning that might be set on individual blocks
   (the old hero sidebar tried to make TOC sticky inline) */
.article-sidebar .sidebar-block,
.article-sidebar .sidebar-toc {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Mobile: single column, TOC entirely hidden because it's not useful on small screens
   where space is precious and the reader is going to scroll regardless */
@media (max-width: 940px) {
    .article-shell {
        grid-template-columns: 1fr;
        max-width: 760px;
        padding: 24px 28px 60px;
        gap: 40px;
    }
    .article-sidebar .sidebar-toc {
        display: none !important;
    }
}

/* Older article-body class still used elsewhere; neutralize when inside shell */
.article-shell .article-body {
    display: block;
    max-width: none;
    padding: 0;
    gap: 0;
    margin: 0;
}

/* ===========================================================
   ANALYTICS DASHBOARD — KPIs, charts, tables
   =========================================================== */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
}
.kpi-card {
    background: #fff;
    border: 1px solid var(--hairline, #E5E5E5);
    border-radius: 6px;
    padding: 18px 20px;
}
.kpi-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted, #888);
    margin-bottom: 10px;
    font-weight: 600;
}
.kpi-value {
    font-family: 'Fraunces', serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--ink, #1A1F2B);
    line-height: 1;
    margin-bottom: 6px;
    font-feature-settings: "tnum";
}
.kpi-meta {
    font-size: 0.78rem;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.kpi-trend-up { color: #1A8917; font-weight: 600; }
.kpi-trend-down { color: #B71C1C; font-weight: 600; }
.kpi-trend-flat { color: var(--muted, #888); font-weight: 600; }

.kpi-row { display: flex; gap: 32px; }
.kpi-mini-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
    font-weight: 600;
}
.kpi-mini-value {
    font-family: 'Fraunces', serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
    font-feature-settings: "tnum";
}

/* H3 used in analytics blocks */
.analytics-h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ink);
}

/* Two-column layout for sub-cards */
.analytics-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
}

/* Line/bar chart */
.chart-line {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 220px;
    border-bottom: 1px solid var(--hairline);
    padding: 0 0 6px;
}
.chart-line-mini { height: 110px; gap: 2px; }
.chart-line-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.chart-line-bar {
    width: 100%;
    background: var(--graphite, #1A1F2B);
    border-radius: 2px 2px 0 0;
    position: relative;
    transition: background 0.15s;
    min-height: 2px;
}
.chart-line-bar:hover { background: var(--np-green, #4DB849); }
.chart-line-bar-green { background: var(--lime, #C8F26C); border: 1px solid var(--np-green, #4DB849); }
.chart-line-val {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    color: var(--muted);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
}
.chart-line-bar:hover .chart-line-val { opacity: 1; }
.chart-line-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.62rem;
    color: var(--muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Category bars */
.cat-bars { display: flex; flex-direction: column; gap: 14px; }
.cat-bar-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: center; }
.cat-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.9rem;
}
.cat-bar-label a { color: var(--ink); text-decoration: none; font-weight: 600; }
.cat-bar-label a:hover { color: var(--np-green, #4DB849); }
.cat-bar-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    color: var(--muted);
    font-feature-settings: "tnum";
}
.cat-bar-track {
    height: 24px;
    background: var(--cream-2, #F7F4ED);
    border-radius: 3px;
    overflow: hidden;
}
.cat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--graphite, #1A1F2B), #2c3344);
    border-radius: 3px;
    transition: width 0.3s;
}

/* Tables */
.analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.analytics-table thead th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid var(--ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 600;
}
.analytics-table thead th.num { text-align: right; }
.analytics-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--hairline);
}
.analytics-table tbody td.num {
    text-align: right;
    font-family: 'IBM Plex Mono', monospace;
    font-feature-settings: "tnum";
}
.analytics-table tbody tr:hover { background: var(--cream-2, #F7F4ED); }
.analytics-link {
    color: var(--ink);
    text-decoration: none;
}
.analytics-link:hover { color: var(--np-green, #4DB849); text-decoration: underline; }
.cat-pill {
    display: inline-block;
    padding: 2px 8px;
    background: var(--cream-2);
    border-radius: 999px;
    font-size: 0.76rem;
    color: var(--ink-soft);
}
.ai-badge {
    display: inline-block;
    padding: 1px 6px;
    background: var(--lime, #C8F26C);
    color: var(--graphite, #1A1F2B);
    border-radius: 3px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
}

/* AI vs human comparison */
.ai-vs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ai-vs-col {
    background: var(--cream-2);
    padding: 18px;
    border-radius: 4px;
    border-left: 3px solid var(--lime);
}
.ai-vs-col:nth-child(2) { border-left-color: var(--graphite); }
.ai-vs-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 12px;
}
.ai-vs-stat {
    font-size: 0.94rem;
    color: var(--ink-soft);
    margin-bottom: 6px;
}
.ai-vs-stat strong {
    font-family: 'Fraunces', serif;
    font-size: 1.4rem;
    color: var(--ink);
    margin-right: 4px;
    font-feature-settings: "tnum";
}

@media (max-width: 980px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .analytics-two-col { grid-template-columns: 1fr; }
    .ai-vs-grid { grid-template-columns: 1fr; }
    .cat-bar-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ===========================================================
   /categories index page
   =========================================================== */
.categories-hero {
    background: var(--cream-2, #F7F4ED);
    padding: 50px 0 40px;
    border-bottom: 1px solid var(--hairline, #E5E5E5);
}
.categories-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--np-green, #4DB849);
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}
.categories-title {
    font-family: 'Fraunces', serif;
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--ink, #1A1F2B);
    margin: 0 0 12px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.categories-intro {
    font-size: 1.1rem;
    color: var(--ink-soft, #444);
    margin: 0;
    max-width: 720px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.category-card {
    background: #fff;
    border: 1px solid var(--hairline, #E5E5E5);
    border-radius: 6px;
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.category-card:hover {
    border-color: var(--np-green, #4DB849);
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
.category-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.category-card-title {
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}
.category-card-title a {
    color: var(--ink, #1A1F2B);
    text-decoration: none;
}
.category-card-title a:hover { color: var(--np-green, #4DB849); }
.category-card-count {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    color: var(--muted, #888);
    white-space: nowrap;
    font-feature-settings: "tnum";
}
.category-card-desc {
    font-size: 0.94rem;
    color: var(--ink-soft, #444);
    line-height: 1.5;
    margin: 0;
}
.category-card-recent {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--hairline);
    padding-top: 14px;
}
.category-card-recent-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--hairline);
    text-decoration: none;
    color: inherit;
}
.category-card-recent-item:last-child { border-bottom: 0; }
.category-card-recent-thumb {
    width: 60px;
    height: 44px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}
.category-card-recent-thumb-placeholder {
    background: linear-gradient(135deg, var(--graphite, #1A1F2B), #2c3344);
}
.category-card-recent-body { flex: 1; min-width: 0; }
.category-card-recent-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 3px;
}
.category-card-recent-item:hover .category-card-recent-title { color: var(--np-green, #4DB849); }
.category-card-recent-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.category-card-empty {
    font-size: 0.88rem;
    color: var(--muted);
    font-style: italic;
    padding: 8px 0;
    border-top: 1px solid var(--hairline);
}
.category-card-cta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.76rem;
    color: var(--np-green, #4DB849);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: auto;
    padding-top: 8px;
}
.category-card-cta:hover { color: var(--ink); }

@media (max-width: 760px) {
    .categories-grid { grid-template-columns: 1fr; gap: 16px; }
    .categories-title { font-size: 1.9rem; }
}


/* ===========================================================
   TAGDIV-STYLE LAYOUT — Section 1-3: Utility bar, Header, Nav
   =========================================================== */

/* Section 1: Top utility bar */
.tag-utility-bar {
    background: #f5f5f5;
    border-bottom: 1px solid #e5e5e5;
    font-size: 0.74rem;
    color: #5e6b75;
}
.tag-utility-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
}
.tag-utility-left,
.tag-utility-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.tag-utility-weather {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tag-weather-icon {
    color: #fbbf24;
}
.tag-weather-temp {
    font-weight: 600;
    color: #1A1F2B;
}
.tag-utility-divider {
    width: 1px;
    height: 14px;
    background: #d4d4d4;
}
.tag-utility-right a {
    color: #5e6b75;
    text-decoration: none;
    transition: color 0.15s;
}
.tag-utility-right a:hover {
    color: #1A1F2B;
}
.tag-utility-cta {
    color: #00a99d !important;
    font-weight: 600;
}
.tag-utility-socials {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}
.tag-soc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #5e6b75 !important;
    transition: color 0.15s;
}
.tag-soc:hover {
    color: #00a99d !important;
}

@media (max-width: 760px) {
    .tag-utility-bar { display: none; }
}

/* Section 2: Main header band */
.tag-site-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
}
.tag-header-band {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
    height: 110px;
}
.tag-header-logo {
    flex-shrink: 0;
    display: inline-block;
}
.tag-header-logo img {
    height: 56px;
    width: auto;
    display: block;
}
.tag-header-ad-slot {
    display: flex;
    justify-content: center;
}
.tag-header-ad-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.tag-header-ad-link img {
    max-height: 90px;
    max-width: 728px;
    display: block;
}
.tag-header-ad-placeholder {
    background: linear-gradient(90deg, #f7f4ed 0%, #fbf8f0 100%);
    border: 1px dashed #d4d4d4;
    padding: 18px 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    max-width: 728px;
    font-size: 0.92rem;
}
.tag-ad-eyebrow {
    background: #00a99d;
    color: white;
    padding: 3px 8px;
    border-radius: 2px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
}
.tag-ad-text {
    color: #1A1F2B;
    font-weight: 500;
}
.tag-ad-cta {
    color: #00a99d;
    font-weight: 600;
    margin-left: 4px;
}
.tag-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tag-cta-pill {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    border-radius: 24px;
    background: #1A1F2B;
    color: white;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    transition: background 0.15s;
}
.tag-cta-pill:hover {
    background: #2c3344;
}
.tag-cta-primary {
    background: #1A1F2B;
}

@media (max-width: 880px) {
    .tag-header-band {
        grid-template-columns: auto auto;
        gap: 16px;
        height: 80px;
    }
    .tag-header-ad-slot {
        display: none;
    }
    .tag-header-logo img {
        height: 40px;
    }
}

/* Section 3: Main nav band */
.tag-main-nav {
    background: #1A1F2B;
    color: white;
    border-top: 3px solid #00a99d;
    position: relative;
}
/* Two-region layout: scrollable items on the left + fixed search on the right */
.tag-main-nav > .container {
    display: flex;
    align-items: center;
    position: relative;
}
.tag-main-nav-inner {
    display: flex;
    align-items: center;
    height: 50px;
    gap: 4px;
    flex: 1;
    min-width: 0; /* allow shrinking below content width — enables overflow */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Hide native scrollbar on most browsers */
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none; /* prevent text selection during drag */
}
.tag-main-nav-inner.is-grabbing {
    cursor: grabbing;
    scroll-behavior: auto; /* instant during drag, smooth otherwise */
}
.tag-main-nav-inner::-webkit-scrollbar { display: none; }

/* Scroll indicators — clickable chevron buttons on each edge.
   JS toggles `is-visible` based on actual scroll position. */
.tag-nav-scroll-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(to right, #1A1F2B 60%, transparent);
    border: 0;
    color: #00a99d;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 6px;
    transition: opacity 0.15s, background 0.15s;
    opacity: 0;
    pointer-events: none;
}
.tag-nav-scroll-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.tag-nav-scroll-btn:hover {
    color: white;
}
.tag-nav-scroll-btn svg {
    filter: drop-shadow(0 0 4px rgba(0, 169, 157, 0.6));
}
.tag-nav-scroll-left {
    left: 0;
    background: linear-gradient(to right, #1A1F2B 60%, transparent);
    justify-content: flex-start;
}
.tag-nav-scroll-right {
    right: 56px; /* clears the search button */
    background: linear-gradient(to left, #1A1F2B 60%, transparent);
    justify-content: flex-end;
}
@media (max-width: 880px) {
    .tag-nav-scroll-right { right: 44px; }
}
.tag-nav-item {
    color: white;
    padding: 0 18px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    gap: 4px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    flex-shrink: 0; /* keep natural width when overflowing */
}
.tag-nav-home {
    color: white;
    padding: 0 18px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: background 0.15s;
    flex-shrink: 0;
}
.tag-nav-home:hover {
    background: #2c3344;
}
.tag-nav-item:hover {
    background: #2c3344;
    color: #00a99d;
}
.tag-nav-caret {
    font-size: 0.7rem;
    opacity: 0.6;
}
.tag-nav-search-btn {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: white;
    padding: 0 18px;
    height: 50px;
    width: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-left: 1px solid rgba(255,255,255,0.08);
    transition: background 0.15s, color 0.15s;
    position: relative;
    z-index: 3; /* above the fade gradient */
}
.tag-nav-search-btn:hover {
    background: #2c3344;
    color: #00a99d;
}

@media (max-width: 880px) {
    .tag-main-nav-inner {
        height: 44px;
    }
    .tag-nav-item, .tag-nav-home, .tag-nav-search-btn {
        height: 44px;
        padding: 0 12px;
        font-size: 0.8rem;
    }
    .tag-nav-search-btn {
        width: 44px;
    }
}

/* Search overlay (revealed by clicking the search icon) */
.tag-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 31, 43, 0.97);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
.tag-search-overlay.open {
    display: flex;
}
.tag-search-close {
    position: absolute;
    top: 28px;
    right: 28px;
    background: transparent;
    border: 0;
    color: white;
    font-size: 1.6rem;
    cursor: pointer;
    width: 44px;
    height: 44px;
}
.tag-search-form {
    width: 100%;
    max-width: 700px;
    display: flex;
    gap: 8px;
    padding: 0 24px;
}
.tag-search-form input {
    flex: 1;
    background: transparent;
    border: 0;
    border-bottom: 2px solid #00a99d;
    color: white;
    font-size: 1.6rem;
    padding: 12px 0;
    font-family: 'Fraunces', serif;
    outline: none;
}
.tag-search-form input::placeholder {
    color: rgba(255,255,255,0.4);
}
.tag-search-form button {
    background: #00a99d;
    color: white;
    border: 0;
    padding: 14px 28px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ===========================================================
   TAGDIV-STYLE LAYOUT — Section 4: Trending strip
   =========================================================== */
.tag-trending-strip {
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
}
.tag-trending-inner {
    display: flex;
    align-items: center;
    height: 44px;
    gap: 14px;
}
.tag-trending-pill {
    background: #4DB849;
    color: white;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border-radius: 2px;
    flex-shrink: 0;
    text-transform: uppercase;
}
.tag-trending-track {
    flex: 1;
    min-width: 0;
    position: relative;
    height: 28px;
    overflow: hidden;
}
.tag-trending-item {
    /* Marquee item — sits inline inside the marquee track */
    display: inline-flex;
    align-items: center;
    color: #1A1F2B;
    text-decoration: none;
    font-size: 0.94rem;
    line-height: 1.3;
    white-space: nowrap;
    font-weight: 500;
    flex-shrink: 0;
}
.tag-trending-item:hover {
    color: #ef4444;
}
.tag-trending-item[aria-disabled="true"] {
    cursor: default;
    color: #5e6b75;
}
.tag-trending-nav {
    display: none;
    gap: 4px;
    flex-shrink: 0;
}
.tag-trending-arrow {
    width: 28px;
    height: 24px;
    background: transparent;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    color: #5e6b75;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.15s;
}
.tag-trending-arrow:hover {
    background: #1A1F2B;
    color: white;
    border-color: #1A1F2B;
}

@media (max-width: 760px) {
    .tag-trending-pill { font-size: 0.66rem; padding: 5px 10px; }
    .tag-trending-item { font-size: 0.84rem; }
    .tag-trending-nav { display: none; }
}

/* ===========================================================
   TAGDIV-STYLE LAYOUT — Section 5: Hero mosaic
   1 big lead card on the left + 2x2 grid of 4 smaller cards
   =========================================================== */
.tag-hero-mosaic {
    background: #ffffff;
    padding: 24px 0 28px;
}
.tag-mosaic-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
    /* Establish a baseline so big lead matches 2x2 quad height */
    height: 540px;
}
.tag-mosaic-quad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    min-height: 0;
}

/* Cards */
.tag-mosaic-card {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: white;
    display: block;
    border-radius: 2px;
}
.tag-mosaic-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    transition: transform 0.5s;
}
.tag-mosaic-card:not(.tag-mosaic-placeholder):hover .tag-mosaic-image {
    transform: scale(1.04);
}
.tag-mosaic-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 40%, transparent 65%);
}
.tag-mosaic-img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: rgba(255,255,255,0.2);
    background: linear-gradient(135deg, #1A1F2B, #2c3344);
}
.tag-mosaic-img-placeholder-small {
    font-size: 2.5rem;
}
.tag-mosaic-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 26px;
    z-index: 2;
}
.tag-mosaic-overlay-small {
    padding: 14px 16px;
}

/* Category pill — colors are per-category via tag-cat-* modifier classes */
.tag-cat-pill {
    display: inline-block;
    background: #4DB849; /* default */
    color: white;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 9px;
    border-radius: 2px;
    margin-bottom: 12px;
    text-transform: uppercase;
}
/* Multi-color section accents — match the TagDiv demo's vibe */
.tag-cat-power-electrical    { background: #fbbf24; color: #1A1F2B; }
.tag-cat-cooling-mechanical  { background: #06b6d4; }
.tag-cat-ai-infrastructure   { background: #a855f7; }
.tag-cat-operations-reliability { background: #4DB849; }
.tag-cat-construction-expansion { background: #f97316; }
.tag-cat-outages-incidents   { background: #ef4444; }
.tag-cat-cloud-hyperscale    { background: #3b82f6; }
.tag-cat-sustainability      { background: #16a34a; }
.tag-cat-equipment-technology { background: #8b5cf6; }
.tag-cat-careers-certifications { background: #00a99d; }
.tag-cat-market-insights     { background: #ec4899; }
.tag-cat-latest-news         { background: #4DB849; }

.tag-mosaic-title-big {
    font-family: 'Fraunces', 'Roboto Slab', Georgia, serif;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 12px;
    color: white;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.tag-mosaic-title-small {
    font-family: 'Fraunces', 'Roboto Slab', Georgia, serif;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    /* Cap at 3 lines so the overlay never overflows the card */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-mosaic-byline {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tag-mosaic-dot {
    margin: 0 6px;
    color: rgba(255,255,255,0.5);
}

/* Placeholder cards — slightly faded to signal "this is sample data" */
.tag-mosaic-placeholder {
    opacity: 0.85;
    cursor: default;
}
.tag-mosaic-placeholder:hover .tag-mosaic-image {
    transform: none;
}

/* Tablet */
@media (max-width: 980px) {
    .tag-mosaic-grid {
        grid-template-columns: 1fr;
        height: auto;
    }
    .tag-mosaic-big { height: 360px; }
    .tag-mosaic-quad { height: 360px; }
    .tag-mosaic-title-big { font-size: 1.5rem; }
}

/* Mobile — stack everything */
@media (max-width: 640px) {
    .tag-mosaic-quad {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 160px);
        height: auto;
    }
    .tag-mosaic-big { height: 280px; }
    .tag-mosaic-title-small { font-size: 0.95rem; -webkit-line-clamp: 2; }
}

/* ===========================================================
   TAGDIV-STYLE LAYOUT — Section 6: Global News block
   Section header + 2-col body (featured/thumbs + social/ad)
   =========================================================== */

.tag-section {
    background: #ffffff;
    padding: 28px 0;
}
.tag-section + .tag-section { padding-top: 8px; }

/* Section header — title with colored underline, "All ▾" on the right */
.tag-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 0;
    position: relative;
}
.tag-section-title {
    font-family: 'Roboto', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #1A1F2B;
    margin: 0;
    padding: 8px 0 10px;
    border-bottom: 2px solid #1A1F2B;
    text-transform: uppercase;
    position: relative;
    bottom: -1px; /* sit on top of the section underline */
}
/* Per-section accent colors */
.tag-section-title-global { border-bottom-color: #4DB849; }
.tag-section-title-travel { border-bottom-color: #00a99d; }
.tag-section-title-gadgets { border-bottom-color: #ec4899; }
.tag-section-title-recipes { border-bottom-color: #f97316; }
.tag-section-title-fashion { border-bottom-color: #fbbf24; }
.tag-section-title-fitness { border-bottom-color: #a855f7; }
.tag-section-title-gaming  { border-bottom-color: #3b82f6; }

.tag-section-all {
    font-size: 0.82rem;
    color: #5e6b75;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tag-section-all:hover { color: #1A1F2B; }
.tag-caret { font-size: 0.7rem; opacity: 0.7; }

/* Two-column body: featured+thumbs on the left, social+ad on the right */
.tag-global-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 28px;
    align-items: start;
}

/* LEFT column */
.tag-global-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}
.tag-global-featured {
    display: block;
    text-decoration: none;
    color: inherit;
    grid-column: 1 / 2;
}
.tag-global-featured-image {
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
}
.tag-global-featured-body { padding: 0; }
.tag-cat-text {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4DB849;
    margin-bottom: 8px;
}
.tag-cat-text-power-electrical    { color: #fbbf24; }
.tag-cat-text-cooling-mechanical  { color: #06b6d4; }
.tag-cat-text-ai-infrastructure   { color: #a855f7; }
.tag-cat-text-operations-reliability { color: #4DB849; }
.tag-cat-text-construction-expansion { color: #f97316; }
.tag-cat-text-outages-incidents   { color: #ef4444; }
.tag-cat-text-cloud-hyperscale    { color: #3b82f6; }
.tag-cat-text-sustainability      { color: #16a34a; }
.tag-cat-text-equipment-technology { color: #8b5cf6; }
.tag-cat-text-careers-certifications { color: #00a99d; }
.tag-cat-text-market-insights     { color: #ec4899; }
.tag-cat-text-latest-news         { color: #4DB849; }

.tag-global-featured-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 10px;
    color: #1A1F2B;
}
.tag-global-featured:hover .tag-global-featured-title { color: #4DB849; }
.tag-global-byline {
    font-size: 0.78rem;
    color: #777;
    margin-bottom: 10px;
}
.tag-global-byline .tag-mosaic-dot { color: #ccc; }
.tag-global-excerpt {
    font-size: 0.92rem;
    color: #555;
    line-height: 1.55;
    margin: 0;
}

/* Thumb list — image-left text-right rows */
.tag-thumb-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    grid-column: 2 / 3;
}
.tag-thumb-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    align-items: start;
    text-decoration: none;
    color: inherit;
}
.tag-thumb-img {
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.tag-thumb-body { padding: 2px 0 0; }
.tag-thumb-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 6px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-thumb-item:hover .tag-thumb-title { color: #4DB849; }
.tag-thumb-meta {
    font-size: 0.72rem;
    color: #888;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* RIGHT column — sidebar */
.tag-global-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Social counts widget: 3-up grid with icon, number, label */
.tag-social-counts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.tag-soc-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 8px 14px;
    color: white;
    text-decoration: none;
    border-radius: 2px;
    transition: filter 0.15s;
}
.tag-soc-card:hover { filter: brightness(1.08); }
.tag-soc-fb { background: #3b5998; }
.tag-soc-x  { background: #000000; }
.tag-soc-yt { background: #ff0000; }
.tag-soc-card-icon {
    margin-bottom: 8px;
}
.tag-soc-card-num {
    font-family: 'Roboto', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
    font-feature-settings: "tnum";
}
.tag-soc-card-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.9;
}

/* Sidebar ad block */
.tag-side-ad {
    background: #ffffff;
}
.tag-side-ad-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 8px;
    text-align: center;
}
.tag-side-ad-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.tag-side-ad-link img {
    width: 100%;
    display: block;
    border-radius: 2px;
}
.tag-side-ad-placeholder {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    height: 250px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    border-radius: 2px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    overflow: hidden;
}
.tag-side-ad-imitation {
    text-align: center;
    padding: 20px;
}
.tag-side-ad-headline {
    font-family: 'Roboto Slab', serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}
.tag-side-ad-sub {
    font-size: 0.78rem;
    opacity: 0.85;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tag-side-ad-btn {
    display: inline-block;
    background: #00a99d;
    color: white;
    padding: 9px 24px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
}
.tag-side-ad-dim {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    opacity: 0.4;
}
.tag-side-ad-textonly {
    background: #1A1F2B;
    color: white;
    padding: 20px;
    border-radius: 2px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tag-side-ad-textonly strong {
    font-family: 'Roboto Slab', serif;
    font-size: 1.2rem;
    margin-bottom: 8px;
}
.tag-side-ad-textonly p {
    font-size: 0.9rem;
    margin: 0 0 12px;
    opacity: 0.85;
}
.tag-side-ad-cta {
    color: #C8F26C;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Placeholder cards — slightly faded */
.tag-placeholder {
    opacity: 0.85;
    cursor: default;
}

/* Tablet */
@media (max-width: 980px) {
    .tag-global-grid {
        grid-template-columns: 1fr;
    }
    .tag-global-left {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .tag-global-featured,
    .tag-thumb-list { grid-column: auto; }
}

/* Mobile */
@media (max-width: 640px) {
    .tag-section { padding: 20px 0; }
    .tag-global-featured-title { font-size: 1.15rem; }
    .tag-thumb-item { grid-template-columns: 80px 1fr; gap: 12px; }
    .tag-thumb-title { font-size: 0.86rem; }
    .tag-social-counts { gap: 6px; }
    .tag-soc-card { padding: 14px 6px 10px; }
    .tag-soc-card-num { font-size: 1.05rem; }
}

/* ===========================================================
   TAGDIV-STYLE LAYOUT — Section 7: 3-up image-overlay cards
   Equivalent of the demo's "Travel Guides" row.
   =========================================================== */

.tag-section-expansion { padding-top: 12px; }

.tag-3up-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.tag-3up-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.tag-3up-image {
    position: relative;
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 12px;
}

.tag-3up-card:not(.tag-placeholder):hover .tag-3up-image {
    /* Use background-position shift instead of scale because background-image
       can't be transformed; very subtle Ken-Burns effect */
    transition: filter 0.4s;
    filter: brightness(1.08);
}

.tag-3up-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 45%, transparent 65%);
}

.tag-3up-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 20px;
    z-index: 2;
}

.tag-3up-overlay .tag-cat-pill {
    margin-bottom: 8px;
}

.tag-3up-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    /* 3-line clamp so the title never overflows the image */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Byline below the image (matches demo: "David Lee   June 3, 2020") */
.tag-3up-byline {
    font-size: 0.78rem;
    color: #777;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0;
}
.tag-3up-author {
    color: #1A1F2B;
    font-weight: 600;
}
.tag-3up-time {
    color: #888;
}

/* Tablet — 2 cards per row */
@media (max-width: 980px) {
    .tag-3up-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .tag-3up-grid > .tag-3up-card:nth-child(3) {
        /* If 3 cards on a 2-col grid, the third spans full width */
        grid-column: 1 / -1;
    }
}

/* Mobile — 1 card per row */
@media (max-width: 640px) {
    .tag-3up-grid { grid-template-columns: 1fr; gap: 18px; }
    .tag-3up-grid > .tag-3up-card:nth-child(3) {
        grid-column: auto;
    }
    .tag-3up-title { font-size: 1rem; -webkit-line-clamp: 2; }
}

/* ===========================================================
   TAGDIV-STYLE LAYOUT — Section 8: 2-col module + sidebar
   =========================================================== */

.tag-section-twocol { padding: 24px 0 32px; }

.tag-twocol-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    align-items: start;
}

/* Left: the pair of category modules side by side */
.tag-twocol-mods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.tag-mod-col { min-width: 0; }

/* Featured article in each module */
.tag-mod-featured {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 18px;
}
.tag-mod-featured-image {
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
}
.tag-mod-featured-body { padding: 0; }
.tag-mod-featured-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 6px 0 8px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-mod-featured:hover .tag-mod-featured-title { color: #4DB849; }
.tag-mod-byline {
    font-size: 0.74rem;
    color: #777;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.tag-mod-byline span:first-child { color: #1A1F2B; font-weight: 600; }
.tag-mod-excerpt {
    font-size: 0.88rem;
    color: #555;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Thumb list in each module — same style as Section 6's thumb list */
.tag-mod-thumb-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid #e5e5e5;
}
.tag-mod-thumb {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    align-items: start;
    text-decoration: none;
    color: inherit;
}
.tag-mod-thumb-img {
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.tag-mod-thumb-body { padding: 2px 0 0; }
.tag-mod-thumb-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 5px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-mod-thumb:hover .tag-mod-thumb-title { color: #4DB849; }
.tag-mod-thumb-meta {
    font-size: 0.7rem;
    color: #888;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Right column: Most Popular sidebar */
.tag-twocol-side {
    display: flex;
    flex-direction: column;
}
.tag-section-title-popular { border-bottom-color: #ef4444; } /* red accent for "Most Popular" */

.tag-popular-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tag-popular-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    align-items: start;
    text-decoration: none;
    color: inherit;
}
.tag-popular-img {
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.tag-popular-body { padding: 2px 0 0; }
.tag-popular-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 4px 0 5px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-popular-item:hover .tag-popular-title { color: #4DB849; }
.tag-popular-meta {
    font-size: 0.7rem;
    color: #888;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Tablet */
@media (max-width: 1100px) {
    .tag-twocol-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .tag-twocol-mods { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .tag-twocol-mods { grid-template-columns: 1fr; gap: 32px; }
    .tag-mod-featured-title { font-size: 1.05rem; }
    .tag-mod-thumb { grid-template-columns: 70px 1fr; gap: 10px; }
    .tag-mod-thumb-title { font-size: 0.84rem; }
    .tag-popular-item { grid-template-columns: 80px 1fr; }
}

/* ===========================================================
   TAGDIV-STYLE LAYOUT — Section 9: 4-up category band
   Full-bleed cards with image overlay text, no section header.
   =========================================================== */
.tag-band4-section {
    background: #ffffff;
    padding: 12px 0 24px;
}

.tag-band4-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px; /* tight spacing — magazine-strip feel, almost touching */
}

.tag-band4-card {
    position: relative;
    display: block;
    aspect-ratio: 3/4;
    text-decoration: none;
    color: white;
    overflow: hidden;
    border-radius: 2px;
}

.tag-band4-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    transition: filter 0.4s;
}
.tag-band4-card:not(.tag-placeholder):hover .tag-band4-image {
    filter: brightness(1.08);
}

.tag-band4-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.55) 30%,
        rgba(0,0,0,0.15) 55%,
        transparent 75%
    );
}

.tag-band4-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 24px;
    z-index: 2;
}

.tag-band4-overlay .tag-cat-pill {
    margin-bottom: 12px;
}

.tag-band4-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.22;
    margin: 0 0 10px;
    color: white;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    /* Clamp at 3 lines to keep cards consistent height */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tag-band4-byline {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.9);
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Tablet — 2x2 grid */
@media (max-width: 980px) {
    .tag-band4-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .tag-band4-card { aspect-ratio: 4/3; }
    .tag-band4-title { font-size: 1.05rem; }
}

/* Mobile — 1 per row */
@media (max-width: 560px) {
    .tag-band4-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .tag-band4-card { aspect-ratio: 16/10; }
    .tag-band4-title { font-size: 1rem; -webkit-line-clamp: 2; }
}

/* ===========================================================
   TAGDIV-STYLE LAYOUT — Section 10: 2-col horizontal-row module
   No sidebar — full-width split 50/50. Each column has a featured
   article + 4 horizontal image-left rows.
   =========================================================== */

.tag-section-hmod { padding: 24px 0 32px; }

.tag-hmod-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.tag-hmod-col { min-width: 0; }

/* Section accent colors for this section */
.tag-section-title-fitness { border-bottom-color: #a855f7; } /* purple */
.tag-section-title-gaming  { border-bottom-color: #3b82f6; } /* blue */

/* Featured article — horizontal: image on left (40%), text on right (60%) */
.tag-hmod-featured {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    margin-bottom: 22px;
}
.tag-hmod-featured-img {
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.tag-hmod-featured-body { padding: 2px 0 0; }
.tag-hmod-featured-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 6px 0 8px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-hmod-featured:hover .tag-hmod-featured-title { color: #4DB849; }
.tag-hmod-byline {
    font-size: 0.72rem;
    color: #777;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.tag-hmod-byline span:first-child { color: #1A1F2B; font-weight: 600; }
.tag-hmod-excerpt {
    font-size: 0.84rem;
    color: #555;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Horizontal rows below the featured */
.tag-hmod-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
}
.tag-hmod-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    align-items: start;
    text-decoration: none;
    color: inherit;
}
.tag-hmod-row-img {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.tag-hmod-row-body { padding: 2px 0 0; min-width: 0; }
.tag-hmod-row-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-hmod-row:hover .tag-hmod-row-title { color: #4DB849; }
.tag-hmod-row-byline {
    font-size: 0.7rem;
    color: #888;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.tag-cat-text-mini {
    font-weight: 700;
    color: #4DB849;
}
/* Inherit color from the category-specific .tag-cat-text-* class — works because
   the row markup uses both classes together */
.tag-hmod-row-excerpt {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tablet — single column, modules stack */
@media (max-width: 980px) {
    .tag-hmod-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* Mobile — featured stays horizontal but compresses */
@media (max-width: 560px) {
    .tag-hmod-featured {
        grid-template-columns: 42% 1fr;
        gap: 12px;
    }
    .tag-hmod-featured-title { font-size: 0.96rem; }
    .tag-hmod-excerpt { -webkit-line-clamp: 2; }
    .tag-hmod-row {
        grid-template-columns: 90px 1fr;
        gap: 10px;
    }
    .tag-hmod-row-title { font-size: 0.86rem; }
    .tag-hmod-row-excerpt { display: none; } /* excerpt removed on mobile to keep rows compact */
}

/* ===========================================================
   TAGDIV-STYLE LAYOUT — Section 11: Upcoming events band
   Dark/teal gradient band replacing the demo's video promo.
   Featured event on left + list of 3 more on the right.
   =========================================================== */

.tag-events-band {
    background:
        linear-gradient(135deg, rgba(0,169,157,0.10) 0%, rgba(26,31,43,0.95) 50%, rgba(26,31,43,1) 100%),
        radial-gradient(ellipse at top right, #00a99d 0%, transparent 60%);
    background-color: #1A1F2B;
    padding: 48px 0 56px;
    color: white;
    position: relative;
    overflow: hidden;
}
/* Subtle pattern overlay — circuit-board feel, low opacity */
.tag-events-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,169,157,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,169,157,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.tag-events-band > .container { position: relative; z-index: 1; }

/* Header above the grid */
.tag-events-head {
    text-align: center;
    margin-bottom: 36px;
}
.tag-events-eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    color: #00a99d;
    text-transform: uppercase;
    font-weight: 700;
    padding: 6px 14px;
    border: 1px solid #00a99d;
    border-radius: 2px;
    margin-bottom: 14px;
}
.tag-events-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 8px;
    color: white;
    line-height: 1.15;
}
.tag-events-sub {
    color: rgba(255,255,255,0.7);
    margin: 0;
    font-size: 1rem;
}

/* Grid — featured (60%) + list (40%) */
.tag-events-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    align-items: stretch;
}

/* Featured event — large card with date badge on the left */
.tag-events-featured {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: background 0.2s, border-color 0.2s;
}
.tag-events-featured:hover {
    background: rgba(0,169,157,0.12);
    border-color: rgba(0,169,157,0.4);
}

.tag-events-featured-date {
    background: #00a99d;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    text-align: center;
}
.tag-events-date-month {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-bottom: 4px;
    opacity: 0.95;
}
.tag-events-date-day {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
    font-feature-settings: "tnum";
}
.tag-events-date-year {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    opacity: 0.85;
    letter-spacing: 0.08em;
}

.tag-events-featured-body {
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.tag-events-badge {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    color: #C8F26C;
    text-transform: uppercase;
    font-weight: 700;
    padding: 3px 8px;
    background: rgba(200,242,108,0.12);
    border-radius: 2px;
    margin-bottom: 10px;
    align-self: flex-start;
}
.tag-events-featured-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.22;
    margin: 0 0 10px;
    color: white;
}
.tag-events-featured:hover .tag-events-featured-title { color: #C8F26C; }
.tag-events-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.75);
    font-size: 0.86rem;
    margin-bottom: 12px;
}
.tag-events-meta svg { color: #00a99d; flex-shrink: 0; }
.tag-events-featured-excerpt {
    color: rgba(255,255,255,0.7);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-events-cta {
    color: #00a99d;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tag-events-cta-arrow {
    transition: transform 0.2s;
}
.tag-events-featured:hover .tag-events-cta-arrow {
    transform: translateX(4px);
}

/* Right column: vertical list of 3 events */
.tag-events-list {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.tag-events-list-head {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #00a99d;
    font-weight: 700;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.tag-events-list-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}
.tag-events-list-item:hover { opacity: 0.85; }
.tag-events-list-item:hover .tag-events-list-title { color: #00a99d; }
.tag-events-list-item:last-of-type { border-bottom: 0; }

.tag-events-list-date {
    background: rgba(0,169,157,0.12);
    border: 1px solid rgba(0,169,157,0.3);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    color: #00a99d;
}
.tag-events-list-month {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 2px;
}
.tag-events-list-day {
    font-family: 'Roboto Slab', serif;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: white;
    font-feature-settings: "tnum";
}
.tag-events-list-body { min-width: 0; padding-top: 2px; }
.tag-events-list-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.3;
    color: white;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}
.tag-events-list-loc {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tag-events-list-all {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.12);
    color: #C8F26C;
    text-decoration: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
}
.tag-events-list-all:hover { color: white; }

/* Tablet */
@media (max-width: 980px) {
    .tag-events-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* Mobile */
@media (max-width: 560px) {
    .tag-events-band { padding: 32px 0 40px; }
    .tag-events-featured {
        grid-template-columns: 96px 1fr;
    }
    .tag-events-featured-date { padding: 16px 8px; }
    .tag-events-date-day { font-size: 2.4rem; }
    .tag-events-featured-body { padding: 16px 18px; }
    .tag-events-featured-title { font-size: 1.1rem; }
    .tag-events-list { padding: 16px 18px; }
}

/* ===========================================================
   TAGDIV-STYLE LAYOUT — Section 12: Latest Articles + Must Read
   2x3 grid of articles on the left, sidebar with Must Read +
   category counts on the right, pagination at the bottom of the grid.
   =========================================================== */

.tag-section-latest {
    padding: 32px 0 48px;
}

.tag-latest-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 36px;
    align-items: start;
}

.tag-section-title-latest { border-bottom-color: #4DB849; }
.tag-section-title-must   { border-bottom-color: #ef4444; }

/* Latest Articles 2x3 grid */
.tag-latest-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.tag-latest-card {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}
.tag-latest-card-img {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.tag-latest-card-body { padding: 0; min-width: 0; }
.tag-latest-card-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 5px 0 6px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-latest-card:hover .tag-latest-card-title { color: #4DB849; }
.tag-latest-card-byline {
    font-size: 0.7rem;
    color: #888;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.tag-latest-card-byline span:first-child { color: #1A1F2B; font-weight: 600; }
.tag-latest-card-excerpt {
    font-size: 0.82rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pagination */
.tag-pagination {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.tag-pagination-pages {
    display: flex;
    gap: 6px;
    align-items: center;
}
.tag-page-num, .tag-page-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    background: #fff;
    color: #1A1F2B;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: all 0.15s;
    font-family: 'IBM Plex Mono', monospace;
    font-feature-settings: "tnum";
}
.tag-page-num:hover, .tag-page-next:hover {
    background: #1A1F2B;
    color: #fff;
    border-color: #1A1F2B;
}
.tag-page-num.is-active {
    background: #4DB849;
    color: #fff;
    border-color: #4DB849;
    cursor: default;
}
.tag-page-num.is-active:hover {
    background: #4DB849;
    color: #fff;
    border-color: #4DB849;
}
.tag-page-ellipsis {
    color: #888;
    padding: 0 4px;
    font-weight: 600;
}
.tag-pagination-meta {
    font-size: 0.82rem;
    color: #888;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.04em;
}

/* Right column: Must Read sidebar */
.tag-latest-side {
    display: flex;
    flex-direction: column;
}

.tag-must-list {
    display: flex;
    flex-direction: column;
}
.tag-must-item {
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5;
    text-decoration: none;
    color: inherit;
    display: block;
}
.tag-must-item:last-of-type { border-bottom: 0; }
.tag-must-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 6px 0 6px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-must-item:hover .tag-must-title { color: #4DB849; }
.tag-must-byline {
    font-size: 0.7rem;
    color: #888;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tag-must-byline span:first-child { color: #1A1F2B; font-weight: 600; }

/* Category counts list */
.tag-cat-counts-head { margin-top: 32px; }
.tag-cat-counts {
    display: flex;
    flex-direction: column;
}
.tag-cat-count-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #e5e5e5;
    text-decoration: none;
    color: inherit;
    transition: padding-left 0.15s, color 0.15s;
}
.tag-cat-count-row:last-of-type { border-bottom: 0; }
.tag-cat-count-row:hover {
    padding-left: 6px;
    color: #4DB849;
}
.tag-cat-count-name {
    font-size: 0.88rem;
    color: #1A1F2B;
    font-weight: 500;
}
.tag-cat-count-row:hover .tag-cat-count-name { color: #4DB849; }
.tag-cat-count-num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.86rem;
    color: #888;
    font-weight: 600;
    font-feature-settings: "tnum";
}

/* Tablet */
@media (max-width: 1100px) {
    .tag-latest-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* Mobile */
@media (max-width: 760px) {
    .tag-latest-cards { grid-template-columns: 1fr; gap: 22px; }
    .tag-latest-card { grid-template-columns: 110px 1fr; gap: 12px; }
    .tag-latest-card-title { font-size: 0.94rem; }
    .tag-latest-card-excerpt { display: none; }
    .tag-pagination { flex-direction: column; align-items: flex-start; }
}

/* ===========================================================
   Newsletter Subscribe band — standalone, sits before footer
   =========================================================== */
.tag-subscribe-band {
    background:
        linear-gradient(135deg, rgba(200,242,108,0.08) 0%, rgba(26,31,43,1) 50%),
        radial-gradient(ellipse at top left, rgba(0,169,157,0.3) 0%, transparent 60%);
    background-color: #1A1F2B;
    padding: 56px 0;
    color: white;
    position: relative;
    overflow: hidden;
}
.tag-subscribe-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,169,157,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,169,157,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.tag-subscribe-band > .container { position: relative; z-index: 1; }

.tag-subscribe-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.tag-subscribe-eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    color: #C8F26C;
    text-transform: uppercase;
    font-weight: 700;
    padding: 6px 14px;
    border: 1px solid rgba(200,242,108,0.5);
    border-radius: 2px;
    margin-bottom: 18px;
}
.tag-subscribe-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    margin: 0 0 12px;
    color: white;
    line-height: 1.18;
}
.tag-subscribe-sub {
    color: rgba(255,255,255,0.75);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 28px;
}
.tag-subscribe-form {
    display: flex;
    gap: 8px;
    max-width: 520px;
    margin: 0 auto 14px;
}
.tag-subscribe-input {
    flex: 1;
    padding: 14px 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 3px;
    color: white;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.tag-subscribe-input::placeholder { color: rgba(255,255,255,0.5); }
.tag-subscribe-input:focus {
    border-color: #C8F26C;
    background: rgba(255,255,255,0.12);
}
.tag-subscribe-btn {
    background: #C8F26C;
    color: #1A1F2B;
    border: 0;
    padding: 14px 22px;
    border-radius: 3px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    white-space: nowrap;
}
.tag-subscribe-btn:hover {
    background: #d6ff7a;
    transform: translateY(-1px);
}
.tag-subscribe-foot {
    color: rgba(255,255,255,0.6);
    font-size: 0.82rem;
    margin: 0;
}
.tag-subscribe-foot strong { color: #C8F26C; }

@media (max-width: 560px) {
    .tag-subscribe-band { padding: 40px 0; }
    .tag-subscribe-form { flex-direction: column; }
    .tag-subscribe-btn { width: 100%; }
}

/* ===========================================================
   TAGDIV-STYLE LAYOUT — Section 5: 3-column hero
   (replaces the old hero-mosaic with the TagDiv demo's exact 3-col layout)
   =========================================================== */
.tag-hero3 {
    background: #ffffff;
    padding: 24px 0 28px;
}

.tag-hero3-grid {
    display: grid;
    grid-template-columns: 1fr 1.7fr 1.2fr;
    gap: 22px;
    align-items: stretch;
}

/* Exclusive badge — TagDiv signature green pill */
.tag-exclusive-badge {
    display: inline-block;
    background: #4DB849;
    color: white;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 1px;
    text-transform: uppercase;
    margin-left: 6px;
    vertical-align: middle;
}
.tag-exclusive-badge-small {
    font-size: 0.58rem;
    padding: 2px 6px;
}

/* === LEFT COLUMN — 2 cards stacked, image-top + body-below === */
.tag-hero3-left {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 22px;
    min-width: 0;
}
.tag-hero3-side-card {
    display: block;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.tag-hero3-side-img {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    transition: filter 0.3s;
}
.tag-hero3-side-card:not(.tag-placeholder):hover .tag-hero3-side-img {
    filter: brightness(1.08);
}
.tag-hero3-side-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 6px 0 8px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-hero3-side-card:hover .tag-hero3-side-title { color: #4DB849; }
.tag-hero3-side-excerpt {
    font-size: 0.82rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === CENTER COLUMN — 2 large cards with text overlay === */
.tag-hero3-center {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 22px;
    min-width: 0;
}
.tag-hero3-main-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: white;
    border-radius: 2px;
    overflow: hidden;
    min-height: 280px;
}
.tag-hero3-main-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    transition: filter 0.4s;
}
.tag-hero3-main-card:not(.tag-placeholder):hover .tag-hero3-main-image {
    filter: brightness(1.08);
}
.tag-hero3-main-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.55) 30%,
        rgba(0,0,0,0.15) 55%,
        transparent 75%
    );
}
.tag-hero3-main-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 26px;
    z-index: 2;
}
.tag-hero3-main-overlay .tag-cat-pill {
    margin-bottom: 12px;
}
.tag-hero3-main-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 10px;
    color: white;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-hero3-main-excerpt {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === RIGHT COLUMN — 5 thumb-list rows (image-left text-right) === */
.tag-hero3-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.tag-hero3-thumb {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;
    text-decoration: none;
    color: inherit;
}
.tag-hero3-thumb:first-of-type { padding-top: 0; }
.tag-hero3-thumb:last-of-type { border-bottom: 0; }
.tag-hero3-thumb-img {
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.tag-hero3-thumb-body {
    min-width: 0;
    padding: 2px 0 0;
}
.tag-hero3-thumb-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.tag-hero3-thumb-eyebrow-row .tag-cat-text {
    margin-bottom: 0;
}
.tag-hero3-thumb-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-hero3-thumb:hover .tag-hero3-thumb-title { color: #4DB849; }
.tag-hero3-thumb-byline {
    font-size: 0.7rem;
    color: #888;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tag-hero3-thumb-byline span:first-child { color: #1A1F2B; font-weight: 600; }

/* Tablet — left+center stack vertically, right column drops below */
@media (max-width: 1100px) {
    .tag-hero3-grid {
        grid-template-columns: 1fr 1.5fr;
    }
    .tag-hero3-right {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px 24px;
    }
    .tag-hero3-thumb { padding-top: 14px; }
    .tag-hero3-thumb:nth-of-type(1),
    .tag-hero3-thumb:nth-of-type(2) { padding-top: 14px; }
}

/* Mobile — single column */
@media (max-width: 700px) {
    .tag-hero3-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .tag-hero3-right { grid-template-columns: 1fr; }
    .tag-hero3-main-card { min-height: 240px; }
    .tag-hero3-main-title { font-size: 1.1rem; }
    .tag-hero3-thumb { grid-template-columns: 80px 1fr; }
}

/* ===========================================================
   APPENDED OVERRIDES — header transparent, ticker marquee,
   editor's picks grid, popup subscribe modal
   =========================================================== */

/* === Header: no background ===
   Override the white background. Keep border for visual separation. */
.tag-utility-bar {
    background: transparent;
    border-bottom: 1px solid rgba(229, 229, 229, 0.6);
}
.tag-site-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(229, 229, 229, 0.4);
}
.tag-site-header.is-stuck {
    /* When sticky, give it a solid background so content underneath doesn't show through */
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid #e5e5e5;
}

/* Menu text: dark on the transparent header (works on light bg).
   When stuck, slightly different shade. */
.tag-main-nav {
    background: transparent;
    border-top: 0;
}
.tag-main-nav .tag-nav-item,
.tag-main-nav .tag-nav-home {
    color: #1A1F2B;
}
.tag-main-nav .tag-nav-item:hover,
.tag-main-nav .tag-nav-home:hover {
    background: rgba(26, 31, 43, 0.06);
    color: #ef4444;
}
.tag-main-nav .tag-nav-search-btn {
    color: #1A1F2B;
}
.tag-main-nav .tag-nav-search-btn:hover {
    background: rgba(26, 31, 43, 0.06);
    color: #ef4444;
}

/* === Trending strip: marquee scroll ===
   Continuously scrolling horizontal marquee. Pauses on hover. */
.tag-trending-marquee {
    display: inline-flex;
    align-items: center;
    gap: 36px;
    white-space: nowrap;
    animation: tagTrendingScroll 45s linear infinite;
    will-change: transform;
}
.tag-trending-strip:hover .tag-trending-marquee { animation-play-state: paused; }
.tag-trending-marquee .tag-trending-sep {
    color: #d4d4d4;
    user-select: none;
}

@keyframes tagTrendingScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* === Section 6 sidebar: replaced contents (editor's picks grid) === */
.tag-editor-picks {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.tag-editor-picks-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #4DB849;
}
.tag-editor-picks-head h3 {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
    color: #1A1F2B;
}
.tag-editor-picks-head a {
    color: #5e6b75;
    text-decoration: none;
    font-size: 0.78rem;
}
.tag-editor-picks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.tag-editor-pick {
    text-decoration: none;
    color: inherit;
    display: block;
}
.tag-editor-pick-img {
    width: 100%;
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
    transition: filter 0.3s;
}
.tag-editor-pick:not(.tag-placeholder):hover .tag-editor-pick-img {
    filter: brightness(1.08);
}
.tag-editor-pick-cat {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4DB849;
    display: block;
    margin-bottom: 4px;
}
.tag-editor-pick-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-editor-pick:hover .tag-editor-pick-title { color: #ef4444; }

/* === Popup subscribe modal === */
.dce-subscribe-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.dce-subscribe-modal.is-open {
    display: flex;
    opacity: 1;
}
.dce-subscribe-modal-inner {
    background: #ffffff;
    max-width: 480px;
    width: 100%;
    border-radius: 4px;
    padding: 40px 36px 32px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    transform: scale(0.96);
    transition: transform 0.25s ease;
}
.dce-subscribe-modal.is-open .dce-subscribe-modal-inner { transform: scale(1); }
.dce-subscribe-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: 0;
    font-size: 1.4rem;
    cursor: pointer;
    color: #888;
    width: 36px;
    height: 36px;
    line-height: 1;
}
.dce-subscribe-modal-close:hover { color: #1A1F2B; }
.dce-subscribe-modal-eyebrow {
    display: inline-block;
    background: #4DB849;
    color: white;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.dce-subscribe-modal h2 {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: #1A1F2B;
    line-height: 1.2;
}
.dce-subscribe-modal p {
    color: #555;
    line-height: 1.5;
    margin: 0 0 22px;
    font-size: 0.94rem;
}
.dce-subscribe-modal form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.dce-subscribe-modal input[type="email"] {
    padding: 13px 16px;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
.dce-subscribe-modal input[type="email"]:focus {
    border-color: #1A1F2B;
}
.dce-subscribe-modal button[type="submit"] {
    background: #1A1F2B;
    color: white;
    border: 0;
    padding: 13px 22px;
    border-radius: 3px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.15s;
}
.dce-subscribe-modal button[type="submit"]:hover { background: #2c3344; }
.dce-subscribe-modal-foot {
    font-size: 0.78rem;
    color: #888;
    text-align: center;
    margin: 0;
}

@media (max-width: 480px) {
    .dce-subscribe-modal-inner { padding: 32px 24px 24px; }
    .dce-subscribe-modal h2 { font-size: 1.25rem; }
}

/* === Subscribe band: previously hidden in an older session; now restored. === */

/* ===========================================================
   ABOUT PAGE
   =========================================================== */
.about-content-wrap {
    padding: 32px 24px 80px;
}
.page-hero-sub {
    font-size: 1.1rem;
    color: #5e6b75;
    margin-top: 8px;
    line-height: 1.5;
}
.about-body {
    font-size: 1.04rem;
    line-height: 1.7;
    color: #2c3344;
}
.about-body p { margin: 0 0 18px; }
.about-body h2 {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.5rem;
    margin: 32px 0 12px;
    color: #1A1F2B;
}
.about-body h3 {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.18rem;
    margin: 26px 0 10px;
    color: #1A1F2B;
}
.about-body a {
    color: #ef4444;
    text-decoration: underline;
}
.about-pullout {
    background: #f7f7f7;
    border-left: 3px solid #4DB849;
    padding: 22px 26px;
    margin: 36px 0;
    border-radius: 0 2px 2px 0;
}
.about-pullout-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4DB849;
    margin-bottom: 10px;
}
.about-pullout-body {
    font-size: 1rem;
    line-height: 1.6;
    color: #1A1F2B;
}
.about-contact-card {
    background: #1A1F2B;
    color: white;
    padding: 28px 30px;
    border-radius: 4px;
    margin: 40px 0 0;
}
.about-contact-card h3 {
    margin: 0 0 12px;
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.2rem;
}
.about-contact-card div { line-height: 1.6; }
.about-contact-card a:not(.btn-pill) { color: #C8F26C; }

/* ===========================================================
   HEADER TIGHTEN-UP — tighter nav item padding so more fit,
   plus stronger visual cues for the scroll indicators
   =========================================================== */
.tag-nav-item {
    padding: 0 14px;
    font-size: 0.82rem;
    color: #1A1F2B;
}
.tag-nav-home {
    color: #1A1F2B;
}
.tag-nav-search-btn {
    color: #1A1F2B;
}
.tag-nav-caret {
    opacity: 0.4;
}
/* Right scroll chevron a little more prominent */
.tag-nav-scroll-btn {
    color: #1A1F2B;
}
.tag-nav-scroll-btn:hover {
    color: #ef4444;
}

@media (max-width: 880px) {
    .tag-nav-item { padding: 0 10px; font-size: 0.76rem; }
}

/* ===========================================================
   MOBILE HAMBURGER + Z-INDEX + SUBSCRIBE BUTTON REDESIGN
   =========================================================== */

/* Z-index for the sticky header so it stays above all page content */
.tag-site-header {
    z-index: 1000;
}
.tag-site-header.is-stuck {
    z-index: 1000;
}

/* ============ Subscribe button: square, clearer ============ */
.tag-cta-pill {
    border-radius: 2px !important;       /* square edges, override any previous pill rounding */
    padding: 10px 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 0.84rem;
    text-transform: none;                  /* keep natural case for "Get the newsletter" */
}
.tag-cta-primary {
    background: #ef4444;                   /* red — same color as Subscribe pills elsewhere on the site */
    color: #ffffff;
}
.tag-cta-primary:hover {
    background: #dc2626;
}

/* ============ Hamburger button (mobile only) ============ */
.tag-mobile-toggle {
    display: none;                         /* hidden on desktop */
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px;
    margin-right: 8px;
    flex-direction: column;
    gap: 4px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
}
.tag-mobile-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #1A1F2B;
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}

/* ============ Mobile panel (slides in from the left) ============ */
.tag-mobile-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 86vw;
    background: #ffffff;
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.tag-mobile-panel.open {
    transform: translateX(0);
}

/* Backdrop dims the rest of the page while panel is open */
.tag-mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.tag-mobile-panel.open ~ .tag-mobile-backdrop {
    opacity: 1;
    pointer-events: auto;
}
/* Prevent scroll-bleed when panel is open */
body.tag-mobile-open {
    overflow: hidden;
}

.tag-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #e5e5e5;
}
.tag-mobile-logo img {
    height: 36px;
    width: auto;
    display: block;
}
.tag-mobile-close {
    background: transparent;
    border: 0;
    font-size: 1.4rem;
    cursor: pointer;
    color: #1A1F2B;
    width: 40px;
    height: 40px;
    line-height: 1;
}
.tag-mobile-close:hover { color: #ef4444; }

/* Search in mobile panel */
.tag-mobile-search {
    display: flex;
    gap: 6px;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e5e5;
}
.tag-mobile-search input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    font-size: 0.92rem;
    outline: none;
    font-family: inherit;
}
.tag-mobile-search input:focus { border-color: #1A1F2B; }
.tag-mobile-search button {
    background: #1A1F2B;
    color: white;
    border: 0;
    padding: 0 14px;
    cursor: pointer;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tag-mobile-search button:hover { background: #2c3344; }

.tag-mobile-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}
.tag-mobile-nav a {
    display: block;
    padding: 14px 22px;
    color: #1A1F2B;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
    transition: padding-left 0.15s, color 0.15s, background 0.15s;
}
.tag-mobile-nav a:hover {
    background: #f7f7f7;
    color: #ef4444;
    padding-left: 28px;
}
.tag-mobile-divider {
    height: 8px;
    background: #f7f7f7;
    margin: 6px 0;
}
.tag-mobile-cta {
    display: block;
    text-align: center;
    background: #ef4444;
    color: #ffffff;
    text-decoration: none;
    padding: 16px 20px;
    margin: 16px 20px 24px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    transition: background 0.15s;
}
.tag-mobile-cta:hover { background: #dc2626; }

/* ============ Responsive switching ============ */
@media (max-width: 880px) {
    /* Show hamburger */
    .tag-mobile-toggle {
        display: inline-flex;
    }
    /* Hide the desktop nav band on mobile */
    .tag-main-nav {
        display: none;
    }
    /* Hide the utility bar's right-side links on mobile (already done in some rules,
       but be explicit so the header doesn't get crowded) */
    .tag-utility-bar { display: none; }

    /* Hide the desktop subscribe pill and theme toggle on mobile —
       they live in the mobile panel now */
    .tag-header-actions .tag-cta-pill,
    .tag-header-actions .theme-toggle {
        display: none;
    }

    /* Logo + hamburger become the left side; ad slot stays hidden as before */
    .tag-header-band {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
    }
    .tag-header-actions {
        gap: 6px;
    }
}

/* Very small phones: tighten the header */
@media (max-width: 480px) {
    .tag-header-band { height: 64px; }
    .tag-header-logo img { height: 32px; }
}

/* ===========================================================
   MOBILE RESPONSIVENESS SWEEP — tighten all sections at <=760px
   =========================================================== */

/* ===== GLOBAL — reduce container padding so content has breathing room ===== */
@media (max-width: 640px) {
    .container,
    .container-wide,
    .container-narrow {
        padding-left: 16px;
        padding-right: 16px;
    }
    /* Section headers — smaller on mobile, less margin */
    .tag-section { padding: 22px 0; }
    .tag-section-head { margin-bottom: 16px; }
    .tag-section-title { font-size: 0.84rem; padding: 6px 0 8px; }
    .tag-section-all { font-size: 0.76rem; }
}

/* ===== Section 5 (3-col hero) — already responsive, but tighten ===== */
@media (max-width: 700px) {
    .tag-hero3 { padding: 16px 0 20px; }
    .tag-hero3-grid { gap: 18px; }
    .tag-hero3-side-title { font-size: 0.94rem; }
    .tag-hero3-main-card { min-height: 220px; }
    .tag-hero3-thumb { padding: 10px 0; }
    .tag-hero3-thumb-title { font-size: 0.86rem; }
}

/* ===== Section 6 (Latest News + sidebar) ===== */
@media (max-width: 640px) {
    .tag-global-grid { gap: 24px; }
    .tag-global-featured-title { font-size: 1.1rem; }
    .tag-global-excerpt { -webkit-line-clamp: 2; font-size: 0.86rem; }
    .tag-editor-picks-grid { gap: 10px; }
    .tag-editor-pick-title { font-size: 0.76rem; -webkit-line-clamp: 2; }
}

/* ===== Section 7 (3-up image-overlay) ===== */
@media (max-width: 640px) {
    .tag-3up-card .tag-3up-title { font-size: 0.92rem; }
    .tag-3up-byline { font-size: 0.7rem; }
}

/* ===== Section 7.5 (Latest News 4 large + 4x2 grid) ===== */
@media (max-width: 600px) {
    .tag-latestnews-top { gap: 10px; margin-bottom: 16px; }
    .tag-ln-big-title { font-size: 0.96rem; -webkit-line-clamp: 2; }
    .tag-ln-big-overlay { padding: 12px 14px 14px; }
    .tag-ln-bottomtag { font-size: 0.58rem; padding: 3px 6px; }
    .tag-ln-breaking { font-size: 0.8rem; padding: 4px 10px; top: 10px; left: 10px; }
    .tag-latestnews-bottom { gap: 14px 10px; }
    .tag-ln-small-title { font-size: 0.78rem; }
}

/* ===== Section 8 (Cooling + Power + Most Popular) ===== */
@media (max-width: 760px) {
    .tag-twocol-grid { gap: 28px; }
    .tag-twocol-mods { grid-template-columns: 1fr; gap: 26px; }
    .tag-mod-featured-title { font-size: 1rem; }
    .tag-mod-excerpt { -webkit-line-clamp: 2; }
    .tag-popular-title { font-size: 0.88rem; }
}

/* ===== Section 9 (4-up category band) — overlay text more legible on phones ===== */
@media (max-width: 560px) {
    .tag-band4-section { padding: 8px 0 16px; }
    .tag-band4-grid { gap: 8px; }
    .tag-band4-card { aspect-ratio: 16/10; }
    .tag-band4-overlay { padding: 14px 16px; }
    .tag-band4-title { font-size: 0.94rem; -webkit-line-clamp: 2; }
    .tag-band4-byline { font-size: 0.68rem; }
}

/* ===== Section 10 (Operations + Careers 2-col horizontal-row) ===== */
@media (max-width: 560px) {
    .tag-hmod-grid { gap: 28px; }
    .tag-hmod-featured-title { font-size: 0.96rem; }
    .tag-hmod-row { grid-template-columns: 88px 1fr; }
    .tag-hmod-row-title { font-size: 0.84rem; }
}

/* ===== Section 11 (Events band) ===== */
@media (max-width: 560px) {
    .tag-events-band { padding: 28px 0 32px; }
    .tag-events-head { margin-bottom: 24px; }
    .tag-events-title { font-size: 1.4rem; }
    .tag-events-featured { grid-template-columns: 84px 1fr; }
    .tag-events-featured-date { padding: 12px 6px; }
    .tag-events-date-month { font-size: 0.72rem; }
    .tag-events-date-day { font-size: 2rem; }
    .tag-events-date-year { font-size: 0.66rem; }
    .tag-events-featured-body { padding: 14px 16px; }
    .tag-events-featured-title { font-size: 1.02rem; }
    .tag-events-featured-excerpt { -webkit-line-clamp: 2; }
    .tag-events-list { padding: 14px 16px; }
    .tag-events-list-item { padding: 12px 0; grid-template-columns: 48px 1fr; gap: 12px; }
    .tag-events-list-day { font-size: 1.15rem; }
    .tag-events-list-title { font-size: 0.88rem; }
}

/* ===== Section 12 (Latest Articles + Must Read + pagination) ===== */
@media (max-width: 760px) {
    .tag-latest-grid { gap: 28px; }
}
@media (max-width: 560px) {
    .tag-section-latest { padding: 22px 0 32px; }
    .tag-latest-cards { gap: 18px; }
    .tag-latest-card { grid-template-columns: 100px 1fr; gap: 10px; }
    .tag-latest-card-title { font-size: 0.9rem; -webkit-line-clamp: 2; }

    /* Pagination — wrap nicely on phones */
    .tag-pagination {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .tag-pagination-pages {
        flex-wrap: wrap;
    }
    .tag-page-num, .tag-page-next {
        min-width: 34px;
        height: 34px;
        font-size: 0.82rem;
    }
    .tag-pagination-meta { font-size: 0.76rem; }
    .tag-must-title { font-size: 0.88rem; -webkit-line-clamp: 2; }
    .tag-cat-count-row { padding: 10px 0; }
    .tag-cat-count-name { font-size: 0.82rem; }
}

/* ===== Trending strip — smaller pill on mobile, marquee continues ===== */
@media (max-width: 560px) {
    .tag-trending-strip { padding: 0; }
    .tag-trending-inner { height: 38px; gap: 10px; }
    .tag-trending-pill {
        font-size: 0.6rem;
        padding: 4px 8px;
        letter-spacing: 0.06em;
    }
    .tag-trending-item { font-size: 0.82rem; }
    .tag-trending-marquee { gap: 24px; }
}

/* ===== Subscribe popup — smaller on phones so it doesn't dominate ===== */
@media (max-width: 480px) {
    .dce-subscribe-modal { padding: 12px; }
    .dce-subscribe-modal-inner { padding: 28px 22px 22px; }
    .dce-subscribe-modal h2 { font-size: 1.15rem; }
    .dce-subscribe-modal p { font-size: 0.88rem; }
    .dce-subscribe-modal input[type="email"],
    .dce-subscribe-modal button[type="submit"] { padding: 12px 14px; font-size: 0.88rem; }
}

/* ===== Reduce horizontal overflow risk on common offenders ===== */
.tag-trending-marquee,
.tag-band4-grid,
.tag-latestnews-top,
.tag-3up-grid {
    /* Make sure no child can blow out their grid cells */
    min-width: 0;
}

/* Images shouldn't overflow */
img { max-width: 100%; height: auto; }

/* Tap targets on mobile — links and buttons should be at least 36px tall */
@media (max-width: 760px) {
    a, button {
        /* Don't force this on everything — only ensure interactive things have decent tap area */
    }
}

/* ===========================================================
   STICKY HEADER (definitive — placed last so it wins)
   White background on article body pages
   =========================================================== */

/* Make the header actually stick.
   Earlier rules set position: relative and overrode position: sticky;
   this rule (defined last in the file) wins. */
.tag-site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}
.tag-utility-bar {
    /* The utility bar above the header does NOT stick — it scrolls away normally.
       Only the main header itself sticks. */
    position: relative;
    z-index: 999;
}

/* When the JS adds .is-stuck (scrolled past 40px), give it a solid white
   background so it doesn't look transparent on top of arbitrary content */
.tag-site-header.is-stuck {
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Article page: white body background instead of cream */
body.dce-page-article {
    background: #ffffff;
}
/* Also make sure article content itself sits on white */
.dce-page-article .article-content,
.dce-page-article .article-page-wrap,
.dce-page-article .article-hero {
    background: #ffffff;
}

/* ===========================================================
   SECTION 10.5 — More from the industry
   3x2 grid of category mini-modules: eyebrow + featured + 2 list items
   =========================================================== */

.tag-section-more {
    padding: 24px 0 32px;
}
.tag-section-title-more {
    border-bottom-color: #1A1F2B;
}

.tag-more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 24px;
}

.tag-more-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Category eyebrow — clickable link to the category page */
.tag-more-cat {
    display: inline-block;
    align-self: flex-start;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid currentColor;
}
.tag-more-cat:hover { opacity: 0.75; }

/* Featured article — image + title stacked */
.tag-more-featured {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 14px;
}
.tag-more-featured-img {
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    transition: filter 0.3s;
}
.tag-more-featured:not(.tag-placeholder):hover .tag-more-featured-img {
    filter: brightness(1.08);
}
.tag-more-featured-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.28;
    margin: 0;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-more-featured:hover .tag-more-featured-title { color: #ef4444; }

/* Secondary articles list — text only */
.tag-more-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #e5e5e5;
}
.tag-more-list li {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.tag-more-list li:last-child { border-bottom: 0; }
.tag-more-list a {
    color: #1A1F2B;
    text-decoration: none;
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.35;
    display: block;
    transition: color 0.15s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-more-list a:hover { color: #ef4444; }

/* === Responsive === */
@media (max-width: 1000px) {
    .tag-more-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 24px;
    }
}

@media (max-width: 600px) {
    .tag-more-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .tag-more-featured-title { font-size: 0.96rem; }
    .tag-more-list a { font-size: 0.82rem; }
}

/* ===========================================================
   SEARCH ICON OVERLAP FIX — was transparent, items scrolled under
   =========================================================== */
.tag-nav-search-btn {
    background: #ffffff !important;     /* opaque so nav items can't show through */
    z-index: 5 !important;
    box-shadow: -10px 0 12px -8px rgba(255, 255, 255, 0.95);  /* soft fade-in from the left */
}
.tag-nav-search-btn:hover {
    background: #f7f7f7 !important;
}

/* ===========================================================
   CLASSIC 2-BAND HEADER REVERT
   - Header band: logo | inline search | account + dark pills
   - Nav band: visible horizontal scrollbar, no chevron buttons,
     no inline search icon (search lives in the header now)
   =========================================================== */

/* === Header band: 3-column grid === */
.tag-header-band {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center;
    gap: 28px;
    height: 96px;
}

/* === Inline search === */
.tag-header-search {
    display: flex;
    align-items: stretch;
    background: #f5f1e8;            /* cream-like, matches the screenshot */
    border-radius: 999px;
    padding: 5px 5px 5px 22px;
    max-width: 560px;
    width: 100%;
    justify-self: center;
}
.tag-header-search input[type="search"] {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 0.95rem;
    color: #1A1F2B;
    font-family: 'Manrope', sans-serif;
    min-width: 0;
    padding: 8px 12px 8px 0;
}
.tag-header-search input[type="search"]::placeholder {
    color: #888;
    font-weight: 400;
}
.tag-header-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.tag-header-search button[type="submit"] {
    background: #1A1F2B;
    color: #ffffff;
    border: 0;
    border-radius: 999px;
    padding: 0 28px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.tag-header-search button[type="submit"]:hover {
    background: #2c3344;
}

/* === Right cluster === */
.tag-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
}

/* Account chip (Paul / Sign in) — text + icon, no background */
.tag-header-account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1A1F2B;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: color 0.15s;
}
.tag-header-account:hover { color: #ef4444; }
.tag-header-account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #d4d4d4;
    color: #5e6b75;
}

/* Dark pills (Subscribe, Sign out) — graphite background, white text */
.tag-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1A1F2B;
    color: #ffffff;
    border: 0;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.tag-header-pill:hover {
    background: #2c3344;
}

/* Override the .tag-cta-pill class rules (legacy) from leaking here */
.tag-header-actions .tag-header-pill { border-radius: 999px !important; }

/* === Nav band: light bg, dark text, native horizontal scrollbar === */
.tag-main-nav {
    background: #ffffff;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
}
.tag-main-nav-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 56px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Show a slim scrollbar (matches screenshot) */
    scrollbar-width: thin;
    scrollbar-color: #888 #f0f0f0;
    padding-bottom: 8px;     /* room for the scrollbar at the bottom */
    margin-bottom: -8px;
}
.tag-main-nav-inner::-webkit-scrollbar {
    height: 6px;
    display: block !important;
}
.tag-main-nav-inner::-webkit-scrollbar-track {
    background: #f0f0f0;
}
.tag-main-nav-inner::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}
.tag-main-nav-inner::-webkit-scrollbar-thumb:hover {
    background: #666;
}
.tag-nav-item {
    color: #1A1F2B !important;
    padding: 0 16px !important;
    height: 48px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-size: 0.85rem !important;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.15s;
    background: transparent !important;
}
.tag-nav-item:hover {
    color: #ef4444 !important;
    background: transparent !important;
}
.tag-nav-caret {
    margin-left: 4px;
    opacity: 0.4;
    font-size: 0.7em;
}
.tag-nav-home {
    color: #1A1F2B !important;
    padding: 0 14px !important;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.tag-nav-home:hover { color: #ef4444 !important; }

/* HIDE the chevron scroll buttons (we use native scrollbar now) */
.tag-nav-scroll-btn { display: none !important; }

/* HIDE the search icon in the nav band (search is now in the header) */
.tag-nav-search-btn { display: none !important; }

/* === Override the previous transparent-header style ===
   Earlier rules made the header transparent + nav transparent.
   Make them solid white now (matches the classic screenshot). */
.tag-site-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5;
}

/* === Mobile: keep the hamburger + centered logo + mobile subscribe behavior === */
@media (max-width: 880px) {
    .tag-header-band {
        grid-template-columns: 1fr auto 1fr !important;
        gap: 8px !important;
        height: 64px !important;
    }
    /* Hide the inline search on mobile — too cramped */
    .tag-header-search { display: none !important; }
    /* Hide account chip and dark pills on mobile — they live in the hamburger panel */
    .tag-header-account,
    .tag-header-pill,
    .tag-header-actions form,
    .tag-header-actions .theme-toggle { display: none !important; }
    /* Nav band hides on mobile (hamburger replaces it) */
    .tag-main-nav { display: none !important; }
}

/* ===========================================================
   ARTICLE PAGE — NEWSWEEK-STYLE REDESIGN
   Full hero, byline strip, 2-col body+sidebar, share/subscribe/popular cards,
   tags, prev/next, author bio, comments, related grid
   =========================================================== */

/* Ensure article page is on white (body class .dce-page-article set in header) */
body.dce-page-article {
    background: #ffffff !important;
}

/* === HERO BAND === */
.nw-article-hero {
    position: relative;
    min-height: 440px;
    background-color: #2d4a3e;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    color: #ffffff;
}
.nw-article-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.55) 30%,
        rgba(0, 0, 0, 0.25) 55%,
        rgba(0, 0, 0, 0.15) 100%);
}
.nw-article-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px 50px;
    text-align: center;
}
.nw-article-hero-cat {
    display: inline-block;
    background: #ef4444;
    color: #ffffff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 6px 12px;
    border-radius: 2px;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 20px;
}
.nw-article-hero-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: clamp(1.6rem, 3.8vw, 3rem);
    font-weight: 700;
    line-height: 1.18;
    margin: 0 auto;
    color: #ffffff;
    max-width: 900px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.nw-article-hero-excerpt {
    color: rgba(255, 255, 255, 0.9);
    margin: 18px auto 0;
    max-width: 700px;
    font-size: 1.05rem;
    line-height: 1.55;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* === BYLINE STRIP === */
.nw-article-byline {
    background: #ffffff;
    padding: 22px 0;
    border-bottom: 1px solid #e5e5e5;
}
.nw-byline-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    color: #1A1F2B;
    font-size: 0.94rem;
}
.nw-byline-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.nw-byline-segment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nw-byline-label {
    color: #5e6b75;
    font-weight: 500;
}
.nw-byline-segment a {
    color: #1A1F2B;
    font-weight: 700;
    text-decoration: none;
}
.nw-byline-segment a:hover { color: #ef4444; }
.nw-byline-divider {
    width: 1px;
    height: 18px;
    background: #d4d4d4;
}

/* === MAIN: 2-col === */
.nw-article-main {
    background: #ffffff;
    padding: 40px 0 60px;
}
.nw-article-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: 50px;
    align-items: start;
}
.nw-article-body { min-width: 0; }

/* === Article content (body HTML) === */
.nw-article-content {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.08rem;
    line-height: 1.75;
    color: #1A1F2B;
}
.nw-article-content p {
    margin: 0 0 22px;
}
.nw-article-content h2 {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.7rem;
    font-weight: 700;
    margin: 38px 0 16px;
    color: #1A1F2B;
    line-height: 1.25;
}
.nw-article-content h3 {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 30px 0 12px;
    color: #1A1F2B;
    line-height: 1.3;
}
/* Italic-style red pull-quote subheadings (the demo's trademark look) */
.nw-article-content h2 em,
.nw-article-content h3 em {
    color: #ef4444;
    font-style: italic;
    display: block;
    text-align: center;
    font-weight: 700;
    margin: 36px 0 24px;
    font-size: 1.35rem;
    line-height: 1.4;
}
.nw-article-content a {
    color: #ef4444;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.nw-article-content blockquote {
    border-left: 4px solid #ef4444;
    margin: 24px 0;
    padding: 8px 0 8px 22px;
    font-style: italic;
    color: #3a4250;
    font-size: 1.12rem;
}
.nw-article-content img,
.nw-article-content figure img {
    max-width: 100%;
    height: auto;
    border-radius: 2px;
    margin: 24px 0;
    display: block;
}
.nw-article-content figcaption {
    font-size: 0.86rem;
    color: #888;
    text-align: center;
    margin-top: -16px;
    margin-bottom: 28px;
    font-style: italic;
}
.nw-article-content ul,
.nw-article-content ol {
    margin: 0 0 22px;
    padding-left: 28px;
}
.nw-article-content ul li,
.nw-article-content ol li {
    margin-bottom: 8px;
}
.nw-article-content code {
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 0.92em;
}
.nw-article-content pre {
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    padding: 16px;
    overflow-x: auto;
    margin: 24px 0;
    font-size: 0.92rem;
}
.nw-divider {
    border: 0;
    border-top: 1px solid #e5e5e5;
    margin: 36px 0;
}
.nw-sources li { margin-bottom: 6px; font-size: 0.95rem; }
.nw-source-date { color: #888; font-size: 0.85em; }

/* Series card */
.nw-series-card {
    background: #1A1F2B;
    color: #ffffff;
    padding: 22px 24px;
    border-radius: 4px;
    margin-bottom: 32px;
}
.nw-series-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C8F26C;
    margin-bottom: 6px;
}
.nw-series-name {
    margin: 0 0 14px;
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.2rem;
}
.nw-series-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.nw-series-pill {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.84rem;
}
.nw-series-pill.is-current {
    background: #C8F26C;
    color: #1A1F2B;
}

/* Corrections card */
.nw-corrections {
    background: rgba(255, 181, 71, 0.08);
    border: 1px solid rgba(255, 181, 71, 0.3);
    border-radius: 4px;
    padding: 18px 22px;
    margin-bottom: 28px;
}
.nw-corrections h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #B86A00;
    margin: 0 0 10px;
}
.nw-correction-item {
    padding: 10px 0;
    border-top: 1px solid rgba(255, 181, 71, 0.2);
    font-size: 0.92rem;
}
.nw-correction-item:first-of-type { border-top: 0; padding-top: 0; }
.nw-correction-author { color: #888; }

/* === TAGS ROW === */
.nw-article-tags {
    margin: 40px 0 24px;
    padding-top: 28px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.nw-tags-label {
    background: #1A1F2B;
    color: #ffffff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 6px 12px;
    border-radius: 2px;
    margin-right: 8px;
}
.nw-tag-pill {
    display: inline-block;
    background: #f0f0f0;
    color: #1A1F2B;
    font-size: 0.82rem;
    padding: 6px 12px;
    border-radius: 2px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.nw-tag-pill:hover {
    background: #1A1F2B;
    color: #ffffff;
}

/* === PREV / NEXT === */
.nw-prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 36px 0;
    padding: 24px 0;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}
.nw-prevnext-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.nw-prevnext-next { text-align: right; }
.nw-prevnext-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5e6b75;
    margin-bottom: 8px;
}
.nw-prevnext-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1A1F2B;
}
.nw-prevnext-card:hover .nw-prevnext-title { color: #ef4444; }

/* === AUTHOR BIO === */
.nw-author-block {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 20px;
    margin: 36px 0;
    padding: 28px 0;
    border-bottom: 1px solid #e5e5e5;
}
.nw-author-avatar-wrap { display: block; }
.nw-author-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    background: #d4d4d4;
}
.nw-author-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2d4a3e;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    font-family: 'Roboto Slab', serif;
}
.nw-author-name {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 4px;
}
.nw-author-name a {
    color: #1A1F2B;
    text-decoration: none;
}
.nw-author-name a:hover { color: #ef4444; }
.nw-author-verified {
    display: inline-block;
    background: #C8F26C;
    color: #1A1F2B;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}
.nw-author-title {
    color: #888;
    font-size: 0.86rem;
    margin-bottom: 12px;
}
.nw-author-bio {
    color: #3a4250;
    font-size: 0.94rem;
    line-height: 1.6;
    margin: 0 0 14px;
}
.nw-author-socials {
    display: flex;
    gap: 8px;
}
.nw-author-soc {
    width: 28px;
    height: 28px;
    background: #1A1F2B;
    color: #ffffff;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s;
}
.nw-author-soc:hover { background: #ef4444; }

/* === COMMENTS === */
.nw-comments-section {
    margin: 40px 0 0;
}
.nw-comments-heading {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 18px;
    color: #1A1F2B;
}
.nw-comments-existing { margin-top: 36px; }
.nw-comment-form {
    background: #f7f7f7;
    padding: 20px 22px;
    border-radius: 2px;
    margin-bottom: 24px;
}
.nw-comment-form textarea {
    width: 100%;
    min-height: 140px;
    border: 1px solid #d4d4d4;
    background: #ffffff;
    padding: 12px 14px;
    border-radius: 2px;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}
.nw-comment-form textarea:focus { border-color: #1A1F2B; }
.nw-comment-fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 12px 0;
}
.nw-comment-fields input {
    border: 1px solid #d4d4d4;
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 2px;
    font-family: inherit;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.15s;
}
.nw-comment-fields input:focus { border-color: #1A1F2B; }
.nw-comment-savecheck {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.86rem;
    color: #5e6b75;
    margin-bottom: 14px;
    line-height: 1.4;
}
.nw-comment-savecheck input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.nw-comment-submit {
    background: #ef4444;
    color: #ffffff;
    border: 0;
    padding: 12px 24px;
    border-radius: 2px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.15s;
}
.nw-comment-submit:hover { background: #dc2626; }

.nw-comment {
    padding: 18px 0;
    border-bottom: 1px solid #f0f0f0;
}
.nw-comment-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.nw-comment-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #2d4a3e;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}
.nw-comment-name { font-weight: 700; color: #1A1F2B; }
.nw-comment-time { font-size: 0.78rem; color: #888; }
.nw-comment-body {
    line-height: 1.6;
    color: #1A1F2B;
}

/* === SIDEBAR === */
.nw-article-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 110px;          /* below the sticky header */
    align-self: start;
    min-width: 0;
}
.nw-sidebar-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    padding: 22px 24px;
}
.nw-sidebar-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: #1A1F2B;
}
.nw-sidebar-title-center {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 18px;
    color: #1A1F2B;
}
.nw-sidebar-title-underlined {
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 2px solid #ef4444;
    margin-bottom: 20px;
}

/* SHARE icons */
.nw-share-icons {
    display: flex;
    justify-content: center;
    gap: 14px;
}
.nw-share-icon {
    width: 40px;
    height: 40px;
    background: #ef4444;
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}
.nw-share-icon:hover {
    background: #dc2626;
    transform: translateY(-2px);
}

/* SUBSCRIBE card */
.nw-sidebar-subscribe form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nw-sidebar-subscribe input[type="email"] {
    padding: 12px 14px;
    border: 1px solid #d4d4d4;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.94rem;
    border-radius: 2px;
    outline: none;
    transition: border-color 0.15s;
}
.nw-sidebar-subscribe input[type="email"]:focus { border-color: #1A1F2B; }
.nw-sidebar-subscribe button[type="submit"] {
    background: #ef4444;
    color: #ffffff;
    border: 0;
    padding: 14px 22px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.15s;
}
.nw-sidebar-subscribe button[type="submit"]:hover { background: #dc2626; }
.nw-arrow {
    display: inline-block;
    margin-left: 8px;
    transition: transform 0.15s;
}
.nw-sidebar-subscribe button:hover .nw-arrow {
    transform: translateX(2px);
}
.nw-subscribe-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    color: #5e6b75;
    line-height: 1.4;
    margin-top: 4px;
}
.nw-subscribe-check input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.nw-subscribe-check a {
    color: #ef4444;
    text-decoration: underline;
}

/* POPULAR list */
.nw-popular-list { display: flex; flex-direction: column; }
.nw-popular-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: inherit;
    align-items: flex-start;
}
.nw-popular-item:last-child { border-bottom: 0; }
.nw-popular-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    background: #2d4a3e;
    border-radius: 2px;
    flex-shrink: 0;
}
.nw-popular-thumb-placeholder {
    background: linear-gradient(135deg, #2d4a3e, #1A1F2B);
}
.nw-popular-body { min-width: 0; }
.nw-popular-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nw-popular-item:hover .nw-popular-title { color: #ef4444; }
.nw-popular-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nw-popular-cat {
    color: #ef4444;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.nw-popular-date {
    color: #888;
    font-size: 0.75rem;
    font-family: 'IBM Plex Mono', monospace;
}

/* === RELATED — "More like this" with watermark === */
.nw-related-section {
    background: #ffffff;
    padding: 50px 0 60px;
    border-top: 1px solid #e5e5e5;
}
.nw-related-head {
    position: relative;
    text-align: center;
    margin-bottom: 36px;
}
.nw-related-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 700;
    color: #f0f0f0;
    letter-spacing: 0.05em;
    z-index: 1;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}
.nw-related-title {
    position: relative;
    z-index: 2;
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: #1A1F2B;
    padding: 24px 0;
}
.nw-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.nw-related-card {
    text-decoration: none;
    color: inherit;
    display: block;
}
.nw-related-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    background: #2d4a3e;
    border-radius: 2px;
    margin-bottom: 12px;
    display: block;
    transition: filter 0.3s;
}
.nw-related-img-placeholder {
    background: linear-gradient(135deg, #2d4a3e, #1A1F2B);
}
.nw-related-card:hover .nw-related-img { filter: brightness(1.06); }
.nw-related-card-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nw-related-card:hover .nw-related-card-title { color: #ef4444; }
.nw-related-meta {
    color: #888;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
}

/* === SPONSORED BANNER (kept for sponsored articles) === */
.nw-sponsored-banner {
    background: rgba(255, 181, 71, 0.12);
    border-bottom: 1px solid rgba(255, 181, 71, 0.4);
    padding: 12px 0;
    font-size: 0.9rem;
}
.nw-sponsored-banner .container {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nw-sponsored-tag {
    background: #FFB547;
    color: #1A1F2B;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 8px;
    border-radius: 2px;
}

/* === RESPONSIVE === */
@media (max-width: 1000px) {
    .nw-article-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .nw-article-sidebar {
        position: static;
    }
    .nw-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .nw-article-hero { min-height: 320px; }
    .nw-article-hero-inner { padding: 24px 16px 30px; }
    .nw-article-hero-title { font-size: 1.5rem; }
    .nw-article-hero-excerpt { font-size: 0.94rem; }

    .nw-byline-inner { gap: 10px; font-size: 0.85rem; }
    .nw-byline-divider { display: none; }

    .nw-article-main { padding: 28px 0 40px; }
    .nw-article-content { font-size: 1rem; line-height: 1.7; }
    .nw-article-content h2 { font-size: 1.35rem; }
    .nw-article-content h3 { font-size: 1.15rem; }

    .nw-prevnext {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .nw-prevnext-next { text-align: left; }

    .nw-author-block {
        grid-template-columns: 64px 1fr;
        gap: 14px;
        padding: 22px 0;
    }
    .nw-author-avatar { width: 64px; height: 64px; }
    .nw-author-name { font-size: 1.15rem; }

    .nw-comment-fields {
        grid-template-columns: 1fr;
    }

    .nw-related-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .nw-related-section { padding: 32px 0 40px; }
}

/* ===========================================================
   MOBILE-ONLY SHARE STRIP — appears under byline on mobile only.
   On desktop, the sidebar Share card handles this so the strip stays hidden.
   =========================================================== */
.nw-mobile-share {
    display: none;             /* hidden on desktop */
}
.nw-mobile-share-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #e5e5e5;
}
.nw-mobile-share-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #5e6b75;
}
.nw-mobile-share-icons {
    display: flex;
    gap: 10px;
}
.nw-mobile-share .nw-share-icon {
    width: 36px;
    height: 36px;
}

@media (max-width: 1000px) {
    /* Show the mobile share strip on tablets + phones (where sidebar drops below) */
    .nw-mobile-share { display: block; }
}

/* ===========================================================
   HEADER BUTTON COLORS — red instead of black
   Applies to: Search submit button, Subscribe pill, Sign out pill
   =========================================================== */
.tag-header-search button[type="submit"] {
    background: #ef4444 !important;
}
.tag-header-search button[type="submit"]:hover {
    background: #dc2626 !important;
}

.tag-header-pill {
    background: #ef4444 !important;
}
.tag-header-pill:hover {
    background: #dc2626 !important;
}

/* ===========================================================
   SECTION 6 HEADER ALIGNMENT
   - LATEST STORIES header sits inside the left column so its "All" link
     aligns with the left column's right edge
   - EDITOR'S PICKS header now matches the same vertical metrics so both
     titles sit at the same baseline
   =========================================================== */

/* Match Editor's Picks head padding/border to .tag-section-head visual height */
.tag-editor-picks-head {
    padding: 8px 0 10px !important;
    margin-bottom: 22px !important;
    border-bottom: 2px solid #4DB849;
}
.tag-editor-picks-head h3 {
    padding: 0 !important;
    line-height: 1.4;
}
.tag-editor-picks-head a {
    line-height: 1.4;
}

/* Ensure both column headers sit at the same top — grid cells already align,
   but explicit alignment helps if either has different margins */
.tag-global-left > .tag-section-head:first-child,
.tag-global-right > .tag-editor-picks .tag-editor-picks-head:first-child {
    margin-top: 0;
}

/* ===========================================================
   CATEGORIES PAGE — magazine-grade redesign
   - Editorial hero with stats strip
   - Top 3 featured categories: large image cards with overlay
   - Remaining categories: dense cards with color stripe + 3 thumb previews
   - Alphabetical quick-jump index at the bottom
   =========================================================== */

/* === HERO === */
.nw-cats-hero {
    background: #ffffff;
    padding: 60px 0 50px;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
}
.nw-cats-eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #ef4444;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.nw-cats-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 auto 18px;
    color: #1A1F2B;
    max-width: 760px;
}
.nw-cats-intro {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #5e6b75;
    max-width: 620px;
    margin: 0 auto;
}

/* === STATS STRIP === */
.nw-cats-stats {
    display: inline-flex;
    align-items: center;
    gap: 32px;
    margin-top: 36px;
    padding: 22px 36px;
    background: #f7f7f7;
    border-radius: 4px;
}
.nw-cats-stat-num {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1A1F2B;
    line-height: 1;
}
.nw-cats-stat-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #5e6b75;
    text-transform: uppercase;
    margin-top: 6px;
}
.nw-cats-stat-divider {
    width: 1px;
    height: 36px;
    background: #d4d4d4;
}

/* === FEATURED 3 — large image cards === */
.nw-cats-featured-section {
    background: #ffffff;
    padding: 56px 0 24px;
}
.nw-cats-featured-head {
    margin-bottom: 28px;
    text-align: center;
}
.nw-cats-featured-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1A1F2B;
}
.nw-cats-featured-sub {
    color: #5e6b75;
    font-size: 0.95rem;
}

.nw-cats-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.nw-cats-featured-card {
    --cat-accent: #ef4444;
    position: relative;
    display: block;
    text-decoration: none;
    color: #ffffff;
    min-height: 340px;
    border-radius: 4px;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s ease;
}
.nw-cats-featured-card:hover {
    transform: translateY(-4px);
}
.nw-cats-featured-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    transition: filter 0.35s ease, transform 0.5s ease;
}
.nw-cats-featured-card:hover .nw-cats-featured-image {
    filter: brightness(1.08);
    transform: scale(1.04);
}
.nw-cats-featured-image-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.3;
    color: #ffffff;
}
.nw-cats-featured-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.6) 35%,
        rgba(0, 0, 0, 0.15) 70%,
        transparent 100%);
}
.nw-cats-featured-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 26px 26px;
    z-index: 2;
}
.nw-cats-featured-count {
    display: inline-block;
    background: var(--cat-accent);
    color: #ffffff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 5px 10px;
    border-radius: 2px;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.nw-cats-featured-name {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 10px;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.nw-cats-featured-desc {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 14px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nw-cats-featured-cta {
    font-family: 'Manrope', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffffff;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--cat-accent);
}
.nw-cats-arrow {
    display: inline-block;
    transition: transform 0.2s;
}
.nw-cats-featured-card:hover .nw-cats-arrow {
    transform: translateX(4px);
}

/* === REST — dense grid === */
.nw-cats-rest-section {
    background: #ffffff;
    padding: 36px 0 56px;
}
.nw-cats-rest-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}
.nw-cats-rest-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    color: #1A1F2B;
    flex-shrink: 0;
}
.nw-cats-rest-line {
    flex: 1;
    height: 1px;
    background: #e5e5e5;
}

.nw-cats-rest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.nw-cats-card {
    --cat-accent: #5e6b75;
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
}
.nw-cats-card:hover {
    transform: translateY(-3px);
    border-color: var(--cat-accent);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.nw-cats-card-stripe {
    height: 4px;
    background: var(--cat-accent);
}
.nw-cats-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px 8px;
}
.nw-cats-card-name {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    flex: 1;
}
.nw-cats-card-name a {
    color: #1A1F2B;
    text-decoration: none;
    transition: color 0.15s;
}
.nw-cats-card-name a:hover { color: var(--cat-accent); }

.nw-cats-card-count {
    background: #f0f0f0;
    color: #1A1F2B;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.nw-cats-card-desc {
    color: #5e6b75;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
    padding: 0 22px 16px;
}

.nw-cats-card-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0 22px;
    margin-bottom: 16px;
}
.nw-cats-card-thumb {
    aspect-ratio: 4/3;
    background: #d4d4d4;
    border-radius: 2px;
    overflow: hidden;
    display: block;
    transition: filter 0.2s;
}
.nw-cats-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nw-cats-card-thumb:hover img {
    filter: brightness(1.1);
}
.nw-cats-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2d4a3e, #1A1F2B);
}
.nw-cats-card-thumb-empty {
    background: #f7f7f7;
}

.nw-cats-card-empty {
    color: #888;
    font-style: italic;
    font-size: 0.88rem;
    padding: 0 22px 16px;
}

.nw-cats-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-top: 1px solid #f0f0f0;
    color: var(--cat-accent);
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-top: auto;
    transition: background 0.15s;
}
.nw-cats-card-link:hover {
    background: rgba(0, 0, 0, 0.02);
}
.nw-cats-card:hover .nw-cats-card-link .nw-cats-arrow {
    transform: translateX(4px);
}

/* === ALPHABETICAL INDEX === */
.nw-cats-index {
    background: #f7f7f7;
    padding: 48px 0 56px;
    border-top: 1px solid #e5e5e5;
}
.nw-cats-index-head {
    text-align: center;
    margin-bottom: 28px;
}
.nw-cats-index-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #1A1F2B;
}
.nw-cats-index-sub {
    color: #5e6b75;
    font-size: 0.9rem;
}
.nw-cats-index-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
}
.nw-cats-index-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    text-decoration: none;
    color: #1A1F2B;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    transition: background 0.15s, color 0.15s;
}
.nw-cats-index-link:hover {
    background: #1A1F2B;
    color: #ffffff;
}
.nw-cats-index-link:hover .nw-cats-index-count {
    background: #ef4444;
    color: #ffffff;
}
.nw-cats-index-name {
    font-weight: 600;
    font-size: 0.94rem;
}
.nw-cats-index-count {
    background: #f0f0f0;
    color: #5e6b75;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 2px;
    transition: background 0.15s, color 0.15s;
}
/* Remove dividers from the last row/col */
.nw-cats-index-link:nth-child(3n) { border-right: 0; }

/* === RESPONSIVE === */
@media (max-width: 980px) {
    .nw-cats-featured-grid,
    .nw-cats-rest-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .nw-cats-index-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .nw-cats-index-link:nth-child(3n) { border-right: 1px solid #f0f0f0; }
    .nw-cats-index-link:nth-child(2n) { border-right: 0; }
}

@media (max-width: 640px) {
    .nw-cats-hero { padding: 40px 0 36px; }
    .nw-cats-title { font-size: 2rem; }
    .nw-cats-intro { font-size: 0.98rem; }
    .nw-cats-stats {
        gap: 16px;
        padding: 16px 18px;
        margin-top: 24px;
    }
    .nw-cats-stat-num { font-size: 1.4rem; }
    .nw-cats-stat-label { font-size: 0.62rem; }

    .nw-cats-featured-section { padding: 36px 0 16px; }
    .nw-cats-featured-grid,
    .nw-cats-rest-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .nw-cats-featured-card { min-height: 280px; }
    .nw-cats-featured-overlay { padding: 22px 20px; }
    .nw-cats-featured-name { font-size: 1.3rem; }

    .nw-cats-index-list {
        grid-template-columns: 1fr;
    }
    .nw-cats-index-link {
        border-right: 0 !important;
    }
}

/* ===========================================================
   CATEGORY SHOW PAGE — Soledad-style with sticky sidebar
   - Top header band with breadcrumb + category title
   - Editor's picks horizontal carousel strip
   - 2-col grid: articles (left) + sticky sidebar (right)
   - Article rows: 3 large + 3 medium + remaining 2-col list + pagination
   - Sidebar widgets: ad, Most Popular, Trending, Don't Miss, Subscribe
   =========================================================== */

/* === HEADER BAND === */
.nw-cat-header {
    --cat-accent: #ef4444;
    background: #f7f7f7;
    padding: 24px 0 32px;
    border-bottom: 1px solid #e5e5e5;
}
.nw-cat-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 18px;
}
.nw-cat-crumb a {
    color: #5e6b75;
    text-decoration: none;
    transition: color 0.15s;
}
.nw-cat-crumb a:hover { color: var(--cat-accent); }
.nw-cat-crumb-sep { opacity: 0.5; }
.nw-cat-header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.nw-cat-header-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    font-weight: 700;
    margin: 0;
    color: #1A1F2B;
    line-height: 1.1;
}
.nw-cat-header-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.6em;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--cat-accent);
    margin-right: 10px;
    vertical-align: 0.25em;
}
.nw-cat-header-desc {
    color: #5e6b75;
    font-size: 0.96rem;
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
}

/* === EDITOR'S PICKS STRIP === */
.nw-cat-picks {
    background: #ffffff;
    padding: 24px 0 16px;
    border-bottom: 1px solid #e5e5e5;
}
.nw-cat-picks-inner {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: center;
}
.nw-cat-picks-label-eye {
    display: block;
    background: var(--cat-accent, #ef4444);
    color: #ffffff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 8px 12px;
    border-radius: 2px;
    text-align: center;
    margin-bottom: 6px;
}
.nw-cat-picks-label-sub {
    display: block;
    text-align: center;
    font-size: 0.78rem;
    color: #888;
}
.nw-cat-picks-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.nw-cat-pick {
    position: relative;
    display: block;
    text-decoration: none;
    color: #ffffff;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: 2px;
}
.nw-cat-pick-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}
.nw-cat-pick-img-placeholder {
    background: linear-gradient(135deg, #2d4a3e, #1A1F2B);
}
.nw-cat-pick:hover .nw-cat-pick-img {
    transform: scale(1.06);
}
.nw-cat-pick::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.35) 45%,
        transparent 100%);
}
.nw-cat-pick-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 10px;
    z-index: 2;
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === MAIN 2-COL GRID === */
.nw-cat-main {
    background: #ffffff;
    padding: 36px 0 60px;
}
.nw-cat-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}
.nw-cat-articles { min-width: 0; }

/* === ROW 1: 3 LARGE CARDS === */
.nw-cat-row-large {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.nw-cat-card-large {
    position: relative;
    display: block;
    text-decoration: none;
    color: #ffffff;
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 2px;
}
.nw-cat-card-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    transition: transform 0.4s, filter 0.4s;
}
.nw-cat-card-large:hover .nw-cat-card-img {
    transform: scale(1.05);
    filter: brightness(1.08);
}
.nw-cat-card-img-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    opacity: 0.3;
    color: #ffffff;
}
.nw-cat-card-img-fallback-small {
    font-size: 1.5rem;
}
.nw-cat-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.5) 35%,
        transparent 70%);
}
.nw-cat-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    z-index: 2;
}
.nw-cat-card-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 6px;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nw-cat-card-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.05em;
}

/* === ROW 2: 3 MEDIUM CARDS === */
.nw-cat-row-medium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}
.nw-cat-card-medium {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.nw-cat-medium-img {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
    transition: filter 0.3s;
}
.nw-cat-card-medium:hover .nw-cat-medium-img {
    filter: brightness(1.06);
}
.nw-cat-medium-body { padding: 0 2px; }
.nw-cat-medium-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nw-cat-card-medium:hover .nw-cat-medium-title { color: var(--cat-accent, #ef4444); }
.nw-cat-medium-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: #888;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.nw-cat-medium-author { color: #5e6b75; font-weight: 600; }
.nw-cat-medium-dot { opacity: 0.5; }

/* === REMAINING — 2-col list with image-left + text-right === */
.nw-cat-row-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.nw-cat-card-list {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.nw-cat-list-img {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    transition: filter 0.3s;
}
.nw-cat-card-list:hover .nw-cat-list-img { filter: brightness(1.06); }
.nw-cat-list-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.28;
    margin: 0 0 6px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nw-cat-card-list:hover .nw-cat-list-title { color: var(--cat-accent, #ef4444); }
.nw-cat-list-excerpt {
    font-size: 0.82rem;
    color: #5e6b75;
    line-height: 1.5;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nw-cat-list-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    color: #888;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* === EMPTY STATE === */
.nw-cat-empty {
    padding: 60px 30px;
    text-align: center;
    background: #f7f7f7;
    border-radius: 4px;
}
.nw-cat-empty p {
    font-size: 1.05rem;
    color: #5e6b75;
    margin: 0 0 16px;
}
.nw-cat-empty-link {
    color: var(--cat-accent, #ef4444);
    text-decoration: none;
    font-weight: 700;
}
.nw-cat-empty-link:hover { text-decoration: underline; }

/* === PAGINATION === */
.nw-cat-pagination {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.nw-cat-page-prev,
.nw-cat-page-next {
    color: #1A1F2B;
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 8px 14px;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    transition: all 0.15s;
}
.nw-cat-page-prev:hover:not(.nw-cat-page-disabled),
.nw-cat-page-next:hover:not(.nw-cat-page-disabled) {
    background: #1A1F2B;
    color: #ffffff;
    border-color: #1A1F2B;
}
.nw-cat-page-disabled {
    color: #ccc;
    cursor: default;
    border-color: #f0f0f0;
}
.nw-cat-page-numbers {
    display: flex;
    gap: 4px;
}
.nw-cat-page-num {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #1A1F2B;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.86rem;
    font-weight: 600;
    border-radius: 2px;
    transition: all 0.15s;
}
.nw-cat-page-num:hover {
    background: #f0f0f0;
}
.nw-cat-page-current {
    background: var(--cat-accent, #ef4444);
    color: #ffffff !important;
}

/* === STICKY SIDEBAR === */
.nw-cat-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 110px;  /* below sticky site header */
    align-self: start;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #d4d4d4 transparent;
    padding-right: 4px;
}
.nw-cat-sidebar::-webkit-scrollbar {
    width: 6px;
}
.nw-cat-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.nw-cat-sidebar::-webkit-scrollbar-thumb {
    background: #d4d4d4;
    border-radius: 3px;
}
.nw-cat-sidebar::-webkit-scrollbar-thumb:hover {
    background: #888;
}

.nw-cat-side-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    padding: 18px 20px;
}
.nw-cat-side-head {
    margin: -18px -20px 14px;
    padding: 12px 20px;
    border-bottom: 2px solid #1A1F2B;
    display: flex;
    align-items: center;
    gap: 10px;
}
.nw-cat-side-head h4 {
    margin: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #1A1F2B;
}
.nw-cat-side-sub {
    margin-left: auto;
    font-size: 0.72rem;
    color: #888;
}

.nw-cat-side-ad {
    padding: 0;
    border: 0;
    background: transparent;
}
.nw-cat-side-ad img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

/* MOST POPULAR */
.nw-cat-pop-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: pop;
}
.nw-cat-pop-item {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}
.nw-cat-pop-item:last-child { border-bottom: 0; }
.nw-cat-pop-thumb {
    aspect-ratio: 1;
    background-color: #2d4a3e;
    border-radius: 2px;
    overflow: hidden;
    display: block;
}
.nw-cat-pop-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nw-cat-pop-thumb-placeholder {
    background: linear-gradient(135deg, #2d4a3e, #1A1F2B);
}
.nw-cat-pop-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1A1F2B;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nw-cat-pop-title:hover { color: var(--cat-accent, #ef4444); }
.nw-cat-pop-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    color: #888;
    margin-top: 4px;
}

/* TRENDING */
.nw-cat-trend-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nw-cat-trend-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: flex-start;
}
.nw-cat-trend-item:last-child { border-bottom: 0; }
.nw-cat-trend-num {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #d4d4d4;
    line-height: 1;
}
.nw-cat-trend-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1A1F2B;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nw-cat-trend-title:hover { color: var(--cat-accent, #ef4444); }

/* DON'T MISS */
.nw-cat-dontmiss {
    display: block;
    text-decoration: none;
    margin-bottom: 12px;
}
.nw-cat-dontmiss:last-child { margin-bottom: 0; }
.nw-cat-dontmiss-img {
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    transition: filter 0.3s;
}
.nw-cat-dontmiss:hover .nw-cat-dontmiss-img { filter: brightness(1.06); }
.nw-cat-dontmiss-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 12px;
    z-index: 2;
}
.nw-cat-dontmiss-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* SUBSCRIBE (sidebar form) */
.nw-cat-side-sub-form .nw-cat-sub-blurb {
    color: #5e6b75;
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 0 0 14px;
}
.nw-cat-side-sub-form form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nw-cat-side-sub-form input {
    padding: 11px 14px;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
}
.nw-cat-side-sub-form input:focus {
    border-color: #1A1F2B;
}
.nw-cat-side-sub-form button {
    background: #1A1F2B;
    color: #ffffff;
    border: 0;
    padding: 12px 20px;
    border-radius: 2px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s;
}
.nw-cat-side-sub-form button:hover {
    background: var(--cat-accent, #ef4444);
}

/* === RESPONSIVE === */
@media (max-width: 1000px) {
    .nw-cat-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .nw-cat-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
    .nw-cat-picks-inner {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .nw-cat-picks-label-eye { text-align: left; max-width: 200px; }
    .nw-cat-picks-label-sub { text-align: left; }
    .nw-cat-picks-track {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .nw-cat-header { padding: 18px 0 22px; }
    .nw-cat-header-title { font-size: 1.6rem; }
    .nw-cat-row-large {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .nw-cat-card-large { aspect-ratio: 16/10; }
    .nw-cat-row-medium {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .nw-cat-row-list {
        grid-template-columns: 1fr;
    }
    .nw-cat-card-list {
        grid-template-columns: 110px 1fr;
        gap: 10px;
    }
    .nw-cat-picks-track {
        grid-template-columns: repeat(2, 1fr);
    }
    .nw-cat-pagination {
        flex-direction: column;
        align-items: stretch;
    }
    .nw-cat-page-numbers {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .nw-cat-row-medium {
        grid-template-columns: 1fr;
    }
    .nw-cat-card-list {
        grid-template-columns: 90px 1fr;
    }
    .nw-cat-list-title { font-size: 0.86rem; }
}

/* ===========================================================
   ARTICLE BODY MAX-WIDTH FOR READABILITY
   The container is now ~80vw (up to 1600px) which is great for grids
   and homepages, but article paragraphs need a narrower measure
   for comfortable reading (50-75 char per line).
   This caps the article body column without affecting the grid layout.
   =========================================================== */

/* Article body prose: cap at 760px even when the column is wider */
.nw-article-content {
    max-width: 760px;
}

/* Lead paragraph also constrained */
.nw-article-lead {
    max-width: 760px;
}

/* Hero stays wide (full-bleed image is fine — that's just an image) */
.nw-article-hero,
.nw-article-hero-inner {
    /* unchanged — hero spans the natural container width */
}

/* Byline strip stays wide (just author + date) */
/* Tags, prev/next, author bio, comments — cap to match content prose */
.nw-article-tags,
.nw-prevnext,
.nw-author-block,
.nw-comments-section,
.nw-corrections,
.nw-series-card {
    max-width: 760px;
}

/* Related grid stays wide — these are visual cards, more is better */

/* Mobile-share strip — let it span its container naturally (no cap) */
/* === Page hero pages (about, editorial-standards) — keep article-like narrow body === */
.article-content {
    max-width: 760px;
}

/* ===========================================================
   SQUARE EDGES — Subscribe + Sign out + Search buttons
   Overrides earlier pill border-radius rules
   =========================================================== */
.tag-header-pill,
.tag-header-actions .tag-header-pill,
.tag-header-search button[type="submit"] {
    border-radius: 2px !important;
}

/* ===========================================================
   CONTACT PAGE
   - Hero with title + tagline
   - 2-col grid: form (left) + contact info card (right)
   - Success banner if just submitted
   =========================================================== */

/* === HERO === */
.nw-contact-hero {
    background: #ffffff;
    padding: 60px 0 50px;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
}
.nw-contact-eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #ef4444;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.nw-contact-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 auto 18px;
    color: #1A1F2B;
    max-width: 720px;
}
.nw-contact-tagline {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #5e6b75;
    max-width: 600px;
    margin: 0 auto;
}

/* === SUCCESS BANNER === */
.nw-contact-success {
    background: #ffffff;
    padding: 24px 0 0;
}
.nw-contact-success-card {
    background: rgba(77, 184, 73, 0.12);
    border: 1px solid rgba(77, 184, 73, 0.4);
    border-radius: 4px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.nw-contact-success-icon {
    background: #4DB849;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    flex-shrink: 0;
}
.nw-contact-success-card h3 {
    margin: 0 0 4px;
    color: #1A1F2B;
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.1rem;
}
.nw-contact-success-card p {
    margin: 0;
    color: #5e6b75;
    font-size: 0.94rem;
}

/* === MAIN GRID === */
.nw-contact-main {
    background: #ffffff;
    padding: 36px 0 80px;
}
.nw-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

/* === CARDS === */
.nw-contact-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 28px 30px;
}
.nw-contact-card + .nw-contact-card { margin-top: 18px; }
.nw-contact-card-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1A1F2B;
}
.nw-contact-card-sub {
    color: #5e6b75;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 22px;
}

/* === ERROR === */
.nw-contact-error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #c1272d;
    padding: 12px 16px;
    border-radius: 2px;
    margin-bottom: 18px;
    font-size: 0.92rem;
}

/* === FORM === */
.nw-contact-form { margin: 0; }
.nw-contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.nw-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.nw-contact-field { margin-bottom: 14px; }
.nw-contact-field label,
.nw-contact-row .nw-contact-field label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1A1F2B;
    margin-bottom: 6px;
}
.nw-contact-req { color: #ef4444; }
.nw-contact-field input,
.nw-contact-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    font-family: inherit;
    font-size: 0.96rem;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #ffffff;
    color: #1A1F2B;
}
.nw-contact-field input:focus,
.nw-contact-field textarea:focus {
    border-color: #1A1F2B;
    box-shadow: 0 0 0 3px rgba(26, 31, 43, 0.06);
}
.nw-contact-field textarea {
    resize: vertical;
    min-height: 140px;
}
.nw-contact-submit-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.nw-contact-submit {
    background: #ef4444;
    color: #ffffff;
    border: 0;
    padding: 13px 28px;
    border-radius: 2px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s;
}
.nw-contact-submit:hover { background: #dc2626; }
.nw-contact-privacy {
    font-size: 0.78rem;
    color: #888;
}

/* === INFO CARD (right column) === */
.nw-contact-info-card {
    background: #1A1F2B;
    color: #ffffff;
    border: 0;
}
.nw-contact-info-card .nw-contact-card-title {
    color: #ffffff;
}
.nw-contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nw-contact-info-item:last-child { border-bottom: 0; }
.nw-contact-info-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #C8F26C;
    flex-shrink: 0;
}
.nw-contact-info-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C8F26C;
    margin-bottom: 4px;
}
.nw-contact-info-value {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.96rem;
    line-height: 1.45;
    word-break: break-word;
}
.nw-contact-info-value:hover { color: #C8F26C; text-decoration: underline; }
.nw-contact-info-empty {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
}
.nw-contact-info-empty strong { color: #ffffff; }

/* === SOCIAL CARD === */
.nw-contact-social-card {
    background: #f7f7f7;
}
.nw-contact-social-title {
    margin: 0 0 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5e6b75;
}
.nw-contact-socials {
    display: flex;
    gap: 8px;
}
.nw-contact-socials a {
    width: 38px;
    height: 38px;
    background: #1A1F2B;
    color: #ffffff;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s;
}
.nw-contact-socials a:hover { background: #ef4444; }

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .nw-contact-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
@media (max-width: 560px) {
    .nw-contact-hero { padding: 36px 0 32px; }
    .nw-contact-row { grid-template-columns: 1fr; gap: 0; }
    .nw-contact-card { padding: 22px 20px; }
    .nw-contact-card-title { font-size: 1.2rem; }
    .nw-contact-submit-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .nw-contact-submit { width: 100%; }
}

/* ===========================================================
   FIXES: Search button rounded, Subscribe+SignOut equal size
   =========================================================== */

/* 1. Search button — rounded edges (overrides the earlier square rule) */
.tag-header-search button[type="submit"] {
    border-radius: 999px !important;
}

/* 2. Subscribe + Sign out — same width and height.
      Subscribe has an SVG icon, Sign out is text-only — without explicit
      sizing, they end up different widths. Force them equal. */
.tag-header-pill {
    height: 40px !important;
    min-width: 120px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    justify-content: center;
    line-height: 1;
}
/* The Subscribe icon shouldn't stretch the button — keep icon small */
.tag-header-pill svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ===========================================================
   CATEGORY PAGE — Penci/Soledad redesign overrides
   - Centered header band with red category name + underline
   - 728x90 ad banner under header
   - Top row: 3 landscape image cards
   - Below: uniform 3-up grid
   - Sidebar: Follow Us widget, 300x250 ad, Most Popular, Subscribe
   =========================================================== */

/* ============ HEADER — CENTERED ============ */
.nw-cat-header {
    background: #f7f7f7;
    padding: 32px 0 40px;
    border-bottom: 0;
    text-align: center;
}
.nw-cat-crumb {
    justify-content: center;
}
.nw-cat-header-title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 700;
    margin: 0 auto 6px;
    color: #1A1F2B;
    line-height: 1.2;
    letter-spacing: 0.04em;
    display: inline-block;
}
.nw-cat-header-eyebrow {
    font-family: 'Manrope', sans-serif;
    font-size: 1em;
    font-weight: 700;
    color: #1A1F2B;
    letter-spacing: 0.04em;
    margin-right: 6px;
    vertical-align: baseline;
}
.nw-cat-header-name {
    color: var(--cat-accent, #ef4444);
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}
.nw-cat-header-name::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--cat-accent, #ef4444);
}
.nw-cat-header-desc {
    max-width: 560px;
    margin: 14px auto 0;
    color: #5e6b75;
    text-align: center;
    font-size: 0.95rem;
}

/* ============ 728x90 BANNER ============ */
.nw-cat-banner {
    margin: 28px auto 0;
    max-width: 728px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}
.nw-cat-banner a {
    display: block;
    width: 100%;
    text-decoration: none;
}
.nw-cat-banner img {
    display: block;
    width: 100%;
    height: auto;
}
.nw-cat-banner-placeholder {
    height: 90px;
    display: flex;
    align-items: stretch;
}
.nw-cat-banner-text {
    flex: 1;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}
.nw-cat-banner-head {
    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1A1F2B;
}
.nw-cat-banner-cta {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nw-cat-banner-btn {
    background: #1d6cf2;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 6px 14px;
    border-radius: 2px;
}
.nw-cat-banner-size {
    color: #888;
    font-size: 0.78rem;
}
.nw-cat-banner-img-stub {
    flex: 1;
    background: linear-gradient(135deg, #4a4a4a, #2d2d2d);
    background-size: cover;
    background-position: center;
}

/* ============ MAIN GRID — keep sticky sidebar ============ */
.nw-cat-main {
    background: #ffffff;
    padding: 32px 0 56px;
}

/* === ROW 1: 3 LANDSCAPE CARDS (override the old portrait styles) === */
.nw-cat-row-large {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
.nw-cat-card-large {
    aspect-ratio: 16/10 !important;
    position: relative;
    display: block;
    text-decoration: none;
    color: #ffffff;
    overflow: hidden;
    border-radius: 2px;
}
.nw-cat-card-large .nw-cat-card-title {
    font-size: 0.95rem;
    -webkit-line-clamp: 3;
}
.nw-cat-card-large .nw-cat-card-meta {
    margin-top: 6px;
    font-style: italic;
    opacity: 0.9;
}

/* === REMAINING: uniform 3-up grid (image-top + body) === */
.nw-cat-row-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.nw-cat-card-3up {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.nw-cat-3up-img {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 12px;
    transition: filter 0.3s;
    position: relative;
}
.nw-cat-card-3up:hover .nw-cat-3up-img { filter: brightness(1.06); }
.nw-cat-3up-body { padding: 0 2px; }
.nw-cat-3up-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nw-cat-card-3up:hover .nw-cat-3up-title { color: var(--cat-accent, #ef4444); }
.nw-cat-3up-author {
    font-style: italic;
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 8px;
}
.nw-cat-3up-excerpt {
    font-size: 0.86rem;
    color: #5e6b75;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============ SIDEBAR — FOLLOW US WIDGET ============ */
.nw-cat-followus {
    padding: 0 !important;
    overflow: hidden;
}
.nw-cat-followus-head {
    margin: 0 !important;
    padding: 12px 18px;
    background: #1A1F2B;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    width: fit-content;
    border-bottom-right-radius: 0;
}
.nw-cat-followus-head h4 {
    color: #ffffff;
    margin: 0;
}
.nw-cat-followus-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    text-decoration: none;
    color: #1A1F2B;
    border-bottom: 1px solid #f0f0f0;
}
.nw-cat-followus-row:last-child { border-bottom: 0; }
.nw-cat-followus-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}
.nw-cat-followus-fb .nw-cat-followus-icon { color: #1877f2; }
.nw-cat-followus-x  .nw-cat-followus-icon { color: #1da1f2; }
.nw-cat-followus-yt .nw-cat-followus-icon { color: #ff0000; }
.nw-cat-followus-ig .nw-cat-followus-icon { color: #e1306c; }
.nw-cat-followus-num {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: #1A1F2B;
}
.nw-cat-followus-label {
    color: #5e6b75;
    font-size: 0.86rem;
    text-align: left;
    grid-column: 3 / span 1;
    grid-row: 1;
    justify-self: start;
    margin-left: -8px;
}
.nw-cat-followus-row {
    grid-template-columns: auto auto 1fr auto;
}
.nw-cat-followus-cta {
    color: #1A1F2B;
    font-size: 0.86rem;
    font-weight: 500;
    border: 1px solid #e5e5e5;
    padding: 4px 10px;
    border-radius: 2px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nw-cat-followus-row:hover .nw-cat-followus-cta {
    background: #1A1F2B;
    color: #ffffff;
    border-color: #1A1F2B;
}

/* ============ SIDEBAR AD PLACEHOLDER ============ */
.nw-cat-side-ad-placeholder {
    background: linear-gradient(135deg, #2d3142, #4a3e7a);
    color: #ffffff;
    padding: 24px 22px !important;
    text-align: left;
    border: 0 !important;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.nw-cat-sidead-eyebrow {
    font-family: 'Manrope', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.nw-cat-sidead-head {
    font-family: 'Manrope', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 4px;
}
.nw-cat-sidead-btn {
    align-self: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    padding: 7px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 14px;
    letter-spacing: 0.04em;
}

/* === Suppress the old editor's picks strip CSS (we removed the markup) === */
.nw-cat-picks { display: none; }

/* === Suppress unused old layouts since we collapsed to 3-up grid === */
.nw-cat-row-medium,
.nw-cat-row-list {
    display: none;
}

/* === RESPONSIVE === */
@media (max-width: 1000px) {
    .nw-cat-row-large {
        grid-template-columns: repeat(2, 1fr);
    }
    .nw-cat-row-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .nw-cat-banner-placeholder { height: auto; min-height: 90px; }
    .nw-cat-banner-img-stub { display: none; }
}

@media (max-width: 640px) {
    .nw-cat-header { padding: 24px 0 28px; }
    .nw-cat-row-large {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .nw-cat-card-large { aspect-ratio: 4/3 !important; }
    .nw-cat-row-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .nw-cat-banner-text {
        padding: 12px 14px;
    }
    .nw-cat-banner-head { font-size: 0.72rem; }
}

/* ===========================================================
   HERO FEATURED BADGE — visual marker on the main center card
   when an article is marked "Is featured" in admin
   =========================================================== */
.tag-hero3-featured-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #ef4444;
    color: #ffffff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 5px 10px;
    border-radius: 2px;
    z-index: 3;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ===========================================================
   HEADER PILL — relax min-width since "Get Industry Updates"
   is much longer than "Subscribe". Sign out stays at 120px,
   Subscribe pill grows to fit content. They won't be the same width
   anymore but the text is readable.
   =========================================================== */
.tag-header-actions .tag-header-pill {
    min-width: 0 !important;
    padding: 0 16px !important;
    font-size: 0.82rem;
}

/* ===========================================================
   BOTTOM-OF-PAGE SECTIONS — between Industry Conferences and Footer
   Stats strip + 6 content sections (some hide when data is empty)
   =========================================================== */

/* === Generic wrappers === */
.tag-bottom-section {
    padding: 56px 0;
    background: #ffffff;
}
.tag-bottom-section-tinted {
    background: #f7f7f7;
}
.tag-bottom-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
}
.tag-bottom-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1A1F2B;
    margin: 0;
    line-height: 1.2;
}
.tag-bottom-sub {
    color: #5e6b75;
    font-size: 0.94rem;
}
.tag-bottom-all {
    color: #ef4444;
    font-family: 'Manrope', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.04em;
}
.tag-bottom-all:hover { text-decoration: underline; }

/* === STATS STRIP === */
.tag-stats-strip {
    background: #1A1F2B;
    color: #ffffff;
    padding: 36px 0;
}
.tag-stats-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
}
.tag-stat {
    text-align: center;
}
.tag-stat-num {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}
.tag-stat-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #C8F26C;
    margin-top: 8px;
}
.tag-stat-divider {
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
}

/* === MOST POPULAR THIS WEEK === */
.tag-bottom-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.tag-popcard {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tag-popcard:hover {
    transform: translateY(-3px);
    border-color: #1A1F2B;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.tag-popcard-rank {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ef4444;
    color: #ffffff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 2px;
    z-index: 2;
}
.tag-popcard-img {
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
}
.tag-popcard-img-placeholder {
    background: linear-gradient(135deg, #2d4a3e, #1A1F2B);
}
.tag-popcard-body {
    padding: 16px 18px;
}
.tag-popcard-cat {
    color: #ef4444;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.tag-popcard-title {
    font-family: 'Roboto Slab', 'Fraunces', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 6px 0 10px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-popcard:hover .tag-popcard-title { color: #ef4444; }
.tag-popcard-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: #888;
}

/* === COMPANIES IN FOCUS === */
.tag-companies-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.tag-company-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    padding: 22px 16px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, border-color 0.2s;
}
.tag-company-card:hover {
    transform: translateY(-3px);
    border-color: #1A1F2B;
}
.tag-company-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    background: #f7f7f7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.tag-company-logo img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}
.tag-company-initial {
    font-family: 'Roboto Slab', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1A1F2B;
}
.tag-company-name {
    font-family: 'Roboto Slab', serif;
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1A1F2B;
}
.tag-company-card:hover .tag-company-name { color: #ef4444; }
.tag-company-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: #888;
    letter-spacing: 0.04em;
}

/* === RECENTLY ADDED JOBS === */
.tag-jobs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.tag-job-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    padding: 18px 22px;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color 0.2s, transform 0.2s;
}
.tag-job-card:hover {
    border-color: #1A1F2B;
    transform: translateY(-2px);
}
.tag-job-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}
.tag-job-title {
    font-family: 'Roboto Slab', serif;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #1A1F2B;
    line-height: 1.3;
}
.tag-job-card:hover .tag-job-title { color: #ef4444; }
.tag-job-arrow {
    color: #888;
    font-size: 1rem;
    flex-shrink: 0;
}
.tag-job-meta {
    display: flex;
    gap: 14px;
    font-size: 0.84rem;
    color: #5e6b75;
    flex-wrap: wrap;
}
.tag-job-company {
    font-weight: 600;
    color: #1A1F2B;
}

/* === BROWSE BY CATEGORY === */
.tag-catgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.tag-catgrid-tile {
    --cat-accent: #ef4444;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.tag-catgrid-tile:hover {
    transform: translateY(-3px);
    border-color: var(--cat-accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.tag-catgrid-stripe {
    height: 4px;
    background: var(--cat-accent);
}
.tag-catgrid-body {
    padding: 18px 20px;
}
.tag-catgrid-name {
    font-family: 'Roboto Slab', serif;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1A1F2B;
}
.tag-catgrid-tile:hover .tag-catgrid-name { color: var(--cat-accent); }
.tag-catgrid-count {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: #888;
}

/* === FROM THE ARCHIVE === */
.tag-archive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.tag-archive-card {
    text-decoration: none;
    color: inherit;
}
.tag-archive-img {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: #2d4a3e;
    border-radius: 2px;
    margin-bottom: 12px;
    transition: filter 0.2s;
}
.tag-archive-card:hover .tag-archive-img { filter: brightness(1.06); }
.tag-archive-img-placeholder {
    background: linear-gradient(135deg, #2d4a3e, #1A1F2B);
}
.tag-archive-cat {
    color: #ef4444;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.tag-archive-title {
    font-family: 'Roboto Slab', serif;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 6px 0 6px;
    color: #1A1F2B;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tag-archive-card:hover .tag-archive-title { color: #ef4444; }
.tag-archive-date {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    color: #888;
}

/* === SUBMIT A TIP / WRITE FOR US CTA === */
.tag-cta-band {
    background: #1A1F2B;
    padding: 56px 0;
    color: #ffffff;
}
.tag-cta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.tag-cta-block {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 36px 32px;
}
.tag-cta-icon {
    font-size: 2rem;
    margin-bottom: 14px;
}
.tag-cta-title {
    font-family: 'Roboto Slab', serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: #ffffff;
}
.tag-cta-text {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 20px;
    line-height: 1.5;
    font-size: 0.96rem;
}
.tag-cta-btn {
    display: inline-block;
    background: #ef4444;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 2px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background 0.15s;
}
.tag-cta-btn:hover { background: #dc2626; }

/* === PODCAST (placeholder styles, hidden if no episodes) === */
.tag-podcast-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.tag-podcast-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    padding: 22px;
    text-decoration: none;
    color: inherit;
}
.tag-podcast-thumb {
    background: #1A1F2B;
    color: #ffffff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 14px;
}
.tag-podcast-title {
    font-family: 'Roboto Slab', serif;
    font-size: 1rem;
    margin: 0 0 6px;
    color: #1A1F2B;
}
.tag-podcast-meta {
    font-size: 0.84rem;
    color: #888;
}

/* === GLOSSARY (placeholder styles, hidden if no terms) === */
.tag-glossary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.tag-glossary-card {
    background: #ffffff;
    border-left: 4px solid #4DB849;
    padding: 18px 22px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}
.tag-glossary-card:hover {
    background: #f7f7f7;
}
.tag-glossary-term {
    font-family: 'Roboto Slab', serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #1A1F2B;
}
.tag-glossary-def {
    font-size: 0.88rem;
    color: #5e6b75;
    margin: 0;
    line-height: 1.5;
}

/* === RESPONSIVE === */
@media (max-width: 1000px) {
    .tag-bottom-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .tag-companies-grid { grid-template-columns: repeat(3, 1fr); }
    .tag-archive-grid { grid-template-columns: repeat(2, 1fr); }
    .tag-catgrid { grid-template-columns: repeat(3, 1fr); }
    .tag-podcast-grid { grid-template-columns: repeat(2, 1fr); }
    .tag-glossary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .tag-bottom-section { padding: 36px 0; }
    .tag-bottom-title { font-size: 1.3rem; }

    .tag-stats-inner { gap: 18px; padding: 0 16px; }
    .tag-stat-num { font-size: 1.6rem; }
    .tag-stat-divider { display: none; }

    .tag-bottom-grid-3,
    .tag-jobs-grid,
    .tag-companies-grid,
    .tag-archive-grid,
    .tag-catgrid,
    .tag-cta-grid,
    .tag-podcast-grid,
    .tag-glossary-grid { grid-template-columns: 1fr; gap: 14px; }

    .tag-companies-grid { grid-template-columns: repeat(2, 1fr); }

    .tag-cta-block { padding: 26px 22px; }
    .tag-cta-title { font-size: 1.2rem; }
}