@charset "UTF-8";
/*!
  main.scss
  Entry point for the custom single page integrated into WordPress.

  Goals:
  - Keep all rules scoped under #ap-root to avoid conflicts with the active theme.
  - Provide a minimal reset, variables, and a small set of components.
  - Be production-friendly but easy to iterate during local preview.
*/
/* -----------------------------------------
   SCSS design tokens (compile-time)
----------------------------------------- */
/* ==========================================================================
   Typography tokens, maps and helpers
   - Maps are derived from the XD spec provided:
     - Tiller (display) used for large headers
     - Futura (body/titles/buttons)
   - Sizes are converted from pt to px assuming 96dpi (1pt = 1.333px),
     then to rem using a 16px base. Rounded to sensible fractions.
   ========================================================================== */
/* Font family tokens
   - `Tiller Test` used for display/headers (may be a custom or variable font)
   - `Futura PT` / `Futura LT Pro` used for body and UI
*/
/* Font weight tokens (mapped from style names in the XD spec) */
/* Global type scale (1 = 100%). Set to 0.7 to reduce by 30%. */
/* Type sizes (specified in px -> rem)
   These tokens now represent pixel sizes converted to rem (px / 16).
   Derived conversions:
     95px -> 95px  -> 5.9375rem
     36px -> 36px  -> 2.25rem
     32px -> 32px  -> 2rem
     26px -> 26px  -> 1.625rem
     24px -> 24px  -> 1.5rem
     22px -> 22px  -> 1.375rem
     18px -> 18px  -> 1.125rem
     16px -> 16px  -> 1rem
*/
/* Default line-heights (unitless) tuned for headings and body text */
/* Letter-spacing tokens (em units) */
/* Typography style map
   - Keys are semantic style names inferred from the XD spec.
   - Each entry is a map with: family, weight, style, size, line-height, tracking, color
   - Color references use semantic color tokens above.
*/
/* -----------------------------------------------------------------------------
   Helper: fetch typography property from $typography map
   Usage: type-get('display', 'size') -> returns size value
----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   Mixin: apply typography style by name
   - Accepts a string key matching $typography map
   - Optional $override-color to override the color
   - Example: @include text-style('display');
----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   Example usages (commented):
   .hero-title { @include text-style('display'); }
   .hero-title--inverse { @include text-style('display--inverse'); }
   .lead { @include text-style('body'); font-weight: $font-weight-regular; }
   .btn-cta { @include text-style('button-cta--inverse'); text-transform: uppercase; }
----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   Utility classes (responsive)
   - `.typical` : typical body/lead text — 22pt on small screens, ~32pt on wide screens
   - `.display-responsive` : large headings — 36pt on small screens, up to 95pt on wide screens,
     uppercase Tiller Test, bold.
   These use CSS `clamp()` to provide fluid scaling between the two size anchors.
----------------------------------------------------------------------------- */
/* Typical body text mixin: mobile-first 22pt, scales up toward 32pt on larger viewports */
/* Backwards-compatible class that uses the mixin */
.typical {
  font-family: "futura", "futura-pt", "Futura LT Pro", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0;
  /* color: color("semantic", "text"); */
  /* fluid: min = 22pt, preferred scaling, max = 32pt */
  font-size: 1.25rem;
}
.typical b {
  font-weight: 700;
}

/* Large display/headers mixin: mobile 36pt, scales up toward 95pt on large viewports.
   Uppercase, Tiller Test, Bold as requested. */
/* Backwards-compatible classes that include the mixin */
.display-responsive,
.h1-responsive {
  font-family: "tiller", serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.75;
  letter-spacing: 0;
  color: #321a37;
  font-size: clamp(1.1375rem, 1.1375rem + 6vw, 4.15625rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/*!
  _util.scss
  Reusable SCSS utilities: breakpoint tokens, media query mixins, and helpers.
  - Use the $bp-* tokens and mixins for consistent responsive behavior.
  - All breakpoint variables are declared with !default so projects can override.
*/
/* -----------------------------------------
   Breakpoint tokens (min-widths)
   Override any of these before importing this file if needed.
----------------------------------------- */
/* Tablets / small laptops */
/* Laptops / desktops */
/* Large desktops */
/* Very large screens */
/* Canonical map of breakpoints for programmatic access */
/* -----------------------------------------
   Helpers
----------------------------------------- */
/* Fetch a breakpoint size by token name (e.g., bp(md) -> 768px) */
/* Normalize an input that can be a breakpoint token or a length value */
/* Decrement a length slightly to create an inclusive max-width (avoid overlap) */
/* -----------------------------------------
   Media query mixins
----------------------------------------- */
/* Min-width (mobile-first). Accepts token (e.g., md) or length (e.g., 820px). */
/* Max-width (inclusive). Accepts token or length. */
/* Between two breakpoints (inclusive lower, inclusive upper via small decrement) */
/* Orientation helpers */
/* Color scheme preferences */
/* High DPI / Retina */
/* -----------------------------------------
   Aliases (short forms)
   - These mirror the mixin names used elsewhere in the codebase for convenience.
----------------------------------------- */
/* -----------------------------------------
   Usage examples (commented)
----------------------------------------- */
/*
.hero {
  padding: 1.5rem;

  @include up(md) { padding: 3rem; }
  @include between(sm, lg) { background: #f8f5f9; }
  @include down(sm) { text-align: center; }

  .hero__image { display: none; }
  @include up(md) {
    .hero__image { display: block; }
  }
}

.button {
  transition: transform 120ms ease;
  @include motion-reduce { transition: none; }
}
*/
/*!
  _hero.scss
  Hero component styles using new section styles

  Expectations:
  - Import `_util.scss` before this file so breakpoint tokens/mixins are available.
  - Uses CSS custom properties defined in the main tokens (e.g., --ap-color-*, --ap-space-*, --ap-max-width).
  - Uses the new section styles from `components/sections/_sections.scss`
*/
/*!
  main.scss
  Entry point for the custom single page integrated into WordPress.

  Goals:
  - Keep all rules scoped under #ap-root to avoid conflicts with the active theme.
  - Provide a minimal reset, variables, and a small set of components.
  - Be production-friendly but easy to iterate during local preview.
*/
/*!
  _sections.scss
  Reusable section styles for the site.

  Provides four opinionated section variants:
    - .ap-section--white
    - .ap-section--black
    - .ap-section--purple
    - .ap-section--logo

  Each variant configures:
    - background color
    - (logo-section only) background-image tiling
    - text color
    - optional top / bottom borders and their colors

  Usage:
    <section class="ap-section ap-section--purple ap-section--border-top">
      <div class="ap-section__inner">
        ...content...
      </div>
    </section>

  Notes:
    - The design uses sensible SCSS defaults but also exposes CSS custom properties
      so consuming code can easily override colors/borders at runtime.
    - Import order: make sure `_util.scss` (mixins / breakpoints) is available in the load path.
*/
/* ----------------------------
   Defaults (overrideable)
   ---------------------------- */
/* Colors (defaults - projects can override these before importing) */
/* blush background for purple section */
/* Per-variant title colors (overrideable) */
/* Title for purple variant uses light blush from palette */
/* Logo section titles default to standard text color */
/* Logo/brand tile (used only by logo-section) */
/* tiled size (x auto) */
/* Border width (can be changed) */
/* ----------------------------
   Base section block
   ---------------------------- */
.ap-section {
  position: relative;
  /* padding-block: $section-pad-block; */
  /* padding-inline: $section-pad-inline; */
  color: inherit;
  background: transparent;
  overflow: visible;
  font-family: "futura", "futura-pt", "Futura LT Pro", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0;
  /* color: color("semantic", "text"); */
  /* fluid: min = 22pt, preferred scaling, max = 32pt */
  font-size: 1.25rem;
}
.ap-section b {
  font-weight: 700;
}
.ap-section {
  /* Default CSS custom properties (can be overridden per-instance) */
  --section-bg: transparent;
  --section-color: inherit;
  --section-title-color: var(--section-color);
  --section-border-color: transparent;
  --section-border-top: none;
  --section-border-bottom: none;
  background-color: var(--section-bg);
  color: var(--section-color);
  /* Borders (controlled via utility modifier classes below) */
}
.ap-section.ap-section--border-top {
  border-top: 3px solid var(--section-border-color);
}
.ap-section.ap-section--border-black-top {
  border-top: 3px solid black;
}
.ap-section.ap-section--border-black-bottom {
  border-bottom: 3px solid black;
}
.ap-section.ap-section--border-bottom {
  border-bottom: 3px solid var(--section-border-color);
}
.ap-section {
  /* Inner wrapper to constrain content to the main container width if needed */
}
.ap-section__inner {
  max-width: var(--ap-max-width, 1200px);
  margin-inline: auto;
}
.ap-section {
  /* Reusable section title */
}
.ap-section__title {
  margin: 0 0 var(--ap-space-4, 1rem);
  color: var(--section-title-color, var(--section-color));
  text-align: center;
  font-family: "tiller", serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.75;
  letter-spacing: 0;
  color: #321a37;
  font-size: clamp(1.1375rem, 1.1375rem + 6vw, 4.15625rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* preserve small tuning */
  letter-spacing: -0.015em;
}

/* ----------------------------
   Variant: White
   ---------------------------- */
.ap-section--white {
  /* Use concrete values but allow runtime override via CSS custom props. */
  --section-bg: #ffffff;
  --section-color: #29102e;
  --section-border-color: #c2c2c2;
  --section-title-color: #321a37;
}

/* ----------------------------
   Variant: Black
   ---------------------------- */
.ap-section--black {
  --section-bg: #000000;
  --section-color: #ffffff;
  --section-border-color: rgba(255, 255, 255, 0.06);
  --section-title-color: #ffffff;
  /* Ensure elements like links where the default theme expects dark text
     get an appropriate color; consumers can still override via utility tokens. */
}
.ap-section--black a,
.ap-section--black button {
  color: color-mix(in srgb, var(--section-color) 88%, #fff 12%);
}

/* ----------------------------
   Variant: Purple
   ---------------------------- */
.ap-section--purple {
  --section-bg: #e1b9d7;
  --section-color: #000000;
  --section-border-color: rgba(0, 0, 0, 0.06);
  --section-title-color: #321a37;
  /* make sure inner content sits above overlay */
}
.ap-section--purple .ap-section__inner {
  position: relative;
  z-index: 1;
}

/* ----------------------------
   Variant: Logo (tiled background)
   ---------------------------- */
.ap-section--logo {
  --section-bg: #321a37; /* fallback base color */
  --section-color: #ffffff;
  --section-border-color: #c2c2c2;
  --section-title-color: #ffffff;
  /* Tile the logo as a subtle background layer */
  background-image: url(/assets/img/AWM_Bg_Logomark_Seamless.jpg);
  background-repeat: repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: scroll; /* avoid fixed on mobile */
  /* Ensure children sit above the pseudo-element overlay */
}
.ap-section--logo .ap-section__inner {
  position: relative;
  z-index: 1;
}
.ap-section--logo {
  /* Retina tweak: slightly smaller tile on high DPI like other components */
}
/* ----------------------------
   Utility helpers
   ---------------------------- */
/* Allow quick inline overrides:
   <section class="ap-section" style="--section-bg: #f7f7f7; --section-color: #111;">
*/
.ap-section--invert {
  /* swap text & background if someone wants to invert quickly */
  background-color: var(--section-color);
  color: var(--section-bg);
}

/* Small helper to make thin dividers at the section edges if needed */
.ap-section__divider {
  height: 1px;
  background: currentColor;
  opacity: 0.06;
  margin: 0;
}

/* ----------------------------
   Responsive refinements (optional)
   ---------------------------- */
@media (min-width: 768px) {
  .ap-section {
    /* padding-block: clamp(3rem, 6vw, 6rem); */
  }
}
/* ----------------------------
   Accessibility notes
   ---------------------------- */
/*
 - If you change the background/text combinations make sure the contrast
   between `--section-bg` and `--section-color` remains accessible.
 - The CSS custom properties are provided so editors can dynamically change
   section colors without editing the SCSS.
*/
/*!
  main.scss
  Entry point for the custom single page integrated into WordPress.

  Goals:
  - Keep all rules scoped under #ap-root to avoid conflicts with the active theme.
  - Provide a minimal reset, variables, and a small set of components.
  - Be production-friendly but easy to iterate during local preview.
*/
/* Background tile for the hero (expected to exist under public/assets/img/) */
/* Optional logo width cap */
#ap-root {
  /* Use the logo section variant with custom gradient overlay */
}
#ap-root {
  /* Layout container */
}
#ap-root .ap-hero .ap-section__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}
@media (min-width: 768px) {
  #ap-root .ap-hero .ap-section__inner {
    grid-template-columns: 5fr 7fr; /* media left, content right */
    align-items: center;
    gap: clamp(1.25rem, 3.5vw, 3rem);
  }
}
#ap-root {
  /* Media (logo / image) column */
}
#ap-root .ap-hero__media {
  order: 1;
}
@media (max-width: 767.98px) {
  #ap-root .ap-hero__media {
    aspect-ratio: 1.4/1;
  }
}
@media (min-width: 768px) {
  #ap-root .ap-hero__media {
    order: 1;
    height: 100%;
    margin-left: 3rem;
  }
}
#ap-root .ap-hero__media {
  /* Center on mobile for balanced layout */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* allow cropping of the media on narrow viewports */
  /* Background starburst */
  background-image: url("/assets/img/AWM_Starburst_Bg.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#ap-root .ap-hero__media img,
#ap-root .ap-hero__media svg {
  display: block;
  width: 100%;
  height: auto;
  /* max-inline-size: $hero-logo-max; */
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.08));
  transform-origin: center;
  transform: scaleY(1.2) translateY(-8.333%);
  will-change: transform;
}
#ap-root .ap-hero__media {
  /* Reset transforms / sizing on medium+ where the layout changes */
}
@media (min-width: 768px) {
  #ap-root .ap-hero__media img,
  #ap-root .ap-hero__media svg {
    transform: none;
    will-change: auto;
    width: auto;
    height: auto;
    max-width: 100%;
  }
}
#ap-root .ap-hero__media {
  /* Optional: constrain the media box to avoid stretching too tall */
  /* .ap-hero__logo {
    inline-size: 100%;
    max-inline-size: $hero-logo-max;
  } */
}
#ap-root {
  /* Content column */
}
#ap-root .ap-hero__content {
  order: 2;
}
@media (min-width: 768px) {
  #ap-root .ap-hero__content {
    order: 2;
  }
}
#ap-root .ap-hero__content {
  /* Create breathing space on mobile */
  padding-block: 0.25rem;
  /* Narrow the measure for text */
  max-inline-size: 72ch;
  /* Stick to grid by default; provide flex stack for actions */
  display: grid;
  gap: var(--ap-space-4);
}
@media (min-width: 768px) {
  #ap-root .ap-hero__content {
    gap: var(--ap-space-6);
  }
}
#ap-root .ap-hero__eyebrow {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(0.8rem, 0.8vw, 0.9rem);
}
#ap-root .ap-hero__title {
  /* Prefer Tiller for display if available; fall back to system */
  font-family: "Tiller Test", var(--ap-font-sans), serif;
  font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
@media (min-width: 768px) {
  #ap-root .ap-hero__title {
    font-size: clamp(2.25rem, 4vw, 3.25rem);
  }
}
#ap-root .ap-hero__subtitle {
  font-family: "futura", "futura-pt", "Futura LT Pro", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0;
  /* color: color("semantic", "text"); */
  /* fluid: min = 22pt, preferred scaling, max = 32pt */
  font-size: 1.25rem;
}
#ap-root .ap-hero__subtitle b {
  font-weight: 700;
}
#ap-root .ap-hero__subtitle {
  max-inline-size: 65ch;
}
#ap-root .ap-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ap-space-3);
  /* Use shared .ap-btn variants for styling; keep only layout tweaks here */
}
#ap-root .ap-hero__actions .ap-hero__cta {
  /* Intentionally empty to avoid overriding .ap-btn styles */
}
#ap-root {
  /* Responsive layout refinements */
  /* Mobile-first: stack columns (media above content) – already default */
  /* On md and up: place media left, content right; align center handled in container */
  /* Optional landscape tweak: limit hero vertical space */
}
@media (orientation: landscape) {
  #ap-root .ap-hero {
    padding-block: 0;
  }
}
@media (max-width: 767.98px) {
  #ap-root .ap-hero__subtitle {
    text-align: center;
  }
  #ap-root .ap-hero__actions {
    text-align: center;
    display: flex;
    justify-content: center;
  }
}
#ap-root {
  /* Retina-safe crisper background tile (reduce tile size slightly) */
}
/*!
  _hero.scss
  Hero component styles using new section styles

  Expectations:
  - Import `_util.scss` before this file so breakpoint tokens/mixins are available.
  - Uses CSS custom properties defined in the main tokens (e.g., --ap-color-*, --ap-space-*, --ap-max-width).
  - Uses the new section styles from `components/sections/_sections.scss`
*/
/*!
  main.scss
  Entry point for the custom single page integrated into WordPress.

  Goals:
  - Keep all rules scoped under #ap-root to avoid conflicts with the active theme.
  - Provide a minimal reset, variables, and a small set of components.
  - Be production-friendly but easy to iterate during local preview.
*/
/*!
  _about_the_exhibit.scss
  About the Exhibit section component

  Purpose:
  - Purple section with a reusable title
  - Two image+text items
  - Mobile: title, image, text, image, text
  - Desktop: title, then two columns; LEFT column shows text above image

  Usage markup (example):
    <section class="ap-section ap-section--purple ap-exhibit">
      <div class="ap-section__inner">
        <h2 class="ap-section__title">About the Exhibit</h2>

        <div class="ap-exhibit__grid">
          <article class="ap-exhibit__item">
            <div class="ap-exhibit__media">
              <img src="/assets/img/exhibit1.jpg" alt="Exhibit 1" />
            </div>
            <div class="ap-exhibit__body u-prose">
              <p>Paragraphs describing exhibit 1...</p>
            </div>
          </article>

          <article class="ap-exhibit__item">
            <div class="ap-exhibit__media">
              <img src="/assets/img/exhibit2.jpg" alt="Exhibit 2" />
            </div>
            <div class="ap-exhibit__body u-prose">
              <p>Paragraphs describing exhibit 2...</p>
            </div>
          </article>
        </div>
      </div>
    </section>

  Title color:
  - By default, .ap-section__title uses `--section-title-color` falling back to `--section-color`.
  - Override per instance, e.g.:
      <section class="ap-section ap-section--purple ap-exhibit" style="--section-title-color: #ffd966;">
        ...
      </section>
*/
/* Tunables (override if needed before import) */
#ap-root {
  /* Root wrapper specific to this section; combine with `.ap-section ap-section--purple` */
}
#ap-root .ap-exhibit {
  /* Optional: refine default title spacing inside this section */
}
#ap-root .ap-exhibit .ap-section__title {
  margin-bottom: var(--ap-space-6, 1.5rem);
  /* color comes from --section-title-color (set in components/_sections.scss) */
}
#ap-root {
  /* Grid holding the two exhibit items */
}
#ap-root .ap-exhibit__grid {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: var(--ap-space-8);
}
@media (min-width: 768px) {
  #ap-root .ap-exhibit__grid {
    gap: var(--ap-space-12);
    align-items: start;
  }
}
#ap-root {
  /* Each item stacks media then text on mobile.
     On desktop, the FIRST item in the grid shows text above media. */
}
#ap-root .ap-exhibit__item {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-4);
  /* Default order: mobile -> image (1), text (2) */
}
#ap-root .ap-exhibit__item .ap-exhibit__media {
  order: 1;
}
#ap-root .ap-exhibit__item .ap-exhibit__body {
  order: 2;
}
@media (min-width: 768px) {
  #ap-root .ap-exhibit__item {
    /* Horizontal layout per item on md+ */
    flex-direction: row;
    align-items: stretch;
    gap: var(--ap-space-12);
  }
  #ap-root .ap-exhibit__item .ap-exhibit__body,
  #ap-root .ap-exhibit__item .ap-exhibit__media {
    flex: 1 1 50%;
    min-width: 0;
  }
  #ap-root .ap-exhibit__item {
    /* Orientation modifiers: choose which side text appears on */
  }
  #ap-root .ap-exhibit__item.ap-exhibit__item--text-left .ap-exhibit__body {
    order: 1;
  }
  #ap-root .ap-exhibit__item.ap-exhibit__item--text-left .ap-exhibit__media {
    order: 2;
  }
  #ap-root .ap-exhibit__item.ap-exhibit__item--text-right .ap-exhibit__body {
    order: 2;
  }
  #ap-root .ap-exhibit__item.ap-exhibit__item--text-right .ap-exhibit__media {
    order: 1;
  }
}
#ap-root {
  /* Media styles */
}
#ap-root .ap-exhibit__media img,
#ap-root .ap-exhibit__media picture,
#ap-root .ap-exhibit__media video {
  display: block;
  width: 100%;
  height: auto;
  /* Remove rounded corners and drop shadow; use a strong black frame */
  border: 3px solid #000000;
  border-radius: 0;
  box-shadow: none;
}
#ap-root {
  /* Text styles */
}
#ap-root .ap-exhibit__body {
  /* Use slightly softer text color on colorful backgrounds for body copy */
  color: color-mix(in srgb, var(--section-color) 92%, black 8%);
  max-width: 70ch;
}
#ap-root .ap-exhibit__body > * + * {
  margin-top: var(--ap-space-3);
}
#ap-root .ap-exhibit__body {
  /* Lists: single column on mobile; split into two columns on desktop */
}
#ap-root .ap-exhibit__body ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
  column-gap: var(--ap-space-5, 1.25rem);
  column-count: 1;
}
@media (min-width: 768px) {
  #ap-root .ap-exhibit__body ul {
    column-count: 2;
  }
}
#ap-root .ap-exhibit__body ul.single-column {
  column-count: 1;
}
#ap-root .ap-exhibit__body ul {
  /* Prevent awkward breaks inside columns */
}
#ap-root .ap-exhibit__body ul li {
  break-inside: avoid;
}
#ap-root {
  /* Space between the title and grid (if title is present) */
}
#ap-root .ap-section__title + .ap-exhibit__grid {
  margin-top: var(--ap-space-2);
}

/* Storytellers hooks: minimal placeholders for overrides & small tweaks
   These selectors are intentionally lightweight — they provide hook points
   for the storytellers section CSS (imported from sections/storytellers) to
   override or extend layout without touching component styles directly. */
/*!
  main.scss
  Entry point for the custom single page integrated into WordPress.

  Goals:
  - Keep all rules scoped under #ap-root to avoid conflicts with the active theme.
  - Provide a minimal reset, variables, and a small set of components.
  - Be production-friendly but easy to iterate during local preview.
*/
/*!
  _storytellers.scss
  Styles for the "Storytellers" section

  - Designed to work with the site's section system (uses .ap-section / .ap-section__inner)
  - Provides layout for:
    - Top slider row
    - Intro/title block
    - Two-column image + text body
    - Bottom slider row
  - Responsive behavior:
    - Mobile: stacked layout (media above body), sliders configured for mobile slides
    - Desktop (md+): image left (40%), text right (60%), sliders show more items
*/
#ap-root {
  /* Scoped rules for the storytellers section */
}
#ap-root .ap-storytellers {
  /* Ensure the section uses the white background variant in markup; keep lightweight styling here */
  background: var(--ap-color-bg);
  color: var(--ap-color-text);
  /* Top & bottom slider rows — make sure sliders have slightly tighter gap inside this section */
}
#ap-root .ap-storytellers__top, #ap-root .ap-storytellers__bottom {
  /* margin-block-start: var(--ap-space-4); */
  /* margin-block-end: var(--ap-space-4); */
  /* If the included slider component uses CSS variables we can nudge them here */
}
#ap-root .ap-storytellers__top .ap-slider, #ap-root .ap-storytellers__bottom .ap-slider {
  --slider-gap: 0.5rem;
  /* Slightly larger slides on large screens handled by slider defaults */
}
#ap-root .ap-storytellers {
  /* Intro/title */
}
#ap-root .ap-storytellers__intro {
  text-align: center;
  margin-block: var(--ap-space-4);
}
#ap-root .ap-storytellers__intro .ap-section__title {
  margin: 0 auto;
  max-width: 90ch;
}
#ap-root .ap-storytellers {
  /* Main content: image left, text right on desktop; stacked on mobile */
}
#ap-root .ap-storytellers__content {
  display: grid;
  gap: var(--ap-space-6);
  grid-template-columns: 1fr;
  align-items: start;
  margin-top: var(--ap-space-4);
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  /* Constrain the media so it doesn't become too tall on wide viewports */
}
#ap-root .ap-storytellers__content > .ap-storytellers__media {
  width: 100%;
  display: block;
}
#ap-root .ap-storytellers__content > .ap-storytellers__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}
#ap-root .ap-storytellers__content > .ap-storytellers__body {
  /* Use the site's prose utility for readable measure */
}
#ap-root .ap-storytellers__content > .ap-storytellers__body .u-prose p + p {
  margin-top: var(--ap-space-3);
}
#ap-root .ap-storytellers__content > .ap-storytellers__body .u-prose {
  /* first paragraph should be bold (lead) */
}
#ap-root .ap-storytellers__content > .ap-storytellers__body .u-prose p:first-of-type {
  font-weight: 700;
}
#ap-root .ap-storytellers__content > .ap-storytellers__body .u-prose {
  /* smaller muted paragraph at the end */
}
#ap-root .ap-storytellers__content > .ap-storytellers__body .u-prose p:last-of-type {
  margin-top: var(--ap-space-3);
  font-size: 0.9rem;
  color: var(--ap-color-muted);
  line-height: 1.4;
}
#ap-root .ap-storytellers__content {
  /* Desktop: two-column split */
}
@media (min-width: 768px) {
  #ap-root .ap-storytellers__content {
    grid-template-columns: 30% 65%;
    gap: var(--ap-space-8);
  }
  #ap-root .ap-storytellers__content > .ap-storytellers__media {
    /* Make sure image covers the left column without forcing a fixed height */
  }
  #ap-root .ap-storytellers__content > .ap-storytellers__media img {
    width: 100%;
    height: auto;
  }
}
#ap-root .ap-storytellers {
  /* Small layout/responsive helpers so sliders don't touch the page edges */
}
#ap-root .ap-storytellers__top, #ap-root .ap-storytellers__bottom {
  /* Keep sliders full width but ensure inner padding via the section inner wrapper */
}
#ap-root .ap-storytellers__top .ap-slider__viewport, #ap-root .ap-storytellers__bottom .ap-slider__viewport {
  /* The slider component already adds padding-inline half-gap; we ensure visual balance here */
  padding-inline: 0;
}
#ap-root .ap-storytellers {
  /* Accessibility: ensure keyboard focus on slider controls is visible in this section */
}
#ap-root .ap-storytellers .ap-slider__nav:focus {
  /* outline: 3px solid
    color-mix(in srgb, var(--ap-color-primary) 70%, #fff 30%);
  outline-offset: 3px; */
}

/* Respect reduced motion preference */
/* @media (prefers-reduced-motion: reduce) {
  #ap-root {
    .ap-storytellers {
      .ap-slider__track {
        transition: none !important;
      }
    }
  }
} */
/*!
  main.scss
  Entry point for the custom single page integrated into WordPress.

  Goals:
  - Keep all rules scoped under #ap-root to avoid conflicts with the active theme.
  - Provide a minimal reset, variables, and a small set of components.
  - Be production-friendly but easy to iterate during local preview.
*/
/*!
  _museum_info.scss
  Styles for the Museum Info section

  - White background section with a title and a list of items (image + text)
  - Desktop: two-column layout; odd items image left, even items image right
  - Mobile: stacked column with image on top
  - Scoped under #ap-root to avoid leaking styles into global scope
*/
#ap-root .ap-museum-info {
  /* Section-level spacing is controlled by the section system; keep here minimal */
  color: var(--ap-color-text);
  background: var(--ap-color-bg);
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
#ap-root .ap-museum-info .ap-section__title {
  margin-bottom: var(--ap-space-4);
}
#ap-root .ap-museum-info {
  /* List wrapper */
}
#ap-root .ap-museum-info__list {
  display: grid;
  gap: var(--ap-space-6);
  margin-top: var(--ap-space-4);
}
#ap-root .ap-museum-info {
  /* Individual item */
}
#ap-root .ap-museum-info .ap-museum-item {
  display: grid;
  gap: var(--ap-space-4);
  grid-template-columns: 1fr;
  align-items: start;
  width: 100%;
}
#ap-root .ap-museum-info .ap-museum-item__media {
  width: 100%;
}
#ap-root .ap-museum-info .ap-museum-item__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  border: 3px solid #000000;
}
#ap-root .ap-museum-info .ap-museum-item__body {
  /* keep readable measure within the body */
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#ap-root .ap-museum-info .ap-museum-item__body h3 {
  margin-top: 0;
  margin-bottom: var(--ap-space-3);
  font-weight: 700;
  line-height: 1.15;
  font-size: var(--ap-fs-xl);
  text-transform: uppercase;
}
#ap-root .ap-museum-info .ap-museum-item__body p {
  margin: 0 0 var(--ap-space-3);
}
#ap-root .ap-museum-info .ap-museum-item__body em {
  /* Emphasis inside museum info bodies should be violet, bold, and non-italic */
  font-style: normal;
  font-weight: 700;
  color: var(--ap-color-primary);
}
#ap-root .ap-museum-info {
  /* Desktop layout: two-column grid and alternating image position */
}
@media (min-width: 768px) {
  #ap-root .ap-museum-info .ap-museum-item {
    grid-template-columns: 1fr 1fr;
    gap: var(--ap-space-8);
    align-items: center;
    /* When the modifier is present, swap the order so media appears on the right */
  }
  #ap-root .ap-museum-info .ap-museum-item.ap-museum-item--reverse .ap-museum-item__media {
    order: 2;
  }
  #ap-root .ap-museum-info .ap-museum-item.ap-museum-item--reverse .ap-museum-item__body {
    order: 1;
  }
  #ap-root .ap-museum-info .ap-museum-item {
    /* Ensure media column doesn't collapse: let it size naturally but limit height */
  }
  #ap-root .ap-museum-info .ap-museum-item .ap-museum-item__media img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
  }
}
#ap-root .ap-museum-info {
  /* Small accessibility & interaction niceties */
}
#ap-root .ap-museum-info .ap-museum-item :focus {
  outline: 3px solid var(--ap-color-focus);
  outline-offset: 3px;
}

/*!
  main.scss
  Entry point for the custom single page integrated into WordPress.

  Goals:
  - Keep all rules scoped under #ap-root to avoid conflicts with the active theme.
  - Provide a minimal reset, variables, and a small set of components.
  - Be production-friendly but easy to iterate during local preview.
*/
/*!
  _buttons.scss
  Reusable button tokens & utility classes for the project.

  - Provides `.ap-btn` base class and outline modifiers:
      - `.ap-btn--primary` (primary outline)
      - `.ap-btn--black`   (black outline)
      - `.ap-btn--white`   (white outline)
      - `.ap-btn--block`   (full-width)
  - Focus styles use the runtime `--ap-color-focus` token for accessibility.
  - Colors reference the project's canonical color function from base config.
*/
/* Tunables (overrideable if you import this file from another partial) */
/* slightly tighter bottom padding for uppercase text */
/* Color helpers (use base.color so tokens remain authoritative) */
/* Base button */
.ap-btn, .ap-btn--white, .ap-btn--black, .ap-btn--outline, .ap-btn--ghost, .ap-btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.25rem 1rem 0.2rem;
  border-radius: var(--ap-radius, 6px);
  font-family: "tiller", serif;
  font-weight: 700;
  font-size: 1.375rem;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out, transform 120ms ease;
  border: 2px solid transparent;
  color: #29102e;
  background: transparent;
  /* Make buttons behave like links for keyboard users */
}
.ap-btn:disabled, .ap-btn--white:disabled, .ap-btn--black:disabled, .ap-btn--outline:disabled, .ap-btn--ghost:disabled, .ap-btn--primary:disabled, .ap-btn[aria-disabled=true], [aria-disabled=true].ap-btn--white, [aria-disabled=true].ap-btn--black, [aria-disabled=true].ap-btn--outline, [aria-disabled=true].ap-btn--ghost, [aria-disabled=true].ap-btn--primary {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.ap-btn, .ap-btn--white, .ap-btn--black, .ap-btn--outline, .ap-btn--ghost, .ap-btn--primary {
  /* Focus ring - prefer browser :focus-visible where available */
}
.ap-btn:focus-visible, .ap-btn--white:focus-visible, .ap-btn--black:focus-visible, .ap-btn--outline:focus-visible, .ap-btn--ghost:focus-visible, .ap-btn--primary:focus-visible {
  /* outline: 3px solid
    var(--ap-color-focus, #b93f98); */
  outline-offset: 3px;
}
.ap-btn, .ap-btn--white, .ap-btn--black, .ap-btn--outline, .ap-btn--ghost, .ap-btn--primary {
  /* Block / full width */
}
.ap-btn.ap-btn--block, .ap-btn--block.ap-btn--white, .ap-btn--block.ap-btn--black, .ap-btn--block.ap-btn--outline, .ap-btn--block.ap-btn--ghost, .ap-btn--block.ap-btn--primary, .ap-btn.ap-btn--full, .ap-btn--full.ap-btn--white, .ap-btn--full.ap-btn--black, .ap-btn--full.ap-btn--outline, .ap-btn--full.ap-btn--ghost, .ap-btn--full.ap-btn--primary {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

/* Primary outline CTA */
.ap-btn--primary {
  background: transparent;
  color: var(--ap-color-primary, #b93f98);
  border-color: var(--ap-color-primary, #b93f98);
  /* no box-shadow for outline */
}
.ap-btn--primary:hover, .ap-btn--primary:focus {
  /* no background change */
  color: white !important;
  background-color: var(--ap-color-primary, #b93f98);
}
.ap-btn--primary {
  /* active state keeps outline only */
}
.ap-btn--primary {
  /* inverse no longer applicable for outlines */
}
.ap-btn--primary.ap-btn--inverse {
  /* deprecated */
}

/* Ghost / outlined button */
.ap-btn--ghost {
  background: transparent;
  color: #b93f98;
  border-color: #b93f98;
}
.ap-btn--ghost:hover, .ap-btn--ghost:focus {
  /* no background change */
}

/* Subtle outline variant (neutral) */
.ap-btn--outline {
  background: transparent;
  color: #29102e;
  border-color: #c2c2c2;
}
.ap-btn--outline:hover, .ap-btn--outline:focus {
  /* no background change */
}

/* Small / large size variants */
.ap-btn--sm {
  padding: 0.15rem 0.75rem 0.12rem;
  font-size: 0.9em;
}

.ap-btn--lg {
  padding: 0.2875rem 1.25rem 0.23rem;
  font-size: 1.125em;
}

/* Utility: icon-only circular button */
.ap-btn--icon {
  padding: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
}

/* Small accessibility helper: visible focus for mouse users when 'ap-focus-visible' polyfill present */
.ap-focus-visible .ap-btn:focus, .ap-focus-visible .ap-btn--white:focus, .ap-focus-visible .ap-btn--black:focus, .ap-focus-visible .ap-btn--primary:focus, .ap-focus-visible .ap-btn--ghost:focus, .ap-focus-visible .ap-btn--outline:focus {
  /* outline: 3px solid var(--ap-color-focus, #b93f98);
  outline-offset: 3px; */
}

/* Black and white outline variants */
.ap-btn--black {
  background: transparent;
  color: #000;
  border-color: #000;
}
.ap-btn--black:hover, .ap-btn--black:focus {
  background: #fff;
  color: #b93f98;
  border-color: #fff;
}

.ap-btn--white {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.ap-btn--white:hover, .ap-btn--white:focus {
  background: #fff;
  color: #b93f98;
}

/* Slightly smaller buttons under 1000px */
@media (max-width: 1000px) {
  .ap-btn, .ap-btn--primary, .ap-btn--ghost, .ap-btn--outline, .ap-btn--black, .ap-btn--white {
    padding: calc(0.25rem * 0.85) calc(1rem * 0.9) calc(0.25rem * 0.85 * 0.8);
    font-size: 1.25rem;
    width: 100%;
    max-width: 400px;
  }
  .ap-btn--sm {
    /* Match the regular .ap-btn sizing on narrow screens so "small" buttons
       are not visually smaller on mobile. */
    padding: calc(0.25rem * 0.85) calc(1rem * 0.9) calc(0.25rem * 0.85 * 0.8);
    font-size: 1.25rem;
  }
  .ap-btn--lg {
    padding: 0.2625rem 1.15rem 0.21rem;
    font-size: 1.05em;
  }
}
/* awmamericanprophets.org/src/scss/components/icons/_arrow.scss
   Inline SVG Arrow Icon styles

   Goals:
   - Style and animate the inline SVG arrow (left/right) via currentColor
   - Provide CSS custom properties to control colors and transitions
   - Support hover/active/focus-visible states and disabled semantics
   - Keep it lightweight and composable (works in buttons, links, etc.)

   Usage:
   - The SVG emitted by arrow.twig uses:
       class="ap-icon ap-icon--arrow ap-icon--arrow-left"
     or:
       class="ap-icon ap-icon--arrow ap-icon--arrow-right"
   - Color is controlled by the 'color' property on the element (currentColor).
     You can set:
       --ap-icon-color           Base color (defaults to currentColor)
       --ap-icon-hover-color     Hover/focus color (optional)
       --ap-icon-active-color    Active/pressed color (optional)
       --ap-icon-transition      Transition duration (e.g., 200ms)
       --ap-icon-ease            Transition easing (e.g., ease-out)
       --ap-icon-size            Size for width/height (e.g., 55px)
   - Example:
       .my-button .ap-icon--arrow {
         --ap-icon-color: #fff;
         --ap-icon-hover-color: #ffd54d;
         --ap-icon-active-color: #ffb300;
         --ap-icon-size: 55px;
       }
*/
.ap-icon {
  /* Size controlled by CSS variable; falls back to intrinsic or author-provided width/height */
  width: var(--ap-icon-size, auto);
  height: var(--ap-icon-size, auto);
  /* Default to white (#fff); override via --ap-icon-color or parent color */
  color: var(--ap-icon-color, #fff);
  display: inline-block;
  vertical-align: middle;
  /* Smooth color transitions (affects fill/stroke because they use currentColor) */
  transition: color var(--ap-icon-transition, 200ms) var(--ap-icon-ease, ease), opacity var(--ap-icon-transition, 200ms) var(--ap-icon-ease, ease), transform var(--ap-icon-transition, 200ms) var(--ap-icon-ease, ease);
}

/* Arrow-specific controls */
.ap-icon--arrow {
  /* Ensure inner shapes respond smoothly when color changes */
  /* Note: The SVG uses currentColor for fill/stroke; these transitions animate that change */
}
.ap-icon--arrow circle,
.ap-icon--arrow path {
  transition: stroke var(--ap-icon-transition, 200ms) var(--ap-icon-ease, ease), fill var(--ap-icon-transition, 200ms) var(--ap-icon-ease, ease);
}
.ap-icon--arrow {
  /* State colors — controlled entirely via variables for flexibility */
}
.ap-icon--arrow:hover, .ap-icon--arrow:focus {
  /* Keep stroke color from base by default */
  color: var(--ap-icon-color, #fff);
  /* Subtle motion */
  transform: scale(var(--ap-icon-hover-scale, 1.05));
  /* Hover/focus defaults: arrow path purple, circle fill white */
}
.ap-icon--arrow:hover path, .ap-icon--arrow:focus path {
  fill: var(--ap-icon-hover-path-fill, #6a2ca0);
}
.ap-icon--arrow:hover circle, .ap-icon--arrow:focus circle {
  fill: var(--ap-icon-hover-circle-fill, #fff);
}
.ap-icon--arrow:active {
  color: var(--ap-icon-active-color, var(--ap-icon-hover-color, var(--ap-icon-color, currentColor)));
}
.ap-icon--arrow {
  /* Keyboard focus ring while keeping clean visuals */
}
.ap-icon--arrow:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.18);
  outline-offset: 3px;
}
.ap-icon--arrow {
  /* Disabled semantics (e.g., on slider nav buttons) */
}
.ap-icon--arrow[aria-disabled=true], .ap-icon--arrow:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Left/Right variants are present for semantics; rotation is applied in the SVG itself */
.ap-icon--arrow-left,
.ap-icon--arrow-right {
  /* Hint to render with precision for crisp strokes */
  shape-rendering: geometricPrecision;
}

/* Respect reduced motion user preference */
@media (prefers-reduced-motion: reduce) {
  /* .ap-icon,
  .ap-icon--arrow circle,
  .ap-icon--arrow path {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  } */
}
/* Example integration with slider navs:
   You can scope colors to the control for hover/active states without touching the component:

   .ap-slider__nav .ap-icon--arrow {
     --ap-icon-color: #fff;
     --ap-icon-hover-color: #ffe082;
     --ap-icon-active-color: #ffd54f;
     --ap-icon-size: 55px;
   }
*/
/*!
  main.scss
  Entry point for the custom single page integrated into WordPress.

  Goals:
  - Keep all rules scoped under #ap-root to avoid conflicts with the active theme.
  - Provide a minimal reset, variables, and a small set of components.
  - Be production-friendly but easy to iterate during local preview.
*/
/* -----------------------------------------------------------------------------
   _programs.scss
   Styles for program cards and the upcoming programs section.

   - .ap-upcoming-programs (section wrapper)
   - .ap-program-card (individual cards)
   - Responsive grid for up to 3 columns
   - Compatible with the slider markup (ap-slider) when cards are inside a carousel
----------------------------------------------------------------------------- */
/* Tunables (override before importing if you need different defaults) */
/* Color tokens derived from the canonical palette / semantic map */
/* -----------------------------------------------------------------------------
   Section wrapper: upcoming programs (uses .ap-section variants for background)
   - When used with `.ap-section--logo` the section title color is controlled via
     --section-title-color / --section-color etc.
----------------------------------------------------------------------------- */
.ap-upcoming-programs {
  /* Make sure title and intro are readable on logo backgrounds */
}
.ap-upcoming-programs .ap-section__title {
  margin-bottom: var(--ap-space-4);
  text-align: center;
  /* Allow a runtime override via CSS custom property (set on the section) */
  color: var(--section-title-color, var(--section-color, #fff));
}
.ap-upcoming-programs .ap-upcoming-programs__intro {
  margin: 0 auto var(--ap-space-6);
  text-align: center;
  color: var(--section-color, #fff);
  max-width: 60ch;
}
.ap-upcoming-programs {
  /* Grid fallback when not using the slider */
}
.ap-upcoming-programs .ap-programs-grid {
  display: grid;
  gap: var(--ap-space-6);
  margin-top: var(--ap-space-4);
  /* Mobile-first: single column */
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .ap-upcoming-programs .ap-programs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .ap-upcoming-programs .ap-programs-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.ap-upcoming-programs .ap-programs-grid .ap-programs-grid__item {
  /* Ensure cards stretch to same height in grid */
  display: flex;
}
.ap-upcoming-programs .ap-programs-grid .ap-programs-grid__item .ap-program-card {
  height: 100%;
}
.ap-upcoming-programs {
  /* When used inside the site slider, ensure slides and cards are full-width */
}
.ap-upcoming-programs .ap-slider__slide {
  display: flex;
  align-items: stretch;
}
@media (min-width: 768px) {
  .ap-upcoming-programs .ap-slider__slide {
    height: 100%;
  }
}
.ap-upcoming-programs .ap-slider__slide .ap-program-card {
  width: 100%;
}
@media (min-width: 768px) {
  .ap-upcoming-programs .ap-slider__slide .ap-program-card {
    height: 100%;
  }
}

/* -----------------------------------------------------------------------------
   Program Card
   - Visual: light purple background, black text, rounded corners
   - Layout: badge at top overlapping the card (visually prominent), then header + body
----------------------------------------------------------------------------- */
.ap-program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #e1b9d7;
  color: #000000;
  border-radius: 12px;
  padding: 1.125rem;
  overflow: visible;
  box-sizing: border-box;
  /* Provide a small subtle border to separate from similarly-colored backgrounds */
  border: none;
}
.ap-program-card__inner {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-3);
  flex: 1 1 auto;
  text-align: center;
  justify-content: space-between;
}
.ap-program-card {
  /* Date / Time badge (visually sits partly over the top edge of the card)
     - Rendered as a sibling inside the card so we can absolutely position it.
  */
}
.ap-program-card__badge {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 0;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  background: #b93f98;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  z-index: 2;
  white-space: nowrap;
  text-transform: uppercase;
}
.ap-program-card {
  /* Header: title + presenters */
}
.ap-program-card__header {
  flex-direction: column;
  padding-top: calc(var(--ap-space-3) + 0.6rem); /* leave space for badge overlap */
}
.ap-program-card__title {
  margin: 0 0 var(--ap-space-2);
  font-size: clamp(1.35rem, 3vw, 2rem);
  text-transform: uppercase;
  line-height: 1.15;
  font-weight: 800;
  color: #000000;
  font-style: italic;
}
.ap-program-card__presenters {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #b93f98;
  opacity: 1;
  margin-bottom: var(--ap-space-2);
  letter-spacing: -0.01em;
  text-align: center;
  display: inline;
}
.ap-program-card__presenters > div {
  display: inline;
}
.ap-program-card__presenters > div:not(:last-child)::after {
  content: " • ";
  margin: 0 0.25em;
}
.ap-program-card__subtitle {
  margin-bottom: var(--ap-space-2);
  font-style: italic;
}
.ap-program-card__body {
  /* descriptive text */
}
.ap-program-card__body .ap-program-card__description {
  margin: 0;
  color: #000000;
  line-height: 125%;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.ap-program-card__body .ap-program-card__description::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
.ap-program-card__body .ap-program-card__description p {
  margin: 0 0 var(--ap-space-3);
}
.ap-program-card__body .ap-program-card__description a {
  color: color-mix(in srgb, #000000 80%, var(--section-color, #000) 20%);
  text-decoration: underline;
}
.ap-program-card__body > .ap-program-card__meta {
  margin-top: auto;
  font-size: 0.9rem;
  color: #919191;
}
.ap-program-card__body .ap-program-card__location {
  display: inline-block;
  padding-top: var(--ap-space-2);
  color: #000000;
  opacity: 0.85;
}
.ap-program-card {
  /* Link overlay */
}
.ap-program-card__link {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex: 1 1 auto;
  height: auto;
  /* Make sure focus on link shows visible outline */
}
.ap-program-card__link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--section-title-color, var(--section-color, #fff)) 70%, #000 30%);
  outline-offset: 4px;
}
.ap-program-card {
  /* Ensure focus states are accessible */
}
.ap-program-card:focus-within {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.ap-program-card {
  /* Card sizing helpers for slider mode: let them expand vertically while keeping shape */
}
@media (max-width: 479.98px) {
  .ap-program-card {
    border-radius: 10px;
  }
}

/* -----------------------------------------------------------------------------
   Utilities and responsive tweaks
----------------------------------------------------------------------------- */
/* When many program cards exist and a slider is used on desktop, hide the badge overlap
   from clipping by ensuring slider viewport doesn't hide overflow (the slider's viewport
   already has overflow hidden, but the badge visually should not be clipped by adjacent slides).
*/
.ap-slider .ap-program-card {
  /* Make sure badge doesn't get clipped by overflow on the track itself; z-index handles most cases. */
  z-index: 1;
}

/* Program CTA buttons: white text and border in programs context */
.ap-program-card__cta .ap-btn.ap-btn--outline {
  color: #fff;
  border-color: #fff;
}

/* Slider variant used for programs: ensure equal-height slides and space above for badge overlap */
.ap-programs-slider {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.ap-programs-slider .ap-slider__viewport {
  padding-top: 1.25rem;
}
.ap-programs-slider .ap-slider__track {
  align-items: stretch;
}
.ap-programs-slider .ap-slider__slide {
  display: flex;
  align-items: stretch;
}
.ap-programs-slider .ap-slider__slide .ap-program-card {
  min-height: 100%;
}
.ap-programs-slider {
  /* Center navigation below the slides for programs */
}
.ap-programs-slider .ap-slider__nav-wrapper {
  display: flex;
  justify-content: center;
  gap: var(--ap-space-3, 0.75rem);
  margin-top: 1rem;
}
.ap-programs-slider {
  /* Override default overlay arrows to be inline under the slider */
}
.ap-programs-slider .ap-slider__nav {
  position: static;
  transform: none;
}
.ap-programs-slider {
  /* Re-enable horizontal slider behavior and show arrows on mobile */
}
@media (max-width: 767.98px) {
  .ap-programs-slider .ap-slider__nav {
    display: inline-flex !important;
  }
  .ap-programs-slider .ap-slider__viewport {
    overflow: hidden !important;
    padding-inline: calc(var(--gap) / 2) !important;
  }
  .ap-programs-slider .ap-slider__track {
    flex-direction: row !important;
    transform: translateX(0); /* JS will manage transform */
    transition: transform 500ms ease-in-out !important;
  }
  .ap-programs-slider .ap-slider__slide {
    flex: 0 0 calc((100% - (var(--slides) - 1) * var(--gap)) / var(--slides)) !important;
    max-width: none !important;
    height: auto;
  }
  .ap-programs-slider .ap-slider__slide .ap-program-card {
    height: 100% !important;
    min-height: 100% !important;
  }
}

/*!
  main.scss
  Entry point for the custom single page integrated into WordPress.

  Goals:
  - Keep all rules scoped under #ap-root to avoid conflicts with the active theme.
  - Provide a minimal reset, variables, and a small set of components.
  - Be production-friendly but easy to iterate during local preview.
*/
/*
  _press.scss
  Styles for the "Press" section.

  - Reuses the `.ap-btn` utilities from components/_buttons.scss
  - Minimal, centered layout: title, subtitle and a CTA button
  - Colors adapt to the section variant via CSS custom properties:
      --section-bg, --section-color, --section-title-color
  - Scoped under #ap-root to avoid leaking styles
 */
#ap-root .ap-press {
  /* Respect per-section color tokens when the section is a variant (e.g. ap-section--purple) */
  /* Section inner wrapper spacing */
}
#ap-root .ap-press {
  /* Visual wrapper to center content and cap width */
}
#ap-root .ap-press__wrap {
  max-width: 90ch;
  margin-inline: auto;
  text-align: center;
  padding-inline: var(--ap-container-pad-x);
}
#ap-root .ap-press {
  /* Title (uses the shared section title class; we only provide small overrides) */
}
#ap-root .ap-press .ap-section__title {
  margin-bottom: var(--ap-space-3);
  letter-spacing: -0.02em;
}
#ap-root .ap-press {
  /* Subtitle text below title */
}
#ap-root .ap-press__subtitle {
  margin: 0 auto var(--ap-space-4);
  max-width: 70ch;
  /* Use typical sizing for readable copy, but slightly larger on desktop */
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.4;
}
#ap-root .ap-press {
  /* CTA wrapper to control spacing and alignment */
}
#ap-root .ap-press__cta {
  margin-top: var(--ap-space-3);
  /* The button itself uses the reusable `.ap-btn` classes.
      Provide a small size variant for the press CTA by default. */
}
#ap-root .ap-press__cta .ap-btn {
  min-width: 11rem;
  padding-inline: 1.25rem;
}
#ap-root .ap-press__cta {
  /* Preset outline button style to use the section text color so it contrasts on colored sections */
}
#ap-root .ap-press__cta .ap-btn.ap-btn--outline {
  background: transparent;
}
#ap-root .ap-press__cta .ap-btn.ap-btn--outline:hover,
#ap-root .ap-press__cta .ap-btn.ap-btn--outline:focus {
  background: color-mix(in srgb, var(--section-color, var(--ap-color-text)) 8%, transparent 92%);
}
#ap-root .ap-press__cta {
  /* On very small screens make the CTA block-level for easier tapping */
}
@media (max-width: 479.98px) {
  #ap-root .ap-press__cta .ap-btn {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }
}
#ap-root .ap-press {
  /* Focus style: ensure the CTA is obvious when focused */
}
#ap-root .ap-press .ap-btn:focus-visible {
  /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); */
}
#ap-root {
  /* Respect reduced motion */
}

/*!
  main.scss
  Entry point for the custom single page integrated into WordPress.

  Goals:
  - Keep all rules scoped under #ap-root to avoid conflicts with the active theme.
  - Provide a minimal reset, variables, and a small set of components.
  - Be production-friendly but easy to iterate during local preview.
*/
/*
  _links.scss
  Styles for the Links strip section (social + subscribe)
  - Scoped under #ap-root and .ap-links
  - Uses section custom properties: --section-bg, --section-color, --section-border-color
  - Responsive: two-column layout on desktop, stacked on mobile
  - Reuses .ap-btn utilities for CTA
*/
#ap-root .ap-links {
  /* Section colors come from the section variant (e.g. ap-section--black) */
  background: var(--section-bg, var(--ap-color-bg));
  color: var(--section-color, #fff);
  padding-block: var(--ap-space-4);
  border-top: 3px solid var(--section-border-color, var(--ap-color-primary));
  border-bottom: 3px solid var(--section-border-color, var(--ap-color-primary));
}
#ap-root .ap-links .ap-section__inner {
  padding-inline: var(--ap-container-pad-x);
}
#ap-root .ap-links__wrap {
  max-width: var(--ap-max-width, 1200px);
  margin-inline: auto;
  width: 100%;
}
#ap-root .ap-links {
  /* Grid: social | divider | subscribe */
}
#ap-root .ap-links__grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: var(--ap-space-6);
  align-items: center;
  width: 100%;
}
#ap-root .ap-links {
  /* Social column */
}
#ap-root .ap-links__social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ap-space-3);
  justify-content: center;
  color: var(--section-color, #fff);
}
#ap-root .ap-links__social .ap-links__icons {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
#ap-root .ap-links__social .ap-links__icon {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: color var(--ap-icon-transition, 200ms) var(--ap-icon-ease, ease), transform var(--ap-icon-transition, 200ms) var(--ap-icon-ease, ease);
  background: transparent;
}
#ap-root .ap-links__social .ap-links__icon svg {
  display: block;
}
#ap-root .ap-links__social .ap-links__icon {
  /* Smooth inner shape transitions like arrow icons */
}
#ap-root .ap-links__social .ap-links__icon svg circle,
#ap-root .ap-links__social .ap-links__icon svg path {
  transition: stroke var(--ap-icon-transition, 200ms) var(--ap-icon-ease, ease), fill var(--ap-icon-transition, 200ms) var(--ap-icon-ease, ease);
}
#ap-root .ap-links__social .ap-links__icon:hover, #ap-root .ap-links__social .ap-links__icon:focus {
  transform: scale(var(--ap-icon-hover-scale, 1.05));
  /* Match arrow hover: purple interior, white circle */
}
#ap-root .ap-links__social .ap-links__icon:hover svg path, #ap-root .ap-links__social .ap-links__icon:focus svg path {
  fill: var(--ap-icon-hover-path-fill, #6a2ca0);
}
#ap-root .ap-links__social .ap-links__icon:hover svg circle, #ap-root .ap-links__social .ap-links__icon:focus svg circle {
  fill: var(--ap-icon-hover-circle-fill, #fff);
}
#ap-root .ap-links__social .ap-links__share {
  margin: 0;
  color: var(--section-color, #fff);
  /* font-size: 0.95rem; */
}
#ap-root .ap-links {
  /* Divider */
}
#ap-root .ap-links__divider {
  width: 1px;
  height: 56px;
  background: var(--section-border-color, var(--ap-color-primary));
  justify-self: center;
  margin-inline: 1rem;
  align-self: center;
}
#ap-root .ap-links {
  /* Subscribe column */
}
#ap-root .ap-links__subscribe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ap-space-3);
}
#ap-root .ap-links__subscribe .ap-links__subscribe-text {
  margin: 0;
  color: var(--section-color, #fff);
  text-align: right;
  max-width: 40ch;
  text-align: center;
}
#ap-root .ap-links {
  /* Responsive: stack on small screens */
}
@media (max-width: 767.98px) {
  #ap-root .ap-links__grid {
    grid-template-columns: 1fr;
    gap: var(--ap-space-4);
  }
  #ap-root .ap-links__social, #ap-root .ap-links__subscribe {
    align-items: center;
    text-align: center;
  }
  #ap-root .ap-links__social .ap-links__icons {
    max-width: 15rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
  }
  #ap-root .ap-links__social .ap-links__icons > .ap-links__icon {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.25rem;
  }
  #ap-root .ap-links__social {
    /* Center last row with 2 items */
  }
  #ap-root .ap-links__social .ap-links__icons > .ap-links__icon:nth-last-child(2):nth-child(odd) {
    margin-left: calc((100% - 4.5rem - 1rem) / 2);
  }
  #ap-root .ap-links__subscribe .ap-links__subscribe-text {
    text-align: center;
  }
  #ap-root .ap-links__divider {
    margin-top: 1rem;
    height: 2px;
    width: 30vw;
  }
}
#ap-root .ap-links {
  /* Larger screens: increase divider and spacing */
}
@media (min-width: 1024px) {
  #ap-root .ap-links__grid {
    gap: var(--ap-space-8);
  }
  #ap-root .ap-links__divider {
    height: 72px;
  }
}
#ap-root .ap-links {
  /* Reduced motion */
}

/*!
  main.scss
  Entry point for the custom single page integrated into WordPress.

  Goals:
  - Keep all rules scoped under #ap-root to avoid conflicts with the active theme.
  - Provide a minimal reset, variables, and a small set of components.
  - Be production-friendly but easy to iterate during local preview.
*/
/*!
  _page_nav.scss
  In-page navigation section
  - Desktop: horizontal bar with spacers between labels
  - Mobile: custom dropdown using <details>/<summary> (no JS required)

  Markup expected (see page_nav.twig):
    .ap-page-nav
      .ap-page-nav__desktop
        ul.ap-page-nav__list > (li.ap-page-nav__sep + li.ap-page-nav__item > a.ap-page-nav__link)
      .ap-page-nav__mobile
        details.ap-page-nav__dropdown
          summary.ap-page-nav__summary
            span.ap-page-nav__summary-label
            span.ap-page-nav__summary-caret
          ul.ap-page-nav__menu > li.ap-page-nav__menu-item > a.ap-page-nav__menu-link
*/
#ap-root {
  /* Root block */
}
#ap-root .ap-page-nav {
  /* Exposed design tokens (override per-instance if needed) */
  --page-nav-bg: #000;
  --page-nav-color: #fff;
  --page-nav-sep: var(--ap-color-primary);
  --page-nav-link: currentColor;
  --page-nav-link-hover: var(--ap-color-primary);
  --page-nav-link-current: var(--ap-color-primary);
  --page-nav-radius: var(--ap-radius, 12px);
  --page-nav-shadow: var(
    --ap-shadow-1,
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.1)
  );
  --page-nav-border: var(--ap-color-primary);
  position: relative;
  background: var(--page-nav-bg);
  color: var(--page-nav-color);
  border-top: 4px solid var(--ap-color-primary);
  border-bottom: 4px solid var(--ap-color-primary);
  /* Visibility toggles (mobile-first) */
}
#ap-root .ap-page-nav .ap-page-nav__desktop {
  display: none;
}
#ap-root .ap-page-nav .ap-page-nav__mobile {
  display: block;
}
@media (min-width: 768px) {
  #ap-root .ap-page-nav .ap-page-nav__desktop {
    display: block;
  }
  #ap-root .ap-page-nav .ap-page-nav__mobile {
    display: none;
  }
}
#ap-root .ap-page-nav {
  /* ---------------------------
     Desktop bar
     --------------------------- */
}
#ap-root .ap-page-nav .ap-page-nav__desktop {
  /* Keep it compact and unobtrusive */
}
#ap-root .ap-page-nav .ap-page-nav__desktop .ap-page-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0; /* separators manage spacing */
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
#ap-root .ap-page-nav .ap-page-nav__desktop .ap-page-nav__sep {
  display: inline-block;
  width: 1px;
  height: 1.25rem;
  margin-inline: var(--ap-space-4, 1rem);
  background: var(--page-nav-sep);
  user-select: none;
  pointer-events: none;
  font-size: 0;
  line-height: 0;
}
#ap-root .ap-page-nav .ap-page-nav__desktop .ap-page-nav__item {
  display: inline-flex;
  align-items: center;
}
#ap-root .ap-page-nav .ap-page-nav__desktop .ap-page-nav__link {
  font-family: "tiller", serif;
  font-size: 1.5em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  font-weight: bold;
  color: var(--page-nav-link);
  text-decoration: none;
  border-radius: 6px;
  transition: color 150ms ease, background-color 150ms ease;
}
#ap-root .ap-page-nav .ap-page-nav__desktop .ap-page-nav__link:hover {
  color: var(--page-nav-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}
#ap-root .ap-page-nav .ap-page-nav__desktop .ap-page-nav__link:focus-visible {
  /* outline: 3px solid var(--ap-color-focus);
  outline-offset: 2px; */
}
#ap-root .ap-page-nav .ap-page-nav__desktop .ap-page-nav__link[aria-current=true] {
  /* color: var(--page-nav-link-current);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
  font-weight: 700; */
}
#ap-root .ap-page-nav {
  /* ---------------------------
     Mobile dropdown
     --------------------------- */
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__dropdown {
  position: relative;
}
#ap-root .ap-page-nav .ap-page-nav__mobile {
  /* Remove default summary marker */
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__summary {
  font-family: "tiller", serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.25rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  /* border: 1px solid var(--ap-color-primary); */
  border-radius: var(--page-nav-radius);
  background: var(--page-nav-bg, #000);
  color: var(--page-nav-color, #fff);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__summary::-webkit-details-marker {
  display: none;
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__summary::marker {
  content: "";
  display: none;
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__summary:hover {
  border-color: var(--ap-color-primary);
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__summary:focus-visible {
  /* outline: 3px solid var(--ap-color-focus);
  outline-offset: 2px; */
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__summary-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__summary-caret {
  flex: 0 0 auto;
  display: inline-block;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 150ms ease;
  opacity: 0.85;
}
#ap-root .ap-page-nav .ap-page-nav__mobile {
  /* Menu panel */
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 100%;
  background: var(--page-nav-bg, #000);
  border: 1px solid var(--ap-color-primary);
  border-radius: var(--page-nav-radius);
  box-shadow: var(--page-nav-shadow);
  padding: 0.25rem;
  margin: 0;
  list-style: none;
  z-index: 40;
  /* Closed by default; revealed when details[open] */
  display: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 150ms ease, transform 150ms ease;
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__menu-item {
  /* nothing special; keep tight vertical rhythm */
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__menu-link {
  display: block;
  padding: 0.25rem 0.75rem;
  color: var(--page-nav-link);
  text-decoration: none;
  border-radius: 8px;
  font-family: "tiller", serif;
  text-transform: uppercase;
  font-weight: 700;
  transition: background-color 120ms ease, color 120ms ease;
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__menu-link:hover {
  background: color-mix(in srgb, var(--ap-color-primary) 12%, transparent);
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__menu-link:focus-visible {
  /* outline: 3px solid var(--ap-color-focus);
  outline-offset: 2px; */
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__menu-link[aria-current=true] {
  color: var(--page-nav-link-current);
  font-weight: 700;
  background: color-mix(in srgb, var(--page-nav-link-current) 10%, transparent);
}
#ap-root .ap-page-nav .ap-page-nav__mobile {
  /* Open state toggles for details */
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__dropdown[open] .ap-page-nav__summary-caret {
  transform: rotate(180deg);
}
#ap-root .ap-page-nav .ap-page-nav__mobile .ap-page-nav__dropdown[open] .ap-page-nav__menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/*!
  _spacing.scss
  Utility classes for padding with responsive variants.

  What this provides:
  - Directional padding utilities using the project spacing scale:
      .u-p-{n}    -> padding
      .u-px-{n}   -> padding-inline (logical left/right)
      .u-py-{n}   -> padding-block (logical top/bottom)
      .u-pt-{n}   -> padding-top
      .u-pr-{n}   -> padding-right
      .u-pb-{n}   -> padding-bottom
      .u-pl-{n}   -> padding-left
    where {n} ∈ [0,1,2,3,4,5,6,8,12]

  - Responsive variants at breakpoints:
      .u-sm-p-{n}, .u-md-p-{n}, .u-lg-p-{n}, .u-xl-p-{n}, .u-2xl-p-{n}

  - Helpers tied to runtime CSS variables:
      .u-px-container -> padding-inline: var(--ap-container-pad-x)
      .u-py-section   -> padding-block: var(--ap-section-pad-y)

  Notes:
  - All utilities are scoped under #ap-root to avoid collisions.
  - Uses logical properties (padding-inline/padding-block) for better RTL/LTR support.
*/
#ap-root .u-p-0 {
  padding: 0 !important;
}
#ap-root .u-p-1 {
  padding: var(--ap-space-1) !important;
}
#ap-root .u-p-2 {
  padding: var(--ap-space-2) !important;
}
#ap-root .u-p-3 {
  padding: var(--ap-space-3) !important;
}
#ap-root .u-p-4 {
  padding: var(--ap-space-4) !important;
}
#ap-root .u-p-5 {
  padding: var(--ap-space-5) !important;
}
#ap-root .u-p-6 {
  padding: var(--ap-space-6) !important;
}
#ap-root .u-p-8 {
  padding: var(--ap-space-8) !important;
}
#ap-root .u-p-12 {
  padding: var(--ap-space-12) !important;
}
#ap-root .u-px-0 {
  padding-inline: 0 !important;
}
#ap-root .u-px-1 {
  padding-inline: var(--ap-space-1) !important;
}
#ap-root .u-px-2 {
  padding-inline: var(--ap-space-2) !important;
}
#ap-root .u-px-3 {
  padding-inline: var(--ap-space-3) !important;
}
#ap-root .u-px-4 {
  padding-inline: var(--ap-space-4) !important;
}
#ap-root .u-px-5 {
  padding-inline: var(--ap-space-5) !important;
}
#ap-root .u-px-6 {
  padding-inline: var(--ap-space-6) !important;
}
#ap-root .u-px-8 {
  padding-inline: var(--ap-space-8) !important;
}
#ap-root .u-px-12 {
  padding-inline: var(--ap-space-12) !important;
}
#ap-root .u-py-0 {
  padding-block: 0 !important;
}
#ap-root .u-py-1 {
  padding-block: var(--ap-space-1) !important;
}
#ap-root .u-py-2 {
  padding-block: var(--ap-space-2) !important;
}
#ap-root .u-py-3 {
  padding-block: var(--ap-space-3) !important;
}
#ap-root .u-py-4 {
  padding-block: var(--ap-space-4) !important;
}
#ap-root .u-py-5 {
  padding-block: var(--ap-space-5) !important;
}
#ap-root .u-py-6 {
  padding-block: var(--ap-space-6) !important;
}
#ap-root .u-py-8 {
  padding-block: var(--ap-space-8) !important;
}
#ap-root .u-py-12 {
  padding-block: var(--ap-space-12) !important;
}
#ap-root .u-pt-0 {
  padding-top: 0 !important;
}
#ap-root .u-pt-1 {
  padding-top: var(--ap-space-1) !important;
}
#ap-root .u-pt-2 {
  padding-top: var(--ap-space-2) !important;
}
#ap-root .u-pt-3 {
  padding-top: var(--ap-space-3) !important;
}
#ap-root .u-pt-4 {
  padding-top: var(--ap-space-4) !important;
}
#ap-root .u-pt-5 {
  padding-top: var(--ap-space-5) !important;
}
#ap-root .u-pt-6 {
  padding-top: var(--ap-space-6) !important;
}
#ap-root .u-pt-8 {
  padding-top: var(--ap-space-8) !important;
}
#ap-root .u-pt-12 {
  padding-top: var(--ap-space-12) !important;
}
#ap-root .u-pr-0 {
  padding-right: 0 !important;
}
#ap-root .u-pr-1 {
  padding-right: var(--ap-space-1) !important;
}
#ap-root .u-pr-2 {
  padding-right: var(--ap-space-2) !important;
}
#ap-root .u-pr-3 {
  padding-right: var(--ap-space-3) !important;
}
#ap-root .u-pr-4 {
  padding-right: var(--ap-space-4) !important;
}
#ap-root .u-pr-5 {
  padding-right: var(--ap-space-5) !important;
}
#ap-root .u-pr-6 {
  padding-right: var(--ap-space-6) !important;
}
#ap-root .u-pr-8 {
  padding-right: var(--ap-space-8) !important;
}
#ap-root .u-pr-12 {
  padding-right: var(--ap-space-12) !important;
}
#ap-root .u-pb-0 {
  padding-bottom: 0 !important;
}
#ap-root .u-pb-1 {
  padding-bottom: var(--ap-space-1) !important;
}
#ap-root .u-pb-2 {
  padding-bottom: var(--ap-space-2) !important;
}
#ap-root .u-pb-3 {
  padding-bottom: var(--ap-space-3) !important;
}
#ap-root .u-pb-4 {
  padding-bottom: var(--ap-space-4) !important;
}
#ap-root .u-pb-5 {
  padding-bottom: var(--ap-space-5) !important;
}
#ap-root .u-pb-6 {
  padding-bottom: var(--ap-space-6) !important;
}
#ap-root .u-pb-8 {
  padding-bottom: var(--ap-space-8) !important;
}
#ap-root .u-pb-12 {
  padding-bottom: var(--ap-space-12) !important;
}
#ap-root .u-pl-0 {
  padding-left: 0 !important;
}
#ap-root .u-pl-1 {
  padding-left: var(--ap-space-1) !important;
}
#ap-root .u-pl-2 {
  padding-left: var(--ap-space-2) !important;
}
#ap-root .u-pl-3 {
  padding-left: var(--ap-space-3) !important;
}
#ap-root .u-pl-4 {
  padding-left: var(--ap-space-4) !important;
}
#ap-root .u-pl-5 {
  padding-left: var(--ap-space-5) !important;
}
#ap-root .u-pl-6 {
  padding-left: var(--ap-space-6) !important;
}
#ap-root .u-pl-8 {
  padding-left: var(--ap-space-8) !important;
}
#ap-root .u-pl-12 {
  padding-left: var(--ap-space-12) !important;
}
@media (min-width: 480px) {
  #ap-root .u-sm-p-0 {
    padding: 0 !important;
  }
  #ap-root .u-sm-p-1 {
    padding: var(--ap-space-1) !important;
  }
  #ap-root .u-sm-p-2 {
    padding: var(--ap-space-2) !important;
  }
  #ap-root .u-sm-p-3 {
    padding: var(--ap-space-3) !important;
  }
  #ap-root .u-sm-p-4 {
    padding: var(--ap-space-4) !important;
  }
  #ap-root .u-sm-p-5 {
    padding: var(--ap-space-5) !important;
  }
  #ap-root .u-sm-p-6 {
    padding: var(--ap-space-6) !important;
  }
  #ap-root .u-sm-p-8 {
    padding: var(--ap-space-8) !important;
  }
  #ap-root .u-sm-p-12 {
    padding: var(--ap-space-12) !important;
  }
  #ap-root .u-sm-px-0 {
    padding-inline: 0 !important;
  }
  #ap-root .u-sm-px-1 {
    padding-inline: var(--ap-space-1) !important;
  }
  #ap-root .u-sm-px-2 {
    padding-inline: var(--ap-space-2) !important;
  }
  #ap-root .u-sm-px-3 {
    padding-inline: var(--ap-space-3) !important;
  }
  #ap-root .u-sm-px-4 {
    padding-inline: var(--ap-space-4) !important;
  }
  #ap-root .u-sm-px-5 {
    padding-inline: var(--ap-space-5) !important;
  }
  #ap-root .u-sm-px-6 {
    padding-inline: var(--ap-space-6) !important;
  }
  #ap-root .u-sm-px-8 {
    padding-inline: var(--ap-space-8) !important;
  }
  #ap-root .u-sm-px-12 {
    padding-inline: var(--ap-space-12) !important;
  }
  #ap-root .u-sm-py-0 {
    padding-block: 0 !important;
  }
  #ap-root .u-sm-py-1 {
    padding-block: var(--ap-space-1) !important;
  }
  #ap-root .u-sm-py-2 {
    padding-block: var(--ap-space-2) !important;
  }
  #ap-root .u-sm-py-3 {
    padding-block: var(--ap-space-3) !important;
  }
  #ap-root .u-sm-py-4 {
    padding-block: var(--ap-space-4) !important;
  }
  #ap-root .u-sm-py-5 {
    padding-block: var(--ap-space-5) !important;
  }
  #ap-root .u-sm-py-6 {
    padding-block: var(--ap-space-6) !important;
  }
  #ap-root .u-sm-py-8 {
    padding-block: var(--ap-space-8) !important;
  }
  #ap-root .u-sm-py-12 {
    padding-block: var(--ap-space-12) !important;
  }
  #ap-root .u-sm-pt-0 {
    padding-top: 0 !important;
  }
  #ap-root .u-sm-pt-1 {
    padding-top: var(--ap-space-1) !important;
  }
  #ap-root .u-sm-pt-2 {
    padding-top: var(--ap-space-2) !important;
  }
  #ap-root .u-sm-pt-3 {
    padding-top: var(--ap-space-3) !important;
  }
  #ap-root .u-sm-pt-4 {
    padding-top: var(--ap-space-4) !important;
  }
  #ap-root .u-sm-pt-5 {
    padding-top: var(--ap-space-5) !important;
  }
  #ap-root .u-sm-pt-6 {
    padding-top: var(--ap-space-6) !important;
  }
  #ap-root .u-sm-pt-8 {
    padding-top: var(--ap-space-8) !important;
  }
  #ap-root .u-sm-pt-12 {
    padding-top: var(--ap-space-12) !important;
  }
  #ap-root .u-sm-pr-0 {
    padding-right: 0 !important;
  }
  #ap-root .u-sm-pr-1 {
    padding-right: var(--ap-space-1) !important;
  }
  #ap-root .u-sm-pr-2 {
    padding-right: var(--ap-space-2) !important;
  }
  #ap-root .u-sm-pr-3 {
    padding-right: var(--ap-space-3) !important;
  }
  #ap-root .u-sm-pr-4 {
    padding-right: var(--ap-space-4) !important;
  }
  #ap-root .u-sm-pr-5 {
    padding-right: var(--ap-space-5) !important;
  }
  #ap-root .u-sm-pr-6 {
    padding-right: var(--ap-space-6) !important;
  }
  #ap-root .u-sm-pr-8 {
    padding-right: var(--ap-space-8) !important;
  }
  #ap-root .u-sm-pr-12 {
    padding-right: var(--ap-space-12) !important;
  }
  #ap-root .u-sm-pb-0 {
    padding-bottom: 0 !important;
  }
  #ap-root .u-sm-pb-1 {
    padding-bottom: var(--ap-space-1) !important;
  }
  #ap-root .u-sm-pb-2 {
    padding-bottom: var(--ap-space-2) !important;
  }
  #ap-root .u-sm-pb-3 {
    padding-bottom: var(--ap-space-3) !important;
  }
  #ap-root .u-sm-pb-4 {
    padding-bottom: var(--ap-space-4) !important;
  }
  #ap-root .u-sm-pb-5 {
    padding-bottom: var(--ap-space-5) !important;
  }
  #ap-root .u-sm-pb-6 {
    padding-bottom: var(--ap-space-6) !important;
  }
  #ap-root .u-sm-pb-8 {
    padding-bottom: var(--ap-space-8) !important;
  }
  #ap-root .u-sm-pb-12 {
    padding-bottom: var(--ap-space-12) !important;
  }
  #ap-root .u-sm-pl-0 {
    padding-left: 0 !important;
  }
  #ap-root .u-sm-pl-1 {
    padding-left: var(--ap-space-1) !important;
  }
  #ap-root .u-sm-pl-2 {
    padding-left: var(--ap-space-2) !important;
  }
  #ap-root .u-sm-pl-3 {
    padding-left: var(--ap-space-3) !important;
  }
  #ap-root .u-sm-pl-4 {
    padding-left: var(--ap-space-4) !important;
  }
  #ap-root .u-sm-pl-5 {
    padding-left: var(--ap-space-5) !important;
  }
  #ap-root .u-sm-pl-6 {
    padding-left: var(--ap-space-6) !important;
  }
  #ap-root .u-sm-pl-8 {
    padding-left: var(--ap-space-8) !important;
  }
  #ap-root .u-sm-pl-12 {
    padding-left: var(--ap-space-12) !important;
  }
}
@media (min-width: 768px) {
  #ap-root .u-md-p-0 {
    padding: 0 !important;
  }
  #ap-root .u-md-p-1 {
    padding: var(--ap-space-1) !important;
  }
  #ap-root .u-md-p-2 {
    padding: var(--ap-space-2) !important;
  }
  #ap-root .u-md-p-3 {
    padding: var(--ap-space-3) !important;
  }
  #ap-root .u-md-p-4 {
    padding: var(--ap-space-4) !important;
  }
  #ap-root .u-md-p-5 {
    padding: var(--ap-space-5) !important;
  }
  #ap-root .u-md-p-6 {
    padding: var(--ap-space-6) !important;
  }
  #ap-root .u-md-p-8 {
    padding: var(--ap-space-8) !important;
  }
  #ap-root .u-md-p-12 {
    padding: var(--ap-space-12) !important;
  }
  #ap-root .u-md-px-0 {
    padding-inline: 0 !important;
  }
  #ap-root .u-md-px-1 {
    padding-inline: var(--ap-space-1) !important;
  }
  #ap-root .u-md-px-2 {
    padding-inline: var(--ap-space-2) !important;
  }
  #ap-root .u-md-px-3 {
    padding-inline: var(--ap-space-3) !important;
  }
  #ap-root .u-md-px-4 {
    padding-inline: var(--ap-space-4) !important;
  }
  #ap-root .u-md-px-5 {
    padding-inline: var(--ap-space-5) !important;
  }
  #ap-root .u-md-px-6 {
    padding-inline: var(--ap-space-6) !important;
  }
  #ap-root .u-md-px-8 {
    padding-inline: var(--ap-space-8) !important;
  }
  #ap-root .u-md-px-12 {
    padding-inline: var(--ap-space-12) !important;
  }
  #ap-root .u-md-py-0 {
    padding-block: 0 !important;
  }
  #ap-root .u-md-py-1 {
    padding-block: var(--ap-space-1) !important;
  }
  #ap-root .u-md-py-2 {
    padding-block: var(--ap-space-2) !important;
  }
  #ap-root .u-md-py-3 {
    padding-block: var(--ap-space-3) !important;
  }
  #ap-root .u-md-py-4 {
    padding-block: var(--ap-space-4) !important;
  }
  #ap-root .u-md-py-5 {
    padding-block: var(--ap-space-5) !important;
  }
  #ap-root .u-md-py-6 {
    padding-block: var(--ap-space-6) !important;
  }
  #ap-root .u-md-py-8 {
    padding-block: var(--ap-space-8) !important;
  }
  #ap-root .u-md-py-12 {
    padding-block: var(--ap-space-12) !important;
  }
  #ap-root .u-md-pt-0 {
    padding-top: 0 !important;
  }
  #ap-root .u-md-pt-1 {
    padding-top: var(--ap-space-1) !important;
  }
  #ap-root .u-md-pt-2 {
    padding-top: var(--ap-space-2) !important;
  }
  #ap-root .u-md-pt-3 {
    padding-top: var(--ap-space-3) !important;
  }
  #ap-root .u-md-pt-4 {
    padding-top: var(--ap-space-4) !important;
  }
  #ap-root .u-md-pt-5 {
    padding-top: var(--ap-space-5) !important;
  }
  #ap-root .u-md-pt-6 {
    padding-top: var(--ap-space-6) !important;
  }
  #ap-root .u-md-pt-8 {
    padding-top: var(--ap-space-8) !important;
  }
  #ap-root .u-md-pt-12 {
    padding-top: var(--ap-space-12) !important;
  }
  #ap-root .u-md-pr-0 {
    padding-right: 0 !important;
  }
  #ap-root .u-md-pr-1 {
    padding-right: var(--ap-space-1) !important;
  }
  #ap-root .u-md-pr-2 {
    padding-right: var(--ap-space-2) !important;
  }
  #ap-root .u-md-pr-3 {
    padding-right: var(--ap-space-3) !important;
  }
  #ap-root .u-md-pr-4 {
    padding-right: var(--ap-space-4) !important;
  }
  #ap-root .u-md-pr-5 {
    padding-right: var(--ap-space-5) !important;
  }
  #ap-root .u-md-pr-6 {
    padding-right: var(--ap-space-6) !important;
  }
  #ap-root .u-md-pr-8 {
    padding-right: var(--ap-space-8) !important;
  }
  #ap-root .u-md-pr-12 {
    padding-right: var(--ap-space-12) !important;
  }
  #ap-root .u-md-pb-0 {
    padding-bottom: 0 !important;
  }
  #ap-root .u-md-pb-1 {
    padding-bottom: var(--ap-space-1) !important;
  }
  #ap-root .u-md-pb-2 {
    padding-bottom: var(--ap-space-2) !important;
  }
  #ap-root .u-md-pb-3 {
    padding-bottom: var(--ap-space-3) !important;
  }
  #ap-root .u-md-pb-4 {
    padding-bottom: var(--ap-space-4) !important;
  }
  #ap-root .u-md-pb-5 {
    padding-bottom: var(--ap-space-5) !important;
  }
  #ap-root .u-md-pb-6 {
    padding-bottom: var(--ap-space-6) !important;
  }
  #ap-root .u-md-pb-8 {
    padding-bottom: var(--ap-space-8) !important;
  }
  #ap-root .u-md-pb-12 {
    padding-bottom: var(--ap-space-12) !important;
  }
  #ap-root .u-md-pl-0 {
    padding-left: 0 !important;
  }
  #ap-root .u-md-pl-1 {
    padding-left: var(--ap-space-1) !important;
  }
  #ap-root .u-md-pl-2 {
    padding-left: var(--ap-space-2) !important;
  }
  #ap-root .u-md-pl-3 {
    padding-left: var(--ap-space-3) !important;
  }
  #ap-root .u-md-pl-4 {
    padding-left: var(--ap-space-4) !important;
  }
  #ap-root .u-md-pl-5 {
    padding-left: var(--ap-space-5) !important;
  }
  #ap-root .u-md-pl-6 {
    padding-left: var(--ap-space-6) !important;
  }
  #ap-root .u-md-pl-8 {
    padding-left: var(--ap-space-8) !important;
  }
  #ap-root .u-md-pl-12 {
    padding-left: var(--ap-space-12) !important;
  }
}
@media (min-width: 1024px) {
  #ap-root .u-lg-p-0 {
    padding: 0 !important;
  }
  #ap-root .u-lg-p-1 {
    padding: var(--ap-space-1) !important;
  }
  #ap-root .u-lg-p-2 {
    padding: var(--ap-space-2) !important;
  }
  #ap-root .u-lg-p-3 {
    padding: var(--ap-space-3) !important;
  }
  #ap-root .u-lg-p-4 {
    padding: var(--ap-space-4) !important;
  }
  #ap-root .u-lg-p-5 {
    padding: var(--ap-space-5) !important;
  }
  #ap-root .u-lg-p-6 {
    padding: var(--ap-space-6) !important;
  }
  #ap-root .u-lg-p-8 {
    padding: var(--ap-space-8) !important;
  }
  #ap-root .u-lg-p-12 {
    padding: var(--ap-space-12) !important;
  }
  #ap-root .u-lg-px-0 {
    padding-inline: 0 !important;
  }
  #ap-root .u-lg-px-1 {
    padding-inline: var(--ap-space-1) !important;
  }
  #ap-root .u-lg-px-2 {
    padding-inline: var(--ap-space-2) !important;
  }
  #ap-root .u-lg-px-3 {
    padding-inline: var(--ap-space-3) !important;
  }
  #ap-root .u-lg-px-4 {
    padding-inline: var(--ap-space-4) !important;
  }
  #ap-root .u-lg-px-5 {
    padding-inline: var(--ap-space-5) !important;
  }
  #ap-root .u-lg-px-6 {
    padding-inline: var(--ap-space-6) !important;
  }
  #ap-root .u-lg-px-8 {
    padding-inline: var(--ap-space-8) !important;
  }
  #ap-root .u-lg-px-12 {
    padding-inline: var(--ap-space-12) !important;
  }
  #ap-root .u-lg-py-0 {
    padding-block: 0 !important;
  }
  #ap-root .u-lg-py-1 {
    padding-block: var(--ap-space-1) !important;
  }
  #ap-root .u-lg-py-2 {
    padding-block: var(--ap-space-2) !important;
  }
  #ap-root .u-lg-py-3 {
    padding-block: var(--ap-space-3) !important;
  }
  #ap-root .u-lg-py-4 {
    padding-block: var(--ap-space-4) !important;
  }
  #ap-root .u-lg-py-5 {
    padding-block: var(--ap-space-5) !important;
  }
  #ap-root .u-lg-py-6 {
    padding-block: var(--ap-space-6) !important;
  }
  #ap-root .u-lg-py-8 {
    padding-block: var(--ap-space-8) !important;
  }
  #ap-root .u-lg-py-12 {
    padding-block: var(--ap-space-12) !important;
  }
  #ap-root .u-lg-pt-0 {
    padding-top: 0 !important;
  }
  #ap-root .u-lg-pt-1 {
    padding-top: var(--ap-space-1) !important;
  }
  #ap-root .u-lg-pt-2 {
    padding-top: var(--ap-space-2) !important;
  }
  #ap-root .u-lg-pt-3 {
    padding-top: var(--ap-space-3) !important;
  }
  #ap-root .u-lg-pt-4 {
    padding-top: var(--ap-space-4) !important;
  }
  #ap-root .u-lg-pt-5 {
    padding-top: var(--ap-space-5) !important;
  }
  #ap-root .u-lg-pt-6 {
    padding-top: var(--ap-space-6) !important;
  }
  #ap-root .u-lg-pt-8 {
    padding-top: var(--ap-space-8) !important;
  }
  #ap-root .u-lg-pt-12 {
    padding-top: var(--ap-space-12) !important;
  }
  #ap-root .u-lg-pr-0 {
    padding-right: 0 !important;
  }
  #ap-root .u-lg-pr-1 {
    padding-right: var(--ap-space-1) !important;
  }
  #ap-root .u-lg-pr-2 {
    padding-right: var(--ap-space-2) !important;
  }
  #ap-root .u-lg-pr-3 {
    padding-right: var(--ap-space-3) !important;
  }
  #ap-root .u-lg-pr-4 {
    padding-right: var(--ap-space-4) !important;
  }
  #ap-root .u-lg-pr-5 {
    padding-right: var(--ap-space-5) !important;
  }
  #ap-root .u-lg-pr-6 {
    padding-right: var(--ap-space-6) !important;
  }
  #ap-root .u-lg-pr-8 {
    padding-right: var(--ap-space-8) !important;
  }
  #ap-root .u-lg-pr-12 {
    padding-right: var(--ap-space-12) !important;
  }
  #ap-root .u-lg-pb-0 {
    padding-bottom: 0 !important;
  }
  #ap-root .u-lg-pb-1 {
    padding-bottom: var(--ap-space-1) !important;
  }
  #ap-root .u-lg-pb-2 {
    padding-bottom: var(--ap-space-2) !important;
  }
  #ap-root .u-lg-pb-3 {
    padding-bottom: var(--ap-space-3) !important;
  }
  #ap-root .u-lg-pb-4 {
    padding-bottom: var(--ap-space-4) !important;
  }
  #ap-root .u-lg-pb-5 {
    padding-bottom: var(--ap-space-5) !important;
  }
  #ap-root .u-lg-pb-6 {
    padding-bottom: var(--ap-space-6) !important;
  }
  #ap-root .u-lg-pb-8 {
    padding-bottom: var(--ap-space-8) !important;
  }
  #ap-root .u-lg-pb-12 {
    padding-bottom: var(--ap-space-12) !important;
  }
  #ap-root .u-lg-pl-0 {
    padding-left: 0 !important;
  }
  #ap-root .u-lg-pl-1 {
    padding-left: var(--ap-space-1) !important;
  }
  #ap-root .u-lg-pl-2 {
    padding-left: var(--ap-space-2) !important;
  }
  #ap-root .u-lg-pl-3 {
    padding-left: var(--ap-space-3) !important;
  }
  #ap-root .u-lg-pl-4 {
    padding-left: var(--ap-space-4) !important;
  }
  #ap-root .u-lg-pl-5 {
    padding-left: var(--ap-space-5) !important;
  }
  #ap-root .u-lg-pl-6 {
    padding-left: var(--ap-space-6) !important;
  }
  #ap-root .u-lg-pl-8 {
    padding-left: var(--ap-space-8) !important;
  }
  #ap-root .u-lg-pl-12 {
    padding-left: var(--ap-space-12) !important;
  }
}
@media (min-width: 1280px) {
  #ap-root .u-xl-p-0 {
    padding: 0 !important;
  }
  #ap-root .u-xl-p-1 {
    padding: var(--ap-space-1) !important;
  }
  #ap-root .u-xl-p-2 {
    padding: var(--ap-space-2) !important;
  }
  #ap-root .u-xl-p-3 {
    padding: var(--ap-space-3) !important;
  }
  #ap-root .u-xl-p-4 {
    padding: var(--ap-space-4) !important;
  }
  #ap-root .u-xl-p-5 {
    padding: var(--ap-space-5) !important;
  }
  #ap-root .u-xl-p-6 {
    padding: var(--ap-space-6) !important;
  }
  #ap-root .u-xl-p-8 {
    padding: var(--ap-space-8) !important;
  }
  #ap-root .u-xl-p-12 {
    padding: var(--ap-space-12) !important;
  }
  #ap-root .u-xl-px-0 {
    padding-inline: 0 !important;
  }
  #ap-root .u-xl-px-1 {
    padding-inline: var(--ap-space-1) !important;
  }
  #ap-root .u-xl-px-2 {
    padding-inline: var(--ap-space-2) !important;
  }
  #ap-root .u-xl-px-3 {
    padding-inline: var(--ap-space-3) !important;
  }
  #ap-root .u-xl-px-4 {
    padding-inline: var(--ap-space-4) !important;
  }
  #ap-root .u-xl-px-5 {
    padding-inline: var(--ap-space-5) !important;
  }
  #ap-root .u-xl-px-6 {
    padding-inline: var(--ap-space-6) !important;
  }
  #ap-root .u-xl-px-8 {
    padding-inline: var(--ap-space-8) !important;
  }
  #ap-root .u-xl-px-12 {
    padding-inline: var(--ap-space-12) !important;
  }
  #ap-root .u-xl-py-0 {
    padding-block: 0 !important;
  }
  #ap-root .u-xl-py-1 {
    padding-block: var(--ap-space-1) !important;
  }
  #ap-root .u-xl-py-2 {
    padding-block: var(--ap-space-2) !important;
  }
  #ap-root .u-xl-py-3 {
    padding-block: var(--ap-space-3) !important;
  }
  #ap-root .u-xl-py-4 {
    padding-block: var(--ap-space-4) !important;
  }
  #ap-root .u-xl-py-5 {
    padding-block: var(--ap-space-5) !important;
  }
  #ap-root .u-xl-py-6 {
    padding-block: var(--ap-space-6) !important;
  }
  #ap-root .u-xl-py-8 {
    padding-block: var(--ap-space-8) !important;
  }
  #ap-root .u-xl-py-12 {
    padding-block: var(--ap-space-12) !important;
  }
  #ap-root .u-xl-pt-0 {
    padding-top: 0 !important;
  }
  #ap-root .u-xl-pt-1 {
    padding-top: var(--ap-space-1) !important;
  }
  #ap-root .u-xl-pt-2 {
    padding-top: var(--ap-space-2) !important;
  }
  #ap-root .u-xl-pt-3 {
    padding-top: var(--ap-space-3) !important;
  }
  #ap-root .u-xl-pt-4 {
    padding-top: var(--ap-space-4) !important;
  }
  #ap-root .u-xl-pt-5 {
    padding-top: var(--ap-space-5) !important;
  }
  #ap-root .u-xl-pt-6 {
    padding-top: var(--ap-space-6) !important;
  }
  #ap-root .u-xl-pt-8 {
    padding-top: var(--ap-space-8) !important;
  }
  #ap-root .u-xl-pt-12 {
    padding-top: var(--ap-space-12) !important;
  }
  #ap-root .u-xl-pr-0 {
    padding-right: 0 !important;
  }
  #ap-root .u-xl-pr-1 {
    padding-right: var(--ap-space-1) !important;
  }
  #ap-root .u-xl-pr-2 {
    padding-right: var(--ap-space-2) !important;
  }
  #ap-root .u-xl-pr-3 {
    padding-right: var(--ap-space-3) !important;
  }
  #ap-root .u-xl-pr-4 {
    padding-right: var(--ap-space-4) !important;
  }
  #ap-root .u-xl-pr-5 {
    padding-right: var(--ap-space-5) !important;
  }
  #ap-root .u-xl-pr-6 {
    padding-right: var(--ap-space-6) !important;
  }
  #ap-root .u-xl-pr-8 {
    padding-right: var(--ap-space-8) !important;
  }
  #ap-root .u-xl-pr-12 {
    padding-right: var(--ap-space-12) !important;
  }
  #ap-root .u-xl-pb-0 {
    padding-bottom: 0 !important;
  }
  #ap-root .u-xl-pb-1 {
    padding-bottom: var(--ap-space-1) !important;
  }
  #ap-root .u-xl-pb-2 {
    padding-bottom: var(--ap-space-2) !important;
  }
  #ap-root .u-xl-pb-3 {
    padding-bottom: var(--ap-space-3) !important;
  }
  #ap-root .u-xl-pb-4 {
    padding-bottom: var(--ap-space-4) !important;
  }
  #ap-root .u-xl-pb-5 {
    padding-bottom: var(--ap-space-5) !important;
  }
  #ap-root .u-xl-pb-6 {
    padding-bottom: var(--ap-space-6) !important;
  }
  #ap-root .u-xl-pb-8 {
    padding-bottom: var(--ap-space-8) !important;
  }
  #ap-root .u-xl-pb-12 {
    padding-bottom: var(--ap-space-12) !important;
  }
  #ap-root .u-xl-pl-0 {
    padding-left: 0 !important;
  }
  #ap-root .u-xl-pl-1 {
    padding-left: var(--ap-space-1) !important;
  }
  #ap-root .u-xl-pl-2 {
    padding-left: var(--ap-space-2) !important;
  }
  #ap-root .u-xl-pl-3 {
    padding-left: var(--ap-space-3) !important;
  }
  #ap-root .u-xl-pl-4 {
    padding-left: var(--ap-space-4) !important;
  }
  #ap-root .u-xl-pl-5 {
    padding-left: var(--ap-space-5) !important;
  }
  #ap-root .u-xl-pl-6 {
    padding-left: var(--ap-space-6) !important;
  }
  #ap-root .u-xl-pl-8 {
    padding-left: var(--ap-space-8) !important;
  }
  #ap-root .u-xl-pl-12 {
    padding-left: var(--ap-space-12) !important;
  }
}
@media (min-width: 2xl) {
  #ap-root .u-2xl-p-0 {
    padding: 0 !important;
  }
  #ap-root .u-2xl-p-1 {
    padding: var(--ap-space-1) !important;
  }
  #ap-root .u-2xl-p-2 {
    padding: var(--ap-space-2) !important;
  }
  #ap-root .u-2xl-p-3 {
    padding: var(--ap-space-3) !important;
  }
  #ap-root .u-2xl-p-4 {
    padding: var(--ap-space-4) !important;
  }
  #ap-root .u-2xl-p-5 {
    padding: var(--ap-space-5) !important;
  }
  #ap-root .u-2xl-p-6 {
    padding: var(--ap-space-6) !important;
  }
  #ap-root .u-2xl-p-8 {
    padding: var(--ap-space-8) !important;
  }
  #ap-root .u-2xl-p-12 {
    padding: var(--ap-space-12) !important;
  }
  #ap-root .u-2xl-px-0 {
    padding-inline: 0 !important;
  }
  #ap-root .u-2xl-px-1 {
    padding-inline: var(--ap-space-1) !important;
  }
  #ap-root .u-2xl-px-2 {
    padding-inline: var(--ap-space-2) !important;
  }
  #ap-root .u-2xl-px-3 {
    padding-inline: var(--ap-space-3) !important;
  }
  #ap-root .u-2xl-px-4 {
    padding-inline: var(--ap-space-4) !important;
  }
  #ap-root .u-2xl-px-5 {
    padding-inline: var(--ap-space-5) !important;
  }
  #ap-root .u-2xl-px-6 {
    padding-inline: var(--ap-space-6) !important;
  }
  #ap-root .u-2xl-px-8 {
    padding-inline: var(--ap-space-8) !important;
  }
  #ap-root .u-2xl-px-12 {
    padding-inline: var(--ap-space-12) !important;
  }
  #ap-root .u-2xl-py-0 {
    padding-block: 0 !important;
  }
  #ap-root .u-2xl-py-1 {
    padding-block: var(--ap-space-1) !important;
  }
  #ap-root .u-2xl-py-2 {
    padding-block: var(--ap-space-2) !important;
  }
  #ap-root .u-2xl-py-3 {
    padding-block: var(--ap-space-3) !important;
  }
  #ap-root .u-2xl-py-4 {
    padding-block: var(--ap-space-4) !important;
  }
  #ap-root .u-2xl-py-5 {
    padding-block: var(--ap-space-5) !important;
  }
  #ap-root .u-2xl-py-6 {
    padding-block: var(--ap-space-6) !important;
  }
  #ap-root .u-2xl-py-8 {
    padding-block: var(--ap-space-8) !important;
  }
  #ap-root .u-2xl-py-12 {
    padding-block: var(--ap-space-12) !important;
  }
  #ap-root .u-2xl-pt-0 {
    padding-top: 0 !important;
  }
  #ap-root .u-2xl-pt-1 {
    padding-top: var(--ap-space-1) !important;
  }
  #ap-root .u-2xl-pt-2 {
    padding-top: var(--ap-space-2) !important;
  }
  #ap-root .u-2xl-pt-3 {
    padding-top: var(--ap-space-3) !important;
  }
  #ap-root .u-2xl-pt-4 {
    padding-top: var(--ap-space-4) !important;
  }
  #ap-root .u-2xl-pt-5 {
    padding-top: var(--ap-space-5) !important;
  }
  #ap-root .u-2xl-pt-6 {
    padding-top: var(--ap-space-6) !important;
  }
  #ap-root .u-2xl-pt-8 {
    padding-top: var(--ap-space-8) !important;
  }
  #ap-root .u-2xl-pt-12 {
    padding-top: var(--ap-space-12) !important;
  }
  #ap-root .u-2xl-pr-0 {
    padding-right: 0 !important;
  }
  #ap-root .u-2xl-pr-1 {
    padding-right: var(--ap-space-1) !important;
  }
  #ap-root .u-2xl-pr-2 {
    padding-right: var(--ap-space-2) !important;
  }
  #ap-root .u-2xl-pr-3 {
    padding-right: var(--ap-space-3) !important;
  }
  #ap-root .u-2xl-pr-4 {
    padding-right: var(--ap-space-4) !important;
  }
  #ap-root .u-2xl-pr-5 {
    padding-right: var(--ap-space-5) !important;
  }
  #ap-root .u-2xl-pr-6 {
    padding-right: var(--ap-space-6) !important;
  }
  #ap-root .u-2xl-pr-8 {
    padding-right: var(--ap-space-8) !important;
  }
  #ap-root .u-2xl-pr-12 {
    padding-right: var(--ap-space-12) !important;
  }
  #ap-root .u-2xl-pb-0 {
    padding-bottom: 0 !important;
  }
  #ap-root .u-2xl-pb-1 {
    padding-bottom: var(--ap-space-1) !important;
  }
  #ap-root .u-2xl-pb-2 {
    padding-bottom: var(--ap-space-2) !important;
  }
  #ap-root .u-2xl-pb-3 {
    padding-bottom: var(--ap-space-3) !important;
  }
  #ap-root .u-2xl-pb-4 {
    padding-bottom: var(--ap-space-4) !important;
  }
  #ap-root .u-2xl-pb-5 {
    padding-bottom: var(--ap-space-5) !important;
  }
  #ap-root .u-2xl-pb-6 {
    padding-bottom: var(--ap-space-6) !important;
  }
  #ap-root .u-2xl-pb-8 {
    padding-bottom: var(--ap-space-8) !important;
  }
  #ap-root .u-2xl-pb-12 {
    padding-bottom: var(--ap-space-12) !important;
  }
  #ap-root .u-2xl-pl-0 {
    padding-left: 0 !important;
  }
  #ap-root .u-2xl-pl-1 {
    padding-left: var(--ap-space-1) !important;
  }
  #ap-root .u-2xl-pl-2 {
    padding-left: var(--ap-space-2) !important;
  }
  #ap-root .u-2xl-pl-3 {
    padding-left: var(--ap-space-3) !important;
  }
  #ap-root .u-2xl-pl-4 {
    padding-left: var(--ap-space-4) !important;
  }
  #ap-root .u-2xl-pl-5 {
    padding-left: var(--ap-space-5) !important;
  }
  #ap-root .u-2xl-pl-6 {
    padding-left: var(--ap-space-6) !important;
  }
  #ap-root .u-2xl-pl-8 {
    padding-left: var(--ap-space-8) !important;
  }
  #ap-root .u-2xl-pl-12 {
    padding-left: var(--ap-space-12) !important;
  }
}
#ap-root .u-px-container {
  padding-inline: var(--ap-container-pad-x) !important;
}
#ap-root .u-py-section {
  padding-block: var(--ap-section-pad-y) !important;
}
@media (min-width: 480px) {
  #ap-root .u-sm-px-container {
    padding-inline: var(--ap-container-pad-x) !important;
  }
  #ap-root .u-sm-py-section {
    padding-block: var(--ap-section-pad-y) !important;
  }
}
@media (min-width: 768px) {
  #ap-root .u-md-px-container {
    padding-inline: var(--ap-container-pad-x) !important;
  }
  #ap-root .u-md-py-section {
    padding-block: var(--ap-section-pad-y) !important;
  }
}
@media (min-width: 1024px) {
  #ap-root .u-lg-px-container {
    padding-inline: var(--ap-container-pad-x) !important;
  }
  #ap-root .u-lg-py-section {
    padding-block: var(--ap-section-pad-y) !important;
  }
}
@media (min-width: 1280px) {
  #ap-root .u-xl-px-container {
    padding-inline: var(--ap-container-pad-x) !important;
  }
  #ap-root .u-xl-py-section {
    padding-block: var(--ap-section-pad-y) !important;
  }
}
@media (min-width: 2xl) {
  #ap-root .u-2xl-px-container {
    padding-inline: var(--ap-container-pad-x) !important;
  }
  #ap-root .u-2xl-py-section {
    padding-block: var(--ap-section-pad-y) !important;
  }
}

/* awmamericanprophets.org/src/scss/components/slider/_slider.scss
   Slider component styles
   - Responsive: shows `--slider-slides-mobile` slides on small screens and
     `--slider-slides-desktop` on large screens.
   - Uses CSS variables (set on the section element via inline style/HTML)
     --slider-slides-desktop (number)
     --slider-slides-mobile  (number)
     --slider-gap            (length, e.g. 0.75rem)
   - Track shifts with transform for smooth transitions. Arrows overlay the
     track on desktop; hidden on mobile. Autoplay behavior is handled in JS.
*/
/* Basic defaults (can be overridden on the element) */
:root {
  --slider-gap: 0.75rem;
  --slider-slides-desktop: 8;
  --slider-slides-mobile: 4;
  --slider-transition: 420ms;
  --slider-ease: cubic-bezier(0.2, 0.9, 0.25, 1);
}

/* Component root */
.ap-slider {
  position: relative;
  display: block;
  /* runtime-configured variables (provided via inline style on the section) */
  --slides: var(--slider-slides-mobile);
  --gap: var(--slider-gap, 0.75rem);
  --transition-duration: var(--slider-transition, 420ms);
  --transition-ease: var(--slider-ease, cubic-bezier(0.2, 0.9, 0.25, 1));
  /* Hide focus outline on the wrapper but ensure children can still be focused */
  outline: none;
  -webkit-tap-highlight-color: transparent;
  /* Accessibility: keep a predictable reading order for screen readers */
}
.ap-slider .ap-slider__viewport {
  overflow: hidden;
  width: 100%;
  /* Avoid visible gap at viewport edges: add half padding on each side */
  padding-inline: calc(var(--gap) / 2);
}
.ap-slider {
  /* The track holds slides in a row */
}
.ap-slider .ap-slider__track {
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
  transform: translateX(0);
  transition: transform 500ms ease-in-out !important;
  will-change: transform;
  /* Improve momentum scrolling experience on touch devices */
  -webkit-overflow-scrolling: touch;
}
.ap-slider {
  /* Each slide calculates width based on current --slides count */
}
.ap-slider .ap-slider__slide {
  flex: 0 0 calc((100% - (var(--slides) - 1) * var(--gap)) / var(--slides));
  box-sizing: border-box;
  /* Prevent accidental shrinking due to subpixel math */
  min-width: 0;
  /* Ensure images fill the slide and preserve aspect */
}
.ap-slider .ap-slider__slide .ap-slider__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0;
  /* A subtle performance-friendly transform for GPU compositing when animating */
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  user-select: none;
  pointer-events: none;
}
.ap-slider .ap-slider__slide .ap-slider__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.ap-slider {
  /* Navigation arrows (overlay) */
}
.ap-slider .ap-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.5);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: #fff;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.ap-slider .ap-slider__nav:hover {
  transform: translateY(-50%) scale(0.75);
}
.ap-slider .ap-slider__nav--prev {
  left: 0rem;
}
.ap-slider .ap-slider__nav--next {
  right: 0rem;
}
.ap-slider {
  /* Simple responsive adjustments:
     - On larger viewports use the desktop slides number
     - Hide arrows on narrow/mobile screens (JS will use autoplay there) */
}
@media (min-width: 768px) {
  .ap-slider {
    --slides: var(--slider-slides-desktop);
  }
  .ap-slider .ap-slider__nav {
    display: inline-flex;
  }
}
.ap-slider {
  /* Mobile: stack programs slider; hide arrows */
}
@media (max-width: 767.98px) {
  .ap-slider .ap-slider__nav {
    display: none;
  }
  .ap-slider {
    /* Show arrows on mobile for programs slider */
  }
  .ap-slider .ap-programs-slider .ap-slider__nav {
    display: inline-flex;
  }
  .ap-slider {
    /* In programs section, disable horizontal slider on mobile and stack items (opt-in via data attribute) */
  }
  .ap-slider .ap-programs-slider[data-stack-mobile=true] .ap-slider__viewport {
    overflow: visible;
    padding-inline: 0;
  }
  .ap-slider .ap-programs-slider[data-stack-mobile=true] .ap-slider__track {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap);
    transform: none !important;
    transition: none !important;
  }
  .ap-slider .ap-programs-slider[data-stack-mobile=true] .ap-slider__slide {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .ap-slider .ap-programs-slider[data-stack-mobile=true] .ap-slider__slide .ap-program-card {
    height: auto;
    min-height: 0;
  }
}
.ap-slider {
  /* Improve focus styles for keyboard users */
}
.ap-slider .ap-slider__nav:focus {
  /* outline: 3px solid rgba(255, 255, 255, 0.12); */
  /* outline-offset: 3px; */
}
.ap-slider {
  /* No-JS: fall back to a simple stacked list (viewport already allows scrolling) */
}
.ap-slider .ap-slider__noscript .ap-slider__noscript-list {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-inline: calc(var(--gap) / 2);
  margin: 0;
  list-style: none;
}
.ap-slider .ap-slider__noscript .ap-slider__noscript-item {
  flex: 0 0 calc((100% - (var(--slides) - 1) * var(--gap)) / var(--slides));
}
.ap-slider {
  /* Small utility: visually prominent but accessible aria-hidden label */
}
.ap-slider .ap-slider__visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Program cards slider: avoid clipping of overlapping badges and unify slide heights */
.ap-programs-slider .ap-slider__viewport {
  padding-top: var(--programs-slider-top-pad, 1.25rem);
}
.ap-programs-slider .ap-slider__track {
  align-items: stretch;
}
.ap-programs-slider .ap-slider__slide {
  display: flex;
  align-items: stretch;
  height: 100%;
}
.ap-programs-slider .ap-slider__slide > * {
  height: 100%;
  width: 100%;
}
.ap-programs-slider {
  /* Fallback to equalized min-height via CSS variable set by JS */
}
.ap-programs-slider .ap-slider__slide {
  min-height: var(--ap-eq-minh, auto);
}
.ap-programs-slider .ap-slider__slide .ap-program-card {
  min-height: var(--ap-eq-minh, auto);
}
.ap-programs-slider {
  /* Center navigation below the slides for programs */
}
.ap-programs-slider .ap-slider__nav-wrapper {
  display: flex;
  justify-content: center;
  gap: var(--gap);
  margin-top: 1rem;
}
.ap-programs-slider {
  /* Override default absolute arrows to be inline under the slider */
}
.ap-programs-slider .ap-slider__nav {
  position: static;
  transform: none;
}

/* Optional: small decorative tweaks for the arrows on very large screens */
@media (min-width: 1200px) {
  .ap-slider__nav {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.8rem;
  }
}
/*!
  _reveal.scss
  Minimal reveal animation styles for elements as they enter the viewport.

  Usage:
    - Add the `ap-reveal` class to any element to participate in the reveal.
    - Toggle `ap-reveal--visible` (via JS) when the element should animate in.
    - Optional directional hint via `data-reveal="left|right|up|down|fade"`.
    - Optional per-element delay via inline style: `--reveal-delay: 120ms;`.

  Notes:
    - Respects prefers-reduced-motion (no animation; content is shown immediately).
    - Uses CSS custom properties for easy tuning:
        --reveal-duration (default: 700ms)
        --reveal-ease (default: cubic-bezier(.2,.7,.2,1))
        --reveal-delay (default: 0ms)
*/
#ap-root {
  /* Base (hidden) state */
}
#ap-root .ap-reveal {
  opacity: 0.001; /* keep element in layout, avoid flicker */
  transform: translateY(12px) scale(1.02);
  will-change: opacity, transform;
  transition: opacity var(--reveal-duration, 700ms) var(--reveal-ease, cubic-bezier(0.2, 0.7, 0.2, 1)), transform var(--reveal-duration, 700ms) var(--reveal-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
  transition-delay: var(--reveal-delay, 0ms);
  backface-visibility: hidden;
  transform-origin: 50% 50% 0;
}
#ap-root {
  /* Visible (revealed) state */
}
#ap-root .ap-reveal--visible {
  opacity: 1;
  transform: none;
}
#ap-root {
  /* Directional variants (starting offsets) */
}
#ap-root .ap-reveal[data-reveal=left] {
  transform: translateX(-16px);
}
#ap-root .ap-reveal[data-reveal=right] {
  transform: translateX(16px);
}
#ap-root .ap-reveal[data-reveal=up] {
  transform: translateY(16px);
}
#ap-root .ap-reveal[data-reveal=down] {
  transform: translateY(-16px);
}
#ap-root .ap-reveal[data-reveal=fade] {
  transform: none;
}
#ap-root {
  /* Ensure reveals are visible when printing */
}
@media print {
  #ap-root .ap-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/*!
  main.scss
  Entry point for the custom single page integrated into WordPress.

  Goals:
  - Keep all rules scoped under #ap-root to avoid conflicts with the active theme.
  - Provide a minimal reset, variables, and a small set of components.
  - Be production-friendly but easy to iterate during local preview.
*/
/* -----------------------------------------
 Scoped CSS custom properties (runtime)
----------------------------------------- */
#ap-root {
  /* Colors */
  --ap-color-bg: #ffffff;
  --ap-color-surface: #f9fafb;
  --ap-color-text: #111827;
  --ap-color-muted: #6b7280;
  --ap-color-border: #e5e7eb;
  --ap-color-primary: #b93f98;
  --ap-color-primary-contrast: #ffffff;
  --ap-color-focus: #06b6d4;
  /* Layout */
  --ap-max-width: 1920px; /* ~1152px */
  --ap-container-pad-x: clamp(1rem, 2.5vw, 2rem);
  --ap-section-pad-y: clamp(1.5rem, 3vw, 2.5rem);
  --ap-radius: 8px;
  --ap-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
  /* Scroll */
  --ap-scroll-offset: 0px;
  /* Typography */
  --ap-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --ap-lh: 1.6;
  --ap-fs-base: 1rem; /* 16px */
  --ap-fs-sm: clamp(0.9rem, 0.7vw, 0.975rem);
  --ap-fs-md: clamp(1rem, 0.9vw, 1.0625rem);
  --ap-fs-lg: clamp(1.0625rem, 1.2vw, 1.25rem);
  --ap-fs-xl: clamp(1.5rem, 2.5vw, 2rem);
  --ap-fs-xxl: clamp(2rem, 4vw, 3rem);
  /* Spacing */
  --ap-space-1: 0.25rem;
  --ap-space-2: 0.5rem;
  --ap-space-3: 0.75rem;
  --ap-space-4: 1rem;
  --ap-space-5: 1.25rem;
  --ap-space-6: 1.5rem;
  --ap-space-8: 2rem;
  --ap-space-12: 3rem;
}

/* -----------------------------------------
   Minimal reset (scoped)
----------------------------------------- */
#ap-root {
  /* font-family: var(--ap-font-sans); */
  /* font-size: var(--ap-fs-base); */
  /* line-height: var(--ap-lh); */
  /* color: var(--ap-color-text); */
  /* background: var(--ap-color-bg); */
}
#ap-root .ta-center {
  text-align: center;
}
#ap-root *,
#ap-root *::before,
#ap-root *::after {
  box-sizing: border-box;
}
#ap-root {
  /* Remove default margins from headings and block elements */
}
#ap-root h1,
#ap-root h2,
#ap-root h3,
#ap-root h4,
#ap-root h5,
#ap-root h6,
#ap-root p,
#ap-root figure,
#ap-root blockquote,
#ap-root dl,
#ap-root dd,
#ap-root dt,
#ap-root pre {
  margin: 0;
  padding: 0;
}
#ap-root {
  /* Reset list items and lists */
}
#ap-root li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#ap-root ul,
#ap-root ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
#ap-root li + li {
  margin-top: 0;
}
#ap-root {
  /* Better default headings within scope */
}
#ap-root h1,
#ap-root h2,
#ap-root h3,
#ap-root h4,
#ap-root h5,
#ap-root h6 {
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}
#ap-root {
  /* Media elements */
}
#ap-root img,
#ap-root svg,
#ap-root video,
#ap-root canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
#ap-root {
  /* Lists */
}
#ap-root ul[role=list],
#ap-root ol[role=list] {
  list-style: none;
  padding: 0;
  margin: 0;
}
#ap-root {
  /* Links */
  /* a {
    color: inherit;
    text-underline-offset: 2px;
    text-decoration-thickness: 2px;
    transition:
      color 150ms ease,
      text-decoration-color 150ms ease;

    &:hover {
      color: var(--ap-color-primary);
      text-decoration-color: var(--ap-color-primary);
    }

    &:focus-visible {
      outline: 3px solid var(--ap-color-focus);
      outline-offset: 2px;
      border-radius: 4px;
    }
  } */
  /* Buttons (baseline) */
}
#ap-root button {
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
}

/* -----------------------------------------
   Utilities (scoped)
----------------------------------------- */
#ap-root .u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#ap-root .u-prose {
  max-width: 70ch;
}
#ap-root .u-prose p + p {
  margin-top: var(--ap-space-3);
}
#ap-root .u-prose h2 {
  font-size: var(--ap-fs-xl);
  margin-top: var(--ap-space-8);
  margin-bottom: var(--ap-space-3);
}
#ap-root .u-prose h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  margin-top: var(--ap-space-6);
  margin-bottom: var(--ap-space-2);
}
#ap-root .u-prose ul,
#ap-root .u-prose ol {
  padding-left: 1.25rem;
  margin-block: var(--ap-space-3);
}
#ap-root .u-prose ul li + li,
#ap-root .u-prose ol li + li {
  margin-top: var(--ap-space-2);
}
#ap-root .u-prose a {
  color: var(--ap-color-primary);
}
#ap-root .u-prose a:hover {
  text-decoration-color: currentColor;
}

/* -----------------------------------------
   Responsive refinements
----------------------------------------- */
@media (min-width: 768px) {
  #ap-root .ap-page__hero .ap-page__lede {
    max-width: 60ch;
  }
}
@media (min-width: 1024px) {
  #ap-root .ap-page__hero {
    padding-block: clamp(3rem, 4vw, 5rem);
  }
}

/*# sourceMappingURL=main.css.map */