
/* Shared by index.html and book.html.
   Layout: one long gig day, sky to stage. Sections shift color from afternoon to night; the header chip is the only real clock. */
:root{
  --sky:#84ABE2; --sky-2:#BCDAF3; --sky-lo:#E9F1F9;
  --navy:#13224A; --navy-2:#3B4C78; --navy-3:#1B2A5E; --pale:#C4D3EE;
  --gold:#F6A04A; --gold-ink:#2A1406; --gold-ink-2:#5A2E0C;
  --violet:#4B1BC4; --violet-2:#2C0F86; --lilac:#E3D8FF;
  --night:#07080F; --black:#050609; --neon:#F8C820; --onair:#FF4D5E;
  --pink:#E0457B; --cyan:#3BA7E0; --mint:#5FD0B5; --purple:#8E44D9;
  --mist:#C9D1F2; --dim:#9AA4D4; --line:#1C2136; --edge:#2E3658; --field:#080A14; --panel:#0E1120;
  --white:#FFFFFF;
  --f-display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --f-mono:'DM Mono',ui-monospace,Menlo,Consolas,monospace;
  --gut:clamp(24px,5.5vw,80px);
  --hdr-h:76px;
  color-scheme:light;
}
@media (max-width:759px){ :root{ --gut:16px; --hdr-h:60px } }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--navy);font-family:var(--f-display);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:50;background:var(--black)}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--neon);outline-offset:3px}
.wrap{max-width:1440px;margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--f-mono);font-size:14px;letter-spacing:.12em;font-weight:500;text-transform:uppercase}
h1,h2{margin:0;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(40px,4.6vw,64px);line-height:1}
section[id]{scroll-margin-top:calc(var(--hdr-h) + env(safe-area-inset-top,0px) + 8px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;border:0;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn svg{flex:none}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-neon{background:var(--neon);color:var(--black);font-weight:800}
.btn-ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.6)}
.btn-sm{height:44px;padding:0 18px;font-size:15px}
.textlink{font-weight:600;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;gap:6px}

/* ---------- header and gig-day chip ---------- */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(5,6,9,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(248,200,32,.2)}
.hdr .wrap{height:var(--hdr-h);display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:24px}
.brand{display:flex}
.brand img{height:56px;width:auto}
.chip-slot{min-width:0;display:flex;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:100%;height:44px;padding:0 14px 0 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:var(--white);text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap;transition:opacity .3s ease,transform .3s ease,visibility 0s,border-color .2s}
.chip:hover{border-color:var(--neon)}
.chip.is-off{opacity:0;transform:translateY(-6px) scale(.96);visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
.dial{flex:none;width:52px;height:28px}
.chip-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cv{display:none}
.chip[data-v="long"] .cv-long,.chip[data-v="mid"] .cv-mid,.chip[data-v="short"] .cv-short{display:inline}
.cv .soft{color:var(--mist);font-weight:500}
.pin-ic{flex:none;opacity:.75}
.onair{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--onair);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 3px rgba(255,77,94,.25)}
.nav{display:flex;gap:24px;font-size:16px;font-weight:600}
.nav a{color:var(--white);text-decoration:none}
.nav a:hover{text-decoration:underline;text-underline-offset:4px}
.book-btn{height:46px}
@media (max-width:1099px){ .nav{display:none} .hdr .wrap{grid-template-columns:auto minmax(0,1fr) auto} }
@media (max-width:759px){
  .hdr .wrap{gap:8px}
  .brand img{height:38px}
  .chip{height:40px;gap:7px;padding:0 10px 0 7px;font-size:14px}
  .dial{width:34px;height:19px}
  .book-btn{height:44px;padding:0 14px;font-size:15px}
  .book-btn .long{display:none}
}
@media (max-width:360px){ .pin-ic{display:none} }
@media (min-width:760px){ .book-btn .short{display:none} }

/* ---------- section breaks: tie-dye and stage lights ---------- */
.loop{animation-play-state:paused!important}
.is-live .loop{animation-play-state:running!important}
.tiedye{position:relative;height:260px;overflow:hidden;background:var(--gold)}
.tiedye-swirl{position:absolute;inset:-120px -140px;background:repeating-radial-gradient(circle at 50% 135%,rgba(255,255,255,.22) 0 7px,rgba(255,255,255,0) 7px 52px),repeating-conic-gradient(from 4deg at 50% 135%,#F8C820 0deg 9deg,#F6A04A 9deg 18deg,#E0457B 18deg 27deg,#8E44D9 27deg 36deg,#3BA7E0 36deg 45deg,#5FD0B5 45deg 54deg);filter:url(#twist);animation:drift 36s ease-in-out infinite alternate}
.tiedye::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--sky-lo) 0%,rgba(233,241,249,0) 34%,rgba(246,160,74,0) 66%,var(--gold) 100%)}
@keyframes drift{from{transform:translate3d(-28px,0,0) rotate(-1.2deg)}to{transform:translate3d(28px,6px,0) rotate(1.2deg)}}
.rig{position:relative;height:300px;overflow:hidden;isolation:isolate}
.rig-a{background:linear-gradient(180deg,var(--gold) 0%,#C2456F 42%,var(--violet) 100%)}
.rig-b{height:440px;background:linear-gradient(180deg,var(--violet) 0%,#1A0B48 50%,var(--night) 100%)}
.truss{position:absolute;left:0;right:0;top:0;height:18px;background:#1A1030;z-index:2}
.beam{position:absolute;top:6px;width:34%;height:125%;margin-left:-17%;transform-origin:50% 0;clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);background:linear-gradient(180deg,var(--c) 0%,rgba(0,0,0,0) 88%);opacity:.7;mix-blend-mode:screen;z-index:1;animation:sway var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes sway{from{transform:rotate(-13deg)}to{transform:rotate(13deg)}}
.fixture{position:absolute;top:4px;width:28px;height:22px;margin-left:-14px;border-radius:0 0 14px 14px;background:#2A1B4A;z-index:3}
.rig-row{position:absolute;z-index:2;left:max(var(--gut),env(safe-area-inset-left,0px));right:max(var(--gut),env(safe-area-inset-right,0px));bottom:28px;display:flex;justify-content:center;gap:20px;align-items:flex-end}
.rig-row img{flex:0 1 150px;min-width:0;width:150px;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:3px;box-shadow:0 10px 24px rgba(0,0,0,.6)}
.rig-row img:nth-child(odd){transform:translateY(-14px) rotate(-1.5deg)}
.rig-row img:nth-child(even){transform:rotate(1.2deg)}
.rig-dim{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .35s}
.rig-b.has-spot .rig-dim{opacity:1}
.rig-spot{position:absolute;left:0;top:0;width:1800px;height:1800px;margin:-900px 0 0 -900px;background:radial-gradient(circle at 50% 50%,rgba(3,4,10,0) 0,rgba(3,4,10,0) 120px,rgba(3,4,10,.84) 250px);transform:translate3d(50vw,220px,0);transition:transform .16s ease-out;will-change:transform}
@media (max-width:759px){
  .tiedye{height:200px}
  .rig,.rig-b{height:220px}
  .rig-row,.rig-dim{display:none}
}

/* ---------- flyers on a pole (shared: poster wall, poster mosaic, ledger receipts) ---------- */
.flyer{position:relative;display:block;aspect-ratio:3/4;max-width:100%;border-radius:3px;background:#13162A;transform:rotate(var(--r));transition:transform .35s cubic-bezier(.2,.8,.25,1.25),box-shadow .35s;box-shadow:0 8px 18px rgba(0,0,0,.5)}
.flyer img{width:100%;height:100%;object-fit:cover;border-radius:3px}
.flyer::before{content:"";position:absolute;z-index:2;top:-7px;left:50%;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.85),var(--pin) 55%);box-shadow:0 2px 3px rgba(0,0,0,.6)}

/* ---------- footer ---------- */
.foot{background:var(--black);color:var(--mist);border-top:1px solid var(--line)}
.foot .wrap{padding-block:40px 56px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px 40px;flex-wrap:wrap}
.foot img{height:50px;width:auto;align-self:flex-start;object-fit:contain;margin-left:-6px}
.foot .l{display:flex;flex-direction:column;gap:12px;max-width:520px}
.foot .r{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.foot .links{display:flex;gap:24px;font-weight:600}
.foot .heart{color:var(--neon)}
.foot .links a{color:var(--white);min-height:44px;display:inline-flex;align-items:center}
@media (max-width:759px){ .foot .r{align-items:flex-start} .foot img{height:42px} }

/* ---------- test panel (prototype only) ---------- */
/* test clock pill (core.js): only while a test date is in effect. Not review-only, so it works on staging. */
.tclock{position:fixed;left:max(12px,env(safe-area-inset-left,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:55;display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;max-width:calc(100vw - 24px);padding:0 4px 0 14px;border-radius:14px;background:#000;border:2px solid var(--neon);color:#FFF;font:500 13px/1.35 var(--f-mono);box-shadow:0 6px 20px rgba(0,0,0,.55)}
.tclock.at-top{bottom:auto}
.tclock-t{padding:6px 0}
.tclock-dot{color:var(--neon)}
.tclock a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--neon);text-decoration:underline;text-underline-offset:3px}
.tclock a:focus-visible{outline:2px solid #FFF;outline-offset:-4px;border-radius:10px}
@media (max-width:520px){ .tclock{font-size:12px} .tclock-dot{display:none} }

/* design-only stand-ins: shown only with ?proof=all, never on the real site */
.dz{display:inline-flex;align-items:center;gap:6px;font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#1A1405;background:#F2C14E;border:1px dashed #6B4E00;padding:4px 7px;border-radius:999px;white-space:nowrap;vertical-align:middle}
.dz-box{outline:2px dashed #F2C14E;outline-offset:4px}
.parked{border:1.5px dashed #F2C14E;border-radius:14px;padding:14px 16px;font:500 13px/1.45 var(--f-mono);color:#F2C14E}

/* ---------- reduced motion (shared) ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .tiedye-swirl,.beam{animation:none!important}
  .chip,.chip.is-off,.flyer{transition:none!important}
}

/* shown only when scripts are off */
.noscript{padding-block:28px}
.noscript p{margin:0;font-size:17px;line-height:1.5;color:var(--white)}
.noscript a{color:var(--neon);font-weight:700}
