/* willyb
   Palette: Asphalt #0B0908, Dust #4A3B2D, Deep Field #1F3B36, Bone #E8E1D3, Gilt #B8863B (once per screen).
   Cormorant Garamond for names and titles, Inter for reading, JetBrains Mono for dates, specs and labels. */

@font-face{font-family:"Cormorant Garamond"; font-style:normal; font-weight:300 400; font-display:swap; src:url(/assets/cormorant-garamond.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond"; font-style:italic; font-weight:300 400; font-display:swap; src:url(/assets/cormorant-garamond-italic.woff2) format("woff2")}
@font-face{font-family:"Inter"; font-style:normal; font-weight:300 500; font-display:swap; src:url(/assets/inter.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono"; font-style:normal; font-weight:400 500; font-display:swap; src:url(/assets/jetbrains-mono.woff2) format("woff2")}
/* a fallback sized close to Cormorant, so the swap doesn't jolt the hero */
@font-face{font-family:"Cormorant fallback"; src:local("Georgia"), local("Times New Roman"); size-adjust:86%; ascent-override:92%; descent-override:28%}

:root{
  --asphalt:#0B0908; --asphalt-2:#120F0D; --asphalt-3:#191512;
  --dust:#4A3B2D; --field:#1F3B36; --bone:#E8E1D3; --gilt:#B8863B; --gilt-lit:#D3A257;
  --dim:rgba(232,225,211,.76); --faint:rgba(232,225,211,.6); --line:rgba(232,225,211,.12); --edge:rgba(232,225,211,.42);
  --serif:"Cormorant Garamond","Cormorant fallback",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --gut:clamp(16px,5vw,56px); --max:72rem;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--asphalt); color:var(--bone); font:300 1rem/1.65 var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden}
img,svg{display:block; max-width:100%}
a{color:inherit; text-underline-offset:.22em; text-decoration-thickness:1px}
a:hover{color:var(--bone)}
:focus-visible{outline:2px solid var(--bone); outline-offset:3px; border-radius:2px}
::selection{background:var(--gilt); color:var(--asphalt)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; z-index:20; background:var(--bone); color:var(--asphalt); padding:.6rem .9rem; border-radius:4px}
.skip:focus{left:8px}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gut)}

/* ---------- type ---------- */
.wm{font-family:var(--serif); font-weight:300; letter-spacing:-.02em; line-height:.86; margin:0}
.wm i{font-style:italic; font-weight:300}
.mono{font-family:var(--mono); font-size:.72rem; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
.label{display:flex; align-items:center; gap:.85rem; margin:0 0 1.6rem; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--dim); font-weight:400}
.label::before{content:''; width:28px; height:2px; background:rgba(232,225,211,.38); flex:0 0 auto}
.title{font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem,7vw,4.6rem); line-height:.95; letter-spacing:-.02em; margin:0}
.title i{font-style:italic}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:48px; padding:.7rem 1.35rem;
  border:1px solid var(--edge); border-radius:2px; font:500 .74rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--bone); background:transparent; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease)}
.btn:hover{border-color:var(--bone); background:rgba(232,225,211,.06)}
.btn.solid{background:var(--bone); color:var(--asphalt); border-color:var(--bone)}
.btn.solid:hover{background:#fff; color:var(--asphalt)}
.btn svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6}
.btns{display:flex; flex-wrap:wrap; gap:.7rem}

/* ---------- top bar ---------- */
.top{position:absolute; inset:0 0 auto; z-index:5}
.top-in{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:72px}
.top .wm{font-size:1.75rem; text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.top nav{display:flex; gap:.2rem}
.top nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 .7rem; font:400 .7rem/1 var(--mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); text-decoration:none}
.top nav a:hover{color:var(--bone)}
.top nav a,.top .wm{text-shadow:0 1px 14px rgba(11,9,8,.95), 0 0 2px rgba(11,9,8,.8)}
@media (max-width:420px){.top nav a{padding:0 .45rem; letter-spacing:.14em}}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:grid; align-items:end; isolation:isolate; overflow:hidden}
.hero-img{position:absolute; inset:0; z-index:-2}
.hero-img img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.hero::before{content:''; position:absolute; inset:0; z-index:-1; background:
  linear-gradient(180deg, rgba(11,9,8,.92) 0%, rgba(11,9,8,.62) 10%, rgba(11,9,8,0) 26%),
  linear-gradient(0deg, var(--asphalt) 0%, rgba(11,9,8,.95) 36%, rgba(11,9,8,.9) 60%, rgba(11,9,8,.45) 72%, rgba(11,9,8,0) 84%)}
.hero .place{text-shadow:0 1px 10px rgba(11,9,8,.9)}
.hero-in{padding-bottom:clamp(2.5rem,8vh,5rem); padding-top:6rem}
.hero .wm{font-size:clamp(5.2rem,27vw,13.5rem)}
.hero .place{margin:0 0 1.1rem}
.tag{font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.45rem,4.4vw,2.1rem); line-height:1.2; margin:.9rem 0 2rem; color:var(--bone)}
.hero .lane{width:2px; height:56px; margin:0 0 1.4rem; background:repeating-linear-gradient(180deg,var(--gilt) 0 14px,transparent 14px 26px)}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:center}
  .hero-img{left:auto; width:58%}
  .hero::before{background:
    linear-gradient(90deg, var(--asphalt) 42%, rgba(11,9,8,.55) 52%, rgba(11,9,8,0) 70%),
    linear-gradient(0deg, var(--asphalt) 0%, rgba(11,9,8,0) 24%),
    linear-gradient(180deg, rgba(11,9,8,.88) 0%, rgba(11,9,8,.4) 12%, rgba(11,9,8,0) 24%)}
  .hero-in{grid-column:1; padding-left:max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); padding-right:0; padding-top:0; padding-bottom:0}
  .hero .wm{font-size:clamp(7rem,11vw,11.5rem)}
}
@media (prefers-reduced-motion:no-preference){
  .hero .lane{animation:drive 2.6s linear infinite; background-size:2px 26px}
  @keyframes drive{from{background-position:0 0} to{background-position:0 26px}}
  .rise{opacity:0; transform:translateY(14px); animation:rise 1.1s var(--ease) forwards}
  .rise.d1{animation-delay:.12s}.rise.d2{animation-delay:.24s}.rise.d3{animation-delay:.36s}
  @keyframes rise{to{opacity:1; transform:none}}
}

/* ---------- sections ---------- */
.sec{padding:clamp(4.5rem,11vw,8rem) 0; border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
.lede{max-width:34rem; color:var(--dim); margin:1.1rem 0 0; font-size:1.02rem}

/* latest release */
.latest{display:grid; gap:2.2rem}
@media (min-width:820px){.latest{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end}}
.latest .meta{margin:0 0 .8rem}

/* track list: a dashboard readout */
.tracks{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.tracks li{border-bottom:1px solid var(--line)}
.tracks a{display:grid; grid-template-columns:2.2rem minmax(0,1fr) auto 1.2rem; align-items:baseline; gap:.9rem; min-height:60px;
  padding:1rem .2rem; text-decoration:none; transition:background .25s var(--ease)}
.tracks a:hover{background:rgba(232,225,211,.035)}
.tracks .n{font:400 .7rem/1 var(--mono); letter-spacing:.12em; color:var(--faint)}
.tracks .t{font-family:var(--serif); font-size:1.65rem; line-height:1.05; font-weight:400}
.tracks .t small{font-family:var(--sans); font-size:.82rem; font-weight:300; color:var(--dim); margin-left:.5rem; white-space:nowrap}
.tracks .d{font:400 .7rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); white-space:nowrap}
.tracks .go{width:1.2rem; height:1.2rem; align-self:center; fill:none; stroke:var(--dim); stroke-width:1.4; transition:transform .3s var(--ease)}
.tracks a:hover .go{transform:translateX(3px); stroke:var(--bone)}
@media (max-width:520px){
  .tracks a{grid-template-columns:minmax(0,1fr) 1.2rem; grid-template-areas:"t go" "d go"; row-gap:.35rem}
  .tracks .n{display:none} .tracks .t{grid-area:t} .tracks .d{grid-area:d} .tracks .go{grid-area:go}
}

/* the set: a player that loads SoundCloud only when asked */
.set{position:relative; display:grid; gap:2rem; align-items:center}
@media (min-width:820px){.set{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.deck{position:relative; border:1px solid var(--line); background:var(--asphalt-2); border-radius:3px; min-height:180px;
  display:grid; align-content:center; gap:1.2rem; padding:clamp(1.25rem,4vw,2rem)}
.deck iframe{width:100%; height:166px; border:0; display:block}
.play{display:flex; align-items:center; gap:1.1rem; background:none; border:0; color:var(--bone); padding:0; cursor:pointer; text-align:left; font:inherit}
.play .disc{width:64px; height:64px; flex:0 0 auto; border-radius:50%; border:1px solid var(--edge); display:grid; place-items:center;
  transition:border-color .25s var(--ease), background .25s var(--ease)}
.play:hover .disc{border-color:var(--bone); background:rgba(232,225,211,.06)}
.play .disc svg{width:20px; height:20px; fill:var(--bone); margin-left:3px}
.play b{display:block; font:400 1.5rem/1.1 var(--serif)}
.play span span{display:block; margin-top:.35rem}
.meter{height:24px; display:flex; gap:3px; align-items:end}
.meter i{flex:1; background:rgba(232,225,211,.16); border-radius:1px}
.deck .alt{font-size:.85rem; color:var(--faint); margin:0}
.deck .alt a{color:var(--dim)}

/* live */
.dates{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.dates li{display:grid; grid-template-columns:7.5rem minmax(0,1fr) auto; gap:1rem; align-items:baseline; padding:1.15rem .2rem;
  border-bottom:1px solid var(--line)}
.dates time{font:400 .74rem/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.dates .ev{font:400 1.5rem/1.15 var(--serif)}
.dates .at{display:block; font-size:.88rem; color:var(--faint); margin-top:.2rem; font-family:var(--sans)}
.dates .tix{font:500 .7rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; padding:.75rem 1rem; border:1px solid var(--edge);
  text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.dates .tix:hover{border-color:var(--bone)}
.dates.past .ev{color:var(--dim)}
@media (max-width:560px){.dates li{grid-template-columns:minmax(0,1fr); gap:.3rem}}
.sub-label{font:400 .7rem/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin:2.6rem 0 .9rem}

/* store + follow + booking */
.row-links{display:flex; flex-wrap:wrap; gap:.55rem}
.chip{display:inline-flex; align-items:center; gap:.55rem; min-height:44px; padding:.55rem 1rem; border:1px solid var(--line); border-radius:2px;
  text-decoration:none; font-size:.92rem; color:var(--dim); transition:border-color .25s var(--ease), color .25s var(--ease)}
.chip:hover{border-color:var(--edge); color:var(--bone)}
.chip svg{width:16px; height:16px}
.book{display:grid; gap:1.4rem}
.book .mail{min-height:44px; display:inline-flex; align-items:center; font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,6.4vw,3.6rem); line-height:1.05; text-decoration:none;
  overflow-wrap:anywhere; letter-spacing:-.01em}
.book .mail:hover{text-decoration:underline; text-decoration-color:var(--gilt)}
.copy{font:500 .7rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase}
.copied{font:400 .72rem/1 var(--mono); letter-spacing:.14em; color:var(--dim); min-height:1em; margin:0}

/* footer */
.foot{border-top:1px solid var(--line); padding:2.4rem 0 3rem; color:var(--faint); font-size:.85rem}
.foot-in{display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:baseline; justify-content:space-between}
.foot .wm{font-size:1.6rem; color:var(--bone)}
.foot a{color:var(--dim)}
.foot p{margin:0}

/* ============================================================
   Link page: one column, thumb-sized
   ============================================================ */
.links-page{min-height:100svh; background:
  radial-gradient(120% 60% at 50% 0%, rgba(74,59,45,.32), rgba(11,9,8,0) 60%), var(--asphalt)}
.lk{max-width:30rem; margin:0 auto; padding:2.2rem var(--gut) 3rem}
.lk-head{display:grid; justify-items:center; text-align:center; gap:.2rem; margin-bottom:2rem}
.lk-head .avatar{width:104px; height:104px; object-fit:cover; object-position:50% 22%; border-radius:50%; border:1px solid var(--line); margin-bottom:1rem}
.lk-head .wm{font-size:3.6rem}
.lk-head .tag{font-size:1.3rem; margin:.4rem auto .6rem}
.lk-head .lane{width:28px; height:2px; background:var(--gilt); margin-top:.9rem}
.plates{display:grid; gap:.6rem; margin:0; padding:0; list-style:none}
.plate{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.8rem; min-height:64px; padding:.85rem 1.1rem;
  border:1px solid var(--line); border-radius:3px; background:rgba(18,15,13,.82); text-decoration:none;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease)}
.plate:hover{border-color:var(--edge); background:var(--asphalt-3)}
.plate:active{transform:scale(.99)}
.plate .k{display:block; font:400 .64rem/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin-bottom:.4rem}
.plate .m{display:block; font-family:var(--serif); font-size:1.45rem; line-height:1.1; font-weight:400}
.plate .s{display:block; font-size:.84rem; color:var(--dim); margin-top:.15rem}
.plate .go{width:18px; height:18px; fill:none; stroke:var(--dim); stroke-width:1.4}
.plate.lead{border-color:var(--edge)}
.pads{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.pads .plate{min-height:56px; padding:.7rem .95rem; grid-template-columns:auto minmax(0,1fr)}
.pads .plate .m{font-family:var(--sans); font-size:.95rem; font-weight:400}
.plate .ico{width:18px; height:18px; color:var(--dim)}
.plate.ic{grid-template-columns:auto minmax(0,1fr) auto}
.lk-book{margin-top:1.6rem; padding:1.2rem 1.1rem; border:1px solid var(--line); border-radius:3px; display:grid; gap:.7rem}
.lk-book a.m{font-family:var(--serif); font-size:1.35rem; text-decoration:none; overflow-wrap:anywhere; min-height:44px; display:flex; align-items:center}
.lk-book .btns .btn{min-height:44px; padding:.6rem 1rem}
.lk-foot{text-align:center; margin-top:2.2rem; font-size:.82rem; color:var(--faint)}
.lk-foot a{color:var(--dim)}
.gap{height:1.2rem}

/* ---------- 404 ---------- */
.lost{min-height:100svh; display:grid; place-items:center; text-align:center; padding:var(--gut)}
.lost .wm{font-size:clamp(4rem,18vw,8rem)}
.lost p{color:var(--dim)}

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

/* ============================================================
   Press kit layout, screen and print
   ============================================================ */
.epk-head{padding:clamp(2rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem); border-bottom:1px solid var(--line);
  background:radial-gradient(90% 70% at 15% 0%, rgba(74,59,45,.35), rgba(11,9,8,0) 65%)}
.epk-grid{display:grid; gap:2.4rem; align-items:end}
@media (min-width:820px){.epk-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:3.5rem}}
.epk-photo{margin:0; border:1px solid var(--line); max-width:26rem}
.epk-photo img{width:100%; height:auto; aspect-ratio:622/1172; object-fit:cover; max-height:72svh}
.epk-id .wm{font-size:clamp(4.6rem,15vw,8.5rem); margin:.6rem 0 0}
.epk-id .tag{margin:.7rem 0 .4rem}
.genre{color:var(--dim); margin:0 0 1.8rem; max-width:36rem}
.kv{margin:0 0 2rem; display:grid; gap:0; border-top:1px solid var(--line)}
.kv div{display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--line)}
.kv dt{font:400 .68rem/1.6 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.kv dd{margin:0; overflow-wrap:anywhere}
.kv a{color:var(--bone)}
.epk-sec{padding:clamp(3rem,7vw,4.5rem) 0; border-bottom:1px solid var(--line)}
.two{display:grid; gap:1rem 3rem; align-items:start}
@media (min-width:820px){.two{grid-template-columns:13rem minmax(0,1fr)} .two > .label{margin-top:.45rem}}
.prose p{margin:0 0 1.1rem; max-width:40rem; font-size:1.06rem; color:var(--bone)}
.prose .one{border-left:2px solid var(--line); padding-left:1rem; color:var(--dim); font-size:.98rem}
.prose .one .mono{display:block; margin-bottom:.35rem; font-size:.66rem}
.figs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin:0}
@media (min-width:640px){.figs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.figs div{background:var(--asphalt); padding:1.2rem 1rem}
.figs dd{margin:0; font:300 clamp(1.9rem,4.5vw,2.6rem)/1 var(--serif)}
.figs dt{margin-top:.55rem; font-size:.82rem; color:var(--dim)}
.figs div{display:flex; flex-direction:column-reverse; justify-content:flex-end}
.note{font-size:.86rem; color:var(--faint); margin:1rem 0 0}
.note a{color:var(--dim)}
.note.strong{color:var(--dim)}
.spec{margin:0; border-top:1px solid var(--line)}
.spec div{display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line)}
.spec dt{font:400 .68rem/1.7 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.spec dd{margin:0}
@media (max-width:480px){.spec div,.kv div{grid-template-columns:minmax(0,1fr); gap:.2rem}}
.plot{margin:2rem 0 0; border:1px solid var(--line); padding:1rem; background:var(--asphalt-2)}
.plot svg{width:100%; height:auto}
.plot .stage{fill:none; stroke:rgba(232,225,211,.2)}
.plot .table{fill:rgba(232,225,211,.04); stroke:rgba(232,225,211,.35)}
.plot .gear{fill:var(--asphalt-3); stroke:rgba(232,225,211,.55)}
.plot .mix{stroke:var(--gilt)}
.plot .mon{fill:var(--asphalt-3); stroke:rgba(232,225,211,.45)}
.plot .dj{fill:none; stroke:rgba(232,225,211,.5)}
.plot .mic{fill:var(--bone)}
.plot .link{stroke:rgba(232,225,211,.45); stroke-dasharray:3 3}
.plot text{font-family:var(--mono); fill:var(--dim); text-anchor:middle; font-size:13px; letter-spacing:.12em}
.plot .cap{font-size:11px; fill:var(--faint); letter-spacing:.3em}
.plot .note{font-size:11px; fill:var(--faint); letter-spacing:.06em}
.photos{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.photos a{display:grid; gap:.6rem; text-decoration:none; color:var(--dim); font-size:.86rem}
.photos img{width:100%; aspect-ratio:3/4; object-fit:cover; border:1px solid var(--line)}
.photos a:hover img{border-color:var(--edge)}
.epk-end{border-bottom:0}
.epk-end .mail{min-height:44px; display:inline-flex; align-items:center; font:300 clamp(1.6rem,5vw,2.8rem)/1.1 var(--serif); text-decoration:none; overflow-wrap:anywhere}

@media print{
  @page{size:Letter; margin:0}
  .epk{padding:.45in .5in .3in}
  html,body{background:var(--asphalt) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  body{font-size:9.5pt}
  .no-print{display:none !important}
  .wrap{max-width:none; padding:0}
  .epk-head{padding:0 0 .25in; background:none}
  .epk-grid{grid-template-columns:2.3in minmax(0,1fr); gap:.35in; align-items:start}
  .epk-photo img{max-height:3.9in}
  .epk-id .wm{font-size:64pt}
  .epk-sec{padding:.2in 0; break-inside:avoid}
  .two{grid-template-columns:1.35in minmax(0,1fr); gap:.3in}
  .prose p{font-size:9.5pt}
  .figs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .figs dd{font-size:20pt}
  .plot{padding:.08in}
  .plot svg{max-height:2.1in}
  .tracks a{min-height:0; padding:.035in 0}
  .tracks .t{font-size:12pt}
  a{text-decoration:none}
  .epk-sec{padding:.11in 0}
  section:has(#live-h){break-before:page; padding-top:.45in}
  .spec div{padding:.045in 0}
  .dates li{padding:.05in 0}
  .dates .ev{font-size:12pt}
  .note{margin-top:.06in; font-size:8pt}
  .plot{margin-top:.1in}
  .plot svg{max-height:1.45in; margin:0 auto}
  .label{margin-bottom:.08in}
  .epk-end .mail{font-size:18pt}
}

/* ============================================================
   His logo (from willybmusic.com), contacts, the mailing list, /links cards
   ============================================================ */
.logo{display:block; width:100%; height:auto}
.logo-link{display:inline-flex; align-items:center; min-height:44px; width:118px; filter:drop-shadow(0 1px 10px rgba(11,9,8,.9))}
.hero-logo{margin:0; width:min(100%, 34rem)}
.hero-logo .logo{filter:drop-shadow(0 2px 18px rgba(11,9,8,.7))}
@media (min-width:900px){.hero-logo{width:min(100%, 30rem)}}
.foot-logo{width:110px; height:auto; display:block}
.foot .foot-logo{margin:0}
.lost-logo{margin:1rem auto; width:min(80vw, 22rem)}
.epk-logo{margin:.8rem 0 0; width:min(100%, 30rem)}

/* release with its artwork */
.release{display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr); gap:1.4rem; align-items:end}
.release .art{width:100%; height:auto; aspect-ratio:1; object-fit:cover; border:1px solid var(--line)}
@media (min-width:640px){.release{grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:2rem}}
@media (max-width:420px){.release{grid-template-columns:minmax(0,1fr)} .release .art{max-width:15rem}}

/* contacts */
.contacts{display:grid; gap:2.2rem}
@media (min-width:820px){.contacts{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:3rem}}
.contact .role{margin:0 0 .5rem; font-size:.68rem}
.contact .who{margin:0 0 .3rem; color:var(--dim)}
.contact .mail{display:inline-flex; align-items:center; min-height:44px; font:300 clamp(1.5rem,5vw,2.6rem)/1.1 var(--serif);
  text-decoration:none; overflow-wrap:anywhere; letter-spacing:-.01em; margin-bottom:.9rem}
.contact .mail:hover{text-decoration:underline; text-decoration-color:var(--edge)}
.contact.small .mail{font-size:1.3rem; margin-bottom:.6rem}
.contact.small .btn{min-height:44px; padding:.55rem .9rem}
.contact .copied{margin-top:.5rem}
.contacts .contact:nth-child(2) .mail{font-size:clamp(1.25rem,3.6vw,1.7rem)}

/* mailing list */
.signup{display:grid; gap:.4rem; max-width:40rem}
.signup .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.s-head{margin:0; font:300 clamp(2rem,6vw,3.2rem)/1 var(--serif); letter-spacing:-.01em}
.s-sub{margin:.2rem 0 1rem; color:var(--dim)}
.s-row{display:flex; gap:.6rem; flex-wrap:wrap}
.s-row input{flex:1 1 14rem; min-width:0; min-height:48px; padding:.7rem .9rem; border:1px solid var(--edge); border-radius:2px;
  background:var(--asphalt-2); color:var(--bone); font:400 16px/1.2 var(--sans)}
.s-row input::placeholder{color:var(--faint)}
.s-row input:focus{outline:none; border-color:var(--bone); box-shadow:0 0 0 3px rgba(232,225,211,.12)}
.s-row .btn{min-width:6.5rem}
.s-note{margin:.5rem 0 0; min-height:1.3em; font-size:.9rem; color:var(--dim)}
.s-note.err{color:var(--gilt-lit)}
.signup.done .s-row{display:none}

/* /links: cards, socials, share */
.lk-head{position:relative}
.lk-head .avatar{width:104px; height:104px; object-fit:cover; object-position:50% 22%; border-radius:50%; border:1px solid var(--line); margin-bottom:1.1rem}
.lk-logo{margin:0; width:min(78vw, 17rem)}
.lk-head .tag{max-width:none; font-size:1.18rem; line-height:1.35; margin:.9rem 0 .6rem}
.socials{display:flex; justify-content:center; gap:.55rem; margin-top:1.1rem}
.socials a{width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--dim);
  transition:border-color .25s var(--ease), color .25s var(--ease)}
.socials a:hover{border-color:var(--edge); color:var(--bone)}
.socials .ico{width:19px; height:19px}
.share{position:absolute; right:0; top:0; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:50%; background:rgba(18,15,13,.7); color:var(--dim); cursor:pointer}
.share:hover{color:var(--bone); border-color:var(--edge)}
.share svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.share-note{text-align:center; min-height:1em; margin-top:.6rem}
.stack{display:grid; gap:.75rem}
.stack-h{margin:1.1rem 0 .6rem; font-size:.66rem; color:var(--faint)}
.card{border:1px solid var(--line); border-radius:3px; background:rgba(18,15,13,.82); padding:1.1rem}
.card .k{margin:0 0 .35rem; font:400 .64rem/1.3 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--faint)}
.card .m{margin:0; font:400 1.6rem/1.1 var(--serif)}
.card .s{margin:.25rem 0 0; font-size:.86rem; color:var(--dim)}
.release-card{display:grid; grid-template-columns:96px minmax(0,1fr); gap:1rem; align-items:center}
.release-card .art{width:96px; height:96px; object-fit:cover; border-radius:2px}
.chips{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.75rem}
.chips .chip{min-height:44px; padding:.45rem .85rem; font-size:.86rem}
.set-card{min-height:0; gap:.9rem; padding:1.1rem}
.set-card .play{margin-top:.2rem}
.set-card .disc{width:52px; height:52px}
.set-card .play b{font-size:1.25rem}
.set-card iframe{height:166px}
.card .signup{max-width:none}
.card .s-head{font-size:1.6rem}
.card .s-sub{font-size:.88rem; margin-bottom:.7rem}
.lk-book .contacts{gap:1.4rem}
.lk-book .stack-h{margin-top:0}
@media (prefers-reduced-motion:no-preference){
  @keyframes lift{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
  .lk-head,.stack > *{animation:lift .8s var(--ease) both}
  .stack > *:nth-child(1){animation-delay:.08s}.stack > *:nth-child(2){animation-delay:.14s}
  .stack > *:nth-child(3){animation-delay:.2s}.stack > *:nth-child(4){animation-delay:.26s}
  .stack > *:nth-child(5){animation-delay:.32s}.stack > *:nth-child(6){animation-delay:.38s}
}
@media print{.epk-logo{width:3in} .contacts{grid-template-columns:1fr 1fr; gap:.2in} .contact .btns,.contact .copied{display:none} .contact .mail{font-size:14pt; min-height:0; margin:0}}
.release-card .chips{grid-column:1/-1; margin-top:.1rem}
.release-card .chips .chip{flex:1 1 auto; justify-content:center}
.lk-foot a{display:inline-flex; align-items:center; min-height:44px}
@media print{.epk-id .tag{font-size:15pt; margin:.06in 0 .04in} .epk-logo{width:2.6in; margin-top:.05in} .genre{margin-bottom:.1in} .kv{margin-bottom:0} .kv div{padding:.045in 0} .epk-head{padding-bottom:.12in} .prose .one{display:none}}

/* the tagline: two lines in two cuts of the serif */
.tag .tag-a,.tag .tag-b{display:block}
.tag .tag-a{font-style:normal; font-weight:400; letter-spacing:.01em}
.tag .tag-b{font-style:italic; font-weight:300; color:var(--dim); margin-top:.1em}

/* Well Made Plays, at the bottom of every page */
.wmp{margin:.4rem 0 0; font:400 .7rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.wmp a{display:inline-flex; align-items:center; min-height:44px; color:var(--dim); text-transform:none; letter-spacing:.04em; font-family:var(--sans); font-size:.85rem; margin-left:.3rem}
.foot-in .wmp{flex-basis:100%}
.lost .wmp{margin-top:1.4rem}
.epk .kv a{color:var(--bone)}

/* ============================================================
   Review round 2 (2 Oct 2026)
   ============================================================ */
/* top bar: full bone, and a shade behind it where it crosses the photo */
.top{background:linear-gradient(180deg, rgba(11,9,8,.78) 0%, rgba(11,9,8,.35) 60%, rgba(11,9,8,0) 100%)}
.top nav a{color:var(--bone)}
.skip:hover{color:var(--asphalt)}
/* the hero logo stays clear of the photo on desktop */
@media (min-width:900px){.hero-logo{width:min(100%, 25rem)}}
/* the lane drives a few times, then rests */
@media (prefers-reduced-motion:no-preference){.hero .lane{animation-iteration-count:4}}
/* small labels: never under 12px */
.mono,.label,.sub-label,.stack-h,.card .k,.plate .k,.kv dt,.spec dt,.contact .role,.tracks .n,.tracks .d,.dates time{font-size:.75rem}
/* the set player keeps its size when SoundCloud loads */
.sec .deck{min-height:250px}
/* signup: a real heading, the site's focus ring, errors in bone */
h2.s-head{font-weight:300}
.s-row input:focus{box-shadow:none}
.s-row input:focus-visible{outline:2px solid var(--bone); outline-offset:3px}
.s-row input[aria-invalid="true"]{border-color:var(--bone)}
.s-note.err{color:var(--bone)}
/* contacts: the address opens mail; Copy is the one button */
.contact .btns{margin-top:0}
/* section rhythm on the homepage */
#music{padding-top:clamp(4rem,9vw,6.5rem)}
#live,#list{padding:clamp(3.2rem,7vw,5rem) 0}
#contact{padding-bottom:clamp(3rem,6vw,4rem)}
/* /links: the first screen leads to the music */
.lk-head{margin-bottom:1.4rem}
.lk-head .avatar{width:72px; height:72px; margin-bottom:.8rem}
.lk-logo{width:min(70vw, 15rem)}
.lk-head .tag{margin:.7rem 0 .4rem}
.lk-follow{display:flex; justify-content:center}
.lk-follow .socials{margin-top:0}
.pads .plate .m{white-space:nowrap; font-size:.92rem}
/* the press kit on a phone: who and how to book first, the photo after */
@media screen and (max-width:819px){
  .epk-id{order:-1}
  .epk-photo{max-width:none}
  .epk-photo img{aspect-ratio:auto; height:42svh; max-height:none; object-position:50% 25%}
}
/* 404 */
.lost-logo{display:block; margin:1rem auto; width:min(80vw, 22rem)}
.lost h1{font:300 clamp(1.6rem,5vw,2.4rem)/1.1 var(--serif); margin:.4rem 0 1.4rem}

/* ===== one-page EPK print (prototype) ===== */
@media print{
  @page{size:Letter; margin:0}
  html,body{font-size:7.6pt; line-height:1.38}
  .epk{padding:.38in .42in .3in; column-count:2; column-gap:.32in; column-fill:auto; height:10.3in}
  .epk-head{column-span:all; padding:0 0 .14in; margin-bottom:.12in; border-bottom:1px solid var(--line)}
  .epk-grid{grid-template-columns:1.55in minmax(0,1fr); gap:.28in; align-items:start}
  .epk-photo img{max-height:2.25in}
  .epk-logo{width:2.3in; margin:.03in 0 0}
  .epk-id .mono{font-size:6.2pt}
  .epk-id .tag{font-size:12.5pt; margin:.05in 0 .03in; line-height:1.2}
  .genre{margin:0 0 .07in; font-size:7.6pt}
  .kv{grid-template-columns:1fr 1fr; column-gap:.2in; border-top:0}
  .kv div{grid-template-columns:1fr; gap:.01in; padding:.035in 0; border-bottom:1px solid var(--line)}
  .kv dt{font-size:5.8pt; line-height:1.3}
  .kv dd{font-size:7.6pt}
  .epk-sec{padding:0 0 .1in; margin:0 0 .1in; border-bottom:1px solid var(--line); break-inside:avoid}
  section:has(#live-h){break-before:auto; padding-top:0}
  .two{display:block}
  .two > .label{margin:0 0 .05in; font-size:6.2pt}
  .label::before{width:16px}
  .prose p{font-size:7.6pt; margin:0 0 .05in}
  .figs{grid-template-columns:repeat(4,minmax(0,1fr))}
  .figs div{padding:.05in .06in}
  .figs dd{font-size:12pt}
  .figs dt{font-size:6pt; margin-top:.02in}
  .note{font-size:6.4pt; margin-top:.04in}
  .tracks a{padding:.02in 0; gap:.06in; grid-template-columns:.32in minmax(0,1fr) auto}
  .tracks .t{font-size:9.5pt}
  .tracks .t small{font-size:6.4pt}
  .tracks .d,.tracks .n{font-size:5.8pt}
  .tracks .go{display:none}
  .dates li{grid-template-columns:.95in minmax(0,1fr); padding:.035in 0; gap:.06in}
  .dates .ev{font-size:9.5pt}
  .dates .at{font-size:6.6pt}
  .dates time{font-size:5.8pt}
  .dates .tix{display:none}
  .spec div{grid-template-columns:.78in minmax(0,1fr); gap:.06in; padding:.03in 0}
  .spec dt{font-size:5.8pt}
  .spec dd{font-size:7.4pt}
  .plot{margin:.06in 0 0; padding:.04in}
  .plot svg{max-height:1.05in}
  .plot figcaption{display:none}
  .epk-end{display:none}
}
@media print{
  html,body{font-size:8.3pt}
  .prose p,.genre,.kv dd{font-size:8.3pt}
  .spec dd{font-size:8pt}
  .epk-photo img{max-height:2.5in}
  .epk-id .tag{font-size:14pt}
  .epk-sec{padding-bottom:.12in; margin-bottom:.12in}
  .tracks .t,.dates .ev{font-size:10.5pt}
  .plot svg{max-height:1.2in}
}

/* the mailing list, on every page */
.join{margin:1.1rem 0 0; font:400 .75rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase}
.join a{display:inline-flex; align-items:center; min-height:44px; color:var(--bone); text-underline-offset:.35em}
.lost-list{max-width:26rem; margin:2rem auto 0; text-align:left}
.lost-list .s-head{font-size:1.6rem}

/* ---------- store ---------- */
.store{padding-top:clamp(7.5rem,15vw,10rem)}
.merch{list-style:none; margin:2.8rem 0 0; padding:0; display:grid; gap:2rem 1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr))}
@media (min-width:900px){.merch{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:2.4rem 1.4rem}}
.merch a{display:grid; gap:.5rem; text-decoration:none; color:var(--bone)}
.m-art{display:grid; place-items:center; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line); border-radius:3px;
  background:radial-gradient(120% 85% at 50% 0%, var(--asphalt-3), var(--asphalt-2) 72%);
  transition:border-color .35s var(--ease)}
.m-art img{width:100%; height:100%; object-fit:cover}
.m-art .m-blank{width:44%; opacity:.42; transition:opacity .35s var(--ease)}
.merch a:hover .m-art{border-color:var(--edge)}
.merch a:hover .m-blank{opacity:.7}
.m-name{margin-top:.45rem; font:400 clamp(1.2rem,3.6vw,1.5rem)/1.1 var(--serif); letter-spacing:-.01em}
.m-meta{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.2rem 1rem; font:400 .66rem/1.4 var(--mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.m-price{color:var(--dim)}
.m-buy{display:inline-flex; align-items:center; gap:.5rem; margin-top:.2rem; font:400 .66rem/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
.m-buy svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; transition:transform .35s var(--ease)}
.merch a:hover .m-buy{color:var(--bone)}
.merch a:hover .m-buy svg{transform:translateX(3px)}
.store .note{margin-top:2.8rem}