/*
Theme Name: SignalNews
Theme URI: https://signalnews.com
Author: XPR Media
Author URI: https://xpr.media
Description: A clean, editorial-grade WordPress theme for the SignalNews network. Drop-in ready for any DMA site, with built-in support for AI-assisted content disclosures, source attribution panels, network cross-promotion, and the SignalNews modular news grid. Customize per city via Appearance → Customize.
Version: 1.18.32
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary — XPR Media internal use
Text Domain: signalnews
Tags: news, magazine, editorial, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, post-formats, threaded-comments, translation-ready
*/

/* =========================================================
   SIGNALNEWS THEME STYLESHEET — v1.1.0
   Design system aligned to the SignalNews Figma library
   (Foundations -> Colors / Typography, "Group 140" homepage).
   Palette: light body + dark navy accent modules.
   Type: Inter (headlines) / Source Serif Pro (body) /
         Roboto Condensed (metadata, labels).
   NOTE: variable NAMES kept stable from v1.0 so the
   article/category/search/404 templates inherit the new
   look without edits. VALUES repointed to Figma palette.
   ========================================================= */

:root {
  --navy:        #1C2A39;
  --navy-deep:   #15212D;
  --crimson:     #E13B2F;
  --crimson-dk:  #C32D22;
  --slate:       #111827;
  --charcoal:    #2B2B2B;
  --cool-gray:   #F4F5F7;
  --rich-black:  #1A1A1A;
  --white:       #FFFFFF;

  --ink:        var(--slate);
  --ink-soft:   var(--charcoal);
  --meta:       #6B7280;
  --meta-soft:  #9AA1AB;
  --paper:      var(--white);
  --paper-warm: var(--cool-gray);
  --rule:       #E5E7EB;
  --rule-dark:  #CBD2DA;
  --highlight:  #FFF2D6;

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-mono:    'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;

  --maxw: 1920px;   /* full-bleed: matches the 1920px Figma homepage frame (was 1320px) */
  --gutter: clamp(32px, 4vw, 80px);   /* site-wide side padding; scales with viewport so content never hits the edges */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink-soft); font-family: var(--font-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }
button, input, textarea { font-family: inherit; }

.aligncenter { display: block; margin: 1em auto; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--meta); margin-top: 8px; line-height: 1.45; }
.screen-reader-text { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* TOP UTILITY STRIP + BREAKING */
.topstrip { background: var(--navy); color: rgba(255,255,255,0.82); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; }
.topstrip-inner { max-width: var(--maxw); margin: 0 auto; padding: 9px var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.topstrip-left { display: flex; gap: 18px; align-items: center; }
.topstrip-left .temp { font-weight: 600; color: #fff; }
.topstrip-left .sep { opacity: 0.35; }
.topstrip-breaking { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topstrip-breaking .live { background: var(--crimson); color: #fff; padding: 3px 10px; border-radius: 2px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; font-size: 11px; flex-shrink: 0; }
.topstrip-breaking .breaking-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,0.92); }
/* Breaking rotator: show ONE headline at a time, rotating through the latest 5 */
.topstrip-breaking .breaking-items { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.topstrip-breaking .breaking-items .breaking-text { display: none; }
.topstrip-breaking .breaking-items .breaking-text.is-active { display: block; }
/* Top Stories marquee — continuous horizontal scroll of recent headlines */
.topstories-inner { overflow: hidden; }
.topstories-marquee { overflow: hidden; flex: 1; min-width: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.topstories-track { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; will-change: transform; animation: signalnews-marquee 45s linear infinite; }
.topstories-marquee:hover .topstories-track { animation-play-state: paused; }
.topstories-track .topstories-item { flex-shrink: 0; }
.topstories-dot { color: var(--crimson); margin: 0 18px; flex-shrink: 0; opacity: 0.9; }
@keyframes signalnews-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.topstrip-right { display: flex; gap: 16px; align-items: center; }
.topstrip-right .globe { opacity: 0.7; }
.topstrip a:hover { color: #fff; }

/* MASTHEAD */
.masthead { border-bottom: 1px solid var(--rule); background: var(--paper); }
.masthead-inner { max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.masthead-brand { display: flex; align-items: center; }
.masthead-brand .custom-logo { max-height: 56px; width: auto; margin: 0; }
.masthead-actions { display: flex; align-items: center; gap: 24px; }
.masthead-weather { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); }
.masthead-weather .mw-ico { font-size: 22px; line-height: 1; }
.masthead-weather .mw-temp { font-size: 22px; font-weight: 700; color: var(--slate); line-height: 1; }
.masthead-weather .mw-meta { display: flex; flex-direction: column; gap: 1px; }
.masthead-weather .mw-loc { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); font-weight: 600; }
.masthead-weather .mw-text { font-size: 10.5px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--meta); }
.city-select { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--slate); transition: color 0.15s; user-select: none; }
.city-select:hover { color: var(--crimson); }
.city-select .city-pin { display: inline-flex; align-items: center; }
.city-select .city-caret { font-size: 11px; margin-left: 1px; }

/* City/market switcher panel (masthead) — searchable, scales to 200+ */
.city-switcher { position: relative; }
.city-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; width: 300px; max-width: 86vw; background: #fff; border: 1px solid var(--rule); box-shadow: 0 12px 32px rgba(17,24,39,0.16); }
.city-panel[hidden] { display: none; }
.city-panel-head { padding: 10px; border-bottom: 1px solid var(--rule); }
.city-search { width: 100%; padding: 9px 12px; border: 1px solid var(--rule-dark); font-family: var(--font-body); font-size: 14px; color: var(--slate); }
.city-search::placeholder { color: var(--meta-soft); }
.city-search:focus { outline: none; border-color: var(--navy); }
.city-results { max-height: 300px; overflow-y: auto; }
.city-item { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; text-decoration: none; color: var(--slate); border-bottom: 1px solid var(--cool-gray); }
.city-item:hover { background: var(--cool-gray); }
.city-item .ci-city { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.city-item .ci-state { font-family: var(--font-mono); font-size: 11px; color: var(--meta); letter-spacing: 0.04em; }
.city-item .ci-current { margin-left: auto; color: var(--crimson); font-weight: 700; }
.city-item.is-current { background: rgba(225,59,47,0.06); }
.city-empty { padding: 16px 14px; font-family: var(--font-body); font-size: 13px; color: var(--meta); text-align: center; }
.city-viewall { display: block; padding: 11px 14px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--navy); text-decoration: none; }
.city-viewall:hover { color: var(--crimson); }

/* Markets directory page (/markets) */
.markets-wrap { padding: 40px 0 56px; }
.markets-head { margin-bottom: 28px; }
.markets-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; color: var(--slate); margin-bottom: 8px; }
.markets-sub { font-family: var(--font-body); font-size: 16px; color: var(--charcoal); margin-bottom: 18px; }
.markets-head .city-search { max-width: 420px; }
.markets-group { margin-bottom: 28px; }
.markets-state { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; color: var(--navy); padding-bottom: 8px; margin-bottom: 12px; border-bottom: 2px solid var(--crimson); }
.markets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.markets-grid .city-item { border: 1px solid var(--rule); }
.masthead-actions .contributor { background: var(--navy); color: #fff; border: 1px solid var(--navy); padding: 10px 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; transition: all 0.15s; }
.masthead-actions .contributor:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.brand { font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--meta); }
.brand-mark { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 0.9; text-align: center; color: var(--navy); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 2px; }
.brand-mark .news { color: var(--crimson); }
.brand-center { text-align: center; }
.brand-sub { text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--meta); margin-top: 6px; }
.masthead-right { display: flex; justify-content: flex-end; gap: 14px; align-items: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--meta); }
.masthead-right a:hover { color: var(--crimson); }
.masthead-right .contributor { color: var(--navy); border: 1px solid var(--rule-dark); padding: 8px 14px; transition: all 0.15s; font-weight: 600; letter-spacing: 0.08em; }
.masthead-right .contributor:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.masthead-right .lang { display: inline-flex; align-items: center; gap: 5px; }
.custom-logo-link { display: block; text-align: center; }
.custom-logo { max-height: 54px; width: auto; margin: 0 auto; }

/* MAIN NAV */
.mainnav { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.mainnav-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 26px; height: 48px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.mainnav-scroll { display: flex; align-items: center; gap: 26px; overflow-x: auto; scrollbar-width: none; flex: 1; height: 100%; }
.mainnav-scroll::-webkit-scrollbar { display: none; }
.mainnav-inner ul { display: flex; gap: 26px; list-style: none; padding: 0; margin: 0; align-items: center; height: 100%; }
.mainnav-inner a { padding: 15px 0; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; white-space: nowrap; color: var(--slate); }
.mainnav-inner a:hover { color: var(--crimson); border-bottom-color: var(--crimson); }
.mainnav-search { flex-shrink: 0; display: flex; align-items: center; border: 1px solid var(--rule-dark); padding: 6px 12px; gap: 8px; }
.mainnav-search input { border: none; outline: none; font-family: var(--font-mono); font-size: 12px; width: 130px; background: transparent; color: var(--slate); }
.mainnav-search input::placeholder { color: var(--meta-soft); }
.mainnav-search .icon { color: var(--meta); display: flex; align-items: center; }
.mainnav-search .icon svg { display: block; }

/* TOP STORIES SUB-TICKER */
.topstories { border-bottom: 1px solid var(--rule); background: var(--paper); }
.topstories-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.topstories-inner::-webkit-scrollbar { display: none; }
.topstories-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); font-weight: 700; flex-shrink: 0; }
.topstories-item { font-family: var(--font-body); font-size: 14.5px; color: var(--charcoal); white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; }
.topstories-item.dot::after { content: ''; width: 6px; height: 6px; background: var(--crimson); border-radius: 50%; display: inline-block; }
.topstories-item:hover { color: var(--crimson); }
.topstories-sep { width: 1px; height: 16px; background: var(--rule); flex-shrink: 0; }

/* CONTAINERS / SECTION LABELS */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--slate); font-weight: 700; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.section-label::before { content: ''; width: 26px; height: 3px; background: var(--crimson); display: inline-block; flex-shrink: 0; }
.section-label > span:first-of-type { display: inline-flex; align-items: center; gap: 12px; flex: 1; }
.section-label > span:first-of-type::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.section-label .more { color: var(--meta); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; flex-shrink: 0; }
.section-label .more:hover { color: var(--crimson); }
.section-label.dark { color: #fff; }
.section-label.dark > span:first-of-type::after { background: rgba(255,255,255,0.18); }
.section-label.dark .more { color: rgba(255,255,255,0.7); }

/* CATEGORY EYEBROWS */
.cat { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; color: var(--crimson); }
.cat.local, .cat.crime, .cat.local-news, .cat.cat-local-news, .cat.cat-crime-safety { color: var(--crimson); }
.cat.politics, .cat.cat-politics { color: #8B5A1C; }
.cat.business, .cat.cat-business { color: #1F6E4A; }
.cat.legal, .cat.cat-legal, .cat.cat-legal-courts { color: var(--navy); }
.cat.crypto, .cat.cat-crypto, .cat.cat-crypto-digital-assets { color: #6A1F8B; }
.cat.events, .cat.education, .cat.cat-events, .cat.cat-education { color: #1F4E8B; }
.cat.health, .cat.cat-health { color: #1F6E4A; }
.cat.network, .cat.cat-network { color: var(--meta); }
.cat.sponsored, .cat.cat-sponsored { background: var(--cool-gray); color: var(--meta); padding: 2px 7px; border: 1px solid var(--rule); }
.cat.ai-assisted, .cat.cat-brief, .cat.cat-briefs { color: var(--meta); font-style: italic; font-family: var(--font-body); letter-spacing: 0.02em; text-transform: none; font-size: 12px; font-weight: 400; }
.cat.default { color: var(--navy); }
/* In the hero/lead eyebrow rows (flex, align-items:center) the .cat label's
   card-layout margin-bottom shifts it ~4px above the rest of the line. Zero it
   there so the category sits on the same center as the city/time. */
.hero-eyebrow .cat, .cat-lead-eyebrow .cat { margin-bottom: 0; }
.badge { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; background: var(--crimson); color: #fff; padding: 5px 11px; }
.badge.network { background: var(--navy); }
.badge.sponsored { background: rgba(0,0,0,0.7); }

/* HERO (dark image overlay) */
.hero { padding: 36px 0 44px; }
.hero-main { position: relative; }
.hero-feature { position: relative; overflow: hidden; }
.hero-feature .hero-image, .hero-feature .hero-image img { aspect-ratio: 16 / 9; width: 100%; min-height: 440px; object-fit: cover; }
.hero-feature .hero-image.placeholder { background: linear-gradient(135deg, #2c4054 0%, #1C2A39 50%, #0d1620 100%); position: relative; }
.hero-feature .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,15,22,0.92) 0%, rgba(10,15,22,0.55) 42%, rgba(10,15,22,0.12) 75%, rgba(10,15,22,0) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 48px; }
.hero-feature .hero-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 14px; display: flex; gap: 12px; align-items: center; }
.hero-feature .hero-eyebrow .sep { opacity: 0.4; }
.hero-feature h1 { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1.04; letter-spacing: -0.02em; color: #fff; margin-bottom: 16px; max-width: 760px; }
.hero-feature h1 a:hover { opacity: 0.92; }
.hero-feature .deck { font-family: var(--font-body); font-size: 18px; line-height: 1.5; color: rgba(255,255,255,0.85); max-width: 680px; margin-bottom: 22px; }
.hero-actions { display: flex; gap: 14px; align-items: center; }
.hero-actions .btn-primary { background: var(--white); color: var(--navy); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 12px 22px; transition: all 0.15s; }
.hero-actions .btn-primary:hover { background: var(--cool-gray); }
.hero-actions .btn-live { display: inline-flex; align-items: center; gap: 8px; background: var(--crimson); color: #fff; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 12px 18px; transition: all 0.15s; }
.hero-actions .btn-live:hover { background: var(--crimson-dk); }
.hero-actions .btn-live .play { width: 0; height: 0; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.hero-tools { position: absolute; bottom: 48px; right: 48px; display: flex; gap: 14px; color: rgba(255,255,255,0.7); }
.hero-dots { position: absolute; bottom: 22px; right: 48px; display: flex; gap: 7px; }
.hero-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.4); }
.hero-dots .dot.on { background: #fff; }
/* HERO SLIDER — 5-story click-through (no auto-rotate) */
.hero-slider { position: relative; }
.hero-slide { display: none; }
.hero-slide.is-active { display: block; }
.hero-dots { position: absolute; bottom: 22px; right: 48px; display: flex; gap: 9px; z-index: 3; }
.hero-dots .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.45); border: none; padding: 0; cursor: pointer; transition: all 0.15s; }
.hero-dots .dot:hover { background: rgba(255,255,255,0.8); }
.hero-dots .dot.on { background: #fff; transform: scale(1.15); }

/* Read Full Story — crimson fill + arrow (replaces old white btn-primary) */
.hero-actions .btn-hero { display: inline-flex; align-items: center; gap: 9px; background: var(--crimson); color: #fff; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 13px 24px; transition: all 0.15s; }
.hero-actions .btn-hero:hover { background: var(--crimson-dk); }
.hero-actions .btn-hero .btn-arrow { font-size: 14px; transition: transform 0.15s; }
.hero-actions .btn-hero:hover .btn-arrow { transform: translateX(3px); }

/* Featured badge — angled right edge */
/* Hero flag — red ribbon angled on the RIGHT edge only, matched to Figma
   ("Slanted Card flag": Roboto Condensed 15/600, +0.78px tracking, ~24px tall). */
.hero-feature .badge { background: var(--crimson); font-size: 15px; font-weight: 600; letter-spacing: 0.78px; padding: 4px 30px 4px 14px; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
/* Hero share button (over the image, next to Read Full Story) */
.hero-actions .sn-share--hero { width: 40px; height: 40px; border-radius: 5px; background: rgba(255,255,255,0.20); color: #fff; transition: background .15s ease; }
.hero-actions .sn-share--hero:hover { background: rgba(255,255,255,0.32); }
.sn-share--hero svg { width: 18px; height: 18px; }
.hero-side { display: flex; flex-direction: column; gap: 24px; }
.hero-side-item { padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.hero-side-item:last-child { border-bottom: none; }
.hero-side-item h2 { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.2; margin-bottom: 8px; color: var(--slate); }
.byline { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--meta); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.byline .author { color: var(--slate); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.byline .dot { color: var(--rule-dark); }
.byline span:last-child { color: var(--crimson); }
.photo-credit { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--meta); margin-top: 6px; }

/* MAIN GRID */
.main { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: 68px; padding: 24px var(--gutter) 48px; align-items: start; }
/* Search page has no right rail (by design) — collapse the feed to full width. */
.main.search-norail { grid-template-columns: 1fr; }
.local-feed { display: flex; flex-direction: column; }
.feed-section { margin-bottom: 48px; }
.feed-section:last-child { margin-bottom: 0; }
.card-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.card-row.cols-5 { grid-template-columns: repeat(5, 1fr); }
.card-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.story { display: flex; flex-direction: column; }
.story-img { aspect-ratio: 16 / 11; width: 100%; }
/* Full image shown (contain) over a blurred backdrop of itself — matches the lead
   hero + trending rail, so off-ratio PR graphics aren't cropped in the card grids. */
.story-img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.story-img::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--thumb-bg); background-size: cover; background-position: center; filter: blur(16px); transform: scale(1.12); }
.story-img { margin-bottom: 12px; position: relative; overflow: hidden; background: var(--cool-gray); }
/* Image blocks — 6px corner radius site-wide (Figma) */
.story-img, .hcard .hcard-img, .tcard .tcard-img, .rail-img, .network-item .net-img, .article-hero-img, .related-card .related-img, .search-result .sr-img, .cat-lead-img, .hero-feature .hero-image, .mr-item .mr-thumb, .feed-card .feed-thumb { border-radius: 6px; overflow: hidden; }
.story-img.placeholder { background: linear-gradient(135deg, #cdd3da 0%, #aeb6c0 100%); }

/* Editorial Chips — content-type badges (Figma "Editorial Chips" system).
   Ghost = transparency labels (Press Release / AI-Assisted / Sponsored /
   From Our Network). Outline = topic. Flag = high-emphasis urgency (Breaking).
   Spec from Figma: 24px tall, 1px/8px padding, 3px radius, cool-gray bg +
   deep-navy text for ghost; crimson + white for flag. */
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 24px; padding: 1px 8px; border-radius: 3px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.chip--ghost { background: var(--cool-gray); color: var(--navy); }
.chip--outline { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--rule); }
.chip--flag { background: var(--crimson); color: #fff; font-weight: 700; }
.story .chip { align-self: flex-start; margin-bottom: 8px; }
.cat-lead-body .chip { margin-bottom: 10px; }

/* Supporting Document template (page-doc.php) — legal/policy/standards layout
   per the Figma "Supporting Doc" design: title + lead, sticky "On this page"
   TOC beside the content. Type maps to theme tokens (Inter headings, Source
   Serif body) so it reads like the rest of the site. */
.doc-page { padding-top: 26px; padding-bottom: 72px; }
.doc-head { margin: 16px 0 32px; }
.doc-title { font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 1.04; letter-spacing: -0.02em; color: var(--slate); }
.doc-dates { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--charcoal); margin-top: 14px; display: flex; gap: 8px; align-items: center; }
.doc-dates .dot { opacity: 0.5; }
.doc-lead { font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--charcoal); margin-top: 16px; max-width: 720px; }
.doc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; border-top: 1px solid var(--rule); padding-top: 36px; }
.doc-layout.no-toc { grid-template-columns: minmax(0, 1fr); }
.doc-toc { position: sticky; top: 66px; }
.doc-toc-title { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.doc-toc-list { display: flex; flex-direction: column; }
.doc-toc-link { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--slate); text-decoration: none; padding: 7px 0 7px 14px; border-left: 2px solid var(--rule); transition: color 0.15s, border-color 0.15s; }
.doc-toc-link:hover { color: var(--crimson); }
.doc-toc-link.is-active { color: var(--crimson); border-left-color: var(--crimson); }
.doc-body { max-width: 760px; }
.doc-body h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--slate); margin: 38px 0 12px; scroll-margin-top: 66px; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--slate); margin: 26px 0 10px; }
.doc-body p, .doc-body li { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--charcoal); }
.doc-body p { margin-bottom: 16px; }
.doc-body ul, .doc-body ol { margin: 0 0 16px 22px; }
.doc-body li { margin-bottom: 8px; }
.doc-body a { color: var(--crimson); text-decoration: underline; }
.doc-body strong { font-weight: 700; color: var(--slate); }
.doc-body blockquote { border-left: 3px solid var(--rule); padding-left: 18px; margin: 0 0 16px; color: var(--charcoal); }
@media (max-width: 900px) {
	.doc-title { font-size: 38px; }
	.doc-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.doc-toc { position: static; padding-bottom: 22px; }
}

/* Contribute / Pitch template (page-contribute.php) — copy + a reserved
   "form slot" that shows a coming-soon notice until the iframe form is added. */
.contribute-page { padding-top: 26px; padding-bottom: 72px; }
.contribute-head { margin: 16px 0 24px; }
.contribute-title { font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 1.04; letter-spacing: -0.02em; color: var(--slate); }
.contribute-lead { font-family: var(--font-body); font-size: 20px; line-height: 1.5; color: var(--charcoal); margin-top: 16px; max-width: 760px; }
.contribute-body { max-width: 760px; margin-bottom: 36px; }
.contribute-body p, .contribute-body li { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--charcoal); }
.contribute-body p { margin-bottom: 16px; }
.contribute-body h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--slate); margin: 32px 0 12px; }
.contribute-body ul, .contribute-body ol { margin: 0 0 16px 22px; }
.contribute-body li { margin-bottom: 8px; }
.contribute-body a { color: var(--crimson); text-decoration: underline; }
.contribute-formslot { max-width: 760px; background: var(--cool-gray); border: 1px solid var(--rule); border-radius: 10px; padding: 40px 36px; text-align: center; }
.formslot-pill { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson); background: var(--white); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; margin-bottom: 16px; }
.formslot-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--slate); margin-bottom: 10px; }
.formslot-note { font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--charcoal); max-width: 520px; margin: 0 auto; }
@media (max-width: 900px) {
	.contribute-title { font-size: 38px; }
	.contribute-formslot { padding: 32px 22px; }
}

/* ===== Mobile navigation — hamburger + slide-in drawer (Figma "Mobile Menu") ===== */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--navy); }
.nav-toggle-bars { position: relative; display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after { top: 7px; }

/* Active-nav highlighting intentionally disabled — a post can belong to several
   categories (e.g. Business + Press Releases), which highlighted multiple nav
   items at once. Hover feedback only. */

.mnav-overlay { position: fixed; inset: 0; background: rgba(15,21,29,0.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; z-index: 90; }
.mnav-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mnav-drawer { position: fixed; top: 0; left: 0; height: 100%; width: min(86vw, 360px); background: var(--paper); z-index: 95; transform: translateX(-100%); transition: transform 0.25s ease; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: 0 0 40px rgba(0,0,0,0.18); }
.mnav-drawer.is-open { transform: translateX(0); }
.mnav-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--rule); }
.mnav-logo { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.mnav-logo .brand-mark { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: var(--navy); }
.mnav-logo .brand-mark .news { color: var(--crimson); }
/* When a Site Identity logo is uploaded, the drawer uses it (matches the masthead). */
.mnav-logo--img { display: inline-flex; }
.mnav-logo--img .custom-logo-link { display: block; margin: 0; }
.mnav-logo--img .custom-logo { max-height: 38px; width: auto; margin: 0; }
.mnav-city { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--meta); }
.mnav-close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--cool-gray); font-size: 22px; line-height: 1; color: var(--navy); cursor: pointer; }
.mnav-edition { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 18px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 8px; text-decoration: none; }
.mnav-edition-q { display: flex; flex-direction: column; line-height: 1.25; }
.mnav-edition-q strong { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--navy); }
.mnav-edition-q span { font-family: var(--font-display); font-size: 12px; color: var(--meta); }
.mnav-edition-city { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--navy); white-space: nowrap; }
.mnav-edition-city .pin { color: var(--crimson); font-size: 9px; vertical-align: middle; }
.mnav-edition-city .caret { color: var(--meta); }
.mnav-links { flex: 0 0 auto; }
.mnav-menu { list-style: none; margin: 0; padding: 0; }
.mnav-menu li { border-top: 1px solid var(--rule); }
.mnav-menu li:first-child { border-top: 0; }
.mnav-menu a { display: block; padding: 15px 18px; font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--navy); text-decoration: none; }
.mnav-menu a:hover, .mnav-menu .current-menu-item > a { color: var(--crimson); }
.mnav-cta { display: block; margin: 18px; padding: 15px; background: var(--navy); color: #fff; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-radius: 2px; }

@media (max-width: 860px) {
	.nav-toggle { display: inline-flex; }
	.masthead-weather, .city-switcher, .masthead-actions .contributor { display: none; }
}
@media (min-width: 861px) {
	.mnav-drawer, .mnav-overlay { display: none; }
}

/* ===== Mobile article (Local Story) refinements ===== */
@media (max-width: 640px) {
	/* Full-bleed hero image; caption keeps the page gutter. */
	.article-hero { margin: 0 0 6px; padding: 0; max-width: none; }
	.article-hero-img { aspect-ratio: 3 / 2; }
	.article-hero .caption, .article-hero .credit { padding: 0 18px; }
	/* Byline reflows: avatar + name on the first row, meta wraps full-width below. */
	.byline-block { grid-template-columns: 48px 1fr; gap: 4px 12px; }
	.byline-block--pr { grid-template-columns: 1fr; }
	.author-avatar { width: 48px; height: 48px; }
	.byline-meta { grid-column: 1 / -1; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px dotted var(--rule); }
	.byline-meta .sn-share--byline { margin: 0 0 0 auto; }
	/* Reading-comfort type scale for phones. */
	.article-head h1 { font-size: 28px; }
	.article-head .deck { font-size: 18px; }
	.article-body { font-size: 17px; line-height: 1.62; }
	.article-body p { margin-bottom: 20px; }
	.article-body h2 { font-size: 23px; margin: 30px 0 12px; }
	.article-body h3 { font-size: 19px; }
	.article-body blockquote { font-size: 20px; padding-left: 16px; margin: 24px 0; }
}
.story h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--slate); }
.story h3 a:hover { color: var(--crimson); }
.story .deck-sm { font-family: var(--font-body); font-size: 14px; color: var(--charcoal); line-height: 1.45; margin-bottom: 10px; }
.story .byline { font-size: 11px; }
.hlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 28px; }
.hcard { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.hcard .hcard-img, .hcard .hcard-img img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.hcard .hcard-img { background: var(--cool-gray); position: relative; overflow: hidden; }
.hcard .hcard-img.placeholder { background: linear-gradient(135deg, #cdd3da, #aeb6c0); }
.hcard h4 { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; line-height: 1.25; margin-bottom: 6px; color: var(--slate); }
.hcard h4 a:hover { color: var(--crimson); }
.hcard .byline { font-size: 10.5px; }
.tlist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.tcard { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: start; }
.tcard .tcard-img, .tcard .tcard-img img { aspect-ratio: 1/1; width: 100%; object-fit: cover; background: var(--cool-gray); }
.tcard .tcard-img.placeholder { background: linear-gradient(135deg,#cdd3da,#aeb6c0); }
.tcard h4 { font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 1.25; margin-bottom: 6px; color: var(--slate); }
.tcard h4 a:hover { color: var(--crimson); }
.tcard .byline { font-size: 10px; }
.trending { background: var(--cool-gray); padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.trending-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 24px; }
.trending-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); font-weight: 700; }
.trending-items { display: flex; gap: 30px; overflow-x: auto; scrollbar-width: thin; }
.trending-item { flex-shrink: 0; font-family: var(--font-body); font-size: 14px; color: var(--charcoal); display: flex; gap: 9px; align-items: baseline; }
.trending-item .num { font-family: var(--font-mono); font-size: 11px; color: var(--crimson); font-weight: 700; }
.trending-item:hover { color: var(--crimson); }

/* CROSS-PROMO */
.crosspromo { margin: 40px 0; position: relative; overflow: hidden; background: var(--navy); }
.crosspromo-img { position: absolute; inset: 0; opacity: 0.35; }
.crosspromo-img img { width: 100%; height: 100%; object-fit: cover; }
.crosspromo-inner { position: relative; display: flex; align-items: center; gap: 28px; padding: 26px 40px; color: #fff; }
.crosspromo .sn-logo { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.crosspromo .sn-logo .news { color: var(--crimson); }
.crosspromo .x { font-family: var(--font-mono); opacity: 0.6; font-size: 18px; }
.crosspromo .partner { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.02em; }
.crosspromo .tagline { margin-left: auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.7); }

/* RIGHT RAIL */
.sidebar { display: flex; flex-direction: column; gap: 32px; }
.rail-block .rail-label, .widget-title { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--slate); font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
/* Trending header — crimson tag + accent line + View All (matches Tasha's design) */
.rail-label-tag { display: flex; align-items: center; gap: 12px; }
.rail-label-tag::before { display: none; }
/* Trending tag — thin, longer, rounded rectangle (no angle) per Figma. */
.rail-label-tag .tag-text { background: var(--crimson); color: #fff; padding: 4px 18px; border-radius: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; flex-shrink: 0; }
.rail-label-tag::after { content: ''; flex: 1; height: 2px; background: var(--crimson); opacity: 0.85; order: 2; }
.rail-label-tag .tag-viewall { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--meta); font-weight: 500; flex-shrink: 0; text-transform: none; order: 3; }
.rail-label-tag .tag-viewall:hover { color: var(--crimson); }
.rail-block .rail-label::before { content: ''; width: 22px; height: 3px; background: var(--crimson); }
.rail-block .rail-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.rail-list { display: flex; flex-direction: column; gap: 16px; }
.rail-item { padding-bottom: 16px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; }
.rail-item.no-image { grid-template-columns: 1fr; }
.rail-item:last-child { border-bottom: none; padding-bottom: 0; }
.rail-img { position: relative; aspect-ratio: 1 / 1; background: var(--cool-gray); overflow: hidden; }
.rail-img.placeholder { background: linear-gradient(135deg, #4a5d70 0%, #2c3d52 100%); }
.rail-img img { position: relative; z-index: 1; aspect-ratio: 1/1; width: 100%; object-fit: contain; }
/* Blurred backdrop of the same image behind the contained thumb (matches the
   category lead hero) — fills the 1:1 box for off-ratio art instead of flat gray. */
.rail-img::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--thumb-bg); background-size: cover; background-position: center; filter: blur(10px); transform: scale(1.15); }
.rail-item .rail-cat { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; color: var(--slate); background: var(--cool-gray); padding: 2px 7px; display: inline-block; margin-bottom: 6px; }
.rail-item h4 { font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 1.28; margin-bottom: 6px; color: var(--slate); }
.rail-item h4 a:hover { color: var(--crimson); }
.rail-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--meta); text-transform: uppercase; display: flex; align-items: center; gap: 8px; }

/* Weather card */
.wx-card { background: var(--navy); color: #fff; padding: 20px 22px; }
.wx-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.wx-head h3 { font-family: var(--font-display); font-size: 16px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.wx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.wx-day { display: flex; flex-direction: column; align-items: center; }
/* Reserve 2 lines for the label + bottom-align it, so single-line names
   (Today) and wrapping ones (Monday Night) keep the icons + temps aligned. */
.wx-day .dow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 10px; min-height: 2.4em; line-height: 1.2; display: flex; align-items: flex-end; justify-content: center; }
.wx-day .ico { font-size: 22px; margin-bottom: 10px; line-height: 1; }
.wx-day .t { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.wx-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--crimson); font-weight: 600; }
.wx-foot a { color: var(--crimson); }
.wx-foot .arrow { color: rgba(255,255,255,0.5); }

/* Traffic card */
.traffic-card { border: 1px solid var(--rule); background: var(--white); }
.traffic-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 18px 12px; }
.traffic-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--slate); }
.traffic-head .sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--meta); margin-top: 3px; }
.traffic-head .status { text-align: right; }
.traffic-head .status .ok { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #1F6E4A; }
.traffic-head .status .sub { font-family: var(--font-mono); font-size: 10px; color: var(--meta); text-transform: uppercase; }
.traffic-map { aspect-ratio: 16/8; background: linear-gradient(135deg,#e8ebee,#d6dbe0); position: relative; overflow: hidden; }
.traffic-map img { width: 100%; height: 100%; object-fit: cover; }
.traffic-map .map-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--meta); }

/* Live-traffic teaser → click-to-activate (see assets/js/traffic.js) */
.traffic-map .traffic-embed { width: 100%; height: 100%; border: 0; display: block; }
.traffic-live { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.traffic-card.is-live .traffic-live { display: block; }
.traffic-card.is-live .traffic-teaser { display: none; }
.traffic-teaser { position: absolute; inset: 0; }
.traffic-activate { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(28,42,57,0.30); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: background .15s ease; }
.traffic-activate:hover { background: rgba(28,42,57,0.44); }
.traffic-activate .ta-pill { background: var(--crimson); color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 9px 16px; border-radius: 4px; display: inline-flex; align-items: center; gap: 8px; }
.traffic-activate .ta-pill svg { width: 12px; height: 12px; }
.traffic-activate .ta-city { color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.traffic-card.is-activating .traffic-activate { cursor: progress; }
.traffic-card.is-activating .ta-pill { opacity: 0.7; }
/* LIVE badge only appears once the live overlay is actually showing */
.traffic-live-badge { display: none; }
.traffic-card.is-live .traffic-live-badge { display: inline; }
.traffic-delays { padding: 12px 18px 4px; }
.traffic-delays .delays-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--meta); margin-bottom: 8px; }
.delay-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.delay-row:last-of-type { border-bottom: none; }
.delay-row .road { font-family: var(--font-body); font-size: 13px; color: var(--slate); font-weight: 600; }
.delay-row .seg { font-family: var(--font-mono); font-size: 10px; color: var(--meta); text-transform: uppercase; }
.delay-row .mins { text-align: right; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.delay-row .mins .lvl { display: block; font-size: 9px; font-weight: 500; letter-spacing: 0.06em; }
.delay-row .mins.slow { color: var(--crimson); }
.delay-row .mins.mod { color: #B8791C; }
.traffic-foot { padding: 12px 18px 16px; }
.traffic-foot a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); font-weight: 600; display: flex; justify-content: space-between; }
.traffic-foot a:hover { color: var(--crimson); }

/* Calendar */
.cal-card { border: 1px solid var(--rule); background: var(--white); padding: 18px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cal-head .mon { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--slate); text-align: center; flex: 1; }
.cal-head .mon .yr { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--meta); letter-spacing: 0.08em; }
.cal-head .nav { color: var(--meta); cursor: pointer; padding: 4px 8px; }
.cal-head .nav:hover { color: var(--crimson); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; margin-bottom: 16px; }
.cal-grid .dow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--meta); padding: 4px 0 8px; }
.cal-grid .day { font-family: var(--font-mono); font-size: 12px; color: var(--charcoal); padding: 6px 0; }
.cal-grid .day.muted { color: var(--rule-dark); }
.cal-grid .day.today { background: var(--crimson); color: #fff; border-radius: 50%; font-weight: 700; }
.cal-events { display: flex; flex-direction: column; gap: 10px; }
.cal-event { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.cal-event .ce-date { text-align: center; }
.cal-event .ce-date .m { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--crimson); font-weight: 700; }
.cal-event .ce-date .d { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--navy); line-height: 1; }
.cal-event .ce-info .ce-title { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--slate); line-height: 1.2; }
.cal-event .ce-info .ce-meta { font-family: var(--font-mono); font-size: 10px; color: var(--meta); text-transform: uppercase; margin-top: 2px; }
.cal-event .ce-today { font-family: var(--font-mono); font-size: 8.5px; background: var(--cool-gray); color: var(--slate); padding: 2px 6px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }
.cal-event .ce-thumb { width: 40px; height: 40px; background: var(--cool-gray); }
.cal-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.cal-foot a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); font-weight: 600; }
.cal-foot a:hover { color: var(--crimson); }

/* Most Read */
.mostread-list { display: flex; flex-direction: column; background: var(--navy); padding: 8px 22px; }
.mr-item { display: grid; grid-template-columns: 30px 1fr 56px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.mr-item:last-child { border-bottom: none; }
.mr-item .mr-num { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--rule-dark); line-height: 1; }
.mr-item h4 { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; line-height: 1.28; color: var(--slate); }
.mr-item h4 a:hover { color: var(--crimson); }
.mr-item .mr-meta { font-family: var(--font-mono); font-size: 10px; color: var(--meta); text-transform: uppercase; margin-top: 3px; }
.mr-item .mr-thumb { width: 56px; height: 44px; background: var(--cool-gray); object-fit: cover; }
/* Most Read — dark navy variant (Figma) */
/* Most Read: the list IS the navy box; the "Most Read" heading sits OUTSIDE it (Figma) */
.mostread-block .mr-item { border-bottom-color: rgba(255,255,255,0.12); }
.mostread-block .mr-num { color: rgba(255,255,255,0.35); }
.mostread-block .mr-item h4 { color: #fff; }
.mostread-block .mr-item h4 a:hover { color: var(--crimson); }
.mostread-block .mr-item .mr-meta { color: rgba(255,255,255,0.55); }
.mostread-block .mr-item .mr-thumb { background: rgba(255,255,255,0.1); }

/* Newsletter card */
.rail-newsletter { background: var(--navy); color: #fff; padding: 26px 24px; }
.rail-newsletter h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.12; margin-bottom: 12px; }
.rail-newsletter p { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.78); line-height: 1.5; margin-bottom: 16px; }
.rail-newsletter input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.25); padding: 13px 14px; color: #fff; font-family: var(--font-body); font-size: 14px; margin-bottom: 10px; }
.rail-newsletter input::placeholder { color: rgba(255,255,255,0.5); }
.rail-newsletter button { width: 100%; background: var(--crimson); color: #fff; border: none; padding: 13px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.rail-newsletter button:hover { background: var(--crimson-dk); }

/* NETWORK STRIP */
.network-strip { background: var(--navy); color: #fff; padding: 48px 0; }
.network-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.network-item .net-img, .network-item .net-img img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.network-item .net-img { background: #24323f; overflow: hidden; position: relative; }
.network-item .net-img.placeholder { background: linear-gradient(135deg, #2c4054 0%, #0d1620 100%); }
.network-item .net-city { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--crimson); text-transform: uppercase; font-weight: 700; margin: 12px 0 6px; }
.network-item h4 { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.25; margin-bottom: 6px; color: #fff; }
.network-item h4 a:hover { color: var(--crimson); }
.network-item .net-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: rgba(255,255,255,0.5); text-transform: uppercase; }

/* Network Badge — brand stamp attributing network/syndicated content (Figma "Network Badge", Mini variant). */
.sn-netbadge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; box-sizing: border-box; flex: none; }
.sn-netbadge svg { width: 15px; height: 15px; display: block; }
.sn-netbadge--default { background: var(--navy); }
.sn-netbadge--ghost   { background: var(--cool-gray); }
.sn-netbadge--outline { background: transparent; border: 1px solid var(--navy); }
.net-img .sn-netbadge { position: absolute; top: 8px; left: 8px; z-index: 2; }

/* EVENTS */
.events { padding: 56px 0; border-top: 1px solid var(--rule); }
.events-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.event-card { border: 1px solid var(--rule); padding: 24px; background: var(--white); display: grid; grid-template-columns: 76px 1fr; gap: 20px; transition: all 0.15s; }
.event-card:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.event-date { text-align: center; border-right: 1px solid var(--rule); padding-right: 20px; }
.event-date .month { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--crimson); font-weight: 700; }
.event-date .day { font-family: var(--font-display); font-size: 36px; font-weight: 800; line-height: 1; color: var(--navy); margin-top: 2px; }
.event-date .dow { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--meta); margin-top: 4px; }
.event-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.25; margin-bottom: 6px; color: var(--slate); }
.event-card .event-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--meta); text-transform: uppercase; margin-bottom: 8px; }
.event-card p { font-family: var(--font-body); font-size: 13.5px; color: var(--charcoal); line-height: 1.45; }

/* FOOTER */
footer.site-footer { background: var(--navy); color: rgba(255,255,255,0.75); padding: 56px 0 28px; margin-top: 8px; }
.footer-grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px; }
/* 3-zone footer: brand left, Network + CTA grouped right */
.footer-grid--3 { grid-template-columns: 2fr 1fr 1.4fr; }
@media (max-width: 1024px) { .footer-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .footer-grid--3 { grid-template-columns: 1fr; } }
.footer-brand .brand-mark { color: #fff; text-align: left; font-size: 26px; justify-content: flex-start; }
.footer-brand .brand-mark .news { color: var(--crimson); }
.footer-brand .footer-logo { max-height: 44px; width: auto; display: block; }
.footer-brand p { margin-top: 14px; font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.6); max-width: 340px; line-height: 1.55; }
.footer-col h5 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 14px; font-weight: 700; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.65); transition: color 0.15s; }
.footer-col a:hover { color: var(--crimson); }
.footer-cta h5 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 12px; font-weight: 700; }
.footer-cta p { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.5; margin-bottom: 16px; }
.footer-cta .pitch-btn { display: inline-block; border: 1px solid rgba(255,255,255,0.4); color: #fff; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 600; padding: 12px 22px; transition: all 0.15s; }
.footer-cta .pitch-btn:hover { background: var(--crimson); border-color: var(--crimson); }
.footer-bottom { max-width: var(--maxw); margin: 0 auto; padding: 22px var(--gutter) 0; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.45); flex-wrap: wrap; }
.footer-bottom .links { display: flex; gap: 22px; }
.footer-bottom a:hover { color: #fff; }

/* SINGLE ARTICLE */
.article-container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.breadcrumb { border-bottom: 1px solid var(--rule); padding: 16px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--meta); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--crimson); }
.breadcrumb .sep { color: var(--rule-dark); }
.breadcrumb .updated { margin-left: auto; background: var(--highlight); padding: 3px 10px; color: var(--navy); font-weight: 500; }
.article-head h1 { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1.06; letter-spacing: -0.02em; color: var(--slate); margin-bottom: 20px; }
.article-head .deck { font-family: var(--font-body); font-size: 21px; line-height: 1.45; color: var(--charcoal); margin-bottom: 28px; }
.ai-disclosure { background: var(--cool-gray); border-left: 3px solid var(--navy); padding: 14px 18px; font-family: var(--font-body); font-size: 13px; color: var(--charcoal); margin-bottom: 28px; display: flex; gap: 12px; align-items: flex-start; }
.ai-disclosure .ai-icon { width: 22px; height: 22px; background: var(--navy); color: #fff; border-radius: 50%; font-family: var(--font-mono); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.ai-disclosure a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
/* Press-release top disclaimer (small) — mirrors .ai-disclosure, crimson accent */
.pr-disclosure { background: var(--cool-gray); border: 1px solid var(--rule); border-radius: 6px; padding: 12px 16px; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--charcoal); margin: 22px 0 0; display: flex; gap: 10px; align-items: flex-start; }
.pr-disclosure .pr-icon { flex-shrink: 0; margin-top: 1px; color: var(--meta); display: flex; }
.pr-disclosure .pr-icon svg { display: block; }
.pr-disclosure .pr-disclosure-text { margin: 0; }
.pr-disclosure .pr-disclosure-text strong { font-weight: 700; color: var(--slate); }
.byline-block { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
/* Press-release byline: no avatar circle, no role line (wire content) */
.byline-block--pr { grid-template-columns: 1fr auto; }
.byline-block--pr .author-avatar, .byline-block--pr .role { display: none; }
.author-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #5a6d8a, #3d4a6b); border: 2px solid var(--rule); overflow: hidden; }
.author-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.byline-info .author { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--slate); margin-bottom: 2px; }
.byline-info .author a:hover { color: var(--crimson); }
.byline-info .role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--meta); }
.byline-meta { text-align: right; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--meta); }
.byline-meta .pubdate { color: var(--slate); font-weight: 500; }
.article-hero { margin: 0 0 20px; }
.article-hero-img { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: var(--cool-gray); }
.article-hero-img.placeholder { background: linear-gradient(135deg, #2c4054 0%, #1C2A39 50%, #0d1620 100%); }
.article-hero-img img { width: 100%; height: 100%; object-fit: contain; }
.article-hero .caption { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--meta); margin-top: 10px; max-width: 820px; line-height: 1.45; }
.article-hero .credit { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--meta-soft); margin-top: 4px; }
.article-body-wrap { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 88px; max-width: 1672px; margin: 0 auto; padding: 32px 0 48px; align-items: start; }
.article-main { min-width: 0; }
.article-head { max-width: none; margin: 0; padding: 16px 0 28px; }
.article-body { max-width: none; margin: 0; font-family: var(--font-body); font-size: 19px; line-height: 1.65; color: var(--charcoal); }
.article-body p { margin-bottom: 24px; }
.article-body h2 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.2; margin: 40px 0 16px; color: var(--slate); letter-spacing: -0.01em; }
.article-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; margin: 32px 0 12px; color: var(--slate); }
.article-body blockquote { border-left: 3px solid var(--crimson); padding-left: 24px; margin: 32px 0; font-family: var(--font-body); font-style: italic; font-size: 24px; line-height: 1.35; color: var(--slate); }
.article-body blockquote cite, .article-body blockquote .attrib { display: block; font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--meta); margin-top: 14px; }
.article-body a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--rule-dark); }
.article-body a:hover { color: var(--crimson); text-decoration-color: var(--crimson); }
.article-body ul, .article-body ol { margin: 0 0 24px 28px; }
.article-body li { margin-bottom: 8px; }
.article-body img, .article-body figure { margin: 24px 0; }
.article-body figcaption { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--meta); margin-top: 8px; line-height: 1.45; }
.pull-stat { background: var(--cool-gray); padding: 28px; margin: 32px 0; text-align: center; }
.pull-stat .number { font-family: var(--font-display); font-weight: 800; font-size: 52px; line-height: 1; color: var(--crimson); letter-spacing: -0.02em; }
.pull-stat .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--meta); margin-top: 10px; }
.attribution-panel { border: 1px solid var(--rule); padding: 24px 28px; margin: 40px 0; background: var(--cool-gray); }
.attribution-panel h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); margin-bottom: 14px; font-weight: 700; }
.attribution-panel ul { list-style: none; margin: 0; }
.attribution-panel li { padding: 8px 0; border-bottom: 1px dotted var(--rule-dark); font-family: var(--font-body); font-size: 14px; color: var(--charcoal); }
.attribution-panel li:last-child { border-bottom: none; }
.attribution-panel .src { font-weight: 600; color: var(--slate); }
.attribution-panel a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
/* Content-type trust panels (press release / network) — Figma per-type layouts */
.source-panel { margin: 32px 0; padding: 16px 20px; background: var(--cool-gray); border-left: 3px solid var(--crimson); }
.source-panel--network { border-left-color: var(--navy); }
.source-panel--ai { border-left-color: var(--navy); }
.source-panel h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); font-weight: 700; margin: 0 0 8px; }
.source-panel p { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--charcoal); margin: 0 0 8px; }
.source-panel .source-line span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--meta); margin-right: 6px; }
.source-panel .source-link { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--crimson); text-decoration: none; }
.source-panel .source-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; padding: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.article-tags .tag-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--meta); margin-right: 8px; align-self: center; }
.article-tags a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 12px; border: 1px solid var(--rule-dark); color: var(--charcoal); transition: all 0.15s; }
.article-tags a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
/* About The Author block (below tags) */
.author-box { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; margin: 32px 0; padding: 28px 0; border-top: 1px solid var(--rule); }
.author-box-avatar img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.author-box-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); font-weight: 700; margin-bottom: 6px; }
.author-box-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--slate); margin-bottom: 8px; }
.author-box-name a:hover { color: var(--crimson); }
.author-box-bio { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--charcoal); margin: 0; }

/* =========================================================
 * Share controls (real share workflow — see assets/js/share.js)
 * ========================================================= */
.sn-share { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; border: 0; background: transparent; padding: 0; line-height: 0; -webkit-tap-highlight-color: transparent; }
.sn-share svg { display: block; }
.sn-share:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }

/* Consistent keyboard-focus states across controls (Figma "Focused" state). */
.btn-hero:focus-visible, .footer-cta .pitch-btn:focus-visible, .contributor:focus-visible,
.newsletter-cta button:focus-visible, .search-form button:focus-visible, .cat-tab:focus-visible,
.traffic-activate:focus-visible, .pagination a:focus-visible, .city-viewall:focus-visible,
.btn-primary:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.search-form input[type="search"]:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(28,42,57,0.12); }
.mainnav-search:focus-within { border-color: var(--navy); }
.newsletter-cta input:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.20); }

/* Overlay on a card thumbnail */
.sn-share--card { position: absolute; top: 10px; right: 10px; z-index: 2; width: 28px; height: 28px; border-radius: 4px; background: rgba(28,42,57,0.62); transition: background .15s ease; }
.sn-share--card svg { width: 15px; height: 15px; }
.story-img:hover .sn-share--card { background: rgba(28,42,57,0.92); }

/* Sidebar rail */
.rail-meta .sn-share--rail { margin-left: auto; width: 20px; height: 20px; border-radius: 3px; background: var(--cool-gray); color: var(--meta); transition: background .15s ease, color .15s ease; }
.rail-meta .sn-share--rail:hover { background: var(--crimson); color: #fff; }
.rail-meta .sn-share--rail svg { width: 12px; height: 12px; }

/* Article byline */
.byline-meta .sn-share--byline { margin-top: 4px; width: 28px; height: 28px; border-radius: 4px; background: var(--cool-gray); color: var(--slate); transition: background .15s ease, color .15s ease; }
.byline-meta .sn-share--byline:hover { background: var(--crimson); color: #fff; }
.sn-share--byline svg { width: 15px; height: 15px; }

/* Popover menu (appended to <body>, so never clipped by card overflow) */
.sn-share-menu { position: absolute; z-index: 9999; min-width: 168px; padding: 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 28px rgba(17,24,39,0.18); display: flex; flex-direction: column; gap: 2px; font-family: var(--font-display); }
.sn-share-menu[hidden] { display: none; }
.sn-share-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: transparent; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--slate); text-decoration: none; cursor: pointer; text-align: left; }
.sn-share-item:hover, .sn-share-item:focus-visible { background: var(--cool-gray); outline: none; }
.sn-share-item svg { flex: 0 0 auto; color: var(--meta); }
.sn-share-item.is-copied, .sn-share-item.is-copied svg { color: var(--crimson); }
.article-sidebar { display: flex; flex-direction: column; gap: 40px; }
.newsletter-cta { background: var(--navy); color: #fff; padding: 28px; }
.newsletter-cta h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; margin-bottom: 10px; }
.newsletter-cta p { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.75); margin-bottom: 16px; line-height: 1.5; }
.newsletter-cta input { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,0.3); padding: 12px 14px; color: #fff; font-family: var(--font-body); font-size: 14px; margin-bottom: 10px; }
.newsletter-cta input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-cta button { width: 100%; background: var(--crimson); color: #fff; border: none; padding: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.newsletter-cta button:hover { background: var(--crimson-dk); }
.more-coverage { border-top: 1px solid var(--rule); padding: 56px 0; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.related-card .related-img { display: block; aspect-ratio: 16 / 10; margin-bottom: 14px; overflow: hidden; background: var(--cool-gray); }
.related-card .related-img.placeholder { background: linear-gradient(135deg, #cdd3da, #aeb6c0); }
.related-card .related-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.related-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.22; margin-bottom: 8px; color: var(--slate); }
.related-card h3 a:hover { color: var(--crimson); }
.related-card .rel-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--meta); text-transform: uppercase; }
.related-card .cat-sm { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson); font-weight: 700; margin-bottom: 6px; display: block; }
.archive-header { padding: 48px 0; border-bottom: 1px solid var(--rule); }
/* Category pages: drop the divider line above the lead story (Figma: cleaner top,
   no rule + no redundant lead eyebrow). Archive/search keep their divider. */
body.category .archive-header { border-bottom: none; padding-bottom: 28px; }
.archive-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson); font-weight: 700; margin-bottom: 12px; }
.archive-title { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1.05; letter-spacing: -0.02em; color: var(--slate); }
.archive-desc { font-family: var(--font-body); font-size: 18px; color: var(--charcoal); margin-top: 14px; max-width: 720px; line-height: 1.5; }
.pagination { display: flex; gap: 8px; justify-content: center; padding: 32px 0 64px; flex-wrap: wrap; }
.pagination a, .pagination span { font-family: var(--font-mono); font-size: 12px; padding: 8px 14px; border: 1px solid var(--rule-dark); color: var(--charcoal); transition: all 0.15s; }
.pagination a:hover, .pagination .current { background: var(--navy); color: #fff; border-color: var(--navy); }
.error-404 { padding: 80px 0 120px; text-align: center; }
.error-404 .big { font-family: var(--font-display); font-weight: 800; font-size: 140px; line-height: 1; color: var(--crimson); letter-spacing: -0.04em; }
.error-404 h1 { font-family: var(--font-display); font-weight: 600; font-size: 32px; margin: 20px 0 12px; color: var(--slate); }
.error-404 p { font-family: var(--font-body); font-size: 17px; color: var(--charcoal); margin-bottom: 24px; }
.error-404 a.btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; padding: 12px 24px; background: var(--navy); color: #fff; display: inline-block; transition: all 0.15s; }
.error-404 a.btn:hover { background: var(--crimson); }
.search-form { display: flex; gap: 0; max-width: 480px; margin: 0 auto; }
.search-form input[type="search"] { flex: 1; border: 1px solid var(--rule-dark); padding: 12px 16px; font-family: var(--font-body); font-size: 15px; background: var(--white); }
.search-form button { background: var(--navy); color: #fff; border: none; padding: 12px 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer; }
/* Search results — horizontal row list (Figma "Search Results"): thumb + headline + deck + author·time + share. */
.search-results { display: flex; flex-direction: column; }
.search-result { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.search-result:first-child { padding-top: 0; }
.search-result.no-image { grid-template-columns: minmax(0, 1fr); }
.search-result .sr-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cool-gray); }
.search-result .sr-img img { width: 100%; height: 100%; object-fit: cover; }
.search-result h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; color: var(--slate); margin-bottom: 8px; }
.search-result h3 a:hover { color: var(--crimson); }
.search-result .sr-deck { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--charcoal); margin-bottom: 12px; }
.search-result .sr-meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--meta); }
.search-result .sr-meta .author { color: var(--slate); font-weight: 600; }
.search-result .sr-meta .time { color: var(--crimson); }
.search-result .sr-meta .dot { color: var(--rule-dark); }
.search-result .sr-meta .sn-share--rail { margin-left: auto; width: 24px; height: 24px; border-radius: 3px; background: var(--cool-gray); color: var(--meta); transition: background .15s ease, color .15s ease; }
.search-result .sr-meta .sn-share--rail:hover { background: var(--crimson); color: #fff; }
.search-result .sr-meta .sn-share--rail svg { width: 13px; height: 13px; }
@media (max-width: 640px) {
	.search-result { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; padding: 18px 0; }
	.search-result h3 { font-size: 16px; margin-bottom: 6px; }
	.search-result .sr-deck { font-size: 14px; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.comments-area { max-width: 720px; margin: 48px auto; padding: 32px 0; border-top: 1px solid var(--rule); }
.comments-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta); margin-bottom: 18px; }

/* RESPONSIVE */
@media (max-width: 1180px) {
  .main { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
}
@media (max-width: 1024px) {
  .hero-feature .hero-overlay { padding: 32px; }
  .hero-feature h1 { font-size: 36px; }
  .card-row, .card-row.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .card-row.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .tlist { grid-template-columns: repeat(2, 1fr); }
  .hlist { grid-template-columns: 1fr 1fr; }
  .network-grid { grid-template-columns: repeat(2, 1fr); }
  .events-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .article-body-wrap { grid-template-columns: 1fr; gap: 56px; }
  .article-body { max-width: 720px; margin: 0 auto; }
  .article-head h1 { font-size: 38px; }
}
@media (max-width: 640px) {
  .topstrip-inner, .masthead-inner, .mainnav-inner, .trending-inner, .container, .article-container, .footer-grid, .footer-bottom, .topstories-inner { padding-left: 18px; padding-right: 18px; }
  .topstrip-right { display: none; }
  .masthead-inner { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .brand, .masthead-right { justify-content: center; text-align: center; }
  .masthead-right { flex-wrap: wrap; }
  .sidebar { grid-template-columns: minmax(0, 1fr); }
  .card-row.cat-grid { grid-template-columns: 1fr; gap: 24px; }
  .tlist { grid-template-columns: 1fr; }
  .hlist { grid-template-columns: 1fr; }
  .network-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .hero-feature h1 { font-size: 28px; }
  .hero-feature .deck { display: none; }
  .hero-feature .hero-overlay { padding: 22px 22px 48px; }
  .hero-tools { display: none; }
  .article-head h1 { font-size: 30px; }
  .archive-title { font-size: 32px; }
  .error-404 .big { font-size: 96px; }
  /* Hero: deck hidden + share and CTA on one line so it isn't scrunched. */
  .hero-feature .hero-actions { display: flex; flex-direction: row; align-items: center; gap: 12px; }
  .hero-feature .hero-actions .btn-hero { flex: 1; justify-content: center; }
  .hero-feature .hero-actions .sn-share--hero { flex: 0 0 auto; }
  .hero-feature .hero-dots { left: 0; right: 0; justify-content: center; }
  .hero-main { margin-left: -10px; margin-right: -10px; }
  .hero-feature .hero-image { border-radius: 0; } /* full-bleed on mobile — no radius */
  /* Feed sections (Local News, Around [City], National, Most Read) become
     horizontal swipe carousels — one card with the next peeking, snap scroll,
     and a progress indicator injected by carousel.js. Trending stays vertical. */
  .feed-section .card-row, .feed-block .feed-list, .mostread-list {
    display: flex; flex-direction: row; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 -10px; padding: 2px 10px 6px;
  }
  .feed-section .card-row::-webkit-scrollbar,
  .feed-block .feed-list::-webkit-scrollbar,
  .mostread-list::-webkit-scrollbar { display: none; }
  .feed-section .card-row > .story,
  .feed-block .feed-list > .feed-card,
  .mostread-list > .mr-item {
    flex: 0 0 82%; scroll-snap-align: start; margin: 0;
  }
  /* Progress indicator (injected after each carousel by carousel.js). */
  .sn-carousel-ind { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; }
  .sn-carousel-track { position: relative; flex: 1; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
  .sn-carousel-track > i { position: absolute; top: 0; left: 0; height: 100%; min-width: 14%; background: var(--crimson); border-radius: 2px; transition: left 0.2s ease, width 0.2s ease; }
  .sn-carousel-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); white-space: nowrap; }
}

/* =========================================================
   EXTERNAL FEED BLOCKS  (Update 5)
   Source-driven, click-out cards. Deliberately distinct from
   owned ".story" cards: image-light, left navy rule, source
   chip instead of a category eyebrow, persistent outbound ↗.
   ========================================================= */
.feed-block .feed-flag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--meta); font-weight: 600; flex-shrink: 0; }
.feed-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.feed-card { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; background: var(--cool-gray); border-left: 3px solid var(--navy); padding: 14px 16px; transition: background 0.15s; }
.feed-card:hover { background: #eceef1; }
.feed-card .feed-thumb { width: 72px; }
.feed-card .feed-thumb, .feed-card .feed-thumb img { width: 72px; height: 72px; object-fit: cover; background: var(--rule); }
.feed-card .feed-body { min-width: 0; }
.feed-src { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; color: var(--navy); background: #fff; border: 1px solid var(--rule-dark); padding: 2px 7px; margin-bottom: 8px; }
.feed-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.28; margin-bottom: 8px; color: var(--slate); }
.feed-card h4 a { display: inline; }
.feed-card h4 a:hover { color: var(--crimson); }
.feed-card h4 a .feed-arrow,
.feed-arrow { font-family: var(--font-mono); font-weight: 700; color: var(--navy) !important; margin-left: 5px; font-size: 13px; }
.feed-card h4 a:hover .feed-arrow { color: var(--crimson); }
.feed-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--meta); text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.feed-meta .feed-from { color: var(--ink-soft); font-weight: 600; }
.feed-meta .dot { color: var(--rule-dark); }
@media (max-width: 640px) { .feed-list { grid-template-columns: 1fr; } }

.traffic-card .traffic-map { display: block; text-decoration: none; color: inherit; }

/* CATEGORY PAGE — lead story + tabs */
.cat-lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; margin-bottom: 36px; align-items: center; }
.cat-lead-img { display: block; position: relative; overflow: hidden; aspect-ratio: 16 / 11; width: 100%; background: var(--cool-gray); }
/* Full image shown (contain), so off-ratio art (logos, verticals) isn't cropped —
   same idea as the trending rail. The empty space is filled with a blurred, zoomed
   copy of the SAME image (--lead-bg, set inline in category.php) instead of flat gray,
   the standard "blurred backdrop" treatment used in broadcast/online for odd-ratio media. */
.cat-lead-img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.cat-lead-img::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--lead-bg); background-size: cover; background-position: center; filter: blur(22px); transform: scale(1.12); }
.cat-lead-img.placeholder { background: linear-gradient(135deg,#cdd3da,#aeb6c0); }
.cat-lead-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--meta); margin-bottom: 14px; display: flex; gap: 12px; align-items: center; }
.cat-lead-eyebrow .sep { opacity: 0.4; }
.cat-lead-body h2 { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; color: var(--slate); margin-bottom: 14px; }
.cat-lead-body h2 a:hover { color: var(--crimson); }
.cat-lead-deck { font-family: var(--font-body); font-size: 17px; line-height: 1.5; color: var(--charcoal); margin-bottom: 16px; }
.cat-lead-byline { margin-bottom: 20px; }

.cat-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--rule); margin-bottom: 28px; }
.cat-tab { background: none; border: none; padding: 0 0 14px; cursor: pointer; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700; color: var(--meta); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; }
.cat-tab:hover { color: var(--slate); }
.cat-tab.is-active { color: var(--crimson); border-bottom-color: var(--crimson); }

.cat-grid { margin-bottom: 40px; }
@media (max-width: 1024px) { .cat-lead { grid-template-columns: 1fr; } }

/* =========================================================
   BATCH UPDATE — listing grid, author page, footer social,
   branded fallbacks, card hover (June 2026)
   ========================================================= */

/* LISTING GRID — used by archive/author/search listings (.feed-grid was
   referenced in templates but never defined, so cards stacked full-width). */
.feed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; margin-bottom: 8px; }
@media (max-width: 1024px) { .feed-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .feed-grid { grid-template-columns: 1fr; } }

/* CARD HOVER — subtle image zoom on owned story/related cards */
.story .story-img img, .related-card .related-img img, .hcard .hcard-img img { transition: transform 0.4s ease; }
.story:hover .story-img img, .related-card:hover .related-img img, .hcard:hover .hcard-img img { transform: scale(1.04); }

/* BRANDED IMAGE FALLBACK — navy SignalNews "signal wave" placeholder.
   Repoints the previously light-gray placeholders to the brand navy so the
   white signal mark reads, and centers the mark. */
.story-img.placeholder,
.hcard .hcard-img.placeholder,
.tcard .tcard-img.placeholder,
.related-card .related-img.placeholder,
.cat-lead-img.placeholder { background: linear-gradient(135deg, #24323f 0%, #1C2A39 60%, #0d1620 100%); }
.story-img.placeholder, .hcard-img.placeholder, .tcard-img.placeholder, .related-img.placeholder,
.cat-lead-img.placeholder, .net-img.placeholder, .rail-img.placeholder, .article-hero-img.placeholder,
.hero-image.placeholder { display: flex; align-items: center; justify-content: center; position: relative; }
.sn-mark { display: flex; align-items: center; justify-content: center; width: 40%; max-width: 132px; pointer-events: none; }
.sn-mark svg { width: 100%; height: auto; opacity: 0.9; }
.tcard .tcard-img .sn-mark, .rail-img .sn-mark { width: 56%; max-width: 60px; }

/* AUTHOR PROFILE PAGE */
/* AUTHOR / CONTRIBUTOR PROFILE — Figma "Author public profile" layout */
.author-profile { display: grid; grid-template-columns: 140px 1fr auto; gap: 32px; align-items: center; padding: 44px 0; border-bottom: 1px solid var(--rule); }
.author-profile .ap-avatar img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 3px solid var(--rule); }
.author-profile .ap-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson); font-weight: 700; margin-bottom: 8px; }
.author-profile h1 { font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1.05; letter-spacing: -0.02em; color: var(--slate); }
.author-profile .ap-loc { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--meta); margin-top: 8px; }
.author-profile .ap-loc svg { color: var(--crimson); }
.author-profile .ap-bio { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--charcoal); margin-top: 12px; max-width: 620px; }
.author-profile .ap-social { display: flex; gap: 12px; margin-top: 16px; }
.author-profile .ap-social a { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-dark); border-radius: 50%; color: var(--meta); transition: all 0.15s; }
.author-profile .ap-social a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.author-profile .ap-social svg { width: 15px; height: 15px; fill: currentColor; }
/* Stats block (top-right of hero) */
.author-stats { display: flex; flex-direction: column; gap: 18px; min-width: 180px; }
.author-stats .ap-stat { display: flex; flex-direction: column; }
.author-stats .num { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--slate); }
.author-stats .lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); margin-top: 5px; }
/* Body: About + Categories Covered sidebar | Published Articles grid */
.author-body { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding: 32px 0 56px; align-items: start; }
.author-meta { display: flex; flex-direction: column; gap: 28px; }
.author-meta h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); font-weight: 700; margin-bottom: 12px; }
.author-about p { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--charcoal); margin-bottom: 10px; }
.author-about .ap-joined { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--meta); }
.author-cats ul { list-style: none; margin: 0; }
.author-cats li { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.author-cats li:last-child { border-bottom: none; }
.author-cats a { font-family: var(--font-display); font-size: 15px; color: var(--slate); }
.author-cats a:hover { color: var(--crimson); }
.author-articles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; margin-top: 8px; }
.author-acard { border-top: 2px solid var(--slate); padding-top: 12px; }
.author-acard .chip { margin-bottom: 8px; }
.author-acard h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.3; margin-bottom: 8px; }
.author-acard h3 a { color: var(--slate); }
.author-acard h3 a:hover { color: var(--crimson); }
.author-acard .byline { font-family: var(--font-mono); font-size: 11px; color: var(--crimson); }
.author-empty { padding: 60px 0; text-align: center; color: var(--meta); }
.author-empty h2 { font-family: var(--font-display); font-size: 22px; margin-bottom: 10px; color: var(--slate); }
@media (max-width: 1024px) { .author-articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
	.author-profile { grid-template-columns: 110px 1fr; }
	.author-stats { grid-column: 1 / -1; flex-direction: row; gap: 28px; min-width: 0; margin-top: 4px; }
	.author-body { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
	.author-profile { grid-template-columns: 1fr; text-align: center; gap: 16px; }
	.author-profile .ap-avatar img { margin: 0 auto; }
	.author-profile .ap-loc, .author-profile .ap-social { justify-content: center; }
	.author-profile .ap-bio { margin-left: auto; margin-right: auto; }
	.author-stats { justify-content: center; flex-wrap: wrap; }
	.author-articles-grid { grid-template-columns: 1fr; }
}

/* FOOTER — social icon row + city sub-label on logo */
.footer-brand .footer-city { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 8px; }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.22); border-radius: 50%; color: rgba(255,255,255,0.78); transition: all 0.15s; }
.footer-social a:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }