/* ============================================================
   KAM9.TV — design tokens
   Concept: a modern streaming destination with the soul of a
   local TV station call sign. Warm near-black "studio dark",
   tungsten-amber signal color, timecode/mono utility layer.
   Sections are "channels".
   ============================================================ */
:root{
  --bg:        #100F0C;   /* warm near-black base */
  --bg-raised:      #1A1815;   /* raised surfaces */
  --line:       #2B2822;   /* hairlines */
  --text:      #F0EBDF;   /* warm off-white text */
  --text-dim:        #98917F;   /* metadata gray */
  --accent:   #FFA928;   /* signal amber — set-light warmth */
  --accent-soft: rgba(255,169,40,.14);
  --accent-2:       #E8695C;   /* Love Love page accent (per-section shift) */
  --accent-2-soft:  rgba(232,105,92,.14);

  --display: "Bricolage Grotesque", sans-serif;
  --body:    "Archivo", sans-serif;
  --mono:    "IBM Plex Mono", monospace;

  --max: 1180px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

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

/* ---------- mono utility layer (timecodes, channel labels) ---------- */
.tc{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.tc b{ color:var(--accent); font-weight:500; }

/* ---------- nav ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(16,15,12,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.wordmark{
  font-family:var(--display);
  font-weight:800;
  font-size:22px;
  letter-spacing:.02em;
  display:flex; align-items:baseline; gap:2px;
}
.wordmark .nine{ color:var(--accent); }
.wordmark .tv{
  font-family:var(--mono); font-weight:500; font-size:11px;
  color:var(--text-dim); letter-spacing:.14em; margin-left:6px;
  border:1px solid var(--line); padding:2px 6px; border-radius:3px;
}
.navlinks{ display:flex; gap:26px; align-items:center; }
.navlinks a{
  font-size:13.5px; font-weight:500; color:var(--text-dim);
  transition:color .2s;
}
.navlinks a:hover{ color:var(--text); }
.menu-btn{
  display:none; background:none; border:1px solid var(--line);
  color:var(--text); font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; padding:8px 12px; border-radius:4px; cursor:pointer;
}
.mobile-menu{
  display:none; flex-direction:column; gap:0;
  border-top:1px solid var(--line);
}
.mobile-menu a{
  padding:14px 24px; font-size:15px; color:var(--text-dim);
  border-bottom:1px solid var(--line);
}
.mobile-menu.open{ display:flex; }

@media (max-width:900px){
  .navlinks{ display:none; }
  .menu-btn{ display:block; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:72px 0 64px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero::before{
  /* faint tungsten glow, like a set light bleeding into black */
  content:""; position:absolute; inset:auto -20% -60% -20%;
  height:70%;
  background:radial-gradient(ellipse at 30% 100%, rgba(255,169,40,.09), transparent 60%);
  pointer-events:none;
}
.onair{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  color:var(--accent); text-transform:uppercase;
  border:1px solid rgba(255,169,40,.35);
  padding:6px 12px; border-radius:99px;
  margin-bottom:28px;
}
.onair .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

.hero h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(40px, 7vw, 84px);
  line-height:.98;
  letter-spacing:-.02em;
  max-width:14ch;
}
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero p.lede{
  margin-top:22px; max-width:52ch;
  color:var(--text-dim); font-size:17px;
}
.hero-cta{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-weight:600; font-size:14px;
  padding:13px 22px; border-radius:6px;
  border:1px solid var(--line);
  transition:transform .15s, border-color .2s, background .2s;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); }
.btn.primary{
  background:var(--accent); color:#181205; border-color:var(--accent);
}
.btn.primary:hover{ background:#ffb64d; }
.btn.ghost:hover{ border-color:var(--text-dim); }
.btn .tri{ font-size:10px; }

/* film-leader frame under hero */
.leader{
  margin-top:56px;
  position:relative;
  aspect-ratio:16/9;
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  overflow:hidden;
}
.leader::after{
  /* SMPTE-style corner registration marks */
  content:""; position:absolute; inset:14px;
  background:
    linear-gradient(var(--line),var(--line)) top left/18px 1px,
    linear-gradient(var(--line),var(--line)) top left/1px 18px,
    linear-gradient(var(--line),var(--line)) top right/18px 1px,
    linear-gradient(var(--line),var(--line)) top right/1px 18px,
    linear-gradient(var(--line),var(--line)) bottom left/18px 1px,
    linear-gradient(var(--line),var(--line)) bottom left/1px 18px,
    linear-gradient(var(--line),var(--line)) bottom right/18px 1px,
    linear-gradient(var(--line),var(--line)) bottom right/1px 18px;
  background-repeat:no-repeat;
  pointer-events:none;
}
.leader .count{
  font-family:var(--display); font-weight:800;
  font-size:clamp(64px,12vw,140px);
  color:var(--line);
  user-select:none;
}
.leader .play{
  position:absolute;
  width:72px; height:72px; border-radius:50%;
  background:var(--accent); color:#181205;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  box-shadow:0 8px 40px rgba(255,169,40,.35);
  transition:transform .2s;
}
.leader:hover .play{ transform:scale(1.08); }
.leader .caption{
  position:absolute; left:24px; bottom:18px;
}

/* ---------- channel guide ---------- */
.section{ padding:72px 0; border-bottom:1px solid var(--line); }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:36px; gap:16px; flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(24px,3.4vw,36px); letter-spacing:-.01em;
}
.section-head .tc a{ color:var(--accent); }

.guide{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:10px; overflow:hidden;
}
.guide a{
  background:var(--bg); padding:26px 26px 30px;
  transition:background .2s;
  display:flex; flex-direction:column; gap:10px;
}
.guide a:hover{ background:var(--bg-raised); }
.guide .ch{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--accent);
}
.guide h3{
  font-family:var(--display); font-weight:700; font-size:21px;
}
.guide p{ font-size:14px; color:var(--text-dim); line-height:1.55; }
@media (max-width:720px){ .guide{ grid-template-columns:1fr; } }

/* ---------- featured film row ---------- */
.feature{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
}
@media (max-width:860px){ .feature{ grid-template-columns:1fr; gap:28px; } }
.poster{
  aspect-ratio:2/3; max-height:520px;
  background:linear-gradient(160deg, #241a17, #100F0C 70%);
  border:1px solid var(--line); border-radius:10px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px; position:relative; overflow:hidden;
}
.poster::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 20%, var(--accent-2-soft), transparent 55%);
}
.poster .ptitle{
  font-family:var(--display); font-weight:800; font-size:40px;
  line-height:1; color:var(--text); position:relative;
}
.poster .ptitle span{ color:var(--accent-2); }
.feature h3{
  font-family:var(--display); font-weight:700; font-size:30px; margin-bottom:14px;
}
.feature p{ color:var(--text-dim); margin-bottom:22px; max-width:46ch; }
.platforms{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  border:1px solid var(--line); color:var(--text-dim);
  padding:6px 12px; border-radius:99px;
}

/* ---------- series strip ---------- */
.strip{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:720px){ .strip{ grid-template-columns:1fr; } }
.card{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:10px;
  padding:26px; transition:border-color .2s;
  display:flex; flex-direction:column; gap:12px;
}
.card:hover{ border-color:var(--text-dim); }
.card .thumb{
  aspect-ratio:16/9; border-radius:6px; border:1px solid var(--line);
  background:
    radial-gradient(ellipse at 30% 40%, var(--accent-soft), transparent 60%),
    var(--bg);
  display:flex; align-items:center; justify-content:center;
  color:var(--line); font-family:var(--display); font-weight:800; font-size:40px;
}
.card h3{ font-family:var(--display); font-weight:700; font-size:20px; }
.card p{ font-size:14px; color:var(--text-dim); }

/* ---------- newsletter / footer ---------- */
.signal{
  padding:80px 0; text-align:center; border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255,169,40,.07), transparent 60%);
}
.signal h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(26px,4vw,42px); margin:14px 0 10px;
}
.signal p{ color:var(--text-dim); max-width:44ch; margin:0 auto 28px; }
.sub{
  display:flex; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center;
}
.sub input{
  flex:1; min-width:220px;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:6px;
  padding:13px 16px; color:var(--text); font-family:var(--body); font-size:14px;
}
.sub input::placeholder{ color:var(--text-dim); }

footer{ padding:44px 0 60px; }
.foot{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  color:var(--text-dim); font-size:13px;
}
.foot .cols{ display:flex; gap:40px; flex-wrap:wrap; }
.foot a:hover{ color:var(--text); }

/* ---------- film page ---------- */
.film-hero{
  padding:64px 0 56px; border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.film-hero::before{
  content:""; position:absolute; inset:auto -20% -70% -20%; height:80%;
  background:radial-gradient(ellipse at 60% 100%, var(--accent-2-soft), transparent 60%);
  pointer-events:none;
}
.crumb{ margin-bottom:26px; }
.crumb a{ color:var(--text-dim); }
.crumb a:hover{ color:var(--text); }
.film-hero h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(44px,8vw,92px); line-height:.96; letter-spacing:-.02em;
}
.film-hero h1 span{ color:var(--accent-2); }
.film-meta{ margin-top:18px; display:flex; gap:18px; flex-wrap:wrap; }
.film-lede{ margin-top:22px; color:var(--text-dim); max-width:56ch; font-size:17px; }
.watch-row{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
.btn.rose{ background:var(--accent-2); border-color:var(--accent-2); color:#1d0d0b; }
.btn.rose:hover{ background:#f07d70; }

.film-body{ padding:64px 0; border-bottom:1px solid var(--line); }
.film-grid{ display:grid; grid-template-columns:1.4fr .8fr; gap:56px; }
@media (max-width:860px){ .film-grid{ grid-template-columns:1fr; gap:36px; } }
.film-grid h2{
  font-family:var(--display); font-weight:700; font-size:22px; margin-bottom:14px;
}
.film-grid .synopsis p{ color:var(--text-dim); margin-bottom:16px; }
.credits{ border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.credits div{
  display:flex; justify-content:space-between; gap:16px;
  padding:14px 18px; border-bottom:1px solid var(--line); font-size:14px;
}
.credits div:last-child{ border-bottom:none; }
.credits dt{ color:var(--text-dim); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; align-self:center;}
.credits dd{ text-align:right; }
.laurel-row{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- view switching ---------- */
.view{ display:none; }
.view.active{ display:block; }

/* fade-in on load */
@media (prefers-reduced-motion: no-preference){
  .view.active .hero > *, .view.active .film-hero > *{
    animation:rise .6s ease both;
  }
  .view.active .hero > *:nth-child(2){ animation-delay:.08s }
  .view.active .hero > *:nth-child(3){ animation-delay:.16s }
  .view.active .hero > *:nth-child(4){ animation-delay:.24s }
  .view.active .hero > *:nth-child(5){ animation-delay:.32s }
  @keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
}

/* ---------- media-slot fallback system ----------
   Wrap any <img> in a .media-slot. If the image 404s, kamFallback()
   (in main.js) swaps in this placeholder treatment automatically. */
.media-slot{
  position:relative;
  background:
    radial-gradient(ellipse at 30% 40%, var(--accent-soft), transparent 60%),
    var(--bg);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.media-slot img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-slot.is-placeholder{ min-height:160px; }
.placeholder-mark{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--line);
}
.placeholder-mark .ph-glyph{
  font-size:28px; color:var(--text-dim); opacity:.5;
}
.placeholder-mark .ph-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:var(--text-dim); text-transform:uppercase; opacity:.7;
}
.navlinks a.is-active, .mobile-menu a.is-active{ color:var(--text); }

.leader-status{ color:var(--text-dim); }
.leader{ position:relative; }

/* ---------- poster / thumb image layering ---------- */
.poster{ position:relative; }
.poster img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
}
.poster .ptitle{ position:relative; z-index:2; }
.poster.film-page-poster{
  aspect-ratio:2/3; max-width:280px; border-radius:10px;
  border:1px solid var(--line); margin-bottom:32px; overflow:hidden;
}

.card .thumb{ position:relative; overflow:hidden; }
.card .thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
}
.card .thumb .thumb-fallback{ position:relative; z-index:0; }

/* ---------- video modal ---------- */
.video-modal{
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(8,7,5,.92); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:24px;
}
.video-modal.open{ display:flex; }
.video-modal-inner{
  position:relative; width:100%; max-width:960px; aspect-ratio:16/9;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:10px;
  overflow:hidden;
}
#videoModalFrame{ position:absolute; inset:0; }
.video-modal-close{
  position:absolute; top:-42px; right:0; z-index:2;
  background:none; border:1px solid var(--line); color:var(--text);
  width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:15px;
}

/* ---------- social icon buttons (About page) ---------- */
.social-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); color:var(--text-dim);
  transition:color .2s, border-color .2s, transform .15s;
}
.social-icon:hover{
  color:var(--accent); border-color:var(--accent); transform:translateY(-2px);
}