:root {
  --bg: #2b2b2e;
  --fg: #e8f4e6;
  --body: #bdccb7;
  --tag: #a9bba2;
  --line: rgba(232, 244, 230, 0.34);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--body);
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 1.6;
  text-align: center;
  padding: 60px 24px;
}
.wrap { max-width: 360px; margin: 0 auto; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); }
.wordmark {
  color: var(--fg);
  font-weight: 400;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
}
.tagline {
  color: var(--tag);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin-top: 12px;
}
.player { margin: 40px 0; }
.player iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.bio {
  color: var(--body);
  font-size: 0.9rem;
  margin-bottom: 40px;
}
.bio em { color: var(--fg); }
.links { display: flex; flex-direction: column; gap: 10px; }
.btn {
  display: block;
  color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  transition: background 0.18s ease;
}
.btn:hover { background: rgba(232, 244, 230, 0.07); /* --fg at 7% alpha */ }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.btn[data-placeholder="true"] { opacity: 0.6; cursor: default; pointer-events: none; }
.soon { font-size: 0.7rem; opacity: 0.7; letter-spacing: 0.05em; }
.foot {
  margin-top: 48px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: #939e8f;
}
/* ambient background video */
.video-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--bg) url("https://img.youtube.com/vi/ouoWpY_CiIs/maxresdefault.jpg") center / cover no-repeat;
}
.video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;      /* keep 16:9 while covering width */
  min-height: 100vh;
  min-width: 177.78vh;  /* keep 16:9 while covering height */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.video-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(20, 20, 22, 0.66);
}

@media (min-width: 480px) { body { padding-top: 96px; } }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .video-bg iframe { display: none; }  /* static dimmed poster instead of motion */
}