/* =========================================================
   El'Shebang Dance Studio — demo site
   Palette: paper white, bone, brick red (from the studio logo)
   Type: Bodoni Moda (display) + Jost (text/UI)
   ========================================================= */

:root{
  --paper:#ffffff;
  --bone:#f5f2f1;
  --bone-2:#ece6e4;
  --ink:#1e1614;
  --muted:#6e6461;
  --red:#8a2c22;
  --red-deep:#5c1712;
  --red-bright:#b33a2b;
  --line:#e4dedc;

  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);

  --f-display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --f-text:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:17px;
  font-weight:300;
  line-height:1.65;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block}
a{color:inherit}
figure,blockquote{margin:0}

h1,h2,h3{font-family:var(--f-display); font-weight:500; margin:0; letter-spacing:-.01em}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}

/* the small solid square echoes the block in the studio logo */
.mark{display:inline-block; width:.5em; height:.5em; background:var(--red); vertical-align:.08em}

:focus-visible{outline:2px solid var(--red-bright); outline-offset:3px}

.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:12px; z-index:200; background:var(--red); color:#fff; padding:10px 16px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--f-text); font-size:15px; font-weight:500; letter-spacing:.06em;
  padding:14px 26px; border:1px solid var(--red); border-radius:2px;
  text-decoration:none; cursor:pointer; background:var(--red); color:#fff;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{background:var(--red-deep); border-color:var(--red-deep)}
.btn--ghost{background:transparent; color:var(--red)}
.btn--ghost:hover{background:var(--red); color:#fff}
.btn--light{background:#fff; border-color:#fff; color:var(--red-deep)}
.btn--light:hover{background:transparent; color:#fff; border-color:#fff}
.btn--onred{background:transparent; border-color:rgba(255,255,255,.55); color:#fff}
.btn--onred:hover{background:#fff; color:var(--red-deep); border-color:#fff}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.site-head.is-stuck{border-bottom-color:var(--line)}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0}
.brand{display:block; line-height:0}
.brand img{width:186px}
.nav{display:flex; align-items:center; gap:30px}
.nav a{
  font-size:14.5px; font-weight:400; letter-spacing:.09em; text-decoration:none; color:var(--ink);
  padding:6px 0; border-bottom:1px solid transparent; transition:border-color .18s ease,color .18s ease;
}
.nav a:hover{color:var(--red); border-bottom-color:var(--red)}
.nav-book{display:none}
.head-cta{font-size:14px; padding:11px 20px}
.burger{display:none; width:44px; height:40px; border:1px solid var(--line); background:#fff; border-radius:2px; cursor:pointer}
.burger span{display:block; width:18px; height:1.5px; background:var(--ink); margin:4px auto; transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative; border-bottom:1px solid var(--line)}
.hero-grid{display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr); align-items:stretch; gap:clamp(28px,5vw,72px)}
.hero-copy{padding:clamp(48px,7vw,104px) 0 clamp(52px,7vw,96px); padding-left:var(--gut); max-width:660px; margin-left:auto}
.hero h1{
  font-size:clamp(40px,5.6vw,74px); line-height:1.02; letter-spacing:-.02em;
  font-weight:500; margin:0 0 26px;
}
.hero h1 em{font-style:italic; color:var(--red)}
.hero-sub{font-size:clamp(17px,1.5vw,19.5px); color:var(--muted); max-width:44ch; margin:0 0 32px}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px}
.hero-meta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; padding-top:22px; border-top:1px solid var(--line); font-size:14.5px; color:var(--muted)}
.stars{color:var(--red); letter-spacing:.16em; font-size:14px}
.hero-meta strong{font-weight:500; color:var(--ink)}
.hero-figure{position:relative; min-height:clamp(340px,52vw,660px)}
.hero-figure img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:56% 42%}
.hero-figure::after{content:""; position:absolute; left:0; top:0; bottom:0; width:10px; background:var(--red)}

/* one deliberate load reveal */
.reveal{opacity:0; transform:translateY(14px); animation:rise .9s cubic-bezier(.2,.7,.3,1) forwards}
.reveal.d1{animation-delay:.08s}
.reveal.d2{animation-delay:.18s}
.reveal.d3{animation-delay:.28s}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; animation:none}}

/* ---------- section furniture ---------- */
.sec{padding:clamp(64px,9vw,120px) 0}
.sec--bone{background:var(--bone)}
.sec-head{max-width:56ch}
.sec-head h2{font-size:clamp(32px,4.2vw,52px); line-height:1.06; margin:0 0 18px}
.sec-head p{color:var(--muted); margin:0}
.kicker{display:flex; align-items:center; gap:10px; font-size:13.5px; letter-spacing:.14em; color:var(--red); margin:0 0 18px; text-transform:lowercase}

/* ---------- classes ---------- */
.classes-grid{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(32px,6vw,88px)}
.classes-aside{position:sticky; top:104px; align-self:start}
.classes-aside .note{margin-top:28px; padding-top:22px; border-top:1px solid var(--line); font-size:15px; color:var(--muted)}
.classes-aside .note a{color:var(--red); text-underline-offset:3px}

.class-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.class-row{display:grid; grid-template-columns:84px minmax(0,1fr) auto; align-items:center; gap:22px;
  padding:20px 12px 20px 0; border-bottom:1px solid var(--line); transition:background .18s ease, padding .18s ease}
.class-row:hover{background:#fff; padding-left:12px}
.sec--bone .class-row:hover{background:#fff}
.class-row img{width:84px; height:84px; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .25s ease}
.class-row:hover img{filter:none}
.class-row h3{font-size:26px; line-height:1.15; margin:0 0 3px; font-weight:500}
.class-row p{margin:0; font-size:15.5px; color:var(--muted); max-width:52ch}
.who{font-size:13px; letter-spacing:.08em; color:var(--red); white-space:nowrap; padding-left:16px}

/* ---------- adults / pilates band ---------- */
.band{background:var(--red-deep); color:#fff}
.band-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,80px); align-items:center}
.band h2{font-size:clamp(30px,3.8vw,46px); line-height:1.08; margin:0 0 20px; color:#fff}
.band p{color:rgba(255,255,255,.82); max-width:50ch}
.band .kicker{color:rgba(255,255,255,.72)}
.band .mark{background:#fff}
.band-quote{margin:30px 0 30px; padding-left:20px; border-left:2px solid rgba(255,255,255,.35); font-family:var(--f-display); font-size:20px; line-height:1.5; font-style:italic; color:#fff; max-width:46ch}
.band-quote cite{display:block; font-family:var(--f-text); font-style:normal; font-size:14px; letter-spacing:.06em; color:rgba(255,255,255,.7); margin-top:12px}
.band-figs{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; max-width:520px; margin-left:auto}
.band-figs img{width:100%; height:auto}
.band-figs figure:last-child{margin-top:52px}

/* ---------- studio / about ---------- */
.about-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,80px); align-items:start}
.about-figure{position:relative}
.about-figure img{width:100%}
.about-figure .inset{width:62%; margin:-14% 0 0 auto; border:8px solid var(--paper); position:relative}
.about-figure figcaption{font-size:14px; color:var(--muted); margin-top:14px}
.about-body h2{font-size:clamp(30px,4vw,48px); line-height:1.08; margin:0 0 22px}
.about-body p{max-width:60ch}
.creed{margin:34px 0; padding:26px 30px; background:var(--bone); border-left:3px solid var(--red);
  font-family:var(--f-display); font-size:19px; font-style:italic; line-height:1.6}
.creed span{display:block}
.facts{list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.facts li{background:var(--paper); padding:18px 20px}
.facts dt,.facts .k{font-size:13px; letter-spacing:.08em; color:var(--muted); display:block; margin-bottom:4px}
.facts .v{font-family:var(--f-display); font-size:20px}

/* ---------- show + gallery ---------- */
#show{border-top:1px solid var(--line)}
.show-copy{max-width:60ch; margin:0 auto; text-align:center; padding:clamp(52px,7vw,84px) 0 clamp(30px,4vw,44px)}
.show-copy h2{font-size:clamp(30px,4.2vw,50px); line-height:1.08; margin:0 0 18px}
.show-copy p{color:var(--muted); margin:0 auto}

.gallery{columns:3 260px; column-gap:16px; padding-bottom:8px}
.gallery button{display:block; width:100%; padding:0; margin:0 0 16px; border:0; background:none; cursor:zoom-in; line-height:0; break-inside:avoid}
.gallery img{width:100%; transition:opacity .2s ease}
.gallery button:hover img{opacity:.86}

.lightbox{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center;
  background:rgba(20,12,10,.94); padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1100px,92vw); max-height:86vh; width:auto; object-fit:contain}
.lightbox .close{position:absolute; top:18px; right:22px; background:none; border:1px solid rgba(255,255,255,.4);
  color:#fff; width:44px; height:44px; font-size:20px; cursor:pointer; border-radius:2px}
.lightbox .close:hover{background:#fff; color:var(--ink)}

/* ---------- reviews ---------- */
.rev-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px}
.score{display:flex; align-items:baseline; gap:16px}
.score .num{font-family:var(--f-display); font-size:clamp(56px,8vw,88px); line-height:.9; color:var(--red)}
.score .of{font-size:15px; color:var(--muted)}
.score .stars{font-size:18px; display:block; margin-bottom:6px}
.quotes{columns:3 300px; column-gap:44px}
.quote{break-inside:avoid; padding:0 0 30px; margin:0 0 30px; border-bottom:1px solid var(--line)}
.quote p{margin:0 0 14px; font-family:var(--f-display); font-size:19px; line-height:1.55}
.quote cite{font-style:normal; font-size:14px; letter-spacing:.06em; color:var(--muted)}
.quote cite b{display:block; font-weight:500; color:var(--ink); letter-spacing:0; font-size:15px}

/* ---------- visit ---------- */
.visit-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px)}
.details{list-style:none; margin:34px 0 0; padding:0}
.details li{display:grid; grid-template-columns:130px minmax(0,1fr); gap:18px; padding:16px 0; border-top:1px solid var(--line); font-size:16px}
.details li:last-child{border-bottom:1px solid var(--line)}
.details .k{font-size:13.5px; letter-spacing:.08em; color:var(--muted)}
.details a{color:var(--red); text-decoration:none; text-underline-offset:3px}
.details a:hover{text-decoration:underline}
.map{margin-top:34px; border:1px solid var(--line); line-height:0}
.map iframe{width:100%; height:300px; border:0; filter:grayscale(.35)}

.form{background:var(--bone); padding:clamp(26px,4vw,40px)}
.form h3{font-size:28px; margin:0 0 8px}
.form > p{margin:0 0 26px; color:var(--muted); font-size:15.5px}
.field{margin-bottom:18px}
.field label{display:block; font-size:13.5px; letter-spacing:.07em; color:var(--muted); margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--f-text); font-size:16px; font-weight:300; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:2px; padding:12px 14px;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red); outline:none}
.field textarea{min-height:96px; resize:vertical}
.two{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form .btn{width:100%; margin-top:6px}
.form-note{font-size:13.5px; color:var(--muted); margin:14px 0 0}

/* ---------- footer ---------- */
.site-foot{background:var(--red-deep); color:rgba(255,255,255,.78); padding:clamp(48px,6vw,72px) 0 34px; font-size:15px}
.foot-grid{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start}
.site-foot img.flogo{width:210px; margin-bottom:18px}
.site-foot h4{font-family:var(--f-text); font-size:13.5px; letter-spacing:.1em; font-weight:500; color:#fff; margin:0 0 14px}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin-bottom:9px}
.site-foot a{color:rgba(255,255,255,.8); text-decoration:none}
.site-foot a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.socials{display:flex; gap:14px; margin-top:20px}
.socials a{display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.32); border-radius:2px}
.socials a:hover{background:#fff; color:var(--red-deep); border-color:#fff}
.socials svg{width:17px; height:17px; fill:currentColor}
.foot-base{margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18); display:flex; flex-wrap:wrap; gap:12px 30px; justify-content:space-between; font-size:13.5px; color:rgba(255,255,255,.6)}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr; gap:0}
  .hero-copy{padding-inline:var(--gut); margin:0; max-width:none}
  .hero-figure{min-height:min(74vw,460px); order:-1}
  .hero-figure img{object-position:56% 34%}
  .hero-figure::after{left:0; right:0; top:auto; bottom:0; width:auto; height:8px}
  .classes-grid,.about-grid,.visit-grid,.band-grid{grid-template-columns:1fr}
  .classes-aside{position:static}
  .band-figs figure:last-child{margin-top:0}
  .about-figure img{max-height:420px; object-fit:cover; width:100%}
}
@media (max-width:820px){
  .nav{
    position:fixed; inset:64px 0 auto; background:#fff; flex-direction:column; align-items:stretch;
    gap:0; padding:8px var(--gut) 22px; border-bottom:1px solid var(--line); display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0; border-bottom:1px solid var(--line); font-size:17px}
  .nav a:hover{border-bottom-color:var(--line)}
  .burger{display:block}
  .head-cta{display:none}
  .nav-book{display:block}
  .nav a.nav-book{
    margin-top:16px; border:1px solid var(--red); border-bottom:1px solid var(--red);
    background:var(--red); color:#fff; text-align:center; font-size:15.5px;
    letter-spacing:.06em; padding:14px 20px; border-radius:2px;
  }
  .nav a.nav-book:hover{background:var(--red-deep); border-color:var(--red-deep); color:#fff}
  .brand img{width:158px}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .class-row{grid-template-columns:64px minmax(0,1fr); gap:16px; padding:18px 0}
  .class-row img{width:64px; height:64px; filter:none}
  .who{grid-column:2; padding-left:0; margin-top:6px}
  .facts{grid-template-columns:1fr}
  .band-figs{grid-template-columns:1fr}
  .band-figs img{min-height:200px}
  .two{grid-template-columns:1fr}
  .details li{grid-template-columns:1fr; gap:4px}
  .foot-grid{grid-template-columns:1fr; gap:34px}
  .gallery{columns:2 140px}
}