/* =========================================================
   Design Magazine — design tokens
   Newspaper-editorial palette: crisp near-white page, near-black
   ink text, a bright masthead crimson as the primary accent and
   a deep ink-navy as the secondary — a classic broadsheet pairing,
   deliberately not another orange/gold. The .ai-scene section
   re-scopes these tokens to a dark "spotlight" panel — see below.
   ========================================================= */
:root{
  --bg-0:#FFFFFF;
  --bg-1:#F5F5F2;
  --bg-2:#FFFFFF;
  --bg-3:#F0EFEA;
  --border:#E3E1DA;
  --border-soft:rgba(20,20,18,.08);

  --text-primary:#181818;
  --text-secondary:#54534C;
  --text-tertiary:#8B897F;

  --accent:#C81D3A;
  --accent-strong:#9A1229;
  --accent-ink:#FFFFFF;
  --accent-2:#1B3A63;
  --accent-2-strong:#12283F;

  /* Georgia for headings, Helvetica for text and UI. Gelasio and Arimo are
     their metric-matched Google Fonts stand-ins for devices without them. */
  --font-display:Georgia, 'Gelasio', 'Times New Roman', serif;
  --font-body:'Helvetica Neue', Helvetica, 'Arimo', Arial, sans-serif;
  --font-ui:'Helvetica Neue', Helvetica, 'Arimo', Arial, sans-serif;

  --container:1280px;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;

  --space-1:.4rem;
  --space-2:.75rem;
  --space-3:1.1rem;
  --space-4:1.5rem;
  --space-5:2.1rem;
  --space-6:2.8rem;
  --space-7:clamp(2.6rem, 3.2vw, 3.8rem);
  --space-8:clamp(3.4rem, 5vw, 5.4rem);

  --ease:cubic-bezier(.22,.9,.3,1);
  --shadow-soft:0 8px 24px rgba(27,22,15,.10);
  --shadow-lift:0 16px 36px rgba(27,22,15,.14);
}

/* =========================================================
   Reset & base
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-0);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:clamp(15px, .25vw + 14.5px, 16.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input{font:inherit;color:inherit;}
/* Georgia has regular and bold only, so headings are set bold (700) for the
   same weight on every device; its wide letters want only a hair of tracking. */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-primary);line-height:1.2;margin:0;font-weight:700;letter-spacing:-.005em;}
blockquote{margin:0;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* Form fields get their own border/background focus treatment (see each
   form's rules below) instead of the default ring — no outline in any
   state, focused or not, on inputs/selects/textareas site-wide. */
input,select,textarea{outline:none;}
input:focus,input:focus-visible,
select:focus,select:focus-visible,
textarea:focus,textarea:focus-visible{outline:none;}

.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem, 4vw, 2.5rem);}

/* Prevent CSS grid/flex items from growing past their track to fit
   unbreakable content (the classic nested min-width:auto overflow bug). */
.hero-intro,.hero-carousel,.hero-slide,
.section-main,.section-aside,
.card,.category-tile,.opinion-card,.stat-card,
.ai-scene-copy,.ai-feature-card,.breakdown-media,.breakdown-body,
.footer-brand,.footer-col,.site-logo,.site-header-actions,
.hero-big-story,.hero-headlines,.zigzag-feature,.zigzag-list,
.cta-band-inner > *{
  min-width:0;
}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);
  padding:.8rem 1.2rem;z-index:999;border-radius:0 0 8px 0;font-family:var(--font-ui);font-weight:600;
}
.skip-link:focus{left:0;}

/* =========================================================
   Type utilities
   ========================================================= */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-strong);margin-bottom:var(--space-2);
}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--accent-strong);display:inline-block;}
.eyebrow-on-accent{color:var(--accent-ink);}
.eyebrow-on-accent::before{background:var(--accent-ink);}

.section-sub{color:var(--text-secondary);font-size:1.05rem;max-width:60ch;}

.tag{
  display:inline-flex;align-items:center;font-family:var(--font-ui);font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);
  background:var(--bg-3);border:1px solid var(--border);padding:.3rem .7rem;border-radius:100px;
  width:fit-content;
}
.tag-accent{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);}

.meta-row{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  font-family:var(--font-ui);font-size:.82rem;color:var(--text-tertiary);
}
.meta-row-sm{font-size:.78rem;}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-ui);font-weight:600;color:var(--accent-strong);
  transition:gap .25s var(--ease),color .25s var(--ease);
}
.link-arrow svg{width:16px;height:16px;transition:transform .25s var(--ease);}
.link-arrow:hover{gap:.8rem;color:var(--accent-2-strong);}
.link-arrow:hover svg{transform:translateX(3px);}

/* =========================================================
   Buttons — hover animation, two accent colors
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-ui);font-weight:600;font-size:.92rem;letter-spacing:.01em;
  padding:.85rem 1.5rem;border-radius:100px;border:1px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn:hover svg{transform:translateX(3px);}

.btn-primary{background:var(--accent);color:var(--accent-ink);}
.btn-primary:hover{background:var(--accent-strong);color:#fff;box-shadow:0 10px 24px -8px rgba(154,18,41,.5);}

.btn-dark{background:var(--bg-0);color:var(--text-primary);border-color:rgba(27,22,15,.18);}
.btn-dark:hover{background:var(--bg-1);box-shadow:0 10px 24px -10px rgba(27,22,15,.3);}

.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--border);}
.btn-ghost:hover{border-color:var(--accent-2);color:var(--accent-2-strong);box-shadow:0 10px 24px -12px rgba(27,58,99,.35);}

.btn-block{width:100%;}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  color:var(--text-secondary);border:1px solid transparent;transition:all .25s var(--ease);
}
.icon-btn svg{width:19px;height:19px;}
.icon-btn:hover{color:var(--accent);background:var(--bg-3);border-color:var(--border);transform:translateY(-2px);}

/* =========================================================
   Top bar + Header
   ========================================================= */
.topbar{background:var(--bg-1);border-bottom:1px solid var(--border-soft);font-family:var(--font-ui);}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding-block:.55rem;font-size:.8rem;color:var(--text-tertiary);}
.topbar-links{display:flex;gap:1.25rem;}
.topbar-links a{transition:color .2s var(--ease);}
.topbar-links a:hover{color:var(--accent-strong);}
@media (max-width:720px){ .topbar-text{display:none;} }

.site-header{position:sticky;top:0;z-index:100;background:rgba(250,248,245,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-soft);}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding-block:1rem;}

.site-logo a{display:flex;align-items:center;gap:.6rem;}
.logo-mark{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;
  background:var(--accent);color:var(--accent-ink);font-family:var(--font-display);font-weight:700;font-size:1rem;
}
.logo-word{font-family:var(--font-display);font-size:1.28rem;font-weight:600;color:var(--text-primary);letter-spacing:-.01em;}
.logo-word em{font-style:italic;color:var(--accent-strong);font-weight:500;}

.site-nav{margin-inline:auto;}
.nav-menu{display:flex;gap:var(--space-5);font-family:var(--font-ui);font-size:.92rem;font-weight:500;}
.nav-menu a{position:relative;padding-block:.3rem;color:var(--text-secondary);transition:color .25s var(--ease);}
.nav-menu a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--accent);transition:right .3s var(--ease);}
.nav-menu a:hover{color:var(--text-primary);}
.nav-menu a:hover::after{right:0;}

/* Mega menu — full-width, two columns. Positioned absolute against the
   sticky .site-header (its nearest positioned ancestor) so `top:100%`
   lands exactly at the header's bottom edge with zero gap, and a
   transition-delayed `visibility` masks the brief dead-zone while the
   cursor travels from the nav link down into the panel. JS adds a
   belt-and-braces hover-intent timer on top of this (see main.js). */
.mega-panel{
  position:absolute;top:100%;left:0;width:100%;
  background:var(--bg-2);border-bottom:1px solid var(--border-soft);box-shadow:var(--shadow-lift);
  opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  z-index:90;
}
.nav-item-mega:hover .mega-panel,
.nav-item-mega:focus-within .mega-panel,
.nav-item-mega.is-open .mega-panel{
  opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear 0s;
}
.mega-panel-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-7);padding-block:var(--space-6);}
.mega-col-label{display:block;font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:var(--space-3);}
.mega-col-terms ul{display:flex;flex-direction:column;gap:.65rem;margin-bottom:var(--space-4);}
.mega-col-terms a{font-family:var(--font-display);font-size:1.1rem;color:var(--text-primary);transition:color .2s var(--ease);}
.mega-col-terms a:hover{color:var(--accent-strong);}
.mega-posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);}
.mega-post{display:flex;flex-direction:column;gap:.6rem;min-width:0;}
.mega-post-media{display:block;height:100px;border-radius:var(--radius-sm);background-size:cover;background-position:center;transition:transform .3s var(--ease);}
.mega-post:hover .mega-post-media{transform:scale(1.03);}
.mega-post-title{
  font-family:var(--font-ui);font-size:.88rem;font-weight:600;color:var(--text-primary);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s var(--ease);
}
.mega-post:hover .mega-post-title{color:var(--accent-strong);}
.mega-empty{color:var(--text-tertiary);font-size:.9rem;}
@media (max-width:1200px){ .mega-posts{grid-template-columns:repeat(2,minmax(0,1fr));} }

.site-header-actions{display:flex;align-items:center;gap:.6rem;}
.menu-toggle{display:none;}

.mobile-menu{display:none;}

@media (max-width:960px){
  .site-nav{display:none;}
  .menu-toggle{display:inline-flex;}
  .site-header-actions .btn-primary{display:none;}
  .mobile-menu{
    display:flex;flex-direction:column;
    position:fixed;inset:0;top:0;background:var(--bg-0);z-index:200;padding:calc(104px + 2rem) 1.5rem 2rem;
    transform:translateX(100%);transition:transform .35s var(--ease);
  }
  .mobile-menu[hidden]{display:none;}
  .mobile-menu.is-open{transform:translateX(0);}
  .mobile-nav-menu{display:flex;flex-direction:column;gap:1.6rem;font-family:var(--font-display);font-size:1.6rem;margin-bottom:2.5rem;}
  body.menu-open{overflow:hidden;}
}

/* =========================================================
   Masthead — two compact newspaper rows: one slim bar (nameplate ·
   section nav · Contact · Subscribe) closed by a single rule, over a
   full-width dark strip with the AI News ticker. The header is sticky;
   once the page scrolls (main.js adds .is-scrolled) the strip slides up
   behind the bar and the rule fades, so only the bar stays pinned. The
   strip's space stays reserved, so the page never jumps.
   ========================================================= */
.masthead{
  --strip-h:38px;
  position:sticky;top:var(--wp-admin--admin-bar--height, 0px);z-index:150;
}
.masthead-bar{position:relative;z-index:2;background:var(--bg-0);}
.masthead.is-scrolled{pointer-events:none;}
.masthead.is-scrolled .masthead-bar{pointer-events:auto;box-shadow:0 6px 18px rgba(20,20,18,.08);}

/* Row 2 — full-width news strip (the ticker itself) */
.masthead-strip{
  position:relative;z-index:1;background:#141414;color:#E9E6DF;height:var(--strip-h);padding-left:clamp(16px, 2vw, 28px);
  transition:transform .35s var(--ease);
}
.masthead.is-scrolled .masthead-strip{transform:translateY(-100%);}

/* Row 1 — nameplate · nav · actions */
.masthead-bar{border-bottom:1px solid #1818180d;transition:border-color .35s var(--ease), box-shadow .35s var(--ease);}
.masthead.is-scrolled .masthead-bar{border-bottom-color:transparent;}
.masthead-bar-inner{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-5);
  min-height:74px;
}
.masthead-logo{display:inline-flex;line-height:1;}
.masthead-logo-word{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;
  font-size:1.85rem;color:var(--text-primary);white-space:nowrap;
}
.masthead-logo-word em{font-style:italic;color:var(--accent);font-weight:600;}

.masthead-nav{justify-self:center;}
.masthead-nav-list{
  display:flex;align-items:center;
  font-family:var(--font-ui);font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
}
.masthead-nav-list li + li{border-left:1px solid var(--border);}
.masthead-nav-list a{display:block;padding:.45rem 1.35rem;color:var(--text-primary);position:relative;transition:color .2s var(--ease);}
.masthead-nav-list a::after{
  content:'';position:absolute;left:1.35rem;right:1.35rem;bottom:-.2rem;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.masthead-nav-list a:hover{color:var(--accent-strong);}
.masthead-nav-list a:hover::after,
.masthead-nav-list .current-menu-item > a::after,
.masthead-nav-list .current-menu-ancestor > a::after{transform:scaleX(1);}
.masthead-nav-list .current-menu-item > a,
.masthead-nav-list .current-menu-ancestor > a{color:var(--accent-strong);}

.masthead-actions{display:flex;align-items:center;gap:.6rem;justify-self:end;}
.btn-sm{padding:.55rem 1.15rem;font-size:.8rem;}
.menu-toggle{color:var(--text-primary);}

/* The header (with its menu button) stays above the open mobile menu. */
body.menu-open .masthead{z-index:250;transform:none;}

@media (max-width:1100px){
  .masthead-nav-list a{padding-inline:.9rem;}
  .masthead-nav-list a::after{left:.9rem;right:.9rem;}
  .masthead-logo-word{font-size:1.6rem;}
}
@media (max-width:960px){
  .masthead-nav,.masthead-subscribe,.masthead-contact{display:none;}
  .masthead-bar-inner{grid-template-columns:1fr auto;min-height:62px;}
  .masthead-logo-word{font-size:1.5rem;}
}


/* =========================================================
   Top story (newspaper-style hero) — one big feature + a
   text headline list, replacing the old rotating carousel.
   ========================================================= */
/* =========================================================
   Homepage banner — masthead copy beside a dark "newsroom wire":
   the latest stories from every section in two columns drifting in
   opposite directions (left column top → bottom, right column
   bottom → top). Each column's cards are printed twice so the
   -50% loop point is seamless; hovering pauses the motion.
   ========================================================= */
.hero-banner{
  --sec-ai_news:#E0405A;--sec-post:#5B8DEF;--sec-controversy:#F2A43A;--sec-ai_design:#34C3A0;
  position:relative;overflow:hidden;background:#FAF8F4;border-bottom:1px solid var(--border);
}
.hero-banner-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 420px at 8% 0%, rgba(200,29,58,.10), transparent 70%),
    radial-gradient(520px 380px at 100% 100%, rgba(27,58,99,.08), transparent 70%),
    linear-gradient(rgba(24,24,24,.035) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(24,24,24,.035) 1px, transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);
}
.hero-banner-inner{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem, 4vw, 4.5rem);align-items:center;padding-block:clamp(2.6rem, 4vw, 4.2rem);
}
.hero-banner.is-copy-only .hero-banner-inner{grid-template-columns:minmax(0,1fr);}
.hero-banner-copy h1{
  font-size:clamp(2.5rem, 3.4vw + 1rem, 4.3rem);line-height:1.04;letter-spacing:-.025em;font-weight:700;
  margin-block:var(--space-3) var(--space-4);max-width:13ch;
}
.hero-banner-copy h1 em{font-style:italic;font-weight:500;color:var(--accent);}
.hero-banner-copy .hero-lede{max-width:44ch;margin-bottom:var(--space-5);}
.hero-banner-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:var(--space-5);}
.hero-banner-actions .btn svg{width:16px;height:16px;}
.hero-banner-actions .btn-ghost{background:var(--bg-0);}

.hero-banner-sections{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:var(--space-4);border-top:1px solid var(--border);}
.hero-section-link{
  display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border:1px solid var(--border);border-radius:999px;
  background:var(--bg-0);font-family:var(--font-ui);font-size:.8rem;font-weight:600;color:var(--text-primary);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.hero-section-link:hover{border-color:var(--text-primary);transform:translateY(-1px);}
.hero-section-dot{width:8px;height:8px;border-radius:50%;background:var(--sec);}
.hero-section-count{font-size:.72rem;color:var(--text-tertiary);font-weight:600;}
.is-ai_news{--sec:var(--sec-ai_news);}
.is-post{--sec:var(--sec-post);}
.is-controversy{--sec:var(--sec-controversy);}
.is-ai_design{--sec:var(--sec-ai_design);}

/* The wire panel */
.hero-wire{
  position:relative;display:flex;flex-direction:column;height:540px;padding:1.1rem 1.1rem 0;
  background:#141414;border-radius:var(--radius-lg);color:#F3F1EC;
  box-shadow:0 30px 60px -24px rgba(20,20,18,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.hero-wire-head{
  display:flex;align-items:center;gap:.6rem;padding:0 .2rem .9rem;border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--font-ui);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.hero-wire-meta{margin-left:auto;color:#8F8B82;letter-spacing:.06em;}
.hero-wire-cols{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;}
.hero-wire-col{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
}
.hero-wire-track{display:flex;flex-direction:column;will-change:transform;}
.hero-wire-col.is-down .hero-wire-track{animation:wire-down var(--wire-duration, 40s) linear infinite;}
.hero-wire-col.is-up .hero-wire-track{animation:wire-up var(--wire-duration, 40s) linear infinite;}
@keyframes wire-down{from{transform:translateY(-50%);}to{transform:translateY(0);}}
@keyframes wire-up{from{transform:translateY(0);}to{transform:translateY(-50%);}}
.hero-wire:hover .hero-wire-track,.hero-wire:focus-within .hero-wire-track{animation-play-state:paused;}

/* Spacing is margin on each card (flex items don't collapse margins), so
   both copies are exactly the same height and the loop doesn't jump. */
.wire-card{
  display:flex;gap:.8rem;align-items:flex-start;margin-bottom:.8rem;padding:.85rem;
  background:#1D1D1C;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.wire-card:first-child{margin-top:.8rem;}
.wire-card:hover,.wire-card:focus-visible{background:#262624;border-color:var(--sec);}
.wire-thumb{flex:none;width:56px;height:56px;border-radius:8px;background:#2A2A28 center/cover no-repeat;}
.wire-body{display:flex;flex-direction:column;gap:.35rem;min-width:0;}
.wire-badge{
  display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-ui);font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sec);
}
.wire-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--sec);}
.wire-title{
  font-family:var(--font-display);font-size:.95rem;font-weight:600;line-height:1.3;color:#F6F4EF;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.wire-date{font-family:var(--font-ui);font-size:.72rem;color:#8F8B82;}

@media (prefers-reduced-motion: reduce){
  .hero-wire-track{animation:none !important;}
  .hero-wire-col{overflow-y:auto;}
}
@media (max-width:960px){
  .hero-banner-inner{grid-template-columns:minmax(0,1fr);}
  .hero-banner-copy h1{max-width:16ch;}
  .hero-wire{height:460px;}
}
@media (max-width:640px){
  .hero-wire{height:420px;padding-inline:.8rem;}
  .hero-wire-cols{gap:.6rem;}
  .hero-wire-meta,.wire-thumb{display:none;}
  .wire-card{padding:.75rem;margin-bottom:.6rem;}
  .wire-card:first-child{margin-top:.6rem;}
  .wire-title{font-size:.88rem;-webkit-line-clamp:4;}
}

.hero-news{padding-block:var(--space-7) var(--space-8);}
.hero-news-intro{max-width:640px;margin-bottom:var(--space-6);}
.hero-news-intro h1{font-size:clamp(2.4rem, 3vw + 1rem, 3.6rem);margin-bottom:var(--space-3);}
.hero-lede{color:var(--text-secondary);font-size:1.12rem;}

.hero-news-grid{display:flex;gap:var(--space-7);align-items:flex-start;}
.hero-big-story{flex:1.6;min-width:0;}
.hero-big-story-media{display:block;height:420px;border-radius:var(--radius-lg);background-size:cover;background-position:center;margin-bottom:var(--space-4);}
.hero-big-story-body .tag{margin-bottom:var(--space-3);}
.hero-big-story-body h2{font-size:clamp(1.8rem, 2vw + 1rem, 2.6rem);margin-bottom:var(--space-3);}
.hero-big-story-body h2 a:hover{color:var(--accent-strong);}
.hero-big-story-body p{color:var(--text-secondary);font-size:1.05rem;max-width:60ch;margin-bottom:var(--space-3);}

.hero-headlines{flex:1;min-width:0;border-left:1px solid var(--border);padding-left:var(--space-6);}
.hero-headlines h2{font-family:var(--font-ui);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:2px solid var(--text-primary);}
.hero-headlines ol li{display:flex;align-items:baseline;gap:.9rem;padding-block:.9rem;border-bottom:1px solid var(--border-soft);}
.hero-headlines ol li:last-child{border-bottom:0;}
.hero-headlines a{font-family:var(--font-display);font-weight:600;line-height:1.4;transition:color .2s var(--ease);}
.hero-headlines a:hover{color:var(--accent-strong);}

@media (max-width:900px){
  .hero-news-grid{flex-direction:column;}
  .hero-headlines{border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:var(--space-5);width:100%;}
  .hero-big-story-media{height:300px;}
}

/* =========================================================
   Zig-zag category rows — one big feature alternating sides
   with a text-forward headline list, row to row.
   ========================================================= */
.zigzag-row{padding-block:var(--space-8);border-top:1px solid var(--border);}
.zigzag-row:nth-of-type(even){background:var(--bg-1);}
.zigzag-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap;}
.zigzag-head h2{font-size:clamp(1.6rem, 1.4vw + 1.1rem, 2.2rem);margin-top:.3rem;}

.zigzag-grid{display:flex;gap:var(--space-7);align-items:flex-start;}
.is-reverse .zigzag-grid{flex-direction:row-reverse;}

.zigzag-feature{flex:1.4;min-width:0;}
.zigzag-feature-media{display:block;height:340px;border-radius:var(--radius-lg);background-size:cover;background-position:center;margin-bottom:var(--space-4);transition:filter .3s var(--ease);}
.zigzag-feature:hover .zigzag-feature-media{filter:brightness(1.05);}
.zigzag-feature-body h3{font-size:clamp(1.4rem, 1.4vw + 1rem, 1.9rem);margin-block:var(--space-3);}
.zigzag-feature-body h3 a:hover{color:var(--accent-strong);}
.zigzag-feature-body p{
  color:var(--text-secondary);margin-bottom:var(--space-3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

.zigzag-list{flex:1;min-width:0;display:flex;flex-direction:column;}
.zigzag-list li{display:flex;gap:var(--space-3);padding-block:var(--space-3);border-top:1px solid var(--border-soft);}
.zigzag-list li:first-child{border-top:0;padding-top:0;}
.zigzag-list-media{flex:none;width:84px;height:64px;border-radius:var(--radius-sm);background-size:cover;background-position:center;}
.zigzag-list-body{min-width:0;}
.zigzag-list-body h4{font-size:1rem;line-height:1.35;font-family:var(--font-display);font-weight:600;}
.zigzag-list-body h4 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s var(--ease);}
.zigzag-list-body h4 a:hover{color:var(--accent-strong);}
.zigzag-list-body .meta-row{margin-top:.35rem;}

@media (max-width:900px){
  .zigzag-grid,.is-reverse .zigzag-grid{flex-direction:column;}
  .zigzag-feature-media{height:260px;}
}
@media (max-width:520px){
  .zigzag-list-media{display:none;}
}

/* =========================================================
   Hero (legacy carousel hero — unused on the homepage now,
   kept in case another template still wants it)
   ========================================================= */
.hero{position:relative;padding-block:var(--space-8) var(--space-7);overflow:hidden;}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(200,29,58,.14), transparent 60%),
    radial-gradient(45% 40% at 0% 100%, rgba(27,58,99,.12), transparent 60%);
}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-7);align-items:center;}

.hero-intro .eyebrow{margin-bottom:var(--space-3);}
.hero-intro h1{font-size:clamp(2.2rem, 2.6vw + 1rem, 3.6rem);margin-bottom:var(--space-3);}
.hero-lede{color:var(--text-secondary);font-size:1.12rem;max-width:46ch;margin-bottom:var(--space-5);}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:var(--space-6);}

.hero-stats{display:flex;gap:var(--space-6);font-family:var(--font-ui);}
.hero-stats li{display:flex;flex-direction:column;gap:.15rem;}
.hero-stats strong{font-family:var(--font-display);font-size:1.4rem;color:var(--accent);}
.hero-stats span{font-size:.78rem;color:var(--text-tertiary);}

/* The clip boundary (overflow:hidden) has to live on a wrapper that
   does NOT itself get transformed — putting it on the same element as
   the translateX() means the clip region slides along with the content
   and never actually hides the adjacent slide, so it stays visible and
   overlaps the active one. */
.hero-carousel{
  position:relative;
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-soft);
  box-shadow:var(--shadow-lift);
}
.hero-carousel-track{
  display:flex;
  transition:transform .6s var(--ease);
}
.hero-slide{flex:0 0 100%;position:relative;min-height:400px;display:flex;align-items:flex-end;background:var(--bg-2);}
.hero-slide-media{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 8s var(--ease);}
.hero-slide.is-active .hero-slide-media{transform:scale(1.06);}
.hero-slide-body{
  /* This caption sits on a photographic scrim, so it keeps light-on-dark
     text regardless of the site's overall (light) theme. */
  --text-primary:#F6F1E7;
  --text-secondary:#D9CFBE;
  --text-tertiary:#B9AC97;
  --accent-strong:#E8C079;
  position:relative;z-index:1;width:100%;
  /* Extra inline padding keeps the headline clear of the vertically
     centered prev/next buttons that overlay the slide on both edges. */
  padding:var(--space-6) 76px;
  background:linear-gradient(0deg, rgba(15,12,8,.94) 10%, rgba(15,12,8,.55) 55%, transparent 100%);
}
.hero-slide-title{font-size:clamp(1.3rem, 1.3vw + 1rem, 1.9rem);margin-block:var(--space-2);}
.hero-slide-title a{transition:color .25s var(--ease);}
.hero-slide-title a:hover{color:var(--accent-strong);}
.hero-slide-excerpt{color:var(--text-secondary);max-width:56ch;margin-bottom:var(--space-3);}

/* Prev/next sit directly on the slide image, vertically centered,
   pinned to the left/right edges — no dots, no control row underneath. */
.carousel-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(21,18,13,.45);backdrop-filter:blur(4px);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.carousel-nav svg{width:18px;height:18px;}
.carousel-nav:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:translateY(-50%) scale(1.06);}
.carousel-nav-prev{left:var(--space-3);}
.carousel-nav-prev svg{transform:rotate(180deg);}
.carousel-nav-next{right:var(--space-3);}
@media (max-width:560px){
  .carousel-nav{width:38px;height:38px;}
  .carousel-nav-prev{left:var(--space-2);}
  .carousel-nav-next{right:var(--space-2);}
  .hero-slide-body{padding-inline:60px;}
}

@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr;}
}

/* =========================================================
   Ticker
   ========================================================= */
.ticker{display:flex;align-items:center;gap:.75rem;}
/* Small live dot instead of a text label. */
.ticker-pulse{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(200,29,58,.6);animation:ticker-pulse 2s ease-out infinite;}
@keyframes ticker-pulse{0%{box-shadow:0 0 0 0 rgba(200,29,58,.6);}70%,100%{box-shadow:0 0 0 7px rgba(200,29,58,0);}}
.ticker-viewport{
  flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
/* Spacing is padding on each item (not flex gap) so the two copies are exactly
   equal width and the -50% loop point lands without a jump. */
.ticker-track{display:flex;width:max-content;animation:ticker var(--ticker-duration, 130s) linear infinite reverse;}
.ticker-item{
  display:inline-flex;align-items:center;gap:1.1rem;padding-left:1.1rem;
  font-family:var(--font-ui);font-weight:500;font-size:.8rem;white-space:nowrap;color:#F3F1EC;transition:color .2s var(--ease);
}
.ticker-item::before{content:'';width:4px;height:4px;background:var(--accent);flex:none;}
.ticker-item:hover,.ticker-item:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:3px;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){
  .ticker-viewport{overflow-x:auto;}
  .ticker-pulse{animation:none;}
}

/* =========================================================
   Sections generic
   ========================================================= */
.section{padding-block:var(--space-8);}
.section-alt{background:var(--bg-1);}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.7rem, 1.2vw + 1.2rem, 2.3rem);}
.section-head-center{flex-direction:column;align-items:center;text-align:center;margin-inline:auto;max-width:640px;}

/* =========================================================
   Latest + Trending split
   ========================================================= */
.section-split{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(0,.85fr);gap:var(--space-7);align-items:start;}

.card-grid{
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--space-5) var(--space-4);
  grid-auto-rows:1fr;
}

/* Full-width archive/category/blog listings (no sidebar) get 3 per row
   instead of the homepage's 2-column Latest Stories layout. */
.card-grid-archive{grid-template-columns:repeat(3, minmax(0,1fr));}
@media (max-width:900px){
  .card-grid-archive{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:640px){
  .card-grid.card-grid-archive{grid-template-columns:1fr;}
}
.card .meta-row{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;}

/* Story card — a clearly separate, bordered card: image on top at a fixed
   ratio (the same 640x440 the bm-card thumbnail is cut to, so nothing is
   cropped twice), then category, headline, excerpt, and the byline in a
   footer row pinned to the bottom so cards in a row line up. */
.card{
  display:flex;flex-direction:column;height:100%;background:var(--bg-0);
  border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;
  box-shadow:0 1px 2px rgba(27,22,15,.04);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.card:hover{border-color:#D6D3CA;box-shadow:var(--shadow-soft);transform:translateY(-3px);}
.card-media{
  display:block;aspect-ratio:640 / 440;background-repeat:no-repeat;background-color:var(--bg-1);background-size:cover;background-position:center;
  border-bottom:1px solid var(--border);transition:transform .5s var(--ease);
}
.card:hover .card-media{transform:scale(1.02);}

/* Image slots that show the whole featured image (bm_post_thumb() sets
   'fit'): it is centred at full size and the space around it is filled with
   the image's own edge colour (--fit-bg), so nothing is ever cut off and the
   slot blends with the picture. The layer inherits the inline
   background-image; the slot's own copy is hidden with a zero size. */
.is-fit{position:relative;overflow:hidden;isolation:isolate;background-size:0 0 !important;background-color:var(--fit-bg,var(--bg-1));}
.hero-slide-media.is-fit{position:absolute;}
/* Hairline frame so a white image on a white page still reads as a card. */
.is-fit::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(27,22,15,.09);}
.is-fit::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:inherit;background-repeat:no-repeat;background-position:center;background-size:contain;
}
/* Big slots take the image's own shape, so the picture fills them edge to
   edge; very tall images are capped and centred on their edge colour. */
.hero-big-story-media.is-fit,.zigzag-feature-media.is-fit{height:auto;aspect-ratio:var(--img-ratio, 16 / 10);max-height:560px;}

/* A section with a single story: image and text side by side. */
.zigzag-grid.is-solo .zigzag-feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-6);align-items:center;}
.zigzag-grid.is-solo .zigzag-feature-media{margin-bottom:0;}
.zigzag-grid.is-solo .zigzag-feature-body h3{font-size:clamp(1.6rem, 1.6vw + 1rem, 2.3rem);margin-top:var(--space-3);}
.zigzag-grid.is-solo .zigzag-feature-body p{-webkit-line-clamp:4;}
@media (max-width:900px){
  .zigzag-grid.is-solo .zigzag-feature{grid-template-columns:1fr;gap:var(--space-4);}
}
.card-body{display:flex;flex-direction:column;gap:.6rem;flex:1;padding:var(--space-4) var(--space-4) 0;position:relative;background:var(--bg-0);}
.card-body .tag{
  background:none;border:0;padding:0;border-radius:0;
  color:var(--accent-strong);font-size:.7rem;letter-spacing:.12em;
}
.card-title{font-size:1.18rem;line-height:1.3;}
.card-title a{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .25s var(--ease);
}
/* Whole card is clickable through the title link. */
.card-title a::after{content:'';position:absolute;inset:0;}
.card:hover .card-title a{color:var(--accent-strong);}
.card-excerpt{
  color:var(--text-secondary);font-size:.94rem;line-height:1.6;flex:1;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card-body .meta-row{
  margin:var(--space-2) calc(var(--space-4) * -1) 0;padding:.85rem var(--space-4);
  border-top:1px solid var(--border);
}

/* Trending */
.trending-panel{background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:var(--space-5);margin-bottom:var(--space-5);}
.trending-panel h2{font-size:1.2rem;margin-bottom:var(--space-4);}
.trending-list li{display:flex;align-items:baseline;gap:1rem;padding-block:.8rem;border-top:1px solid var(--border-soft);}
.trending-list li:first-child{border-top:0;padding-top:0;}
.trending-index{font-family:var(--font-display);font-style:italic;color:var(--accent-strong);font-size:1rem;flex:none;}
.trending-list a{font-family:var(--font-ui);font-weight:500;line-height:1.4;transition:color .2s var(--ease);}
.trending-list a:hover{color:var(--accent-strong);}

.newsletter-inline{background:linear-gradient(160deg, var(--bg-3), var(--bg-2));border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:var(--space-5);}
.newsletter-inline h2{font-size:1.2rem;margin-bottom:.5rem;}
.newsletter-inline p{color:var(--text-secondary);font-size:.9rem;margin-bottom:var(--space-4);}

.newsletter-form{display:flex;flex-direction:column;gap:.5rem;}
.newsletter-form-row{display:flex;gap:.6rem;flex-wrap:wrap;}
.newsletter-form input{
  flex:1;min-width:0;background:var(--bg-0);border:1px solid var(--border);border-radius:100px;
  padding:.85rem 1.2rem;color:var(--text-primary);transition:border-color .25s var(--ease);
}
.newsletter-form input:focus{border-color:var(--accent);}
.newsletter-form input::placeholder{color:var(--text-tertiary);}
.newsletter-form input:user-invalid{border-color:var(--accent-2);}

/* Honeypot — visually and semantically hidden from real visitors, left
   open for bots that fill in every field. */
.bm-hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden;}

.newsletter-form-msg{margin:0;font-family:var(--font-ui);font-size:.85rem;padding:.5rem .9rem;border-radius:var(--radius-sm);}
.newsletter-form-msg.is-success{background:#EAF3E4;color:#3D6B2C;}
.newsletter-form-msg.is-error{background:#FBE4E0;color:#A3341F;}
.newsletter-form.is-submitting .newsletter-form-row{opacity:.6;pointer-events:none;}

@media (max-width:960px){
  /* Trending sidebar stacks below here, so Latest Stories gets the
     full container width back — keep 3 columns rather than dropping
     to 2 just because the viewport crossed this breakpoint. */
  .section-split{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:480px){
  .card-grid{grid-template-columns:1fr;}
}

/* =========================================================
   Category tiles
   ========================================================= */
.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);}
.category-tile{
  position:relative;display:flex;flex-direction:column;gap:.6rem;padding:var(--space-5);
  background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.category-tile:hover{transform:translateY(-6px);border-color:var(--accent-2);background:var(--bg-3);}
.category-tile-icon{
  width:46px;height:46px;border-radius:12px;background:var(--bg-3);color:var(--accent);
  display:flex;align-items:center;justify-content:center;transition:all .35s var(--ease);
}
.category-tile-icon svg{width:22px;height:22px;}
.category-tile:hover .category-tile-icon{background:var(--accent-2);color:var(--bg-0);transform:rotate(-8deg) scale(1.05);}
.category-tile h3{font-size:1.2rem;}
.category-tile p{color:var(--text-secondary);font-size:.92rem;flex:1;}
.category-tile-count{font-family:var(--font-ui);font-size:.78rem;color:var(--text-tertiary);}
.category-tile-arrow{position:absolute;top:var(--space-5);right:var(--space-5);color:var(--text-tertiary);transition:all .3s var(--ease);}
.category-tile-arrow svg{width:16px;height:16px;}
.category-tile:hover .category-tile-arrow{color:var(--accent-2-strong);transform:translate(3px,-3px);}

@media (max-width:960px){ .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .category-grid{grid-template-columns:1fr;} }

/* =========================================================
   Futuristic AI section — 3D floating scene
   Deliberately kept as a dark "spotlight" panel for contrast and
   drama, even though the rest of the site is now light — a common
   pattern for a single high-impact feature section. Re-scopes the
   shared tokens locally so every component inside (eyebrow, tags,
   buttons, glows, grid lines) automatically renders correctly.
   ========================================================= */
.ai-scene{
  --bg-0:#15120D; --bg-1:#1C1712; --bg-2:#241E17; --bg-3:#2D251C;
  --border:#3A2F23; --border-soft:rgba(244,236,220,.09);
  --text-primary:#F4ECDC; --text-secondary:#BBAA92; --text-tertiary:#8A7B67;
  --accent:#D6A85C; --accent-strong:#E8C079; --accent-2:#C1652F; --accent-2-strong:#D6703F;
  position:relative;overflow:hidden;background:var(--bg-1);perspective:1400px;
}
.ai-scene-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:pulse 7s ease-in-out infinite;}
.glow-gold{width:420px;height:420px;background:var(--accent);top:-120px;right:-80px;}
.glow-rust{width:360px;height:360px;background:var(--accent-2);bottom:-140px;left:-60px;animation-delay:-3.5s;}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(1);}50%{opacity:.6;transform:scale(1.12);}}

.grid-lines{
  position:absolute;inset:-20% -20% 0 -20%;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size:56px 56px;
  transform:rotateX(58deg);
  transform-origin:bottom;
  mask-image:linear-gradient(to top, black, transparent 75%);
}

.float-shape{
  position:absolute;border-radius:22%;border:1px solid var(--border);
  background:linear-gradient(155deg, rgba(214,168,92,.18), rgba(193,101,47,.06));
  backdrop-filter:blur(2px);
  animation:float 9s ease-in-out infinite;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
}
.shape-1{width:120px;height:120px;top:12%;left:8%;animation-duration:10s;}
.shape-2{width:70px;height:70px;top:60%;left:20%;border-radius:50%;animation-duration:8s;animation-delay:-2s;}
.shape-3{width:150px;height:150px;top:8%;right:10%;animation-duration:12s;animation-delay:-4s;}
.shape-4{width:90px;height:90px;bottom:10%;right:18%;border-radius:30%;animation-duration:9s;animation-delay:-1s;}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg) rotateX(0deg);}
  50%{transform:translateY(-22px) rotate(8deg) rotateX(12deg);}
}

.ai-scene-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-7);align-items:center;}
.ai-scene-copy h2{font-size:clamp(1.9rem, 1.6vw + 1.2rem, 2.6rem);margin-bottom:var(--space-3);}
.ai-scene-copy .section-sub{margin-bottom:var(--space-4);}

.ai-feature-card{
  background:rgba(36,30,23,.7);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-6);backdrop-filter:blur(6px);
  transform:rotateY(-4deg) rotateX(2deg);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow:var(--shadow-lift);
}
.ai-feature-card:hover{transform:rotateY(0) rotateX(0) translateY(-4px);}
.ai-feature-card h3{font-size:1.5rem;margin-block:var(--space-3);}
.ai-feature-card h3 a:hover{color:var(--accent);}
.ai-feature-card p{color:var(--text-secondary);margin-bottom:var(--space-4);}

@media (max-width:960px){
  .ai-scene-inner{grid-template-columns:1fr;}
  .ai-feature-card{transform:none;}
}

/* =========================================================
   Brand breakdown feature
   ========================================================= */
.breakdown-feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);align-items:center;
  background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-lg);overflow:hidden;
}
.breakdown-media{min-height:380px;height:100%;background-size:cover;background-position:center;}
.breakdown-body{padding:var(--space-6);}
.breakdown-body h3{font-size:clamp(1.5rem, 1.4vw + 1rem, 2rem);margin-block:var(--space-3);}
.breakdown-body h3 a:hover{color:var(--accent);}
.breakdown-body blockquote{
  font-family:var(--font-display);font-style:italic;font-size:1.2rem;color:var(--accent-strong);
  border-left:2px solid var(--accent);padding-left:var(--space-4);margin-bottom:var(--space-4);
}
.breakdown-body p{color:var(--text-secondary);margin-bottom:var(--space-4);}
.breakdown-body .meta-row{margin-bottom:var(--space-4);}

@media (max-width:860px){
  .breakdown-feature{grid-template-columns:1fr;}
  .breakdown-media{min-height:260px;}
}

/* =========================================================
   Opinions
   ========================================================= */
.opinion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);grid-auto-rows:1fr;}
.opinion-card{
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-5);
  background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:var(--space-5);
  transition:transform .3s var(--ease), border-color .3s var(--ease);height:100%;
}
.opinion-card:hover{transform:translateY(-4px);border-color:var(--accent);}
.opinion-quote{font-family:var(--font-display);font-size:1.15rem;font-style:italic;line-height:1.5;}
.opinion-byline{display:flex;align-items:center;gap:.8rem;font-family:var(--font-ui);}
.opinion-byline div{display:flex;flex-direction:column;line-height:1.3;}
.opinion-byline span{font-size:.8rem;color:var(--text-tertiary);}
.avatar{
  width:42px;height:42px;border-radius:50%;background:var(--accent-2);color:var(--bg-0);flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-weight:700;font-size:.85rem;
}
@media (max-width:860px){ .opinion-grid{grid-template-columns:1fr;} }

/* =========================================================
   Stats
   ========================================================= */
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);}
.stat-card{
  text-align:center;padding:var(--space-6) var(--space-4);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  background:linear-gradient(160deg, var(--bg-2), var(--bg-1));
}
.stat-value{display:block;font-family:var(--font-display);font-size:clamp(2.2rem, 2vw + 1.4rem, 3rem);color:var(--accent);margin-bottom:.4rem;}
.stat-card p{color:var(--text-secondary);font-size:.92rem;}
@media (max-width:860px){ .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:520px){ .stats-grid{grid-template-columns:1fr;} }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band{background:linear-gradient(120deg, var(--accent), var(--accent-2));}
.cta-band-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--space-6);align-items:center;}
.cta-band h2{color:var(--accent-ink);font-size:clamp(1.8rem, 1.6vw + 1.2rem, 2.4rem);margin-bottom:var(--space-3);}
.cta-band p{color:rgba(255,255,255,.82);max-width:52ch;}
.cta-band .newsletter-form input{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:var(--accent-ink);}
.cta-band .newsletter-form input::placeholder{color:rgba(255,255,255,.65);}
@media (max-width:860px){ .cta-band-inner{grid-template-columns:1fr;} }

/* =========================================================
   Footer — "giant": a headline row (Breakdowns, Interviews,
   Surveys — real recent stories) on top of the usual link/
   subscribe columns.
   ========================================================= */
.site-footer{background:var(--bg-1);border-top:1px solid var(--border-soft);padding-top:var(--space-7);}

.footer-headlines-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6);
  padding-bottom:var(--space-7);border-bottom:1px solid var(--border);
}
.footer-col-headlines h2{
  font-family:var(--font-display);font-size:1.35rem;font-weight:700;letter-spacing:normal;text-transform:none;
  color:var(--text-primary);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:3px solid var(--accent);
}
.section-empty{
  border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--bg-1);
  padding:var(--space-7) var(--space-5);text-align:center;color:var(--text-secondary);font-family:var(--font-body);
}
.footer-headline-list{display:flex;flex-direction:column;gap:.85rem;margin-bottom:var(--space-4);font-family:var(--font-body);}
.footer-headline-list a{color:var(--text-secondary);line-height:1.4;transition:color .2s var(--ease);}
.footer-headline-list a:hover{color:var(--accent-strong);}

.footer-top{display:grid;grid-template-columns:1.2fr .7fr .7fr 1.1fr;gap:var(--space-6);padding-block:var(--space-7);}
.footer-brand p{color:var(--text-secondary);font-size:.92rem;margin-block:var(--space-3);max-width:36ch;}
.footer-col h2{font-family:var(--font-ui);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:var(--space-4);}
.footer-col ul{display:flex;flex-direction:column;gap:.9rem;font-family:var(--font-ui);}
.footer-col a{color:var(--text-secondary);transition:color .2s var(--ease);}
.footer-col a:hover{color:var(--accent-strong);}
.footer-col-subscribe p{color:var(--text-secondary);font-size:.9rem;margin-bottom:var(--space-4);}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  border-top:1px solid var(--border-soft);padding-block:var(--space-4);font-family:var(--font-ui);font-size:.82rem;color:var(--text-tertiary);
}
.footer-legal{display:flex;gap:1.2rem;}
.footer-legal a:hover{color:var(--accent-strong);}
.back-to-top{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease);}
.back-to-top svg{width:15px;height:15px;transform:rotate(-90deg);}
.back-to-top:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:translateY(-3px);}

@media (max-width:960px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .footer-headlines-row{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .footer-headlines-row{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
}

/* =========================================================
   Archive hero — eye-catching banner + search, shared by every
   archive/taxonomy/blog/search template.
   ========================================================= */
.archive-hero{position:relative;overflow:hidden;padding-block:var(--space-8) var(--space-7);text-align:center;}
.archive-hero-bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(55% 60% at 50% 0%, rgba(200,29,58,.14), transparent 65%),
    radial-gradient(40% 50% at 100% 100%, rgba(27,58,99,.1), transparent 60%);
}
.archive-hero-inner{position:relative;z-index:1;max-width:720px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;}
.archive-hero-inner .eyebrow{justify-content:center;}
.archive-hero-inner h1{font-size:clamp(2.2rem, 2.4vw + 1rem, 3.4rem);}
.archive-hero-lede{color:var(--text-secondary);font-size:1.1rem;max-width:56ch;margin-block:var(--space-3) var(--space-5);}

.archive-search-form{
  display:flex;align-items:center;gap:.5rem;width:100%;max-width:520px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:100px;
  padding:.4rem .4rem .4rem 1.2rem;box-shadow:var(--shadow-soft);
}
.archive-search-form svg{width:19px;height:19px;color:var(--text-tertiary);flex:none;}
.archive-search-form input{flex:1;min-width:0;background:none;border:0;color:var(--text-primary);font-size:1rem;font-family:var(--font-ui);}
.archive-search-form input::placeholder{color:var(--text-tertiary);}
.archive-search-form .btn{flex:none;padding-block:.65rem;}
@media (max-width:560px){
  .archive-search-form{flex-wrap:wrap;border-radius:var(--radius-md);padding:.8rem;}
  .archive-search-form input{flex-basis:100%;order:1;padding-block:.4rem;}
  .archive-search-form .btn{flex:1;order:2;justify-content:center;}
}

/* =========================================================
   Simple templates (single/page/archive/search/404)
   ========================================================= */
.archive-section h1{font-size:clamp(2rem, 1.6vw + 1.2rem, 2.8rem);}
.pagination-row{margin-top:var(--space-6);display:flex;justify-content:center;gap:1rem;font-family:var(--font-ui);}
.pagination-row .page-numbers{padding:.6rem 1.1rem;border:1px solid var(--border);border-radius:100px;transition:all .2s var(--ease);}
.pagination-row .page-numbers:hover,.pagination-row .page-numbers.current{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}

/* Article header — a masthead-style top rule + a proper byline block,
   so single posts read as part of the same newspaper as the homepage
   rather than a generic blog post. */
.single-post-header{border-top:3px solid var(--accent);padding-top:var(--space-4);}
.single-post h1{font-size:clamp(2.1rem, 2.2vw + 1.2rem, 3.2rem);margin-block:var(--space-3);}
.single-post-byline{
  padding-block:var(--space-3);margin-bottom:var(--space-5);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  font-family:var(--font-ui);font-size:.85rem;
}
/* The featured image at its own shape — never cropped. */
.single-post-media{margin:var(--space-5) 0;}
/* Full width at its natural shape; a very tall image shrinks (centred)
   instead of being cropped or padded. */
.single-post-media img{display:block;width:auto;max-width:100%;height:auto;max-height:760px;margin-inline:auto;border-radius:var(--radius-lg);box-shadow:0 0 0 1px rgba(27,22,15,.08);}
.single-post-content{font-size:1.08rem;line-height:1.75;color:var(--text-secondary);}
.single-post-content p{margin-bottom:1.4em;}
.single-post-content h2,.single-post-content h3{color:var(--text-primary);margin-block:1.4em .6em;}
.single-post-content blockquote{
  font-family:var(--font-display);font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--accent-strong);
  border-left:3px solid var(--accent);padding-left:var(--space-4);margin-block:var(--space-5);
}
.single-post-dek{font-family:var(--font-display);font-style:italic;font-size:1.2rem;color:var(--text-secondary);margin-block:var(--space-2) 0;}

/* Interview detail */
.interviewee-card{
  display:flex;align-items:center;gap:1rem;margin-block:var(--space-5);padding:var(--space-4);
  background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);
}
.interviewee-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;}
.interviewee-avatar{width:64px;height:64px;font-size:1.1rem;}
.interviewee-card div{display:flex;flex-direction:column;gap:.2rem;font-family:var(--font-ui);}
.interviewee-card span{color:var(--text-secondary);font-size:.9rem;}

/* Brand Breakdown detail */
.breakdown-meta-bar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-4);
  margin-block:var(--space-5);padding:var(--space-4);
  background:var(--bg-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);font-family:var(--font-ui);
}
.breakdown-meta-bar span{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:.3rem;}
.breakdown-meta-bar strong{font-family:var(--font-display);font-size:1.05rem;color:var(--text-primary);}
.verdict-badge{display:inline-block;padding:.2rem .6rem;border-radius:100px;font-size:.85rem;}
.verdict-badge.verdict-good{background:#EAF3E4;color:#3D6B2C;}
.verdict-badge.verdict-mixed{background:var(--bg-3);color:var(--accent-strong);}
.verdict-badge.verdict-poor{background:#FBE4E0;color:#A3341F;}

.logo-compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-block:var(--space-5);}
.logo-compare-panel{border:1px solid var(--border-soft);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-2);}
.logo-compare-label{display:block;font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);padding:.7rem var(--space-3) 0;}
.logo-compare-media{height:220px;background-size:cover;background-position:center;margin:.5rem var(--space-3) var(--space-3);border-radius:var(--radius-sm);}
@media (max-width:600px){ .logo-compare{grid-template-columns:1fr;} }

/* Survey detail */
.survey-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-4);margin-block:var(--space-5);}

/* Contact page */
.contact-form{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-5);}
.contact-form label{display:flex;flex-direction:column;gap:.4rem;font-family:var(--font-ui);font-weight:600;font-size:.92rem;color:var(--text-primary);}
.contact-form input,.contact-form textarea{
  font-family:var(--font-body);font-size:1rem;font-weight:400;padding:.85rem 1rem;
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);
  transition:border-color .25s var(--ease);
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);}
.contact-form button{align-self:flex-start;}
.form-notice{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);margin-top:var(--space-5);font-family:var(--font-ui);}
.form-notice-success{background:#EAF3E4;color:#3D6B2C;}
.form-notice-error{background:#FBE4E0;color:#A3341F;}

/* =========================================================
   Scroll reveal
   ========================================================= */
.reveal{opacity:1;}
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.js .reveal.is-visible{opacity:1;transform:translateY(0);}

/* Folder-driven blog posts (inc/blogs.php): the article column (same width
   as .container, like every other page), Elementor's
   wrappers flattened so each blog's own stylesheet owns the spacing, and the
   marker shown in the Elementor editor for a section that is switched off. */
.bm-blog{max-width:var(--container);margin-inline:auto;padding:0 clamp(1.25rem, 4vw, 2.5rem) var(--space-8);}
.bm-blog .e-con{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;--row-gap:0px;--column-gap:0px;--widgets-spacing:0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}
.bm-blog .elementor-widget:not(:last-child){margin-bottom:0;}
.bmb-hidden-note{font:600 12px/1.4 var(--font-ui);color:var(--text-tertiary);background:var(--bg-1);border:1px dashed var(--border);border-radius:var(--radius-sm);padding:10px 14px;margin:6px 0;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .reveal{opacity:1;transform:none;}
}