/*
 * CARNABY & OAK — UNIFIED DESIGN SYSTEM / 13 OCT 2026
 * Single source for editorial typography, horizontal alignment, section rhythm
 * and vibrant, interactive card treatments. Added LAST, after legacy styles.
 * All existing application behaviour remains untouched.
 */
:root {
  --co-site-ink: #2c2622;
  --co-site-paper: #fffaf1;
  --co-site-cream: #f5eadb;
  --co-site-sage: #e9efdc;
  --co-site-wine: #7a203e;
  --co-site-yellow: #f5c43b;
  --co-site-teal: #2d7784;
  --co-site-sky: #a9c7e7;
  --co-site-peach: #efb183;
  --co-site-blush: #eab0aa;
  --co-site-lime: #bddc75;
  --co-font-body: 'DM Sans', Arial, sans-serif;
  --co-font-display: 'Instrument Serif', Georgia, serif;
  --co-font-hand: 'Gochi Hand', cursive;
  --co-gutter: clamp(18px, 3.4vw, 54px);
  --co-max-width: 1480px;
  --co-page-gutter: max(var(--co-gutter), calc((100vw - var(--co-max-width)) / 2));
  --co-space-section: clamp(42px, 4.5vw, 72px);
  --co-space-head: clamp(16px, 2.2vw, 28px);
  --co-size-h1: clamp(72px, 7vw, 110px);
  --co-size-h2: clamp(55px, 5.4vw, 84px);
  --co-size-h3: clamp(33px, 3vw, 48px);
  --co-size-body: clamp(15px, 1.05vw, 17px);
  --co-size-hand: clamp(25px, 2.2vw, 34px);
  --co-card-radius: 26px;
  --co-card-gap: clamp(12px, 1.2vw, 20px);
  --co-card-shadow: 0 12px 30px rgba(59, 29, 35, .09);
  --pad: var(--co-page-gutter);
  --co-editorial-serif: var(--co-size-h2);
  --co-editorial-hand: var(--co-size-hand);
  --co-section-title: var(--co-size-h2);
}
@media (min-width: 1600px){ :root {--co-gutter:54px; --co-size-h1:110px;--co-size-h2:84px;--co-size-h3:48px;--co-size-body:17px;--co-size-hand:34px;} }
@media (max-width: 760px){
  :root {
    --co-gutter: clamp(18px, 5vw, 24px);
    --co-page-gutter: var(--co-gutter);
    --co-space-section: clamp(36px, 8vw, 52px);
    --co-size-h1: clamp(61px, 13vw, 80px);
    --co-size-h2: clamp(48px, 11.9vw, 67px);
    --co-size-h3: clamp(32px, 8vw, 42px);
    --co-size-body: 15px;
    --co-size-hand: clamp(22px, 5.8vw, 28px);
  }
}

/* GLOBAL ALIGNMENT — one shared gutter throughout public-facing pages. */
body[data-co-system] { color:var(--co-site-ink); font-family:var(--co-font-body); background:var(--co-site-paper); }
body[data-co-system] main {overflow:clip;}
body[data-co-system] :is(.site-nav,.footer,.hero-grid,.page-hero,.whats-latest-hero,.classes-colour-intro,.class-worlds,.class-host-hero,.birthday-landing-hero,.pull) {
  padding-left:var(--co-page-gutter)!important;
  padding-right:var(--co-page-gutter)!important;
}
body[data-co-system] main .section:not(.hour-section):not(.play-worlds):not(.class-worlds),
body[data-co-system] main .co-birthday-pricing,
body[data-co-system] main .co-birthday-addons,
body[data-co-system] main .co-birthday-faq {
  padding-inline:var(--co-page-gutter)!important;
  padding-block:var(--co-space-section)!important;
}
body[data-co-system] main :is(.play-worlds,.class-worlds,.birthday-details-section) {
  padding-inline:var(--co-page-gutter)!important;
  padding-block:var(--co-space-section)!important;
}
body[data-co-system] main .co-offers { padding-block:var(--co-space-section)!important; }
body[data-co-system] main .hour-section {padding-left:var(--co-page-gutter)!important;padding-right:var(--co-page-gutter)!important;}
body[data-co-system] main [data-vertical-rail] > .co-scroll-pin {
  padding-left:var(--co-page-gutter)!important;
  padding-right:var(--co-page-gutter)!important;
  padding-block:clamp(14px,2vw,26px)!important;
  height: min(calc(100svh - var(--co-rail-top,76px)),760px)!important;
  min-height:min(530px,calc(100svh - var(--co-rail-top,76px)))!important;
  justify-content:center!important;
}
/* Match the compact rail in the saved client brief; avoid an 1100px-tall empty pin on large Macs */
body[data-co-system] main #club-corners.co-spotlight > .co-scroll-pin {height:min(calc(100svh - var(--co-rail-top,76px)),700px)!important;}
body[data-co-system] .footer{padding-top:clamp(45px,4.2vw,72px)!important;}
body[data-co-system] main > .pull {padding-block:clamp(42px,6vw,98px)!important;}
body[data-co-system] main :is(.section-head,.co-section-intro,.co-spotlight-head,.co-birthday-section-head,.birthday-details-head,.play-worlds-head,.play-games-head,.class-faq-head,.class-worlds-intro,.whatson-section-head,.join-section-head,.site-faq-head) {
  margin-bottom:var(--co-space-head)!important;
}
body[data-co-system] main :is(.section-head,.whatson-section-head,.class-faq-head,.site-faq-head) {column-gap:clamp(15px,2.5vw,36px)!important;}

/* FONT ROLES — one consistent hierarchy; no screen >1600px grows titles further. */
body[data-co-system] main h1,
body[data-co-system] main h2,
body[data-co-system] main h3 {text-wrap:balance;}
body[data-co-system] main :is(h1,h2,h3):not(.event-note):not(.hour-now h3){font-synthesis:none;}
body[data-co-system] main :is(.hero h1,.page-hero h1,.whats-latest-copy h1,.class-host-copy h1,.birthday-landing-copy h1,.classes-colour-intro h1){
  font-family:var(--co-font-display)!important;
  font-weight:400!important;
  letter-spacing:-.052em!important;
  line-height:.91!important;
}
body[data-co-system] main :is(.page-hero h1,.whats-latest-copy h1,.class-host-copy h1,.birthday-landing-copy h1,.classes-colour-intro h1){font-size:var(--co-size-h1)!important;}
body[data-co-system] main .garden-hero .hero-copy h1.co-overlay-title{font-size:clamp(112px,9.4vw,148px)!important;line-height:.82!important;}
body[data-co-system] main .birthday-landing-copy h1.co-master-title{font-size:var(--co-size-h1)!important;line-height:.91!important;}
body[data-co-system] main :is(.section-title,.co-overlay-title,.co-display,.whatson-section-head h2,.whatson-split-head h2,.parlor-hours h2,.join-section-head h2,.join-copy h2,.enquiry-copy h2,.birthday-details-head h2,.birthday-final-inner h2,.class-faq-head h2,.class-worlds-intro h2,.play-worlds-head h2,.play-games-head h2,.site-faq-head h2,.membership-feature-copy h2) {
  font-family:var(--co-font-display)!important;
  font-size:var(--co-size-h2)!important;
  font-weight:400!important;
  line-height:.94!important;
  letter-spacing:-.048em!important;
}
body[data-co-system] main :is(.co-spotlight-head,.co-birthday-section-head,.co-section-intro,.birthday-details-head) h2.co-overlay-title {font-size:var(--co-size-h2)!important;}
body[data-co-system] main :is(.co-offer-body h3,.co-activity-body h3,.birthday-detail-grid h3,.story-block h2,.membership-card .price,.event-title,.co-spotlight-card strong) {font-family:var(--co-font-display)!important;font-weight:400!important;}
body[data-co-system] main :is(.co-offer-body h3,.co-activity-body h3,.birthday-detail-grid h3,.co-spotlight-card strong) {font-size:var(--co-size-h3)!important;line-height:.97!important;letter-spacing:-.04em!important;}
body[data-co-system] main :is(.co-intro-copy,.section-copy,.hero-lead,.birthday-landing-copy p,.co-offer-body p,.co-activity-body p,.birthday-detail-grid p,.co-way-small,.join-copy p,.enquiry-copy p,.whatson-new-card p,.story-block p,.membership-feature-copy p){font-family:var(--co-font-body)!important;font-weight:400!important;line-height:1.44!important;}
body[data-co-system] main :is(.section-copy,.co-intro-copy,.birthday-landing-copy>p,.join-copy>p,.membership-feature-copy>p){font-size:var(--co-size-body)!important;max-width:680px;}
body[data-co-system] main .eyebrow{font-family:var(--co-font-body)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.11em!important;}

/* MASTER GOCHI PLACEMENT: text remains one line, right aligned BELOW serif, breathing room. */
body[data-co-system] main h1.co-overlay-title,
body[data-co-system] main h2.co-overlay-title,
body[data-co-system] main .co-overlay-title.co-overlay-title {
  width:max-content!important;max-width:100%!important;overflow:visible!important;
  padding:0!important;margin:0 0 clamp(16px,1.7vw,25px)!important;
  position:relative!important;text-align:left!important;
}
body[data-co-system] main :is(h1,h2,h3).co-overlay-title > .hand,
body[data-co-system] main :is(h1,h2,h3).co-overlay-title.co-overlay-title > span.hand.hand,
body[data-co-system] main .birthday-landing-copy h1.co-master-title > .hand {
  position:relative!important;inset:auto!important;
  display:block!important;float:none!important;width:max-content!important;
  max-width:100%!important;white-space:nowrap!important;
  font-family:var(--co-font-hand)!important;
  font-size:min(var(--co-fitted-hand,34px),var(--co-size-hand))!important;
  font-weight:400!important;letter-spacing:0!important;line-height:1.15!important;
  margin:clamp(8px,.95vw,13px) 0 0 auto!important;
  padding:0 4px 4px!important;
  color:var(--co-site-teal)!important;
  text-align:right!important;
  transform:rotate(-3deg)!important;
  transform-origin:85% 60%!important;
}
body[data-co-system] main :is(.wine-bg,.join-copy,.birthday-shell,.mood-copy,.co-dark-surface) .co-overlay-title > .hand,
body[data-co-system] main .mood-copy .co-overlay-title.co-overlay-title > span.hand.hand{color:var(--co-site-yellow)!important;}
body[data-co-system] main .mood-copy h3.co-overlay-title{color:#fff!important;font-size:clamp(36px,4vw,62px)!important;}
body[data-co-system] main .mood-copy .co-overlay-title > .hand{font-size:min(var(--co-fitted-hand,29px),28px)!important;margin-top:6px!important;}
body[data-co-system] main .birthday-landing-copy h1.co-master-title>.hand{color:var(--co-site-teal)!important;}
body[data-co-system] main .garden-hero .hero-copy h1>.hand{font-size:clamp(33px,3.3vw,47px)!important;line-height:1.02!important;margin-top:10px!important;}

/* Large screens use the SAME card sizes and readable line lengths; background can grow. */
body[data-co-system] main :is(.co-offer-grid,.mood-grid,.birthday-detail-grid,.story-grid,.memberships,.whatson-new-grid,.event-grid,.join-strip,.enquiry-shell){max-width:var(--co-max-width);margin-inline:auto;}
body[data-co-system] main :is(.co-spotlight-head,.co-birthday-section-head,.co-section-intro,.co-way-footer,.section-head){max-width:var(--co-max-width);}
body[data-co-system] main .footer-top{max-width:var(--co-max-width);margin-inline:auto;}
body[data-co-system] main .site-nav{max-width:none;}

/* Layout-based form and card readability: never squeeze copy into narrow side panels. */
body[data-co-system] main :is(.form-field,.co-offer-body,.co-activity-body,.birthday-detail-grid article){min-width:0;}
body[data-co-system] main :is(.birthday-detail-grid,.co-offer-grid,.whatson-new-grid,.event-grid){align-items:stretch;}
@media (min-width: 1680px){
 body[data-co-system] main .hero-grid{min-height:min(840px,calc(100svh - 76px))!important;}
 body[data-co-system] main .hero-collage{min-height:min(710px,68svh)!important;}
 body[data-co-system] main .mood-grid[data-featured]{height:clamp(360px,28vw,455px)!important;}
}

@media(max-width:760px){
 body[data-co-system] main {overflow-x:clip;}
 body[data-co-system] main :is(.hero-grid,.page-hero,.whats-latest-hero,.classes-colour-intro,.class-worlds,.class-host-hero,.birthday-landing-hero) {padding-inline:var(--co-page-gutter)!important;}
 body[data-co-system] main [data-vertical-rail]>.co-scroll-pin{height:calc(100svh - 66px)!important;min-height:0!important;padding-inline:var(--co-page-gutter)!important;}
 body[data-co-system] main .garden-hero .hero-copy h1.co-overlay-title{font-size:clamp(82px,21vw,112px)!important;}
 body[data-co-system] main :is(.page-hero h1,.whats-latest-copy h1,.class-host-copy h1,.birthday-landing-copy h1,.classes-colour-intro h1){font-size:var(--co-size-h1)!important;}
 body[data-co-system] main .birthday-landing-copy h1.co-master-title{font-size:var(--co-size-h1)!important;}
 body[data-co-system] main :is(.section-title,.co-overlay-title,.co-display,.birthday-details-head h2,.class-faq-head h2,.class-worlds-intro h2,.play-worlds-head h2,.play-games-head h2){font-size:var(--co-size-h2)!important;}
 body[data-co-system] main :is(h1,h2,h3).co-overlay-title>.hand{font-size:min(var(--co-fitted-hand,25px),var(--co-size-hand))!important;margin-top:8px!important;}
 body[data-co-system] main .co-birthday-section-head>p,body[data-co-system] main .co-spotlight-head>.co-spotlight-cue{text-align:left!important;}
 body[data-co-system] main :is(.hero,.hero-grid,.birthday-landing-hero){min-height:0!important;}
 body[data-co-system] main .mood-grid[data-featured]{height:auto!important;}
}
@media(prefers-reduced-motion:reduce){
 body[data-co-system] main :is(.co-offer-card,.co-activity-card,.whatson-new-card,.birthday-detail-grid article,.co-spotlight-card){transition:none!important;}
 body[data-co-system] main :is(.co-offer-card,.co-activity-card,.co-spotlight-card):hover{transform:none!important;}
}

/* ONE H1 PER PUBLIC PAGE — heading scale wins over legacy .co-overlay-title. */
body[data-co-system] main h1.co-overlay-title:not(.co-display){font-size:var(--co-size-h1)!important;}
body[data-co-system] main .garden-hero .hero-copy h1.co-overlay-title{font-size:clamp(112px,9.4vw,148px)!important;}
body[data-co-system] main .class-host-copy h2.co-overlay-title{
  font-size:var(--co-size-h2)!important;
  font-family:var(--co-font-display)!important;
  line-height:.94!important;
  letter-spacing:-.048em!important;
  font-weight:400!important;
  color:#fff!important;
  margin:12px 0 24px!important;
}
/* Keep the approval's green/pink/yellow rhythm, but never lose form legibility. */
body.membership-page[data-co-system] main .enquiry-section{background:#dceafa!important;}
@media(max-width:760px){
  body[data-co-system] main h1.co-overlay-title:not(.co-display){font-size:var(--co-size-h1)!important;}
  body[data-co-system] main .garden-hero .hero-copy h1.co-overlay-title{font-size:clamp(82px,21vw,112px)!important;}
}
/* Contrast refinements found during cross-device screenshot review. */
body.birthday-page[data-co-system] main .birthday-details-head .co-overlay-title > .hand,
body.birthday-page[data-co-system] main .birthday-details-head .co-overlay-title.co-overlay-title > span.hand.hand{
  color:var(--co-site-yellow)!important;
}
body.membership-page[data-co-system] main .page-hero.wine-bg{
  background:var(--co-site-wine)!important;
  color:#fffaf1!important;
}
body.membership-page[data-co-system] main .page-hero.wine-bg :is(h1,p,.hero-scribble){color:#fffaf1!important;}
body.membership-page[data-co-system] main .page-hero.wine-bg h1 .hand{color:var(--co-site-yellow)!important;}
body.membership-page[data-co-system] main .page-hero.wine-bg .hero-scribble{color:var(--co-site-yellow)!important;}