/* ==========================================================================
   PBN Garuda — brand skin. Palette from the Garuda icon (charcoal eagle +
   rust-orange wing). Character: DARK premium "breaking/live", heavy sans
   headlines, ticker on. Same hero-grid skeleton as Portal but a different
   world — proves differentiation is structural+tonal, not just hue.
   ========================================================================== */
:root {
  --c-primary: #ea6a35;        /* interactive orange (links/hover) — AA on dark */
  --c-primary-700: #0f0c0a;
  --c-primary-100: #2a221d;
  --c-accent: #c2410c;         /* chip/kicker bg with white text */
  --c-accent-100: #2a1a12;
  --c-on-primary: #ffffff;
  --c-on-accent: #ffffff;

  --c-bg: #15110e;             /* warm near-black */
  --c-surface: #1d1814;
  --c-surface-2: #272019;
  --c-text: #f4efe9;
  --c-text-muted: #c5bbb1;   /* lightened for safe small-text contrast on dark (>= 7:1) */
  --c-border: #352c25;
  --c-link: #ef7c4d;

  --c-header-bg: #1c1917;      /* charcoal — the eagle */
  --c-header-text: #ffffff;
  --c-header-muted: rgba(255,255,255,.70);
  --c-topbar-bg: #0f0c0a;
  --c-topbar-text: rgba(255,255,255,.80);
  --c-footer-bg: #0f0c0a;

  --c-chip-bg: var(--c-accent);
  --c-chip-text: #ffffff;

  /* Condensed, heavy display = the "breaking" voice promised by the brand. */
  --font-display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", system-ui, sans-serif;

  /* Denser, more urgent rhythm than Portal's airy broadsheet (asset-free). */
  --lh-tight: 1.1;
  --lh-body: 1.6;
  --radius: 6px;
  --radius-sm: 4px;
}
h1, h2, h3, .lead__title, .card__title { font-stretch: condensed; }

/* Heavy "breaking" headline voice (sans, tight, urgent) */
.lead__title { font-weight: 800; letter-spacing: -.022em; }
.lead__title a, .card__title a, .rank__title a { color: var(--c-text); }
.lead__title a:hover, .card__title a:hover { color: var(--c-link); }
.card__title { font-weight: 700; }
.section__title { color: var(--c-text); }

/* Ghost kicker (category label on dark surface): the deep accent fails AA at
   small sizes (3.4:1) — use the lighter link orange (6.8:1). */
.kicker--ghost { color: var(--c-link); }

/* Interactive states retuned for white-on-orange contrast (use the deep accent) */
.cat-strip a:hover,
.pagination .is-current,
.share a:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* Card media a touch deeper so photos pop on the dark canvas */
.card__media, .lead__media { background: var(--c-surface-2); }

/* Lock the square logo's displayed ratio (deterministic, no aspect-ratio flake). */
.brand .custom-logo { aspect-ratio: 1 / 1; width: auto; }

/* Ticker present but calmer — a signature cue, not the loudest thing on screen:
   subtle border, smaller label, muted running text. */
.ticker { background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); }
.ticker__label { font-size: .7rem; padding-block: var(--sp-1); }
.ticker__track a { font-size: .8rem; color: var(--c-text-muted); }
.ticker__track a::before { color: var(--c-accent); }
.section__title::before { width: 8px; }

/* Live energy cue in the top bar — dot drawn as background so screen readers
   announce only "LIVE" (not "black circle LIVE"). */
.topbar__date::before {
  content: "LIVE";
  color: #ff6b3d; font-weight: 800; letter-spacing: .08em; font-size: .92em;
  margin-right: 12px; padding-left: 14px;
  background: radial-gradient(circle at 4px 50%, #ff3d3d 0 4px, transparent 5px);
}