/* ==========================================================================
   BW Security World - Modern Tech & Corporate Typography
   Handcrafted Typography, Asymmetric Editorial Rhythm, Distinct Journalistic Gravitas
   
   Document Color Palette:
   - Steel Grey: #55657A (Structural foundation, tabs bar, section accents)
   - Intelligence Crimson Red: #DC2626 / #B91C1C (High-value editorial highlights, CTA, alerts)
   - Rule Grey: #C9D1DC (Hairline dividers, border rules, sub-elements)
   - Deep Steel Canvas: #0F1722 / #151F2C (Deep, rich broadsheet navy)
   
   Typography:
   - Headlines: 'Outfit' & 'Montserrat' (Modern tech & corporate executive sans)
   - Body & Micro-copy: 'Inter' (Sharp, highly legible modern sans)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Outfit:wght@400;500;600;700;800&display=swap');

:root,
[data-theme="light"] {
  /* Brand Foundation Swatches */
  --steel: #55657A;
  --steel-deep: #3A4654;
  --steel-light: #708197;
  --steel-soft: rgba(85, 101, 122, 0.12);

  /* Cyber Blue & Slate Palette in Light Mode: Executive Sapphire Blue with WCAG AAA Contrast */
  --cyber-blue: #0284C7;
  --cyber-blue-hover: #0369A1;
  --cyber-blue-deep: #0369A1;
  --cyber-blue-glow: rgba(2, 132, 199, 0.25);
  --cyber-blue-tint: rgba(2, 132, 199, 0.08);

  /* Primary Interactive Action Swatch (Light Mode: Authoritative Sapphire Blue with pure white text) */
  --btn-primary-bg: #0284C7;
  --btn-primary-hover: #0369A1;
  --btn-primary-text: #FFFFFF;
  --btn-primary-glow: rgba(2, 132, 199, 0.25);

  /* Backward-compatible mappings: Map amber & red aliases directly to Cyber Blue */
  --signal-amber: #0284C7;
  --signal-amber-hover: #0369A1;
  --signal-amber-glow: rgba(2, 132, 199, 0.25);
  --signal-amber-tint: rgba(2, 132, 199, 0.08);
  --signal-amber-text: #0284C7;
  --bw-red: #0284C7;
  --bw-red-hover: #0369A1;
  --bw-red-glow: rgba(2, 132, 199, 0.25);
  --bw-red-tint: rgba(2, 132, 199, 0.08);

  --rule-grey: #64748B;
  --rule-grey-border: rgba(100, 116, 139, 0.22);
  --rule-grey-subtle: rgba(100, 116, 139, 0.10);
  --rule-grey-solid: #CBD5E1;

  /* True Unified Light Mode Broadsheet Canvas (Default) */
  --bg-canvas: #F4F6F9;
  --bg-masthead: #FFFFFF;
  --bg-panel: #FFFFFF;
  --bg-panel-elevated: #F8FAFC;
  --bg-wire: #EBF0F5;
  --bg-footer: #F1F5F9;

  /* Typographic Inks */
  --ink-white: #0F172A;
  --ink-heading: #0F172A;
  --ink-body: #334155;
  --ink-secondary: #64748B;
  --ink-muted: #94A3B8;
  --ink-dark: #0A0F17;

  /* Type Stacks */
  --font-heading: 'Outfit', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Outfit', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Proportions */
  --container-width: 1280px;
  --radius-sharp: 2px;
  --radius-subtle: 4px;

  /* Elevation */
  --card-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  --card-shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.12);

  color-scheme: light;
}

[data-theme="dark"] {
  /* Brand Foundation Swatches */
  --steel: #55657A;
  --steel-deep: #3A4654;
  --steel-light: #708197;
  --steel-soft: rgba(85, 101, 122, 0.18);

  /* Cyber Blue & Slate Palette: Derived directly from 'SECURITY WORLD' logo */
  --cyber-blue: #00CFFF;
  --cyber-blue-hover: #38BDF8;
  --cyber-blue-deep: #0284C7;
  --cyber-blue-glow: rgba(0, 207, 255, 0.35);
  --cyber-blue-tint: rgba(0, 207, 255, 0.12);

  /* Primary Interactive Action Swatch (Dark Mode: Radiant Cyber Blue with dark ink) */
  --btn-primary-bg: #00CFFF;
  --btn-primary-hover: #38BDF8;
  --btn-primary-text: #070B11;
  --btn-primary-glow: rgba(0, 207, 255, 0.35);

  /* Backward-compatible mappings: Map amber & red aliases directly to Cyber Blue */
  --signal-amber: #00CFFF;
  --signal-amber-hover: #38BDF8;
  --signal-amber-glow: rgba(0, 207, 255, 0.35);
  --signal-amber-tint: rgba(0, 207, 255, 0.12);
  --signal-amber-text: #00CFFF;
  --bw-red: #00CFFF;
  --bw-red-hover: #38BDF8;
  --bw-red-glow: rgba(0, 207, 255, 0.35);
  --bw-red-tint: rgba(0, 207, 255, 0.12);

  --rule-grey: #C9D1DC;
  --rule-grey-border: rgba(201, 209, 220, 0.24);
  --rule-grey-subtle: rgba(201, 209, 220, 0.12);
  --rule-grey-solid: #C9D1DC;

  /* Editorial Broadside Canvas */
  --bg-canvas: #0F1722;
  --bg-masthead: #121A26;
  --bg-panel: #16202E;
  --bg-panel-elevated: #1B2737;
  --bg-wire: #111822;
  --bg-footer: #070B11;

  /* Typographic Inks */
  --ink-white: #FFFFFF;
  --ink-heading: #F8FAFC;
  --ink-body: #CBD5E1;
  --ink-secondary: #94A3B8;
  --ink-muted: #64748B;
  --ink-dark: #0A0F17;

  /* Type Stacks */
  --font-heading: 'Outfit', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Outfit', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Proportions */
  --container-width: 1280px;
  --radius-sharp: 2px;
  --radius-subtle: 4px;

  /* Elevation */
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  --card-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}


/* ==========================================================================
   Brand Logo Dynamic Theme Presentation
   Guaranteed Crisp Display Across Dark & Light Modes Without Filters
   Default: Light Mode (bw-logo-light.png)
   Dark Mode: Dark Mode (bw-logo.png)
   ========================================================================== */
.logo-light,
[data-theme="light"] .logo-light,
:root:not([data-theme="dark"]) .logo-light {
  display: block !important;
}

.logo-dark,
[data-theme="light"] .logo-dark,
:root:not([data-theme="dark"]) .logo-dark {
  display: none !important;
}

[data-theme="dark"] .logo-light {
  display: none !important;
}

[data-theme="dark"] .logo-dark {
  display: block !important;
}

.footer-logo-img {
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: 12px;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--bg-canvas);
  overflow-x: clip;
  max-width: 100vw;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-canvas);
  color: var(--ink-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  transition: background-color 0.25s ease, color 0.25s ease;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.015em;
}

/* Master Container */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ==========================================================================
   1. Broadsheet Masthead Header
   - High-prestige editorial identity
   - Official Logo + Tagline: "Security, Decoded."
   - Editorial Folio & Intelligence Telemetry
   ========================================================================== */
.broadsheet-masthead {
  background-color: var(--bg-masthead);
  border-bottom: 1px solid var(--rule-grey-border);
  padding: 20px 0 16px 0;
  position: relative;
}

.masthead-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule-grey-subtle);
  font-size: 0.76rem;
  color: var(--ink-secondary);
}

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

.masthead-edition {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-color: var(--steel-deep);
  color: #FFFFFF;
  padding: 2px 7px;
  border-radius: var(--radius-sharp);
}

.masthead-date {
  font-weight: 600;
  color: var(--rule-grey);
}

.masthead-threat-index {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cyber-blue);
  font-weight: 600;
}

.threat-pulse {
  width: 7px;
  height: 7px;
  background-color: var(--cyber-blue);
  border-radius: 50%;
  animation: pulseBlink 1.8s infinite ease-in-out;
}

@keyframes pulseBlink {

  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

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

.linkedin-masthead-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rule-grey);
  font-weight: 600;
  font-size: 0.76rem;
}

.linkedin-masthead-link:hover {
  color: #0077b5;
}

/* Center Identity Lockup */
.masthead-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand-anchor-left a {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
}

.brand-logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

/* Requested Tagline: "Security, Decoded." */
.brand-editorial-tagline {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--cyber-blue);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-editorial-tagline::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background-color: var(--steel);
}

.masthead-conclave-badge {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #182332 0%, #111824 100%);
  border: 1px solid var(--rule-grey-border);
  border-left: 3px solid var(--cyber-blue);
  padding: 8px 16px;
  gap: 12px;
  border-radius: var(--radius-sharp);
}

.conclave-badge-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyber-blue);
  white-space: nowrap;
}

.conclave-badge-text {
  font-size: 0.8rem;
  color: var(--rule-grey);
  white-space: nowrap;
}

.conclave-badge-text strong {
  color: #FFFFFF;
}

/* ==========================================================================
   2. Main Navigation Bar (Steel Grey #55657A with Rule Grey #C9D1DC)
   - Categories shifted to right side
   - Distinct double-rule & hairline borders
   - Subscribe CTA in Signal Amber (#E8A317)
   ========================================================================== */
.main-nav-bar {
  background-color: var(--steel);
  border-top: 2px solid var(--rule-grey-border);
  border-bottom: 2px solid var(--steel-deep);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  width: 100%;
  transition: box-shadow 0.2s ease;
}

/* Mobile Hamburger Button (Hidden on Desktop) */
.btn-mobile-hamburger {
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--rule-grey-border);
  border-radius: var(--radius-sharp);
  padding: 6px 12px;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 36px;
  align-self: center;
}

.btn-mobile-hamburger:hover {
  background-color: var(--steel-deep);
  border-color: var(--cyber-blue);
}

.hamburger-box {
  width: 18px;
  height: 13px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #FFFFFF;
  border-radius: 1px;
  transition: transform 0.22s ease, opacity 0.22s ease, background-color 0.22s ease;
}

.hamburger-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rule-grey);
}

.btn-mobile-hamburger.is-active .hamburger-label {
  color: var(--cyber-blue);
}

/* Morph to ✕ */
.btn-mobile-hamburger.is-active .hamburger-line:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
  background-color: var(--cyber-blue);
}

.btn-mobile-hamburger.is-active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.btn-mobile-hamburger.is-active .hamburger-line:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
  background-color: var(--cyber-blue);
}

.nav-bar-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 48px;
}

.nav-tabs-list {
  display: flex;
  align-items: stretch;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.nav-tab-item {
  position: relative;
  /* Rule grey dividers between tabs */
  border-left: 1px solid var(--rule-grey-border);
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  height: 100%;
}

.nav-tab-item:last-of-type {
  border-right: 1px solid var(--rule-grey-border);
}

.nav-tab-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: 100%;
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.nav-tab-link:hover,
.nav-tab-item.active .nav-tab-link {
  background-color: var(--steel-deep);
  color: var(--cyber-blue);
}

.nav-tab-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--cyber-blue);
}

.nav-chevron {
  width: 9px;
  height: 9px;
  stroke: var(--rule-grey);
  transition: transform 0.2s ease;
}

.nav-tab-item:hover .nav-chevron,
.nav-tab-item:focus-within .nav-chevron,
.nav-tab-item.dropdown-active .nav-chevron {
  transform: rotate(180deg);
  stroke: var(--cyber-blue);
}

/* High-End Editorial Dropdown */
.editorial-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background-color: var(--bg-panel);
  border: 1px solid var(--steel);
  border-top: 3px solid var(--cyber-blue);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.75);
  list-style: none;
  padding: 6px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
  z-index: 1200;
  pointer-events: none;
}

.nav-tab-item:hover .editorial-dropdown,
.nav-tab-item:focus-within .editorial-dropdown,
.nav-tab-item.dropdown-active .editorial-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-tab-item:last-of-type .editorial-dropdown {
  left: auto;
  right: 0;
}

.dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--rule-grey);
  border-bottom: 1px solid var(--rule-grey-subtle);
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}

.editorial-dropdown li:last-child .dropdown-link {
  border-bottom: none;
}

.dropdown-link:hover,
.dropdown-link.active-sublink {
  background-color: var(--steel-deep);
  color: var(--cyber-blue);
  padding-left: 22px;
}

/* Right Nav Actions (Subscribe + Search) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding-left: 16px;
  flex-shrink: 0;
  align-self: center;
}

/* Subscribe button in Signal Amber #E8A317 */
.btn-amber-subscribe {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--radius-sharp);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 14px var(--btn-primary-glow);
  transition: all 0.2s ease;
  white-space: nowrap;
  box-sizing: border-box;
  border: none;
}

.btn-amber-subscribe:hover {
  background-color: var(--btn-primary-hover);
  color: var(--btn-primary-text);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--btn-primary-glow);
}

/* Theme Toggle Button - Light Editorial Mode by Default */
.btn-theme-toggle {
  width: 34px;
  height: 34px;
  background-color: #F1F5F9;
  color: #0F172A;
  border: 1px solid rgba(100, 116, 139, 0.25);
  border-radius: var(--radius-sharp);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.btn-theme-toggle:hover {
  background-color: var(--cyber-blue);
  color: var(--btn-primary-text);
  border-color: var(--cyber-blue);
  transform: rotate(18deg) scale(1.05);
}

[data-theme="dark"] .btn-theme-toggle {
  background-color: var(--steel-deep) !important;
  color: #FFFFFF !important;
  border-color: var(--rule-grey-border) !important;
}

[data-theme="dark"] .btn-theme-toggle:hover {
  background-color: var(--cyber-blue) !important;
  color: #070B11 !important;
  border-color: var(--cyber-blue) !important;
}

.theme-icon-sun,
.theme-icon-moon {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Icon visibility according to theme - Light Mode shows Moon (Switch to Dark), Dark Mode shows Sun (Switch to Light) */
.theme-icon-sun,
[data-theme="light"] .theme-icon-sun,
:root:not([data-theme="dark"]) .theme-icon-sun {
  display: none !important;
}

.theme-icon-moon,
[data-theme="light"] .theme-icon-moon,
:root:not([data-theme="dark"]) .theme-icon-moon {
  display: block !important;
  color: #0F172A !important;
}

[data-theme="dark"] .theme-icon-moon {
  display: none !important;
}

[data-theme="dark"] .theme-icon-sun {
  display: block !important;
  color: #F8FAFC !important;
}

.btn-nav-search {
  width: 34px;
  height: 34px;
  background-color: var(--steel-deep);
  color: var(--rule-grey);
  border-radius: var(--radius-sharp);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.btn-nav-search:hover {
  background-color: var(--cyber-blue);
  color: #FFFFFF;
}

/* ==========================================================================
   3. The Intelligence Wire Ticker: "Latest News"
   
   - Crisp wire telemetry
   ========================================================================== */
.ticker-bar {
  background-color: var(--bg-wire);
  border-bottom: 1px solid var(--rule-grey-border);
  padding: 8px 0;
  width: 100%;
}

.ticker-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ticker-headline-tag {
  background-color: var(--cyber-blue);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-sharp);
  flex-shrink: 0;
  white-space: nowrap;
}

.ticker-marquee {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  height: 22px;
  position: relative;
}

.ticker-list {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
}

.ticker-row {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ticker-time-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cyber-blue);
  flex-shrink: 0;
  font-family: monospace;
}

.ticker-row a {
  color: var(--ink-heading);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticker-row a:hover {
  color: var(--cyber-blue);
  text-decoration: underline;
}

.ticker-nav-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.ticker-btn {
  width: 22px;
  height: 22px;
  background-color: var(--bg-panel);
  border: 1px solid var(--rule-grey-border);
  color: var(--rule-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  border-radius: var(--radius-sharp);
}

.ticker-btn:hover {
  background-color: var(--steel);
  color: #FFFFFF;
}

/* ==========================================================================
   4. Production Top Image Ads Row (Ads 1 & Ads 2)
   ========================================================================== */
.top-banner-ads-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin: 20px 0 30px 0;
  width: 100%;
}

.top-ad-slot {
  min-width: 0;
}

.top-image-ad-link {
  display: block;
  width: 100%;
  border-radius: var(--radius-sharp);
  overflow: hidden;
  border: 1px solid var(--rule-grey-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.top-image-ad-link:hover {
  transform: translateY(-2px);
  border-color: var(--cyber-blue);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.15), 0 4px 18px rgba(0, 0, 0, 0.5);
}

.top-image-ad-link img {
  width: 100%;
  height: auto;
  display: block;
}

.in-feed-ad-banner {
  margin: 26px 0;
  width: 100%;
}

.in-feed-ad-link {
  display: block;
  width: 100%;
  border-radius: var(--radius-sharp);
  overflow: hidden;
  border: 1px solid var(--rule-grey-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.in-feed-ad-link:hover {
  transform: translateY(-2px);
  border-color: var(--cyber-blue);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.15), 0 4px 18px rgba(0, 0, 0, 0.5);
}

.in-feed-ad-link img {
  width: 100%;
  height: auto;
  display: block;
}

.leaderboard-ad-container {
  background: linear-gradient(135deg, #172332 0%, #101924 100%);
  border: 1px solid var(--rule-grey-border);
  border-left: 3px solid var(--cyber-blue);
  border-radius: var(--radius-sharp);
  padding: 16px 24px;
  margin: 22px 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.ad-disclaimer {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 800;
}

.leaderboard-ad-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.ad-copy-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 0;
}

.ad-pill {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--cyber-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ad-headline {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: #FFFFFF;
  line-height: 1.3;
}

.ad-details {
  font-size: 0.8rem;
  color: var(--rule-grey);
}

.ad-cta-button {
  background-color: var(--cyber-blue);
  color: var(--ink-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: var(--radius-sharp);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.ad-cta-button:hover {
  background-color: var(--cyber-blue-hover);
  transform: translateY(-1px);
}

/* ==========================================================================
   5. Editorial Section Title Bars
   - True broadsheet double-rule treatment
   ========================================================================== */
.editorial-title-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 2px solid var(--steel);
  border-bottom: 1px solid var(--rule-grey-border);
  padding: 10px 0;
  margin-bottom: 24px;
  position: relative;
  flex-wrap: wrap;
  gap: 10px;
}

.editorial-title-text {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 12px;
  font-optical-sizing: auto;
}

.title-subtext {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--ink-secondary);
  font-weight: 500;
}

.title-action-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--cyber-blue);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.title-action-link:hover {
  color: var(--cyber-blue);
  text-decoration: underline;
}

/* ==========================================================================
   6. Hero Editorial Showcase (Dynamic, Asymmetric Broadside Architecture)
   - Left: Major Lead Investigation (Rich typography, pull-quote deck)
   - Center: Executive Q&A Focus Card (High-touch editorial framing)
   - Right: The Intelligence Dispatch Wire (Fast chronological feed)
   ========================================================================== */
.hero-editorial-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 0.95fr;
  gap: 24px;
  margin-bottom: 44px;
  width: 100%;
}

/* Lead Feature Article */
.lead-feature-article {
  background-color: var(--bg-panel);
  border: 1px solid var(--rule-grey-border);
  border-top: 3px solid var(--cyber-blue);
  border-radius: var(--radius-sharp);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.lead-feature-article:hover {
  border-color: var(--steel-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.lead-media-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  background-color: #000;
  position: relative;
}

.lead-media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.lead-feature-article:hover .lead-media-wrap img {
  transform: scale(1.03);
}

.media-caption-tag {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background-color: rgba(10, 15, 23, 0.8);
  color: var(--rule-grey);
  font-size: 0.64rem;
  padding: 2px 6px;
  border-radius: var(--radius-sharp);
  font-family: monospace;
}

.lead-article-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.category-eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyber-blue);
  margin-bottom: 10px;
}

.lead-headline-serif {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  line-height: 1.24;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 12px;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
  word-break: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lead-headline-serif a:hover {
  color: var(--cyber-blue);
}

/* Italic Standfirst / Deck - Hallmark of elite human journalism */
.lead-standfirst {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  font-style: italic;
  color: var(--rule-grey);
  line-height: 1.55;
  margin-bottom: 16px;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 12;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editorial-meta-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  color: var(--ink-secondary);
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule-grey-subtle);
  flex-wrap: wrap;
}

.meta-author-name {
  color: var(--rule-grey);
  font-weight: 700;
}

.meta-reading-time {
  margin-left: auto;
  color: var(--cyber-blue);
  font-weight: 700;
}

/* Center Column: Executive Q&A & Strategic Companion */
.hero-center-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.card-article-compact {
  background-color: var(--bg-panel);
  border: 1px solid var(--rule-grey-border);
  border-radius: var(--radius-sharp);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.card-article-compact:hover {
  border-color: var(--steel-light);
  transform: translateY(-2px);
}

.compact-media-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.compact-media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card-article-compact:hover .compact-media-wrap img {
  transform: scale(1.03);
}

.compact-article-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.compact-headline-serif {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.32;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 8px;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.compact-headline-serif a:hover {
  color: var(--cyber-blue);
}

/* Right Column: Two Distinct Separate Boxes (Ads 3 + The Intelligence Wire) */
.hero-right-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.hero-ad-box {
  min-width: 0;
}

.hero-dispatches-box,
.hero-dispatches-col {
  background-color: var(--bg-panel);
  border: 1px solid var(--steel);
  border-radius: var(--radius-sharp);
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hero-sidebar-ad-card {
  margin-bottom: 20px;
  min-width: 0;
}

.hero-ad-link {
  display: block;
  width: 100%;
  border-radius: var(--radius-sharp);
  overflow: hidden;
  border: 1px solid var(--rule-grey-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hero-ad-link:hover {
  transform: translateY(-2px);
  border-color: var(--cyber-blue);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.15), 0 4px 18px rgba(0, 0, 0, 0.5);
}

.hero-ad-link img {
  width: 100%;
  height: auto;
  display: block;
}

.dispatches-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule-grey-border);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.dispatches-header h3 {
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyber-blue);
  font-weight: 800;
}

.dispatch-items-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.dispatch-item {
  border-bottom: 1px solid var(--rule-grey-subtle);
  padding-bottom: 14px;
  min-width: 0;
}

.dispatch-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dispatch-headline {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.36;
  color: var(--ink-heading);
  margin-bottom: 6px;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dispatch-headline a:hover {
  color: var(--cyber-blue);
}

.dispatch-timestamp {
  font-size: 0.72rem;
  color: var(--ink-secondary);
}

/* ==========================================================================
   7. Dedicated Cyber Security Column (Dossier & Threat Register)
   - Replaces generic cards with an authentic intelligence column
   - Includes "Read More" button on every item
   ========================================================================== */
.cyber-security-section {
  margin: 20px 0 48px 0;
  width: 100%;
}

.cyber-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

.cyber-feature-card {
  background-color: var(--bg-panel);
  border: 1px solid var(--rule-grey-border);
  border-top: 3px solid var(--steel-light);
  border-radius: var(--radius-sharp);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.cyber-feature-card:hover {
  border-color: var(--cyber-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.cyber-media-slot {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}

.cyber-media-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.cyber-feature-card:hover .cyber-media-slot img {
  transform: scale(1.04);
}

.cyber-sub-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(15, 23, 34, 0.92);
  color: var(--cyber-blue);
  border: 1px solid var(--cyber-blue);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 7px 1px;
  border-radius: var(--radius-sharp);
}

.cyber-card-content {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.cyber-headline-serif {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.34;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 8px;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cyber-headline-serif a:hover {
  color: var(--cyber-blue);
}

.cyber-summary-text {
  font-size: 0.86rem;
  color: var(--ink-body);
  line-height: 1.5;
  margin-bottom: 16px;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Read More Action Button */
.cyber-card-action-bar {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--rule-grey-subtle);
}

.btn-read-more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--bg-canvas);
  color: var(--cyber-blue);
  border: 1px solid var(--steel);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border-radius: var(--radius-sharp);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-read-more-link:hover {
  background-color: var(--cyber-blue);
  color: var(--ink-dark);
  border-color: var(--cyber-blue);
}

.cyber-publish-date {
  font-size: 0.74rem;
  color: var(--ink-secondary);
}

/* ==========================================================================
   8. Editorial Soundbite Pullquote Block
   ========================================================================== */
.editorial-quote-strip {
  background: linear-gradient(90deg, #162232 0%, #111824 100%);
  border: 1px solid var(--rule-grey-border);
  border-left: 4px solid var(--cyber-blue);
  padding: 20px 28px;
  margin: 32px 0 40px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.quote-prose {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  color: #FFFFFF;
  line-height: 1.45;
  flex: 1 1 500px;
}

.quote-attribution {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--cyber-blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* ==========================================================================
   9. Main Editorial Stream & Right Rail
   ========================================================================== */
.editorial-body-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  margin-bottom: 60px;
  width: 100%;
  align-items: start;
}

.editorial-feed-section {
  min-width: 0;
}

.editorial-feed-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feed-story-row {
  background-color: var(--bg-panel);
  border: 1px solid var(--rule-grey-border);
  border-radius: var(--radius-sharp);
  padding: 20px;
  display: flex;
  gap: 20px;
  min-width: 0;
  align-items: stretch;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.feed-story-row:hover {
  border-color: var(--steel-light);
  transform: translateY(-2px);
}

.feed-thumb-slot {
  width: 210px;
  height: 135px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-sharp);
}

.feed-thumb-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.feed-story-row:hover .feed-thumb-slot img {
  transform: scale(1.04);
}

.feed-story-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.feed-headline-serif {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  line-height: 1.34;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 6px;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-headline-serif a:hover {
  color: var(--cyber-blue);
}

.feed-excerpt-text {
  font-size: 0.86rem;
  color: var(--ink-body);
  line-height: 1.48;
  margin-bottom: 10px;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pagination Controls */
.editorial-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-grey-border);
}

.btn-editorial-load-more {
  background-color: var(--bg-panel);
  color: #FFFFFF;
  border: 1px solid var(--steel);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: var(--radius-sharp);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-editorial-load-more:hover {
  background-color: var(--steel);
  border-color: var(--rule-grey);
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.page-num-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-panel);
  border: 1px solid var(--rule-grey-border);
  color: var(--rule-grey);
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: var(--radius-sharp);
  transition: all 0.15s ease;
}

.page-num-btn:hover {
  background-color: var(--steel);
  color: #FFFFFF;
}

.page-num-btn.active {
  background-color: var(--cyber-blue);
  color: var(--ink-dark);
  border-color: var(--cyber-blue);
  font-weight: 800;
}

/* Inactive Page Numbers */
.page-num-btn,
.pagination-controls a.page-num-btn,
.pagination-controls a.page-numbers,
.pagination-controls .page-numbers:not(.current):not(.dots):not(.next):not(.prev) {
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #FFFFFF !important;
  border: 1px solid rgba(100, 116, 139, 0.28) !important;
  color: #1E293B !important;
  font-family: var(--font-heading, 'Outfit', 'Montserrat', sans-serif) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sharp, 2px) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.18s ease !important;
  line-height: 1 !important;
}

.page-num-btn:hover,
.pagination-controls a.page-num-btn:hover,
.pagination-controls a.page-numbers:hover {
  background-color: #F8FAFC !important;
  border-color: var(--cyber-blue, #0284C7) !important;
  color: var(--cyber-blue, #0284C7) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15) !important;
}

/* Active Current Page Number */
.page-num-btn.active,
.pagination-controls span.page-num-btn.active,
.pagination-controls .page-numbers.current {
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--cyber-blue, #0284C7) !important;
  border: 1px solid var(--cyber-blue, #0284C7) !important;
  color: #FFFFFF !important;
  font-family: var(--font-heading, 'Outfit', 'Montserrat', sans-serif) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  border-radius: var(--radius-sharp, 2px) !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
  line-height: 1 !important;
}

/* Dots Separator */
.pagination-dots,
.pagination-controls .pagination-dots,
.pagination-controls .page-numbers.dots {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 36px !important;
  padding: 0 4px !important;
  color: var(--rule-grey, #64748B) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  background: transparent !important;
  border: none !important;
  user-select: none !important;
}

/* Next & Prev Links (Clean Text + Arrow, No Border Box) */
.pagination-nav-link,
.page-num-btn.nav-direction,
.pagination-controls .next.page-numbers,
.pagination-controls .prev.page-numbers,
.pagination-controls a.next,
.pagination-controls a.prev {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 8px !important;
  background: transparent !important;
  border: none !important;
  color: #1E293B !important;
  font-family: var(--font-heading, 'Outfit', 'Montserrat', sans-serif) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
  width: auto !important;
  box-shadow: none !important;
}

.pagination-nav-link:hover,
.page-num-btn.nav-direction:hover,
.pagination-controls .next.page-numbers:hover,
.pagination-controls .prev.page-numbers:hover,
.pagination-controls a.next:hover,
.pagination-controls a.prev:hover {
  background: transparent !important;
  border: none !important;
  color: var(--cyber-blue, #0284C7) !important;
  transform: none !important;
  box-shadow: none !important;
}

.pagination-nav-link.next-btn:hover svg,
.page-num-btn.next-btn:hover svg,
.pagination-controls .next.page-numbers:hover svg,
.pagination-controls a.next:hover svg {
  transform: translateX(3px) !important;
  transition: transform 0.2s ease !important;
}

.pagination-nav-link.prev-btn:hover svg,
.page-num-btn.prev-btn:hover svg,
.pagination-controls .prev.page-numbers:hover svg,
.pagination-controls a.prev:hover svg {
  transform: translateX(-3px) !important;
  transition: transform 0.2s ease !important;
}

.page-num-btn.nav-direction {
  width: auto;
  padding: 0 12px;
}

/* ==========================================================================
   10. Right Editorial Rail
   ========================================================================== */
.editorial-rail {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

.rail-widget {
  background-color: var(--bg-panel);
  border: 1px solid var(--rule-grey-border);
  border-radius: var(--radius-sharp);
  padding: 20px;
  min-width: 0;
}

.rail-widget-title {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyber-blue);
  border-bottom: 2px solid var(--steel);
  padding-bottom: 8px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.magazine-showcase-box {
  display: flex;
  gap: 16px;
  align-items: center;
}

.magazine-cover-art {
  width: 90px;
  height: 126px;
  background: linear-gradient(135deg, #243346 0%, #101824 100%);
  border: 1px solid var(--rule-grey);
  border-radius: var(--radius-sharp);
  padding: 8px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.mag-pill-tag {
  font-size: 0.55rem;
  font-weight: 800;
  background-color: var(--cyber-blue);
  color: var(--ink-dark);
  padding: 2px 4px;
  border-radius: 2px;
  align-self: flex-start;
  text-transform: uppercase;
}

.mag-cover-title {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-top: 4px;
}

.mag-cover-theme {
  font-size: 0.58rem;
  color: var(--rule-grey);
  margin-top: auto;
}

.magazine-desc-slot {
  min-width: 0;
}

.magazine-desc-slot h4 {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.magazine-desc-slot p {
  font-size: 0.78rem;
  color: var(--ink-secondary);
  line-height: 1.45;
  margin-bottom: 12px;
}

.btn-mag-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--cyber-blue);
  color: var(--ink-dark);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-sharp);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-mag-read:hover {
  background-color: var(--cyber-blue-hover);
}

/* Event Conclave */
.event-conclave-box {
  background: linear-gradient(145deg, #1C293A 0%, #121B27 100%);
  border: 1px solid var(--steel-light);
  border-radius: var(--radius-sharp);
  padding: 16px;
  min-width: 0;
}

.conclave-badge {
  display: inline-block;
  background-color: var(--cyber-blue-tint);
  color: var(--cyber-blue);
  border: 1px solid var(--cyber-blue);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-sharp);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.conclave-heading {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: #FFFFFF;
  line-height: 1.32;
  margin-bottom: 8px;
}

.conclave-meta {
  font-size: 0.78rem;
  color: var(--rule-grey);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.btn-conclave-register {
  width: 100%;
  background-color: var(--bg-canvas);
  border: 1px solid var(--cyber-blue);
  color: var(--cyber-blue);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 8px 0;
  border-radius: var(--radius-sharp);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-conclave-register:hover {
  background-color: var(--cyber-blue);
  color: var(--ink-dark);
}

/* Ranked Stories List */
.ranked-stories-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ranked-story-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  border-bottom: 1px solid var(--rule-grey-subtle);
  padding-bottom: 10px;
  min-width: 0;
}

.ranked-story-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rank-number {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--steel-light);
  line-height: 1;
  flex-shrink: 0;
}

.ranked-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--ink-heading);
  line-height: 1.36;
  overflow-wrap: break-word;
}

.ranked-title:hover {
  color: var(--cyber-blue);
}

/* ==========================================================================
   11. Newsletter Strip
   ========================================================================== */
.newsletter-strip-section {
  background: linear-gradient(135deg, #152232 0%, #0D1622 100%);
  border-top: 2px solid var(--steel);
  border-bottom: 1px solid var(--steel);
  padding: 44px 0;
  margin-top: 40px;
  width: 100%;
}

.newsletter-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.newsletter-strip-text {
  flex: 1 1 300px;
  min-width: 0;
}

.newsletter-strip-text h3 {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  color: #FFFFFF;
  margin-bottom: 6px;
  overflow-wrap: break-word;
}

.newsletter-strip-text p {
  color: var(--rule-grey);
  font-size: 0.92rem;
}

.newsletter-strip-form {
  display: flex;
  gap: 10px;
  max-width: 480px;
  width: 100%;
  flex: 1 1 320px;
  align-items: stretch;
}

.strip-input {
  flex-grow: 1;
  background-color: var(--bg-canvas);
  border: 1px solid var(--rule-grey-border);
  border-radius: var(--radius-sharp);
  padding: 0 16px;
  height: 44px;
  color: #FFFFFF;
  font-size: 0.9rem;
  outline: none;
  min-width: 0;
  box-sizing: border-box;
}

.strip-input:focus {
  border-color: var(--cyber-blue);
}

.btn-strip-submit {
  background-color: var(--cyber-blue);
  color: var(--ink-dark);
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  height: 42px;
  padding: 0 22px;
  border-radius: var(--radius-sharp);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.btn-strip-submit:hover {
  background-color: var(--cyber-blue-hover);
}

/* ==========================================================================
   12. Site Footer
   ========================================================================== */
.site-footer,
.broadsheet-footer {
  background-color: var(--bg-footer, #070B11);
  color: var(--ink-secondary);
  padding: 48px 0 24px 0;
  border-top: 1px solid var(--rule-grey-border);
  font-size: 0.84rem;
  width: 100%;
}

.footer-columns-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rule-grey-border);
}

.footer-brand-column {
  min-width: 0;
}

.footer-brand-column img {
  height: 38px;
  margin-bottom: 8px;
}

.footer-brand-tagline {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyber-blue);
  margin-bottom: 12px;
}

.footer-summary {
  color: var(--ink-secondary);
  line-height: 1.55;
  max-width: 440px;
  margin-bottom: 16px;
}

.linkedin-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #0077b5;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 7px 14px;
  border-radius: var(--radius-sharp);
  transition: background 0.2s ease;
}

.linkedin-footer-btn:hover {
  background-color: #005f93;
}

.footer-link-column {
  min-width: 0;
}

.footer-link-column h5 {
  color: #FFFFFF;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  position: relative;
  padding-bottom: 6px;
}

.footer-link-column h5::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 26px;
  height: 2px;
  background-color: var(--cyber-blue);
}

.footer-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-links-list a {
  color: var(--rule-grey);
  transition: color 0.15s ease;
}

.footer-links-list a:hover {
  color: var(--cyber-blue);
}

.footer-legal-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  font-size: 0.78rem;
  color: var(--ink-secondary);
  flex-wrap: wrap;
  gap: 10px;
}

/* ==========================================================================
   13. Story Detail Modal View
   ========================================================================== */
.story-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 12, 18, 0.88);
  backdrop-filter: blur(8px);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.story-overlay.active {
  opacity: 1;
  visibility: visible;
}

.story-modal-box {
  background-color: var(--bg-panel);
  border: 1px solid var(--steel);
  border-radius: var(--radius-sharp);
  max-width: 1140px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  position: relative;
  padding: 34px;
}

.btn-close-story {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  background-color: var(--bg-canvas);
  border: 1px solid var(--rule-grey-border);
  color: var(--rule-grey);
  border-radius: var(--radius-sharp);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.btn-close-story:hover {
  background-color: var(--cyber-blue);
  color: var(--ink-dark);
}

.story-page-3col {
  display: grid;
  grid-template-columns: 2.2fr 64px 1.1fr;
  align-items: start;
  gap: 24px;
}

.story-right-showcase {
  position: -webkit-sticky;
  position: sticky;
  top: 70px;
  align-self: start;
  min-width: 0;
}

.story-article-area {
  min-width: 0;
}

.story-article-area h1 {
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1.25;
  color: #FFFFFF;
  margin-bottom: 12px;
  overflow-wrap: break-word;
}

.story-main-photo {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: var(--radius-sharp);
  margin-bottom: 20px;
}

.story-prose-text {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-body);
}

.story-prose-text p {
  margin-bottom: 18px;
}

.right-adjacent-share-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  position: sticky;
  top: 10px;
}

.share-tag-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  writing-mode: vertical-lr;
  margin-bottom: 4px;
}

.btn-share-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-canvas);
  border: 1px solid var(--rule-grey-border);
  color: #FFFFFF;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-share-icon.whatsapp:hover {
  background-color: #25D366;
  border-color: #25D366;
  transform: scale(1.08);
}

.btn-share-icon.x-twitter:hover {
  background-color: #000000;
  border-color: #C9D1DC;
  color: #FFFFFF;
  transform: scale(1.08);
}

.btn-share-icon.facebook:hover {
  background-color: #1877F2;
  border-color: #1877F2;
  color: #FFFFFF;
  transform: scale(1.08);
}

.btn-share-icon.linkedin:hover {
  background-color: #0077b5;
  border-color: #0077b5;
  transform: scale(1.08);
}

.btn-share-icon.copy-link:hover {
  background-color: var(--cyber-blue);
  color: var(--ink-dark);
  border-color: var(--cyber-blue);
  transform: scale(1.08);
}

/* ==========================================================================
   14. Smooth 30-Second Pop-up Modal
   ========================================================================== */
.timed-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 12, 18, 0.85);
  backdrop-filter: blur(6px);
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.timed-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.timed-popup-card {
  background: linear-gradient(135deg, #1A2838 0%, #0E1824 100%);
  border: 2px solid var(--cyber-blue);
  border-radius: var(--radius-sharp);
  max-width: 500px;
  width: 100%;
  padding: 32px;
  position: relative;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.85);
  text-align: center;
}

.popup-dismiss-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sharp);
  background-color: var(--bg-canvas);
  border: 1px solid var(--rule-grey-border);
  color: var(--rule-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.popup-dismiss-btn:hover {
  background-color: var(--steel);
  color: #FFFFFF;
}

.popup-kicker {
  display: inline-block;
  background-color: var(--cyber-blue);
  color: var(--ink-dark);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.popup-header-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.popup-summary {
  font-size: 0.86rem;
  color: var(--rule-grey);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ==========================================================================
   Responsive Grid & Layout Utilities
   ========================================================================== */
.partner-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.partner-consult-card {
  padding: 36px;
}

.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.two-column-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
}

.about-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.magazine-current-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  align-items: center;
}

.magazine-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.events-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.interview-lead-article {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
}

/* ==========================================================================
   15. Comprehensive Responsive Breakpoints - Zero Overlap & Mobile Polish
   ========================================================================== */

/* 1200px (Large Tablets / Small Desktops) */
@media (max-width: 1200px) {
  .nav-tab-link {
    padding: 0 11px;
    font-size: 0.78rem;
  }

  .btn-amber-subscribe {
    padding: 8px 14px;
    font-size: 0.76rem;
  }

  .hero-editorial-grid {
    grid-template-columns: 1.4fr 1fr 0.95fr;
    gap: 18px;
  }
}

/* 1100px (Tablets Landscape) */
@media (max-width: 1100px) {
  .hero-editorial-grid {
    grid-template-columns: 1.35fr 1fr;
    gap: 20px;
  }

  .hero-dispatches-col,
  .hero-right-column {
    grid-column: span 2;
  }

  .masthead-conclave-badge {
    display: none;
  }

  .magazine-archive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 992px (Medium Tablets) */
@media (max-width: 992px) {
  .editorial-body-layout {
    grid-template-columns: 1fr;
  }

  .cyber-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  .story-page-3col {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .two-column-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .partner-pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .magazine-current-grid {
    grid-template-columns: 200px 1fr !important;
    gap: 24px !important;
  }

  .magazine-archive-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }

  .interview-lead-article {
    grid-template-columns: 1fr !important;
  }

  .about-pillars-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .story-right-showcase {
    position: static !important;
    top: auto !important;
  }

  .right-adjacent-share-bar {
    flex-direction: row;
    position: static !important;
    margin: 16px 0;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
  }

  .share-tag-label {
    writing-mode: horizontal-tb;
    margin-bottom: 0;
    align-self: center;
    margin-right: 4px;
  }

  .nav-bar-inner {
    height: auto;
    min-height: 46px;
    flex-wrap: wrap;
    padding: 4px 0;
  }

  .nav-tabs-list {
    flex-wrap: wrap;
    height: auto;
    flex: 1 1 auto;
  }

  .nav-tab-item {
    height: 38px;
  }

  .nav-tab-link {
    padding: 0 10px;
    font-size: 0.78rem;
  }
}

/* 900px (Small Tablets) */
@media (max-width: 900px) {
  .top-banner-ads-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .search-layout-grid {
    grid-template-columns: 1fr;
  }

  .search-result-card {
    grid-template-columns: 1fr;
  }

  .search-result-thumb {
    height: 180px;
  }
}

/* 768px (Tablets Portrait & Mobile Phones - Hamburger Navigation) */
@media (max-width: 768px) {
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .main-nav-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .nav-bar-inner {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    position: relative;
  }

  .btn-mobile-hamburger {
    display: inline-flex;
  }

  .nav-actions {
    margin-left: auto;
    padding-left: 10px;
    border-top: none !important;
    background: transparent !important;
    width: auto !important;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .btn-amber-subscribe {
    padding: 7px 14px;
    font-size: 0.78rem;
  }

  .btn-nav-search {
    width: 36px;
    height: 36px;
  }

  /* Hamburger Dropdown Navigation Drawer */
  .nav-tabs-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--bg-panel);
    border: 1px solid var(--steel);
    border-top: 3px solid var(--cyber-blue);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
    flex-direction: column !important;
    height: auto !important;
    padding: 6px 0;
    z-index: 2000;
    list-style: none;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav-bar.mobile-menu-open .nav-tabs-list {
    display: flex !important;
    animation: mobileMenuSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes mobileMenuSlideDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .nav-tab-item {
    width: 100% !important;
    height: auto !important;
    flex-direction: column !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--rule-grey-subtle) !important;
    align-items: stretch !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .nav-tab-item:last-of-type {
    border-bottom: none !important;
  }

  .nav-tab-link {
    width: 100% !important;
    height: 46px !important;
    padding: 0 18px !important;
    font-size: 0.9rem !important;
    justify-content: space-between !important;
    text-align: left !important;
    font-weight: 700 !important;
    background: transparent;
  }

  .nav-tab-link:hover,
  .nav-tab-item.active .nav-tab-link {
    background-color: var(--steel-deep) !important;
    color: var(--cyber-blue) !important;
  }

  /* Inline Accordion Submenus */
  .editorial-dropdown {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid rgba(201, 209, 220, 0.15) !important;
    background-color: var(--steel-deep) !important;
    padding: 0 !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .nav-tab-item.dropdown-active .editorial-dropdown {
    display: block !important;
  }

  .dropdown-link {
    padding: 12px 24px 12px 32px !important;
    font-size: 0.84rem !important;
    border-bottom: 1px solid rgba(201, 209, 220, 0.08) !important;
  }

  .dropdown-link:hover,
  .dropdown-link.active-sublink {
    background-color: var(--steel) !important;
    color: var(--cyber-blue) !important;
  }

  .hero-editorial-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .hero-dispatches-col,
  .hero-right-column {
    grid-column: span 1 !important;
  }

  .cyber-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .events-archive-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .magazine-current-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    text-align: center;
  }

  .magazine-current-grid>div:first-child {
    max-width: 260px;
    margin: 0 auto;
    width: 100%;
  }

  .feed-story-row {
    flex-direction: column;
  }

  .feed-thumb-slot {
    width: 100%;
    height: 190px;
  }

  .footer-columns-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .leaderboard-ad-content {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Broadsheet Masthead - Compact single row on mobile */
  .broadsheet-masthead {
    padding: 10px 0 10px 0;
  }

  .masthead-top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    margin-bottom: 10px;
    gap: 8px;
  }

  .masthead-meta-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .masthead-threat-index {
    display: none !important;
  }

  .masthead-edition {
    font-size: 0.62rem;
    padding: 2px 6px;
    white-space: nowrap;
  }

  .masthead-date {
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .masthead-meta-right {
    flex-shrink: 0;
  }

  .linkedin-masthead-link {
    font-size: 0.72rem;
    white-space: nowrap;
  }

  /* Editorial Section Title Bars - Avoid split text on mobile */
  .editorial-title-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 0;
    margin-bottom: 18px;
  }

  .editorial-title-text {
    display: block !important;
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  .title-subtext {
    display: block !important;
    font-size: 0.74rem !important;
    margin-top: 3px !important;
    color: var(--ink-secondary) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  /* The Wire Ticker - Single crisp horizontal row without height collapse */
  .ticker-bar {
    height: auto;
    padding: 6px 0;
  }

  .ticker-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  .ticker-headline-tag {
    font-size: 0.65rem;
    padding: 2px 7px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
  }

  .ticker-marquee {
    flex: 1 1 auto;
    min-width: 0;
    height: 22px;
    overflow: hidden;
  }

  .ticker-row {
    height: 22px;
    font-size: 0.78rem;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ticker-row a {
    font-size: 0.78rem;
  }

  .ticker-time-badge {
    font-size: 0.68rem;
  }

  .ticker-nav-btns {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
    align-self: center;
  }

  .ticker-btn {
    width: 20px;
    height: 20px;
  }

  .top-banner-ads-row {
    margin: 10px 0 16px 0;
    gap: 10px;
  }
}

/* 600px (Standard Mobile Phones) */
@media (max-width: 600px) {
  .form-row-2col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .partner-consult-card {
    padding: 22px 16px !important;
  }

  .about-pillars-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .magazine-archive-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .lead-article-body,
  .qa-article-body {
    padding: 16px !important;
  }

  .newsletter-strip-section {
    padding: 28px 0;
  }

  .newsletter-strip-inner {
    gap: 20px;
  }

  .newsletter-strip-form {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }

  .strip-input {
    width: 100% !important;
  }

  .btn-strip-submit {
    width: 100% !important;
    height: 44px;
    justify-content: center;
  }

  .story-right-showcase {
    position: -webkit-sticky;
    position: sticky;
    top: 70px;
    align-self: start;
    min-width: 0;
  }

  .story-article-area {
    padding: 20px 14px !important;
  }

  .story-article-area h1 {
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
  }

  .search-input-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-search-execute,
  .btn-search-clear {
    width: 100%;
    justify-content: center;
  }

  .search-console-card {
    padding: 20px 14px;
  }

  .timed-popup-card {
    padding: 24px 18px !important;
    width: 92% !important;
  }
}

/* 480px (Narrow Mobile Screens) */
@media (max-width: 480px) {
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .masthead-edition {
    display: none !important;
  }

  .lead-headline-serif {
    font-size: 1.28rem !important;
    line-height: 1.3 !important;
  }

  .editorial-title-text {
    font-size: 1.3rem !important;
  }

  .brand-logo-img {
    height: 40px;
  }

  .brand-editorial-tagline {
    font-size: 0.65rem;
  }

  .btn-share-icon {
    width: 38px;
    height: 38px;
  }

  .search-filter-pill {
    padding: 6px 12px;
    font-size: 0.74rem;
  }
}

/* 380px (Ultra Compact Devices) */
@media (max-width: 380px) {
  .btn-amber-subscribe {
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
  }

  .hamburger-label {
    font-size: 0.68rem !important;
  }

  .ticker-headline-tag {
    font-size: 0.6rem !important;
    padding: 2px 5px !important;
  }

  .ticker-row {
    font-size: 0.74rem !important;
  }
}

/* ==========================================================================
   Arrow Icon Utilities (Replaces raw text arrows)
   ========================================================================== */
.icon-arrow {
  display: inline-block;
  vertical-align: -1px;
  margin-left: 6px;
  stroke: currentColor;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

a:hover>.icon-arrow,
button:hover>.icon-arrow,
.btn-read-more-link:hover .icon-arrow,
.dropdown-link:hover .icon-arrow,
.btn-mag-read:hover .icon-arrow,
.title-action-link:hover .icon-arrow,
.ad-cta-button:hover .icon-arrow,
.btn-amber-subscribe:hover .icon-arrow,
.btn-conclave-register:hover .icon-arrow {
  transform: translateX(3px);
}

.icon-arrow-left {
  display: inline-block;
  vertical-align: -1px;
  margin-right: 6px;
  stroke: currentColor;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

button:not(:disabled):hover>.icon-arrow-left,
a:hover>.icon-arrow-left {
  transform: translateX(-3px);
}

.page-num-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   BusinessWorld Google Publisher Tag (GPT) Ad Architecture
   Clean slots that collapse automatically when no live campaigns are served
   ========================================================================== */
.bw-gpt-slot {
  display: block;
  margin: 0 auto;
  text-align: center;
  max-width: 100%;
}

.bw-gpt-slot:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}


/* ==========================================================================
   Search Results Page Styling
   ========================================================================== */
.search-hero-section {
  padding: 32px 0 24px 0;
  border-bottom: 1px solid var(--rule-grey-border);
  margin-bottom: 28px;
}

.search-console-card {
  background: var(--bg-panel);
  border: 1px solid var(--rule-grey-border);
  border-radius: var(--radius-sharp);
  padding: 28px;
  margin-top: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.search-input-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
}

.search-main-input {
  flex: 1;
  background-color: var(--bg-canvas);
  border: 1px solid var(--rule-grey-border);
  border-radius: var(--radius-sharp);
  padding: 13px 18px 13px 44px;
  font-size: 1.05rem;
  color: #FFFFFF;
  font-family: var(--font-sans);
  outline: none;
  transition: all var(--transition-fast);
}

.search-main-input:focus {
  border-color: var(--cyber-blue);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

.search-icon-adornment {
  position: absolute;
  left: 16px;
  color: var(--ink-secondary);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.btn-search-execute {
  background-color: var(--cyber-blue);
  color: #000000;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 13px 24px;
  border: none;
  border-radius: var(--radius-sharp);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-search-execute:hover {
  background-color: var(--cyber-blue-glow);
  transform: translateY(-1px);
}

.btn-search-clear {
  background: transparent;
  border: 1px solid var(--rule-grey-border);
  color: var(--ink-secondary);
  font-size: 0.85rem;
  padding: 12px 16px;
  border-radius: var(--radius-sharp);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-search-clear:hover {
  color: #FFFFFF;
  border-color: var(--rule-grey);
}

.search-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--rule-grey-subtle);
}

.search-category-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.search-filter-pill {
  background: var(--bg-canvas);
  border: 1px solid var(--rule-grey-border);
  color: var(--ink-secondary);
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.search-filter-pill:hover {
  color: #FFFFFF;
  border-color: var(--steel);
}

.search-filter-pill.active {
  background-color: var(--steel-deep);
  color: #FFFFFF;
  border-color: var(--cyber-blue);
}

.search-sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink-secondary);
}

.search-sort-select {
  background-color: var(--bg-canvas);
  color: #FFFFFF;
  border: 1px solid var(--rule-grey-border);
  padding: 6px 12px;
  border-radius: var(--radius-sharp);
  font-size: 0.8rem;
  outline: none;
  cursor: pointer;
}

.search-results-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-grey-border);
  color: var(--ink-secondary);
  font-size: 0.88rem;
}

.search-results-meta-bar strong {
  color: #FFFFFF;
}

.search-query-tag {
  color: var(--cyber-blue);
  font-weight: 700;
}

.search-layout-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  margin-top: 16px;
}

.search-results-stream {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.search-result-card {
  background: var(--bg-panel);
  border: 1px solid var(--rule-grey-border);
  border-radius: var(--radius-sharp);
  padding: 22px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 22px;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-result-card:hover {
  border-color: var(--steel);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

.search-result-thumb {
  position: relative;
  border-radius: var(--radius-sharp);
  overflow: hidden;
  height: 140px;
  background-color: #000;
}

.search-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.search-result-card:hover .search-result-thumb img {
  transform: scale(1.05);
}

.search-result-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.search-result-headline {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.35;
  color: #FFFFFF;
  margin: 6px 0 10px 0;
  font-weight: 700;
}

.search-result-headline a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.search-result-headline a:hover {
  color: var(--cyber-blue);
}

.search-result-snippet {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--rule-grey);
  margin-bottom: 14px;
}

.highlight-match {
  background-color: rgba(220, 38, 38, 0.28);
  color: #FFFFFF;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 3px;
}

.search-result-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--ink-secondary);
  border-top: 1px solid var(--rule-grey-subtle);
  padding-top: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.search-empty-state {
  background: var(--bg-panel);
  border: 1px dashed var(--rule-grey-border);
  border-radius: var(--radius-sharp);
  padding: 50px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.search-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.12);
  color: var(--cyber-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-empty-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: #FFFFFF;
}

.search-empty-desc {
  font-size: 0.92rem;
  color: var(--rule-grey);
  max-width: 480px;
}

.search-suggestions-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.search-suggest-chip {
  background: var(--bg-canvas);
  border: 1px solid var(--rule-grey-border);
  color: var(--cyber-blue);
  padding: 6px 14px;
  font-size: 0.8rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.search-suggest-chip:hover {
  background-color: var(--cyber-blue);
  color: #000;
}

@media (max-width: 900px) {
  .top-banner-ads-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .search-layout-grid {
    grid-template-columns: 1fr;
  }

  .search-result-card {
    grid-template-columns: 1fr;
  }

  .search-result-thumb {
    height: 180px;
  }
}

/* ==========================================================================
   Light Mode Overrides & Editorial Contrast Refinements
   - Brand Colors from Logo: BW Red (#EC2027) & Cyber Blue (#0284C7 on light, #00CFFF on dark)
   - Logo strictly untouched (bw-logo.png remains identical)
   - Button colors strictly preserved in BW Red with white text
   - Content canvas, editorial cards, articles, and text toggle seamlessly
   ========================================================================== */

/* Button colors strictly preserved in both modes */
.btn-amber-subscribe,
.btn-search-execute,
.ad-cta-button,
.btn-mag-read {
  background-color: var(--cyber-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px var(--btn-primary-glow) !important;
}

.btn-amber-subscribe:hover,
.btn-search-execute:hover,
.ad-cta-button:hover,
.btn-mag-read:hover {
  background-color: var(--btn-primary-hover) !important;
  color: #FFFFFF !important;
}

.btn-read-more-link {
  color: var(--cyber-blue) !important;
}

.btn-read-more-link:hover {
  color: var(--cyber-blue) !important;
}

/* Light Theme Title Bars & Section Headings */
[data-theme="light"] .editorial-title-text {
  color: #0F172A !important;
}

[data-theme="light"] .title-subtext {
  color: #64748B !important;
}

/* Light Masthead Architecture */
[data-theme="light"] .brand-masthead {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.2) !important;
}

[data-theme="light"] .masthead-top-row {
  color: #475569 !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.15) !important;
}

[data-theme="light"] .masthead-edition {
  background-color: #E2E8F0 !important;
  color: #0F172A !important;
  font-weight: 700 !important;
}

[data-theme="light"] .masthead-date {
  color: #475569 !important;
  font-weight: 600 !important;
}

[data-theme="light"] .brand-editorial-tagline {
  color: #64748B !important;
}

[data-theme="light"] .masthead-social-link {
  color: #475569 !important;
}

[data-theme="light"] .masthead-social-link:hover {
  color: var(--cyber-blue) !important;
}

[data-theme="light"] .masthead-conclave-badge {
  background: #F8FAFC !important;
  border: 1px solid rgba(100, 116, 139, 0.22) !important;
  border-left: 3px solid var(--cyber-blue) !important;
}

[data-theme="light"] .conclave-badge-text {
  color: #475569 !important;
}

[data-theme="light"] .conclave-badge-text strong {
  color: #0F172A !important;
}

/* Sticky Main Navigation Bar in Light Mode */
[data-theme="light"] .main-nav-bar {
  background-color: #FFFFFF !important;
  border-top: 1px solid rgba(100, 116, 139, 0.2) !important;
  border-bottom: 2px solid rgba(100, 116, 139, 0.25) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .nav-tab-item {
  border-left-color: rgba(100, 116, 139, 0.15) !important;
}

[data-theme="light"] .nav-tab-item:last-of-type {
  border-right-color: rgba(100, 116, 139, 0.15) !important;
}

[data-theme="light"] .nav-tab-link {
  color: #0F172A !important;
}

[data-theme="light"] .nav-tab-link:hover,
[data-theme="light"] .nav-tab-item.active .nav-tab-link {
  background-color: #F1F5F9 !important;
  color: var(--cyber-blue) !important;
}

[data-theme="light"] .nav-chevron {
  stroke: #64748B !important;
}

[data-theme="light"] .nav-tab-item:hover .nav-chevron,
[data-theme="light"] .nav-tab-item.dropdown-active .nav-chevron {
  stroke: var(--cyber-blue) !important;
}

[data-theme="light"] .btn-mobile-hamburger {
  border-color: rgba(100, 116, 139, 0.25) !important;
  color: #0F172A !important;
}

[data-theme="light"] .hamburger-line {
  background-color: #0F172A !important;
}

[data-theme="light"] .hamburger-label {
  color: #475569 !important;
}

[data-theme="light"] .btn-theme-toggle {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: rgba(100, 116, 139, 0.25) !important;
}

[data-theme="light"] .btn-theme-toggle:hover {
  background-color: var(--cyber-blue) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--cyber-blue) !important;
}

[data-theme="light"] .theme-icon-moon {
  color: #0F172A !important;
}

[data-theme="light"] .btn-theme-toggle:hover .theme-icon-moon {
  color: #FFFFFF !important;
}

[data-theme="light"] .btn-nav-search {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
  border: 1px solid rgba(100, 116, 139, 0.25) !important;
}

[data-theme="light"] .btn-nav-search:hover {
  background-color: var(--cyber-blue) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--cyber-blue) !important;
}

/* Intelligence Wire Ticker */
[data-theme="light"] .ticker-bar {
  background-color: #EBF0F5;
  border-bottom-color: rgba(100, 116, 139, 0.22);
}

[data-theme="light"] .ticker-headline-tag {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
}

[data-theme="light"] .ticker-row a {
  color: #0F172A !important;
}

[data-theme="light"] .ticker-row a:hover {
  color: var(--cyber-blue) !important;
}

[data-theme="light"] .ticker-btn {
  background-color: #FFFFFF;
  border-color: rgba(100, 116, 139, 0.22);
  color: #475569;
}

[data-theme="light"] .ticker-btn:hover {
  background-color: var(--steel);
  color: #FFFFFF;
}

/* All Editorial Cards Across Homepage & Feed Listings */
[data-theme="light"] .lead-feature-article,
[data-theme="light"] .card-article-compact,
[data-theme="light"] .hero-dispatches-box,
[data-theme="light"] .hero-dispatches-col,
[data-theme="light"] .cyber-feature-card,
[data-theme="light"] .feed-item-card,
[data-theme="light"] .radar-card,
[data-theme="light"] .interview-card,
[data-theme="light"] .summit-card,
[data-theme="light"] .search-result-card,
[data-theme="light"] .search-bar-elevated,
[data-theme="light"] .search-empty-state,
[data-theme="light"] .story-article-area,
[data-theme="light"] .editorial-content-box,
[data-theme="light"] .content-narrative,
[data-theme="light"] .terms-prose-container,
[data-theme="light"] .policy-prose-container,
[data-theme="light"] .rail-widget,
[data-theme="light"] .mag-hero-card,
[data-theme="light"] .event-hero-card,
[data-theme="light"] .special-hero-card,
[data-theme="light"] .event-hero-banner,
[data-theme="light"] .magazine-hero-banner {
  background-color: #FFFFFF !important;
  border-color: rgba(100, 116, 139, 0.22) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .lead-feature-article:hover,
[data-theme="light"] .card-article-compact:hover,
[data-theme="light"] .cyber-feature-card:hover,
[data-theme="light"] .feed-item-card:hover,
[data-theme="light"] .radar-card:hover,
[data-theme="light"] .interview-card:hover,
[data-theme="light"] .search-result-card:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  border-color: var(--steel-light) !important;
}

/* Headline Typography in Light Mode */
[data-theme="light"] .lead-headline-serif,
[data-theme="light"] .lead-headline-serif a,
[data-theme="light"] .compact-headline-serif,
[data-theme="light"] .compact-headline-serif a,
[data-theme="light"] .wire-card-title,
[data-theme="light"] .wire-card-title a,
[data-theme="light"] .dispatch-headline,
[data-theme="light"] .dispatch-headline a,
[data-theme="light"] .cyber-headline-serif,
[data-theme="light"] .cyber-headline-serif a,
[data-theme="light"] .feed-headline-serif,
[data-theme="light"] .feed-headline-serif a,
[data-theme="light"] .story-article-area h1,
[data-theme="light"] .sidebar-widget-title,
[data-theme="light"] .search-result-headline,
[data-theme="light"] .search-result-headline a,
[data-theme="light"] .radar-card-title,
[data-theme="light"] .radar-card-title a,
[data-theme="light"] .special-hero-title,
[data-theme="light"] .cso-card-title,
[data-theme="light"] .mag-hero-title,
[data-theme="light"] .mag-cover-title,
[data-theme="light"] .magazine-desc-slot h4,
[data-theme="light"] .conclave-heading,
[data-theme="light"] .popup-header-title,
[data-theme="light"] .search-empty-title,
[data-theme="light"] .terms-section h2,
[data-theme="light"] .privacy-section h2 {
  color: #0F172A !important;
}

[data-theme="light"] .lead-headline-serif a:hover,
[data-theme="light"] .compact-headline-serif a:hover,
[data-theme="light"] .wire-card-title a:hover,
[data-theme="light"] .dispatch-headline a:hover,
[data-theme="light"] .cyber-headline-serif a:hover,
[data-theme="light"] .feed-headline-serif a:hover,
[data-theme="light"] .search-result-headline a:hover {
  color: var(--cyber-blue) !important;
}

/* Paragraphs & Narrative Copy */
[data-theme="light"] .lead-standfirst,
[data-theme="light"] .cyber-summary-text,
[data-theme="light"] .feed-excerpt-text,
[data-theme="light"] .search-result-snippet,
[data-theme="light"] .story-prose-text,
[data-theme="light"] .story-prose-text p,
[data-theme="light"] .conclave-meta,
[data-theme="light"] .content-narrative,
[data-theme="light"] .terms-prose,
[data-theme="light"] .policy-prose,
[data-theme="light"] .popup-summary {
  color: #334155 !important;
}

/* Category Eyebrows & Security Desk Badges */
[data-theme="light"] .category-eyebrow {
  color: var(--cyber-blue) !important;
}

[data-theme="light"] .cyber-sub-tag {
  background-color: #F1F5F9 !important;
  color: var(--cyber-blue) !important;
  border-color: var(--cyber-blue) !important;
}

[data-theme="light"] .title-action-link {
  color: var(--cyber-blue) !important;
}

[data-theme="light"] .title-action-link:hover {
  color: var(--cyber-blue-hover) !important;
}

/* Metadata Rows */
[data-theme="light"] .editorial-meta-line,
[data-theme="light"] .meta-author-name,
[data-theme="light"] .dispatch-timestamp,
[data-theme="light"] .cyber-publish-date,
[data-theme="light"] .search-results-meta-bar,
[data-theme="light"] .search-sort-group {
  color: #64748B !important;
}

/* Ad Blocks & Soundbites */
[data-theme="light"] .leaderboard-ad-container,
[data-theme="light"] .top-banner-ads-row>div {
  background: #EBF0F5;
  border-color: rgba(100, 116, 139, 0.22);
}

[data-theme="light"] .ad-headline {
  color: #0F172A !important;
}

[data-theme="light"] .ad-details {
  color: #64748B !important;
}

[data-theme="light"] .editorial-quote-strip {
  background: #FFFFFF !important;
  border-color: rgba(100, 116, 139, 0.22) !important;
  border-left: 4px solid var(--cyber-blue) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .quote-prose {
  color: #0F172A !important;
}

[data-theme="light"] .event-conclave-box {
  background: #FFFFFF !important;
  border-color: rgba(100, 116, 139, 0.22) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}

/* Dropdowns in Light Mode */
[data-theme="light"] .editorial-dropdown {
  background-color: #FFFFFF;
  border-color: rgba(100, 116, 139, 0.25);
  border-top: 3px solid var(--cyber-blue) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .dropdown-link {
  color: #334155;
  border-bottom: 1px solid rgba(100, 116, 139, 0.10);
}

[data-theme="light"] .dropdown-link:hover,
[data-theme="light"] .dropdown-link.active-sublink {
  background-color: #F1F5F9;
  color: var(--cyber-blue) !important;
}

/* Mobile Menu Drawer */
[data-theme="light"] .main-nav-bar.mobile-menu-open .nav-tabs-list {
  background-color: #FFFFFF;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

[data-theme="light"] .main-nav-bar.mobile-menu-open .nav-tab-link {
  color: #0F172A;
}

[data-theme="light"] .main-nav-bar.mobile-menu-open .nav-tab-link:hover,
[data-theme="light"] .main-nav-bar.mobile-menu-open .nav-tab-item.active .nav-tab-link {
  background-color: #F1F5F9 !important;
  color: var(--cyber-blue) !important;
}

/* Pagination Controls */
[data-theme="light"] .btn-editorial-load-more,
[data-theme="light"] .page-num-btn {
  background-color: #FFFFFF;
  color: #334155;
  border-color: rgba(100, 116, 139, 0.25);
}

[data-theme="light"] .btn-editorial-load-more:hover,
[data-theme="light"] .page-num-btn:hover {
  background-color: var(--steel);
  color: #FFFFFF;
}

[data-theme="light"] .page-num-btn.active {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--btn-primary-bg) !important;
}

/* Search Results Page Controls */
[data-theme="light"] .search-main-input {
  background-color: #FFFFFF;
  color: #0F172A;
  border-color: rgba(100, 116, 139, 0.28);
}

[data-theme="light"] .search-filter-pill {
  background: #FFFFFF;
  color: #475569;
  border-color: rgba(100, 116, 139, 0.25);
}

[data-theme="light"] .search-filter-pill:hover {
  background: #F1F5F9;
  color: #0F172A;
}

[data-theme="light"] .search-filter-pill.active {
  background: var(--steel-deep);
  color: #FFFFFF;
  border-color: var(--cyber-blue) !important;
}

[data-theme="light"] .search-sort-select {
  background-color: #FFFFFF;
  color: #0F172A;
  border-color: rgba(100, 116, 139, 0.25);
}

[data-theme="light"] .search-results-meta-bar strong {
  color: #0F172A;
}

/* Form Inputs across contact & partner pages */
[data-theme="light"] .strip-input,
[data-theme="light"] input.strip-input,
[data-theme="light"] textarea.strip-input,
[data-theme="light"] select.strip-input {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: rgba(100, 116, 139, 0.28) !important;
}

/* Unified Light Newsletter Strip Section */
[data-theme="light"] .newsletter-strip-section {
  background: #FFFFFF !important;
  border-top: 1px solid rgba(100, 116, 139, 0.2) !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.2) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .newsletter-strip-text h3 {
  color: #0F172A !important;
}

[data-theme="light"] .newsletter-strip-text p {
  color: #475569 !important;
}

[data-theme="light"] .newsletter-strip-section .strip-input {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
  border-color: rgba(100, 116, 139, 0.25) !important;
}

[data-theme="light"] .newsletter-strip-section .strip-input:focus {
  background-color: #FFFFFF !important;
  border-color: var(--cyber-blue) !important;
}

/* Site Footer in Light Mode */
[data-theme="light"] .site-footer,
[data-theme="light"] .broadsheet-footer {
  background-color: #F1F5F9 !important;
  color: #475569 !important;
  border-top: 2px solid rgba(100, 116, 139, 0.22) !important;
}

[data-theme="light"] .footer-nav-col h4,
[data-theme="light"] .footer-col h4,
[data-theme="light"] .footer-link-column h5 {
  color: #0F172A !important;
  border-bottom-color: rgba(100, 116, 139, 0.2) !important;
}

[data-theme="light"] .footer-nav-col h4::after,
[data-theme="light"] .footer-col h4::after,
[data-theme="light"] .footer-link-column h5::after {
  background-color: var(--cyber-blue) !important;
}

[data-theme="light"] .footer-links-list a,
[data-theme="light"] .footer-links a {
  color: #475569 !important;
}

[data-theme="light"] .footer-links-list a:hover,
[data-theme="light"] .footer-links a:hover {
  color: var(--cyber-blue) !important;
}

[data-theme="light"] .footer-columns-grid {
  border-bottom: 1px solid rgba(100, 116, 139, 0.2) !important;
}

[data-theme="light"] .footer-brand-tagline {
  color: var(--cyber-blue) !important;
}

[data-theme="light"] .footer-summary,
[data-theme="light"] .footer-brand-summary {
  color: #64748B !important;
}

[data-theme="light"] .footer-bottom-row {
  color: #64748B !important;
  border-top-color: rgba(100, 116, 139, 0.2) !important;
}

[data-theme="light"] .footer-bottom-row a {
  color: #64748B !important;
}

[data-theme="light"] .footer-bottom-row a:hover {
  color: var(--cyber-blue) !important;
}

[data-theme="light"] .footer-disclaimer {
  color: #64748B !important;
}

[data-theme="light"] .footer-social-link,
[data-theme="light"] .linkedin-footer-btn {
  background-color: #FFFFFF !important;
  color: #475569 !important;
  border: 1px solid rgba(100, 116, 139, 0.25) !important;
}

[data-theme="light"] .footer-social-link:hover,
[data-theme="light"] .linkedin-footer-btn:hover {
  background-color: var(--cyber-blue) !important;
  color: var(--btn-primary-text) !important;
  border-color: var(--cyber-blue) !important;
}

/* Primary CTA Buttons: Cyber Blue & Slate across Dark & Light */
.btn-amber-subscribe,
.btn-strip-submit,
.btn-search-execute,
.ad-cta-button,
.btn-mag-read,
.btn-popup-cta,
.btn-conclave-reg,
.btn-conclave-register,
.btn-submit-inquiry {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border: none !important;
  box-shadow: 0 4px 14px var(--btn-primary-glow) !important;
}

.btn-amber-subscribe:hover,
.btn-strip-submit:hover,
.btn-search-execute:hover,
.ad-cta-button:hover,
.btn-mag-read:hover,
.btn-popup-cta:hover,
.btn-conclave-reg:hover,
.btn-conclave-register:hover,
.btn-submit-inquiry:hover {
  background-color: var(--btn-primary-hover) !important;
  color: var(--btn-primary-text) !important;
  box-shadow: 0 6px 20px var(--btn-primary-glow) !important;
}

/* Story Modal */
[data-theme="light"] .story-overlay {
  background: rgba(15, 23, 42, 0.65);
}

[data-theme="light"] .story-modal-box {
  background-color: #FFFFFF !important;
  border-color: rgba(100, 116, 139, 0.28) !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25) !important;
}

[data-theme="light"] .btn-close-story {
  background-color: #F1F5F9;
  color: #334155;
  border-color: rgba(100, 116, 139, 0.25);
}

[data-theme="light"] .btn-share-icon {
  background-color: #F1F5F9;
  border-color: rgba(100, 116, 139, 0.25);
  color: #334155;
}

/* Timed Pop-up Card */
[data-theme="light"] .timed-popup-card {
  background: #FFFFFF !important;
  border-color: var(--cyber-blue) !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25) !important;
}

[data-theme="light"] .popup-dismiss-btn {
  background-color: #F1F5F9;
  color: #334155;
  border-color: rgba(100, 116, 139, 0.25);
}

/* Informational & Legal Pages */
[data-theme="light"] .content-narrative,
[data-theme="light"] .terms-prose,
[data-theme="light"] .policy-prose {
  color: #334155 !important;
}

[data-theme="light"] .content-narrative h2,
[data-theme="light"] .content-narrative h3,
[data-theme="light"] .content-narrative h4,
[data-theme="light"] .terms-prose h2,
[data-theme="light"] .policy-prose h2 {
  color: #0F172A !important;
}

/* Safety Fallback: Flip any remaining inline white text to dark ink in light mode */
[data-theme="light"] h1[style*="color: #FFFFFF"],
[data-theme="light"] h2[style*="color: #FFFFFF"],
[data-theme="light"] h3[style*="color: #FFFFFF"],
[data-theme="light"] h4[style*="color: #FFFFFF"],
[data-theme="light"] h5[style*="color: #FFFFFF"],
[data-theme="light"] h6[style*="color: #FFFFFF"],
[data-theme="light"] p[style*="color: #FFFFFF"],
[data-theme="light"] span[style*="color: #FFFFFF"],
[data-theme="light"] div[style*="color: #FFFFFF"],
[data-theme="light"] blockquote[style*="color: #FFFFFF"],
[data-theme="light"] strong[style*="color: #FFFFFF"],
[data-theme="light"] h1[style*="color:#FFFFFF"],
[data-theme="light"] h2[style*="color:#FFFFFF"],
[data-theme="light"] h3[style*="color:#FFFFFF"],
[data-theme="light"] h4[style*="color:#FFFFFF"],
[data-theme="light"] h5[style*="color:#FFFFFF"],
[data-theme="light"] h6[style*="color:#FFFFFF"],
[data-theme="light"] p[style*="color:#FFFFFF"],
[data-theme="light"] span[style*="color:#FFFFFF"],
[data-theme="light"] div[style*="color:#FFFFFF"],
[data-theme="light"] blockquote[style*="color:#FFFFFF"],
[data-theme="light"] strong[style*="color:#FFFFFF"] {
  color: #0F172A !important;
}

/* Buttons retain high-contrast text */
[data-theme="light"] .btn-amber-subscribe,
[data-theme="light"] .btn-strip-submit,
[data-theme="light"] .btn-search-execute,
[data-theme="light"] .ad-cta-button,
[data-theme="light"] .btn-mag-read,
[data-theme="light"] .btn-popup-cta,
[data-theme="light"] .btn-conclave-reg,
[data-theme="light"] .btn-conclave-register,
[data-theme="light"] .btn-submit-inquiry,
[data-theme="light"] .ticker-headline-tag,
[data-theme="light"] .badge-breaking,
[data-theme="light"] .page-num-btn.active {
  color: var(--btn-primary-text) !important;
}


/* ==========================================================================
   Header Navigation Active Menu Item & Sub-item Indicator
   ========================================================================== */

/* 1. Top Cyber Blue Indicator Bar */
.nav-tab-item.active::after,
.nav-tab-item.current-menu-item::after,
.nav-tab-item.current_page_item::after,
.nav-tab-item.current-menu-ancestor::after,
.nav-tab-item.current_page_ancestor::after,
.nav-tab-item.current-menu-parent::after,
.nav-tab-item.current_page_parent::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--cyber-blue, #0284C7);
  z-index: 10;
}

/* 2. Top-level Active Link Typography & Background (Dark Mode) */
.nav-tab-item.active>.nav-tab-link,
.nav-tab-item.current-menu-item>.nav-tab-link,
.nav-tab-item.current_page_item>.nav-tab-link,
.nav-tab-item.current-menu-ancestor>.nav-tab-link,
.nav-tab-item.current_page_ancestor>.nav-tab-link,
.nav-tab-item.current-menu-parent>.nav-tab-link,
.nav-tab-item.current_page_parent>.nav-tab-link,
.nav-tab-link.active {
  background-color: var(--steel-deep, #3A4654) !important;
  color: var(--cyber-blue, #0284C7) !important;
  font-weight: 800 !important;
}

.nav-tab-item.active>.nav-tab-link .nav-chevron,
.nav-tab-item.current-menu-item>.nav-tab-link .nav-chevron,
.nav-tab-item.current_page_item>.nav-tab-link .nav-chevron,
.nav-tab-item.current-menu-ancestor>.nav-tab-link .nav-chevron,
.nav-tab-item.current_page_ancestor>.nav-tab-link .nav-chevron,
.nav-tab-link.active .nav-chevron {
  stroke: var(--cyber-blue, #0284C7) !important;
}

/* 3. Dropdown Sub-menu Active Sublink (Dark Mode) */
.dropdown-link.active,
.dropdown-link.active-sublink,
.editorial-dropdown li.current-menu-item>a,
.editorial-dropdown li.current_page_item>a,
.editorial-dropdown li.active>a {
  background-color: var(--steel-deep, #3A4654) !important;
  color: var(--cyber-blue, #0284C7) !important;
  padding-left: 22px !important;
  font-weight: 700 !important;
}

.dropdown-link.active .icon-arrow,
.dropdown-link.active-sublink .icon-arrow,
.editorial-dropdown li.current-menu-item>a .icon-arrow,
.editorial-dropdown li.current_page_item>a .icon-arrow {
  stroke: var(--cyber-blue, #0284C7) !important;
  transform: translateX(3px) !important;
}

/* 4. Top-level Active Link Typography & Background (Light Mode) */
[data-theme="light"] .nav-tab-item.active>.nav-tab-link,
[data-theme="light"] .nav-tab-item.current-menu-item>.nav-tab-link,
[data-theme="light"] .nav-tab-item.current_page_item>.nav-tab-link,
[data-theme="light"] .nav-tab-item.current-menu-ancestor>.nav-tab-link,
[data-theme="light"] .nav-tab-item.current_page_ancestor>.nav-tab-link,
[data-theme="light"] .nav-tab-item.current-menu-parent>.nav-tab-link,
[data-theme="light"] .nav-tab-item.current_page_parent>.nav-tab-link,
[data-theme="light"] .nav-tab-link.active {
  background-color: #F1F5F9 !important;
  color: var(--cyber-blue, #0284C7) !important;
  font-weight: 800 !important;
}

[data-theme="light"] .nav-tab-item.active>.nav-tab-link .nav-chevron,
[data-theme="light"] .nav-tab-item.current-menu-item>.nav-tab-link .nav-chevron,
[data-theme="light"] .nav-tab-item.current-menu-ancestor>.nav-tab-link .nav-chevron,
[data-theme="light"] .nav-tab-link.active .nav-chevron {
  stroke: var(--cyber-blue, #0284C7) !important;
}

/* 5. Dropdown Sub-menu Container & Active Sublink (Light Mode) */
[data-theme="light"] .editorial-dropdown {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(100, 116, 139, 0.22) !important;
  border-top: 3px solid var(--cyber-blue, #0284C7) !important;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] .dropdown-link {
  color: #334155 !important;
  border-bottom: 1px solid rgba(100, 116, 139, 0.12) !important;
}

[data-theme="light"] .dropdown-link.active,
[data-theme="light"] .dropdown-link.active-sublink,
[data-theme="light"] .editorial-dropdown li.current-menu-item>a,
[data-theme="light"] .editorial-dropdown li.current_page_item>a,
[data-theme="light"] .editorial-dropdown li.active>a {
  background-color: #F1F5F9 !important;
  color: var(--cyber-blue, #0284C7) !important;
  padding-left: 22px !important;
  font-weight: 700 !important;
}

[data-theme="light"] .dropdown-link.active .icon-arrow,
[data-theme="light"] .dropdown-link.active-sublink .icon-arrow,
[data-theme="light"] .editorial-dropdown li.current-menu-item>a .icon-arrow,
[data-theme="light"] .editorial-dropdown li.current_page_item>a .icon-arrow {
  stroke: var(--cyber-blue, #0284C7) !important;
  transform: translateX(3px) !important;
}

/* ==========================================================================
   Sticky Sidebar for Archive & Search Templates
   ========================================================================== */
@media (min-width: 993px) {
  .editorial-body-layout {
    align-items: start !important;
  }

  .search-layout-grid {
    align-items: start !important;
  }

  body.archive .editorial-rail,
  body.category .editorial-rail,
  body.tag .editorial-rail,
  body.author .editorial-rail,
  body.blog .editorial-rail,
  .editorial-rail.sticky-sidebar,
  .editorial-rail[style*="sticky"],
  .search-sidebar-rail,
  body.search .search-sidebar-rail {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 70px !important;
    align-self: start !important;
  }
}

@media (max-width: 992px) {

  .editorial-rail,
  .editorial-rail[style*="sticky"],
  .search-sidebar-rail,
  body.archive .editorial-rail,
  body.search .search-sidebar-rail {
    position: static !important;
    top: auto !important;
  }
}

/* 6. Mobile Layout Active State (Left Border Accent) */
@media (max-width: 992px) {

  .nav-tab-item.active,
  .nav-tab-item.current-menu-item,
  .nav-tab-item.current_page_item,
  .nav-tab-item.current-menu-ancestor,
  .nav-tab-item.current_page_ancestor {
    border-left: 3px solid var(--cyber-blue, #0284C7) !important;
  }

  .nav-tab-item.active::after,
  .nav-tab-item.current-menu-item::after,
  .nav-tab-item.current_page_item::after,
  .nav-tab-item.current-menu-ancestor::after,
  .nav-tab-item.current_page_ancestor::after {
    display: none !important;
  }
}