/* Tania y Abraham Violins. The whole site is one violin: its four strings (G, D, A, E) are the menu
   (The story, Music, Live, Press). Touch one and it sounds, then takes you there.
   Their stage: big photographs of the two of them, gold light on black, their names large.
   Colours come from the duo's own emblem: gold on black, sunflower honey for Oshún, red for Elegguá.
   Still page first; decorative motion lives under html.viva and is switched off in one place. */
:root{
  --bg:#0a0807; --bg2:#120e0b; --ink:#f6ecd9; --dim:#b4a68f; --gold:#d6a84f; --honey:#f2b632; --red:#d3262d; --line:rgba(214,168,79,.28);
  --caps:"Cinzel",Georgia,serif; --script:"Allura",cursive; --voice:"Cormorant Garamond",Georgia,serif; --sans:"Geist",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --pad:clamp(22px,5.5vw,84px); --nav:78px; --w:1240px;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 10px)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
ul,ol{padding:0;list-style:none}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
.dim{color:var(--dim)}
.script{font-family:var(--script);color:var(--gold);line-height:1;font-weight:400}
.script sup{font-family:var(--sans);font-size:.3em;vertical-align:top;position:relative;top:.5em;margin-left:.15em}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
:focus-visible{outline:2px solid var(--honey);outline-offset:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--gold);color:var(--bg);padding:8px 14px}
.skip:focus{left:8px}

/* ---- top: the name, the four strings, contact ---- */
.top{position:fixed;inset:0 0 auto 0;z-index:20;padding:14px var(--pad) 8px;background:linear-gradient(180deg,rgba(10,8,7,.9) 0,rgba(10,8,7,.55) 70%,rgba(10,8,7,0) 100%);transition:background .3s}
.top.solid{background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(18px,3vw,48px);max-width:1400px;margin:0 auto}
.name{text-decoration:none;display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.name b{font-family:var(--caps);font-weight:500;font-size:15.5px;letter-spacing:.14em;text-transform:uppercase}
.name span{font-family:var(--script);font-size:26px;color:var(--gold);line-height:.6}
.side{display:flex;align-items:center;gap:12px}
.lang{background:rgba(10,8,7,.55);border:1px solid var(--line);border-radius:99px;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.16em;cursor:pointer;padding:7px 12px}
.lang b{color:var(--ink);font-weight:500}
.book{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;background:var(--gold);color:var(--bg);border-radius:99px;padding:9px 16px;transition:background .25s}
.book:hover{background:var(--honey)}
.strings{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2.4vw,34px);max-width:560px;justify-self:center;width:100%}
.str{display:block;text-decoration:none;padding:4px 0 6px;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:color .25s}
.str i{display:block;height:var(--t);margin-top:8px;background:var(--gold);opacity:.55;transform-origin:50% 50%;transition:opacity .25s,background .25s}
.str:hover,.str.on{color:var(--ink)}
.str.on i,.str:hover i{opacity:1;background:var(--honey)}
.str.ring i{animation:ring .9s cubic-bezier(.2,.7,.2,1)}
@keyframes ring{0%{transform:scaleY(1)}10%{transform:scaleY(5)}22%{transform:scaleY(-3.4)}36%{transform:scaleY(2.6)}52%{transform:scaleY(-1.6)}70%{transform:scaleY(.9)}100%{transform:scaleY(1)}}

/* ---- buttons and small links ---- */
.btn{display:inline-block;font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:15px 26px;border:1px solid var(--gold);border-radius:99px;transition:background .25s,color .25s,border-color .25s;background:none;cursor:pointer}
.btn.p{background:var(--gold);color:var(--bg)}
.btn:hover{background:var(--honey);color:var(--bg);border-color:var(--honey)}
.cta{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:clamp(26px,4.5vh,44px)}
.more{display:inline-block;margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:5px;transition:color .2s,border-color .2s}
.more:hover{color:var(--honey);border-color:var(--honey)}
.ul{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.ul:hover{color:var(--honey);border-color:var(--honey)}

/* ---- the stage: a photograph of the two of them, lit from one side ---- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav) + 40px) var(--pad) 70px;overflow:hidden}
.hero .ph{position:absolute;top:0;right:0;width:56vw;height:100%}
.hero .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(42% 40% at 16% 54%,rgba(214,168,79,.14),rgba(214,168,79,0) 100%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--bg) 0,var(--bg) 42%,rgba(10,8,7,0) 62%),linear-gradient(0deg,var(--bg) 0,rgba(10,8,7,0) 18%),linear-gradient(180deg,rgba(10,8,7,.8) 0,rgba(10,8,7,0) 20%)}
.hero .in{position:relative;z-index:2;max-width:min(44vw,640px)}
.hero .script{font-size:clamp(40px,4.4vw,64px)}
.hero h1{font-family:var(--caps);font-weight:400;font-size:clamp(34px,4.6vw,72px);line-height:1.04;letter-spacing:.03em;text-transform:uppercase;margin:12px 0 18px}
.hero .lede{font-family:var(--voice);font-style:italic;font-size:clamp(22px,2.2vw,31px);line-height:1.22;color:var(--dim);max-width:24ch}
.hero.page{min-height:86svh}
.hero.page h1{font-size:clamp(40px,5.4vw,84px)}

/* ---- sections ---- */
.sec{padding-top:clamp(76px,10vw,150px)}
.head .script{font-size:clamp(44px,5vw,70px)}
.head h2{font-family:var(--voice);font-style:italic;font-weight:400;font-size:clamp(30px,4.2vw,58px);line-height:1.1;margin-top:10px;text-wrap:balance;max-width:22ch}
h2 em,h3 em,.big em{color:var(--honey);font-style:italic}
.head p{color:var(--dim);max-width:54ch;margin-top:20px}
.head.c{text-align:center}.head.c h2,.head.c p{margin-left:auto;margin-right:auto}

/* three plain facts in a row */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(36px,5vw,64px)}
.facts div{border-top:1px solid var(--gold);padding-top:16px}
.facts b{display:block;font-family:var(--caps);font-weight:400;font-size:clamp(22px,2.4vw,34px);letter-spacing:.03em;line-height:1.15}
.facts span{color:var(--dim);font-size:15px}

/* a full-width photograph with a line over it */
.wide{position:relative;margin-top:clamp(48px,7vw,96px);height:clamp(420px,72vw,860px);overflow:hidden}
.wide img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.wide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,8,7,.92) 0,rgba(10,8,7,0) 52%),linear-gradient(180deg,var(--bg) 0,rgba(10,8,7,0) 16%)}
.wide figcaption{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(26px,5vw,64px);z-index:2;max-width:var(--w);margin:0 auto}
.wide figcaption p{font-family:var(--voice);font-style:italic;font-size:clamp(28px,4.4vw,62px);line-height:1.1;max-width:20ch;text-wrap:balance}
.wide figcaption .mono{color:var(--gold);display:block;margin-top:14px}

/* chapters of the story: text beside a framed print, alternating */
.ch{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,100px);align-items:center;margin-top:clamp(70px,9vw,130px)}
.ch.flip>figure{order:-1}
.ch .n{font-family:var(--caps);color:var(--gold);font-size:14px;letter-spacing:.3em}
.ch h3{font-family:var(--caps);font-weight:400;font-size:clamp(28px,3.4vw,48px);line-height:1.08;letter-spacing:.02em;text-transform:uppercase;margin:10px 0 18px}
.ch p{color:var(--dim);max-width:52ch}
.ch p+p{margin-top:14px}
.big{font-family:var(--voice);font-style:italic;font-size:clamp(23px,2.2vw,30px);line-height:1.3;color:var(--ink)!important}
.print{position:relative}
.print img{width:100%;aspect-ratio:4/5;object-fit:cover}
.print::before{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--line);pointer-events:none}
.ch.flip .print::before{inset:14px 14px -14px -14px}
.print figcaption{margin-top:24px;color:var(--dim)}
.orishas{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-family:var(--caps);font-size:clamp(17px,1.6vw,21px);letter-spacing:.06em}
.orishas span:nth-child(1){color:var(--honey)}.orishas span:nth-child(3){color:var(--red)}
.src{display:block;margin-top:14px;font-size:13px;color:var(--dim)}
.src a{color:var(--dim)}

/* a timeline drawn as a single string */
.tl{position:relative;margin-top:clamp(36px,5vw,60px);padding-left:34px;display:grid;gap:clamp(22px,2.6vw,34px);max-width:860px}
.tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1.5px;background:linear-gradient(180deg,var(--gold),rgba(214,168,79,.15))}
.tl li{position:relative;display:grid;grid-template-columns:11.5em 1fr;gap:6px 26px;align-items:baseline}
.tl li::before{content:"";position:absolute;left:-34px;top:.55em;width:13px;height:13px;border-radius:50%;background:var(--bg);border:1.5px solid var(--gold)}
.tl b{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.tl span{font-size:17px}
.tl a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.tl a:hover{color:var(--honey)}

/* music */
.songs{display:grid;gap:clamp(14px,2vw,26px)}
.song{display:flex;align-items:center;gap:clamp(16px,2vw,26px);background:none;border:0;padding:0;cursor:pointer;text-align:left;--c:var(--honey);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.song.e{--c:var(--red)}.song.g{--c:var(--gold)}
.song .pl{flex:none;width:clamp(54px,5.2vw,74px);aspect-ratio:1;border-radius:50%;border:1.5px solid var(--c);display:grid;place-items:center;transition:background .25s}
.song .pl::before{content:"";margin-left:5px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent var(--c);transition:border-color .25s}
.song span{font-family:var(--caps);font-weight:400;font-size:clamp(34px,4.6vw,70px);line-height:1;letter-spacing:.02em;text-transform:uppercase;transition:color .25s}
.song:hover{transform:translateX(8px)}
.song:hover .pl{background:var(--c)}
.song:hover .pl::before{border-left-color:var(--bg)}
.song:hover span{color:var(--c)}
.mus{display:grid;grid-template-columns:1fr auto;gap:clamp(30px,6vw,96px);align-items:center;margin-top:clamp(34px,5vw,60px)}
.mus .pic{width:clamp(240px,28vw,380px)}
.mus .pic img{aspect-ratio:900/1154;object-fit:cover}
.plat{display:flex;flex-wrap:wrap;gap:10px clamp(20px,3vw,40px);margin-top:28px}
.plat a{font-family:var(--caps);font-size:clamp(19px,2.1vw,28px);letter-spacing:.04em;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .2s,border-color .2s}
.plat a:hover{color:var(--honey);border-color:var(--honey)}
.disc{margin-top:clamp(36px,5vw,60px);border-top:1px solid var(--line)}
.disc li{display:grid;grid-template-columns:9em 1fr auto;gap:8px 28px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.disc .mono{color:var(--gold)}
.disc b{font-family:var(--caps);font-weight:400;font-size:clamp(22px,2.4vw,32px);letter-spacing:.03em;line-height:1.15}
.disc i{display:block;font-style:normal;color:var(--dim);font-size:15px;margin-top:4px}
.disc a{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:4px;white-space:nowrap}
.disc a:hover{color:var(--honey)}
.fyc a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:4px}
.fyc a:hover{color:var(--honey);border-color:var(--honey)}

/* live */
.strip{margin-top:clamp(36px,5vw,64px);overflow-x:auto;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.track{display:flex;gap:10px;width:max-content;padding:0 10px}
.track img{height:clamp(300px,42vw,520px);width:auto}
.where{margin-top:16px;color:var(--dim)}
.show{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,70px);align-items:start;margin-top:clamp(40px,6vw,72px);padding-top:28px;border-top:1px solid var(--gold)}
.show .d{font-family:var(--caps);text-align:center;line-height:1}
.show .d b{display:block;font-weight:400;font-size:clamp(54px,6vw,86px)}
.show .d span{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--gold)}
.show h3{font-family:var(--caps);font-weight:400;font-size:clamp(26px,3vw,42px);letter-spacing:.03em;line-height:1.1}
.show h3 small{display:block;font-family:var(--voice);font-style:italic;font-size:.62em;color:var(--honey);letter-spacing:0;margin-top:6px}
.show p{color:var(--dim);margin-top:12px;max-width:56ch}
.next{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(34px,5vw,56px);padding:28px 0 0;border-top:1px solid var(--line)}
.next p{max-width:46ch;color:var(--dim)}
.next ul{width:100%;display:grid;gap:12px}
.next li{display:flex;gap:10px 26px;flex-wrap:wrap;align-items:baseline;font-size:17px}
.next li b{font-family:var(--caps);font-weight:400;letter-spacing:.05em;min-width:10em}
.next li a{margin-left:auto}

/* press */
.honors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);margin-top:clamp(34px,5vw,60px)}
.honors div{border-top:1px solid var(--gold);padding-top:18px;display:grid;gap:8px;align-content:start}
.honors .mono{color:var(--gold)}
.honors b{font-family:var(--caps);font-weight:400;font-size:clamp(21px,2.3vw,31px);letter-spacing:.04em;line-height:1.2}
.honors i{font-family:var(--voice);font-size:clamp(19px,1.8vw,24px);color:var(--dim)}
.seen{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px clamp(18px,3vw,44px);margin-top:clamp(40px,6vw,72px)}
.seen .mono{color:var(--dim);flex-basis:100%;margin-bottom:6px}
.seen a,.seen i{font-family:var(--caps);font-style:normal;font-size:clamp(19px,2.2vw,30px);letter-spacing:.06em;text-decoration:none;color:var(--ink);transition:color .2s}
.seen a:hover{color:var(--honey)}
.clips{margin-top:clamp(36px,5vw,60px);border-top:1px solid var(--line)}
.clips li{display:grid;grid-template-columns:11em 1fr;gap:6px 30px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.clips .mono{color:var(--gold)}
.clips b{display:block;font-family:var(--caps);font-weight:400;font-size:clamp(20px,2.1vw,28px);letter-spacing:.04em}
.clips a{text-decoration:none}
.clips a:hover b{color:var(--honey)}
.clips span{color:var(--dim);font-size:15.5px}

/* contact: their emblem and the ways to reach them */
.end{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,6vw,96px);align-items:center}
.end .emb{width:clamp(210px,24vw,320px);aspect-ratio:1;border-radius:50%}
.end .script{font-size:clamp(44px,5vw,70px)}
.end h2{font-family:var(--voice);font-style:italic;font-weight:400;font-size:clamp(26px,3vw,42px);line-height:1.15;margin:8px 0 16px;max-width:22ch}
.end p{color:var(--dim);max-width:46ch}
.follow{margin-top:26px;color:var(--dim);font-size:15.5px}
.follow .mono{margin-right:12px}

footer{margin-top:clamp(80px,10vw,140px);padding:26px var(--pad) 36px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;color:var(--dim);font-size:12.5px;line-height:1.55}
footer p{max-width:78ch}
footer a{color:var(--ink)}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
footer nav a{text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
footer nav a:hover{color:var(--honey)}
footer kuma-signature{color:var(--ink)}

/* the player */
.stage{position:fixed;inset:0;z-index:50;background:rgba(6,5,4,.97);display:grid;place-items:center;padding:20px}
.stage .box{width:min(1100px,100%,calc((100svh - 190px)*16/9))}
.stage .frame{aspect-ratio:16/9;background:#000;border:1px solid var(--line)}
.stage iframe{width:100%;height:100%;border:0;display:block}
.stage .meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;margin-top:18px}
.stage h3{font-family:var(--caps);font-weight:400;font-size:clamp(24px,3vw,38px);letter-spacing:.03em;text-transform:uppercase;color:var(--c,var(--honey))}
.stage .links{display:flex;gap:22px;flex-wrap:wrap}
.stage .links a{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:5px}
.stage .links a:hover{color:var(--honey)}
.stage .x{position:absolute;top:14px;right:16px;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;font-size:22px;line-height:1}

/* ---- tablets: the strings get their own row ---- */
@media (max-width:1060px){
  .bar{grid-template-columns:1fr auto}
  .strings{grid-column:1/-1;grid-row:2;justify-self:stretch;max-width:none}
}
/* ---- phones: the duo on top, one idea per section ---- */
@media (max-width:820px){
  :root{--nav:96px}
  body{font-size:16.5px}
  .top{padding:12px var(--pad) 6px}
  .bar{gap:8px 12px}
  .name b{font-size:12.5px;letter-spacing:.1em}.name span{font-size:21px}
  .book{display:none}
  .strings{gap:14px}
  .str{font-size:10.5px;letter-spacing:.11em}
  .hero{display:block;padding:0 0 26px;min-height:0}
  .hero .ph{position:relative;width:100%;height:70svh}
  .hero .ph img{object-position:50% 18%}
  .hero::before{background:radial-gradient(95% 24% at 30% 72%,rgba(214,168,79,.11),rgba(214,168,79,0) 100%)}
  .hero::after{background:linear-gradient(180deg,rgba(10,8,7,.9) 0,rgba(10,8,7,0) 22%),linear-gradient(0deg,var(--bg) 0,var(--bg) calc(100% - 70svh + 40px),rgba(10,8,7,0) calc(100% - 70svh + 230px))}
  .hero .in{max-width:none;padding:0 var(--pad);margin-top:-110px}
  .hero .lede{max-width:none}
  .hero.page{min-height:0}
  .hero.page .ph{height:58svh;margin-top:var(--nav)}
  .hero.page::after{background:linear-gradient(180deg,rgba(10,8,7,.9) 0,rgba(10,8,7,0) 22%),linear-gradient(0deg,var(--bg) 0,var(--bg) calc(100% - 58svh - var(--nav) + 40px),rgba(10,8,7,0) calc(100% - 58svh - var(--nav) + 230px))}
  .facts{grid-template-columns:1fr;gap:18px}
  .ch,.mus,.honors{grid-template-columns:1fr}
  .ch.flip>figure{order:0}
  .print{margin-right:14px}
  .ch.flip .print{margin:0 0 0 14px}
  .mus .pic{display:none}
  .tl li{grid-template-columns:1fr;gap:2px}
  .disc li{grid-template-columns:1fr auto}
  .disc li .mono{grid-column:1/-1}
  .clips li{grid-template-columns:1fr;gap:4px}
  .show{grid-template-columns:1fr;gap:14px}
  .show .d{text-align:left;display:flex;gap:12px;align-items:baseline}
  .end{grid-template-columns:1fr;justify-items:center;text-align:center}
  .end .cta{justify-content:center}
  .next li a{margin-left:0}
  footer{grid-template-columns:1fr}
}

/* ---- living layer ---- */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes drift{to{transform:translateX(-50%)}}
html.viva .hero .in>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
html.viva .hero .in>:nth-child(2){animation-delay:.18s}
html.viva .hero .in>:nth-child(3){animation-delay:.36s}
html.viva .hero .in>:nth-child(4){animation-delay:.54s}
html.viva.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
html.viva.js .rv.seen-in{opacity:1;transform:none}
html.viva .strip{overflow:hidden}
html.viva .track{padding:0;animation:drift 70s linear infinite}
html.viva .strip:hover .track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}html.viva *,.str.ring i{animation:none!important}html.viva.js .rv{opacity:1;transform:none;transition:none}html.viva .strip{overflow-x:auto}}

/* ======== the stage opens: curtain, film, the band ======== */

/* the curtain (home, first time in a visit). Only transform and opacity move. */
.curtain{display:none}
html.telon body{overflow:hidden}
html.telon .curtain{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;text-align:center}
.curtain .cl,.curtain .cr{position:absolute;top:0;bottom:0;width:50.5%;background:
  linear-gradient(180deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 68%,rgba(0,0,0,.65) 100%),
  repeating-linear-gradient(90deg,#2a0507 0,#5c0a0f 1.6%,#86131a 3%,#5c0a0f 4.4%,#2a0507 6%),#2a0507;
  transition:transform 1.6s cubic-bezier(.7,0,.25,1);will-change:transform}
.curtain .cl{left:0;box-shadow:inset -18px 0 30px rgba(0,0,0,.5)}
.curtain .cr{right:0;box-shadow:inset 18px 0 30px rgba(0,0,0,.5)}
.curtain .val{position:absolute;inset:0 0 auto 0;height:clamp(46px,8vh,84px);z-index:2;border-bottom:2px solid var(--gold);
  background:repeating-linear-gradient(90deg,#3d070b 0,#7a1117 2.5%,#3d070b 5%);box-shadow:0 10px 26px rgba(0,0,0,.55);transition:transform 1.2s cubic-bezier(.7,0,.25,1) .25s}
.curtain::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(38% 46% at 50% 54%,rgba(10,8,7,.82),rgba(10,8,7,0) 100%);transition:opacity .6s}
.curtain .door{position:relative;z-index:3;display:grid;justify-items:center;gap:14px;transition:opacity .5s,transform .6s}
.curtain .door img{width:clamp(120px,16vh,170px);height:auto;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 1px var(--gold),0 0 60px rgba(242,182,50,.25)}
.curtain .door .mono{color:var(--gold);margin-top:10px}
.curtain h2{font-family:var(--caps);font-weight:400;font-size:clamp(28px,4.4vw,54px);letter-spacing:.06em;text-transform:uppercase;line-height:1.05;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.curtain .btn{margin-top:14px;font-size:13px;padding:17px 30px}
.curtain .quiet{background:none;border:0;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;padding:8px;text-decoration:underline;text-underline-offset:5px}
.curtain .quiet:hover{color:var(--ink)}
.curtain.open{pointer-events:none}
.curtain.open .cl{transform:translateX(-102%)}
.curtain.open .cr{transform:translateX(102%)}
.curtain.open .val{transform:translateY(-110%)}
.curtain.open .door{opacity:0;transform:scale(.96)}
.curtain.open::after{opacity:0}

/* the film: their "Elegguá" video behind the first screen */
.ph video.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0;transition:opacity 1s}
.ph video.film.on{opacity:1}
.hero.film{align-items:flex-end;padding-bottom:clamp(60px,11vh,120px)}
.hero.film .ph{width:100%}
.hero.film .ph img{object-position:50% 40%}
.hero.film::after{background:linear-gradient(90deg,rgba(10,8,7,.9) 0,rgba(10,8,7,.55) 34%,rgba(10,8,7,0) 66%),linear-gradient(0deg,var(--bg) 0,rgba(10,8,7,.4) 26%,rgba(10,8,7,0) 52%),linear-gradient(180deg,rgba(10,8,7,.8) 0,rgba(10,8,7,0) 24%)}
.hero.film h1{text-shadow:0 2px 24px rgba(0,0,0,.5)}
.hero.film .lede{color:var(--ink);opacity:.86}

/* the band: a small player in the corner, on every page */
.band{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));z-index:30}
.band-btn{display:flex;align-items:center;gap:12px;background:rgba(10,8,7,.94);border:1px solid var(--line);border-radius:99px;padding:7px 20px 7px 7px;cursor:pointer;text-align:left;transition:border-color .25s}
.band-btn:hover{border-color:var(--gold)}
.band-btn .eq{flex:none;width:40px;height:40px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;gap:3px}
.band-btn .eq i{display:block;width:3px;height:18px;border-radius:2px;background:var(--bg);transform:scaleY(.3);transform-origin:50% 50%}
.band-btn[aria-pressed="false"] .eq i{display:none}
.band-btn[aria-pressed="false"] .eq::before{content:"";margin-left:4px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--bg)}
.band-t b{display:block;font-family:var(--caps);font-weight:400;font-size:14.5px;letter-spacing:.07em;line-height:1.2}
.band-t small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
html.telon .band,html.telon .book-fab{visibility:hidden}
@keyframes bob{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(.95)}}
@media (prefers-reduced-motion:reduce){html.playing .band-btn .eq i{transform:scaleY(.7)}}
.book-fab{display:none}
footer{padding-bottom:110px}

/* ======== booking ======== */
.formats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);margin-top:clamp(36px,5vw,64px)}
.fmt img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fmt .mono{display:block;color:var(--gold);margin-top:22px}
.fmt h3{font-family:var(--caps);font-weight:400;font-size:clamp(26px,2.8vw,40px);letter-spacing:.03em;line-height:1.1;margin:8px 0 10px}
.fmt p{color:var(--dim);max-width:46ch}
.fmt .btn{margin-top:22px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,48px);margin-top:clamp(36px,5vw,60px)}
.steps li{border-top:1px solid var(--gold);padding-top:18px}
.steps b{display:block;font-family:var(--caps);font-weight:400;font-size:clamp(40px,4vw,56px);color:var(--gold);line-height:1}
.steps span{display:block;margin-top:12px;color:var(--dim)}
.steps strong{display:block;font-weight:500;color:var(--ink);margin-bottom:4px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px;margin-top:clamp(34px,5vw,56px);max-width:940px}
.form label{display:grid;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.form label i{font-style:normal;text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:13px;opacity:.8}
.form .w{grid-column:1/-1}
.form input,.form select,.form textarea{font-family:var(--sans);font-size:17px;letter-spacing:0;text-transform:none;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0;width:100%;-webkit-appearance:none;appearance:none;transition:border-color .2s}
.form textarea{resize:vertical;min-height:84px}
.form select{cursor:pointer;padding-right:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23d6a84f' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 4px center}
.form select option{background:var(--bg);color:var(--ink)}
.form input[type=date]{color-scheme:dark;min-height:46px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--honey)}
.form input::placeholder,.form textarea::placeholder{color:rgba(180,166,143,.55)}
.form .check{display:flex;align-items:flex-start;gap:12px;font-family:var(--sans);font-size:15px;letter-spacing:0;text-transform:none;color:var(--dim);cursor:pointer}
.form .check input{flex:none;width:22px;height:22px;margin-top:1px;padding:0;-webkit-appearance:auto;appearance:auto;accent-color:var(--gold)}
.form .send{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.form .send .btn{font-size:13px}
.say{min-height:1.5em;font-size:15px;color:var(--dim)}
.say.bad{color:#ff8a7a}
.say a{color:var(--ink)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .done{grid-column:1/-1;border-top:1px solid var(--gold);padding-top:26px}
.form .done .script{font-size:clamp(44px,5vw,66px)}
.form .done p:last-child{margin-top:12px;font-family:var(--voice);font-style:italic;font-size:clamp(22px,2.2vw,30px);line-height:1.3;max-width:34ch}
.aside{margin-top:34px;color:var(--dim)}

@media (max-width:1060px){
  .hero.film .in{max-width:min(70vw,640px)}
}
@media (max-width:820px){
  .hero.film{display:block;padding:0 0 26px}
  .hero.film .ph{height:72svh}
  .hero.film::after{background:linear-gradient(180deg,rgba(10,8,7,.9) 0,rgba(10,8,7,0) 22%),linear-gradient(0deg,var(--bg) 0,var(--bg) calc(100% - 72svh + 40px),rgba(10,8,7,0) calc(100% - 72svh + 240px))}
  .hero.film .in{max-width:none}
  .curtain .btn{padding:16px 24px}
  .band-t small{display:none}
  .band-btn{padding-right:16px;gap:10px}
  .band-btn .eq{width:38px;height:38px}
  .band-t b{font-size:13px;max-width:9.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .book-fab{display:block;position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:30;background:var(--gold);color:var(--bg);font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-radius:99px;padding:16px 20px;box-shadow:0 6px 24px rgba(0,0,0,.45)}
  body[data-page="contratar"] .book-fab{display:none}
  .formats,.steps,.form{grid-template-columns:1fr}
}
.steps span span{margin-top:0}
/* phones: the floating "Book" button waits until the first screen has passed, so it never covers the hero's own buttons */
@media (max-width:820px){
  .book-fab{opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .35s,transform .35s}
  html.past .book-fab{opacity:1;transform:none;pointer-events:auto}
  .hero.film .ph{height:60svh}
  .hero.film::after{background:linear-gradient(180deg,rgba(10,8,7,.9) 0,rgba(10,8,7,0) 22%),linear-gradient(0deg,var(--bg) 0,var(--bg) calc(100% - 60svh + 40px),rgba(10,8,7,0) calc(100% - 60svh + 220px))}
  .hero .cta{gap:12px}
  .hero .btn{padding:14px 18px;font-size:12px;letter-spacing:.14em}
}
@media (max-width:820px) and (max-height:700px){
  .hero.film .ph{height:50svh}
  .hero.film::after{background:linear-gradient(180deg,rgba(10,8,7,.9) 0,rgba(10,8,7,0) 22%),linear-gradient(0deg,var(--bg) 0,var(--bg) calc(100% - 50svh + 40px),rgba(10,8,7,0) calc(100% - 50svh + 200px))}
}

.hero .fyc{margin-bottom:14px}
.hero .fyc a{font-size:11.5px}

/* album cover and video thumbnails keep their own shape */
.print.cover img{aspect-ratio:16/9}
.vid{position:relative;display:block;width:100%;max-width:760px;padding:0;border:1px solid var(--line);background:none;cursor:pointer;margin-bottom:clamp(20px,3vw,34px)}
.vid img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:opacity .3s}
.vid .pl{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(10,8,7,.7);border:1.5px solid var(--gold);display:grid;place-items:center;transition:background .25s}
.vid .pl::before{content:"";margin-left:6px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--gold)}
.vid:hover .pl{background:var(--gold)}
.vid:hover .pl::before{border-left-color:var(--bg)}
/* two nights at Desafinados */
.show{grid-template-columns:auto 1fr 220px}
.show .pst{width:220px;height:auto;border:1px solid var(--line)}
.show .tag{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bg);background:var(--honey);padding:5px 10px;border-radius:99px}
@media (max-width:820px){.show{grid-template-columns:1fr}.show .pst{width:min(260px,70%)}}

.print.art img{aspect-ratio:1/1;object-fit:contain;background:#000}
.vid.art{max-width:420px;border:0}
.vid.art img{aspect-ratio:1/1}