/* Villa de Drama: "late-night villa broadcast". Dark plum glass, hot pink, sunset orange, gold for the money. */
@import url("fonts/fonts.css");

:root {
  --night: #140a1c;
  --plum: #1f1029;
  --plum-2: #2a1636;
  --seam: #45284f;
  --text: #f7eef6;
  --muted: #c4b0c6;
  --pink: #ff2e88;
  --orange: #ff8a3d;
  --gold: #f6c453;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --tag: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --max: 1160px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(20, 10, 28, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--seam);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; }
.top .brand img { height: 38px; width: auto; }
.top nav { display: flex; gap: 22px; }
.top nav a {
  font: 700 15px/1 var(--tag); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.top nav a:hover { color: var(--text); }
.live {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 13px/1 var(--tag); letter-spacing: .16em; color: #fff;
  background: var(--pink); padding: 6px 10px 5px; transform: skew(-10deg);
}
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .2; } }
@media (max-width: 720px) { .top nav a.hide-sm { display: none; } .top nav { gap: 14px; } }

/* Hero */
.hero {
  position: relative; min-height: min(88vh, 860px);
  display: grid; place-items: center; text-align: center;
  background: var(--night) url("img/hero.jpg") center bottom / cover no-repeat;
  overflow: hidden;
}
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, var(--night)); }
.hero-inner { position: relative; z-index: 1; padding: 48px 20px 30vh; }
.hero h1 { margin: 0; }
.hero h1 img { width: min(560px, 82vw); height: auto; margin: 0 auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.45)); }
.hero .pitch {
  font: 600 clamp(20px, 3vw, 28px)/1.25 var(--tag); letter-spacing: .02em;
  max-width: 640px; margin: 10px auto 26px; text-shadow: 0 2px 16px rgba(0,0,0,.7);
}

.btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn {
  display: inline-block; text-decoration: none; cursor: pointer; border: 0;
  font: 700 18px/1 var(--tag); letter-spacing: .1em; text-transform: uppercase;
  padding: 15px 26px 14px; color: #fff; background: var(--pink);
  transform: skew(-10deg); box-shadow: 0 8px 24px rgba(255, 46, 136, .35);
}
.btn > span { display: inline-block; transform: skew(10deg); }
.btn:hover { background: #ff4f9b; color: #fff; }
.btn.ghost { background: rgba(31, 16, 41, .75); box-shadow: inset 0 0 0 2px var(--gold); color: var(--gold); }
.btn.ghost:hover { background: var(--gold); color: var(--night); }

/* Sections */
section { padding: 84px 0; scroll-margin-top: 62px; }
.kicker {
  display: inline-block; font: 700 14px/1 var(--tag); letter-spacing: .2em; text-transform: uppercase;
  color: var(--night); background: var(--orange); padding: 6px 10px 5px; transform: skew(-10deg); margin-bottom: 16px;
}
h2 {
  font: 400 clamp(36px, 6vw, 60px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em;
  margin: 0 0 18px;
}
h2 .hl { color: var(--pink); }
.lede { color: var(--muted); font-size: 19px; max-width: 700px; margin: 0 0 40px; }

/* Trailer */
.trailer { background: linear-gradient(180deg, var(--night), var(--plum)); }
.screen {
  position: relative; border: 1px solid var(--seam); background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 6px var(--plum-2);
}
.screen video { width: 100%; aspect-ratio: 16 / 9; }

/* Features: alternating clip + copy */
.feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: center; margin-bottom: 64px; }
.feature:last-child { margin-bottom: 0; }
.feature:nth-child(even) .clip { order: 2; }
.clip { position: relative; border: 1px solid var(--seam); background: #000; }
.clip video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.clip .tag {
  position: absolute; left: 12px; top: 12px; font: 700 13px/1 var(--tag); letter-spacing: .16em;
  background: rgba(20,10,28,.85); color: var(--gold); padding: 6px 9px 5px; border-left: 3px solid var(--pink);
}
.feature h3 { font: 400 34px/1.05 var(--display); text-transform: uppercase; margin: 0 0 12px; }
.feature p { color: var(--muted); margin: 0 0 12px; }
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; gap: 20px; }
  .feature:nth-child(even) .clip { order: 0; }
}

/* Cast */
.cast { background: var(--plum); }
.cast-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.member { background: var(--plum-2); border: 1px solid var(--seam); text-align: center; padding: 16px 10px 14px; }
.member img { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 10px; border: 3px solid var(--pink); object-fit: cover; }
.member b { display: block; font: 400 24px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.member span { display: block; font: 600 15px/1.2 var(--tag); letter-spacing: .06em; color: var(--gold); margin-top: 6px; text-transform: uppercase; }
@media (max-width: 900px) { .cast-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .cast-grid { grid-template-columns: repeat(2, 1fr); } }

.host { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; margin-top: 36px; padding: 24px; border: 1px solid var(--gold); background: rgba(246,196,83,.06); }
.host img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); }
.host h3 { font: 400 30px/1 var(--display); text-transform: uppercase; margin: 0 0 6px; }
.host p { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .host { grid-template-columns: 1fr; text-align: center; } .host img { margin: 0 auto; } }

/* Screenshots */
.shots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.shots a { display: block; border: 1px solid var(--seam); overflow: hidden; }
.shots img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .3s; }
.shots a:hover img { transform: scale(1.04); }
.shots a:nth-child(1), .shots a:nth-child(2) { grid-column: span 3; }
.shots a:nth-child(n+3) { grid-column: span 2; }
@media (max-width: 640px) { .shots { grid-template-columns: 1fr 1fr; } .shots a:nth-child(n) { grid-column: span 1; } .shots a:nth-child(1) { grid-column: span 2; } }

/* On-device AI band */
.tech { background: radial-gradient(1200px 400px at 50% 0%, rgba(255,46,136,.18), transparent), var(--night); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pillar { border: 1px solid var(--seam); background: var(--plum); padding: 22px; }
.pillar b { display: block; font: 700 22px/1.1 var(--tag); text-transform: uppercase; letter-spacing: .06em; color: var(--gold); margin-bottom: 8px; }
.pillar p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; } }

/* Signup / follow */
.follow { text-align: center; background: linear-gradient(180deg, var(--night), var(--plum-2)); }
.follow .lede { margin-left: auto; margin-right: auto; }

/* Footer */
footer { border-top: 1px solid var(--seam); background: #0f0715; padding: 40px 0 48px; color: var(--muted); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-start; }
footer img { height: 34px; width: auto; margin-bottom: 10px; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
footer nav a { color: var(--text); text-decoration: none; font: 700 15px/1 var(--tag); letter-spacing: .1em; text-transform: uppercase; }
footer nav a:hover { color: var(--gold); }
footer small { display: block; margin-top: 6px; }

/* Placeholders Joe still has to fill in. Remove the class once the value is real. */
.todo { background: rgba(255, 138, 61, .22); outline: 1px dashed var(--orange); padding: 0 4px; border-radius: 2px; }

/* Long-form (privacy policy) */
.doc { max-width: 780px; margin: 0 auto; padding: 64px 20px 90px; }
.doc h1 { font: 400 clamp(40px, 7vw, 64px)/1 var(--display); text-transform: uppercase; margin: 0 0 10px; }
.doc .meta { color: var(--muted); margin: 0 0 30px; }
.doc h2 { font-size: clamp(26px, 4vw, 34px); margin: 48px 0 12px; color: var(--text); }
.doc h3 { font: 700 21px/1.2 var(--tag); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin: 28px 0 8px; }
.doc p, .doc li { color: #e6d9e6; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.summary { border: 1px solid var(--gold); background: rgba(246,196,83,.06); padding: 20px 24px; margin: 0 0 20px; }
.summary ul { margin: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 14px 0 6px; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--seam); }
.doc th { font: 700 14px/1.2 var(--tag); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.doc code { font-size: .9em; background: var(--plum-2); padding: 1px 5px; border-radius: 3px; word-break: break-word; }
.table-scroll { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }