/* ============================================================
   Bento Masthead Rollout · Phase 1a
   Scoped to `body.is-bento` so this file is a no-op on every
   page that doesn't opt in. Restyles the existing <header>
   into a Monocle-style 3-row magazine masthead, while keeping
   the .nav / .theme-toggle / .menu-toggle classes intact so
   main.js (initHeader, initThemeToggle, syncMobileLangToggle,
   injectSearchLink) keeps working unchanged.
   ============================================================ */

body.is-bento {
  /* Bump the header height so content below pads correctly.
     We re-declare both --nav-height AND --header-height at body
     level so the calc() that resolves --header-height picks up
     the new --nav-height. (Custom-property substitution resolves
     calc() against the values present at the *declaring*
     element, not the consuming element — so :root's calc was
     freezing in :root's 72px even when descendants overrode
     --nav-height.) */
  --nav-height: 168px;
  --header-height: calc(var(--nav-height) + var(--status-bar-h));

  /* Theme-independent ink/cream for tiles that sit on a fixed
     brand-color background (gold, blush, sky, red, olive). The
     site's --color-bg-dark / --color-text-primary swap with
     theme — those would flip to cream-on-gold (invisible) when
     the user toggles to Light. These don't. */
  --bento-on-brand-dark: #272a1d;
  --bento-on-brand-cream: #f4efe2;
}

/* The masthead itself — auto-grows around its 3 rows. */
body.is-bento .header.bento-masthead {
  height: var(--nav-height);
  background: rgba(43, 45, 31, 0.96);
  border-bottom: 1.5px solid rgba(250, 248, 243, 0.18);
}
body.is-bento .header.bento-masthead .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;
  /* Bento masthead spans the viewport edge-to-edge so the magazine
     dateline doesn't sit in a 1200-px island with whitespace gutters
     on wide screens. Internal padding matches the bento-grid below. */
  max-width: none;
  padding: 0 var(--space-xl);
  gap: 0;
}

/* ── Row 1: dateline strip ─────────────────────────────── */
body.is-bento .bento-masthead__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(250, 248, 243, 0.12);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
body.is-bento .bento-masthead__date { opacity: 0.85; }
body.is-bento .bento-masthead__utility {
  display: flex;
  gap: 14px;
  align-items: center;
}
body.is-bento .bento-masthead__utility .lang-toggle,
body.is-bento .bento-masthead__utility .search-link {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.is-bento .bento-masthead__utility .theme-toggle {
  /* style.css already gives .theme-toggle its pill silhouette;
     keep that, just dial the size to match the lang-toggle pill. */
  width: 32px;
  height: 32px;
}
body.is-bento .bento-masthead__utility .btn.btn--primary {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--fynbos-pomegranate);
  color: var(--color-text-primary);
  padding: 8px 14px;
  border-radius: 0;
  gap: 6px;
}
body.is-bento .bento-masthead__utility .btn.btn--primary:hover {
  background: var(--color-accent);
  color: var(--bento-on-brand-dark);
  transform: none;
  box-shadow: none;
}

/* ── Row 2: wordmark row (freq-bars + SCHULCAST + tagline) */
body.is-bento .bento-masthead__wordmark-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 0 10px;
}
body.is-bento .bento-masthead__logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--color-text-primary);
}
body.is-bento .bento-masthead__logo .freq-logo {
  height: 36px;
  gap: 3px;
}
body.is-bento .bento-masthead__logo .freq-logo .bar { width: 4px; }
body.is-bento .bento-masthead__wordmark {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 0.9;
}
body.is-bento .bento-masthead__tagline { text-align: right; }
body.is-bento .bento-masthead__tagline-main {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--color-text-primary);
}
body.is-bento .bento-masthead__tagline-sub {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0.7;
  margin-top: 4px;
}

/* ── Row 3: section bar — restyles the existing .nav ──── */
body.is-bento .header.bento-masthead .nav {
  /* The .nav was originally horizontally space-between with the
     logo. Now it's its own row, content-driven from the left
     with utility cluster at the right. */
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 0;
  padding: 12px 0;
  border-top: 1px solid rgba(250, 248, 243, 0.18);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
body.is-bento .header.bento-masthead .nav::-webkit-scrollbar { display: none; }

/* Section labels with editorial italic subtitle. The subtitle
   comes from data-sub="…" and is rendered via ::after, so the
   markup stays a flat <a> the SPA nav handler still understands. */
body.is-bento .header.bento-masthead .nav a[data-sub] {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  line-height: 1;
}
body.is-bento .header.bento-masthead .nav a[data-sub]::after {
  content: attr(data-sub);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-secondary);
  opacity: 0.62;
  margin-top: 1px;
}
body.is-bento .header.bento-masthead .nav a[data-sub].active {
  padding-bottom: 4px;
  border-bottom: 2px solid var(--fynbos-pomegranate);
}
body.is-bento .header.bento-masthead .nav a[data-sub].active::before {
  /* Override style.css's .nav a.active::after gold underline */
  display: none;
}
body.is-bento .header.bento-masthead .nav a[data-sub].active::after {
  color: var(--color-text-primary);
  opacity: 0.85;
}

/* Push the utility cluster (mitmachen, EN, theme, CTA, search-link)
   to the far right with margin-left:auto on the first non-section
   item. Also keeps the existing .nav-highlight / .lang-toggle /
   .theme-toggle / .btn--primary classes intact. */
body.is-bento .header.bento-masthead .nav .nav-highlight {
  margin-left: auto;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fynbos-pomegranate);
  border-bottom: 2px solid var(--fynbos-pomegranate);
  padding-bottom: 2px;
  flex-shrink: 0;
}


/* ============================================================
   Bento Hero Row — 8-col hero player + 4-col crew quote
   Phase 1b: Hero becomes a tile inside a 12-col grid; the
   classic full-width sc-hero treatment stays on every other
   page that doesn't carry body.is-bento.
   ============================================================ */
body.is-bento .bento-hero-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  padding: calc(var(--header-height) + 24px) var(--space-xl) 0;
  background: var(--color-bg-main);
}

/* Hero takes 8 cols, crew quote takes 4. Hero already brings its
   own ink background and animated waveform; we just need to undo
   the full-width header offset (now on the row) and dial the
   internal padding so it reads as a contained tile. */
body.is-bento .bento-hero-row .sc-hero {
  grid-column: span 8;
  padding: 0;            /* row provides the header offset above */
  background: var(--sc-ink, #1b1d14);
  overflow: hidden;
  border-radius: 0;
  align-self: stretch;
}
/* Tighten the inner spacings so the tile doesn't waste real
   estate. The classic hero is sized for a 1200 px page; in an
   8-col tile we have ~720 px to work with. */
body.is-bento .bento-hero-row .sc-hero__rule {
  padding: 18px 28px 16px;
}
body.is-bento .bento-hero-row .sc-hero__grid {
  padding: 28px 28px 12px;
  grid-template-columns: 90px 1fr;
  gap: 18px;
}
body.is-bento .bento-hero-row .sc-hero__column-label {
  font-size: 64px;
}
body.is-bento .bento-hero-row .sc-hero__stage { height: 220px; }
body.is-bento .bento-hero-row .sc-hero__chapters {
  margin: 24px 28px 0;
}
body.is-bento .bento-hero-row .sc-hero__info {
  padding: 28px 28px 32px;
  margin-top: 24px;
}
body.is-bento .bento-hero-row .sc-hero__title {
  font-size: clamp(28px, 4vw, 48px);
}
/* Ghost EP number — still atmospheric but smaller so it doesn't
   hang off the right edge of the tile. */
body.is-bento .bento-hero-row .sc-hero__ep-ghost {
  font-size: 200px;
  right: 80px;
  top: 80px;
}

/* ── Crew quote tile (4×) ─────────────────────────────────────
   Ported from css/bento.css under the body.is-bento scope so
   the classic /bento.html sandbox keeps its independent rules. */
body.is-bento .bento-tile {
  background: var(--color-bg-warm);
  color: var(--color-text-primary);
  padding: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.is-bento .bento-tile-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fynbos-pomegranate);
}
body.is-bento .tile-crew {
  grid-column: span 4;
  background: var(--fynbos-melon);
  color: var(--bento-on-brand-dark);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
body.is-bento .tile-crew .bento-tile-label { color: var(--bento-on-brand-dark); }
body.is-bento .tile-crew__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
body.is-bento .tile-crew__avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--bento-on-brand-dark);
  box-shadow: 6px 6px 0 var(--bento-on-brand-dark);
}
body.is-bento .tile-crew__text {
  margin: 0;
  position: relative;
  flex: 1;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.4;
  color: var(--bento-on-brand-dark);
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: auto;
}
body.is-bento .tile-crew__mark {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: 1.6em;
  line-height: 0;
  color: var(--bento-on-brand-dark);
  opacity: 0.55;
  margin-right: 2px;
  vertical-align: -0.18em;
  user-select: none;
}
body.is-bento .tile-crew__cite {
  padding-top: 14px;
  border-top: 1.5px solid rgba(43, 45, 31, 0.35);
}
body.is-bento .tile-crew__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.is-bento .tile-crew__role {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  opacity: 0.7;
  margin-top: 4px;
}

/* ============================================================
   Phase 1c — Bento main grid + remaining tiles
   ============================================================ */
body.is-bento .bento-dateline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1.5px solid rgba(250, 248, 243, 0.18);
  border-bottom: 1.5px solid rgba(250, 248, 243, 0.18);
  margin: 24px var(--space-xl) 0;
}
body.is-bento .bento-dateline__cell {
  padding: 12px 24px;
  border-right: 1.5px solid rgba(250, 248, 243, 0.12);
  display: flex;
  align-items: baseline;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
}
body.is-bento .bento-dateline__cell:last-child { border-right: none; }
body.is-bento .bento-dateline__k {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
body.is-bento .bento-dateline__v {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

body.is-bento .bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(170px, auto);
  gap: 14px;
  padding: 24px var(--space-xl) 40px;
  background: var(--color-bg-main);
}

/* ── Heiko Quote (5×2) ────────────────────────────────── */
body.is-bento .tile-quote {
  grid-column: span 5;
  grid-row: span 2;
  background: var(--color-accent);
  color: var(--bento-on-brand-dark);
  padding: 32px;
  justify-content: space-between;
}
body.is-bento .tile-quote .bento-tile-label,
body.is-bento .tile-quote-label { color: var(--bento-on-brand-dark); }
body.is-bento .tile-quote__body {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 24px 0;
}
body.is-bento .tile-quote__mark {
  position: absolute;
  left: -8px;
  top: -20px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: 200px;
  line-height: 0.7;
  color: var(--bento-on-brand-dark);
  opacity: 0.18;
  user-select: none;
}
body.is-bento .tile-quote__text {
  margin: 0;
  position: relative;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.18;
  color: var(--bento-on-brand-dark);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
body.is-bento .tile-quote__cite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1.5px solid var(--bento-on-brand-dark);
}
body.is-bento .tile-quote__author {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.is-bento .tile-quote__source {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  opacity: 0.7;
}
body.is-bento .tile-quote__link {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--bento-on-brand-dark);
  padding-bottom: 2px;
  color: var(--bento-on-brand-dark);
}

/* ── Über Schulcast (7×2) — split tile: copy + freq visual ──
   Prominent magazine spread: editorial copy on the left, the
   "2 Kulturen, 1 Podcast" headline + animated frequency wave
   on the right. Replaces the old standalone Frequenz tile. */
body.is-bento .tile-about {
  grid-column: span 7;
  grid-row: span 2;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border-strong);
  overflow: hidden;
}
body.is-bento .tile-about__copy {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  border-right: 1.5px solid var(--color-border-strong);
}
body.is-bento .tile-about__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(38px, 4.6vw, 56px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-top: 12px;
  text-wrap: balance;
}
body.is-bento .tile-about__title em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-accent);
}
body.is-bento .tile-about__text {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--color-text-primary);
  text-wrap: pretty;
}
body.is-bento .tile-about__cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.is-bento .tile-about__cta {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
  color: var(--color-accent);
  align-self: flex-start;
}
body.is-bento .tile-about__cta--ghost {
  color: var(--color-text-secondary);
  border-bottom-color: var(--color-text-secondary);
}

/* Right column: the Frequenz visual, now framing the "2 Kulturen,
   1 Podcast" headline that the user liked. */
body.is-bento .tile-about__visual {
  background: var(--fynbos-pomegranate);
  color: var(--bento-on-brand-cream);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
body.is-bento .tile-about__visual-headline {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  position: relative;
  z-index: 1;
}
body.is-bento .tile-about__visual-art {
  position: relative;
  flex: 1;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.is-bento .tile-about__visual-art > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: bento-pulse 4s ease-in-out infinite;
}
body.is-bento .tile-about__visual-art > svg:nth-child(2) {
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  animation-delay: -0.6s;
}
body.is-bento .tile-about__visual-art > svg:nth-child(3) {
  inset: 28px;
  width: calc(100% - 56px);
  height: calc(100% - 56px);
  animation-delay: -1.2s;
}
body.is-bento .tile-about__visual-caption {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(244, 239, 226, 0.9);
  border-top: 1px solid rgba(244, 239, 226, 0.32);
  padding-top: 12px;
}
@keyframes bento-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes bento-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ── Moment der Woche (8×1) — wraps audiogram ─────────── */
body.is-bento .tile-moment {
  grid-column: span 8;
  background: var(--color-bg-dark);
  color: var(--color-text-primary);
  padding: 22px 28px 24px;
  gap: 14px;
}
body.is-bento .tile-moment .bento-tile-label { color: var(--color-accent); }
body.is-bento .tile-moment__body {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-height: 200px;
}
/* Audiogram (audiogram.js) renders .sc-moment__* markup into
   #audiogram. The legacy CSS in freq-cards.css sizes those for a
   1200-px section band; we scope-override it for the tile here so
   it reads as a contained card. */
body.is-bento .tile-moment__body > .sc-moment__inner {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0;
}
body.is-bento .tile-moment__body .sc-moment__head {
  margin-bottom: 16px;
  padding-bottom: 12px;
  gap: 12px;
}
body.is-bento .tile-moment__body .sc-moment__eyebrow,
body.is-bento .tile-moment__body .sc-moment__ep { font-size: 11px; }
body.is-bento .tile-moment__body .sc-moment__grid {
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
body.is-bento .tile-moment__body .sc-moment__mark {
  font-size: 80px;
  margin-bottom: -18px;
}
body.is-bento .tile-moment__body .sc-moment__quote {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.32;
  margin: 0 0 14px;
  text-wrap: balance;
}
body.is-bento .tile-moment__body .sc-moment__cite { font-size: 13px; }
body.is-bento .tile-moment__body .sc-moment__bars { height: 60px; }
body.is-bento .tile-moment__body .sc-moment__controls { gap: 12px; }
@media (max-width: 900px) {
  body.is-bento .tile-moment__body .sc-moment__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ── Mitmachen teaser (4×1) ───────────────────────────── */
body.is-bento .tile-mitmachen {
  grid-column: span 4;
  background: var(--color-bg-dark);
  color: var(--color-text-primary);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
body.is-bento .tile-mitmachen .bento-tile-label { color: var(--color-accent); }
body.is-bento .tile-mitmachen__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}
body.is-bento .tile-mitmachen__sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.45;
  color: var(--color-text-primary);
  opacity: 0.85;
  text-wrap: pretty;
  margin: 0;
}
body.is-bento .tile-mitmachen__cta {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--color-accent);
  color: var(--bento-on-brand-dark);
  padding: 12px 18px;
  align-self: flex-start;
  display: inline-block;
}

/* ── Listen-On (4×1) ──────────────────────────────────── */
body.is-bento .tile-listen {
  grid-column: span 4;
  background: var(--color-bg-warm);
  color: var(--color-text-primary);
  justify-content: space-between;
}
body.is-bento .tile-listen__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 8px;
}
body.is-bento .tile-listen__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
body.is-bento .tile-listen__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(250, 248, 243, 0.06);
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Quiz teaser (5×1) ────────────────────────────────── */
body.is-bento .tile-quiz {
  grid-column: span 5;
  background: var(--fynbos-blue);
  color: var(--bento-on-brand-dark);
  padding: 24px;
  justify-content: space-between;
}
body.is-bento .tile-quiz .bento-tile-label { color: var(--bento-on-brand-dark); }
body.is-bento .tile-quiz__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
body.is-bento .tile-quiz__head { flex: 1; }
body.is-bento .tile-quiz__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-top: 10px;
  text-wrap: balance;
  overflow-wrap: break-word;
}
body.is-bento .tile-quiz__sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.4;
  opacity: 0.78;
  margin-top: 8px;
}
body.is-bento .tile-quiz__tiles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
body.is-bento .tile-quiz__tile {
  width: 38px;
  height: 38px;
  background: var(--bento-on-brand-cream);
  border: 1.5px solid var(--bento-on-brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--bento-on-brand-dark);
}
body.is-bento .tile-quiz__tile--gold { background: var(--color-accent); }
body.is-bento .tile-quiz__cta {
  margin-top: 14px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--bento-on-brand-dark);
  padding-bottom: 2px;
  color: var(--bento-on-brand-dark);
  align-self: flex-start;
}

/* ── Backstage teaser (3×1) ───────────────────────────── */
body.is-bento .tile-backstage {
  grid-column: span 3;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text-primary);
  justify-content: space-between;
}
body.is-bento .tile-backstage__date {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 12px;
}
body.is-bento .tile-backstage__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-top: 8px;
  text-wrap: balance;
  overflow-wrap: break-word;
}
body.is-bento .tile-backstage__sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 8px;
  line-height: 1.4;
}
body.is-bento .tile-backstage__cta {
  margin-top: 14px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
  color: var(--color-accent);
  align-self: flex-start;
}

/* ── Instagram (12×1) ─────────────────────────────────── */
body.is-bento .tile-instagram {
  grid-column: span 12;
  background: var(--color-bg-warm);
  border: 1.5px solid var(--color-border-strong);
  padding: 0;
}
body.is-bento .tile-instagram__inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
body.is-bento .tile-instagram__intro {
  flex: 0 0 280px;
  padding: 24px 28px;
  border-right: 1.5px solid var(--color-border-strong);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
}
body.is-bento .tile-instagram__handle {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.01em;
  margin-top: 6px;
  color: var(--color-text-primary);
}
body.is-bento .tile-instagram__sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
body.is-bento .tile-instagram__cta {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
  color: var(--color-accent);
  align-self: flex-start;
}
body.is-bento .tile-instagram__widget {
  flex: 1;
  padding: 18px;
  min-height: 220px;
}

/* ── Frisch im Feed (12×1) ────────────────────────────── */
body.is-bento .tile-feed {
  grid-column: span 12;
  background: var(--color-bg-dark);
  color: var(--color-text-primary);
  padding: 0;
}
body.is-bento .tile-feed__inner {
  display: flex;
  flex-direction: row;
}
body.is-bento .tile-feed__intro {
  padding: 28px 32px;
  flex: 0 0 280px;
  border-right: 1.5px solid rgba(244, 239, 226, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
body.is-bento .tile-feed__intro .bento-tile-label { color: var(--color-accent); }
body.is-bento .tile-feed__intro-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 28px;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-top: 8px;
  text-wrap: balance;
}
body.is-bento .tile-feed__intro-cta {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
  align-self: flex-start;
}
body.is-bento .tile-feed__items {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
/* The BUILD:feed slot ships .sc-card markup. Re-skin those cards
   inline so they read as magazine columns rather than gold tiles. */
body.is-bento .tile-feed__items .sc-card {
  padding: 24px;
  border-right: 1px solid rgba(244, 239, 226, 0.12);
  background: transparent;
  color: var(--color-text-primary);
  transform: none !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  text-decoration: none;
}
body.is-bento .tile-feed__items .sc-card:last-child { border-right: none; }
/* The build script writes 6 episodes into BUILD:feed (sized for the
   classic .sc-feed grid). The bento tile is designed for 4 — hide
   the rest so the strip stays a clean single row. */
body.is-bento .tile-feed__items .sc-card:nth-child(n+5) { display: none; }
body.is-bento .tile-feed__items .sc-card:nth-child(4) { border-right: none; }
body.is-bento .tile-feed__items .sc-card:hover { transform: none; }
body.is-bento .tile-feed__items .sc-card__num {
  background: transparent;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0;
}
body.is-bento .tile-feed__items .sc-card__play {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  align-self: flex-start;
}
body.is-bento .tile-feed__items .sc-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  flex: 1;
}
body.is-bento .tile-feed__items .sc-card__rule {
  height: 1px;
  background: rgba(244, 239, 226, 0.15);
  margin: 4px 0;
}
body.is-bento .tile-feed__items .sc-card__meta {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(244, 239, 226, 0.6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Mobile — collapse the row to a single column. The hero tile
   spans full width and the crew quote stacks below it. */
@media (max-width: 900px) {
  body.is-bento .bento-hero-row {
    grid-template-columns: 1fr;
    padding: calc(var(--header-height) + 16px) var(--space-md) 0;
    gap: 12px;
  }
  body.is-bento .bento-hero-row .sc-hero,
  body.is-bento .tile-crew {
    grid-column: 1 / -1;
  }
  body.is-bento .bento-hero-row .sc-hero__column-label { display: none; }
  body.is-bento .bento-hero-row .sc-hero__grid {
    grid-template-columns: 1fr;
    padding: 24px 20px 12px;
  }
  body.is-bento .bento-hero-row .sc-hero__ep-ghost { display: none; }

  body.is-bento .bento-dateline {
    grid-template-columns: 1fr 1fr;
    margin: 16px var(--space-md) 0;
  }
  body.is-bento .bento-dateline__cell:nth-child(2) { border-right: none; }
  body.is-bento .bento-dateline__cell { padding: 10px 16px; }

  body.is-bento .bento-grid {
    grid-template-columns: 1fr;
    padding: 16px var(--space-md) 24px;
    gap: 12px;
  }
  body.is-bento .bento-grid > .bento-tile {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  body.is-bento .tile-quote__text { font-size: 22px; }
  body.is-bento .tile-quote__mark { font-size: 120px; }
  body.is-bento .tile-instagram__inner,
  body.is-bento .tile-feed__inner {
    flex-direction: column;
  }
  body.is-bento .tile-instagram__intro,
  body.is-bento .tile-feed__intro {
    flex: 1 1 auto;
    border-right: none;
    border-bottom: 1.5px solid rgba(244, 239, 226, 0.18);
  }
  body.is-bento .tile-feed__items { grid-template-columns: 1fr; }
  body.is-bento .tile-feed__items .sc-card {
    border-right: none;
    border-bottom: 1px solid rgba(244, 239, 226, 0.12);
    min-height: auto;
  }
  body.is-bento .tile-feed__items .sc-card:last-child { border-bottom: none; }
}

/* ============================================================
   Light theme — Monocle's printed-paper feel
   ============================================================ */
[data-theme="light"] body.is-bento .header.bento-masthead {
  background: rgba(250, 248, 243, 0.98);
  border-bottom-color: rgba(43, 45, 31, 0.2);
}
[data-theme="light"] body.is-bento .bento-masthead__top {
  border-bottom-color: rgba(43, 45, 31, 0.18);
}
[data-theme="light"] body.is-bento .header.bento-masthead .nav {
  border-top-color: rgba(43, 45, 31, 0.2);
}

/* Dateline + grid use cream-tinted dividers in dark mode that
   vanish on a cream Light bg. Swap to ink-tinted dividers. */
[data-theme="light"] body.is-bento .bento-dateline {
  border-top-color: rgba(43, 45, 31, 0.2);
  border-bottom-color: rgba(43, 45, 31, 0.2);
}
[data-theme="light"] body.is-bento .bento-dateline__cell {
  border-right-color: rgba(43, 45, 31, 0.15);
}

/* Tiles whose backgrounds are theme-flippable (--color-bg-dark or
   --color-bg-warm) need their internal dividers + faded text to
   read on the new background. */
[data-theme="light"] body.is-bento .tile-mitmachen,
[data-theme="light"] body.is-bento .tile-moment,
[data-theme="light"] body.is-bento .tile-feed {
  /* color-bg-dark in light theme is cream — looks the same as the
     page bg. Give these tiles a slightly darker cream so they
     still read as separate tiles. */
  background: var(--color-bg-warm);
  border: 1.5px solid var(--color-border-strong);
}
[data-theme="light"] body.is-bento .tile-feed__items .sc-card__rule {
  background: rgba(43, 45, 31, 0.15);
}
[data-theme="light"] body.is-bento .tile-feed__items .sc-card__meta {
  color: rgba(43, 45, 31, 0.7);
}
[data-theme="light"] body.is-bento .tile-feed__intro {
  border-right-color: rgba(43, 45, 31, 0.18);
}
[data-theme="light"] body.is-bento .tile-feed__items .sc-card {
  border-right-color: rgba(43, 45, 31, 0.12);
}
/* tile-about visual (red-bg right column): cream-alpha caption
   stays on the red panel even when the rest flips to ink. */
[data-theme="light"] body.is-bento .tile-about__visual-caption {
  color: rgba(244, 239, 226, 0.9);
  border-top-color: rgba(244, 239, 226, 0.4);
}

/* ============================================================
   Phase 6 — Episode-Detail-Bento (magazine article layout)
   Activated by `body.is-episode-page`.
   ============================================================ */

/* ── Hero — full-bleed editorial cover. Centered portrait,
   big italic Fraunces title, brand-eyebrow, meta strip, pull
   quote underneath. */
body.is-episode-page .sc-episode-hero {
  background: var(--color-bg-dark);
  /* Header is position: fixed, so the hero (first content section)
     must clear it via --header-height. Adds an editorial gap on top. */
  padding: calc(var(--header-height) + clamp(40px, 6vw, 80px)) 0 clamp(32px, 5vw, 64px);
  border-bottom: 3px solid var(--fynbos-pomegranate);
}
body.is-episode-page .sc-episode-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  max-width: 820px;
  margin: 0 auto;
}
body.is-episode-page .sc-episode-hero__cover {
  width: clamp(180px, 22vw, 260px);
  height: clamp(180px, 22vw, 260px);
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-text-primary);
  box-shadow: 8px 8px 0 var(--fynbos-pomegranate);
  flex-shrink: 0;
}
body.is-episode-page .sc-episode-hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.is-episode-page .sc-episode-hero__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}
body.is-episode-page .sc-episode-hero__eyebrow {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fynbos-pomegranate);
}
body.is-episode-page .sc-episode-hero__title {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  text-wrap: balance;
  margin: 0;
}
body.is-episode-page .sc-episode-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
body.is-episode-page .sc-episode-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.is-episode-page .sc-episode-hero__quote {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--color-text-secondary);
  border-left: 3px solid var(--fynbos-pomegranate);
  padding-left: 18px;
  text-align: left;
  text-wrap: pretty;
  margin: 8px auto 0;
  max-width: 720px;
}
body.is-episode-page .sc-episode-hero__quote-mark {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900;
  font-size: 1.8em;
  line-height: 0;
  color: var(--fynbos-pomegranate);
  vertical-align: -0.18em;
  margin-right: 4px;
}

/* Hide the breadcrumb on episode pages — the masthead and the hero
   already say where the user is. */
body.is-episode-page .section[style*="padding-top:var(--space-lg)"]:has(nav[aria-label="Breadcrumb"]) {
  display: none;
}

/* ── 2-column body: main article + sticky sidebar ── */
body.is-episode-page .ep-mag-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 4vw, 64px);
  margin-top: 32px;
}
body.is-episode-page .ep-mag-main {
  min-width: 0;
}
body.is-episode-page .ep-mag-main h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
  color: var(--color-text-primary);
}
body.is-episode-page .ep-mag-main p {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.65;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

body.is-episode-page .ep-mag-side {
  min-width: 0;
}
body.is-episode-page .ep-mag-side__sticky {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: calc(100vh - var(--header-height) - 48px);
  overflow-y: auto;
  padding: 24px;
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
body.is-episode-page .ep-mag-side__sticky::-webkit-scrollbar { width: 6px; }
body.is-episode-page .ep-mag-side__sticky::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 3px;
}

/* Sidebar: chapters list — tighter, magazine-style. */
body.is-episode-page .ep-mag-side .sc-chapters__heading,
body.is-episode-page .ep-mag-side h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fynbos-pomegranate);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-strong);
}
body.is-episode-page .ep-mag-side .sc-chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
body.is-episode-page .ep-mag-side .sc-chapters li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px solid rgba(250, 248, 243, 0.06);
}
body.is-episode-page .ep-mag-side .sc-chapters li:last-child { border-bottom: none; }
body.is-episode-page .ep-mag-side .sc-chapters strong {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  font-feature-settings: "tnum";
  cursor: pointer;
}
body.is-episode-page .ep-mag-side .sc-chapters strong:hover {
  color: var(--color-text-primary);
}
body.is-episode-page .ep-mag-side .sc-chapters span {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-text-primary);
}

/* Sidebar share row — pill chips on cream paper. */
body.is-episode-page .ep-mag-side .ep-share {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}
body.is-episode-page .ep-mag-side .ep-share__label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fynbos-pomegranate);
  width: 100%;
  margin-bottom: 4px;
}
body.is-episode-page .ep-mag-side .ep-share__btn {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 12px;
  background: rgba(250, 248, 243, 0.06);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
}

/* ── Player band — full-width above the grid. */
body.is-episode-page .ep-mag-main + .ep-mag-side,
body.is-episode-page .blog-article-content > .u-mb-xl:first-child {
  /* The first .u-mb-xl child of blog-article-content is the
     player block. Give it a magazine-strip treatment. */
}
body.is-episode-page .blog-article-content > .u-mb-xl:first-child .sc-episode-player {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  padding: 20px 24px;
}

/* ── Adjacent-episode navigation at the bottom of the article. */
body.is-episode-page .ep-mag-main > div:last-child {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 2px solid var(--color-border-strong);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ── Transcript styling: editorial body text. */
body.is-episode-page .ep-mag-main .transcript-toggle {
  background: transparent;
  border: none;
  border-top: 2px solid var(--color-border-strong);
  padding-top: 24px;
}
body.is-episode-page .ep-mag-main .transcript-toggle summary {
  list-style: none;
  cursor: pointer;
  padding: 0;
}
body.is-episode-page .ep-mag-main #interactive-transcript {
  margin-top: 16px;
}

/* ── Mobile: collapse the grid. Sidebar drops below main column,
   sticky goes off so the user can scroll the page normally. */
@media (max-width: 900px) {
  body.is-episode-page .sc-episode-hero { padding: calc(var(--header-height) + 24px) 0 32px; }
  body.is-episode-page .ep-mag-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body.is-episode-page .ep-mag-side__sticky {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* Light theme — the dark-ink hero stays dark on Light pages too,
   matching the Now-Recording bar's persistent dark band. */
[data-theme="light"] body.is-episode-page .sc-episode-hero {
  background: var(--color-bg-dark);
}
[data-theme="light"] body.is-episode-page .sc-episode-hero__title,
[data-theme="light"] body.is-episode-page .sc-episode-hero__cover {
  /* Keep cream text + cream border on the dark hero, no flip. */
  color: #f4efe2;
  border-color: #f4efe2;
}
[data-theme="light"] body.is-episode-page .sc-episode-hero__meta {
  color: rgba(244, 239, 226, 0.7);
}
[data-theme="light"] body.is-episode-page .ep-mag-side__sticky {
  background: rgba(43, 45, 31, 0.04);
}

/* ============================================================
   Mobile — collapses to a 2-row compact masthead with the
   hamburger handling the section-bar like the original.
   ============================================================ */
@media (max-width: 768px) {
  body.is-bento { --nav-height: 64px; }
  body.is-bento .header.bento-masthead .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-md);
    gap: 12px;
  }

  /* Top utility strip stays compact on mobile — date hides, the
     EN/theme/CTA cluster shrinks and rides next to the wordmark. */
  body.is-bento .bento-masthead__top {
    border: none;
    padding: 0;
    flex: 0 0 auto;
    order: 2;
  }
  body.is-bento .bento-masthead__date { display: none; }
  body.is-bento .bento-masthead__utility { gap: 8px; }
  body.is-bento .bento-masthead__utility .lang-toggle,
  body.is-bento .bento-masthead__utility .search-link,
  body.is-bento .bento-masthead__utility .theme-toggle {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }
  body.is-bento .bento-masthead__utility .btn.btn--primary {
    padding: 6px 9px;
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  body.is-bento .bento-masthead__wordmark-row {
    padding: 0;
    align-items: center;
    flex: 1 1 auto;
    order: 1;
    min-width: 0;
  }
  body.is-bento .bento-masthead__logo .freq-logo { height: 26px; }
  body.is-bento .bento-masthead__logo .freq-logo .bar { width: 3px; }
  body.is-bento .bento-masthead__wordmark { font-size: 18px; letter-spacing: 0.04em; }
  body.is-bento .bento-masthead__tagline { display: none; }

  /* Section bar collapses into a hidden overlay on mobile. The
     hamburger toggles `.nav.open` to slide it in. */
  body.is-bento .header.bento-masthead .nav {
    display: none;
    position: fixed;
    top: calc(var(--status-bar-h, 0px) + var(--nav-height));
    left: 0;
    right: 0;
    background: var(--color-bg-main);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-lg) var(--space-xl);
    gap: var(--space-md);
    border: none;
    border-top: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-lg);
    overflow-x: visible;
    z-index: 999;
  }
  body.is-bento .header.bento-masthead .nav.open {
    display: flex;
  }
  body.is-bento .header.bento-masthead .nav a[data-sub] {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    font-size: 16px;
  }
  body.is-bento .header.bento-masthead .nav a[data-sub]::after {
    margin-top: 0;
    font-size: 11px;
  }
  body.is-bento .header.bento-masthead .nav .nav-highlight {
    margin-left: 0;
    align-self: flex-start;
    font-size: 14px;
  }

  /* Hamburger sits at the right end. */
  body.is-bento .header.bento-masthead .menu-toggle {
    order: 3;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  /* On really narrow phones, drop the inline CTA text so just the
     hamburger + theme/EN cluster ride next to the wordmark. CTA
     moves into the overlay where it lives as a tap target. */
  body.is-bento .bento-masthead__utility .btn.btn--primary { display: none; }
}

/* ════════════════════════════════════════════════════════════
   FIXED-HEADER CLEARANCE for content sections that are the first
   child of body on Bento pages. The masthead is position:fixed at
   ~168px (204px with the status bar), so any content section that
   was tuned for the pre-Bento header (~72px) must override its
   top padding to account for --header-height.
   ──────────────────────────────────────────────────────────── */

/* Guest profiles: sc-profile.css has a flat 100px top, but team
   pages override inline (with calc(--header-height + 80px)). Mirror
   that here so guest pages — which don't carry the inline style —
   also clear the masthead. The inline style on team pages still
   wins because of cascade origin precedence. */
body.is-bento .sc-profile {
  padding-top: calc(var(--header-height) + 64px);
}

/* ════════════════════════════════════════════════════════════
   SPIELE-HUB  ·  /spiele.html  +  /en/games.html
   Two-tile Bento landing for Quiz + Sinnsuche.
   ──────────────────────────────────────────────────────────── */

body.is-spiele-page main.spiele-hub {
  padding-top: calc(var(--header-height) + 48px);
  padding-bottom: 80px;
  min-height: calc(100vh - var(--header-height));
}

body.is-spiele-page .spiele-hub .container {
  max-width: 1280px;
}

/* ── Intro band ─────────────────────────────────────────── */
body.is-spiele-page .spiele-hub__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
  max-width: 760px;
}
body.is-spiele-page .spiele-hub__eyebrow {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}
body.is-spiele-page .spiele-hub__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(56px, 8vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
}
body.is-spiele-page .spiele-hub__lead {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--color-text-secondary);
  font-style: italic;
  max-width: 640px;
  margin: 0;
}

/* ── Two-tile grid ──────────────────────────────────────── */
body.is-spiele-page .spiele-hub__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 880px) {
  body.is-spiele-page .spiele-hub__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Shared tile shell ─────────────────────────────────── */
body.is-spiele-page .spiele-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px clamp(28px, 3vw, 44px) 32px;
  border-radius: 24px;
  min-height: 520px;
  overflow: hidden;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
/* Make the tile's flow children sit ABOVE the absolutely-positioned
   deco. Without this, the deco (last child) covers content. */
body.is-spiele-page .spiele-tile > *:not(.spiele-tile__deco) {
  position: relative;
  z-index: 2;
}
body.is-spiele-page .spiele-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}
body.is-spiele-page .spiele-tile__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
body.is-spiele-page .spiele-tile__label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body.is-spiele-page .spiele-tile__meta {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  opacity: 0.78;
}
body.is-spiele-page .spiele-tile__title {
  font-family: var(--font-heading);
  font-weight: 900;
  /* Container is ~512px wide on a 1280-viewport (6-col tile in the
     2-col grid). Syne 900 uppercase needs ~10×fs for "SINNsuche."
     to fit, so the safe ceiling is fs ≤ container/10 ≈ 50–58px. */
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 8px 0 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
body.is-spiele-page .spiele-tile__title em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: -0.01em;
}
body.is-spiele-page .spiele-tile__title-period {
  color: var(--color-accent);
}
body.is-spiele-page .spiele-tile__sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  max-width: 460px;
  margin: 0;
  opacity: 0.88;
}
body.is-spiele-page .spiele-tile__sub em {
  font-style: normal;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78em;
  letter-spacing: 0.06em;
}
body.is-spiele-page .spiele-tile__rules {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
body.is-spiele-page .spiele-tile__rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.is-spiele-page .spiele-tile__rules li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
}
body.is-spiele-page .spiele-tile__cta {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 200ms ease, background 200ms ease;
}
body.is-spiele-page .spiele-tile__cta:hover {
  transform: translateX(4px);
}

/* ── Quiz tile (Fynbos blue) ───────────────────────────── */
body.is-spiele-page .spiele-tile--quiz {
  background: var(--fynbos-blue);
  color: var(--bento-on-brand-dark);
}
body.is-spiele-page .spiele-tile--quiz .spiele-tile__label,
body.is-spiele-page .spiele-tile--quiz .spiele-tile__title-period {
  color: var(--bento-on-brand-dark);
}
body.is-spiele-page .spiele-tile--quiz .spiele-tile__rules li span {
  background: var(--bento-on-brand-dark);
  color: var(--fynbos-blue);
}
body.is-spiele-page .spiele-tile--quiz .spiele-tile__cta {
  background: var(--bento-on-brand-dark);
  color: var(--fynbos-blue);
}
body.is-spiele-page .spiele-tile--quiz .spiele-tile__cta:hover {
  background: #000;
}

/* Quiz deco — animated frequency bars in the bottom-right.
   z-index 1 sits above the tile background, below the content
   (which is z-index 2 via the > *:not(.deco) rule above). */
body.is-spiele-page .spiele-tile--quiz .spiele-tile__deco {
  position: absolute;
  right: -12px;
  bottom: -8px;
  width: 220px;
  height: 160px;
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
}
body.is-spiele-page .spiele-tile--quiz .spiele-tile__deco-bars {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100%;
}
body.is-spiele-page .spiele-tile--quiz .spiele-tile__deco-bars span {
  flex: 1;
  background: var(--bento-on-brand-dark);
  border-radius: 6px 6px 0 0;
  animation: spiele-bar 1.2s ease-in-out infinite;
}
body.is-spiele-page .spiele-tile--quiz .spiele-tile__deco-bars span:nth-child(1) { height: 30%; animation-delay: 0.0s; }
body.is-spiele-page .spiele-tile--quiz .spiele-tile__deco-bars span:nth-child(2) { height: 60%; animation-delay: 0.1s; }
body.is-spiele-page .spiele-tile--quiz .spiele-tile__deco-bars span:nth-child(3) { height: 80%; animation-delay: 0.2s; }
body.is-spiele-page .spiele-tile--quiz .spiele-tile__deco-bars span:nth-child(4) { height: 50%; animation-delay: 0.3s; }
body.is-spiele-page .spiele-tile--quiz .spiele-tile__deco-bars span:nth-child(5) { height: 70%; animation-delay: 0.4s; }
body.is-spiele-page .spiele-tile--quiz .spiele-tile__deco-bars span:nth-child(6) { height: 90%; animation-delay: 0.5s; }
body.is-spiele-page .spiele-tile--quiz .spiele-tile__deco-bars span:nth-child(7) { height: 45%; animation-delay: 0.6s; }
body.is-spiele-page .spiele-tile--quiz .spiele-tile__deco-bars span:nth-child(8) { height: 65%; animation-delay: 0.7s; }
body.is-spiele-page .spiele-tile--quiz .spiele-tile__deco-bars span:nth-child(9) { height: 35%; animation-delay: 0.8s; }
@keyframes spiele-bar {
  0%, 100% { transform: scaleY(0.6); transform-origin: bottom; }
  50%      { transform: scaleY(1);   transform-origin: bottom; }
}

/* ── Sinnsuche tile (Fynbos melon — warm peach) ────────── */
body.is-spiele-page .spiele-tile--sinnsuche {
  background: var(--fynbos-melon);
  color: var(--bento-on-brand-dark);
}
body.is-spiele-page .spiele-tile--sinnsuche .spiele-tile__label,
body.is-spiele-page .spiele-tile--sinnsuche .spiele-tile__title-period {
  color: var(--fynbos-pomegranate);
}
body.is-spiele-page .spiele-tile--sinnsuche .spiele-tile__rules li span {
  background: var(--bento-on-brand-dark);
  color: var(--fynbos-melon);
}
body.is-spiele-page .spiele-tile--sinnsuche .spiele-tile__cta {
  background: var(--fynbos-pomegranate);
  color: #fff;
}
body.is-spiele-page .spiele-tile--sinnsuche .spiele-tile__cta:hover {
  background: #a83c3c;
}

/* Sinnsuche deco — kalt → warm → heiß heat scale */
body.is-spiele-page .spiele-tile--sinnsuche .spiele-tile__deco {
  position: absolute;
  right: 28px;
  bottom: 28px;
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}
body.is-spiele-page .spiele-tile--sinnsuche .spiele-tile__deco-words {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600;
}
body.is-spiele-page .spiele-tile--sinnsuche .spiele-tile__deco-words span:nth-child(1) {
  color: var(--fynbos-blue);
  opacity: 0.7;
}
body.is-spiele-page .spiele-tile--sinnsuche .spiele-tile__deco-words span:nth-child(2) {
  color: var(--color-accent);
  font-size: 1.15em;
}
body.is-spiele-page .spiele-tile--sinnsuche .spiele-tile__deco-words--hot {
  color: var(--fynbos-pomegranate) !important;
  font-size: 1.4em !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Footnote ───────────────────────────────────────────── */
body.is-spiele-page .spiele-hub__footnote {
  margin-top: 32px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--color-text-muted);
  text-align: center;
}

/* ── Mobile tweaks ──────────────────────────────────────── */
@media (max-width: 640px) {
  body.is-spiele-page .spiele-tile {
    min-height: 440px;
    padding: 28px 24px;
  }
  body.is-spiele-page .spiele-tile__title {
    font-size: clamp(48px, 13vw, 72px);
  }
  body.is-spiele-page .spiele-tile__rules {
    gap: 10px;
  }
  body.is-spiele-page .spiele-tile__rules li {
    font-size: 11px;
  }
}