/* =============================================================================
   news-article.css (realm edition) - page-specific rules for /news/ (archive) and
   /news/<article>. The shell (page container, page header, cards, news cards, copy
   sections, CTA bands) comes from realm/ui.css; only news-specific parts live here.

   Legacy article bodies (35 frozen .html files, root article.mu-hero-article.white-box)
   print their own light-theme <style> block AFTER this file, so every override below
   is scoped `.news-detail .mu-hero-article ...` and out-specifies the body rules
   (bodies go up to (0,2,2) / (0,3,1)); no style edits to the frozen files (v10 only repointed
   15 broken banner images and their $seo_image at assets/news-thumbs/ art).
   ========================================================================== */

/* --- Archive: archived (pre-merge) posts sit on the muted surface --- */
.news-archive .news-card--archived { background: var(--surface-1); box-shadow: var(--bevel); }
.news-archive .news-card--archived::before { opacity: .3; }
.news-archive .news-card--archived:hover::before { opacity: .8; }

/* --- Archive: current posts first, the pre-merge posts in a closed <details> under them;
       the toggle is a centred secondary button with a chevron --- */
.news-list > .news-archive-old { margin-top: var(--section-gap); }
.news-list > .news-archive-old:first-child { margin-top: 0; }
.news-archive-old > summary { display: flex; width: fit-content; max-width: 100%; margin-inline: auto; list-style: none; }
.news-archive-old > summary::-webkit-details-marker { display: none; }
.news-archive-old > summary::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-fast); }
.news-archive-old[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.news-archive-old > .news-grid { margin-top: var(--sp-6); }

/* --- Article: one centred reading column from 900px (header, notice, hero, article, CTA band);
       related news gets a wider 3-up row under it. Phones and tablets keep the full-width column. --- */
@media (min-width: 900px) {
  .news-detail .page-container--narrow > *,
  .news-detail .page-container--narrow > .mu-hero-article.white-box { margin-inline: auto; }
  .news-detail .page-container--narrow > :is(.breadcrumb-nav, .page-header, .page-header-box) { max-width: var(--container-narrow); }
  /* (0,4,0) after ui.css: beats the 760px cap of .page-container--narrow > :not(...) */
  .page--article.news-detail .page-container--narrow > .news-related { max-width: 960px; }
}

/* --- Article: related posts, one column on phones, one row of 3 from 720px (never an orphan card) --- */
.news-detail .news-related .news-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .news-detail .news-related .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Article key visual, right under the headline (the live notice follows it): 16:9 on phones, 21:9 from
       640px, and from 1100px it breaks out of the 760px reading column to 1040px (centred by the
       margin-inline:auto above); gold rim and the lava top line of the banners --- */
.news-hero { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-800); border: 1px solid var(--gold-line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg), var(--bevel); }
.news-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 2px; background: linear-gradient(90deg, var(--gold) 0%, #ff6a2b 55%, rgba(196, 26, 16, 0) 100%); pointer-events: none; }
.news-hero img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; }
@media (min-width: 640px) {
  .news-hero { aspect-ratio: 21 / 9; }
}
@media (min-width: 1100px) {
  /* (0,4,0) after ui.css: beats the 760px cap of .page-container--narrow > :not(...) */
  .page--article.news-detail .page-container--narrow > .news-hero { max-width: 1040px; }
}
/* one key visual per article: under the article art the generic header backdrop (ui.css body::after) steps back */
body[data-section="news"]:has(.news-hero)::after { opacity: .4; }

/* --- Article: "live now" notice on top of a launch post once the realm has opened, and the "season ended"
       notice on the post of an older season (.news-season-notice, the info alert) --- */
/* a flowing text line (not the .alert flex row), so the dot, sentence and link wrap together on phones */
.news-live-notice { display: block; font-size: var(--fs-base); }
.news-live-notice__dot { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; vertical-align: .1em; background: var(--success); box-shadow: 0 0 8px var(--success); }
.news-live-notice a { color: var(--accent-text); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 168, 96, .4); text-underline-offset: 3px; }
.news-live-notice a:hover { color: var(--accent-text-hover); text-decoration-color: currentColor; }
.news-season-notice .news-badge { margin-right: 8px; vertical-align: .1em; }
/* the countdown of a launch post before its opening (news/index.php, season state 'upcoming'): the gold badge with
   the opening time, four timer cells (the home launch timer's look), the join link; at zero js puts the live sentence
   in the timer's place (.is-live, the success alert) */
.news-countdown { display: grid; gap: 12px; border-color: var(--gold-line); border-left-color: var(--gold); background: radial-gradient(140% 120% at 0% 0%, rgba(232, 64, 31, .16), var(--surface-1) 60%); }
.news-countdown.is-live { border-color: rgba(79, 209, 139, .3); border-left-color: var(--success); background: var(--success-soft); }
.news-countdown__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.news-countdown__label { font-weight: 700; color: var(--text-strong); }
.news-countdown__timer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 440px; }
.news-countdown__cell {
  display: grid; place-items: center; align-content: center; gap: 4px; min-height: 68px; padding: 6px 4px;
  border: 1px solid rgba(245, 201, 80, .38); border-radius: var(--r-md);
  background: radial-gradient(120% 120% at 50% 0%, rgba(232, 64, 31, .42), rgba(20, 10, 8, .94) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 226, 190, .12);
}
.news-countdown__num { font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--gold); text-shadow: 0 0 14px rgba(255, 140, 40, .5); }
.news-countdown__unit { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.news-countdown__cta { justify-self: start; }
.news-countdown__live { margin: 0; }

/* --- Season state of realm-opening posts (news_helpers.php mu_news_meta_html): a small pill before the date in
       .news-meta; Live now = green dot, Season ended = quiet outline, Opens {date} = gold --- */
.news-badge { min-height: 22px; padding: 1px 9px; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.news-badge--live { background: var(--success-soft); border-color: rgba(79, 209, 139, .45); color: #9ff3c3; }
.news-badge__dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success); }
.news-badge--ended { background: rgba(255, 255, 255, .04); border-color: var(--border-strong); color: var(--text-muted); }
.news-badge--upcoming { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold-ink); }
/* on a card the badge sits on the thumbnail's top-left corner, out of the date row, so the dates and titles of
   a row of cards line up (the card is the positioned box; the badge stays in the DOM before the date) */
.news-card .news-meta > .news-badge { position: absolute; top: 12px; left: 12px; z-index: 4; pointer-events: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.news-card .news-meta > .news-badge--live { background: rgba(8, 30, 19, .88); }
.news-card .news-meta > .news-badge--ended { background: rgba(11, 8, 7, .85); color: #d2c4b6; }
.news-card .news-meta > .news-badge--upcoming { background: rgba(30, 22, 6, .88); }
/* posts of an ended season read as history: muted art and accent line (the title stays readable) */
.news-card--ended .news-card__media img { filter: grayscale(.55) brightness(.8); }
.news-card--ended::before { opacity: .3; }
.news-card--ended:hover::before { opacity: .8; }
.news-card--ended .news-meta { color: var(--text-muted); }

/* --- Copy-mode article card: vertical rhythm between lead, CTA row and sections;
       sections are divided by the gold hairline used on cards --- */
.news-copy-article { --stack-gap: var(--sp-7); }
.news-copy-article > .copy-section + .copy-section { padding-top: var(--sp-7); border-top: 0; background: var(--gold-hair) top / 100% 1px no-repeat; }

/* ---------------------------------------------------------------------------
   Legacy article bodies
   --------------------------------------------------------------------------- */

/* The article: a carved obsidian card like .card (beats the body's #fff, 18px radius, 900px cap) */
.news-detail .mu-hero-article.white-box {
  width: auto;
  max-width: none;
  margin: var(--section-gap) 0 0;
  padding: var(--card-pad);
  background: var(--gold-hair) top / 100% 1px no-repeat, var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md), var(--bevel);
  color: var(--text);
}
.news-detail .mu-hero-article section { margin: 0 0 1.5rem; }

/* Banner layout defaults at the specificity of the bodies' own rules ((0,1,0) / (0,1,1)): every body that declares
   them prints the same values later and keeps its own; mu-online-crashes.html declares none, so without these
   its title fell under the image, unaligned, and the lava top line below ran along the article card */
:where(.news-detail .mu-hero-article) .mu-hero-banner { position: relative; overflow: hidden; }
:where(.news-detail .mu-hero-article) .mu-hero-banner img { display: block; width: 100%; height: auto; }
:where(.news-detail .mu-hero-article) .mu-hero-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.2rem 1rem 1.2rem; text-align: center; }
:where(.news-detail .mu-hero-article) .mu-hero-title h2 { margin-top: 1.3rem; }
:where(.news-detail .mu-hero-article) .mu-glow { display: inline-block; padding: .22em 1.2em; }

/* Banner: framed like the page header (gold rim, lava-gold top line, deep shadow) */
.news-detail .mu-hero-article .mu-hero-banner {
  max-width: none;
  margin-bottom: var(--sp-6);
  background: var(--ink-800);
  border: 1px solid rgba(245, 201, 80, .3);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, .6);
}
.news-detail .mu-hero-article .mu-hero-banner::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 2; height: 2px; background: linear-gradient(90deg, var(--gold) 0%, #ff6a2b 55%, rgba(196, 26, 16, 0) 100%); box-shadow: 0 0 12px rgba(255, 106, 43, .6); pointer-events: none; }
.news-detail .mu-hero-article .mu-hero-banner img { position: relative; min-height: clamp(120px, 30vw, 300px); object-fit: cover; border-radius: calc(var(--r-md) - 1px); color: transparent; }
/* Safety net for a banner image that fails to load (news/index.php already swaps a missing same-site banner
   for the post's news art, and the 15 bodies whose /images/ banner never existed now point at that art):
   the broken image would collapse the banner and clip its title, so it keeps its height and shows the
   lava valley instead (::after only renders on an image that failed to load). The backdrop files are ui.css's page
   header art and keep its ?v=<mtime> stamps (one URL = one cached copy; see ui.css UI 0). */
.news-detail .mu-hero-article .mu-hero-banner img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(80% 120% at 0% 0%, rgba(232, 64, 31, .32) 0%, rgba(232, 64, 31, 0) 55%), linear-gradient(0deg, rgba(11, 8, 7, .6) 0%, rgba(11, 8, 7, .1) 60%), url(/assets/realm/backdrop-960.webp?v=1791395902) 60% 40% / cover no-repeat, var(--ink-800); }
@media (min-width: 900px) {
  .news-detail .mu-hero-article .mu-hero-banner img::after { background: radial-gradient(80% 120% at 0% 0%, rgba(232, 64, 31, .32) 0%, rgba(232, 64, 31, 0) 55%), linear-gradient(0deg, rgba(11, 8, 7, .6) 0%, rgba(11, 8, 7, .1) 60%), url(/assets/realm/backdrop-1600.webp?v=1791395903) 60% 40% / cover no-repeat, var(--ink-800); }
}
.news-detail .mu-hero-article .mu-hero-title { background: linear-gradient(0deg, rgba(11, 8, 7, .94) 0%, rgba(11, 8, 7, .8) 55%, rgba(11, 8, 7, 0) 100%); border-radius: 0 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px); }

/* Banner plaque (.mu-glow): molten lava with a gold rim, like the key-art plaque */
.news-detail .mu-hero-article .mu-glow {
  background: var(--lava);
  border: 1px solid #ffb56b;
  border-radius: var(--r-xs);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(.8125rem, .72rem + .45vw, 1.0625rem);
  letter-spacing: .08em;
  text-shadow: 0 1px 1px rgba(60, 6, 2, .6);
  box-shadow: inset 0 1px 0 rgba(255, 226, 190, .5), inset 0 -2px 0 rgba(70, 6, 2, .35), 0 0 0 1px rgba(70, 8, 3, .7), 0 6px 20px rgba(227, 58, 23, .45);
}

/* Former body <h1> (demoted to h2.news-legacy-title, or a plain h2 in older bodies), on the banner */
.news-detail .mu-hero-title .news-legacy-title { margin: 1.3rem 0 0; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.8); font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); line-height: 1.2; font-weight: 800; text-align: center; }
.news-detail .mu-hero-article .mu-hero-title :is(h1, h2) { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
/* phones: the overlaid title is taller than the banner image and got clipped by its overflow:hidden,
   so it flows below the image instead, rising over the image's lower edge */
@media (max-width: 639.98px) {
  .news-detail .mu-hero-article .mu-hero-banner img { border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; }
  .news-detail .mu-hero-article .mu-hero-title { position: relative; inset: auto; margin-top: -48px; padding: 36px 14px 18px; background: linear-gradient(180deg, rgba(11, 8, 7, 0) 0%, rgba(11, 8, 7, .9) 36px, var(--ink-900) 100%); }
  .news-detail .mu-hero-article .mu-hero-title :is(h1, h2) { margin-top: .9rem; font-size: 1.25rem; line-height: 1.25; }
}
.news-detail :is(.speed-hero, .summer-hero) .news-legacy-title { margin: 14px 0 10px; color: #fff; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); line-height: 1.1; letter-spacing: var(--ls-display); font-weight: 800; text-shadow: 0 3px 14px rgba(0, 0, 0, .85); }

/* Headings: body sets h2 #a20707 and h3/h4 #2483d6 at (0,1,1) */
.news-detail .mu-hero-article :is(h2, h3, h4) { color: var(--text-strong); }
.news-detail .mu-hero-article :is(h3, h4) { color: var(--gold); }

/* Readability typography inside legacy bodies */
.news-detail .mu-hero-article p,
.news-detail .mu-hero-article li { font-size: 1.0625rem; line-height: 1.75; color: var(--text); }
.news-detail .mu-hero-article > h2 { margin-top: 2.1rem; margin-bottom: .6rem; line-height: 1.25; }
.news-detail .mu-hero-article > h3 { margin-top: 1.6rem; margin-bottom: .5rem; line-height: 1.3; }
.news-detail .mu-hero-article :is(ul, ol) { padding-left: 1.3rem; }
.news-detail .mu-hero-article li { margin: .4rem 0; }
.news-detail .mu-hero-article li::marker { color: var(--ember); }
.news-detail .mu-hero-article strong { color: var(--text-strong); }
.news-detail .mu-hero-article img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.news-detail .mu-hero-article a:not(.btn):not(.button):not(.btn-download) { color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(255, 168, 96, .4); text-underline-offset: 3px; overflow-wrap: anywhere; }
.news-detail .mu-hero-article a:not(.btn):not(.button):not(.btn-download):hover { color: var(--accent-text-hover); text-decoration-color: currentColor; }
.news-detail .mu-hero-article code { font-family: var(--font-mono); font-size: .9em; padding: .1em .35em; border-radius: 4px; background: var(--surface-2); color: var(--gold); }
.news-detail .mu-hero-article pre { background: var(--control-bg); color: var(--text); border: 1px solid var(--border); box-shadow: var(--control-shadow); }
.news-detail .mu-hero-article pre code { padding: 0; background: none; color: inherit; }
.news-detail .mu-hero-article hr { height: 1px; margin: var(--sp-6) 0; border: 0; background: var(--gold-hair); }
.news-detail .mu-hero-article .attachment { border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); }
.news-detail .mu-hero-article :is(.keywords, .mu-muted) { color: var(--text-muted); }

/* Expandable blocks (es/pt Season 20 part 3 changelog) */
.news-detail .mu-hero-article details summary { color: var(--text-strong); }
.news-detail .mu-hero-article details summary::marker { color: var(--ember); }
.news-detail .mu-hero-article details > div { color: var(--text-muted); }

/* Notes and callouts: dark panels with a coloured rim instead of pastel boxes */
.news-detail .mu-hero-article .mu-note {
  background: linear-gradient(90deg, rgba(245, 201, 80, .1) 0%, rgba(245, 201, 80, .03) 100%);
  border: 1px solid rgba(245, 201, 80, .2);
  border-left: 4px solid var(--gold);
  border-radius: var(--r-md);
  color: var(--text);
}
.news-detail .mu-hero-article .mu-note--warning { background: var(--brand-soft); border-color: var(--brand-line); border-left-color: var(--brand-2); }
.news-detail .mu-hero-article .mu-callout { background: var(--surface-1); border-color: var(--border-strong); border-radius: var(--r-md); box-shadow: var(--bevel); color: var(--text); }
.news-detail .mu-hero-article .mu-callout--good { background: var(--success-soft); border-color: rgba(79, 209, 139, .3); }
.news-detail .mu-hero-article .mu-callout--warn { background: var(--warning-soft); border-color: rgba(245, 184, 74, .3); }
.news-detail .mu-hero-article .news-list-fixes { background: var(--surface-1); border-color: var(--border); box-shadow: var(--bevel); }
.news-detail .mu-hero-article .news-list-fixes li span { color: var(--success); }

/* Tables (.mu-realm-table): same look as ui.css .data-table */
.news-detail .mu-table-wrap { max-width: 100%; overflow-x: auto; }
.news-detail .mu-hero-article .mu-table-wrap { background: var(--table-bg); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--bevel); }
.news-detail .mu-hero-article table { width: 100%; border-collapse: collapse; }
.news-detail .mu-hero-article .mu-realm-table { color: var(--text); }
.news-detail .mu-hero-article .mu-realm-table thead { background: var(--thead-bg); }
.news-detail .mu-hero-article .mu-realm-table :is(th, td) { border-bottom-color: var(--row-line); }
.news-detail .mu-hero-article .mu-realm-table th { color: var(--text-strong); }
.news-detail .mu-hero-article .mu-realm-table thead th { color: var(--thead-fg); border-bottom-color: var(--thead-line); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; }
.news-detail .mu-hero-article .mu-realm-table tbody tr:last-child :is(td, th) { border-bottom: 0; }
.news-detail .mu-hero-article .mu-realm-table tbody tr:nth-child(even) { background: var(--row-alt); }
.news-detail .mu-hero-article .mu-realm-table tbody tr:hover { background: var(--row-hover); }
.news-detail .mu-hero-article .mu-realm-table td strong { color: var(--gold); }

/* Speed tags (realm comparison table): translucent tints, inset rim so sizes stay put */
.news-detail .mu-hero-article .mu-tag { background: var(--chip-bg); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--border-strong); }
.news-detail .mu-hero-article .mu-tag-fast { background: var(--brand-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--brand-line); }
.news-detail .mu-hero-article .mu-tag-medium { background: var(--gold-soft); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-line); }
.news-detail .mu-hero-article .mu-tag-slow { background: var(--info-soft); color: var(--info); box-shadow: inset 0 0 0 1px rgba(122, 184, 255, .3); }

/* Old CTA buttons inside bodies: molten lava like .btn--primary */
.news-detail .mu-hero-article .btn-download {
  border: 1px solid #ffb56b;
  background: var(--lava);
  color: #fff;
  text-shadow: 0 1px 1px rgba(60, 6, 2, .55);
  box-shadow: inset 0 1px 0 rgba(255, 226, 190, .55), inset 0 -2px 0 rgba(70, 6, 2, .35), 0 0 0 1px rgba(70, 8, 3, .7), 0 8px 22px rgba(227, 58, 23, .38);
}
.news-detail .mu-hero-article .btn-download strong { color: #fff; }
.news-detail .mu-hero-article .btn-download:hover { color: #fff; filter: brightness(1.1) saturate(1.05); }
/* es/gran-apertura-2025: the CTA carries an inline pale-gold style="" (only !important beats it) */
.news-detail .mu-hero-article a.button[style] {
  border: 1px solid #ffb56b !important;
  border-radius: var(--r-sm) !important;
  background: var(--lava) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 226, 190, .55), inset 0 -2px 0 rgba(70, 6, 2, .35), 0 0 0 1px rgba(70, 8, 3, .7), 0 8px 22px rgba(227, 58, 23, .38) !important;
}
/* ui.css .button is nowrap; this long CTA must wrap on phones */
.news-detail .mu-hero-article a.button { max-width: 100%; white-space: normal; line-height: 1.3; }

/* Speed Realm August 2026 + Summer Edition bodies: their own light card system, re-skinned */
.news-detail .mu-hero-article :is(.speed-hero, .summer-hero) {
  background: radial-gradient(80% 120% at 0% 0%, rgba(232, 64, 31, .3) 0%, rgba(232, 64, 31, 0) 55%), linear-gradient(90deg, rgba(11, 8, 7, .94) 0%, rgba(11, 8, 7, .78) 50%, rgba(11, 8, 7, .5) 100%), url(/assets/realm/backdrop-960.webp?v=1791395902) 60% 45% / cover no-repeat, var(--ink-900);
  border: 1px solid rgba(245, 201, 80, .26);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 60px rgba(0, 0, 0, .45);
  color: var(--on-ink);
}
.news-detail .mu-hero-article :is(.speed-hero, .summer-hero) p { color: #ddd0c2; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.news-detail .mu-hero-article :is(.speed-kicker, .summer-kicker) { background: rgba(245, 201, 80, .12); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(245, 201, 80, .42); }
.news-detail .mu-hero-article :is(.speed-stat, .summer-stat) { background: rgba(11, 8, 7, .62); border-color: rgba(245, 201, 80, .24); border-radius: var(--r-md); box-shadow: var(--bevel); }
.news-detail .mu-hero-article :is(.speed-stat, .summer-stat) strong { color: var(--gold); font-family: var(--font-display); }
.news-detail .mu-hero-article :is(.speed-stat, .summer-stat) span { color: var(--on-ink-muted); }
.news-detail .mu-hero-article :is(.speed-callout, .summer-callout) { background: linear-gradient(90deg, rgba(245, 201, 80, .13) 0%, rgba(245, 201, 80, .04) 100%); border-color: var(--gold-line); border-radius: var(--r-md); box-shadow: var(--bevel); color: var(--text-strong); }
.news-detail .mu-hero-article :is(.speed-card, .summer-card) { background: var(--gold-hair) top / 100% 1px no-repeat, var(--card-bg); border-color: var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm), var(--bevel); }
.news-detail .mu-hero-article :is(.speed-card, .summer-card) h3 { color: var(--gold); }
.news-detail .mu-hero-article :is(.speed-card, .summer-card) p { color: var(--text-muted); }
.news-detail .mu-hero-article :is(.speed-list, .summer-list) li { background: var(--surface-1); border-color: var(--border); border-radius: var(--r-md); color: var(--text); }
.news-detail .mu-hero-article .speed-list li::before { background: var(--lava); color: #fff; box-shadow: 0 0 10px rgba(255, 90, 30, .45); }
.news-detail .mu-hero-article .speed-faq details { background: var(--surface-1); border-color: var(--border); border-radius: var(--r-md); box-shadow: var(--bevel); }
.news-detail .mu-hero-article .speed-faq summary { color: var(--text-strong); }
.news-detail .mu-hero-article .speed-faq details p { color: var(--text-muted); }