@font-face{font-family:Swiza;src:url('assets/Swiza-Bold.otf') format('opentype');font-weight:700;font-display:swap}
:root{--brand:#68c6ba;--ink:#221f1f;--white:#fff;--footer-h:42px;--player-h:92px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Swiza,Arial,Helvetica,sans-serif;font-weight:700;color:var(--ink)}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}button{font:inherit}.site{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;background:var(--brand);isolation:isolate}.face-field{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}.face{position:absolute;left:0;top:0;width:var(--size);height:auto;transform:translate3d(var(--x),var(--y),0) rotate(var(--angle));transform-origin:center;will-change:transform;user-select:none;-webkit-user-drag:none}.header{position:absolute;z-index:2;left:0;right:0;top:0;padding:19px 23px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.brand{font-size:clamp(20px,2.4vw,38px);line-height:1;letter-spacing:-.055em}.header-note{font-size:11px;letter-spacing:.01em}.bottom-stack{position:absolute;bottom:0;left:0;right:0;z-index:4}.player-shell{height:var(--player-h);background:#f5f5f5;overflow:hidden}.player-shell iframe{display:block;width:100%;height:100%;border:0}.footer{height:var(--footer-h);background:var(--ink);color:var(--white);display:flex;align-items:center;gap:30px;padding:0 17px;font-size:11px;letter-spacing:.015em;white-space:nowrap}.footer .gig{display:flex;gap:9px}.footer-label{opacity:.55}.socials{display:flex;gap:24px;margin-left:auto}.mobile-links-toggle{display:none}.mobile-panel{display:none}
@media(max-width:900px){.footer{gap:13px;font-size:10px}.socials{gap:12px}.header-note{display:none}}
@media(max-width:680px){:root{--player-h:88px}.header{padding:17px 16px}.brand{font-size:23px}.desktop-footer{display:none}.mobile-links-toggle{width:100%;height:calc(44px + env(safe-area-inset-bottom));padding:0 16px env(safe-area-inset-bottom);border:0;background:var(--ink);color:#fff;display:flex;justify-content:space-between;align-items:center;text-align:left;font-size:14px;cursor:pointer}.mobile-panel{display:block;position:absolute;z-index:3;left:0;right:0;bottom:calc(44px + env(safe-area-inset-bottom));height:min(58dvh,460px);background:var(--ink);color:#fff;transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1);visibility:hidden}.mobile-panel.open{transform:translateY(0);visibility:visible}.panel-inner{height:100%;overflow:auto;display:grid;grid-template-columns:1fr;align-content:start;padding:17px 17px 25px;gap:0}.panel-inner a{font-size:clamp(18px,5vw,25px);padding:8px 0;border-bottom:1px solid #ffffff33;line-height:1.05}}
@media(prefers-reduced-motion:reduce){.face{will-change:auto}.mobile-panel{transition:none}}

/* V2: keep the music player clear of the mobile LINKS bar. */
@media(max-width:680px){
  .bottom-stack{display:flex;flex-direction:column;gap:20px;background:transparent}
  .player-shell{flex:none;position:relative;z-index:1}
  .mobile-links-toggle{flex:none}
  .mobile-panel{bottom:calc(44px + env(safe-area-inset-bottom));z-index:5}
}
/* The SoundCloud embed is a player, not a Spotify embed. */

/* V5: Show the complete standard SoundCloud playlist player. */
:root{--player-h:166px}
.player-shell{height:var(--player-h);min-height:var(--player-h);overflow:visible;background:transparent}
.player-shell iframe{height:166px;min-height:166px;position:relative;z-index:1}
.footer .gig{align-items:center;gap:9px}
.footer .gig>a{margin-left:5px}
.panel-gig{display:flex;flex-direction:column;gap:10px;padding:8px 0 15px;border-bottom:1px solid #ffffff33;font-size:clamp(15px,4vw,20px)}
.panel-gig a{border:0;padding:0;font-size:inherit}
@media(max-width:900px) and (min-width:681px){.footer{gap:10px;font-size:9px}.socials{gap:9px}}
@media(max-width:680px){
  :root{--player-h:166px}
  .header-note{display:block;font-size:9px;max-width:115px;text-align:right;line-height:1.15}
  .bottom-stack{gap:20px}
  .player-shell{flex:0 0 166px}
  /* The links sheet opens above the player rather than covering it. */
  .mobile-panel{bottom:calc(44px + env(safe-area-inset-bottom) + 20px + 166px);height:min(45dvh,340px)}
}

/* V6: full playlist with visible track navigation and separate booking action. */
:root{--player-h:320px}
.player-shell{height:320px;min-height:320px;overflow:hidden}
.player-shell iframe{height:320px;min-height:320px}
.footer{gap:18px}
.footer .gig{gap:8px}
.socials{gap:16px}
@media(max-width:1100px) and (min-width:681px){
  .footer{gap:9px;font-size:9px;padding:0 10px}
  .socials{gap:8px}
}
@media(max-width:680px){
  :root{--player-h:300px}
  .player-shell{height:300px;min-height:300px;flex:0 0 300px}
  .player-shell iframe{height:300px;min-height:300px}
  .mobile-panel{bottom:calc(44px + env(safe-area-inset-bottom) + 20px + 300px);height:min(35dvh,270px)}
}
@media(max-height:680px) and (max-width:680px){
  :root{--player-h:240px}
  .player-shell{height:240px;min-height:240px;flex-basis:240px}
  .player-shell iframe{height:240px;min-height:240px}
  .mobile-panel{bottom:calc(44px + env(safe-area-inset-bottom) + 20px + 240px);height:min(35dvh,220px)}
}

/* V8: desktop player lives behind the footer, not in the initial composition.
   One iframe remains mounted throughout so opening and closing do not reload it. */
.listen-toggle{display:none}
@media(min-width:681px){
  .bottom-stack{position:absolute;inset:auto 0 0;bottom:0;height:42px;overflow:visible;pointer-events:none}
  .bottom-stack > *{pointer-events:auto}
  .footer{position:absolute;bottom:0;left:0;right:0;z-index:7}
  .player-shell{
    position:absolute;bottom:42px;right:18px;width:min(760px,calc(100% - 36px));
    height:320px;min-height:320px;margin:0;overflow:hidden;
    background:#f5f5f5;z-index:5;
    transform:translate3d(0,calc(100% + 42px),0);
    transition:transform .48s cubic-bezier(.22,.8,.22,1);
    pointer-events:none;
  }
  .player-shell.is-expanded{transform:translate3d(0,0,0);pointer-events:auto}
  .player-shell iframe{display:block;width:100%;height:320px;min-height:320px;border:0}
  .listen-toggle{
    display:flex;position:absolute;right:18px;bottom:42px;z-index:6;
    align-items:center;justify-content:space-between;gap:48px;
    min-width:184px;height:46px;padding:0 18px;
    border:0;background:var(--ink);color:#fff;cursor:pointer;
    font-size:14px;letter-spacing:.015em;text-align:left;
    transition:transform .48s cubic-bezier(.22,.8,.22,1);
  }
  .listen-toggle:hover{background:#383434}
  .listen-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .listen-toggle[aria-expanded="true"]{transform:translate3d(0,-320px,0)}
}
@media(max-width:680px){.listen-toggle{display:none}}
@media(prefers-reduced-motion:reduce){.player-shell,.listen-toggle{transition:none}}

/* V9: full-width slide-up playlist, centred lozenge, double-layer footer. */
@media(min-width:681px){
  :root{--footer-h:48px;--lower-bar-h:48px}
  .bottom-stack{height:calc(var(--footer-h) + var(--lower-bar-h))}
  .bottom-stack::after{
    content:"";position:absolute;left:0;right:0;bottom:0;
    height:var(--lower-bar-h);background:#383434;z-index:7;pointer-events:none;
  }
  .footer{height:var(--footer-h);bottom:var(--lower-bar-h);z-index:8}
  .player-shell{
    left:0;right:0;width:100%;bottom:calc(var(--footer-h) + var(--lower-bar-h));
    transform:translate3d(0,calc(100% + var(--footer-h) + var(--lower-bar-h)),0);
    z-index:5;
  }
  .player-shell.is-expanded{transform:translate3d(0,0,0)}
  .listen-toggle{
    right:auto;left:50%;bottom:calc(var(--footer-h) + var(--lower-bar-h) + 30px);
    transform:translateX(-50%);min-width:198px;justify-content:center;gap:24px;
    height:51px;padding:0 26px;border-radius:999px;
    z-index:9;box-shadow:0 2px 10px #221f1f20;
  }
  .listen-toggle[aria-expanded="true"]{
    transform:translate(-50%,-320px);
  }
}
@media(max-width:680px){
  .header{display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:15px 16px}
  .brand{display:block;width:100%;font-size:clamp(35px,10.3vw,68px);line-height:.92;letter-spacing:-.06em;white-space:nowrap}
  .header-note{display:block;max-width:none;text-align:left;font-size:clamp(12px,3.3vw,16px);line-height:1.15;letter-spacing:0}
  .mobile-links-toggle{
    min-height:calc(60px + env(safe-area-inset-bottom));
    height:calc(60px + env(safe-area-inset-bottom));
    border-radius:10px 10px 0 0;
    font-size:17px;padding-left:19px;padding-right:19px;
  }
  .mobile-panel{
    bottom:calc(60px + env(safe-area-inset-bottom) + 20px + 300px);
  }
}
@media(max-height:680px) and (max-width:680px){
  .mobile-panel{bottom:calc(60px + env(safe-area-inset-bottom) + 20px + 240px)}
}

/* V11: stationary outline, with colour flowing around its perimeter. */
@property --ring-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.listen-toggle{
  position:absolute;
  isolation:isolate;
  background:var(--ink);
  border:0;
  border-radius:999px;
  overflow:visible;
}
.listen-toggle::before{
  content:"";
  position:absolute;
  inset:3px; /* stroke is inside button, 3px from its edge */
  border-radius:inherit;
  padding:2px;
  background:conic-gradient(from var(--ring-angle),
    var(--brand) 0deg, var(--brand) 42deg,
    #ffffff 90deg, #ffffff 132deg,
    var(--brand) 180deg, var(--brand) 222deg,
    #ffffff 270deg, #ffffff 312deg,
    var(--brand) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:flowing-ring 7s linear infinite;
  pointer-events:none;
}
@keyframes flowing-ring{to{--ring-angle:360deg}}
.listen-toggle:hover{background:var(--ink)}
.listen-toggle span{position:relative;z-index:1}
@media(max-width:680px){
  :root{--mobile-links-h:calc(60px + env(safe-area-inset-bottom));--mobile-player-h:min(320px,48dvh)}
  .header{padding:0;gap:0;align-items:stretch}
  .brand{
    display:block;width:100%;padding:0;margin:0;
    font-size:14vw;line-height:.88;letter-spacing:-.055em;
    white-space:nowrap;text-align:left;
  }
  .header-note{
    margin:12px 12px 0;padding:0;
    font-size:clamp(14px,3.6vw,18px);text-align:left;
  }
  .bottom-stack{
    position:absolute;bottom:0;left:0;right:0;
    display:block;height:var(--mobile-links-h);overflow:visible;
    z-index:4;pointer-events:none;
  }
  .bottom-stack>*{pointer-events:auto}
  .mobile-links-toggle{
    display:flex;position:absolute;bottom:0;left:0;right:0;
    width:100%;height:var(--mobile-links-h);
    min-height:var(--mobile-links-h);
    z-index:12;border-radius:10px 10px 0 0;
  }
  .player-shell{
    display:block;position:absolute;bottom:var(--mobile-links-h);
    left:0;right:0;width:100%;
    height:var(--mobile-player-h);min-height:0;
    margin:0;overflow:hidden;flex:none;
    z-index:6;background:#f5f5f5;
    transform:translate3d(0,calc(100% + var(--mobile-links-h)),0);
    transition:transform .48s cubic-bezier(.22,.8,.22,1);
    pointer-events:none;
  }
  .player-shell iframe{width:100%;height:100%;min-height:0}
  .player-shell.is-expanded{transform:translate3d(0,0,0);pointer-events:auto}
  .listen-toggle{
    display:flex;position:absolute;z-index:11;
    left:50%;right:auto;bottom:calc(var(--mobile-links-h) + 30px);
    width:auto;min-width:198px;height:51px;padding:0 26px;
    transform:translateX(-50%);
    justify-content:center;align-items:center;gap:24px;
    background:var(--ink);color:white;cursor:pointer;
    font-size:14px;letter-spacing:.015em;
    transition:transform .48s cubic-bezier(.22,.8,.22,1);
  }
  .listen-toggle[aria-expanded="true"]{
    transform:translate(-50%,calc(-1 * var(--mobile-player-h)));
  }
  .mobile-panel{
    display:block;position:absolute;z-index:10;
    bottom:var(--mobile-links-h);left:0;right:0;
    height:min(58dvh,460px);
    transform:translateY(calc(100% + var(--mobile-links-h)));
    visibility:hidden;
  }
  .mobile-panel.open{transform:translateY(0);visibility:visible}
}
@media(prefers-reduced-motion:reduce){
  .listen-toggle::before{animation:none}
  .listen-toggle,.player-shell{transition:none}
}

/* V12 mobile refinements: top tagline, wordmark breathing room, travelling LINKS tab. */
@media(max-width:680px){
  .header{display:flex;flex-direction:column;gap:0;padding:0}
  .header-note{
    order:-1;box-sizing:border-box;width:100%;
    margin:0 0 5px;padding:9px 8px 8px;
    background:#221f1f;color:#fff;
    font-size:clamp(13px,3.5vw,17px);line-height:1.2;
    text-align:left;
  }
  .brand{
    order:0;box-sizing:border-box;
    margin:0;padding:0 4px;width:100%;
    line-height:.91;letter-spacing:-.055em;
  }
  .mobile-panel{height:min(58dvh,460px)}
  .mobile-links-toggle{
    transition:transform .48s cubic-bezier(.22,.8,.22,1);
    will-change:transform;
  }
  .mobile-links-toggle[aria-expanded="true"]{
    transform:translateY(calc(-1 * min(58dvh,460px)));
  }
}
@media(prefers-reduced-motion:reduce){
  .mobile-links-toggle{transition:none}
}

/* V13 mobile: the panel is anchored to the bottom; the tab stays attached
   to its top edge throughout the slide. */
@media(max-width:680px){
  :root{--links-panel-height:min(58dvh,460px)}
  .header-note{font-size:clamp(11px,2.8vw,13px);text-align:center;padding:8px 8px 7px}
  .mobile-panel{
    position:absolute;left:0;right:0;bottom:0;
    height:var(--links-panel-height);z-index:10;
    transform:translate3d(0,100%,0);
    transition:transform .48s cubic-bezier(.22,.8,.22,1),visibility 0s linear .48s;
    visibility:hidden;overflow:hidden;
  }
  .mobile-panel.open{
    transform:translate3d(0,0,0);visibility:visible;
    transition:transform .48s cubic-bezier(.22,.8,.22,1),visibility 0s;
  }
  .mobile-links-toggle{z-index:12;transform:translate3d(0,0,0);
    transition:transform .48s cubic-bezier(.22,.8,.22,1)}
  .mobile-links-toggle[aria-expanded="true"]{
    transform:translate3d(0,calc(-1 * var(--links-panel-height)),0);
  }
  .panel-inner{height:100%;overflow-y:auto;overscroll-behavior:contain}
}
@media(prefers-reduced-motion:reduce){
  .mobile-panel,.mobile-panel.open,.mobile-links-toggle{transition:none}
}

/* V14: always-visible mobile next gig, travelling with the LINKS tab. */
.mobile-next-gig{display:none}
@media(max-width:680px){
  :root{--mobile-gig-h:42px}
  .mobile-next-gig{
    display:flex;position:absolute;left:0;right:0;
    bottom:var(--mobile-links-h);height:var(--mobile-gig-h);
    align-items:center;justify-content:space-between;gap:12px;
    padding:0 16px;background:#383434;color:#fff;
    font-size:clamp(10px,2.6vw,12px);letter-spacing:.01em;
    z-index:12;white-space:nowrap;
    transform:translate3d(0,0,0);
    transition:transform .48s cubic-bezier(.22,.8,.22,1);
  }
  .mobile-gig-label{opacity:.65}
  .mobile-next-gig a{flex:none;text-decoration:underline;text-underline-offset:3px}
  .mobile-next-gig.is-raised{
    transform:translate3d(0,calc(-1 * var(--links-panel-height)),0);
  }
  .listen-toggle{bottom:calc(var(--mobile-links-h) + var(--mobile-gig-h) + 30px)}
  .player-shell{bottom:calc(var(--mobile-links-h) + var(--mobile-gig-h));
    transform:translate3d(0,calc(100% + var(--mobile-links-h) + var(--mobile-gig-h)),0)}
  .player-shell.is-expanded{transform:translate3d(0,0,0)}
  /* The gig and LINKS tab stay attached to the top of the expanded panel. */
}
@media(prefers-reduced-motion:reduce){.mobile-next-gig{transition:none}}

/* V15: one mobile LINKS drawer, with a visible preview of its gig details.
   No separate next-gig bar. The LINKS tab is lifted above the preview. */
@media(max-width:680px){
  :root{--gig-peek:90px}
  .mobile-next-gig{display:none!important}
  .mobile-links-toggle{
    bottom:var(--gig-peek);
    padding-bottom:0;
    z-index:13;
  }
  .mobile-links-toggle[aria-expanded="true"]{
    transform:translate3d(0,calc(-1 * (var(--links-panel-height) - var(--gig-peek))),0);
  }
  .mobile-panel{
    bottom:0;
    height:var(--links-panel-height);
    transform:translate3d(0,calc(100% - var(--gig-peek)),0);
    visibility:visible;
    z-index:10;
  }
  .mobile-panel.open{transform:translate3d(0,0,0)}
  .panel-inner{padding:0 16px 22px}
  .panel-gig{
    box-sizing:border-box;
    height:var(--gig-peek);
    min-height:var(--gig-peek);
    display:flex;
    justify-content:center;
    gap:5px;
    padding:10px 0 8px;
    font-size:clamp(13px,3.4vw,17px);
    line-height:1.1;
  }
  .panel-gig a{font-size:clamp(12px,3.2vw,15px);padding:0}
  .listen-toggle{bottom:calc(var(--mobile-links-h) + var(--gig-peek) + 30px)}
  .player-shell{
    bottom:calc(var(--mobile-links-h) + var(--gig-peek));
    transform:translate3d(0,calc(100% + var(--mobile-links-h) + var(--gig-peek)),0);
  }
  .player-shell.is-expanded{transform:translate3d(0,0,0)}
}
@media(max-width:680px) and (max-height:570px){
  :root{--gig-peek:76px;--links-panel-height:min(65dvh,370px)}
  .panel-gig{gap:3px;padding:7px 0}
}

/* V17: automatic gig banner; original site layout remains unchanged. */
.gig-ticker[hidden]{display:none!important}
.gig-ticker{position:absolute;top:0;left:0;right:0;z-index:5;display:block;overflow:hidden;background:var(--ink);color:var(--white);height:60px;line-height:60px;font-size:12px;letter-spacing:.04em;white-space:nowrap;text-decoration:none!important}
.gig-ticker-track{display:block;width:max-content;animation:gig-marquee 25s linear infinite}
.gig-ticker-segment{display:inline-block;padding-right:20px}
.gig-ticker:hover .gig-ticker-track,.gig-ticker:focus .gig-ticker-track{animation-play-state:paused}
@keyframes gig-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.footer .gig>a{margin-left:0;text-decoration:underline;text-underline-offset:3px}
@media(max-width:680px){.gig-ticker{top:0;height:var(--mobile-links-h);line-height:60px;font-size:11px}.panel-gig>a{display:block;text-decoration:underline;text-underline-offset:3px}}
@media(prefers-reduced-motion:reduce){.gig-ticker-track{animation:none}}

/* V19: compact top ticker; move the wordmark/tagline down only when visible. */
.gig-ticker{height:40px;line-height:40px}
@media(max-width:680px){.gig-ticker{height:40px;line-height:40px}}
.site.has-gig-ticker .header{top:40px}

/* V20: on mobile, the gig ticker replaces the tagline bar rather than stacking above it. */
@media (max-width:680px){
  .site.has-gig-ticker .header-note{display:none}
}