/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --bg:            #000000;
  --panel:         #00171a;
  --panel-raised:  #002024;
  --line:          #002f35;
  --text:          #ffffff;
  --text-dim:      #67919a;
  --amber:         #4fd1c5;   /* tally light / on-air accent */
  --cyan:          #4fd1c5;   /* secondary accent, links, focus */
  --red:           #06b76d;   /* live / rec dot */

  --display: "Big Shoulders Display", "Archivo Expanded", Impact, sans-serif;
  --body:    "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", "Courier New", monospace;

  --radius: 4px;
  --nav-h: 64px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
::selection{ background: var(--amber); color: #14161a; }

:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

h1,h2,h3{
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 0.4em;
}

.mono{ font-family: var(--mono); }

/* ==========================================================================
   TOP NAV — "broadcast console" bar with tally light
   ========================================================================== */
.topnav{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 28px;
  background: rgba(20,22,26,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  z-index: 500;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-decoration:none;
  color: var(--text);
}
.tally{
  width:10px; height:10px;
  border-radius:50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: blink 1.6s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes blink{
  0%,55%{ opacity:1; }
  60%,85%{ opacity:0.25; }
  100%{ opacity:1; }
}
.navlinks{
  display:flex;
  gap: 4px;
  align-items:center;
}
.navlinks a{
  text-decoration:none;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.navlinks a:hover{ color: var(--text); border-color: var(--line); }
.navlinks a.active{
  color: var(--bg);
  background: var(--amber);
  border-color: var(--amber);
}

main{ padding-top: var(--nav-h); }

/* ==========================================================================
   LANDING PAGE
   ========================================================================== */
.hero{
  min-height: calc(100vh - var(--nav-h));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding: 6vw 8vw;
  max-width: 2700px;
  background-image:
    linear-gradient(rgba(20,22,26,0.95), rgba(20,22,26,0.95)),
    url("../assets/hero-bg.jpg");
  background-size: cover;
  background-position: center;
}
.eyebrow{
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 18px;
}
.hero h1{
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 0.98;
  max-width: 14ch;
}
.hero p{
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 56ch;
  margin: 22px 0 40px;
}
.tile-links{
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
}
.tile-link{
  position:relative;
  display:block;
  width: 300px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration:none;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.tile-link:hover{ transform: translateY(-4px); border-color: var(--amber); }
.tile-link .num{
  font-family: var(--mono);
  color: var(--text-dim);
  font-size: 0.8rem;
}
.tile-link h3{ margin: 10px 0 6px; font-size: 1.4rem; }
.tile-link span.desc{ color: var(--text-dim); font-size: 0.92rem; }

/* ==========================================================================
   PRESENTATION PAGE — vertical scroll-snap deck
   ========================================================================== */
.deck-shell{
  height: 100vh;
  padding-top: var(--nav-h);
  display:flex;
}
.deck-scroller{
  flex:1;
  height: calc(100vh - var(--nav-h));
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--nav-h);
}
.slide{
  height: calc(100vh - var(--nav-h));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 4vh 4vw;
  position: relative;
}
.slide-frame{
  width: 100%;
  max-width: 2000px;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.slide-frame img{ width:100%; height:100%; object-fit: cover; }
.slide-caption{
  position:absolute;
  left: 4vw;
  bottom: 3.5vh;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
}
.deck-nav{
  width: 74px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  border-left: 1px solid var(--line);
  background: var(--panel);
}
.deck-dot{
  width: 8px; height:8px;
  border-radius:50%;
  background: var(--line);
  border:none;
  cursor:pointer;
  padding:0;
  transition: background .15s ease, transform .15s ease;
}
.deck-dot:hover{ transform: scale(1.3); }
.deck-dot.active{ background: var(--amber); }
.deck-counter{
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--text-dim);
  position: absolute;
  top: calc(var(--nav-h) + 12px);
  right: 12px;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   CLIPFARM PAGE — lattice grid of video cards
   ========================================================================== */
.clip-header{
  padding: 48px 6vw 12px;
}
.clip-header .eyebrow{ margin-bottom: 10px; }
.clip-header p{ color: var(--text-dim); max-width: 60ch; }

.clip-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
  padding: 24px 6vw 8vh;
}
.clip-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  cursor:pointer;
  text-align:left;
  padding:0;
  color: inherit;
  font-family: inherit;
  transition: transform .18s ease, border-color .18s ease, rotate .18s ease;
}
.clip-card:hover{
  transform: translateY(-3px) rotate(var(--tilt, 0deg));
  border-color: var(--cyan);
}
.clip-thumb{
  position:relative;
  aspect-ratio: 16/9;
  background: #000;
  overflow:hidden;
}
.clip-thumb img{ width:100%; height:100%; object-fit:cover; }
.clip-duration{
  position:absolute;
  right:8px; bottom:8px;
  background: rgba(0,0,0,0.75);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 2px;
}
.clip-play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  background: rgba(0,0,0,0.35);
  transition: opacity .15s ease;
}
.clip-card:hover .clip-play{ opacity:1; }
.clip-play svg{ width:44px; height:44px; fill: var(--amber); }
.clip-body{ padding: 14px 16px 16px; }
.clip-title{
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform:none;
  letter-spacing: 0;
  margin: 0 0 6px;
}
.clip-meta{
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* modal player */
.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(10,11,13,0.9);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 1000;
  padding: 6vh 4vw;
}
.modal-backdrop.open{ display:flex; }
.modal-box{
  width:100%;
  max-width: 1100px;
}
.modal-box video, .modal-box iframe{
  width:100%;
  aspect-ratio: 16/9;
  border:0;
  background:#000;
}
.modal-title{ margin-top:14px; font-size: 1.3rem; }
.modal-close{
  position:absolute;
  top: 24px; right: 28px;
  background:none;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--mono);
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor:pointer;
}
.modal-close:hover{ border-color: var(--amber); }

/* ==========================================================================
   REVIEWS WIDGET — shared, embeddable, output-escaped
   ========================================================================== */
.reviews{
  padding: 6vh 6vw 10vh;
  border-top: 1px solid var(--line);
  max-width: 900px;
}
.reviews h2{ font-size: 1.5rem; }
.review-form{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin: 20px 0 34px;
}
.star-input{
  display:flex;
  gap: 6px;
  margin-bottom: 14px;
}
.star-input button{
  background:none;
  border:none;
  font-size: 1.6rem;
  line-height:1;
  cursor:pointer;
  color: var(--line);
  padding: 2px;
  transition: color .1s ease, transform .1s ease;
}
.star-input button.filled{ color: var(--amber); }
.star-input button:hover{ transform: scale(1.15); }
.review-form textarea{
  width:100%;
  min-height: 84px;
  resize: vertical;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--body);
  padding: 12px;
}
.review-form-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top: 12px;
  gap: 12px;
}
.char-count{ font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); }
.btn{
  background: var(--amber);
  color: #14161a;
  border: none;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  padding: 10px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: filter .15s ease;
}
.btn:hover{ filter: brightness(1.1); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }
.form-msg{ font-family: var(--mono); font-size: 0.78rem; margin-top:10px; min-height:1em; }
.form-msg.err{ color: var(--red); }
.form-msg.ok{ color: var(--cyan); }

.review-list{ display:flex; flex-direction:column; gap:14px; }
.review-item{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--panel-raised);
}
.review-stars{ color: var(--amber); letter-spacing: 2px; font-size: 0.95rem; }
.review-text{ margin: 8px 0 6px; word-break: break-word; }
.review-date{ font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim); }
.review-empty{ color: var(--text-dim); font-family: var(--mono); font-size: 0.85rem; }

footer{
  text-align:center;
  padding: 30px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  border-top: 1px solid var(--line);
}