/* /watch — inherits palette variables, fonts, .nav, .reveal etc from ../style.css */

.watch-body{background:#fff3ee}

nav a.active{color:var(--pink)}
nav a.active:after{content:"";display:block;height:2px;margin-top:4px;background:linear-gradient(90deg,var(--pink),var(--amber))}

.watch-main{
  min-height:100svh;
  padding:150px 8vw 120px;
  background:
    radial-gradient(circle at 85% 10%,#f7c9d6 0%,transparent 45%),
    radial-gradient(circle at 5% 90%,var(--blue-soft) 0%,transparent 42%),
    radial-gradient(circle at 15% 5%,var(--amber-soft) 0%,transparent 38%),
    linear-gradient(165deg,#fff3ee 0%,#ffe9ce 100%);
  display:flex;
  justify-content:center;
}

.watch-hero{max-width:960px;width:100%;text-align:center;position:relative}
.watch-hero .eyebrow{justify-content:center;display:flex;align-items:center}
.watch-hero h1{font:800 clamp(48px,7vw,88px)/.9 Manrope;letter-spacing:-4px;margin:22px 0 12px}
.watch-hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--pink),var(--amber) 60%,var(--lilac));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.watch-hero .lead{margin:0 auto;text-align:center}

.watch-controls{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
  margin:40px 0 45px;
}

.select-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.select-wrap>span{
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:700;
  color:#8a878c;
  padding-left:6px;
}
.select-wrap select{
  appearance:none;
  -webkit-appearance:none;
  font:700 14px/1 "DM Sans",sans-serif;
  color:#25252b;
  padding:14px 42px 14px 22px;
  min-width:190px;
  border-radius:100px;
  border:2px solid var(--pink);
  cursor:pointer;
  background:
    linear-gradient(180deg,#fff,#fff) padding-box,
    linear-gradient(120deg,var(--pink),var(--amber)) border-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23e65d80'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E") no-repeat right 16px center / 14px;
  transition:.25s;
}
.select-wrap select:hover,.select-wrap select:focus{
  outline:none;
  transform:translateY(-2px);
  box-shadow:0 10px 22px #e65d8030;
}
.select-wrap:nth-child(2) select{
  border-color:var(--blue);
  background:
    linear-gradient(180deg,#fff,#fff) padding-box,
    linear-gradient(120deg,var(--blue),var(--lilac)) border-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236f7fd6'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E") no-repeat right 16px center / 14px;
}
.select-wrap:nth-child(2) select:hover,.select-wrap:nth-child(2) select:focus{
  box-shadow:0 10px 22px #6f7fd630;
}

.player-wrap{
  position:relative;
  max-width:900px;
  margin:0 auto;
  border-radius:22px;
  padding:8px;
  background:linear-gradient(120deg,var(--pink),var(--amber),var(--moss),var(--blue),var(--lilac));
  box-shadow:0 30px 60px #62313c30;
}
.player-wrap video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  background:#181418;
}
.player-status{
  margin-top:16px;
  font-size:12px;
  color:#8a7a80;
  line-height:1.6;
}
.player-status code{
  color:var(--pink);
  background:#fff;
  padding:2px 8px;
  border-radius:6px;
  font-size:11px;
}
.player-status.is-error code{color:#c94b4b}

footer{position:relative;margin-top:0}

@media(max-width:850px){
  .watch-main{padding:130px 6vw 90px}
  .watch-controls{gap:12px}
  .select-wrap select{min-width:0;width:100%}
}
@media(max-width:560px){
  .watch-hero h1{letter-spacing:-2px}
  .player-wrap{border-radius:16px;padding:5px}
  .player-wrap video{border-radius:11px}
}