/* ── INDEX PAGE ── */

/* ═══ HERO ═══ */
.hero {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  align-items: stretch; /* both columns same height */
  padding-bottom: 0;
}

/* ── IMAGE COLUMN ── */
.hero-img-wrap {
  position: relative;
  min-height: 600px;
  border-radius: var(--radius);
  border: 1px solid rgba(184,176,184,0.1);
  overflow: hidden;
  background: var(--c-panel);
}

/* red atmospheric glow sitting behind the character */
.hero-glow-behind {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 60%,
      rgba(139,20,40,0.28) 0%,
      rgba(96,24,72,0.15) 45%,
      transparent 75%);
  pointer-events: none;
}

.hero-char {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  mix-blend-mode: lighten;
  filter: drop-shadow(0 0 24px rgba(176,40,64,0.4));
}

.hero-img-glow {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  height: 35%;
  background: linear-gradient(0deg, rgba(139,20,40,0.18) 0%, transparent 100%);
  pointer-events: none;
}

/* corner deco */
.hero-corner { position: absolute; z-index: 3; width: 16px; height: 16px; pointer-events: none; }
.hero-corner::before, .hero-corner::after { content:''; position:absolute; background: var(--c-crimson); }
.hero-corner::before { width:100%; height:1px; }
.hero-corner::after  { width:1px; height:100%; }
.htl { top:6px; left:6px; } .htl::before { top:0; left:0; } .htl::after { top:0; left:0; }
.htr { top:6px; right:6px; } .htr::before { top:0; right:0; } .htr::after { top:0; right:0; }
.hbl { bottom:6px; left:6px; } .hbl::before { bottom:0; left:0; } .hbl::after { bottom:0; left:0; }
.hbr { bottom:6px; right:6px; } .hbr::before { bottom:0; right:0; } .hbr::after { bottom:0; right:0; }

/* ── INFO COLUMN ── */
.hero-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

.hero-eyebrow {
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--c-stone);
}
.hero-name {
  font-family: var(--font-cine);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--c-stone);
  line-height: 1;
}
.hero-sub {
  font-family: var(--font-gothic);
  font-size: 58px;
  color: var(--c-white);
  display: block;
  text-shadow: 0 0 40px rgba(176,40,64,0.6), 0 0 80px rgba(128,112,168,0.2);
  line-height: 0.88;
  letter-spacing: 0.02em;
}
.hero-quote {
  font-style: italic;
  font-size: 12.5px;
  color: var(--c-linen);
  border-left: 2px solid var(--c-crimson);
  padding-left: 12px;
  line-height: 1.6;
  margin: 0;
}
.hero-bio {
  font-size: 12.5px;
  color: var(--c-ash);
  line-height: 1.75;
  margin: 0;
}
.hero-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.hero-links { display: flex; flex-wrap: wrap; gap: 6px; }

.link-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 5px currentColor;
}

/* ── LORE SNIPPET ── */
.hero-lore {
  background: rgba(28,18,24,0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(176,40,64,0.18);
  border-left: 2px solid rgba(176,40,64,0.5);
  border-radius: var(--radius);
  padding: 12px 14px;
  flex: 1; /* grows to fill available space */
}
.hero-lore-label {
  font-family: var(--font-head);
  font-size: 8.5px;
  letter-spacing: 0.26em;
  color: var(--c-crimson);
  margin-bottom: 8px;
}
.hero-lore p {
  font-size: 11.5px;
  color: var(--c-ash);
  line-height: 1.75;
  margin-bottom: 8px;
}
.hero-lore p:last-of-type { margin-bottom: 10px; }
.lore-read-more {
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--c-stone);
  text-decoration: none;
  transition: color var(--transition);
}
.lore-read-more:hover { color: var(--c-blush); }

/* ── STREAM SCHEDULE CARD ── */
.stream-card {
  background: rgba(20,14,20,0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(184,176,184,0.1);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.stream-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(184,176,184,0.08);
}
.stream-card-label {
  font-family: var(--font-head);
  font-size: 8.5px;
  letter-spacing: 0.26em;
  color: var(--c-stone);
}
.stream-status {
  font-family: var(--font-head);
  font-size: 8px;
  letter-spacing: 0.2em;
  padding: 2px 8px;
  border-radius: 1px;
  background: rgba(40,32,40,0.6);
  border: 1px solid rgba(184,176,184,0.12);
  color: var(--c-stone);
}
.stream-status.live {
  background: rgba(139,20,40,0.3);
  border-color: var(--c-crimson);
  color: var(--c-rose);
  box-shadow: 0 0 8px rgba(176,40,64,0.3);
  animation: pulse-dot 2s ease infinite;
}

.schedule-grid { display: flex; flex-direction: column; gap: 2px; }
.sched-row {
  display: flex; align-items: center;
  padding: 4px 6px;
  border-radius: 1px;
  gap: 12px;
}
.sched-row.active {
  background: rgba(139,20,40,0.12);
  border-left: 1px solid rgba(176,40,64,0.35);
}
.sched-day {
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--c-stone);
  width: 28px;
  flex-shrink: 0;
}
.sched-row.active .sched-day { color: var(--c-blush); }
.sched-time {
  font-size: 10.5px;
  color: var(--c-ash);
}
.sched-row:not(.active) .sched-time { color: var(--c-muted); }

.stream-note {
  font-size: 9.5px;
  color: var(--c-muted);
  font-style: italic;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(184,176,184,0.06);
}

/* ═══ INFO GRID — full width ═══ */
.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.card-scroll { max-height: 160px; }

.likes-list { display: flex; flex-direction: column; }
.like-item {
  font-size: 11.5px;
  color: var(--c-ash);
  padding: 7px 0 7px 14px;
  border-bottom: 1px solid rgba(184,176,184,0.06);
  position: relative;
  line-height: 1.4;
}
.like-item::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-crimson);
  box-shadow: 0 0 4px var(--c-crimson);
}
.like-item.dis { color: var(--c-stone); }
.like-item.dis::before { background: var(--c-muted); box-shadow: none; }
.like-item:last-child { border-bottom: none; }

.info-table { width: 100%; border-collapse: collapse; }
.info-table td {
  padding: 6px 0;
  font-size: 11.5px;
  border-bottom: 1px solid rgba(184,176,184,0.06);
  vertical-align: top;
  line-height: 1.5;
}
.info-table td:first-child {
  color: var(--c-stone);
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: 0.12em;
  padding-right: 10px;
  width: 88px;
  padding-top: 7px;
}
.info-table tr:last-child td { border-bottom: none; }

/* cursor glow */
.cursor-glow {
  position: fixed; z-index: 9001; pointer-events: none;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176,40,64,0.07) 0%, transparent 70%);
  transform: translate(-50%,-50%);
  mix-blend-mode: screen;
  transition: left 0.08s ease, top 0.08s ease;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-img-wrap { min-height: 360px; }
  .hero-sub { font-size: 44px; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .info-grid { grid-template-columns: 1fr; }
}

/* ── FOLLOW / SUBSCRIBE ROW ── */
.support-row {
  margin-top: 2px;
}
.support-label {
  font-family: var(--font-head);
  font-size: 8.5px;
  letter-spacing: 0.26em;
  color: var(--c-stone);
  margin-bottom: 7px;
}
.support-btns {
  display: flex; flex-wrap: wrap; gap: 7px;
}
.support-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
}
.twitch-follow {
  background: rgba(145,70,255,0.15);
  border-color: rgba(145,70,255,0.35);
  color: #c4a0ff;
}
.twitch-follow:hover {
  background: rgba(145,70,255,0.28);
  border-color: #9146ff;
  color: #fff;
  box-shadow: 0 0 14px rgba(145,70,255,0.3);
}
.twitch-sub {
  background: rgba(145,70,255,0.25);
  border-color: rgba(145,70,255,0.5);
  color: #d4b8ff;
}
.twitch-sub:hover {
  background: rgba(145,70,255,0.4);
  border-color: #9146ff;
  color: #fff;
  box-shadow: 0 0 14px rgba(145,70,255,0.4);
}
.yt-sub {
  background: rgba(255,0,0,0.12);
  border-color: rgba(255,0,0,0.3);
  color: #ff8888;
}
.yt-sub:hover {
  background: rgba(255,0,0,0.22);
  border-color: #ff0000;
  color: #fff;
  box-shadow: 0 0 14px rgba(255,0,0,0.25);
}

/* ── ABOUT TEASER ── */
.about-teaser-text {
  font-size: 12px;
  color: var(--c-ash);
  line-height: 1.8;
  margin-bottom: 10px;
}
.about-teaser-link {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--c-crimson);
  text-decoration: none;
  margin-top: 4px;
  transition: color var(--transition);
}
.about-teaser-link:hover { color: var(--c-blush); }