/* ============ TOKENS ============ */
@font-face{font-family:"Archivo Black";src:url("/fonts/ArchivoBlack-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("/fonts/SchibstedGrotesk-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("/fonts/SchibstedGrotesk-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("/fonts/SchibstedGrotesk-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}

:root{
  --black:#0B0B0B; --off:#171717; --warm:#F4F1E8; --white:#FFFFFF;
  --teal:#379B93; --aqua:#6CAFA8; --yellow:#F1CC1B;
  --dim:#B4AFA3;          /* secondary text on black: 9.3:1 */
  --muted:#5A564D;        /* secondary text on warm white: 6.6:1 */
  --rule-d:#34322D; --rule-l:#D6D0C1;
  --display:"Archivo Black","Arial Black","Helvetica Neue",Arial,sans-serif;
  --text:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --g:clamp(20px,5.2vw,80px);          /* page gutter */
  --col:calc(100vw - 2 * var(--g));     /* content width */
  --gap:clamp(16px,2vw,28px);
  --space-1:clamp(24px,3vw,40px); --space-2:clamp(48px,7vw,112px); --space-3:clamp(72px,11vw,176px);
  color-scheme:dark;
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--black);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--black);color:var(--warm);font:400 clamp(17px,1.15vw,20px)/1.5 var(--text);-webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--warm);color:var(--black);padding:10px 14px;z-index:20}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ TYPE ============ */
.disp{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.02em;line-height:.96;margin:0}
.nw{white-space:nowrap}
/* Fit-to-width display sizes. Divisors are each line's measured width in em (Archivo Black). */
.fit-name{font-size:min(calc(var(--col) / 5.14),380px);letter-spacing:-.035em;line-height:.94}
.fit-9{font-size:min(calc(var(--col) / 6.1),230px)}     /* lines up to ~6 em: BAILAMOS. */
.fit-8{font-size:min(calc(var(--col) / 7.8),150px)}     /* lines up to ~7.7 em */
.fit-10{font-size:min(calc(var(--col) / 10.2),112px)}   /* lines up to ~10 em */
.eyebrow{font:500 13px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0}
.lede{font-size:clamp(19px,1.6vw,26px);line-height:1.42;max-width:34ch;margin:0}
.it{font-style:italic;color:var(--dim)}
.genres{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,3vw,52px);line-height:1.08;color:var(--aqua);margin:0;max-width:22ch}
.genres i{font-style:normal;color:var(--rule-d);padding:0 .1em}
.genres b{font-weight:400;white-space:nowrap}

/* ============ LAYOUT ============ */
.wrap{padding-inline:var(--g)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gap)}
@media (min-width:760px){.grid{grid-template-columns:repeat(8,1fr)}}
@media (min-width:1080px){.grid{grid-template-columns:repeat(12,1fr)}}
.span-all{grid-column:1/-1}
.sec{padding-block:var(--space-2)}
.sec + .sec{padding-top:0}
.field-warm{background:var(--warm);color:var(--black);color-scheme:light}
.field-warm .eyebrow,.field-warm .it{color:var(--muted)}
.field-teal{background:var(--teal);color:var(--black)}
.field-teal .eyebrow{color:var(--black)}
.rule{border:0;border-top:3px solid currentColor;margin:0}

/* ============ HEADER / NAV ============ */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(var(--g)*.6) var(--g) 0;position:relative;z-index:5}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark svg{width:clamp(34px,3.2vw,50px);height:auto;color:currentColor}
.mark span{font-family:var(--display);text-transform:uppercase;font-size:clamp(15px,1.2vw,19px);letter-spacing:-.01em}
.navlist{display:flex;gap:clamp(18px,2.6vw,40px);list-style:none;margin:0;padding:0}
.navlist a{font:500 14px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:12px 0;display:inline-block;border-bottom:2px solid transparent}
.navlist a:hover,.navlist a[aria-current="page"]{border-bottom-color:currentColor}
.navlist a.book{color:var(--yellow)}
.menu{display:none}
@media (max-width:759px){
  .navlist{display:none}
  .menu{display:block;position:relative}
  .menu summary{list-style:none;cursor:pointer;font:500 14px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;padding:14px 0 14px 14px}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] .navlist{display:grid;gap:0;position:absolute;right:0;top:100%;background:var(--warm);color:var(--black);min-width:220px;padding:8px 20px}
  .menu[open] .navlist a{font-size:16px;padding:14px 0;display:block}
  .menu[open] .navlist a.book{color:var(--black)}
}

/* ============ HERO ============ */
.hero{padding:clamp(40px,7vw,112px) var(--g) var(--space-1)}
.hero .genres{margin-top:clamp(20px,2.6vw,40px)}

/* ============ VIDEO FEATURE ============ */
.film{position:relative;background:var(--off)}
.film .frame{position:relative;overflow:hidden;background:var(--off)}
.film video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--off)}
@media (max-width:759px){.film video{aspect-ratio:4/5}.film video[data-full="on"]{aspect-ratio:16/9}}
/* Hero variant: the name sits on the performance */
.film-hero video{max-height:calc(100svh - 72px)}
.film-hero .frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,11,11,.86) 0%,rgba(11,11,11,.62) 26%,rgba(11,11,11,0) 58%)}
.film-hero .over{position:absolute;z-index:1;left:var(--g);right:var(--g);bottom:clamp(20px,3.4vw,56px);--f:.66}
@media (max-width:759px){.film-hero .over{--f:1}}
.film-hero .over h1,.film-hero .over .disp{color:var(--warm)}
.film-hero .frame:has(video[data-full="on"])::after,.film-hero .frame:has(video[data-full="on"]) .over{display:none}
.film .bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:18px var(--g)}
.film .bar p{margin:0;font:italic 400 15px/1.4 var(--text);color:var(--dim)}
.btn{display:inline-flex;align-items:center;gap:.6em;font:500 14px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  background:none;color:inherit;border:0;border-bottom:2px solid currentColor;padding:12px 0;cursor:pointer;min-height:44px}
.btn .arr{color:var(--yellow)}
.field-warm .btn .arr,.field-teal .btn .arr{color:inherit}

/* ============ STATEMENT ============ */
.statement{display:grid;gap:18px}
.statement .it{font-size:clamp(19px,1.8vw,30px);margin:0}

/* ============ SHOWS ============ */
.shows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-d)}
.show{display:grid;grid-template-columns:1fr auto;gap:6px 20px;padding:22px 0;border-bottom:1px solid var(--rule-d);align-items:baseline}
.show .d{font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,2.6vw,40px);line-height:1}
.show .v{grid-column:1/2;font-size:clamp(17px,1.3vw,20px)}
.show .v span{color:var(--dim)}
.show .act{grid-column:2/3;grid-row:1/3;align-self:center}
.show .tag{font:500 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.empty{display:grid;gap:18px;padding:28px 0;border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d)}
.empty p{margin:0;max-width:44ch}

/* ============ STORY ============ */
.story{row-gap:var(--space-1)}
.story figure{margin:0;grid-column:1/-1}
.story figure img{width:100%;height:auto}
.story .txt{grid-column:1/-1;display:grid;gap:22px;align-content:start;--f:1}
@media (min-width:1080px){.story figure{grid-column:1/8;margin-left:calc(var(--g) * -1)}.story .txt{grid-column:9/13;padding-top:var(--space-1);--f:.3}}
figcaption{font:italic 400 14px/1.4 var(--text);color:var(--dim);padding:10px 0 0}

/* ============ BOOKING ============ */
.book{display:grid;gap:28px;padding-block:var(--space-2) var(--space-3)}
.cta{display:inline-block;text-decoration:none;padding:6px 0}
.cta .arr{display:inline-block;color:var(--yellow);transition:transform .2s ease}
.field-teal .cta .arr,.field-warm .cta .arr{color:inherit}
.cta:hover .arr{transform:translateX(.12em)}
.for{margin:0;font:500 clamp(13px,1vw,15px)/1.6 var(--text);letter-spacing:.14em;text-transform:uppercase}
.contact{margin:0;display:grid;gap:18px}
.contact div{display:grid;gap:2px}
.contact dt{font:500 13px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.contact dd{margin:0;font-size:clamp(19px,1.6vw,24px)}
.contact a{text-decoration:none;border-bottom:1.5px solid currentColor;padding:6px 0;display:inline-block}
@media (min-width:760px){.contact{grid-template-columns:repeat(3,max-content);column-gap:clamp(32px,5vw,96px)}}

/* ============ LISTS ============ */
.venues{list-style:none;margin:0;padding:0;columns:1;column-gap:var(--gap)}
@media (min-width:760px){.venues{columns:2}}
@media (min-width:1080px){.venues{columns:3}}
.venues li{break-inside:avoid;padding:12px 0;border-top:1px solid var(--rule-l);display:flex;justify-content:space-between;gap:12px}
.venues li span{color:var(--muted)}
.moments{list-style:none;margin:0;padding:0;display:grid;gap:0}
.moments li{display:grid;gap:6px;padding:22px 0;border-top:1px solid var(--rule-d)}
@media (min-width:760px){.moments{grid-template-columns:repeat(2,1fr);column-gap:var(--gap)}}
@media (min-width:1080px){.moments{grid-template-columns:repeat(4,1fr)}}
.moments b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(20px,1.8vw,28px);line-height:1}
.moments span{color:var(--dim)}
.prose{display:grid;gap:1.1em;max-width:62ch}
.prose p{margin:0}

/* ============ FOOTER ============ */
.foot{padding-block:var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom,0px));display:grid;gap:var(--space-1)}
.foot .end{display:flex;justify-content:space-between;align-items:end;gap:20px;--f:.72}
.foot .end svg{width:clamp(48px,8vw,120px);height:auto;flex:none}
.foot .links{display:flex;flex-wrap:wrap;gap:10px 32px;list-style:none;margin:0;padding:0}
.foot .links a{font:500 13px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:12px 0;display:inline-block}
.foot small{font:500 12px/1.4 var(--text);letter-spacing:.12em;text-transform:uppercase;opacity:.75}

/* ============ EL GRUPO (asymmetric portraits) ============ */
.bandgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-1) var(--gap);align-items:start}
.bandgrid .bandtitle{grid-column:1/-1}
.bandgrid .m1{grid-column:1/-1}
.bandgrid figure{margin:0}
.bandgrid .m2{margin-top:18%}
.bandgrid .m4,.bandgrid .m6{margin-top:18%}
@media (min-width:1080px){
  .bandgrid{grid-template-columns:repeat(12,1fr);row-gap:0}
  .bandgrid .bandtitle{grid-column:1/7;grid-row:1;align-self:end;padding-bottom:var(--space-1);--f:.5}
  .bandgrid .m1{grid-column:1/6;grid-row:2/4}
  .bandgrid .m2{grid-column:7/10;grid-row:1/3;margin-top:0}
  .bandgrid .m3{grid-column:10/13;grid-row:2/4;margin-top:30%}
  .bandgrid .m4{grid-column:6/9;grid-row:3/5;margin-top:6%}
  .bandgrid .m5{grid-column:2/5;grid-row:4/6;margin-top:14%}
  .bandgrid .m6{grid-column:10/13;grid-row:4/6;margin-top:20%}
  .bandgrid .m7{grid-column:6/9;grid-row:5/7;margin-top:28%}
}
.bandgrid figcaption,.strip figcaption,.aboutgrid figcaption{font:500 12px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--dim);padding-top:10px}

/* ============ ABOUT ============ */
.aboutgrid{row-gap:var(--space-1)}
.aboutgrid .bio{grid-column:1/-1;display:grid;gap:28px;align-content:start}
.aboutgrid .aside{grid-column:1/-1;margin:0}
@media (min-width:1080px){.aboutgrid .bio{grid-column:1/8}.aboutgrid .aside{grid-column:9/13;margin-top:var(--space-2)}}
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-1) var(--gap)}
.strip figure{margin:0}
@media (min-width:760px){.strip{grid-template-columns:repeat(4,1fr)}.strip figure:nth-child(even){margin-top:12%}}