/* =============================================================================
Meridian 59: Unity — shared styles for the landing site (index.html + media.html)
Fonts are loaded via in each page's .
============================================================================= */
:root{
--gold:#d9a441; --gold-bright:#f0c46a; --gold-deep:#a9772a;
--ink:#ece2d0; --muted:#a99a82; --muted-dim:#7d7060;
--bg:#0c0806; --panel:#1b1410cc; --panel-solid:#1b1410;
--line:#4a3a28; --line-soft:#3a2d20;
--err-bg:#3c1714; --err-line:#7a3a33; --err-ink:#f2c7c0;
--ok-bg:#16301d; --ok-line:#3a7a48; --ok-ink:#bdeccb;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0; color:var(--ink); background:var(--bg);
font-family:"EB Garamond",Georgia,serif; font-size:18px; line-height:1.65;
-webkit-font-smoothing:antialiased;
}
/* Atmosphere: distant torch-glow up top, deep vignette, faint grit overlay. */
.atmo{position:fixed; inset:0; z-index:-2; pointer-events:none;
background:
radial-gradient(120% 70% at 50% -8%, rgba(217,164,65,.20), rgba(120,70,20,.06) 38%, transparent 60%),
radial-gradient(90% 60% at 50% 120%, rgba(120,70,20,.10), transparent 55%),
linear-gradient(180deg,#140d09 0%,#0c0806 55%,#070504 100%);}
.grit{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
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='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
a{color:var(--gold); text-decoration:none;}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px;}
/* Header + nav */
header{position:sticky; top:0; z-index:10; backdrop-filter:blur(6px);
background:linear-gradient(180deg,rgba(12,8,6,.82),rgba(12,8,6,.35)); border-bottom:1px solid var(--line-soft);}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px;}
.brand{display:flex; align-items:center; gap:11px; font-family:"Cinzel",serif; font-weight:600;
letter-spacing:.14em; font-size:15px; color:var(--ink); text-transform:uppercase;}
.brand:hover{color:var(--ink);}
.brand svg{width:26px; height:26px; flex:none;}
.brand-logo{width:44px; height:44px; flex:none;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.brand-title{height:34px; width:auto; display:block;}
.nav{display:flex; gap:24px; align-items:center;}
.nav a{font-family:"Cinzel",serif; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
font-size:12.5px; color:var(--muted); padding:6px 1px; border-bottom:2px solid transparent;
transition:color .18s ease, border-color .18s ease;}
.nav a:hover{color:var(--gold-bright);}
.nav a.active{color:var(--gold); border-bottom-color:var(--gold-deep);}
.btn{display:inline-block; white-space:nowrap; font-family:"Cinzel",serif; font-weight:600; letter-spacing:.06em;
font-size:14px; padding:10px 20px; border-radius:4px; cursor:pointer; border:1px solid transparent;
transition:all .18s ease; text-transform:uppercase;}
.btn-primary{background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#241606;
border-color:var(--gold-deep); box-shadow:0 2px 14px rgba(217,164,65,.28);}
.btn-primary:hover{background:linear-gradient(180deg,#f7d484,var(--gold-bright)); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--gold); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-bright);}
.btn[disabled],.btn.is-soon{opacity:.6; cursor:not-allowed;}
/* Hero */
.hero{position:relative; display:flex; flex-direction:column;
align-items:center; justify-content:flex-start; text-align:center; padding:36px 22px 64px;}
.crest{width:96px; height:96px; margin-bottom:22px; filter:drop-shadow(0 4px 18px rgba(217,164,65,.35));}
.hero-logo{width:120px; height:120px; margin-bottom:22px; image-rendering:pixelated;
filter:drop-shadow(0 4px 18px rgba(217,164,65,.35));}
.hero-title{margin:0; line-height:0;}
.hero-title-text{display:block; line-height:1.02;}
.hero-title-text[hidden],.brand [hidden]{display:none;}
.hero-title img{width:clamp(260px,56vw,560px); height:auto; display:block;
filter:drop-shadow(0 2px 30px rgba(217,164,65,.18));}
.eyebrow{font-family:"Cinzel",serif; letter-spacing:.42em; text-transform:uppercase; font-size:12.5px;
color:var(--gold); margin:0 0 14px; padding-left:.42em;}
.hero h1{font-family:"Cinzel",serif; font-weight:700; margin:0; line-height:1.02;
font-size:clamp(44px,8vw,86px); letter-spacing:.04em;
background:linear-gradient(180deg,#fbe7bd 0%,var(--gold) 55%,var(--gold-deep) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
text-shadow:0 2px 40px rgba(217,164,65,.18);}
.hero-title-text .ttl-sub, .hero h1 .ttl-sub{display:block; margin-top:12px; font-size:.32em; letter-spacing:.5em;
padding-left:.5em; -webkit-text-fill-color:var(--gold-bright); color:var(--gold-bright); text-shadow:none;}
.rule{display:flex; align-items:center; gap:14px; margin:clamp(-28px,-4.5vw,-12px) 0 20px; position:relative; color:var(--gold-deep);}
.rule::before,.rule::after{content:""; height:1px; width:64px;
background:linear-gradient(90deg,transparent,var(--gold-deep));}
.rule::after{background:linear-gradient(90deg,var(--gold-deep),transparent);}
.rule svg{width:16px; height:16px;}
.rule-text{font-family:"Cinzel",serif; font-weight:600; font-size:22px; letter-spacing:.5em; padding-left:.5em;
text-transform:uppercase; color:var(--gold-bright); line-height:1;}
.lede{max-width:620px; margin:0 auto 18px; font-size:21px; color:var(--ink);}
.lede em{color:var(--gold-bright); font-style:italic;}
.hero-note{max-width:600px; margin:0 auto 34px; font-size:16px; color:var(--muted);}
.cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center;}
.cta .btn{padding:13px 28px; font-size:15px;}
.soon-tag{display:block; font-family:"EB Garamond",serif; text-transform:none; letter-spacing:0;
font-size:12px; color:var(--muted-dim); margin-top:5px; font-weight:400;}
/* Section shell */
section.band{padding:84px 0; border-top:1px solid var(--line-soft); position:relative;}
.sec-head{text-align:center; margin-bottom:34px;}
.sec-head h2{font-family:"Cinzel",serif; font-weight:600; letter-spacing:.05em; font-size:30px;
margin:0 0 8px; color:var(--gold-bright);}
.sec-head p{margin:0; color:var(--muted); font-size:17px;}
/* Prose (lorem placeholder copy) */
.prose{max-width:760px; margin:0 auto;}
.prose p{color:var(--ink); margin:0;}
.prose p + p{margin-top:16px;}
.prose.muted p{color:var(--muted);}
.text-center{text-align:center;}
/* Feature cards */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.feature{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:28px 24px;
text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(217,164,65,.06);}
.feature svg{width:40px; height:40px; color:var(--gold); margin-bottom:12px;}
.feature h3{font-family:"Cinzel",serif; font-weight:600; letter-spacing:.04em; font-size:19px;
color:var(--gold-bright); margin:0 0 8px;}
.feature p{margin:0; color:var(--muted); font-size:16px;}
/* Media teaser band */
.teaser{max-width:680px; margin:0 auto; text-align:center;}
.teaser p{color:var(--muted);}
.teaser .btn{margin-top:22px;}
/* Register card */
.enlist{max-width:430px; margin:0 auto;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:10px;
padding:30px 30px 34px; box-shadow:0 16px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(217,164,65,.08);}
label{display:block; font-family:"Cinzel",serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
color:var(--muted); margin:16px 0 6px;}
input{width:100%; padding:11px 13px; border-radius:6px; border:1px solid var(--line);
background:#120c08; color:var(--ink); font-family:"EB Garamond",serif; font-size:16px;}
input::placeholder{color:#6b5f4f;}
input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(217,164,65,.14);}
.card .btn{width:100%; margin-top:24px; padding:13px; font-size:15px;}
.msg{margin-top:16px; padding:11px 13px; border-radius:6px; font-size:15px; line-height:1.5; display:none;}
.msg.err{background:var(--err-bg); border:1px solid var(--err-line); color:var(--err-ink);}
.msg.ok{background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--ok-ink);}
.msg.show{display:block;}
.fineprint{text-align:center; margin-top:16px; font-size:13px; color:var(--muted-dim);}
/* Community */
.community{max-width:640px; margin:0 auto; text-align:center;}
.community p{color:var(--ink); font-size:18px;}
.btn-discord{background:#5865F2; color:#fff; border-color:#3c46c2; margin-top:8px;
display:inline-flex; align-items:center; gap:9px;}
.btn-discord:hover{background:#6b76f5; transform:translateY(-1px);}
.btn-discord svg{width:18px; height:18px; fill:currentColor;}
/* ---- Media page ---------------------------------------------------------- */
.page-intro{padding:96px 22px 8px; text-align:center;}
.page-intro .hero-logo{width:120px; height:120px; margin-bottom:22px; image-rendering:pixelated;
filter:drop-shadow(0 4px 18px rgba(217,164,65,.35));}
.hero-title{margin:0; line-height:0;}
.hero-title-text{display:block; line-height:1.02;}
.hero-title-text[hidden],.brand [hidden]{display:none;}
.hero-title img{width:clamp(260px,56vw,560px); height:auto; display:block;
filter:drop-shadow(0 2px 30px rgba(217,164,65,.18));}
.eyebrow{margin-bottom:12px;}
.page-intro h1{font-family:"Cinzel",serif; font-weight:700; letter-spacing:.04em; margin:0 0 12px;
font-size:clamp(34px,6vw,58px);
background:linear-gradient(180deg,#fbe7bd 0%,var(--gold) 60%,var(--gold-deep) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;}
.page-intro p{color:var(--muted); max-width:640px; margin:0 auto; font-size:18px;}
/* YouTube video grid (click-to-load facade) */
.video-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px;}
.video-card{margin:0;}
.yt{position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; cursor:pointer;
border:1px solid var(--line); background:linear-gradient(135deg,#241a12,#12100e);
background-size:cover; background-position:center;
display:flex; align-items:center; justify-content:center;
box-shadow:0 14px 44px rgba(0,0,0,.45);}
.yt::after{content:""; position:absolute; inset:0;
background:radial-gradient(65% 65% at 50% 45%, transparent, rgba(0,0,0,.4));}
.yt.has-thumb::before{content:""; position:absolute; inset:0; background:rgba(8,6,4,.32);}
.yt-play{position:relative; z-index:2; width:72px; height:72px; border-radius:50%;
background:linear-gradient(180deg,var(--gold-bright),var(--gold)); box-shadow:0 6px 24px rgba(0,0,0,.5);
display:flex; align-items:center; justify-content:center; transition:transform .18s ease;}
.yt:hover .yt-play{transform:scale(1.08);}
.yt-play::after{content:""; margin-left:5px;
border-style:solid; border-width:13px 0 13px 22px; border-color:transparent transparent transparent #241606;}
.yt-label{position:absolute; z-index:2; bottom:11px; left:13px; font-family:"Cinzel",serif; font-size:11px;
letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.yt.playing{cursor:default;}
.yt.playing::after,.yt.playing .yt-play,.yt.playing .yt-label{display:none;}
.yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-card figcaption{margin-top:13px; color:var(--muted); font-size:16px;}
/* Screenshot gallery */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px;}
.shot{margin:0;}
.shot-frame{position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; border:1px solid var(--line);
background:repeating-linear-gradient(135deg,#1c150f,#1c150f 13px,#191309 13px,#191309 26px);
display:flex; align-items:center; justify-content:center; box-shadow:0 12px 40px rgba(0,0,0,.4);}
.shot-frame .ph{font-family:"Cinzel",serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
color:var(--muted-dim);}
.shot-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; cursor:zoom-in;
display:block;}
.shot figcaption{margin-top:11px; color:var(--muted); font-size:15px;}
/* Lightbox (activates once real ![]()
are added) */
.lb{position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
background:rgba(6,4,3,.9); backdrop-filter:blur(3px); padding:24px; cursor:zoom-out;}
.lb.open{display:flex;}
.lb img{max-width:min(1100px,94vw); max-height:90vh; border:1px solid var(--line); border-radius:8px;
box-shadow:0 20px 70px rgba(0,0,0,.7);}
footer{border-top:1px solid var(--line-soft); padding:34px 0 38px; text-align:center;
color:var(--muted); font-size:15px;}
.foot p{margin:0;}
.foot p + p{margin-top:6px;}
.foot-tm{color:var(--ink);}
footer a,.about-credit a{color:var(--gold); border-bottom:1px solid var(--gold-deep);}
footer a:hover,.about-credit a:hover{color:var(--gold-bright); border-bottom-color:var(--gold-bright);}
.prose p.about-credit{margin-top:26px; color:var(--muted); font-size:16px;}
/* Responsive */
@media (max-width:820px){
.features{grid-template-columns:1fr; max-width:460px; margin:0 auto;}
.video-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
.bar{flex-wrap:wrap; padding:10px 0;}
.nav{order:3; width:100%; justify-content:center; gap:18px; padding-top:10px;
border-top:1px solid var(--line-soft);}
}
@media (max-width:560px){
body{font-size:17px;}
.hero{min-height:auto; padding:54px 18px 70px;}
.lede{font-size:19px;}
.page-intro{padding-top:72px;}
}
@media (max-width:520px){
.brand-title{display:none;}
}