/* Landing page only. Extends site.css (black, warm gold, cream, Georgia). */
body.landing{background:#000;font-size:18px}
.landing a{color:var(--gold)}
.landing h1,.landing h2,.landing h3{border:0;padding:0;font-weight:normal;letter-spacing:.03em;margin:0}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-99rem}.skip:focus{left:1rem;top:1rem;background:#000;padding:.5rem;z-index:9}
:focus-visible{outline:2px solid #f0cf7a;outline-offset:3px}

/* hero: the key art is the first sight; the wordmark sits in the dark of the ceiling */
.hero{position:relative;min-height:min(100svh,56rem);display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;
 background:#000 url(/img/hero-m.jpg) center 40%/cover no-repeat;isolation:isolate}
@media(min-width:900px){.hero{background-image:url(/img/hero.jpg)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(#000c 0,#0000 28%,#0000 48%,#000e 88%,#000 100%)}
.hero .logo{width:min(34rem,86vw);height:auto;margin-top:clamp(1rem,4vh,3rem);filter:drop-shadow(0 4px 24px #000)}
.hero-copy{padding:0 1.25rem clamp(2rem,6vh,4rem);max-width:40rem}
.pitch{font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.5;margin:0 0 1.6rem;text-shadow:0 2px 14px #000}
.btns{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:.8rem 1.7rem;border:1px solid var(--gold);color:var(--gold);text-decoration:none;letter-spacing:.06em;background:#000a;transition:background .2s,color .2s}
.btn:hover{background:#2a2108;color:#f0cf7a}
.btn.primary{background:var(--gold);color:#140e02;font-weight:bold}
.btn.primary:hover{background:#f0cf7a;color:#140e02}
.ea{margin:1.2rem 0 0;color:var(--dim);font-size:.95rem}

/* sections are joined by one gold thread, like the runes on the table */
section{padding:3rem 0 1rem}
.thread{display:block;width:1px;height:4rem;margin:2rem auto 0;background:linear-gradient(#0000,var(--gold),#0000)}
.landing h2{font-size:clamp(1.6rem,3.4vw,2.3rem);text-align:center;margin-bottom:.6rem}
.lede{text-align:center;color:var(--dim);max-width:36rem;margin:0 auto 2.5rem}

.pillars{list-style:none;margin:0;padding:0;display:grid;gap:0 3rem;grid-template-columns:1fr}
@media(min-width:720px){.pillars{grid-template-columns:1fr 1fr}}
.pillars li{padding:1.3rem 0 1.4rem;border-top:1px solid #3a2f16;margin:0}
.pillars h3{font-size:1.25rem;color:var(--gold);margin-bottom:.25rem}
.pillars p{margin:0}

.heroes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2.2rem 1rem}
@media(min-width:560px){.heroes{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.heroes{grid-template-columns:repeat(6,1fr)}}
.heroes li{text-align:center;margin:0}
.heroes img{width:min(9rem,100%);height:auto;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 2px #000,0 0 0 4px var(--gold),0 10px 30px #000}
.heroes h3{margin:1rem 0 .2rem;color:var(--gold);font-size:1.2rem}
.heroes p{margin:0 auto;max-width:12rem;color:var(--dim);font-size:.95rem;line-height:1.45}

.shots{display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:640px){.shots{grid-template-columns:1fr 1fr}.shots a:first-child{grid-column:1/-1}}
.shots a{display:block;border:1px solid #5a4620;line-height:0;background:#0a0804}
.shots a:hover{border-color:var(--gold)}
.shots img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

.lb{position:fixed;inset:0;z-index:20;background:#000e;display:none;align-items:center;justify-content:center;padding:1rem;cursor:zoom-out}
.lb.on{display:flex}.lb img{max-width:100%;max-height:100%}

.cta{text-align:center;padding-bottom:3rem}
.cta .btns{margin-top:1.5rem}
footer.site{max-width:68rem;margin:3rem auto 0;padding:1.5rem 1.25rem 3rem;border-top:1px solid #3a2f16;color:var(--dim);font-size:.95rem;display:grid;gap:.5rem}
footer.site nav{margin:0}
footer.site p{margin:0}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.landing main{max-width:none;padding:0}