/*
 * Site engine — engine.css, the engine's stylesheet. Structure every theme gets: resets, the wrap,
 * photo slots, and how each data-layout arranges its items. Every selector is
 * wrapped in :where() so it carries zero specificity and any theme rule wins.
 * Looks (type, colour, shape, decoration) belong to the theme.
 *
 * Tunables a theme may set on .t-<slug>: --lp-max, --lp-gutter, --lp-space,
 * --lp-gap, --lp-card-min, --lp-card-w, --lp-radius, --lp-header-h.
 *
 * Sites link it as-is from the microsites bucket, at
 * engine/<ENGINE_VERSION>/engine.css. This copy is the source: when it or the
 * markup changes, bump ENGINE_VERSION (version.ts) and release the new file
 * in Microsite → Manage themes before deploying.
 */
:where(.lp-site) {
  --lp-max: 1200px;
  --lp-gutter: clamp(16px, 4cqi, 32px);
  --lp-space: clamp(56px, 9cqi, 112px);
  --lp-gap: clamp(16px, 2.4cqi, 28px);
  --lp-card-min: 260px;
  --lp-card-w: 300px;
  --lp-radius: 12px;
  --lp-header-h: 68px;
  container: lp / inline-size;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: Canvas;
  color: CanvasText;
  font: 400 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
:where(.lp-site *, .lp-site *::before, .lp-site *::after) {
  box-sizing: border-box;
}
:where(.lp-site) :where(h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, fieldset) {
  margin: 0;
}
:where(.lp-site) :where(ul, ol) {
  padding: 0;
  list-style: none;
}
:where(.lp-site) :where(a) {
  color: inherit;
  text-decoration: none;
}
:where(.lp-site) :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}
:where(.lp-site) :where(h1, h2, h3) {
  text-wrap: balance;
  overflow-wrap: break-word;
}
:where(.lp-site) :where(p, li, blockquote) {
  text-wrap: pretty;
}
:where(.lp-site) :where(table) {
  border-collapse: collapse;
  width: 100%;
}
:where(.lp-site) :where(iframe) {
  border: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* Hidden means hidden: no layout or theme rule may show a [hidden] tab panel or expired countdown. */
.lp-site [hidden] {
  display: none !important;
}
:where(.lp-site) :where(:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ── ornaments: off unless a theme turns them on ─────────────── */
:where(.lp-site) :where(.lp-orn, .lp-decor, .lp-badge, .lp-marquee, .lp-quote-mark) {
  display: none;
}

/* ── icons, stars ──────────────────────────────────────────────── */
:where(.lp-site) :where(.lp-ico) {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  vertical-align: -0.16em;
}
:where(.lp-site) :where(.lp-stars) {
  display: inline-flex;
  gap: 2px;
}
:where(.lp-site) :where(.lp-stars .lp-fill) {
  fill: currentColor;
}
:where(.lp-site) :where(.lp-stars .lp-star-off) {
  opacity: 0.3;
}

/* ── photos ───────────────────────────────────────────────────── */
:where(.lp-site) :where(.lp-photo) {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--ar, 4/3);
  border-radius: var(--lp-radius);
  background: color-mix(in oklab, currentColor 10%, transparent);
}
:where(.lp-site) :where(.lp-photo img) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Empty slot: a neutral frame with a small picture glyph. */
:where(.lp-site) :where(.lp-photo[data-empty]) {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-opacity='.55' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='m21 16-5-5-9 8.5'/%3E%3C/svg%3E")
      center / clamp(22px, 9%, 34px) no-repeat,
    linear-gradient(160deg, color-mix(in oklab, currentColor 8%, transparent), color-mix(in oklab, currentColor 14%, transparent));
}

/* ── frame ────────────────────────────────────────────────────── */
:where(.lp-site) :where(.lp-wrap) {
  max-width: var(--lp-max);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
  position: relative;
}
:where(.lp-site) :where(.lp-wrap > *) {
  min-width: 0;
}
:where(.lp-site) :where(.lp-section) {
  position: relative;
}
:where(.lp-site) :where(.lp-panel) {
  position: relative;
  padding-block: var(--lp-space);
}
/* Photos behind a section's content paint over the panel's own background. */
:where(.lp-site) :where([data-backdrop] > .lp-panel, .lp-hero[data-layout="full_bleed"] > .lp-panel) {
  isolation: isolate;
}
:where(.lp-site) :where(.lp-backdrop) {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  z-index: -1;
}
:where(.lp-site) :where(.lp-head) {
  display: grid;
  gap: 12px;
  margin-bottom: clamp(28px, 4cqi, 48px);
  max-width: 68ch;
}
:where(.lp-site) :where(.lp-eyebrow) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:where(.lp-site) :where(.lp-title) {
  font-size: clamp(1.75rem, 5cqi, 2.5rem);
  line-height: 1.15;
}
:where(.lp-site) :where(h1.lp-title) {
  font-size: clamp(2.25rem, 8cqi, 3.75rem);
  line-height: 1.05;
}
:where(.lp-site) :where(.lp-lead) {
  max-width: 62ch;
  opacity: 0.85;
}
:where(.lp-site) :where(.lp-foot) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(20px, 3cqi, 32px);
}
:where(.lp-site) :where(.lp-foot-cta) {
  justify-content: center;
}

/* ── buttons ──────────────────────────────────────────────────── */
:where(.lp-site) :where(.lp-ctas) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
:where(.lp-site) :where(.lp-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  text-align: center;
}
:where(.lp-site) :where(.lp-btn[data-variant="primary"]) {
  background: CanvasText;
  color: Canvas;
  border-color: CanvasText;
}
:where(.lp-site) :where(.lp-btn[data-variant="ghost"]) {
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── items: the shared list container, arranged by layout ─────── */
:where(.lp-site) :where(.lp-items) {
  display: grid;
  gap: var(--lp-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--lp-card-min)), 1fr));
}
:where(.lp-site) :where([data-layout="list"], [data-layout="column"], [data-layout="vertical"], [data-layout="numbered"], [data-layout="stacked"], [data-layout="alternating"], [data-layout="accordion"]) :where(.lp-items) {
  grid-template-columns: minmax(0, 1fr);
}
/* Rails scroll inside themselves, never the page. */
:where(.lp-site) :where([data-layout="carousel"] .lp-items, [data-layout="horizontal"] .lp-items) {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
:where(.lp-site) :where([data-layout="carousel"] .lp-items > *, [data-layout="horizontal"] .lp-items > *) {
  flex: 0 0 min(var(--lp-card-w), 82%);
  scroll-snap-align: start;
}
:where(.lp-site) :where(.lp-rail-nav) {
  display: flex;
  gap: 8px;
}
:where(.lp-site) :where(.lp-rail-btn) {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
}
:where(.lp-site) :where([data-layout="featured"] .lp-items > :first-child) {
  grid-column: 1 / -1;
}
:where(.lp-site) :where([data-layout="row"] .lp-items, [data-layout="cards"] .lp-items) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
:where(.lp-site) :where([data-layout="two_column"] .lp-items) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: start;
}

/* cards */
:where(.lp-site) :where(.lp-card, .lp-person, .lp-plan, .lp-session, .lp-location, .lp-post, .lp-quote, .lp-item) {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
:where(.lp-site) :where(.lp-card-media) {
  position: relative;
  display: block;
}
/* The whole card follows its title's link. Not in edit mode (a live row carries data-live),
   where the studio needs the real photo or field under the pointer. */
:where(.lp-site) :where(.lp-card:not([data-live]) .lp-card-title a[href])::after {
  content: "";
  position: absolute;
  inset: 0;
}
:where(.lp-site) :where(.lp-tag) {
  display: inline-block;
  align-self: start;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: Canvas;
  color: CanvasText;
}
:where(.lp-site) :where(.lp-card-media .lp-tag) {
  position: absolute;
  top: 12px;
  left: 12px;
}
:where(.lp-site) :where(.lp-card-meta) {
  display: flex;
  gap: 8px;
  align-items: center;
}
:where(.lp-site) :where(.lp-card-foot) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
:where(.lp-site) :where(.lp-price small, .lp-plan-period) {
  opacity: 0.75;
  font-weight: 400;
}
:where(.lp-site) :where(.lp-plan-features li, .lp-points li, .lp-list li, .lp-facts li) {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
:where(.lp-site) :where(.lp-plan .lp-btn) {
  margin-top: auto;
}
:where(.lp-site) :where(.lp-tags) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
:where(.lp-site) :where(.lp-tags li) {
  font-size: 0.75rem;
  padding: 3px 10px;
  border: 1px solid color-mix(in oklab, currentColor 30%, transparent);
  border-radius: 999px;
}
:where(.lp-site) :where(.lp-seats[data-state="full"]) {
  opacity: 0.7;
}

/* events: a date badge on the photo, and the calendar layout's months */
:where(.lp-site) :where(.lp-date) {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  justify-items: center;
  min-width: 52px;
  padding: 6px 8px;
  border-radius: 10px;
  background: Canvas;
  color: CanvasText;
  line-height: 1.1;
}
:where(.lp-site) :where(.lp-date-day) {
  font-size: 1.25rem;
  font-weight: 700;
}
:where(.lp-site) :where(.lp-date-month) {
  font-size: 0.75rem;
  text-transform: uppercase;
}
:where(.lp-site) :where(.lp-calendar) {
  display: grid;
  gap: calc(var(--lp-gap) * 1.5);
}
:where(.lp-site) :where(.lp-month) {
  display: grid;
  gap: var(--lp-gap);
}
/* A month often holds one event: empty tracks stay, so it keeps a card's width. */
:where(.lp-site) :where(.lp-month .lp-items) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lp-card-min)), 1fr));
}

/* batches as a list: one row per batch on wide screens */
@container lp (min-width: 760px) {
  :where(.lp-site) :where([data-layout="list"] .lp-session) {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)) auto auto;
    align-items: center;
    column-gap: 20px;
  }
  :where(.lp-site) :where([data-layout="list"] .lp-session .lp-seats) {
    justify-self: start;
  }
}

/* features alternating: photo beside text, sides swap each row */
@container lp (min-width: 760px) {
  /* Text sits in the middle rows, centred against the photo's height. */
  :where(.lp-site) :where([data-layout="alternating"] .lp-item) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr repeat(3, auto) 1fr;
    column-gap: clamp(24px, 5cqi, 64px);
    row-gap: 12px;
    align-items: start;
  }
  :where(.lp-site) :where([data-layout="alternating"] .lp-item > *) {
    grid-column: 2;
  }
  :where(.lp-site) :where([data-layout="alternating"] .lp-item > .lp-item-photo) {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  :where(.lp-site) :where([data-layout="alternating"] .lp-item > .lp-item-icon) {
    grid-row: 2;
  }
  :where(.lp-site) :where([data-layout="alternating"] .lp-item > .lp-item-title) {
    grid-row: 3;
  }
  :where(.lp-site) :where([data-layout="alternating"] .lp-item > .lp-item-text) {
    grid-row: 4;
  }
  :where(.lp-site) :where([data-layout="alternating"] .lp-item:nth-child(even) > *) {
    grid-column: 1;
  }
  :where(.lp-site) :where([data-layout="alternating"] .lp-item:nth-child(even) > .lp-item-photo) {
    grid-column: 2;
  }
}

/* quotes */
:where(.lp-site) :where(.lp-who) {
  display: flex;
  align-items: center;
  gap: 12px;
}
:where(.lp-site) :where(.lp-avatar) {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 600;
  background: color-mix(in oklab, currentColor 12%, transparent);
}
:where(.lp-site) :where(.lp-who small, .lp-stat small, .lp-rating small) {
  display: block;
  opacity: 0.75;
}

/* faq */
:where(.lp-site) :where(.lp-faq-item summary) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
:where(.lp-site) :where(.lp-faq-item summary::-webkit-details-marker) {
  display: none;
}
:where(.lp-site) :where(.lp-faq-item[open] .lp-faq-icon) {
  transform: rotate(45deg);
}
:where(.lp-site) :where(.lp-faq-a) {
  padding-bottom: 16px;
}

/* gallery */
:where(.lp-site) :where(.lp-gallery) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
:where(.lp-site) :where([data-layout="masonry"] .lp-gallery) {
  display: block;
  columns: 3 200px;
  column-gap: var(--lp-gap);
}
:where(.lp-site) :where([data-layout="masonry"] .lp-gallery-item) {
  break-inside: avoid;
  margin-bottom: var(--lp-gap);
}
/* Masonry tiles take their shape from their position, in a run of six; a theme can set its own run. */
:where(.lp-site) :where([data-layout="masonry"] .lp-gallery-item:nth-child(6n + 1) .lp-photo, [data-layout="masonry"] .lp-gallery-item:nth-child(6n + 6) .lp-photo) {
  aspect-ratio: 3/4;
}
:where(.lp-site) :where([data-layout="masonry"] .lp-gallery-item:nth-child(6n + 2) .lp-photo, [data-layout="masonry"] .lp-gallery-item:nth-child(6n + 5) .lp-photo) {
  aspect-ratio: 1;
}
:where(.lp-site) :where([data-layout="masonry"] .lp-gallery-item:nth-child(6n + 3) .lp-photo) {
  aspect-ratio: 4/3;
}
:where(.lp-site) :where([data-layout="masonry"] .lp-gallery-item:nth-child(6n + 4) .lp-photo) {
  aspect-ratio: 4/5;
}
/* Mounted, the columns become 4px grid rows that mount() fills left to right, each photo into the
   shortest column, so a photo added at the end never moves the ones before it. */
:where(.lp-site) :where([data-layout="masonry"] .lp-gallery[data-packed]) {
  display: grid;
  columns: auto;
  grid-auto-rows: 4px;
  row-gap: 0;
  justify-content: center;
}
:where(.lp-site) :where([data-layout="masonry"] .lp-gallery[data-packed] > *) {
  align-self: start;
}
:where(.lp-site) :where([data-layout="editorial"] .lp-gallery-item:first-child) {
  grid-column: span 2;
  grid-row: span 2;
}
:where(.lp-site) :where([data-layout="editorial"] .lp-gallery-item:first-child .lp-photo) {
  height: 100%;
}
:where(.lp-site) :where(.lp-logos) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 40px;
}
:where(.lp-site) :where(.lp-logo-item img) {
  max-height: 48px;
  width: auto;
}

/* tables */
:where(.lp-site) :where(.lp-table-wrap) {
  overflow-x: auto;
}
:where(.lp-site) :where(.lp-table :is(th, td)) {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid color-mix(in oklab, currentColor 15%, transparent);
}

/* locations */
:where(.lp-site) :where(.lp-locations) {
  display: grid;
  gap: var(--lp-gap);
}
/* Filled by mount() from the branch's week; hidden until then. */
:where(.lp-site) :where(.lp-open) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875em;
  font-weight: 600;
}
:where(.lp-site) :where(.lp-open)::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
:where(.lp-site) :where(.lp-hours > div) {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
:where(.lp-site) :where(.lp-map) {
  aspect-ratio: 4/3;
  border-radius: var(--lp-radius);
  overflow: hidden;
}
/* Collapsed until mount() reveals the button and opens it; without JS the button stays hidden and every branch shows. */
:where(.lp-site) :where([data-collapsed] [data-extra]) {
  display: none;
}
/* The control that opens a collapsed list. Beside the branches it carries .lp-btn and wears
   the theme's button; in a footer column it's one more line of text in the list. */
:where(.lp-site) :where(.lp-more) {
  grid-column: 1 / -1;
  align-self: start;
  cursor: pointer;
}
:where(.lp-site) :where(.lp-more.lp-btn) {
  justify-self: center;
}
:where(.lp-site) :where(.lp-more:not(.lp-btn)) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}
:where(.lp-site) :where(.lp-more:not(.lp-btn):hover) {
  text-decoration: underline;
  text-underline-offset: 3px;
}
:where(.lp-site) :where([data-more]:not([data-collapsed]) .lp-more .lp-ico) {
  transform: rotate(45deg);
}
@container lp (min-width: 860px) {
  :where(.lp-site) :where([data-layout="map"] .lp-locations) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  :where(.lp-site) :where([data-layout="map"] .lp-locations .lp-items) {
    grid-template-columns: minmax(0, 1fr);
  }
  /* A map that grew with the branch list stopped being readable, so it keeps a
     usable size and holds its place (clearing the sticky header) while they scroll past. */
  :where(.lp-site) :where([data-layout="map"] .lp-locations .lp-map) {
    position: sticky;
    top: calc(var(--lp-header-h) + 16px);
    aspect-ratio: auto;
    height: min(560px, 72vh);
  }
}

/* ── hero ─────────────────────────────────────────────────────── */
:where(.lp-site) :where(.lp-hero .lp-wrap) {
  display: grid;
  gap: clamp(28px, 5cqi, 64px);
  align-items: center;
}
:where(.lp-site) :where(.lp-hero-text) {
  display: grid;
  gap: 18px;
  justify-items: start;
}
:where(.lp-site) :where(.lp-proof, .lp-facts) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}
:where(.lp-site) :where(.lp-hero-media) {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
:where(.lp-site) :where(.lp-hero-media[data-count="3"]) {
  grid-template-columns: 1fr 1fr;
}
:where(.lp-site) :where(.lp-hero-media[data-count="3"] > :first-child) {
  grid-row: span 2;
  height: 100%;
}
:where(.lp-site) :where([data-layout="slideshow"] .lp-hero-media) {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
:where(.lp-site) :where([data-layout="slideshow"] .lp-hero-media > *) {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
/* The slideshow's arrows sit on the photo's sides and its dots along the bottom; mount() shows them. */
:where(.lp-site) :where(.lp-slideshow) {
  position: relative;
  min-width: 0;
}
:where(.lp-site) :where(.lp-slides-nav) {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
:where(.lp-site) :where(.lp-slides-nav button) {
  pointer-events: auto;
  cursor: pointer;
}
:where(.lp-site) :where(.lp-slides-btn) {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.45);
  color: #fff;
}
:where(.lp-site) :where(.lp-slides-btn:first-child) {
  left: 12px;
}
:where(.lp-site) :where(.lp-slides-btn:last-child) {
  right: 12px;
}
:where(.lp-site) :where(.lp-dots) {
  position: absolute;
  inset: auto 0 12px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
:where(.lp-site) :where(.lp-dot) {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.55);
}
:where(.lp-site) :where(.lp-dot[aria-current="true"]) {
  background: #fff;
}
:where(.lp-site) :where([data-layout="centered"] .lp-hero-text, [data-layout="text_only"] .lp-hero-text) {
  justify-items: center;
  text-align: center;
  margin-inline: auto;
  max-width: 820px;
}
:where(.lp-site) :where([data-layout="full_bleed"].lp-hero .lp-hero-media) {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
}
:where(.lp-site) :where([data-layout="full_bleed"].lp-hero .lp-hero-photo) {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
:where(.lp-site) :where([data-layout="full_bleed"].lp-hero .lp-panel) {
  min-height: min(88vh, 760px);
  display: grid;
  align-items: end;
}
/* compact: a short opening — tighter, a smaller title, any photo small beside the text. */
:where(.lp-site) :where(.lp-hero[data-layout="compact"] > .lp-panel) {
  padding-block: clamp(24px, 4cqi, 40px);
}
:where(.lp-site) :where(.lp-hero[data-layout="compact"] h1.lp-title) {
  font-size: clamp(1.75rem, 4.5cqi, 2.5rem);
}
@container lp (min-width: 860px) {
  :where(.lp-site) :where(.lp-hero[data-layout="compact"] .lp-wrap) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  }
  :where(.lp-site) :where(.lp-hero:is([data-layout="media_end"], [data-layout="media_start"], [data-layout="collage"], [data-layout="slideshow"]) .lp-wrap) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  :where(.lp-site) :where(.lp-hero[data-layout="media_start"] .lp-hero-media) {
    order: -1;
  }
}

/* text */
:where(.lp-site) :where(.lp-text) {
  display: grid;
  gap: clamp(28px, 5cqi, 64px);
  align-items: center;
}
:where(.lp-site) :where(.lp-rich) {
  display: grid;
  gap: 14px;
  max-width: 68ch;
}
:where(.lp-site) :where(.lp-rich a) {
  text-decoration: underline;
  text-underline-offset: 3px;
}
:where(.lp-site) :where(.lp-rich ul) {
  list-style: disc;
  padding-left: 1.2em;
}
:where(.lp-site) :where(.lp-rich ol) {
  list-style: decimal;
  padding-left: 1.2em;
}
:where(.lp-site) :where(.lp-points) {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}
:where(.lp-site) :where(.lp-signature) {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
@container lp (min-width: 860px) {
  :where(.lp-site) :where([data-layout="media_start"] .lp-text, [data-layout="media_end"] .lp-text) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  :where(.lp-site) :where([data-layout="media_start"] .lp-text-photo) {
    order: -1;
  }
  :where(.lp-site) :where([data-layout="media_start"] .lp-text) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* cta */
:where(.lp-site) :where(.lp-cta .lp-wrap) {
  display: grid;
  gap: clamp(24px, 4cqi, 48px);
  align-items: center;
}
:where(.lp-site) :where(.lp-cta-text) {
  display: grid;
  gap: 16px;
  justify-items: start;
}
:where(.lp-site) :where(.lp-cta-text .lp-head) {
  margin-bottom: 0;
}
:where(.lp-site) :where(.lp-cta:is([data-layout="banded"], [data-layout="minimal"], [data-layout="card"]) .lp-cta-text) {
  justify-items: center;
  text-align: center;
  margin-inline: auto;
}
:where(.lp-site) :where(.lp-cta:is([data-layout="banded"], [data-layout="minimal"], [data-layout="card"]) .lp-head) {
  justify-items: center;
}
:where(.lp-site) :where(.lp-countdown) {
  display: flex;
  gap: 10px;
}
:where(.lp-site) :where(.lp-count) {
  display: grid;
  justify-items: center;
  min-width: 56px;
}
:where(.lp-site) :where(.lp-terms) {
  font-size: 0.8125rem;
  opacity: 0.7;
}
@container lp (min-width: 860px) {
  :where(.lp-site) :where(.lp-cta[data-layout="split"] .lp-wrap, .lp-cta[data-layout="banner"] .lp-wrap) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* widgets and forms */
:where(.lp-site) :where(.lp-widget .lp-wrap) {
  display: grid;
  gap: clamp(24px, 4cqi, 48px);
  align-items: start;
}
:where(.lp-site) :where(.lp-form) {
  display: grid;
  gap: 14px;
}
:where(.lp-site) :where(.lp-field) {
  display: grid;
  gap: 6px;
  font-size: 0.875rem;
}
:where(.lp-site) :where(.lp-field :is(input, select, textarea)) {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid color-mix(in oklab, currentColor 25%, transparent);
  border-radius: 10px;
  background: Canvas;
  font-size: 1rem;
}
@container lp (min-width: 860px) {
  :where(.lp-site) :where(.lp-widget:is([data-layout="split"], [data-layout="card"]) .lp-wrap) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
:where(.lp-site) :where(.lp-join) {
  display: grid;
  gap: var(--lp-gap);
}
:where(.lp-site) :where(.lp-join-step) {
  border: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
:where(.lp-site) :where(.lp-join-step legend) {
  font-weight: 600;
  margin-bottom: 12px;
}
:where(.lp-site) :where(.lp-options) {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
:where(.lp-site) :where(.lp-option) {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in oklab, currentColor 20%, transparent);
  border-radius: var(--lp-radius);
  cursor: pointer;
}
:where(.lp-site) :where(.lp-option small) {
  grid-column: 2;
  opacity: 0.75;
}
:where(.lp-site) :where(.lp-option[data-disabled]) {
  opacity: 0.5;
  cursor: not-allowed;
}
:where(.lp-site) :where(.lp-summary dl > div) {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 8px;
}
:where(.lp-site) :where(.lp-summary) {
  display: grid;
  gap: 12px;
}
@container lp (min-width: 960px) {
  :where(.lp-site) :where(.lp-join) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 0.9fr);
    align-items: start;
  }
}

/* details */
:where(.lp-site) :where(.lp-tablist) {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 24px;
}
:where(.lp-site) :where(.lp-tab) {
  padding: 10px 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
:where(.lp-site) :where(.lp-tab[aria-selected="true"]) {
  border-bottom-color: currentColor;
}
:where(.lp-site) :where(.lp-parts) {
  display: grid;
  gap: 32px;
}
:where(.lp-site) :where(.lp-curriculum li) {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid color-mix(in oklab, currentColor 12%, transparent);
}

/* columns, embeds */
:where(.lp-site) :where(.lp-cols) {
  display: grid;
  gap: var(--lp-gap);
}
:where(.lp-site) :where(.lp-col) {
  display: grid;
  gap: 16px;
  align-content: start;
}
@container lp (min-width: 760px) {
  :where(.lp-site) :where(.lp-cols[data-ratio="1:1"]) { grid-template-columns: 1fr 1fr; }
  :where(.lp-site) :where(.lp-cols[data-ratio="2:1"]) { grid-template-columns: 2fr 1fr; }
  :where(.lp-site) :where(.lp-cols[data-ratio="1:2"]) { grid-template-columns: 1fr 2fr; }
  :where(.lp-site) :where(.lp-cols[data-ratio="1:1:1"]) { grid-template-columns: repeat(3, 1fr); }
  :where(.lp-site) :where(.lp-cols[data-ratio="1:1:1:1"]) { grid-template-columns: repeat(4, 1fr); }
}
:where(.lp-site) :where(.lp-embed, .lp-video) {
  aspect-ratio: var(--ar, 16/9);
  border-radius: var(--lp-radius);
  overflow: hidden;
}

/* ── chrome ───────────────────────────────────────────────────── */
:where(.lp-site) :where(.lp-announce) {
  padding: 8px var(--lp-gutter);
  text-align: center;
  font-size: 0.875rem;
}
:where(.lp-site) :where(.lp-announce p) {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
}
:where(.lp-site) :where(.lp-announce a) {
  text-decoration: underline;
  text-underline-offset: 3px;
}
:where(.lp-site) :where(.lp-header) {
  position: sticky;
  top: 0;
  z-index: 20;
  background: Canvas;
}
:where(.lp-site) :where(.lp-header-in) {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--lp-max);
  margin-inline: auto;
  padding: 12px var(--lp-gutter);
}
:where(.lp-site) :where(.lp-logo) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  margin-right: auto;
}
:where(.lp-site) :where(.lp-logo-mark) {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid currentColor;
}
:where(.lp-site) :where(.lp-logo-img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
:where(.lp-site) :where(.lp-logo-name small) {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.75;
}
:where(.lp-site) :where(.lp-nav) {
  display: none;
  gap: 24px;
}
:where(.lp-site) :where(.lp-header-actions) {
  display: flex;
  align-items: center;
  gap: 12px;
}
:where(.lp-site) :where(.lp-login, .lp-header-cta) {
  display: none;
}
:where(.lp-site) :where(.lp-header-call, .lp-menu summary) {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  list-style: none;
}
:where(.lp-site) :where(.lp-menu summary::-webkit-details-marker) {
  display: none;
}
:where(.lp-site) :where(.lp-menu) {
  position: relative;
}
:where(.lp-site) :where(.lp-menu-panel) {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: grid;
  min-width: 220px;
  padding: 8px;
  background: Canvas;
  border: 1px solid color-mix(in oklab, currentColor 15%, transparent);
  border-radius: var(--lp-radius);
  box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.3);
}
:where(.lp-site) :where(.lp-menu-panel a) {
  padding: 12px;
}
/* centered: the logo in the middle, actions to its right, the nav on its own row. */
:where(.lp-site) :where(.lp-header[data-header="centered"] .lp-header-in) {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  row-gap: 8px;
}
:where(.lp-site) :where(.lp-header[data-header="centered"] .lp-logo) {
  grid-area: 1 / 2;
  margin-right: 0;
}
:where(.lp-site) :where(.lp-header[data-header="centered"] .lp-header-actions) {
  grid-area: 1 / 3;
  justify-self: end;
}
:where(.lp-site) :where(.lp-header[data-header="centered"] .lp-nav) {
  grid-area: 2 / 1 / 3 / -1;
  justify-content: center;
}
/* overlay: transparent and out of flow, where it would sit, so the opening hero starts under it. */
:where(.lp-site) :where(.lp-header[data-header="overlay"]) {
  position: absolute;
  top: auto;
  inset-inline: 0;
  background: transparent;
}
:where(.lp-site) :where(.lp-header[data-header="overlay"] + main > .lp-hero:first-child .lp-wrap) {
  margin-top: var(--lp-header-h);
}
@container lp (min-width: 960px) {
  :where(.lp-site) :where(.lp-nav) {
    display: flex;
  }
  :where(.lp-site) :where(.lp-login, .lp-header-cta) {
    display: inline-flex;
  }
  :where(.lp-site) :where(.lp-menu, .lp-header-call) {
    display: none;
  }
}
:where(.lp-site) :where(.lp-footer-top) {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
@container lp (min-width: 760px) {
  :where(.lp-site) :where(.lp-footer-top) {
    grid-template-columns: minmax(240px, 1.6fr) repeat(auto-fit, minmax(140px, 1fr));
  }
}
:where(.lp-site) :where(.lp-footer-brand) {
  display: grid;
  gap: 14px;
  align-content: start;
}
:where(.lp-site) :where(.lp-footer-col) {
  display: grid;
  gap: 12px;
  align-content: start;
}
:where(.lp-site) :where(.lp-footer-col ul) {
  display: grid;
  gap: 8px;
}
:where(.lp-site) :where(.lp-social) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
:where(.lp-site) :where(.lp-footer-row) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}
:where(.lp-site) :where(.lp-footer-links) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-inline-end: auto;
}
:where(.lp-site) :where(.lp-footer-bottom) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in oklab, currentColor 15%, transparent);
  font-size: 0.875rem;
  opacity: 0.8;
}
:where(.lp-site) :where(.lp-mobilebar) {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: Canvas;
  border-top: 1px solid color-mix(in oklab, currentColor 15%, transparent);
}
:where(.lp-site) :where(.lp-mobilebar a) {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 56px;
  padding: 8px;
  font-size: 0.75rem;
}
@container lp (min-width: 760px) {
  :where(.lp-site) :where(.lp-mobilebar) {
    display: none;
  }
}
/* Powered by Lunar: in every footer; a theme may restyle it, never hide it. */
:where(.lp-site) :where(.lp-powered) {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
:where(.lp-site) :where(.lp-powered-logo) {
  height: 0.6rem;
  width: auto;
}

/* ── modal: a join or enquiry page, framed over this one (mount() opens it) ── */
:where(.lp-site) :where(.lp-modal) {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: Canvas;
  color: CanvasText;
}
:where(.lp-site) :where(.lp-modal)::backdrop {
  background: rgb(0 0 0 / 0.5);
}
:where(.lp-site) :where(.lp-modal-panel) {
  position: relative;
  height: 100%;
}
:where(.lp-site) :where(.lp-modal-frame) {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* While the framed page loads: a spinner instead of a blank frame (mount() sets data-loading). */
:where(.lp-site) :where(.lp-modal-loading) {
  display: none;
}
:where(.lp-site) :where(.lp-modal[data-loading] .lp-modal-loading) {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 32px;
  height: 32px;
  border: 3px solid color-mix(in srgb, currentColor 20%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: lp-spin 0.8s linear infinite;
}
:where(.lp-site) :where(.lp-modal[data-loading] .lp-modal-frame) {
  visibility: hidden;
}
:where(.lp-site) :where(.lp-modal-close) {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: Canvas;
  color: CanvasText;
  cursor: pointer;
}
/* Full screen on phones, as the widget site's modal; a centred card from 640px. The dialog sits in
   the top layer, sized by the viewport rather than the .lp-site container. */
@media (min-width: 640px) {
  :where(.lp-site) :where(.lp-modal) {
    width: min(560px, 100% - 32px);
    /* --lp-modal-h: the framed page's content height, when it marks it (mount() measures). */
    height: min(var(--lp-modal-h, 820px), 100dvh - 48px);
    margin: auto;
    border-radius: var(--lp-radius);
  }
  :where(.lp-site) :where(.lp-modal[data-loading]) {
    height: 240px;
  }
}

/* ── trainer profiles: a clamped bio's read-more opens the whole profile (mount() does both) ── */
:where(.lp-site) :where(.lp-person-text[data-clamp]) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
:where(.lp-site) :where(.lp-person-more) {
  /* Hugs its label (no stretching across the card) and so sits where the card puts its content,
     left in a list, centred in a centred card. */
  width: fit-content;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
:where(.lp-site) :where(.lp-profile-modal) {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: auto;
  background: Canvas;
  color: CanvasText;
}
:where(.lp-site) :where(.lp-profile-modal)::backdrop {
  background: rgb(0 0 0 / 0.5);
}
:where(.lp-site) :where(.lp-profile-panel) {
  position: relative;
}
:where(.lp-site) :where(.lp-profile) {
  display: grid;
  gap: 20px;
  padding: 56px 20px 28px;
}
:where(.lp-site) :where(.lp-profile-photo) {
  max-width: 280px;
}
:where(.lp-site) :where(.lp-profile-body) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
:where(.lp-site) :where(.lp-profile-bio) {
  display: grid;
  gap: 0.75em;
}
:where(.lp-site) :where(.lp-profile-programs ul) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
:where(.lp-site) :where(.lp-profile-programs a) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Full screen on phones; a centred card from 640px, with the photo beside the text from 760px. */
@media (min-width: 640px) {
  :where(.lp-site) :where(.lp-profile-modal) {
    width: min(760px, 100% - 32px);
    height: fit-content;
    max-height: min(820px, 100dvh - 48px);
    margin: auto;
    border-radius: var(--lp-radius);
  }
  :where(.lp-site) :where(.lp-profile) {
    padding: 32px;
  }
}
@media (min-width: 760px) {
  :where(.lp-site) :where(.lp-profile) {
    grid-template-columns: 240px 1fr;
    align-items: start;
  }
  /* The photo holds its place while a long profile scrolls beside it (the dialog is the scroller). */
  :where(.lp-site) :where(.lp-profile-photo) {
    position: sticky;
    top: 32px;
  }
}

/* ── lightbox: a lightbox gallery's photos, one at a time (mount() opens it) ── */
:where(.lp-site) :where(.lp-lightbox) {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 56px 16px;
  border: 0;
  background: transparent;
  color: #fff;
}
:where(.lp-site) :where(.lp-lightbox[open]) {
  display: grid;
  place-items: center;
}
:where(.lp-site) :where(.lp-lightbox)::backdrop {
  background: rgb(0 0 0 / 0.85);
}
:where(.lp-site) :where(.lp-lightbox-figure) {
  display: grid;
  gap: 10px;
  justify-items: center;
  max-width: 100%;
}
:where(.lp-site) :where(.lp-lightbox-img) {
  display: block;
  max-width: min(100%, 1200px);
  max-height: calc(100dvh - 160px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}
:where(.lp-site) :where(.lp-lightbox-caption) {
  max-width: 60ch;
  text-align: center;
}
:where(.lp-site) :where(.lp-lightbox-count) {
  position: absolute;
  top: 18px;
  left: 16px;
  font-size: 0.875em;
}
:where(.lp-site) :where(.lp-lightbox-btn) {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.45);
  color: #fff;
  cursor: pointer;
}
:where(.lp-site) :where(.lp-lightbox-btn[data-dir="-1"]) {
  left: 12px;
}
:where(.lp-site) :where(.lp-lightbox-btn[data-dir="1"]) {
  right: 12px;
}
:where(.lp-site) :where(.lp-gallery-item[role="button"]) {
  cursor: zoom-in;
}

/* ── marquee and badge, for themes that turn them on ──────────── */
:where(.lp-site) :where(.lp-marquee) {
  overflow: hidden;
}
:where(.lp-site) :where(.lp-marquee-track) {
  display: flex;
  width: max-content;
  animation: lp-marquee 40s linear infinite;
}
:where(.lp-site) :where(.lp-marquee:is(:hover, :focus-within) .lp-marquee-track) {
  animation-play-state: paused;
}
:where(.lp-site) :where(.lp-marquee-item) {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding-inline: 12px;
  white-space: nowrap;
}
@keyframes lp-marquee {
  to {
    transform: translateX(-50%);
  }
}
:where(.lp-site) :where(.lp-badge svg) {
  animation: lp-spin 24s linear infinite;
}
@keyframes lp-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.lp-site *, .lp-site *::before, .lp-site *::after) {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}