/* Dami Alvarez — official site */
@font-face{font-family:"Forum";src:url(fonts/forum-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url(fonts/montserrat-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Lora";src:url(fonts/lora-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Lora";src:url(fonts/lora-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lora";src:url(fonts/lora-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --ink:#1a0f1f;
  --cream:#fffcef;
  --violet:#6b3d8a;
  --violet-btn:#9c6ba8;
  --lavender:#cfb6dc;
  --glass:rgba(232,214,240,.62);
  --white:#fff;
  --f-display:"Forum",Georgia,serif;
  --f-nav:"Montserrat",system-ui,sans-serif;
  --f-body:"Lora",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--white);background:#120a17 url(../img/bg.webp) center top/cover fixed;line-height:1.6;-webkit-font-smoothing:antialiased}
@media (max-width:820px){body{background-image:url(../img/bg-mobile.webp);background-attachment:scroll}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}

/* ---------- header ---------- */
.site-header{position:relative;z-index:20;padding:24px 16px 8px;text-align:center}
.logo img{width:clamp(200px,24vw,330px);margin:0 auto}
.nav{display:flex;justify-content:center;align-items:center;gap:clamp(20px,7vw,120px);margin-top:28px;font-family:var(--f-nav);font-weight:800;font-size:13px;letter-spacing:.22em;text-transform:uppercase}
.nav a{text-decoration:none;opacity:1;transition:opacity .2s}
.nav a:hover,.nav a[aria-current=page]{opacity:.55}
.follow{position:relative}
.follow button{all:unset;cursor:pointer;font:inherit;letter-spacing:inherit}
.follow ul{list-style:none;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);min-width:190px;padding:10px 0;background:rgba(20,10,26,.94);border:1px solid rgba(255,255,255,.12);display:none;text-align:left}
.follow.open ul{display:block}
.follow li a{display:flex;align-items:center;gap:12px;padding:9px 20px;letter-spacing:.12em;font-size:12px}
.follow li a:hover{background:rgba(255,255,255,.08);opacity:1}
.follow svg{width:16px;height:16px;fill:currentColor}
.menu-btn{display:none}
@media (max-width:820px){
  .menu-btn{display:block;position:absolute;right:16px;top:22px;background:none;border:0;color:#fff;width:40px;height:40px;cursor:pointer}
  .menu-btn span,.menu-btn span::before,.menu-btn span::after{content:"";display:block;width:26px;height:2px;background:#fff;margin:auto;position:relative}
  .menu-btn span::before{position:absolute;top:-8px}.menu-btn span::after{position:absolute;top:8px}
  .nav{display:none;flex-direction:column;gap:22px;padding:24px 0 12px}
  .nav.open{display:flex}
  .follow ul{position:static;transform:none;margin-top:12px;background:none;border:0;text-align:center}
  .follow li a{justify-content:center}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--f-display);font-size:22px;line-height:1;text-transform:uppercase;text-decoration:none;padding:10px 34px;background:var(--cream);color:var(--violet);border:0;cursor:pointer;transition:transform .15s,background .2s}
.btn:hover{transform:translateY(-2px);background:#fff}
.btn-ghost{background:rgba(20,8,26,.35);color:var(--cream);box-shadow:inset 0 0 0 1px var(--cream)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-violet{background:var(--violet-btn);color:#fff;font-size:24px;padding:14px 90px}
.btn-violet:hover{background:#8a5797}
.btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column}
.hero-body{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(60px,12vh,180px);padding:40px 16px 48px}
.hero-title{width:min(820px,88vw)}
.page-hero{padding-bottom:56px}
.page-hero .hero-title{width:min(560px,80vw);margin:56px auto 0}

/* ---------- sections ---------- */
.band{height:clamp(56px,7vw,100px)}
.note{background:rgba(10,6,12,.72);padding:clamp(32px,4vw,40px) 16px}
.note img{width:min(430px,82vw);margin:0 auto}
.note .sig{width:min(190px,40vw);margin:18px auto 0}

.photo-cta{position:relative;min-height:clamp(380px,44vw,420px);display:grid;place-items:center;text-align:center;padding:60px 16px;background:url(../img/road-colour.webp) center 30%/cover}
.photo-cta::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.photo-cta>*{position:relative}
h2,.display{font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:1}
.photo-cta h2{font-size:clamp(40px,5vw,56px);margin-bottom:14px}
.photo-cta p{max-width:520px;margin:0 auto 26px;font-size:17px}

.songs{background:var(--lavender);padding:clamp(48px,6vw,80px) 0}
.songs h2{text-align:center;color:var(--violet);font-size:clamp(38px,4vw,52px);margin-bottom:8px}
.songs .sub{text-align:center;color:var(--ink);margin-bottom:32px}
.carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px max(16px,calc(50% - 160px));scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.carousel a{flex:0 0 clamp(220px,24vw,320px);scroll-snap-align:center;box-shadow:0 14px 30px rgba(40,10,50,.28);transition:transform .25s}
.carousel a:hover{transform:translateY(-6px)}
.car-nav{display:flex;justify-content:center;gap:12px;margin-top:24px}
.car-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--violet);background:transparent;color:var(--violet);font-size:20px;cursor:pointer}
.car-nav button:hover{background:var(--violet);color:#fff}

.photo-band{height:clamp(300px,36vw,680px);background:url(../img/road-bw.webp) center 40%/cover}

/* ---------- bio ---------- */
.bio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.85fr);gap:14px}
.bio-photo{background:url(../img/road-bw.webp) 72% center/cover;min-height:440px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.bio-text{background:var(--glass);color:#2b2230;padding:clamp(28px,4vw,56px) clamp(24px,5vw,100px) clamp(28px,4vw,56px) clamp(24px,8vw,300px)}
.bio-text h1{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(44px,5vw,58px);line-height:1;color:#3d2b45}
.bio-text h1 span{display:block;font-size:.55em;margin-top:6px}
.bio-text p{margin-top:18px;font-size:15.5px;text-align:justify}
.bio-text .btn-violet{margin-top:30px}
@media (max-width:820px){.bio{grid-template-columns:1fr}.bio-photo{min-height:300px}.bio-text{padding:32px 22px}.btn-violet{padding:14px 40px}}

/* ---------- videos ---------- */
.videos{background:var(--glass);padding:48px 0}
.videos h2{text-align:center;color:var(--ink);font-size:clamp(32px,3.5vw,44px);margin-bottom:28px}
.vgrid{display:flex;gap:30px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 8px;scrollbar-width:thin}
.vcard{flex:0 0 min(640px,86vw);scroll-snap-align:start;color:var(--ink)}
.vcard.sm{flex-basis:min(320px,80vw)}
.yt{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer;overflow:hidden}
.yt img{width:100%;height:100%;object-fit:cover}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.25)}
.yt .play::after{content:"";position:absolute;left:25px;top:19px;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.yt .dur{position:absolute;right:10px;bottom:8px;font:600 12px/1 var(--f-nav);color:#fff;text-shadow:0 1px 3px #000}
.vcard h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(20px,2vw,26px);line-height:1.1;text-align:center;margin-top:16px}
.vcard.sm h3{font-family:var(--f-body);text-transform:none;font-size:14.5px;text-align:left}

/* ---------- store ---------- */
.product{background:var(--cream);color:var(--ink);padding:clamp(40px,6vw,80px) 0}
.product .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.product h1{font-family:var(--f-display);font-weight:400;font-size:clamp(44px,5vw,64px);color:var(--violet);line-height:1}
.price{font-size:26px;margin:10px 0 18px}
.product p{margin-bottom:14px}
.product .small{font-size:14px;opacity:.75}
.product .btn{background:var(--violet);color:#fff}
.product .btn:hover{background:#5a2f78}
.product .btn-ghost{background:transparent;color:var(--violet);box-shadow:inset 0 0 0 1px var(--violet)}
.product .btn-row{justify-content:flex-start;margin-top:24px}
@media (max-width:820px){.product .wrap{grid-template-columns:1fr}}

/* ---------- legal ---------- */
.legal{background:var(--cream);color:var(--ink);padding:56px 0}
.legal .wrap{max-width:820px}
.legal h1{font-family:var(--f-display);font-weight:400;font-size:44px;color:var(--violet);margin-bottom:24px}
.legal h2{font-size:26px;color:var(--violet);margin:32px 0 10px}
.legal p,.legal li{margin-bottom:10px;font-size:15.5px}
.legal ul{padding-left:22px}

/* ---------- footer ---------- */
.site-footer{background:#000;text-align:center;padding:40px 16px 32px}
.social{display:flex;justify-content:center;gap:22px;list-style:none}
.social svg{width:22px;height:22px;fill:#fff;transition:opacity .2s}
.social a:hover svg{opacity:.6}
.site-footer h2{font-size:34px;margin:18px 0 10px}
.site-footer a.mail,.site-footer .links a{font-size:15.5px}
.site-footer .links{margin-top:4px;display:flex;gap:18px;justify-content:center}

/* ---------- cookie banner ---------- */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:99;max-width:560px;margin-inline:auto;background:#1b1020;border:1px solid rgba(255,255,255,.15);padding:18px 20px;font-size:14px;display:none;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.cookies.show{display:block}
.cookies .btn-row{justify-content:flex-end;margin-top:12px}
.cookies .btn{font-size:17px;padding:8px 20px}

:focus-visible{outline:2px solid var(--lavender);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.carousel img{width:100%}