:root{
  --slate: #52535B;
  --slate-mid: #7A7B84;
  --slate-deep: #1A1B1F;
  --panel: #232429;
  --cream: #F1ECE1;
  --red: #E51E2E;
}

@font-face{
  font-family: 'Oswald';
  src: url('../fonts/Oswald Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face{
  font-family: 'Nasalization';
  src: url('../fonts/Nasalization Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face{
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face{
  font-family: 'Caflisch Script Pro';
  src: url('../fonts/Caflisch Script Pro Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}

*{ box-sizing: border-box; }
html{ overflow-x:hidden; }
html,body{
  margin:0; padding:0;
  background: var(--slate-deep);
  color: var(--cream);
  font-family:'Oswald', sans-serif;
  scroll-behavior: smooth;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
section{ position:relative; scroll-margin-top: 72px; }

.js .reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  html,body{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

.site-nav{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 24px;
  background: rgba(26,27,31,.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(241,236,225,.1);
}
.site-nav a.site-nav__brand{ opacity: 1; display:flex; align-items:center; }
.site-nav nav{ display:flex; gap: 20px; }
.site-nav a{
  font-family:'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color: var(--cream); opacity:.7;
  transition: opacity .2s ease, color .2s ease;
}
.site-nav a:hover{ opacity:1; }
.site-nav a.active{ opacity:1; color: var(--red); }
@media (max-width: 640px){
  .site-nav nav{ gap:12px; }
  .site-nav a{ font-size:10px; }
}

.hero{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(160deg, rgba(43,74,82,.55) 0%, rgba(26,27,31,.85) 70%)
    center/cover no-repeat,
    url('../graphics/hero-bg.jpg') center/cover no-repeat;
  filter: saturate(.75) brightness(.75);
  animation: hero-zoom 24s ease-in-out infinite alternate;
}
@keyframes hero-zoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.08); }
}
.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(26,27,31,.35) 0%, rgba(26,27,31,.9) 92%);
}
.hero__content{ position:relative; z-index:2; padding: 0 24px; }
.hero__script{
  font-family:'Caflisch Script Pro', cursive;
  font-size: clamp(24px, 5vw, 42px);
  color: var(--red);
  margin: 0 0 4px;
}
.hero__wordmark{
  font-family:'Nasalization', sans-serif;
  font-size: clamp(36px, 9vw, 84px);
  letter-spacing:.02em;
  margin: 0 0 14px;
}
.hero__astro{ color: var(--slate-mid); }
.hero__knot{ color: var(--red); }
.hero__sub{
  font-family:'JetBrains Mono', monospace;
  font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--cream); opacity:.8;
}
.hero__scroll{
  position:absolute; bottom: 24px; left:50%; transform: translateX(-50%);
  color: var(--cream); font-size: 20px; text-decoration:none;
  animation: hero-bounce 2s ease-in-out infinite;
}
@keyframes hero-bounce{
  0%,100%{ transform: translate(-50%, 0); }
  50%{ transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce){
  .hero__bg{ animation:none; }
  .hero__scroll{ animation:none; }
}

.about{ padding: 96px 24px; max-width: 960px; margin: 0 auto; text-align:center; }
.section-label{
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--red); margin-bottom: 24px;
}
.crew{ display:flex; gap: 24px; justify-content:center; flex-wrap:wrap; margin-bottom: 32px; }
.crew__card{
  background: var(--panel); border:1px solid rgba(241,236,225,.08); border-radius:12px;
  padding: 24px; width: 240px;
}
.crew__photo{
  width:72px; height:72px; border-radius:50%; margin: 0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  background: var(--slate-deep); color: var(--slate-mid); border: 1px solid var(--red);
}
.crew__card h3{ font-family:'Nasalization', sans-serif; margin: 0 0 8px; font-size:16px; }
.crew__bio{ font-family:'JetBrains Mono', monospace; font-size:12px; line-height:1.6; color: var(--cream); opacity:.8; margin:0; }
.about__story{ font-family:'Oswald', sans-serif; font-weight:300; font-size: clamp(16px,2.2vw,20px); line-height:1.6; }
@media (max-width: 560px){
  .crew{ flex-direction:column; align-items:center; }
}

.videos{ padding: 96px 24px; max-width: 1100px; margin: 0 auto; text-align:center; }
.video-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; text-align:left; margin-top:24px;
}
.video-card{ background: var(--panel); border:1px solid rgba(241,236,225,.08); border-radius:10px; overflow:hidden; }
.video-card__thumb{ position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer; background:none; aspect-ratio:16/9; }
.video-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.video-card__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:28px; color:#fff; background: rgba(26,27,31,.3); transition: background .2s ease;
}
.video-card__thumb:hover .video-card__play{ background: rgba(229,30,46,.55); }
.video-card__iframe{ width:100%; aspect-ratio:16/9; border:0; }
.video-card__tag{ font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--red); letter-spacing:.1em; margin: 12px 16px 4px; }
.video-card__title{ font-family:'Oswald', sans-serif; font-weight:400; font-size:14px; margin: 0 16px 16px; line-height:1.4; }
@media (max-width: 860px){ .video-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .video-grid{ grid-template-columns: 1fr; } }

.specs{ padding: 96px 24px; max-width: 720px; margin: 0 auto; text-align:center; }
.specs__card{
  background: var(--panel); border:1px solid rgba(241,236,225,.08); border-radius:12px;
  padding: 32px; display:flex; gap:24px; align-items:center; text-align:left;
}
.specs__mark{ width:64px; height:64px; object-fit:contain; flex-shrink:0; }
.specs__list{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin:0; flex:1; }
.specs__list dt{ font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--red); }
.specs__list dd{ margin:0; font-family:'Oswald', sans-serif; font-size:14px; }
@media (max-width: 560px){
  .specs__card{ flex-direction:column; text-align:center; }
  .specs__list{ grid-template-columns: 1fr; text-align:center; }
}

.route{ padding: 96px 24px; max-width: 1100px; margin: 0 auto; text-align:center; }
.route-map{ height: 420px; border-radius: 12px; overflow:hidden; margin-top:24px; border:1px solid rgba(241,236,225,.08); }
.route-pin span{
  display:block; width:14px; height:14px; border-radius:50%;
  background: var(--red); border:2px solid var(--cream); box-shadow: 0 0 0 2px rgba(229,30,46,.4);
}
.route-tooltip{
  font-family:'JetBrains Mono', monospace !important; font-size:11px !important;
  background: var(--panel) !important; color: var(--cream) !important; border: 1px solid var(--red) !important;
}
@media (max-width: 560px){ .route-map{ height: 320px; } }

.site-footer{ padding: 48px 24px 32px; text-align:center; border-top: 1px solid rgba(241,236,225,.08); }
.site-footer__row{
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:center; margin-bottom:16px;
}
.site-footer__contact{ font-family:'JetBrains Mono', monospace; font-size:13px; color: var(--red); text-decoration:none; }
.site-footer__sitemap{ display:flex; gap:16px; }
.site-footer__sitemap a{ font-family:'JetBrains Mono', monospace; font-size:11px; text-decoration:none; opacity:.7; }
.site-footer__social{ display:flex; gap:12px; }
.site-footer__social a{ font-family:'JetBrains Mono', monospace; font-size:11px; text-decoration:none; opacity:.7; }
.site-footer__copy{ font-family:'JetBrains Mono', monospace; font-size:11px; opacity:.5; margin:0; }