/* Yumecrest episode hub - one stylesheet, no frameworks, no webfonts, no icon libs.
   Mobile-first: 2-col episode grid <768px, 3-col 768-1200px, 4-col above. */

:root {
  --bg: #0b0b0f;
  --bg-2: #131319;
  --bg-3: #1b1b23;
  --line: #26262f;
  --fg: #f2f2f5;
  --fg-dim: #a2a2ae;
  --fg-faint: #6e6e7c;
  --accent: #ff2d78;
  --accent-2: #7b3dff;
  --radius: 12px;
  --pad: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }

.yc-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- age gate ---------- */

.yc-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  background: rgba(6, 6, 10, 0.96);
  backdrop-filter: blur(6px);
}
html.yc-age-ok .yc-gate { display: none; }
html.yc-age-pending body { overflow: hidden; }

.yc-gate-panel {
  width: 100%;
  max-width: 460px;
  padding: 28px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  text-align: center;
}
.yc-gate-mark { margin: 0 0 18px; letter-spacing: .34em; font-size: 12px; color: var(--fg-faint); }
.yc-gate-title { margin: 0 0 12px; font-size: 22px; line-height: 1.25; }
.yc-gate-copy { margin: 0 0 22px; color: var(--fg-dim); font-size: 14px; }
.yc-gate-actions { display: grid; gap: 10px; }
.yc-gate-bye { margin: 18px 0 0; color: var(--accent); font-size: 14px; }
.yc-gate.is-refused .yc-gate-actions { opacity: .35; pointer-events: none; }
.yc-gate-fine { margin: 22px 0 0; font-size: 12px; color: var(--fg-faint); }
.yc-gate-fine a { color: var(--fg-dim); }

/* ---------- buttons ---------- */

.yc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.yc-btn:active { transform: scale(.98); }
.yc-btn-primary { background: var(--accent); color: #fff; }
.yc-btn-ghost { background: transparent; border-color: var(--line); color: var(--fg); }
.yc-btn-sm { padding: 8px 14px; font-size: 14px; }
.yc-btn-lg { padding: 15px 26px; font-size: 17px; width: 100%; max-width: 380px; }
.yc-btn[disabled] { opacity: .4; cursor: default; }
.yc-btn-soon {
  background: var(--bg-3); color: var(--fg-faint); border-color: var(--line);
  cursor: default; font-weight: 500;
}

/* ---------- header / footer ---------- */

.yc-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--pad);
  background: rgba(11, 11, 15, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.yc-wordmark {
  font-weight: 800;
  letter-spacing: .22em;
  font-size: 15px;
  text-decoration: none;
}

.yc-main { padding-bottom: 48px; }

.yc-footer {
  border-top: 1px solid var(--line);
  padding: 28px var(--pad) 40px;
  color: var(--fg-faint);
  font-size: 13px;
  text-align: center;
}
.yc-disclosure { margin: 0 0 8px; color: var(--fg-dim); font-size: 14px; }
.yc-footer-contact { margin: 0 0 14px; }
.yc-footer-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 14px; }
.yc-footer a { color: var(--fg-dim); }
.yc-copyright { margin: 0; }

/* ---------- section furniture ---------- */

.yc-section-title {
  margin: 30px var(--pad) 12px;
  font-size: 17px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.yc-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.yc-crumb { padding: 14px var(--pad) 0; font-size: 14px; }
.yc-crumb a { color: var(--fg-dim); text-decoration: none; }

/* ---------- media + placeholder ---------- */

.yc-media { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--bg-3); overflow: hidden; }
.yc-media img, .yc-media video { width: 100%; height: 100%; object-fit: cover; }

/* Ken Burns drift for poster-ONLY cards (no loop/idle video asset at all — build.py's
   yc-poster-drift class, media_block()'s poster-only branch). Cards WITH video already have their
   own motion; this just keeps a still card from reading as dead weight next to them. Guarded
   behind prefers-reduced-motion so a user who opted out never gets an uncontrollable infinite
   animation. */
@media (prefers-reduced-motion: no-preference) {
  .yc-poster-drift img {
    animation: yc-ken-burns 14s ease-in-out infinite alternate;
    transform-origin: center;
  }
}
@keyframes yc-ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
.yc-placeholder {
  display: flex;
  align-items: flex-end;
  padding: 14px;
  width: 100%;
  height: 100%;
}
.yc-placeholder span {
  font-weight: 700;
  font-size: 15px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

/* ---------- hero (newest live episode) ---------- */

.yc-hero { padding: var(--pad); }
.yc-hero-media { border-radius: var(--radius); overflow: hidden; }
.yc-hero .yc-media { aspect-ratio: 16 / 9; }
.yc-hero-body { padding-top: 14px; }
.yc-hero-title { margin: 0 0 8px; font-size: 26px; line-height: 1.15; }
.yc-hero-hook { margin: 0 0 12px; color: var(--fg-dim); }
.yc-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.yc-hero .yc-card-meta { margin: 0; }

/* ---------- empty state (no live episode yet) ---------- */

.yc-empty-state {
  margin: 22px var(--pad);
  padding: 40px 22px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--bg-2), rgba(123, 61, 255, .10));
  text-align: center;
}
.yc-empty-headline { margin: 0 0 12px; font-size: 26px; line-height: 1.2; }
.yc-empty-copy { margin: 0 auto 22px; max-width: 48ch; color: var(--fg-dim); font-size: 15px; }

/* ---------- episode grid ---------- */

.yc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 var(--pad);
}
.yc-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
}
.yc-card-media { position: relative; display: block; text-decoration: none; }
.yc-card-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 12px; }
.yc-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 11px;
  color: var(--fg-faint);
}
.yc-chip {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--fg-dim);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.yc-card-title { margin: 0; font-size: 15px; line-height: 1.25; }
.yc-card-hook { margin: 0; font-size: 13px; line-height: 1.35; color: var(--fg-dim); }
.yc-card .yc-btn { margin-top: 4px; padding: 9px 12px; font-size: 13px; }

.yc-badge {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(8, 8, 12, .78);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.yc-badge-live { background: var(--accent); color: #fff; }

.yc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.yc-tags li {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--fg-faint);
  font-size: 11px;
}

/* ---------- join block (the list) ---------- */

.yc-join {
  margin: 34px var(--pad);
  padding: 28px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--bg-2), rgba(255, 45, 120, .14));
  text-align: center;
}
/* Capture-first (2026-08-13): the join block now sits DIRECTLY under the hero on both generated
   pages, so it lands above the fold instead of below the grid. Pull its top margin in when it
   follows the hero / empty state, and give it a touch more presence than a mid-page section. */
.yc-hero + .yc-join,
.yc-empty-state + .yc-join,
.yc-go-hero + .yc-join { margin-top: 14px; padding: 30px 18px; }

.yc-join .yc-section-title { margin: 0 0 10px; color: var(--fg); text-transform: none; font-size: 22px; }
.yc-join-copy { margin: 0 auto 18px; max-width: 46ch; color: var(--fg-dim); font-size: 14px; }
.yc-join-or { margin: 16px 0 10px; font-size: 12px; color: var(--fg-faint); }
.yc-join .yc-btn-lg { margin: 0 auto; }
.yc-capture { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.yc-capture-input {
  flex: 1 1 210px;
  max-width: 300px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
}
.yc-capture-input::placeholder { color: var(--fg-faint); }
.yc-join-fine { margin: 14px 0 0; font-size: 12px; color: var(--fg-faint); }

/* ---------- support strip ---------- */

.yc-support { margin: 30px var(--pad); text-align: center; }
.yc-support .yc-section-title { margin: 0 0 6px; text-transform: none; color: var(--fg); font-size: 19px; }
.yc-support-line { margin: 0 0 14px; color: var(--fg-dim); font-size: 14px; }
.yc-support-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- /go (tube-facing capture landing) ---------- */

.yc-go-hero { padding: 30px var(--pad) 4px; text-align: center; }
.yc-go-title { margin: 0 0 10px; font-size: 30px; line-height: 1.1; letter-spacing: .04em; }
.yc-go-pitch { margin: 0 auto; max-width: 44ch; color: var(--fg-dim); font-size: 16px; }
/* The hero CTA is a scroll to #join; the join block itself carries the real signup buttons. */
.yc-go-cta { margin: 18px auto 0; }

.yc-teasers { margin: 30px 0 0; }
.yc-teaser-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 var(--pad);
}
.yc-teaser {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
  text-decoration: none;
}
.yc-teaser .yc-media { aspect-ratio: 4 / 5; }
.yc-teaser-title {
  display: block;
  padding: 8px 10px 10px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
}
.yc-teaser-fine {
  margin: 14px var(--pad) 0;
  text-align: center;
  font-size: 12px;
  color: var(--fg-faint);
}

/* ---------- legal pages ---------- */

.yc-legal { max-width: 68ch; margin: 0 auto; padding: 0 var(--pad) 30px; }
.yc-legal-flag {
  margin: 16px 0;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}
.yc-legal-title { margin: 0 0 4px; font-size: 26px; }
.yc-legal-updated { margin: 0 0 22px; color: var(--fg-faint); font-size: 13px; }
.yc-legal h2 { margin: 26px 0 8px; font-size: 17px; }
.yc-legal p, .yc-legal li { color: var(--fg-dim); font-size: 15px; }
.yc-legal code { background: var(--bg-3); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.yc-legal-note { color: var(--fg-faint); font-style: italic; font-size: 13px; }

/* ---------- breakpoints ---------- */

@media (min-width: 768px) {
  :root { --pad: 24px; }
  .yc-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .yc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    padding: 28px var(--pad);
  }
  .yc-hero-title { font-size: 34px; }
  .yc-go-title { font-size: 40px; }
  .yc-go-hero { padding: 44px var(--pad) 6px; }
  .yc-teaser-strip { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .yc-empty-state { padding: 56px 30px; }
  .yc-empty-headline { font-size: 32px; }
  .yc-card-title { font-size: 16px; }
  .yc-card-hook { font-size: 14px; }
}

@media (min-width: 1200px) {
  .yc-grid { grid-template-columns: repeat(4, 1fr); }
  /* GO_TEASER_MAX is 6, so the strip is exactly one row at this width. */
  .yc-teaser-strip { grid-template-columns: repeat(6, 1fr); }
  .yc-main, .yc-header { max-width: 1360px; margin-left: auto; margin-right: auto; }
  .yc-card-media:hover .yc-media { filter: brightness(1.06); }
  .yc-teaser:hover .yc-media { filter: brightness(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .yc-btn { transition: none; }
}