/* Conobi — site styles
   Palette taken from a DJ's 3-band waveform: sub (blue), mids (sodium amber), highs (bone). */
:root{color-scheme:dark;
  --ink:#071019;      /* page */
  --deep:#0E1D29;     /* raised surfaces */
  --line:#20323F;     /* rules, borders */
  --sub:#3D7BFF;      /* low band */
  --sodium:#F3A53C;   /* mid band, actions */
  --bone:#ECE5D5;     /* text, high band */
  --mute:#8A979E;     /* secondary text */
  --display:"Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --max:1180px;
  --gut:clamp(20px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font:400 1.0625rem/1.6 var(--body);font-feature-settings:"tnum" 0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-color:var(--sodium);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--sodium)}
:focus-visible{outline:2px solid var(--sodium);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--sodium);color:var(--ink);padding:8px 12px;z-index:10}
.skip:focus{left:8px}

/* Type scale */
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(2.6rem,6vw,4.5rem)}
h3{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:700}
p{margin:0 0 1em;max-width:62ch}
.lede{font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.5;color:var(--bone)}
.quiet{color:var(--mute)}

/* Header */
.top{position:sticky;top:0;z-index:5;background:rgba(7,16,25,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.mark{font-family:var(--display);font-weight:900;font-size:1.6rem;letter-spacing:.04em;text-decoration:none}
.nav{display:flex;gap:clamp(14px,2.4vw,32px);align-items:center}
.nav a{text-decoration:none;font-size:.98rem;color:var(--mute)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--bone)}
.nav .btn{color:var(--ink)}
.menu-toggle{display:none;background:none;border:1px solid var(--line);color:var(--bone);font:inherit;padding:6px 12px;border-radius:4px}
@media (max-width:760px){
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--ink);border-bottom:1px solid var(--line);padding:8px var(--gut) 20px}
  .nav.open{display:flex}
  .nav a{padding:12px 0;font-size:1.15rem;width:100%}
  .nav .btn{margin-top:8px;width:auto}
}

/* Buttons */
.btn{display:inline-block;background:var(--sodium);color:var(--ink);font-weight:600;text-decoration:none;padding:.8em 1.3em;border-radius:3px;border:0;font:600 1rem/1 var(--body);cursor:pointer}
.btn:hover{background:var(--bone);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--bone);color:var(--bone)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Hero: the name sits on the waveform */
.hero{padding:clamp(40px,8vh,90px) 0 0;overflow:hidden}
.name{font-family:var(--display);font-weight:900;font-size:clamp(5.5rem,29vw,26rem);line-height:.78;letter-spacing:-.02em;margin:0 0 -.06em;color:var(--bone);position:relative;z-index:2;mix-blend-mode:difference}
.deck{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(var(--deep),var(--ink))}
.deck svg{display:block;width:100%;height:clamp(110px,16vw,190px)}
.playhead{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--sodium);box-shadow:0 0 12px var(--sodium);animation:play 15s linear infinite}
@keyframes play{from{transform:translateX(0)}to{transform:translateX(calc(var(--deck-w,100vw) - 2px))}}
.readout{display:flex;justify-content:space-between;gap:16px;font-size:.9rem;color:var(--mute);padding:10px 0 0;font-variant-numeric:tabular-nums}
.readout b{color:var(--bone);font-weight:600}
.hero-copy{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--gut);padding:clamp(36px,6vw,64px) 0 clamp(56px,8vw,96px);align-items:end}
@media (max-width:820px){.hero-copy{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.playhead{animation:none;left:38%}}

/* Sections */
.sec{padding:clamp(64px,10vw,120px) 0;border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(28px,4vw,48px);flex-wrap:wrap}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split.flip > :first-child{order:2}
@media (max-width:820px){.split{grid-template-columns:1fr}.split.flip > :first-child{order:0}}

/* Duotone: every photo is remapped to ink -> sodium so mixed lighting reads as one set */
.duo{position:relative;background:var(--sodium);overflow:hidden;aspect-ratio:4/5;isolation:isolate}
.duo.wide{aspect-ratio:16/10}
.duo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.3) brightness(1.1);mix-blend-mode:multiply}
.duo::after{content:"";position:absolute;inset:0;background:var(--deep);mix-blend-mode:lighten;pointer-events:none}
.duo.missing{background:linear-gradient(160deg,var(--deep),var(--ink) 55%,#2a1d0b)}
.duo.missing img{display:none}
.duo.missing::before{content:attr(data-label);position:absolute;left:18px;bottom:16px;color:var(--mute);font-size:.9rem;z-index:2}

/* Venue roll: plain, large, wraps like a flyer's lineup */
.venues{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.1em .6em;font-family:var(--display);font-weight:700;font-size:clamp(2rem,5vw,3.6rem);line-height:1.05}
.venues li{color:var(--bone)}
.venues li span{color:var(--mute);font-weight:600}
.venues li:not(:last-child)::after{content:" /";color:var(--line)}

/* Release block */
.release{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:820px){.release{grid-template-columns:1fr}}
.cover{aspect-ratio:1;background:var(--deep);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover}
.links{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.links li{border-bottom:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;padding:14px 0;text-decoration:none}
.links a span{color:var(--mute)}
.links a:hover span{color:var(--sodium)}

/* Event types on the booking page: a two-column index, not cards */
.types{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--gut);border-top:1px solid var(--line)}
.types > div{padding:22px 0;border-bottom:1px solid var(--line)}
.types h3{margin-bottom:6px}
.types p{margin:0;color:var(--mute)}
@media (max-width:700px){.types{grid-template-columns:1fr}}

/* Form */
form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:.95rem;color:var(--mute)}
input,select,textarea{font:inherit;color:var(--bone);background:var(--deep);border:1px solid var(--line);border-radius:3px;padding:.75em .85em;width:100%}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sodium)}
.formstate{grid-column:1/-1;margin:0;min-height:1.5em}
.formstate.err{color:var(--sodium)}
@media (max-width:640px){form{grid-template-columns:1fr}}

/* Embeds */
.embed{border:1px solid var(--line);background:var(--deep)}
.embed iframe{display:block;width:100%;border:0}

/* Rider / facts table */
.facts{width:100%;border-collapse:collapse}
.facts th,.facts td{text-align:left;vertical-align:top;padding:14px 0;border-bottom:1px solid var(--line)}
.facts th{width:34%;color:var(--mute);font-weight:500;padding-right:20px}

/* Footer */
.foot{border-top:1px solid var(--line);padding:40px 0 56px;color:var(--mute);font-size:.95rem}
.foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--bone)}

/* Page intro for inner pages */
.intro{padding:clamp(56px,10vw,120px) 0 clamp(40px,6vw,64px)}
.intro h1{font-size:clamp(3.6rem,11vw,8.5rem);font-weight:900;margin-bottom:24px}

/* Cover art not added yet: show the title in place of the image */
.cover{position:relative}
.cover.missing img{display:none}
.cover.missing::before{content:attr(data-label);font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,5vw,3.6rem);line-height:.9;text-align:center;color:var(--ink);padding:24px}
.cover.missing{background:radial-gradient(circle at 50% 60%,var(--sodium),#7a3d12 55%,var(--ink) 100%)}