:root{
  --ink:#0B0B0D;
  --surface:#15151A;
  --white:#F4F1EA;
  --smoke:#9A988F;
  --ember:#E2683C;
  --rose:#C98B7A;
  --maxw:1280px;
  --hero-trail-mask:radial-gradient(circle 0px at 50% 50%, transparent, transparent);
}
*{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-font-smoothing:antialiased; scroll-behavior:auto;}
body{
  background:var(--ink); color:var(--white);
  font-family:'Inter',sans-serif; font-weight:300;
  overflow-x:hidden;
}
::selection{background:var(--ember); color:var(--ink);}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}

/* ---------- scroll progress ---------- */
.progress{position:fixed; top:0; left:0; height:2px; width:0%; background:var(--ember); z-index:200; transition:width .1s linear;}

/* ---------- nav ---------- */
nav{
  position:fixed; top:0; left:0; width:100%; z-index:150;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px clamp(20px,5vw,60px);
  mix-blend-mode:difference;
  transition:padding .4s ease;
}
nav.shrink{padding:16px clamp(20px,5vw,60px);}
nav .logo{font-family:'Playfair Display',serif; font-weight:600; font-size:20px; letter-spacing:.5px;}
nav .links{display:flex; gap:32px;}
nav .links a{font-size:12px; text-transform:uppercase; letter-spacing:.18em; position:relative; padding:4px 0;}
nav .links a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--white); transition:width .35s cubic-bezier(.2,.7,.2,1);}
nav .links a:hover::after{width:100%;}
nav .lang{display:flex; gap:14px; padding-left:18px; margin-left:4px; border-left:1px solid rgba(255,255,255,.18);}
nav .lang a{opacity:.5; transition:opacity .3s ease;}
nav .lang a:hover{opacity:1;}
nav .lang a.active{opacity:1;}
nav .lang a.active::after{width:100%;}
@media(max-width:760px){
  nav .links > a{display:none;}
  nav .lang{border-left:0; padding-left:0; margin-left:0;}
}

/* ---------- hero (dark stage: portrait reveals through cursor trail) ---------- */
.hero{position:relative; height:100vh; min-height:680px; width:100%; overflow:hidden; background:var(--ink);}
.hero__bg{position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(70% 65% at 68% 40%, rgba(226,104,60,.22), rgba(226,104,60,0) 60%),
    radial-gradient(55% 55% at 70% 30%, rgba(201,139,122,.12), rgba(0,0,0,0) 60%),
    linear-gradient(180deg,#15100e 0%, #0e0c0c 55%, #0B0B0D 100%);}
.hero__bg::after{ content:""; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}

/* ---------- hero portrait: huge & centered, base image with cursor-trail reveal ---------- */
.hero__stage{position:absolute; left:50%; bottom:0; z-index:2;
  height:96%; max-height:1040px; aspect-ratio:1024/1536;
  transform:translate3d(calc(-50% + var(--mx,0)*10px), calc(var(--my,0)*7px), 0);
  transition:transform .25s ease, opacity 1.2s ease .15s;
  opacity:0; cursor:default; outline:none; -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;}
.loaded .hero__stage{opacity:1;}
/* soft warm glow that blooms under the figure while the reveal is active */
.hero__stage::before{content:""; position:absolute; left:50%; bottom:5%; width:66%; height:20%;
  transform:translateX(-50%); z-index:-1; filter:blur(12px); opacity:0; transition:opacity .6s ease;
  background:radial-gradient(closest-side, rgba(226,104,60,.45), rgba(226,104,60,0) 75%);}
.hero__stage.is-active::before{opacity:1;}
/* both PNGs stacked, identical box -> perfect alignment */
.hero__stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 34px 54px rgba(0,0,0,.55)); backface-visibility:hidden; will-change:opacity,transform;
  transition:transform .9s cubic-bezier(.16,1,.3,1); pointer-events:none; -webkit-user-drag:none; user-drag:none;}
.hero__stage .smile{opacity:1; transform:scale(1);}
.hero__stage .sing{opacity:1; transform:scale(1);
  will-change:mask-image,-webkit-mask-image,transform;
  -webkit-mask-image:var(--hero-trail-mask); mask-image:var(--hero-trail-mask);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-mode:alpha; mask-mode:alpha;
  -webkit-mask-composite:source-over; mask-composite:add;}
.hero__stage.is-active .smile{transform:scale(1.012);}
.hero__stage.is-active .sing{transform:scale(1);}

/* clean UI around the edges */
.hero__kicker{position:absolute; top:clamp(90px,13vh,130px); left:clamp(20px,5vw,60px); z-index:3;
  font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--smoke); overflow:hidden;}
.hero__kicker span{display:inline-block; transform:translateY(110%);}
.hero__name{position:absolute; left:0; right:0; top:50%; z-index:1; text-align:center; pointer-events:none;
  transform:translateY(-50%);
  font-family:'Playfair Display',serif; font-weight:800; line-height:.82; letter-spacing:-.012em; color:var(--white);
  font-size:clamp(60px,15.5vw,250px);}
.hero__name .word{display:block; overflow:hidden;}
.hero__name .word > span{display:block; transform:translateY(110%);}
.hero__sub{position:absolute; left:clamp(20px,5vw,60px); bottom:clamp(30px,6vh,56px); z-index:3;
  display:flex; flex-direction:column; gap:6px; color:var(--smoke); font-size:14px; letter-spacing:.04em; pointer-events:none;}
.hero__sub b{color:var(--white); font-weight:500;}
.scrollcue{position:absolute; bottom:34px; right:clamp(20px,5vw,60px); z-index:3; font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--smoke); display:flex; align-items:center; gap:12px;}
.scrollcue i{width:1px; height:46px; background:linear-gradient(var(--smoke),transparent); display:block; animation:cue 2s infinite;}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* load reveal for name + kicker */
.loaded .hero__kicker span,
.loaded .hero__name .word > span{transform:translateY(0); transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.loaded .hero__name .word:nth-child(1) > span{transition-delay:.15s}
.loaded .hero__name .word:nth-child(2) > span{transition-delay:.30s}
.loaded .hero__kicker span{transition-delay:.05s}

@media(max-width:760px){
  .hero__stage{height:64%;}
  .hero__name{top:44%; font-size:clamp(52px,17vw,96px);}
  .hero__sub{font-size:12px;}
}
@media(hover:none){
  .hero__stage{cursor:pointer;}
}

/* ---------- generic section ---------- */
section{position:relative; padding:clamp(80px,14vh,170px) clamp(20px,5vw,60px);}
.wrap{max-width:var(--maxw); margin:0 auto;}
.slate{font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--ember); margin-bottom:36px; display:flex; align-items:center; gap:14px;}
.slate--center{justify-content:center;}
.slate::before{content:""; width:40px; height:1px; background:var(--ember); display:inline-block;}

/* reveal utility */
.reveal{opacity:0; transform:translateY(40px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}

/* ---------- about ---------- */
.about__grid{display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(30px,6vw,90px); align-items:center;}
.about__photo{aspect-ratio:4/5; border-radius:4px; overflow:hidden; position:relative;
  background:radial-gradient(120% 100% at 30% 20%, #2a1f1a, #120d0c 70%);}
.about__photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top;}
.about__photo .mask{position:absolute; inset:0; background:var(--ink); transform-origin:right; transition:transform 1.1s cubic-bezier(.7,0,.2,1);}
.about__photo.in .mask{transform:scaleX(0);}
.about h2{font-family:'Playfair Display',serif; font-weight:600; font-size:clamp(30px,4.5vw,56px); line-height:1.05; margin-bottom:28px;}
.about p{color:var(--smoke); font-size:clamp(15px,1.4vw,18px); line-height:1.8; max-width:52ch; margin-bottom:20px;}
.about .stats{display:flex; gap:40px; margin-top:38px;}
.about .stats div b{font-family:'Playfair Display',serif; font-size:34px; color:var(--white); display:block;}
.about .stats div span{font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--smoke);}
@media(max-width:820px){ .about__grid{grid-template-columns:1fr;} }

/* ---------- music ---------- */
.music__list{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,34px);}
@media(max-width:900px){ .music__list{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .music__list{grid-template-columns:1fr;} }
.track{position:relative;}
.track .art{aspect-ratio:1; border-radius:4px; overflow:hidden; position:relative;}
.track .art .ph{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .9s cubic-bezier(.16,1,.3,1);}
.track:nth-child(1) .ph{background:radial-gradient(120% 120% at 25% 20%, #3a241b, #120d0c);}
.track:nth-child(2) .ph{background:radial-gradient(120% 120% at 75% 30%, #2b2330, #120d0c);}
.track:nth-child(3) .ph{background:radial-gradient(120% 120% at 50% 80%, #20302e, #120d0c);}
.track:nth-child(4) .ph{background:radial-gradient(120% 120% at 30% 70%, #382a1d, #120d0c);}
.track:nth-child(5) .ph{background:radial-gradient(120% 120% at 70% 20%, #2f2030, #120d0c);}
.track:nth-child(6) .ph{background:radial-gradient(120% 120% at 50% 50%, #25302a, #120d0c);}
.track:hover .ph{transform:scale(1.06);}
.track .art .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .4s;}
.track:hover .play{opacity:1;}
.track .play span{width:54px; height:54px; border-radius:50%; border:1px solid var(--white); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px);}
.track .play span::after{content:""; border-left:10px solid var(--white); border-top:6px solid transparent; border-bottom:6px solid transparent; margin-left:3px;}
.track .meta{display:flex; justify-content:space-between; align-items:baseline; margin-top:16px;}
.track .meta h3{font-family:'Playfair Display',serif; font-weight:500; font-size:20px;}
.track .meta .yr{color:var(--smoke); font-size:13px;}
.track .links{display:flex; gap:14px; margin-top:8px;}
.track .links a{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--smoke); position:relative;}
.track .links a:hover{color:var(--ember);}

/* ---------- tour ---------- */
.tour{
  background:var(--surface);
  height:calc(var(--h-len, 100) * 1vh + 100vh);
  padding:0;
}
.tour__pin{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.tour__head{
  flex:0 0 auto;
  width:100%;
  padding:clamp(86px,14vh,140px) 0 clamp(24px,4vh,44px);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}
.tour__head .slate{margin-bottom:0;}
.tour__hint{
  margin-top:2px;
  color:var(--smoke);
  font-size:11px;
  letter-spacing:.25em;
  text-transform:uppercase;
  white-space:nowrap;
}
.tour__track{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:clamp(16px,2vw,28px);
  padding:0 clamp(20px,5vw,60px) clamp(70px,10vh,112px);
  will-change:transform;
  transform:translate3d(0,0,0);
}
.tdate{
  flex:0 0 clamp(260px,29vw,390px);
  min-height:clamp(250px,38vh,380px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:20px;
  padding:clamp(20px,2.4vw,30px);
  border:1px solid rgba(255,255,255,.09);
  border-radius:4px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    radial-gradient(120% 90% at 15% 0%, rgba(226,104,60,.16), rgba(226,104,60,0) 58%);
  transition:background .35s ease, border-color .35s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.tdate:hover{
  border-color:rgba(226,104,60,.55);
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.024)),
    radial-gradient(120% 90% at 15% 0%, rgba(226,104,60,.24), rgba(226,104,60,0) 58%);
  transform:translateY(-6px);
}
.tdate__num{
  color:rgba(255,255,255,.33);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.tdate .d{
  display:block;
  margin-top:auto;
  font-family:'Playfair Display',serif;
  font-size:clamp(34px,4.6vw,66px);
  line-height:.92;
}
.tdate .city{font-size:clamp(17px,1.5vw,22px);}
.tdate .venue{
  min-height:1.4em;
  color:var(--smoke);
  font-size:14px;
  line-height:1.5;
}
.tdate.tba{opacity:.45;}
.tdate.tba .venue{font-style:italic;}
.tour__progress{
  position:absolute;
  left:clamp(20px,5vw,60px);
  right:clamp(20px,5vw,60px);
  bottom:clamp(28px,5vh,48px);
  height:1px;
  background:rgba(255,255,255,.14);
}
.tour__progress span{
  display:block;
  width:calc(var(--h-progress, 0) * 100%);
  height:100%;
  background:var(--ember);
  transform-origin:left center;
}
.btn{position:relative; overflow:hidden; z-index:0; display:inline-block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; padding:12px 22px; border:1px solid rgba(255,255,255,.25); border-radius:40px; transition:color .35s, border-color .35s; white-space:nowrap;}
.btn::before{content:""; position:absolute; inset:0; background:var(--ember); transform:scaleY(0); transform-origin:bottom; transition:transform .45s cubic-bezier(.7,0,.2,1); z-index:-1;}
.btn:hover{border-color:var(--ember); color:var(--ink);}
.btn:hover::before{transform:scaleY(1);}
@media(max-width:760px), (prefers-reduced-motion:reduce){
  .tour{
    height:auto;
    padding:clamp(80px,14vh,130px) 0;
  }
  .tour__pin{
    position:relative;
    height:auto;
    overflow:visible;
  }
  .tour__head{
    padding:0 clamp(20px,5vw,60px) 26px;
    display:block;
  }
  .tour__hint{display:none;}
  .tour__track{
    overflow-x:auto;
    padding:0 clamp(20px,5vw,60px) 22px;
    scroll-snap-type:x mandatory;
    transform:none !important;
    -webkit-overflow-scrolling:touch;
  }
  .tour__track::-webkit-scrollbar{display:none;}
  .tdate{
    flex-basis:min(82vw,330px);
    min-height:240px;
    scroll-snap-align:start;
  }
  .tour__progress{display:none;}
}

/* ---------- gallery ---------- */
.gal{columns:3; column-gap:16px;}
@media(max-width:900px){ .gal{columns:2;} }
@media(max-width:560px){ .gal{columns:1;} }
.gal .cell{break-inside:avoid; margin-bottom:16px; border-radius:4px; overflow:hidden; position:relative;
  background:linear-gradient(135deg,#231914,#120d0c);}
.gal .cell:nth-child(2n){background:linear-gradient(135deg,#1f1a24,#120d0c);}
.gal .cell:nth-child(3n){background:linear-gradient(135deg,#1a221f,#120d0c);}
.gal .cell .ph{display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .9s cubic-bezier(.16,1,.3,1);}
.gal .cell:nth-child(3n+1) .ph{aspect-ratio:3/4;}
.gal .cell:nth-child(3n+2) .ph{aspect-ratio:1;}
.gal .cell:nth-child(3n) .ph{aspect-ratio:4/5;}
.gal .cell:hover .ph{transform:scale(1.05);}
.gal .cell .mask{position:absolute; inset:0; background:var(--ink); transform-origin:bottom; transition:transform 1s cubic-bezier(.7,0,.2,1);}
.gal .cell.in .mask{transform:scaleY(0);}

/* ---------- contact ---------- */
.contact{text-align:center;}
.contact h2{font-family:'Playfair Display',serif; font-weight:600; font-size:clamp(36px,7vw,90px); line-height:1; margin-bottom:30px;}
.contact .mail{font-size:clamp(18px,2.2vw,26px); color:var(--ember); position:relative; display:inline-block;}
.contact .mail::after{content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%; background:var(--ember); transform:scaleX(0); transform-origin:left; transition:transform .4s;}
.contact .mail:hover::after{transform:scaleX(1);}
.contact .socials{display:flex; gap:30px; justify-content:center; margin-top:48px;}
.contact .socials a{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--smoke);}
.contact .socials a:hover{color:var(--white);}
footer{padding:40px clamp(20px,5vw,60px); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--smoke); font-size:12px; letter-spacing:.08em; border-top:1px solid rgba(255,255,255,.07);}
footer a{transition:color .3s ease;}
footer a:hover{color:var(--white);}

/* ---------- landonorris-style hover: rolling characters ---------- */
.roll{display:inline-flex; white-space:nowrap; vertical-align:top;}
.roll .ch{position:relative; display:inline-block; overflow:hidden;}
.roll .ch > span{display:block; transition:transform .5s cubic-bezier(.7,0,.2,1);}
.roll .ch .ch-b{position:absolute; left:0; top:100%;}
.roll:hover .ch > span{transform:translateY(-100%);}
.roll .ch.space{width:.32em;}
/* magnetic elements move toward the cursor */
.magnetic{will-change:transform; transition:transform .4s cubic-bezier(.2,.7,.2,1);}