/* page canvas — the light ivory body (--bg) is the whole-page base. The SSR sentiment coat
   (<style id="ssr-brand-coat">) paints ONLY the .ex-hero with the pastel wave, so the content below stays the
   neutral ivory canvas (.ex-content is transparent over this body → ivory, NOT the sentiment colour). Nothing
   else is overridden here — the hero coat is owned by the injected style, everything else is shared chrome. */
body { background: var(--bg); }

/* news.css — /news/{slug}-{id} single-article detail page.
   Reuses explore-chrome (dark .ex-hero → raised .ex-index-wrap sheet → .ex-content, plus fcard / fc-mtd /
   tc / rail tokens). Only news-specific surfaces live here: the hero kicker (type chips + impact + direction),
   the "why it matters" summary sheet, the per-stock impact card, and the side facts/outlets rail.
   Everything tone-adaptive via --fg/--fg-dim/--surf so it inherits the brand coat like the asset hero. */

/* ── hero kicker: news-type chips + impact + net direction, sits above the headline ─────────────── */
.nw-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }   /* sits UNDER the headline (metadata, not a kicker) */
.nw-type { font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; color: var(--fg, var(--ivory));
  background: rgba(var(--surf, 240,238,233), .16); border: 1px solid rgba(var(--surf, 240,238,233), .30); }
.nw-impact { font-size: 11.5px; font-weight: 800; letter-spacing: .3px; padding: 4px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px; background: #C9862A; color: #1a1206; }
.nw-impact.hi { background: #E5893D; color: #2a1405; }         /* impact 5 = brighter */
.nw-impact svg { width: 13px; height: 13px; }

/* headline — tighter than .ex-title (headlines run longer than a company name) */
.ex-hero-main .nw-title { font-size: clamp(1.85rem, 3.3vw, 2.9rem); line-height: 1.14; font-weight: 800;
  letter-spacing: -.022em; color: var(--fg, var(--ivory)); margin: 0; max-width: 20ch; }

/* source line: publisher · time · flags · read-original */
.nw-src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 15px; margin: 14px 0 0;
  font-size: 13.5px; font-weight: 600; color: var(--fg-dim, var(--dim)); }
.nw-src b { color: var(--fg, var(--ivory)); font-weight: 800; }
.nw-src .nw-dot { opacity: .4; }
.nw-src .nw-flags { display: inline-flex; }
.nw-src .fc-flag { width: 20px; height: 20px; margin-left: -6px; box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.nw-src .fc-flag:first-child { margin-left: 0; }
.nw-orig { display: inline-flex; align-items: center; gap: 5px; color: var(--fg, var(--ivory)); text-decoration: none;
  font-weight: 700; border-bottom: 1px solid rgba(var(--surf, 240,238,233), .45); padding-bottom: 1px; transition: border-color .15s; }
.nw-orig:hover { border-color: var(--fg, var(--ivory)); }
.nw-orig svg { width: 13px; height: 13px; }

/* single-asset hero mark — MIRRORS the asset page (asset.css). The logo ring + forex/spread split-flag +
   commodity disc MUST render with the same markup/logic as asset.js (assetFlagsOf / commodityChip / FLAG /
   MDXRail) — never hand-rolled. IMPL NOTE: extract this hero-mark block into shared explore.css so asset +
   news use one source (avoid an asset.css fork — see shared-css rule). Coat = MDXHeroCoat, same as asset. */
.ex-hero-logo img { border: 2px solid var(--fg, var(--ivory)); box-sizing: border-box; }
.ex-hero-logo .as-splitflag { position: relative; width: 128px; height: 128px; border-radius: 50%; overflow: hidden; display: block; background: #fff; border: 2px solid var(--fg, var(--ivory)); box-sizing: border-box; }
.as-splitflag .as-half { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-splitflag .as-half.ll { clip-path: polygon(0 0, 100% 100%, 0 100%); }   /* lower-left = benchmark */
.as-splitflag .as-half.ur { clip-path: polygon(0 0, 100% 0, 100% 100%); }   /* upper-right = subject */
.as-splitflag::after { content: ''; position: absolute; top: 50%; left: 50%; width: 142%; height: 2px; background: rgba(255,255,255,.85); transform: translate(-50%,-50%) rotate(45deg); }
.ex-hero-logo .ex-logo-disc { border: 2px solid var(--fg, var(--ivory)); box-shadow: none; box-sizing: border-box; }
@media (max-width: 720px) { .ex-hero-logo .as-splitflag { width: 148px; height: 148px; } }

/* MULTI-ASSET / macro fallback: a news-type disc coloured by net direction (reuses the .ex-logo-disc circle) */
.nw-disc { width: 128px; height: 128px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--fg, var(--ivory)); box-sizing: border-box; }
/* the news-type disc is coloured by NET SENTIMENT per doc §4 ("Colour = direction"): pos green (--gain) ·
   neg red (--loss) · mixed violet #6E6496 · ambiguous amber #C9862A. */
.nw-disc.pos { background: var(--gain, #1f9d57); } .nw-disc.neg { background: var(--loss, #d23b3b); }
.nw-disc.mixed { background: #6E6496; } .nw-disc.amb { background: #C9862A; }
.nw-disc svg { width: 46%; height: 46%; color: #fff; stroke: #fff; }
@media (max-width: 720px) { .nw-disc { width: 148px; height: 148px; } }

/* ── raised "why it matters" summary sheet (repurposes .ex-index-wrap, where asset shows its chart) ── */
.nw-summary { padding-bottom: 26px; }
.nw-summary .ex-index-t { margin-bottom: 14px; }
.nw-brief { font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.72; color: var(--black); font-weight: 500;
  max-width: 66ch; margin: 0; }
.nw-net { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.nw-net-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border-medium); font-size: 12.5px; font-weight: 800; color: var(--black); text-decoration: none; transition: border-color .12s; }
.nw-net-chip:hover { border-color: rgba(0,0,0,.2); }
.nw-net-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #fff; }
.nw-net-chip .nw-net-d { font-size: 11px; font-weight: 800; }
.nw-net-chip.pos .nw-net-d { color: #1f9d57; } .nw-net-chip.neg .nw-net-d { color: #d23b3b; }

/* ── content sections ──────────────────────────────────────────────────────────────────────────── */
.nw-sec { margin-bottom: 40px; }

/* section header row + group toggle (by theme | by impact aspect) */
.nw-h-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.nw-h-row .nw-h { margin: 0; }
/* group toggle = the SHARED explore tabs (.ex-tabs .tab / .tab.active — white pill · black active pill, from
   explore.css). news only trims it to sit inline in the section header: no bottom margin + a touch smaller
   than the full-page content tabs. The look/active state are inherited, not re-styled. */
.nw-grp-toggle.ex-tabs { margin-bottom: 0; gap: 8px; }
/* SNAP the active state (no bg/opacity transition): a segmented toggle switched next to a FLIP re-render would
   otherwise show the .2s white↔grey↔black bg fade mid-repaint = the "flicker". Instant swap = clean. */
.nw-grp-toggle.ex-tabs .tab { padding: 8px 16px; font-size: 13px; transition: none; }
.nw-grp-toggle.ex-tabs .tab:hover { opacity: 1; }
/* mobile: the shared .ex-tabs collapses each tab to an icon-over-label column (::before is a 21px currentColor
   mask). The explore tabs key the icon off data-t; the toggle keys off data-grp → give it the same shared
   masks (grid = by-theme · bar-chart = by-impact). Also restore the mobile column padding (the desktop padding
   above would otherwise win by specificity and flatten the icon row). */
@media (max-width: 720px) {
  .nw-grp-toggle.ex-tabs .tab { padding: 9px 6px 7px; font-size: 10.5px; }
  .nw-grp-toggle.ex-tabs .tab[data-grp="theme"]::before  { -webkit-mask-image: var(--ic-grid); mask-image: var(--ic-grid); }
  .nw-grp-toggle.ex-tabs .tab[data-grp="aspect"]::before { -webkit-mask-image: var(--ic-comp); mask-image: var(--ic-comp); }
}

/* a stock group (theme-cover, gics fallback) — header + its impact cards + a "show all" affordance */
.nw-group { margin-bottom: 22px; }
.nw-group-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 11px; padding-bottom: 8px; border-bottom: 1px solid var(--bg); }
.nw-group-nm { font-size: 13.5px; font-weight: 800; color: var(--black); letter-spacing: -.01em; }
.nw-group-nm .nw-group-fb { font-weight: 700; color: var(--muted); }   /* the "· ตาม GICS" fallback tag */
.nw-group-meta { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--muted); flex: none; }
.nw-group-dir { font-size: 12px; font-weight: 800; }
.nw-group-dir.pos { color: #1f9d57; } .nw-group-dir.neg { color: #d23b3b; } .nw-group-dir.mixed { color: #8A6A20; }
/* margin-top MUST equal .nw-imp-grid's gap (10px) — the button is a SIBLING of the grid, so the grid's gap
   doesn't reach it. At 2px the "+N more" hugged the last card, but the cards it reveals sit 10px apart → the
   collapsed-vs-expanded rhythm jumped. 10px = one even spacing whether collapsed or expanded. */
.nw-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 8px 14px; border: 1px solid var(--border-medium); border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--black); cursor: pointer; transition: .12s; }
.nw-more:hover { background: var(--bg); }
.nw-sec:last-child { margin-bottom: 0; }
.nw-h { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--black); margin: 0 0 16px;
  display: flex; align-items: center; gap: 9px; }
.nw-h .nw-count { font-size: 12px; font-weight: 800; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 2px 10px; }

/* per-stock impact card — the differentiator: the stock identity is the REUSED feed stockChip (.tc: logo·
   name·ticker·sparkline·price·%chg + personalization, hydrated by feed-engine.js — never hand-rolled), and
   we wrap it with the article-grounded impact layer: direction + aspect(s) + relevance + the "why". */
/* .nw-imp IS a shared .fcard (SSR emits `class="fcard nw-imp …"`) → the card surface (bg=--card-bg, border,
   --radius-sm, hover shadow) comes from feed.css. Its layout is a MEDIA OBJECT: the reused stock card
   (MDXRail.relCard — logo·name·ticker·sparkline·price·%chg + skeleton + hydrate, always full, NOT ticker-mode
   personalized) on the LEFT, the article-grounded impact layer (direction · aspects · relevance · why) on the
   RIGHT. Built on the rail-card DNA, just arranged wider — no structural override of the shared card. */
.nw-imp { display: flex; flex-direction: row; gap: 15px; align-items: flex-start; cursor: pointer; border-left-width: 3px; }
.nw-imp.pos { border-left-color: var(--gain, #1f9d57); } .nw-imp.neg { border-left-color: var(--loss, #d23b3b); } .nw-imp.amb { border-left-color: #C9862A; }
/* LEFT — the stock card at its natural mini width; RESTYLE (not restructure) the shared .rl-metric so the
   sparkline runs FULL-WIDTH with price + %chg on the line below it (fillMetrics still owns the innerHTML). */
.nw-imp-chip { width: 176px; flex: none; }
.nw-imp .nw-imp-chip > .rl-card { border: none; box-shadow: none; background: transparent; padding: 0; }
.nw-imp .nw-imp-chip > .fc-tk { display: inline-block; }
.nw-imp .rl-metric { flex-direction: column; align-items: stretch; gap: 5px; margin-top: 8px; min-height: 0; }
.nw-imp .rl-spark, .nw-imp .rl-spark.rl-skel { width: 100%; height: 36px; min-width: 0; flex: none; }
/* pin the price row to the REAL (filled) line-box height so the skeleton (thin 11px bars) doesn't shrink it →
   no 5.5px card jump on hydrate. Skeleton dims == real dims, the feed's own no-reflow rule. */
.nw-imp .rl-pxrow { width: auto; justify-content: flex-start; gap: 9px; min-height: 17px; align-items: center; }
/* the stock chip — the impact section always shows the FULL related-asset card (MDXRail.relCard, client) so
   this stock-focused surface has the logo·sparkline·price regardless of the user's ticker config. Strip the
   .rl-card frame so it reads as content, not a card-in-a-card. .fc-tk = the pre-JS crawlable fallback. */
.nw-imp > .nw-imp-chip { display: block; }
.nw-imp .nw-imp-chip > .rl-card { width: 100%; border: none; box-shadow: none; background: transparent; padding: 0; }
.nw-imp .nw-imp-chip > .fc-tk { display: inline-block; }
/* RIGHT — the impact layer fills the rest (no divider: it sits BESIDE the card now, not below it) */
.nw-imp-body { flex: 1; min-width: 0; }
.nw-imp-why { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-imp-dir { flex: none; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.nw-imp-dir.pos { background: #E6F4EC; color: #1f7a46; } .nw-imp-dir.neg { background: #FBE9E9; color: #c0392b; } .nw-imp-dir.amb { background: #FBF1E0; color: #97671b; }
.nw-imp-asp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 9px; }
/* off-coverage (private, not tradable) keeps a plain icon header — no .tc price card */
.nw-imp.oc { display: block; }
.nw-imp.oc .nw-imp-hd { display: flex; align-items: center; gap: 12px; }
.nw-imp.oc .rl-ic { width: 38px; height: 38px; flex: none; }
.nw-imp-id { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.nw-imp-nm { font-size: 15px; font-weight: 800; color: var(--black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-asp { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  background: var(--bg); border-radius: 5px; padding: 3px 8px; }
.nw-rel { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.nw-rel span { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-right: 3px; }
.nw-rel i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-medium); }
.nw-rel i.on { background: var(--black); }
.nw-imp-why { font-size: 13px; line-height: 1.56; color: #4a453d; margin: 0; }
/* direct mention (no scored impact) — a grey tag, NOT an empty grey relevance meter */
.nw-imp-mention { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 3px 9px; }

/* theme card enhancers — icon+colour from window.MegatrendMeta.chip, sparkline+return% from /megatrend/index
   (both filled by news.js), direction+aspect context from the SSR. Reuses the .tc card shape. */
.nw-theme .nw-theme-ic { width: 30px; height: 30px; flex: none; }
.nw-theme-disc { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.nw-theme-disc svg { width: 60%; height: 60%; }
.nw-theme-ret { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; min-height: 17px; }
.nw-theme-ret.up { color: #1f9d57; } .nw-theme-ret.down { color: #d23b3b; }
.nw-theme-ctx { display: block; margin-top: auto; padding-top: 4px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.nw-theme-ctx.up { color: #1f9d57; } .nw-theme-ctx.down { color: #d23b3b; }

/* megatrend impact — epicenter uses shared .fc-mtd rows; ripple gets a lighter, indented treatment */
.nw-mt { background: #fff; border: 1px solid var(--border-medium); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-std, 0 16px 12px -12px rgba(0,0,0,.2)); }
.nw-mt .fc-mtd { margin: 0; }
.nw-mt .fc-mtd + .nw-ripple { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bg); }
.nw-ripple-h { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.nw-rip-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 12.5px; }
.nw-rip-via { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #fff;
  background: #6E6496; border-radius: 5px; padding: 2px 7px; flex: none; }
.nw-rip-n { font-weight: 600; color: var(--black); } .nw-rip-n.up { color: var(--gain); } .nw-rip-n.down { color: var(--loss); }

/* off-coverage private companies — same card, no ticker/price (not tradable) */
.nw-imp.oc .rl-ic { background: #EEE9F5; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #5D4B93; }
.nw-imp.oc .rl-ic svg { width: 20px; height: 20px; }
.nw-oc-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #5D4B93; background: #EEE9F5; border-radius: 5px; padding: 3px 8px; align-self: flex-start; }
.nw-imp.oc .nw-imp-asp { margin: 12px 0 9px; }
/* BUGFIX: nw-imp-id is a flex COLUMN (align-items:stretch) → the Private tag stretched full width = a long
   purple band to the edge. Pin the column's cross-axis to the start so name + tag hug their content. */
.nw-imp.oc .nw-imp-id { align-items: flex-start; }

/* flex-wrap so two card SIZES coexist in one group: a SCORED stock (has a "why") takes a full-width row as a
   media object; a MENTIONED stock (no scored impact → nothing for the right column) shrinks to a compact
   stock card and several pack per row — no more empty right band. */
.nw-imp-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.nw-imp-grid > .nw-imp { flex: 1 1 100%; margin-bottom: 0; }
/* stocks past the top-N per group — hidden until the "+N" button reveals them (scales to 64 without a wall of cards) */
.nw-xtra { display: none !important; }
/* MENTIONED cards pack EXACTLY 4 per row filling the width (basis == max == (100% − 3·gap)/4 = 25% − 7.5px),
   not a fixed 188px that left a half-card gap. flex-grow soaks up rounding so the row is flush. */
.nw-imp-grid > .nw-imp:has(.nw-imp-mention) { flex: 1 1 calc(25% - 7.5px); max-width: calc(25% - 7.5px); flex-direction: column; gap: 9px; }
.nw-imp:has(.nw-imp-mention) .nw-imp-chip { width: 100%; }
.nw-imp:has(.nw-imp-mention) .nw-imp-body { flex: none; }
/* tablet: 3 mentioned per row */
@media (max-width: 900px) { .nw-imp-grid > .nw-imp:has(.nw-imp-mention) { flex-basis: calc(33.333% - 6.67px); max-width: calc(33.333% - 6.67px); } }
/* phone: scored card stacks (media object → column); mentioned = 2 per row */
@media (max-width: 560px) {
  .nw-imp-grid > .nw-imp { flex-direction: column; }
  .nw-imp-chip { width: 100%; }
  .nw-imp .rl-spark, .nw-imp .rl-spark.rl-skel { height: 30px; }
  .nw-imp-grid > .nw-imp:has(.nw-imp-mention) { flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); }
}

/* off-coverage / private companies — a plain 2-column grid (no price card → not a media object). #ocList
   reuses the .nw-imp-grid class but a grid reads better for these uniform cards; the ID wins over the flex. */
#ocList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* theme index cards — a megatrend has its OWN index (like a stock), so render it with the REUSED .tc card
   (colour-dot mark instead of a logo). Grid of cards, ripple themes tagged. (asset/search/explore show the
   same theme-with-index treatment.) */
.nw-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
/* keep 2 columns down to the smallest phones (was collapsing to 1 — user wants 2-col on mobile) */
@media (max-width: 900px) { .nw-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nw-theme-grid .tc { width: auto; height: 100%; }   /* equal-height cells so cards WITHOUT a chart still align */
.nw-theme-dot { width: 26px; height: 26px; border-radius: 8px; display: block; }
.nw-theme-rip-h { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin: 10px 2px 2px; }
.nw-theme-tag { position: absolute; top: -7px; right: -7px; font-size: 9px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: #fff; background: #6E6496; border-radius: 999px; padding: 2px 7px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.tc .tc-dir { font-size: 11px; font-weight: 700; color: var(--muted); }

/* ── side rail: key facts + "same story, N outlets" + read-original CTA ───────────────────────────── */
/* facts panel = shared .fd-glance (padding + --radius-sm come from feed.css); news only adds panel spacing */
.fd-side .nw-facts { margin-bottom: 16px; }
.nw-facts-h { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.nw-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; margin: 0; }
.nw-facts dt { font-size: 12px; font-weight: 700; color: var(--muted); }
.nw-facts dd { font-size: 12.5px; font-weight: 800; color: var(--black); text-align: right; margin: 0; font-variant-numeric: tabular-nums; }

.fd-side .nw-outlets { padding: 16px 18px; margin-bottom: 16px; border-radius: 14px; }
.nw-outlets-h { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.nw-out { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--bg); font-size: 13px; }
.nw-out:first-of-type { border-top: none; }
.nw-out b { font-weight: 800; color: var(--black); }
.nw-out span { font-size: 11.5px; font-weight: 700; color: var(--muted); flex: none; }

.nw-cta { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; box-sizing: border-box;
  background: var(--black); color: var(--ivory); border-radius: 12px; padding: 13px 16px; font-size: 14px; font-weight: 800; text-decoration: none; transition: opacity .15s; }
.nw-cta:hover { opacity: .85; }
.nw-cta svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .fd-side { order: 2; }
  .ex-hero-main .nw-title { max-width: none; }
}