/* ============================================================
   MERIDIAN — cinematic, film-grade, gold on black
   ============================================================ */

:root{
  --black:#070707;
  --black-2:#0c0c0c;
  --bone:#ece7dd;
  --dim:#8b857b;
  --gold:#c8a96a;
  --line:rgba(236,231,221,.13);
  --line-2:rgba(236,231,221,.06);
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{
  background:var(--black);color:var(--bone);
  font-family:'Inter',system-ui,sans-serif;font-weight:300;
  font-size:17px;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:var(--black)}
img,video{display:block;max-width:100%}

/* ---- film treatment ---- */
.filmgrain{
  position:fixed;inset:-150%;z-index:60;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  animation:gr 6s steps(5) infinite;mix-blend-mode:overlay;
}
@keyframes gr{
  0%{transform:translate(0,0)}20%{transform:translate(-2%,3%)}
  40%{transform:translate(3%,-2%)}60%{transform:translate(-3%,-3%)}
  80%{transform:translate(2%,2%)}100%{transform:translate(0,0)}
}
.letterbox{position:fixed;left:0;right:0;height:26px;background:var(--black);z-index:55;pointer-events:none}
.letterbox.top{top:0}
.letterbox.bottom{bottom:0}
@media(max-width:700px){.letterbox{height:14px}}

/* ---- nav ---- */
.nav{
  position:fixed;top:26px;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px var(--pad);
  mix-blend-mode:difference;
}
.mark{
  display:flex;align-items:center;gap:10px;color:var(--bone);text-decoration:none;
  font-size:13px;letter-spacing:.34em;font-weight:400;
}
.mark svg{width:17px;height:17px;color:var(--gold)}
.navr{display:flex;gap:28px}
.navr a{
  color:var(--bone);text-decoration:none;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.62;transition:opacity .4s var(--ease);
}
.navr a:hover{opacity:1}
@media(max-width:700px){.navr a:not(:last-child){display:none}}

/* ---- reels (full-bleed film panels) ---- */
.reel{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;
}
.reel.short{min-height:92svh;align-items:center}
.reel-media{position:absolute;inset:0;z-index:0}
.reel-media video,.reel-media img{
  width:100%;height:100%;object-fit:cover;
}
.reel-media .fallback{position:absolute;inset:0;z-index:-1}
.reel-media video:not([src]){opacity:0}
.reel-shade{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(7,7,7,.96) 0%,rgba(7,7,7,.55) 38%,rgba(7,7,7,.22) 70%,rgba(7,7,7,.55) 100%);
}
/* bright frames need their own pool of darkness under the copy */
.reel-shade.deep{
  background:
    radial-gradient(ellipse 62% 58% at 50% 52%, rgba(7,7,7,.94) 0%, rgba(7,7,7,.72) 45%, rgba(7,7,7,.18) 100%),
    linear-gradient(to top, rgba(7,7,7,.92) 0%, rgba(7,7,7,.42) 40%, rgba(7,7,7,.42) 100%);
}
.reel-shade.side{
  background:linear-gradient(100deg,rgba(7,7,7,.96) 0%,rgba(7,7,7,.86) 34%,rgba(7,7,7,.34) 62%,rgba(7,7,7,.14) 100%);
}
.reel-copy{position:relative;z-index:2;padding:0 var(--pad) clamp(70px,12vh,130px);max-width:1000px}
.reel.short .reel-copy{padding-bottom:0;max-width:620px}
.reel-copy.center{max-width:900px;margin:0 auto;text-align:center}
.reel-copy.left{margin-right:auto}

.slate{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
  margin-bottom:26px;display:flex;align-items:center;gap:12px;
}
.reel-copy.center .slate{justify-content:center}
.slate span{
  border:1px solid rgba(200,169,106,.42);padding:3px 8px;letter-spacing:.1em;
}

h1,h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.015em}
h1{font-size:clamp(2.8rem,8.2vw,7.4rem);line-height:.98}
h1 i{font-style:italic;color:var(--gold)}
.ln{display:block;overflow:hidden}
.ln>span{display:block;transform:translateY(104%);animation:up 1.3s var(--ease) forwards}
.ln:nth-child(1)>span{animation-delay:.28s}
.ln:nth-child(2)>span{animation-delay:.40s}
.ln:nth-child(3)>span{animation-delay:.52s}
@keyframes up{to{transform:translateY(0)}}

.reel h2,.splitreel h2{font-size:clamp(2rem,5.2vw,4.2rem);line-height:1.02;margin-bottom:22px}
.lead{
  margin-top:28px;max-width:52ch;font-size:clamp(1rem,1.5vw,1.16rem);
  line-height:1.72;color:rgba(236,231,221,.74);
}
.lead.center{margin-left:auto;margin-right:auto}

.scroll-cue{
  position:absolute;bottom:42px;left:50%;transform:translateX(-50%);z-index:3;
  width:1px;height:54px;background:rgba(236,231,221,.16);overflow:hidden;
}
.scroll-cue span{
  position:absolute;inset:0;background:var(--gold);
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---- chapter interstitial ---- */
.chapter{
  padding:clamp(90px,17vh,190px) var(--pad);max-width:1100px;margin:0 auto;text-align:center;
}
.chapter-kicker{
  font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.4rem,3.4vw,2.6rem);
  line-height:1.34;letter-spacing:-.01em;color:rgba(236,231,221,.9);
}

/* ---- spec list ---- */
.spec{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,38px);margin-top:38px}
.spec li{border-top:1px solid var(--line);padding-top:12px}
.spec b{
  display:block;font-family:'Instrument Serif',serif;font-weight:400;
  font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1;color:var(--gold);
}
.spec span{
  display:block;margin-top:7px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
}

/* ---- split reel ---- */
.splitreel{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  min-height:96svh;gap:0;
}
@media(max-width:900px){.splitreel{grid-template-columns:1fr}}
.sr-media{position:relative;height:100%;min-height:60svh;overflow:hidden}
.sr-media video,.sr-media img{width:100%;height:100%;object-fit:cover}
.sr-media .fallback{position:absolute;inset:0;z-index:-1}
.sr-copy{padding:clamp(50px,8vh,90px) var(--pad)}
.sr-copy p{color:rgba(236,231,221,.72);max-width:44ch;line-height:1.75}
.ticks{display:flex;flex-wrap:wrap;gap:9px;margin-top:32px}
.ticks span{
  border:1px solid var(--line);padding:7px 14px;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  transition:all .4s var(--ease);
}
.ticks span:hover{border-color:var(--gold);color:var(--gold)}

/* ---- figures ---- */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,5vw,70px);margin-top:46px;max-width:760px;margin-left:auto;margin-right:auto}
.figs div{text-align:center}
.figs b{
  display:block;font-family:'Instrument Serif',serif;font-weight:400;
  font-size:clamp(2.2rem,5vw,4rem);line-height:1;color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.figs span{
  display:block;margin-top:10px;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);
}

/* ---- close ---- */
.close{
  padding:clamp(110px,22vh,240px) var(--pad);text-align:center;
  background:radial-gradient(ellipse 70% 60% at 50% 50%, #131313 0%, var(--black) 72%);
}
.close h2{
  font-size:clamp(2.6rem,9vw,7.2rem);line-height:1.0;letter-spacing:-.02em;
}
.close h2 i{font-style:italic;color:var(--gold)}
.mbtn{
  display:inline-block;margin-top:46px;color:var(--bone);text-decoration:none;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  border:1px solid var(--line);padding:17px 40px;
  transition:all .5s var(--ease);
}
.mbtn:hover{border-color:var(--gold);color:var(--gold);letter-spacing:.3em}

/* ---- footer ---- */
.foot{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:28px var(--pad) 44px;border-top:1px solid var(--line-2);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.foot a{color:var(--dim);text-decoration:none;transition:color .35s}
.foot a:hover{color:var(--gold)}
@media(max-width:700px){.fmid{display:none}}

/* ---- reveals ---- */
[data-r]{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
[data-r].in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ln>span{transform:none}[data-r]{opacity:1;transform:none}
  .filmgrain{display:none}
}

/* ---- guide ---- */
.guide{max-width:800px;margin:0 auto;padding:130px var(--pad) 100px;position:relative;z-index:2}
.guide h1{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1;margin-bottom:20px}
.guide .sub{color:var(--dim);font-size:1.08rem;margin-bottom:52px;max-width:60ch}
.guide h2{font-size:1.7rem;margin:46px 0 14px}
.guide p{color:var(--dim);margin-bottom:15px;line-height:1.78}
.guide li{color:var(--dim);margin:0 0 9px 20px;line-height:1.7}
.guide code{font-family:ui-monospace,monospace;background:rgba(200,169,106,.12);color:var(--gold);padding:2px 6px;font-size:.86em;border-radius:2px}
.guide pre{background:#0b0b0b;border:1px solid var(--line-2);border-left:2px solid var(--gold);padding:20px 22px;overflow-x:auto;margin:18px 0 26px}
.guide pre code{background:none;color:var(--bone);padding:0;font-size:12.5px;line-height:1.75}
.guide .back{display:inline-block;margin-bottom:42px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);text-decoration:none}

/* ---- reel counter (film slate) ---- */
.reelcount{
  position:fixed;left:var(--pad);bottom:44px;z-index:50;
  display:flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.22em;color:var(--dim);
  mix-blend-mode:difference;
}
.rc-now{color:var(--bone);font-variant-numeric:tabular-nums}
.rc-bar{display:block;width:64px;height:1px;background:rgba(236,231,221,.22);position:relative;overflow:hidden}
.rc-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold);transition:width .6s var(--ease)}
@media(max-width:700px){.reelcount{display:none}}

/* Ken Burns on the opening frame — the video already moves, this adds
   the slow optical push a title sequence would have */
#heroVid,.reel .fallback{animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.0)}to{transform:scale(1.09)}}
@media(prefers-reduced-motion:reduce){#heroVid,.reel .fallback{animation:none}}