:root{
  --rosewood:#2b1711; --rosewood-2:#3a2018; --tobacco:#6b3a1e; --amber:#e0a33b;
  --bone:#ede3d1; --nickel:#a9adb0; --oxblood:#9f2f23;
  --bg:var(--rosewood); --bg-2:var(--rosewood-2); --ink:var(--bone); --ink-2:#c9b9a0; --line:rgba(237,227,209,.14);
  --accent:var(--amber);
  --display:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#efe6d6; --bg-2:#e5d8c2; --ink:#2b1711; --ink-2:#5c4232; --line:rgba(43,23,17,.16); --accent:#9a5d10; color-scheme:light;
  }
}
:root[data-theme="light"]{--bg:#efe6d6; --bg-2:#e5d8c2; --ink:#2b1711; --ink-2:#5c4232; --line:rgba(43,23,17,.16); --accent:#9a5d10; color-scheme:light}
:root[data-theme="dark"]{--bg:var(--rosewood); --bg-2:var(--rosewood-2); --ink:var(--bone); --ink-2:#c9b9a0; --line:rgba(237,227,209,.14); --accent:var(--amber); color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px)}
body{margin:0; background:var(--bg); color:var(--ink); font:400 1.0625rem/1.6 var(--body); -webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(1rem,4vw,2.5rem)}
h1,h2,h3{font-family:var(--display); line-height:.95; margin:0; font-weight:800}
h2{font-size:clamp(2.6rem,6vw,4.5rem); letter-spacing:-.005em}
section{padding:clamp(4rem,9vw,7rem) 0}
.lede{color:var(--ink-2); max-width:34rem; margin:.9rem 0 0}

/* nav */
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; align-items:center; justify-content:space-between; height:60px; gap:1rem}
.brand{font:800 1.5rem/1 var(--display); text-decoration:none}
nav ul{display:flex; gap:clamp(.8rem,2.5vw,1.8rem); list-style:none; margin:0; padding:0}
nav a{text-decoration:none; font-weight:500; font-size:.95rem; color:var(--ink-2)}
nav a:hover{color:var(--ink)}
@media (max-width:640px){ nav li.opt{display:none} }

/* hero */
.hero{position:relative; overflow:hidden; padding:clamp(4rem,10vw,8rem) 0 clamp(3rem,7vw,5rem); isolation:isolate}
.burst{position:absolute; z-index:-1; right:-12vmax; top:50%; width:min(64vmax,720px); aspect-ratio:1; transform:translateY(-50%); border-radius:50%;
  background:radial-gradient(circle, #f2c46a 0%, #e0a33b 22%, #b0621f 42%, #5a2d17 62%, transparent 72%); opacity:.9}
.burst::before{content:""; position:absolute; inset:18%; border-radius:50%;
  background:repeating-radial-gradient(circle, transparent 0 9px, rgba(43,23,17,.35) 9px 10px); mask:radial-gradient(circle, transparent 38%, #000 40%, #000 52%, transparent 54%)}
.burst::after{content:""; position:absolute; inset:34%; border-radius:50%; background:var(--rosewood); box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .burst{opacity:.75} }
.hero h1{font-size:clamp(4.2rem,15vw,11.5rem); font-weight:900; line-height:.82; letter-spacing:-.01em; max-width:9ch}
.hero p.sub{font-size:clamp(1.05rem,2vw,1.3rem); max-width:26rem; color:var(--ink-2); margin:1.5rem 0 2.2rem}
.next{display:inline-flex; align-items:stretch; border:1px solid var(--line); background:color-mix(in srgb,var(--bg) 70%,transparent); backdrop-filter:blur(6px); text-decoration:none; max-width:100%}
.next .d{background:var(--accent); color:var(--bg); padding:.7rem 1rem; text-align:center; font-family:var(--display); line-height:1}
.next .d b{display:block; font-size:2rem; font-weight:900}
.next .d span{font-size:.95rem; font-weight:600}
.next .i{padding:.7rem 1.1rem; display:flex; flex-direction:column; justify-content:center}
.next .i small{color:var(--ink-2); font-size:.85rem}
.next .i strong{font-weight:600}
.next:hover .i strong{text-decoration:underline; text-underline-offset:3px}

/* shows */
.shows-head{display:flex; align-items:end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.2rem}
.tabs{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:4px}
.tabs button{appearance:none; border:0; background:none; color:var(--ink-2); font:600 .95rem var(--body); padding:.5rem 1.1rem; border-radius:999px; cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ink); color:var(--bg)}
.gig-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.gig{display:grid; grid-template-columns:5.5rem 1fr auto; gap:1.2rem; align-items:center; padding:1.15rem 0; border-bottom:1px solid var(--line)}
.gig .date{font-family:var(--display); line-height:.9}
.gig .date b{font-size:2.6rem; font-weight:900; display:block}
.gig .date span{font-size:1rem; font-weight:600; color:var(--ink-2)}
.gig h3{font:600 1.15rem/1.3 var(--body)}
.gig .where{color:var(--ink-2); font-size:.95rem}
.gig .note{font-size:.85rem; color:var(--accent); margin-top:.2rem}
.btn{display:inline-block; font:600 .92rem var(--body); text-decoration:none; padding:.6rem 1.1rem; border-radius:999px; border:1px solid var(--ink); white-space:nowrap; cursor:pointer; background:none; color:var(--ink)}
.btn.solid{background:var(--accent); border-color:var(--accent); color:var(--rosewood)}
.btn.solid:hover{filter:brightness(1.08)}
.btn:not(.solid):hover{background:var(--ink); color:var(--bg)}
.tag{font-size:.88rem; color:var(--ink-2); padding:.6rem 0}
.year{font:800 1.6rem var(--display); color:var(--ink-2); padding:2rem 0 .4rem; list-style:none; border-bottom:1px solid var(--line)}
.year:first-child{padding-top:1rem}
@media (max-width:600px){ .gig{grid-template-columns:4.2rem 1fr} .gig .act{grid-column:2} .gig .date b{font-size:2.1rem} }

/* player */
#videos{background:var(--bg-2)}
.vid-grid{display:grid; grid-template-columns:minmax(0,1fr) 20rem; gap:clamp(1rem,3vw,2rem); margin-top:2.2rem}
@media (max-width:900px){ .vid-grid{grid-template-columns:1fr} }
.player{position:relative; background:#120906; border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.7); color:var(--bone)}
.player .screen{position:relative; aspect-ratio:16/9; background:#000; cursor:pointer}
.player video{width:100%; height:100%; object-fit:contain}
.player .big{position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%; border:0; background:rgba(224,163,59,.92); color:var(--rosewood); display:grid; place-items:center; cursor:pointer; transition:transform .2s, opacity .2s}
.player .big:hover{transform:scale(1.06)}
.player.playing .big{opacity:0; pointer-events:none; transform:scale(.8)}
.player .cap{position:absolute; left:1rem; top:.9rem; font-family:var(--display); font-weight:800; font-size:1.5rem; text-shadow:0 1px 10px rgba(0,0,0,.6); transition:opacity .3s; pointer-events:none}
.player.playing.idle .cap{opacity:0}

/* the fretboard */
.board{position:relative; height:34px; margin:0; cursor:pointer; touch-action:none;
  background:linear-gradient(180deg,#3d2217,#23120c); border-top:1px solid #000; border-bottom:1px solid #000}
.board .frets{position:absolute; inset:0; pointer-events:none}
.board .frets i{position:absolute; top:0; bottom:0; width:2px; background:linear-gradient(90deg,#8c8f91,#e6e8e9,#8c8f91); opacity:.75}
.board .frets u{position:absolute; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:#e9dfcb; opacity:.55}
.board .frets u.dbl{top:30%} .board .frets u.dbl2{top:70%}
.board .buf{position:absolute; left:0; top:0; bottom:0; background:rgba(237,227,209,.06); pointer-events:none}
.board .str{position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:linear-gradient(180deg,#e8e8e8,#7f8284); box-shadow:0 1px 2px rgba(0,0,0,.6); pointer-events:none}
.board .played{position:absolute; left:0; top:50%; height:3px; margin-top:-1.5px; background:linear-gradient(180deg,#ffd98a,#c9861f); box-shadow:0 0 10px rgba(224,163,59,.7); pointer-events:none}
.board .pick{position:absolute; top:50%; width:18px; height:20px; margin:-10px 0 0 -9px; background:var(--amber); border-radius:50% 50% 50% 50% / 38% 38% 62% 62%; box-shadow:0 2px 6px rgba(0,0,0,.6); pointer-events:none; transform:rotate(180deg)}
.board .hover-t{position:absolute; bottom:calc(100% + 6px); transform:translateX(-50%); background:var(--bone); color:var(--rosewood); font:600 .78rem var(--body); padding:.15rem .45rem; border-radius:4px; opacity:0; pointer-events:none; white-space:nowrap}
.board:hover .hover-t{opacity:1}
.player.playing .board .str{animation:ring .09s linear infinite alternate}
@keyframes ring{from{transform:translateY(-.6px)} to{transform:translateY(.6px)}}
@media (prefers-reduced-motion: reduce){ .player.playing .board .str{animation:none} html{scroll-behavior:auto} }

.bar{display:flex; align-items:center; gap:.9rem; padding:.7rem 1rem .8rem; background:linear-gradient(180deg,#1b0e09,#120906)}
.ctl{appearance:none; border:0; background:none; color:var(--bone); width:38px; height:38px; display:grid; place-items:center; border-radius:8px; cursor:pointer; flex:none}
.ctl:hover{background:rgba(237,227,209,.1)}
.ctl svg{width:22px; height:22px}
.time{font:500 .9rem var(--body); font-variant-numeric:tabular-nums; color:#c9b9a0; white-space:nowrap}
.spacer{flex:1}
.knob-wrap{display:flex; align-items:center; gap:.9rem; margin-left:.4rem}
.knob{position:relative; width:40px; height:40px; border-radius:50%; cursor:ew-resize; touch-action:none; flex:none;
  background:radial-gradient(circle at 35% 30%,#4a4a4a,#111 70%); box-shadow:0 0 0 3px #0a0503, 0 0 0 4px #3a2a20, 0 3px 8px rgba(0,0,0,.6)}
.knob .ind{position:absolute; left:50%; top:4px; width:3px; height:12px; margin-left:-1.5px; background:var(--bone); border-radius:2px}
.knob-rot{position:absolute; inset:0; border-radius:50%}
.knob-scale{position:absolute; inset:-9px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 225deg, var(--amber) var(--v,0%), rgba(237,227,209,.18) var(--v,0%) 75%, transparent 75%);
  mask:radial-gradient(circle, transparent 26px, #000 27px, #000 29px, transparent 30px)}
.knob-val{font:800 1.05rem var(--display); width:1.6em; color:#c9b9a0; font-variant-numeric:tabular-nums}
.speed{appearance:none; border:1px solid rgba(237,227,209,.25); background:none; color:#c9b9a0; font:600 .82rem var(--body); padding:.3rem .55rem; border-radius:6px; cursor:pointer}
.speed:hover{color:var(--bone); border-color:var(--bone)}
@media (max-width:520px){ .knob-val,.speed{display:none} .bar{gap:.5rem} }

.playlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.playlist button{all:unset; box-sizing:border-box; width:100%; display:grid; grid-template-columns:92px 1fr; gap:.8rem; align-items:center; padding:.5rem; border-radius:10px; cursor:pointer}
.playlist button:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.playlist button:focus-visible{outline:2px solid var(--accent)}
.playlist button[aria-current="true"]{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.playlist .th{aspect-ratio:16/9; border-radius:6px; overflow:hidden; position:relative; background:#000}
.playlist .th svg{width:100%; height:100%}
.playlist .th em{position:absolute; right:4px; bottom:4px; font:600 .7rem var(--body); font-style:normal; background:rgba(0,0,0,.7); color:#fff; padding:0 .3rem; border-radius:3px}
.playlist strong{display:block; font-weight:600; line-height:1.3}
.playlist small{color:var(--ink-2); font-size:.85rem}

/* photos */
.gallery{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(110px,14vw,170px); gap:.6rem; margin-top:2.2rem}
.gallery button{all:unset; cursor:pointer; overflow:hidden; border-radius:6px; position:relative}
.gallery button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.gallery svg{width:100%; height:100%; transition:transform .5s}
.gallery button:hover svg{transform:scale(1.04)}
.gallery button:nth-child(1){grid-column:span 4; grid-row:span 2}
.gallery button:nth-child(2){grid-column:span 2; grid-row:span 2}
.gallery button:nth-child(3),.gallery button:nth-child(4),.gallery button:nth-child(5){grid-column:span 2}
@media (max-width:640px){ .gallery{grid-template-columns:repeat(2,1fr)} .gallery button:nth-child(n){grid-column:span 1; grid-row:span 1} .gallery button:nth-child(1){grid-column:span 2; grid-row:span 2} }
dialog.lb{border:0; padding:0; background:none; max-width:min(1100px,94vw); width:100%; color:var(--bone)}
dialog.lb::backdrop{background:rgba(10,5,3,.9)}
dialog.lb svg{width:100%; height:auto; border-radius:6px}
dialog.lb .lb-bar{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem 0}
dialog.lb .lb-bar button{all:unset; cursor:pointer; padding:.4rem .7rem; border:1px solid rgba(237,227,209,.3); border-radius:999px; font:600 .9rem var(--body)}
dialog.lb .lb-bar button:focus-visible{outline:2px solid var(--amber)}

/* about + booking */
.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start}
.about p{max-width:36rem; margin:1rem 0 0; color:var(--ink-2)}
.about p:first-of-type{color:var(--ink); font-size:1.2rem}
.gear{list-style:none; padding:0; margin:1.5rem 0 0; border-top:1px solid var(--line)}
.gear li{display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.95rem}
.gear li span{color:var(--ink-2)}
@media (max-width:800px){ .about{grid-template-columns:1fr} }
.booking{border-top:1px solid var(--line)}
.booking .wrap{display:flex; justify-content:space-between; align-items:end; gap:2rem; flex-wrap:wrap}
.booking a.mail{font:900 clamp(2rem,6.5vw,4.8rem)/1 var(--display); text-decoration:none; word-break:break-all}
.booking a.mail:hover{color:var(--accent)}
.socials{display:flex; gap:1.2rem; flex-wrap:wrap}
.socials a{color:var(--ink-2); font-weight:500}
footer{padding:2rem 0 3rem; color:var(--ink-2); font-size:.85rem}

.vol{appearance:none; -webkit-appearance:none; width:110px; height:4px; border-radius:2px; cursor:pointer; flex:none;
  background:linear-gradient(90deg, var(--amber) var(--p,80%), rgba(237,227,209,.25) var(--p,80%))}
.vol::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--bone); border:0; box-shadow:0 1px 4px rgba(0,0,0,.5)}
.vol::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--bone); border:0; box-shadow:0 1px 4px rgba(0,0,0,.5)}
.vol::-moz-range-track{background:transparent}
.vol:focus-visible{outline:2px solid var(--amber); outline-offset:6px}
@media (max-width:520px){ .vol{width:70px} }

/* fullscreen: video fills, controls stay on screen */
.player:fullscreen{width:100%; height:100%; border-radius:0; display:flex; flex-direction:column; background:#000}
.player:fullscreen .screen{flex:1 1 auto; aspect-ratio:auto; min-height:0}
.player:fullscreen .bar{padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right)); padding-bottom:calc(.8rem + env(safe-area-inset-bottom,0px))}
.player:-webkit-full-screen{width:100%; height:100%; border-radius:0; display:flex; flex-direction:column; background:#000}
.player:-webkit-full-screen .screen{flex:1 1 auto; aspect-ratio:auto; min-height:0}
.player:-webkit-full-screen .bar{padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right)); padding-bottom:calc(.8rem + env(safe-area-inset-bottom,0px))}

.playlist .th img{width:100%; height:100%; object-fit:cover; display:block}