:root {
  --site-line-light: rgba(5, 7, 7, 0.16);
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

main {
  flex: 1;
}

.homepage-section {
  margin-inline: auto;
  width: var(--site-content-width);
}

.hero-section {
  position: relative;
  isolation: isolate;
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  align-content: start;
  gap: var(--site-space-content);
  padding-top: var(--site-space-section);
  padding-bottom: 0;
  text-align: left;
}
html[data-homepage-restoring] main,
html[data-homepage-restoring] .site-footer { visibility: hidden; }

.hero-heading {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  width: min(100%, 1120px);
}

@media (prefers-reduced-motion: no-preference) {
  html[data-homepage-intro="pending"] .hero-line,
  html[data-homepage-intro="pending"] .hero-feather,
  html[data-homepage-intro="pending"] .store-badges,
  html[data-homepage-intro="pending"] .locations-section {
    opacity: 0;
  }
}

.hero-line {
  display: block;
  max-width: 100%;
  transform-origin: left center;
}

.hero-type {
  font-family: var(--site-font-display);
  font-weight: 900;
  font-size: 16.8cqw;
  line-height: 0.74;
  letter-spacing: 0.015em;
}

.locations-section {
  padding-top: var(--site-space-section);
  padding-bottom: 0;
}

.ready-content {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--site-space-section);
}

.ready-heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.ready-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--site-space-meta);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ready-links .ready-link {
  text-align: center;
  white-space: normal;
}

@media (max-width: 70em) {
  .ready-content { grid-template-columns: minmax(0, 1fr); }
}

#locations-heading,
#ready-heading { scroll-margin-top: calc(var(--header-height, 4.5625rem) + var(--site-space-meta)); }

.join-section {
  position: relative;
  isolation: isolate;
  min-height: 296px;
  padding-block: calc(2 * var(--site-space-section));
  overflow: hidden;
}

.location-gallery {
  position: relative;
  width: 100%;
  margin-top: var(--site-space-content);
  overflow-anchor: none;
}

.location-gallery[data-height-ready] {
  overflow: hidden;
  transition: height 400ms cubic-bezier(.25,.1,.25,1);
}

@media (prefers-reduced-motion: reduce) {
  .location-gallery[data-height-ready] { transition: none; }
}

.location-photo {
  position: relative;
  margin: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: transparent;
}

.location-backgrounds img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1);
  opacity: 0;
  transition: opacity 400ms cubic-bezier(.25,.1,.25,1);
}

@media (min-width: 1024px) {
  .location-backgrounds img {
    object-position: center 30%;
  }
}

.location-backgrounds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050707;
  pointer-events: none;
}

.location-backgrounds img.is-active { opacity: 1; }
.location-backgrounds::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Keep the page-colour fade inside the empty edges, clear of white text. */
  background:
    linear-gradient(to bottom,
      var(--background),
      transparent 12px,
      transparent calc(100% - 12px),
      var(--background)),
    linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.82));
  pointer-events: none;
}

.location-details {
  position: relative;
  z-index: 1;
  padding: var(--site-space-meta) max(clamp(16px, 5vw, 72px), calc((100% - 1360px) / 2)) var(--site-space-section);
  color: #ffffff;
  overflow-wrap: anywhere;
  container: location-details / inline-size;
}

.audience-tabs { --foreground: #fff; position: relative; display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 24px; }
.timetable-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: center; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.22); }
.timetable-row:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
.timetable-day, .timetable-time { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; }
.instructor-block, .location-address { margin-top: var(--site-space-content); }
.instructor-block h3, .location-address h3 { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 18px; }
.location-address p { margin: 0; font-size: 1rem; line-height: 1.6; }
.instructor-list { display: flex; flex-wrap: wrap; gap: 20px 28px; }
.instructor-list > div { flex: 1 0 auto; width: max-content; max-width: 100%; overflow-wrap: anywhere; }
.instructor-name { font-weight: 600; }
.instructor-belt { font-size: .875rem; color: #c0c3c3; }
@media (max-width: 600px) {
  .instructor-list { row-gap: 18px; }
}

@container location-details (max-width: 36em) {
  .timetable-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px 12px; padding: 20px 0; }
  .timetable-day, .timetable-time { font-size: 1.3125rem; }
  .timetable-class { grid-column: 1 / -1; }
}

@container location-details (max-width: 20em) {
  .timetable-row { grid-template-columns: minmax(0,1fr); }
  .timetable-class { grid-column: auto; }
}

.locations-heading {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  width: min(100%, 760px);
}

.locations-type,
.ready-type {
  font-size: var(--site-display-size);
}

.location-overlay {
  position: relative;
  z-index: 3;
  width: var(--site-content-width);
  margin-inline: auto;
  padding-top: var(--site-space-content);
  color: #ffffff;
}

.location-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 0;
}

:is(.location-tab, .audience-tab) {
  background: transparent;
  color: var(--foreground);
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 0;
  min-height: 44px;
  font: 600 1rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.audience-label { border-bottom-color: var(--foreground); cursor: default; }

:is(.location-tab, .audience-tab)[aria-selected="true"] {
  border-bottom-color: var(--foreground);
}

:is(.location-tabs, .audience-tabs)[data-indicator-ready] [role="tab"][aria-selected="true"] {
  border-bottom-color: transparent;
}

:is(.location-tabs, .audience-tabs)[data-indicator-ready]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tab-width);
  height: 2px;
  background: var(--foreground);
  transform: translate(var(--tab-x), var(--tab-y));
  transition: transform 400ms cubic-bezier(.25,.1,.25,1), width 400ms cubic-bezier(.25,.1,.25,1);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .location-backgrounds img { transition: none; }
  :is(.location-tabs, .audience-tabs)[data-indicator-ready]::after {
    transition: none;
  }
}

@media (any-hover: hover) and (any-pointer: fine) {
  html:not([data-pointer-type="touch"]):not([data-pointer-type="pen"]) .location-tab:hover {
    opacity: 0.7;
  }
}

:is(.location-tab, .audience-tab):focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 4px;
}

.location-gallery [role="tabpanel"][tabindex="0"] {
  position: relative;
  scroll-margin-top: calc(var(--header-height, 4.5625rem) + var(--site-space-meta));
}

.location-gallery [role="tabpanel"][tabindex="0"]:focus-visible {
  outline: none;
}

.location-gallery [role="tabpanel"][tabindex="0"]:focus-visible::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid #ffffff;
  pointer-events: none;
  z-index: 2;
}

.hero-wordmark {
  width: 100%;
}

.hero-brand-word {
  height: auto;
  width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.store-badges {
  grid-column: 1;
  justify-content: flex-start;
}

.hero-feather {
  position: relative;
  min-width: 0;
}

.hero-feather-picture {
  position: absolute;
  inset: 0;
}

.hero-feather-picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 900px) {
  .hero-section {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--site-space-content);
  }

  .hero-feather {
    height: clamp(240px, 50vw, 400px);
  }

  .store-badges {
    justify-content: center;
  }
}

html[data-store-platform="ios"] .store-badge--google-play {
  display: none;
}

html[data-store-platform="android"] .store-badge--app-store-default {
  display: none;
}