/* Jimmy Bunzol, jimmybunzol.com. Design carried over from the jimmy.bunzol.com music site. */
:root{--night:#0f182e;--deep:#0a1122;--panel:#141f3a;--line:#26345c;--ink:#eef2fb;--mute:#97a3c2;--tide:#4fb3ff;--ember:#ff9b52;
  --display:"Jost","Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  --body:"Instrument Sans","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,48px);--wrap:1180px;--player-h:76px;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--night);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ol,ul,dl,dd{margin:0;padding:0}
ol,ul{list-style:none}
:focus-visible{outline:2px solid var(--tide);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--ink);color:var(--deep);padding:10px 16px;border-radius:999px;font:500 14px var(--body)}
.skip:focus{left:12px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font:500 12px/1 var(--display);letter-spacing:.32em;text-transform:uppercase;color:var(--mute)}
h1,h2,h3{font-family:var(--display);font-weight:300;text-wrap:balance}
h2{font-size:clamp(28px,4vw,44px);letter-spacing:.16em;text-transform:uppercase;line-height:1.1}
main{flex:1;container:jbm/inline-size;outline:0}
.section{padding-block:clamp(56px,9vw,112px)}
.section.tight{padding-top:0}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:32px}
.section-head p{color:var(--mute);max-width:46ch}
.section-head a{color:var(--mute);font:500 12px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;text-decoration:none}
.section-head a:hover{color:var(--ink)}

/* Header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--night) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{width:40px;height:40px;border-radius:9px}
.brand span{font:500 14px/1 var(--display);letter-spacing:.34em;text-transform:uppercase;white-space:nowrap}
.nav{display:flex;gap:clamp(14px,2.4vw,28px);overflow-x:auto;scrollbar-width:none;min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav a{font:500 12px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--mute);padding:10px 0;white-space:nowrap;border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--tide)}
@media (max-width:640px){.brand span{display:none}.nav{gap:16px}.nav a{letter-spacing:.16em}}

/* Home banner */
.banner{position:relative;background:var(--deep)}
.banner picture,.banner img{display:block;width:100%}
.banner img{aspect-ratio:16/9;max-height:min(78vh,760px);object-fit:cover;object-position:50% 45%}
.banner::after{content:"";position:absolute;inset:auto 0 0 0;height:28%;background:linear-gradient(to bottom,transparent,var(--night));pointer-events:none}
.banner h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Album hero (home + music) */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 18% 100%,color-mix(in srgb,var(--tide) 22%,transparent),transparent 70%),radial-gradient(45% 40% at 85% 95%,color-mix(in srgb,var(--ember) 16%,transparent),transparent 70%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6cqi,80px);align-items:center;padding-block:clamp(36px,7cqi,88px)}
.cover{position:relative;border-radius:6px;overflow:hidden;box-shadow:0 30px 80px -30px color-mix(in srgb,var(--tide) 45%,transparent),0 0 0 1px var(--line)}
.cover img{width:100%;aspect-ratio:1;object-fit:cover}
.hero-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero h1,.hero .h1{font-size:clamp(38px,6.8cqi,88px);letter-spacing:.2em;line-height:1;margin-right:-.2em;font-family:var(--display);font-weight:300;text-transform:none}
.song-hero h1{font-size:clamp(34px,6cqi,72px);letter-spacing:.12em;margin-right:-.12em}
.hero .tag{font:300 clamp(17px,2cqi,21px)/1.5 var(--display);letter-spacing:.08em;color:var(--mute)}
.hero .meta{font:400 13px/1.4 var(--mono);color:var(--mute);letter-spacing:.02em}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:transparent;text-decoration:none;font:500 13px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,background .2s}
.btn:hover{border-color:var(--tide)}
.btn.primary{background:var(--ink);color:var(--deep);border-color:var(--ink)}
.btn.primary:hover{background:var(--tide);border-color:var(--tide)}
.btn svg{width:16px;height:16px;flex:none;fill:currentColor}
.profiles{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font:500 12px/1 var(--body);text-decoration:none;color:var(--ink);transition:border-color .2s}
.chip:hover{border-color:var(--tide)}
.horizon{height:2px;background:linear-gradient(90deg,transparent,var(--tide) 22%,var(--ink) 50%,var(--ember) 78%,transparent)}
@container jbm (max-width:820px){.hero .wrap{grid-template-columns:1fr}.cover{max-width:440px}}

/* Track list */
.tracks{border-top:1px solid var(--line)}
.track{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:44px 52px minmax(0,1.4fr) minmax(0,2fr) 64px;gap:16px;align-items:center;padding:14px 8px;border-radius:8px;transition:background .2s}
.row:hover,.track.is-current .row{background:color-mix(in srgb,var(--panel) 70%,transparent)}
.num{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid transparent;display:grid;place-items:center}
.num .n{font:400 14px/1 var(--mono);color:var(--mute)}
.num svg{width:14px;height:14px;display:none;fill:currentColor}
.row:hover .num .n,.track.is-current .num .n{display:none}
.row:hover .num .ic-play{display:block}
.track.is-playing .num .ic-play{display:none!important}
.track.is-playing .num .ic-pause{display:block}
.track.is-current:not(.is-playing) .num .ic-play{display:block}
.track.is-current .num{border-color:var(--tide);color:var(--tide)}
@media (hover:none){.num .n{display:none}.num .ic-play{display:block}.num{border-color:var(--line)}}
.thumb{width:52px;height:52px;border-radius:4px;object-fit:cover}
.title{min-width:0;text-decoration:none}
.title b{display:block;font:500 16px/1.3 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.title:hover b{text-decoration:underline;text-decoration-color:var(--tide);text-underline-offset:4px}
.title small{display:block;font:400 12px/1.5 var(--mono);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wave{width:100%;height:40px;cursor:pointer;display:block}
.dur{font:400 13px/1 var(--mono);color:var(--mute);text-align:right;font-variant-numeric:tabular-nums}
.extras{display:flex;flex-wrap:wrap;gap:8px;padding:0 8px 14px 120px}
.extras:empty{display:none}
.linkpill{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font:500 11px/1 var(--body);letter-spacing:.04em;text-decoration:none;color:var(--mute);cursor:pointer}
.linkpill:hover{color:var(--ink);border-color:var(--tide)}
.linkpill.full{color:var(--ink);border-color:color-mix(in srgb,var(--tide) 60%,var(--line))}
.fullplayer{padding:0 8px 18px 120px}
.fullplayer iframe{width:100%;border:0;border-radius:12px;display:block;background:var(--panel)}
.disc-note{margin-top:14px;font:400 12px/1.5 var(--mono);color:var(--mute)}
@container jbm (max-width:760px){.row{grid-template-columns:40px 48px minmax(0,1fr) 52px;gap:12px}.row .wave{display:none}.thumb{width:48px;height:48px}.extras,.fullplayer{padding-left:8px}}

/* Grids, embeds, videos */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:20px;align-items:start}
.embed{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.embed iframe{display:block;width:100%;border:0;border-radius:12px;color-scheme:light;background:transparent}
.embed iframe[src*="spotify.com"]{margin-bottom:-14px}
.embed .cap{position:relative;z-index:1;display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font:500 12px/1.4 var(--body);color:var(--mute);border-top:1px solid var(--line);background:var(--panel)}
.embed .cap a{color:var(--mute)}
.channel{margin-bottom:28px}
.ratio{position:relative;aspect-ratio:16/9;background:var(--deep)}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.poster{position:absolute;inset:0;width:100%;height:100%;background:var(--deep) center/cover no-repeat;display:grid;place-items:center}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--deep) 70%,transparent),transparent 55%)}
.play{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--ink) 92%,transparent);display:grid;place-items:center;transition:transform .2s}
.poster:hover .play{transform:scale(1.07)}
.play svg{width:22px;height:22px;fill:var(--deep);margin-left:3px}
.vfoot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px}
.video h3{font:500 15px/1.4 var(--body);padding:0;min-width:0}
.video .yt{flex:none;font:500 12px/1.4 var(--body);color:var(--mute)}
.video .yt:hover{color:var(--ink)}
.video h3 a{text-decoration:none}
.video h3 a:hover{text-decoration:underline;text-underline-offset:4px}

/* Home: single + next steps */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5cqi,64px);align-items:center}
.feature .art{border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.feature .art img{aspect-ratio:1;object-fit:cover;width:100%}
.feature .copy{display:flex;flex-direction:column;gap:18px}
.feature h2{letter-spacing:.12em}
.feature p{color:var(--mute);max-width:46ch}
@container jbm (max-width:760px){.feature{grid-template-columns:1fr}.feature .art{max-width:360px}}

/* Song page */
.song-links{display:flex;flex-wrap:wrap;gap:8px}
.song-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
@container jbm (max-width:820px){.song-body{grid-template-columns:1fr}}
.song-body h3{font:500 12px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.pager{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:24px;margin-top:clamp(40px,6vw,72px)}
.pager a{display:flex;flex-direction:column;gap:6px;text-decoration:none;max-width:48%}
.pager a:last-child{text-align:right;margin-left:auto}
.pager small{font:500 11px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.pager b{font:400 clamp(18px,2.4vw,24px)/1.3 var(--display);letter-spacing:.06em}
.pager a:hover b{color:var(--tide)}
.crumb{font:500 12px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);text-decoration:none}
.crumb:hover{color:var(--ink)}

/* About */
.about .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,6cqi,80px);align-items:start}
.about .mark{display:flex;flex-direction:column;gap:18px}
.about .mark img{width:min(260px,60%);border-radius:18px;border:1px solid var(--line)}
.about .quote{font:300 clamp(24px,3cqi,34px)/1.3 var(--display);letter-spacing:.04em}
.about .quote em{font-style:normal;color:var(--tide)}
.about .copy{display:flex;flex-direction:column;gap:18px;max-width:62ch;color:color-mix(in srgb,var(--ink) 86%,var(--mute))}
.credits{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin-top:8px;font:400 13px/1.5 var(--mono)}
.credits dt{color:var(--mute)}
@container jbm (max-width:820px){.about .wrap{grid-template-columns:1fr}}
.prose{max-width:68ch;display:flex;flex-direction:column;gap:16px;color:color-mix(in srgb,var(--ink) 86%,var(--mute))}
.prose h1{font-size:clamp(30px,5vw,48px);letter-spacing:.14em;text-transform:uppercase;line-height:1.1;margin-bottom:8px}
.prose h2{font-size:18px;letter-spacing:.14em;margin-top:16px}
.prose ul{list-style:disc;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.prose a{color:var(--tide)}

/* Footer */
.site-foot{border-top:1px solid var(--line);padding-block:36px}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center;color:var(--mute);font-size:13px}
.site-foot a{color:var(--mute)}
.site-foot a:hover{color:var(--ink)}
.spacer{height:calc(var(--player-h) + env(safe-area-inset-bottom,0px))}

/* Player dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--deep) 94%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.dock .wrap{height:var(--player-h);display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,2fr) auto;gap:16px;align-items:center;position:relative}
.dock img{width:48px;height:48px;border-radius:4px;object-fit:cover}
.dock .now{min-width:0;text-decoration:none}
.dock .now b{display:block;font:500 14px/1.3 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock .now small{display:block;font:400 11px/1.4 var(--mono);color:var(--mute)}
.dock .bar{display:flex;align-items:center;gap:12px;min-width:0}
.dock .bar canvas{flex:1;min-width:0;height:34px;cursor:pointer}
.dock .t{font:400 12px/1 var(--mono);color:var(--mute);font-variant-numeric:tabular-nums;width:34px}
.ctrls{display:flex;align-items:center;gap:6px}
.ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.ic:hover{background:var(--panel)}
.ic svg{width:18px;height:18px;fill:currentColor}
.ic.big{width:46px;height:46px;background:var(--ink);color:var(--deep)}
.ic.big:hover{background:var(--tide)}
.dock .bar .mini{display:none;height:3px;width:100%;background:var(--line)}
.dock .bar .mini i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--tide),var(--ember))}
@media (max-width:760px){.dock .wrap{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
  .dock .bar{grid-column:1/-1;order:3;position:absolute;left:0;right:0;top:-2px;height:3px;padding:0}
  .dock .bar canvas,.dock .t{display:none}.dock .bar .mini{display:block}}

/* Page change */
main.is-loading{opacity:.55;transition:opacity .15s}
.notfound{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}

/* Consent banner (EU/UK visitors) */
.consent{position:fixed;left:0;right:0;bottom:calc(var(--player-h) + env(safe-area-inset-bottom,0px));z-index:40;padding:0 var(--gutter) 12px}
.consent .wrap{max-width:980px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;gap:16px 24px;align-items:center;
  box-shadow:0 20px 50px -20px #000c}
.consent-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.consent-copy b{font:500 15px/1.3 var(--body)}
.consent-copy p{color:var(--mute);font-size:13.5px;line-height:1.5}
.consent-copy a{color:var(--tide)}
.consent-actions{display:flex;gap:8px;flex:none}
.consent .btn{height:40px;padding:0 18px}
@media (max-width:700px){.consent .wrap{flex-direction:column;align-items:stretch}.consent-actions .btn{flex:1;justify-content:center}}
.foot-links{display:flex;gap:18px;align-items:center}
.linklike{color:var(--mute);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.linklike:hover{color:var(--ink)}