/* ============================================================================
   Tokens
   ============================================================================ */
:root {
  /* Neutral dark backgrounds — warm gray, no blue or green tint */
  --bg: #131414;
  --bg-raised: #191a1a;
  --surface: #1e1f1f;
  --surface-hover: #262727;
  --surface-raised: #2b2d2d;
  --surface-card: #1a1b1b;

  /* Text — neutral warm */
  --text: #e8e8e4;
  --text-secondary: #a5a5a0;
  --text-dim: #737370;

  /* Mint — punchy neon back as primary */
  --mint: #00E6A0;
  --mint-logo: #a9d2c2;
  --mint-muted: rgba(0, 230, 160, 0.10);
  --mint-border: rgba(0, 230, 160, 0.20);
  --mint-glow: rgba(0, 230, 160, 0.05);

  /* Coral — energy accent */
  --coral: #FF698F;
  --coral-muted: rgba(255, 105, 143, 0.12);
  --coral-border: rgba(255, 105, 143, 0.22);

  /* Spearmint editorial — distinct purple identity */
  --spearmint: #9b7de8;
  --spearmint-muted: rgba(155, 125, 232, 0.10);
  --spearmint-border: rgba(155, 125, 232, 0.22);

  /* Source language accents */
  --blue: #6da4f0;
  --orange: #e8924a;
  --orange-muted: rgba(232, 146, 74, 0.12);

  /* Functional */
  --urgency-critical: #ff5050;
  --urgency-critical-bg: rgba(255, 80, 80, 0.12);
  --urgency-watch: #ffb432;
  --urgency-watch-bg: rgba(255, 180, 50, 0.12);

  /* Borders */
  --border: rgba(255, 255, 255, 0.07);
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-card: rgba(255, 255, 255, 0.08);

  /* Typography */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius: 8px;
  --radius-lg: 12px;
  --radius-sm: 4px;

  --sidebar-width: 320px;
  --sidebar-sticky-top: 76px;
  --content-max: 1220px;
  --content-padding: 40px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: radial-gradient(ellipse at 50% 25%, #1e1e1e 0%, #111111 70%) no-repeat fixed;
  background-color: #111111;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: url('/images/noise.png') repeat;
  opacity: 0.035;
  pointer-events: none;
  z-index: 9999;
}

a { color: inherit; text-decoration: none; }
img { border: 0; outline: 0; }

/* ============================================================================
   Top Accent Stripe
   ============================================================================ */
body::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--mint) 0%, var(--coral) 50%, var(--mint) 100%);
}

/* ============================================================================
   Nav
   ============================================================================ */
.nav {
  background: rgba(19, 20, 20, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-padding);
  height: 60px;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: var(--space-4);
  flex-shrink: 0;
}

.nav__logo-svg {
  width: 38px;
  height: auto;
  color: var(--mint);
}

.nav__logo-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 21px;
  color: var(--mint);
  letter-spacing: -0.02em;
}

.nav__links { display: flex; align-items: center; gap: var(--space-6); }

.nav__link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.01em;
  transition: color 0.15s;
  white-space: nowrap;
  padding: 4px 0;
}

.nav__link:hover { color: var(--text); }

.nav__link--active {
  color: var(--mint);
  position: relative;
}

.nav__link--active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--mint);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(0, 230, 160, 0.3);
}

.nav__hamburger {
  display: none;
  width: 22px;
  height: 16px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  margin-left: auto;
}

.nav__hamburger span {
  height: 2px;
  background: var(--text-secondary);
  border-radius: 1px;
}

/* ============================================================================
   Page Grid
   ============================================================================ */
.page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-10) var(--content-padding) var(--space-16);
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--space-12);
  align-items: start;
}

/* ============================================================================
   Brief Column
   ============================================================================ */
.brief { min-width: 0; }

/* ── Hero Image ────────────────────────────────────── */
.brief__hero-img {
  width: 100%;
  aspect-ratio: 2.2 / 1;
  background: #fff;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
  overflow: hidden;
  position: relative;
}

.brief__hero-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Brief Header ──────────────────────────────────── */
.brief__masthead {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 18px 24px 16px;
  margin-bottom: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.brief__masthead-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.brief__brand-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  color: var(--mint);
  letter-spacing: -0.02em;
  line-height: 1;
}

.brief__brand-tagline {
  font-size: 13px;
  font-style: italic;
  color: var(--text-dim);
  line-height: 1;
}

.brief__date {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

.brief__header {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
}

.brief__headline {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
  color: var(--text);
}

.brief__dek {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 62ch;
}

/* ============================================================================
   Section Label
   ============================================================================ */
.section-label {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ============================================================================
   Story Card (contained block)
   ============================================================================ */
.story-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-6);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.story-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: var(--border);
}

.story-card__img {
  width: 100%;
  aspect-ratio: 2.4 / 1;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.story-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.story-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.story-card__body {
  padding: 22px 24px 24px;
}

.story-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

.story-card__context {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

/* ── Source Cluster ─────────────────────────────────── */
.sources {
  margin-bottom: var(--space-4);
}

/* Coverage label — clickable toggle for source tile expand/collapse.
   Clicking any Coverage label toggles all tiles globally via .sources-expanded
   on <body>. */
.sources__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}

.sources__label:hover { color: var(--text-secondary); }

.sources__toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  margin-left: 2px;
  font-size: 8px;
  vertical-align: 1px;
}

.sources-expanded .sources__toggle-icon { transform: rotate(90deg); }

/* Source tile grid — auto-fills 2-3 columns */
.sources__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 5px;
}

/* Base tile (blog) — collapsed by default (head row only).
   .sources-expanded on <body> reveals the headline row. */
.source-tile {
  --tile-accent-color: var(--blue);
  background: color-mix(in oklab, var(--surface-raised) 94%, var(--tile-accent-color) 6%);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sources-expanded .source-tile { padding: 8px 10px 7px; }

.source-tile:hover {
  background: color-mix(in oklab, var(--surface-hover) 94%, var(--tile-accent-color) 6%);
}

/* Variants */
.source-tile--de { --tile-accent-color: var(--orange); }
.source-tile--yt { --tile-accent-color: var(--coral); }

/* Tile header row: name + meta on one line.
   margin-bottom is 0 when collapsed (no headline below), 2px when expanded. */
.source-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 0;
}

.sources-expanded .source-tile__head { margin-bottom: 2px; }

/* Source name never shrinks — the author absorbs pressure and truncates
   first. This prevents the DE tag and source name from getting clipped
   when a long author name competes for horizontal space. */
.source-tile__name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.source-tile__de-tag {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--orange);
  background: var(--orange-muted);
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.source-tile__author {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

/* Source-tile inline SVG icon — 12×12 outline glyphs that sit left of the
   source name. YouTube tiles get a play-rectangle, blog tiles get a
   newspaper. Both use `currentColor` so they inherit the tile's accent
   color from the parent .source-tile__name. Outline style (stroke, no
   fill on main shapes) keeps them subtle on the dark surface.
   Icons sourced from MBMr1's buildSourceIcon() in editorial-app.js. */
.source-tile__icon {
  flex-shrink: 0;
  vertical-align: -1.5px;
}

/* Blog tiles inherit --blue by default; DE tiles get --orange.
   .source-tile.source-tile--de needed to match the :not() specificity. */
.source-tile:not(.source-tile--yt) .source-tile__icon { color: var(--blue); }
.source-tile.source-tile--de .source-tile__icon { color: var(--orange); }
.source-tile--yt .source-tile__icon { color: var(--coral); }

.source-tile__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-dim);
}

.source-tile__duration {
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  padding: 0px 4px;
  border-radius: 2px;
  font-size: 9.5px;
  color: var(--text-secondary);
}

/* Headline — hidden by default (collapsed state). Revealed by
   .sources-expanded on <body>. */
.source-tile__headline {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
  display: none;
}

/* Visual-only animation on expand — headline fades in, tile subtly settles.
   These use opacity/transform only, so they don't affect layout or interfere
   with JS-based scroll pinning. The .sources-animating gate ensures the
   animation only plays on toggle, not on page load. */
@keyframes headline-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tile-settle {
  from { transform: scaleY(0.98); }
  to   { transform: scaleY(1); }
}

.sources-expanded .source-tile__headline {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sources-animating.sources-expanded .source-tile__headline {
  animation: headline-fade-in 0.18s ease-out both;
}
.sources-animating.sources-expanded .source-tile {
  animation: tile-settle 0.15s ease-out both;
}

.source-tile:hover .source-tile__headline { color: var(--text); }

/* ── Minty Take ────────────────────────────────────── */
.minty-take {
  background: linear-gradient(135deg, rgba(0, 230, 160, 0.10), rgba(0, 180, 120, 0.06), rgba(0, 140, 90, 0.03));
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-top: var(--space-4);
}

.minty-take__label {
  font-size: 10px;
  font-weight: 700;
  color: var(--mint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: 5px;
}

.minty-take__icon {
  width: 22px;
  height: auto;
  flex-shrink: 0;
}

.minty-take__text {
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.7;
  color: var(--text);
}

/* ============================================================================
   Spearmint Card (resurfaced)
   ============================================================================ */
.spearmint-card {
  background: var(--spearmint-muted);
  border: 1px solid var(--spearmint-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: var(--space-6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.spearmint-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(155, 125, 232, 0.12);
}

.spearmint-card__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--spearmint);
  margin-bottom: var(--space-1);
}

.spearmint-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-1);
}

.spearmint-card__meta {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.spearmint-card__date { color: var(--spearmint); font-weight: 500; }

/* ============================================================================
   YouTube Tile (lives inside Also Happening — see below)
   ============================================================================ */
.yt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px;
}

.yt-tile {
  background: color-mix(in oklab, var(--surface-raised) 94%, var(--coral) 6%);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: start;
  gap: 0;
  transition: background 0.15s, transform 0.2s ease;
  overflow: hidden;
}

.yt-tile:hover {
  background: color-mix(in oklab, var(--surface-hover) 94%, var(--coral) 6%);
  transform: translateY(-2px);
}

.yt-tile__left {
  flex-shrink: 0;
  width: 110px;
  display: flex;
  flex-direction: column;
}

.yt-tile__thumb {
  width: 110px;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: var(--surface-raised);
}

.yt-tile__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  outline: none;
}

.yt-tile__thumb img[src=""],
.yt-tile__thumb img:not([src]) {
  visibility: hidden;
}

.yt-tile__thumb-dur {
  position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: 9px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.02em;
}

.yt-tile__stats {
  font-size: 9.5px;
  color: var(--text-dim);
  padding: 3px 6px;
  text-align: center;
}

.yt-tile__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 8px 10px;
  flex: 1;
}

.yt-tile__creator {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.yt-tile__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  background: var(--coral);
  border-radius: 2px;
  flex-shrink: 0;
}

.yt-tile__play::after {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid #fff;
  border-top: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  margin-left: 0.5px;
}

.yt-tile__title {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.yt-tile:hover .yt-tile__title { color: var(--text); }

/* ============================================================================
   Brief Section primitives — reusable across Also Happening, New Reviews,
   Techniques & Learning, and New in the Community.

   Architecture:
     .brief-section          — bordered surface container (apply alongside a
                               section marker like .also-happening, .new-reviews,
                               .new-techniques, .new-community)
     .cluster-card           — multi-source mini-lead (mb_headline + dek + pills)
     .text-item              — compact text row (flex: text on left, source right)

   Empty sections never render — section functions early-return on empty arrays.
   ============================================================================ */
.brief-section {
  margin-bottom: var(--space-10);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brief-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.brief-section .section-label {
  margin-bottom: var(--space-4);
}

/* ── Cluster card (multi-source mini-lead) ─────────────── */
.cluster-card {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.cluster-card:first-of-type { padding-top: var(--space-2); }

.cluster-card__headline {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-2);
  color: var(--text);
}

.cluster-card__dek {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.cluster-card__pills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px;
}

/* Lead-story-style source tile grid inside a cluster card.
   Reuses .sources__grid for the grid columns; this rule just adds the
   top spacing the standalone grid would normally inherit from .sources. */
.cluster-card__tiles { margin-top: var(--space-3); }

/* Cluster card with image — horizontal layout.
   Default .cluster-card is a plain block; .cluster-card--with-image
   switches it to a 2-column grid with the image on the left and the
   headline/dek/sources on the right. On mobile it stacks. */
.cluster-card--with-image {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-5);
  align-items: start;
}

.cluster-card__image {
  width: 200px;
  aspect-ratio: 16 / 9;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.cluster-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cluster-card__body { min-width: 0; }

@media (max-width: 640px) {
  .cluster-card--with-image {
    grid-template-columns: 1fr;
  }
  .cluster-card__image,
  .cluster-card__image img {
    width: 100%;
  }
}

/* ── Text item (compact row, used for standalone items in any section) ── */
.text-item {
  padding: 10px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 13.5px;
  line-height: 1.5;
  transition: background 0.15s;
  color: inherit;
  text-decoration: none;
}

.text-item:hover { background: var(--surface-hover); }

/* First text-item after a cluster gets a top gap to separate the zones. */
.cluster-card + .text-item { margin-top: var(--space-3); }

.text-item__text { flex: 1; min-width: 0; }
.text-item__text strong { font-weight: 600; }

.text-item__source {
  font-size: 10.5px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Strip the bottom border on whichever cluster/item is the very last child
   of any brief-section. When more content follows (e.g. the also-happening
   YT grid), the preceding cluster/item keeps its border as a clean separator. */
.cluster-card:last-child,
.text-item:last-child {
  border-bottom: none;
}

/* ── Also Happening: zone 3 YouTube tile grid (section-specific) ─────────
   Locked to exactly 2 columns at desktop (matching the original "On YouTube
   Today" layout). Auto-fill would otherwise give 3 columns at the mobile
   breakpoint when the sidebar disappears and the brief column widens. */
.also-happening__yt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: var(--space-4);
}

@media (max-width: 640px) {
  .also-happening__yt-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   Trend Watch
   ============================================================================ */
.trend-watch {
  border: 1px solid var(--mint-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: var(--space-10);
  background: var(--mint-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trend-watch:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 230, 160, 0.08);
}

.trend-watch__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--mint);
  margin-bottom: var(--space-4);
}

.trend-watch__item { margin-bottom: var(--space-4); }
.trend-watch__item:last-child { margin-bottom: 0; }

.trend-watch__heading {
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.trend-watch__text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ============================================================================
   Date Nav / Philosophy
   ============================================================================ */
.date-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dim);
}

.date-nav a { color: var(--mint); font-weight: 500; }

.philosophy {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
  text-align: center;
}

.philosophy__values {
  font-size: 13px;
  font-weight: 600;
  color: var(--mint);
  margin-bottom: var(--space-2);
}

.philosophy__text {
  font-size: 12.5px;
  color: var(--text-dim);
  font-style: italic;
}

.philosophy__text a { color: var(--mint); text-decoration: underline; text-decoration-color: var(--mint-border); text-underline-offset: 2px; }

/* ============================================================================
   Sidebar
   ============================================================================ */
.sidebar {
  align-self: stretch; /* Span full grid row so sticky wrapper has room to stick */
}

.sidebar-wrapper {
  position: sticky;
  top: var(--sidebar-sticky-top);
  height: calc(100vh - var(--sidebar-sticky-top));
  box-sizing: border-box;
}

.sidebar-inner {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: auto;
  box-sizing: border-box;
  scrollbar-width: none;                       /* Firefox: hidden by default */
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.sidebar-inner:hover {
  scrollbar-width: thin;                       /* Firefox: show on hover */
}

.sidebar-inner::-webkit-scrollbar { width: 5px; }
.sidebar-inner::-webkit-scrollbar-track { background: transparent; }
.sidebar-inner::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0); border-radius: 10px; transition: background-color 0.2s; }
.sidebar-inner:hover::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.15); }
.sidebar-inner:hover::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.3); }


.sidebar-module {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: var(--space-4);
}

.sidebar-module__header {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-module__subtitle {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: var(--text-dim);
  margin-right: auto;
  margin-left: 6px;
}

.sidebar-module__link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--mint);
}

/* Hidden state for load-more items */
.sidebar-loadmore-hidden { display: none !important; }

/* Load More button — thin, same width as module */
.sidebar-loadmore-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-loadmore-btn:hover {
  background: rgba(0, 230, 160, 0.08);
  color: var(--mint);
  border-color: rgba(0, 230, 160, 0.2);
}

/* "See More" CTA button at bottom of scrollable modules */
.sidebar-module__more-btn {
  display: block;
  text-align: center;
  margin-top: 10px;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--mint);
  background: rgba(0, 230, 160, 0.08);
  border: 1px solid rgba(0, 230, 160, 0.2);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.sidebar-module__more-btn:hover {
  background: rgba(0, 230, 160, 0.15);
  border-color: rgba(0, 230, 160, 0.4);
}

/* Discovery */
.discovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.discovery-column { text-align: center; }

.discovery-column__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: var(--space-2);
}

.discovery-column__label {
  font-size: 9px;
  font-weight: 600;
  color: var(--mint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.header-reroll-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  color: #a5a5a0;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
}

.header-reroll-btn:hover { color: #00E6A0; }
.header-reroll-btn:disabled { cursor: not-allowed; opacity: 0.3; }

.header-reroll-btn.spinning svg {
  animation: reroll-spin 0.4s ease-in-out;
}

@keyframes reroll-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.sidebar-attribution,
.discovery-attribution {
  font-size: 9px;
  color: #aaa;
  text-align: center;
  letter-spacing: 0.01em;
  margin-top: 12px;
  margin-bottom: -6px;
  padding: 0;
}
.sidebar-attribution a,
.discovery-attribution a {
  color: #bbb;
  text-decoration: underline;
  text-decoration-color: rgba(180, 180, 180, 0.4);
  text-underline-offset: 2px;
}
.sidebar-attribution a:hover,
.discovery-attribution a:hover {
  color: #e0e0e0;
}

.discovery-item { text-align: center; }

/* Specimen Card (white card with part image) */
.specimen-card {
  display: block;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 10px 10px 18px;
  margin-bottom: var(--space-2);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.specimen-card::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.12);
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
}

.specimen-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.specimen-card img {
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Discovery image wrapper — overflow visible so pill badge can straddle edge */
.discovery-image-wrapper {
  position: relative;
  overflow: visible;
}

/* Inner clip — rounded corners concentric with card (card: 10px radius, 10px padding → 6px) */
.discovery-image-inner {
  overflow: hidden;
  border-radius: 6px;
}

.discovery-image-inner img {
  display: block;
  border-radius: 6px;
}

/* Frosted ID pill badge — specimen catalog metadata */
.discovery-id-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-4%, 60%);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #aaaaaa;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* Brick of the Day text */
.brick-name, .minifig-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-top: var(--space-2);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}

.brick-meta, .minifig-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  text-align: left;
}

/* Fun facts */
.brick-facts, .minifig-facts {
  margin-top: var(--space-2);
  text-align: left;
}

.brick-fact, .minifig-fact {
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  padding: 2px 0;
}

.fact-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 3px;
  border: 1px solid rgba(255,255,255,0.2);
}

/* Skeleton loading states */
.skeleton-loader { text-align: center; }

.skeleton-card {
  background: var(--surface-raised);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: var(--space-2);
}

.skeleton-image {
  width: 80px;
  height: 80px;
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-card) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius);
  margin: 0 auto;
}

.skeleton-text {
  height: 10px;
  background: linear-gradient(90deg, var(--surface-raised) 25%, var(--surface-card) 50%, var(--surface-raised) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
  margin: 6px auto 0;
}

.skeleton-text.title { width: 80%; height: 12px; }
.skeleton-text.subtitle { width: 60%; }

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Discovery error state */
.discovery-error {
  font-size: 12px;
  color: var(--text-dim);
  padding: 20px 0;
  text-align: center;
  line-height: 1.6;
}

/* Deals */
/* Sidebar deal cards — two-column: image left, info right */
.sidebar-deal {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}
.sidebar-deal:hover { opacity: 0.85; }
.sidebar-deal:last-child { border-bottom: none; }

/* Image column — white box with centered image + MSRP pill overlay */
.sidebar-deal__img-wrap {
  position: relative;
  width: 80px;
  min-height: 80px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.sidebar-deal__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.12);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}
.sidebar-deal__img-wrap img {
  display: block;
  max-width: 100%;
  max-height: 68px;
  height: auto;
  border-radius: 4px;
  object-fit: contain;
}

/* MSRP overlay pill — orange bg, black text, hangs off left edge */
.sidebar-deal__msrp-pill {
  position: absolute;
  bottom: -6px;
  left: -4px;
  background: #ffb432;
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 7px;
  white-space: nowrap;
  text-decoration: line-through;
  z-index: 2;
}

/* Info column */
.sidebar-deal__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Theme + set number on same line */
.sidebar-deal__meta {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 2px;
}
.sidebar-deal__theme {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}
.sidebar-deal__setnum {
  font-size: 9.5px;
  color: var(--text-dim);
  font-weight: 500;
}

.sidebar-deal__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

/* Bottom line: On Sale + See Deal Info on same row */
.sidebar-deal__bottom {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.sidebar-deal__status {
  font-size: 10px;
  color: var(--mint);
  font-weight: 600;
  white-space: nowrap;
}
.sidebar-deal__cta {
  font-size: 10px;
  color: #FF698F;
  font-weight: 600;
  white-space: nowrap;
}

/* SunSets */
/* Sidebar sunset cards — two-column like deals */
.sidebar-sunset {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}
.sidebar-sunset:hover { opacity: 0.85; }
.sidebar-sunset:last-child { border-bottom: none; }

.sidebar-sunset__img-wrap {
  width: 80px;
  min-height: 80px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  position: relative;
}
.sidebar-sunset__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.12);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}
.sidebar-sunset__img-wrap img {
  display: block;
  max-width: 100%;
  max-height: 68px;
  height: auto;
  border-radius: 4px;
  object-fit: contain;
}

.sidebar-sunset__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sidebar-sunset__meta {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 2px;
}
.sidebar-sunset__theme {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}
.sidebar-sunset__setnum {
  font-size: 9.5px;
  color: var(--text-dim);
  font-weight: 500;
}

.sidebar-sunset__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 4px;
}

.sidebar-sunset__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-sunset__cta {
  font-size: 10px;
  color: #FF698F;
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}

.sunset-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}

.sunset-badge--critical { background: var(--urgency-critical-bg); color: var(--urgency-critical); }
.sunset-badge--watch { background: var(--urgency-watch-bg); color: var(--urgency-watch); }
.sunset-badge--normal { background: rgba(255, 180, 50, 0.12); color: #ffb432; }

/* Spearmint sidebar cards */
.sidebar-spearmint {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}
.sidebar-spearmint:hover { opacity: 0.85; }
.sidebar-spearmint:last-of-type { border-bottom: none; }

.sidebar-spearmint__img-wrap {
  position: relative;
  width: 80px;
  min-height: 56px;
  flex-shrink: 0;
  background: var(--surface-raised);
  border-radius: 8px;
  overflow: hidden;
}
.sidebar-spearmint__img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.sidebar-spearmint__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.12);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}

.sidebar-spearmint__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sidebar-spearmint__title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar-spearmint__date {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Skill Issues sidebar cards — mirrors Spearmint layout */
.sidebar-skill {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}
.sidebar-skill:hover { opacity: 0.85; }
.sidebar-skill:last-of-type { border-bottom: none; }

.sidebar-skill__img-wrap {
  position: relative;
  width: 80px;
  min-height: 56px;
  flex-shrink: 0;
  background: var(--surface-raised);
  border-radius: 8px;
  overflow: hidden;
}
.sidebar-skill__img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.sidebar-skill__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.12);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}

.sidebar-skill__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sidebar-skill__title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar-skill__date {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Skill Issues (legacy) */
.skill-card {
  display: flex;
  gap: 10px;
  align-items: center;
}

.skill-card__thumb {
  width: 56px;
  height: 56px;
  background: var(--surface-raised);
  border-radius: var(--radius);
  flex-shrink: 0;
}

.skill-card__label {
  font-size: 9px;
  font-weight: 600;
  color: var(--mint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.skill-card__label--purple { color: var(--spearmint); }
.sidebar-module__link--purple { color: var(--spearmint); }

.skill-card__title {
  font-size: 12px;
  font-weight: 500;
  margin-top: 1px;
  line-height: 1.35;
}

/* App */
.app-promo { text-align: center; padding: 4px 0; }

.app-promo__icon {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin: 0 auto var(--space-2);
}

.app-promo__name { font-size: 13px; font-weight: 600; }
.app-promo__desc { font-size: 11px; color: var(--text-dim); margin-top: 1px; }

.app-promo__badge {
  display: inline-block;
  margin-top: var(--space-2);
  background: var(--surface-raised);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 5px;
}

/* Sidebar Brief Module (universal sidebar compact brief) */
.sidebar-brief__brand {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--mint);
  letter-spacing: -0.02em;
}
.sidebar-brief__date {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-brief__story {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar-brief__story:last-of-type { border-bottom: none; }

.sidebar-brief__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 4px;
}

.sidebar-brief__summary {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 6px;
}

.sidebar-brief__pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.source-pill {
  --tile-accent-color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  background: color-mix(in oklab, var(--surface-raised) 94%, var(--tile-accent-color) 6%);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  position: relative;
  transition: background 0.15s;
  white-space: nowrap;
  min-width: 0;
}
.source-pill--md { font-size: 9.5px; }
.source-pill--sm { font-size: 8.5px; }

.source-pill:hover {
  background: color-mix(in oklab, var(--surface-card) 94%, var(--tile-accent-color) 6%);
  color: var(--text);
}

.source-pill--de { --tile-accent-color: var(--orange); }
.source-pill--yt { --tile-accent-color: var(--coral); }

.source-pill__play {
  font-size: 7px;
  color: var(--coral);
  line-height: 1;
}

/* Source pill tooltips — rendered as a fixed-position element via JS to escape overflow contexts.
   Default palette is the blue (blog) variant; --de and --yt modifiers swap the palette to match
   the originating pill/tile color. */
.pill-tooltip {
  --tip-bg: rgba(40, 58, 82, 0.95);
  --tip-fg: #c8ddf0;
  --tip-border: rgba(91, 168, 217, 0.25);
  --tip-halo: rgba(91, 168, 217, 0.1);
  --tip-source: #8ab4d6;
  --tip-meta: #8298ad;

  position: fixed;
  background: var(--tip-bg);
  color: var(--tip-fg);
  border: 1px solid var(--tip-border);
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 400;
  font-family: var(--font-body);
  border-radius: 8px;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px var(--tip-halo);
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.pill-tooltip--de {
  --tip-bg: rgba(58, 42, 24, 0.95);
  --tip-fg: #f0dec4;
  --tip-border: rgba(232, 146, 74, 0.30);
  --tip-halo: rgba(232, 146, 74, 0.12);
  --tip-source: #d6b48a;
  --tip-meta: #ad988c;
}
.pill-tooltip--yt {
  --tip-bg: rgba(74, 30, 42, 0.95);
  --tip-fg: #f0c8d4;
  --tip-border: rgba(255, 105, 143, 0.30);
  --tip-halo: rgba(255, 105, 143, 0.12);
  --tip-source: #d68aaa;
  --tip-meta: #ad8298;
}
.pill-tooltip__source {
  font-size: 10px;
  font-weight: 600;
  color: var(--tip-source);
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}
.pill-tooltip__author {
  font-weight: 400;
  color: var(--tip-meta);
}
.pill-tooltip__headline {
  font-style: italic;
}
.pill-tooltip__extra {
  font-size: 10px;
  color: var(--tip-meta);
  margin-top: 3px;
}
.pill-tooltip--visible {
  opacity: 1;
}

.sidebar-brief__footer {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--mint);
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--border-subtle);
  text-decoration: none;
}

.sidebar-brief__footer:hover { text-decoration: underline; }

/* ============================================================================
   Interleaved Modules (mobile)
   ============================================================================ */
.interleave { display: none; }

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 1023px) {
  :root { --content-padding: 20px; }

  .page {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: var(--space-6);
  }

  .sidebar { display: none; }
  .interleave { display: block; margin: var(--space-6) 0; }
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
  .brief__headline { font-size: 32px; }
  .section-page__title { font-size: 32px; }
  .story-card__title { font-size: 19px; }

  .brief__masthead {
    padding: 14px 18px 12px;
    flex-direction: column;
    gap: var(--space-2);
  }

  .brief__brand-name { font-size: 22px; }
  .story-card__body { padding: 16px 18px 18px; }

  .sources__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 480px) {
  :root { --content-padding: 16px; }
  .brief__headline { font-size: 26px; }
  .brief__dek { font-size: 14px; }
}

/* ============================================================================
   Mobile Menu
   ============================================================================ */
.nav__mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) var(--content-padding) var(--space-4);
}

.nav__mobile-menu--open { display: flex; }

.nav__mobile-link {
  display: block;
  padding: var(--space-2) 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}

.nav__mobile-link:last-child { border-bottom: none; }
.nav__mobile-link:hover { color: var(--mint); }

.nav__hamburger--open span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}
.nav__hamburger--open span:nth-child(2) {
  opacity: 0;
}
.nav__hamburger--open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.nav__hamburger span {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ============================================================================
   Site Footer
   ============================================================================ */
.site-footer {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  padding: var(--space-10) var(--content-padding);
  margin-top: var(--space-16);
}

.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}

.site-footer__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--mint);
}

.site-footer__tagline {
  font-size: 12px;
  font-style: italic;
  color: var(--text-dim);
  margin-left: var(--space-2);
}

.site-footer__links {
  margin: var(--space-4) 0;
  display: flex;
  justify-content: center;
  gap: var(--space-6);
}

.site-footer__links a {
  font-size: 13px;
  color: var(--text-secondary);
  transition: color 0.15s;
}

.site-footer__links a:hover { color: var(--mint); }

.site-footer__legal {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
}

.site-footer__legal p { margin-bottom: var(--space-1); }

/* ============================================================================
   Share Widget
   ============================================================================ */

.mbShare-widget {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mbShare-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.mbShare-btn:hover { background: var(--surface-hover); color: var(--text); border-color: rgba(255,255,255,0.12); }
.mbShare-btn.mbShare-copied { color: var(--mint); border-color: rgba(0,230,160,0.3); }

.mbShare-icon { flex-shrink: 0; }

.mbShare-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.mbShare-modal[hidden] { display: none; }
.mbShare-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.mbShare-modal-content {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 24px;
  width: 380px;
  max-width: 90vw;
}

.mbShare-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.mbShare-modal-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.mbShare-modal-close { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 4px; }
.mbShare-modal-close:hover { color: var(--text); }

.mbShare-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.mbShare-url-input {
  width: 100%;
  font-family: monospace;
  font-size: 13px;
  padding: 8px 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  margin-bottom: 12px;
}

.mbShare-modal-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0,230,160,0.3);
  background: rgba(0,230,160,0.15);
  color: var(--mint);
  cursor: pointer;
  transition: background 0.15s;
}
.mbShare-modal-copy-btn:hover { background: rgba(0,230,160,0.25); }

.mbShare-success-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mint);
}

.mbShare-noscript { margin-top: 12px; font-size: 13px; color: var(--text-secondary); }

/* ============================================================================
   Section Page Shared (listings + detail pages)
   ============================================================================ */

.section-page { max-width: 800px; margin: 0 auto; padding: var(--space-8) var(--content-pad); }

.section-page__header { margin-bottom: var(--space-8); }
.section-page__title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  margin-bottom: var(--space-2);
}

.section-page__subtitle-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.section-page__subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.section-page__data-source {
  font-size: 10px;
  color: #aaa;
  white-space: nowrap;
  flex-shrink: 0;
}
.section-page__data-source a {
  color: #bbb;
  text-decoration: underline;
  text-decoration-color: rgba(180, 180, 180, 0.4);
  text-underline-offset: 2px;
}
.section-page__data-source a:hover {
  color: #e0e0e0;
}

.section-page__count {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: var(--space-2);
}

/* Card grid for listings */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

.card-grid--compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ============================================================================
   Deal Pages — Listing Cards
   ============================================================================ */

.deal-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.deal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.deal-card__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.deal-card__img {
  aspect-ratio: 4 / 3;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
  position: relative;
}
.deal-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.18);
  pointer-events: none;
  z-index: 1;
}

.deal-card__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.deal-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #4B9F4A;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.deal-card__body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.deal-card__theme {
  font-size: 11px;
  font-weight: 600;
  color: var(--mint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

.deal-card__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-2);
}

.deal-card__meta {
  display: flex;
  gap: var(--space-3);
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: var(--space-3);
}

.deal-card__set-num { font-weight: 500; }
.deal-card__pieces { white-space: nowrap; }

.deal-card__note {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
  padding: 8px 10px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--mint);
}

.deal-card__pricing {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  margin-bottom: var(--space-3);
}

.deal-card__msrp {
  font-size: 13px;
  color: var(--text-dim);
}

.deal-card__msrp strong {
  text-decoration: line-through;
  color: var(--text-secondary);
}

.deal-card__cta { margin-top: auto; }

/* Amazon button — shared between deal cards and detail pages */
.btn-amazon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(90deg, #FFCC66 0%, #FF8800 100%);
  color: #131414;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s, transform 0.1s;
  text-align: center;
}

.btn-amazon:hover {
  filter: brightness(1.05);
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-amazon--full {
  padding: 14px 20px;
  font-size: 15px;
}

/* Gradient CTA button — sunset cards, general purpose */
.btn-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(90deg, #80FFD4 0%, #00B87A 100%);
  color: #131414;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s, transform 0.1s;
  text-align: center;
}

.btn-gradient:hover {
  filter: brightness(1.05);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Deals page notice */
.deals-notice {
  margin-top: var(--space-8);
  padding: var(--space-4);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  border-top: 1px solid var(--border);
}

.deals-notice strong { color: var(--text-secondary); }

/* ============================================================================
   Deal Detail — Two-Column Layout
   ============================================================================ */

.deal-detail {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 0;
}

.deal-detail__image {
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  overflow: hidden;
}

.deal-detail__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.deal-detail__info {
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.deal-detail__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #4B9F4A;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: var(--space-3);
  align-self: flex-start;
}

.deal-detail__theme {
  font-size: 11px;
  font-weight: 600;
  color: var(--mint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

.deal-detail__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.deal-detail__meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-5);
}

.deal-detail__meta-item {
  background: var(--surface);
  padding: 10px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.deal-detail__meta-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.deal-detail__meta-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  word-break: break-word;
}

.deal-detail__pricing {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: var(--space-4);
}

.deal-detail__pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.deal-detail__pricing-label {
  font-size: 13px;
  color: var(--text-dim);
}

.deal-detail__pricing-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-decoration: line-through;
  color: var(--text-dim);
}

.deal-detail__pricing-note {
  font-size: 12px;
  color: var(--mint);
  margin-top: var(--space-2);
  font-weight: 500;
}

/* Description section below the two-column header */
.deal-detail__desc-section {
  padding: 24px;
  border-top: 1px solid var(--border);
}

.deal-detail__desc-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: var(--space-3);
}

.deal-detail__desc-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.deal-detail__read-more {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--mint);
  cursor: pointer;
}

.deal-detail__read-more:hover { text-decoration: underline; }

.deal-detail__note {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  background: var(--surface);
}

.deal-detail__note strong { color: var(--text); }

.deal-detail__affiliate {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

.deal-detail__affiliate strong { color: var(--text-secondary); }
.deal-detail__affiliate a {
  color: var(--text-dim);
  text-decoration: underline;
  text-decoration-color: rgba(180, 180, 180, 0.4);
  text-underline-offset: 2px;
}
.deal-detail__affiliate a:hover { color: var(--text-secondary); }

/* ============================================================================
   Shared Detail Page (SunSets, generic)
   ============================================================================ */

.detail-page { max-width: 700px; margin: 0 auto; padding: var(--space-8) var(--content-pad); }

.detail-page__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: var(--space-6);
  transition: color 0.15s;
}

.detail-page__back:hover { color: var(--mint); text-decoration: none; }

.detail-page__card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  overflow: hidden;
}

.detail-page__hero {
  aspect-ratio: 16 / 10;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.detail-page__hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-page__content { padding: 24px; }

.detail-page__theme {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

.detail-page__theme--mint { color: var(--mint); }
.detail-page__theme--coral { color: var(--coral); }
.detail-page__theme--purple { color: var(--spearmint); }

.detail-page__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.detail-page__set-num {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: var(--space-4);
}

.detail-page__desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

.detail-page__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.detail-page__stat {
  background: var(--surface);
  padding: 12px;
  text-align: center;
}

.detail-page__stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.detail-page__stat-value {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

.detail-page__stat-value--mint { color: var(--mint); }
.detail-page__stat-value--strike { text-decoration: line-through; color: var(--text-dim); font-size: 14px; }

.detail-page__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  margin-bottom: var(--space-4);
}

.detail-page__cta:hover { text-decoration: none; transform: translateY(-1px); }

.detail-page__cta--amazon {
  background: #FF9900;
  color: #131414;
}

.detail-page__cta--amazon:hover { background: #e68a00; }

.detail-page__cta--brickset {
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
}

.detail-page__cta--brickset:hover { background: var(--surface-hover); border-color: rgba(255,255,255,0.12); }

.detail-page__share { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }

.detail-page__notice {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: var(--space-4);
  line-height: 1.5;
}
.detail-page__notice a {
  color: var(--text-dim);
  text-decoration: underline;
  text-decoration-color: rgba(180, 180, 180, 0.4);
  text-underline-offset: 2px;
}
.detail-page__notice a:hover { color: var(--text-secondary); }

.detail-page__affiliate {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

/* ============================================================================
   SunSet Pages
   ============================================================================ */

.sunset-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sunset-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.sunset-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

.sunset-card__img {
  aspect-ratio: 5 / 3;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
  position: relative;
}
.sunset-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.18);
  pointer-events: none;
  z-index: 1;
}

.sunset-card__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.sunset-card__body {
  padding: 12px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sunset-card__theme {
  font-size: 11px;
  font-weight: 600;
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.sunset-card__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 2px;
}

.sunset-card__set-num {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
}

.sunset-card__meta {
  display: flex;
  gap: var(--space-4);
  font-size: 12px;
  color: var(--text-dim);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  margin-top: auto;
  margin-bottom: var(--space-2);
}

.sunset-card__cta {}

/* Urgency badges (shared between sidebar and full pages) */
.urgency-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.urgency-badge--critical { background: #C91A09; color: #FFFFFF; }
.urgency-badge--watch { background: #F8BB3D; color: #131414; }
.urgency-badge--normal { background: #4B9F4A; color: #FFFFFF; }

/* ============================================================================
   Skill Issues / Spearmint Article Pages
   ============================================================================ */

/* Article listing card */
.article-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
}

.article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.article-card__img {
  aspect-ratio: 16 / 9;
  background: var(--surface);
  overflow: hidden;
}

.article-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card__body { padding: 16px; }

.article-card__categories {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.article-card__cat {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.article-card__cat--mint { background: rgba(0,230,160,0.12); color: var(--mint); }
.article-card__cat--purple { background: rgba(155,125,232,0.12); color: var(--spearmint); }

.article-card__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-2);
}

.article-card__excerpt {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__meta {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  gap: var(--space-3);
}

/* Article detail content */
.post-content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.post-content h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin: var(--space-8) 0 var(--space-4);
}

.post-content h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: var(--space-6) 0 var(--space-3);
}

.post-content p { margin-bottom: var(--space-4); }

.post-content a {
  color: var(--mint);
  text-decoration: underline;
  text-decoration-color: rgba(0,230,160,0.3);
  text-underline-offset: 2px;
}

.post-content a:hover { text-decoration-color: var(--mint); }

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: var(--space-4) 0;
}

.post-content figure { margin: var(--space-6) 0; }
.post-content figcaption {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  margin-top: var(--space-2);
  font-style: italic;
}

.post-content ul, .post-content ol {
  margin: var(--space-4) 0;
  padding-left: var(--space-6);
}

.post-content li { margin-bottom: var(--space-2); }

.post-content blockquote {
  border-left: 3px solid var(--mint);
  padding: var(--space-3) var(--space-6);
  margin: var(--space-6) 0;
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: var(--text);
}

.post-content code {
  background: var(--surface-raised);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 14px;
}

.post-content pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  overflow-x: auto;
  margin: var(--space-4) 0;
}

.post-content pre code { background: none; padding: 0; }

/* Post header */
.post-header { margin-bottom: var(--space-8); }

.post-header__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.post-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: var(--space-4);
}

.post-header__categories {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.post-header__hero {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.post-header__hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================================
   About / Privacy / Static Pages
   ============================================================================ */

.static-page { max-width: 680px; margin: 0 auto; padding: var(--space-8) var(--content-pad); }

.static-page__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  margin-bottom: var(--space-6);
}

.static-page__content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.static-page__content h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: var(--space-8) 0 var(--space-3);
}

.static-page__content h2:first-child { margin-top: 0; }

.static-page__content p { margin-bottom: var(--space-4); }

.static-page__content a { color: var(--mint); }
.static-page__content a:hover { text-decoration: underline; }

.static-page__content ul { padding-left: var(--space-6); margin-bottom: var(--space-4); }
.static-page__content li { margin-bottom: var(--space-2); }

.static-page__content strong { color: var(--text); }

/* ============================================================================
   Empty States
   ============================================================================ */

.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-4);
  color: var(--text-dim);
}

.empty-state__icon { font-size: 48px; margin-bottom: var(--space-4); opacity: 0.4; }
.empty-state__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-secondary); margin-bottom: var(--space-2); }
.empty-state__text { font-size: 14px; max-width: 400px; margin: 0 auto; line-height: 1.6; }
.empty-state__link { color: var(--mint); font-weight: 600; font-size: 14px; margin-top: var(--space-4); display: inline-block; }

/* ============================================================================
   Responsive — Section Pages
   ============================================================================ */

@media (max-width: 768px) {
  .deal-detail {
    grid-template-columns: 1fr;
  }
  .deal-detail__image {
    max-height: 280px;
    min-height: auto;
    padding: 24px;
  }
  .deal-detail__image img {
    max-height: 220px;
  }
  .deal-detail__info {
    padding: 20px;
  }
  .deal-detail__title {
    font-size: 20px;
  }
  .deal-detail__meta-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .section-page__title { font-size: 26px; }
  .detail-page__title { font-size: 20px; }
  .post-header__title { font-size: 24px; }
  .card-grid { grid-template-columns: 1fr; }
  .detail-page__stats { grid-template-columns: repeat(2, 1fr); }
  .detail-page__content { padding: 16px; }
  .deal-detail__desc-section { padding: 16px; }
  .deal-detail__note { padding: 12px 16px; }
  .deal-detail__affiliate { padding: 12px 16px; }
}