:root{
  --bg:#070706;
  --bg-2:#0c0b09;
  --bg-card:#13110d;
  --gold:#d4af37;
  --gold-2:#f3d57a;
  --gold-dim:rgba(212,175,55,.16);
  --cream:#f4efe4;
  --muted:#a39884;
  --line:rgba(212,175,55,.22);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Outfit",system-ui,-apple-system,sans-serif;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);color:var(--cream);font-family:var(--sans);font-weight:400;line-height:1.6}
img,iframe{max-width:100%;border:0;display:block}
a{color:var(--gold-2);text-decoration:none}
a:hover{color:#fff}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#111;padding:8px 12px;z-index:100}
.skip:focus{left:12px;top:12px}
.wrap{width:min(var(--max),calc(100% - 40px));margin:0 auto}
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px) saturate(1.2);background:rgba(7,7,6,.78);border-bottom:1px solid var(--line)}
.nav-inner{width:min(var(--max),calc(100% - 40px));margin:0 auto;display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:20px}
.logo{display:flex;align-items:center;gap:12px;color:var(--cream)}
.logo-mark{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--gold-2),var(--gold) 55%,#8a6b12);box-shadow:0 0 16px rgba(212,175,55,.55)}
.logo-text{display:flex;flex-direction:column;line-height:1.05}
.logo-text b{font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:.04em}
.logo-text small{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:500}
.nav-links{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center}
.nav-links a{color:var(--muted);font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent}
.nav-links a:hover,.nav-links a.is-active{color:var(--cream);border-bottom-color:var(--gold)}
.nav-toggle{display:none;background:none;border:0;width:40px;height:40px;position:relative;cursor:pointer}
.nav-toggle span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--cream);transition:.2s}
.nav-toggle span:first-child{top:15px}
.nav-toggle span:last-child{top:23px}
.nav.is-open .nav-toggle span:first-child{top:19px;transform:rotate(45deg)}
.nav.is-open .nav-toggle span:last-child{top:19px;transform:rotate(-45deg)}

.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;background:#000}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:ken 28s ease-in-out infinite alternate}
@keyframes ken{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(0,-2%,0)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,6,.28) 0%,rgba(7,7,6,.15) 35%,rgba(7,7,6,.88) 78%,#070706 100%)}
.hero-content{position:relative;z-index:2;width:min(var(--max),calc(100% - 40px));margin:0 auto;padding:0 0 90px}
.eyebrow{display:inline-block;color:var(--gold);letter-spacing:.28em;text-transform:uppercase;font-size:.75rem;font-weight:500;margin:0 0 18px}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(3.2rem,8vw,7.2rem);line-height:.9;margin:0 0 22px;letter-spacing:-.02em}
.hero h1 em{font-style:italic;color:var(--gold-2);font-weight:500}
.lede{max-width:640px;font-size:1.12rem;color:var(--muted);margin:0 0 32px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gold);color:#111;background:var(--gold);padding:13px 22px;border-radius:999px;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;transition:.2s}
.btn:hover{background:var(--gold-2);color:#111}
.btn-ghost{background:transparent;color:var(--cream)}
.btn-ghost:hover{background:var(--gold-dim);color:var(--cream)}

.section{padding:88px 0;border-top:1px solid var(--line)}
.section.tight{padding:64px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.kicker{color:var(--gold);letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;margin:0 0 8px}
h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.4rem);font-weight:600;line-height:1;margin:0;letter-spacing:-.02em}
.section-head p,.intro{color:var(--muted);max-width:560px;margin:10px 0 0}

.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.eco-card{position:relative;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,rgba(212,175,55,.07),rgba(19,17,13,.9));padding:28px 26px 26px;min-height:200px;transition:transform .25s,border-color .25s,box-shadow .25s}
.eco-card:hover{transform:translateY(-6px);border-color:rgba(212,175,55,.55);box-shadow:var(--shadow)}
.eco-card .num{font-family:var(--serif);color:var(--gold);font-size:1.4rem;margin:0 0 28px}
.eco-card h3{font-family:var(--serif);font-size:1.85rem;margin:0 0 8px;font-weight:600}
.eco-card p{color:var(--muted);margin:0 0 18px;font-size:.95rem}
.eco-card .go{letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--gold)}

.featured{display:grid;grid-template-columns:1.4fr .8fr;gap:36px;align-items:center}
.embed-feature,.embed-wrap{position:relative;background:#000;border:1px solid var(--line);overflow:hidden;aspect-ratio:16/9}
.embed-feature iframe,.embed-wrap iframe{position:absolute;inset:0;width:100%;height:100%}
.featured h2{margin-bottom:14px}
.featured .meta{color:var(--muted);margin:0 0 22px}

.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--bg-card);border:1px solid var(--line);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-5px);border-color:rgba(212,175,55,.5);box-shadow:var(--shadow)}
.card-media,.song .card-media{display:block;aspect-ratio:1;overflow:hidden;background:#111}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-media img{transform:scale(1.06)}
.card-body{padding:16px 16px 18px}
.card-body h3{font-family:var(--serif);font-size:1.28rem;margin:0 0 4px;line-height:1.2;font-weight:600}
.card-body h3 a{color:var(--cream)}
.card-body h3 a:hover{color:var(--gold-2)}
.meta{color:var(--muted);font-size:.82rem;margin:0}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip-row a{border:1px solid var(--line);color:var(--muted);padding:4px 10px;border-radius:999px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.chip-row a:hover{border-color:var(--gold);color:var(--gold-2)}

.catalog{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.video-grid.shorts{grid-template-columns:repeat(3,1fr)}
.video-grid.shorts .embed-wrap{aspect-ratio:9/16}

.cta{position:relative;overflow:hidden;border:1px solid var(--line);padding:72px 48px;background:linear-gradient(120deg,rgba(212,175,55,.12),rgba(7,7,6,.2) 45%,rgba(0,0,0,.4)),url("../img/rooftop.jpg") center/cover}
.cta h2,.cta p{position:relative}
.cta p{color:#ddd4c2;max-width:520px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split img{width:100%;height:100%;object-fit:cover;min-height:420px;border:1px solid var(--line);filter:saturate(.92)}
.prose h2{margin-bottom:16px}
.prose p{color:var(--muted);font-size:1.05rem}
.prose p + p{margin-top:14px}

.contact-card{border:1px solid var(--line);background:var(--bg-card);padding:48px 40px;max-width:720px}
.contact-card a.mail{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--gold-2)}

.footer{border-top:1px solid var(--line);padding:56px 0 28px;background:#060605}
.footer-grid{display:grid;grid-template-columns:1.4fr .7fr .7fr .7fr;gap:28px}
.footer h4{margin:0 0 12px;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:var(--gold);font-weight:500}
.footer a{display:block;color:var(--muted);margin:0 0 8px}
.footer a:hover{color:var(--cream)}
.footer-tag{color:var(--muted);max-width:340px}
.footer-logo{margin-bottom:12px}
.footer-bottom{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}

.channels{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.channels a{border:1px solid var(--line);padding:10px 16px;border-radius:999px;color:var(--cream);font-size:.82rem;letter-spacing:.04em}
.channels a:hover{border-color:var(--gold);color:var(--gold-2)}

.ep{display:grid;grid-template-columns:160px 1fr auto;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.ep h3{font-family:var(--serif);margin:0 0 4px;font-size:1.5rem}
.ep p{margin:0;color:var(--muted)}
.ep .date{color:var(--gold);letter-spacing:.08em;text-transform:uppercase;font-size:.72rem}

.note{font-size:.86rem;color:var(--muted);margin-top:16px}

@media (max-width: 980px){
  .eco-grid,.strip,.catalog{grid-template-columns:repeat(2,1fr)}
  .featured,.split,.footer-grid{grid-template-columns:1fr}
  .video-grid,.video-grid.shorts{grid-template-columns:1fr 1fr}
  .split img{min-height:280px}
  .ep{grid-template-columns:1fr;gap:8px}
}
@media (max-width: 720px){
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;left:0;right:0;top:76px;background:rgba(7,7,6,.96);border-bottom:1px solid var(--line);flex-direction:column;padding:16px 22px 24px;align-items:flex-start}
  .nav.is-open .nav-links{display:flex}
  .hero{min-height:86vh}
  .eco-grid,.strip,.catalog,.video-grid,.video-grid.shorts{grid-template-columns:1fr}
  .cta{padding:48px 24px}
  .section{padding:64px 0}
}
