/* ==========================================================================
   PBN Kabar — brand skin. Palette from the Kabar icon (teal "K" + open book +
   amber). Character: LOCAL, HUMANE, WARM — warm white, teal chrome, amber accent,
   ROUNDED image-forward rows (thumb on the left), humanist type, cozier rhythm.
   Archetype: full-width-list. Distinct from Tera (violet/clean/squared/thumb-right).
   ========================================================================== */
:root {
  --c-primary: #0e7490;        /* teal — from logo */
  --c-primary-700: #0c5c73;
  --c-primary-100: #d6eef2;
  --c-accent: #b45309;         /* amber — book accent (AA on warm white) */
  --c-accent-100: #fbe6cf;
  --c-on-primary: #ffffff;
  --c-on-accent: #ffffff;

  --c-bg: #fffefb;             /* warm white */
  --c-surface: #ffffff;
  --c-surface-2: #f4f1ea;      /* warm neutral */
  --c-text: #1b1a17;
  --c-text-muted: #5f5a50;
  --c-border: #e9e3d8;

  --c-header-bg: #0e7490;
  --c-header-text: #ffffff;
  --c-header-muted: #e6f3f6;   /* tagline: AA on the teal header */
  --c-topbar-bg: #0c5c73;
  --c-footer-bg: #0c4a52;      /* deep teal */

  /* Humanist sans (system — no external font). */
  --font-display: "Avenir Next", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --lh-body: 1.7;
}

/* Lock the non-square logo's true ratio so it never distorts. */
.brand .custom-logo { aspect-ratio: 82 / 88; width: auto; }

/* Warm/humane list character: rounded, image-forward (thumb LEFT), softer badges. */
.fwl { --fwl-radius: 12px; }
.fwl-item { grid-template-columns: 120px 1fr; }
.fwl-item__thumb { grid-column: 1; order: -1; }
.fwl-item--lead { grid-template-columns: 220px 1fr; }
.fwl-item__title { font-size: 1.12rem; line-height: 1.34; }
.fwl-item__cat { background: var(--c-primary-100); color: var(--c-primary-700); padding: 2px 9px; border-radius: 999px; display: inline-block; }
/* Warm amber, clarified elegantly; teal kept light in content. */
.fwl-bar__live { color: var(--c-accent); }
.fwl-trending__list a::before { color: var(--c-accent); }   /* amber rank numerals */
.fwl-rail > section { background: var(--c-surface-2); }       /* warm cream rail cards */
.fwl-item:hover { box-shadow: inset 3px 0 0 var(--c-accent); } /* elegant amber edge on hover */
.fwl-item--lead { border-bottom-color: var(--c-accent); }      /* amber top-story baseline */
.fwl-item--lead .fwl-item__title a:hover { color: var(--c-accent); }

@media (max-width: 599px) {
  .fwl-item { grid-template-columns: 104px 1fr; }
  .fwl-item--lead { grid-template-columns: 1fr; }
  .fwl-item--lead .fwl-item__thumb { order: -1; }
}
@media (min-width: 600px) { .fwl-item { grid-template-columns: 160px 1fr; } }