:root{
  --black:#0a0807;
  --ink:#120e0b;
  --panel:#171210;
  --teal:#0e2b2b;
  --teal-2:#103a39;
  --gold:#c9a227;
  --gold-soft:#e7cf86;
  --bone:#e8ddc8;
  --ash:#9c9081;
  --line:rgba(201,162,39,.18);
  --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #1b1411 0%, var(--black) 55%),
    var(--black);
  color:var(--bone);
  font-family:"EB Garamond", Georgia, serif;
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* film grain overlay */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---- NAV ---- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(18px,5vw,56px);
  background:linear-gradient(180deg, rgba(10,8,7,.92), rgba(10,8,7,0));
  backdrop-filter:blur(2px);
}
.nav__brand{
  font-family:"Cinzel",serif; font-weight:800; letter-spacing:.22em;
  font-size:15px; color:var(--gold-soft);
}
.nav__links{display:flex; align-items:center; gap:clamp(14px,2.4vw,32px)}
.nav__links a{
  font-family:"Cinzel",serif; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash); transition:color .25s;
}
.nav__links a:hover{color:var(--bone)}
.nav__cta{
  color:var(--gold-soft)!important; border:1px solid var(--line);
  padding:8px 16px; border-radius:2px;
}
.nav__cta:hover{background:rgba(201,162,39,.1)}
@media(max-width:640px){ .nav__links a:not(.nav__cta){display:none} }

/* ---- HERO ---- */
.hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 22px 80px; z-index:2;
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 60% at 50% 35%, rgba(16,58,57,.35), transparent 70%),
    radial-gradient(40% 50% at 50% 80%, rgba(201,162,39,.10), transparent 70%);
}
.hero__inner{max-width:820px}
.hero__eyebrow{
  font-family:"Cinzel",serif; letter-spacing:.42em; text-transform:uppercase;
  font-size:12px; color:var(--gold); margin-bottom:26px; padding-left:.42em;
}
.hero__title{
  font-family:"Cinzel",serif; font-weight:800;
  font-size:clamp(52px,11vw,128px); line-height:.95;
  color:var(--gold-soft);
  text-shadow:0 2px 40px rgba(0,0,0,.7);
  background:linear-gradient(180deg,#f1dca0,#b98e22 70%,#7c5d16);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero__tagline{
  font-style:italic; font-size:clamp(20px,3.4vw,30px);
  color:var(--bone); margin-top:18px;
}
.hero__sub{ color:var(--ash); margin-top:22px; font-size:clamp(15px,1.8vw,19px) }
.hero__actions{display:flex; gap:16px; justify-content:center; margin-top:38px; flex-wrap:wrap}

.btn{
  font-family:"Cinzel",serif; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; padding:15px 30px; border-radius:2px;
  transition:transform .2s, background .25s, color .25s; display:inline-block;
}
.btn:hover{transform:translateY(-2px)}
.btn--gold{ background:linear-gradient(180deg,#d9b53a,#a9831c); color:#1a1407; font-weight:600 }
.btn--gold:hover{box-shadow:0 10px 30px rgba(201,162,39,.25)}
.btn--ghost{ border:1px solid var(--line); color:var(--bone) }
.btn--ghost:hover{background:rgba(201,162,39,.08)}

.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-family:"Cinzel",serif; font-size:10px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ash);
}
.hero__scroll::after{
  content:""; display:block; width:1px; height:34px; margin:10px auto 0;
  background:linear-gradient(var(--gold),transparent);
}

/* ---- SECTIONS ---- */
.section{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto; padding:clamp(70px,11vw,130px) clamp(20px,5vw,40px);
}
.section__head{max-width:760px; margin:0 auto 52px; text-align:center}
.section__kicker{
  font-family:"Cinzel",serif; letter-spacing:.34em; text-transform:uppercase;
  font-size:11px; color:var(--gold);
}
.section__title{
  font-family:"Cinzel",serif; font-weight:600;
  font-size:clamp(30px,5.4vw,52px); color:var(--gold-soft);
  margin:14px 0 18px; line-height:1.05;
}
.section__lead{ color:var(--ash); font-size:clamp(16px,1.9vw,20px) }

/* divider line under each section */
.section::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(80%,640px); height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}

/* ---- PLAYER (facade) ---- */
.player{
  position:relative; aspect-ratio:16/9; border-radius:4px; overflow:hidden;
  cursor:pointer; border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.player__poster{ width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.05) }
.player::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 50%, transparent, rgba(8,6,5,.55));
  transition:opacity .3s;
}
.player:hover::after{opacity:.7}
.player__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:3; width:88px; height:88px; border:none; border-radius:50%;
  background:rgba(201,162,39,.92); color:#1a1407; cursor:pointer;
  display:grid; place-items:center; transition:transform .25s, background .25s;
}
.player__play svg{margin-left:4px}
.player:hover .player__play{transform:translate(-50%,-50%) scale(1.08); background:var(--gold-soft)}
.player__ring{
  position:absolute; inset:-12px; border:1px solid rgba(231,207,134,.5);
  border-radius:50%; animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.player__runtime{
  position:absolute; bottom:14px; right:16px; z-index:3;
  font-family:"Cinzel",serif; font-size:11px; letter-spacing:.14em;
  color:var(--bone); background:rgba(8,6,5,.6); padding:6px 12px; border-radius:2px;
}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4}

/* ---- GRID ---- */
.grid{
  display:grid; gap:clamp(18px,2.6vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
}
.card{
  background:linear-gradient(180deg,var(--panel),var(--ink));
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.card:hover{transform:translateY(-4px); border-color:rgba(201,162,39,.4); box-shadow:0 24px 50px rgba(0,0,0,.5)}
.card__media{
  position:relative; aspect-ratio:16/9; cursor:pointer; overflow:hidden; background:#000;
}
.card__media img{width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(1.05); transition:transform .5s}
.card:hover .card__media img{transform:scale(1.05)}
.card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(8,6,5,.7));
}
.card__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:58px; height:58px; border-radius:50%; border:1px solid rgba(231,207,134,.7);
  background:rgba(8,6,5,.45); color:var(--gold-soft); display:grid; place-items:center;
  transition:background .25s, transform .25s;
}
.card:hover .card__play{background:rgba(201,162,39,.92); color:#1a1407; transform:translate(-50%,-50%) scale(1.1)}
.card__media iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:5}
.card__body{padding:20px 22px 24px}
.card__eyebrow{
  font-family:"Cinzel",serif; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
}
.card__title{
  font-family:"Cinzel",serif; font-weight:600; font-size:19px; line-height:1.25;
  color:var(--bone); margin:8px 0 10px;
}
.card__meta{font-size:14px; color:var(--ash); letter-spacing:.02em}

/* ---- ABOUT ---- */
.about__inner{max-width:760px; margin:0 auto; text-align:center}
.about__inner p{color:var(--ash); margin-top:18px; font-size:clamp(16px,1.9vw,20px)}
.about__quote{
  font-style:italic; color:var(--gold-soft); font-size:clamp(22px,3.4vw,30px);
  margin-top:40px; line-height:1.4;
}

/* ---- FOOTER ---- */
.footer{
  position:relative; z-index:2; text-align:center;
  padding:70px 22px 60px; border-top:1px solid var(--line); margin-top:30px;
}
.footer__brand{font-family:"Cinzel",serif; font-weight:800; letter-spacing:.24em; color:var(--gold-soft); font-size:18px}
.footer__tag{font-style:italic; color:var(--ash); margin-top:8px}
.footer__links{display:flex; gap:26px; justify-content:center; margin:26px 0 20px}
.footer__links a{
  font-family:"Cinzel",serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone); border-bottom:1px solid var(--line); padding-bottom:3px;
}
.footer__links a:hover{color:var(--gold-soft)}
.footer__fine{font-size:13px; color:#6f655a; letter-spacing:.04em}

/* reveal animation */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .player__ring{animation:none}
  html{scroll-behavior:auto}
}