/* /live/ — Lume Live (live/live.js). Builds on css/style.css + css/lp.css (product cards .sp from the shop). */
.live { padding-top: clamp(28px, 4vw, 48px); }
.live-head { max-width: 760px; }
.live-state { display: inline-flex; align-items: center; gap: 8px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.is-live .live-dot { background: #e5322d; box-shadow: 0 0 0 0 rgba(229, 50, 45, .55); animation: live-pulse 1.6s ease-out infinite; }
.is-live .live-state { color: #e5322d; }
@keyframes live-pulse { to { box-shadow: 0 0 0 10px rgba(229, 50, 45, 0); } }
@media (prefers-reduced-motion: reduce) { .is-live .live-dot { animation: none; } }
.lp main .live-head h1 { margin-top: 10px; font: 400 clamp(36px, 5vw, 60px)/1.04 var(--serif); letter-spacing: -0.01em; }
.lp main .live-head h1 em { color: var(--accent); }
.live-note { margin-top: 12px; color: var(--fg-2); font-size: 15.5px; line-height: 1.6; }

.live-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 22px; margin-top: 26px; align-items: start; }
.live-player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; border: 1px solid var(--line); }
.live-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px;
  text-align: center; background: var(--surface); color: var(--fg); }
.live-off svg { width: 46px; height: 46px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linejoin: round; }
.live-off-t { font: 400 clamp(22px, 2.6vw, 30px)/1.15 var(--serif); }
.live-off-s { color: var(--muted); font-size: 14px; max-width: 420px; line-height: 1.55; }
.live-links { margin-top: 10px; font-size: 13px; color: var(--muted); }
.live-links a { color: var(--accent); margin-left: 6px; }
.live-chat { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.live-chat.is-frame { height: 460px; }
.live-chat-off { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; padding: 22px; text-align: center; }
.live-chat-t { font: 600 15px/1.3 var(--sans); }
.live-chat-s { color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 420px; }
@media (min-width: 1024px) { .live-chat-off { min-height: 220px; } }
.live-chat iframe { width: 100%; height: 100%; border: 0; }

.live-side { display: grid; gap: 14px; align-content: start; }
.lp main .live-h { font: 600 15px/1.3 var(--sans); margin: 0 0 8px; }
.live-pl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 300px; overflow: auto; }
.live-pi { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface); }
.live-pi.is-pin { border-color: var(--accent); }
.live-pi-img img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.live-pi-t { display: grid; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.3; }
.live-pi-t a { color: var(--fg); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-pi-t a:hover { color: var(--accent); }
.live-pi-t small { font: 500 12.5px/1.3 var(--mono); color: var(--fg-2); }
.live-pi-t small s { color: var(--muted); margin-left: 4px; }
.live-pi-out { font-size: 12.5px; color: var(--muted); }
.live-pin-k { color: var(--accent); font: 600 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.live-order:empty { display: none; }
.live-empty { color: var(--muted); font-size: 14px; line-height: 1.55; grid-column: 1 / -1; list-style: none; }

.live-more { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }
.live-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px 40px; }
.lp main .live-more h2 { font: 400 clamp(28px, 3.2vw, 40px)/1.08 var(--serif); }
.lp main .live-more h2 em { color: var(--accent); }
.live-sched { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.live-sched li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.live-sched time { font: 500 13px/1.5 var(--mono); color: var(--accent); }
.live-replay { position: relative; aspect-ratio: 16 / 9; margin-top: 18px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #000; }
.live-replay iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 980px) {
  .live-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .live-player { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); border-radius: 0; border-left: 0; border-right: 0; }
}


/* the four series after the live (build-pages lp:series): one card per series, to its page */
.series { padding-top: clamp(40px, 6vw, 72px); }
.series-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.series-card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; color: var(--fg); text-decoration: none; transition: border-color .2s; }
.series-card:hover { border-color: var(--accent); }
.series-img { display: block; aspect-ratio: 5 / 4; background: var(--surface-2); overflow: hidden; }
.series-img picture, .series-img img { display: block; width: 100%; height: 100%; }
.series-img img { object-fit: cover; transition: transform .5s ease; }
.series-card:hover .series-img img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .series-img img { transition: none; } .series-card:hover .series-img img { transform: none; } }
.series-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 16px; flex: 1; }
.series-name { font: 400 26px/1.1 var(--serif); }
.series-name small { margin-left: 6px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); vertical-align: middle; }
.series-tag { color: var(--muted); font-size: 13px; line-height: 1.45; flex: 1; }
.series-go { margin-top: 6px; color: var(--accent); font-weight: 600; font-size: 14px; }
@media (max-width: 980px) { .series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .series-name { font-size: 22px; } .series-body { padding: 12px; } }