/* ═══════════════════════════════════════════════
   RIO TIGRE — styles
   (you shouldn't need to touch this file)
   ═══════════════════════════════════════════════ */

:root{
  --bg:#E8632E;
  --fg:#16110D;
  --over:#16110D;          /* type colour where it sits on top of the artwork */
  --rule:rgba(0,0,0,.18);
}
/* genre palettes — swap these hexes to taste */
body.t-electro-pop { --bg:#030835; --fg:#367BF6; --over:#367BF6; }
body.t-deep-house  { --bg:#0C0D0A; --fg:#B6F24B; --over:#B6F24B; }
body.t-scores      { --bg:#E9E9E7; --fg:#1B2CC4; --over:#E9E9E7; }
body[data-theme="cool"] { --bg:#E9E9E7; --fg:#1B2CC4; }

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Newsreader',Georgia,'Times New Roman',serif;
  min-height:100svh;
  overflow-x:hidden;
  /* background and type change together */
  transition:background-color .62s cubic-bezier(.4,0,.2,1), color .62s cubic-bezier(.4,0,.2,1);
}
body.no-cursor{cursor:none;}
a{color:inherit;}

.shell{display:flex;flex-direction:column;min-height:100svh;width:100%;position:relative;z-index:10;}

.mono{
  font-family:'Space Mono','SFMono-Regular',Menlo,monospace;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;line-height:1.8;
}

/* ═══════════ HEADER ═══════════ */
.nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  padding:24px clamp(18px,3.5vw,46px);flex-shrink:0;
}
.nav a{text-decoration:none;opacity:.8;transition:opacity .2s;}
.nav a:hover{opacity:1;}
.nav a:focus-visible{outline:1.5px solid currentColor;outline-offset:5px;opacity:1;}

.nav-left{grid-column:1;display:flex;align-items:center;font-size:13px;letter-spacing:.13em;}
.nav-center{grid-column:2;display:flex;align-items:center;gap:clamp(10px,1.3vw,18px);
  font-size:13px;letter-spacing:.1em;}
.nav-right{grid-column:3;display:flex;gap:clamp(14px,1.9vw,30px);justify-content:flex-end;
  flex-wrap:wrap;font-size:13px;letter-spacing:.13em;}

.socials{display:inline-flex;align-items:center;gap:clamp(9px,1vw,13px);}
.icon{display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;flex-shrink:0;padding:7px;box-sizing:content-box;}
.icon svg{width:19px;height:19px;display:block;}

.mail{display:inline-flex;align-items:center;gap:7px;padding-left:clamp(2px,.6vw,8px);}
.mail a{border-bottom:1px solid transparent;transition:border-color .2s;padding-bottom:1px;cursor:pointer;}
.mail a:hover{border-bottom-color:currentColor;}
.copy{background:none;border:none;padding:4px;cursor:pointer;color:inherit;opacity:.5;
  transition:opacity .2s;display:inline-flex;line-height:0;}
.copy:hover{opacity:1;}
.copy:focus-visible{outline:1.5px solid currentColor;outline-offset:3px;opacity:1;}
.copy svg{width:13px;height:13px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;}
.copied{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;opacity:0;transition:opacity .25s;white-space:nowrap;}
.copied.on{opacity:.65;}

/* ═══════════ HOME ═══════════ */
/* sentence + eyes are one block, centred together on the page */
.stage{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,3.2vh,42px);
  padding:clamp(14px,3vh,40px) clamp(18px,4vw,60px);
  min-height:0;
}
.sentence{
  font-size:clamp(1.8rem,5.2vw,4.7rem);
  line-height:1.14;letter-spacing:-.02em;text-align:center;
  max-width:min(30ch,94vw);font-weight:400;
}
.hl{
  position:relative;
  font-style:italic;color:inherit;white-space:nowrap;display:inline-block;
  text-decoration:none;cursor:pointer;padding-right:.04em;
}
/* underline sits right under the baseline, and never moves with the letters */
.hl::after{
  content:'';position:absolute;left:0;right:.04em;bottom:.17em;
  height:.035em;background:currentColor;opacity:.55;
  transition:opacity .25s;
}
.hl:hover::after,.hl:focus-visible::after{opacity:1;}
.hl:focus-visible{outline:none;}
.ch{display:inline-block;will-change:transform;}

/* electro-pop — a wave running through the letters */
@keyframes wave{ 0%,100%{transform:translateY(-.20em);} 50%{transform:translateY(.20em);} }
/* scores — each letter rolls up out of frame and returns from below */
@keyframes roll{
  0%,8%   {transform:translateY(0);}
  46%     {transform:translateY(-1.7em);}
  47%     {transform:translateY(1.7em);}
  85%,100%{transform:translateY(0);}
}
body.fx .hl.on-electro-pop .ch{animation:wave 1.15s ease-in-out infinite;
  animation-delay:calc(var(--i) * 55ms);}
/* a mask clips the letters without shifting the line, the way overflow would */
body.fx .hl.on-scores{
  -webkit-mask-image:linear-gradient(#000,#000);
          mask-image:linear-gradient(#000,#000);
  -webkit-mask-size:100% 152%;  mask-size:100% 152%;
  -webkit-mask-position:0 -26%; mask-position:0 -26%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
body.fx .hl.on-scores .ch{animation:roll 1.5s cubic-bezier(.65,0,.35,1) infinite;
  animation-delay:calc(var(--i) * 65ms);}

/* ═══════════ FOOTER ═══════════ */
.foot{display:flex;justify-content:center;padding:24px clamp(18px,3.5vw,46px) 32px;flex-shrink:0;}
.news{display:flex;flex-direction:column;gap:8px;width:min(300px,84vw);}
.news-row{display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid currentColor;
  padding-bottom:6px;opacity:.9;}
.news input{flex:1;min-width:0;background:none;border:none;outline:none;color:inherit;
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.09em;padding:2px 0;}
.news input::placeholder{color:currentColor;opacity:.5;text-transform:uppercase;letter-spacing:.14em;}
.news button{background:none;border:none;cursor:pointer;color:inherit;
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:2px 0;white-space:nowrap;}
.news button:focus-visible{outline:1.5px solid currentColor;outline-offset:4px;}
.news-msg{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;opacity:0;transition:opacity .3s;min-height:14px;text-align:center;}
.news-msg.show{opacity:.7;}

/* ═══════════ CURSOR (home only) ═══════════ */
/* inverts whatever is under it, live — so animated type stays in step */
/* difference against the page colour: the background goes black
   and the type comes back red — and it stays live, so animated
   letters invert correctly as they move */
#blob{
  position:fixed;inset:0;z-index:30;pointer-events:none;
  background:var(--bg);
  mix-blend-mode:difference;
  opacity:0;transition:opacity .3s ease;
  clip-path:url(#blobclip);
}
#blob.on{opacity:1;}

/* a second copy of the page in the "on artwork" colour, clipped to exactly
   where the cover is — so the type stays readable as the image moves under it */
#overtype{
  position:fixed;inset:0;z-index:11;pointer-events:none;
  color:var(--over);
  transition:color .45s cubic-bezier(.4,0,.2,1);
  clip-path:polygon(0 0,0 0,0 0,0 0);
}
#overtype .hl::after{opacity:1;}

/* the cover art, under the cursor and behind the type */
#poster{
  position:fixed;top:0;left:0;z-index:4;pointer-events:none;
  height:clamp(260px,50vh,470px);width:auto;max-width:88vw;
  opacity:0;transition:opacity .3s ease;will-change:transform;
  box-shadow:0 24px 70px rgba(0,0,0,.3);
}
#poster.on{opacity:1;}

/* ═══════════ INNER PAGES ═══════════ */
.page{flex:1;padding:clamp(18px,4vh,40px) clamp(18px,3.5vw,46px) clamp(40px,7vh,80px);
  width:100%;max-width:1240px;margin:0 auto;}
.page h1{font-size:clamp(2.2rem,6vw,4.4rem);font-weight:400;letter-spacing:-.02em;
  line-height:1.05;margin-bottom:clamp(26px,5vh,54px);}
.page h1 em{font-style:italic;}
.empty{font-size:clamp(1.2rem,2.6vw,1.9rem);font-style:italic;line-height:1.45;
  max-width:24ch;opacity:.85;}

/* films */
.film{margin-bottom:clamp(44px,8vh,86px);}
.film:last-child{margin-bottom:0;}
.film-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:16px;}
.film-head h2{font-size:clamp(1.5rem,3.4vw,2.5rem);font-weight:400;letter-spacing:-.015em;}
.film-meta{text-align:right;opacity:.75;}
.frame{position:relative;width:100%;aspect-ratio:16/9;background:rgba(0,0,0,.06);overflow:hidden;}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.film-foot{margin-top:12px;}
.film-foot a{text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px;
  opacity:.85;transition:border-color .2s,opacity .2s;}
.film-foot a:hover{border-bottom-color:currentColor;opacity:1;}

/* ═══════════ VIDEOS ═══════════ */
/* the video page runs wider than the others, so the frame is big on a big
   screen — the list keeps a fixed-ish width and the picture takes the rest */
.page.wide{max-width:min(1680px,94vw);}
.vwrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,23vw,370px);
  gap:clamp(20px,2.6vw,44px);align-items:start;}

.vstage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:rgba(0,0,0,.05);border:1px solid var(--rule);}
.vstage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* Bare player: the frame is made taller than 16:9, so YouTube letterboxes
   the picture and puts its title bar and control bar in the black margins.
   Those margins are then cropped away, leaving the full picture and none
   of the furniture. Clicking the picture still plays and pauses. */
.vstage.bare iframe{inset:auto;left:0;top:-19%;width:100%;height:138%;}
.vcard{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(10px,2vh,20px);
  padding:24px;text-align:center;}
.vcard .picto{width:clamp(64px,9vw,118px);height:auto;}
.vcard .picto *{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.vcard .picto .solid{fill:currentColor;stroke:none;}
.vcard .vtitle{font-size:clamp(1.15rem,2.5vw,2.1rem);line-height:1.15;
  letter-spacing:-.015em;max-width:18ch;}
.vcard .vkind{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;opacity:.65;}
.vcard .vgo{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;opacity:.8;}
.vcard.hide{opacity:0;pointer-events:none;}
.vcard{transition:opacity .25s;}

.vlist{display:flex;flex-direction:column;}
.vrow{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:12px 4px;border-bottom:1px solid var(--rule);
  background:none;border-left:0;border-right:0;border-top:0;
  color:inherit;font:inherit;text-align:left;cursor:pointer;width:100%;
  transition:padding-left .25s ease,opacity .25s;
}
.vrow:first-child{border-top:1px solid var(--rule);}
.vrow:hover,.vrow.sel{padding-left:14px;}
.vlist.hovering .vrow:not(:hover){opacity:.42;}
.vrow:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
.vthumb{width:74px;aspect-ratio:16/9;object-fit:cover;display:block;background:rgba(0,0,0,.08);}
.vrow .rt{font-size:clamp(.95rem,1.35vw,1.15rem);line-height:1.2;}
.vrow .rk{width:22px;height:22px;opacity:.7;flex-shrink:0;}
.vrow .rk *{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.vrow .rk .solid{fill:currentColor;stroke:none;}
.vwatch{margin-top:10px;display:inline-block;font-family:'Space Mono',monospace;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;opacity:.6;}
.vwatch:hover{opacity:1;}
.vmore{margin-top:18px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;opacity:.8;
  border-bottom:1px solid var(--rule);padding-bottom:3px;display:inline-block;}
.vmore:hover{opacity:1;border-bottom-color:currentColor;}

/* shows */
.shows{border-top:1px solid var(--rule);}
.show{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--rule);}
.show .when{font-size:clamp(1rem,1.9vw,1.35rem);line-height:1.35;}
.show .when .venue{font-style:italic;opacity:.8;display:block;}
.show .where{text-align:center;}
.tix{justify-self:end;text-decoration:none;border:1.5px solid currentColor;border-radius:999px;
  padding:9px 22px;transition:background .2s,color .2s;white-space:nowrap;}
.tix:hover{background:var(--fg);color:var(--bg);}
.tix.off{opacity:.4;pointer-events:none;}

/* merch */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(16px,2.4vw,30px);}
.item{display:flex;flex-direction:column;gap:9px;text-decoration:none;}
.item img{width:100%;aspect-ratio:1;object-fit:cover;display:block;}
.item .row{display:flex;justify-content:space-between;gap:10px;}

/* ═══════════ PHONE / TOUCH ═══════════ */
@media (hover:none),(max-width:860px){
  #blob,#poster{display:none!important;}
  body.no-cursor{cursor:auto;}
  .sentence{max-width:none;font-size:clamp(1.75rem,8.5vw,3.1rem);}
  .hl::after{opacity:1;height:.045em;}
}
@media (max-width:860px){
  .nav{grid-template-columns:1fr;justify-items:center;gap:12px;padding-top:20px;}
  .nav-left,.nav-center,.nav-right{grid-column:1;justify-content:center;}
  /* stacked, top to bottom: name, menu, contact */
  .nav-left{order:1;}
  .nav-right{order:2;}
  .nav-center{order:3;flex-wrap:wrap;justify-content:center;}
  .vwrap{grid-template-columns:1fr;}
  .show{grid-template-columns:1fr;gap:8px;}
  .show .where{text-align:left;}
  .tix{justify-self:start;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}