/* 14 Oct 2026 | ONLY the opening What’s On and Classes sections.
   Use the Birthday opening hero's spacing, responsive minimum height,
   left edge and typography rhythm. Leave artwork, colours, other sections,
   all buttons/links, scripts, and scrolling behaviour unchanged. */

/* Match Birthday hero's outer dimensions; keep each existing page's colours. */
body.compact-rhythm main > .whats-latest-hero,
body.compact-rhythm main > .co-classes-compact-hero.classes-colour-intro {
  box-sizing:border-box;
  height:auto!important;
  min-height:clamp(455px,57svh,560px)!important;
  padding:clamp(30px,4vw,54px) var(--pad)!important;
  align-items:center!important;
}

/* What’s On: label, serif headline, lower-right handwriting, body, CTA.
   All elements use the Birthday reference's calm vertical rhythm. */
body.compact-rhythm main > .whats-latest-hero .whats-latest-copy {
  min-width:0;
  align-self:center;
}
body.compact-rhythm main > .whats-latest-hero .whats-hero-kicker {
  margin:0!important;
  line-height:1.4!important;
}
body.compact-rhythm main > .whats-latest-hero .whats-latest-copy h1.co-overlay-title {
  font-family:'Instrument Serif',serif!important;
  font-weight:400!important;
  font-size:clamp(56px,6vw,99px)!important;
  line-height:.89!important;
  letter-spacing:-.06em!important;
  width:max-content!important;
  max-width:100%!important;
  text-wrap:balance;
  text-align:left!important;
  margin:12px 0 24px!important;
}
body.compact-rhythm main > .whats-latest-hero .whats-latest-copy h1.co-overlay-title > .hand {
  position:relative!important;
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin:clamp(12px,1.3vw,18px) 0 0 auto!important;
  padding:0 3px 4px!important;
  font-family:'Gochi Hand',cursive!important;
  font-size:var(--co-fitted-hand,clamp(23px,2.35vw,37px))!important;
  line-height:1.16!important;
  white-space:nowrap!important;
  text-align:right!important;
  transform:rotate(-3deg)!important;
  transform-origin:75% 50%!important;
}
body.compact-rhythm main > .whats-latest-hero .whats-latest-copy > p {
  font-size:clamp(14px,1.3vw,19px)!important;
  line-height:1.38!important;
  max-width:590px!important;
  margin:0!important;
}
body.compact-rhythm main > .whats-latest-hero .whats-hero-links {
  margin-top:23px!important;
}

/* Classes: remove excessive empty space between kicker and heading.
   Keep the existing image, headline copy, and class finder below. */
body.compact-rhythm main > .co-classes-compact-hero.classes-colour-intro {
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:0!important;
}
body.compact-rhythm main > .co-classes-compact-hero > .eyebrow {
  display:block;
  align-self:stretch;
  line-height:1.4!important;
  margin:0!important;
}
body.compact-rhythm main > .co-classes-compact-hero .classes-colour-inner {
  width:100%;
  margin:0!important;
  align-items:center!important;
}
body.compact-rhythm main > .co-classes-compact-hero .co-classes-intro-copy h1 {
  font-family:'Instrument Serif',serif!important;
  font-size:clamp(56px,6vw,99px)!important;
  font-weight:400!important;
  line-height:.89!important;
  letter-spacing:-.06em!important;
  margin:12px 0 24px!important;
  width:max-content!important;
  max-width:100%!important;
  text-wrap:balance;
  text-align:left!important;
}
body.compact-rhythm main > .co-classes-compact-hero .co-classes-intro-copy h1 > .hand {
  position:relative!important;
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  margin:clamp(12px,1.3vw,18px) 0 0 auto!important;
  padding:0 3px 4px!important;
  font-family:'Gochi Hand',cursive!important;
  font-size:var(--co-fitted-hand,clamp(23px,2.35vw,37px))!important;
  line-height:1.16!important;
  white-space:nowrap!important;
  text-align:right!important;
  transform:rotate(-3deg)!important;
  transform-origin:75% 50%!important;
}
body.compact-rhythm main > .co-classes-compact-hero .co-classes-intro-copy > p {
  font-size:clamp(14px,1.3vw,19px)!important;
  line-height:1.38!important;
  max-width:590px!important;
  margin:0 0 23px!important;
}

/* At tablet widths, prevent either hero's text/photo from squeezing together.
   Match Birthday's natural stacked layout without hiding existing imagery. */
@media(max-width:1080px){
  body.compact-rhythm main > .whats-latest-hero,
  body.compact-rhythm main > .co-classes-compact-hero.classes-colour-intro {
    align-items:stretch!important;
  }
  body.compact-rhythm main > .co-classes-compact-hero .classes-colour-inner {
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:22px!important;
  }
  body.compact-rhythm main > .co-classes-compact-hero .co-classes-intro-copy {
    width:100%;
  }
}

/* Birthday's phone layout is naturally content-height, not a forced panel. */
@media(max-width:760px){
  body.compact-rhythm main > .whats-latest-hero,
  body.compact-rhythm main > .co-classes-compact-hero.classes-colour-intro {
    min-height:0!important;
    padding:26px var(--pad) 32px!important;
  }
  body.compact-rhythm main > .whats-latest-hero .whats-latest-copy h1.co-overlay-title,
  body.compact-rhythm main > .co-classes-compact-hero .co-classes-intro-copy h1 {
    font-size:clamp(51px,12.6vw,70px)!important;
    line-height:.9!important;
    margin:12px 0 22px!important;
  }
  body.compact-rhythm main > .whats-latest-hero .whats-latest-copy h1.co-overlay-title > .hand,
  body.compact-rhythm main > .co-classes-compact-hero .co-classes-intro-copy h1 > .hand {
    margin:10px 0 0 auto!important;
    font-size:var(--co-fitted-hand,clamp(17px,5.4vw,25px))!important;
  }
  body.compact-rhythm main > .whats-latest-hero .whats-hero-links {margin-top:20px!important;}
  body.compact-rhythm main > .co-classes-compact-hero .classes-colour-inner {gap:20px!important;}
}