/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════ */

:root {
  /* ── Colors ───────────────────────────────────────── */
  --color-bg:                   #ffffff;   /* page background — html element; SVG provides decorative layer on top */
  --color-surface:              #ffffff;   /* dropdown bg, card bg */
  --color-text:                 #000000;
  --color-border:               #000000;
  --color-accent-light:         #f0e5ff;   /* Learn More hover (desktop), submit/join buttons */
  --color-save-event-bg:        #fff9dc;   /* Save Event button — all screen sizes */
  --color-learn-more-hover:     #f0e5ff;
  --color-carousel-placeholder: #e3e3e3;   /* carousel slide placeholder */

  /* ── Typography ───────────────────────────────────── */
  --font-mono:           'JetBrains Mono', monospace;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-size-xs:        0.75rem;    /* 12px — location, save event label */
  --font-size-sm:        0.875rem;   /* 14px — day number, learn more */
  --font-size-base:      1rem;       /* 16px — event title, buttons, mobile nav */
  --font-size-contact:   0.9375rem;  /* 15px — contact section labels */
  --font-size-lg:        1.125rem;   /* 18px — headings, desktop nav (reduced 2px from original 20px) */

  /* ── Spacing ──────────────────────────────────────── */
  --space-1:   0.25rem;    /*  4px */
  --space-2:   0.5rem;     /*  8px */
  --space-2-5: 0.625rem;   /* 10px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-9:   2.1875rem;  /* 35px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */

  /* ── Navbar ───────────────────────────────────────── */
  --nav-padding:    0.9375rem;                    /* 15px — all sides mobile; top/left/bottom desktop */
  --nav-pad-right:  3.125rem;                    /* 50px — desktop outer right padding */
  --nav-logo:       2.6875rem;                   /* 43px — mobile logo */
  --nav-logo-lg:    4.375rem;                    /* 70px — desktop logo */
  --nav-height:     5.625rem;                    /* 90px — desktop brand + links group height */
  --nav-links-gap:        clamp(7.5rem, 11vw, 10.3125rem); /* fluid 120px→165px gap between About/Offerings/Blog */
  --nav-underline-offset: 5px;  /* gap between text baseline and underline */
  --nav-underline-width:  3px;  /* underline thickness (browser auto ≈ 1px + 2px) */
  --nav-dropdown-delay:   200ms; /* hide delay — keeps dropdown open while mouse travels down */

  /* ── Borders ──────────────────────────────────────── */
  --border-width:       1px;
  --border-width-thick: 2px;

  /* ── Radii ────────────────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 5px;
  --radius-xl: 10px;

  /* ── Z-index ──────────────────────────────────────── */
  --z-background: -1;
  --z-content:     1;
  --z-nav:        10;
  --z-dropdown:   20;

  /* ── Transitions ──────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ── Carousel ─────────────────────────────────────── */
  --carousel-slide-gap:  2.5rem;      /* 40px — gap between every slide */
  --carousel-slide-h:    21.875rem;   /* 350px — fixed height; width derives from each image's aspect ratio */
  /* ── Calendar ─────────────────────────────────────── */
  --calendar-col-w:      32.6875rem;   /* 523px — calendar column + container width */
  --calendar-box-h:      28.4375rem;   /* 455px — visible container height */
  --calendar-list-gap:   1.25rem;      /* 20px — gap between cards */
  --calendar-card-gap:   1.125rem;     /* 18px — gap between date / text / learn-more */
  --calendar-card-pad-v: 0.625rem;     /* 10px — card top/bottom padding */
  --calendar-card-pad-l: 1.875rem;     /* 30px — card left padding */
  --calendar-card-pad-r: 1.875rem;     /* 30px — card right padding */
  --calendar-day-box:    3.375rem;     /* 54px — day number box */
  --calendar-save-w:     5.375rem;     /* 86px — save event button width */
  --calendar-save-h:     1.4375rem;    /* 23px — save event button height */
  --calendar-scrollbar:  1.0625rem;    /* 17px — scrollbar container width */
  --calendar-section-pt: 0;               /* 0px top */
  --calendar-section-pb: var(--space-16);  /* 64px bottom */

  --carousel-btn-size:   2.1875rem;   /* 35px — arrow button diameter (25% smaller than original 47px) */
  --carousel-dot-size:   0.9375rem;   /* 15px — dot diameter */
  --carousel-dots-w:     6.125rem;    /* 98px — dot nav total width (Figma) */
  --carousel-dots-h:     1.6875rem;   /* 27px — dot nav total height (Figma) */
  --carousel-section-pt: var(--space-8);   /* 32px top padding */
  --carousel-section-pb: var(--space-12);  /* 48px bottom padding */
  --carousel-transition:  400ms ease;

  /* ── Contact ─────────────────────────────────────── */
  --contact-width:        40.1875rem;   /* 643px — centered section width */
  --contact-pad-h:         1.125rem;   /* 18px — left/right padding */
  --contact-section-pt: var(--space-16);  /* 64px */
  --contact-section-pb: var(--space-16);  /* 64px */
  --contact-row-gap:    var(--space-9);   /* 35px — gap between rows */
  --contact-input-h:    var(--space-9);   /* 35px — email input height */
  --contact-btn-pad-v:    0.4375rem;   /* 7px — submit/join button vertical padding */
  --contact-btn-pad-h:    0.6875rem;   /* 11px — submit/join button horizontal padding */
  --contact-icon-email-w: 2.375rem;    /* 38px — 15% larger than 33px */
  --contact-icon-email-h: 1.9375rem;   /* 31px — 15% larger than 27px */
  --contact-icon-ig:       2.15625rem; /* 34.5px — 15% larger than 30px */
}


/* ── Mobile font-size overrides (+1px each) ──────────── */

@media (max-width: 767px) {
  :root {
    --font-size-xs:      0.8125rem;   /* 13px — was 12px */
    --font-size-sm:      0.9375rem;   /* 15px — was 14px */
    --font-size-base:    1.0625rem;   /* 17px — was 16px */
    --font-size-contact: 1rem;        /* 16px — was 15px */
    --font-size-lg:      1.1875rem;   /* 19px — was 18px */
  }
}


/* ═══════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════ */

/*
  Background lives on <html> so the absolutely-positioned .site-bg
  (z-index: -1) can show through the transparent <body>.
  body must be position: relative to serve as the containing block
  for .site-bg; z-index: -1 then sits below body's content layer.
*/
html {
  background-color: var(--color-bg);   /* white fallback for areas the SVG doesn't reach */
}

body {
  position: relative;             /* containing block for .site-bg */
  isolation: isolate;             /* creates stacking context so z-index:-1 on .site-bg is
                                     relative to body, not the root — keeps SVG above the
                                     html canvas background but below all body content */
  background-color: transparent;  /* let .site-bg show through */
  font-family: var(--font-mono);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: normal;
}


/* ═══════════════════════════════════════════════════════
   BACKGROUND SVG
═══════════════════════════════════════════════════════ */

/*
  Desktop SVG — visible by default; hidden under 768px via mobile override.
*/
.site-bg {
  display: block;
  position: absolute;
  top: 0.625rem;                /* 10px */
  left: 0;
  width: 100%;
  height: 66.875rem;            /* 1070px */
  object-fit: fill;
  z-index: var(--z-background);
  pointer-events: none;
}

/*
  Mobile background wrapper — contains the mobile SVG + dancer img.
  Hidden on desktop; becomes the positioned container on mobile.
*/
.mobile-bg-wrap {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/*
  Mobile SVG #1 — hidden by default; shown inside .mobile-bg-wrap on mobile.
*/
.site-bg-mobile {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 36.125rem;            /* 578px — 70px shorter than original */
  z-index: var(--z-background);
  pointer-events: none;
}

/* Hidden on desktop; positioned inside .mobile-bg-wrap on mobile */
.mobile-dancer {
  display: none;
}

/*
  Mobile background #3 wrapper — hidden by default; shown on mobile behind calendar.
*/
.mobile-bg-wrap-3 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.site-bg-mobile-3 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 43.9375rem;   /* 703px — Figma mobile background 3 height */
  z-index: var(--z-background);
  pointer-events: none;
}

/*
  Mobile background #2 wrapper — hidden by default; shown on mobile.
  Positioned to cover the calendar / carousel / contact area.
*/
.mobile-bg-wrap-2 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.site-bg-mobile-2 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 66.6875rem;   /* 1067px */
  z-index: var(--z-background);
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════
   NAVBAR  ·  base = desktop  ·  mobile overrides ≤ 767px
═══════════════════════════════════════════════════════ */

/* ── Site header ────────────────────────────────────── */

.site-header {
  position: relative;
  z-index: var(--z-nav);
  background-color: transparent;
}

/* ── Nav wrapper ────────────────────────────────────── */

.nav {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  padding:
    var(--nav-padding)
    var(--nav-pad-right)
    var(--nav-padding)
    var(--nav-padding);
}

/* ── Brand: logo + business name ────────────────────── */

.nav__brand {
  display: flex;
  align-items: center;
  height: var(--nav-height);   /* 90px */
  gap: var(--space-5);
  padding:
    var(--space-2-5)
    var(--space-10)
    var(--space-2-5)
    var(--space-2-5);
  text-decoration: none;
  color: var(--color-text);
}

.nav__logo {
  flex-shrink: 0;
  width: var(--nav-logo-lg);   /* 70px */
  height: var(--nav-logo-lg);
  object-fit: contain;
}

.nav__brand-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
}

/* ── Links row: About | Offerings | Blog ────────────── */

.nav__links {
  display: flex;
  align-items: stretch;
  height: var(--nav-height);   /* 90px */
  gap: var(--nav-links-gap);
  padding:
    var(--space-5)
    var(--space-20)
    var(--space-2-5)
    var(--space-5);
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__link,
.nav__link--trigger {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  white-space: nowrap;
  cursor: pointer;
}

.nav__link:hover,
.nav__link--trigger:hover {
  text-decoration: underline;
  text-underline-offset: var(--nav-underline-offset);
  text-decoration-thickness: var(--nav-underline-width);
}

/* ── Offerings dropdown ─────────────────────────────── */

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-5));
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0;
  padding-top: calc(var(--nav-padding) * 0.5); /* 7.5px mouse-travel buffer */
  background-color: transparent;
  min-width: max-content;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity    var(--transition-fast) var(--nav-dropdown-delay),
    visibility var(--transition-fast) var(--nav-dropdown-delay);
}

.nav__item--has-dropdown:hover .nav__dropdown,
.nav__item--has-dropdown:focus-within .nav__dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0ms;
}

.nav__dropdown-link {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  text-decoration: none;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
}

.nav__dropdown-link:hover {
  text-decoration: underline;
  text-underline-offset: var(--nav-underline-offset);
  text-decoration-thickness: var(--nav-underline-width);
}


/* ═══════════════════════════════════════════════════════
   MOBILE OVERRIDES  ·  under 768px
═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Background SVGs ──────────────────────────────── */

  .site-bg { display: none; }

  .mobile-bg-wrap {
    display: block;
    top: 4.0625rem;     /* 65px */
    height: 36.125rem;  /* 578px — 70px shorter, top unchanged */
  }

  .site-bg-mobile { display: block; }

  .mobile-bg-wrap-3 {
    display: block;
    top: 30.0rem;       /* 480px — 50px higher */
    height: 42.0625rem; /* 673px — 30px shorter, bottom edge unchanged at 1203px */
    left: -0.3125rem;   /* -5px — extends left out of view */
    width: calc(100% + 0.3125rem); /* right edge stays flush */
  }

  .site-bg-mobile-3 { display: block; }

  .mobile-bg-wrap-2 {
    display: block;
    top: 62.875rem;     /* 1006px — 50px higher */
    height: 58.5625rem; /* 937px */
    overflow: hidden;
  }

  .site-bg-mobile-2 {
    display: block;
    top: -12.5rem;      /* -200px — pulls SVG back up, cropping top 200px */
  }

  .mobile-dancer {
    display: block;
    position: absolute;
    bottom: 9.0625rem;    /* 145px up from SVG bottom */
    left: 50%;
    transform: translateX(-50%);
    width: 13.6875rem;   /* 219px — 249px minus 30px */
    z-index: var(--z-content);
  }

  /* ── Nav wrapper ──────────────────────────────────── */

  .nav {
    flex-direction: column;
    align-items: center;
    padding: var(--nav-padding) var(--nav-padding) 1.5625rem;   /* 15px 15px 25px */
    gap: var(--space-2);
  }

  /* ── Brand ────────────────────────────────────────── */

  .nav__brand {
    height: auto;
    gap: var(--space-2);
    padding: 0.3125rem 0;   /* 5px top/bottom */
  }

  .nav__logo {
    width: var(--nav-logo);    /* 43px */
    height: var(--nav-logo);
  }

  .nav__brand-name {
    font-size: var(--font-size-base);   /* 16px */
  }

  /* ── Links row ────────────────────────────────────── */

  .nav__links {
    height: auto;
    align-items: center;
    gap: 2.4375rem;  /* 39px between About / Offerings / Blog */
    padding: 0;
  }

  .nav__link,
  .nav__link--trigger {
    font-size: var(--font-size-base);   /* 16px */
  }

  /* ── Dropdown — CSS hover/focus-within suppressed;
        only aria-expanded="true" (set by nav.js tap) opens it ── */

  .nav__item--has-dropdown:hover .nav__dropdown,
  .nav__item--has-dropdown:focus-within .nav__dropdown {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .nav__dropdown {
    left: calc(-1 * var(--space-5));   /* shifts container left so inner 20px padding lands under "O" of Offerings */
    transform: none;
    padding-top: var(--space-2-5);   /* 10px gap between Offerings label and first item */
    transition: none;   /* instant open/close on tap */
  }

  .nav__link--trigger[aria-expanded="true"] ~ .nav__dropdown {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .nav__dropdown-link {
    font-size: var(--font-size-base);   /* 16px */
  }

  /* ── Body — prevent any stray horizontal scroll ──── */

  body { overflow-x: hidden; }

  /* ── Main — push calendar below dancer + 10px gap ── */

  .site-main {
    padding-top: 23.5rem;     /* 376px — 50px higher */
  }

  /* ── Sections hidden until mobile layout is built ─── */

  .carousel-section { display: none; }
  .site-footer      { display: none; }

}


/* ═══════════════════════════════════════════════════════
   CAROUSEL
═══════════════════════════════════════════════════════ */

/* ── Section ──────────────────────────────────────────
   Full viewport width. overflow: hidden clips any track
   content that escapes the viewport element below.
   Transparent bg lets the SVG waves show on both sides.
*/
.carousel-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--carousel-section-pt) 0 var(--carousel-section-pb);
}

/* ── Container — full width, column layout ──────────── */

.carousel-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

/* ── Viewport — full width, clips the scrolling track ─
   JS translates the track inside here. As the browser
   widens, more of the adjacent slide groups peek in.
*/
.carousel-viewport {
  width: 100%;
  overflow: hidden;
}

/* ── Track — all slides end-to-end in one row ───────── */

.carousel-track {
  position: relative;   /* offsetParent for slides — .offsetLeft reads correctly */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--carousel-slide-gap);
  transform: translateX(0);
  transition: transform var(--carousel-transition);
  will-change: transform;
}

/* ── Slide — sized by the image's natural aspect ratio ─
   No explicit width: the img drives the slide's width.
   flex-shrink: 0 prevents the track from squishing slides.
*/
.carousel-slide {
  flex-shrink: 0;
  height: var(--carousel-slide-h);
}

/* ── Image — fixed height, auto width ───────────────── */

.carousel-img {
  display: block;
  height: var(--carousel-slide-h);
  width: auto;
}

/* ── Controls row — [arrow] [dots] [arrow] ──────────── */

.carousel-controls {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* ── Arrow buttons ──────────────────────────────────── */

.carousel-btn {
  width: var(--carousel-btn-size);
  height: var(--carousel-btn-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.carousel-btn:hover {
  background-color: var(--color-accent-light);
}

.carousel-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.carousel-btn:disabled:hover {
  background-color: transparent;
}

.carousel-btn__icon {
  width: 0.9375rem;
  height: 0.9375rem;
}

/* ── Dot navigation ─────────────────────────────────── */

.carousel-dots {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: var(--carousel-dots-w);
  height: var(--carousel-dots-h);
}

.carousel-dot {
  width: var(--carousel-dot-size);
  height: var(--carousel-dot-size);
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.carousel-dot--active {
  background-color: var(--color-border);
}

.carousel-dot:hover:not(.carousel-dot--active) {
  background-color: var(--color-accent-light);
}


/* ═══════════════════════════════════════════════════════
   EVENTS CALENDAR
═══════════════════════════════════════════════════════ */

/* ── Section ──────────────────────────────────────────
   Transparent so background SVG waves show through.
   Two-column layout: calendar col left, dancer col right.
*/
.calendar-section {
  position: relative;
  overflow: hidden;   /* clips dancer as it slides out of frame on narrow viewports */
  display: flex;
  justify-content: center;
  padding: var(--calendar-section-pt) 0 var(--calendar-section-pb);
  margin-top: -0.4375rem;   /* 7px — pulls section up */
}

.calendar-layout {
  display: flex;
  align-items: flex-start;
  gap: 2.75rem;   /* 44px — 20px less than original 64px */
}

/* ── Calendar column ────────────────────────────────── */

.calendar-col {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;   /* 9px — 3px less than --space-3 (12px) */
  flex-shrink: 0;
  width: var(--calendar-col-w);
}

/* ── Header row: heading + toggle ───────────────────── */

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 10px;
  margin-right: 11px;
}

.calendar-heading {
  font-family: var(--font-mono);
  font-size: 1.25rem;   /* 20px — 2px above --font-size-lg (18px) */
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

/* ── Category toggle — connected sliding pill ───────── */

.calendar-toggle {
  position: relative;
  display: flex;
  border: var(--border-width) solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}

/* sliding fill — moves left (index 0) or right (index 1) */
.calendar-toggle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: var(--color-accent-light);
  border-radius: 999px;
  transform: translateX(calc(var(--_active, 0) * 100%));
  transition: transform var(--transition-base);
  pointer-events: none;
}

.calendar-toggle__btn {
  position: relative;
  z-index: 1;          /* sits above the sliding fill */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);   /* 12px */
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: transparent;
  border: none;
  padding: 0.46875rem 0.828125rem;   /* 7.5px 13.25px — +5px total height */
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

/* ── View All Events link ───────────────────────────── */

.calendar-view-all {
  display: block;
  text-align: center;
  margin-top: 0.4375rem;    /* 7px — 3px less */
  margin-bottom: -0.5rem;   /* -8px — trims space below */
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  text-decoration: none;
}

.calendar-view-all:hover {
  text-decoration: underline;
  text-underline-offset: var(--nav-underline-offset);
  text-decoration-thickness: var(--nav-underline-width);
}

/* ── Bordered scroll container ──────────────────────── */

.calendar-container {
  width: var(--calendar-col-w);
  height: var(--calendar-box-h);
  overflow-y: auto;
  overflow-x: hidden;
  border: var(--border-width-thick) solid var(--color-border);
  border-radius: var(--radius-xl);
  /* Firefox scrollbar color; width left to browser default so
     the ::-webkit-scrollbar width below controls Chrome/Safari */
  scrollbar-color: var(--color-border) transparent;
  /* Elastic/momentum scroll — bounces at top/bottom on macOS + iOS */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* WebKit custom scrollbar — 17px track */
.calendar-container::-webkit-scrollbar {
  width: var(--calendar-scrollbar);
}

.calendar-container::-webkit-scrollbar-track {
  background: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
}

.calendar-container::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: var(--radius-xl);
  /* 5.5px transparent side borders shrink the visible thumb to 6px inside the 17px track */
  border: 5.5px solid transparent;
  background-clip: padding-box;
}

/* ── Event list ─────────────────────────────────────── */

.calendar-list {
  display: flex;
  flex-direction: column;
  gap: var(--calendar-list-gap);
  padding: var(--calendar-card-pad-v) 0;
  list-style: none;
}

.calendar-empty {
  padding: var(--calendar-card-pad-v) var(--calendar-card-pad-l);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* ── Event card ─────────────────────────────────────── */

.event-card {
  display: flex;
  align-items: center;
  gap: var(--calendar-card-gap);
  padding: var(--calendar-card-pad-v) var(--calendar-card-pad-r) var(--calendar-card-pad-v) var(--calendar-card-pad-l);
}

/* ── Date thumbnail ─────────────────────────────────── */

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.event-date__month {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.event-date__day-box {
  width: var(--calendar-day-box);
  height: var(--calendar-day-box);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width-thick) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.event-date__day {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: 1;
}

/* ── Text block: title + location + save ────────────── */

.event-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;   /* 6px — title / location / save-event spacing */
  min-width: 0;
}

.event-text__title {
  font-family: var(--font-mono);
  font-size: 1.125rem;  /* 18px — 2px above --font-size-base (16px) */
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: 1.3;
}

.event-text__location {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
}

.event-text__location:hover {
  text-decoration: underline;
}

/* ── Save Event button ──────────────────────────────── */

.event-save-btn {
  width: var(--calendar-save-w);
  height: var(--calendar-save-h);
  padding: 2px 1px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  background-color: var(--color-save-event-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* ── Learn More button ──────────────────────────────── */

.learn-more-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 0.875rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--color-accent-light);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Desktop: Learn More transparent with hover fill */
@media (min-width: 768px) {
  .calendar-toggle {
    border-width: 2px;
  }

  .carousel-btn {
    border-width: 1px;
  }

  .carousel-dot {
    border-width: 2px;
  }

  .calendar-view-all {
    font-size: var(--font-size-base);   /* 16px — 2px above base 14px */
  }

  .calendar-toggle__btn {
    padding-top: 0.9375rem;      /* 15px */
    padding-bottom: 0.9375rem;
    padding-left: 1.609375rem;   /* 25.75px — +7.5px each side = +30px wider than mobile base */
    padding-right: 1.609375rem;
    font-size: 0.9375rem;        /* 15px */
  }
}

@media (min-width: 1280px) {
  .learn-more-btn {
    background-color: transparent;
    transition: background-color var(--transition-fast);
  }

  .learn-more-btn:hover {
    background-color: var(--color-learn-more-hover);
  }
}

/* ── Dancer placeholder column ──────────────────────── */

/* ── Dancer image column ────────────────────────────── */

.dancer-col {
  flex-shrink: 0;
  margin-top: 14.0625rem;  /* 225px — offset below calendar top */
  margin-left: 1.875rem;   /* 30px — gap between calendar and dancer */
}

.dancer-img {
  display: block;
  width: 27.25rem;   /* 436px — 10% larger than 396px */
  height: auto;
  background: none;
}


/* ═══════════════════════════════════════════════════════
   EVENTS CALENDAR  ·  mobile overrides  ·  ≤ 767px
   Must live AFTER the base calendar rules above so these
   declarations win the cascade at equal specificity.
═══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .calendar-section {
    display: block;
    overflow-x: hidden;
    padding: var(--space-4) 0 var(--space-8);
    margin-top: 0;
  }

  .calendar-layout {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .dancer-col { display: none; }

  /* 10px side padding on the column provides the gap between
     the viewport edge and the bordered container, without the
     width:100% + margin overflow trap */
  .calendar-col {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0 0.625rem;
  }

  .calendar-header {
    margin-left: 0.625rem;
    margin-right: 0.625rem;
    flex-wrap: nowrap;
    gap: 1.75rem;    /* 28px between heading and toggle */
  }

  .calendar-heading {
    font-size: var(--font-size-lg);   /* 18px */
    min-width: 0;   /* allows text to wrap at narrow widths */
  }

  .calendar-toggle {
    flex-shrink: 0;  /* toggle never compresses — heading wraps instead */
  }

  .calendar-toggle__btn {
    padding-top: 0.625rem;       /* 10px */
    padding-bottom: 0.625rem;
    padding-left: 1.21875rem;    /* 19.5px — +3.75px each side = +15px total toggle width */
    padding-right: 1.21875rem;
    font-size: 0.875rem;         /* 14px — 1px above base 13px */
  }

  .calendar-toggle__btn[data-category="workshop"] {
    padding-right: 0.78125rem;   /* 12.5px */
  }

  .calendar-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    height: 22.5rem;    /* 360px visible */
  }

  .calendar-list { gap: 0.625rem; }

  .event-card {
    padding: 0.5rem 0.9375rem 0.5rem 0.5rem;
    gap: 0.5rem;
  }

  .event-text__title {
    font-size: var(--font-size-sm);   /* 14px — 2px below base 16px */
    overflow-wrap: break-word;
  }

  .event-text {
    margin-left: 0.3125rem;   /* 5px extra gap between date and text */
  }

  .learn-more-btn {
    display: inline-block;
    padding: var(--space-2) var(--space-2-5);
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }

  .learn-more-btn span {
    display: block;
  }

}


/* ═══════════════════════════════════════════════════════
   EVENTS PAGE — DESKTOP BACKGROUND SVG
═══════════════════════════════════════════════════════ */

.events-desktop-bg {
  display: none;
  position: absolute;
  top: -3.125rem;   /* -50px */
  left: -25rem;   /* -400px — extends off left edge */
  width: calc(100% + 43.75rem);
  pointer-events: none;
  z-index: var(--z-background);
}

.events-desktop-bg svg {
  display: block;
  width: 100%;
  height: 93.125rem;   /* 1490px */
}

@media (min-width: 768px) {
  .events-desktop-bg { display: block; }
}

@media (max-width: 767px) {
  .events-desktop-bg { display: none; }
}


/* ═══════════════════════════════════════════════════════
   EVENTS PAGE BACKGROUND  (mobile only)
═══════════════════════════════════════════════════════ */

/* Flow-anchored between the two sections — moves with dynamic calendar height */
.events-bg-wrap {
  display: none;
  position: relative;
  height: 0;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}

.events-bg-svg {
  display: none;
  position: absolute;
  top: -15rem;          /* extends 240px above the section dividing line */
  left: -0.3125rem;
  width: calc(100% + 0.3125rem);
  height: 37.6875rem;   /* 603px */
  z-index: var(--z-background);
  pointer-events: none;
}

@media (max-width: 767px) {
  .events-bg-wrap {
    display: block;
    /* Cancel the 16px horizontal padding from .events-page so the wrap
       spans the full viewport width. */
    margin-left: calc(-1 * var(--space-4));
    width: calc(100% + 2 * var(--space-4));
  }
  .events-bg-svg {
    display: block;
    top: -26.875rem;   /* -430px */
    left: 0;
    width: 100%;
    height: 37.5rem;   /* 600px */
  }
}


/* ═══════════════════════════════════════════════════════
   EVENTS PAGE  (events.html)
═══════════════════════════════════════════════════════ */

.events-page {
  max-width: 40rem;   /* 640px — wider than homepage calendar col */
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: 6.75rem;    /* 108px */
}

.events-page__section {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;   /* 9px — matches homepage calendar-col gap */
}

.events-page__heading {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-left: 10px;
}

.events-page__calendar {
  width: 100%;
}

.events-page__calendar--upcoming {
  height: auto;
  max-height: none;
  overflow-y: visible;   /* expands to fit all events — no scroll */
}

.events-page__calendar--past {
  height: 60vh;          /* fixed height with scroll on desktop */
  max-height: 60vh;
}

@media (max-width: 767px) {
  .events-page__heading {
    font-size: 1.3125rem;   /* 21px — was 20px */
  }

  .events-page {
    gap: 5rem;   /* 80px per item — 160px total between sections (was 108px×2=216px) */
  }

  .events-page > section:last-child {
    margin-top: -4.375rem;   /* -70px */
  }

  .events-page__calendar--past {
    height: 24.375rem;   /* 390px fixed with scroll on mobile */
    max-height: none;
  }
}


/* ═══════════════════════════════════════════════════════
   CONTACT / FOOTER
═══════════════════════════════════════════════════════ */

/* ── Section wrapper ────────────────────────────────── */

.site-footer {
  padding: var(--contact-section-pt) 0 var(--contact-section-pb);
  margin-top: -3.125rem;   /* 50px — pulls section up */
}

/* ── Centered inner content ─────────────────────────── */

/*
  Two-column grid: labels right-align to col 1 (max-content),
  controls left-align from col 2 (1fr). The invisible vertical
  line sits at the col 1 / col 2 boundary.
*/
.contact-inner {
  max-width: var(--contact-width);
  margin: 0 auto;
  padding: 0 var(--contact-pad-h);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: var(--contact-row-gap);
  align-items: center;
  justify-items: start;
}

/* Row wrappers are transparent to the grid */

.contact-newsletter,
.contact-row {
  display: contents;
}

/* ── Newsletter form ────────────────────────────────── */

.contact-newsletter__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  justify-self: end;
}

.contact-newsletter__fields {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: stretch;
}

.contact-newsletter__input {
  flex: 1;
  height: var(--contact-input-h);
  padding: 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  outline: none;
}

.contact-newsletter__input:focus {
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

/* ── Shared button — Submit + Join Here ─────────────── */

.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--contact-btn-pad-v) var(--contact-btn-pad-h);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background-color: var(--color-accent-light);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* ── Contact row labels ──────────────────────────────── */

.contact-row__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-contact);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  text-align: center;
  justify-self: end;
}

/* ── Email / Instagram icon links ───────────────────── */

.contact-icon-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
}

/* ── Icons ──────────────────────────────────────────── */

.contact-icon--email {
  width: var(--contact-icon-email-w);
  height: var(--contact-icon-email-h);
  flex-shrink: 0;
}

.contact-icon--instagram {
  width: var(--contact-icon-ig);
  height: var(--contact-icon-ig);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════
   MOBILE CAROUSEL  ·  visible only below 768px
═══════════════════════════════════════════════════════ */

.mobile-carousel-section {
  padding: var(--space-8) 0 var(--space-8);
  margin-top: -2.1875rem;   /* 35px up */
}

@media (min-width: 768px) {
  .mobile-carousel-section { display: none; }
}

.mobile-carousel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mobile-carousel__viewport {
  width: 100%;
  overflow: hidden;
}

.mobile-carousel__track {
  display: flex;
  flex-direction: row;
  transition: transform var(--carousel-transition);
  will-change: transform;
}

/* Each slide is exactly one full viewport width so translateX(-N*100vw) pages correctly */
.mobile-carousel__slide {
  flex-shrink: 0;
  width: 100vw;
}

.mobile-carousel__img {
  display: block;
  width: 100%;
  height: 20rem;   /* 320px — matches Figma mobile slide spec */
  object-fit: cover;
}

/* ── Controls row ───────────────────────────────────── */

.mobile-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

/* ── Arrow buttons — mirror existing .carousel-btn style */

.mobile-carousel__btn {
  width: var(--carousel-btn-size);    /* 35px */
  height: var(--carousel-btn-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.mobile-carousel__btn:hover {
  background-color: var(--color-accent-light);
}

.mobile-carousel__btn-icon {
  width: 0.9375rem;
  height: 0.9375rem;
}

/* ── Dot navigation ─────────────────────────────────── */

.mobile-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mobile-carousel__dot {
  width: var(--carousel-dot-size);    /* 15px */
  height: var(--carousel-dot-size);
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.mobile-carousel__dot--active {
  background-color: var(--color-accent-light);   /* #F0E5FF — lavender fill */
}


/* ═══════════════════════════════════════════════════════
   MOBILE CONTACT SECTION  ·  visible only below 768px
   Source: Figma node 108:78 — full 390px width, 18px
   horizontal padding, column layout, 35px row gap.
═══════════════════════════════════════════════════════ */

.mobile-contact-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.4375rem;                          /* 55px — 35px base + 20px */
  padding: var(--space-3) var(--contact-pad-h) var(--space-16);
  /* space-3 (12px) top · contact-pad-h (18px) sides · space-16 (64px) bottom */
}

/* ── Newsletter ─────────────────────────────────────── */

.mobile-contact__newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);   /* 12px between label and form row */
  align-self: stretch;
}

.mobile-contact__newsletter-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);   /* 14px */
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-align: center;
}

.mobile-contact__form {
  display: flex;
  align-items: center;
  gap: 0.4375rem;        /* 7px between input and button */
  padding: 0 var(--space-2-5);   /* 10px left/right */
}

.mobile-contact__input {
  flex: 1;
  height: var(--contact-input-h);   /* 35px */
  padding: 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);   /* 14px */
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);   /* 5px */
  outline: none;
}

.mobile-contact__input:focus {
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.mobile-contact__submit {
  flex-shrink: 0;
  padding: var(--contact-btn-pad-v) var(--contact-btn-pad-h);   /* 7px 11px */
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);   /* 14px */
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background-color: var(--color-accent-light);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);   /* 5px */
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}

.mobile-contact__submit:hover {
  background-color: var(--color-learn-more-hover);
}

.mobile-contact__submit:disabled {
  cursor: default;
}

/* ── Telegram ───────────────────────────────────────── */

.mobile-contact__telegram {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.mobile-contact__telegram-label {
  font-family: var(--font-mono);
  font-size: 0.875rem;    /* 14px — was 13px */
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: 1.4;
  text-align: center;
}

.mobile-contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--contact-btn-pad-v) var(--contact-btn-pad-h);   /* 7px 11px */
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);   /* 14px */
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background-color: var(--color-accent-light);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);   /* 5px */
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}

.mobile-contact__btn:hover {
  background-color: var(--color-learn-more-hover);
}

/* ── Email / Instagram rows ─────────────────────────── */

.mobile-contact__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

.mobile-contact__row-label {
  font-family: var(--font-mono);
  font-size: 0.875rem;    /* 14px — was 13px */
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

@media (min-width: 768px) {
  .mobile-contact-section { display: none; }
}


/* ═══════════════════════════════════════════════════════
   OFFERING PAGE — RESONANCE & RESPONSE
═══════════════════════════════════════════════════════ */

/* ── Body: prevent carousel horizontal scroll ───────── */

.rr-body {
  overflow-x: hidden;
}


/* ── Hero section ────────────────────────────────────── */

.rr-hero {
  position: relative;
  padding: 0;
  background-image: url('assets/vectors/background-mobile-3.svg');
  background-size: 100% calc(100% - 210px);
  background-position: 0 210px;
  background-repeat: no-repeat;
}


/* ── Carousel ────────────────────────────────────────── */

.rr-carousel {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.rr-carousel__viewport {
  width: 100%;
  overflow: hidden;
}

.rr-carousel__track {
  display: flex;
  flex-direction: row;
  transform: translateX(0);
  transition: transform var(--carousel-transition);
  will-change: transform;
}

.rr-carousel__slide {
  flex-shrink: 0;
  width: 100vw;
}

.rr-carousel__img {
  display: block;
  width: 100%;
  height: 18.75rem;   /* 300px — mobile */
  object-fit: contain;
  background-color: transparent;
}

/* ── Controls row: [arrow] [dots] [arrow] ────────────── */

.rr-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.rr-carousel__btn {
  width: var(--carousel-btn-size);
  height: var(--carousel-btn-size);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.rr-carousel__btn:hover {
  background-color: var(--color-accent-light);
}

.rr-carousel__btn-icon {
  width: 0.9375rem;
  height: 0.9375rem;
}

.rr-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.rr-carousel__dot {
  width: var(--carousel-dot-size);
  height: var(--carousel-dot-size);
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.rr-carousel__dot--active {
  background-color: var(--color-border);
}

.rr-carousel__dot:hover:not(.rr-carousel__dot--active) {
  background-color: var(--color-accent-light);
}


/* ── Description section ─────────────────────────────── */

.rr-description {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.rr-description__heading {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-align: center;
}

.rr-description__body {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  line-height: 1.65;
  text-align: left;
}

.rr-description__body--centered {
  text-align: center;
}

.rr-description__date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: calc(var(--space-6) * -0.5 + 5px);
  line-height: 1.3;
}

.rr-description__date-text {
  font-size: 1.1875rem;   /* 19px */
}

.rr-event-location {
  line-height: 1.3;
  text-align: center;
}

.rr-schedule__divider {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  opacity: 0.2;
  margin: var(--space-4) 0;
}


/* ── Past events: vertical videos ────────────────────── */

.rr-videos {
  padding: var(--space-4) var(--space-4) var(--space-8);
}

.rr-videos__heading {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  text-align: center;
}

.rr-videos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.rr-videos__item video {
  display: block;
  width: 100%;
}


/* ── Register: Google Form embed ─────────────────────── */

.rr-register {
  padding: var(--space-8) var(--space-4) var(--space-16);
}

.rr-register__heading {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  text-align: center;
}

.rr-register__frame-wrap {
  overflow-x: hidden;
  padding: 0 var(--space-2);   /* side padding on mobile so form doesn't sit edge-to-edge */
}

.rr-register__form {
  display: block;
  width: 100%;
  height: 175.5rem;   /* 2808px */
  border: none;
}


/* ── Bio section ─────────────────────────────────────── */

.rr-bios {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-4) var(--space-4);
}

.rr-bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.rr-bio__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
}

.rr-bio__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.rr-bio__name {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.rr-bio__body {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  line-height: 1.65;
}


/* ── Desktop overrides  ·  min-width: 768px ─────────── */

@media (min-width: 768px) {

  .rr-hero {
    padding: 0;
  }

  .rr-carousel__img {
    height: 30rem;   /* 480px */
  }

  .rr-description {
    max-width: 48rem;
    padding: var(--space-4) var(--space-8) var(--space-10);
  }

  .rr-description__heading {
    font-size: 1.5rem;
  }

  .rr-bios {
    max-width: 48rem;
    margin: 0 auto;
    padding: var(--space-8);
    gap: var(--space-16);
  }

  .rr-bio {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-8);
  }

  .rr-bio--reverse {
    flex-direction: row-reverse;
  }

  .rr-bio__photo {
    width: 42%;
    flex-shrink: 0;
    aspect-ratio: 3 / 4;
  }

  .rr-videos {
    max-width: 60rem;
    margin: 0 auto;
    padding: var(--space-8);
  }

  .rr-videos__grid {
    grid-template-columns: repeat(2, 1fr);   /* 2×2 grid */
    gap: var(--space-6);
  }

  .rr-register {
    max-width: 60rem;
    margin: 0 auto;
    padding: var(--space-8) var(--space-8) var(--space-16);
  }

}


/* ── Accordion (schedule + bios) ─────────────────────── */

.rr-accordion {
  width: 100%;
}

.rr-accordion__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background-color: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.rr-accordion__toggle:hover {
  background-color: var(--color-accent-light);
}

.rr-accordion__indicator {
  flex-shrink: 0;
  margin-left: var(--space-3);
  font-size: var(--font-size-base);
  line-height: 1;
  transition: transform var(--transition-base);
}

.rr-accordion--open .rr-accordion__indicator {
  transform: rotate(45deg);
}

.rr-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-base);
  background: transparent !important;
  background-color: transparent !important;
}

.rr-accordion--open .rr-accordion__body {
  grid-template-rows: 1fr;
}

.rr-accordion__inner {
  min-height: 0;
  overflow: hidden;
  padding-top: 0;
  transition: padding-top var(--transition-base);
  background: transparent !important;
  background-color: transparent !important;
}

.rr-accordion {
  background: transparent !important;
  background-color: transparent !important;
}

.rr-accordion--open .rr-accordion__inner {
  padding-top: var(--space-4);
}


/* ── RR Page Navbar ──────────────────────────────────── */

.rr-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--nav-padding);
}

.rr-nav__title {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  text-align: center;
}

.rr-nav__menu {
  grid-column: 3;
  justify-self: end;
  position: relative;
}

.rr-nav__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
}

.rr-nav__hamburger-icon {
  display: block;
  width: 1.25rem;    /* 20px */
  height: 0.875rem;  /* 14px */
}

.rr-nav__dropdown {
  position: absolute;
  top: calc(100% + var(--space-2-5));
  right: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-2-5) 0;
  background-color: transparent;
  min-width: max-content;

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity    var(--transition-fast),
    visibility var(--transition-fast);
}

.rr-nav__hamburger[aria-expanded="true"] ~ .rr-nav__dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.rr-nav__dropdown-link {
  display: block;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-text);
  text-decoration: none;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
}

.rr-nav__dropdown-link:hover {
  text-decoration: underline;
  text-underline-offset: var(--nav-underline-offset);
  text-decoration-thickness: var(--nav-underline-width);
}