/* Topic landing page header normalization.
   Keep the dark/light logo fully contained like the main page header. */
.site-header .brand {
  overflow: visible;
}

.site-header .brand picture {
  display: block;
  width: 100%;
}

.site-header .brand img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

/* Topic cross-navigation keeps its text color; the mint underline carries hover state. */
.topic-nav a:hover {
  color: inherit;
}

/* Compact numbered progression marker: 01 >, 02 >>, 03 >>> using the shared right-chevron asset. */
.topic-principles .topic-step-marker,
.topic-steps .topic-step-marker {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin-bottom: 24px;
  color: var(--mint);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.14em;
}

.topic-step-marker .topic-chevron-run {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin: 0;
}

.topic-step-marker .topic-chevron-run i {
  display: block;
  width: 7px;
  height: 11px;
  margin: 0;
  border-radius: 0;
  background: var(--mint);
  -webkit-mask: url("/assets/chevron-right-heavy.png") center / contain no-repeat;
  mask: url("/assets/chevron-right-heavy.png") center / contain no-repeat;
}

.topic-steps li:has(.topic-step-marker) {
  grid-template-columns: 84px 1fr;
}

.topic-steps .topic-step-marker {
  margin: 4px 0 0;
}

@media (prefers-color-scheme: dark) {
  /* Topic pages only: carry the logo's black field through the full header width. */
  .site-header {
    position: relative;
    isolation: isolate;
    border-bottom-color: transparent;
  }

  .site-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #000;
  }

  /* Let the neon reflection die out instead of ending on a hard image edge. */
  .site-header .brand img {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 89%, rgba(0, 0, 0, 0.7) 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 89%, rgba(0, 0, 0, 0.7) 94%, transparent 100%);
  }
}

/* Desktop/tablet-landscape topic hero treatment.
   Mobile intentionally stays on the full-bleed photo layout from site.css. */
@media (min-width: 900px) {
  .topic-hero {
    width: 100%;
    min-height: 560px;
    max-height: 720px;
    height: clamp(560px, 46vw, 720px);
    aspect-ratio: auto;
    margin-inline: 0;
    background: var(--bg);
  }

  .topic-hero img {
    inset: 0 0 0 auto;
    width: 82%;
    height: 100%;
    object-fit: cover;
  }

  .topic-hero::after {
    background: linear-gradient(
      90deg,
      var(--bg) 0%,
      var(--bg) 25%,
      color-mix(in srgb, var(--bg) 96%, transparent) 28%,
      color-mix(in srgb, var(--bg) 78%, transparent) 32%,
      color-mix(in srgb, var(--bg) 48%, transparent) 36%,
      color-mix(in srgb, var(--bg) 20%, transparent) 40%,
      transparent 45%
    );
  }

  .topic-hero-copy {
    left: max(48px, calc((100vw - var(--max)) / 2));
    right: auto;
    top: auto;
    bottom: clamp(44px, 5vw, 72px);
    width: min(39vw, 560px);
    transform: none;
    color: var(--ink);
  }

  .topic-hero h1 {
    max-width: 100%;
    font-size: clamp(48px, 5.6vw, 82px);
    text-shadow: none;
  }

  .topic-hero-subcopy {
    max-width: 500px;
    color: var(--muted);
  }

  .topic-hero--coffee img {
    object-position: 55% center;
  }

  .topic-hero--tobacco img {
    object-position: 58% center;
  }

  .topic-hero--snacks img {
    object-position: 54% center;
  }

  .topic-hero--alcohol img {
    object-position: 58% center;
  }

  .topic-hero--screen img {
    object-position: 53% center;
  }

  .topic-hero--snacks h1 {
    font-size: clamp(72px, 8vw, 118px);
  }

  .topic-hero--tobacco h1,
  .topic-hero--alcohol h1 {
    font-size: clamp(46px, 5vw, 72px);
  }

  .topic-hero--screen h1 {
    font-size: clamp(42px, 4.6vw, 66px);
  }
}

@media (min-width: 900px) and (prefers-color-scheme: dark) {
  .topic-hero-copy {
    color: #fff;
  }

  .topic-hero-subcopy {
    color: #eef6f3;
  }
}