/* ==========================================================================
   Western Stomp Co. — global styles
   Vos Entertainment PTY LTD
   ========================================================================== */

:root{
  --ink:      #1a1816;   /* near-black, page dark sections */
  --ink-soft: #2a2724;   /* raised dark surfaces */
  --cream:    #f6f1e8;   /* page background */
  --cream-2:  #efe7da;   /* alt band */
  --tan:      #c9884a;   /* brand accent, CTAs */
  --tan-dk:   #b0733a;   /* accent hover */
  --muted:    #7d7268;   /* secondary text on cream */
  --muted-lt: rgba(255,255,255,.72); /* secondary text on ink */
  --line:     #ded3c3;   /* borders on cream */
  --line-dk:  rgba(255,255,255,.14);
  --white:    #fff;

  --nav-h: 104px;
  --wrap: 1240px;
  --gut: 48px;

  --f-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --f-body: 'Barlow', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--f-body); font-weight:300; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-display); font-weight:500; text-transform:uppercase; line-height:1.04; margin:0}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem); letter-spacing:.02em}
h4{font-size:1rem; letter-spacing:.06em}
p{margin:0 0 1.1em}
em{font-style:normal; color:var(--tan)}

.eyebrow{
  font-family:var(--f-display); font-weight:400; font-size:.74rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--tan); margin-bottom:18px;
}
.eyebrow-dark{color:var(--tan)}
.lede{font-size:1.12rem; color:var(--muted)}
.on-ink .lede{color:var(--muted-lt)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
.section{padding:96px 0}
.section-sm{padding:64px 0}
.on-ink{background:var(--ink); color:var(--white)}
.on-cream-2{background:var(--cream-2)}
.center{text-align:center}
.stack-head{max-width:640px; margin-bottom:52px}
.stack-head h2, .stack-head h1{margin-bottom:18px}
.center .stack-head{margin-left:auto;margin-right:auto}
/* the class is usually on the block itself, not an ancestor */
.stack-head.center{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; cursor:pointer; text-decoration:none; border:none;
  font-family:var(--f-display); font-weight:400; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; padding:15px 30px;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-solid{background:var(--tan); color:#fff}
.btn-solid:hover{background:var(--tan-dk)}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:var(--tan)}
.btn-ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.85)}
.btn-ghost:hover{background:#fff; color:var(--ink)}
.btn-ghost-ink{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
.btn-ghost-ink:hover{background:var(--ink); color:#fff}
.btn-row{display:flex; gap:14px; flex-wrap:wrap}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gut);
  transition:background .28s ease, box-shadow .28s ease, padding .28s ease;
}
.nav-logo img{height:72px; width:auto; transition:height .28s ease}
.nav-logo .logo-dark{display:none}
.nav ul{display:flex; gap:30px; list-style:none; margin:0; padding:0; align-items:center}
.nav ul a{
  text-decoration:none; color:#fff; font-family:var(--f-display); font-weight:400;
  font-size:.8rem; letter-spacing:.15em; text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.55); padding:6px 0; border-bottom:1.5px solid transparent;
}
.nav ul a:hover, .nav ul a[aria-current="page"]{border-bottom-color:var(--tan)}
.nav ul a.btn{text-shadow:none; border-bottom:none}
.nav-logo img{filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}

/* solid state — after scroll, and on pages without a dark hero */
.nav.solid{background:var(--cream); box-shadow:0 1px 0 var(--line); padding:10px var(--gut)}
.nav.solid .nav-logo img{height:60px; filter:none}
.nav.solid .nav-logo .logo-white{display:none}
.nav.solid .nav-logo .logo-dark{display:block}
.nav.solid ul a{color:var(--ink); text-shadow:none}
.nav.solid ul a.btn-solid{color:#fff}

.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:10px}
.burger span{display:block; width:26px; height:2px; background:#fff; transition:background .2s}
.nav.solid .burger span{background:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:68% center}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(12,10,9,.9) 0%, rgba(12,10,9,.72) 42%, rgba(12,10,9,.3) 72%, rgba(12,10,9,.22) 100%),
    linear-gradient(180deg, rgba(12,10,9,.72) 0%, transparent 24%);
}
.hero-inner{position:relative; color:#fff; max-width:640px; padding-top:var(--nav-h)}
.hero h1{margin-bottom:22px}
.hero p{color:rgba(255,255,255,.9); max-width:520px; font-size:1.12rem; margin-bottom:32px}
.hero-tags{
  position:absolute; bottom:34px; left:0; right:0;
  font-family:var(--f-display); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
}
.hero-tags .wrap{display:flex; gap:28px; flex-wrap:wrap}

/* page banner (non-home pages) */
.banner{position:relative; padding:calc(var(--nav-h) + 74px) 0 74px; overflow:hidden; background:var(--ink); color:#fff}
.banner-media{position:absolute; inset:0}
.banner-media img{width:100%;height:100%;object-fit:cover; opacity:.42}
.banner .wrap{position:relative}
.banner p{max-width:620px; color:rgba(255,255,255,.85); margin-bottom:0}

/* ---------- cards & grids ---------- */
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--white); border:1px solid var(--line); padding:32px}
.on-ink .card{background:var(--ink-soft); border-color:var(--line-dk)}
.card h3{margin-bottom:10px}
.card p:last-child{margin-bottom:0}

/* stat strip */
.stats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-dk); border-bottom:1px solid var(--line-dk)}
.stat{padding:34px 20px; text-align:center; border-right:1px solid var(--line-dk)}
.stat:last-child{border-right:none}
.stat b{display:block; font-family:var(--f-display); font-weight:500; font-size:2rem; color:var(--tan); line-height:1}
.stat span{font-family:var(--f-display); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-lt)}

/* ---------- gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:230px; grid-auto-flow:dense; gap:6px}
.gallery a{overflow:hidden; display:block; background:var(--ink)}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.gallery a:hover img{transform:scale(1.05)}
.gallery .tall{grid-row:span 2}
.gallery .wide{grid-column:span 2}

/* ---------- forms ---------- */
.field{margin-bottom:20px}
.field label{display:block; font-family:var(--f-display); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; color:var(--muted)}
.on-ink .field label{color:var(--muted-lt)}
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; font-family:var(--f-body); font-size:1rem; font-weight:300;
  background:var(--white); border:1px solid var(--line); color:var(--ink); border-radius:0;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--tan)}
.field .hint{font-size:.85rem; color:var(--muted); margin-top:6px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.form-note{font-size:.9rem; color:var(--muted)}
.form-status{padding:16px; margin-top:16px; display:none; font-size:.95rem}
.form-status.ok{display:block; background:#e8f0e4; border:1px solid #bcd3b2; color:#33501f}
.form-status.err{display:block; background:#f6e4e1; border:1px solid #dcb2ab; color:#7a2f22}

/* stepper */
.steps{display:flex; gap:10px; margin-bottom:32px; align-items:center}
.step-pip{flex:1; height:3px; background:var(--line)}
.step-pip.on{background:var(--tan)}
.step-label{font-family:var(--f-display); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

/* ---------- footer ---------- */
.footer{background:var(--ink); color:var(--white); padding:72px 0 32px}
.footer a{color:rgba(255,255,255,.78); text-decoration:none}
.footer a:hover{color:var(--tan)}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line-dk)}
.footer h4{font-size:.76rem; letter-spacing:.2em; color:var(--tan); margin-bottom:18px}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:10px; font-size:.95rem}
.footer-logo img{height:88px; width:auto; margin-bottom:18px}  /* width:auto, or the HTML width="955" attribute stretches it */
.footer-bottom{padding-top:26px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.85rem; color:rgba(255,255,255,.55)}
.footer-bottom a{color:rgba(255,255,255,.55)}
.socials{display:flex; gap:16px; margin-top:8px}
.socials a{font-family:var(--f-display); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase}

/* ---------- misc ---------- */
.venue-list{display:flex; flex-wrap:wrap; gap:10px 30px; list-style:none; padding:0; margin:0;
  font-family:var(--f-display); font-size:.9rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-lt)}
.venue-list a{color:inherit; text-decoration:none; border-bottom:1px solid transparent;
  padding-bottom:3px; transition:color .18s, border-color .18s}
.venue-list a:hover, .venue-list a:focus-visible{color:#fff; border-bottom-color:var(--tan)}
.divider{height:1px; background:var(--line); border:none; margin:0}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  :root{--gut:32px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .footer-top{grid-template-columns:1fr 1fr; gap:36px}
}

@media (max-width:820px){
  :root{--gut:22px; --nav-h:84px}
  body{font-size:16px}
  .section{padding:64px 0}

  .nav{padding:12px var(--gut); background:var(--ink)}
  .nav.solid{background:var(--cream)}
  .nav-logo img{height:54px}
  .nav.solid .nav-logo img{height:52px}
  .burger{display:flex}
  .nav ul{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--ink); flex-direction:column; align-items:stretch;
    gap:0; padding:8px 0 18px; border-top:1px solid var(--line-dk);
  }
  .nav.open ul{display:flex}
  .nav.solid.open ul{background:var(--ink)}
  .nav ul li{padding:0 var(--gut)}
  .nav ul a{display:block; color:#fff !important; text-shadow:none; padding:14px 0; border-bottom:1px solid var(--line-dk)}
  .nav ul a.btn{margin-top:14px; text-align:center; border-bottom:none}

  .hero{min-height:0; padding:calc(var(--nav-h) + 56px) 0 96px; align-items:flex-end}
  .hero-scrim{background:linear-gradient(180deg, rgba(12,10,9,.72) 0%, rgba(12,10,9,.3) 32%, rgba(12,10,9,.92) 100%)}
  .hero-inner{padding-top:0}
  .hero p{max-width:none}
  .btn-row .btn{flex:1 1 100%; text-align:center}
  .hero-tags{bottom:26px}
  .hero-tags .wrap{gap:8px 20px; font-size:.66rem}

  .banner{padding:calc(var(--nav-h) + 48px) 0 48px}

  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr; gap:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:none; border-bottom:1px solid var(--line-dk); padding:24px 12px}
  .stat:nth-child(odd){border-right:1px solid var(--line-dk)}

  .gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; gap:4px}
  .gallery .wide{grid-column:span 2}

  .footer-top{grid-template-columns:1fr; gap:32px}
  .footer-bottom{flex-direction:column; gap:8px}
}

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

/* ==========================================================================
   Classes page — timetable & pricing
   ========================================================================== */
.timetable{display:grid; gap:20px}
.day{background:var(--white); border:1px solid var(--line); padding:32px 34px}
.day-head{display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:22px}
.day-head h3{font-size:1.5rem}
.day-head h3 em{font-size:1.1rem; letter-spacing:.02em}
.day-venue{font-family:var(--f-display); font-size:.86rem; letter-spacing:.1em;
  text-transform:uppercase; text-align:right; color:var(--ink)}
.day-venue span{display:block; font-family:var(--f-body); font-size:.85rem; letter-spacing:0;
  text-transform:none; color:var(--muted); font-weight:300; margin-top:3px}
.day-note{color:var(--muted); font-size:.98rem; margin:-6px 0 22px}
.slots{list-style:none; margin:0; padding:0; display:grid; gap:18px}
.slots li{display:grid; grid-template-columns:176px 1fr; gap:6px 26px; align-items:baseline}
.slots b{font-family:var(--f-display); font-weight:500; font-size:.98rem; letter-spacing:.04em; color:var(--tan)}
.slots .lvl{font-family:var(--f-display); font-size:.92rem; letter-spacing:.1em; text-transform:uppercase}
.slots .lvl em{font-size:.8rem; letter-spacing:.04em; text-transform:none; color:var(--muted)}
.slots p{grid-column:2; margin:0; font-size:.96rem; color:var(--muted)}
.slots .tutor{grid-column:2; font-size:.84rem; color:var(--tan); margin-top:-2px}
.slots .notice{grid-column:2; font-size:.86rem; color:var(--ink); background:#f3e6d4;
  border-left:2px solid var(--tan); padding:5px 10px; margin-top:4px; justify-self:start}
.slots .flag{display:inline-block; font-family:var(--f-b); font-size:.62rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; background:#9c4a3c;
  padding:3px 8px; vertical-align:middle; margin-left:8px}
.slots li.gap{margin-top:14px; padding-top:24px; border-top:1px solid var(--line)}
.slots li.is-off b{text-decoration:line-through; opacity:.6}
.slots li.is-off .lvl{opacity:.6}
.slots li.is-off .lvl .flag{opacity:1; text-decoration:none}
.slots li.is-off p{opacity:.6}

.price-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.price{background:var(--ink-soft); border:1px solid var(--line-dk); padding:26px 20px; text-align:center; position:relative}
.price b{display:block; font-family:var(--f-display); font-weight:500; font-size:2.3rem; line-height:1; margin-bottom:6px}
.price span{font-family:var(--f-display); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-lt)}
.price em{display:block; margin-top:10px; font-size:.85rem; color:var(--muted-lt)}
.price-hero{grid-column:span 2; background:var(--tan); border-color:var(--tan)}
.price-hero b, .price-hero span, .price-hero em{color:#fff}
.price-hero .tag{position:absolute; top:12px; right:14px; font-size:.62rem; letter-spacing:.18em;
  background:rgba(0,0,0,.28); padding:4px 9px}
.price-free{grid-column:span 2; border-color:var(--tan)}
.price-free b{color:var(--tan)}

@media (max-width:820px){
  .day{padding:24px 20px}
  .day-head{flex-direction:column; gap:8px}
  .day-venue{text-align:left}
  .slots li{grid-template-columns:1fr; gap:2px}
  .slots p{grid-column:1}
  .slots .tutor{grid-column:1}
  .slots .notice{grid-column:1}
  .slots b{font-size:.92rem}
  .price-grid{grid-template-columns:repeat(2,1fr); gap:10px}
  .price-hero,.price-free{grid-column:span 2}
  .price b{font-size:1.9rem}
}

/* ==========================================================================
   Events page
   ========================================================================== */
.ev-list{display:grid; gap:16px}
.ev-month{font-size:1.05rem; letter-spacing:.16em; color:var(--muted);
  margin:34px 0 6px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.ev-month:first-child{margin-top:0}

.ev{display:grid; grid-template-columns:96px 210px 1fr; gap:0;
  background:var(--white); border:1px solid var(--line); overflow:hidden; align-items:stretch}
.ev:has(.ev-img){grid-template-columns:96px 210px 1fr}
.ev:not(:has(.ev-img)){grid-template-columns:96px 1fr}

.ev-date{background:var(--ink); color:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:20px 8px; text-align:center}
.ev-date b{font-family:var(--f-display); font-weight:500; font-size:2.1rem; line-height:1}
.ev-date span{font-family:var(--f-display); font-size:.82rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tan); margin-top:2px}
.ev-date i{font-style:normal; font-family:var(--f-display); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:6px}

.ev-img{overflow:hidden; background:var(--ink)}
.ev-img img{width:100%; height:100%; object-fit:cover}

.ev-body{padding:26px 30px; position:relative}
.ev-body h3{margin-bottom:10px; padding-right:78px}
.ev-body p{font-size:.96rem; color:var(--muted); margin-bottom:16px}
.ev-body p:last-child{margin-bottom:0}
.ev-tag{position:absolute; top:26px; right:30px; font-family:var(--f-display);
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tan); border:1px solid var(--tan); padding:4px 9px}
.ev-meta{display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:14px;
  font-family:var(--f-display); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase}
.ev-meta a{text-decoration:none; border-bottom:1px solid var(--line)}
.ev-meta a:hover{border-bottom-color:var(--tan); color:var(--tan)}
.ev-meta .ev-price{color:var(--tan)}

.ev-empty{background:var(--white); border:1px solid var(--line); padding:56px 40px; text-align:center}
.ev-empty h3{margin-bottom:12px}
.ev-empty p{color:var(--muted); margin:0}

.ev-foot{margin-top:64px; padding-top:56px; border-top:1px solid var(--line)}
.ev-foot .lede{max-width:560px; margin-bottom:26px}

@media (max-width:820px){
  .ev, .ev:has(.ev-img), .ev:not(:has(.ev-img)){grid-template-columns:76px 1fr}
  .ev-img{display:none}
  .ev-body{padding:20px 20px}
  .ev-body h3{padding-right:0; font-size:1.12rem}
  .ev-tag{position:static; display:inline-block; margin-bottom:10px}
  .ev-date b{font-size:1.7rem}
  .ev-foot{margin-top:44px; padding-top:40px}
}

/* ==========================================================================
   Book Us + enquiry
   ========================================================================== */
.steps-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:s}
.steps-list li{border-top:2px solid var(--tan); padding-top:22px}
.steps-list b{display:block; font-family:var(--f-display); font-size:.8rem; letter-spacing:.2em; color:var(--tan); margin-bottom:12px}
.steps-list h3{margin-bottom:8px; font-size:1.1rem}
.steps-list p{font-size:.95rem; color:var(--muted); margin:0}

.enq{display:grid; grid-template-columns:1fr 1.35fr; gap:64px; align-items:start}
.enq-side{position:sticky; top:calc(var(--nav-h) + 24px)}
.enq-side h1{margin-bottom:18px; font-size:clamp(2rem,3.6vw,2.9rem)}
.enq-contact{margin-top:36px; padding-top:26px; border-top:1px solid var(--line)}
.enq-contact p{font-family:var(--f-display); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.enq-contact a{display:block; font-family:var(--f-display); font-size:1.05rem;
  letter-spacing:.04em; text-decoration:none; margin-bottom:6px}
.enq-contact a:hover{color:var(--tan)}

.enq-form{background:var(--white); border:1px solid var(--line); padding:44px}
.enq-h{font-size:1.35rem; margin-bottom:26px}
.enq-h em{font-size:.85rem; letter-spacing:.04em; text-transform:none}

@media (max-width:900px){
  .steps-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .steps-list{grid-template-columns:1fr; gap:20px}
  .enq{grid-template-columns:1fr; gap:34px}
  .enq-side{position:static}
  .enq-form{padding:26px 20px}
}

/* nav overflow guard — keep the CTA from being clipped on narrow desktops */
.nav ul{flex-wrap:nowrap}
.nav ul li{flex:0 0 auto}
.nav ul a{white-space:nowrap}
@media (max-width:1300px){ .nav ul{gap:22px} .nav ul a{font-size:.75rem; letter-spacing:.12em} .nav ul a.btn{padding:13px 20px} }
@media (max-width:1100px) and (min-width:821px){ .nav ul{gap:16px} .nav-logo img{height:60px} .nav.solid .nav-logo img{height:52px} }

/* ==========================================================================
   About page
   ========================================================================== */
.founder{display:grid; grid-template-columns:1fr 1.25fr; gap:56px; align-items:center}
.founder-img img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover}
.founder-body h2{margin-bottom:24px}
.founder blockquote{margin:0; padding-left:26px; border-left:3px solid var(--tan)}
.founder blockquote p{font-size:1.1rem; line-height:1.7; color:var(--muted)}
.founder blockquote p:last-child{margin-bottom:0}

.crew{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.crew-card{display:grid; grid-template-columns:180px 1fr; background:var(--ink-soft);
  border:1px solid var(--line-dk); overflow:hidden}
.crew-card img{width:100%; height:100%; object-fit:cover; min-height:210px}
.crew-body{padding:26px 28px}
.crew-body h3{margin-bottom:2px}
.crew-body .role{display:block; font-family:var(--f-display); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tan); margin-bottom:14px}
.crew-body p{font-size:.94rem; color:var(--muted-lt); margin:0}
.crew-body .badge{display:inline-block; font-family:var(--f-display); font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase; border:1px solid var(--tan);
  color:var(--tan); padding:3px 8px; margin-bottom:10px}

/* ==========================================================================
   Contact page extras
   ========================================================================== */
.contact-alt{margin-top:36px; padding:24px; background:var(--cream-2); border:1px solid var(--line)}
.contact-alt h3{font-size:1.05rem; margin-bottom:8px}
.contact-alt p{font-size:.94rem; color:var(--muted); margin-bottom:16px}

/* ==========================================================================
   Gallery page
   ========================================================================== */
.gallery-full{grid-auto-rows:260px}
.gallery-full figure{margin:0; position:relative; overflow:hidden; background:var(--ink)}
.gallery-full figure.wide{grid-column:span 2}
.gallery-full img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.gallery-full figure:hover img{transform:scale(1.06)}
.gallery-full figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 16px 12px; color:#fff;
  font-family:var(--f-display); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  background:linear-gradient(0deg, rgba(12,10,9,.78), transparent);
  opacity:0; transition:opacity .3s ease;
}
.gallery-full figure:hover figcaption{opacity:1}

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal{max-width:760px}
.legal h2{font-size:1.35rem; margin:44px 0 14px}
.legal h2:first-child{margin-top:0}
.legal p, .legal li{color:var(--muted)}
.legal ul{padding-left:22px; margin-bottom:1.1em}
.legal li{margin-bottom:8px}
.legal .updated{font-family:var(--f-display); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tan); margin-bottom:34px}

@media (max-width:900px){ .crew{grid-template-columns:1fr} }
@media (max-width:820px){
  .founder{grid-template-columns:1fr; gap:28px}
  .founder blockquote p{font-size:1rem}
  .crew-card{grid-template-columns:1fr}
  .crew-card img{min-height:0; aspect-ratio:16/10}
  .crew-body{padding:20px}
  .gallery-full{grid-auto-rows:180px}
  .gallery-full figcaption{opacity:1; font-size:.6rem; padding:18px 10px 8px}
}

/* crew cards without portraits — clean typographic treatment until we have headshots */
.crew-card--text{grid-template-columns:1fr; position:relative; padding:30px 32px 32px; border-left:2px solid var(--tan)}
.crew-card--text .crew-body{padding:0}
.crew-card--text h3{font-size:1.5rem}
@media (max-width:820px){ .crew-card--text{padding:24px 22px} }

/* hero: keep content clear of the absolutely-positioned tag row on short viewports */
.hero .hero-inner{padding-bottom:96px}
.hero{min-height:min(92vh, 900px)}
@media (max-width:820px){ .hero .hero-inner{padding-bottom:0} }

/* the nav link rule was zeroing the CTA's padding — restore it */
.nav ul a.btn{padding:14px 26px}
@media (max-width:1300px){ .nav ul a.btn{padding:13px 20px} }

/* ==========================================================================
   Submit Your Dance
   ========================================================================== */
.crit{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.crit-card{background:var(--white); border:1px solid var(--line); padding:32px 34px; position:relative}
.crit-card--wide{grid-column:span 2; border-color:var(--tan); border-width:1px 1px 1px 3px}
.crit-icon{font-size:1.7rem; line-height:1; display:block; margin-bottom:16px}
.crit-card h3{margin-bottom:10px}
.crit-card p{font-size:.97rem; color:var(--muted); margin:0}

.notlist{display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:start}
.notlist h2{margin-bottom:0}
.notlist ul{list-style:none; margin:0; padding:0}
.notlist li{
  font-family:var(--f-display); font-weight:400; font-size:1.15rem; letter-spacing:.01em;
  padding:18px 0 18px 34px; border-bottom:1px solid var(--line-dk); position:relative;
}
.notlist li:last-child{border-bottom:none}
.notlist li::before{
  content:'—'; position:absolute; left:0; top:18px; color:var(--tan);
}
.notlist-close{
  margin:48px auto 0; max-width:700px; text-align:center; font-size:1.15rem;
  color:var(--muted-lt); line-height:1.7;
}

@media (max-width:820px){
  .crit{grid-template-columns:1fr}
  .crit-card--wide{grid-column:span 1}
  .crit-card{padding:24px 22px}
  .notlist{grid-template-columns:1fr; gap:24px}
  .notlist li{font-size:1.02rem; padding:14px 0 14px 28px}
  .notlist li::before{top:14px}
  .notlist-close{margin-top:34px; font-size:1.02rem; text-align:left}
}

/* five-across level cards (home page) */
.grid-5{grid-template-columns:repeat(5,1fr); gap:16px}
.grid-5 .card{padding:26px 22px}
.grid-5 .card h3{font-size:1.08rem}
.grid-5 .card p{font-size:.95rem}
@media (max-width:1180px){ .grid-5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){  .grid-5{grid-template-columns:1fr} }

/* ---------- level ladder (home page) ---------- */
.levels{display:grid; gap:0; border-top:1px solid var(--line)}
.level{display:grid; grid-template-columns:260px 1fr; gap:36px;
  padding:28px 0; border-bottom:1px solid var(--line); align-items:start}
.level h3{font-size:1.35rem; color:var(--ink)}
.level p{margin:0; color:var(--muted); font-size:1rem; max-width:760px}
@media (max-width:820px){
  .level{grid-template-columns:1fr; gap:8px; padding:22px 0}
  .level h3{font-size:1.15rem}
  .level p{font-size:.96rem}
}

/* levels list on the alt band (classes page) */
.on-cream-2 .levels{border-top-color:#ddd0bd}
.on-cream-2 .level{border-bottom-color:#ddd0bd}

/* in-between levels (High Beginner / High Improver) — read as bridges,
   not as full rungs, so the ladder still scans as five main levels */
.level-sub h3{font-size:1.1rem; color:var(--muted)}
.level-sub h3 span{display:block; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tan); margin-top:6px}
.level-sub p{font-size:.95rem}

/* Seven nav items stop fitting alongside the logo below ~960px, so the
   slide-down menu now starts there rather than at 820px. */
@media (max-width:960px) and (min-width:821px){
  .burger{display:flex}
  .nav ul{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--ink); flex-direction:column; align-items:stretch;
    gap:0; padding:8px 0 18px; border-top:1px solid var(--line-dk);
  }
  .nav.open ul{display:flex}
  .nav.solid.open ul{background:var(--ink)}
  .nav ul li{padding:0 var(--gut)}
  .nav ul a{display:block; color:#fff !important; text-shadow:none;
    padding:14px 0; border-bottom:1px solid var(--line-dk)}
  .nav ul a.btn{margin-top:14px; text-align:center; border-bottom:none}
}

/* Mid-page CTA bands. These reuse .hero for the photo + scrim, but they sit
   in the middle of a page rather than under the fixed nav, so they need
   ordinary section padding instead of the nav offset and the 96px bottom
   allowance the top-of-page hero uses for its tag row. */
.hero-cta{min-height:0; padding:96px 0}
.hero-cta .hero-inner{padding-top:0; padding-bottom:0}
@media (max-width:820px){ .hero-cta{padding:64px 0} }

/* a card that fills the last row of a three-across grid on its own */
.grid-3 .card-wide{grid-column:1 / -1}

/* ==========================================================================
   Class pass (customer-facing)
   ========================================================================== */
.pass-card{background:#fff; border:1px solid var(--line); padding:38px 34px; text-align:center}
.pass-head{margin-bottom:26px}
.pass-card h1{font-size:clamp(1.6rem,4vw,2.1rem); margin-bottom:8px}
.pass-card .meta{color:var(--muted); font-size:.95rem; margin:0}
.pass-qr{width:min(260px,72vw); margin:0 auto; padding:14px; background:#fff;
  border:1px solid var(--line)}
.pass-qr svg{width:100%; height:auto; display:block}
.pass-code{font-family:var(--f-display); font-size:.9rem; letter-spacing:.22em;
  color:var(--muted); margin:14px 0 0}
.pass-count{margin-top:26px; padding-top:24px; border-top:1px solid var(--line)}
.pass-count b{display:block; font-family:var(--f-display); font-weight:500;
  font-size:3.4rem; line-height:1; color:var(--tan)}
.pass-count span{font-family:var(--f-display); font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted)}
.pass-warn{margin-top:20px; padding:12px 14px; background:#f3e6d4;
  border-left:3px solid var(--tan); font-size:.92rem; text-align:left}
.pass-note{margin:26px 0 0; font-size:.88rem; color:var(--muted)}
@media (max-width:520px){ .pass-card{padding:28px 20px} }

/* running order on an event card */
.ev-run{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:5px;
  border-top:1px solid var(--line); padding-top:12px}
.ev-run li{display:grid; grid-template-columns:150px 1fr; gap:4px 16px;
  font-size:.92rem; color:var(--muted)}
.ev-run b{font-family:var(--f-display); font-weight:500; letter-spacing:.03em;
  color:var(--tan); font-size:.9rem}
@media (max-width:560px){ .ev-run li{grid-template-columns:1fr; gap:0} }

/* a standout notice on a class day — footwear warnings and the like.
   Always sits directly under the venue so it reads the same on every day. */
.day-notice{
  display:inline-block; margin:0 0 14px;
  background:#f3e6d4; border-left:3px solid var(--tan);
  padding:9px 14px; font-size:.92rem; color:var(--ink);
}
.on-ink .day-notice{background:rgba(201,136,74,.16); color:#fff}

/* ==========================================================================
   At-a-glance timetable panel (opened by the nav's Join a Class button)
   ========================================================================== */
.tt-sheet{position:fixed; inset:0; z-index:200; background:rgba(12,10,9,.62);
  display:flex; align-items:center; justify-content:center; padding:20px;
  overflow-y:auto}
.tt-sheet[hidden]{display:none}
.tt-box{position:relative; background:var(--cream); width:100%; max-width:820px;
  padding:42px 40px; max-height:92dvh; overflow-y:auto}
.tt-close{position:absolute; top:12px; right:16px; background:none; border:none;
  font-size:2rem; line-height:1; color:var(--muted); cursor:pointer; padding:4px 10px}
.tt-close:hover{color:var(--ink)}
.tt-title{font-size:clamp(1.6rem,3.4vw,2.3rem); margin-bottom:12px}
.tt-lede{color:var(--muted); font-size:1rem; margin-bottom:26px; max-width:56ch}
.tt-loading{color:var(--muted); padding:20px 0; margin:0}

.tt-table{width:100%; border-collapse:collapse; font-size:.95rem; table-layout:fixed}
.tt-table th{background:var(--ink); color:#fff; text-align:left;
  font-family:var(--f-display); font-weight:500; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; padding:12px 14px}
.tt-table th:first-child{width:240px}
.tt-table td{border-bottom:1px solid var(--line); padding:14px; vertical-align:top}
.tt-table tbody tr:nth-child(even){background:rgba(255,255,255,.55)}

.tt-day{display:block; font-family:var(--f-display); font-weight:500;
  text-transform:uppercase; letter-spacing:.06em; color:var(--tan);
  font-size:1.02rem; margin-bottom:4px}
/* Venue name, street, hours — each on its own line, so nothing has to wrap
   mid-address ("The Junction GC, 14 Junction / Rd"). */
.tt-venue{display:block; color:var(--muted); font-size:.88rem; line-height:1.45}
.tt-venue span{display:block}
.tt-venue .tt-place{color:var(--ink)}
.tt-venue .tt-span{margin-top:4px}

.tt-classes div{display:grid; grid-template-columns:158px 1fr; gap:4px 14px;
  align-items:baseline; margin-bottom:6px}
.tt-classes div:last-child{margin-bottom:0}
.tt-classes b{font-family:var(--f-display); font-weight:500; letter-spacing:.03em;
  white-space:nowrap}
.tt-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}

/* On a phone three columns is the wrong shape — each day becomes its own
   block instead, which is how you'd read it standing at a bus stop. */
@media (max-width:640px){
  .tt-sheet{padding:0; align-items:flex-start}
  .tt-box{padding:30px 18px calc(30px + env(safe-area-inset-bottom,0));
    max-height:100dvh; min-height:100dvh}
  .tt-lede{margin-bottom:20px}

  .tt-table{table-layout:auto}
  .tt-table, .tt-table tbody, .tt-table tr, .tt-table td{display:block; width:100%}
  .tt-table thead{display:none}
  .tt-table tbody tr, .tt-table tbody tr:nth-child(even){
    background:#fff; border:1px solid var(--line); margin-bottom:12px; padding:16px 18px}
  .tt-table td{border:none; padding:0}

  .tt-day{font-size:1.15rem; letter-spacing:.08em; margin-bottom:2px}
  /* the name keeps its own line; street and hours share the one below it */
  .tt-venue{font-size:.88rem; margin-bottom:12px; min-width:0}
  .tt-venue .tt-place{display:block}
  .tt-venue .tt-addr, .tt-venue .tt-span{display:inline; margin:0}
  .tt-venue .tt-span{color:var(--tan)}
  .tt-venue .tt-span::before{content:'· '; color:var(--muted)}
  .tt-venue .tt-addr + .tt-span{margin-left:6px}

  .tt-classes div{padding:5px 0; border-top:1px solid var(--line); margin:0}
  .tt-classes div:first-child{border-top:none; padding-top:0}
  .tt-classes div{display:grid; grid-template-columns:124px 1fr; gap:2px 10px}
  .tt-classes b{margin:0; font-size:.88rem; color:var(--tan)}

  .tt-actions{margin-top:22px}
  .tt-actions .btn{flex:1 1 100%; text-align:center}
}

/* ==========================================================================
   Nav: keep the call to action in the bar on a phone, not buried in the menu
   ========================================================================== */
.nav-cta{display:flex; align-items:center; gap:10px}

/* below the desktop breakpoint the links collapse into the menu, but the
   button and the burger stay side by side in the bar */
@media (max-width:960px){
  .nav ul{order:3}
  .nav-cta .btn{padding:11px 18px; font-size:.72rem; letter-spacing:.12em}
}
@media (max-width:420px){
  .nav-cta .btn{padding:10px 13px; font-size:.66rem; letter-spacing:.08em}
  .nav-logo img{height:48px}
  .nav.solid .nav-logo img{height:46px}
}

/* The regular nights, written into the page at build time. This is what a
   visitor sees before the live dates arrive — and all a visitor without
   JavaScript ever sees — so it says "Every Tuesday" rather than a date. */
.ev-standing{display:grid; grid-template-columns:168px 1fr; gap:0 26px; align-items:start}
.ev-when{font-family:var(--f-display); font-weight:500; text-transform:uppercase;
  letter-spacing:.08em; color:var(--tan); font-size:.92rem; padding-top:3px}
.ev-note{color:var(--muted); font-size:.92rem; margin-top:22px}
@media (max-width:640px){
  .ev-standing{grid-template-columns:1fr; gap:6px}
  .ev-when{padding-top:0}
}

/* ---------- Grapevine sign-up ---------- */
.join{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}
.join-side h1{margin-bottom:18px}
.join-points{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px}
.join-points li{padding-left:24px; position:relative; color:var(--muted); font-size:.98rem}
.join-points li::before{content:'✓'; position:absolute; left:0; color:var(--tan); font-weight:600}
.join-points b{color:var(--ink); font-weight:500}
.join-contact{margin-top:34px; padding-top:26px; border-top:1px solid var(--line)}
.join-contact p{font-size:.9rem; color:var(--muted); margin-bottom:8px}
.join-contact a{display:block; font-family:var(--f-display); letter-spacing:.06em; color:var(--tan); text-decoration:none; margin-bottom:4px}
.join-contact a:hover{color:var(--tan-dk)}

.join-form{background:var(--white); border:1px solid var(--line); padding:38px 36px}
.join-h{font-size:1.5rem; margin-bottom:26px}
.join-diet{border:1px solid var(--line); padding:18px 20px; margin:0 0 22px}
.join-diet legend{font-family:var(--f-display); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding:0 8px}
.join-diet .hint{font-size:.85rem; color:var(--muted)}
.diet-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.diet-pick{display:flex; align-items:center; gap:9px; font-size:.94rem; color:var(--ink); cursor:pointer}
.diet-pick input{width:auto; margin:0}

.consent{display:flex; gap:12px; align-items:flex-start; margin:0 0 22px;
  font-size:.94rem; color:var(--muted); line-height:1.5; cursor:pointer}
.consent input{width:auto; margin:3px 0 0; flex:none}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

@media (max-width:900px){
  .join{grid-template-columns:1fr; gap:38px}
  .join-form{padding:28px 22px}
}
@media (max-width:420px){ .diet-grid{grid-template-columns:1fr} }

/* ---- Waiver ---- */
.w_q{font-weight:400;margin:0 0 10px}
.w_terms{font-size:.95rem;line-height:1.6;margin:0 0 4px;color:var(--ink)}
.w_pick{display:flex;gap:10px;align-items:flex-start;margin:8px 0;cursor:pointer;font-size:.95rem}
.w_pick input{width:auto;margin-top:3px;flex:none}
.w_agree{font-weight:400}
.w_sig{width:100%;height:170px;background:#fff;border:1px solid var(--line);touch-action:none;display:block;border-radius:0}
.w_minor_row{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.w_minor_row:first-child{border-top:none;padding-top:0;margin-top:0}
fieldset{border:1px solid var(--line);padding:20px 22px;margin:0 0 22px}
legend{font-family:var(--f-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tan);padding:0 8px}
body.kiosk .nav, body.kiosk .footer{display:none}
body.kiosk .section{padding-top:24px!important}
@media (max-width:640px){.w_sig{height:150px}}