/* ==========================================================================
   Hub page styles
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { padding-block: clamp(var(--space-12), 9vw, var(--space-24)) clamp(var(--space-10), 6vw, var(--space-20)); }
.hero__grid {
  display: grid; gap: clamp(var(--space-8), 5vw, var(--space-16));
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-hero); line-height: 0.94; letter-spacing: -0.035em;
  text-transform: lowercase;
}
.hero__title .dots { color: var(--color-brand); -webkit-text-stroke: 1.5px var(--color-ink); }
.hero__tag {
  margin-top: var(--space-6); font-size: var(--text-lg);
  color: var(--color-text-muted); max-width: 34ch;
}
.hero__actions {
  margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-4);
}
.hero__mark {
  border: var(--ink) solid var(--color-ink);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-ink);
  overflow: hidden; rotate: -2.5deg;
  max-width: 380px; margin-inline: auto; width: 100%;
}
.hero__mark img { width: 100%; }

/* ---------- Watch ---------- */
.tabs {
  display: inline-flex; gap: var(--space-1); padding: var(--space-1);
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
}
.tab {
  padding: var(--space-2) var(--space-5); min-height: 40px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted);
}
.tab[aria-selected='true'] {
  background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.tab .live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #d93025; margin-right: var(--space-2); vertical-align: 1px;
}

.player {
  position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 880px;
  border: var(--ink) solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ink);
  overflow: hidden; background: #000;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__note {
  margin-top: var(--space-4); max-width: 62ch; font-size: var(--text-sm); color: var(--color-text-muted);
}

/* ---------- About ---------- */
.about__grid {
  display: grid; gap: clamp(var(--space-8), 5vw, var(--space-16));
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 880px) { .about__grid { grid-template-columns: 1fr; } }
.prose p { font-size: var(--text-base); margin-bottom: var(--space-5); max-width: 62ch; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }

.pullquote {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.02em;
  padding: var(--space-6) 0 var(--space-6) var(--space-6);
  border-left: 4px solid var(--color-brand);
  color: var(--color-text);
  max-width: 34ch;
}
.segments-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-6);
}
.segments-list li {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text-muted);
}

/* ---------- Art strip ---------- */
.strip { overflow: hidden; padding-block: var(--space-6); border-block: var(--ink) solid var(--color-ink); background: var(--color-surface-offset); }
.strip__track {
  display: flex; gap: var(--space-4); width: max-content;
  animation: drift 60s linear infinite;
}
.strip:hover .strip__track { animation-play-state: paused; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; }
  .strip { overflow-x: auto; }
}
.strip img {
  width: 280px; aspect-ratio: 16 / 9; object-fit: cover; flex: none;
  border: var(--ink) solid var(--color-ink); border-radius: var(--radius-md);
}

/* ---------- Segment callouts ---------- */
.callouts { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .callouts { grid-template-columns: 1fr; } }
.callout {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  border: var(--ink) solid var(--color-ink);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-ink);
  background: var(--color-surface);
  text-decoration: none; color: var(--color-text);
}
.callout:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--color-ink); }
.callout__url {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--color-primary);
}
.callout__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.callout p { color: var(--color-text-muted); font-size: var(--text-sm); }
.callout__go {
  margin-top: auto; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.callout:hover .callout__go svg { transform: translateX(4px); }
.callout__go svg { transition: transform var(--transition-interactive); }

/* ---------- Archive ---------- */
.ep-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.ep {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); overflow: hidden;
  text-decoration: none; color: var(--color-text);
  content-visibility: auto; contain-intrinsic-size: 320px;
}
.ep:hover { border-color: var(--color-ink); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ep__art { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--color-surface-dynamic); border-bottom: 1px solid var(--color-border); }
.ep__art--blank { display: grid; place-items: center; background: var(--color-surface-dynamic); }
.ep__art--blank.v0 { background: radial-gradient(70% 90% at 18% 22%, var(--haze-2), transparent 68%), radial-gradient(70% 90% at 84% 82%, var(--haze-1), transparent 68%), var(--color-surface-dynamic); }
.ep__art--blank.v1 { background: radial-gradient(75% 95% at 82% 18%, var(--haze-3), transparent 66%), radial-gradient(70% 90% at 14% 86%, var(--haze-4), transparent 68%), var(--color-surface-dynamic); }
.ep__art--blank.v2 { background: radial-gradient(80% 100% at 50% 10%, var(--haze-1), transparent 64%), radial-gradient(70% 90% at 20% 92%, var(--haze-2), transparent 68%), var(--color-surface-dynamic); }
.ep__art--blank.v3 { background: radial-gradient(70% 90% at 12% 40%, var(--haze-4), transparent 66%), radial-gradient(75% 95% at 88% 60%, var(--haze-2), transparent 68%), var(--color-surface-dynamic); }
.ep__art--blank span {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl);
  letter-spacing: -0.03em; color: var(--color-ink); opacity: 0.45;
}
[data-theme="dark"] .ep__art--blank span {
  color: var(--color-text); opacity: 0.55;
}
.ep__art--blank .dots { color: var(--color-primary); opacity: 0.9; }
.ep__body { padding: var(--space-5); display: grid; gap: var(--space-2); }
.ep__date { font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing: 0.06em; text-transform: uppercase; }
.ep__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); letter-spacing: -0.01em; }
.ep__excerpt { font-size: var(--text-sm); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.skel { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.skel__art { aspect-ratio: 16 / 9; background: var(--color-surface-dynamic); }
.skel__line { height: 12px; border-radius: var(--radius-sm); background: var(--color-surface-dynamic); margin: var(--space-4) var(--space-5) 0; }
.skel__line--short { width: 45%; }
.skel__line:last-child { margin-bottom: var(--space-6); }
.skel__art, .skel__line { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.archive__more { margin-top: var(--space-8); display: flex; justify-content: center; }
.state {
  padding: var(--space-10); text-align: center;
  border: 1px dashed var(--color-border); border-radius: var(--radius-lg);
  color: var(--color-text-muted);
}

/* ---------- Support ---------- */
.support {
  display: grid; gap: clamp(var(--space-6), 4vw, var(--space-12));
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  border: var(--ink) solid var(--color-ink);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-ink);
  background: var(--color-surface);
}
@media (max-width: 820px) { .support { grid-template-columns: 1fr; } }
.support ul { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.support li { display: flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.support li svg { flex: none; margin-top: 4px; color: var(--color-primary); }

/* ---------- Elsewhere / contact ---------- */
.links-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.linkcard {
  display: grid; gap: var(--space-1); padding: var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); text-decoration: none; color: var(--color-text);
}
.linkcard:hover { border-color: var(--color-ink); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.linkcard__url { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-primary); }
.linkcard__what { font-size: var(--text-sm); color: var(--color-text-muted); }

.contact-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: var(--space-6);
}
.contact {
  padding: var(--space-5);
  border-left: 1px solid var(--color-border);
}
.contact dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-faint); margin-bottom: var(--space-2); }
.contact dd a { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--color-primary); text-decoration: none; word-break: break-word; }
.contact dd a:hover { text-decoration: underline; }

/* ---------- Schedule calendar ---------- */
.cal {
  margin-top: var(--space-8);
  width: 100%; max-width: 880px; height: 700px;
  border: var(--ink) solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ink);
  overflow: hidden; background: var(--color-surface);
}
.cal iframe { width: 100%; height: 100%; border: 0; display: block; }
.cal__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 700px) { .cal { height: 520px; } }