/* Austin Polka Band — Bierhall Poster theme
   Wright Music · v1 · June 2026
   Colors and type follow the APB brand style guide. */

:root{
  --blue:#7DC8E8;     /* Bavarian Blue */
  --red:#C8102E;      /* Texas Red */
  --gold:#D4A017;     /* Beer Gold */
  --seal-gold:#FFD700;
  --ink:#1A1A1A;      /* Ink Black */
  --cream:#FBF6EA;
  --white:#FFFFFF;
  --maxw:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Lora',Georgia,serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.7;
  font-size:18px;
}
img{max-width:100%;display:block;}
a{color:var(--red);}

/* ---- The Bavarian Rauten (diamond) pattern ---- */
.rauten{
  background-color:var(--white);
  background-image:
    linear-gradient(45deg,var(--blue) 25%,transparent 25%,transparent 75%,var(--blue) 75%),
    linear-gradient(45deg,var(--blue) 25%,transparent 25%,transparent 75%,var(--blue) 75%);
  background-size:44px 44px;
  background-position:0 0,22px 22px;
}
.rauten-band{height:26px;}
.rauten-band.thick{height:40px;}

/* ---- Typography helpers ---- */
.display{
  font-family:'Rye',cursive;
  font-weight:400;
  line-height:1.02;
  letter-spacing:1px;
}
.kicker, .nav a, .btn, .eyebrow, .tier-name, .stat-num, .stat-label{
  font-family:'Oswald',sans-serif;
}
.script{font-family:'Kaushan Script',cursive;color:var(--red);font-weight:400;}

/* ---- Top nav ---- */
.topbar{
  background:var(--ink);
  border-bottom:4px solid var(--gold);
  position:sticky;top:0;z-index:20;
}
.nav{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:18px;
  padding:10px 20px;
}
.nav .brand{
  display:flex;align-items:center;gap:10px;
  color:var(--white);text-decoration:none;margin-right:auto;
}
.nav .brand img{width:42px;height:42px;border-radius:50%;}
.nav .brand span{
  font-family:'Oswald',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;font-size:16px;
}
.nav a.link{
  color:var(--white);text-decoration:none;text-transform:uppercase;
  font-weight:500;letter-spacing:1px;font-size:14px;
}
.nav a.link:hover{color:var(--seal-gold);}
.nav a.book{
  background:var(--red);color:var(--white);
  padding:8px 16px;border-radius:4px;font-weight:700;
}
.nav a.book:hover{background:#a50d25;color:var(--white);}

/* ---- Mobile nav toggle (hamburger) — base rules, all sizes ---- */
.nav-toggle-input{display:none;}
.nav-toggle{display:none;}
.nav-links{display:contents;}

/* ---- Buttons ---- */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  text-transform:uppercase;letter-spacing:1.5px;font-weight:700;
  padding:15px 32px;border-radius:5px;border:3px solid transparent;font-size:16px;
}
.btn-red{background:var(--red);color:var(--white);}
.btn-red:hover{background:#a50d25;}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-gold:hover{background:#b88912;}
.btn-outline{background:transparent;color:var(--white);border-color:var(--white);}
.btn-outline:hover{background:var(--white);color:var(--ink);}

/* ---- Hero ---- */
.hero{position:relative;text-align:center;color:var(--white);padding:0;}
.hero-inner{
  position:relative;
  background:linear-gradient(rgba(26,26,26,.52),rgba(26,26,26,.66));
  padding:54px 20px 64px;
}
.hero .seal{
  width:170px;height:170px;border-radius:50%;
  border:5px solid var(--seal-gold);
  box-shadow:0 0 0 4px var(--red);
  margin:0 auto 22px;background:var(--white);
}
.hero h1{
  margin:0 0 6px;color:var(--white);
  font-size:clamp(38px,7vw,76px);
  text-shadow:3px 3px 0 var(--ink),-1px -1px 0 var(--ink);
}
.hero .willkommen{color:var(--seal-gold);font-size:clamp(22px,4vw,34px);margin-bottom:14px;}
.hero .tagline{
  display:inline-block;background:var(--gold);color:var(--ink);
  font-weight:700;text-transform:uppercase;letter-spacing:2px;
  padding:8px 20px;border-radius:4px;font-size:clamp(13px,2vw,17px);margin-bottom:26px;
}
.hero .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---- Generic sections ---- */
section{padding:60px 20px;}
.wrap{max-width:var(--maxw);margin:0 auto;}
.section-head{text-align:center;margin-bottom:36px;}
.section-head .script{font-size:clamp(26px,4vw,40px);display:block;}
.section-head h2{
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:2px;font-size:clamp(24px,3.5vw,34px);margin:2px 0 0;color:var(--ink);
}
.divider{width:90px;height:5px;background:var(--red);border:0;margin:14px auto 0;}

/* ---- Intro hook ---- */
.intro{background:var(--cream);text-align:center;}
.intro p{max-width:760px;margin:0 auto 16px;font-size:20px;}
.intro .lead{font-size:24px;}

/* ---- Scalable ensemble ---- */
.scale{background:var(--ink);color:var(--white);}
.scale .section-head h2{color:var(--white);}
.scale .tiers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:10px;
}
.tier{
  background:#262626;border:2px solid var(--gold);border-radius:10px;
  padding:24px 22px;text-align:center;
}
.tier .badge{
  display:inline-block;background:var(--red);color:#fff;font-family:'Oswald',sans-serif;
  font-weight:700;border-radius:30px;padding:4px 16px;font-size:14px;letter-spacing:1px;margin-bottom:12px;
}
.tier-name{font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:20px;margin:0 0 8px;}
.tier p{margin:0;color:#e8e3d6;font-size:16px;line-height:1.55;}
.scale .note{text-align:center;margin-top:26px;color:#cfc8b8;font-style:italic;}

/* Seven-piece lineup */
.lineup{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:780px;margin:0 auto 26px;}
.inst{
  font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:1px;
  font-size:15px;color:#fff;background:#262626;border:2px solid var(--gold);border-radius:30px;padding:9px 20px;
}
.inst-lead{background:var(--red);border-color:var(--red);font-weight:700;}
.lineup-copy{max-width:680px;margin:0 auto;text-align:center;color:#e8e3d6;font-size:19px;}

/* ---- Photo strip ---- */
.photos .grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;
}
.ph{
  position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;
  border:3px solid var(--gold);background:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.ph span{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;
  color:var(--ink);font-size:13px;text-align:center;padding:10px;font-weight:500;opacity:.85;
}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---- Videos ---- */
.videos{background:var(--cream);}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;}
.vid{margin:0;}
.vid video{width:100%;aspect-ratio:16/9;display:block;border-radius:8px;border:3px solid var(--gold);background:#000;}
.vid figcaption{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:14px;font-weight:500;color:var(--ink);text-align:center;margin-top:10px;}

/* ---- Credibility bar ---- */
.stats{background:var(--ink);color:#fff;}
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:30px;text-align:center;}
.cred-sub{display:block;font-family:'Lora',serif;font-size:15px;line-height:1.45;color:#e8e3d6;margin:0 0 8px;}
.cred-lead{display:block;font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:28px;line-height:1.1;color:var(--seal-gold);}

/* ---- Final CTA ---- */
.cta-final{text-align:center;color:#fff;position:relative;}
.cta-final .inner{background:linear-gradient(rgba(26,26,26,.82),rgba(26,26,26,.9));padding:56px 20px;}
.cta-final h2{color:#fff;font-family:'Rye',cursive;font-weight:400;font-size:clamp(30px,5vw,52px);margin:0 0 10px;}
.cta-final p{font-size:20px;max-width:620px;margin:0 auto 26px;}

/* ---- Footer ---- */
.foot{background:var(--ink);color:#cfc8b8;padding:40px 20px;text-align:center;}
.foot img{width:80px;height:80px;border-radius:50%;margin:0 auto 14px;border:3px solid var(--gold);}
.foot .gsuffa{font-family:'Kaushan Script',cursive;color:var(--seal-gold);font-size:22px;margin:6px 0 14px;}
.foot a{color:var(--blue);text-decoration:none;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:14px;margin:0 10px;}
.foot .fine{font-size:13px;color:#8a857a;margin-top:18px;font-family:'Oswald',sans-serif;letter-spacing:.5px;}

/* ---- Inner-page header (About / Shows / Book) ---- */
.page-head{text-align:center;position:relative;}
.page-head-inner{
  background:linear-gradient(rgba(26,26,26,.72),rgba(26,26,26,.82));
  padding:48px 20px 54px;color:var(--white);
}
.page-head h1{
  margin:4px 0 14px;color:var(--white);
  font-size:clamp(34px,6vw,64px);
  text-shadow:3px 3px 0 var(--ink),-1px -1px 0 var(--ink);
}
.willkommen-light{color:var(--seal-gold)!important;font-size:clamp(20px,3.5vw,30px);margin:0;}
.page-head .tagline{
  display:inline-block;background:var(--gold);color:var(--ink);
  font-weight:700;text-transform:uppercase;letter-spacing:2px;
  padding:8px 20px;border-radius:4px;font-size:clamp(12px,2vw,16px);
  font-family:'Oswald',sans-serif;
}

/* ---- Repertoire / markets (light sections reusing chips) ---- */
.repertoire{background:var(--cream);}
.markets{background:var(--cream);}
.inst.dark{color:var(--ink);background:#fff;border-color:var(--gold);}

/* ---- Grackle seal feature (About) ---- */
.seal-feature{background:var(--cream);}
.seal-wrap{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:center;}
.big-seal{
  width:230px;height:230px;border-radius:50%;flex:0 0 auto;
  border:5px solid var(--seal-gold);box-shadow:0 0 0 4px var(--red);background:#fff;
}
.seal-copy{flex:1 1 320px;max-width:520px;}
.seal-copy .script{font-size:clamp(24px,4vw,36px);display:block;}
.seal-copy h2{
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:2px;font-size:clamp(24px,3.5vw,32px);margin:2px 0 0;color:var(--ink);
}
.seal-copy p{font-size:19px;}
.divider-left{margin:14px 0 18px;}

/* ---- Shows / calendar ---- */
.shows{background:var(--cream);}
.cal-frame{
  border:4px solid var(--gold);border-radius:10px;background:#fff;
  padding:10px;max-width:860px;margin:0 auto;overflow:hidden;
}
.cal-frame iframe{display:block;border-radius:6px;}
.cal-placeholder{text-align:center;padding:48px 24px;}
.cal-placeholder .big{
  font-family:'Rye',cursive;font-size:clamp(26px,4vw,40px);color:var(--red);margin:0 0 14px;
}
.cal-placeholder p{max-width:560px;margin:0 auto 22px;}

/* ---- Booking ---- */
.book-cta{background:var(--cream);text-align:center;}
.btn-big{font-size:20px;padding:20px 44px;}
.contact-lines{margin-top:30px;}
.contact-lines p{font-size:20px;margin:8px 0;}
.contact-lines a{font-weight:700;}

@media (max-width:620px){
  body{font-size:17px;}
  .nav{flex-wrap:wrap;}
  .nav .brand{margin-right:auto;}

  /* Hamburger button — replaces the old "just hide the links" rule that made
     the nav vanish on mobile with no way to reach the other pages. */
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:28px;height:24px;cursor:pointer;
  }
  .nav-toggle span{display:block;width:100%;height:3px;background:var(--white);border-radius:2px;}

  /* Collapsed dropdown panel, shown when the hidden checkbox is checked.
     Holds links, Book us, and the social icons in the SAME order as
     desktop (left-to-right becomes top-to-bottom) — nothing reshuffled. */
  .nav-links{
    display:none;
    flex-basis:100%;
    flex-direction:column;
    margin:10px -20px 0;
    padding:2px 20px 14px;
    border-top:1px solid rgba(255,255,255,.15);
  }
  .nav-toggle-input:checked ~ .nav-links{display:flex;}
  .nav .link{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);}
  .nav .book{margin-top:14px;text-align:center;}
  .nav .nav-social{margin-top:16px;justify-content:center;}

  .seal-wrap{gap:24px;}
  .seal-copy{text-align:center;}
  .divider-left{margin-left:auto;margin-right:auto;}
}

/* ---- Booking form ---- */
.book-form-section{background:var(--cream);}
.form-intro{text-align:center;max-width:680px;margin:0 auto 40px;}
.form-intro .lead{font-size:23px;margin:0 0 12px;}
.book-form{max-width:720px;margin:0 auto;}
.book-form fieldset{
  border:3px solid var(--gold);border-radius:10px;background:#fff;
  padding:22px 24px 26px;margin:0 0 26px;
}
.book-form legend{
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:2px;font-size:18px;color:var(--red);
  padding:0 12px;
}
.field{display:block;margin:0 0 16px;}
.field:last-child{margin-bottom:0;}
.field > span,.field-label{
  display:block;font-family:'Oswald',sans-serif;font-weight:500;
  text-transform:uppercase;letter-spacing:1px;font-size:14px;color:var(--ink);margin:0 0 6px;
}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=date],
.field input[type=time],
.field textarea{
  width:100%;font-family:'Lora',serif;font-size:17px;color:var(--ink);
  padding:11px 13px;border:2px solid #d8cdb0;border-radius:6px;background:var(--cream);
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--red);background:#fff;
}
.field textarea{resize:vertical;line-height:1.5;}
.field-row{display:flex;gap:16px;flex-wrap:wrap;}
.field-row .field{flex:1 1 200px;}
.radio-row{display:flex;flex-wrap:wrap;gap:10px 22px;margin-bottom:14px;}
.radio{
  display:flex;align-items:center;gap:8px;
  font-family:'Lora',serif;font-size:17px;color:var(--ink);cursor:pointer;
}
.radio input{width:18px;height:18px;accent-color:var(--red);margin:0;}
.book-form > .btn{display:block;width:100%;text-align:center;border:none;}

@media (max-width:620px){
  .book-form fieldset{padding:18px 16px 20px;}
}

/* ====================================================================
   REVIEWS — homepage banner + Reviews page + star-rating form input
   Added June 2026. Bierhall-Poster theme, consistent with the rest.
   ==================================================================== */

/* ---- Homepage testimonial banner ---- */
.testimonials{background:var(--cream);text-align:center;}
.tcarousel{position:relative;max-width:760px;margin:0 auto;min-height:170px;}
.tslide{display:none;}
.tslide.is-active{display:block;animation:tfade .45s ease;}
@keyframes tfade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.tstars{color:var(--gold);font-size:26px;letter-spacing:4px;margin-bottom:14px;}
.tquote{
  font-family:'Lora',serif;font-style:italic;
  font-size:clamp(20px,2.6vw,27px);line-height:1.5;color:var(--ink);
  margin:0 auto 18px;max-width:680px;
}
.tname{
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--red);font-size:16px;
}
.tloc{
  display:block;font-family:'Oswald',sans-serif;font-weight:500;
  text-transform:uppercase;letter-spacing:1px;font-size:13px;
  color:var(--ink);opacity:.65;margin-top:3px;
}
.tcontrols{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px;}
.tarrow{
  background:var(--ink);color:#fff;border:none;cursor:pointer;
  width:42px;height:42px;border-radius:50%;font-size:22px;line-height:1;
  font-family:'Oswald',sans-serif;display:flex;align-items:center;justify-content:center;
}
.tarrow:hover{background:var(--red);}
.tdots{display:flex;gap:9px;}
.tdot{
  width:12px;height:12px;border-radius:50%;padding:0;cursor:pointer;
  border:2px solid var(--gold);background:transparent;
}
.tdot.is-active{background:var(--gold);}
.treviews-cta{margin-top:34px;}

/* ---- Reviews page ---- */
.reviews-page{background:var(--cream);}
.rev-aggregate{text-align:center;margin:0 auto 40px;}
.rev-agg-stars{color:var(--gold);font-size:34px;letter-spacing:5px;line-height:1;}
.rev-agg-line{
  font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:1.5px;font-size:16px;color:var(--ink);margin-top:10px;
}
.rev-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;
}
.rev-card{
  background:#fff;border:3px solid var(--gold);border-radius:10px;
  padding:22px 24px;text-align:left;
}
.rev-card .rc-stars{color:var(--gold);font-size:18px;letter-spacing:2px;margin-bottom:10px;}
.rev-card .rc-text{
  font-family:'Lora',serif;font-style:italic;font-size:18px;line-height:1.55;margin:0 0 14px;
}
.rev-card .rc-name{
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--red);font-size:15px;
}
.rev-card .rc-loc{
  font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:1px;font-size:12px;color:var(--ink);opacity:.65;margin-top:2px;
}
.rev-empty{text-align:center;max-width:560px;margin:0 auto;padding:20px 0 10px;}
.rev-empty .big{
  font-family:'Rye',cursive;font-size:clamp(24px,4vw,38px);color:var(--red);margin:0 0 12px;
}

/* ---- Star-rating input (Leave a review form) ---- */
.star-pick{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px;}
.star-pick input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.star-pick label{
  font-size:38px;line-height:1;color:#d8cdb0;cursor:pointer;transition:color .12s ease;
}
.star-pick input:checked ~ label{color:var(--gold);}
.star-pick:hover label{color:#d8cdb0;}
.star-pick label:hover,
.star-pick label:hover ~ label{color:var(--gold);}
.star-pick input:focus-visible + label{outline:2px solid var(--red);outline-offset:2px;border-radius:3px;}
.review-note{
  font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.5px;
  color:var(--ink);opacity:.7;text-align:center;margin:14px auto 0;max-width:520px;
}

/* Footer social icons (Facebook + Instagram) - added 2026-07-11 */
.foot-social{display:flex;justify-content:center;align-items:center;gap:22px;margin:16px 0 4px;}
.foot-social a{margin:0;display:inline-flex;}
.foot-social svg{width:26px;height:26px;fill:var(--blue);transition:fill .15s ease;}
.foot-social a:hover svg{fill:var(--seal-gold);}

/* Header nav social icons - added 2026-07-11 */
.nav-social{display:inline-flex;align-items:center;gap:12px;}
.nav-social a{display:inline-flex;margin:0;}
.nav-social svg{width:22px;height:22px;fill:var(--white);transition:fill .15s ease;}
.nav-social a:hover svg{fill:var(--seal-gold);}


/* Shows page - live Muzodo compact table (the original schedule look).
   Muzodo's data comes in via its reliable default rendering (into a
   hidden #apb-shows-source div - see shows.html), then a small script
   rebuilds it into this table. Restored 2026-07-12 after confirming
   Muzodo's own "template" rendering option silently produces zero rows. */
.sched-static{max-width:640px;margin:0 auto;}
.sched{width:100%;border-collapse:collapse;background:#fff;border:2px solid var(--gold);border-radius:10px;overflow:hidden;font-family:'Lora',serif;}
.sched td{padding:11px 14px;font-size:16px;vertical-align:middle;color:var(--ink);}
.sched tr.mh td{background:var(--ink);color:var(--seal-gold);font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:14px;padding:9px 14px;}
.sched tr.d-a td{background:#fff;}
.sched tr.d-b td{background:#f3ead2;}
.sched td.dt{white-space:nowrap;width:118px;border-right:1px solid #eadfbf;line-height:1.2;}
.sched td.dt .dow{display:block;color:var(--red);font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase;}
.sched td.dt .dnum{display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:16px;}
.sched td.tm{white-space:nowrap;width:150px;color:#3a3a3a;font-variant-numeric:tabular-nums;}
.sched td.loc{font-weight:600;}
.sched tr.daytop td{border-top:1px solid #d8c9a0;}
.sched-note{text-align:center;color:#6b6459;font-size:13px;margin:14px 0 0;font-family:'Oswald',sans-serif;letter-spacing:.3px;}
.sched-note a{color:var(--red);text-decoration:none;}
.sched-note a:hover{text-decoration:underline;}
@media (max-width:480px){
  .sched td{padding:9px 10px;font-size:15px;}
  .sched td.dt{width:90px;}
  .sched td.tm{width:auto;}
}

/* ====================================================================
   PRESS KIT PAGE (epk.html) — added 2026-07-13
   Replaces the old standalone/self-contained epk.html (its own inline
   styles + Google-Fonts CDN, no shared nav/footer) with the site's
   normal page system, so it reads as a real page instead of a PDF
   tacked on. The downloadable PDF still exists — it's now surfaced as
   a prominent button instead of being the whole page.
   ==================================================================== */

/* ---- Prominent PDF download, sits right in the page header ---- */
.pk-download{margin-top:26px;}
.pk-download .btn{display:inline-flex;align-items:center;gap:10px;}
.pk-download .btn svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto;}
.pk-download-note{
  display:block;margin-top:12px;font-family:'Oswald',sans-serif;font-weight:500;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.75);
}

/* ---- Quick-facts strip (Based / Sound / Built for / On stage / Sound rig) ---- */
.factgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:2px;background:var(--gold);border:2px solid var(--gold);border-radius:10px;overflow:hidden;
}
.factcard{background:#fff;padding:24px 20px;text-align:center;}
.factcard .fk{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--red);margin:0 0 8px;
}
.factcard .fv{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:19px;
  text-transform:uppercase;letter-spacing:.5px;line-height:1.15;margin:0;
}
.factcard .fs{font-size:14px;color:#5a5648;margin:6px 0 0;line-height:1.4;}

/* ---- Sound coverage, two options side by side (sits inside .scale dark section) ---- */
.sound-opts{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:6px;}
.sound-opt{border-left:3px solid var(--gold);padding-left:20px;}
.sound-opt .head{
  font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--seal-gold);font-size:15px;margin:0 0 8px;
}
.sound-opt p{color:#e8e3d6;font-size:17px;line-height:1.55;margin:0;}
.sound-note{margin-top:24px;color:var(--blue);font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:13px;}

/* ---- Listen & watch button row + secondary PDF row (light sections) ---- */
.pk-btnrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}

@media (max-width:620px){
  .sound-opts{grid-template-columns:1fr;gap:24px;}
}

/* ====================================================================
   HOME PHOTO STRIP ROTATION (gallery-fed crossfade) - added 2026-07-16,
   patched 2026-07-16 (see PATCH-NOTES.md for the full root-cause
   write-up of this patch's three fixes).
   JS in index.html rotates the "band in action" photo-strip tiles (the
   existing .photos .grid .ph tiles) through the published gallery
   manifest (gallery.js), one tile every 6 seconds. This block styles
   the second image layer that script appends on top of the existing
   .ph img for the fade, plus (as of the patch) the settled image that
   remains after a fade completes. It is harmless if the rotation
   script never runs (e.g. the manifest is missing or empty), since no
   element ever gets these classes in that case. No pre-existing rule
   above this comment is touched by this block.

   FIX 1 (patch, root cause): a wide (or very tall) rotated-in photo
   could render at its native size and spill past the tile border,
   while the original 4 static photo-1..4.jpg tiles never had this
   problem. The difference is WHEN each image enters the DOM: the
   static images are present at initial page parse/layout, when .ph's
   aspect-ratio-derived box size is first established and their
   position/width/height percentages resolve against it cleanly. The
   rotation script's images are inserted later, by JavaScript, after
   that first layout pass - and relying solely on the generic .ph img
   rule below to size a LATER-inserted child re-opens the question of
   whether the browser re-resolves percentage width/height against
   .ph's already-established box at that later insertion point. Rather
   than depend on that, the fill/crop constraints (position, inset,
   size, object-fit, centering) are now declared directly and
   redundantly on .ph-incoming and .ph-settled below, so a rotated-in
   image can never end up unconstrained regardless of when it was
   inserted or which rule the cascade happens to resolve first. This
   also removes the need to touch or re-order the pre-existing .ph img
   rule at all - the fix is additive only.

   Cascade trace for the three states this now produces:
   (a) an ORIGINAL static img (present in the HTML from page load):
       matched only by the pre-existing ".ph img" rule above (position,
       inset, width/height, object-fit). Unchanged by this patch.
   (b) an INCOMING img mid-fade (class "ph-incoming", added by the
       rotation script, "is-visible" added a tick later to start the
       opacity transition): matched by ".ph img" (still applies, same
       as before) AND now also by the new ".ph img.ph-incoming" rule
       below, which restates the full fill/crop constraints itself.
   (c) the SETTLED img after fade cleanup (previously left with NO
       class at all - matched only by the generic ".ph img" rule, with
       no rule of its own): now given the explicit class "ph-settled"
       by the rotation script, matched by ".ph img" AND the new
       ".ph img.ph-settled" rule below, so its box constraints no
       longer rely on being the only image left standing. -------- */
.ph img.ph-incoming,
.ph img.ph-settled{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center center;
}
.ph img.ph-incoming{
  opacity:0;
  transition:opacity 900ms ease;
}
.ph img.ph-incoming.is-visible{
  opacity:1;
}

/* Second patch, same day (2026-07-16), after Doug's S1/S2/S3/S4 follow-up
   report - see PATCH-NOTES.md.
   S2 diagnosis: fresh-browser Playwright testing against these exact rules,
   using synthetic photos at the real manifest's aspect ratios (extreme
   4000x1800 panoramas, 4000x3000 4:3, plus portrait/square), found NO
   overflow reproduced - the block above already works. The rotation script
   in index.html now ALSO applies this same fill/crop box as inline styles
   at insertion time (redundant with the rules above on purpose), so a
   visitor whose browser has a stale, pre-patch styles.css cached (missing
   this block entirely) still gets a correctly cropped photo. This CSS
   block remains the primary, documented mechanism; the inline styles are
   a safety net for exactly the caching class of bug that explained S3
   below. No properties in this file were changed for this second patch. */

/* ====================================================================
   HOME PHOTO LIGHTBOX (click to enlarge) - added 2026-07-16 patch.
   Click-to-enlarge for the .photos .grid .ph tiles ONLY (see index.html
   for the script that wires this up unconditionally, so it works even
   when the gallery manifest above never loads). The testimonial banner
   and the video block are intentionally NOT part of this - no styling
   here touches them. Self-contained: its own classes (all prefixed
   home-lightbox- so nothing here collides with any other rule on the
   page), does not reuse or depend on gallery.html's own inline
   lightbox stylesheet, though the look (dark backdrop, gold-bordered
   panel, round X close button, caption under the image) intentionally
   matches that page's lightbox for a consistent feel site-wide.
   ==================================================================== */
body.home-lightbox-open{overflow:hidden;}
.home-lightbox[hidden]{display:none;}
.home-lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.home-lightbox-panel{
  position:relative;
  width:min(1000px,100%);
  max-height:calc(100vh - 48px);
  overflow:auto;
  border:3px solid var(--gold);
  border-radius:12px;
  background:var(--ink);
  color:#fff;
  box-shadow:0 20px 70px rgba(0,0,0,.5);
}
.home-lightbox-image-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:200px;
  background:#080808;
}
.home-lightbox-image{
  max-width:100%;
  max-height:72vh;
  object-fit:contain;
  margin:0 auto;
  display:block;
}
.home-lightbox-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  border:2px solid var(--gold);
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:22px;
  width:38px;
  height:38px;
  line-height:1;
  cursor:pointer;
}
.home-lightbox-close:hover,
.home-lightbox-close:focus-visible{
  background:var(--red);
}
.home-lightbox-caption{
  margin:0;
  padding:16px 22px 20px;
  color:#cfc8b8;
  font-family:'Lora',serif;
  font-size:15px;
  text-align:center;
}
/* the photo-strip tiles themselves become keyboard-operable buttons */
.ph[tabindex]{
  cursor:pointer;
}
.ph[tabindex]:focus-visible{
  outline:4px solid var(--red);
  outline-offset:3px;
}