/* ============================================================
   LONESTAR LIONS — shared stylesheet
   Vintage Texas / river-roots show-poster aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rye&family=Oswald:wght@400;500;600;700&family=Bitter:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --river-deep:#163740;
  --river-night:#0e242a;
  --river-panel:#1b424b;
  --gold:#d8a13a;
  --gold-bright:#ecc25e;
  --cream:#f3e7c8;
  --cream-dim:#cdbf9f;
  --rust:#a8502a;
  --bluebonnet:#48589e;
  --foam:#8fb6ab;
  --line:rgba(216,161,58,.35);
  --shadow:0 14px 34px rgba(0,0,0,.45);
  --maxw:1180px;
  --display:'Rye', 'Bitter', serif;
  --label:'Oswald', sans-serif;
  --body:'Bitter', Georgia, serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--cream);
  line-height:1.65;
  background-color:var(--river-night);
  background-image:
    radial-gradient(ellipse at top,rgba(236,194,94,.06),transparent 60%),
    repeating-linear-gradient(180deg,rgba(0,0,0,.16) 0 2px,rgba(255,255,255,.012) 2px 4px),
    linear-gradient(180deg,#10282e,#0c1f24);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--gold-bright);text-decoration:none}

/* ---------- layout helpers ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:74px 0}
.section--tight{padding:48px 0}
.eyebrow{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.32em;
  font-size:.74rem;color:var(--gold);font-weight:600;margin:0 0 14px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before,.eyebrow::after{content:"";height:1px;flex:0 0 26px;background:var(--line)}
.eyebrow--center{justify-content:center;text-align:center}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;margin:0}
h2.title{font-size:clamp(2.1rem,5vw,3.4rem);color:var(--cream);letter-spacing:.01em;
  text-shadow:0 2px 0 rgba(0,0,0,.35)}
h2.title .gold{color:var(--gold-bright)}
.lead{font-size:1.12rem;color:var(--cream-dim);max-width:62ch}

/* ---------- top sign-nav ---------- */
.topbar{position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,#16363f,#0f272d);
  border-bottom:3px solid var(--gold);
  box-shadow:0 6px 20px rgba(0,0,0,.4)}
.topbar__strip{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;
  font-size:.66rem;color:var(--cream-dim);padding:7px 24px;
  border-bottom:1px solid rgba(216,161,58,.18);max-width:var(--maxw);margin:0 auto}
.topbar__strip .star{color:var(--gold)}
.nav{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;padding:10px 24px;gap:18px}
.brand{font-family:var(--display);color:var(--cream);font-size:1.45rem;
  letter-spacing:.02em;line-height:.95;white-space:nowrap}
.brand small{display:block;font-family:var(--label);font-size:.52rem;letter-spacing:.4em;
  color:var(--gold);text-transform:uppercase;font-weight:600;margin-top:3px}
.nav__links{display:flex;gap:26px;align-items:center;list-style:none;margin:0;padding:0}
.nav__links a{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;
  font-size:.82rem;font-weight:600;color:var(--cream);padding:6px 2px;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--gold-bright);transition:right .25s ease}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{right:0}
.nav__links a[aria-current="page"]{color:var(--gold-bright)}
.nav__toggle{display:none;background:none;border:1.5px solid var(--gold);border-radius:6px;
  color:var(--gold-bright);font-family:var(--label);letter-spacing:.12em;
  text-transform:uppercase;font-size:.78rem;padding:7px 12px;cursor:pointer}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--label);text-transform:uppercase;
  letter-spacing:.16em;font-weight:600;font-size:.84rem;cursor:pointer;
  padding:13px 26px;border-radius:7px;border:2px solid var(--gold);
  background:var(--river-deep);color:var(--cream);transition:.2s ease;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),var(--shadow)}
.btn:hover{background:var(--gold);color:#16242a;transform:translateY(-2px)}
.btn--gold{background:var(--gold);color:#1a2a30}
.btn--gold:hover{background:var(--gold-bright)}
.btn--ghost{background:transparent;box-shadow:none}
.btn--sm{padding:9px 18px;font-size:.74rem}

/* ---------- hero (home) ---------- */
.hero{position:relative;background:var(--river-night)}
.hero img{width:100%;height:auto;display:block}
.hero__tagline{background:linear-gradient(180deg,#14333b,#0f272d);
  border-top:3px solid var(--gold);text-align:center;padding:22px 24px}
.hero__tagline p{margin:0;font-family:var(--display);color:var(--gold-bright);
  font-size:clamp(1.1rem,2.4vw,1.7rem);letter-spacing:.03em}
.hero__tagline .star{color:var(--cream)}

/* ---------- page header (sub pages) ---------- */
.pagehead{position:relative;padding:64px 0 26px;text-align:center;
  background:
    radial-gradient(ellipse at top,rgba(236,194,94,.08),transparent 65%),
    repeating-linear-gradient(180deg,rgba(0,0,0,.14) 0 3px,transparent 3px 7px),
    linear-gradient(180deg,#173b44,#0f272d)}
.pagehead h1{font-size:clamp(2.6rem,7vw,4.6rem);color:var(--cream);
  text-shadow:0 3px 0 rgba(0,0,0,.4)}
.pagehead h1 .gold{color:var(--gold-bright)}
.pagehead p{color:var(--cream-dim);font-size:1.05rem;margin:12px auto 0;max-width:60ch}

/* ---------- water ripple divider ---------- */
.ripple{display:block;width:100%;height:34px;color:var(--gold)}
.ripple svg{display:block;width:100%;height:100%}

/* ---------- wood-sign cards ---------- */
.grid{display:grid;gap:26px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.sign{background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.10) 0 5px,rgba(255,255,255,.02) 5px 10px),
    linear-gradient(180deg,var(--river-panel),var(--river-deep));
  border:2px solid var(--gold);border-radius:10px;padding:24px;
  box-shadow:var(--shadow);position:relative;transition:transform .25s ease}
.sign::before{content:"";position:absolute;inset:6px;border:1px solid rgba(216,161,58,.25);
  border-radius:6px;pointer-events:none}
.sign:hover{transform:translateY(-4px) rotate(-.5deg)}
.sign h3{font-family:var(--label);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:1.15rem;color:var(--gold-bright);margin-bottom:8px}
.sign p{color:var(--cream-dim);margin:0 0 14px;font-size:.97rem}

/* ---------- ticket stubs (tour) ---------- */
.stub{display:flex;align-items:stretch;background:
    linear-gradient(180deg,var(--river-panel),var(--river-deep));
  border:2px solid var(--gold);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);margin-bottom:20px;transition:transform .2s ease}
.stub:hover{transform:translateX(4px)}
.stub__date{flex:0 0 116px;background:var(--gold);color:#16242a;text-align:center;
  display:flex;flex-direction:column;justify-content:center;padding:14px 8px;
  font-family:var(--label);position:relative}
.stub__date .mo{text-transform:uppercase;letter-spacing:.2em;font-weight:700;font-size:.8rem}
.stub__date .day{font-family:var(--display);font-size:2.5rem;line-height:1}
.stub__date .yr{font-size:.72rem;letter-spacing:.18em;opacity:.8}
.stub__perf{flex:0 0 0;border-left:3px dashed rgba(243,231,200,.5);position:relative}
.stub__body{flex:1;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 22px;flex-wrap:wrap}
.stub__body h3{font-family:var(--label);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.2rem;color:var(--cream)}
.stub__meta{font-size:.92rem;color:var(--cream-dim)}
.stub__meta .city{color:var(--gold-bright)}
.stub--past{opacity:.6;filter:grayscale(.3)}
.stub--past .stub__date{background:var(--cream-dim)}

/* ---------- music / video ---------- */
.release{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.release__art{flex:0 0 190px;aspect-ratio:1;border-radius:10px;border:2px solid var(--gold);
  background:linear-gradient(135deg,var(--river-panel),var(--river-night));
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--display);color:var(--gold-bright);font-size:1.4rem;padding:18px;
  box-shadow:var(--shadow)}
.release__info{flex:1;min-width:240px}
.tracklist{list-style:none;margin:14px 0 0;padding:0}
.tracklist li{display:flex;justify-content:space-between;padding:9px 0;
  border-bottom:1px solid rgba(216,161,58,.18);font-size:.97rem}
.tracklist li .num{color:var(--gold);font-family:var(--label);margin-right:12px}
.tracklist li .len{color:var(--cream-dim);font-family:var(--label);font-size:.85rem}
.video{position:relative;aspect-ratio:16/9;border:2px solid var(--gold);border-radius:10px;
  background:linear-gradient(135deg,var(--river-panel),var(--river-night));
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
  cursor:pointer;transition:transform .2s ease}
.video:hover{transform:scale(1.01)}
.video .play{width:64px;height:64px;border-radius:50%;border:2px solid var(--gold);
  background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
.video .play::before{content:"";border-left:18px solid var(--gold-bright);
  border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.video .cap{position:absolute;left:14px;bottom:12px;font-family:var(--label);
  text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;color:var(--cream)}

/* ---------- store ---------- */
.product{text-align:center}
.product__img{aspect-ratio:1;border:2px solid var(--gold);border-radius:10px;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.08) 0 6px,transparent 6px 12px),
    linear-gradient(180deg,var(--river-panel),var(--river-deep));
  display:flex;align-items:center;justify-content:center;font-size:3rem;
  box-shadow:var(--shadow);margin-bottom:14px}
.product h3{font-family:var(--label);text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;font-size:1rem;color:var(--cream)}
.product .price{font-family:var(--display);color:var(--gold-bright);font-size:1.3rem;margin:4px 0 12px}

/* ---------- about / pride ---------- */
.bio{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
.bio p{margin:0 0 16px}
.pride{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:14px}
.lion{text-align:center}
.lion__face{width:96px;height:96px;margin:0 auto 12px;border-radius:50%;
  border:3px solid var(--gold);background:linear-gradient(135deg,#3a2c1c,#1c2a30);
  display:flex;align-items:center;justify-content:center;font-size:2.4rem;box-shadow:var(--shadow)}
.lion h3{font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;font-size:1rem;color:var(--gold-bright)}
.lion .role{font-family:var(--label);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-dim)}

/* ---------- news ---------- */
.post{border-bottom:1px solid rgba(216,161,58,.22);padding:26px 0;
  display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start}
.post:first-child{padding-top:0}
.post__date{font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;
  color:var(--gold);font-size:.82rem;line-height:1.5}
.post h3{font-family:var(--display);font-size:1.5rem;color:var(--cream);margin-bottom:8px}
.post p{color:var(--cream-dim);margin:0 0 10px}

/* ---------- forms ---------- */
.form{display:grid;gap:16px;max-width:560px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;
  font-size:.74rem;color:var(--gold)}
.field input,.field textarea,.field select{font-family:var(--body);font-size:1rem;
  background:var(--river-night);border:1.5px solid var(--line);border-radius:7px;
  color:var(--cream);padding:11px 13px}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--gold-bright);
  border-color:var(--gold-bright)}
.note{font-size:.85rem;color:var(--cream-dim)}

/* ---------- mailing list strip ---------- */
.signup{background:
    radial-gradient(ellipse at center,rgba(236,194,94,.10),transparent 70%),
    linear-gradient(180deg,var(--river-deep),var(--river-night));
  border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);
  text-align:center;padding:54px 24px}
.signup h2{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.8rem);color:var(--cream);margin-bottom:8px}
.signup p{color:var(--cream-dim);margin:0 auto 22px;max-width:48ch}
.signup__row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:520px;margin:0 auto}
.signup__row input{flex:1;min-width:220px;background:var(--river-night);
  border:1.5px solid var(--line);border-radius:7px;color:var(--cream);padding:13px 15px;font-family:var(--body)}

/* ---------- footer ---------- */
.footer{background:linear-gradient(180deg,#0e242a,#091a1f);border-top:3px solid var(--gold);
  padding:54px 0 30px;margin-top:0}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.footer h4{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;
  font-size:.78rem;color:var(--gold);margin:0 0 14px;font-weight:600}
.footer ul{list-style:none;margin:0;padding:0}
.footer ul li{margin-bottom:9px}
.footer ul a{color:var(--cream-dim);font-size:.95rem}
.footer ul a:hover{color:var(--gold-bright)}
.footer__brand{font-family:var(--display);font-size:1.6rem;color:var(--cream);line-height:1}
.footer__brand small{display:block;font-family:var(--label);letter-spacing:.34em;
  font-size:.58rem;color:var(--gold);text-transform:uppercase;margin-top:6px}
.socials{display:flex;gap:12px;margin-top:14px}
.socials a{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--label);
  font-size:.7rem;color:var(--gold-bright);letter-spacing:0}
.socials a:hover{background:var(--gold);color:#16242a;border-color:var(--gold)}
.footer__base{border-top:1px solid rgba(216,161,58,.18);margin-top:34px;padding-top:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--label);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-dim)}

/* ---------- utilities ---------- */
.center{text-align:center}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.cta-row--center{justify-content:center}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .bio{grid-template-columns:1fr}
  .pride{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .nav__links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:#0f272d;border-bottom:3px solid var(--gold);
    max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav__links.open{max-height:460px}
  .nav__links li{width:100%;border-top:1px solid rgba(216,161,58,.15)}
  .nav__links a{display:block;padding:14px 24px}
  .nav__toggle{display:inline-block}
  .topbar{position:static}
}
@media(max-width:560px){
  .grid--4,.grid--3,.grid--2,.pride{grid-template-columns:1fr}
  .post{grid-template-columns:1fr;gap:8px}
  .stub__body{flex-direction:column;align-items:flex-start}
  .topbar__strip{font-size:.58rem;letter-spacing:.14em}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ============================================================
   HOME — immersive hero (Stick Figure-style), reveal nav,
   "The Latest" carousel, compact tour strip
   ============================================================ */

/* reveal-on-scroll sticky nav */
.skybar{position:fixed;top:0;left:0;right:0;z-index:60;transform:translateY(-100%);
  transition:transform .32s ease;background:linear-gradient(180deg,#16363f,#0f272d);
  border-bottom:2px solid var(--gold);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.skybar.show{transform:translateY(0)}
.skybar .nav{padding:9px 24px}

/* full-bleed image hero with clickable hotspots */
.imghero{position:relative;width:100%;line-height:0;background:#0e242a;overflow:hidden}
.imghero>img{width:100%;height:auto;display:block}
.hotspot{position:absolute;display:block;border-radius:7px;cursor:pointer;
  transition:background .18s ease,box-shadow .18s ease}
.hotspot:hover{background:rgba(236,194,94,.14);box-shadow:inset 0 0 0 2px rgba(236,194,94,.5)}
.hotspot--ticket:hover{background:rgba(236,194,94,.20);box-shadow:inset 0 0 0 2px rgba(236,194,94,.7)}
.hotspot:focus-visible{outline:3px solid var(--gold-bright);outline-offset:2px;
  background:rgba(236,194,94,.14)}
.imghero__hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;font-size:.62rem;
  color:rgba(243,231,200,.75);background:rgba(14,36,42,.55);padding:6px 14px;border-radius:20px;
  pointer-events:none;line-height:1.2}

/* THE LATEST carousel */
.latest__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.latest__head h2{font-family:var(--label);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:clamp(1.7rem,4vw,2.6rem);color:var(--cream)}
.latest__head a{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;font-size:.82rem;color:var(--gold-bright)}
.rail{display:flex;gap:20px;overflow-x:auto;padding:26px 4px 14px;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--gold);border-radius:8px}
.rail::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:8px}
.mcard{flex:0 0 260px;scroll-snap-align:start;text-decoration:none;color:inherit;
  transition:transform .2s ease}
.mcard:hover{transform:translateY(-5px)}
.mcard__img{aspect-ratio:4/5;border:2px solid var(--gold);border-radius:12px;position:relative;
  overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:3rem;background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.10) 0 6px,transparent 6px 12px),
    linear-gradient(150deg,var(--river-panel),var(--river-night));box-shadow:var(--shadow)}
.mcard__tag{position:absolute;top:12px;left:12px;font-family:var(--label);text-transform:uppercase;
  letter-spacing:.12em;font-size:.62rem;font-weight:600;color:#16242a;background:var(--gold);
  padding:4px 10px;border-radius:20px}
.mcard h3{font-family:var(--label);text-transform:uppercase;letter-spacing:.04em;font-weight:600;
  font-size:1rem;color:var(--cream);margin:14px 0 2px}
.mcard p{font-size:.85rem;color:var(--cream-dim);margin:0}

/* compact tour strip */
.tourstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.tdate{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,var(--river-panel),var(--river-deep));
  border:2px solid var(--gold);border-radius:10px;padding:14px 16px;box-shadow:var(--shadow)}
.tdate .d{font-family:var(--display);color:var(--gold-bright);font-size:1.5rem;line-height:1;text-align:center;min-width:54px}
.tdate .d small{display:block;font-family:var(--label);font-size:.6rem;letter-spacing:.18em;color:var(--cream-dim)}
.tdate .v{font-family:var(--label);text-transform:uppercase;letter-spacing:.03em;font-weight:600;font-size:.9rem;color:var(--cream);line-height:1.3}
.tdate .v span{display:block;font-weight:400;letter-spacing:.08em;font-size:.74rem;color:var(--cream-dim)}

@media(max-width:880px){
  .tourstrip{grid-template-columns:1fr}
  .skybar{transform:none;position:sticky}
  .imghero__hint{display:none}
}

/* ============================================================
   MOBILE refinements
   ============================================================ */
@media(max-width:880px){
  /* tiny nav/social hotspots are hard to tap — rely on the sticky bar nav */
  .hotspot:not(.hotspot--ticket){display:none}
  .skybar .nav{padding:8px 18px}
  .section{padding:52px 0}
  .pagehead{padding:48px 0 22px}
}
@media(max-width:560px){
  .container{padding:0 18px}
  .section{padding:42px 0}
  .signup__row{flex-direction:column}
  .signup__row input{min-width:100%}
  .latest__head{align-items:flex-start;gap:6px}
  .latest__head h2{font-size:1.9rem}
  .mcard{flex-basis:78vw}
  .hero__tagline .cta-row{flex-direction:column}
  .hero__tagline .btn{width:100%}
  .cta-row .btn{flex:1 1 auto;text-align:center}
  .stub__date{flex-basis:92px}
  .release__art{flex-basis:100%}
  .footer__grid{grid-template-columns:1fr}
}