/* Longevity Biome — page composition */

/* Reserve viewport height while the SPA renders so the loading→content swap
   and the footer don't shift (kills cumulative layout shift on first paint). */
#app { display: block; min-height: 100vh; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: var(--s-5); height: 68px; }
.brand { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-weight: 600; }
.brand img { width: 40px; height: 40px; border-radius: 50%; }
.brand__name { font-size: 1.2rem; color: var(--accent-ink); letter-spacing: -0.01em; white-space: nowrap; }
:root[data-theme="dark"] .brand__name { color: var(--text); }
@media (prefers-color-scheme: dark) { .brand__name { color: var(--text); } }
.nav__links { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.nav__links a { padding: 0.5em 0.9em; border-radius: var(--r-pill); font-weight: 600; font-size: 0.92rem; color: var(--text-soft); transition: all var(--dur) var(--ease); }
.nav__links a:hover, .nav__links a.is-active { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.nav__search {
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--r-pill);
  padding: 0.4em 0.9em; min-width: 180px;
}
.nav__search input { border: 0; background: transparent; color: var(--text); outline: none; width: 100%; font-size: 0.9rem; }
.theme-toggle { background: transparent; border: 1px solid var(--card-line); border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; font-size: 1rem; color: var(--text-soft); }
.theme-toggle:hover { border-color: var(--gold); color: var(--gold); }
.nav__toggle { display: none; margin-left: auto; background: transparent; border: 1px solid var(--card-line); border-radius: var(--r-sm); padding: 0.45em 0.8em; color: var(--text); font-weight: 600; }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent, var(--bg) 92%); }
.hero__inner { position: relative; z-index: 2; padding: var(--s-8) 0; text-align: center; }
.hero__title { margin: 0 0 var(--s-4); }
.hero__title em { color: var(--gold); font-style: normal; }
.hero__copy { max-width: 60ch; margin: 0 auto var(--s-6); font-size: var(--fs-lede); color: var(--text-soft); }
.hero__actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* Stats bar */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); padding: var(--s-8) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { text-align: center; }
.stat__value { font-family: var(--font-display); font-size: var(--h2); color: var(--gold-ink); display: block; line-height: 1; }
.stat__label { font-size: 0.82rem; color: var(--text-faint); margin-top: 6px; display: block; }

/* Featured episode */
.featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-6); align-items: center; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.featured__media { position: relative; aspect-ratio: 16/9; background: var(--forest-deep); }
.featured__media img { width: 100%; height: 100%; object-fit: cover; }
.featured__media .vcard__play { opacity: 1; background: linear-gradient(transparent 40%, var(--overlay-strong)); }
.featured__body { padding: var(--s-6) var(--s-6) var(--s-6) 0; }
.featured__body h2 { font-size: var(--h2); margin-bottom: var(--s-3); }

/* Axis section heading */
.axis-head { display: flex; align-items: baseline; gap: var(--s-3); margin: var(--s-7) 0 0; flex-wrap: wrap; }
.section .container > .axis-head:first-child { margin-top: 0; }
.axis-head h2 { font-size: var(--h3); }
.axis-head p { font-size: 0.9rem; color: var(--text-faint); margin: 0; }

/* Playlist page hero */
.pl-hero { padding: var(--s-8) 0; background: var(--bg-panel); border-bottom: 1px solid var(--line); }
.pl-hero__emoji { font-size: 3rem; }
.pl-hero h1 { font-size: var(--h1); margin: var(--s-3) 0; }
.pl-hero__desc { max-width: var(--maxw-text); color: var(--text-soft); }

/* Filter bar */
.filterbar { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-5) 0; }

/* Disclaimer / legal */
.disclaimer { background: color-mix(in srgb, var(--gold) 8%, var(--bg-panel)); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); font-size: 0.85rem; color: var(--text-soft); }
.disclaimer strong { color: var(--accent-ink); }
:root[data-theme="dark"] .disclaimer strong { color: var(--moss); }

/* Modal content */
.drawer__thumb { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--r-md); background: var(--bg-panel-2); margin-bottom: var(--s-4); }
.drawer__title { font-size: var(--h3); margin-bottom: var(--s-2); }
.drawer__sci { font-style: italic; color: var(--text-faint); font-size: 0.9rem; margin-bottom: var(--s-4); }
.drawer__section { margin: var(--s-5) 0; }
.drawer__section h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-ink); margin-bottom: var(--s-2); font-family: var(--font-body); }
.drawer__card { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); font-size: 0.9rem; color: var(--text-soft); }
.drawer__pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.drawer__commerce { background: color-mix(in srgb, var(--gold) 10%, var(--bg-panel)); border: 1px dashed var(--gold); border-radius: var(--r-md); padding: var(--s-4); text-align: center; }
.qr-box { width: 132px; height: 132px; margin: var(--s-3) auto; background: var(--qr-bg); border-radius: var(--r-sm); display: grid; place-items: center; padding: 8px; }
.qr-box svg { width: 100%; height: 100%; }
.qr-soon { width: 132px; height: 132px; margin: var(--s-3) auto; border: 2px dashed var(--card-line); border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-faint); font-size: 0.75rem; text-align: center; padding: var(--s-3); }

/* Footer */
.site-footer { background: var(--forest-deep); color: var(--cream); padding: var(--s-8) 0 var(--s-6); margin-top: var(--s-9); }
.site-footer a { color: var(--moss); }
.site-footer a:hover { color: var(--gold-bright); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-5); margin-bottom: var(--s-6); }
.footer-grid h4 { color: var(--cream); font-size: var(--h5); margin-bottom: var(--s-3); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: 0.9rem; }
.footer__brand p { color: var(--on-forest); font-size: 0.9rem; max-width: 42ch; }
.footer__legal { border-top: 1px solid var(--on-forest-line); padding-top: var(--s-4); font-size: 0.8rem; color: var(--on-forest-faint); }

.empty-note { text-align: center; padding: var(--s-8); color: var(--text-faint); }

/* Back-to-top / view switch */
.view { display: none; }
.view.is-active { display: block; }

@media (max-width: 900px) {
  .featured { grid-template-columns: 1fr; }
  .featured__body { padding: var(--s-5); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav__links, .nav__search { display: none; }
  .nav__toggle { display: inline-flex; }
  .site-header.is-open .nav__links { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--s-3); gap: var(--s-1); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}