/*
 * NewsPress - main stylesheet
 * Every value below reads a design token printed by inc/design-system/css-variables.php.
 * Do not hard-code colours, sizes or spacing here.
 */

/* ==========================================================================
   NewsPress Design System
   1. Tokens (light)
   2. Tokens (dark)
   3. Token modifiers (radius / shadow / density / typography preset)
   4. Base + reset
   5. Layout: container, grid, sections
   6. Primitives: buttons, badges, forms, alerts, states
   7. Header + navigation + ticker
   8. Cards
   9. Heroes
   10. Sections: latest, trending, discover, markets, video, newsletter
   11. Article + sidebar + ads
   12. Archives: category, tag, search
   13. Footer
   14. Design system preview page
   15. Prototype chrome (view switcher + live design panel)
   16. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — LIGHT (the single source of truth. Components never hard-code.)
   -------------------------------------------------------------------------- */
:root{
  /* Brand */
  --np-primary:#E31B23;
  --np-primary-hover:#B51219;
  --np-primary-soft:#FFF1F2;
  --np-on-primary:#FFFFFF;
  --np-secondary:#111827;
  --np-accent:#2563EB;

  /* Text */
  --np-heading:#111111;
  --np-text:#252525;
  --np-muted:#666666;
  --np-link:#111111;
  --np-link-hover:var(--np-primary);

  /* Background */
  --np-bg:#FFFFFF;
  --np-surface:#F7F7F7;
  --np-surface-2:#EFEFEF;
  --np-card:#FFFFFF;
  --np-inverse:#111111;
  --np-on-inverse:#FFFFFF;

  /* Lines */
  --np-border:#E5E5E5;
  --np-divider:#EDEDED;
  --np-border-strong:#CFCFCF;

  /* Status */
  --np-success:#168A45;
  --np-error:#D93025;
  --np-warning:#B45309;
  --np-info:#2563EB;

  /* Financial */
  --np-positive:#168A45;
  --np-negative:#D93025;
  --np-neutral:#6B7280;

  /* Typography families */
  --np-font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --np-font-editorial:'Newsreader',Georgia,'Times New Roman',serif;
  --np-font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --np-font-body:var(--np-font-ui);
  --np-font-heading:var(--np-font-ui);
  --np-font-nav:var(--np-font-ui);
  --np-font-meta:var(--np-font-ui);
  --np-font-article:var(--np-font-editorial);

  /* Type scale — responsive via clamp() */
  --np-fs-base:16px;
  --np-fs-hero:clamp(30px,1.6rem + 2.2vw,48px);
  --np-fs-h1:clamp(28px,1.5rem + 1.9vw,42px);
  --np-fs-h2:clamp(22px,1.25rem + 1.2vw,30px);
  --np-fs-h3:clamp(18px,1.05rem + .6vw,22px);
  --np-fs-lead:clamp(17px,1rem + .35vw,20px);
  --np-fs-body:1rem;
  --np-fs-sm:.875rem;
  --np-fs-xs:.75rem;
  --np-fs-2xs:.6875rem;

  --np-lh-tight:1.15;
  --np-lh-snug:1.28;
  --np-lh-normal:1.55;
  --np-lh-relaxed:1.75;
  --np-ls-tight:-.02em;
  --np-ls-label:.08em;

  /* Spacing scale (8px based) */
  --np-space-xs:4px;
  --np-space-sm:8px;
  --np-space-md:16px;
  --np-space-lg:24px;
  --np-space-xl:32px;
  --np-space-2xl:48px;
  --np-space-3xl:64px;
  --np-section-y:var(--np-space-2xl);
  --np-grid-gap:24px;
  --np-card-gap:20px;

  /* Layout */
  --np-container:1440px;
  --np-container-pad:24px;
  --np-article-width:720px;
  --np-article-wide:1040px;
  --np-sidebar-width:340px;
  --np-sticky-offset:90px;

  /* Shape */
  --np-radius:4px;
  --np-radius-lg:8px;
  --np-shadow:0 1px 2px rgba(17,17,17,.06);
  --np-shadow-lift:0 6px 18px rgba(17,17,17,.10);
  --np-border-width:1px;

  /* Motion */
  --np-transition:160ms cubic-bezier(.2,.6,.3,1);
  --np-ticker-speed:38s;

  --np-focus:0 0 0 2px var(--np-bg),0 0 0 4px var(--np-primary);
}

/* --------------------------------------------------------------------------
   2. TOKENS — DARK (designed, not inverted)
   -------------------------------------------------------------------------- */
[data-theme="dark"]{
  --np-primary:#FF4D55;
  --np-primary-hover:#FF7076;
  --np-primary-soft:#2A1417;
  --np-on-primary:#160B0C;
  --np-secondary:#E7E9EE;
  --np-accent:#5B8CFF;

  --np-heading:#FFFFFF;
  --np-text:#F4F5F7;
  --np-muted:#A5A9B2;
  --np-link:#F4F5F7;
  --np-link-hover:var(--np-primary);

  --np-bg:#0F1115;
  --np-surface:#171A20;
  --np-surface-2:#1D2128;
  --np-card:#171A20;
  --np-inverse:#F4F5F7;
  --np-on-inverse:#0F1115;

  --np-border:#30343C;
  --np-divider:#262A31;
  --np-border-strong:#454B55;

  --np-success:#3BBB6E;
  --np-error:#FF6B5E;
  --np-warning:#E0A33A;
  --np-info:#5B8CFF;

  --np-positive:#3BBB6E;
  --np-negative:#FF6B5E;
  --np-neutral:#8B909A;

  --np-shadow:0 1px 2px rgba(0,0,0,.5);
  --np-shadow-lift:0 8px 24px rgba(0,0,0,.55);
}

/* --------------------------------------------------------------------------
   3. TOKEN MODIFIERS — set by the admin Design System panel
   -------------------------------------------------------------------------- */
[data-radius="square"]{--np-radius:0;--np-radius-lg:0}
[data-radius="sm"]{--np-radius:4px;--np-radius-lg:6px}
[data-radius="md"]{--np-radius:8px;--np-radius-lg:12px}
[data-radius="lg"]{--np-radius:12px;--np-radius-lg:18px}

[data-shadow="none"]{--np-shadow:none;--np-shadow-lift:none}
[data-shadow="subtle"]{--np-shadow:0 1px 2px rgba(17,17,17,.06)}
[data-shadow="medium"]{--np-shadow:0 2px 8px rgba(17,17,17,.10);--np-shadow-lift:0 10px 28px rgba(17,17,17,.14)}
[data-theme="dark"][data-shadow="subtle"]{--np-shadow:0 1px 2px rgba(0,0,0,.5)}
[data-theme="dark"][data-shadow="medium"]{--np-shadow:0 2px 10px rgba(0,0,0,.55)}

[data-density="compact"]{--np-section-y:32px;--np-grid-gap:16px;--np-card-gap:14px}
[data-density="normal"]{--np-section-y:48px;--np-grid-gap:24px;--np-card-gap:20px}
[data-density="relaxed"]{--np-section-y:72px;--np-grid-gap:32px;--np-card-gap:28px}

[data-type="sans"]{--np-font-heading:var(--np-font-ui);--np-font-article:var(--np-font-ui)}
[data-type="serif"]{--np-font-heading:var(--np-font-editorial);--np-font-body:var(--np-font-editorial);--np-font-article:var(--np-font-editorial)}
[data-type="mixed"]{--np-font-heading:var(--np-font-editorial);--np-font-body:var(--np-font-ui);--np-font-article:var(--np-font-editorial)}
[data-type="system"]{
  --np-font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --np-font-editorial:Georgia,'Times New Roman',serif;
  --np-font-heading:var(--np-font-ui);--np-font-article:var(--np-font-editorial);
}

/* --------------------------------------------------------------------------
   4. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--np-font-body);
  font-size:var(--np-fs-base);
  line-height:var(--np-lh-normal);
  color:var(--np-text);
  background:var(--np-bg);
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--np-transition),color var(--np-transition);
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--np-font-heading);
  color:var(--np-heading);
  line-height:var(--np-lh-tight);
  letter-spacing:var(--np-ls-tight);
  margin:0;
  font-weight:700;
}
p{margin:0 0 1em}
a{color:var(--np-link);text-decoration:none;transition:color var(--np-transition)}
a:hover{color:var(--np-link-hover)}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--np-focus);border-radius:2px}
hr{border:0;border-top:var(--np-border-width) solid var(--np-border);margin:var(--np-space-lg) 0}
.np-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.np-skip{position:absolute;left:-9999px;top:0;background:var(--np-primary);color:var(--np-on-primary);padding:10px 16px;z-index:200}
.np-skip:focus{left:8px;top:8px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.np-container{width:100%;max-width:var(--np-container);margin-inline:auto;padding-inline:var(--np-container-pad)}
.np-section{padding-block:var(--np-section-y)}
.np-section + .np-section{padding-top:0}
.np-grid{display:grid;gap:var(--np-grid-gap)}
.np-g2{grid-template-columns:repeat(2,1fr)}
.np-g3{grid-template-columns:repeat(3,1fr)}
.np-g4{grid-template-columns:repeat(4,1fr)}
.np-g5{grid-template-columns:repeat(5,1fr)}
.np-split-8-4{display:grid;grid-template-columns:minmax(0,1fr) var(--np-sidebar-width);gap:var(--np-space-2xl)}
.np-split-9-3{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--np-space-2xl)}
.np-split-6-6{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--np-grid-gap)}
.np-stack{display:flex;flex-direction:column;gap:var(--np-card-gap)}
.np-rule{border-top:var(--np-border-width) solid var(--np-border)}

/* Section header — the eyebrow rule is the theme's structural signature */
.np-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--np-space-md);
  border-bottom:2px solid var(--np-heading);
  padding-bottom:10px;margin-bottom:var(--np-space-lg);
}
.np-section-head h2{
  font-size:var(--np-fs-h2);position:relative;display:flex;align-items:center;gap:10px;
}
.np-section-head h2::before{content:"";width:6px;height:22px;background:var(--np-primary);flex:none;border-radius:1px}
.np-section-head .np-sub{color:var(--np-muted);font-size:var(--np-fs-sm);font-family:var(--np-font-meta)}
.np-viewall{
  font-family:var(--np-font-meta);font-size:var(--np-fs-xs);font-weight:600;letter-spacing:var(--np-ls-label);
  text-transform:uppercase;color:var(--np-muted);white-space:nowrap;
}
.np-viewall:hover{color:var(--np-primary)}
.np-viewall::after{content:" →"}

/* --------------------------------------------------------------------------
   6. PRIMITIVES
   -------------------------------------------------------------------------- */
.np-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--np-font-ui);font-size:var(--np-fs-sm);font-weight:600;
  padding:10px 18px;border:var(--np-border-width) solid transparent;border-radius:var(--np-radius);
  background:var(--np-primary);color:var(--np-on-primary);cursor:pointer;
  transition:background var(--np-transition),color var(--np-transition),border-color var(--np-transition),transform var(--np-transition);
}
.np-btn:hover{background:var(--np-primary-hover);color:var(--np-on-primary)}
.np-btn:active{transform:translateY(1px)}
.np-btn[disabled],.np-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
.np-btn--ghost{background:transparent;color:var(--np-heading);border-color:var(--np-border-strong)}
.np-btn--ghost:hover{background:var(--np-surface);color:var(--np-primary);border-color:var(--np-primary)}
.np-btn--quiet{background:transparent;color:var(--np-muted);padding:8px 10px}
.np-btn--quiet:hover{background:var(--np-surface);color:var(--np-heading)}
.np-btn--sm{padding:6px 12px;font-size:var(--np-fs-xs)}
.np-btn--block{width:100%}
.np-btn.is-loading{pointer-events:none;color:transparent;position:relative}
.np-btn.is-loading::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:np-spin .7s linear infinite;
}
@keyframes np-spin{to{transform:rotate(360deg)}}

.np-kicker{
  font-family:var(--np-font-meta);font-size:var(--np-fs-2xs);font-weight:700;
  letter-spacing:var(--np-ls-label);text-transform:uppercase;color:var(--np-primary);
}
.np-kicker--muted{color:var(--np-muted)}
.np-badge{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--np-font-meta);
  font-size:var(--np-fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 7px;border-radius:2px;background:var(--np-inverse);color:var(--np-on-inverse);
}
.np-badge--live{background:var(--np-primary);color:var(--np-on-primary)}
.np-badge--live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:np-pulse 1.6s ease-in-out infinite}
@keyframes np-pulse{50%{opacity:.25}}
.np-badge--sponsored{background:var(--np-surface-2);color:var(--np-muted)}
.np-badge--video{background:rgba(0,0,0,.72);color:#fff}
.np-meta{
  font-family:var(--np-font-meta);font-size:var(--np-fs-xs);color:var(--np-muted);
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
}
.np-meta span+span::before{content:"·";margin-right:6px;color:var(--np-border-strong)}
.np-num{font-family:var(--np-font-mono);font-variant-numeric:tabular-nums}
.np-pos{color:var(--np-positive)}
.np-neg{color:var(--np-negative)}

.np-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--np-space-md)}
.np-label{font-family:var(--np-font-ui);font-size:var(--np-fs-xs);font-weight:600;color:var(--np-heading)}
.np-hint{font-size:var(--np-fs-xs);color:var(--np-muted)}
.np-input,.np-select,.np-textarea{
  width:100%;padding:10px 12px;background:var(--np-bg);color:var(--np-text);
  border:var(--np-border-width) solid var(--np-border);border-radius:var(--np-radius);
  transition:border-color var(--np-transition),box-shadow var(--np-transition);
}
.np-input:hover,.np-select:hover{border-color:var(--np-border-strong)}
.np-input:focus,.np-select:focus,.np-textarea:focus{outline:none;border-color:var(--np-primary);box-shadow:0 0 0 3px var(--np-primary-soft)}
.np-input[disabled]{background:var(--np-surface);color:var(--np-muted);cursor:not-allowed}
.np-input[aria-invalid="true"]{border-color:var(--np-error)}
.np-error-text{color:var(--np-error);font-size:var(--np-fs-xs)}

.np-alert{display:flex;gap:10px;padding:12px 14px;border-radius:var(--np-radius);border:var(--np-border-width) solid var(--np-border);background:var(--np-surface);font-size:var(--np-fs-sm)}
.np-alert strong{color:var(--np-heading)}
.np-alert--success{border-left:3px solid var(--np-success)}
.np-alert--error{border-left:3px solid var(--np-error)}
.np-alert--warning{border-left:3px solid var(--np-warning)}
.np-alert--info{border-left:3px solid var(--np-info)}

/* States */
.np-empty{
  border:1px dashed var(--np-border-strong);border-radius:var(--np-radius);
  padding:var(--np-space-xl);text-align:center;color:var(--np-muted);font-size:var(--np-fs-sm);
}
.np-empty strong{display:block;color:var(--np-heading);margin-bottom:4px;font-size:var(--np-fs-body)}
.np-skeleton{background:var(--np-surface-2);border-radius:var(--np-radius);position:relative;overflow:hidden}
.np-skeleton::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(125,125,125,.14),transparent);
  animation:np-shimmer 1.4s infinite;
}
@keyframes np-shimmer{100%{transform:translateX(100%)}}

/* Media placeholder — stands in for the WP featured image. Aspect-ratio box
   prevents layout shift exactly as the real <img> wrapper will. */
.np-media{
  position:relative;overflow:hidden;background:var(--np-surface-2);
  border-radius:var(--np-radius);aspect-ratio:var(--np-ar,16/9);
  background-image:var(--np-media-bg);background-size:cover;background-position:center;
}
.np-media img{width:100%;height:100%;object-fit:cover}
.np-media::after{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.35) 0 1px,transparent 1px 9px);
}
.np-media .np-badge{position:absolute;left:10px;top:10px;z-index:2}
.np-media .np-play{
  position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;
  background:rgba(0,0,0,.55);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:2;
  border:1px solid rgba(255,255,255,.4);transition:transform var(--np-transition),background var(--np-transition);
}
.np-media .np-play::before{content:"";border-left:14px solid #fff;border-block:9px solid transparent;margin-left:4px}
a:hover .np-media .np-play{transform:scale(1.08);background:var(--np-primary)}
.np-ar-16-9{--np-ar:16/9}.np-ar-4-3{--np-ar:4/3}.np-ar-3-2{--np-ar:3/2}.np-ar-1-1{--np-ar:1/1}
.np-ar-4-5{--np-ar:4/5}.np-ar-3-4{--np-ar:3/4}.np-ar-21-9{--np-ar:21/9}

/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */
.np-header{background:var(--np-bg);border-bottom:var(--np-border-width) solid var(--np-border);position:relative;z-index:60}
.np-header.is-sticky{position:sticky;top:0}
.np-hrow{border-bottom:var(--np-border-width) solid var(--np-divider)}
.np-hrow:last-child{border-bottom:0}

/* Row 1 — utility + brand */
.np-hrow--brand .np-container{display:flex;align-items:center;gap:var(--np-space-lg);min-height:76px}
.np-brand{display:flex;align-items:baseline;gap:8px;margin-right:auto}
.np-logo{
  font-family:var(--np-font-editorial);font-size:32px;font-weight:700;letter-spacing:-.03em;
  color:var(--np-heading);line-height:1;
}
.np-logo span{color:var(--np-primary)}
.np-logo-tag{font-family:var(--np-font-meta);font-size:var(--np-fs-2xs);letter-spacing:var(--np-ls-label);text-transform:uppercase;color:var(--np-muted)}
.np-hutil{display:flex;align-items:center;gap:var(--np-space-lg);font-family:var(--np-font-meta);font-size:var(--np-fs-xs);color:var(--np-muted)}
.np-hutil-item{display:flex;align-items:center;gap:7px;white-space:nowrap}
.np-hutil-item strong{color:var(--np-heading);font-weight:600}
.np-hmarket{display:flex;gap:var(--np-space-md)}
.np-hmarket div{display:flex;gap:6px;align-items:baseline}
.np-hactions{display:flex;align-items:center;gap:6px}
.np-iconbtn{
  width:38px;height:38px;display:grid;place-items:center;background:transparent;
  border:var(--np-border-width) solid transparent;border-radius:var(--np-radius);
  color:var(--np-heading);cursor:pointer;transition:background var(--np-transition),color var(--np-transition);
}
.np-iconbtn:hover{background:var(--np-surface);color:var(--np-primary)}
.np-iconbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Mode switcher segmented control */
.np-modeswitch{display:inline-flex;border:var(--np-border-width) solid var(--np-border);border-radius:var(--np-radius);overflow:hidden}
.np-modeswitch button{
  background:transparent;border:0;padding:7px 10px;cursor:pointer;color:var(--np-muted);
  display:grid;place-items:center;transition:background var(--np-transition),color var(--np-transition);
}
.np-modeswitch button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.np-modeswitch button:hover{color:var(--np-heading);background:var(--np-surface)}
.np-modeswitch button[aria-pressed="true"]{background:var(--np-heading);color:var(--np-bg)}

/* Row 2 — primary navigation */
.np-hrow--nav{background:var(--np-bg)}
.np-hrow--nav .np-container{display:flex;align-items:center;gap:var(--np-space-md)}
.np-nav{display:flex;flex:1;min-width:0}
.np-nav > li{position:relative;list-style:none}
.np-nav{margin:0;padding:0}
.np-nav > li > a{
  display:flex;align-items:center;gap:5px;padding:13px 14px;
  font-family:var(--np-font-nav);font-size:var(--np-fs-sm);font-weight:600;
  color:var(--np-heading);white-space:nowrap;border-bottom:3px solid transparent;
}
.np-nav > li > a:hover,.np-nav > li.is-open > a{color:var(--np-primary);border-bottom-color:var(--np-primary)}
.np-nav > li[aria-current="page"] > a{border-bottom-color:var(--np-heading)}
.np-nav .np-caret{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.np-nav-live{color:var(--np-primary)!important}

/* Mega menu */
.np-mega{
  position:absolute;left:0;top:100%;width:min(920px,86vw);background:var(--np-bg);
  border:var(--np-border-width) solid var(--np-border);border-top:2px solid var(--np-primary);
  box-shadow:var(--np-shadow-lift);padding:var(--np-space-lg);z-index:70;
  display:none;grid-template-columns:200px 1fr;gap:var(--np-space-xl);
}
.np-nav > li.is-open .np-mega{display:grid}
.np-mega ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.np-mega ul a{display:block;padding:6px 8px;font-size:var(--np-fs-sm);border-radius:var(--np-radius);color:var(--np-text)}
.np-mega ul a:hover{background:var(--np-surface);color:var(--np-primary)}
.np-mega-head{font-size:var(--np-fs-2xs);letter-spacing:var(--np-ls-label);text-transform:uppercase;color:var(--np-muted);font-weight:700;margin-bottom:10px;font-family:var(--np-font-meta)}

/* Row 3 — quick links */
.np-hrow--quick{background:var(--np-surface)}
.np-hrow--quick .np-container{display:flex;align-items:center;gap:var(--np-space-md);overflow-x:auto;scrollbar-width:none}
.np-hrow--quick .np-container::-webkit-scrollbar{display:none}
.np-quick{display:flex;gap:var(--np-space-md);margin:0;padding:8px 0;list-style:none}
.np-quick a{font-family:var(--np-font-meta);font-size:var(--np-fs-xs);color:var(--np-muted);white-space:nowrap}
.np-quick a:hover{color:var(--np-primary)}

/* Row 4 — ticker */
.np-ticker{display:flex;align-items:stretch;background:var(--np-inverse);color:var(--np-on-inverse);overflow:hidden}
.np-ticker-label{
  background:var(--np-primary);color:var(--np-on-primary);display:flex;align-items:center;gap:7px;
  padding:9px 14px;font-family:var(--np-font-meta);font-size:var(--np-fs-2xs);font-weight:700;
  letter-spacing:var(--np-ls-label);text-transform:uppercase;white-space:nowrap;flex:none;
}
.np-ticker-label::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:np-pulse 1.6s ease-in-out infinite}
.np-ticker-track{overflow:hidden;flex:1;display:flex;align-items:center}
.np-ticker-move{display:flex;gap:var(--np-space-2xl);white-space:nowrap;animation:np-marquee var(--np-ticker-speed) linear infinite;padding-left:var(--np-space-lg)}
.np-ticker:hover .np-ticker-move{animation-play-state:paused}
.np-ticker-move a{color:var(--np-on-inverse);font-size:var(--np-fs-sm);display:inline-flex;align-items:center;gap:10px}
.np-ticker-move a:hover{color:var(--np-primary)}
.np-ticker-move a::before{content:"";width:5px;height:5px;background:var(--np-primary);transform:rotate(45deg);flex:none}
@keyframes np-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .np-ticker-move{animation:none;overflow-x:auto;padding-block:9px}
  .np-ticker-track{overflow-x:auto}
}

/* Search overlay */
.np-search-overlay{
  position:fixed;inset:0;background:rgba(10,10,12,.6);backdrop-filter:blur(3px);
  z-index:120;display:none;padding-top:12vh;
}
.np-search-overlay.is-open{display:block}
.np-search-panel{
  width:min(720px,92vw);margin-inline:auto;background:var(--np-bg);
  border-radius:var(--np-radius-lg);padding:var(--np-space-xl);box-shadow:var(--np-shadow-lift);
}
.np-search-panel form{display:flex;gap:8px}
.np-search-panel .np-input{font-size:var(--np-fs-lead);padding:14px 16px}
.np-search-terms{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--np-space-md)}
.np-chip{
  font-family:var(--np-font-meta);font-size:var(--np-fs-xs);padding:5px 10px;border-radius:100px;
  border:var(--np-border-width) solid var(--np-border);color:var(--np-muted);background:var(--np-bg);cursor:pointer;
}
.np-chip:hover{border-color:var(--np-primary);color:var(--np-primary)}
.np-chip[aria-pressed="true"]{background:var(--np-heading);color:var(--np-bg);border-color:var(--np-heading)}

/* Mobile header + drawer */
.np-mobilebar{display:none;align-items:center;gap:8px;min-height:58px}
.np-drawer{
  position:fixed;inset:0 auto 0 0;width:min(340px,86vw);background:var(--np-bg);z-index:130;
  transform:translateX(-100%);transition:transform 220ms cubic-bezier(.2,.6,.3,1);
  overflow-y:auto;border-right:var(--np-border-width) solid var(--np-border);
}
.np-drawer.is-open{transform:none}
.np-drawer-scrim{position:fixed;inset:0;background:rgba(10,10,12,.5);z-index:125;display:none}
.np-drawer-scrim.is-open{display:block}
.np-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:var(--np-space-md);border-bottom:var(--np-border-width) solid var(--np-border)}
.np-drawer nav ul{list-style:none;margin:0;padding:0}
.np-drawer nav > ul > li{border-bottom:var(--np-border-width) solid var(--np-divider)}
.np-drawer nav a{display:block;padding:13px var(--np-space-md);font-weight:600;font-size:var(--np-fs-sm)}
.np-drawer .np-submenu a{padding-left:var(--np-space-xl);font-weight:400;color:var(--np-muted)}
.np-drawer-foot{padding:var(--np-space-md);display:grid;gap:10px}
.np-acc-toggle{
  width:100%;display:flex;justify-content:space-between;align-items:center;background:transparent;border:0;
  padding:13px var(--np-space-md);font-weight:600;font-size:var(--np-fs-sm);color:var(--np-heading);cursor:pointer;
}
.np-acc-toggle .np-caret{transition:transform var(--np-transition)}
.np-acc-toggle[aria-expanded="true"] .np-caret{transform:rotate(-135deg) translateY(-2px)}
.np-submenu[hidden]{display:none}


/* --------------------------------------------------------------------------
   8. STORY CARDS — one component, nine variants, all option-driven
   -------------------------------------------------------------------------- */
.np-card{display:flex;flex-direction:column;gap:10px;position:relative;background:transparent}
.np-card__body{display:flex;flex-direction:column;gap:7px}
.np-card__title{
  font-family:var(--np-font-heading);font-size:var(--np-fs-h3);font-weight:700;
  line-height:var(--np-lh-snug);letter-spacing:var(--np-ls-tight);color:var(--np-heading);
}
.np-card a.np-card__link{color:inherit}
.np-card:hover .np-card__title{color:var(--np-primary)}
.np-card__excerpt{font-size:var(--np-fs-sm);color:var(--np-muted);line-height:var(--np-lh-normal);margin:0}
.np-card__cat{align-self:flex-start}

/* Boxed treatment (used by discover / grid sections) */
.np-card--boxed{
  background:var(--np-card);border:var(--np-border-width) solid var(--np-border);
  border-radius:var(--np-radius);padding:var(--np-space-md);box-shadow:var(--np-shadow);
  transition:border-color var(--np-transition),box-shadow var(--np-transition),transform var(--np-transition);
}
.np-card--boxed:hover{border-color:var(--np-border-strong);box-shadow:var(--np-shadow-lift)}
.np-card--boxed .np-media{margin:calc(-1 * var(--np-space-md)) calc(-1 * var(--np-space-md)) 0;border-radius:var(--np-radius) var(--np-radius) 0 0}

/* Horizontal */
.np-card--horizontal{flex-direction:row;gap:var(--np-space-md);align-items:flex-start}
.np-card--horizontal .np-media{flex:0 0 190px}
.np-card--horizontal .np-card__title{font-size:1.05rem}

/* Compact — thumbnail + headline, the densest unit in the system */
.np-card--compact{flex-direction:row;gap:12px;align-items:flex-start;padding-bottom:var(--np-card-gap);border-bottom:var(--np-border-width) solid var(--np-divider)}
.np-card--compact:last-child{border-bottom:0;padding-bottom:0}
.np-card--compact .np-media{flex:0 0 104px;--np-ar:4/3}
.np-card--compact .np-card__title{font-size:.95rem;font-weight:600}

/* List — no image, rule-separated */
.np-card--list{gap:5px;padding-bottom:12px;border-bottom:var(--np-border-width) solid var(--np-divider)}
.np-card--list:last-child{border-bottom:0;padding-bottom:0}
.np-card--list .np-card__title{font-size:1rem;font-weight:600}

/* Overlay */
.np-card--overlay{border-radius:var(--np-radius);overflow:hidden;isolation:isolate;min-height:260px;justify-content:flex-end}
.np-card--overlay .np-media{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
.np-card--overlay::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,8,10,0) 30%,rgba(8,8,10,.82) 100%);
}
.np-card--overlay .np-card__body{position:relative;z-index:2;padding:var(--np-space-md)}
.np-card--overlay .np-card__title,.np-card--overlay .np-card__excerpt{color:#fff}
.np-card--overlay .np-meta{color:rgba(255,255,255,.75)}
.np-card--overlay:hover .np-card__title{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Numbered — rank is real information here (most-read order) */
.np-card--numbered{flex-direction:row;gap:14px;align-items:flex-start;padding-block:14px;border-bottom:var(--np-border-width) solid var(--np-divider)}
.np-card--numbered:first-child{padding-top:0}
.np-card--numbered:last-child{border-bottom:0}
.np-card--numbered .np-rank{
  font-family:var(--np-font-mono);font-size:1.5rem;font-weight:600;line-height:1;
  color:var(--np-border-strong);flex:none;width:2ch;letter-spacing:-.04em;
}
.np-card--numbered:hover .np-rank{color:var(--np-primary)}
.np-card--numbered .np-card__title{font-size:.98rem;font-weight:600}

/* Magazine — serif, generous, image-led */
.np-card--magazine .np-card__title{font-family:var(--np-font-editorial);font-size:clamp(20px,1.1rem + .9vw,26px);font-weight:600;letter-spacing:-.01em}
.np-card--magazine .np-card__excerpt{font-family:var(--np-font-editorial);font-size:1rem;color:var(--np-text)}

/* Financial */
.np-card--financial{
  border-left:3px solid var(--np-border);padding-left:14px;
  transition:border-color var(--np-transition);
}
.np-card--financial:hover{border-left-color:var(--np-primary)}
.np-card--financial .np-card__title{font-size:1rem;font-weight:600}
.np-card--financial .np-tickers{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--np-font-mono);font-size:var(--np-fs-xs)}

/* Video */
.np-card--video .np-media{--np-ar:16/9}
.np-card--video .np-card__title{font-size:1rem;font-weight:600}

/* --------------------------------------------------------------------------
   9. HEROES
   -------------------------------------------------------------------------- */
.np-hero{padding-block:var(--np-space-xl) 0}
.np-hero__lead .np-card__title{font-size:var(--np-fs-hero);letter-spacing:-.025em}
.np-hero__lead .np-card__excerpt{font-size:var(--np-fs-lead);color:var(--np-text);line-height:var(--np-lh-snug)}

/* Hero 01 — classic: lead 8 / secondary 4 */
.np-hero--classic .np-hero__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--np-space-xl)}
.np-hero--classic .np-hero__side{display:flex;flex-direction:column;gap:var(--np-card-gap);border-left:var(--np-border-width) solid var(--np-border);padding-left:var(--np-space-xl)}

/* Hero 02 — 1 + 4 */
.np-hero--grid14 .np-hero__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--np-space-xl)}
.np-hero--grid14 .np-hero__quad{display:grid;grid-template-columns:1fr 1fr;gap:var(--np-grid-gap)}

/* Hero 03 — magazine */
.np-hero--magazine .np-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--np-space-2xl);align-items:start}
.np-hero--magazine .np-hero__lead .np-card__title{font-family:var(--np-font-editorial);font-weight:600;letter-spacing:-.015em}
.np-hero--magazine .np-hero__list{display:flex;flex-direction:column;gap:var(--np-space-md)}

/* Hero 04 — breaking */
.np-hero--breaking .np-breaking-bar{
  display:flex;align-items:center;gap:12px;background:var(--np-primary);color:var(--np-on-primary);
  padding:10px 16px;border-radius:var(--np-radius) var(--np-radius) 0 0;font-family:var(--np-font-meta);
  font-size:var(--np-fs-xs);font-weight:700;letter-spacing:var(--np-ls-label);text-transform:uppercase;
}
.np-hero--breaking .np-hero__lead{position:relative;border:var(--np-border-width) solid var(--np-border);border-top:0;padding:var(--np-space-lg);border-radius:0 0 var(--np-radius) var(--np-radius)}
.np-hero--breaking .np-hero__strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--np-grid-gap);margin-top:var(--np-grid-gap)}

/* Hero 05 — financial */
.np-hero--financial .np-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--np-space-xl)}
.np-market-panel{border:var(--np-border-width) solid var(--np-border);border-radius:var(--np-radius);background:var(--np-card);overflow:hidden}
.np-market-panel h3{font-size:var(--np-fs-sm);padding:12px 14px;border-bottom:var(--np-border-width) solid var(--np-border);background:var(--np-surface);display:flex;justify-content:space-between;align-items:center}
.np-market-panel h3 span{font-family:var(--np-font-meta);font-size:var(--np-fs-2xs);color:var(--np-muted);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.np-market-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;padding:11px 14px;border-bottom:var(--np-border-width) solid var(--np-divider);font-size:var(--np-fs-sm)}
.np-market-row:last-child{border-bottom:0}
.np-market-row .np-mname{font-weight:600;color:var(--np-heading)}
.np-market-row .np-mval,.np-market-row .np-mchg{font-family:var(--np-font-mono);font-variant-numeric:tabular-nums;font-size:var(--np-fs-xs)}
.np-market-note{padding:10px 14px;font-size:var(--np-fs-2xs);color:var(--np-muted);background:var(--np-surface);border-top:var(--np-border-width) solid var(--np-border)}
.np-hero-switcher{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--np-space-md)}

/* --------------------------------------------------------------------------
   10. SECTIONS
   -------------------------------------------------------------------------- */
/* Latest 02 — timeline */
.np-timeline{position:relative;padding-left:22px;margin:0;list-style:none}
.np-timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--np-border)}
.np-timeline li{position:relative;padding-bottom:var(--np-space-lg)}
.np-timeline li:last-child{padding-bottom:0}
.np-timeline li::before{content:"";position:absolute;left:-21px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--np-bg);border:2px solid var(--np-primary)}
.np-timeline time{font-family:var(--np-font-mono);font-size:var(--np-fs-xs);color:var(--np-primary);display:block;margin-bottom:3px}
.np-timeline h3{font-size:1rem;font-weight:600;line-height:var(--np-lh-snug)}
.np-timeline p{font-size:var(--np-fs-sm);color:var(--np-muted);margin:4px 0 0}

/* Latest 01 — bullet list */
.np-bullets{list-style:none;margin:0;padding:0}
.np-bullets li{display:flex;gap:10px;padding:11px 0;border-bottom:var(--np-border-width) solid var(--np-divider);font-size:.95rem}
.np-bullets li:last-child{border-bottom:0}
.np-bullets li::before{content:"";width:6px;height:6px;background:var(--np-primary);transform:rotate(45deg);margin-top:8px;flex:none}
.np-bullets time{font-family:var(--np-font-mono);font-size:var(--np-fs-xs);color:var(--np-muted);flex:none;margin-left:auto;padding-left:12px}

/* Trending */
.np-trending-tabs{display:flex;gap:4px;margin-bottom:var(--np-space-md);border-bottom:var(--np-border-width) solid var(--np-border)}
.np-tab{
  background:transparent;border:0;border-bottom:2px solid transparent;padding:9px 12px;cursor:pointer;
  font-family:var(--np-font-ui);font-size:var(--np-fs-sm);font-weight:600;color:var(--np-muted);
}
.np-tab:hover{color:var(--np-heading)}
.np-tab[aria-selected="true"]{color:var(--np-primary);border-bottom-color:var(--np-primary)}

/* Discover */
.np-discover{background:var(--np-surface);padding-block:var(--np-section-y);margin-block:var(--np-section-y)}
.np-discover .np-section-head{border-bottom-color:var(--np-border-strong)}

/* Video section — dark by design in both themes */
.np-videos{background:#0F1115;color:#F4F5F7;padding-block:var(--np-section-y)}
.np-videos h2,.np-videos .np-card__title{color:#fff}
.np-videos .np-section-head{border-bottom-color:#30343C}
.np-videos .np-viewall{color:#A5A9B2}
.np-videos .np-meta{color:#A5A9B2}
.np-videos .np-card:hover .np-card__title{color:var(--np-primary)}


/* Ads */
.np-ad{
  display:grid;place-items:center;text-align:center;background:var(--np-surface);
  border:1px dashed var(--np-border-strong);border-radius:var(--np-radius);color:var(--np-muted);
  padding:var(--np-space-md);
}
.np-ad__label{font-family:var(--np-font-meta);font-size:var(--np-fs-2xs);letter-spacing:var(--np-ls-label);text-transform:uppercase;color:var(--np-muted)}
.np-ad__slot{font-family:var(--np-font-mono);font-size:var(--np-fs-xs);color:var(--np-border-strong);margin-top:4px}
.np-ad--leaderboard{min-height:110px}
.np-ad--billboard{min-height:130px}
.np-ad--rectangle{min-height:260px}
.np-ad--inline{min-height:110px;margin-block:var(--np-space-lg)}

/* --------------------------------------------------------------------------
   11. ARTICLE
   -------------------------------------------------------------------------- */
.np-breadcrumb{font-family:var(--np-font-meta);font-size:var(--np-fs-xs);color:var(--np-muted);display:flex;gap:8px;flex-wrap:wrap;padding-block:var(--np-space-md)}
.np-breadcrumb a{color:var(--np-muted)}
.np-breadcrumb a:hover{color:var(--np-primary)}
.np-breadcrumb li+li::before{content:"/";margin-right:8px;color:var(--np-border-strong)}
.np-breadcrumb ol{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}

.np-article__head{max-width:var(--np-article-wide);margin-bottom:var(--np-space-lg)}
.np-article__title{font-size:var(--np-fs-h1);letter-spacing:-.025em;margin:10px 0 12px}
.np-article__standfirst{font-family:var(--np-font-article);font-size:var(--np-fs-lead);color:var(--np-muted);line-height:var(--np-lh-snug);margin:0}
.np-byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:var(--np-space-md);border-block:var(--np-border-width) solid var(--np-border);margin-block:var(--np-space-lg)}
.np-avatar{width:42px;height:42px;border-radius:50%;background:var(--np-surface-2);background-image:var(--np-media-bg);background-size:cover;flex:none}
.np-byline__who{font-size:var(--np-fs-sm)}
.np-byline__who strong{color:var(--np-heading)}
.np-share{display:flex;gap:6px;margin-left:auto}
.np-share button{
  width:34px;height:34px;border-radius:var(--np-radius);border:var(--np-border-width) solid var(--np-border);
  background:transparent;color:var(--np-muted);cursor:pointer;display:grid;place-items:center;
}
.np-share button:hover{border-color:var(--np-primary);color:var(--np-primary)}
.np-share button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.np-figure{margin:0 0 var(--np-space-lg)}
.np-figcaption{font-family:var(--np-font-meta);font-size:var(--np-fs-xs);color:var(--np-muted);padding-top:8px;border-bottom:var(--np-border-width) solid var(--np-border);padding-bottom:10px}
.np-prose{max-width:var(--np-article-width);font-family:var(--np-font-article);font-size:1.075rem;line-height:var(--np-lh-relaxed);color:var(--np-text)}
.np-prose h2{font-size:1.5rem;margin:var(--np-space-xl) 0 var(--np-space-sm)}
.np-prose h3{font-size:1.2rem;margin:var(--np-space-lg) 0 var(--np-space-sm)}
.np-prose ul,.np-prose ol{padding-left:1.2em;margin:0 0 1em}
.np-prose li{margin-bottom:.4em}
.np-prose blockquote{
  margin:var(--np-space-lg) 0;padding:4px 0 4px var(--np-space-lg);border-left:3px solid var(--np-primary);
  font-size:1.25rem;line-height:1.45;color:var(--np-heading);font-style:italic;
}
.np-prose blockquote cite{display:block;font-size:var(--np-fs-sm);font-style:normal;color:var(--np-muted);margin-top:8px;font-family:var(--np-font-meta)}
.np-prose a{color:var(--np-primary);text-decoration:underline;text-underline-offset:2px}
.np-pullbox{background:var(--np-surface);border-left:3px solid var(--np-heading);padding:var(--np-space-md);font-family:var(--np-font-ui);font-size:var(--np-fs-sm);margin:var(--np-space-lg) 0}
.np-tags{display:flex;flex-wrap:wrap;gap:8px;padding-block:var(--np-space-lg)}
.np-tag{font-family:var(--np-font-meta);font-size:var(--np-fs-xs);padding:5px 10px;border:var(--np-border-width) solid var(--np-border);border-radius:var(--np-radius);color:var(--np-muted)}
.np-tag:hover{border-color:var(--np-primary);color:var(--np-primary)}
.np-authorbox{display:flex;gap:var(--np-space-md);padding:var(--np-space-lg);background:var(--np-surface);border-radius:var(--np-radius);margin-block:var(--np-space-lg)}
.np-authorbox .np-avatar{width:64px;height:64px}
.np-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:var(--np-grid-gap);margin-block:var(--np-space-lg)}
.np-prevnext a{border:var(--np-border-width) solid var(--np-border);border-radius:var(--np-radius);padding:var(--np-space-md);display:block}
.np-prevnext a:hover{border-color:var(--np-primary)}
.np-prevnext .np-kicker--muted{margin-bottom:6px;display:block}
.np-prevnext strong{color:var(--np-heading);font-weight:600;font-size:.95rem;line-height:var(--np-lh-snug);display:block}
.np-prevnext .np-next{text-align:right}

/* Reading progress */
.np-progress{position:sticky;top:0;height:3px;background:transparent;z-index:50}
.np-progress i{display:block;height:100%;width:0;background:var(--np-primary);transition:width 80ms linear}

/* Sidebar */
.np-sidebar{display:flex;flex-direction:column;gap:var(--np-space-xl)}
.np-sidebar.is-sticky{position:sticky;top:var(--np-sticky-offset);align-self:start}
.np-widget{border-top:2px solid var(--np-heading);padding-top:12px}
.np-widget__title{font-size:var(--np-fs-sm);font-weight:700;letter-spacing:var(--np-ls-label);text-transform:uppercase;margin-bottom:var(--np-space-md);font-family:var(--np-font-ui)}
.np-widget--plain{border-top:0;padding-top:0}
.np-catlist{list-style:none;margin:0;padding:0}
.np-catlist li{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:var(--np-border-width) solid var(--np-divider);font-size:var(--np-fs-sm)}
.np-catlist li:last-child{border-bottom:0}
.np-catlist .np-count{font-family:var(--np-font-mono);font-size:var(--np-fs-xs);color:var(--np-muted);background:var(--np-surface);padding:2px 7px;border-radius:100px}
.np-social{display:flex;gap:8px;flex-wrap:wrap}
.np-social a{width:38px;height:38px;border:var(--np-border-width) solid var(--np-border);border-radius:var(--np-radius);display:grid;place-items:center;color:var(--np-muted)}
.np-social a:hover{border-color:var(--np-primary);color:var(--np-primary)}
.np-social svg{width:17px;height:17px;fill:currentColor}

/* --------------------------------------------------------------------------
   12. ARCHIVES
   -------------------------------------------------------------------------- */
.np-archive-head{border-bottom:2px solid var(--np-heading);padding-block:var(--np-space-lg);margin-bottom:var(--np-space-xl)}
.np-archive-head h1{font-size:var(--np-fs-h1)}
.np-archive-head p{color:var(--np-muted);margin:10px 0 0;max-width:62ch;font-size:var(--np-fs-sm)}
.np-archive-toolbar{display:flex;align-items:center;gap:var(--np-space-md);flex-wrap:wrap;margin-bottom:var(--np-space-lg)}
.np-archive-toolbar .np-count{font-size:var(--np-fs-sm);color:var(--np-muted);margin-right:auto}
.np-pagination{display:flex;gap:6px;justify-content:center;align-items:center;padding-block:var(--np-space-xl);flex-wrap:wrap}
.np-pagination a,.np-pagination span{
  min-width:38px;height:38px;padding:0 12px;display:grid;place-items:center;border-radius:var(--np-radius);
  border:var(--np-border-width) solid var(--np-border);font-size:var(--np-fs-sm);font-family:var(--np-font-meta);color:var(--np-text);
}
.np-pagination a:hover{border-color:var(--np-primary);color:var(--np-primary)}
.np-pagination [aria-current="page"]{background:var(--np-heading);color:var(--np-bg);border-color:var(--np-heading);font-weight:600}
.np-pagination .np-dots{border:0}
.np-searchresult{padding-block:var(--np-space-lg);border-bottom:var(--np-border-width) solid var(--np-divider)}
.np-searchresult mark{background:var(--np-primary-soft);color:inherit;padding:0 2px}

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.np-footer{background:var(--np-surface);border-top:3px solid var(--np-primary);margin-top:var(--np-section-y)}
.np-footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:var(--np-space-xl);padding-block:var(--np-space-2xl)}
.np-footer h3{font-size:var(--np-fs-xs);letter-spacing:var(--np-ls-label);text-transform:uppercase;margin-bottom:var(--np-space-md);font-family:var(--np-font-ui)}
.np-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.np-footer a{font-size:var(--np-fs-sm);color:var(--np-muted)}
.np-footer a:hover{color:var(--np-primary)}
.np-footer-about p{font-size:var(--np-fs-sm);color:var(--np-muted);max-width:38ch}
.np-footer-bottom{border-top:var(--np-border-width) solid var(--np-border);padding-block:var(--np-space-lg);display:flex;gap:var(--np-space-md);align-items:center;flex-wrap:wrap;font-size:var(--np-fs-xs);color:var(--np-muted)}
.np-footer-bottom nav{display:flex;gap:var(--np-space-md);flex-wrap:wrap;margin-left:auto}

/* --------------------------------------------------------------------------
   14. DESIGN SYSTEM PREVIEW PAGE
   -------------------------------------------------------------------------- */
.np-ds-section{padding-block:var(--np-space-xl);border-bottom:var(--np-border-width) solid var(--np-border)}
.np-ds-section > h2{font-size:var(--np-fs-h3);margin-bottom:var(--np-space-md)}
.np-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.np-swatch{border:var(--np-border-width) solid var(--np-border);border-radius:var(--np-radius);overflow:hidden}
.np-swatch i{display:block;height:64px}
.np-swatch div{padding:9px 11px;font-size:var(--np-fs-xs)}
.np-swatch strong{display:block;color:var(--np-heading)}
.np-swatch code{font-family:var(--np-font-mono);color:var(--np-muted);font-size:var(--np-fs-2xs)}
.np-specimen{border-bottom:var(--np-border-width) solid var(--np-divider);padding-block:14px;display:grid;grid-template-columns:170px 1fr;gap:var(--np-space-md);align-items:baseline}
.np-specimen code{font-family:var(--np-font-mono);font-size:var(--np-fs-xs);color:var(--np-muted)}
.np-demorow{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:var(--np-space-md)}

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   Breakpoints tested: 1440 / 1280 / 1120 / 1024 / 768 / 540 / 390 / 360.
   Rule: no horizontal overflow at any width, and every interactive target
   reaches 44px on touch.
   -------------------------------------------------------------------------- */

/* Overflow guards + native UI matching -------------------------------------- */
html{overflow-x:hidden;color-scheme:light}
[data-theme="dark"]{color-scheme:dark}
body{overflow-x:clip;-webkit-tap-highlight-color:transparent}
.np-grid > *,.np-stack > *,.np-split-8-4 > *,.np-split-9-3 > *,.np-split-6-6 > *,.np-hero__grid > *{min-width:0}
.np-card__title,.np-prose,.np-article__title,.np-timeline h3{overflow-wrap:anywhere}
@supports (padding:env(safe-area-inset-left)){
  .np-container{
    padding-left:max(var(--np-container-pad),env(safe-area-inset-left));
    padding-right:max(var(--np-container-pad),env(safe-area-inset-right));
  }
}

/* Horizontal swipe rails — dense sections stay dense on a phone instead of
   becoming an endless single column. Applied only at <=768px. */
.np-rail-hint{display:none}

@media (max-width:1280px){
  :root{--np-sidebar-width:300px;--np-container-pad:22px}
  .np-hutil .np-hmarket{display:none}
  .np-hero--financial .np-hero__grid{grid-template-columns:minmax(0,1fr) 300px}
}

/* Tablet landscape / small laptop: the primary nav no longer fits ----------- */
@media (max-width:1120px){
  .np-hrow--nav .np-container{overflow:hidden}
  .np-nav{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .np-nav::-webkit-scrollbar{display:none}
  .np-nav > li{flex:none}
  .np-nav > li > a{padding-inline:11px}
  .np-mega{display:none!important} /* mega panels would be clipped by the scroller */
}

@media (max-width:1024px){
  :root{--np-container-pad:20px;--np-section-y:40px;--np-grid-gap:20px}
  .np-split-8-4,.np-split-9-3{grid-template-columns:minmax(0,1fr);gap:var(--np-space-xl)}
  .np-sidebar.is-sticky{position:static}
  .np-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:var(--np-space-xl);align-items:start}
  .np-sidebar > .np-ad{grid-column:1 / -1}
  .np-hero--classic .np-hero__grid,
  .np-hero--grid14 .np-hero__grid,
  .np-hero--magazine .np-hero__grid,
  .np-hero--financial .np-hero__grid{grid-template-columns:minmax(0,1fr)}
  .np-hero--classic .np-hero__side{
    border-left:0;padding-left:0;border-top:var(--np-border-width) solid var(--np-border);
    padding-top:var(--np-space-lg);display:grid;grid-template-columns:1fr 1fr;
  }
  .np-hero--financial .np-stack{display:grid;grid-template-columns:1fr 1fr;gap:var(--np-grid-gap)}
  .np-hero--grid14 .np-hero__quad{grid-template-columns:repeat(2,1fr)}
  .np-g4,.np-g5{grid-template-columns:repeat(2,1fr)}
  .np-footer-top{grid-template-columns:repeat(3,1fr)}
  .np-hutil-item--weather{display:none}
  .np-article__head,.np-prose{max-width:none}
}

/* ---------------------------- PHONE ---------------------------------------- */
@media (max-width:768px){
  :root{
    --np-container-pad:16px;
    --np-section-y:36px;
    --np-grid-gap:18px;
    --np-card-gap:16px;
    --np-sticky-offset:76px;
  }

  /* Header swaps to the mobile bar; sticky row stays under 100px */
  .np-hrow--brand,.np-hrow--nav,.np-hrow--quick{display:none}
  .np-mobilebar{display:flex}
  .np-mobilebar .np-brand{margin-inline:auto}
  .np-mobilebar .np-logo{font-size:23px}
  .np-ticker-label{padding:8px 12px}
  .np-ticker-move a{font-size:.8125rem}

  /* Touch targets */
  .np-iconbtn{width:44px;height:44px}
  .np-chip{padding:9px 14px}
  .np-btn{padding:12px 18px}
  .np-btn--sm{padding:9px 14px}
  .np-share button{width:44px;height:44px}
  .np-pagination a,.np-pagination span{min-width:44px;height:44px}
  .np-drawer nav a,.np-acc-toggle{padding-block:15px}
  .np-social a{width:44px;height:44px}

  /* iOS refuses to stop zooming on focus below 16px */
  .np-input,.np-select,.np-textarea{font-size:16px}

  /* Layout collapse */
  .np-g2,.np-g3,.np-g4,.np-g5,.np-split-6-6{grid-template-columns:minmax(0,1fr)}
  .np-sidebar{grid-template-columns:1fr}
  .np-hero{padding-top:var(--np-space-lg)}
  .np-hero--classic .np-hero__side,
  .np-hero--grid14 .np-hero__quad,
  .np-hero--financial .np-stack{grid-template-columns:1fr}
  .np-hero--breaking .np-hero__strip{grid-template-columns:1fr}
  .np-hero--breaking .np-hero__lead{padding:var(--np-space-md)}
  .np-card--horizontal{flex-direction:row;gap:12px}
  .np-card--horizontal .np-media{flex:0 0 120px;--np-ar:4/3}
  .np-card--horizontal .np-card__excerpt{display:none}
  .np-prevnext{grid-template-columns:1fr}
  .np-footer-top{grid-template-columns:1fr 1fr;gap:var(--np-space-lg)}
  .np-footer-about{grid-column:1 / -1}
  .np-specimen{grid-template-columns:1fr;gap:4px}
  .np-hero__lead .np-card__excerpt{font-size:1rem}
  .np-authorbox{flex-direction:column}
  .np-archive-toolbar{gap:10px}
  .np-archive-toolbar .np-count{width:100%;margin-right:0}
  .np-byline{gap:10px}
  .np-share{margin-left:0;width:100%;padding-top:4px}

  /* Article images go edge to edge — the phone screen is the column */
  .np-figure .np-media{
    margin-inline:calc(-1 * var(--np-container-pad));
    border-radius:0;width:calc(100% + (2 * var(--np-container-pad)));
  }
  .np-prose{font-size:1.0625rem;line-height:1.7}
  .np-prose blockquote{font-size:1.125rem;padding-left:var(--np-space-md)}

  /* Swipe rails */
  .np-grid.np-rail-m{
    grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--np-container-pad));
    padding:0 var(--np-container-pad) 6px;
  }
  .np-grid.np-rail-m::-webkit-scrollbar{display:none}
  .np-grid.np-rail-m > *{scroll-snap-align:start}
  .np-rail-hint{
    display:block;font-family:var(--np-font-meta);font-size:var(--np-fs-2xs);
    color:var(--np-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;
  }

  /* Ads shrink rather than reserving desktop heights */
  .np-ad--billboard,.np-ad--leaderboard{min-height:96px}
  .np-ad--rectangle{min-height:220px}


  .np-drawer{height:100dvh}
  .np-drawer-foot{padding-bottom:calc(var(--np-space-md) + env(safe-area-inset-bottom))}
  .np-search-overlay{padding-top:6vh}
  .np-search-panel{padding:var(--np-space-lg);border-radius:var(--np-radius)}
  .np-search-panel form{flex-wrap:wrap}
  .np-search-panel form .np-input{flex:1 1 100%}
  .np-search-panel form .np-btn{flex:1}
}

/* Small phones ------------------------------------------------------------- */
@media (max-width:540px){
  :root{--np-section-y:32px}
  .np-grid.np-rail-m{grid-auto-columns:84%}
  .np-card--compact .np-media{flex-basis:92px}
  .np-market-row{grid-template-columns:1fr auto;row-gap:2px;padding:10px 12px}
  .np-market-row .np-mchg{grid-column:2}
  .np-market-row .np-mval{grid-column:2;grid-row:1;text-align:right}
  .np-market-row .np-mname{grid-row:1}
  .np-pagination a:not([href="#"]),.np-pagination .np-dots{display:none}
  .np-swatches{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .np-presets{grid-template-columns:1fr}
  .np-seg{grid-auto-flow:row}
  .np-seg button+button{border-left:0;border-top:var(--np-border-width) solid var(--np-border)}
}

@media (max-width:390px){
  :root{--np-container-pad:14px}
  .np-footer-top{grid-template-columns:1fr}
  .np-grid.np-rail-m{grid-auto-columns:88%}
  .np-card--compact .np-media{flex-basis:80px}
  .np-card--horizontal .np-media{flex-basis:104px}
  .np-mobilebar .np-logo{font-size:21px}
  .np-badge{font-size:10px}
  .np-timeline{padding-left:18px}
}

/* Very short viewports: don't let a sticky header eat the screen ------------- */
@media (max-height:520px) and (orientation:landscape){
  .np-header.is-sticky{position:relative}
}

/* Coarse pointers: hover-only affordances must not be the only route --------- */
@media (hover:none){
  .np-card--boxed:hover{box-shadow:var(--np-shadow)}
  .np-ticker-move{animation-play-state:running}
}

@media print{
  .np-header,.np-footer,.np-ad,.np-share,.np-drawer,.np-search-overlay{display:none!important}
  .np-split-8-4,.np-split-9-3{grid-template-columns:1fr}
  .np-sidebar{display:none}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   17. WORDPRESS INTEGRATION
   Core classes WordPress and the block editor emit, mapped onto the tokens.
   ========================================================================== */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:fixed!important;top:8px;left:8px;width:auto;height:auto;clip:auto;padding:12px 18px;background:var(--np-primary);color:var(--np-on-primary);z-index:200}
.admin-bar .np-header.is-sticky{top:32px}
@media (max-width:782px){.admin-bar .np-header.is-sticky{top:46px}}

/* Alignment + captions */
.alignleft{float:left;margin:0 var(--np-space-lg) var(--np-space-md) 0;max-width:50%}
.alignright{float:right;margin:0 0 var(--np-space-md) var(--np-space-lg);max-width:50%}
.aligncenter{margin-inline:auto}
.np-prose .alignwide{width:min(var(--np-article-wide),100%);max-width:none;margin-inline:calc(50% - min(var(--np-article-wide),100%)/2)}
.np-prose .alignfull{width:100vw;max-width:none;margin-left:calc(50% - 50vw)}
.wp-caption{max-width:100%}
.wp-caption-text,.wp-element-caption,.np-prose figcaption{
  font-family:var(--np-font-meta);font-size:var(--np-fs-xs);color:var(--np-muted);
  padding-top:8px;margin:0;
}
.np-prose figure{margin:var(--np-space-lg) 0}
.np-prose img{border-radius:var(--np-radius)}
.sticky .np-card__title::before{content:"\2605";color:var(--np-primary);margin-right:6px}
.bypostauthor{}

/* Block editor primitives */
.wp-block-quote{margin:var(--np-space-lg) 0;padding-left:var(--np-space-lg);border-left:3px solid var(--np-primary)}
.wp-block-pullquote{border-block:2px solid var(--np-heading);padding:var(--np-space-lg) 0;text-align:center}
.wp-block-table table{width:100%;border-collapse:collapse;font-size:var(--np-fs-sm)}
.wp-block-table th,.wp-block-table td{border:var(--np-border-width) solid var(--np-border);padding:10px 12px;text-align:left}
.wp-block-table th{background:var(--np-surface);color:var(--np-heading)}
.wp-block-code,.np-prose pre{background:var(--np-surface);border:var(--np-border-width) solid var(--np-border);border-radius:var(--np-radius);padding:var(--np-space-md);overflow-x:auto;font-family:var(--np-font-mono);font-size:var(--np-fs-sm)}
.wp-block-separator{border-top:var(--np-border-width) solid var(--np-border);border-bottom:0}
.wp-block-button__link{background:var(--np-primary);color:var(--np-on-primary);border-radius:var(--np-radius);padding:12px 20px;font-family:var(--np-font-ui);font-weight:600}
.wp-block-embed__wrapper,.np-embed{position:relative}
.wp-block-embed iframe{max-width:100%}
.np-prose .wp-block-image{margin-block:var(--np-space-lg)}

/* paginate_links() output */
.np-pagination .page-numbers{
  min-width:38px;height:38px;padding:0 12px;display:grid;place-items:center;border-radius:var(--np-radius);
  border:var(--np-border-width) solid var(--np-border);font-size:var(--np-fs-sm);font-family:var(--np-font-meta);color:var(--np-text);
}
.np-pagination a.page-numbers:hover{border-color:var(--np-primary);color:var(--np-primary)}
.np-pagination .page-numbers.current{background:var(--np-heading);color:var(--np-bg);border-color:var(--np-heading);font-weight:600}
.np-pagination .page-numbers.dots{border-color:transparent}

/* Comments */
.np-comments{margin-top:var(--np-space-2xl)}
.np-comments .comment-list{list-style:none;margin:0;padding:0}
.np-comments .comment-list ol.children{list-style:none;margin:var(--np-space-md) 0 0;padding-left:var(--np-space-lg);border-left:var(--np-border-width) solid var(--np-border)}
.np-comments article.comment-body{padding-block:var(--np-space-md);border-bottom:var(--np-border-width) solid var(--np-divider)}
.np-comments .comment-author{display:flex;align-items:center;gap:10px;font-size:var(--np-fs-sm)}
.np-comments .comment-author img{border-radius:50%}
.np-comments .comment-metadata{font-family:var(--np-font-meta);font-size:var(--np-fs-xs);color:var(--np-muted);margin:4px 0 8px}
.np-comments .comment-content{font-size:var(--np-fs-sm)}
.np-comments .reply a{font-size:var(--np-fs-xs);font-weight:600;color:var(--np-primary)}
.np-comments .comment-form p{margin-bottom:var(--np-space-md)}
.np-comments .comment-form input[type="text"],.np-comments .comment-form input[type="email"],.np-comments .comment-form input[type="url"],.np-comments .comment-form textarea{
  width:100%;padding:10px 12px;background:var(--np-bg);color:var(--np-text);
  border:var(--np-border-width) solid var(--np-border);border-radius:var(--np-radius);
}
.np-comments .comment-form .submit{
  background:var(--np-primary);color:var(--np-on-primary);border:0;border-radius:var(--np-radius);
  padding:12px 20px;font-weight:600;cursor:pointer;
}

/* Widget areas rendered by WordPress widgets */
.np-sidebar .widget{border-top:2px solid var(--np-heading);padding-top:12px}
.np-sidebar .widget-title,.np-sidebar .wp-block-heading{
  font-size:var(--np-fs-sm);font-weight:700;letter-spacing:var(--np-ls-label);
  text-transform:uppercase;margin-bottom:var(--np-space-md);font-family:var(--np-font-ui);
}
.np-sidebar .widget ul{list-style:none;margin:0;padding:0}
.np-sidebar .widget li{padding:9px 0;border-bottom:var(--np-border-width) solid var(--np-divider);font-size:var(--np-fs-sm)}
.np-sidebar .widget li:last-child{border-bottom:0}

/* Ad slots render real creatives in production, so drop the dashed frame */
.np-ad:has(img),.np-ad:has(iframe),.np-ad:has(ins){border-style:solid;border-color:transparent;background:transparent;padding:0}
.np-ad a{display:block}
.np-ad img{margin-inline:auto}

/* Load-more + infinite scroll */
.np-loadmore-wrap{display:flex;justify-content:center;padding-top:var(--np-space-xl)}
.np-loadmore-wrap[hidden]{display:none}

/* RTL — logical properties cover most of it; these are the exceptions. */
[dir="rtl"] .np-card--financial{border-left:0;border-right:3px solid var(--np-border);padding-left:0;padding-right:14px}
[dir="rtl"] .np-card--financial:hover{border-right-color:var(--np-primary)}
[dir="rtl"] .np-prose blockquote,[dir="rtl"] .wp-block-quote{border-left:0;border-right:3px solid var(--np-primary);padding-left:0;padding-right:var(--np-space-lg)}
[dir="rtl"] .np-pullbox{border-left:0;border-right:3px solid var(--np-heading)}
[dir="rtl"] .np-timeline{padding-left:0;padding-right:22px}
[dir="rtl"] .np-timeline::before{left:auto;right:5px}
[dir="rtl"] .np-timeline li::before{left:auto;right:-21px}
[dir="rtl"] .np-hero--classic .np-hero__side{border-left:0;border-right:var(--np-border-width) solid var(--np-border);padding-left:0;padding-right:var(--np-space-xl)}
[dir="rtl"] .np-drawer{inset:0 0 0 auto;transform:translateX(100%);border-right:0;border-left:var(--np-border-width) solid var(--np-border)}
[dir="rtl"] .np-drawer.is-open{transform:none}
[dir="rtl"] .np-ticker-move{animation-direction:reverse}
[dir="rtl"] .np-prevnext .np-next{text-align:left}

/* ==========================================================================
   18. WORDPRESS MENUS
   wp_nav_menu() emits .sub-menu; style it as the dropdown the design expects.
   ========================================================================== */
.np-nav{list-style:none;margin:0;padding:0;display:flex}
.np-nav li{position:relative;list-style:none}
.np-nav .sub-menu{
  position:absolute;left:0;top:100%;min-width:230px;margin:0;padding:8px;z-index:70;
  background:var(--np-bg);border:var(--np-border-width) solid var(--np-border);
  border-top:2px solid var(--np-primary);box-shadow:var(--np-shadow-lift);
  list-style:none;display:none;
}
.np-nav li.is-open > .sub-menu{display:block}
.np-nav .sub-menu a{display:block;padding:8px 10px;font-size:var(--np-fs-sm);border-radius:var(--np-radius);color:var(--np-text);border-bottom:0}
.np-nav .sub-menu a:hover{background:var(--np-surface);color:var(--np-primary)}
.np-nav .menu-item-has-children > a::after{
  content:"";width:7px;height:7px;margin-left:5px;opacity:.6;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}
.np-nav .current-menu-item > a,.np-nav .current-menu-parent > a{border-bottom-color:var(--np-heading)}

.np-drawer-nav{list-style:none;margin:0;padding:0}
.np-drawer-nav > li{border-bottom:var(--np-border-width) solid var(--np-divider);position:relative}
.np-drawer-nav a{display:block;padding:13px var(--np-space-md);font-weight:600;font-size:var(--np-fs-sm)}
.np-drawer-nav .sub-menu{list-style:none;margin:0;padding:0 0 8px}
.np-drawer-nav .sub-menu a{padding-left:var(--np-space-xl);font-weight:400;color:var(--np-muted)}
.np-drawer .np-acc-toggle{position:absolute;right:0;top:0;width:52px;height:48px;justify-content:center}

.np-quick{display:flex;gap:var(--np-space-md);margin:0;padding:8px 0;list-style:none}
.np-quick li{list-style:none}
.np-quick a{font-family:var(--np-font-meta);font-size:var(--np-fs-xs);color:var(--np-muted);white-space:nowrap}
.np-quick a:hover{color:var(--np-primary)}

.np-logo-img{max-height:52px;width:auto}
.np-brand--mobile .np-logo{font-size:23px}
.np-media--placeholder{display:grid;place-items:center;background:linear-gradient(145deg,var(--np-surface-2),var(--np-surface))}
.np-media__fallback{
  font-family:var(--np-font-meta);font-size:var(--np-fs-2xs);letter-spacing:var(--np-ls-label);
  text-transform:uppercase;color:var(--np-muted);
}
.np-media-link{display:block;color:inherit}
.np-share a,.np-share button{
  width:34px;height:34px;border-radius:var(--np-radius);border:var(--np-border-width) solid var(--np-border);
  background:transparent;color:var(--np-muted);cursor:pointer;display:grid;place-items:center;
  font-family:var(--np-font-meta);font-size:var(--np-fs-xs);font-weight:600;
}
.np-share a:hover,.np-share button:hover{border-color:var(--np-primary);color:var(--np-primary)}
.np-share button.is-copied{border-color:var(--np-success);color:var(--np-success)}

/* ==========================================================================
   19. SIDEBAR LIST CARDS  ("Also watch" style)
   Headline left, thumbnail right, hairline between. Built for narrow rails.
   ========================================================================== */
.np-card--sidelist{
  flex-direction:row-reverse;justify-content:space-between;gap:12px;align-items:flex-start;
  padding-bottom:var(--np-card-gap);border-bottom:var(--np-border-width) solid var(--np-divider);
}
.np-card--sidelist:last-child{border-bottom:0;padding-bottom:0}
.np-card--sidelist .np-media,
.np-card--sidelist .np-media-link{flex:0 0 84px;width:84px}
.np-card--sidelist .np-media{--np-ar:4/3}
.np-card--sidelist .np-card__body{flex:1;min-width:0;gap:5px}
.np-card--sidelist .np-card__title{font-size:.9375rem;font-weight:600;line-height:1.35}
.np-card--sidelist .np-meta{font-size:var(--np-fs-2xs)}

/* Widget shell used by the post-list widget and the shortcode */
.np-listwidget__head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:2px solid var(--np-heading);padding-bottom:9px;margin-bottom:var(--np-space-md);
}
.np-listwidget__head h3{
  font-size:var(--np-fs-sm);font-weight:700;letter-spacing:var(--np-ls-label);
  text-transform:uppercase;font-family:var(--np-font-ui);display:flex;align-items:center;gap:8px;
}
.np-listwidget__head h3::before{content:"";width:5px;height:16px;background:var(--np-primary);flex:none}
.np-listwidget__more{
  font-family:var(--np-font-meta);font-size:var(--np-fs-2xs);font-weight:600;
  letter-spacing:var(--np-ls-label);text-transform:uppercase;color:var(--np-muted);white-space:nowrap;
}
.np-listwidget__more:hover{color:var(--np-primary)}
.np-listwidget__body{display:flex;flex-direction:column;gap:var(--np-card-gap)}

/* ==========================================================================
   20. FOOTER: five columns, admin-assigned menus, inline layout
   ========================================================================== */
.np-footer-top{
  display:grid;gap:var(--np-space-xl);padding-block:var(--np-space-2xl);
  grid-template-columns:repeat(var(--np-footer-cols,5),minmax(0,1fr));
}
.np-footer-col{min-width:0}
.np-footer-col h3{
  font-size:var(--np-fs-xs);letter-spacing:var(--np-ls-label);text-transform:uppercase;
  margin-bottom:var(--np-space-md);font-family:var(--np-font-ui);
}

/* Inline footer: one row of links, centred, with the brand above */
.np-footer--inline .np-footer-inline{
  display:flex;flex-direction:column;align-items:center;gap:var(--np-space-lg);
  padding-block:var(--np-space-2xl);text-align:center;
}
.np-footer--inline .np-footer-inline p{color:var(--np-muted);font-size:var(--np-fs-sm);max-width:64ch;margin:0}
.np-menu-inline{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--np-space-lg);
  list-style:none;margin:0;padding:0;
}
.np-menu-inline li{list-style:none}
.np-menu-inline a{
  font-family:var(--np-font-ui);font-size:var(--np-fs-sm);font-weight:600;color:var(--np-heading);
}
.np-menu-inline a:hover{color:var(--np-primary)}
.np-menu-inline .sub-menu{display:none}
.np-footer-bottom .np-menu-inline a{font-weight:400;font-size:var(--np-fs-xs);color:var(--np-muted)}
.np-footer-bottom .np-menu-inline a:hover{color:var(--np-primary)}

/* ==========================================================================
   21. ADDITIONAL HERO LAYOUTS
   ========================================================================== */
/* Hero 06 - Overlay: full-bleed cover, headline on the image */
.np-hero--overlay .np-hero__cover{
  position:relative;isolation:isolate;border-radius:var(--np-radius);overflow:hidden;
  min-height:clamp(320px,46vw,560px);display:flex;align-items:flex-end;
}
.np-hero--overlay .np-hero__cover .np-media,
.np-hero--overlay .np-hero__cover .np-media-link{position:absolute;inset:0;width:100%;height:100%}
.np-hero--overlay .np-hero__cover .np-media{aspect-ratio:auto;border-radius:0}
.np-hero--overlay .np-hero__cover::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,8,10,0) 35%,rgba(8,8,10,.85) 100%);
}
.np-hero--overlay .np-hero__caption{position:relative;z-index:2;padding:var(--np-space-xl);max-width:820px}
.np-hero--overlay .np-hero__caption .np-card__title,
.np-hero--overlay .np-hero__caption .np-card__excerpt{color:#fff}
.np-hero--overlay .np-hero__caption .np-card__title{font-size:var(--np-fs-hero)}
.np-hero--overlay .np-hero__caption .np-meta{color:rgba(255,255,255,.78)}
.np-hero--overlay .np-hero__below{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--np-grid-gap);margin-top:var(--np-grid-gap);
}

/* Hero 07 - Mosaic: two features and a three-up rail */
.np-hero--mosaic .np-hero__mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--np-grid-gap)}
.np-hero--mosaic .np-hero__mosaic > *:nth-child(1){grid-column:span 4}
.np-hero--mosaic .np-hero__mosaic > *:nth-child(2){grid-column:span 2}
.np-hero--mosaic .np-hero__mosaic > *:nth-child(n+3){grid-column:span 2}

/* Hero 08 - Split: two equal leads over a shared rule */
.np-hero--split .np-hero__pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--np-space-xl);
  padding-bottom:var(--np-space-lg);border-bottom:2px solid var(--np-heading);
}
.np-hero--split .np-hero__pair > *:first-child{
  padding-right:var(--np-space-xl);border-right:var(--np-border-width) solid var(--np-border);
}
.np-hero--split .np-hero__tail{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--np-grid-gap);margin-top:var(--np-space-lg);
}

/* Hero 09 - Carousel: swipeable full-width stories */
.np-hero--carousel .np-hero__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(88%,860px);gap:var(--np-grid-gap);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-bottom:var(--np-space-sm);
}
.np-hero--carousel .np-hero__track::-webkit-scrollbar{display:none}
.np-hero--carousel .np-hero__track > *{scroll-snap-align:start}
.np-hero__controls{display:flex;gap:8px;justify-content:flex-end;margin-top:var(--np-space-sm)}
.np-hero__controls button{
  width:40px;height:40px;border-radius:var(--np-radius);cursor:pointer;
  border:var(--np-border-width) solid var(--np-border);background:var(--np-bg);color:var(--np-heading);
}
.np-hero__controls button:hover{border-color:var(--np-primary);color:var(--np-primary)}

/* ==========================================================================
   22. ADDITIONAL HOMEPAGE SECTIONS
   ========================================================================== */
/* Spotlight: one feature, ranked list beside it */
.np-spotlight{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--np-space-xl)}
.np-spotlight__list{border-left:var(--np-border-width) solid var(--np-border);padding-left:var(--np-space-xl)}

/* Category tabs */
.np-tabs{display:flex;gap:4px;border-bottom:var(--np-border-width) solid var(--np-border);margin-bottom:var(--np-space-lg);overflow-x:auto;scrollbar-width:none}
.np-tabs::-webkit-scrollbar{display:none}
.np-tabs button{
  background:transparent;border:0;border-bottom:2px solid transparent;padding:10px 14px;cursor:pointer;
  font-family:var(--np-font-ui);font-size:var(--np-fs-sm);font-weight:600;color:var(--np-muted);white-space:nowrap;
}
.np-tabs button:hover{color:var(--np-heading)}
.np-tabs button[aria-selected="true"]{color:var(--np-primary);border-bottom-color:var(--np-primary)}
.np-tabpanel[hidden]{display:none}

/* Horizontal carousel section */
.np-carousel{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,var(--np-carousel-w,26%));
  gap:var(--np-grid-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-bottom:var(--np-space-sm);
}
.np-carousel::-webkit-scrollbar{display:none}
.np-carousel > *{scroll-snap-align:start}

/* In pictures */
.np-pictures{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--np-grid-gap)}
.np-pictures > *:first-child{grid-column:span 2;grid-row:span 2}

/* Opinion */
.np-opinion{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--np-grid-gap)}
.np-opinion__item{display:flex;gap:14px;align-items:flex-start;padding-bottom:var(--np-card-gap);border-bottom:var(--np-border-width) solid var(--np-divider)}
.np-opinion__item .np-avatar{width:52px;height:52px;border-radius:50%;flex:none}
.np-opinion__item h3{font-family:var(--np-font-editorial);font-size:1.05rem;font-weight:600;line-height:1.35}
.np-opinion__who{font-family:var(--np-font-meta);font-size:var(--np-fs-xs);color:var(--np-primary);font-weight:600;display:block;margin-bottom:4px}

/* Author cards */
.np-authors{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--np-grid-gap)}
.np-author-card{
  text-align:center;padding:var(--np-space-lg);border:var(--np-border-width) solid var(--np-border);
  border-radius:var(--np-radius);background:var(--np-card);
}
.np-author-card img,.np-author-card .avatar{border-radius:50%;margin:0 auto 12px}
.np-author-card strong{display:block;color:var(--np-heading)}
.np-author-card span{font-size:var(--np-fs-xs);color:var(--np-muted)}

/* Topic chips */
.np-topics{display:flex;flex-wrap:wrap;gap:10px}
.np-topic{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:100px;
  border:var(--np-border-width) solid var(--np-border);font-size:var(--np-fs-sm);color:var(--np-text);background:var(--np-card);
}
.np-topic:hover{border-color:var(--np-primary);color:var(--np-primary)}
.np-topic b{font-family:var(--np-font-mono);font-size:var(--np-fs-2xs);color:var(--np-muted);font-weight:500}

/* Call-to-action banner (replaces the old newsletter block) */
.np-cta{
  background:var(--np-inverse);color:var(--np-on-inverse);border-radius:var(--np-radius-lg);
  padding:var(--np-space-2xl);display:grid;grid-template-columns:1fr auto;gap:var(--np-space-xl);align-items:center;
}
.np-cta h2{color:var(--np-on-inverse);font-size:var(--np-fs-h2)}
.np-cta p{color:var(--np-on-inverse);opacity:.72;margin:10px 0 0;font-size:var(--np-fs-sm);max-width:56ch}
.np-cta .np-btn{background:var(--np-primary);white-space:nowrap}

/* ==========================================================================
   23. RESPONSIVE FOR THE NEW COMPONENTS
   ========================================================================== */
@media (max-width:1024px){
  .np-footer-top,.np-footer-top--wide-first{grid-template-columns:repeat(3,minmax(0,1fr))}
  .np-spotlight{grid-template-columns:minmax(0,1fr)}
  .np-spotlight__list{border-left:0;padding-left:0;border-top:var(--np-border-width) solid var(--np-border);padding-top:var(--np-space-lg)}
  .np-hero--mosaic .np-hero__mosaic > *:nth-child(1){grid-column:span 6}
  .np-hero--mosaic .np-hero__mosaic > *:nth-child(2){grid-column:span 6}
  .np-hero--mosaic .np-hero__mosaic > *:nth-child(n+3){grid-column:span 2}
  .np-hero--split .np-hero__tail{grid-template-columns:repeat(2,1fr)}
  .np-pictures{grid-template-columns:repeat(2,1fr)}
  .np-opinion,.np-authors{grid-template-columns:repeat(2,1fr)}
  .np-hero--overlay .np-hero__below{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .np-footer-top,.np-footer-top--wide-first{grid-template-columns:repeat(2,minmax(0,1fr))}
  .np-footer-col--about{grid-column:1 / -1}
  .np-hero--split .np-hero__pair{grid-template-columns:1fr;gap:var(--np-space-lg)}
  .np-hero--split .np-hero__pair > *:first-child{
    padding-right:0;border-right:0;padding-bottom:var(--np-space-lg);
    border-bottom:var(--np-border-width) solid var(--np-border);
  }
  .np-hero--split .np-hero__tail,
  .np-hero--overlay .np-hero__below{grid-template-columns:1fr}
  .np-hero--mosaic .np-hero__mosaic > *{grid-column:span 6 !important}
  .np-hero--overlay .np-hero__caption{padding:var(--np-space-md)}
  .np-pictures{grid-template-columns:1fr}
  .np-pictures > *:first-child{grid-column:span 1;grid-row:span 1}
  .np-opinion,.np-authors{grid-template-columns:1fr}
  .np-carousel{grid-auto-columns:78%}
  .np-hero--carousel .np-hero__track{grid-auto-columns:88%}
  .np-cta{grid-template-columns:1fr;padding:var(--np-space-xl);text-align:left}
  .np-menu-inline{gap:var(--np-space-md);justify-content:flex-start}
}
@media (max-width:540px){
  .np-footer-top,.np-footer-top--wide-first{grid-template-columns:1fr}
  .np-card--sidelist .np-media,.np-card--sidelist .np-media-link{flex-basis:76px;width:76px}
}

/* ==========================================================================
   24. MOBILE DRAWER - hardened
   The drawer no longer relies on the [hidden] attribute. It is always in the
   DOM, moved off-canvas and made non-interactive, so a failed script or a
   plugin that strips attributes cannot leave it stuck open or invisible.
   ========================================================================== */
.np-drawer{
  position:fixed;inset:0 auto 0 0;height:100dvh;width:min(340px,86vw);
  background:var(--np-bg);z-index:1000;overflow-y:auto;
  border-right:var(--np-border-width) solid var(--np-border);
  transform:translateX(-100%);visibility:hidden;
  transition:transform 220ms cubic-bezier(.2,.6,.3,1),visibility 0s linear 220ms;
}
.np-drawer[hidden]{display:block} /* never let the attribute hide it outright */
.np-drawer.is-open{transform:none;visibility:visible;transition-delay:0s}
.np-drawer-scrim{position:fixed;inset:0;background:rgba(10,10,12,.5);z-index:999;opacity:0;visibility:hidden;transition:opacity 180ms linear,visibility 0s linear 180ms}
.np-drawer-scrim.is-open{opacity:1;visibility:visible;transition-delay:0s}

/* The bar itself: shown on phones, hidden the moment the full nav fits. */
.np-header .np-mobilebar{display:none}
@media (max-width:768px){
  .np-header .np-mobilebar{display:flex;align-items:center;gap:8px;min-height:58px}
  .np-header .np-hrow--brand,
  .np-header .np-hrow--nav,
  .np-header .np-hrow--quick{display:none}
}
@media (max-width:768px){
  /* An open drawer must clear the WordPress admin bar. */
  .admin-bar .np-drawer{top:46px;height:calc(100dvh - 46px)}
}
.np-drawer-empty{padding:var(--np-space-md);color:var(--np-muted);font-size:var(--np-fs-sm)}