:root{
  --bg:#000; --fg:#f4f4f2; --muted:#9a9a96; --line:#262626; --card:#0d0d0d;
  --head:'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --body:Inter, Arial, sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.6; overflow-x:hidden; padding-bottom:70px; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
#sky{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
main, .site-footer{ position:relative; z-index:1; }

/* Header */
.site-header{ position:fixed; top:0; left:0; right:0; height:68px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid #111; z-index:50; }
.site-header .logo img{ height:30px; width:auto; }
.menu-toggle{ position:absolute; left:12px; top:16px; width:36px; height:36px; background:none; border:0; cursor:pointer; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:6px; }
.menu-toggle span{ display:block; height:2px; background:var(--fg); transition:transform .3s, opacity .3s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
.nav{ position:absolute; top:68px; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:2px; background:rgba(0,0,0,.97); max-height:0; overflow:hidden; transition:max-height .35s ease; }
.nav.open{ max-height:80vh; border-bottom:1px solid var(--line); padding:10px 0 18px; }
.nav a{ font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.25em; text-decoration:none; padding:9px 16px; color:var(--muted); font-size:18px; }
.nav a:hover, .nav a.active{ color:var(--fg); }

@media (min-width:960px){
  .menu-toggle{ display:none; }
  .site-header{ justify-content:space-between; padding:0 28px; }
  .nav{ position:static; flex-direction:row; max-height:none; background:none; gap:0; overflow:visible; }
  .nav a{ font-size:15px; padding:8px 11px; letter-spacing:.2em; }
}

/* Views */
.view{ display:none; min-height:calc(100vh - 140px); padding:110px 16px 40px; animation:fade .5s ease; }
.view.active{ display:block; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.wrap{ max-width:1120px; margin:0 auto; }
.narrow{ max-width:720px; }
.center{ text-align:center; }
.title{ font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.35em; font-size:clamp(34px,7vw,56px); margin:0 0 14px; text-align:center; padding-left:.35em; }
.kicker{ font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.3em; font-size:14px; color:var(--muted); margin:0 0 14px; }
.lead{ font-size:18px; color:#d8d8d4; max-width:640px; margin:0 auto 26px; text-align:center; }
.muted{ color:var(--muted); }
.small{ font-size:14px; }
.soon{ margin-top:30px; color:var(--muted); font-size:14px; letter-spacing:.05em; }
.soon a{ color:var(--fg); }

/* Buttons */
.btn{ display:inline-block; font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.22em; font-size:15px; text-decoration:none; padding:12px 22px; border:1px solid var(--fg); color:var(--fg); background:transparent; cursor:pointer; transition:background .2s, color .2s; }
.btn:hover{ background:var(--fg); color:#000; }
.btn-solid{ background:var(--fg); color:#000; }
.btn-solid:hover{ background:transparent; color:var(--fg); }

/* Home */
.view-home{ padding-top:68px; }
.hero{ min-height:calc(100vh - 230px); padding-top:40px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px; }
.hero-logo{ width:min(86vw,640px); box-shadow:0 0 80px rgba(255,255,255,.06); }
.tagline{ font-family:var(--head); text-transform:uppercase; letter-spacing:.4em; font-size:clamp(14px,2.6vw,18px); color:#cfcfca; margin:6px 0 4px; padding-left:.4em; }
.cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.social{ display:flex; gap:22px; justify-content:center; align-items:center; margin-top:10px; }
.social a{ color:var(--fg); opacity:.85; text-decoration:none; font-family:var(--head); letter-spacing:.2em; text-transform:uppercase; }
.social a:hover{ opacity:.55; }
.home-latest{ max-width:1120px; margin:0 auto 30px; }
.home-latest .kicker{ text-align:center; }

/* Filters */
.filters{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 26px; }
.filters button{ font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:14px; padding:8px 14px; background:transparent; color:var(--muted); border:1px solid var(--line); cursor:pointer; }
.filters button:hover{ color:var(--fg); }
.filters button[aria-selected="true"]{ color:#000; background:var(--fg); border-color:var(--fg); }

/* Video grid */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.grid-small{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); margin-top:24px; }
.vcard{ background:var(--card); border:1px solid var(--line); text-align:left; }
.vthumb{ position:relative; aspect-ratio:16/9; background:#111; cursor:pointer; overflow:hidden; border:0; padding:0; width:100%; display:block; }
.vthumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s, opacity .3s; opacity:.85; }
.vthumb:hover img{ transform:scale(1.04); opacity:1; }
.vthumb .playicon{ position:absolute; inset:0; margin:auto; width:62px; height:62px; border-radius:50%; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; color:#fff; }
.vthumb iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vmeta{ padding:12px 14px 14px; }
.vcat{ font-family:var(--head); text-transform:uppercase; letter-spacing:.22em; font-size:12px; color:var(--muted); }
.vtitle{ font-size:15px; margin:2px 0 0; font-weight:500; }
.empty{ grid-column:1/-1; border:1px dashed #333; padding:40px 20px; text-align:center; color:var(--muted); }
.empty .btn{ margin-top:16px; }
.channel-cta{ text-align:center; margin-top:34px; }

/* Music */
.track-card{ display:flex; align-items:center; gap:26px; justify-content:center; text-align:left; margin:10px auto 30px; padding:24px; border:1px solid var(--line); background:rgba(13,13,13,.8); max-width:520px; }
.track-name{ font-family:var(--head); text-transform:uppercase; letter-spacing:.2em; font-size:34px; margin:0; line-height:1.1; }
.track-card .muted{ margin:2px 0 14px; }
.track-card .kicker{ margin-bottom:6px; font-size:12px; }
.disc{ flex:0 0 auto; width:110px; height:110px; border-radius:50%; background:repeating-radial-gradient(circle,#161616 0 2px,#0a0a0a 2px 4px); border:1px solid #333; display:flex; align-items:center; justify-content:center; }
.disc span{ width:34px; height:34px; border-radius:50%; background:url(../logo.jpg) center/300% auto, #000; border:1px solid #444; }
body.playing .disc{ animation:spin 4s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Text pages */
.text p, .text li{ color:#dcdcd8; font-size:17px; line-height:1.8; }
.text h2{ font-family:var(--head); text-transform:uppercase; letter-spacing:.25em; font-size:24px; margin:40px 0 8px; }
.text .first::first-letter{ font-family:var(--head); font-size:3.4em; float:left; line-height:.9; padding:6px 10px 0 0; font-weight:700; }
.text .closing{ border-top:1px solid var(--line); padding-top:22px; margin-top:36px; color:#fff; }
.story-photo{ width:min(100%,380px); margin:10px auto 30px; filter:grayscale(1); }
.patch{ width:min(100%,460px); margin:10px auto 30px; }
.photo-hero{ max-width:560px; margin:0 auto; text-align:center; }
.photo-hero img{ width:100%; filter:grayscale(1); }
.big-link{ font-family:var(--head); font-size:clamp(22px,5vw,34px); letter-spacing:.08em; text-decoration:none; border-bottom:1px solid #555; }
.big-link:hover{ border-color:#fff; }
.view .social{ margin-top:26px; }

/* Footer */
.site-footer{ color:var(--muted); text-align:center; padding:20px 16px 26px; font-size:13px; letter-spacing:.15em; }

/* Player */
.player{ position:fixed; left:12px; right:12px; bottom:12px; max-width:420px; margin:0 auto; z-index:60; display:flex; align-items:center; gap:12px; padding:8px 16px 8px 8px; background:rgba(10,10,10,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid #2a2a2a; border-radius:40px; cursor:pointer; }
.player-btn{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:0; background:var(--fg); color:#000; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.player-btn .i-pause{ display:none; }
body.playing .player-btn .i-pause{ display:block; }
body.playing .player-btn .i-play{ display:none; }
.player-text{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.player-text strong{ font-family:var(--head); text-transform:uppercase; letter-spacing:.18em; font-size:15px; }
.player-text span{ color:var(--muted); }
.player-hint{ font-size:12px; color:var(--muted); white-space:nowrap; }
body.playing .player-hint{ display:none; }
.player.missing .player-hint{ display:inline; }
.eq{ display:flex; align-items:flex-end; gap:2px; height:16px; }
.eq i{ width:3px; height:4px; background:var(--fg); }
body.playing .eq i{ animation:eq .9s ease-in-out infinite alternate; }
.eq i:nth-child(2){ animation-delay:.2s !important; }
.eq i:nth-child(3){ animation-delay:.45s !important; }
.eq i:nth-child(4){ animation-delay:.1s !important; }
@keyframes eq{ from{ height:3px; } to{ height:16px; } }

@media (max-width:420px){ .player-hint{ display:none; } .track-card{ flex-direction:column; text-align:center; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* Channel player */
.channel-player{ max-width:900px; margin:0 auto 40px; text-align:center; }
.channel-frame{ cursor:default; border:1px solid var(--line); }

/* Instagram grid */
.ig-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; align-items:start; margin-bottom:10px; }
.ig-grid:empty{ display:none; }
.ig-cell .instagram-media{ min-width:0 !important; width:100% !important; margin:0 !important; border-radius:0 !important; }
.ig-single{ grid-template-columns:minmax(0,480px); justify-content:center; margin:0 auto 30px; }