/* ============================================================
   GENMAN — MASTER STYLE SYSTEM
   Black × White × Cinematic × Editorial × Premium
============================================================ */
:root{
  --black:#060606;
  --black-2:#0d0d0d;
  --black-3:#141414;
  --white:#f7f6f2;
  --off:#c4c1b8;
  --dim:#87847c;
  --line:rgba(247,246,242,0.16);
  --line-soft:rgba(247,246,242,0.08);
  --metal:#c9c4b8;
  --accent:#c3c7cc;
  --accent-strong:#eceef0;
  --chrome:linear-gradient(115deg,#fcfcfc 0%,#cdd1d5 20%,#84888c 38%,#f4f5f6 52%,#9a9ea2 68%,#e6e8e9 84%,#b3b7bb 100%);
  --red:#e2412a; /* signature accent — fixed across light/dark sections, doesn't get re-scoped */
  --ff-display:"Anton","Arial Narrow",Impact,sans-serif;
  --ff-serif:"Georgia","Times New Roman",serif;
  --ff-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --container:1400px;
}
/* ---- LIGHT SECTION THEME ----
   Applying class="light" to a .section re-scopes every color token used
   throughout the whole design system (backgrounds, text, borders, accent)
   from dark-on-black to dark-on-white — nothing else needs to change. */
.light{
  --black:#f7f6f2;
  --black-2:#efeee8;
  --black-3:#e7e5dd;
  --white:#0c0c0b;
  --off:#4b4842;
  --dim:#8a867d;
  --line:rgba(12,12,11,0.14);
  --line-soft:rgba(12,12,11,0.07);
  --accent:#5c5f63;
  --accent-strong:#2c2e30;
  --chrome:linear-gradient(115deg,#2a2c2e 0%,#6b6f73 20%,#9a9ea1 38%,#3a3c3e 52%,#83878a 68%,#4c4e50 84%,#6f7377 100%);
}
.chrome-text{
  background:var(--chrome);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
}
.chrome-rule{height:1px;background:var(--chrome);opacity:.55;border:none;}
*,*::before,*::after{box-sizing:border-box;}
html{background:var(--black);scroll-behavior:smooth;}
body{
  margin:0;background:var(--black);color:var(--white);
  font-family:var(--ff-body);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}
@media (max-width:900px){ body{cursor:auto;} }
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:none;}
@media (max-width:900px){ button{cursor:pointer;} }
h1,h2,h3,h4{margin:0;font-weight:400;}
p{margin:0;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 5vw;}
.eyebrow{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--off);
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--red);display:inline-block;}
.hdisplay{
  font-family:var(--ff-display);
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.92;
  font-weight:400;
}
.section{position:relative;padding:min(14vw,150px) 0;border-top:1px solid var(--line-soft);background:var(--black);color:var(--white);transition:background .3s var(--ease);}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:70px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(38px,7vw,96px);}
.section-head .sub{max-width:420px;color:var(--off);font-size:15px;line-height:1.7;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border:1px solid var(--white);border-radius:100px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  transition:background .4s var(--ease),color .4s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--white);color:var(--black);}
.btn.ghost{border-color:var(--line);color:var(--off);}
.btn.ghost:hover{border-color:var(--white);color:var(--black);}
.btn.solid{background:var(--white);color:var(--black);}
.btn.solid:hover{background:var(--accent);color:var(--black);border-color:var(--accent);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* visually hidden but readable by screen readers / SEO — zero visual impact */
.reveal{opacity:1;} /* visible by default — JS progressively enhances with a fade/rise via GSAP when available */
.gsap-ready .reveal{opacity:0;transform:translateY(40px);}

/* ---------- CUSTOM CURSOR ---------- */
#cursor{
  position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--white);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);mix-blend-mode:difference;
  transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease);
}
#cursor-label{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--black);background:var(--white);
  padding:9px 16px;border-radius:100px;opacity:0;
  transition:opacity .25s var(--ease);white-space:nowrap;
}
#cursor-label.on{opacity:1;}
#cursor.grow{width:64px;height:64px;background:transparent;border:1px solid var(--white);mix-blend-mode:normal;}
@media (max-width:900px){#cursor,#cursor-label{display:none;}}

/* ---------- LOADER ---------- */
#loader{
  position:fixed;inset:0;background:var(--black);z-index:10000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
#loader.done{opacity:0;visibility:hidden;}
#loader .mark{font-family:var(--ff-display);font-size:clamp(40px,9vw,110px);letter-spacing:.02em;}
#loader .bar{width:min(320px,60vw);height:1px;background:var(--line);position:relative;overflow:hidden;}
#loader .bar span{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--white);}
#loader .enter{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--off);}

/* ---------- HEADER / NAV ---------- */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 5vw;color:#f7f6f2;
}
header.site::before{
  content:"";position:absolute;inset:0 0 auto 0;height:140px;z-index:-1;
  background:linear-gradient(180deg,rgba(3,3,3,.65) 0%,rgba(3,3,3,.32) 55%,transparent 100%);
  pointer-events:none;
}
header.site .menu-toggle .lines span{background:#f7f6f2;}
header.site .logo{display:flex;align-items:center;gap:12px;font-family:var(--ff-display);font-size:20px;letter-spacing:.06em;}
header.site .logo .logo-img{height:30px;width:auto;}
#loader .mark.logo-img{height:clamp(70px,11vw,140px);width:auto;filter:drop-shadow(0 0 40px rgba(200,203,207,.25));}
.foot-grid .mark.logo-img{height:40px;width:auto;margin-bottom:4px;}
.menu-toggle{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;}
.menu-toggle .lines{width:26px;height:16px;position:relative;}
.menu-toggle .lines span{position:absolute;left:0;right:0;height:1px;background:var(--white);transition:transform .4s var(--ease),opacity .4s var(--ease);}
.menu-toggle .lines span:nth-child(1){top:0;}
.menu-toggle .lines span:nth-child(2){top:8px;}
.menu-toggle .lines span:nth-child(3){top:16px;}
body.menu-open .menu-toggle .lines span:nth-child(1){transform:translateY(8px) rotate(45deg);}
body.menu-open .menu-toggle .lines span:nth-child(2){opacity:0;}
body.menu-open .menu-toggle .lines span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

#fullmenu{
  position:fixed;inset:0;background:var(--black);z-index:800;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px 5vw 60px;
  transform:translateY(-100%);transition:transform .7s var(--ease);
}
body.menu-open #fullmenu{transform:translateY(0);overflow-y:auto;}
#fullmenu ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
#fullmenu li{border-top:1px solid var(--line-soft);}
#fullmenu li:last-child{border-bottom:1px solid var(--line-soft);}
#fullmenu a{
  display:flex;align-items:baseline;gap:24px;padding:16px 0;
  font-family:var(--ff-display);font-size:clamp(30px,6vw,64px);
  text-transform:uppercase;color:var(--off);
  transition:color .4s var(--ease),padding-left .4s var(--ease);
}
#fullmenu a:hover{color:var(--white);padding-left:20px;}
#fullmenu .num{font-family:var(--ff-body);font-size:13px;color:var(--dim);}
#fullmenu .foot{display:flex;justify-content:space-between;margin-top:50px;flex-wrap:wrap;gap:16px;color:var(--dim);font-size:12px;letter-spacing:.08em;}
#fullmenu .foot a{color:var(--off);}
#fullmenu .foot a:hover{color:var(--white);}

/* ---------- HERO ---------- */
#hero{
  position:relative;height:100vh;min-height:640px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
}
#hero .bg{
  position:absolute;inset:0;
  background-image:url('HERO_IMG');
  background-size:cover;background-position:center 20%;
  filter:grayscale(30%) brightness(.62);
  transform:scale(1.12);
  will-change:transform;
}
#hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,6,.15) 0%,rgba(6,6,6,.05) 40%,rgba(6,6,6,.92) 100%);}
#hero .grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
#hero .content{position:relative;z-index:3;padding:0 5vw 64px;}
#hero .eyebrow-row{display:flex;gap:14px;align-items:center;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--off);margin-bottom:18px;}
#hero .eyebrow-row .dot{width:6px;height:6px;border-radius:50%;background:var(--red);}
#hero h1{
  font-family:"General Sans","Helvetica Neue",Arial,sans-serif;
  font-weight:700;
  font-size:clamp(58px,13vw,220px);
  letter-spacing:.005em;line-height:.85;
}
#hero .sub{
  display:flex;gap:28px;flex-wrap:wrap;align-items:center;margin-top:22px;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--off);
}
#hero .sub b{color:var(--white);font-weight:400;}
#hero .ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px;}
#hero .scrolldown{
  position:absolute;bottom:26px;right:5vw;z-index:3;display:flex;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--off);
  writing-mode:vertical-rl;
}
#hero .scrolldown .line{width:1px;height:60px;background:linear-gradient(var(--white),transparent);}

/* ---------- INTRO STATEMENT ---------- */
#intro{padding:min(18vw,190px) 0;}
#intro .line1{font-size:clamp(22px,3.4vw,34px);color:var(--dim);letter-spacing:.02em;}
#intro .line2{
  font-family:var(--ff-display);font-size:clamp(34px,7.2vw,108px);line-height:.98;
  text-transform:uppercase;margin-top:14px;
}
#intro .line2 em{font-style:normal;color:var(--dim);}

/* ---------- ABOUT ---------- */
#about .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:start;}
#about .lead{font-family:var(--ff-serif);font-size:clamp(22px,2.6vw,32px);line-height:1.45;color:var(--white);}
#about .body p{color:var(--off);font-size:15px;line-height:1.85;margin-top:22px;}
#about .photo{position:relative;overflow:hidden;border:1px solid var(--line);}
#about .photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:355/380;}
#about .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px;border-top:1px solid var(--line-soft);padding-top:32px;}
#about .stats .n{font-family:var(--ff-display);font-size:clamp(30px,3.4vw,46px);}
#about .stats .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:6px;}
#about .facets{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
#about .facets span{border:1px solid var(--line);border-radius:100px;padding:9px 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--off);}

/* ---------- MUSIC ---------- */
#music .featured{
  position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;
  padding-bottom:90px;margin-bottom:90px;border-bottom:1px solid var(--line-soft);
}
.tilt-wrap{perspective:1200px;}
.tilt{position:relative;aspect-ratio:1/1;transform-style:preserve-3d;transition:transform .35s var(--ease);will-change:transform;border:1px solid var(--line);}
.tilt img,.tilt .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tilt .sheen{position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 40%);opacity:0;transition:opacity .35s var(--ease);}
.tilt-wrap:hover .sheen{opacity:1;}
#music .featured .info .tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;}
#music .featured .info h3{font-family:var(--ff-display);font-size:clamp(32px,5vw,64px);text-transform:uppercase;}
#music .featured .info .meta{color:var(--off);font-size:14px;margin:16px 0 24px;line-height:1.8;}
.platform-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.platform-row a{border:1px solid var(--line);border-radius:100px;padding:10px 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--off);transition:.3s var(--ease);}
.platform-row a:hover{border-color:var(--white);color:var(--white);}

.disco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-soft);}
@media (max-width:820px){.disco-grid{grid-template-columns:repeat(2,1fr);}}
.disco-card{background:var(--black);padding:34px 26px;position:relative;overflow:hidden;}
.disco-card .cover{aspect-ratio:1/1;background:var(--black-3);margin-bottom:22px;overflow:hidden;position:relative;}
.disco-card .cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.disco-card:hover .cover img{transform:scale(1.06);}
.disco-card h4{font-family:var(--ff-display);font-size:22px;text-transform:uppercase;margin-bottom:8px;}
.disco-card .who{font-size:12px;color:var(--off);letter-spacing:.06em;}
.disco-card p{margin-top:14px;font-size:13px;color:var(--dim);line-height:1.7;}
.disco-card .links{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;}
.disco-card .links a{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--off);border-bottom:1px solid var(--line);padding-bottom:2px;}
.disco-card .links a:hover{color:var(--white);border-color:var(--white);}

/* ---------- PLAYER ---------- */
#player{
  position:fixed;left:0;right:0;bottom:0;z-index:700;
  background:rgba(6,6,6,.88);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .5s var(--ease);
  padding:14px 5vw;
}
#player.show{transform:translateY(0);}
#player .row{display:flex;align-items:center;gap:20px;}
#player .cover{width:46px;height:46px;background:var(--black-3);flex:none;overflow:hidden;}
#player .cover img{width:100%;height:100%;object-fit:cover;}
#player .meta{min-width:150px;}
#player .meta .t{font-size:13px;}
#player .meta .a{font-size:11px;color:var(--dim);}
#player .controls{display:flex;align-items:center;gap:18px;}
#player .controls button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;}
#player .controls button.play{background:var(--white);color:var(--black);border-color:var(--white);}
#player .track{flex:1;height:2px;background:var(--line);position:relative;cursor:pointer;}
#player .track .fill{position:absolute;left:0;top:0;bottom:0;width:22%;background:var(--white);}
#player .time{font-size:10px;color:var(--dim);letter-spacing:.06em;}
#player .close{color:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
@media (max-width:700px){#player .meta{display:none;}}

/* ---------- VISUALS ---------- */
.visual-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;}
.visual-card{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--black-3);}
.visual-card img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(.9);transition:transform .8s var(--ease),filter .5s var(--ease);}
.visual-card:hover img{transform:scale(1.06);filter:brightness(.4) saturate(1);}
.visual-card .info{position:absolute;left:0;right:0;bottom:0;padding:26px;z-index:2;}
.visual-card .info .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--off);}
.visual-card .info h4{font-family:var(--ff-display);font-size:clamp(22px,3vw,34px);text-transform:uppercase;margin-top:8px;}
.visual-card .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);width:64px;height:64px;
  border:1px solid rgba(244,243,239,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease);z-index:2;font-size:11px;letter-spacing:.1em;
}
.visual-card:hover .play{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* ---------- NEWS ---------- */
.news-feature{
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;
  padding-bottom:80px;margin-bottom:80px;border-bottom:1px solid var(--line-soft);
}
.news-feature .ph{aspect-ratio:4/5;background:linear-gradient(160deg,#232323,#050505);position:relative;overflow:hidden;border:1px solid rgba(247,246,242,.14);color:#f7f6f2;}
.news-feature .ph .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;}
.news-feature .ph .logo-mark{font-family:var(--ff-display);font-size:30px;text-transform:uppercase;letter-spacing:.03em;}
.news-feature .ph .amp{color:#9c9990;font-size:13px;margin:6px 0;}
.news-feature .ph .statlabel{color:#c7cbd0;}
.news-feature .stat{font-family:var(--ff-display);font-size:clamp(46px,6vw,90px);margin-top:8px;}
.news-feature .statlabel{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--off);margin-top:6px;}
.news-feature h3{font-family:var(--ff-display);font-size:clamp(30px,4.4vw,56px);text-transform:uppercase;margin-bottom:20px;}
.news-feature p{color:var(--off);font-size:14.5px;line-height:1.85;margin-bottom:14px;}

.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-soft);}
@media (max-width:820px){.news-grid{grid-template-columns:1fr;}}
.news-card{background:var(--black);padding:36px 28px;}
.news-card .idx{font-size:11px;color:var(--dim);letter-spacing:.1em;margin-bottom:20px;}
.news-card h4{font-family:var(--ff-display);font-size:24px;text-transform:uppercase;margin-bottom:14px;}
.news-card p{color:var(--dim);font-size:13.5px;line-height:1.8;}

/* ---------- GEN-RECORDS ---------- */
#genrecords{background:var(--black-2);}
#genrecords .grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;}
#genrecords .services{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);margin-top:40px;}
#genrecords .services div{background:var(--black-2);padding:20px 22px;font-size:12.5px;letter-spacing:.06em;color:var(--off);display:flex;align-items:center;gap:10px;}
#genrecords .services div::before{content:"→";color:var(--accent);}

/* ---------- ROSTER ---------- */
.roster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line-soft);}
@media (max-width:900px){.roster-grid{grid-template-columns:repeat(2,1fr);}}
.roster-card{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--black-3);}
.roster-card .mono{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-size:clamp(50px,8vw,110px);color:rgba(244,243,239,.08);
  transition:transform .6s var(--ease),color .5s var(--ease);
}
.roster-card:hover .mono{transform:scale(1.15);color:rgba(244,243,239,.14);}
.roster-card .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.roster-card:hover .photo{transform:scale(1.08);}
.roster-card .grad{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,6,6,0) 55%,rgba(6,6,6,.85) 100%);mix-blend-mode:normal;}
.roster-card .name{position:absolute;left:22px;bottom:22px;z-index:2;font-family:var(--ff-display);font-size:20px;text-transform:uppercase;letter-spacing:.02em;}
.roster-card .role{position:absolute;left:22px;bottom:0;z-index:2;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--off);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease),bottom .4s var(--ease);}
.roster-card:hover .name{transform:translateY(-18px);transition:transform .4s var(--ease);}
.roster-card:hover .role{opacity:1;bottom:22px;transform:translateY(0);}

/* ---------- STUDIO / PRICING ---------- */
#studio .packs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-soft);margin-bottom:60px;}
@media (max-width:820px){#studio .packs{grid-template-columns:1fr;}}
.pack-card{background:var(--black);padding:44px 30px;}
.pack-card .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
.pack-card h4{font-family:var(--ff-display);font-size:26px;text-transform:uppercase;margin:14px 0;}
.pack-card .price{font-family:var(--ff-display);font-size:clamp(34px,4vw,50px);color:var(--white);}
.table-wrap{overflow-x:auto;border:1px solid var(--line-soft);}
table.rates{width:100%;border-collapse:collapse;min-width:760px;font-size:13.5px;}
table.rates th{text-align:left;padding:16px 20px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line);background:var(--black-2);}
table.rates td{padding:16px 20px;border-bottom:1px solid var(--line-soft);color:var(--off);vertical-align:top;}
table.rates tr:hover td{color:var(--white);background:var(--black-2);}
table.rates td.svc{color:var(--white);}
table.rates td.rate{white-space:nowrap;color:var(--white);}
.conditions{margin-top:50px;display:grid;grid-template-columns:1fr 1fr;gap:20px 60px;}
@media (max-width:700px){.conditions{grid-template-columns:1fr;}}
.conditions li{color:var(--off);font-size:13px;line-height:1.7;list-style:none;padding-left:20px;position:relative;margin-bottom:16px;}
.conditions li::before{content:"—";position:absolute;left:0;color:var(--dim);}
.booking-form{margin-top:70px;padding-top:60px;border-top:1px solid var(--line-soft);}

/* ---- Calculateur de prix studio ---- */
.studio-calc{background:var(--black-2);border:1px solid var(--line-soft);padding:44px 40px;margin-bottom:60px;}
.studio-calc .calc-row{display:grid;grid-template-columns:1fr 180px;gap:24px;margin-bottom:22px;}
@media (max-width:600px){.studio-calc{padding:34px 22px;}.studio-calc .calc-row{grid-template-columns:1fr;}}
.studio-calc .field select,.studio-calc .field input{width:100%;}
.calc-desc{color:var(--off);font-size:13px;line-height:1.7;margin:0 0 24px 0;min-height:20px;}
.calc-total{font-family:var(--ff-display);font-size:clamp(28px,4vw,42px);color:var(--white);margin-bottom:30px;letter-spacing:.01em;}
.calc-total .calc-pack{font-family:var(--ff-body);font-size:13px;color:var(--dim);letter-spacing:.02em;}
.calc-actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center;}
.calc-actions #calc-buy stripe-buy-button{display:block;min-width:220px;}

/* ---------- FORMS ---------- */
form.gform{display:grid;grid-template-columns:1fr 1fr;gap:28px 34px;}
form.gform .full{grid-column:1/-1;}
@media (max-width:700px){form.gform{grid-template-columns:1fr;}}
.field label{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);
  color:var(--white);font-size:16px;padding:10px 0;font-family:inherit;
}
.field textarea{resize:vertical;min-height:90px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:1px solid var(--red);outline-offset:4px;}
.field select option{background:var(--black-2);}
form.gform .submit{margin-top:10px;}

/* ---------- LIVE ---------- */
.show-list{display:flex;flex-direction:column;}
.show-row{display:grid;grid-template-columns:120px 1fr auto auto;gap:26px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line-soft);}
@media (max-width:700px){.show-row{grid-template-columns:1fr;gap:8px;}}
.show-row .date{font-family:var(--ff-display);font-size:20px;text-transform:uppercase;color:var(--off);}
.show-row .title{font-size:18px;}
.show-row .place{font-size:12px;color:var(--dim);margin-top:4px;}
.show-row .status{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);border:1px solid var(--red);border-radius:100px;padding:7px 16px;justify-self:start;}
.show-row .status.past{color:var(--dim);border-color:var(--line);}
.live-callout{
  display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center;
  background:var(--black-2);padding:60px;margin-top:70px;
}
@media (max-width:800px){.live-callout{grid-template-columns:1fr;padding:36px 26px;}}
.live-callout h3{font-family:var(--ff-display);font-size:clamp(28px,4vw,44px);text-transform:uppercase;margin-bottom:16px;}
.live-callout p{color:var(--off);font-size:14px;line-height:1.8;}
.crowd-stat{text-align:center;}
.crowd-stat .n{font-family:var(--ff-display);font-size:clamp(50px,7vw,90px);}
.crowd-stat .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--off);}

/* ---------- MY WORLD ---------- */
.journey{position:relative;}
.journey::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:1px;background:var(--line);}
@media (max-width:700px){.journey::before{left:8px;}}
.jitem{position:relative;padding-left:60px;padding-bottom:70px;}
@media (max-width:700px){.jitem{padding-left:36px;}}
.jitem:last-child{padding-bottom:0;}
.jitem::before{content:"";position:absolute;left:9px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--red);border:3px solid var(--black);}
@media (max-width:700px){.jitem::before{left:3px;}}
.jitem .tag{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;}
.jitem h4{font-family:var(--ff-display);font-size:clamp(24px,3.4vw,38px);text-transform:uppercase;margin-bottom:14px;}
.jitem p{color:var(--off);font-size:14px;line-height:1.85;max-width:760px;}

/* ---------- MERCH ---------- */
.merch-band{
  position:relative;padding:70px 0;margin-bottom:60px;overflow:hidden;
  background:var(--black-2);
}
.merch-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(247,246,242,.035) 0px,rgba(247,246,242,.035) 1px,transparent 1px,transparent 3px);
}
.merch-band::after{
  content:"GEN‑RECORDS // DYSCHRONIE // OTTAWA";
  position:absolute;right:5vw;bottom:14px;z-index:1;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(247,246,242,.16);
  font-family:var(--ff-body);white-space:nowrap;
}
.merch-band .wrap{position:relative;z-index:2;}
.merch-band h3{font-family:var(--ff-display);font-size:clamp(30px,4.2vw,50px);text-transform:uppercase;max-width:700px;}
.merch-band p{color:var(--off);font-size:14px;line-height:1.85;max-width:640px;margin-top:20px;}
.merch-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:50px;}
@media (max-width:800px){.merch-cats{grid-template-columns:1fr;}}
.merch-cat .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:12px;}
.merch-cat h5{font-family:var(--ff-display);font-size:19px;text-transform:uppercase;margin-bottom:10px;}
.merch-cat p{color:var(--dim);font-size:13px;line-height:1.75;}
.merch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:2px;background:var(--line-soft);}
@media (max-width:600px){.merch-grid{grid-template-columns:1fr;}}
.merch-card{background:var(--black);}
.merch-card .ph{aspect-ratio:4/5;background:linear-gradient(150deg,#1a1a1a,#040404);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.merch-card .ph span{font-family:var(--ff-display);font-size:15px;color:rgba(244,243,239,.28);letter-spacing:.05em;text-align:center;padding:0 16px;}
.merch-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.merch-card .d{padding:20px 22px;}
.merch-card h5{font-size:14px;text-transform:uppercase;letter-spacing:.03em;}
.merch-card .price{font-size:13px;color:var(--off);margin-top:6px;}
.soon-tag{margin-top:50px;font-size:12px;color:var(--dim);}
.soon-tag b{color:var(--white);}

/* ---- Carrousel photo produit (merch) ---- */
.merch-card .ph.carousel:hover .slide.active{transform:scale(1.05);}
.merch-card .ph .slides{position:absolute;inset:0;}
.merch-card .ph .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease),transform .6s var(--ease);}
.merch-card .ph .slide.active{opacity:1;z-index:1;}
.merch-card .ph .car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:30px;height:30px;border-radius:50%;background:rgba(6,6,6,.55);border:1px solid rgba(244,243,239,.25);color:var(--white);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.75;transition:opacity .3s var(--ease),background .3s;}
/* Toujours visibles (pas seulement au survol) — sur mobile/tactile il n'y a
   pas de "hover", donc des flèches cachées par défaut seraient invisibles
   et impossibles à trouver pour changer de photo. */
.merch-card .ph:hover .car-btn{opacity:1;}
.merch-card .ph .car-btn:hover{background:rgba(6,6,6,.85);opacity:1;}
.merch-card .ph .car-btn.prev{left:10px;}
.merch-card .ph .car-btn.next{right:10px;}
.merch-card .ph .car-dots{position:absolute;bottom:12px;left:0;right:0;z-index:3;display:flex;justify-content:center;gap:6px;}
.merch-card .ph .car-dots .dot{width:6px;height:6px;border-radius:50%;background:rgba(244,243,239,.35);cursor:pointer;transition:background .3s;}
.merch-card .ph .car-dots .dot.active{background:var(--white);}

/* ---- Tailles / couleurs indicatives ---- */
.merch-card .variants{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
.merch-card .v-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.merch-card .v-label{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);min-width:52px;}
.merch-card .chips{display:flex;gap:6px;flex-wrap:wrap;}
.merch-card .chips span{font-size:10px;letter-spacing:.05em;border:1px solid var(--line);color:var(--off);padding:3px 8px;border-radius:3px;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);}
.merch-card .chips span:hover{border-color:var(--white);color:var(--white);}
.merch-card .chips span.active{background:var(--white);color:var(--black);border-color:var(--white);}
.merch-card .swatches{display:flex;gap:6px;}
.merch-card .swatches span{width:18px;height:18px;border-radius:50%;border:1px solid rgba(244,243,239,.3);display:inline-block;cursor:pointer;box-sizing:border-box;transition:box-shadow .25s var(--ease),transform .2s var(--ease);}
.merch-card .swatches span:hover{transform:scale(1.12);}
.merch-card .swatches span.active{box-shadow:0 0 0 2px var(--black),0 0 0 3px var(--white);}

/* ---- Actions carte produit (Stripe Buy Button + Commander) ---- */
.merch-card .actions{margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.merch-card .actions .btn{width:100%;justify-content:center;text-align:center;font-size:10.5px;padding:13px 16px;}
.merch-card stripe-buy-button{display:block;width:100%;}

/* ---------- PRESS KIT ---------- */
#press .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);margin-top:50px;}
@media (max-width:800px){#press .grid{grid-template-columns:repeat(2,1fr);}}
#press .cell{background:var(--black-2);padding:34px 26px;}
#press .cell .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;}
#press .cell .v{font-family:var(--ff-display);font-size:26px;text-transform:uppercase;}

/* ---------- CONTACT / FOOTER ---------- */
#contact .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;}
@media (max-width:900px){#contact .grid{grid-template-columns:1fr;gap:50px;}}
#contact .info h2{font-family:var(--ff-display);font-size:clamp(42px,7vw,90px);text-transform:uppercase;line-height:.92;}
#contact .info .item{margin-top:34px;}
#contact .info .item .k{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;}
#contact .info .item .v{font-size:17px;}
#contact .info .item .v a:hover{color:var(--accent);}

footer{background:var(--black-2);padding:80px 0 30px;border-top:1px solid var(--line-soft);}
.newsletter{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;padding-bottom:60px;margin-bottom:60px;border-bottom:1px solid var(--line-soft);}
.newsletter h3{font-family:var(--ff-display);font-size:clamp(28px,4.6vw,54px);text-transform:uppercase;max-width:520px;}
.newsletter p{color:var(--off);font-size:13.5px;margin-top:10px;}
.newsletter form{display:flex;gap:0;border-bottom:1px solid var(--white);min-width:320px;flex:1;max-width:440px;transition:border-color .2s;}
.newsletter form:focus-within{border-bottom-color:var(--red);}
.newsletter input{flex:1;background:transparent;border:none;color:var(--white);font-size:15px;padding:12px 0;}
.newsletter input:focus{outline:none;}
.newsletter button{font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:12px 4px;white-space:nowrap;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-grid .mark{font-family:var(--ff-display);font-size:30px;text-transform:uppercase;}
.foot-grid p.small{color:var(--dim);font-size:12.5px;margin-top:16px;max-width:280px;line-height:1.7;}
.foot-grid h6{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:18px;}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.foot-grid a{font-size:13.5px;color:var(--off);}
.foot-grid a:hover{color:var(--white);}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:70px;padding-top:26px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--dim);}

.magnetic{display:inline-block;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

#fullmenu a.active{color:var(--white);}
#fullmenu li:hover .num,#fullmenu a.active .num{color:var(--red);}

/* ============================================================
   ÉVOLUTION — barre sociale, navigation latérale, transitions,
   player persistant, bloc découverte homepage. Même langage
   visuel que le reste (typographie fine, noir/blanc/chrome,
   rouge en accent secondaire uniquement).
============================================================ */

/* ---------- SOCIAL RAIL (desktop, gauche) ---------- */
.social-rail{
  position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:500;
  display:flex;flex-direction:column;align-items:center;gap:22px;
}
.social-rail a{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
  transition:color .3s var(--ease);
}
.social-rail a:hover{color:var(--white);}
.social-rail .rail-line{width:1px;height:60px;background:linear-gradient(var(--line),transparent);}
body.menu-open .social-rail{opacity:0;pointer-events:none;}
@media (max-width:1150px),(max-height:700px){.social-rail{display:none;}}

/* ---------- PAGE-INDEX RAIL (desktop, droite) ---------- */
.page-rail{
  position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:500;
  display:flex;flex-direction:column;align-items:center;gap:13px;
}
.page-rail a{
  font-size:9.5px;letter-spacing:.08em;color:var(--dim);
  transition:color .3s var(--ease);
}
.page-rail a:hover,.page-rail a.active{color:var(--red);}
.page-rail .rail-line{width:1px;height:50px;margin-top:4px;background:linear-gradient(var(--line),transparent);}
body.menu-open .page-rail{opacity:0;pointer-events:none;}
@media (max-width:1150px),(max-height:700px){.page-rail{display:none;}}

/* ---------- PAGE TRANSITION (écran noir entre les pages) ---------- */
#pageTransition{
  position:fixed;inset:0;background:var(--black);z-index:10500;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility .5s var(--ease);
}
#pageTransition.hide{opacity:0;visibility:hidden;pointer-events:none;}
#pageTransition .mark{font-family:var(--ff-display);font-size:clamp(30px,5vw,54px);text-transform:uppercase;letter-spacing:.02em;color:var(--white);}
#pageTransition .dest{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--red);min-height:11px;}

/* ---------- HOMEPAGE — ENTER THE WORLD (découverte, courte) ---------- */
.explore-wrap{padding:0 5vw min(11vw,120px);}
.explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-soft);margin-top:24px;}
@media (max-width:820px){.explore-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.explore-grid{grid-template-columns:1fr;}}
.explore-card{background:var(--black);padding:40px 30px;position:relative;overflow:hidden;transition:background .35s var(--ease);}
.explore-card:hover{background:var(--black-2);}
.explore-card .n{font-size:11px;letter-spacing:.2em;color:var(--dim);transition:color .3s var(--ease);}
.explore-card:hover .n{color:var(--red);}
.explore-card h4{font-family:var(--ff-display);font-size:clamp(22px,2.6vw,30px);text-transform:uppercase;margin:16px 0 10px;transition:transform .35s var(--ease);}
.explore-card:hover h4{transform:translateX(6px);}
.explore-card p{color:var(--dim);font-size:13px;line-height:1.7;max-width:220px;}
.explore-card .arrow{position:absolute;right:26px;top:38px;color:var(--red);opacity:0;transform:translateX(-8px);transition:.35s var(--ease);}
.explore-card:hover .arrow{opacity:1;transform:translateX(0);}

/* ---------- PLAYER — actif sur toutes les pages ---------- */
.foot-grid a:hover{color:var(--red);}

/* ---------- FORMULAIRES RÉELS — statuts, erreurs, honeypot ---------- */
.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;height:0;overflow:hidden;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red);}
.field .err{color:var(--red);font-size:11px;letter-spacing:.06em;margin-top:8px;display:none;}
.field.invalid .err{display:block;}
.form-status{margin-top:24px;font-size:13px;letter-spacing:.04em;line-height:1.7;display:none;grid-column:1/-1;}
.form-status.ok{display:block;color:var(--white);}
.form-status.ok strong{font-family:var(--ff-display);font-size:clamp(20px,2.6vw,28px);text-transform:uppercase;display:block;margin-bottom:8px;letter-spacing:.01em;}
.form-status.error{display:block;color:var(--red);letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;}
form.gform.sent{display:none;}
.newsletter form.sent{display:none;}
.newsletter .form-status{margin-top:0;flex-basis:100%;order:3;}
.newsletter .form-status.ok strong{font-size:15px;}
button[disabled]{opacity:.55;cursor:default;}