@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --graphite:#14171a;
  --graphite-deep:#0d0f11;
  --steel-line: rgba(236,232,221,0.09);
  --olive-bright:#8b9169;
  --accent:rgb(63,174,222);
  --bone:#ece8dd;
  --mist:#8b9088;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

  --nav-h: 64px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--graphite-deep);
  color:var(--bone);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

video{ max-width:100%; display:block; }

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

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--olive-bright);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:18px; height:1px;
  background:var(--olive-bright);
  display:inline-block;
}

/* ---------- Logo ---------- */
.site-logo{
  position:fixed;
  top:clamp(18px,3vh,28px);
  left:clamp(20px,4vw,40px);
  z-index:200;
  height:clamp(22px,2.6vw,30px);
  width:auto;
  display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
}

/* ---------- Scroll-scrub video section ---------- */
.reel{
  position:relative;
  background:var(--graphite-deep);
}
.reel__stick{
  position:sticky;
  top:0;
  height:100svh;
  display:flex;
  align-items:stretch;
}
.reel__stage{
  position:relative;
  flex:1;
  overflow:hidden;
}
.reel__stage video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.reel__vignette{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(13,15,17,.65) 0%, rgba(13,15,17,0) 20%, rgba(13,15,17,0) 68%, rgba(13,15,17,.85) 100%),
    linear-gradient(90deg, rgba(13,15,17,.35), transparent 18%, transparent 82%, rgba(13,15,17,.35));
  pointer-events:none;
}

.reel__heading{
  position:absolute;
  top:calc(var(--nav-h) + 26px);
  left:clamp(20px,4vw,56px);
  right:clamp(20px,4vw,56px);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  pointer-events:none;
}
.reel__heading h2{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-weight:600;
  font-size:clamp(20px,2.4vw,30px);
  letter-spacing:.03em;
  margin:14px 0 0;
  color:var(--bone);
}
.reel__timecode{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--olive-bright);
  text-align:right;
}
.reel__timecode .big{
  display:block;
  color:var(--bone);
  font-size:22px;
  letter-spacing:.03em;
  margin-top:4px;
}

/* HUD rail */
.hud{
  position:absolute;
  right:clamp(16px,3vw,44px);
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:0;
  z-index:5;
}
.hud__item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 0;
  opacity:.4;
  transition:opacity .35s ease;
  background:none;
  border:none;
  cursor:pointer;
  font:inherit;
  -webkit-tap-highlight-color:transparent;
}
.hud__item.is-active{ opacity:1; }
.hud__item:hover{ opacity:.85; }
.hud__item:hover .hud__tick{
  border-color:var(--accent);
  transform:scale(1.15);
}
.hud__item:hover .hud__label{
  color:var(--bone);
  max-width:220px;
}
.hud__item:focus-visible{ opacity:1; outline-offset:6px; }
.hud__index{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--mist);
  width:20px;
  text-align:right;
}
.hud__item.is-active .hud__index{ color:var(--accent); }
.hud__tick{
  width:10px; height:10px;
  border-radius:50%;
  border:1px solid var(--mist);
  background:transparent;
  flex:none;
  position:relative;
  transition:border-color .3s ease, background .3s ease, transform .25s ease;
}
.hud__item.is-active .hud__tick{
  border-color:var(--accent);
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(63,174,222,.22);
}
.hud__label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mist);
  white-space:nowrap;
  max-width:0;
  overflow:hidden;
  transition:max-width .4s ease, color .3s ease;
}
.hud__item.is-active .hud__label{
  color:var(--bone);
  max-width:220px;
}
.hud__rail{
  position:absolute;
  left:24px; top:12px; bottom:12px;
  width:1px;
  background:var(--steel-line);
}

.reel__stats{
  position:absolute;
  left:clamp(20px,4vw,56px);
  bottom:52px;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(4, max-content);
  gap:16px;
  margin:0;
  color:var(--bone);
  font-family:var(--font-mono);
  pointer-events:none;
}
.reel__stats div{ display:grid; gap:3px; }
.reel__stats dt{
  color:var(--mist);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.reel__stats dd{
  margin:0;
  font-size:11px;
  font-variant-numeric:tabular-nums;
}

@media (max-width:760px){
  .hud__label{ display:none; }
  .hud{ right:16px; }
  .reel__heading{ flex-direction:column; gap:8px; }
  .reel__timecode{ text-align:left; }
  .reel__stats{ grid-template-columns:repeat(2, max-content); gap:10px 18px; }
}

.reel__progress{
  position:absolute;
  left:clamp(20px,4vw,56px);
  right:clamp(20px,4vw,56px);
  bottom:28px;
  height:2px;
  background:var(--steel-line);
}
.reel__progress-fill{
  height:100%;
  width:0%;
  background:var(--accent);
}

.reel__spacer{ width:100%; }

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