/* Jordan Astra — site.css */
@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');

/* Eurostile: uses the real font when installed / licensed (drop .woff2 files in /fonts and uncomment).
   Michroma (free, Google Fonts) is the closest stand-in and loads automatically as fallback. */
/*
@font-face{font-family:"Eurostile";src:url("fonts/Eurostile-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Eurostile";src:url("fonts/Eurostile-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
*/

:root{
  --black:#000;
  --cream:#E6C28B;
  --orange:#F9522E;
  --burnt:#9E3C0C;
  --sage:#D9EAD3;
  --dim:rgba(230,194,139,.5);
  --head:"Eurostile","Eurostile Extended","Square721 BT","Microgramma","Michroma",sans-serif;
  --text:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--black);color:var(--cream);font-family:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2{font-family:var(--head);font-weight:700;text-transform:uppercase;margin:0;letter-spacing:.06em;color:var(--cream)}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:flex-end;padding:22px 28px;mix-blend-mode:difference}
.hdr .logo{font-family:var(--head);font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:#fff}
.nav{display:flex;gap:34px}
.nav a{font-family:var(--head);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#fff;opacity:.85;transition:opacity .2s;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
@media(max-width:600px){.hdr{padding:18px 18px}.nav{gap:20px}.nav a{font-size:10px;letter-spacing:.2em}.hdr .logo{font-size:11px;letter-spacing:.22em}}

/* ---------- home ---------- */
.hero{background:#000;padding-bottom:70px}
.hero img{width:100%;height:auto;display:block}
.hero img+img{margin-top:6px}
/* socials: pinned to the screen so they stay reachable while scrolling */
.hero-socials{position:fixed;right:28px;bottom:24px;z-index:25;display:flex;gap:22px;mix-blend-mode:difference}
.hero-socials a{font-family:var(--head);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:.85;transition:opacity .2s;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.hero-socials a:hover{opacity:1}
@media(max-width:700px){.hero-socials{left:18px;right:18px;bottom:64px;gap:16px;flex-wrap:wrap;justify-content:center}.hero{padding-bottom:120px}}

/* ---------- JOIN tab (Laylo) ---------- */
.join-tab{position:fixed;right:0;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;z-index:30;background:var(--orange);color:#000;font-family:var(--head);font-size:11px;letter-spacing:.3em;text-transform:uppercase;padding:18px 12px;border:0;cursor:pointer;transition:background .2s}
.join-tab:hover{background:#ff6b48}
@media(max-width:700px){.join-tab{top:auto;bottom:0;left:0;right:0;transform:none;writing-mode:horizontal-tb;padding:16px;text-align:center;font-size:12px}}
.join-panel{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.join-panel.open{display:flex}
.join-box{width:min(560px,94vw);background:#000;border:1px solid rgba(230,194,139,.25);position:relative}
.join-box .jb-head{padding:18px 20px 10px;font-family:var(--head);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--cream)}
.join-box .jb-sub{padding:0 20px 14px;font-size:13px;color:var(--dim)}
.join-box iframe{display:block;width:100%;height:300px;border:0;background:#000}
@media(max-width:600px){.join-box iframe{height:360px}}
.join-close{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--cream);font-size:22px;line-height:1;cursor:pointer;padding:6px}

/* ---------- inner pages ---------- */
.page{padding:110px 28px 80px;min-height:100vh}
.page h1{font-size:11px;letter-spacing:.32em;color:var(--dim);margin-bottom:28px}
@media(max-width:600px){.page{padding:92px 18px 100px}}

/* music grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:480px){.grid{grid-template-columns:repeat(2,1fr);gap:14px}.rel .cap{font-size:9px;letter-spacing:.14em}}
.rel{display:block;position:relative}
.rel img{width:100%;aspect-ratio:1;object-fit:cover;background:#111;transition:opacity .25s,transform .3s}
.rel:hover img{opacity:.85}
.rel .cap{display:flex;justify-content:space-between;gap:12px;padding:10px 0 0;font-family:var(--head);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.rel .cap span:last-child{color:var(--dim)}

/* video grid */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
@media(max-width:700px){.vgrid{grid-template-columns:1fr;gap:22px}}
.vid{display:block;position:relative}
.vid .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111}
.vid .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .25s}
.vid:hover .thumb img{transform:scale(1.03);opacity:.85}
.vid .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.vid .play span{width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35)}
.vid .play span::after{content:"";border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.vid .cap{padding:10px 0 0;font-family:var(--head);font-size:10px;letter-spacing:.2em;text-transform:uppercase;display:flex;justify-content:space-between;gap:12px}
.vid .cap span:last-child{color:var(--dim)}

/* footer */
.ftr{padding:40px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--dim);letter-spacing:.06em}
.ftr .socials{display:flex;gap:18px;flex-wrap:wrap}
.ftr a:hover{color:var(--cream)}
.lang{display:flex;gap:12px}
.lang button{background:none;border:0;color:var(--dim);font:inherit;letter-spacing:.12em;cursor:pointer;padding:0}
.lang button[aria-pressed="true"]{color:var(--orange)}
@media(max-width:600px){.ftr{padding:30px 18px 110px}}

/* bio line (SEO + context), kept quiet */
.bio{flex:0 0 100%;margin:0 0 10px;font-size:12px;line-height:1.6;color:var(--dim)}
.bio span{display:block;max-width:70ch}
.ftr-home{padding:0 28px 40px;display:block}
@media(max-width:600px){.ftr-home{padding:0 18px 130px}}