/* JB Flores & Wreckless Heart — MWS concept rebuild
   Direction: South Texas classic country. Weathered show-bill, not neon Nashville. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* sampled from the band's own GW's Post Oak flyer */
  --ink:#130A04;          /* warm near-black, 52% of the flyer */
  --ink2:#1D1108;
  --panel:#28180D;
  --wood:#56270F;         /* burnt sienna, 17% */
  --wood2:#6F4A2B;
  --bone:#EFDCC0;         /* the cream sign panels */
  --cream:#D6BE9C;
  --tan:#B88555;
  --muted:#8C7358;
  --amber:#CE9A48;        /* string-light gold */
  --amber-d:#A8762E;
  --ember:#CE6216;        /* lamp glow */
  --red:#B02A10;          /* barn red */
  --red-d:#8C1F0A;
  --line:rgba(239,220,192,.15); --line2:rgba(239,220,192,.08);
  --max:1180px;
  --fd:'Vollkorn',Georgia,serif;
  --fm:'Staatliches',Impact,sans-serif;   /* condensed poster caps */
  --fs:'Vollkorn',Georgia,serif;
  --fb:'Inter',system-ui,-apple-system,sans-serif;
  --hh:92px;   /* taller than a text navbar: the crest needs vertical room */
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--fb);background:var(--ink);color:var(--cream);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  background-image:
    radial-gradient(1200px 460px at 50% -8%,rgba(206,98,22,.16),transparent 64%),
    radial-gradient(760px 420px at 88% 18%,rgba(206,154,72,.09),transparent 62%),
    radial-gradient(700px 400px at 6% 92%,rgba(86,39,15,.34),transparent 66%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(90deg,rgba(239,220,192,.022) 0 1px,transparent 1px 9px);}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}

/* ---------- header ---------- */
/* opaque, not translucent: the logo art carries its own dark backdrop, and anything
   bright scrolling behind a semi-transparent bar would reveal it as a patch */
.hdr{position:sticky;top:0;z-index:50;background:var(--ink);
  border-bottom:1px solid var(--line)}
.hdr .row{display:flex;align-items:center;gap:1rem;height:var(--hh);max-width:var(--max);margin:0 auto;padding:0 1.25rem}
/* the band's own crest, keyed off their promo art — same file as the footer.
   76px is the floor at which the winged heart still reads; below that the
   ribbon detail turns to mush, which is why --hh is taller than a text navbar. */
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{display:block;height:76px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
.nav a{text-decoration:none;font-size:.83rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--cream)}
.nav a:hover{color:var(--amber)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;margin-left:auto}
.burger span{display:block;width:26px;height:2.5px;background:var(--bone);border-radius:2px;transition:transform .25s,opacity .25s}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:.85rem 1.6rem;border-radius:2px;text-decoration:none;
  font-weight:700;font-size:.87rem;letter-spacing:.09em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--bone);transition:.18s ease}
.btn--amber{background:var(--amber);border-color:var(--amber);color:#15100a}
.btn--amber:hover{background:var(--amber-d);border-color:var(--amber-d)}
.btn--ghost:hover{border-color:var(--amber);color:var(--amber)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:82vh;min-height:82dvh;display:flex;align-items:center;
  padding:3.5rem 0 3rem;overflow:hidden;border-bottom:1px solid var(--line)}
.hero__bg{position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(100deg,rgba(17,21,27,.94) 12%,rgba(17,21,27,.62) 52%,rgba(17,21,27,.42) 100%),
    url('/assets/hero-band.jpg');
  background-size:cover;background-position:center 28%}
@media(max-width:760px){.hero__bg{background-image:linear-gradient(180deg,rgba(17,21,27,.72),rgba(17,21,27,.95) 68%),
    url('/assets/hero-band.jpg');background-position:center 22%}}
.hero__in{position:relative;z-index:1;max-width:820px}
.kick{font-family:var(--fs);font-style:italic;font-weight:600;font-size:1.12rem;letter-spacing:.10em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:.7rem}
.hero h1{font-family:var(--fd);font-weight:600;font-size:clamp(2.6rem,7.6vw,5.4rem);line-height:1.04;
  letter-spacing:-.005em;color:var(--bone);overflow-wrap:break-word;hyphens:none;
  text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hero p.lede{font-size:clamp(1rem,2.1vw,1.18rem);margin:1.15rem 0 1.9rem;max-width:60ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:.7rem}
.tagrow{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- sections ---------- */
/* the header is sticky, so anchor jumps must clear it or the heading lands
   underneath the bar. Tied to --hh so it tracks the header height everywhere. */
#music,#about,#contact,#shows{scroll-margin-top:calc(var(--hh) + 14px)}
.sec{padding:4.2rem 0;border-bottom:1px solid var(--line2)}
.sec--alt{background:rgba(24,32,48,.42)}
.sec-head{text-align:center;max-width:60ch;margin:0 auto 2.4rem}
.sec-head .kicker{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:.5rem}
.sec-head h1,.sec-head h2{font-family:var(--fd);font-weight:600;letter-spacing:0;
  font-size:clamp(1.8rem,4.6vw,2.8rem);color:var(--bone);line-height:1.14}
.sec-head p{margin-top:.85rem;color:var(--cream)}

/* ---------- single / release ---------- */
.release{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center}
@media(min-width:860px){.release{grid-template-columns:.85fr 1.15fr;gap:3rem}}
.release .art{aspect-ratio:1;background:linear-gradient(145deg,var(--panel),var(--ink2));
  border:1px solid var(--line);border-radius:3px;display:grid;place-items:center;text-align:center;padding:2rem}
.release .art .ph{font-family:var(--fd);font-weight:600;font-size:1.25rem;color:var(--amber);line-height:1.25}
.release .art small{display:block;margin-top:.7rem;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.release h3{font-family:var(--fd);font-weight:600;letter-spacing:.01em;font-size:clamp(1.5rem,3.6vw,2.2rem);color:var(--bone);line-height:1.12}
.release .streams{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.streams a{padding:.6rem 1.05rem;border:1px solid var(--line);border-radius:2px;text-decoration:none;
  font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.streams a:hover{border-color:var(--amber);color:var(--amber)}

/* ---------- shows ---------- */
.shows{display:flex;flex-direction:column;gap:.7rem}
.show{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center;
  border:1px solid var(--line);border-radius:3px;padding:1rem 1.1rem;background:rgba(27,36,48,.5)}
@media(min-width:760px){.show{grid-template-columns:auto 1fr auto;gap:1.5rem}}
.show__date{text-align:center;min-width:62px;border-right:1px solid var(--line);padding-right:1.1rem}
.show__date .mo{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.show__date .dy{font-family:var(--fd);font-weight:600;font-size:1.65rem;color:var(--bone);line-height:1}
.show__what h3{font-family:var(--fd);font-weight:600;letter-spacing:.01em;font-size:1.06rem;color:var(--bone);line-height:1.2}
.show__what .where{font-size:.85rem;color:var(--muted);margin-top:.2rem}
.show__what .note{font-size:.82rem;color:var(--cream);margin-top:.4rem;font-style:italic}
.show__go{display:flex;gap:.45rem;flex-wrap:wrap}
.show__go a{font-size:.72rem;padding:.5rem .8rem;border:1px solid var(--line);border-radius:2px;
  text-decoration:none;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.show__go a:hover{border-color:var(--amber);color:var(--amber)}

/* ---------- booking cards ---------- */
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{border:1px solid var(--line);border-radius:3px;padding:1.5rem 1.4rem;background:rgba(27,36,48,.45)}
.card h3{font-family:var(--fd);font-weight:600;letter-spacing:.02em;font-size:1.1rem;color:var(--amber);margin-bottom:.5rem}
.card p{font-size:.92rem}

/* ---------- form ---------- */
.form{max-width:720px;margin:0 auto}
.f2{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:680px){.f2{grid-template-columns:1fr 1fr}}
.field{margin-bottom:1.1rem}
label{display:block;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);margin-bottom:.4rem}
.req{color:var(--red)}
input,select,textarea{width:100%;padding:.8rem .9rem;background:rgba(244,237,223,.05);
  border:1px solid var(--line);border-radius:2px;color:var(--bone);font:inherit;font-size:.95rem}
input:focus,select,textarea:focus{outline:none;border-color:var(--amber)}
textarea{min-height:120px;resize:vertical}
select option{background:var(--ink2);color:var(--bone)}
.hp{position:absolute;left:-9999px}
.help{display:block;margin-top:.35rem;font-size:.76rem;color:var(--muted)}
.submit{text-align:center;margin-top:1.5rem}
.submit small{display:block;margin-top:.7rem;font-size:.78rem;color:var(--muted)}
.ok{display:none;text-align:center;border:1px solid var(--amber);border-radius:3px;padding:2rem 1.5rem;background:rgba(207,160,69,.08)}
.ok.show{display:block}
.ok .big{font-family:var(--fd);font-weight:600;font-size:1.35rem;color:var(--bone);margin-bottom:.5rem}
.ok.err{border-color:var(--red);background:rgba(168,69,44,.1)}

/* ---------- mailing list ---------- */
.ml{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;max-width:520px;margin:1.5rem auto 0}
.ml input{flex:1 1 220px}

/* ---------- footer ---------- */
footer{padding:3.2rem 0 2.4rem;text-align:center;border-top:1px solid var(--line)}
/* full crest lockup — the winged-heart version, since the footer has room for it */
footer .fbrand img{display:block;width:min(280px,72vw);height:auto;margin:0 auto}
.fsoc{display:flex;gap:.7rem;justify-content:center;margin:1.4rem 0}
.fsoc a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(244,237,223,.06);border:1px solid var(--line);color:var(--cream);text-decoration:none;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;transition:.18s}
.fsoc a:hover{background:var(--amber);color:#15100a;border-color:var(--amber);transform:translateY(-3px)}
.frow{color:var(--muted);font-size:.82rem;margin-top:.4rem}
.flinks{margin-top:1rem;font-size:.85rem}
.flinks a{color:var(--cream);text-decoration:none;margin:0 .1rem}
.flinks a:hover{color:var(--amber)}
.legal{font-size:.74rem;color:#6E6858;margin-top:1.3rem;line-height:1.8}
.legal a{color:var(--amber);text-decoration:none;font-weight:600}

/* ---------- mobile: captive full-page nav ---------- */
@media(max-width:940px){
  .nav{position:fixed;inset:0;width:100%;height:100dvh;flex-direction:column;
    align-items:center;justify-content:center;gap:.4rem;background:var(--ink);
    padding:92px 24px 44px;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .28s ease,visibility .28s;z-index:55;margin-left:0}
  .nav.open{opacity:1;visibility:visible;pointer-events:auto}
  .nav a{font-family:var(--fd);font-weight:600;font-size:1.5rem;letter-spacing:.02em;text-transform:uppercase;padding:.4rem 0}
  .brand{position:relative;z-index:60}
  .brand img{height:58px}
  :root,body{--hh:76px}
  .burger{display:flex;z-index:60}
  .burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .hdr{backdrop-filter:none;background:var(--ink)}
  html.nav-open,body.nav-open{overflow:hidden;overscroll-behavior:none}
}
.demo-ribbon{background:var(--red);color:#fff;text-align:center;font-size:.7rem;
  letter-spacing:.09em;text-transform:uppercase;padding:8px 14px}
.demo-ribbon button{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;
  border-radius:3px;margin-left:12px;cursor:pointer;padding:2px 9px;font:inherit;font-size:.68rem}


/* ---------- photography ---------- */
.split{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center}
@media(min-width:880px){.split{grid-template-columns:1fr 1fr;gap:3.2rem}
  .split--flip .split__img{order:2}}
.split__img{position:relative;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--ink2)}
.split__img img{width:100%;height:100%;object-fit:cover;display:block}
.split__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(17,21,27,.35))}
.gallery{display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{margin:0;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--ink2);
  aspect-ratio:3/4}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.05)}

/* ---------- brand icons ---------- */
.fsoc a svg{width:19px;height:19px}
.streams a{display:inline-flex;align-items:center;gap:.55rem}
.streams a svg{width:18px;height:18px;flex:0 0 auto}

/* ============================================================
   HONKY-TONK LAYER — cues taken from the band's GW's Post Oak flyer:
   wood-plank panels, string lights, star dividers, condensed poster caps,
   barn-red + amber on warm near-black.
   ============================================================ */

/* condensed poster caps for the small, loud type */
.kick,.nav a,.btn,.sec-head .kicker,.show__date .mo,.show__go a,.streams a,
.tagrow,.foot,label,.legal{font-family:var(--fm);letter-spacing:.06em}
.kick{font-style:normal;font-weight:400;font-size:1.02rem;letter-spacing:.22em;color:var(--amber)}
.nav a{font-size:1rem;letter-spacing:.12em}
.btn{font-family:var(--fm);font-size:1rem;letter-spacing:.11em;font-weight:400;border-radius:1px}
.btn--amber{background:var(--amber);border-color:var(--amber);color:#1A0E05;
  box-shadow:0 2px 0 var(--amber-d), 0 8px 22px rgba(206,98,22,.22)}
.btn--amber:hover{background:var(--amber-d);border-color:var(--amber-d);color:#150B03}
.btn--ghost{border-color:rgba(239,220,192,.28)}
.btn--red{background:var(--red);border-color:var(--red);color:var(--bone);box-shadow:0 2px 0 var(--red-d)}

/* string lights across the top of the hero */
.hero{border-bottom:3px solid var(--wood)}
.hero::before{content:"";position:absolute;top:0;left:0;right:0;height:130px;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle at 12px 14px,rgba(255,205,120,.95) 0 2px,transparent 3px);
  background-size:44px 100%;
  filter:drop-shadow(0 0 7px rgba(255,180,80,.75)) drop-shadow(0 0 18px rgba(206,98,22,.45));
  opacity:.85;
  mask-image:linear-gradient(180deg,#000 0 26px,transparent 30px)}

/* wood-plank sign panels */
.sec--alt{background:
  linear-gradient(180deg,rgba(86,39,15,.30),rgba(19,10,4,.62)),
  repeating-linear-gradient(90deg,rgba(0,0,0,.20) 0 3px,transparent 3px 7px);
  border-block:1px solid var(--line)}
.show,.card,.split__img,.gallery figure{background:
  linear-gradient(180deg,rgba(111,74,43,.16),rgba(19,10,4,.55)),
  repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 2px,transparent 2px 6px);
  border-color:rgba(239,220,192,.18)}
.show{border-left:3px solid var(--amber)}
.card{border-top:3px solid var(--red)}

/* star dividers, straight off the flyer */
.sec-head .kicker::before,.sec-head .kicker::after,
.kick::before,.kick::after{content:"\2605";color:var(--red);margin:0 .55em;font-size:.85em;
  position:relative;top:-1px}
.tagrow span{position:relative}
.hr-star{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:1.6rem 0}
.hr-star i{height:1px;flex:1;max-width:120px;background:var(--line)}
.hr-star b{color:var(--red);font-size:.8rem}

/* date block reads like the flyer's SATURDAY / JULY 25TH panel */
.show__date{border-right:1px solid var(--line)}
.show__date .mo{font-family:var(--fm);letter-spacing:.2em;color:var(--red)}
.show__date .dy{font-family:var(--fm);font-size:2rem;color:var(--bone);letter-spacing:.02em}
.show__what h3{font-family:var(--fm);font-size:1.32rem;letter-spacing:.05em;color:var(--bone);font-weight:400}

/* headings: warm cream with a letterpress-ish edge */
.hero h1,.sec-head h1,.sec-head h2{color:var(--bone);
  text-shadow:0 1px 0 rgba(0,0,0,.55),0 3px 20px rgba(0,0,0,.5)}
.sec-head .kicker{font-size:.86rem;letter-spacing:.2em;color:var(--amber)}

/* footer as a nailed-up wooden sign */
footer{background:
  linear-gradient(180deg,rgba(86,39,15,.34),rgba(19,10,4,.9)),
  repeating-linear-gradient(90deg,rgba(0,0,0,.20) 0 3px,transparent 3px 7px);
  border-top:3px solid var(--wood)}
.fsoc a{border-color:rgba(239,220,192,.24)}
.fsoc a:hover{background:var(--amber);color:#1A0E05;border-color:var(--amber)}
.streams a{border-color:rgba(239,220,192,.24);border-radius:1px}
.streams a:hover{border-color:var(--amber);color:var(--amber)}

/* mobile: keep the warm ground behind the captive nav */
@media(max-width:940px){
  .nav{background:var(--ink);background-image:
    radial-gradient(700px 380px at 50% 6%,rgba(206,98,22,.16),transparent 62%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 3px,transparent 3px 7px)}
  .hdr{background:var(--ink)}
}
.demo-ribbon{background:var(--red)}

/* ---------- 2x2 streaming platform tiles ----------
   Full viewport width: the grid sits outside .wrap, so it is not capped at
   --max. Stays 2 columns at every size — that is the requested shape, and the
   platform marks stay recognisable even at phone width. */
.streamgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);            /* shows through the gap as hairlines */
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:2.6rem 0 0}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.75rem;text-align:center;text-decoration:none;
  min-height:clamp(132px,20vw,208px);padding:1.5rem 1rem;
  background:var(--panel);
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 3px,transparent 3px 8px);
  transition:background-color .2s ease,transform .2s ease}
.tile svg{width:clamp(30px,4.6vw,46px);height:auto;color:var(--bone);transition:color .2s ease}
.tile span{font-family:var(--fm);font-size:clamp(.95rem,2.5vw,1.4rem);letter-spacing:.11em;
  text-transform:uppercase;color:var(--bone);line-height:1.1}
.tile:hover,.tile:focus-visible{background-color:var(--ink2)}
/* each platform lights up in its own brand colour — that is what makes the
   mark readable at a glance, which was the point of using real logos */
.tile:hover svg,.tile:focus-visible svg{color:var(--brand)}
/* the Amazon swoosh is a thin open curve, so at equal width it reads lighter
   than the three solid marks — nudge it up to balance the row optically */
.tile--amazon svg{width:clamp(36px,5.4vw,54px)}
.tile--spotify{--brand:#1DB954}
.tile--apple{--brand:#FA243C}
.tile--amazon{--brand:#25D1DA}
.tile--youtube{--brand:#FF0000}
.stream-note{margin-top:1.4rem;font-size:.85rem;color:var(--muted);text-align:center}

/* ============================================================
   MOBILE NAV — must live at the END of the file.
   The honky-tonk layer above sets `.nav a{font-size:1rem}` for the desktop
   bar; same specificity but later in the source, so it was silently beating
   the 1.5rem inside the earlier max-width:940px block and the captive menu
   was rendering at 16px. Anything that must win on mobile goes here.
   ============================================================ */
@media(max-width:940px){
  /* full-screen menu type: sized for thumbs, not for a desktop bar */
  .nav a{font-family:var(--fm);font-size:clamp(2rem,9vw,2.6rem);
    letter-spacing:.05em;line-height:1.12;padding:.5rem 1rem;color:var(--bone)}
  .nav a:active{color:var(--amber)}
  .nav{gap:.55rem}

  /* burger doubles as the close button — bigger bars and a 48px tap target */
  .burger{padding:12px;margin:-12px -12px -12px auto;gap:6px}
  .burger span{width:30px;height:3px}
  .burger.x span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  /* when open the bars form the X in amber, so it reads as "close" */
  .burger.x span{background:var(--amber)}
}