/* Newsroom — shared component styles for every system.
   Rules: no colours, fonts or sizes of its own. Every value a system can change is a
   custom property (token); the fallback after the comma is the shared default.
   Fonts are loaded by each system's tokens (fontImport), not here. */

body { margin: 0; font-family: var(--font-sans); background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; }
.nw-container { width: var(--container-fluid, 100%); max-width: var(--container-width); margin: 0 auto; padding-left: var(--container-gutter, 0px); padding-right: var(--container-gutter, 0px); box-sizing: border-box; }
.nw-icon { display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* Buttons */
.nw-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; font-family: var(--font-sans); }
.nw-btn-primary { background: var(--cta, var(--accent)); color: var(--on-cta, var(--on-accent)); border: var(--btn-primary-border, var(--border-hairline)) solid var(--cta-line, var(--cta, var(--accent))); border-radius: var(--radius-md); padding: 0 var(--btn-primary-pad-x, 10px); height: var(--btn-primary-height, 30px); }
.nw-btn-inverse { background: var(--inverse); color: var(--on-inverse); border-radius: var(--radius-none); padding: 0 var(--space-lg); height: var(--btn-inverse-height, 38px); }
.nw-btn-default { background: transparent; color: var(--ink); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-sm); padding: 0 var(--btn-default-pad-x, 16px); height: var(--button-height); }
.nw-btn-primary:hover { filter: var(--btn-primary-hover, brightness(0.94)); }
.nw-btn-inverse:hover { opacity: .88; }
.nw-btn-default:hover { border-color: var(--ink); }

/* Masthead */
.nw-masthead { background: var(--header-surface, var(--canvas)); color: var(--on-header, var(--ink)); }
.nw-masthead-row { display: grid; grid-template-columns: var(--masthead-columns, 1fr auto 1fr); align-items: center; height: var(--masthead-height); }
.nw-masthead-left { display: var(--masthead-tools, flex); align-items: center; gap: var(--space-sm); min-width: 0; }
.nw-masthead-left.has-dateline, .nw-masthead-row:has(.nw-masthead-dateline) > .nw-masthead-left { display: flex; }
.nw-masthead-tools { display: var(--masthead-tools, flex); align-items: center; gap: var(--space-xs); }
.nw-masthead-dateline { color: var(--on-header, var(--ink)); white-space: nowrap; }
.nw-masthead-brand { text-align: var(--masthead-align, center); min-width: 0; }
.nw-masthead-tagline { color: var(--on-header-muted, var(--ink-muted)); text-transform: var(--label-transform, uppercase); letter-spacing: var(--label-tracking, inherit); margin-top: 2px; }
.nw-masthead-row.has-tagline { height: auto; min-height: var(--masthead-height); padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.nw-masthead-row:has(.nw-masthead-dateline) { grid-template-columns: var(--masthead-columns-dated, 1fr auto 1fr); }
.nw-masthead-row.has-inline-nav { grid-template-columns: auto 1fr auto; gap: var(--space-xl); }
.nw-masthead-row.has-inline-nav > .nw-masthead-brand { order: -1; text-align: left; }
.nw-masthead-row.has-inline-nav > .nw-masthead-left { display: none; }
.nw-masthead-nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); justify-content: var(--nav-justify, center); }
.nw-masthead-navlink { color: var(--on-header, var(--ink)); text-transform: var(--nav-transform, none); line-height: 1.4; padding: var(--space-2xs) 0; border-bottom: var(--border-active) solid transparent; }
.nw-masthead-navlink.is-active, .nw-masthead-navlink:hover { border-bottom-color: currentColor; }
.nw-masthead-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-sm); }
.nw-iconbtn.nw-masthead-search { display: var(--masthead-search, none); }
.nw-masthead-subscribe { display: var(--masthead-subscribe, inline-flex); }
.nw-searchfield { display: var(--masthead-searchfield, none); align-items: stretch; }
.nw-searchfield-input { box-sizing: border-box; width: 260px; height: 44px; padding: 0 8px; border: var(--border-hairline) solid var(--input-line, var(--line)); border-right: 0; border-radius: 0; background: var(--canvas); color: var(--input-ink); font-family: var(--font-sans); }
.nw-searchfield-btn { width: 36px; height: 44px; border: 0; background: var(--inverse); color: var(--on-inverse); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nw-topbar { background: var(--topbar-surface, var(--header-surface, var(--canvas))); color: var(--on-topbar, var(--on-header, var(--ink))); }
.nw-topbar-row { display: flex; justify-content: space-between; align-items: center; min-height: 33px; gap: var(--space-lg); font-size: 12px; line-height: 19.2px; letter-spacing: var(--topbar-tracking, 1.2px); text-transform: var(--topbar-transform, uppercase); }
.nw-topbar-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.nw-topbar-links a { color: inherit; }
.nw-masthead-signin { display: var(--masthead-search, none); background: transparent; border: 0; color: var(--on-header, var(--ink)); cursor: pointer; padding: 0 10px; height: 30px; font-family: var(--font-sans); }
.nw-wordmark { color: var(--on-header, var(--ink)); text-transform: var(--masthead-transform, uppercase); text-decoration: none; }
.nw-iconbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--on-header, var(--ink)); cursor: pointer; padding: 0; }
.nw-iconbtn-boxed { border: var(--border-hairline) solid var(--header-line, var(--line)); }

/* Nav bar */
.nw-navbar { border-top: var(--nav-top-rule, var(--border-hairline)) solid var(--nav-line, var(--line)); border-bottom: var(--border-hairline) solid var(--nav-line, var(--line)); background: var(--nav-surface, var(--canvas)); }
.nw-navbar-list { list-style: none; margin: 0 auto; display: flex; justify-content: var(--nav-justify, center); flex-wrap: wrap; gap: 0 var(--nav-gap, 0px); }
.nw-navlink { position: relative; text-transform: var(--nav-transform, none); display: inline-flex; align-items: center; gap: 4px; padding: 0 var(--space-md); color: var(--on-nav, var(--ink)); text-decoration: none; height: var(--nav-height); }
.nw-navbar-list li:first-child .nw-navlink { padding-left: var(--nav-first-pad, var(--space-md)); }
.nw-navlink::after { content: ""; position: absolute; left: var(--nav-indicator-inset, var(--space-md)); right: var(--nav-indicator-inset, var(--space-md)); top: var(--nav-indicator-top, auto); bottom: var(--nav-indicator-bottom, 0); height: var(--border-active); background: transparent; }
.nw-navlink.is-active::after, .nw-navlink:hover::after { background: var(--on-nav, var(--ink)); }
.nw-navchev { color: var(--on-nav-muted, var(--ink-muted)); }
.nw-navdot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal, var(--accent)); }

/* Section heading */
.nw-sechead { display: flex; align-items: var(--section-align, center); justify-content: space-between; border-bottom: var(--section-rule, var(--border-hairline)) solid var(--section-line, var(--line)); padding-bottom: var(--section-pad, var(--space-2xs)); }
.nw-sechead-title { margin: 0; color: var(--section-ink, var(--ink)); text-transform: var(--label-transform, uppercase); letter-spacing: var(--label-tracking, inherit); }
.nw-sechead-title::before { content: ""; display: var(--section-flag, none); width: var(--section-flag-width, 80px); border-top: var(--section-flag-height, 4px) solid var(--section-flag-color, var(--accent)); margin-bottom: 12px; }
.nw-sechead.is-signal .nw-sechead-title { color: var(--signal, var(--accent)); }
.nw-sechead-link { display: inline-flex; align-items: center; height: var(--section-link-height, var(--button-height)); padding: var(--section-link-pad, 0 16px); border: var(--section-link-border, var(--border-hairline)) solid var(--line); border-radius: var(--radius-sm); font-size: var(--section-link-size, 14px); line-height: var(--section-link-leading, normal); font-weight: var(--section-link-weight, 500); color: var(--section-link-ink, var(--ink)); margin-bottom: var(--section-link-offset, 0px); text-decoration: none; }
.nw-sechead.is-center { justify-content: center; text-align: center; }
.nw-sechead.is-large .nw-sechead-title { text-transform: none; letter-spacing: normal; }
.nw-sechead-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-left: auto; margin-right: var(--space-lg); color: var(--ink-muted); }
.nw-sechead-tabs a.is-active { color: var(--ink); font-weight: 600; }
.nw-sechead-tabs a:hover { color: var(--ink); }
.nw-sechead-link::after { content: var(--section-link-suffix, none); white-space: pre; }
.nw-sechead-link:hover { border-color: var(--ink); text-decoration: var(--section-link-hover, none); }

/* Category + meta */
.nw-cat { text-transform: var(--category-transform, uppercase); color: var(--category-ink, var(--accent)); margin-bottom: var(--category-gap, var(--space-2xs)); }
.nw-cat.is-center { text-align: center; }
.nw-cat-link { color: inherit; text-decoration: none; border-bottom: var(--category-underline, 1px) solid transparent; }
.nw-cat-link:hover { border-bottom-color: currentColor; }
.nw-cat-dot { margin: 0 5px; }
.nw-meta { text-transform: var(--meta-transform, none); letter-spacing: var(--meta-tracking, normal); display: flex; flex-wrap: wrap; gap: var(--space-md); color: var(--ink-muted); }
.nw-meta.is-center { justify-content: center; }
.nw-meta-by { color: var(--ink); }
.nw-meta-and { color: var(--ink-muted); }
.nw-meta-author { color: var(--ink); text-decoration: none; }
.nw-meta-author:hover { text-decoration: underline; }

/* Story cards */
.nw-card { display: flex; flex-direction: column; gap: var(--space-sm); }
.nw-thumb { background: var(--surface-alt); border-radius: var(--thumb-radius, var(--radius-none)); overflow: hidden; width: 100%; }
.nw-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nw-card-text { display: var(--card-text-display, block); flex-wrap: wrap; align-items: baseline; column-gap: var(--space-xs); }
.nw-card-text > .nw-cat { order: 1; margin-bottom: var(--kicker-gap, var(--category-gap, var(--space-2xs))); }
.nw-card-text > .nw-meta { order: 2; }
.nw-card-text > .nw-card-title { order: 3; flex: 0 0 100%; }
.nw-card-text > .nw-card-excerpt { order: 4; flex: 0 0 100%; }
.nw-card-list .nw-card-text { display: block; }
.nw-card-title { margin: 0 0 var(--space-sm); color: var(--ink); }
.nw-card-title a { color: inherit; text-decoration: none; }
.nw-card-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.nw-card-excerpt { margin: 0 0 var(--space-sm); color: var(--ink-soft); }
.nw-card-lead { text-align: var(--lead-align, center); }
.nw-card-lead .nw-thumb { border-radius: var(--thumb-radius-lead, var(--thumb-radius, var(--radius-none))); }
.nw-card-side .nw-card-thumb { display: var(--side-thumb, block); }
.nw-card-standard { flex-direction: var(--standard-direction, column); gap: var(--standard-gap, var(--space-sm)); align-items: flex-start; }
.nw-card-standard .nw-card-thumb { width: var(--standard-thumb-width, 100%); flex: none; }
.nw-card-standard .nw-card-text { flex: 1; min-width: 0; }
.nw-card-lead .nw-cat.is-center { text-align: var(--lead-align, center); }
.nw-card-lead .nw-meta.is-center { justify-content: var(--lead-justify, center); }
.nw-card-lead .nw-card-excerpt { max-width: 600px; margin-left: var(--lead-excerpt-margin, auto); margin-right: var(--lead-excerpt-margin, auto); }
.nw-card-list { flex-direction: var(--list-direction, row); align-items: flex-start; gap: var(--space-lg); padding-bottom: var(--list-pad, var(--space-md)); border-bottom: var(--border-hairline) solid var(--line-soft); }
.nw-card-list .nw-card-text { flex: 1; }
.nw-card-list .nw-card-title { margin-bottom: var(--space-xs); }
.nw-card-list .nw-card-thumb { width: var(--list-thumb-width, 88px); flex: none; }

/* Inputs */
.nw-input { box-sizing: border-box; height: var(--input-height); padding: 0 var(--space-sm); border: var(--border-hairline) solid var(--input-line, var(--line-soft)); border-radius: var(--radius-xs); background: var(--canvas); color: var(--input-ink); width: 100%; }
.nw-input::placeholder { color: var(--input-ink); opacity: .6; }
.nw-input:focus { border-color: var(--ink); }

/* Article — headings, quotes and captions use the system's own type tokens */
.nw-article-head { max-width: var(--measure); }
.nw-article-title { margin: 0 0 var(--space-sm); color: var(--ink); }
.nw-standfirst { margin: 0 0 var(--space-lg); color: var(--standfirst-ink, var(--ink-soft)); }
.nw-prose { max-width: var(--measure); color: var(--ink); }
.nw-prose p { margin: 0 0 1.2em; }
.nw-prose a { color: var(--prose-link, var(--link)); text-decoration: var(--prose-link-decoration, none); text-underline-offset: 3px; }
.nw-prose a:hover { text-decoration: underline; }
.nw-prose h2 { font: var(--type-article-h2); letter-spacing: var(--type-article-h2-tracking); margin: 1.4em 0 var(--space-xl); }
.nw-prose h3 { font: var(--type-article-h3); letter-spacing: var(--type-article-h3-tracking); margin: 1.4em 0 var(--space-xl); }
.nw-prose blockquote { margin: 0 0 1.2em; padding: 0 0 0 var(--space-xl); border-left: var(--border-quote) solid var(--accent); font: var(--type-pull-quote); letter-spacing: var(--type-pull-quote-tracking); }
.nw-prose blockquote p { margin: 0; }
.nw-prose figure { margin: 0 0 1.2em; }
.nw-prose figcaption { font: var(--type-caption); letter-spacing: var(--type-caption-tracking); color: var(--ink-caption); margin-top: 8px; }

/* Footer — shared */
.nw-footer { background: var(--footer-surface, var(--canvas)); color: var(--on-footer, var(--ink)); padding: var(--footer-pad, 0 0 var(--space-5xl)); border-top: var(--footer-edge, 0px) solid var(--footer-line, var(--line)); }
.nw-footer a:focus-visible { box-shadow: 0 0 0 2px var(--footer-surface, var(--canvas)), 0 0 0 4px var(--on-footer, var(--ink)); }
.nw-footer-name { color: var(--on-footer, var(--ink)); text-transform: var(--footer-name-transform, none); }
.nw-footer-col { display: flex; flex-direction: column; gap: var(--footer-col-gap, var(--space-md)); }
.nw-footer-heading { color: var(--footer-heading-ink, var(--on-footer-muted, var(--ink-muted))); text-transform: var(--footer-heading-transform, none); }
.nw-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--footer-links-gap, var(--space-md)); }
.nw-footer-links a, .nw-footer-legal a { color: var(--on-footer, var(--ink)); }
.nw-footer-links a:hover, .nw-footer-legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nw-footer-copy { color: var(--on-footer-muted, var(--ink-muted)); }

/* Footer — "row": subscribe button and one row of links, copyright below */
.nw-footer--row .nw-footer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.nw-footer--row .nw-footer-links { flex-direction: row; flex-wrap: wrap; gap: var(--space-xs) var(--footer-links-gap, var(--space-lg)); }
.nw-footer--row .nw-footer-copy { margin-top: var(--space-lg); }

/* Footer — "columns": name + tagline, link columns, legal row */
.nw-footer--columns .nw-footer-main { display: var(--footer-main-display, block); grid-template-columns: var(--footer-main-columns, 1fr); gap: var(--space-2xl); }
.nw-footer--columns .nw-footer-brandrow { padding: 16px 0 12px; }
.nw-footer-tagline { display: var(--footer-tagline, block); }
.nw-footer--columns .nw-footer-tagline { margin: var(--space-sm) 0 0; color: var(--on-footer-muted, var(--ink-muted)); max-width: 280px; }
.nw-footer--columns .nw-footer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2xl) var(--space-lg); border-top: var(--footer-grid-rule, var(--border-hairline)) solid var(--footer-line, var(--line)); padding: var(--space-2xl) 0; }
.nw-footer--columns .nw-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); flex-wrap: wrap; border-top: var(--border-hairline) solid var(--footer-line, var(--line)); padding-top: var(--space-xl); }
.nw-footer--columns .nw-footer-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); }

/* Footer — "split": brand and pitch left, copyright and socials right; back-to-top and menu below */
.nw-footer--split .nw-footer-inner { display: flex; flex-direction: column; gap: var(--space-4xl); }
.nw-footer--split .nw-footer-top { display: flex; justify-content: space-between; gap: var(--space-2xl); flex-wrap: wrap; }
.nw-footer--split .nw-footer-brand { display: flex; flex-direction: column; gap: var(--space-2xl); max-width: 300px; }
.nw-footer--split .nw-footer-pitch { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.nw-footer--split .nw-footer-tagline { margin: 0; color: var(--on-footer, var(--ink)); }
.nw-footer--split .nw-footer-btn { display: inline-block; background: var(--footer-button, var(--inverse)); color: var(--on-footer-button, var(--on-inverse)); border-radius: var(--radius-xs); padding: 8px 16px; }
.nw-footer--split .nw-footer-btn:hover { opacity: .88; }
.nw-footer--split .nw-footer-info { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: var(--space-xl); }
.nw-footer--split .nw-footer-copy { text-align: right; }
.nw-footer--split .nw-footer-socials { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-xl); }
.nw-footer--split .nw-footer-social { display: inline-flex; align-items: center; gap: 4px; color: var(--on-footer, var(--ink)); }
.nw-footer--split .nw-footer-social:hover { text-decoration: underline; text-underline-offset: 3px; }
.nw-footer--split .nw-footer-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-2xl); flex-wrap: wrap; border-top: var(--border-hairline) solid var(--footer-line, var(--line)); padding-top: var(--space-xl); }
.nw-footer--split .nw-footer-top-link { display: inline-flex; align-items: center; gap: 8px; color: var(--on-footer, var(--ink)); }
.nw-footer--split .nw-footer-menu { display: flex; gap: var(--space-6xl); flex-wrap: wrap; }

/* Preview helpers */
.nw-demo { padding: var(--space-lg); box-sizing: border-box; }
.nw-demo-row { display: flex; gap: var(--space-lg); align-items: center; flex-wrap: wrap; }


/* ---------- Story card options ---------- */
.nw-card.is-center { text-align: center; }
.nw-card.is-center .nw-meta { justify-content: center; }
.nw-card-dek { margin: calc(-1 * var(--space-xs)) 0 var(--space-sm); color: var(--ink-soft); }
.nw-card-more { display: inline-block; color: var(--link, var(--accent)); font-weight: 600; margin-top: var(--space-xs); }
.nw-card-more:hover { text-decoration: underline; }
.nw-card-number { color: var(--rank-ink, var(--ink-muted)); margin-bottom: var(--space-2xs); }
.nw-card.is-tint { background: var(--card-tint, var(--surface-alt)); padding: var(--space-lg); border-radius: var(--card-radius, var(--radius-none)); }
.nw-card.is-raised { background: var(--surface-raised, var(--canvas)); border: var(--border-hairline) solid var(--line-soft); padding: var(--space-lg); border-radius: var(--card-radius, var(--radius-none)); }
.nw-card.is-inverse { background: var(--inverse); color: var(--on-inverse); padding: var(--space-lg); border-radius: var(--card-radius, var(--radius-none)); }
.nw-card.is-inverse .nw-card-title, .nw-card.is-inverse .nw-meta, .nw-card.is-inverse .nw-meta-author, .nw-card.is-inverse .nw-card-excerpt, .nw-card.is-inverse .nw-cat { color: var(--on-inverse); }
.nw-card.is-inverse .nw-meta { opacity: .75; }
.nw-thumb { position: relative; }
.nw-badge { position: absolute; top: 0; left: 0; background: var(--badge-surface, var(--inverse)); color: var(--on-badge, var(--on-inverse)); padding: 2px var(--space-xs); text-transform: var(--category-transform, uppercase); }
.nw-play { position: absolute; inset: 0; display: grid; place-items: center; }
.nw-play-mark { width: 52px; height: 52px; border-radius: 50%; background: var(--scrim, rgba(0, 0, 0, .55)); position: relative; }
.nw-play-mark::after { content: ""; position: absolute; left: 21px; top: 16px; border-left: 16px solid var(--on-scrim, #fff); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }

.nw-card-row { flex-direction: row; gap: var(--space-lg); align-items: flex-start; }
.nw-card-row .nw-card-thumb { width: var(--row-thumb-width, 38%); flex: none; }
.nw-card-row .nw-card-text { flex: 1; min-width: 0; }
.nw-card-row.is-reverse { flex-direction: row-reverse; }
.nw-card-standard.is-reverse { flex-direction: column-reverse; justify-content: flex-end; }
.nw-ranked-item:has(.nw-rank.is-boxed) { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.nw-rank.is-boxed { border: var(--border-hairline) solid var(--ink); min-width: 4.2em; padding: var(--space-xs) var(--space-sm); text-align: center; color: var(--ink); }
.nw-card-text-only, .nw-card-text { min-width: 0; }

.nw-card-overlay { position: relative; display: block; gap: 0; overflow: hidden; border-radius: var(--thumb-radius, var(--radius-none)); }
.nw-card-overlay .nw-card-thumb { border-radius: 0; height: 100%; }
.nw-card-overlay .nw-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-lg); background: var(--scrim, rgba(0, 0, 0, .55)); color: var(--on-scrim, #fff); }
.nw-card-overlay .nw-card-title, .nw-card-overlay .nw-meta, .nw-card-overlay .nw-meta-author, .nw-card-overlay .nw-meta-by, .nw-card-overlay .nw-card-excerpt, .nw-card-overlay .nw-cat { color: var(--on-scrim, #fff); }
.nw-card-overlay .nw-card-title { margin-bottom: var(--space-2xs); }
.nw-card-overlay .nw-card-excerpt { margin-bottom: var(--space-2xs); opacity: .9; }
.nw-card-overlay .nw-meta { opacity: .85; }

/* ---------- Panel ---------- */
.nw-panel { padding: var(--space-lg); border-radius: var(--panel-radius, var(--radius-none)); display: flex; flex-direction: column; gap: var(--space-md); }
.nw-panel.is-raised { background: var(--surface-raised, var(--canvas)); border: var(--border-hairline) solid var(--line-soft); }
.nw-panel.is-tint { background: var(--panel-tint, var(--surface-alt)); }
.nw-panel.is-inverse { background: var(--inverse); color: var(--on-inverse); }
.nw-panel.is-inverse .nw-card-title, .nw-panel.is-inverse .nw-meta, .nw-panel.is-inverse .nw-panel-title, .nw-panel.is-inverse .headline-list { color: var(--on-inverse); }
.nw-panel-title { margin: 0; text-transform: var(--label-transform, uppercase); letter-spacing: var(--label-tracking, inherit); color: inherit; }
.nw-panel > *:last-child { margin-bottom: 0; }

/* ---------- Ranked list ---------- */
.nw-ranked { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nw-ranked-item { display: grid; grid-template-columns: var(--rank-width, 2.2em) minmax(0, 1fr); gap: var(--space-md); align-items: start; padding: var(--space-sm) 0; border-bottom: var(--border-hairline) solid var(--line-soft); }
.nw-ranked.has-thumbs .nw-ranked-item { grid-template-columns: var(--rank-width, 2.2em) 88px minmax(0, 1fr); }
.nw-rank { color: var(--rank-ink, var(--accent)); }
.nw-ranked-title { margin: 0 0 var(--space-2xs); color: var(--ink); }
.nw-ranked-title a:hover { text-decoration: underline; }
.nw-ranked .nw-meta { color: var(--ink-muted); }

/* ---------- Newsletter ---------- */
.nw-newsletter-text { margin: 0; color: var(--ink-soft); }
.nw-panel.is-inverse .nw-newsletter-text { color: var(--on-inverse); opacity: .85; }
.nw-newsletter-form { display: flex; flex-direction: column; gap: var(--space-xs); }
.nw-newsletter-form .nw-btn { height: var(--input-height); }
.nw-panel.is-inverse .nw-newsletter-form .nw-btn-inverse { background: var(--accent); color: var(--on-accent); }

/* ---------- Authors ---------- */
.nw-authors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nw-author { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: var(--border-hairline) solid var(--line-soft); }
.nw-author-rank { width: 22px; height: 22px; flex: none; display: grid; place-items: center; background: var(--inverse); color: var(--on-inverse); border-radius: var(--radius-xs); }
.nw-avatar { width: 48px; height: 48px; flex: none; border-radius: var(--avatar-radius, 50%); background: var(--surface-alt); overflow: hidden; }
.nw-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-author-text { min-width: 0; }
.nw-author-name { display: block; color: var(--ink); }
.nw-author-name:hover { text-decoration: underline; }
.nw-author-role { color: var(--ink-muted); }

/* ---------- Ticker ---------- */
.nw-ticker { background: var(--ticker-surface, var(--accent)); color: var(--on-ticker, var(--on-accent)); }
.nw-ticker-row { display: flex; align-items: center; gap: var(--space-md); min-height: 32px; overflow: hidden; white-space: nowrap; }
.nw-ticker-label { color: inherit; font-weight: 700; text-transform: var(--category-transform, uppercase); flex: none; }
.nw-ticker-label::after { content: " ●"; }
.nw-ticker-items { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-lg); overflow: hidden; }
.nw-ticker-items li + li::before { content: "● "; opacity: .6; }
.nw-ticker-items a:hover { text-decoration: underline; }

/* ---------- Data ---------- */
.nw-data { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-md); }
.nw-data-cell { display: flex; flex-wrap: wrap; min-width: 0; justify-content: space-between; align-items: center; gap: var(--space-2xs) var(--space-sm); border: var(--border-hairline) solid var(--line); padding: var(--space-sm) var(--space-md); border-radius: var(--panel-radius, var(--radius-none)); }
.nw-data.is-compact .nw-data-cell { border-width: 0 0 var(--border-hairline) 0; border-radius: 0; padding: var(--space-xs) 0; }
.nw-data-name { color: var(--ink); }
.nw-data-tag { margin: 0; }
.nw-data-sub { color: var(--ink-muted); }
.nw-data-figure { text-align: right; }
.nw-data-value { color: var(--ink); white-space: nowrap; }
.nw-data-change.is-up { color: var(--positive, var(--ink)); }
.nw-data-change.is-down { color: var(--negative, var(--accent)); }
.nw-chart { margin: 0; border: var(--border-hairline) solid var(--line); padding: var(--space-md); border-radius: var(--panel-radius, var(--radius-none)); }
.nw-chart-head { display: flex; justify-content: space-between; gap: var(--space-sm); color: var(--ink); }
.nw-chart-svg { display: block; width: 100%; height: 150px; margin-top: var(--space-sm); background: var(--surface-alt); }
.nw-chart-svg polyline { stroke-width: 1.5px; }
.nw-chart-svg.is-up polyline { stroke: var(--positive, var(--ink)); }
.nw-chart-svg.is-down polyline { stroke: var(--negative, var(--accent)); }

/* ---------- Carousel ---------- */
.nw-carousel { position: relative; }
.nw-carousel-track { display: grid; grid-auto-flow: column; gap: var(--space-lg); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.nw-carousel-track::-webkit-scrollbar { display: none; }
.nw-carousel-track > * { scroll-snap-align: start; min-width: 0; }
.nw-carousel-btn { position: absolute; top: 28%; width: 36px; height: 36px; display: grid; place-items: center; border: var(--border-hairline) solid var(--line); background: var(--canvas); color: var(--ink); border-radius: var(--carousel-btn-radius, 50%); cursor: pointer; }
.nw-carousel-btn.is-prev { left: var(--space-2xs); }
.nw-carousel-btn.is-prev .nw-icon { transform: rotate(90deg); }
.nw-carousel-btn.is-next { right: var(--space-2xs); }
.nw-carousel-btn.is-next .nw-icon { transform: rotate(-90deg); }
.nw-carousel-btn:hover { border-color: var(--ink); }

/* ---------- Tags ---------- */
.nw-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.nw-tag { display: inline-block; padding: var(--space-2xs) var(--space-sm); border: var(--border-hairline) solid var(--line); border-radius: var(--tag-radius, 999px); color: var(--ink); background: var(--canvas); }
.nw-tag:hover { border-color: var(--ink); }

/* ---------- Ad, quote, tile ---------- */
.nw-ad { display: grid; place-items: center; background: var(--surface-alt); border: var(--border-hairline) dashed var(--line); border-radius: var(--panel-radius, var(--radius-none)); }
.nw-ad-label { color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }
.nw-quote { margin: 0; padding-left: var(--space-lg); border-left: var(--border-quote) solid var(--accent); }
.nw-quote-text { margin: 0 0 var(--space-sm); color: var(--ink); }
.nw-quote-cite { font-style: normal; color: var(--ink-muted); }
.nw-tile { margin: 0; }
.nw-tile-caption { margin-top: var(--space-xs); color: var(--ink-soft); }

@media (max-width: 1100px) { .nw-carousel-track { grid-auto-columns: calc((100% - 2 * var(--space-lg)) / 2.6) !important; } }
/* Long words (German compounds): hyphenate where the browser can, otherwise break inside the word */
h1, h2, h3, .nw-card-title, .nw-card-excerpt, .nw-card-dek, .nw-ranked-title, .nw-author-name, .nw-author-role, .nw-quote-text, .nw-standfirst, .nw-data-name, .nw-tile-caption {
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
/* Small screens — shared behaviour, not a system choice (breakpoints cannot be tokens) */
@media (max-width: 760px) {
  .nw-masthead-row { height: auto; min-height: var(--masthead-height); padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
  .nw-wordmark { overflow-wrap: anywhere; hyphens: auto; line-height: 1.05; }
  .nw-card-standard { flex-direction: column; }
  .nw-card-standard .nw-card-thumb { width: 100%; }
  .nw-footer--columns .nw-footer-main { grid-template-columns: 1fr; }
  .nw-footer--columns .nw-footer-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .nw-masthead-row { grid-template-columns: auto 1fr; }
  .nw-masthead-row > .nw-masthead-brand { order: -1; text-align: left; }
  .nw-masthead-row, .nw-masthead-row.has-inline-nav, .nw-masthead-row:has(.nw-masthead-dateline) { grid-template-columns: 1fr auto; }
  .nw-masthead-left .nw-masthead-dateline { display: none; }
  .nw-masthead-nav { grid-column: 1 / -1; order: 3; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: var(--space-xs); }
  .nw-masthead-tools { display: none; }
  .nw-searchfield { display: none; }
  .nw-card-row, .nw-card-row.is-reverse { flex-direction: column; }
  .nw-card-row .nw-card-thumb { width: 100%; }
  .nw-sechead { flex-wrap: wrap; }
  .nw-sechead-tabs { margin: var(--space-xs) 0 0; order: 3; flex-basis: 100%; }
  .nw-ticker-items li:nth-child(n+2) { display: none; }
  .nw-data { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .nw-carousel-track { grid-auto-columns: 72% !important; }
}