/* dpdpa.support /news/: DPDPA News, a standalone newspaper front page with its own utility bar, masthead, section nav and footer.
   Loads after site.css, so every colour comes from the site tokens (light and dark). The main site header, promo ticker and footer are not used on this page.
   Headlines: Source Serif 4 (600 and 700 are the weights we ship). Body and labels: IBM Plex Sans.
   Motion is interface only and is switched off under prefers-reduced-motion (see the block at the end). Red is used only on the buttons. */
.np { --np-rule: var(--line-strong); --np-serif: var(--font-serif); --np-blue: #1A2B6D; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--font-sans); }
:root[data-theme="dark"] .np { --np-blue: #8FA3F5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .np { --np-blue: #8FA3F5; } }
.np a { color: var(--ink); text-decoration: none; }
.np a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.np h1, .np h2, .np h3 { text-wrap: pretty; }
.np-mast, .np-nav, .np-ticker { box-sizing: border-box; }
.np-wrap { padding-bottom: 8px; }
.np-meta, .np-kick { margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.4; }
.np-kick { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin: 0 0 6px; }
.np-note { font-size: 0.88rem; color: var(--muted); margin: 0 0 14px; max-width: 60ch; }
.np-h { font: 700 0.98rem/1.2 var(--np-serif); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; padding: 8px 0; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line); }
.np-sub { font: 700 0.8rem/1.2 var(--np-serif); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.np-credit { margin: 4px 0 0; font-size: 0.68rem; line-height: 1.3; color: var(--muted); text-align: right; letter-spacing: 0.02em; }
.np-th { display: block; background: var(--bg-alt); }
.np-th img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.np-dek { margin: 0 0 6px; font-size: 0.92rem; line-height: 1.45; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* ---------- utility bar ---------- */
.np-util { border-bottom: 1px solid var(--line); background: var(--bg); }
.np-util-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; gap: 0 12px; font-size: 0.78rem; }
.np-search { justify-self: start; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px; color: var(--ink); border-radius: 6px; }
.np-search:hover { background: var(--bg-alt); text-decoration: none !important; }
.np-util-links { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.np-util-links a { color: var(--ink); font-weight: 500; }
.np-util-r { justify-self: end; display: flex; align-items: center; gap: 6px; }
.np .np-theme { width: 36px; height: 36px; color: var(--ink); }
.np .np-getkit { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 4px; background: var(--accent); color: #fff; font-weight: 600; font-size: 0.78rem; white-space: nowrap; }
.np .np-getkit:hover { background: var(--accent-dark); color: #fff; text-decoration: none; }
@media (max-width: 639px) {
  .np-util-in { grid-template-columns: 1fr auto; grid-template-areas: "s r" "l l"; }
  .np-search { grid-area: s; } .np-util-r { grid-area: r; }
  .np-util-links { grid-area: l; justify-content: center; padding: 0 0 8px; border-top: 0; }
}

/* ---------- masthead ---------- */
.np-mast { padding: 22px 0 14px; }
.np-mast-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 20px; }
.np-mast-l, .np-mast-r { margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 0.82rem; color: var(--text); }
.np-mast-r { text-align: right; align-items: flex-end; }
.np-date { font-weight: 600; color: var(--ink); }
.np-ed, .np-stamp { color: var(--muted); font-size: 0.76rem; }
.np-keydate { font-weight: 600; }
.np-mast-c { text-align: center; }
.np-title { font: 700 clamp(2.5rem, 6.4vw, 4.6rem)/1 var(--np-serif); letter-spacing: -0.02em; color: var(--ink); margin: 0; white-space: nowrap; }
.np-tag { margin: 8px auto 0; width: min-content; min-width: 100%; font-size: 0.74rem; line-height: 1.35; color: var(--muted); }
@media (max-width: 899px) { .np-tag { width: auto; max-width: 30em; } }
@media (max-width: 699px) {
  .np-mast { padding-top: 16px; }
  .np-mast-in { grid-template-columns: 1fr 1fr; grid-template-areas: "c c" "l r"; gap: 12px 12px; }
  .np-mast-c { grid-area: c; } .np-mast-l { grid-area: l; } .np-mast-r { grid-area: r; }
}

/* ---------- section nav (one row; Toolkit steps is a dropdown) ---------- */
/* The rules sit inside the same .wrap column as the masthead and content (drawn on .np-nav-in, inset by the gutter), never edge to edge. */
.np-nav { position: relative; z-index: 30; background: var(--bg); }
.np-nav-in { position: relative; }
.np-nav-in::before, .np-nav-in::after { content: ''; position: absolute; left: var(--gutter); right: var(--gutter); pointer-events: none; }
.np-nav-in::before { top: 0; border-top: 1px solid var(--ink); }
.np-nav-in::after { bottom: 0; border-bottom: 4px double var(--ink); }
.np-nav-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; }
.np-nav-ul > li > a, .np-dd > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); white-space: nowrap; cursor: pointer; }
.np-nav-ul > li > a:hover, .np-dd > summary:hover, .np-dd[open] > summary { background: var(--bg-alt); text-decoration: none; }
.np-dd > summary { list-style: none; }
.np-dd > summary::-webkit-details-marker { display: none; }
.np-dd > summary::after { content: '\25BE'; font-size: 0.9em; }
.np-dd[open] > summary::after { content: '\25B4'; }
.np-dd-list { position: absolute; top: 100%; right: var(--gutter); z-index: 40; list-style: none; margin: 0; padding: 8px 6px; width: 420px; max-width: calc(100vw - 2 * var(--gutter)); columns: 2; column-gap: 8px; background: var(--surface); border: 1px solid var(--np-rule); box-shadow: var(--shadow); }
.np-dd-list li { break-inside: avoid; }
.np-dd-list a { display: block; padding: 7px 10px; font-size: 0.86rem; line-height: 1.3; color: var(--ink); }
.np-dd-list a:hover { background: var(--bg-alt); text-decoration: none; }
.np-dd-n { display: inline-block; min-width: 1.7em; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
@media (max-width: 599px) {
  .np-nav-ul { justify-content: flex-start; margin: 0 -10px; }
  .np-nav-ul > li > a, .np-dd > summary { min-height: 34px; padding: 0 9px; font-size: 0.7rem; }
  .np-dd-list { left: var(--gutter); width: auto; columns: 1; }
}

/* ---------- slim ticker ---------- */
.np-ticker { display: flex; align-items: center; gap: 12px; height: 36px; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 0 auto; padding: 0 12px; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.np-tk-label { flex: none; font: 700 0.72rem/1 var(--np-serif); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.np-tk-view { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.np-tk-view::-webkit-scrollbar { display: none; }
.np-tk-track { display: flex; width: max-content; }
.np-tk-list { display: flex; flex: none; list-style: none; margin: 0; padding: 0; }
.np-tk-list + .np-tk-list { display: none; }
.np-tk-list li { flex: none; white-space: nowrap; font-size: 0.82rem; line-height: 36px; }
.np-tk-list li::after { content: ''; display: inline-block; width: 1px; height: 12px; background: var(--np-rule); margin: 0 18px; vertical-align: middle; }
.np-tk-m { color: var(--muted); font-size: 0.76rem; margin-right: 6px; }
.np-tk-t { color: var(--ink); font-weight: 600; }
.np-pause, .np-btn { font: 600 0.74rem/1 var(--font-sans); padding: 0 10px; min-height: 28px; border: 1px solid var(--np-rule); background: var(--surface); color: var(--ink); border-radius: 4px; cursor: pointer; white-space: nowrap; }
.np-pause:hover, .np-btn:hover { background: var(--bg-alt); }
.np-pause { flex: none; }
html:not(.js) .np-pause, html:not(.js) .np-ctl, html:not(.js) .np-pg-btns { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .np-tk-view { overflow: hidden; }
  .js .np-tk-list + .np-tk-list { display: flex; }
  .js .np-tk-track { animation: np-scroll var(--np-tk-dur, 160s) linear infinite; will-change: transform; }
  .np-ticker:hover .np-tk-track, .np-ticker:has(:focus-visible) .np-tk-track, .np-ticker.is-paused .np-tk-track { animation-play-state: paused; }
}
@keyframes np-scroll { to { transform: translateX(-50%); } }
/* under 768px: no moving ticker; a static list of the 3 newest headlines (the first three of the first list) */
@media (max-width: 767px) {
  .np-ticker { height: auto; flex-wrap: wrap; align-items: flex-start; gap: 4px 12px; padding-top: 8px; padding-bottom: 8px; }
  .np-tk-label { line-height: 1.4; }
  .np-tk-view { flex: 1 1 100%; overflow: visible; }
  .np-tk-track, .js .np-tk-track { display: block; width: auto; animation: none !important; transform: none !important; }
  .np-tk-list { display: block; }
  .np-tk-list + .np-tk-list, .js .np-tk-list + .np-tk-list { display: none; }
  .np-tk-list li:nth-child(n+4) { display: none; }
  .np-tk-list li { white-space: normal; line-height: 1.4; padding: 4px 0; }
  .np-tk-list li + li { border-top: 1px solid var(--line); }
  .np-tk-list li::after { display: none; }
  .np-tk-m { display: block; margin: 0; }
  .np-pause[data-pause="ticker"], html:not(.js) .np-pause[data-pause="ticker"] { display: none; }
}

/* ---------- front page: boxed top stories and the right rail ---------- */
.np-front { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 0; padding: 24px 0 8px; }
@media (min-width: 1000px) {
  .np-front { grid-template-columns: minmax(0, 1fr) 336px; gap: 0; }
  .np-top { margin-right: 24px; }
  .np-rail { padding-left: 24px; border-left: 1px solid var(--np-rule); }
}
.np-top { border: 1px solid var(--np-rule); padding: 18px 24px 22px; min-width: 0; }
.np-topk { margin: 0 0 18px; font: 600 0.72rem/1.2 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; text-align: center; color: var(--muted); }
.np-topk::after { content: ''; display: block; width: 36px; height: 3px; margin: 8px auto 0; background: var(--np-blue); }

/* lead story: text left, photo right */
.np-slides { display: grid; touch-action: pan-y; }
.np-slide { grid-area: 1 / 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.np-slides.is-js .np-slide { opacity: 0; visibility: hidden; transition: opacity 0.7s ease, visibility 0s linear 0.7s; }
.np-slides.is-js .np-slide.is-on { opacity: 1; visibility: visible; transition: opacity 0.7s ease; }
.np-slides:not(.is-js) .np-slide:not(:first-child) { visibility: hidden; }
.np-slide-f { margin: 0; min-width: 0; }
.np-slide-img { display: block; background: var(--bg-alt); }
.np-slide-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.np-lead-h { font: 700 clamp(1.6rem, 2.6vw, 2.1rem)/1.14 var(--np-serif); letter-spacing: -0.01em; margin: 0 0 10px; overflow-wrap: break-word; }
.np-lead-h a { color: var(--ink); }
.np-sum { margin: 0 0 8px; font-size: 1rem; line-height: 1.5; color: var(--text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
@media (min-width: 700px) {
  .np-slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 0 24px; }
  .np-slide-t { padding-right: 0; }
}
.np-ctl { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.np-bar { flex: 1; height: 2px; background: var(--line); min-width: 40px; }
.np-bar-i { display: block; height: 100%; width: 0; background: var(--ink); }
.np-count { font-size: 0.78rem; color: var(--muted); min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .np-bar-i.run { animation: np-fill 8s linear forwards; }
  .np-lead:hover .np-bar-i, .np-lead:has(:focus-visible) .np-bar-i, .np-lead.is-paused .np-bar-i { animation-play-state: paused; }
}
@keyframes np-fill { to { width: 100%; } }

/* more to read: two columns, headline left, small square photo right */
.np-more { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--np-rule); }
.np-more-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.np-story { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.np-story:first-child { border-top: 0; padding-top: 4px; }
.np-story h3 { font: 700 1.08rem/1.22 var(--np-serif); margin: 0 0 5px; overflow-wrap: break-word; }
.np-story .np-dek { font-size: 0.86rem; -webkit-line-clamp: 2; line-clamp: 2; }
.np-sq { align-self: start; }
.np-sq img { aspect-ratio: 1 / 1; }
@media (min-width: 700px) {
  .np-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .np-story { grid-template-columns: minmax(0, 1fr) 104px; }
  .np-story:nth-child(2) { border-top: 0; padding-top: 4px; }
  .np-story:nth-child(even) { position: relative; }
  .np-story:nth-child(even)::before { content: ''; position: absolute; left: -14px; top: 0; bottom: 0; width: 1px; background: var(--line); }
}

/* right rail: advertisement, feature, two-up strip */
.np-rail { min-width: 0; }
.np-ad-tag, .np-topk { max-width: none; }
.np-ad-tag { margin: 0 0 6px; font-size: 0.7rem; font-variant: all-small-caps; letter-spacing: 0.14em; text-transform: lowercase; color: var(--muted); text-align: center; display: flex; align-items: center; gap: 10px; }
.np-ad-tag::before, .np-ad-tag::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.np-ad-box { padding: 20px 20px 18px; border: 1px solid var(--np-rule); background: var(--bg-alt); text-align: center; }
.np-ad-rail { margin: 0 0 24px; }
.np-ad-h { font: 700 1.5rem/1.15 var(--np-serif); color: var(--ink); margin: 0 0 8px; }
.np-ad-d { margin: 0 0 12px; font-size: 0.92rem; color: var(--text); }
.np-ad-p { list-style: none; margin: 0 0 12px; padding: 10px 0; border-top: 1px solid var(--np-rule); border-bottom: 1px solid var(--np-rule); font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.np-ad-p li + li { margin-top: 4px; }
.np-ad-a { margin: 0 0 14px; font-size: 0.84rem; color: var(--muted); }
.np-ad-a strong { color: var(--ink); font-weight: 600; }
.np .btn-red, .np .btn-red:hover { color: #fff; text-decoration: none; }
.np-ad .btn { width: 100%; justify-content: center; }
.np-ad-compact { margin: 40px 0 0; }
@media (min-width: 860px) {
  .np-ad-compact .np-ad-box { display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: center; gap: 4px 28px; text-align: left; padding: 20px 28px; }
  .np-ad-compact .np-ad-h { grid-column: 1; margin: 0; }
  .np-ad-compact .np-ad-d { grid-column: 1; margin: 0; }
  .np-ad-compact .np-ad-p { grid-column: 2; grid-row: 1 / 3; margin: 0; padding: 8px 0; }
  .np-ad-compact .np-ad-a { grid-column: 2; grid-row: 3; margin: 6px 0 0; }
  .np-ad-compact .btn { grid-column: 3; grid-row: 1 / 3; width: auto; }
}

.np-feature { margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--np-rule); }
.np-feat h3 { font: 700 1.3rem/1.2 var(--np-serif); margin: 4px 0 6px; overflow-wrap: break-word; }
.np-feat .np-kick { margin-top: 10px; }
.np-feat .np-dek { font-size: 0.9rem; }

.np-pg-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.np-pg-h .np-sub { margin: 0; }
.np-pg-btns { display: flex; gap: 6px; }
.np-pg-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--np-rule); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.np-pg-btn:hover:not(:disabled) { background: var(--bg-alt); }
.np-pg-btn:disabled { opacity: 0.35; cursor: default; }
.np-pg-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.np-pg-list::-webkit-scrollbar { display: none; }
.np-pg-i { flex: 0 0 calc((100% - 16px) / 2); min-width: 0; scroll-snap-align: start; }
.np-pg-i .np-kick { margin: 8px 0 3px; font-size: 0.66rem; }
.np-pg-i h3 { font: 700 0.95rem/1.25 var(--np-serif); margin: 0; overflow-wrap: break-word; }

/* briefs, per-section "Read elsewhere" lists */
.np-briefs { list-style: none; margin: 0; padding: 0; }
.np-brief { padding: 11px 0; border-bottom: 1px solid var(--line); }
.np-brief:last-child { border-bottom: 0; }
.np-brief-a { display: block; margin-top: 3px; font: 600 1rem/1.3 var(--np-serif); color: var(--ink); overflow-wrap: break-word; }
.np-re { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; color: var(--ink); }
.np-ext { margin-left: 4px; font-size: 0.8em; color: var(--muted); }
.np-rel { margin: 5px 0 0; font-size: 0.8rem; color: var(--muted); }
.np-rel a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--np-rule); text-underline-offset: 3px; }

/* our view strip */
.np-ourview { margin-top: 32px; }
.np-ov-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.np-ov-list li { padding: 12px 0; border-top: 1px solid var(--line); }
.np-ov-list li:first-child { border-top: 0; }
.np-ov-t { display: block; font: 700 1.05rem/1.25 var(--np-serif); margin-bottom: 5px; }
.np-ov-h { display: block; font-size: 0.82rem; color: var(--muted); }
@media (min-width: 700px) {
  .np-ov-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-ov-list li { padding: 4px 20px 14px; border-top: 0; border-left: 1px solid var(--line); }
  .np-ov-list li:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (min-width: 1000px) {
  .np-ov-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .np-ov-list li:nth-child(2n+1) { border-left: 1px solid var(--line); padding-left: 20px; }
  .np-ov-list li:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}

/* below the fold: section blocks beside a Briefs column */
.np-below { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.np-briefs-box { order: -1; margin-top: 32px; }
@media (min-width: 1000px) {
  .np-below { grid-template-columns: minmax(0, 1fr) 300px; }
  .np-briefs-box { order: 0; margin-top: 36px; margin-left: 32px; padding-left: 24px; border-left: 1px solid var(--np-rule); align-self: start; position: sticky; top: 16px; }
}
.np-section { margin-top: 36px; scroll-margin-top: 16px; }
.np-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line); padding: 10px 0; margin-bottom: 16px; }
.np-sec-h h2 { font: 700 clamp(1.3rem, 2.4vw, 1.7rem)/1.15 var(--np-serif); color: var(--ink); margin: 0; }
.np-sec-tk { margin: 0; font-size: 0.82rem; font-weight: 600; }
.np-sec-tk a { text-decoration: underline; text-decoration-color: var(--np-rule); text-underline-offset: 3px; }
.np-sec-tk a + a { margin-left: 14px; }
.np-sec-body { display: grid; gap: 18px; }
.np-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.np-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.np-card:last-child { border-bottom: 0; }
.np-card .np-th img { aspect-ratio: 4 / 3; }
.np-card h3 { font: 700 1.05rem/1.22 var(--np-serif); margin: 3px 0 4px; overflow-wrap: break-word; }
.np-card .np-dek { font-size: 0.86rem; }
.np-sec-news { min-width: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.np-sec-news .np-briefs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
.np-sec-news .np-brief { padding: 8px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) {
  .np-cards { gap: 22px 0; }
  .np-cards.np-c2, .np-cards.np-c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-card { display: block; padding: 0 18px 4px; border-bottom: 0; border-left: 1px solid var(--line); }
  .np-card:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .np-cards.np-c2 .np-card:nth-child(2n) { padding-right: 0; }
  .np-card .np-th img { aspect-ratio: 16 / 9; }
  .np-card h3 { font-size: 1.12rem; margin: 10px 0 6px; }
  .np-cards.np-c1 { grid-template-columns: minmax(0, 1fr); }
  .np-cards.np-c1 .np-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 0; border-left: 0; }
  .np-cards.np-c1 .np-card h3 { margin-top: 0; }
  .np-sec-news .np-briefs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .np-cards.np-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .np-cards.np-c3 .np-card:nth-child(2n+1) { border-left: 1px solid var(--line); padding-left: 16px; }
  .np-cards.np-c3 .np-card:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .np-cards.np-c3 .np-card { padding: 0 16px 4px; }
  .np-cards.np-c3 .np-card h3 { font-size: 1.02rem; }
  .np-sec-news .np-briefs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* free tools, key dates */
.np-free, .np-dates { margin-top: 36px; scroll-margin-top: 16px; }
.np-free-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.np-free-list a { font: 700 1.15rem/1.25 var(--np-serif); text-decoration: underline; text-decoration-color: var(--np-rule); text-underline-offset: 4px; }
.np-free-list p { margin: 6px 0 0; font-size: 0.92rem; color: var(--text); max-width: 46ch; }
.np-dates-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; }
.np-dates-list time { display: block; font: 700 1.35rem/1.2 var(--np-serif); color: var(--ink); }
.np-dates-list span { font-size: 0.92rem; color: var(--text); }
@media (min-width: 700px) {
  .np-free-list, .np-dates-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .np-free-list li + li { padding-left: 24px; border-left: 1px solid var(--line); }
  .np-dates-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .np-dates-list li { padding: 0 20px; border-left: 1px solid var(--line); }
  .np-dates-list li:first-child { padding-left: 0; border-left: 0; }
}

/* archive and small print */
.np-archive { margin-top: 36px; border-top: 3px solid var(--ink); }
.np-archive summary { cursor: pointer; padding: 12px 0; font: 700 0.98rem/1.2 var(--np-serif); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.np-archive-list { margin: 0; padding: 0; list-style: none; columns: 1; font-size: 0.86rem; }
.np-archive-list li { padding: 7px 0; border-top: 1px solid var(--line); break-inside: avoid; }
.np-archive-list time { color: var(--muted); margin-right: 6px; }
.np-ar-s { color: var(--muted); margin-right: 6px; }
.np-ar-s::after { content: ':'; }
@media (min-width: 1000px) { .np-archive-list { columns: 2; column-gap: 40px; } }
.np-fine { margin: 28px 0 0; font-size: 0.84rem; color: var(--muted); max-width: 70ch; }
.np-fine a { text-decoration: underline; }
.np .art-disclaimer { margin-top: 10px; font-size: 0.88rem; color: var(--muted); }
.np .art-disclaimer strong { color: var(--ink); }

/* sections ease in as they scroll into view (added by news.js only when motion is allowed) */
.np-anim .np-rv { opacity: 0; transform: translateY(14px); }
.np-anim .np-rv.is-in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2, 0, 0, 1); transition-delay: var(--d, 0ms); }

/* reduced motion: nothing moves by itself; the Pause controls have nothing to pause */
@media (prefers-reduced-motion: reduce) {
  .np-tk-track { animation: none !important; transform: none !important; }
  .np-tk-view { overflow-x: auto !important; }
  .np-tk-list + .np-tk-list { display: none !important; }
  .np-bar-i { animation: none !important; width: 0 !important; }
  .np-pause { display: none !important; }
  .np-slides.is-js .np-slide, .np-slides.is-js .np-slide.is-on { transition: none !important; }
  .np-rv, .np-rv.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .np-pg-list { scroll-behavior: auto; }
}

/* Watch slot (rail): click-to-load, fixed 16:9 box so the player never shifts the page */
.np-watch { margin: 0 0 24px; }
.np-watch-box { position: relative; aspect-ratio: 16 / 9; background: #0E1638; border-radius: 8px; overflow: hidden; }
.np-watch-card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; }
.np-watch-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.np-watch-play { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--red-mark, #D41317); color: #fff; box-shadow: 0 6px 18px -6px rgba(212,19,23,.6), 0 0 0 6px rgba(255,255,255,.85); }
.np-watch-play svg { width: 26px; height: 26px; margin-left: 3px; }
.np-watch-note { position: absolute; left: 12px; right: 12px; bottom: 8px; font-size: 0.72rem; line-height: 1.3; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); text-align: center; }
.np-watch-card:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.np-watch-box .yt-embed { position: absolute; inset: 0; border-radius: 0; }
.np-watch-box .yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* YouTube box (rail, directly below the offer box): fixed 16:9, always rendered; "soon" is a static link card, "live" loads the player only after a click */
.np-live { margin: 0 0 24px; }
.np-live-box { position: relative; aspect-ratio: 16 / 9; background: #0E1638; border-radius: 8px; overflow: hidden;  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.np-live-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 16px; text-align: center; color: #fff; text-decoration: none; }
.np .np-live-card, .np .np-live-card:hover { color: #fff; text-decoration: none; }
.np-live-card:hover .np-live-t { text-decoration: underline; text-underline-offset: 3px; }
.np-live-pill { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 4px; background: var(--accent); color: #fff; font: 700 0.7rem/1.2 var(--font-sans); letter-spacing: 0.1em; }
.np-live-mark { display: block; width: 34px; height: 32px; }
.np-live-t { font: 700 1.1rem/1.2 var(--np-serif); color: #fff; }
.np-live-s { font-size: 0.82rem; line-height: 1.3; color: #C9D2F5; }
.np-live-card:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.np-live-box .yt-embed { position: absolute; inset: 0; border-radius: 0; }
.np-live-box .yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.np-live-card .np-watch-play { margin: 2px 0; width: 48px; height: 48px; }

/* ======================================================================================================================================
   Phone layout (under 768px). The same page, re-ordered and simplified: a sticky one-row top bar with a menu sheet, a date row, a boxed
   "Top stories" block (lead + 2), the offer and YouTube boxes, "In case you missed it", "More news", then one story per section, the briefs.
   Airy on purpose: 20px gutters, 24-48px between blocks, 16-20px between rows, 72px thumbnails, full-width pictures only for the lead and the
   "More news" story, summaries only on those two. Desktop (768px and up) never sees these rules: the phone-only parts are display:none there.
   ====================================================================================================================================== */
.np-mbar, .np-sheet, .np-mdate, .np-m, .np-sec-sub, .np-sec-more, .np-briefs-more, .np-rt, .np-brief-x { display: none; }
@media (min-width: 768px) { .np-briefs-box .np-brief:nth-child(6) { border-bottom: 0; } }   /* the phone-only extra rows follow the 6th, which is the last one shown on desktop */
@media (max-width: 767px) {
  html.np-lock { overflow: hidden; }
  .np .wrap { padding-left: 20px; padding-right: 20px; }
  .np-util, .np-nav, .np-ticker { display: none; }
  /* the masthead keeps its one h1 for search engines and screen readers, out of sight; the top bar carries the name */
  .np-mast { padding: 0; }
  .np-mast-in { display: block; }
  .np-mast-l, .np-mast-r, .np-tag { display: none; }
  .np-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* 1. top bar */
  .np-mbar { display: block; position: sticky; top: 0; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--line); }
  .np-mbar-in { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; height: 52px; padding: 0 10px; }
  .np .np-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); border-radius: 8px; }
  .np .np-menu-btn:hover { background: var(--bg-alt); text-decoration: none; }
  .np .np-mbar-t { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font: 700 1.25rem/1 var(--np-serif); letter-spacing: -0.01em; color: var(--ink); }
  .np .np-mbar-t:hover { text-decoration: none; }
  .np .np-mtheme { justify-self: end; width: 44px; height: 44px; color: var(--ink); }

  /* 2. date row */
  .np-mdate { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 20px; padding: 14px 0; border-bottom: 1px solid var(--np-rule); }
  .np-mdate-d { margin: 0; font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
  .np .np-mkit { position: relative; flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 4px; font-size: 0.78rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
  .np .np-mkit::after { content: ''; position: absolute; inset: -6px; }   /* hit area 44px tall */
  .np .np-mkit:hover { background: var(--bg-alt); text-decoration: none; }

  /* page flow: one column, ordered by block */
  .np-wrap { display: flex; flex-direction: column; padding-bottom: 0; }
  .np-wrap > * { min-width: 0; }
  .np-front { display: contents; }
  .np-top { order: 1; } .np-rail { order: 2; } .np-m { order: 3; } .np-below { order: 4; } .np-ourview { order: 5; } .np-free { order: 6; } .np-dates { order: 7; }
  .np-archive { order: 8; } .np-fine { order: 9; } .np .art-disclaimer { order: 10; } .np-ad-compact { order: 11; }
  .np a:hover { text-decoration: none; }
  /* a headline link covers its whole row, so a thumb has a big target */
  .np-mrow, .np-story, .np-card, .np-brief, .np-slide, .np-mbig { position: relative; }
  .np-mrow h3 a::after, .np-story h3 a::after, .np-card h3 a::after, .np-brief-a::after, .np-lead-h a::after, .np-mbig-h a::after { content: ''; position: absolute; inset: 0; }
  .np-rt { display: block; margin: 0; font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

  /* 3. boxed top stories: lead, then two rows */
  .np-top { margin: 28px -10px 0; padding: 22px 16px 26px; }
  .np-topk { margin-bottom: 24px; }
  .np-slides { display: block; }
  .np-slide { display: block; }
  .np-slide:not(:first-child) { display: none; }
  .np-slides.is-js .np-slide:first-child { opacity: 1; visibility: visible; transition: none; }
  .np-slide .np-meta { display: none; }
  .np-kick { margin: 0 0 8px; }
  .np-lead-h { font-size: 1.625rem; line-height: 1.25; margin: 0 0 12px; }
  .np-sum { font-size: 1rem; line-height: 1.5; margin: 0 0 12px; -webkit-line-clamp: 3; line-clamp: 3; }
  .np-slide .np-rt { margin-bottom: 20px; }
  .np-ctl { display: none; }
  .np-more { margin-top: 28px; padding-top: 22px; }
  .np-more .np-sub { margin: 0 0 18px; }
  .np-more-grid { display: block; }
  .np .np-story { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; padding: 0; border-top: 0; }
  .np .np-story + .np-story { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
  .np .np-story:nth-child(n+3) { display: none; }
  .np .np-story:nth-child(even)::before { display: none; }
  .np-story .np-th { order: -1; }
  .np-story .np-dek, .np-story .np-meta { display: none; }
  .np-story h3 { font-size: 1.0625rem; line-height: 1.25; margin: 0; }
  .np-story .np-kick { margin: 0 0 4px; font-size: 0.66rem; }
  .np-sq img, .np .np-sq img { aspect-ratio: 1 / 1; border-radius: 4px; }

  /* 4. advertisement, offer, YouTube box; the strip and feature card of the desktop rail are not shown */
  .np-rail { display: block; padding: 0; border: 0; margin-top: 40px; }
  .np-ad-tag { margin-bottom: 10px; }
  .np-ad-rail { margin: 0 0 28px; }
  .np-ad-box { padding: 26px 20px 22px; }
  .np-live, .np-watch { margin: 0; }
  .np-feature, .np-pager { display: none; }

  /* In case you missed it, More news */
  .np-m { display: block; margin-top: 48px; }
  .np-mh { margin: 0; padding: 0 0 12px; border-bottom: 2px solid var(--ink); font: 700 1.1875rem/1.25 var(--np-serif); color: var(--ink); }
  .np-mmore { margin-top: 48px; }
  .np-mlist { list-style: none; margin: 0; padding: 0; }
  .np-mrow { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .np-mrow:last-child { border-bottom: 0; }
  .np-mrow h3 { font: 700 1.0625rem/1.25 var(--np-serif); margin: 0; overflow-wrap: break-word; }
  .np-mrow .np-rt { margin-top: 6px; }
  .np-mtext { grid-template-columns: minmax(0, 1fr); }
  .np-mtext .np-meta { margin-top: 6px; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
  .np-mbig { padding: 22px 0 26px; border-bottom: 1px solid var(--line); }
  .np-mbig-h { font: 700 1.5rem/1.25 var(--np-serif); letter-spacing: -0.01em; margin: 0 0 12px; overflow-wrap: break-word; }
  .np-mbig .np-sum { margin-bottom: 12px; }
  .np-mbig-f { margin: 20px 0 0; }

  /* 5. one story per section; "More in <section>" opens the rest */
  .np-below { display: block; }
  .np-section { margin-top: 48px; scroll-margin-top: 0; }   /* site.css already pads anchors by the header height, enough for the 52px bar */
  .np-free, .np-dates { scroll-margin-top: 0; }
  .np-sec-h { display: block; margin: 0; padding: 0; border: 0; }
  .np-sec-h h2 { padding-top: 16px; border-top: 3px solid var(--ink); font-size: 1.375rem; line-height: 1.25; }
  .np-sec-tk { display: none; }
  .np-sec-sub { display: flex; gap: 8px; margin: 8px -20px 0; padding: 0 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .np-sec-sub::-webkit-scrollbar { display: none; }
  .np-sec-sub a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--np-rule); border-radius: 22px; font-size: 0.84rem; font-weight: 600; white-space: nowrap; }
  .np-sec-body { display: block; }
  .np-cards { display: block; }
  .np .np-cards .np-card { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 16px; align-items: start; padding: 20px 0 0; border: 0; }
  .np .np-cards .np-card + .np-card { margin-top: 20px; border-top: 1px solid var(--line); }
  .np-card .np-th { order: 2; }
  .np .np-card .np-th img { aspect-ratio: 1 / 1; border-radius: 4px; }
  .np-card .np-dek { display: none; }
  .np .np-card h3 { font: 700 1.25rem/1.25 var(--np-serif); margin: 6px 0 0; }
  .np-card .np-meta { margin-top: 2px; }
  .np-sec-news { margin-top: 20px; padding-top: 4px; }
  .np-sec-news .np-brief { padding: 16px 0; }
  .js .np-section:not(.is-open) .np-card:nth-child(n+2), .js .np-section:not(.is-open) .np-sec-news { display: none; }
  .np-sec-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 12px; padding: 0; background: none; border: 0; color: var(--ink); font: 600 0.95rem/1.3 var(--font-sans); cursor: pointer; text-decoration: underline; text-decoration-color: var(--np-rule); text-underline-offset: 5px; }
  .np-section.is-open .np-sec-more, html:not(.js) .np-sec-more { display: none; }

  /* 6. briefs: a dated list, five rows, then "Show more" */
  .np-briefs-box { order: 0; margin: 56px 0 0; padding: 0; border: 0; position: static; }
  .np-h { margin: 0 0 4px; padding: 0 0 12px; border-top: 0; border-bottom: 2px solid var(--ink); font: 700 1.1875rem/1.25 var(--np-serif); letter-spacing: 0; text-transform: none; }
  .np-briefs-box .np-brief { padding: 18px 0; }
  .np-briefs-box .np-brief .np-meta { font-size: 0.72rem; letter-spacing: 0.04em; }
  .np-brief-a { margin-top: 6px; min-height: 44px; font-size: 1.0625rem; line-height: 1.25; font-weight: 700; }
  .js .np-briefs-box:not(.is-open) .np-brief-m { display: none; }
  .np-briefs-box.is-open .np-brief-x { display: block; }
  .js .np-briefs-more { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 12px; border: 1px solid var(--ink); border-radius: 4px; background: none; color: var(--ink); font: 600 0.95rem/1 var(--font-sans); cursor: pointer; }
  .np-briefs-box.is-open .np-briefs-more { display: none; }

  /* the rest of the page, with the same air */
  .np-ourview, .np-free, .np-dates { margin-top: 56px; }
  .np-ov-list li { padding: 8px 0; }
  .np-ov-t, .np-ov-h { display: flex; align-items: center; min-height: 44px; }
  .np-ov-t { font-size: 1.0625rem; line-height: 1.25; }
  .np-free-list a { display: inline-block; padding: 12px 0; }
  .np-archive { margin-top: 48px; }
  .np-archive summary { display: flex; align-items: center; min-height: 48px; padding: 0; }
  .np-archive-list li { padding: 8px 0 0; }
  .np-archive-list a { display: block; padding: 6px 0 12px; }
  .np-fine { margin-top: 32px; line-height: 1.5; }
  .np-ad-compact { margin: 48px 0 40px; }

  /* menu sheet: full height, opened by the menu button (works through the #np-sheet link even without script) */
  .np-sheet { display: block; position: fixed; inset: 0; z-index: 100; background: var(--bg); color: var(--text); visibility: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .np-sheet:target, .np-sheet.is-open { visibility: visible; }
  .np-sheet-in { max-width: 520px; margin: 0 auto; padding: 0 20px 48px; min-height: 100%; }
  .np-sheet-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 52px; margin: 0 -20px; padding: 0 10px 0 20px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .np-sheet-t { margin: 0; font: 700 1.25rem/1 var(--np-serif); color: var(--ink); }
  .np .np-sheet-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); border-radius: 8px; }
  .np-sheet-gh { margin: 32px 0 4px; font: 600 0.72rem/1.2 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .np-sheet-grp ul { list-style: none; margin: 0; padding: 0; }
  .np .np-sheet-grp a { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--line); font: 600 1.0625rem/1.3 var(--np-serif); color: var(--ink); }
  .np-sh-n { flex: none; min-width: 1.9em; font: 600 0.85rem/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--muted); }
  @media (prefers-reduced-motion: no-preference) {
    .np-sheet { opacity: 0; transform: translateX(-6%); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s; }
    .np-sheet:target, .np-sheet.is-open { opacity: 1; transform: none; transition: opacity 0.22s ease, transform 0.22s ease; }
  }
}