:root{--bg:#06050a;--ink:#f3eadb;--dim:#a69a86;--gold:#e3c58a;--gold-2:#c9a868;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',system-ui,sans-serif;
  --goldtext:linear-gradient(180deg,#fff6e2 0%,#f1d9a6 38%,#c9a062 62%,#f4e2b8 82%,#b88f52 100%)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}
a{color:var(--gold)}a:hover{color:#f7e6c0}
img{max-width:100%;display:block}

.nav{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:calc(20px + env(safe-area-inset-top,0px)) clamp(20px,4vw,56px) 20px;
  background:linear-gradient(180deg,rgba(6,5,10,.85),rgba(6,5,10,0))}
.brand{font-family:var(--sans);font-weight:300;font-size:14px;letter-spacing:.6em;color:#d8c39a;text-decoration:none}
.nav nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);flex-wrap:wrap;justify-content:flex-end}
.nav nav a{font-family:var(--sans);font-weight:300;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);text-decoration:none;opacity:.8}
.nav nav a:hover{opacity:1;color:var(--gold)}
.nav .pill{border:1px solid rgba(227,197,138,.5);padding:10px 18px;border-radius:999px;color:var(--gold);opacity:1}
@media (max-width:720px){.nav nav a:not(.pill){display:none}}

.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding:calc(110px + env(safe-area-inset-top,0px)) 20px 14vh}
@media (max-height:700px){.title{font-size:clamp(90px,24svh,180px)}.tag{font-size:clamp(22px,5svh,34px);margin-top:14px}.cta{margin-top:24px}.hero{padding-bottom:10vh}}
.hero-art{position:absolute;inset:0;background:url(../images/ray-art.png) center 30%/cover no-repeat;filter:saturate(.88) contrast(1.06);transform:scale(1.04);animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.1) translateY(-1.5%)}}
.hero-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(255,196,120,.26),rgba(255,196,120,0) 26%)}
.hero-shade{position:absolute;inset:0;background:
  radial-gradient(ellipse 85% 70% at 50% 45%,rgba(0,0,0,0) 55%,rgba(3,3,8,.75) 100%),
  linear-gradient(180deg,rgba(5,5,10,.6) 0%,rgba(5,5,10,0) 18%,rgba(5,5,10,0) 50%,rgba(6,6,12,.55) 70%,rgba(6,6,12,.9) 100%)}
.hero-copy{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.kicker{display:flex;align-items:center;gap:16px;margin:0 0 6px;color:#f3eadb;filter:drop-shadow(0 2px 10px rgba(0,0,0,.95)) drop-shadow(0 0 4px rgba(0,0,0,.8));font-size:clamp(18px,1.8vw,22px);letter-spacing:.06em}
.kicker span{width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-2))}
.kicker span:last-child{transform:scaleX(-1)}
.title{position:relative;margin:0;font-weight:300;font-size:clamp(110px,19vw,250px);line-height:1;letter-spacing:.32em;padding-left:.32em;
  background:var(--goldtext);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 28px rgba(255,214,160,.28)) drop-shadow(0 10px 24px rgba(0,0,0,.9))}
.flare{position:absolute;left:50%;top:52%;width:140vw;max-width:1500px;height:2px;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,rgba(140,190,255,0),rgba(140,190,255,.55) 30%,rgba(255,240,215,.95) 50%,rgba(140,190,255,.55) 70%,rgba(140,190,255,0));filter:blur(1px)}
.tag{margin:22px 0 0;display:flex;flex-direction:column;align-items:center;gap:12px;font-style:italic;font-weight:300;font-size:clamp(28px,3.4vw,46px);line-height:1.2;letter-spacing:.03em;filter:drop-shadow(0 2px 12px rgba(0,0,0,.9))}
.t1{background:linear-gradient(180deg,#fbf5ea,#e9dcc4);-webkit-background-clip:text;background-clip:text;color:transparent}
.t2{background:linear-gradient(180deg,#fbeccb 0%,#e3c58a 60%,#c49a5c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.div{display:flex;align-items:center;gap:12px}
.div b{width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-2))}
.div b:last-child{transform:scaleX(-1)}
.div s{width:6px;height:6px;transform:rotate(45deg);background:var(--gold)}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:40px}
.btn{font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.32em;text-transform:uppercase;text-decoration:none;padding:16px 30px;border-radius:999px;transition:all .3s}
.btn.gold{background:linear-gradient(180deg,#f4e2b8,#c9a062);color:#1a1208}
.btn.gold:hover{color:#1a1208;filter:brightness(1.08);box-shadow:0 0 30px rgba(255,214,160,.35)}
.btn.ghost{border:1px solid rgba(227,197,138,.55);color:var(--gold)}
.btn.ghost:hover{background:rgba(227,197,138,.1)}
.scroll{position:absolute;bottom:28px;left:0;right:0;margin:0;text-align:center;font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.6em;padding-left:.6em;text-transform:uppercase;color:var(--dim)}

.label{margin:0 0 22px;font-family:var(--sans);font-weight:300;font-size:13px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold)}
.story{max-width:900px;margin:0 auto;padding:clamp(90px,14vw,180px) 24px;text-align:center}
.lede{margin:0;font-weight:300;font-size:clamp(30px,4vw,52px);line-height:1.25;text-wrap:pretty}
.meta{margin:30px 0 0;font-family:var(--sans);font-weight:300;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}

.poster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;max-width:1200px;margin:0 auto;padding:0 24px clamp(90px,12vw,160px)}
.poster img{width:100%;box-shadow:0 40px 120px rgba(0,0,0,.7)}
.poster h2{margin:0;font-weight:300;font-size:clamp(70px,9vw,120px);line-height:1;letter-spacing:.3em;background:var(--goldtext);-webkit-background-clip:text;background-clip:text;color:transparent}
.poster .sub{margin:20px 0 0;font-style:italic;font-weight:300;font-size:clamp(24px,2.4vw,32px);line-height:1.3;color:#e9dcc4}
.poster .cta{justify-content:flex-start}
@media (max-width:820px){.poster{grid-template-columns:1fr}.poster-side{text-align:center}.poster .cta{justify-content:center}}

.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:28px clamp(20px,4vw,56px) calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(227,197,138,.18);font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
