/* GENERATED by build-theme.py — edit the prototypes, not this file. */
/* =========================================================================
   MATERIALIZE / THEME NEUTRALISATION
   Loaded FIRST, before any of our component CSS.

   The live theme loads Materialize site-wide, and Materialize styles bare elements
   hard — header, footer, main, section, aside, button, input, h3, h4. Our markup uses
   those elements, so its rules reach straight into the new header and footer.

   What this already cost, on the first dev install:
     nav            height:64px + a box-shadow -> a grey slab behind the menu
     nav ul li      float:left                 -> footer links running together on one line
     nav a          height:56px;line-height:56px

   The <nav> elements are gone (replaced by <div role="navigation">, which is the same
   landmark to assistive tech but invisible to an element selector). This file covers
   the rest.

   EVERY RULE IS WRAPPED IN :where() ON PURPOSE. :where() contributes zero specificity,
   so each rule below scores exactly the same as the bare Materialize rule it is
   cancelling — and wins only because our stylesheet loads later. That means it can
   never outrank our own component rules. Without :where(), `.bar button` would score
   0,1,1 and would quietly beat `.btn-sub` at 0,1,0, killing the red newsletter button.
   ========================================================================= */

:where(.bar, .util, .drawer, .ntv-band, .ntv-foot, .ntv-net, .ntv-main) {
  padding-left: 0;
  padding-right: 0;
  line-height: inherit;
}

/* Materialize gives headings its own line-height and margins. */
:where(.bar, .util, .drawer, .ntv-band, .ntv-foot, .ntv-net, .ntv-main) h2,
:where(.bar, .util, .drawer, .ntv-band, .ntv-foot, .ntv-net, .ntv-main) h3,
:where(.bar, .util, .drawer, .ntv-band, .ntv-foot, .ntv-net, .ntv-main) h4 {
  margin: 0;
  line-height: inherit;
  font-weight: inherit;
}

/* Materialize buttons carry a height, uppercase transform and their own radius. */
:where(.bar, .util, .drawer, .ntv-band, .ntv-foot, .ntv-net, .ntv-main) button {
  height: auto;
  line-height: normal;
  text-transform: none;
  letter-spacing: normal;
  border: 0;
  background: none;
  box-shadow: none;
}

/* Materialize inputs are 3rem tall with a bottom border and a box-shadow on focus. */
:where(.bar, .drawer, .ntv-band, .ntv-main) input,
:where(.bar, .drawer, .ntv-band, .ntv-main) input:focus {
  height: auto;
  margin: 0;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  box-sizing: border-box;
  background-color: transparent;
}

/* Lists: Materialize floats and pads list items in several contexts. */
:where(.bar, .util, .drawer, .ntv-band, .ntv-foot, .ntv-net, .ntv-main) ul,
:where(.bar, .util, .drawer, .ntv-band, .ntv-foot, .ntv-net, .ntv-main) li {
  float: none;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: inherit;
}

/* Bare <header>, <footer>, <main>, <section>, <aside> all carry Materialize rules. */
:where(.ntv-main) section,
:where(.ntv-main) aside {
  padding: 0;
}

/* --- header + design tokens --- */

:root{
  --red-cherry:#EA1B23; --red-cherry-hover:#C5161D; --red-cherry-tint:#FEF0F0;
  --dark-grey:#1D1B1D; --ink-soft:#5A575A; --muted:#8A878A; --ghost:#B5B2B5;
  --white-grey:#DEDEDF; --border-soft:#ECECED;
  --bg-white:#FFFFFF; --bg-light-grey:#F8F8F8; --bg-warm:#FCFBF4;
  --font-heading:'Archivo Black','Archivo',sans-serif;
  --font-body:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --text-xs:.6875rem; --text-sm:.8125rem; --text-base:.9375rem; --text-md:1rem;
  --text-lg:1.125rem; --text-xl:1.25rem; --text-2xl:1.5rem;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem;
  --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-pill:50px;
  --shadow-sm:0 2px 8px rgba(29,27,29,.07); --shadow-md:0 4px 20px rgba(29,27,29,.09);
  --shadow-lg:0 12px 40px rgba(29,27,29,.11);
  --ease:cubic-bezier(.4,0,.2,1);
  --duration-sm:180ms; --duration-md:280ms;
  --z-nav:100; --z-dropdown:250; --z-modal:500; --z-skip:600;
  --max-width:1240px; --nav-h:64px; --util-h:34px;
  --tap:48px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--text-base);font-weight:300;line-height:1.7;
  color:var(--dark-grey);background:var(--bg-white);-webkit-font-smoothing:antialiased}
body.locked{position:fixed;width:100%;overflow:hidden}
/* height:auto is load-bearing, not tidiness. The prototype uses an inline <svg> for the
   logo, but header.php uses <img width="3533" height="753">. Without height:auto the
   width clamps to 172px while the height attribute still forces 753px, and the logo
   renders as a tall smear. Same for any widget image the theme used to size itself. */
img,svg{display:block;max-width:100%;height:auto}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:900;letter-spacing:-.04em;line-height:1.05}
::selection{background:rgba(234,27,35,.14)}
:focus-visible{outline:2px solid var(--red-cherry);outline-offset:2px;border-radius:2px}
.wrap{max-width:var(--max-width);margin:0 auto;padding:0 var(--s6)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:var(--s4);top:-100px;z-index:var(--z-skip);background:var(--dark-grey);
  color:#fff;padding:12px var(--s5);border-radius:var(--radius-sm);font-size:var(--text-sm);
  font-weight:600;transition:top var(--duration-sm) var(--ease)}
.skip:focus{top:var(--s3)}

/* ============ UTILITY ROW (scrolls away) ============ */
.util{background:var(--bg-light-grey);border-bottom:1px solid var(--border-soft);min-height:var(--util-h);
  display:flex;align-items:center;font-size:var(--text-xs)}
.util > .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--s4)}
.util-left{display:flex;align-items:center;gap:var(--s5);color:var(--ink-soft)}
.util-left a{color:var(--ink-soft);transition:color var(--duration-sm) var(--ease)}
.util-left a:hover{color:var(--red-cherry)}
.util-social{display:flex;gap:var(--s2)}
.util-social a{color:var(--ink-soft);transition:color var(--duration-sm) var(--ease);
  display:grid;place-items:center;width:26px;height:26px}
.util-social a:hover{color:var(--dark-grey)}
.util-social svg{width:14px;height:14px;fill:currentColor}

/* ============ STICKY BAR ============ */
.bar{position:sticky;top:0;z-index:var(--z-nav);background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border-soft);transition:box-shadow var(--duration-md) var(--ease)}
.bar.scrolled{box-shadow:var(--shadow-sm)}
.bar > .wrap{display:flex;align-items:center;gap:var(--s6);height:var(--nav-h)}

.logo{flex:0 0 auto;display:block;width:172px;aspect-ratio:3533/753}
.logo svg{width:100%;height:100%;display:block}

/* ============ PRIMARY NAV ============ */
.nav{display:flex;align-items:center;gap:var(--s1);margin-left:var(--s2)}
.nav > li{position:static}
.nav-btn{display:flex;align-items:center;gap:6px;padding:0 var(--s4);height:var(--nav-h);
  font-size:var(--text-sm);font-weight:600;letter-spacing:.01em;color:var(--dark-grey);
  position:relative;transition:color var(--duration-sm) var(--ease);white-space:nowrap}
.nav-btn::after{content:"";position:absolute;left:var(--s4);right:var(--s4);bottom:0;height:2px;
  background:var(--red-cherry);transform:scaleX(0);transform-origin:left;
  transition:transform var(--duration-sm) var(--ease)}
.nav-btn:hover,.nav > li.open .nav-btn{color:var(--red-cherry)}
.nav-btn:hover::after,.nav > li.open .nav-btn::after{transform:scaleX(1)}
.chev{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round;transition:transform var(--duration-sm) var(--ease);opacity:.55}
.nav > li.open .chev{transform:rotate(180deg);opacity:1}

/* ============ MEGA PANEL ============ */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--bg-white);
  border-top:1px solid var(--border-soft);border-bottom:1px solid var(--white-grey);
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--duration-sm) var(--ease),transform var(--duration-sm) var(--ease),visibility var(--duration-sm);
  z-index:var(--z-dropdown)}
.nav > li.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 300px;gap:var(--s10);
  padding:var(--s8) var(--s6) var(--s10)}
.mega-in.cols-2{grid-template-columns:repeat(2,minmax(0,1fr)) 300px}
.mega h4{font-family:var(--font-body);font-weight:600;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s4)}
.mega ul a{display:block;padding:6px 0;font-size:var(--text-sm);color:var(--ink-soft);
  transition:color var(--duration-sm) var(--ease),transform var(--duration-sm) var(--ease)}
.mega ul a:hover{color:var(--red-cherry);transform:translateX(3px)}
.mega-overview{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s4);
  font-size:var(--text-sm);font-weight:600;color:var(--red-cherry)}
.mega-overview svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
/* --- Real-theme menu shape ---------------------------------------------
   The live WordPress menu is two levels deep, not three, so header-new.php
   emits one flat list per panel and lets CSS column it. These rules are what
   make the prototype stylesheet work unchanged against the real menu. */
.mega-in--flat{grid-template-columns:minmax(0,1fr) 300px}
.mega-in--flat:not(:has(.mega-feat)){grid-template-columns:minmax(0,1fr)}
.mega-flat{column-count:4;column-gap:var(--s10)}
.mega-flat > li{break-inside:avoid}
.mega-group{break-inside:avoid;margin-bottom:var(--s5)}
.mega-group > h4{margin-bottom:var(--s2)}
.mega-group > h4 > a{color:inherit;font:inherit;letter-spacing:inherit}
.mega-sub{margin-top:var(--s1)}
.lang-name{text-transform:capitalize}
@media(max-width:1400px){.mega-flat{column-count:3}}

.mega-feat{border-left:1px solid var(--border-soft);padding-left:var(--s8);grid-column:-2;grid-row:1 / span 2}
/* Overview link on its own row under the columns, so it does not read as part of the
   last column (Carol, 8 Oct). */
.mega-in>.mega-overview{grid-column:1 / -2;justify-self:stretch;margin-top:calc(var(--s10) * -1 + var(--s4));
  padding-top:var(--s4);border-top:1px solid var(--border-soft);padding-right:var(--s6)}
.feat-card{display:block}
.feat-thumb{aspect-ratio:16/10;border-radius:var(--radius-md);background:var(--bg-light-grey);
  border:1px solid var(--border-soft);margin-bottom:var(--s4);display:grid;place-items:center}
.feat-thumb span{font-family:var(--font-heading);font-size:var(--text-2xl);color:var(--white-grey);letter-spacing:-.04em}
.feat-thumb{overflow:hidden;position:relative}
.feat-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.feat-thumb--contain{background:#fff}
.feat-thumb--contain img{object-fit:contain}
.feat-thumb--art{background:#000}
/* News card: a carousel of the latest story overall and in each industry */
.feat-carousel:not(.is-ready) .feat-card:not(:first-child){display:none}
.feat-carousel.is-ready .feat-card{display:none}
.feat-carousel.is-ready .feat-card.is-active{display:block;animation:feat-in var(--duration-md) var(--ease)}
@keyframes feat-in{from{opacity:0}to{opacity:1}}
.feat-carousel{position:relative}
.feat-dots{position:absolute;top:var(--s2);right:var(--s2);z-index:1;display:flex;gap:0;padding:2px 4px;
  border-radius:999px;background:rgba(29,27,29,.55)}
.feat-dot{width:18px;height:18px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.feat-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);
  transition:background var(--duration-sm) var(--ease),transform var(--duration-sm) var(--ease)}
.feat-dot:hover::before{background:#fff}
.feat-dot[aria-current="true"]::before{background:#fff;transform:scale(1.35)}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red-cherry);display:block;margin-bottom:var(--s2)}
.feat-title{font-family:var(--font-heading);font-size:var(--text-md);line-height:1.25;
  letter-spacing:-.03em;color:var(--dark-grey);transition:color var(--duration-sm) var(--ease);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  min-height:2.5em}
.mega-feat .eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat-when{color:var(--ink-soft)}
.feat-card:hover .feat-title{color:var(--red-cherry)}
.feat-meta{font-size:var(--text-xs);color:var(--ink-soft);margin-top:var(--s2)}

/* prototype annotation only — never ships */
.new::after{content:"NEW PAGE";font-size:8px;font-weight:600;letter-spacing:.14em;
  background:var(--red-cherry-tint);color:var(--red-cherry);padding:2px 5px;border-radius:3px;
  margin-left:7px;vertical-align:1px;white-space:nowrap}
body.hide-new .new::after{display:none}

/* ============ RIGHT CLUSTER ============ */
.actions{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.icon-btn{width:var(--tap);height:var(--tap);border-radius:var(--radius-sm);display:grid;place-items:center;
  color:var(--dark-grey);transition:background var(--duration-sm) var(--ease),color var(--duration-sm) var(--ease)}
.icon-btn:hover{background:var(--bg-light-grey);color:var(--red-cherry)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:5px;height:var(--tap);padding:0 var(--s3);
  border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);transition:background var(--duration-sm) var(--ease)}
.lang-btn:hover{background:var(--bg-light-grey);color:var(--dark-grey)}
.lang-btn .chev{width:8px;height:8px}
.lang-menu{position:absolute;right:0;top:calc(100% - 4px);min-width:180px;background:var(--bg-white);
  border:1px solid var(--white-grey);border-radius:var(--radius-md);box-shadow:var(--shadow-md);
  padding:var(--s2);opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--duration-sm) var(--ease),transform var(--duration-sm) var(--ease),visibility var(--duration-sm);
  z-index:var(--z-dropdown)}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu a{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  min-height:40px;padding:8px 10px;border-radius:var(--radius-sm);font-size:var(--text-sm);
  color:var(--ink-soft);transition:background var(--duration-sm) var(--ease),color var(--duration-sm) var(--ease)}
.lang-menu a:hover{background:var(--bg-light-grey);color:var(--dark-grey)}
.lang-menu a[aria-current]{color:var(--red-cherry);font-weight:600}
/* Flags restored per Lucia 2026-08-11 (settled earlier with Melanie and Cyrian):
   they are the visible claim that each edition is written locally, not auto-translated.
   Kept as INLINE SVG, not the live site's PNGs — the live header loads ten flag images
   for five languages because the MSLS widget renders twice. This is zero requests and
   sharper on retina, so Lucia's rationale and the performance win both hold. */
.flag{width:21px;height:15px;border-radius:2px;flex:0 0 auto;display:block;
      box-shadow:0 0 0 1px rgba(0,0,0,.10)}
.lang-btn .flag{margin-right:2px}
.lang-menu a{gap:var(--s3)}
.lang-menu a .lang-name{flex:1 1 auto}

/* ---------- TRANSITION ANNOUNCEMENT ----------
   Lucia 2026-08-11: France is the biggest direct-traffic market and the most
   attached to the current site — "if we change a lot, they will be a bit
   disappointed." Elliot's fix: a strip telling returning readers where their
   content went. Precedent she raised: 3D Printing Industry pre-announced their
   redesign in an article. Ships WITH the nav change, then retires after ~4 weeks.
   Hidden by default here; the dev panel turns it on. */
.announce{background:var(--red-cherry);color:#fff}
.announce[hidden]{display:none}
.announce .wrap{display:flex;align-items:center;gap:var(--s4);min-height:44px;
                padding-top:8px;padding-bottom:8px}
.announce p{flex:1 1 auto;margin:0;font-size:var(--text-sm);line-height:1.45}
.announce a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.announce a:hover{text-decoration-thickness:2px}
.announce-x{flex:0 0 auto;width:var(--tap);height:var(--tap);display:grid;place-items:center;
            background:none;border:0;color:#fff;cursor:pointer;border-radius:var(--radius-sm)}
.announce-x:hover{background:rgba(255,255,255,.16)}
.announce-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lang-code{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.btn-sub{display:inline-flex;align-items:center;height:40px;padding:0 var(--s6);
  border-radius:var(--radius-pill);background:var(--red-cherry);color:#fff;
  font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;transition:background var(--duration-sm) var(--ease),transform var(--duration-sm) var(--ease)}
.btn-sub:hover{background:var(--red-cherry-hover);transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;height:40px;padding:0 var(--s4);
  border-radius:var(--radius-pill);border:1px solid var(--white-grey);color:var(--ink-soft);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  transition:border-color var(--duration-sm) var(--ease),color var(--duration-sm) var(--ease)}
.btn-ghost:hover{border-color:var(--dark-grey);color:var(--dark-grey)}

/* ============ INLINE SEARCH ============ */
.search{position:absolute;inset:0;background:var(--bg-white);opacity:0;visibility:hidden;
  transition:opacity var(--duration-sm) var(--ease),visibility var(--duration-sm);z-index:3}
.bar.searching .search{opacity:1;visibility:visible}
.search > .wrap{display:flex;align-items:center;gap:var(--s4);height:var(--nav-h)}
.search .mag{width:19px;height:19px;fill:none;stroke:var(--ink-soft);stroke-width:2;
  stroke-linecap:round;flex:0 0 auto}
.search input{flex:1;border:none;outline:none;font-family:var(--font-body);font-size:var(--text-md);
  font-weight:300;color:var(--dark-grey);background:transparent;min-width:0}
.search input::placeholder{color:var(--muted)}
.search-hint{font-size:var(--text-xs);color:var(--ink-soft);white-space:nowrap}

/* search results panel: one index, filtered by type */
.search-panel{position:absolute;left:0;right:0;top:100%;background:var(--bg-white);
  border-top:1px solid var(--border-soft);border-bottom:1px solid var(--white-grey);
  box-shadow:var(--shadow-lg);padding:var(--s6) 0 var(--s8);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--duration-sm) var(--ease),transform var(--duration-sm) var(--ease),visibility var(--duration-sm)}
.bar.searching .search-panel{opacity:1;visibility:visible;transform:translateY(0)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);padding-bottom:var(--s5);
  border-bottom:1px solid var(--border-soft);margin-bottom:var(--s5)}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 var(--s4);
  border:1px solid var(--white-grey);border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;
  transition:border-color var(--duration-sm) var(--ease),color var(--duration-sm) var(--ease),
             background var(--duration-sm) var(--ease)}
.chip:hover{border-color:var(--dark-grey);color:var(--dark-grey)}
.chip[aria-pressed="true"]{background:var(--red-cherry);border-color:var(--red-cherry);color:#fff}
.chip .n{font-size:10px;font-weight:400;letter-spacing:0;opacity:.75;text-transform:none}
.res-group{margin-bottom:var(--s6)}
.res-group:last-child{margin-bottom:0}
.res-group[hidden]{display:none}
.res-group h5{font-family:var(--font-body);font-weight:600;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s3)}
.res{display:flex;align-items:center;gap:var(--s4);padding:var(--s2) 0;
  transition:transform var(--duration-sm) var(--ease)}
.res:hover{transform:translateX(3px)}
.res:hover .res-t{color:var(--red-cherry)}
.res-thumb{flex:0 0 auto;width:66px;aspect-ratio:16/10;border-radius:var(--radius-sm);
  background:var(--bg-light-grey);border:1px solid var(--border-soft);
  display:grid;place-items:center;font-size:9px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ghost)}
.res-t{font-size:var(--text-sm);font-weight:400;color:var(--dark-grey);line-height:1.35;
  transition:color var(--duration-sm) var(--ease)}
.res-m{font-size:var(--text-xs);color:var(--ink-soft)}
.res-all{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s4);
  font-size:var(--text-sm);font-weight:600;color:var(--red-cherry)}
.res-all svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ============ MOBILE ============ */
.burger{display:none}
.drawer{position:fixed;inset:0;z-index:var(--z-modal);pointer-events:none}
.drawer-scrim{position:absolute;inset:0;background:rgba(29,27,29,.4);opacity:0;
  transition:opacity var(--duration-md) var(--ease)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(88vw,380px);background:var(--bg-white);
  transform:translateX(100%);transition:transform var(--duration-md) var(--ease);
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.drawer.open{pointer-events:auto}
.drawer.open .drawer-scrim{opacity:1}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:var(--s3) var(--s4) var(--s3) var(--s5);border-bottom:1px solid var(--border-soft);flex:0 0 auto}
.drawer-head .logo{width:132px}
.drawer-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:var(--s4) var(--s5) var(--s10)}
.drawer-search{display:flex;align-items:center;gap:var(--s3);border:1px solid var(--white-grey);
  border-radius:var(--radius-pill);padding:0 var(--s5);height:var(--tap);margin-bottom:var(--s5)}
.drawer-search svg{width:16px;height:16px;fill:none;stroke:var(--ink-soft);stroke-width:2;
  stroke-linecap:round;flex:0 0 auto}
.drawer-search input{flex:1;border:none;outline:none;font-family:var(--font-body);
  font-size:var(--text-md);font-weight:300;background:transparent;min-width:0}
.acc{border-bottom:1px solid var(--border-soft)}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;
  min-height:var(--tap);padding:var(--s3) 0;font-family:var(--font-heading);font-size:var(--text-lg);
  letter-spacing:-.03em;color:var(--dark-grey);text-align:left}
.acc-btn .chev{width:11px;height:11px;stroke-width:2.4;opacity:.5;flex:0 0 auto}
.acc.open .acc-btn{color:var(--red-cherry)}
.acc.open .acc-btn .chev{transform:rotate(180deg);opacity:1}
.acc-panel{max-height:0;overflow:hidden;transition:max-height var(--duration-md) var(--ease)}
.acc-panel ul{padding-bottom:var(--s3)}
.acc-panel a{display:flex;align-items:center;min-height:var(--tap);padding:0 0 0 var(--s4);
  font-size:var(--text-sm);color:var(--ink-soft);border-left:2px solid var(--border-soft)}
.acc-panel a.ov{color:var(--red-cherry);font-weight:600}
.drawer-foot{padding:var(--s6) 0 0;display:flex;flex-direction:column;gap:var(--s3)}
.drawer-foot .btn-sub,.drawer-foot .btn-ghost{height:var(--tap);justify-content:center}
.drawer-langs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid var(--border-soft)}
.drawer-langs a{min-height:40px;display:flex;align-items:center;padding:0 16px;
  border:1px solid var(--white-grey);border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;color:var(--ink-soft)}
.drawer-langs a[aria-current]{border-color:var(--red-cherry);color:var(--red-cherry)}

@media(max-width:1180px){
  .util{display:none}
  .nav{display:none}
  .actions .btn-ghost,.actions .lang{display:none}
  .burger{display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--radius-sm)}
  .burger svg{width:20px;height:20px;stroke:var(--dark-grey);stroke-width:2;stroke-linecap:round;fill:none}
  .bar > .wrap{gap:var(--s3)}
  .logo{width:148px}
}
@media(max-width:600px){
  .wrap{padding:0 var(--s4)}
  /* the newsletter CTA stays: it is what makes switching off the 2s popup viable */
  .btn-sub{padding:0 var(--s4);font-size:10px;letter-spacing:.06em}
  .logo{width:124px}
}
/* at 375px the logo, search, Newsletter and burger were 7px too wide (found 1 Oct 2026) */
@media(max-width:400px){
  .bar > .wrap{gap:var(--s2)}
  .actions{gap:0}
  .btn-sub{padding:0 var(--s3)}
  .logo{width:116px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ DEMO PAGE ============ */
.demo{padding:var(--s16) 0}
.demo-note{background:var(--bg-warm);border:1px solid var(--white-grey);border-radius:var(--radius-lg);
  padding:var(--s8);margin-bottom:var(--s12)}
.demo-note h2{font-size:var(--text-2xl);margin-bottom:var(--s4)}
.demo-note p{color:var(--ink-soft);font-size:var(--text-base);max-width:64ch}
.demo-note ul{margin-top:var(--s4);padding-left:var(--s5)}
.demo-note li{list-style:disc;color:var(--ink-soft);font-size:var(--text-sm);margin-bottom:6px}
.demo-toggle{margin-top:var(--s5);display:inline-flex;align-items:center;
  min-height:40px;padding:0 var(--s5);border:1px solid var(--white-grey);border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.demo-toggle+.demo-toggle{margin-left:var(--s2)}
.demo-toggle[aria-pressed="true"]{background:var(--dark-grey);border-color:var(--dark-grey);color:#fff}
.demo-open{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--white-grey)}
.demo-open h3{font-size:var(--text-md);margin-bottom:var(--s3)}
.demo-open p{font-size:var(--text-sm)}
.demo-open i{color:var(--dark-grey)}
.demo-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0}
.demo-chip{min-height:36px;padding:0 var(--s4);border:1px solid var(--white-grey);
  border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:600;
  color:var(--ink-soft);background:var(--bg-white);cursor:pointer}
.demo-chip:hover{border-color:var(--dark-grey);color:var(--dark-grey)}
.demo-chip[aria-pressed="true"]{background:var(--red-cherry);border-color:var(--red-cherry);color:#fff}
.demo-hint{font-size:var(--text-xs)!important;color:var(--muted)!important}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s6)}
.demo-card{border:1px solid var(--border-soft);border-radius:var(--radius-md);overflow:hidden}
.demo-card .ph{aspect-ratio:16/10;background:var(--bg-light-grey)}
.demo-card .bd{padding:var(--s4)}
.demo-card h3{font-size:var(--text-md);line-height:1.25;margin-bottom:var(--s2)}
.demo-card p{font-size:var(--text-xs);color:var(--ink-soft)}

/* --- footer (class names prefixed ntv-) --- */

:root{
  --red-cherry:#EA1B23; --red-cherry-hover:#C5161D; --red-cherry-tint:#FEF0F0;
  --dark-grey:#1D1B1D; --ink-soft:#5A575A; --muted:#8A878A; --ghost:#B5B2B5;
  --white-grey:#DEDEDF; --border-soft:#ECECED;
  --bg-white:#FFFFFF; --bg-light-grey:#F8F8F8; --bg-warm:#FCFBF4;
  --font-heading:'Archivo Black','Archivo',sans-serif;
  --font-body:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --text-xs:.6875rem; --text-sm:.8125rem; --text-base:.9375rem; --text-md:1rem;
  --text-lg:1.125rem; --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem;
  --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-pill:50px;
  --ease:cubic-bezier(.4,0,.2,1); --duration-sm:180ms;
  --max-width:1240px; --tap:48px;

  --f-bg:#F8F8F8; --f-bg-alt:#FFFFFF; --f-text:#1D1B1D; --f-body:#5A575A;
  --f-meta:#8A878A; --f-rule:#DEDEDF; --f-rule-soft:#ECECED;
  --f-link:#5A575A; --f-link-hover:#EA1B23; --f-input-bg:#FFFFFF;
}
[data-footer="dark"]{
  --f-bg:#1D1B1D; --f-bg-alt:#242224; --f-text:#FFFFFF; --f-body:rgba(255,255,255,.72);
  --f-meta:rgba(255,255,255,.55); --f-rule:rgba(255,255,255,.16); --f-rule-soft:rgba(255,255,255,.09);
  --f-link:rgba(255,255,255,.78); --f-link-hover:#FFFFFF; --f-input-bg:rgba(255,255,255,.07);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--text-base);font-weight:300;line-height:1.7;
  color:var(--dark-grey);background:var(--bg-white);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:900;letter-spacing:-.04em;line-height:1.1}
:focus-visible{outline:2px solid var(--red-cherry);outline-offset:2px;border-radius:2px}
.wrap{max-width:var(--max-width);margin:0 auto;padding:0 var(--s6)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ntv-eyebrow{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red-cherry);display:block}
.ntv-btn-red{display:inline-flex;align-items:center;justify-content:center;height:var(--tap);
  padding:0 var(--s6);border-radius:var(--radius-pill);background:var(--red-cherry);color:#fff;
  font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;transition:background var(--duration-sm) var(--ease)}
.ntv-btn-red:hover{background:var(--red-cherry-hover)}

/* =========================================================================
   CONVERSION BAND — newsletter and ADDITIV share one band, not two stacked.
   Both are "do something" asks, so they belong in the same zone with a rule
   between them rather than in two full-width slabs one after the other.
   ========================================================================= */
/* The conversion band stays light in BOTH themes. Only the footer proper
   changes surface, so the newsletter and ADDITIV never sit on a dark slab.
   Re-declaring the surface tokens here overrides the dark theme for everything
   inside, without touching the footer below. */
.ntv-convert{
  --f-text:#1D1B1D; --f-body:#5A575A; --f-meta:#8A878A;
  --f-rule:#DEDEDF; --f-rule-soft:#ECECED;
  --f-link:#5A575A; --f-link-hover:#EA1B23; --f-input-bg:#FFFFFF;
  background:var(--bg-warm);border-top:1px solid var(--white-grey);
  border-bottom:1px solid var(--white-grey);padding:var(--s10) 0}
.ntv-convert-in{display:grid;grid-template-columns:1.45fr 1px 1fr;gap:var(--s10);align-items:start}

/* ---------- CTA HIERARCHY ----------
   Elliot, 12 Aug: the two offers looked identical — same eyebrow, same h2 size, same
   red filled button — so the band asked for two things with equal force and the reader
   had to choose. Newsletter is the primary ask (it feeds the eBlast list, the
   best-documented revenue line), ADDITIV is the secondary one.

   Three levers, not one, because size alone is not hierarchy:
     1. WIDTH   newsletter gets 1.45fr against ADDITIV's 1fr
     2. TYPE    newsletter headline steps up, ADDITIV's steps down
     3. BUTTON  level-one red fill vs level-two outline, which is exactly the
                "level 1 and level 2 CTA" pairing rule in the web design kit
   Only the newsletter keeps a red eyebrow, which also puts the page back inside the
   kit's one-eyebrow-per-view rule. */
/* Scoped with .ntv-convert on purpose. `.ntv-cv h2` and `.ntv-cv p` are declared further down the
   stylesheet at the same specificity, so at (0,1,1) these would lose on source order —
   which is exactly what happened on the first attempt: both headlines stayed 20px. */
.ntv-convert .ntv-cv-nl h2{font-size:var(--text-2xl)}
.ntv-convert .ntv-cv-ad h2{font-size:var(--text-lg)}
.ntv-convert .ntv-cv-ad p{font-size:var(--text-xs);max-width:42ch}

/* Secondary label: same slot as the eyebrow, but muted instead of red, so it reads as
   a category rather than as a second shout. */
.ntv-cv-ad-label{display:block;font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--f-meta);margin-bottom:var(--s2)}

/* Level-two button. Same height and radius as .ntv-btn-red so they still feel like one
   family — the difference is fill, which is the whole point. */
.ntv-btn-ghost{display:inline-flex;align-items:center;justify-content:center;height:var(--tap);
  padding:0 var(--s6);border-radius:var(--radius-pill);background:transparent;
  border:1px solid var(--f-rule);color:var(--f-text);font-size:var(--text-sm);
  font-weight:600;letter-spacing:.04em;
  transition:border-color var(--duration-sm) var(--ease),color var(--duration-sm) var(--ease)}
.ntv-btn-ghost:hover{border-color:var(--red-cherry);color:var(--red-cherry)}

/* The proof numbers were competing with the newsletter's headline. Quieter. */
.ntv-cv-ad-meta b{font-size:var(--text-sm)!important}
.ntv-cv-rule{background:var(--f-rule);align-self:stretch}
.ntv-cv h2{font-size:var(--text-xl);color:var(--f-text);margin:var(--s2) 0}
.ntv-cv p{color:var(--f-body);font-size:var(--text-sm);max-width:46ch;margin-bottom:var(--s5)}
.ntv-nl-form{display:flex;gap:var(--s3);flex-wrap:wrap}
.ntv-nl-field{flex:1 1 180px;display:flex;align-items:center;background:var(--f-input-bg);
  border:1px solid var(--f-rule);border-radius:var(--radius-pill);padding:0 var(--s5);height:var(--tap)}
.ntv-nl-field input{flex:1;border:none;outline:none;background:transparent;min-width:0;
  font-family:var(--font-body);font-size:var(--text-md);font-weight:300;color:var(--f-text)}
.ntv-nl-field input::placeholder{color:var(--f-meta)}
.ntv-nl-consent{font-size:var(--text-xs);color:var(--f-meta);margin-top:var(--s3);
  display:flex;gap:var(--s2);align-items:flex-start;line-height:1.5;width:100%}
.ntv-nl-consent input{margin-top:3px;accent-color:var(--red-cherry);width:15px;height:15px;flex:0 0 auto}
.ntv-nl-consent a{color:var(--f-link);text-decoration:underline}
.ntv-cv-ad-figs{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--f-body);margin:0 0 var(--s2)}
.ntv-cv-ad-meta{display:flex;gap:var(--s6);margin-bottom:var(--s5);flex-wrap:wrap}
.ntv-cv-ad-meta b{display:block;font-family:var(--font-heading);font-size:var(--text-md);
  letter-spacing:-.03em;color:var(--f-text);line-height:1}
.ntv-cv-ad-meta span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--f-meta)}

/* =========================================================================
   ADDITIV — three placements, switched by data-layout. Only one is ever live.
   ========================================================================= */
.ntv-cv-ad, .ntv-cv-rule{display:none}
[data-layout="split"] .ntv-cv-ad, [data-layout="split"] .ntv-cv-rule{display:block}
[data-layout="split"] .ntv-cv-nl p{max-width:46ch}

/* Slim strip: one line, ~60px, above the footer. Light with a red rule, not a
   dark band — the network strip below is already the one permitted dark band,
   and the design kit's §15 is explicit that there is never a second. */
.ntv-ad-strip{display:none;background:var(--bg-white);
  border-top:3px solid var(--red-cherry);border-bottom:1px solid var(--white-grey);
  padding:var(--s4) 0}
[data-layout="strip"] .ntv-ad-strip{display:block}
.ntv-ad-strip-in{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.ntv-ad-strip .ntv-eyebrow{flex:0 0 auto}
.ntv-ad-strip .ntv-txt{color:var(--ink-soft);font-size:var(--text-sm);flex:1 1 auto;min-width:0}
.ntv-ad-strip .ntv-txt b{font-weight:600;color:var(--dark-grey)}
.ntv-ad-strip .ntv-go{color:var(--red-cherry);font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;border-bottom:1px solid rgba(234,27,35,.4);
  padding-bottom:2px;transition:border-color var(--duration-sm) var(--ease)}
.ntv-ad-strip .ntv-go:hover{border-color:var(--red-cherry)}
[data-layout="split"] .ntv-convert-in, [data-layout="strip"] .ntv-convert-in{}
[data-layout="strip"] .ntv-convert-in, [data-layout="card"] .ntv-convert-in{grid-template-columns:1fr}
[data-layout="strip"] .ntv-cv-nl, [data-layout="card"] .ntv-cv-nl{display:grid;
  grid-template-columns:1fr minmax(320px,430px);gap:var(--s10);align-items:center}
[data-layout="strip"] .ntv-cv-nl p, [data-layout="card"] .ntv-cv-nl p{margin-bottom:0;max-width:52ch}

/* Card: ADDITIV becomes a fourth column in the footer grid. */
.ntv-ad-card{display:none}
[data-layout="card"] .ntv-ad-card{display:block}
[data-layout="card"] .ntv-foot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.ntv-ad-card{background:var(--f-bg-alt);border:1px solid var(--f-rule);border-radius:var(--radius-lg);
  padding:var(--s5)}
.ntv-ad-card .ntv-eyebrow{margin-bottom:var(--s2)}
.ntv-ad-card h4{font-size:var(--text-md);color:var(--f-text);margin-bottom:var(--s2)}
.ntv-ad-card p{font-size:var(--text-xs);color:var(--f-body);margin-bottom:var(--s4)}
.ntv-ad-card .ntv-btn-red{height:38px;width:100%;font-size:10px}

/* =========================================================================
   MAIN FOOTER
   ========================================================================= */
.ntv-foot{background:var(--f-bg);color:var(--f-body);padding:var(--s12) 0 var(--s10)}

/* Brand block. Logo and social sit on one line, the way a masthead does;
   the About text then runs full width beneath them in two columns. The old
   arrangement stacked logo over five circles in a narrow column beside a wide
   block of text, which read as clutter rather than hierarchy. */
.ntv-foot-brand{padding-bottom:var(--s6);margin-bottom:var(--s8);
  border-bottom:1px solid var(--f-rule-soft)}
.ntv-foot-mast{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
  flex-wrap:wrap;margin-bottom:var(--s6)}
.ntv-foot-mast .ntv-logo{display:block;width:172px;flex:0 0 auto}
.lg{width:100%;height:auto}
/* The official white logo asset is a 440-byte file with zero paths and renders
   as nothing. Until a real export exists, derive it: the 28 dark-grey elements
   go white, the 3 Red Cherry elements stay red. The mark is untouched. */
[data-footer="dark"] .lg [fill="#1D1B1D"]{fill:#FFFFFF}

/* Borderless glyphs. Full 48px tap target, no ring of five circles. */
.ntv-foot-social{display:flex;gap:var(--s1);flex:0 0 auto}
.ntv-foot-social a{width:var(--tap);height:var(--tap);display:grid;place-items:center;
  color:var(--f-meta);border-radius:var(--radius-sm);
  transition:color var(--duration-sm) var(--ease),background var(--duration-sm) var(--ease)}
.ntv-foot-social a:hover{color:var(--red-cherry);background:var(--f-bg-alt)}
[data-footer="dark"] .ntv-foot-social a:hover{color:#fff;background:rgba(255,255,255,.08)}
.ntv-foot-social svg{width:19px;height:19px;fill:currentColor}

.ntv-foot-about-wrap{column-count:2;column-gap:var(--s12)}
.ntv-foot-about{font-size:var(--text-sm);color:var(--f-body);line-height:1.75;break-inside:avoid}
.ntv-foot-about+.ntv-foot-about{margin-top:var(--s4)}

.ntv-foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s10)}
.ntv-foot-col h3{font-family:var(--font-body);font-weight:600;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--f-meta);margin-bottom:var(--s4);
  padding-bottom:var(--s3);border-bottom:1px solid var(--f-rule-soft)}
.ntv-foot-col a{display:block;padding:6px 0;font-size:var(--text-sm);color:var(--f-link);
  transition:color var(--duration-sm) var(--ease),transform var(--duration-sm) var(--ease)}
.ntv-foot-col a:hover{color:var(--f-link-hover);transform:translateX(3px)}
/* RSS. The feed already exists at /en/feed/ and returns 200; nothing on the
   site links to it. Engineers use feed readers, and it is the one subscription
   that costs the reader nothing and asks for no email address. */
.ntv-foot-col a.ntv-rss{display:flex;align-items:center;gap:7px}
.ntv-foot-col a.ntv-rss svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;opacity:.75;flex:0 0 auto}
.ntv-foot-col a.ntv-rss:hover svg{opacity:1}

/* Network strip: always dark, because every logo SPE supplies is a white PNG. */
.ntv-network{background:var(--dark-grey);padding:var(--s6) 0}
.ntv-network-in{display:flex;align-items:center;gap:var(--s8);flex-wrap:wrap}
.ntv-network-lbl{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.55);flex:0 0 auto}
.ntv-network-logos{display:flex;align-items:center;gap:var(--s8);flex-wrap:wrap}
.ntv-network-logos a{opacity:.8;transition:opacity var(--duration-sm) var(--ease)}
.ntv-network-logos a:hover{opacity:1}
.ntv-network-logos img{height:24px;width:auto}
.ntv-network-logos img.ntv-tall{height:32px}
/* Legal links and copyright close the strip, so the footer needs no extra bottom bar.
   Editions live in the header's language menu, which stays on screen while scrolling. */
.ntv-network-legal{display:flex;align-items:center;gap:var(--s5);margin-left:auto;flex-wrap:wrap}
.ntv-network-legal .ntv-fb-legal a,.ntv-network-legal .ntv-fb-copy{font-size:var(--text-xs);color:rgba(255,255,255,.55)}
.ntv-network-legal .ntv-fb-legal a:hover{color:#fff}

.ntv-foot-bottom{background:var(--f-bg-alt);border-top:1px solid var(--f-rule-soft);padding:var(--s5) 0}
.ntv-fb-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);flex-wrap:wrap}
.ntv-fb-group{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.ntv-fb-lang{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.ntv-fb-lang .ntv-lbl{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f-meta);margin-right:var(--s2)}
.ntv-fb-lang a{padding:7px 13px;border:1px solid var(--f-rule);border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:600;color:var(--f-link);
  transition:border-color var(--duration-sm) var(--ease),color var(--duration-sm) var(--ease)}
.ntv-fb-lang a:hover{border-color:var(--f-link);color:var(--f-link-hover)}
.ntv-fb-lang a[aria-current]{border-color:var(--red-cherry);color:var(--red-cherry)}
.ntv-fb-legal{display:flex;gap:var(--s5);flex-wrap:wrap}
.ntv-fb-legal a{font-size:var(--text-xs);color:var(--f-meta);transition:color var(--duration-sm) var(--ease)}
.ntv-fb-legal a:hover{color:var(--f-link-hover)}
.ntv-fb-copy{font-size:var(--text-xs);color:var(--f-meta)}


/* --- conversion band + network strip --- */

/* =========================================================================
   CONVERSION BAND + NETWORK STRIP — written for footer-new.php
   The footer prototype used different markup for these (it had no WordPress
   query behind the ADDITIV block), so these classes have no counterpart to
   extract. Written here, prefixed ntv- like the rest of the footer.
   ========================================================================= */
.ntv-band{background:var(--bg-warm);padding:var(--s12) 0}
.ntv-band-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s12);
  align-items:start}
/* No upcoming event -> the newsletter spans the whole band rather than leaving a hole.
   This is what stops a stale event ever being advertised. */
.ntv-band.is-solo .ntv-band-in{grid-template-columns:minmax(0,1fr);max-width:640px}
.ntv-additiv{padding-left:var(--s12);border-left:1px solid var(--white-grey)}
.ntv-eyebrow{font-size:var(--text-xs);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-cherry);margin-bottom:var(--s3)}
.ntv-band-t{font-family:var(--font-heading);font-weight:900;letter-spacing:-.04em;
  font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.08;margin-bottom:var(--s3);
  color:var(--dark-grey)}
.ntv-band-d{font-size:var(--text-sm);color:var(--ink-soft);line-height:1.7;
  margin-bottom:var(--s5);max-width:52ch}
.ntv-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s6);
  background:var(--red-cherry);color:#fff;border-radius:var(--radius-pill);
  font-size:var(--text-sm);font-weight:600;letter-spacing:.04em;
  transition:background var(--duration-sm) var(--ease)}
.ntv-btn:hover{background:var(--red-cherry-hover);color:#fff}

/* The band stays LIGHT even though the footer below it is dark — the design kit
   permits one dark band, and the network strip plus the footer proper already use it. */
.ntv-band,.ntv-band *{--f-bg:var(--bg-warm)}

.ntv-foot-logo{display:block;width:172px}
.ntv-foot-logo img{width:100%;height:auto;filter:brightness(0) invert(1)}

.ntv-net{border-top:1px solid rgba(255,255,255,.12);padding:var(--s5) 0}
.ntv-net .wrap{display:flex;align-items:center;gap:var(--s8);flex-wrap:wrap}
.ntv-net-l{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.45);flex:0 0 auto}
.ntv-net img{max-height:26px;width:auto;opacity:.75;
  transition:opacity var(--duration-sm) var(--ease)}
.ntv-net img:hover{opacity:1}

.ntv-copy{font-size:var(--text-xs);color:rgba(255,255,255,.45)}
.ntv-news{min-width:0}

@media(max-width:860px){
  .ntv-band-in{grid-template-columns:minmax(0,1fr);gap:var(--s8)}
  .ntv-additiv{padding-left:0;padding-top:var(--s8);border-left:0;
    border-top:1px solid var(--white-grey)}
}

/* =========================================================================
   HEADER WRAPPERS THAT EXIST ONLY IN header-new.php
   The prototype marks the logo up as a bare <a class="logo">. The PHP wraps it in
   .site-logo > .site-title, where .site-title is an <h1> on the front page and a <p>
   elsewhere. Left alone, that <h1> inherits Archivo Black at heading size and heading
   line-height from both this stylesheet and the theme's main.css, which pushes the
   header bar taller and undoes the 144px -> 99px chrome saving. These reset it to a
   neutral wrapper so the logo box is governed by .logo alone.
   ========================================================================= */
.site-logo{display:flex;align-items:center;flex:0 0 auto;min-width:0}
.site-title{margin:0;padding:0;font:inherit;font-weight:inherit;letter-spacing:normal;
  line-height:1;color:inherit}
.site-title::before,.site-title::after{content:none}

/* =========================================================================
   FIX 1 — THE HEADER LOGO
   The prototype's logo is an inline <svg>, so the stylesheet only ever had
   `.logo svg{width:100%;height:100%}`. header.php uses an <img> instead, and there
   was no `.logo img` companion — so the image fell back to the base reset and
   rendered at the height its own attribute declared. Setting it explicitly makes it
   deterministic regardless of whether the SVG file carries a usable viewBox (the live
   3dnatives.svg does not, which is why height:auto alone was not enough).
   .logo already sets width:172px and aspect-ratio:3533/753, so the box is correct and
   the image simply fills it.
   ========================================================================= */
.logo img{width:100%;height:100%;display:block;object-fit:contain}

/* =========================================================================
   FIX 2 — THE MEGA PANEL FROM A REAL WORDPRESS MENU
   The walker in header.php emits classes the prototype never had, because the
   prototype hard-coded three tidy columns while a real menu is one flat list of
   unknown length: .mega-in--flat, .mega-flat, .mega-group, .mega-sub. None of them
   had a single rule, which is why the dropdown rendered as unstyled text.
   Flex rather than grid so the panel collapses cleanly when featured_card() returns
   nothing — which it does whenever the top-level item is not a resolvable category.
   ========================================================================= */
.mega-in--flat{display:flex;align-items:flex-start;gap:var(--s10);
  padding:var(--s8) var(--s6) var(--s10)}
.mega-flat{flex:1 1 auto;min-width:0;column-count:4;column-gap:var(--s10)}
.mega-flat>li{break-inside:avoid;-webkit-column-break-inside:avoid}
.mega-in--flat .mega-feat{flex:0 0 300px}

/* A second-level item that has children becomes a titled group, matching the
   prototype's column headings. */
.mega-group>h4{margin-bottom:var(--s2)}
.mega-group>h4 a{color:inherit}
.mega-group>h4 a:hover{color:var(--red-cherry)}
.mega-sub{margin-bottom:var(--s5)}

@media(max-width:1180px){.mega-flat{column-count:2}}

/* 8 Oct (Elliot, dev test): with column headings the newspaper columns split three groups
   into two narrow columns and left a gap before the card. When the menu has groups, give
   each group one equal column across the panel, like the prototype (3 or 2 columns). */
.mega-flat:has(>.mega-group){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  column-count:auto;gap:var(--s10)}
.mega-flat:has(>.mega-group)>.mega-group{margin-bottom:0}
.mega-in--flat:has(.mega-group) .mega-feat{border-left:1px solid var(--border-soft,#e6e4e6);padding-left:var(--s8)}

/* =========================================================================
   FIX 3 — SOCIAL ICONS
   do_action('social-menu') is the theme's, and emits
   <ul class="social-menu"><li><a><i class="fa-brands ..."></i></a></li></ul>.
   The prototype assumed our own <a><svg> markup, so the theme's 36px grey discs
   won. Keeping the theme's markup is right — it is one list, edited in one place,
   and it already knows every network — so the fix is to restyle it in our contexts
   rather than to rebuild it.
   ========================================================================= */
.util .social-menu{display:flex;gap:var(--s2);margin:0}
.util .social-menu li{margin:0;display:block}
.util .social-menu li a{width:26px;height:26px;line-height:26px;text-align:center;
  background:none;border:0;border-radius:0;color:var(--ink-soft);font-size:14px;
  transition:color var(--duration-sm) var(--ease)}
.util .social-menu li a:hover{background:none;color:var(--dark-grey)}

/* Footer: borderless glyphs, but the tap target stays 48px — the ring was doing more
   visual work than five outbound links deserve, the hit area was never the problem. */
.ntv-foot-social .social-menu{display:flex;gap:var(--s1);margin:0}
.ntv-foot-social .social-menu li{margin:0;display:block}
.ntv-foot-social .social-menu li a{width:var(--tap);height:var(--tap);line-height:var(--tap);
  text-align:center;background:none;border:0;border-radius:var(--radius-sm);
  color:rgba(255,255,255,.75);font-size:19px;
  transition:color var(--duration-sm) var(--ease),background var(--duration-sm) var(--ease)}
.ntv-foot-social .social-menu li a:hover{background:rgba(255,255,255,.08);color:#fff}

/* =========================================================================
   CTA HIERARCHY IN THE CONVERSION BAND
   Elliot, 12 Aug: newsletter and ADDITIV had the same eyebrow, the same headline size
   and the same red filled button, so the band made two equally loud demands and the
   reader had to pick. Newsletter is primary — it feeds the eBlast list. ADDITIV is
   secondary.

   Three levers, because size alone does not read as hierarchy: width, type scale, and
   fill vs outline. The outline button is the design kit's "level 2 CTA" — same height
   and radius as the red one so they stay one family, different fill so one clearly
   leads. Only the newsletter keeps a red eyebrow, which also puts the band back inside
   the kit's one-eyebrow-per-view rule.
   ========================================================================= */
.ntv-band-in{grid-template-columns:1.45fr minmax(0,1fr)}
.ntv-news .ntv-band-t{font-size:clamp(1.45rem,2.4vw,1.95rem)}
.ntv-additiv .ntv-band-t{font-size:var(--text-lg);line-height:1.15}
.ntv-additiv .ntv-band-d{font-size:var(--text-xs);max-width:42ch}

.ntv-ad-label{display:block;font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}

.ntv-btn-ghost{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s6);
  background:transparent;border:1px solid var(--white-grey);color:var(--dark-grey);
  border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:600;
  letter-spacing:.04em;
  transition:border-color var(--duration-sm) var(--ease),color var(--duration-sm) var(--ease)}
.ntv-btn-ghost:hover{border-color:var(--red-cherry);color:var(--red-cherry)}

@media(max-width:860px){.ntv-band-in{grid-template-columns:minmax(0,1fr)}}

/* Event-only figures (band_figures custom field on the event). */
.ntv-ad-figs{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft,#5b585b);margin:var(--s4,16px) 0 var(--s2,8px)}
.ntv-ad-meta{display:flex;gap:var(--s6,24px);margin-bottom:var(--s5,20px);flex-wrap:wrap}
.ntv-ad-meta b{display:block;font-family:var(--font-heading);font-size:var(--text-md,18px);line-height:1.1}
.ntv-ad-meta span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft,#5b585b)}