/* ============================================================
   Roadhouse Revival — shared styles
   Built from design-tokens.md (LOCKED) + mockup-tokens.html (LOCKED hero).
   Static multi-page build. Ports to Tailwind/Next.js later.
   ============================================================ */

:root{
  --charred-oak:#17110B; --ink-black:#0B0805; --leather:#2A1C12;
  --cream:#ECD9B0; --cream-bright:#FBE7BE; --amber:#C8801F;
  --oxblood:#6E2A23; --brass:#B9954E; --smoke:#8A7D6B; --parchment:#E7D8B8;
  --display:'Bevan',serif; --script:'Yellowtail',cursive;
  --body:'Merriweather',serif; --util:'Special Elite',monospace;
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--charred-oak);color:var(--cream);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}

/* film-grain overlay */
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:3px 3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- draft banner ---------- */
.note{background:var(--oxblood);color:var(--cream-bright);font-family:var(--util);font-size:12px;letter-spacing:1px;text-align:center;padding:8px 16px}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:40;background:rgba(11,8,5,.86);backdrop-filter:blur(6px);border-bottom:1px solid var(--leather)}
.nav .bar{display:flex;align-items:center;justify-content:space-between;max-width:var(--maxw);margin:0 auto;padding:14px 24px}
.nav .brandmini{font-family:var(--display);font-size:18px;color:var(--cream);letter-spacing:.5px;text-decoration:none}
.nav .brandmini:hover{color:var(--amber)}
.nav .links{display:flex;gap:26px;align-items:center;font-family:var(--util);text-transform:uppercase;letter-spacing:1px;font-size:13px}
.nav .links a{color:var(--cream);text-decoration:none;opacity:.85;transition:color .15s,opacity .15s}
.nav .links a:hover,.nav .links a[aria-current="page"]{color:var(--amber);opacity:1}
.nav .navcta{font-size:12px;padding:9px 16px}
.nav .burger{display:none;background:none;border:1px solid var(--brass);color:var(--cream);font-family:var(--util);font-size:13px;letter-spacing:1px;padding:8px 12px;border-radius:4px;cursor:pointer}
@media(max-width:860px){
  .nav .links{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(78vw,320px);flex-direction:column;align-items:flex-start;gap:6px;
    background:var(--ink-black);border-left:1px solid var(--leather);padding:80px 28px;transform:translateX(100%);transition:transform .25s ease;font-size:15px;overflow-y:auto;z-index:40}
  .nav .links.open{transform:translateX(0)}
  .nav .links a{padding:12px 0;width:100%;border-bottom:1px solid rgba(185,149,78,.15)}
  .nav .links .navcta{margin-top:14px;border-bottom:none}
  .nav .burger{display:inline-block;z-index:41}
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.stamp{font-family:var(--util);text-transform:uppercase;letter-spacing:3px;font-size:13px;color:var(--brass)}
.scr{font-family:var(--script);color:var(--amber);font-weight:400}
.amberword{color:var(--amber)}
.creamword{color:var(--cream-bright)}
h1,h2,h3{font-family:var(--display);color:var(--cream-bright);line-height:1.1}

/* divider / eyebrow */
.divider{display:flex;align-items:center;gap:16px;justify-content:center;margin:0 auto 18px;color:var(--brass)}
.divider .rule{height:1px;background:var(--brass);width:64px;opacity:.6}
.divider .eyebrow{font-family:var(--util);text-transform:uppercase;letter-spacing:3px;font-size:12px;color:var(--brass);white-space:nowrap}
.divider .star{color:var(--amber);font-size:13px}

/* ============================================================
   BUTTONS
   ============================================================ */
.ticket{display:inline-block;font-family:var(--util);text-transform:uppercase;letter-spacing:2px;font-size:14px;
  color:var(--ink-black);background:var(--amber);padding:16px 30px;border:2px solid var(--brass);border-radius:4px;
  text-decoration:none;transition:all .2s ease;cursor:pointer}
.ticket:hover{background:var(--cream-bright);box-shadow:0 0 26px rgba(200,128,31,.45);transform:translateY(-1px)}
.linkamber{display:inline-block;color:var(--cream);font-family:var(--util);text-transform:uppercase;letter-spacing:1px;font-size:13px;
  text-decoration:none;border-bottom:1px solid var(--amber);padding-bottom:2px}
.linkamber:hover{color:var(--amber)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:center;margin-top:26px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:86vh;display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(11,8,5,.55) 0%,rgba(23,17,11,.65) 55%,var(--charred-oak) 100%),
             url('images/01-hero-roadhouse-dusk-gpt.png') center/cover no-repeat}
.hero .inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:56px 24px;width:100%;text-align:center}
.hero .inner::before{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:760px;height:600px;max-width:96vw;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(11,8,5,.82) 0%,rgba(11,8,5,.55) 38%,rgba(11,8,5,.18) 62%,transparent 78%)}
.hero .inner>*{position:relative;z-index:1}
.hero img.logo{width:min(460px,80vw);margin:0 auto 6px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.55))}
.hero h1{font-size:clamp(34px,6vw,68px);margin:16px 0 8px;text-shadow:0 4px 18px rgba(0,0,0,.5)}
.hero h1 .scr{font-size:1.15em}
.hero p.sub{font-size:clamp(16px,2.2vw,20px);color:var(--cream);max-width:620px;margin:0 auto;opacity:.94}

/* page hero (interior pages) */
.pagehero{position:relative;min-height:46vh;display:flex;align-items:center;text-align:center;
  background-position:center;background-size:cover;background-repeat:no-repeat}
.pagehero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,8,5,.5),rgba(23,17,11,.72) 70%,var(--charred-oak))}
.pagehero .inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:64px 24px;width:100%}
.pagehero h1{font-size:clamp(30px,5vw,52px);margin-top:10px}
.pagehero p{max-width:640px;margin:14px auto 0;font-size:clamp(16px,2vw,19px)}
.pagehero.about{background-image:linear-gradient(rgba(11,8,5,.2),rgba(11,8,5,.2)),url('images/06-about-openroad-gpt.png')}

/* Shows hero. Height comes from ASPECT RATIO, not vh, because the subject is a
   bounded object: the marquee fills ~80% of its frame, so a vh-sized band would
   crop more or less of the sign depending on the window HEIGHT. 2.2:1 matches
   the pre-cropped asset exactly, so on desktop nothing is cropped at all and
   the crown and base scroll both stay in. min-height (46vh, inherited) is only
   the mobile floor. NB: `.shows` is the shows-list container, hence `.marquee`. */
.pagehero.marquee{
  background-image:url('images/05-shows-marquee-hero.jpg');
  background-image:image-set(url('images/05-shows-marquee-hero.webp') type('image/webp'),
                             url('images/05-shows-marquee-hero.jpg') type('image/jpeg'))}
/* aspect-ratio ONLY above the nav breakpoint. Below it the 46vh floor is always
   the taller value, so the ratio buys nothing and actively hurts: it pins a
   height the content can outgrow (the hero text needs 331px at 320px wide, the
   ratio allowed 261) and it overflowed. width:100% is load-bearing for the same
   family of reasons: with a definite height from min-height, an auto width
   resolves FROM the ratio, which made the box 854px wide on a 390px screen. */
@media(min-width:860px){
  .pagehero.marquee{aspect-ratio:2.2/1;width:100%}
}
/* Lighter wash than .about: the headline lands on the black marquee board,
   which supplies its own contrast, so the heavy version only costs the lit
   bulbs. Dark end kept at the bottom so it still blends into the section. */
.pagehero.marquee::after{background:linear-gradient(180deg,
  rgba(11,8,5,.30) 0%,rgba(11,8,5,.18) 42%,rgba(23,17,11,.55) 82%,var(--charred-oak) 100%)}

/* Music hero. Plain min-height like .about, NOT the .marquee ratio: the subject
   is a scene, not a bounded object, so there is no single framing the crop has
   to preserve. Position is biased ABOVE centre because a dead-centre crop keeps
   the amp and the floor and throws away the amber ceiling lights, which are the
   only thing making the frame read as a lit stage rather than a storage room. */
.pagehero.stage{
  background-image:url('images/02-music-stage-hero.jpg');
  background-image:image-set(url('images/02-music-stage-hero.webp') type('image/webp'),
                             url('images/02-music-stage-hero.jpg') type('image/jpeg'));
  background-position:center 22%}
/* Much lighter than the base wash, and lighter than .marquee. Unlike the other
   three plates this one is already a NIGHT scene, so the default .5/.72 stack
   does not tint it, it erases it: the amber lights, the star and the string
   bulbs all go to flat brown. The headline lands on the dark stage mouth, which
   supplies its own contrast, so the wash only has to hold the bottom blend. */
.pagehero.stage::after{background:linear-gradient(180deg,
  rgba(11,8,5,.20) 0%,rgba(11,8,5,.32) 46%,rgba(23,17,11,.62) 84%,var(--charred-oak) 100%)}

/* Booking hero. Same aspect-ratio reasoning as .marquee, and the same 860px
   guard: the band is a bounded subject sitting across the middle of a 2.29:1
   frame, so a vh-driven band would add or drop players depending on window
   HEIGHT. 2.29/1 matches the asset, so desktop crops nothing. Below the
   breakpoint the inherited 46vh floor is the taller value anyway, and width:100%
   is load-bearing for the reason spelled out on .marquee above. */
.pagehero.liveshot{
  background-image:url('images/15-booking-athena-hero.jpg');
  background-image:image-set(url('images/15-booking-athena-hero.webp') type('image/webp'),
                             url('images/15-booking-athena-hero.jpg') type('image/jpeg'))}
@media(min-width:860px){
  .pagehero.liveshot{aspect-ratio:2.29/1;width:100%}
}
/* Lighter than it looks like it should be, because this plate arrives PRE-GRADED
   (AMBER_VENUE in scripts/build-booking-hero.py) and already carries a 7%
   Charred Oak wash plus a vignette. The previous asset here was a raw ungraded
   phone frame, so the CSS had to do all the darkening; keeping that heavier ramp
   over a graded plate washes it twice and turns the room to mud. Still held
   slightly darker through the 42% band where the h1 lands. */
.pagehero.liveshot::after{background:linear-gradient(180deg,
  rgba(11,8,5,.22) 0%,rgba(11,8,5,.31) 42%,rgba(23,17,11,.58) 82%,var(--charred-oak) 100%)}

/* Booking is the only interior hero carrying a CTA. The shadow is scoped here
   rather than added to .linkamber, which elsewhere always sits on flat panel or
   on the home hero's radial vignette; only here does it float on open photo. */
.pagehero .cta-row{margin-top:22px}
.pagehero .cta-row .linkamber{text-shadow:0 2px 10px rgba(11,8,5,.85)}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:clamp(56px,9vw,120px) 0}
.sec--dark{background:var(--charred-oak)}
.sec--deep{background:var(--ink-black)}
.sec h2{font-size:clamp(28px,4.5vw,46px);text-align:center;margin-bottom:22px}
.sec .lede{max-width:720px;margin:0 auto;text-align:center;font-size:clamp(16px,2vw,19px)}
.sec .lede p{margin-bottom:18px}
.sec .center{text-align:center}
.sec .center .ticket,.sec .center .linkamber{margin-top:8px}

/* media band (image + copy) */
.band{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(min-width:820px){.band{grid-template-columns:1.05fr .95fr}.band.flip .media{order:2}}
.band .media img{border:1px solid var(--brass);border-radius:4px;box-shadow:0 20px 44px rgba(0,0,0,.5)}
.band .copy h2{text-align:left}
.band .copy .divider{justify-content:flex-start;margin-left:0}
.band .copy p{margin-bottom:16px}

/* reel slot */
.reel{max-width:920px;margin:22px auto 0;padding:0 24px}
/* The YouTube iframe covers the frame completely, so the old 1.9 MB stage plate
   behind it was loading on every homepage hit and never being seen. Flat charred
   oak instead, which also stops a light flash before the embed paints. */
.reel .frame{position:relative;aspect-ratio:16/9;border:1px solid var(--brass);border-radius:4px;overflow:hidden;
  background:var(--charred-oak)}
.reel .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.reel .frame .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--cream-bright)}
.reel .frame .play .disc{width:74px;height:74px;border-radius:50%;border:2px solid var(--amber);display:flex;align-items:center;justify-content:center;font-size:26px;background:rgba(11,8,5,.5)}
.reel .frame .play span{font-family:var(--util);text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--brass)}

/* ============================================================
   CARDS (parchment)
   ============================================================ */
.cards{display:grid;grid-template-columns:1fr;gap:24px;max-width:var(--maxw);margin:8px auto 0;padding:0 24px}
@media(min-width:760px){.cards.two{grid-template-columns:1fr 1fr}.cards.four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.cards.four{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--parchment);color:#241910;border:1px solid var(--brass);border-radius:4px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.card .ph{height:190px;background:#2A1C12 center/cover no-repeat}
.card .body{padding:20px 22px 24px}
.card .kicker{font-family:var(--util);text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--oxblood)}
.card h3{font-size:22px;color:#241910;margin:6px 0 10px}
.card p{font-size:15px;line-height:1.65;color:#3a2c1d}
/* Testimonial cards. Real <blockquote>, so the * reset has already killed the
   browser's 40px indent and the margins below are deliberate spacing, not a
   fight with UA defaults. Attribution reuses the secondary-metadata treatment
   already established on parchment by .strip .artist, rather than repeating
   .kicker's oxblood caps and making the card read as two headings. */
.card blockquote{font-style:italic;font-size:15px;line-height:1.65;color:#3a2c1d;margin-top:8px}
.card .attrib{font-family:var(--util);text-transform:uppercase;letter-spacing:1px;font-size:11px;color:#6a4a2a;margin-top:12px}
/* Grid items stretch, so a pair of unequal-length quotes leaves the shorter
   card's attribution floating mid-panel. Pin both to the bottom edge. Scoped to
   .quote on purpose: .card .body is shared with the member cards, and making it
   flex globally would move things that are currently fine. */
.card.quote .body{display:flex;flex-direction:column;height:100%}
.card.quote .attrib{margin-top:auto;padding-top:12px}
/* member card mini */
/* Home member cards link through to the full bio on the About page. The card is
   now an <a>, which is inline by default and would collapse the box, hence
   display:block. Colour already inherits from the a{color:inherit} reset. */
a.card{display:block;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease}
a.card:hover,a.card:focus-visible{transform:translateY(-3px);
  box-shadow:0 26px 54px rgba(0,0,0,.55)}
a.card:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.mcard .body{padding:16px 18px 20px;text-align:center}
.mcard .role{font-family:var(--util);text-transform:uppercase;letter-spacing:1px;font-size:11px;color:var(--oxblood)}
.mcard h3{font-size:20px;margin:4px 0 8px}

/* ============================================================
   FPO placeholder (light gray box + descriptive caption)
   ============================================================ */
.fpo-wrap{margin:0}
.fpo{width:100%;background:#cfcfcf;color:#555;display:flex;align-items:center;justify-content:center;
  font-family:var(--util);letter-spacing:4px;font-size:15px;min-height:190px;border:1px dashed #9a9a9a}
.fpo.tall{min-height:300px}
.fpo.wide{min-height:150px}
.fpo-cap{display:block;font-family:var(--util);font-size:11px;letter-spacing:.5px;line-height:1.4;color:var(--oxblood);
  background:rgba(110,42,35,.12);border-left:2px solid var(--oxblood);padding:7px 10px;margin-top:0}
.card .fpo-cap{color:#6E2A23;background:rgba(110,42,35,.10)}

/* ============================================================
   ABOUT — reading panels + bios
   ============================================================ */
.read{max-width:760px;margin:0 auto;padding:0 24px}
.panel{background:var(--parchment);color:#241910;border:1px solid var(--brass);border-radius:4px;padding:clamp(26px,4vw,44px);margin:0 auto;max-width:820px;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.panel h2{color:#241910;text-align:left;font-size:clamp(24px,3.4vw,34px);margin-bottom:16px}
.panel h3{color:#241910}
.panel p{color:#33261a;font-size:17px;line-height:1.7;margin-bottom:16px}
.panel p:last-child{margin-bottom:0}
/* scroll-margin-top is load-bearing, not cosmetic: .nav is position:sticky, so
   jumping to #matt from the home page would otherwise park the top of the bio
   UNDERNEATH the nav bar and hide the name and role. 88px clears the bar (~60px)
   with air to spare. html{scroll-behavior:smooth} is already set above, and the
   reduced-motion query at the end of this file turns that off. */
.bio{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;background:var(--parchment);color:#241910;border:1px solid var(--brass);border-radius:4px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.4);margin-bottom:28px;scroll-margin-top:88px}
@media(min-width:720px){.bio{grid-template-columns:240px 1fr}}
.bio .portrait{background:#cfcfcf}
.bio .portrait .fpo{height:100%;min-height:260px;border:none;border-right:1px solid var(--brass)}
.bio .biobody{padding:24px 26px 26px}
.bio .role{font-family:var(--util);text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--oxblood)}
.bio h3{font-size:26px;color:#241910;margin:4px 0 12px}
.bio p{color:#33261a;font-size:16px;line-height:1.72;margin-bottom:14px}
.bio p:last-child{margin-bottom:0}

/* ============================================================
   MUSIC — jukebox strips
   ============================================================ */
.jukebox{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:900px){.jukebox{grid-template-columns:1fr 320px}}
.strips{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:620px){.strips{grid-template-columns:1fr 1fr}}
.strip{display:flex;align-items:baseline;gap:12px;background:var(--parchment);color:#241910;border:1px solid var(--brass);border-left:4px solid var(--oxblood);border-radius:3px;padding:11px 14px}
.strip .num{font-family:var(--util);font-size:12px;color:var(--oxblood);min-width:24px}
.strip .song{font-family:var(--body);font-weight:700;font-size:15px;color:#241910;line-height:1.3}
.strip .artist{font-family:var(--util);font-size:11px;letter-spacing:.5px;color:#6a4a2a;display:block;margin-top:2px}
.strip .txt{flex:1}
.strip--artist{align-items:center;min-height:44px}
.strip--artist .name{font-family:var(--body);font-weight:700;font-size:15px;color:#241910;line-height:1.3}
.jukebox .inset{align-self:start}
.jukebox .inset img{border:1px solid var(--brass);border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.jukebox .inset .cap{font-family:var(--util);text-transform:uppercase;letter-spacing:2px;font-size:11px;color:var(--brass);text-align:center;margin-top:10px}

/* ============================================================
   SHOWS — rows
   ============================================================ */
.shows{max-width:820px;margin:0 auto;padding:0 24px}
/* Flat panel, no photo: the marquee moved up to the page hero, and running the
   same image twice on a page this short reads as a mistake, not a motif. */
.emptystate{position:relative;border:1px solid var(--brass);border-radius:4px;overflow:hidden;text-align:center;margin-bottom:40px;
  background:linear-gradient(180deg,var(--leather),var(--ink-black))}
.emptystate .pad{padding:clamp(40px,7vw,72px) 24px}
.emptystate h3{font-size:clamp(22px,3vw,30px);margin-bottom:12px}
.emptystate p{max-width:520px;margin:0 auto 22px;color:var(--cream)}
.showrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:20px 0;border-bottom:1px solid var(--leather)}
.showrow .date{font-family:var(--util);text-transform:uppercase;letter-spacing:1px;font-size:13px;color:var(--amber);min-width:150px}
.showrow .venue{font-family:var(--display);font-size:20px;color:var(--cream-bright)}
.showrow .desc{flex-basis:100%;color:var(--smoke);font-size:15px}
.subhead{font-family:var(--util);text-transform:uppercase;letter-spacing:2px;font-size:13px;color:var(--brass);margin:6px 0 4px}

/* ============================================================
   BLOG
   ============================================================ */
.posts{max-width:760px;margin:0 auto;padding:0 24px;display:grid;gap:40px}
.post{background:var(--parchment);color:#241910;border:1px solid var(--brass);border-radius:4px;padding:clamp(26px,4vw,42px);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.post .dateline{font-family:var(--util);text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--oxblood)}
.post h2{color:#241910;text-align:left;font-size:clamp(24px,3.4vw,32px);margin:6px 0 16px}
.post p{color:#33261a;font-size:17px;line-height:1.72;margin-bottom:16px}
.post p:last-child{margin-bottom:0}

/* ============================================================
   BOOKING — form + inclusions
   ============================================================ */
.incl{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:680px){.incl{grid-template-columns:1fr 1fr}}
.incl .item{display:flex;gap:14px;align-items:flex-start;background:var(--leather);border:1px solid rgba(185,149,78,.4);border-radius:4px;padding:18px 20px}
.incl .item .ic{font-size:22px;line-height:1;color:var(--amber);flex-shrink:0}
.incl .item h4{font-family:var(--display);font-size:18px;color:var(--cream-bright);margin-bottom:4px}
.incl .item p{font-size:15px;color:var(--cream);opacity:.9}

.formwrap{max-width:760px;margin:0 auto;padding:clamp(26px,4vw,44px);background:var(--parchment);color:#241910;border:1px solid var(--brass);border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.formwrap h2{color:#241910;text-align:left;margin-bottom:6px}
.formwrap .fnote{font-family:var(--util);font-size:12px;letter-spacing:.5px;color:var(--oxblood);margin-bottom:22px}
.form-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:620px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--util);text-transform:uppercase;letter-spacing:1px;font-size:11px;color:#5a3f28}
.field input,.field select,.field textarea{font-family:var(--body);font-size:15px;color:#241910;background:#f3e8ce;border:1px solid #b79a63;border-radius:4px;padding:11px 12px;width:100%}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(200,128,31,.3)}
/* invalid-field feedback (see site.js) — a blocked submit must show why */
.field--error input,.field--error select,.field--error textarea{border-color:var(--oxblood);background:#f6e4d8}
.field--error input:focus,.field--error select:focus,.field--error textarea:focus{border-color:var(--oxblood);box-shadow:0 0 0 2px rgba(110,42,35,.28)}
.field-err{font-family:var(--util);font-size:11px;letter-spacing:.3px;line-height:1.5;color:var(--oxblood)}
.field-err::before{content:"\2605\00a0"}
/* Server-side rejection notice. The handlers redirect back with ?e=<reason>;
   without a visible message the visitor lands on the form with no idea why. */
.form-note{font-family:var(--util);font-size:12px;letter-spacing:.3px;line-height:1.6;color:var(--oxblood);border:1px solid var(--oxblood);background:#f6e4d8;padding:12px 14px;margin-bottom:20px}
.form-note::before{content:"\2605\00a0"}
/* reCAPTCHA sits in a fixed 302x76 iframe, so it gets its own row instead of
   being dropped into the field grid. Left-aligned to match the fields and the
   submit button -- centered, it was the only element out of the column. */
.formwrap .captcha{margin-top:20px;display:flex;justify-content:flex-start}
/* Google's widget has a hard 302px floor and cannot reflow, so on the
   narrowest phones it runs to the screen edge. Scale it down rather than let
   it overhang. Origin is left so it stays flush with the fields when scaled. */
@media (max-width:359px){
  .formwrap .captcha{margin-top:14px}
  .formwrap .captcha .g-recaptcha{transform:scale(.85);transform-origin:left center}
}
input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:var(--oxblood)}
/* footer signup sits on charred oak — oxblood goes invisible there, so use a lit tint */
footer.site .maillist input.is-invalid{border-color:#C4614E;box-shadow:0 0 0 2px rgba(196,97,78,.25)}
.formwrap .submit{margin-top:8px}
.formwrap .disclaimer{font-family:var(--util);font-size:11px;color:#6a4a2a;margin-top:14px;letter-spacing:.3px}

/* ============================================================
   LISTEN — the board tapes (Music page)
   ============================================================ */
.listen-intro{color:var(--smoke);max-width:600px;margin:14px auto 0;text-align:center;font-size:15px}
.tracks{list-style:none;max-width:720px;margin:30px auto 0;padding:0}
.track{border-top:1px solid rgba(185,149,78,.28);padding:20px 0}
.track:last-of-type{border-bottom:1px solid rgba(185,149,78,.28)}
.thead{display:flex;align-items:baseline;gap:14px}
.tno{font-family:var(--util);font-size:12px;letter-spacing:1px;color:var(--brass);flex-shrink:0}
.ttitle{font-family:var(--display);font-size:19px;line-height:1.25;color:var(--cream-bright)}
.tlen{margin-left:auto;font-family:var(--util);font-size:12px;letter-spacing:1px;color:var(--smoke);flex-shrink:0}
.tnote{font-size:14px;color:var(--smoke);margin:5px 0 12px;padding-left:36px}
/* no-JS fallback: the native control shows only if the player script never runs */
.track audio{display:block;width:100%;height:38px}
.track.has-player audio{display:none}

/* branded player (built by site.js) — native controls render as a bright
   browser-default widget that fights the leather palette */
.player{display:flex;align-items:center;gap:14px;margin-top:12px}
.pbtn{width:42px;height:42px;flex-shrink:0;padding:0;border-radius:50%;
  border:1px solid var(--brass);background:var(--leather);color:var(--amber);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.pbtn:hover{background:var(--amber);color:var(--ink-black);border-color:var(--amber);
  box-shadow:0 0 20px rgba(200,128,31,.42)}
.pbtn:focus-visible,.pbar:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.pbtn.is-loading{opacity:.55;cursor:progress}
.pbtn .glyph{display:block;width:0;height:0;margin-left:3px;border-left:11px solid currentColor;
  border-top:7px solid transparent;border-bottom:7px solid transparent}
.pbtn.is-playing .glyph{position:relative;width:11px;height:13px;margin-left:0;border:0}
.pbtn.is-playing .glyph::before,.pbtn.is-playing .glyph::after{content:"";position:absolute;
  top:0;bottom:0;width:3.5px;background:currentColor}
.pbtn.is-playing .glyph::before{left:0}
.pbtn.is-playing .glyph::after{right:0}
.pbar{position:relative;flex:1;height:6px;border-radius:3px;cursor:pointer;
  background:rgba(185,149,78,.22);border:1px solid rgba(185,149,78,.25)}
.pfill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:var(--amber)}
.ptime{font-family:var(--util);font-size:12px;letter-spacing:1px;color:var(--smoke);
  min-width:42px;text-align:right;flex-shrink:0}
.listen-foot{font-family:var(--util);font-size:11px;letter-spacing:1px;color:var(--smoke);
  text-align:center;margin-top:18px;opacity:.75}
@media(max-width:520px){
  .tnote{padding-left:0}
  .ttitle{font-size:17px}
}

/* ============================================================
   CLOSING CTA + FOOTER
   ============================================================ */
.cta-band{background:var(--ink-black);text-align:center;padding:clamp(48px,8vw,96px) 24px;border-top:1px solid var(--leather)}
.cta-band h2{font-size:clamp(26px,4vw,40px);margin-bottom:10px}
.cta-band .scr{font-size:1.2em}
.cta-band p{color:var(--smoke);max-width:560px;margin:0 auto 26px;font-size:16px}

footer.site{background:var(--charred-oak);border-top:1px solid var(--leather);padding:48px 24px 30px}
footer.site .fgrid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:760px){footer.site .fgrid{grid-template-columns:1.3fr 1fr 1fr}}
footer.site .brandmini{font-family:var(--display);font-size:22px;color:var(--cream)}
footer.site h5{font-family:var(--util);text-transform:uppercase;letter-spacing:2px;font-size:12px;color:var(--brass);margin-bottom:12px}
footer.site a{color:var(--smoke);text-decoration:none;display:block;padding:3px 0;font-size:14px}
footer.site a:hover{color:var(--amber)}
footer.site .maillist p{color:var(--smoke);font-size:14px;margin-bottom:12px}
footer.site .maillist .row{display:flex;gap:8px;flex-wrap:wrap}
footer.site .maillist input{flex:1;min-width:150px;font-family:var(--body);font-size:14px;background:var(--leather);border:1px solid var(--brass);color:var(--cream);padding:10px 12px;border-radius:4px}
footer.site .maillist button{font-family:var(--util);text-transform:uppercase;letter-spacing:1px;font-size:12px;background:var(--amber);color:var(--ink-black);border:none;padding:10px 16px;border-radius:4px;cursor:pointer}
footer.site .copyright{max-width:var(--maxw);margin:32px auto 0;padding-top:20px;border-top:1px solid var(--leather);
  font-family:var(--util);text-transform:uppercase;letter-spacing:2px;font-size:11px;color:var(--smoke);text-align:center}

/* ============================================================
   HOMEPAGE BAND-PHOTO SLOTS (FPO until the shoot; drop-in later)
   ============================================================ */
.liveband{max-width:1080px;margin:0 auto;padding:0 24px}
.liveband .fpo{aspect-ratio:16/7;min-height:0;border:1px solid var(--brass);box-shadow:0 20px 44px rgba(0,0,0,.5)}
/* ---- real photos: each mirrors the FPO box it replaced ---------------- */
.liveband img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;
  border:1px solid var(--brass);box-shadow:0 20px 44px rgba(0,0,0,.5)}

/* ---- ALBUM COVER: FULL BLEED -- the photograph IS the section ------------
   `.sec--photo` drops the section's vertical padding so the image runs edge
   to edge and top to bottom with nothing around it.

   The box is pinned to the image's native 16:9, and `max-height` can only
   ever make it WIDER than that (never taller), so `object-fit:cover` crops
   VERTICALLY and never horizontally. That asymmetry is deliberate: the four
   of them span ~3,370 of the source's 4,032 px, so there is almost no
   horizontal slack, while the bottom of the frame is thigh and safe to lose.

   Horizontal centring is therefore never in play, and `object-position` is
   biased to the TOP because headroom is the thin edge -- the tallest head
   sits about 4% below the top of the frame, so a centred crop would shave
   hair on wide screens. 8% keeps it clear even on an ultrawide.

   On a portrait phone the box lands exactly on 16:9 and nothing is cropped
   at all, which is the only way all four stay in frame on a narrow screen. */
/* Top padding is kept so the rule-star divider above the photo gets the same
   breathing room it has in every other section; the bottom is zeroed so the
   photo runs flush into the section below instead of leaving a second gap on
   top of that section's own top padding. */
.sec--photo{padding:clamp(56px,9vw,120px) 0 0}
.albumcover{position:relative;width:100%;max-width:none;margin:0;padding:0;
  aspect-ratio:16/9;max-height:80vh;overflow:hidden;
  border-top:1px solid var(--brass);border-bottom:1px solid var(--brass)}
.albumcover picture{display:contents}
.albumcover img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 8%;border:0;border-radius:0;box-shadow:none}
.mcard .portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-bottom:1px solid var(--brass)}
.bio .portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-right:1px solid var(--brass)}
/* needed because these <img> carry width/height attrs; without height:auto the
   attribute wins over max-width:100% and the picture renders squashed */
.band .media img{width:100%;height:auto}
.albumcover .fpo-cap,.liveband .fpo-cap{text-align:center;border-left:none;border-top:2px solid var(--oxblood)}

/* reduced motion */
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}