/*!
 * Bootstrap 6 template kit — shared base
 * For Bootstrap 6.0.0-alpha1 (pinned 59cee6c)
 *
 * IMPORTANT: this file is deliberately NOT inside @layer. Bootstrap 6 wraps all
 * of its own CSS in cascade layers, so unlayered author CSS wins regardless of
 * source order. Consequence: avoid shorthand `margin` / `padding` / `background`
 * on elements that also carry Bootstrap utilities — the shorthand silently beats
 * `.mb-6` and friends. Use longhands.
 */

/* ---------------------------------------------------------------
   Closed <dialog> fix — REQUIRED

   alpha1 ships `.dialog { display: flex }` with no `:not([open])` guard, so a
   closed dialog beats the UA's `dialog:not([open]) { display: none }` and keeps
   ~500px of layout space at the bottom of the page. Scope to `.dialog` only:
   `.drawer` must stay in flow so navbar-expand can inline it on desktop.
   --------------------------------------------------------------- */

dialog.dialog:not([open]) {
  display: none;
}

/* ---------------------------------------------------------------
   Brand retheming

   `.theme-primary` maps --bs-theme-* from the WHOLE --bs-primary-* family, so
   setting --bs-primary-base alone retints your own CSS and leaves every
   Bootstrap button, badge and pill stock blue. Stock values derive from a
   --bs-blue-* scale with the hue inlined at every step, so there is no single
   upstream variable to swap either.

   This block rebuilds the family from one --brand token. A template only needs:

       :root { --brand: oklch(50% 0.14 32); }

   in its own stylesheet — everything below follows.
   --------------------------------------------------------------- */

:root {
  --brand: var(--bs-blue-500);

  --bs-primary-base: var(--brand);
  --bs-primary-bg: var(--brand);
  --bs-primary-contrast: var(--bs-white);
  --bs-primary-fg: light-dark(
    color-mix(in oklab, var(--brand), black 14%),
    color-mix(in oklab, var(--brand), white 34%));
  --bs-primary-fg-emphasis: light-dark(
    color-mix(in oklab, var(--brand), black 38%),
    color-mix(in oklab, var(--brand), white 62%));
  --bs-primary-bg-subtle: light-dark(
    color-mix(in oklab, var(--brand), white 88%),
    color-mix(in oklab, var(--brand), black 64%));
  --bs-primary-bg-muted: light-dark(
    color-mix(in oklab, var(--brand), white 72%),
    color-mix(in oklab, var(--brand), black 46%));
  --bs-primary-border: light-dark(
    color-mix(in oklab, var(--brand), white 56%),
    color-mix(in oklab, var(--brand), black 28%));
  --bs-primary-focus-ring: color-mix(in oklab, var(--brand), transparent 70%);
}

/* ---------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------- */

:root {
  --kit-section-y: 5rem;
}

@media (width >= 768px) {
  :root {
    --kit-section-y: 7rem;
  }
}

.section {
  padding-block: var(--kit-section-y);
}

.section-narrow {
  max-width: 46rem;
  margin-inline: auto;
}

:where(section[id], main[id]) {
  scroll-margin-top: 5rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* ---------------------------------------------------------------
   Sticky header
   --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(12px);
  background: color-mix(in oklab, var(--bs-bg-body), transparent 20%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--bs-border-color);
  background: color-mix(in oklab, var(--bs-bg-body), transparent 8%);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--bs-radius-4);
  background: var(--bs-primary-base);
  color: var(--bs-white);
  font-weight: 700;
  flex: none;
}

/* Color-mode toggle icons */
.theme-icon-dark {
  display: none;
}

[data-bs-theme="dark"] .theme-icon-light {
  display: none;
}

[data-bs-theme="dark"] .theme-icon-dark {
  display: block;
}

/* ---------------------------------------------------------------
   Surfaces
   --------------------------------------------------------------- */

.surface {
  height: 100%;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-radius-6);
  background: var(--bs-bg-body);
}

.surface-pad {
  padding: 1.75rem;
}

.lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lift:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--bs-primary-base), transparent 60%);
  box-shadow: 0 1.5rem 2.5rem -1rem rgb(0 0 0 / 18%);
}

.icon-tile {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--bs-radius-4);
  background: color-mix(in oklab, var(--bs-primary-base), transparent 88%);
  color: var(--bs-primary-base);
  flex: none;
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: 4.5rem 5rem;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% 0 auto;
  height: 40rem;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    60% 60% at 50% 0%,
    color-mix(in oklab, var(--bs-primary-base), transparent 84%) 0%,
    transparent 70%
  );
}

.hero-title {
  text-wrap: balance;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.hero-lede {
  text-wrap: pretty;
  max-width: 38rem;
}

/* ---------------------------------------------------------------
   Avatars (initials placeholders — swap for <img class="avatar-img">)
   --------------------------------------------------------------- */

.avatar-initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in oklab, var(--bs-primary-base), transparent 82%);
  color: var(--bs-primary-base);
  font-weight: 650;
  font-size: 0.8em;
}

.stars {
  display: flex;
  gap: 0.125rem;
  color: var(--bs-warning-base);
}

.stars svg {
  width: 1rem;
  height: 1rem;
}

/* ---------------------------------------------------------------
   Media placeholder — gradient block, no image dependency
   --------------------------------------------------------------- */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--bs-primary-base), transparent 55%),
    color-mix(in oklab, var(--bs-primary-base), transparent 85%)
  );
  color: var(--bs-white);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.ph-16x9 { aspect-ratio: 16 / 9; }
.ph-4x3  { aspect-ratio: 4 / 3; }
.ph-1x1  { aspect-ratio: 1 / 1; }
.ph-3x4  { aspect-ratio: 3 / 4; }

/* ---------------------------------------------------------------
   Stacked-table correction
   --------------------------------------------------------------- */

/* v6's stacked rules only target `td`, but the correct markup for the
   identifying cell in a row is `th scope="row"`. Left alone that cell keeps
   `display: table-cell` inside a row that has become `display: block`, so it
   renders on its own odd line. Restate the two rules for it.

   Reminders, because all three bite silently:
     • bare .table-stacked stacks at EVERY width — use md:table-stacked etc.
     • the responsive variants are @container queries, so the table needs a
       .table-responsive ancestor to give them a container to measure
     • labels come from data-cell="…" on each cell, not from the thead

   The correction has to be scoped exactly the way v6 scopes its own stacked
   rules — one @container block per prefix, at v6's own breakpoints. An earlier
   version of this file matched the class with a substring selector and no
   query, which made `th[scope="row"]` display:block at EVERY width: on a wide
   screen the label cell then broke out of the first column while its sibling
   `td`s stayed table-cells. It looked fine in the exact case it was written for
   (stacked, narrow) and wrong everywhere else. */

.table-stacked > tbody > tr > th[scope="row"] {
  display: block;
  border: 0;
  padding: calc(var(--bs-table-cell-padding-y) * 0.25) calc(var(--bs-table-cell-padding-x) * 2);
}

@container (width < 576px) {
  .sm\:table-stacked > tbody > tr > th[scope="row"] {
    display: block;
    border: 0;
    padding: calc(var(--bs-table-cell-padding-y) * 0.25) calc(var(--bs-table-cell-padding-x) * 2);
  }
}

@container (width < 768px) {
  .md\:table-stacked > tbody > tr > th[scope="row"] {
    display: block;
    border: 0;
    padding: calc(var(--bs-table-cell-padding-y) * 0.25) calc(var(--bs-table-cell-padding-x) * 2);
  }
}

@container (width < 1024px) {
  .lg\:table-stacked > tbody > tr > th[scope="row"] {
    display: block;
    border: 0;
    padding: calc(var(--bs-table-cell-padding-y) * 0.25) calc(var(--bs-table-cell-padding-x) * 2);
  }
}

@container (width < 1280px) {
  .xl\:table-stacked > tbody > tr > th[scope="row"] {
    display: block;
    border: 0;
    padding: calc(var(--bs-table-cell-padding-y) * 0.25) calc(var(--bs-table-cell-padding-x) * 2);
  }
}

/* A .ph with real photography dropped into it. The gradient stays underneath as
   the loading backdrop, so nothing shifts as the image decodes and the block
   still reads as deliberate if the file is ever missing. The text that used to
   label the placeholder becomes the img's alt. */
.ph > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Photographic hero backdrop.

   The photo is a real <img class="hero-bg"> rather than a background-image, for
   one specific reason: a relative url() inside a custom property resolves
   against the stylesheet that substitutes the var(), not the document. Setting
   --hero-img:url('img/hero.jpg') inline therefore made every hero request
   /assets/css/img/hero.jpg and 404. An <img> src resolves against the document,
   which is what everyone expects — and it preloads as LCP, which a CSS
   background never does.

   Paint order inside the isolated stacking context: photo (-2), .hero::before
   glow (-1), scrim (-1, later in tree order), content. */
.has-hero-img {
  position: relative;
  isolation: isolate;
}

.has-hero-img > .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, center);
}

.has-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--hero-scrim, linear-gradient(
    to right,
    color-mix(in oklab, var(--bs-bg-body), transparent 6%) 0%,
    color-mix(in oklab, var(--bs-bg-body), transparent 26%) 48%,
    color-mix(in oklab, var(--bs-bg-body), transparent 64%) 100%
  ));
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Stats band
   --------------------------------------------------------------- */

.stat-band {
  display: grid;
  gap: 2rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
}

@media (width >= 768px) {
  .stat-band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat-band dt {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--bs-primary-base);
}

.stat-band dd {
  margin-block: 0.375rem 0;
  margin-inline: 0;
  font-size: 0.875rem;
  color: var(--bs-fg-2);
}

/* ---------------------------------------------------------------
   Motion preferences
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .lift,
  .site-header {
    transition: none;
  }

  .lift:hover {
    transform: none;
  }
}