/* ds tokens: colors.css */
:root{
  /* --- ground: neutral near-black, no hue cast --- */
  --ink-950:#08090a;
  --ink-900:#0d0e10;
  --ink-850:#121316;
  --ink-800:#181a1d;
  --ink-750:#1f2125;
  --ink-700:#282b30;
  --ink-600:#3a3e45;
  --ink-500:#565b63;
  --ink-400:#7c828b;
  --ink-300:#a3a9b2;
  --ink-200:#c9ced5;
  --ink-100:#e6e9ed;
  --ink-050:#f4f5f7;
  --ink-000:#ffffff;

  /* --- copper: the one brand accent --- */
  --copper-100:#fbe6d5;
  --copper-200:#f4c9a6;
  --copper-300:#edaa77;
  --copper-400:#e6904f;
  --copper-500:#d9762e;
  --copper-600:#b65c1f;
  --copper-700:#8c4417;
  --copper-800:#5e2d10;
  --copper-900:#331907;

  /* --- signals: used for status only, never decoration --- */
  --signal-live:#ff4438;
  --signal-good:#5fb98b;
  --signal-warn:#e8b23c;

  /* --- semantic: surfaces --- */
  --surface-page:var(--ink-950);
  --surface-raised:var(--ink-900);
  --surface-card:var(--ink-850);
  --surface-card-hover:var(--ink-800);
  --surface-sunken:var(--ink-900);
  --surface-inverse:var(--ink-050);
  --surface-accent:var(--copper-500);
  --surface-accent-soft:#1a1109;
  --surface-accent-quiet:#231509;

  /* --- semantic: text --- */
  --text-primary:var(--ink-050);
  --text-secondary:var(--ink-300);
  --text-muted:var(--ink-400);
  --text-accent:var(--copper-300);
  --text-on-accent:var(--ink-950);
  --text-on-inverse:var(--ink-950);
  --text-link:var(--copper-300);
  --text-link-hover:var(--copper-200);

  /* --- semantic: lines --- */
  --border-hairline:var(--ink-700);
  --border-strong:var(--ink-600);
  --border-accent:var(--copper-700);
  --border-accent-strong:var(--copper-500);
  --rule-grid:#16181b;
}

/* ds tokens: typography.css */
:root{
  --font-display:"Anton",'Arial Narrow',sans-serif;
  --font-sans:"Manrope",system-ui,-apple-system,sans-serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,monospace;

  /* fixed steps */
  --text-11:11px;
  --text-12:12px;
  --text-13:13px;
  --text-14:14px;
  --text-15:15px;
  --text-16:16px;
  --text-18:18px;
  --text-20:20px;
  --text-24:24px;
  --text-28:28px;
  --text-34:34px;
  --text-42:42px;
  --text-52:52px;
  --text-64:64px;
  --text-80:80px;

  /* fluid display steps */
  --display-hero:clamp(44px,7.4vw,92px); /* @kind font */
  --display-1:clamp(34px,4.6vw,58px); /* @kind font */
  --display-2:clamp(28px,3.2vw,42px); /* @kind font */
  --display-3:clamp(22px,2.2vw,28px); /* @kind font */

  --leading-display:0.92;
  --leading-tight:1.08;
  --leading-snug:1.3;
  --leading-body:1.62;
  --leading-loose:1.75;

  --tracking-display:-0.01em;
  --tracking-tight:-0.015em;
  --tracking-normal:0;
  --tracking-label:0.14em;
  --tracking-mono:0.02em;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:800;
}

/* ds tokens: spacing.css */
:root{
  --space-1:2px;
  --space-2:4px;
  --space-3:6px;
  --space-4:8px;
  --space-5:12px;
  --space-6:16px;
  --space-7:20px;
  --space-8:24px;
  --space-9:32px;
  --space-10:40px;
  --space-11:48px;
  --space-12:64px;
  --space-13:80px;
  --space-14:96px;
  --space-15:120px;

  --gutter:clamp(20px,4vw,40px); /* @kind spacing */
  --section-y:clamp(56px,7vw,96px); /* @kind spacing */
  --section-y-lg:clamp(72px,9vw,120px); /* @kind spacing */
  --stack-card:20px;
}

/* ds tokens: shape.css */
:root{
  --radius-0:0px;
  --radius-2:2px;
  --radius-4:4px;
  --radius-8:8px;
  --radius-12:12px;
  --radius-16:16px;
  --radius-pill:999px;

  --radius-card:4px;
  --radius-control:4px;
  --radius-media:6px;

  /* signature notch: top-right corner cut off every panel */
  --notch:18px; /* @kind radius */
  --notch-sm:10px; /* @kind radius */
  --notch-lg:28px; /* @kind radius */

  --hairline:1px; /* @kind other */
}

/* ds tokens: elevation.css */
:root{
  --elev-1:0 1px 2px rgba(0,0,0,.6);
  --elev-2:0 8px 24px -8px rgba(0,0,0,.7);
  --elev-3:0 24px 64px -24px rgba(0,0,0,.85);

  /* copper spotlight: the only "glow" in the system */
  --glow-copper:0 0 0 1px var(--copper-800),0 18px 60px -28px rgba(217,118,46,.55);
  --glow-copper-soft:0 24px 80px -40px rgba(217,118,46,.45);
  --glow-live:0 0 0 1px rgba(255,68,56,.4),0 0 24px -6px rgba(255,68,56,.35);

  --ring-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--copper-500);
}

/* ds tokens: motion.css */
:root{
  --ease-out:cubic-bezier(.2,.7,.3,1); /* @kind other */
  --ease-in-out:cubic-bezier(.5,0,.5,1); /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:480ms; /* @kind other */
  --dur-reveal:560ms; /* @kind other */
  --marquee-dur:46s; /* @kind other */
}
@keyframes ixm-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes ixm-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ixm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ds tokens: layout.css */
:root{
  --page-max:1280px; /* @kind spacing */
  --prose-max:720px; /* @kind spacing */
  --measure-lede:560px; /* @kind spacing */
  --header-h:68px; /* @kind spacing */
  --promo-h:40px; /* @kind spacing */
  --z-promo:40; /* @kind other */
  --z-header:50; /* @kind other */
  --z-overlay:80; /* @kind other */
}

/* ds tokens: utilities.css */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-16);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:var(--tracking-display);line-height:var(--leading-tight);margin:0}
p{margin:0}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
::selection{background:var(--copper-700);color:var(--ink-050)}

/* signature notched panel — cut the top-right corner */
.ixm-notch{clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}
.ixm-notch-sm{clip-path:polygon(0 0,calc(100% - var(--notch-sm)) 0,100% var(--notch-sm),100% 100%,0 100%)}
.ixm-notch-lg{clip-path:polygon(0 0,calc(100% - var(--notch-lg)) 0,100% var(--notch-lg),100% 100%,0 100%)}
/* hairline-bordered notched panel: outer = line colour, inner = surface */
.ixm-notch-frame{background:var(--border-hairline);padding:var(--hairline);clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}
.ixm-notch-frame>*{clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,0 100%)}

/* broadcast rule grid, used behind heroes only */
.ixm-rulegrid{background-image:repeating-linear-gradient(var(--rule-grid) 0 1px,transparent 1px 72px),repeating-linear-gradient(90deg,var(--rule-grid) 0 1px,transparent 1px 72px)}

.ixm-mono-label{font-family:var(--font-mono);font-size:var(--text-12);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-accent)}
.ixm-page{max-width:var(--page-max);margin:0 auto;padding-inline:var(--gutter)}
@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;transition-duration:0s!important}}

/* source theme.css ("Aurora" visual layer) */
/* ──────────────────────────────────────────────────────────────────────────
   FRESH VISUAL DIRECTION — "AURORA"
   Rose-magenta on graphite-violet · Archivo Black broadcast type ·
   soft-radius panels with hairline frames · dot-matrix hero lattice.

   This layer re-skins the IPTV WEBSITE MASTER system without touching content,
   architecture or behaviour. Accent token NAMES are inherited from the base
   system (--copper-*) and are simply re-valued; nothing copper remains.
   Load AFTER the design system's styles.css.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── ground: graphite with a faint violet cast ───────────────────────── */
  --ink-950:#0a0a0d;
  --ink-900:#101014;
  --ink-850:#16161c;
  --ink-800:#1c1c23;
  --ink-750:#23232b;
  --ink-700:#2e2e37;
  --ink-600:#41414d;
  --ink-500:#5e5e6b;
  --ink-400:#85858f;
  --ink-300:#a9a9b4;
  --ink-200:#cdcdd6;
  --ink-100:#e8e8ee;
  --ink-050:#f5f5f8;

  /* ── the one accent: rose-magenta ────────────────────────────────────── */
  --copper-100:#ffe7f0;
  --copper-200:#ffc3da;
  --copper-300:#ff8fb9;
  --copper-400:#f65e96;
  --copper-500:#d51a63;
  --copper-600:#b31352;
  --copper-700:#7f0c3a;
  --copper-800:#4d0623;
  --copper-900:#2a0313;

  /* ── signals ─────────────────────────────────────────────────────────── */
  --signal-live:#ff4438;
  --signal-good:#4fbf95;
  --signal-warn:#e3b44a;

  /* ── surfaces ────────────────────────────────────────────────────────── */
  --surface-accent-soft:#1a0a13;
  --surface-accent-quiet:#22101a;
  --rule-grid:#1c1c26;

  /* ── text: white sits on the accent in this direction ────────────────── */
  --text-on-accent:#ffffff;

  /* ── lines ───────────────────────────────────────────────────────────── */
  --border-accent:var(--copper-700);
  --border-accent-strong:var(--copper-500);

  /* ── typography ──────────────────────────────────────────────────────── */
  --font-display:"Archivo Black","Archivo Narrow",Impact,sans-serif;
  --font-sans:"Archivo",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* Archivo Black is far wider than the condensed face it replaces, so the
     display ramp steps down to keep art-directed line breaks intact. */
  --display-hero:clamp(32px,4.7vw,62px);
  --display-1:clamp(27px,3.2vw,42px);
  --display-2:clamp(24px,2.5vw,32px);
  --display-3:clamp(19px,1.8vw,24px);
  --leading-display:1.0;
  --leading-tight:1.1;
  --tracking-display:-0.02em;
  --tracking-label:0.16em;

  /* ── shape: the notch is retired for soft radii + hairline frames ────── */
  --notch:0px;
  --notch-sm:0px;
  --notch-lg:0px;
  --radius-2:6px;
  --radius-4:10px;
  --radius-8:12px;
  --radius-card:14px;
  --radius-control:10px;
  --radius-media:12px;

  /* ── depth: a rose spotlight, the only gradient in the system ────────── */
  --glow-copper:0 0 0 1px var(--copper-800),0 22px 70px -30px rgba(213,26,99,.6);
  --glow-copper-soft:0 26px 90px -42px rgba(213,26,99,.5);
  --glow-live:0 0 0 1px rgba(255,68,56,.4),0 0 24px -6px rgba(255,68,56,.35);
  --ring-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--copper-400);
}

/* Panels: the base system clips a notch into every surface. With the notch at
   zero the clip becomes the full box, and these rules restore the corner as a
   soft radius on both the hairline frame and the surface inside it. */
.ixm-notch,
.ixm-notch-lg,
.ixm-notch-frame,
.ixm-notch-frame > *,
.nsnl-r-card {
  border-radius: var(--radius-card);
}
.ixm-notch-sm,
.nsnl-r-sm {
  border-radius: var(--radius-8);
}

/* Hero lattice: a dot matrix rather than a ruled grid. */
.ixm-rulegrid.ixm-rulegrid {
  background-image: radial-gradient(var(--rule-grid) 1px, transparent 1.4px);
  background-size: 26px 26px;
}

/* Hero media fills the whole right half of the hero, full height. */
.ixm-hero-top {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch !important;
}
.ixm-hero-top > div:last-child { display: flex !important; flex-direction: column; }
.ixm-hero-top > div:last-child > div:first-child {
  flex: 1; aspect-ratio: auto !important; min-height: 420px;
}
@media (max-width: 900px) {
  .ixm-hero-top { grid-template-columns: minmax(0, 1fr) !important; }
  .ixm-hero-top > div:last-child > div:first-child { aspect-ratio: 4 / 3 !important; min-height: 0; }
}

/* "What you'll be watching": three large framed posters, the centre one raised. */
.ixm-posters.ixm-posters {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 2vw, 28px) !important;
  align-items: center;
  padding-top: 34px;
}
.ixm-posters > div:nth-child(n+4) { display: none !important; }
.ixm-posters > div {
  aspect-ratio: 3 / 4 !important;
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ixm-posters > div > div { border-radius: inherit; }
.ixm-posters > div:nth-child(2) {
  transform: translateY(-18px) scale(1.04);
  background: var(--accent, var(--copper-500)) !important;
  box-shadow: var(--glow-copper-soft);
}
.ixm-posters > div:hover { transform: translateY(-6px); }
.ixm-posters > div:nth-child(2):hover { transform: translateY(-24px) scale(1.04); }
@media (max-width: 640px) {
  .ixm-posters.ixm-posters {
    grid-template-columns: none !important;
    grid-auto-flow: column; grid-auto-columns: 72%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 22px 0 6px;
  }
  .ixm-posters > div { scroll-snap-align: center; }
  .ixm-posters > div:nth-child(2) { transform: none; }
}

/* Homepage pricing: three plans (3, 6, 12 months). */
.ixm-grid-4[data-home-plans="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1080px; margin-inline: auto; width: 100%;
}
@media (max-width: 900px) {
  .ixm-grid-4[data-home-plans="3"] { grid-template-columns: minmax(0, 1fr) !important; max-width: 480px; }
}

/* Split sections: media on the side fills the full height of its column. */
.ixm-split { align-items: stretch !important; }
.ixm-split > .nsnl-split-media { aspect-ratio: auto !important; min-height: 420px; }
@media (max-width: 900px) {
  .ixm-split > .nsnl-split-media { aspect-ratio: 1 / 1 !important; min-height: 0; }
}

/* Split with a poster grid ("cable box" section): one image fills the side. */
.ixm-split > .nsnl-split-posters {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 420px;
}
.ixm-split > .nsnl-split-posters > div:first-child { aspect-ratio: auto !important; height: 100%; }
.ixm-split > .nsnl-split-posters > div:nth-child(n+2) { display: none !important; }
@media (max-width: 900px) {
  .ixm-split > .nsnl-split-posters { min-height: 0; }
  .ixm-split > .nsnl-split-posters > div:first-child { aspect-ratio: 4 / 3 !important; height: auto; }
}

/* Display type in this direction is a heavy face — trim the optical weight. */
h1, h2, h3, h4 { font-weight: 400; }

/* The base bundle hardcodes its two spotlight washes rather than reading the
   accent ramp, so they are re-hued here to the rose accent. */
.nsnl-spot-a {
  background-image: radial-gradient(50% 50% at 50% 40%, rgba(213, 26, 99, .22), transparent 70%) !important;
}
.nsnl-spot-b {
  background-image: radial-gradient(50% 50%, rgba(213, 26, 99, .24), transparent 70%) !important;
}

::selection { background: var(--copper-600); color: #fff; }

/* source page styles (responsive breakpoints, review rail) */
body{margin:0;background:#0a0a0d}
body{background-image:radial-gradient(1100px 560px at 50% -260px,#1c0a19 0%,rgba(28,10,25,0) 70%)!important}
.ixm-burger{display:none!important}
p:empty{display:none!important;margin:0!important}
@media (max-width:1100px){.ixm-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.ixm-posters{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
.ixm-desktop-nav>*{white-space:nowrap}
.nsnl-nowrap{white-space:nowrap}
.nsnl-badge-row{flex-wrap:wrap;gap:8px!important}
@media (max-width:1240px){.ixm-desktop-nav>*{padding-left:9px!important;padding-right:9px!important}
}
@media (max-width:1140px){.ixm-desktop-nav{display:none!important}
.ixm-burger{display:flex!important}
}
@media (max-width:900px){.ixm-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.ixm-split,.ixm-hero-top{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:640px){.ixm-grid-3,.ixm-grid-4{grid-template-columns:minmax(0,1fr)!important}
.ixm-posters{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
[data-review-rail]::-webkit-scrollbar{display:none}
@media (max-width:900px){[data-review-arrows]{display:none!important}
}
@media (min-width:901px){[data-review-hint]{display:none!important}
}

/* ───────── Novastream WordPress layer ─────────
   Behaviour states that the source handled in React (hover, open, active)
   expressed as low-specificity CSS so block colour/typography controls win. */

/* Global style presets drive the design tokens (Appearance → Editor → Styles). */
:root {
  --copper-500: var(--wp--preset--color--accent, #d51a63);
  --copper-400: var(--wp--preset--color--accent-hover, #f65e96);
  --copper-300: var(--wp--preset--color--accent-soft, #ff8fb9);
  --copper-600: var(--wp--preset--color--accent-deep, #b31352);
  --ink-950: var(--wp--preset--color--page, #0a0a0d);
  --ink-900: var(--wp--preset--color--raised, #101014);
  --ink-850: var(--wp--preset--color--card, #16161c);
  --ink-700: var(--wp--preset--color--line, #2e2e37);
  --ink-600: var(--wp--preset--color--line-strong, #41414d);
  --ink-050: var(--wp--preset--color--ink, #f5f5f8);
  --ink-300: var(--wp--preset--color--text-secondary, #a9a9b4);
  --ink-400: var(--wp--preset--color--text-muted, #85858f);
  --text-on-accent: var(--wp--preset--color--on-accent, #ffffff);
  --font-display: var(--wp--preset--font-family--display, "Archivo Black", "Archivo Narrow", Impact, sans-serif);
  --font-sans: var(--wp--preset--font-family--body, "Archivo", system-ui, -apple-system, sans-serif);
  --font-mono: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace);
}

body { margin: 0; background: #0a0a0d; background: var(--surface-page); }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.nsnl-header-part { display: contents; }
.nsnl-content, .nsnl-content > .wp-block-post-content { margin: 0; }
.wp-block-post-content > * { margin-block: 0; }
/* the page content root is a <main>, keep it block level and full width */
.wp-block-nsnl-box, .wp-block-nsnl-text { box-sizing: border-box; }

/* Visibility toggles */
.nsnl-is-hidden { display: none !important; }
@media (max-width: 640px) { .nsnl-hide-mobile { display: none !important; } }
@media (min-width: 641px) { .nsnl-hide-desktop { display: none !important; } }

/* Hairline-framed hover panels (Panel hover=true in the source) */
.nsnl-panel--hover.nsnl-tone-card { background: var(--border-hairline); }
.nsnl-panel--hover.nsnl-tone-accent { background: var(--border-accent-strong); }
.nsnl-panel--hover { transform: none; }
.nsnl-panel--hover:hover { transform: translateY(-3px); }
.nsnl-panel--hover.nsnl-tone-card:hover { background: var(--border-strong); }
.nsnl-panel--hover.nsnl-tone-accent:hover { background: var(--copper-600); }
a.nsnl-postcard, a.nsnl-postcard:hover { color: inherit; text-decoration: none; }

/* Design-system buttons: variant colours as overridable defaults */
.nsnl-btn.nsnl-btn--primary { background: var(--copper-500); color: var(--text-on-accent); border: 1px solid var(--copper-500); }
.nsnl-btn.nsnl-btn--secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
.nsnl-btn.nsnl-btn--quiet { background: transparent; color: var(--text-secondary); border: 1px solid transparent; }
.nsnl-btn.nsnl-btn--inverse { background: var(--surface-inverse); color: var(--text-on-inverse); border: 1px solid var(--surface-inverse); }
.nsnl-btn.nsnl-btn--primary:hover { background: var(--copper-400); border-color: var(--copper-400); color: var(--text-on-accent); }
.nsnl-btn.nsnl-btn--secondary:hover { border-color: var(--copper-600); color: var(--text-primary); }
.nsnl-btn.nsnl-btn--quiet:hover { color: var(--text-primary); }
.nsnl-btn.nsnl-btn--inverse:hover { background: var(--ink-200); border-color: var(--ink-200); color: var(--text-on-inverse); }
.nsnl-btn:active { transform: translateY(1px); }
.nsnl-btn.has-background:hover { filter: brightness(1.08); }
.nsnl-btn .nsnl-btn__label { color: inherit; font: inherit; }

/* Header navigation: active page */
.nsnl-navlink { color: var(--text-secondary); }
.nsnl-navlink:hover { color: var(--text-primary); }
.nsnl-navlink[aria-current="page"] { color: var(--copper-300); }

/* Mobile menu */
.ixm-mobile-sheet { display: none; }
.ixm-mobile-sheet.is-open { display: grid; }
.nsnl-k-burger .nsnl-when-open { display: none !important; }
.nsnl-k-burger.is-open .nsnl-when-open { display: inline-flex !important; }
.nsnl-k-burger.is-open .nsnl-when-closed { display: none !important; }

/* FAQ accordion */
.nsnl-faq .nsnl-faq__icon { transform: none; color: var(--ink-400); }
.nsnl-faq.is-open .nsnl-faq__icon { transform: rotate(45deg); color: var(--copper-400); }
.nsnl-faq:not(.is-open) .nsnl-faq__a { display: none; }
.nsnl-faq .nsnl-faq__qt { text-align: left; }

/* Blog filter tabs and pager */
.nsnl-tab { background: transparent; color: var(--text-secondary); }
.nsnl-tab.is-active { background: var(--copper-500); color: var(--text-on-accent); }
.nsnl-pg { background: transparent; color: var(--text-secondary); border-color: var(--border-hairline); }
.nsnl-pg.is-active { background: var(--copper-500); color: var(--text-on-accent); border-color: var(--copper-500); }

/* Contextual links inside body copy (SEO internal links) */
.wp-block-nsnl-text a:not(.nsnl-btn), .wp-block-nsnl-faq .nsnl-faq__a a {
  color: var(--copper-300);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Review rail hover states (source: style-hover) */
.nsnl-hv-arrow:hover { border-color: var(--copper-600, #b31352) !important; }
.nsnl-hv-arrow:active { transform: translateY(1px) !important; }
.nsnl-hv-shot:hover { transform: translateY(-3px) !important; border-color: var(--border-strong, #41414d) !important; }
.nsnl-svg { display: contents; }

/* Lightbox */
.nsnl-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6, 6, 9, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow-y: auto; padding: clamp(16px, 4vw, 40px); display: flex; justify-content: center; align-items: flex-start; }
.nsnl-lightbox img { width: min(400px, 90vw); display: block; border: 1px solid var(--border, #2e2e37); border-radius: var(--radius-card, 14px); }
.nsnl-lightbox__close { position: fixed; top: 18px; right: 18px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--surface-card, #16161c); border: 1px solid var(--border, #2e2e37); border-radius: var(--radius-control, 10px); color: var(--text-primary, #e8e8ee); cursor: pointer; }

/* Media frames with a chosen image */
.wp-block-nsnl-media.has-image .nsnl-media__inner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Generic WordPress pages/posts (Privacy, future blog articles) in the same style */
.nsnl-prose { max-width: var(--prose-max); margin: 0 auto; padding: clamp(32px,4vw,56px) var(--gutter) clamp(48px,6vw,72px); color: var(--text-secondary); font-size: var(--text-18); line-height: var(--leading-loose); }
.nsnl-prose h1, .nsnl-prose .wp-block-post-title { font-family: var(--font-display); font-size: var(--display-1); text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--text-primary); margin: 20px 0 18px; }
.nsnl-prose h2 { font-family: var(--font-display); font-size: var(--text-28); text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 40px 0 14px; }
.nsnl-prose h3 { font-family: var(--font-display); font-size: var(--text-20); text-transform: uppercase; color: var(--text-primary); margin: 32px 0 12px; }
.nsnl-prose p { margin: 0 0 1em; }
.nsnl-prose a { color: var(--copper-300); text-decoration: underline; text-underline-offset: 3px; }
.nsnl-prose blockquote { border-left: 2px solid var(--copper-500); padding-left: 22px; margin: 26px 0; font-size: var(--text-20); line-height: var(--leading-snug); color: var(--text-primary); }
.nsnl-prose img { max-width: 100%; height: auto; border-radius: var(--radius-media); }
.nsnl-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-11); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.nsnl-meta a { color: var(--copper-300); text-decoration: none; }
.nsnl-archive { max-width: var(--page-max); margin: 0 auto; padding: clamp(40px,5vw,72px) var(--gutter); }
.nsnl-archive .wp-block-query-title { font-family: var(--font-display); font-size: var(--display-1); text-transform: uppercase; color: var(--text-primary); margin: 0 0 32px; }
.nsnl-archive .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; }
@media (max-width: 900px) { .nsnl-archive .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nsnl-archive .wp-block-post-template { grid-template-columns: minmax(0, 1fr); } }
.nsnl-card { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: 20px; height: 100%; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.nsnl-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.nsnl-card .wp-block-post-title { font-family: var(--font-display); font-size: var(--text-20); text-transform: uppercase; line-height: 1.08; margin: 14px 0 10px; }
.nsnl-card .wp-block-post-title a { color: var(--text-primary); text-decoration: none; }
.nsnl-card .wp-block-post-excerpt { color: var(--text-secondary); font-size: var(--text-15); }
.nsnl-card .wp-block-post-featured-image img { border-radius: var(--radius-media); aspect-ratio: 16/9; object-fit: cover; }
.nsnl-404 { max-width: var(--page-max); margin: 0 auto; padding: clamp(64px,9vw,120px) var(--gutter); text-align: left; }
.nsnl-404 h1 { font-family: var(--font-display); font-size: var(--display-1); text-transform: uppercase; color: var(--text-primary); margin: 0 0 18px; }
.nsnl-404 p { color: var(--text-secondary); font-size: var(--text-18); margin: 0 0 28px; }
.nsnl-404 .wp-block-button__link { background: var(--copper-500); color: var(--text-on-accent); border-radius: var(--radius-control); font-weight: 700; padding: 12px 20px; text-decoration: none; }
.wp-block-query-pagination { margin-top: 40px; gap: 8px; font-family: var(--font-mono); }
.wp-block-query-pagination a { color: var(--text-secondary); }

/* Layout fix (only change to the source layout): the footer grid's 220px + 140px
   minimum columns overflowed phones by 38px in the source. */
@media (max-width: 640px) {
  .nsnl-footer-part footer > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .nsnl-footer-part footer > div:first-child > div:first-child { grid-column: 1 / -1; }
}

/* ───────── v1.1 dynamic blog ───────── */
/* Filter tabs and pagination are real links now; keep the button look of the design. */
a.nsnl-tab, a.nsnl-pg { text-decoration: none; }
a.nsnl-tab:hover, a.nsnl-pg:hover { color: var(--text-primary); }
a.nsnl-tab.is-active, a.nsnl-tab.is-active:hover, a.nsnl-pg.is-active, a.nsnl-pg.is-active:hover { color: var(--text-on-accent); }
a.nsnl-pg:not(.is-active):hover { border-color: var(--border-strong); }
.nsnl-empty { max-width: 62ch; }
.nsnl-posts { display: block; }
/* Article template: hide the image area when a post has no featured image. */
.nsnl-img-wrap:not(:has(.nsnl-post-image)) { display: none; }
.nsnl-breadcrumbs a:hover { color: var(--copper-300) !important; }
/* Article body (post content) in the original article typography. */
.nsnl-article-body > * { margin-top: 0; margin-bottom: 0; }
.nsnl-article-body p, .nsnl-article-body li { font-size: var(--text-18); line-height: var(--leading-loose); color: var(--text-secondary); }
.nsnl-article-body p + p, .nsnl-article-body p + ul, .nsnl-article-body p + ol, .nsnl-article-body ul + p, .nsnl-article-body ol + p { margin-top: 1.1em; }
.nsnl-article-body h2 { font-family: var(--font-display); font-size: var(--text-28); text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--text-primary); margin: 40px 0 14px; }
.nsnl-article-body h3, .nsnl-article-body h4 { font-family: var(--font-display); font-size: var(--text-20); text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--text-primary); margin: 32px 0 12px; }
.nsnl-article-body > h2:first-child, .nsnl-article-body > h3:first-child { margin-top: 0; }
.nsnl-article-body blockquote, .nsnl-article-body .wp-block-quote, .nsnl-article-body .wp-block-pullquote { border: 0; border-left: 2px solid var(--copper-500); padding: 0 0 0 22px; margin: 26px 0; text-align: left; }
.nsnl-article-body blockquote p, .nsnl-article-body .wp-block-pullquote p { font-size: var(--text-20); line-height: var(--leading-snug); color: var(--text-primary); }
.nsnl-article-body blockquote cite { font-family: var(--font-mono); font-size: var(--text-12); color: var(--text-muted); font-style: normal; }
.nsnl-article-body ul, .nsnl-article-body ol { padding-left: 1.3em; margin: 14px 0; }
.nsnl-article-body li + li { margin-top: 6px; }
.nsnl-article-body a { color: var(--copper-300); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nsnl-article-body strong { color: var(--text-primary); }
.nsnl-article-body img { max-width: 100%; height: auto; border-radius: var(--radius-media); }
.nsnl-article-body figure { margin: 26px 0; }
.nsnl-article-body figcaption { font-family: var(--font-mono); font-size: var(--text-12); color: var(--text-muted); margin-top: 8px; }
.nsnl-article-body table { width: 100%; border-collapse: collapse; font-size: var(--text-15); color: var(--text-secondary); }
.nsnl-article-body th, .nsnl-article-body td { border: 1px solid var(--border-hairline); padding: 10px 12px; text-align: left; }
.nsnl-article-body hr { border: 0; border-top: 1px solid var(--border-hairline); margin: 32px 0; }
/* hide "Meer artikelen" when there are no other posts */
.nsnl-related:not(:has(.nsnl-postcard)) { display: none; }

/* tokens re-resolved on body so Appearance → Editor → Styles palette/fonts apply */
body {
  --ink-950: var(--wp--preset--color--page, #0a0a0d);
  --ink-900: var(--wp--preset--color--raised, #101014);
  --ink-850: var(--wp--preset--color--card, #16161c);
  --ink-800: #1c1c23;
  --ink-750: #23232b;
  --ink-700: var(--wp--preset--color--line, #2e2e37);
  --ink-600: var(--wp--preset--color--line-strong, #41414d);
  --ink-500: #5e5e6b;
  --ink-400: var(--wp--preset--color--text-muted, #85858f);
  --ink-300: var(--wp--preset--color--text-secondary, #a9a9b4);
  --ink-200: #cdcdd6;
  --ink-100: #e8e8ee;
  --ink-050: var(--wp--preset--color--ink, #f5f5f8);
  --ink-000: #ffffff;
  --copper-100: #ffe7f0;
  --copper-200: #ffc3da;
  --copper-300: var(--wp--preset--color--accent-soft, #ff8fb9);
  --copper-400: var(--wp--preset--color--accent-hover, #f65e96);
  --copper-500: var(--wp--preset--color--accent, #d51a63);
  --copper-600: var(--wp--preset--color--accent-deep, #b31352);
  --copper-700: #7f0c3a;
  --copper-800: #4d0623;
  --copper-900: #2a0313;
  --signal-live: #ff4438;
  --signal-good: #4fbf95;
  --signal-warn: #e3b44a;
  --surface-page: var(--ink-950);
  --surface-raised: var(--ink-900);
  --surface-card: var(--ink-850);
  --surface-card-hover: var(--ink-800);
  --surface-sunken: var(--ink-900);
  --surface-inverse: var(--ink-050);
  --surface-accent: var(--copper-500);
  --surface-accent-soft: #1a0a13;
  --surface-accent-quiet: #22101a;
  --text-primary: var(--ink-050);
  --text-secondary: var(--ink-300);
  --text-muted: var(--ink-400);
  --text-accent: var(--copper-300);
  --text-on-accent: var(--wp--preset--color--on-accent, #ffffff);
  --text-on-inverse: var(--ink-950);
  --text-link: var(--copper-300);
  --text-link-hover: var(--copper-200);
  --border-hairline: var(--ink-700);
  --border-strong: var(--ink-600);
  --border-accent: var(--copper-700);
  --border-accent-strong: var(--copper-500);
  --rule-grid: #1c1c26;
  --font-display: var(--wp--preset--font-family--display, "Archivo Black", "Archivo Narrow", Impact, sans-serif);
  --font-sans: var(--wp--preset--font-family--body, "Archivo", system-ui, -apple-system, sans-serif);
  --font-mono: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace);
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-28: 28px;
  --text-34: 34px;
  --text-42: 42px;
  --text-52: 52px;
  --text-64: 64px;
  --text-80: 80px;
  --display-hero: clamp(32px,4.7vw,62px);
  --display-1: clamp(27px,3.2vw,42px);
  --display-2: clamp(24px,2.5vw,32px);
  --display-3: clamp(19px,1.8vw,24px);
  --leading-display: 1.0;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.62;
  --leading-loose: 1.75;
  --tracking-display: -0.02em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-label: 0.16em;
  --tracking-mono: 0.02em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  --space-13: 80px;
  --space-14: 96px;
  --space-15: 120px;
  --gutter: clamp(20px,4vw,40px);
  --section-y: clamp(56px,7vw,96px);
  --section-y-lg: clamp(72px,9vw,120px);
  --stack-card: 20px;
  --radius-0: 0px;
  --radius-2: 6px;
  --radius-4: 10px;
  --radius-8: 12px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-pill: 999px;
  --radius-card: 14px;
  --radius-control: 10px;
  --radius-media: 12px;
  --notch: 0px;
  --notch-sm: 0px;
  --notch-lg: 0px;
  --hairline: 1px;
  --elev-1: 0 1px 2px rgba(0,0,0,.6);
  --elev-2: 0 8px 24px -8px rgba(0,0,0,.7);
  --elev-3: 0 24px 64px -24px rgba(0,0,0,.85);
  --glow-copper: 0 0 0 1px var(--copper-800),0 22px 70px -30px rgba(213,26,99,.6);
  --glow-copper-soft: 0 26px 90px -42px rgba(213,26,99,.5);
  --glow-live: 0 0 0 1px rgba(255,68,56,.4),0 0 24px -6px rgba(255,68,56,.35);
  --ring-focus: 0 0 0 2px var(--surface-page),0 0 0 4px var(--copper-400);
  --ease-out: cubic-bezier(.2,.7,.3,1);
  --ease-in-out: cubic-bezier(.5,0,.5,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 480ms;
  --dur-reveal: 560ms;
  --marquee-dur: 46s;
  --page-max: 1280px;
  --prose-max: 720px;
  --measure-lede: 560px;
  --header-h: 68px;
  --promo-h: 40px;
  --z-promo: 40;
  --z-header: 50;
  --z-overlay: 80;
}