/* ===================================================================
   OG NETWORK — watch pages (www.theognetwork.net/watch/<id>): the
   title's own page. The player on top, the title, Share and Embed,
   the episodes, more to watch, the OG list. Rides on site.css.
   =================================================================== */
.watch-page { background: var(--noir); }
.wt { position: relative; z-index: 2; padding-top: var(--nav-h); }
.wt-in { max-width: 1320px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---- the stage ---- */
.wt-stage {
  position: relative; padding: clamp(0px, 2.2vw, 26px) clamp(0px, 3.6vw, 44px);
  background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(203,182,130,0.09), rgba(203,182,130,0) 70%), #0b0a08;
  border-bottom: 1px solid rgba(203,182,130,0.1);
}
.wt-frame { position: relative; max-width: 1280px; margin: 0 auto; }
.wt-player {
  position: relative; margin: 0 auto; aspect-ratio: 16 / 9;
  width: min(100%, calc((100svh - var(--nav-h) - 52px) * 16 / 9));
  background: #000 center / cover no-repeat; border-radius: clamp(0px, 1.1vw, 14px); overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(203,182,130,0.08);
}
.wt-tall .wt-player { aspect-ratio: 9 / 16; width: min(100%, 460px, calc((100svh - var(--nav-h) - 52px) * 9 / 16)); }
@supports not (aspect-ratio: 1) {
  .wt-player { height: 0; padding-top: 56.25%; }
  .wt-tall .wt-player { padding-top: 177.78%; }
}
@media (max-width: 700px) {
  .wt-stage { padding: 0; border-bottom: 0; }
  .wt-player { border-radius: 0; width: 100%; }
  .wt-tall .wt-player { width: min(100%, calc((100svh - var(--nav-h) - 12px) * 9 / 16)); }
}

/* ---- the title ---- */
.wt-info {
  display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: clamp(24px, 4vw, 60px); align-items: start;
  padding-top: clamp(24px, 3.4vw, 46px); padding-bottom: clamp(18px, 3vw, 36px);
}
.wt-info .eyebrow { margin-bottom: 12px; }
.wt-title { font-size: clamp(30px, 4.6vw, 58px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; color: #fff; text-wrap: balance; }
.wt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 14px; color: #d3cab6; font-size: 14.5px; }
.wt-meta .pill { border: 1px solid rgba(203,182,130,0.5); border-radius: 5px; padding: 1px 7px; font-size: 12px; font-weight: 700; color: var(--gold-soft); }
.wt-meta .sep { opacity: 0.45; }
.wt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 4px; }
.wt-actions .btn svg { flex: none; }
.wt-syn { margin-top: 20px; max-width: 72ch; color: #d8d0bf; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.68; }
.wt-credits { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin-top: 22px; font-size: 14px; line-height: 1.5; }
.wt-credits dt { padding-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.wt-credits dd { margin: 0; color: #e7e0d0; }
.wt-fine { margin-top: 20px; font-size: 13px; color: #8f856f; line-height: 1.5; }
.wt-poster img {
  width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 14px;
  border: 1px solid rgba(203,182,130,0.2); box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
@media (max-width: 900px) {
  .wt-info { grid-template-columns: minmax(0, 1fr); }
  .wt-poster { display: none; }
}
@media (max-width: 600px) {
  .wt-actions { gap: 10px; }
  .wt-actions [data-wt-play] { flex: 1 1 100%; }
  .wt-actions .btn-ghost { flex: 1 1 auto; padding: 12px 14px; font-size: 14.5px; }
}

/* ---- section headings ---- */
.wt-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin-bottom: 16px; }
.wt-sec-h h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; color: #fff; }
.wt-all { color: var(--gold-soft); font-size: 14px; font-weight: 700; }
.wt-all:hover { color: #fff; }

/* ---- episodes ---- */
.wt-eps { padding-top: clamp(8px, 2vw, 22px); padding-bottom: clamp(22px, 3vw, 40px); }
.wt-seasons { display: flex; flex-wrap: wrap; gap: 6px; }
.wt-season { padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(203,182,130,0.35); color: #dacfb3; font-size: 13.5px; font-weight: 700; }
.wt-season[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: #15120d; }
.wt-eplist { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.wt-eplist li[hidden] { display: none; }
.wt-ep {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px; text-align: left;
  border-radius: 14px; border: 1px solid rgba(203,182,130,0.12); background: rgba(255,255,255,0.035);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.wt-ep:hover { background: rgba(203,182,130,0.1); border-color: rgba(203,182,130,0.35); }
.wt-ep.on { border-color: var(--gold); background: rgba(203,182,130,0.14); }
.wt-ep-art { position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #241e15; }
.wt-ep-art img { width: 100%; height: 100%; object-fit: cover; }
.wt-ep-art i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.2s; }
.wt-ep:hover .wt-ep-art i, .wt-ep.on .wt-ep-art i { opacity: 1; }
.wt-ep-t { min-width: 0; }
.wt-ep-t b { display: block; font-size: 15px; line-height: 1.3; color: #f4f1ea; }
.wt-ep-t small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.wt-ep-syn { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px; font-size: 13px; line-height: 1.45; color: #bdb6a7; }

/* ---- more to watch ---- */
.wt-more { padding: clamp(18px, 3vw, 40px) 0 clamp(10px, 2vw, 24px); }
.wt-rail {
  --edge: max(var(--pad), calc((100vw - 1320px) / 2 + var(--pad)));
  display: flex; gap: clamp(12px, 1.4vw, 20px); overflow-x: auto; scrollbar-width: none;
  padding: 6px var(--edge) 18px; scroll-snap-type: x proximity; scroll-padding-left: var(--edge);
}
.wt-rail::-webkit-scrollbar { display: none; }
.wt-card { flex: none; width: clamp(126px, 13.5vw, 188px); scroll-snap-align: start; }
.wt-card-art {
  display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 12px; background: #1c1813;
  border: 1px solid rgba(203,182,130,0.14); transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.wt-card-art img { width: 100%; height: 100%; object-fit: cover; }
.wt-card:hover .wt-card-art, .wt-card:focus-visible .wt-card-art { transform: translateY(-4px); border-color: rgba(203,182,130,0.45); }
.wt-card-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #e6dfcf; }

/* ---- the OG list ---- */
.wt-join { max-width: 1320px; margin: 0 auto; padding: clamp(10px, 2vw, 24px) 0 clamp(44px, 6vw, 84px); }

/* ---- a title that has left ---- */
.wt-left { padding-top: clamp(56px, 9vw, 128px); padding-bottom: clamp(18px, 3vw, 30px); }
.wt-left .wt-syn { max-width: 60ch; }