/* ===== Home Page ===== */

/* ── Hero ── */
.hero {
  background: var(--c-midnight);
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-8);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(232,154,60,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.hero__copy { position: relative; z-index: 1; }
.hero__eyebrow { margin-bottom: var(--s-4); }
.hero__wordmark {
  font-family: var(--f-display);
  font-size: clamp(52px, 9vw, 100px);
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 0.9;
  margin-bottom: var(--s-5);
}
.hero__wordmark .bliss { color: var(--c-cream); }
.hero__wordmark .hue   { color: var(--c-carmel); }
.hero__wordmark .cafe  {
  display: block;
  font-size: 0.28em;
  letter-spacing: 8px;
  color: var(--c-stone);
  font-family: var(--f-ui);
  font-weight: 400;
  margin-top: 8px;
}
.hero__tagline {
  font-size: clamp(14px, 2vw, 18px);
  color: var(--c-stone);
  margin-bottom: var(--s-7);
  line-height: 1.6;
  max-width: 420px;
}
.hero__tagline em { color: var(--c-carmel); font-style: normal; font-weight: 700; }
.hero__ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; }

.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__img {
  width: 100%;
  max-width: 560px;
  border-radius: var(--r-xl);
  object-fit: cover;
  position: relative;
  z-index: 1;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.hero__glow {
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(232,154,60,0.25) 0%, transparent 70%);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero__logo-badge {
  position: absolute;
  bottom: -20px; right: 20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--c-carmel);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 2;
}

/* ── Branch status strip ── */
.branch-strip {
  background: var(--c-espresso);
  padding: var(--s-4) 0;
}
.branch-strip__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-6);
  overflow-x: auto;
  scrollbar-width: none;
}
.branch-strip__inner::-webkit-scrollbar { display: none; }
.branch-strip__label {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--c-stone);
  text-transform: uppercase;
  flex-shrink: 0;
}
.branch-chip {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.05);
}
.branch-chip__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-soldout);
}
.branch-chip--open .branch-chip__dot { background: var(--c-ready); }
.branch-chip__name { font-size: 12px; font-weight: 600; color: var(--c-cream); }

/* ── Lineup ── */
.lineup {
  background: var(--c-cream);
  padding: var(--s-8) 0;
}
.lineup__header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s-6);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--s-6);
}
.lineup__title { }
.lineup__grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s-6);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--s-4);
}

/* ── Watch section ── */
.watch-section {
  background: var(--c-midnight);
  padding: var(--s-8) 0;
}
.watch-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s-6);
}
.watch-section__header {
  text-align: center;
  margin-bottom: var(--s-7);
}
.watch-section__header .h2 { color: var(--c-cream); }
.watch-section__layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--s-6);
  align-items: start;
}
.watch-player {
  background: #000;
  border-radius: var(--r-xl);
  aspect-ratio: 9/16;
  max-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.watch-player__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  color: rgba(255,255,255,0.4);
}
.watch-player__placeholder-icon { font-size: 48px; opacity: 0.5; }
.watch-player__placeholder-name { font-size: 18px; font-weight: 700; color: var(--c-cream); }
.watch-player__placeholder-desc { font-size: 12px; color: var(--c-stone); }
.watch-player video {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--r-xl);
}

.watch-list { display: flex; flex-direction: column; gap: var(--s-3); }
.watch-list__tabs { margin-bottom: var(--s-4); }
.watch-list__items {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-height: 520px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(232,154,60,0.3) transparent;
}
.watch-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast);
  border: 1.5px solid transparent;
}
.watch-item:hover { background: rgba(255,255,255,0.04); }
.watch-item.active {
  background: rgba(232,154,60,0.1);
  border-color: rgba(232,154,60,0.3);
}
.watch-item__swatch {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.watch-item__info { flex: 1; min-width: 0; }
.watch-item__name { font-size: 14px; font-weight: 700; color: var(--c-cream); }
.watch-item__desc { font-size: 11px; color: var(--c-stone); margin-top: 2px; }
.watch-item__play {
  font-size: 18px;
  color: var(--c-carmel);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.watch-item:hover .watch-item__play,
.watch-item.active .watch-item__play { opacity: 1; }

/* ── Story ── */
.story-section {
  background: var(--c-latte);
  padding: var(--s-8) 0;
}
.story-section__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--s-6);
  text-align: center;
}
.story-section__quote {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.15;
  margin: var(--s-5) 0;
  color: var(--c-midnight);
}
.story-section__quote em { color: var(--c-carmel); font-style: normal; }
.story-section__stats {
  display: flex;
  justify-content: center;
  gap: var(--s-8);
  margin-top: var(--s-7);
}
.stat { text-align: center; }
.stat__num {
  font-size: 36px;
  font-weight: 900;
  color: var(--c-carmel);
  line-height: 1;
}
.stat__label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-stone);
  margin-top: var(--s-2);
}

@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    padding: var(--s-6) var(--s-4);
    min-height: auto;
    gap: var(--s-6);
  }
  .hero__visual { order: -1; }
  .hero__img { max-width: 100%; border-radius: var(--r-lg); }
  .hero__logo-badge { width: 60px; height: 60px; }
  .watch-section__layout {
    grid-template-columns: 1fr;
  }
  .watch-player { max-height: 400px; }
  .lineup__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .story-section__stats { gap: var(--s-5); }
}