/* ==========================================================================
   PBN Portal — brand skin. Palette from the Portal icon (navy "P" + red signal).
   Character: light broadsheet, SERIF display headlines, generous, authoritative.
   Only overrides tokens + a few headline treatments — structure stays in base.
   ========================================================================== */
:root {
  --c-primary: #1a3a5c;       /* navy — from logo */
  --c-primary-700: #122a44;
  --c-primary-100: #e6edf3;
  --c-accent: #c41e3a;        /* red — from signal mark */
  --c-accent-100: #fbe7eb;
  --c-on-primary: #ffffff;
  --c-on-accent: #ffffff;

  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-surface-2: #f4f6f8;
  --c-text: #16202c;
  --c-text-muted: #586273;
  --c-border: #e2e7ec;

  --c-header-bg: #1a3a5c;
  --c-header-text: #ffffff;
  --c-topbar-bg: #122a44;
  --c-footer-bg: #122a44;

  /* Editorial serif display sets Portal apart from its sister sites. */
  --font-display: Georgia, "Times New Roman", "Noto Serif", serif;
}

/* Broadsheet flourishes unique to Portal */
.lead__title { letter-spacing: -.015em; }
.lead__title a { color: var(--c-primary); }
.section__title { font-family: var(--font-body); }   /* labels stay sans for contrast with serif heads */
.rail__head, .widget__title { font-family: var(--font-body); }
.kicker { border-radius: 2px; }
.topbar { letter-spacing: .02em; }
.brand__name { font-family: var(--font-display); }
/* Lock the square logo's displayed ratio (deterministic, no aspect-ratio flake). */
.brand .custom-logo { aspect-ratio: 1 / 1; width: auto; }

/* Broadsheet cues: serif lede + pull-quote carry the editorial voice past the
   headline, deepening Portal's distance from the dark/condensed sister sites. */
.lead__excerpt { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.55; }
.prose blockquote { font-family: var(--font-display); font-size: 1.2rem; }

/* ---- Premium national-broadsheet hierarchy (restrained, not busy) ---- */
/* Masthead accent rule under the header — a classic newspaper cue. */
.site-header { border-bottom: 3px solid var(--c-accent); }

/* Section + rail labels: stronger, more editorial. */
.section__title { font-weight: 800; letter-spacing: .05em; }
.rail__head { font-weight: 800; letter-spacing: .05em; color: var(--c-primary); border-bottom-width: 3px; }

/* Hero hierarchy: a touch larger lede on desktop + a hairline meta divider. */
@media (min-width: 880px) { .lead__title { font-size: clamp(2.1rem, 2.7vw, 2.9rem); } }
.lead__meta { border-top: 1px solid var(--c-border); padding-top: var(--sp-3); margin-top: var(--sp-1); }

/* Kicker: refined, slightly elevated category chip. */
.kicker { letter-spacing: .09em; }
.card__kicker, .lead__kicker { box-shadow: 0 2px 8px rgba(20, 32, 48, .28); }

/* Cards: firmer titles, accent on hover. */
.card__title { font-weight: 700; }
.card__title a:hover, .lead__title a:hover { color: var(--c-accent); }

/* Numbered "Populer" list: serif numerals for an editorial index feel. */
.rank__item::before { color: var(--c-primary); }