@font-face { font-family: 'Bebas Neue'; font-weight: 400; font-display: swap; src: url(fonts/bebas-neue-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-500-normal.woff2) format('woff2'); }
:root { --display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif; --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ink: #ece6da; --muted: #b9b2a5; --accent: #c9a961; }
* { box-sizing: border-box; }
html { background: #16181f; }
html, body { margin: 0; height: 100%; color: var(--ink); font-family: var(--body); }
.bg { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: 0; }
.shade { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(10,11,15,.35) 0%, rgba(10,11,15,.1) 45%, rgba(10,11,15,0) 70%); }
.wrap { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: clamp(48px, 16vh, 150px) 20px 32px; }
.title { font-family: var(--display); font-weight: 400; font-size: clamp(56px, 11vw, 150px); line-height: .95; letter-spacing: .04em; margin: 0; text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 4px 30px rgba(0,0,0,.6); }
.sub { margin: 10px 0 18px; font-size: clamp(14px, 2vw, 18px); font-weight: 500; letter-spacing: .38em; text-transform: uppercase; color: var(--accent); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn { min-width: 132px; padding: 12px 22px; border: 1px solid rgba(236,230,218,.35); border-radius: 999px; color: var(--ink); text-decoration: none;
  font-weight: 500; font-size: 15px; letter-spacing: .06em; background: rgba(20,22,28,.45); backdrop-filter: blur(6px); transition: background .2s, border-color .2s, transform .2s; }
.btn:hover, .btn:focus-visible { background: rgba(201,169,97,.18); border-color: var(--accent); transform: translateY(-1px); outline: none; }
@media (max-width: 480px) { .links { flex-direction: column; width: min(280px, 100%); } .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* v4: live site's header wordmark (push105 src/main.js .wordmark + src/style.css), sized for the teaser */
.title { text-shadow: none; filter: drop-shadow(0 3px 10px rgba(0,0,0,.65)); }
.wordmark { display: inline-flex; align-items: center; gap: .1em; line-height: 1; font-size: min(9.6vw, 128px); }
.wordmark__main { font-family: var(--display); font-size: 1em; letter-spacing: .04em; color: #f4f1ea; }
.wordmark__magic { color: #F2C500; }
.wordmark__tv { font-family: var(--display); font-size: .52em; letter-spacing: .04em; background: #F2C500; color: #0b0b0b; border-radius: .2em; padding: .08em .2em 0; transform: translateY(-.08em) rotate(-4deg); }
@media (max-width: 640px) { .wordmark { font-size: 17.4vw; } }


/* 50-day go-live countdown — locked end, not rolling */
.countdown {
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}
.countdown__unit {
  min-width: 64px;
  padding: 10px 12px 8px;
  border: 1px solid rgba(236,230,218,.28);
  border-radius: 12px;
  background: rgba(20,22,28,.5);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.countdown__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--ink);
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.countdown__label {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.countdown__live {
  margin: 0 0 28px;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
@media (max-width: 480px) {
  .countdown__unit { min-width: 56px; padding: 8px 8px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .countdown__num { transition: none; }
}