:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:root {
  --heading-font-family: "Oswald", sans-serif;
--text-font-family: "Lora", serif;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
.bpn-section {
  position: relative;
isolation: isolate;
/* Base band — vertical padding from etch-section-style unless data-padding overrides */
}
.bpn-section__surface {
  position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.bpn-section__container {
  position: relative;
z-index: 1;
display: flex;
flex-direction: column;
}
.bpn-section__content {
  display: flex;
flex-direction: column;
gap: var(--space-m);
width: 100%;
}
.bpn-section[data-padding="tight"] {
  padding-block: var(--section-space-s);
}
.bpn-section[data-padding="spacious"] {
  padding-block: var(--section-space-l);
}
.bpn-section__content[data-item-gap="tight"] {
  gap: var(--space-s);
}
.bpn-section__content[data-item-gap="spacious"] {
  gap: var(--space-l);
}
.bpn-section__container[data-content-width="narrow"] {
  max-width: var(--content-width-narrow, 48rem);
margin-inline: auto;
}
.bpn-section__container[data-content-width="full"] {
  max-width: none;
width: 100%;
}
.bpn-section[data-background="light"] {
  background-color: var(--bg-light);
color: var(--text-dark);
}
.bpn-section[data-background="dark"] {
  background-color: var(--bg-dark);
color: var(--text-light);
}
.bpn-section[data-background="ultra-light"] {
  background-color: var(--bg-ultra-light);
color: var(--text-dark);
}
.bpn-section[data-background="ultra-dark"] {
  background-color: var(--bg-ultra-dark);
color: var(--text-light);
}
.bpn-section[data-background="dark"] .bpn-content-header__title:not([data-visual-style="eyebrow"]):not([data-visual-style="pill"]), .bpn-section[data-background="ultra-dark"] .bpn-content-header__title:not([data-visual-style="eyebrow"]):not([data-visual-style="pill"]), .bpn-section[data-use-surface="true"][data-surface="surface-3"] .bpn-content-header__title:not([data-visual-style="eyebrow"]):not([data-visual-style="pill"]), .bpn-section[data-use-surface="true"][data-surface="surface-4"] .bpn-content-header__title:not([data-visual-style="eyebrow"]):not([data-visual-style="pill"]), .bpn-section[data-use-surface="true"][data-surface="surface-5"] .bpn-content-header__title:not([data-visual-style="eyebrow"]):not([data-visual-style="pill"]) {
  color: var(--text-light);
}
.bpn-section-media {
  position: relative;
overflow: hidden;
}
.bpn-section-media__media {
  position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.bpn-section-media__overlay {
  position: absolute;
inset: 0;
background: rgb(21 20 19 / 0.58);
pointer-events: none;
}
.bpn-section-media__image {
  display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
position: relative;
z-index: -1;
}
.bpn-section-media__video {
  display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
position: relative;
z-index: -1;
}
.bpn-section-media > [data-etch-element="container"] {
  position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-m);
justify-content: flex-start;
inline-size: 100%;
}
.bpn-section-media[data-padding="tight"] {
  padding-block: var(--section-space-s);
}
.bpn-section-media[data-padding="spacious"] {
  padding-block: var(--section-space-l);
}
.bpn-section-media[data-min-height="compact"] {
  min-block-size: 20rem;
}
.bpn-section-media[data-min-height="standard"] {
  min-block-size: 28rem;
}
.bpn-section-media[data-min-height="tall"] {
  min-block-size: 36rem;
}
.bpn-section-media[data-min-height="viewport"] {
  min-block-size: 100svh;
}
.bpn-section-media > [data-etch-element="container"][data-item-gap="tight"] {
  gap: var(--space-s);
}
.bpn-section-media > [data-etch-element="container"][data-item-gap="spacious"] {
  gap: var(--space-l);
}
.bpn-section-media > [data-etch-element="container"][data-content-width="narrow"] {
  max-width: var(--content-width-narrow, 48rem);
margin-inline: auto;
}
.bpn-section-media > [data-etch-element="container"][data-content-width="full"] {
  max-width: none;
width: 100%;
}
.bpn-section-media > [data-etch-element="container"][data-vertical-align="center"] {
  justify-content: center;
}
.bpn-section-media > [data-etch-element="container"][data-vertical-align="bottom"] {
  justify-content: flex-end;
}
.bpn-section-media .bpn-content-header, .bpn-section-media .bpn-content-header__body-text, .bpn-section-media .bpn-content-header__sub-heading:not([data-accent="true"]), .bpn-section-media .bpn-content-header__cta:not([class*="btn--"]) {
  color: light-dark(#ffffff, #ffffff);
}
.bpn-section-media .bpn-content-header__title[data-visual-style="page-title"], .bpn-section-media .bpn-content-header__title[data-visual-style="section-title"], .bpn-section-media .bpn-content-header__title[data-visual-style="card-title"] {
  color: light-dark(#ffffff, #ffffff);
}
.bpn-grid {
  container-type: inline-size;
container-name: bpn-grid;
display: grid;
width: 100%;
gap: var(--space-m);
align-items: stretch;
grid-template-columns: 1fr;
}
.bpn-grid[data-gap="tight"] {
  gap: var(--space-s);
}
.bpn-grid[data-gap="spacious"] {
  gap: var(--space-l);
}
.bpn-grid[data-vertical-align="top"] {
  align-items: start;
}
.bpn-grid[data-vertical-align="center"] {
  align-items: center;
}
.bpn-grid[data-vertical-align="bottom"] {
  align-items: end;
}
.bpn-grid__cell {
  min-width: 0;
display: flex;
flex-direction: column;
}
.bpn-grid__slot {
  display: flex;
flex-direction: column;
gap: var(--space-m);
width: 100%;
min-width: 0;
}
.bpn-grid[data-vertical-align="stretch"] .bpn-grid__cell > .bpn-grid__slot, .bpn-grid:not([data-vertical-align]) .bpn-grid__cell > .bpn-grid__slot {
  flex: 1 1 auto;
min-height: 100%;
}
.bpn-grid[data-vertical-align="stretch"] .bpn-grid__cell > .bpn-grid__slot > .bpn-card, .bpn-grid:not([data-vertical-align]) .bpn-grid__cell > .bpn-grid__slot > .bpn-card, .bpn-grid[data-vertical-align="stretch"] .bpn-grid__cell > .bpn-card, .bpn-grid:not([data-vertical-align]) .bpn-grid__cell > .bpn-card {
  flex: 1 1 auto;
min-height: 100%;
}
.bpn-flex {
  container-type: inline-size;
container-name: bpn-flex;
display: flex;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-m);
align-items: stretch;
justify-content: flex-start;
}
.bpn-flex[data-direction="column"] {
  flex-direction: column;
}
.bpn-flex[data-wrap="nowrap"] {
  flex-wrap: nowrap;
}
.bpn-flex[data-gap="tight"] {
  gap: var(--space-s);
}
.bpn-flex[data-gap="spacious"] {
  gap: var(--space-l);
}
.bpn-flex[data-justify="center"] {
  justify-content: center;
}
.bpn-flex[data-justify="end"] {
  justify-content: flex-end;
}
.bpn-flex[data-justify="space-between"] {
  justify-content: space-between;
}
.bpn-flex[data-justify="space-around"] {
  justify-content: space-around;
}
.bpn-flex[data-justify="space-evenly"] {
  justify-content: space-evenly;
}
.bpn-flex[data-align="top"] {
  align-items: flex-start;
}
.bpn-flex[data-align="center"] {
  align-items: center;
}
.bpn-flex[data-align="bottom"] {
  align-items: flex-end;
}
.bpn-flex__item {
  min-width: 0;
display: flex;
flex-direction: column;
}
.bpn-flex__slot {
  display: flex;
flex-direction: column;
gap: var(--space-m);
width: 100%;
min-width: 0;
}
.bpn-flex[data-align="stretch"] .bpn-flex__item > .bpn-flex__slot {
  flex: 1 1 auto;
min-height: 100%;
}
.bpn-flex[data-align="stretch"] .bpn-flex__item > .bpn-flex__slot > .bpn-card, .bpn-flex[data-align="stretch"] .bpn-flex__item > .bpn-card {
  flex: 1 1 auto;
min-height: 100%;
}
.bpn-card {
  display: flex;
flex-direction: column;
width: 100%;
padding: var(--space-m);
background: var(--card-background);
border: none;
border-radius: var(--card-radius);
box-shadow: var(--box-shadow-2);
color: var(--text-dark);
}
.bpn-card[data-padding="tight"] {
  padding: var(--space-s);
}
.bpn-card[data-padding="spacious"] {
  padding: var(--space-l);
}
.bpn-card[data-add-border="true"] {
  border: var(--border);
}
.bpn-card[data-shadow="none"] {
  box-shadow: none;
}
.bpn-card[data-shadow="subtle"] {
  box-shadow: var(--box-shadow-1);
}
.bpn-card[data-shadow="elevated"] {
  box-shadow: var(--box-shadow-3);
}
.bpn-card[data-background="transparent"] {
  background: transparent;
}
.bpn-card[data-background="light"] {
  background: var(--bg-light);
}
.bpn-card[data-background="dark"] {
  background: var(--bg-dark);
}
.bpn-card[data-background="primary"] {
  background: var(--primary-ultra-light);
}
.bpn-card[data-background="accent"] {
  background: var(--accent-ultra-light);
}
.bpn-card[data-fill-height="true"] {
  height: 100%;
}
.bpn-card[data-fill-height="true"] .bpn-card__content {
  display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.bpn-card[data-fill-height="true"] .bpn-card__content .bpn-content-header {
  display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.bpn-card[data-fill-height="true"] .bpn-content-header__footer {
  margin-block-start: auto;
}
.bpn-card__content {
  display: flex;
flex-direction: column;
gap: var(--space-m);
width: 100%;
flex: 1 1 auto;
min-width: 0;
}
.bpn-card__content[data-content-gap="tight"] {
  gap: var(--space-s);
}
.bpn-card__content[data-content-gap="spacious"] {
  gap: var(--space-l);
}
.bpn-card .bpn-content-header[data-color-mode="light"] .bpn-content-header__title:not([data-visual-style="eyebrow"]):not([data-visual-style="pill"]) {
  color: var(--text-dark);
}
.bpn-card .bpn-content-header[data-color-mode="light"] .bpn-content-header__body, .bpn-card .bpn-content-header[data-color-mode="light"] .bpn-content-header__sub-heading {
  color: var(--text-dark-muted);
}
.bpn-content-header {
  display: flex;
flex-direction: column;
gap: var(--space-s);
}
.bpn-content-header[data-width="wide"] {
  inline-size: 100%;
max-inline-size: var(--width-80);
}
.bpn-content-header[data-width="narrow"] {
  inline-size: 100%;
max-inline-size: var(--content-width-narrow, 48rem);
}
.bpn-content-header[data-width="wide"][data-centered="true"] {
  margin-inline: auto;
align-self: center;
}
.bpn-content-header[data-width="narrow"][data-centered="true"] {
  margin-inline: auto;
align-self: center;
}
.bpn-content-header[data-gap="tight"] {
  gap: var(--space-xs);
}
.bpn-content-header[data-gap="spacious"] {
  gap: var(--space-l);
}
.bpn-content-header[data-centered="true"] {
  text-align: center;
align-items: center;
}
.bpn-content-header[data-color-mode="dark"] {
  color: var(--text-light);
}
.bpn-content-header[data-color-mode="dark"] .bpn-content-header__title:not([data-visual-style="eyebrow"]):not([data-visual-style="pill"]) {
  color: var(--text-light);
}
.bpn-content-header__header {
  display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.bpn-content-header[data-centered="true"] .bpn-content-header__header {
  align-items: center;
}
.bpn-content-header__title[data-visual-style="eyebrow"] {
  font-size: var(--text-s);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
}
.bpn-content-header__title[data-visual-style="section-title"] {
  font-size: var(--h2);
font-weight: var(--heading-font-weight);
}
.bpn-content-header__title[data-visual-style="card-title"] {
  font-size: var(--h3);
font-weight: var(--heading-font-weight);
}
.bpn-content-header__title[data-visual-style="item-title"] {
  font-size: var(--h4);
font-weight: var(--heading-font-weight);
}
.bpn-content-header__sub-heading {
  font-size: var(--text-m);
line-height: 1.6;
color: var(--text-dark);
}
.bpn-content-header__sub-heading[data-scale="page-title"] {
  font-size: var(--h1);
font-weight: var(--heading-font-weight);
line-height: 1.1;
letter-spacing: -0.02em;
}
.bpn-content-header__sub-heading[data-accent="true"] {
  color: var(--accent);
}
.bpn-content-header__sub-heading[data-bold="true"] {
  font-weight: 700;
}
.bpn-content-header__body {
  display: flex;
flex-direction: column;
gap: var(--card-gap);
}
.bpn-content-header[data-centered="true"] .bpn-content-header__body {
  align-items: center;
}
.bpn-content-header__body-text {
  font-family: var(--text-font-family);
line-height: 1.6;
color: var(--text-dark);
}
.bpn-content-header[data-color-mode="dark"] .bpn-content-header__body-text {
  color: var(--text-light-muted);
}
.bpn-content-header__footer {
  display: flex;
flex-flow: row wrap;
align-items: center;
column-gap: var(--space-xs);
row-gap: var(--space-xs);
gap: var(--space-xs);
}
.bpn-content-header[data-centered="true"] .bpn-content-header__footer {
  align-self: stretch;
justify-content: center;
inline-size: 100%;
}
.bpn-content-header__cta {
  display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.bpn-content-header__footer .bpn-content-header__cta:not(.btn--primary):not(.btn--secondary):not(.btn--accent):not(.btn--base) {
  font-weight: 600;
color: var(--primary);
text-decoration: none;
}
.style-guide {
  /* Chrome design system. Fixed and project-independent: these build the
   guide. ACSS tokens are SPECIMENS and never appear in a chrome position.
   See SPEC-v2.md 3.4. Geometry is literal; colour derives from currentColor
   so it adapts to any surface without ever touching the palette. */

/* geometry */
--sg-space-3xs: 0.25rem;
--sg-space-2xs: 0.5rem;
--sg-space-xs: 0.75rem;
--sg-space-s: 1rem;
--sg-space-m: 1.5rem;
--sg-space-l: 2.5rem;
--sg-space-xl: 4rem;
--sg-space-2xl: 6rem;

/* type. Sizes are fixed so layout cannot deform; families inherit so the
   guide still reads as part of the site. */
--sg-text-2xs: 0.6875rem;
--sg-text-xs: 0.75rem;
--sg-text-s: 0.875rem;
--sg-text-m: 1rem;
--sg-text-l: 1.125rem;
--sg-text-xl: 1.5rem;
--sg-text-heading: 1.75rem;
--sg-label-size: var(--sg-text-xs);
--sg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

/* structure */
--sg-radius: 0.25rem;
--sg-radius-l: 0.5rem;
--sg-border-width: 1px;
--sg-rule-width: 2px;
--sg-label-col: 5rem;
/* A swatch column is as wide as the longest token name it has to carry.
   --secondary-ultra-light is the longest in the ACSS palette and renders
   139px at 11px mono, measured live; 9.5rem leaves room for a different
   monospace fallback. Below this the name wraps mid-word and stops being
   something you can read at a glance or copy.
   Height is separate on purpose: tying it to the width via aspect-ratio
   made the colour blocks grow to 159px just because the label got wider. */
--sg-swatch-min: 9.5rem;
--sg-swatch-height: 6rem;
--sg-measure: 65ch;
/* Where the sticky table of contents pins, and how far a heading has to clear
   it when an anchor is jumped to. Both come from one token so they cannot
   drift apart: raise the bar and the anchor offset follows.

   The WordPress admin bar is position:fixed over the top 32px, so at 0.5rem
   the guide's own bar slid underneath it. That only happens for logged-in
   users, which is to say for everyone looking at their own style guide.

   The two rules below are the no-JavaScript fallback and they follow
   WordPress's own breakpoint. The script measures the bar for real and
   overrides them, because under 600px WordPress stops fixing the bar and lets
   it scroll away, and an offset for a bar that is not there is just a gap. */
--sg-toc-top: var(--sg-space-2xs);
/* Bar height plus room to breathe. The closed bar measures 42px and is driven
   by --sg-label-size, which is fixed chrome, so it does not move with the
   project's type scale. 6rem leaves roughly 54px of clear page under it: at
   4rem the heading cleared the bar by 22px and still read as pinned to it. */
--sg-toc-offset: calc(var(--sg-toc-top) + 6rem);

/* ACSS's own hook. It ships [id] { scroll-margin-top: var(--offset, 0) }, and
   that rule has the same weight as ours but sits later in automatic.css, so it
   won and every anchor jump landed under the bar with 0 offset. Setting
   --offset here makes ACSS's rule compute the number we want, for every id in
   the guide including any added later. Scoped to .style-guide, so nothing
   outside it is touched. */
--offset: var(--sg-toc-offset);

body.admin-bar & { --sg-toc-top: calc(32px + var(--sg-space-2xs)); }
@media screen and (max-width: 782px) {
  body.admin-bar & { --sg-toc-top: calc(46px + var(--sg-space-2xs)); }
}

/* colour, from currentColor and never from the palette. A border derived
   this way cannot equal the swatch it outlines (TODO 3.12).

   These are the color-mix() fallbacks. color-mix() with transparent
   MULTIPLIES alpha, and that is the bug they carry: ACSS ships
   --text-color: var(--text-dark-muted), which is itself
   color-mix(in srgb, var(--text-dark) 80%, transparent). So currentColor
   arrives at 0.8 alpha on a stock ACSS site, 65% of it lands at 0.52, and
   the muted labels measured 3.84:1 against a 4.5:1 requirement. 134 of 217
   text elements failed. Not this site's quirk: it is the ACSS default, so
   every stock install hits it.

   The @supports block below replaces each one with relative colour syntax,
   which SETS alpha instead of multiplying it. The result no longer depends
   on how transparent the site's own text happens to be. The fallbacks stay
   for Firefox 120 to 127, which has light-dark() but not relative colour. */
--sg-border: color-mix(in oklch, currentColor 20%, transparent);
--sg-chip-bg: color-mix(in oklch, currentColor 8%, transparent);
--sg-surface: color-mix(in oklch, currentColor 4%, transparent);
--sg-muted: color-mix(in oklch, currentColor 65%, transparent);
/* accent for rules and underlines. Was var(--primary); one line to restore
   brand colour here if the risk is acceptable. */
--sg-accent: color-mix(in oklch, currentColor 40%, transparent);

/* Hatch for a specimen that has nothing to paint. Lighter than a border:
   it has to read as texture behind the label, not as a second frame. */
--sg-hatch: color-mix(in oklch, currentColor 14%, transparent);

/* A swatch edge that survives its own fill, from two fixed colours.
   Neither may derive from currentColor. The first attempt kept the
   currentColor border and added only the light ring, which fixed dark fills
   and then failed on --black inside .scheme--dark: there the palette flips
   the swatch to white AND currentColor to white, so border and ring were
   both white on white, edge 1.000. One light ring plus one dark border
   means at least one of the two is visible on any fill, in any scheme.
   Measured over all 64 swatches: 1 invisible edge before, 0 after. */
--sg-swatch-ring: rgba(255, 255, 255, 0.5);
--sg-swatch-edge: rgba(0, 0, 0, 0.28);

/* Illustrations with fixed fills need fixed ink, so currentColor must not
   follow the page inside the spacing rings. */
--sg-illustration-ink: #16181d;
--sg-illustration-paper: #ffffff;

/* Scheme toggle, adapted from the Scheme Switch Bravo pattern. The icon is
   box-shadow art driven by [data-current-scheme] on the root element; the
   colours are fixed chrome, same argument as the illustration ink: fixed
   art needs fixed colours, and the palette is what the toggle inspects. */
/* 16% filled the box to the rims; Manuel tuned this live to 8%. */
--sg-switch-size: 8%;
--sg-switch-icon: 10em;
--sg-switch-moon: #d9fbff;
--sg-switch-star: var(--sg-switch-moon);
--sg-switch-sun: #ffc233;
/* Matches the measured 42px closed toc bar, so the row reads as one unit. */
--sg-switch-box: 2.625rem;

/* stop Etch Builder reserving space for the 74 empty swatch elements */
--empty-element-size: 0;

/* Every ring paints a different token, so the ring geometry has to come from
   the element. The root holds only the neutral default: a ring that lost its
   inline values degrades to an unpainted box instead of vanishing. */
--sg-ring-fill: transparent;
--sg-ring-line: currentColor;
--sg-ring-space: 0;

/* Placed last on purpose. Every token above is redefined here, and a later
   declaration of equal specificity wins. Sitting earlier, the --sg-hatch
   override was silently overwritten by the plain declaration further down,
   which is the failure mode this file keeps running into: a declaration that
   is present, valid, and dead. */
@supports (color: oklch(from red l c h)) {
  & {
    --sg-border: oklch(from currentColor l c h / 0.2);
    --sg-chip-bg: oklch(from currentColor l c h / 0.08);
    --sg-surface: oklch(from currentColor l c h / 0.04);
    /* 0.65 is measured, not chosen. Below 0.6 the labels drop under AA on
       the --bg-light panel, which is the darkest surface the chrome sits on.
       Above 0.7 they stop reading as secondary against 0.8 body text. */
    --sg-muted: oklch(from currentColor l c h / 0.65);
    --sg-accent: oklch(from currentColor l c h / 0.4);
    --sg-hatch: oklch(from currentColor l c h / 0.14);
  }
}
}
.dev-note {
  display: none;
flex-direction: column;
gap: 0.5em;
background-color: #fff8dc;
border-left: 4px solid #f0ad4e;
padding: 15px 20px;
border-radius: 4px;
font-family: Arial, sans-serif;
line-height: 1.6;
inline-size: 100%;
max-inline-size: max-content;
&[data-display='Etch Only' i].etch-builder-block { display: flex; }
&[data-display='Gutenberg Only' i].wp-block { display: flex; }
&[data-display='Etch and Gutenberg' i]:is(.wp-block, .etch-builder-block) { display: flex; }
&::before { content: 'Developer Note'; font-weight: bold; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
}
.style-guide__title-section {
  /* The page header, not a guide section: tighter than the section rhythm
   and no anchor, so the TOC check has nothing unlisted to complain about. */
padding-block: var(--sg-space-l) 0;
}
.style-guide__container {
  gap: var(--sg-space-l);
}
.style-guide__page-title {
  /* Chrome, so the size is fixed; family and colour inherit from the site,
   same contract as every other heading in the guide's frame. */
font-size: 2.25rem;
line-height: 1.15;
margin: 0;
}
.style-guide__version {
  /* The Dev Note carries the same line, but it is builder-only and gated on
   user.loggedIn, so on the front end this is the only place the version
   exists at all. Chrome, so it reads --sg-* and never a project token. */
margin: var(--sg-space-2xs) 0 0;
font-family: var(--sg-mono);
font-size: var(--sg-label-size);
color: var(--sg-muted);
}
.style-guide__changelog {
  /* The same <details> idiom as the table of contents, and the native marker is
   kept for the same reason: it is the affordance that says this opens, and it
   is already keyboard and screen-reader correct. Closed by default, because a
   changelog is reference, not what anyone opened the page for. */
margin-block-start: var(--sg-space-s);
max-inline-size: var(--sg-measure);
}
.style-guide__changelog-summary {
  cursor: pointer;
font-size: var(--sg-label-size);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
color: var(--sg-muted);
}
.style-guide__changelog-list {
  display: flex;
flex-direction: column;
gap: var(--sg-space-2xs);
margin-block: var(--sg-space-xs) 0;
padding-inline-start: 0;
list-style: none;
font-size: var(--sg-text-s);
}
.style-guide__changelog-item {
  /* The version gets its own column so the labels line up and the eye can scan
   down them. Below 30rem there is no room for two columns and it stacks. */
display: grid;
grid-template-columns: minmax(2.75rem, auto) 1fr;
gap: var(--sg-space-xs);
align-items: baseline;

@media (width < 30rem) {
  & {
    grid-template-columns: 1fr;
    gap: var(--sg-space-3xs);
  }
}
}
.style-guide__changelog-version {
  font-family: var(--sg-mono);
font-size: var(--sg-label-size);
color: var(--sg-muted);
}
.style-guide__unset {
  /* A specimen whose token does not resolve. Not a defect in the guide: the
   colour slot is switched off in the ACSS dashboard, or the setting is empty.
   An empty box reads as a bug, a hatched box labelled "not set" reads as a
   finding, which is the whole point of dropping fallbacks (SPEC D1).

   Applied at runtime by the script, so a block has to carry this class or
   Etch ships only the style tracker and none of these declarations.

   !important is deliberate and narrow. The inline declaration that painted
   this surface is invalid at computed-value time, so it computes to nothing
   while still winning the cascade. Nothing is overridden here except a
   declaration that is already dead. */
background-image: repeating-linear-gradient(-45deg,
  var(--sg-hatch) 0 var(--sg-border-width),
  transparent var(--sg-border-width) 0.5rem) !important;
background-color: transparent !important;
border-style: dashed !important;
display: flex;
align-items: center;
justify-content: center;
padding: var(--sg-space-3xs);
min-block-size: 1.75em;
}
.style-guide__unset-label {
  /* The chip that names the absence. Sized and coloured like every other
   label in the guide, so it reads as annotation rather than as content. */
font-size: var(--sg-text-2xs);
font-family: var(--sg-mono);
line-height: 1.2;
color: var(--sg-muted);
background: var(--sg-surface);
border: var(--sg-border-width) solid var(--sg-border);
padding: 0.2em 0.45em;
border-radius: var(--sg-radius);
white-space: nowrap;
align-self: center;
}
.style-guide__toc-section {
  /* Carries the gutter, and nothing else: the block padding every other section
   in the guide gets would put 6rem of air above a bar that is 42px tall. */
padding-block: 0;
position: sticky;
inset-block-start: var(--sg-toc-top);
z-index: 10;
}
.style-guide__toc-row {
  display: flex;
align-items: flex-start;
gap: var(--sg-space-2xs);
}
.style-guide__toc {
  /* The panel is pinned by its container, and being pinned forces one decision
   here: it has to be opaque. Every colour in the chrome is translucent by
   design, and a list of links with the page scrolling through it is unreadable.

   Canvas is the browser's own page background. It follows color-scheme, so it
   is correct in light and dark without inventing a colour and without reaching
   for a project token, which SPEC 3.4 forbids. */
background: Canvas;
border: var(--sg-border-width) solid var(--sg-border);
border-radius: var(--sg-radius-l);
padding: var(--sg-space-2xs) var(--sg-space-s);
margin-block-end: var(--sg-space-m);

/* The bar shares its sticky row with the scheme toggle and gives up the
   width the button needs. min-inline-size so a long section name cannot
   push the button off the row. */
flex: 1 1 auto;
min-inline-size: 0;
}
.style-guide__toc-summary {
  /* The native marker is kept on purpose: it is the only affordance that says
   this thing opens, and it is already keyboard and screen-reader correct. */
cursor: pointer;
font-size: var(--sg-label-size);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
color: var(--sg-muted);

/* Pinned to the switch's box, minus the bar's own padding and border, so the
   closed bar and the scheme switch are the same height by construction. The
   bar's height used to be font-dependent: the chrome font SIZE is fixed but
   the family inherits from the site, and 12px Mada renders a 19.2px line
   where the reference font rendered taller. Measured: bar 37.6px against
   the 42px button on one site, 42.4px on another. One token now drives
   both. */
block-size: calc(var(--sg-switch-box) - 2 * var(--sg-space-2xs) - 2 * var(--sg-border-width));
/* line-height equal to the block centres the single line without display:
   flex, which would silently remove the native disclosure marker kept on
   purpose above. */
line-height: calc(var(--sg-switch-box) - 2 * var(--sg-space-2xs) - 2 * var(--sg-border-width));
}
.style-guide__toc-current {
  /* Filled by the script with the section you are currently in. Empty until
   then, and the separator only appears once there is something to separate,
   so the closed bar never shows a dangling slash. */
font-family: var(--sg-mono);
text-transform: none;
letter-spacing: normal;
font-weight: 400;
color: currentColor;
&:not(:empty)::before { content: " / "; }
}
.style-guide__toc-list {
  /* Same auto-fill idiom as every other grid in the guide, so the column count
   follows the width without a breakpoint. Capped and scrollable: open, 26
   entries would otherwise cover the viewport the bar is meant to help you
   move around in. */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
gap: var(--sg-space-s);
list-style: none;
margin: var(--sg-space-s) 0 0;
padding: 0;
max-block-size: min(60vh, 28rem);
overflow-y: auto;
& li { margin: 0; }
}
.style-guide__toc-link {
  font-size: var(--sg-text-s);
font-weight: 600;
color: currentColor;
text-decoration: none;
&:hover { text-decoration: underline; }
/* The section you are in is marked by weight and a rule, never by colour
   alone: colour alone fails for anyone who cannot separate the two. */
&[data-sg-current] {
  text-decoration: underline;
  text-decoration-thickness: var(--sg-rule-width);
  text-underline-offset: 0.3em;
}
}
.style-guide__toc-sublist {
  list-style: none;
margin: var(--sg-space-3xs) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sg-space-3xs);
}
.style-guide__toc-sublink {
  font-size: var(--sg-text-2xs);
font-family: var(--sg-mono);
color: var(--sg-muted);
text-decoration: none;
&:hover { text-decoration: underline; }
}
.style-guide__scheme-switch {
  /* Adapted from Scheme Switch Bravo. The box is guide chrome: opaque like
   the toc bar because it pins over scrolling content, edged and rounded
   from the same tokens. The art inside is the source pattern's, em-driven. */
inline-size: var(--sg-switch-box);
block-size: var(--sg-switch-box);
aspect-ratio: 1;
min-inline-size: 0;
min-block-size: 0;
display: grid;
place-items: center;
padding: 0;
position: relative;
overflow: hidden;
background: Canvas;
color: inherit;
border: var(--sg-border-width) solid var(--sg-border);
border-radius: var(--sg-radius-l);
cursor: pointer;

/* display: grid above would defeat the UA's [hidden] rule, and hidden is how
   the script retires the button on a single-scheme site. */
&[hidden] { display: none; }
}
.style-guide__scheme-switch-icon {
  font-size: var(--sg-switch-size);
min-inline-size: 0;
min-block-size: 0;
display: flex;
inline-size: 100%;
block-size: 100%;
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
translate: -50% -50%;
border-radius: 50%;
transition:
  rotate 400ms ease-in-out,
  box-shadow 400ms ease-in-out,
  background 400ms ease-in-out;

@media (prefers-reduced-motion: reduce) {
  & { transition: none; }
}

/* Sun */
[data-current-scheme='sun' i] & {
  font-size: calc(var(--sg-switch-size) * 1.2);
  background: var(--sg-switch-sun);
  inline-size: calc(var(--sg-switch-icon) * 0.7);
  block-size: calc(var(--sg-switch-icon) * 0.7);
  rotate: 0deg;
  box-shadow:
    3em 3em 0 5em var(--sg-switch-sun) inset,
    0 -5em 0 -2.7em var(--sg-switch-sun),
    3.5em -3.5em 0 -3em var(--sg-switch-sun),
    5em 0 0 -2.7em var(--sg-switch-sun),
    3.5em 3.5em 0 -3em var(--sg-switch-sun),
    0 5em 0 -2.7em var(--sg-switch-sun),
    -3.5em 3.5em 0 -3em var(--sg-switch-sun),
    -5em 0 0 -2.7em var(--sg-switch-sun),
    -3.5em -3.5em 0 -3em var(--sg-switch-sun);
}

/* Moon */
[data-current-scheme='moon' i] & {
  font-size: calc(var(--sg-switch-size) * 1);
  inline-size: var(--sg-switch-icon);
  block-size: var(--sg-switch-icon);
  background: transparent;
  rotate: -75deg;
  box-shadow:
    3em 2.5em 0 0em var(--sg-switch-moon) inset,
    /* stars */
    color-mix(in hsl, var(--sg-switch-star) 70%, transparent) 0em -7em 0 -4.5em,
    var(--sg-switch-star) 2em 6em 0 -4em,
    var(--sg-switch-star) -4em -7em 0 -4.3em,
    var(--sg-switch-star) 6em 2em 0 -4.2em,
    color-mix(in hsl, var(--sg-switch-star) 70%, transparent) 4.5em 4em 0 -4.5em,
    var(--sg-switch-star) -8em 0.5em 0 -4.4em,
    color-mix(in hsl, var(--sg-switch-star) 70%, transparent) -6em -4em 0 -4.5em,
    color-mix(in hsl, var(--sg-switch-star) 70%, transparent) -1em 7em 0 -4.5em;
}
}
.style-guide__section {
  /* ACSS gives top-level sections --section-space-m block padding, which
   would let a project token drive the guide own rhythm. Pin it. */
padding-block: var(--sg-space-2xl);
/* [id] because that is what ACSS's competing rule selects, and a bare class
   ties with it and loses on order. This also says the true thing: the scroll
   margin only matters on an element something can jump to. */
&[id] { scroll-margin-block-start: var(--sg-toc-offset); }
}
.style-guide__section-intro {
  gap: var(--sg-space-2xs);
  padding-block-end: var(--sg-space-m);
  border-block-end: var(--sg-border-width) solid var(--sg-border);
}
.style-guide__section-title {
  font-size: var(--sg-text-heading);
line-height: 1.2;
margin: 0;
}
.style-guide__section-desc {
  font-size: var(--sg-text-m);
  color: var(--sg-muted);
  max-inline-size: var(--sg-measure);
}
.style-guide__subsection {
  gap: var(--sg-space-m);
/* [id] because that is what ACSS's competing rule selects, and a bare class
   ties with it and loses on order. This also says the true thing: the scroll
   margin only matters on an element something can jump to. */
&[id] { scroll-margin-block-start: var(--sg-toc-offset); }
}
.style-guide__subsection-title {
  font-size: var(--sg-text-l);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding-block-end: var(--sg-space-2xs);
border-block-end: var(--sg-rule-width) solid var(--sg-accent);
align-self: flex-start;
}
.style-guide__heading-specimen {
  gap: var(--sg-space-xs);
}
.style-guide__heading-row {
  flex-direction: row;
  align-items: baseline;
  gap: var(--sg-space-m);
  padding-block: var(--sg-space-2xs);
  border-block-end: var(--sg-border-width) solid var(--sg-border);
  flex-wrap: wrap;
}
.style-guide__heading-label {
  font-size: var(--sg-label-size);
  color: var(--sg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  min-inline-size: var(--sg-label-col);
  flex-shrink: 0;
}
.style-guide__heading-var {
  font-size: var(--sg-label-size);
  font-family: var(--sg-mono);
  color: currentColor;
  background: var(--sg-chip-bg);
  padding: 0.15em 0.5em;
  border-radius: var(--sg-radius);
  white-space: nowrap;
  flex-shrink: 0;
}
.style-guide__heading-sample {
  margin: 0;
line-height: 1.2;
}
.style-guide__text-specimen {
  gap: var(--sg-space-xs);
}
.style-guide__text-row {
  flex-direction: row;
  align-items: baseline;
  gap: var(--sg-space-m);
  padding-block: var(--sg-space-2xs);
  border-block-end: var(--sg-border-width) solid var(--sg-border);
  flex-wrap: wrap;
}
.style-guide__text-label {
  font-size: var(--sg-label-size);
  color: var(--sg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  min-inline-size: var(--sg-label-col);
  flex-shrink: 0;
}
.style-guide__text-var {
  font-size: var(--sg-label-size);
  font-family: var(--sg-mono);
  color: currentColor;
  background: var(--sg-chip-bg);
  padding: 0.15em 0.5em;
  border-radius: var(--sg-radius);
  white-space: nowrap;
  flex-shrink: 0;
}
.style-guide__text-sample {
  margin: 0;
line-height: 1.4;
}
.style-guide__subsection-desc {
  font-size: var(--sg-text-s);
color: var(--sg-muted);
margin: 0;
max-inline-size: var(--sg-measure);
}
.style-guide__font-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--sg-space-m);
}
.style-guide__font-card {
  padding: var(--sg-space-m);
  background: var(--sg-surface);
  border-radius: var(--sg-radius);
  border: var(--sg-border-width) solid var(--sg-border);
  gap: var(--sg-space-xs);
}
.style-guide__font-card-label {
  font-size: var(--sg-label-size);
  color: var(--sg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.style-guide__font-card-name {
  /* The family the token resolves to, read off the rendered specimen by the
   script. Static text is a single space so the slot exists before the script
   runs and the card does not jump when it is filled. */
font-size: var(--sg-text-m);
font-weight: 600;
color: currentColor;
min-block-size: 1.5em;
}
.style-guide__font-card-sample {
  font-size: var(--sg-text-xl);
  line-height: 1.3;
}
.style-guide__font-card-var {
  font-size: var(--sg-label-size);
  font-family: var(--sg-mono);
  color: currentColor;
}
.style-guide__body-text-demo {
  padding: var(--sg-space-m);
  background: var(--sg-surface);
  border-radius: var(--sg-radius);
  border: var(--sg-border-width) solid var(--sg-border);
  max-inline-size: var(--sg-measure);
  gap: var(--sg-space-xs);
}
.style-guide__shade-label {
  font-size: var(--sg-text-s);
  font-weight: 600;
  margin: 0;
  margin-block-start: var(--sg-space-2xs);
}
.style-guide__swatch-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--sg-swatch-min), 1fr));
  gap: var(--sg-space-2xs);
}
.style-guide__swatch {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
}
.style-guide__swatch-color {
  block-size: var(--sg-swatch-height);
  border-radius: var(--sg-radius);
  border: var(--sg-border-width) solid var(--sg-border);
/* A painted swatch gets both fixed edges, so one of them is always visible
   (see --sg-swatch-edge). An unset swatch keeps the currentColor border
   instead: it is transparent and hatched, so its edge belongs to whatever
   surface shows through, not to a fill of its own. */
&:not([data-sg-unset]) {
  border-color: var(--sg-swatch-edge);
  box-shadow: inset 0 0 0 var(--sg-border-width) var(--sg-swatch-ring);
}
}
.style-guide__swatch-name {
  font-size: var(--sg-text-2xs);
  font-family: var(--sg-mono);
  color: var(--sg-muted);
  overflow-wrap: break-word;
  line-height: 1.3;
  padding-block-start: 0.25rem;
}
.style-guide__contextual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--sg-space-xs);
}
.style-guide__contextual-card {
  padding: var(--sg-space-m);
  border-radius: var(--sg-radius);
  border: 1px solid var(--sg-border);
  gap: var(--sg-space-2xs);
}
.style-guide__contextual-card-label {
  font-size: var(--sg-label-size);
  font-family: var(--sg-mono);
color: var(--sg-muted);
}
.style-guide__contextual-card-sample {
  font-size: var(--sg-text-m);
}
.style-guide__scheme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--sg-space-m);
}
.style-guide__scheme-card {
  display: flex;
flex-direction: column;
padding: var(--sg-space-l);
border-radius: var(--sg-radius-l);
border: var(--sg-border-width) solid var(--sg-border);
gap: var(--sg-space-m);
/* specimen: --bg-light and --text-dark are the subject here, they show
   the light-dark() inversion inside .scheme--light / .scheme--dark */
background: var(--bg-light);
color: var(--text-dark);
}
.style-guide__scheme-card-label {
  font-size: var(--sg-label-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
color: var(--sg-muted);
}
.style-guide__scheme-group {
  display: flex;
flex-direction: column;
gap: var(--sg-space-2xs);
}
.style-guide__scheme-group-label {
  /* The whole point of this section, and it was missing: which of these move.
   Sized as a caption, not a heading, so it labels the row without competing
   with the card title above it. */
font-size: var(--sg-text-2xs);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
color: var(--sg-muted);
}
.style-guide__scheme-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.style-guide__scheme-swatch-item {
  /* Chip beside its name rather than above it. The names are the reason this
   section exists and --primary-ultra-light is three times the width of a 3rem
   chip, so stacking them would set the column width from the label and leave
   the colours floating in space. */
display: flex;
align-items: center;
gap: var(--sg-space-3xs);
}
.style-guide__scheme-swatch {
  inline-size: 3rem;
  block-size: 2rem;
  border-radius: var(--sg-radius);
  border: var(--sg-border-width) solid var(--sg-border);
/* A painted swatch gets both fixed edges, so one of them is always visible
   (see --sg-swatch-edge). An unset swatch keeps the currentColor border
   instead: it is transparent and hatched, so its edge belongs to whatever
   surface shows through, not to a fill of its own. */
&:not([data-sg-unset]) {
  border-color: var(--sg-swatch-edge);
  box-shadow: inset 0 0 0 var(--sg-border-width) var(--sg-swatch-ring);
}
}
.style-guide__scheme-swatch-name {
  font-size: var(--sg-text-2xs);
font-family: var(--sg-mono);
color: var(--sg-muted);
white-space: nowrap;
}
.style-guide__scheme-heading {
  margin: 0;
font-size: var(--sg-text-l);
}
.style-guide__scheme-text {
  font-size: var(--sg-text-s);
  line-height: 1.5;
}
.style-guide__panel-note {
  /* Explains a result that otherwise reads as a broken palette. Sized like a
   label, not like body copy, so it annotates rather than competes. */
font-size: var(--sg-text-2xs);
font-family: var(--sg-mono);
line-height: 1.5;
color: var(--sg-muted);
margin: 0;
max-inline-size: var(--sg-measure);
}
.style-guide__spacing-nest-wrap {
  gap: var(--sg-space-l);
color: var(--sg-illustration-ink);

/* The concentric diagram is a measurement: every ring paints its token's real
   padding, and the label next to it names that token. At a narrow container
   the six paddings alone need more width than exists. Measured on the
   frontend at a 390px viewport: 396px of padding and border inside a 341px
   box, before any content. Shrinking the rings to fit would leave the label
   --space-xxl next to something that is not --space-xxl, which is the exact
   class of quiet falsehood this guide exists to remove.

   So the rings keep their true size and the diagram scrolls instead.
   container-type does two jobs here: it makes the switch queryable from the
   rings, and its inline-size containment stops a max-content ring from
   stretching this box in the first place. */
container-type: inline-size;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
scrollbar-color: var(--sg-border) transparent;

}
.style-guide__spacing-ring {
  background: var(--sg-ring-fill);
border: 2px dashed var(--sg-ring-line);
border-radius: var(--sg-radius-l);
padding: var(--sg-ring-space);

/* Above the threshold the rings stretch to the wrap, which is what makes the
   diagram read as one nested object. Below it they take their natural size
   and the wrap scrolls, instead of being squeezed until their contents spill.

   The threshold is measured, not chosen: the diagram needs 539px in a 524px
   wrap at a 600px viewport, and clears with 100px to spare by 768px, so it
   crosses at roughly 34rem of container. 36rem leaves room for a longer label
   or a different monospace fallback. */
@container (inline-size < 36rem) {
  & { min-inline-size: max-content; }
}
}
.style-guide__spacing-nest-label {
  font-size: var(--sg-label-size);
  font-family: var(--sg-mono);
  color: currentColor;
  background: var(--sg-chip-bg);
  padding: 0.15em 0.5em;
  border-radius: var(--sg-radius);
  white-space: nowrap;
  flex-shrink: 0;
}
.style-guide__spacing-nest-core {
  background: var(--sg-illustration-ink);
color: var(--sg-illustration-paper);
padding: var(--sg-space-xs);
border-radius: var(--sg-radius);
font-size: var(--sg-label-size);
font-family: var(--sg-mono);
text-align: center;
white-space: nowrap;
}
.style-guide__gap-demo-wrap {
  gap: var(--sg-space-l);
}
.style-guide__gap-demo-section {
  gap: var(--sg-space-2xs);
}
.style-guide__gap-demo-label {
  font-size: var(--sg-label-size);
  font-family: var(--sg-mono);
  color: currentColor;
  background: var(--sg-chip-bg);
  padding: 0.15em 0.5em;
  border-radius: var(--sg-radius);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
}
.style-guide__bridge-box {
  background: hsl(25 80% 90%);
border: var(--sg-border-width) solid var(--sg-border);
border-radius: var(--sg-radius);
}
.style-guide__bridge-inner {
  background: var(--sg-surface);
border: var(--sg-border-width) dashed hsl(25 80% 70%);
border-radius: var(--sg-radius);
padding: var(--sg-space-2xs);
font-size: var(--sg-label-size);
color: var(--sg-illustration-ink);
text-align: center;
}
.style-guide__gap-content-stack {
  gap: var(--content-gap);
  padding: var(--sg-space-m);
  background: var(--sg-surface);
  border: var(--sg-border-width) solid var(--sg-border);
  border-radius: var(--sg-radius);
}
.style-guide__gap-block {
  padding: var(--sg-space-xs);
  background: hsl(210 80% 92%);
  border: var(--sg-border-width) dashed hsl(210 80% 75%);
  border-radius: var(--sg-radius);
  font-size: var(--sg-label-size);
  color: var(--sg-illustration-ink);
/* Fixed fill, so the text on it has to be fixed too. currentColor follows
   the page and flips white under a dark scheme, which left this label at
   1.1:1 on its own background. Same reason the spacing rings carry
   --sg-illustration-ink. */
}
.style-guide__gap-grid-demo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  padding: var(--sg-space-m);
  background: var(--sg-surface);
  border: var(--sg-border-width) solid var(--sg-border);
  border-radius: var(--sg-radius);
}
.style-guide__gap-grid-cell {
  block-size: 3rem;
  background: hsl(160 60% 90%);
  border: var(--sg-border-width) dashed hsl(160 60% 70%);
  border-radius: var(--sg-radius);
}
.style-guide__gap-container-demo {
  gap: var(--container-gap);
  padding: var(--sg-space-m);
  background: var(--sg-surface);
  border: var(--sg-border-width) solid var(--sg-border);
  border-radius: var(--sg-radius);
}
.style-guide__gap-container-block {
  padding: var(--sg-space-m);
  background: hsl(45 80% 90%);
  border: var(--sg-border-width) dashed hsl(45 80% 70%);
  border-radius: var(--sg-radius);
  font-size: var(--sg-label-size);
  color: var(--sg-illustration-ink);
  text-align: center;
/* Fixed fill, so the text on it has to be fixed too. currentColor follows
   the page and flips white under a dark scheme, which left this label at
   1.1:1 on its own background. Same reason the spacing rings carry
   --sg-illustration-ink. */
}
.style-guide__gap-gutter-demo {
  background: hsl(25 80% 90%);
  border: var(--sg-border-width) solid var(--sg-border);
  border-radius: var(--sg-radius);
  padding-inline: var(--gutter);
  padding-block: var(--sg-space-m);
}
.style-guide__gap-gutter-inner {
  background: var(--sg-surface);
  border: var(--sg-border-width) dashed hsl(25 80% 70%);
  border-radius: var(--sg-radius);
  padding: var(--sg-space-m);
  font-size: var(--sg-label-size);
  color: var(--sg-illustration-ink);
  text-align: center;
/* Fixed fill, so the text on it has to be fixed too. currentColor follows
   the page and flips white under a dark scheme, which left this label at
   1.1:1 on its own background. Same reason the spacing rings carry
   --sg-illustration-ink. */
}
.style-guide__spacing-band {
  /* The section-spacing diagram shows vertical rhythm, so its bands carry block
   padding only and span the full width. They have no inline padding to run out
   of room with, which is why this one never overflowed. */
background: var(--sg-ring-fill);
border: 2px dashed var(--sg-ring-line);
border-radius: var(--sg-radius-l);
padding-block: var(--sg-ring-space);
}
.style-guide__grid-demo {
  /* Frame only. The grid itself is the inline declaration on the block,
   which is the ACSS 4 idiom: variables on your own class, no .grid--*
   utility classes (removed in 4.0). */
padding: var(--sg-space-m);
background: var(--sg-surface);
border: var(--sg-border-width) solid var(--sg-border);
border-radius: var(--sg-radius);
}
.style-guide__grid-cell {
  min-block-size: 3rem;
display: grid;
place-items: center;
background: hsl(260 60% 92%);
border: var(--sg-border-width) dashed hsl(260 60% 75%);
border-radius: var(--sg-radius);
font-size: var(--sg-label-size);
font-family: var(--sg-mono);
/* Fixed fill, fixed ink, same reason as the gap blocks. */
color: var(--sg-illustration-ink);
}
.style-guide__content-grid-demo {
  /* Same contract as the grid demos: .content-grid on this element is the
   specimen. The fallback stack below only shows when the feature is off. */
display: flex;
flex-direction: column;
gap: var(--sg-space-2xs);
padding-block: var(--sg-space-s);
border-block: var(--sg-border-width) solid var(--sg-border);
}
.style-guide__zone-band {
  background: hsl(210 80% 92%);
border: var(--sg-border-width) dashed hsl(210 80% 70%);
border-radius: var(--sg-radius);
padding: var(--sg-space-2xs) var(--sg-space-xs);
display: flex;
align-items: center;
gap: var(--sg-space-xs);
min-inline-size: 0;
color: var(--sg-illustration-ink);
}
.style-guide__zone-label {
  font-size: var(--sg-label-size);
font-family: var(--sg-mono);
overflow-wrap: anywhere;
}
.style-guide__var-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--sg-space-2xs);
  margin: 0;
  padding: 0;
}
.style-guide__var-pair {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sg-space-xs);
  padding: var(--sg-space-2xs) var(--sg-space-xs);
  background: var(--sg-surface);
  border-radius: var(--sg-radius);
  border: var(--sg-border-width) solid var(--sg-border);
}
.style-guide__var-dt {
  font-family: var(--sg-mono);
  font-size: var(--sg-label-size);
  color: currentColor;
  margin: 0;
  white-space: nowrap;
}
.style-guide__var-dd {
  font-size: var(--sg-label-size);
  color: var(--sg-muted);
  margin: 0;
  text-align: end;
}
.style-guide__hidden-demo {
  padding: var(--sg-space-s) var(--sg-space-m);
background: var(--sg-surface);
border: var(--sg-border-width) solid var(--sg-border);
border-radius: var(--sg-radius);
}
.style-guide__surface-strip {
  padding: var(--sg-space-s) var(--sg-space-m);
border: var(--sg-border-width) solid var(--sg-border);
border-radius: var(--sg-radius);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--sg-space-xs) var(--sg-space-m);
}
.style-guide__strip-sample {
  font-size: var(--sg-text-s);
margin: 0;
}
.style-guide__radius-grid {
  display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
gap: var(--sg-space-s);
}
.style-guide__radius-item {
  gap: var(--sg-space-2xs);
align-items: center;

/* The flex-div's own display would defeat the UA [hidden] rule, and hidden
   is how an optional step leaves when its dashboard switch is off. */
&[hidden] { display: none; }
}
.style-guide__radius-cell {
  /* A square, because --radius-50 and --radius-circle only read correctly on
   one: on a wide bar 50% is an ellipse and 999px is a pill, and neither says
   anything about how the token behaves on a card or an avatar. */
inline-size: 100%;
aspect-ratio: 1;
display: grid;
place-items: center;
background: hsl(260 60% 92%);
border: var(--sg-border-width) dashed hsl(260 60% 75%);
font-size: var(--sg-label-size);
font-family: var(--sg-mono);
/* Fixed fill, fixed ink, same reason as the gap blocks. */
color: var(--sg-illustration-ink);
}
.style-guide__divider-surfaces {
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: var(--sg-space-s);
}
.style-guide__divider-panel {
  /* No color here on purpose, same as .style-guide__dark-panel: the dark one
   carries .bg--dark so ACSS assigns the foreground and currentColor follows. */
gap: var(--sg-space-s);
padding: var(--sg-space-m);
border-radius: var(--sg-radius);
border: var(--sg-border-width) solid var(--sg-border);
}
.style-guide__divider-panel--light {
  background: var(--sg-surface);
}
.style-guide__dark-panel-label {
  font-size: var(--sg-label-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin: 0;
color: var(--sg-muted);
}
.style-guide__divider-row {
  flex-direction: row;
align-items: center;
gap: var(--sg-space-xs);
}
.style-guide__divider-line {
  /* The specimen. Its border comes from the inline style, nothing else. */
flex: 1 1 auto;
min-inline-size: 4rem;
}
.style-guide__divider-anatomy {
  display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
gap: var(--sg-space-s);
}
.style-guide__divider-item {
  gap: var(--sg-space-2xs);
padding: var(--sg-space-xs);
background: var(--sg-surface);
border-radius: var(--sg-radius);
border: var(--sg-border-width) solid var(--sg-border);
}
.style-guide__divider-bar {
  /* One token at a time: height or width comes from the inline style, the ink
   is currentColor so the bar stays visible on any surface. */
inline-size: 100%;
block-size: var(--sg-rule-width);
background: currentColor;
}
.style-guide__divider-styled {
  /* Shows --divider-style on its own: width and colour are chrome so the
   dashed / dotted / solid keyword is the only variable in the picture. */
inline-size: 100%;
border-block-start-width: var(--sg-rule-width);
border-block-start-color: currentColor;
}
.style-guide__divider-swatch {
  block-size: 2rem;
border-radius: var(--sg-radius);
border: var(--sg-border-width) solid var(--sg-border);
}
.style-guide__divider-stack {
  /* No gap: the spacing is the token itself, carried inline on every item after
   the first as margin above the rule and padding below it, which is how the
   ?divider-all recipe lays dividers out. The rule between the items is chrome
   so the spacing is the only thing the token controls, and it reads on both
   sides of the line, not just above it. */
gap: 0;
& > * + * { border-block-start: var(--sg-border-width) solid currentColor; }
}
.style-guide__shadow-stage {
  /* Shadows need a lit surface: a shadow on a dark page is invisible, which
   is a property of shadows and not of the tokens. Fixed paper, fixed ink,
   in both schemes, same contract as the spacing rings. */
background: var(--sg-illustration-paper);
color: var(--sg-illustration-ink);
padding: var(--sg-space-l);
border: var(--sg-border-width) solid var(--sg-border);
border-radius: var(--sg-radius);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sg-space-l);
}
.style-guide__shadow-box {
  inline-size: 9rem;
block-size: 5.5rem;
background: var(--sg-illustration-paper);
border-radius: var(--sg-radius);
display: grid;
place-items: center;
font-size: var(--sg-label-size);
font-family: var(--sg-mono);
}
.style-guide__shadow-text {
  font-size: var(--sg-text-xl);
font-weight: 700;
margin: 0;
}
.style-guide__shadow-item {
  display: flex;
flex-direction: column;
align-items: center;
gap: var(--sg-space-2xs);
}
.style-guide__shadow-drop {
  /* filter on the parent, clip-path on the child: clipping and filtering the
   same element would clip the shadow away with it. */
display: grid;
place-items: center;
}
.style-guide__shadow-drop-shape {
  inline-size: 4rem;
aspect-ratio: 1;
background: var(--sg-illustration-ink);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.style-guide__link-surface {
  display: flex;
  flex-direction: column;
  padding: var(--sg-space-l);
  border-radius: var(--sg-radius);
  gap: var(--sg-space-m);
border: var(--sg-border-width) solid var(--sg-border);
}
.style-guide__link-surface-label {
  font-size: var(--sg-label-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin: 0;
color: var(--sg-muted);
}
.style-guide__link-surface-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sg-space-l);
  align-items: flex-start;
}
.style-guide__link-sample {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.style-guide__link-sample-label {
  font-size: var(--sg-text-2xs);
font-family: var(--sg-mono);
color: var(--sg-muted);
}
.style-guide__para-link-demo {
  margin: 0;
  padding: var(--sg-space-m);
  background: var(--sg-surface);
  border-radius: var(--sg-radius);
  border: var(--sg-border-width) solid var(--sg-border);
}
.style-guide__button-grid {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sg-space-xs);
  align-items: center;
}
.style-guide__button-group {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-2xs);
  align-items: center;
}
.style-guide__button-group-label {
  font-size: var(--sg-label-size);
  color: var(--sg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.style-guide__dark-panel {
  /* No color here on purpose. The panel carries .bg--dark / .bg--ultra-dark,
   so ACSS Automatic Color Relationships assign the foreground, which also
   keeps currentColor correct for every --sg-* chrome token inside.
   v1.3 set color: var(--white), which light-dark() can resolve to black
   on a dark panel. That was TODO 3.1. */
display: flex;
flex-direction: column;
padding: var(--sg-space-l);
border-radius: var(--sg-radius-l);
gap: var(--sg-space-l);
}
.style-guide__dark-panel-section-label--first {
  font-size: var(--sg-label-size);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin: 0;
color: var(--sg-muted);
}
.style-guide__dark-panel-section-label {
  font-size: var(--sg-label-size);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin: 0;
  margin-block-start: var(--sg-space-l);
  padding-block-start: var(--sg-space-l);
  border-block-start: var(--sg-border-width) solid currentColor;
color: var(--sg-muted);
}
.style-guide__strip-label {
  font-size: var(--sg-label-size);
font-family: var(--sg-mono);
background: var(--sg-chip-bg);
padding: 0.15em 0.5em;
border-radius: var(--sg-radius);
white-space: nowrap;
}
.style-guide__focus-row {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sg-space-s);
}
.style-guide__focus-note {
  font-size: var(--sg-text-s);
color: var(--sg-muted);
}
.style-guide__bpn-specimen-grid {
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--sg-space-s, var(--space-s, 1rem));
margin-block-start: var(--sg-space-s, var(--space-s, 1rem));
}
.style-guide__bpn-surface-card {
  min-block-size: 9rem;
padding: var(--sg-space-m, var(--space-m, 1.25rem));
border: var(--sg-border-width, 1px) solid var(--sg-border, var(--border-color, #ccc));
border-radius: var(--sg-radius, var(--radius, 5px));
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: var(--sg-space-xs, 0.5rem);
&[data-relationship="light"] {
  color: #111 !important;
}
&[data-relationship="dark"] {
  color: #fff !important;
}
}
.style-guide__bpn-surface-card[data-relationship="light"] {
  color: #111 !important;
}
.style-guide__bpn-card-label {
  margin: 0;
font-size: var(--text-xs, 0.75rem);
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
opacity: 0.85;
}
.style-guide__bpn-card-sample {
  margin: 0;
font-size: var(--text-m, 1rem);
line-height: 1.45;
}
.style-guide__bpn-surface-card[data-relationship="dark"] {
  color: #fff !important;
}
.style-guide__bpn-overlay-stage {
  position: relative;
min-block-size: 10rem;
border-radius: var(--sg-radius, var(--radius, 5px));
overflow: hidden;
border: var(--sg-border-width, 1px) solid var(--sg-border, var(--border-color, #ccc));
background-image: url(/wp-content/uploads/bpn-qa/bpn-qa-hero-community.png);
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
padding: var(--sg-space-m, var(--space-m, 1.25rem));
color: #fff;
}
.style-guide__bpn-overlay-copy {
  position: relative;
z-index: 1;
margin: 0;
max-inline-size: 36rem;
color: #fff;
text-shadow: 0 1px 2px color-mix(in srgb, #000 45%, transparent);
}
.style-guide__bpn-card-demo {
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--sg-space-s, var(--space-s, 1rem));
}
.style-guide__bpn-icon-row {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sg-space-m, var(--space-m, 1.25rem));
margin-block-start: var(--sg-space-s, var(--space-s, 1rem));
}
.style-guide__bpn-icon-item {
  display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
min-inline-size: 6rem;
}
.style-guide__bpn-scheme-row {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sg-space-m, var(--space-m, 1.25rem));
margin-block-start: var(--sg-space-s, var(--space-s, 1rem));
padding: var(--sg-space-m, var(--space-m, 1.25rem));
border: var(--sg-border-width, 1px) solid var(--sg-border, var(--border-color, #ccc));
border-radius: var(--sg-radius, var(--radius, 5px));
background: var(--bg-ultra-light, #f5f5f5);
}
.bpn-scheme-switch {
  display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
border-radius: 999px;
border: 1px solid light-dark(rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.35));
background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.18));
inline-size: max-content;
max-inline-size: 100%;
line-height: 0;
vertical-align: middle;

:where(
  .bpn-section[data-background="dark"],
  .bpn-section[data-background="ultra-dark"],
  .scheme--dark,
  .bg--dark,
  .bg--ultra-dark
) & {
  color-scheme: dark;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

& > button {
  display: inline-grid !important;
  place-items: center;
  inline-size: 1.75rem !important;
  block-size: 1.75rem !important;
  min-inline-size: 1.75rem !important;
  min-block-size: 1.75rem !important;
  padding: 0 !important;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: light-dark(rgba(0, 0, 0, 0.58), rgba(255, 255, 255, 0.92));
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

:where(
  .bpn-section[data-background="dark"],
  .bpn-section[data-background="ultra-dark"],
  .scheme--dark,
  .bg--dark,
  .bg--ultra-dark
) & > button {
  color: #ffffff;
}

& > button:hover {
  color: light-dark(rgba(0, 0, 0, 0.92), #ffffff);
}

& > button:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 2px;
}

& > button[aria-checked="true"] {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

& svg {
  inline-size: 0.95rem !important;
  block-size: 0.95rem !important;
  width: 0.95rem !important;
  height: 0.95rem !important;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

:where(
  .bpn-section[data-background="dark"],
  .bpn-section[data-background="ultra-dark"],
  .scheme--dark,
  .bg--dark,
  .bg--ultra-dark
) & svg {
  stroke-width: 2.15;
}
}
.bpn-core-pattern-label {
  display: inline-block;
font-size: var(--text-s, 0.875rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-dark-muted, #71717a);
margin-block-end: var(--space-s);
padding: var(--space-2xs) var(--space-xs);
border-radius: var(--radius-s, 0.375rem);
background: color-mix(in srgb, var(--white) 88%, transparent);
}
.bpn-section[data-background="dark"] .bpn-core-pattern-label, .bpn-section[data-background="ultra-dark"] .bpn-core-pattern-label {
  color: var(--text-light-muted);
background: color-mix(in srgb, var(--black) 35%, transparent);
}
.bpn-section-media .bpn-core-pattern-label {
  color: light-dark(#ffffff, #ffffff);
background: color-mix(in srgb, var(--black) 45%, transparent);
}
.bpn-core-patterns-intro {
  padding-block: var(--space-l);
padding-inline: var(--space-m);
}
.bpn-scheme-switch-float {
  position: fixed;
inset-block-end: 1.25rem;
inset-inline-end: 1.25rem;
z-index: 99990;
}
.dwc-slider-wrapper {
  min-block-size: var(--slider-wrapper-height);
  background-color: var(--slider-wrapper-bg);
  overflow-x: clip;
}
.slider-wrapper-instructions {
  display: flex;
  flex-direction: column;
  min-block-size: 20vh;
  max-block-size: none;
  align-items: center;
	justify-content: center;
}
.splide {
  --gutter: initial;
  --section-padding-block: initial;
  gap: 0;
  /* overflow: clip; */
  /* block-size: calc(var(--slide-height-active) + (var(--slider-padding-block) * 2)); */
  & .splide__track {
    padding-block: var(--slider-padding-block);
  }

  &[data-static-layout] {
    padding-inline: var(--slider-padding-inline);
  }

  & .splide__slide {
    display: flex;
    perspective: var(--slide-perspective);
  }

  &[data-overflow='true'] .splide__track {
    overflow: visible !important;
  }

  [data-slider-wrapper] & {
    inline-size: 100%;
  }

  & .slide-content {
    block-size: 100%;
    inline-size: min(100%, 100vw);
  }

  /*# INSIDE ETCH  */

  /*### SCROLL BAR  */

  @supports (scrollbar-width: auto) {
    html:has(&) {
      scrollbar-color: inherit;
    }
  }

  .etch-builder-block .splide {
    scrollbar-width: thin !important;
    scrollbar-color: #4a4a4a #1a1a1a;
  }

  .etch-builder-block.splide__track::-webkit-scrollbar {
    width: 8px;
    height: 12px;
  }

  .etch-builder-block.splide__track::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 10px;
  }

  .etch-builder-block.splide__track::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 10px;
    transition: background 0.3s ease;
  }

  .etch-builder-block.splide__track:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(to left, #ff4d6a, blue) !important;
  }

  .etch-builder-block.splide__track::-webkit-scrollbar-thumb:hover {
    background: #5a5a5a;
  }
  /*### SCROLLBAR ENDS  */

  /*# INSIDE ETCH ENDS  */
}
.dwc-slider-controls-wrapper {
  display: flex;
}
.splide__slide {
  & > div:has(.slide-placeholder-info) {
    min-block-size: 200px;
    background-color: color-mix(in oklch, black 30%, transparent);
    background-image: radial-gradient(circle, white 1px, transparent 1px);
    background-size: 24px 24px;
    height: 100%;
  }
}
.slider-navigation-vars {
  /* Controls styles for built in slider navigation elements only: 
  - Arrows (nav buttons) 
  - Pagination
  - Play/Pause button
  - Progress
*/

  /*# ALL ARROWS  */

  /*## Normal */
  --arrow-bg: rgba(255, 255, 255, 0.06);
  --arrow-clr: color-mix(in oklch, white 50%, transparent);
  --arrow-radius: 50%;
  --arrow-width: 2.75rem;
  --arrow-height: var(--arrow-width);
  --arrow-padding: 0;
  --arrow-aspect-ratio: 1;
  --arrow-icon-size: 1.125rem;
  --arrow-bg-blur: 10px;
  --arrow-border: 1px solid rgba(255, 255, 255, 0.1);
  --arrow-opacity: 0;
  --arrow-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /*## Hover */
  --arrow-hover-bg: color-mix(in oklch, var(--primary) 20%, transparent);
  --arrow-hover-clr: var(--white, white);
  --arrow-hover-opacity: 1;
  --arrow-hover-border-clr: var(--primary, #ff4d6a);

  /*## POSITIONING  */

  /*### PREV ARROW  */
  --prev-arrow-top: 50%;
  --prev-arrow-bottom: auto;
  --prev-arrow-right: auto;
  --prev-arrow-left: 0.875rem;
  --prev-arrow-transform: translateY(-50%);

  /*### NEXT ARROW  */
  --next-arrow-top: 50%;
  --next-arrow-bottom: auto;
  --next-arrow-right: 0.875rem;
  --next-arrow-left: auto;
  --next-arrow-transform: translateY(-50%);

  /*# PAGINATION  */

  /*## WRAPPER  */
  --pagination-position: absolute;
  --pagination-padding: 12px 14px;
  --pagination-bg: rgba(0, 0, 0, 0.35);
  --pagination-bg-blur: 8px;
  --pagination-radius: 1.25rem;
  --pagination-gap: 0.5rem;

  /*### POSITIONING  */
  --pagination-top: auto;
  --pagination-bottom: 1rem;
  --pagination-left: 50%;
  --pagination-right: auto;
  --pagination-transform: translateX(-50%);

  /*## DOTS  */

  /*### Normal  */
  --dot-size: 8px;
  --dot-radius: 50%;
  --dot-clr: rgba(255, 255, 255, 0.2);
  --dot-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /*### Hover  */
  --dot-hover-clr: rgba(255, 255, 255, 0.5);

  /*### Active */
  --dot-clr-active: var(--primary, #ff4d6a);
  --dot-transform-active: scale(1.3);

  /*# PLAY/PAUSE BUTTON  */

  /*## Normal */
  --play-pause-size: 32px;
  --play-pause-radius: 50vw;
  --play-pause-border: 1px solid rgba(255, 255, 255, 0.1);
  --play-pause-clr: var(--white, white);
  --play-pause-bg: rgba(0, 0, 0, 0.4);
  --play-pause-bg-blur: 8px;

  /*## Hover */
  --play-pause-hover-bg: color-mix(in oklch, var(--primary) 20%, transparent);
  --play-pause-hover-border-clr: var(--primary, #ff4d6a);

  /*## POSITIONING  */
  --play-pause-top: auto;
  --play-pause-bottom: 14px;
  --play-pause-left: auto;
  --play-pause-right: 14px;
  --play-pause-z-index: 10;

  /*# PROGRESS  */

  /*## Normal */
  --progress-fill-clr: var(--primary, #ff4d6a);
  --progress-fill-clr-2: var(--primary-ultra-light, #ff8fa3); /* bar progress*/
  --progress-bg: rgba(0, 0, 0, 0.4); /* non cirular counter*/
  --progress-bg-blur: 8px; /* non cirular counter*/
  --progress-border-radius: 20px; /* non cirular counter*/
  --progress-border: 1px solid rgba(255, 255, 255, 0.08); /* non cirular counter*/
  --progress-padding: 4px 12px; /* non cirular counter*/
  --progress-track-clr: rgba(255, 255, 255, 0.1);
  --progress-separator-clr: var(--progress-clr-total);
  --progress-separator-gap: 0.1em;
  --progress-separator-size: var(--progress-font-size-total);

  /*## Current text */
  --progress-clr-current: var(--primary, #ff4d6a);
  --progress-font-size-current: 0.8rem;

  /*## Total text */
  --progress-clr-total: #8888a0;
  --progress-font-size-total: 0.6rem;

  /*## POSITIONING  */
  --progress-top: auto;
  --progress-bottom: 0;
  --progress-left: 14px;
  --progress-right: auto;
  --progress-z-index: 10;

  /*### Counter  */
  & [data-auto-generated][data-progress-type='counter'] {
    --progress-top: auto;
    --progress-bottom: 12px;
    --progress-left: auto;
    --progress-right: 12px;
  }

  /*### Circular  */
  & [data-auto-generated][data-progress-type='circular'] {
    --progress-top: 14px;
    --progress-bottom: auto;
    --progress-left: 14px;
    --progress-right: auto;
  }

  /*# LIGHTBOX  */

  --lightbox-bg: color-mix(in oklch, black 90%, transparent);
  --lightbox-z: 99999;
  --lightbox-close-size: 2.75rem;
  --lightbox-padding: clamp(16px, 4vw, 48px);
  --lightbox-img-height: 90vh;
  --lightbox-arrow-bg: color-mix(in oklch, white 12%, transparent);
  --lightbox-arrow-hover-bg: color-mix(in oklch, white 25%, transparent);
  --lightbox-clr: #fff;
  --lightbox-slide-height: 70vh;
}
.dwc-slider-vars-o73c4f {
  /* Controls styles for built in slider navigation elements only: 
  - Arrows (nav buttons) 
  - Pagination
  - Play/Pause button
  - Progress
*/

  /*# ALL ARROWS  */

  /*## Normal */
  --arrow-bg: rgba(255, 255, 255, 0.06);
  --arrow-clr: color-mix(in oklch, white 50%, transparent);
  --arrow-radius: 50%;
  --arrow-width: 2.75rem;
  --arrow-height: var(--arrow-width);
  --arrow-padding: 0;
  --arrow-aspect-ratio: 1;
  --arrow-icon-size: 1.125rem;
  --arrow-bg-blur: 10px;
  --arrow-border: 1px solid rgba(255, 255, 255, 0.1);
  --arrow-opacity: 0;
  --arrow-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /*## Hover */
  --arrow-hover-bg: color-mix(in oklch, var(--primary) 20%, transparent);
  --arrow-hover-clr: var(--white, white);
  --arrow-hover-opacity: 1;
  --arrow-hover-border-clr: var(--primary, #ff4d6a);

  /*## POSITIONING  */

  /*### PREV ARROW  */
  --prev-arrow-top: 50%;
  --prev-arrow-bottom: auto;
  --prev-arrow-right: auto;
  --prev-arrow-left: 0.875rem;
  --prev-arrow-transform: translateY(-50%);

  /*### NEXT ARROW  */
  --next-arrow-top: 50%;
  --next-arrow-bottom: auto;
  --next-arrow-right: 0.875rem;
  --next-arrow-left: auto;
  --next-arrow-transform: translateY(-50%);

  /*# PAGINATION  */

  /*## WRAPPER  */
  --pagination-position: absolute;
  --pagination-padding: 12px 14px;
  --pagination-bg: rgba(0, 0, 0, 0.35);
  --pagination-bg-blur: 8px;
  --pagination-radius: 1.25rem;
  --pagination-gap: 0.5rem;

  /*### POSITIONING  */
  --pagination-top: auto;
  --pagination-bottom: 1rem;
  --pagination-left: 50%;
  --pagination-right: auto;
  --pagination-transform: translateX(-50%);

  /*## DOTS  */

  /*### Normal  */
  --dot-size: 8px;
  --dot-radius: 50%;
  --dot-clr: rgba(255, 255, 255, 0.2);
  --dot-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /*### Hover  */
  --dot-hover-clr: rgba(255, 255, 255, 0.5);

  /*### Active */
  --dot-clr-active: var(--primary, #ff4d6a);
  --dot-transform-active: scale(1.3);

  /*# PLAY/PAUSE BUTTON  */

  /*## Normal */
  --play-pause-size: 32px;
  --play-pause-radius: 50vw;
  --play-pause-border: 1px solid rgba(255, 255, 255, 0.1);
  --play-pause-clr: var(--white, white);
  --play-pause-bg: rgba(0, 0, 0, 0.4);
  --play-pause-bg-blur: 8px;

  /*## Hover */
  --play-pause-hover-bg: color-mix(in oklch, var(--primary) 20%, transparent);
  --play-pause-hover-border-clr: var(--primary, #ff4d6a);

  /*## POSITIONING  */
  --play-pause-top: auto;
  --play-pause-bottom: 14px;
  --play-pause-left: auto;
  --play-pause-right: 14px;
  --play-pause-z-index: 10;

  /*# PROGRESS  */

  /*## Normal */
  --progress-fill-clr: var(--primary, #ff4d6a);
  --progress-fill-clr-2: var(--primary-ultra-light, #ff8fa3); /* bar progress*/
  --progress-bg: rgba(0, 0, 0, 0.4); /* non cirular counter*/
  --progress-bg-blur: 8px; /* non cirular counter*/
  --progress-border-radius: 20px; /* non cirular counter*/
  --progress-border: 1px solid rgba(255, 255, 255, 0.08); /* non cirular counter*/
  --progress-padding: 4px 12px; /* non cirular counter*/
  --progress-track-clr: rgba(255, 255, 255, 0.1);
  --progress-separator-clr: var(--progress-clr-total);
  --progress-separator-gap: 0.1em;
  --progress-separator-size: var(--progress-font-size-total);

  /*## Current text */
  --progress-clr-current: var(--primary, #ff4d6a);
  --progress-font-size-current: 0.8rem;

  /*## Total text */
  --progress-clr-total: #8888a0;
  --progress-font-size-total: 0.6rem;

  /*## POSITIONING  */
  --progress-top: auto;
  --progress-bottom: 0;
  --progress-left: 14px;
  --progress-right: auto;
  --progress-z-index: 10;

  /*### Counter  */
  & [data-auto-generated][data-progress-type='counter'] {
    --progress-top: auto;
    --progress-bottom: 12px;
    --progress-left: auto;
    --progress-right: 12px;
  }

  /*### Circular  */
  & [data-auto-generated][data-progress-type='circular'] {
    --progress-top: 14px;
    --progress-bottom: auto;
    --progress-left: 14px;
    --progress-right: auto;
  }

  /*# LIGHTBOX  */

  --lightbox-bg: color-mix(in oklch, black 90%, transparent);
  --lightbox-z: 99999;
  --lightbox-close-size: 2.75rem;
  --lightbox-padding: clamp(16px, 4vw, 48px);
  --lightbox-img-height: 90vh;
  --lightbox-arrow-bg: color-mix(in oklch, white 12%, transparent);
  --lightbox-arrow-hover-bg: color-mix(in oklch, white 25%, transparent);
  --lightbox-clr: #fff;
  --lightbox-slide-height: 70vh;
}
.slide-placeholder-info {
  margin: auto;
  color: white;
  font-size: 14px;
  letter-spacing: 1px;
}
.dwc-slider-nav-button-wrapper {
  width: fit-content;
height: fit-content;
}
.dwc-slider-nav-btn {
  /* max-inline-size: fit-content; */
  display: grid;
  place-items: center;
  white-space: nowrap;

  &:has(.dwc-default-slider-nav-icon, .dwc-slider-nav-custom-svg, [data-slide-title]) {
    color: var(--arrow-clr);
    font-size: var(--arrow-icon-size);
    min-width: calc(var(--arrow-width) + var(--title-width, 0px));
    min-height: var(--arrow-height);
    border: var(--arrow-border);
    border-radius: var(--arrow-radius);
    background: var(--arrow-bg);
    backdrop-filter: blur(var(--arrow-bg-blur));
    -webkit-backdrop-filter: blur(var(--arrow-bg-blur));
    cursor: pointer;
    transition: var(--arrow-transition);
    padding: var(--arrow-padding);
    aspect-ratio: var(--arrow-aspect-ratio);

    &:hover {
      background: var(--arrow-hover-bg);
      border-color: var(--arrow-hover-border-clr);
      color: var(--arrow-hover-clr);

      & svg {
        fill: var(--arrow-hover-clr);
      }
    }
  }
}
.dwc-default-slider-nav-icon {
  width: var(--arrow-icon-size);
  height: var(--arrow-icon-size);
  fill: var(--arrow-clr);
}
.dwc-slider-nav-custom-svg {
  & svg{
      width: var(--arrow-icon-size);
  height: var(--arrow-icon-size);
  fill: var(--arrow-clr);
  }
}
.dwc-nav-btn-instruction {
  color: white;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 1px;
  background-color: var(--etch-info, deepskyblue);
  border-radius: 0.4em;
  padding: 0.45 0.75em;
  max-inline-size: 250px;
  white-space: wrap;
}
.dwc-progress-container {
  & > .sc-bar-progress{
    block-size: var(--progress-height);
  }
}
.autoplay-toggle-container {
  inline-size: var(--play-pause-size);
  block-size: var(--play-pause-size);
  flex-shrink: 0;
  & > button {
    inline-size: 100%;
    block-size: 100%;
  }
}
.dwc-slider-pagination-wrapper {
  /*  General pagination styles */
  display: flex;
  gap: var(--gap);
  flex-direction: var(--direction);
  position: var(--position);
  z-index: var(--z-index);
  block-size: fit-content;

  /*  Default pagination styles */
  [data-custom-pagination='default']& {
    padding: var(--padding);
    background-color: var(--bg);
    backdrop-filter: blur(var(--blur));
    border-radius: var(--radius);
    font-size: var(--font-size);

    & .splide__pagination__page {
      width: var(--dot-size);
      height: var(--dot-size);
      border-radius: var(--dot-radius);
      border: none;
      color: var(--dot-color);
      background: var(--dot-bg);
      cursor: pointer;
      padding: 0;
      transition: all var(--sc-transition);
      line-height: 1;

      &.is-active {
        background: var(--dot-bg-active);
        transform: scale(1.3);
        color: var(--active-dot-color);
      }
    }
  }
  /*  END Default pagination styles */
}
.yc-hero-copy {
  margin-inline-start: auto;
max-inline-size: min(42rem, 100%);
text-align: end;
}
.yc-hero-copy .bpn-content-header__title[data-visual-style="eyebrow"] {
  color: #ffffff;
letter-spacing: 0.14em;
font-weight: 600;
}
.yc-hero-copy .bpn-content-header__sub-heading {
  color: #B2977C !important;
font-size: clamp(3rem, 8vw, 5rem);
font-weight: 700;
line-height: 1.05;
text-shadow: 0 1px 2px rgba(21, 20, 19, 0.55), 0 4px 18px rgba(21, 20, 19, 0.4);
}
.yc-hero-copy .bpn-content-header__body-text {
  color: #ffffff;
font-size: var(--text-m, 1.05rem);
}
.yc-hero-copy .bpn-content-header__footer {
  justify-content: flex-end;
gap: var(--space-s, 0.75rem);
}
.yc-hero-copy .bpn-content-header__cta.btn--primary {
  background: #B2977C;
color: #ffffff;
border: 0;
border-radius: 999px;
padding-inline: 1.5rem;
}
.yc-hero-copy .bpn-content-header__cta.btn--secondary {
  background: transparent;
color: #ffffff;
border: 0;
box-shadow: none;
font-weight: 600;
letter-spacing: 0.08em;
text-decoration: underline;
text-underline-offset: 0.22em;
text-decoration-thickness: 1px;
text-shadow: 0 1px 10px rgba(21, 20, 19, 0.55);
}
.yc-kicker-teal .bpn-content-header__title[data-visual-style="eyebrow"] {
  color: #90B3B9;
letter-spacing: 0.16em;
font-weight: 600;
}
.yc-program-photo {
  display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 20px;
}
.yc-program .bpn-content-header__title {
  color: #91564C;
letter-spacing: 0.04em;
font-weight: 600;
}
.yc-about-col .bpn-content-header__title {
  position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.yc-about-slider .splide__slide img, .yc-about-slider .splide__slide etch\:img {
  width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.yc-sponsor-child {
  background: #648084;
color: #ffffff;
border-radius: 20px;
overflow: hidden;
height: 100%;
box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.027), 0 22.3px 17.9px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.07);
}
.yc-sponsor-haven {
  background: #90B3B9;
color: #ffffff;
border-radius: 20px;
overflow: hidden;
height: 100%;
box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.027), 0 22.3px 17.9px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.07);
}
.yc-sponsor-school {
  background: #B2977C;
color: #ffffff;
border-radius: 20px;
overflow: hidden;
height: 100%;
box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.027), 0 22.3px 17.9px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.07);
}
.yc-sponsor-child .bpn-content-header__title, .yc-sponsor-haven .bpn-content-header__title, .yc-sponsor-school .bpn-content-header__title {
  color: #ffffff !important;
font-size: clamp(2rem, 4vw, 2.75rem);
}
.yc-sponsor-child .bpn-content-header__body-text, .yc-sponsor-haven .bpn-content-header__body-text, .yc-sponsor-school .bpn-content-header__body-text {
  color: #ffffff !important;
}
.yc-sponsor-child .bpn-content-header, .yc-sponsor-haven .bpn-content-header, .yc-sponsor-school .bpn-content-header {
  color: #ffffff;
}
.yc-contact {
  background: var(--ultra-dark);
  color: #f7f7f7;
}
.yc-contact__meta {
  display: grid;
gap: var(--space-s, 1rem);
justify-items: start;
}
.yc-contact__seal {
  width: 7.5rem;
height: auto;
}
.yc-contact__line, .yc-contact__line a {
  color: #cfcfc8;
text-decoration: none;
}
.yc-contact__form {
  display: grid;
gap: 0.85rem;
padding: 1.25rem;
background: #F7F7F7;
color: #2B2C28;
border-radius: 0.25rem;
}
.yc-contact__row {
  display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
@media (max-width: 480px) {
  grid-template-columns: 1fr;
}
}
.yc-contact__field {
  display: grid;
gap: 0.3rem;
}
.yc-contact__label {
  font-size: 0.9rem;
font-weight: 600;
}
.yc-contact__req {
  color: #91564C;
}
.yc-contact__control {
  width: 100%;
padding: 0.65rem 0.75rem;
border: 1px solid #c8c8c4;
border-radius: 0.2rem;
background: #ffffff;
color: inherit;
font: inherit;
}
.yc-contact__submit {
  background: #B2977C;
color: #ffffff;
border: 0;
border-radius: 0.25rem;
padding: 0.75rem 1rem;
font-weight: 600;
cursor: pointer;
}
.yc-contact__honeypot {
  position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
.yc-about-slider .splide__slide img, .yc-about-slider .splide__slide etch\:img, .yc-slide-photo {
  width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 20px;
}
#ministries {
  scroll-margin-block-start: 1rem;
}
.yc-hero-copy, .yc-hero-copy .bpn-content-header, .yc-hero-copy .bpn-content-header__body-text, .yc-hero-copy .bpn-content-header__title {
  color: #ffffff;
}
.yc-sponsor-child .bpn-content-header__title, .yc-sponsor-haven .bpn-content-header__title, .yc-sponsor-school .bpn-content-header__title, .yc-sponsor-child .bpn-content-header__body-text, .yc-sponsor-haven .bpn-content-header__body-text, .yc-sponsor-school .bpn-content-header__body-text {
  color: #ffffff;
}
.bpn-section-media .yc-hero-copy .bpn-content-header__sub-heading {
  color: #B2977C !important;
font-size: clamp(3rem, 8vw, 5rem);
font-weight: 700;
line-height: 1.05;
text-shadow: 0 1px 2px rgba(21, 20, 19, 0.55), 0 4px 18px rgba(21, 20, 19, 0.4);
font-family: "Lora", serif;
}
.yc-about-slider .splide__toggle {
  display: none !important;
}
.yc-about-slider .splide__slide {
  inline-size: 100%;
flex-shrink: 0;
}
.yc-hero-copy .bpn-content-header__cta.btn--secondary:hover, .yc-hero-copy .bpn-content-header__cta.btn--secondary:focus-visible {
  color: #ffffff;
opacity: 0.86;
}
.yc-hero {
  position: relative;
overflow: hidden;
}
.yc-hero::after {
  content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 120px;
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20320%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23151413%22%20d%3D%22M0%2C128L80%2C154.7C160%2C181%2C320%2C235%2C480%2C261.3C640%2C288%2C800%2C288%2C960%2C240C1120%2C192%2C1280%2C96%2C1360%2C48L1440%2C0L1440%2C320L1360%2C320C1280%2C320%2C1120%2C320%2C960%2C320C800%2C320%2C640%2C320%2C480%2C320C320%2C320%2C160%2C320%2C80%2C320L0%2C320Z%22%2F%3E%3C%2Fsvg%3E") center bottom / 100% 120px no-repeat;
pointer-events: none;
z-index: 4;
}
.yc-about .bpn-content-header__title[data-visual-style="eyebrow"] {
  color: rgb(255 255 255 / 0.5);
}
.yc-about .bpn-content-header__sub-heading {
  color: #F7F7F7;
}
.yc-about .yc-about-col .bpn-content-header__body-text {
  color: #999;
}
.yc-photo-band {
  position: relative;
min-height: 500px;
overflow: hidden;
background-image: url("../assets/basketball.jpg");
background-size: cover;
background-position: 50% 60%;
}
.yc-photo-band .bpn-section-media__media img, .yc-photo-band .bpn-section-media__media etch\:img {
  object-fit: cover;
object-position: 50% 60%;
}
.yc-photo-band::after {
  content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 220px;
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20320%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C160L120%2C181.3C240%2C203%2C480%2C245%2C720%2C224C960%2C203%2C1200%2C117%2C1320%2C74.7L1440%2C32L1440%2C320L1320%2C320C1200%2C320%2C960%2C320%2C720%2C320C480%2C320%2C240%2C320%2C120%2C320L0%2C320Z%22%2F%3E%3C%2Fsvg%3E") center bottom / 100% 220px no-repeat;
pointer-events: none;
z-index: 2;
}
.yc-ministries {
  position: relative;
}
.yc-ministries::before {
  content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 220px;
transform: scaleX(-1);
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20320%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23F7F7F7%22%20d%3D%22M0%2C160L120%2C181.3C240%2C203%2C480%2C245%2C720%2C224C960%2C203%2C1200%2C117%2C1320%2C74.7L1440%2C32L1440%2C320L1320%2C320C1200%2C320%2C960%2C320%2C720%2C320C480%2C320%2C240%2C320%2C120%2C320L0%2C320Z%22%2F%3E%3C%2Fsvg%3E") center top / 100% 220px no-repeat;
pointer-events: none;
z-index: 1;
}
.yc-about-slider, .yc-about-slider .splide, .yc-about-slider .splide__track, .yc-about-slider .splide__list, .yc-about-slider .splide__slide {
  border-radius: 20px;
}
.yc-sponsor-child .bpn-content-header__cta, .yc-sponsor-haven .bpn-content-header__cta, .yc-sponsor-school .bpn-content-header__cta {
  color: #ffffff !important;
}
.yc-home-icon {
  display: flex;
justify-content: center;
align-items: center;
min-height: 55px;
margin-block-start: 0.35rem;
font-size: 0;
line-height: 0;
color: transparent;
}
.yc-home-icon svg {
  width: 55px;
height: 55px;
stroke: #B2977C;
fill: none;
}
.bpn-section-media::after {
  content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 120px;
background-color: var(--bg-ultra-dark);
background-image: none;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20320%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C128L80%2C154.7C160%2C181%2C320%2C235%2C480%2C261.3C640%2C288%2C800%2C288%2C960%2C240C1120%2C192%2C1280%2C96%2C1360%2C48L1440%2C0L1440%2C320L1360%2C320C1280%2C320%2C1120%2C320%2C960%2C320C800%2C320%2C640%2C320%2C480%2C320C320%2C320%2C160%2C320%2C80%2C320L0%2C320Z%22%2F%3E%3C%2Fsvg%3E");
-webkit-mask-position: center bottom;
-webkit-mask-size: 100% 120px;
-webkit-mask-repeat: no-repeat;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20320%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C128L80%2C154.7C160%2C181%2C320%2C235%2C480%2C261.3C640%2C288%2C800%2C288%2C960%2C240C1120%2C192%2C1280%2C96%2C1360%2C48L1440%2C0L1440%2C320L1360%2C320C1280%2C320%2C1120%2C320%2C960%2C320C800%2C320%2C640%2C320%2C480%2C320C320%2C320%2C160%2C320%2C80%2C320L0%2C320Z%22%2F%3E%3C%2Fsvg%3E");
mask-position: center bottom;
mask-size: 100% 120px;
mask-repeat: no-repeat;
pointer-events: none;
z-index: 4;
}
.bpn-section[data-background="dark"] .bpn-content-header__title[data-visual-style="eyebrow"] {
  color: rgb(255 255 255 / 0.5);
}
.bpn-section[data-background="dark"] .bpn-content-header__sub-heading {
  color: #F7F7F7;
}
.bpn-section[data-background="dark"] .yc-about-col .bpn-content-header__body-text {
  color: #999;
}
.bpn-section[data-background="none"] {
  position: relative;
}
.bpn-section[data-background="none"]::before {
  content: none;
}
.bpn-section:has(.yc-about-slider) .bpn-content-header__title[data-visual-style="eyebrow"] {
  display: none !important;
}
.bpn-section:has(.yc-about-slider) .bpn-content-header__sub-heading {
  color: #F7F7F7 !important;
}
.bpn-section:has(.yc-about-col) .yc-about-col .bpn-content-header__body-text {
  color: #ccc !important;
}
.yc-home-icon::before {
  content: "";
width: 55px;
height: 55px;
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23B2977C%22%20stroke-width%3D%221.35%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.6%2010.8%2012%203.7l8.4%207.1V20a.9.9%200%200%201-.9.9h-5.2v-6.2H9.7V20.9H4.5a.9.9%200%200%201-.9-.9v-9.2z%22%2F%3E%3C%2Fsvg%3E") center / 55px 55px no-repeat;
}
.yc-about-slider .splide__track {
  border-radius: 20px;
overflow: hidden;
}
.bpn-section:has(#ministries) {
  position: relative;
overflow: hidden;
padding-block-start: 4.75rem;
padding-block-end: calc(220px + 3.5rem);
}
.bpn-section:has(#ministries)::after {
  content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 220px;
transform: scaleX(-1);
background-color: var(--bg-ultra-light);
background-image: none;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20320%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C160L120%2C181.3C240%2C203%2C480%2C245%2C720%2C224C960%2C203%2C1200%2C117%2C1320%2C74.7L1440%2C32L1440%2C320L1320%2C320C1200%2C320%2C960%2C320%2C720%2C320C480%2C320%2C240%2C320%2C120%2C320L0%2C320Z%22%2F%3E%3C%2Fsvg%3E");
-webkit-mask-position: center bottom;
-webkit-mask-size: 100% 220px;
-webkit-mask-repeat: no-repeat;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%20320%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2C160L120%2C181.3C240%2C203%2C480%2C245%2C720%2C224C960%2C203%2C1200%2C117%2C1320%2C74.7L1440%2C32L1440%2C320L1320%2C320C1200%2C320%2C960%2C320%2C720%2C320C480%2C320%2C240%2C320%2C120%2C320L0%2C320Z%22%2F%3E%3C%2Fsvg%3E");
mask-position: center bottom;
mask-size: 100% 220px;
mask-repeat: no-repeat;
pointer-events: none;
z-index: 2;
}
.yc-sponsor-child .bpn-card, .yc-sponsor-haven .bpn-card, .yc-sponsor-school .bpn-card {
  border-radius: 0;
box-shadow: none;
background: transparent;
overflow: hidden;
height: 100%;
}
.yc-sponsor-child .bpn-content-header__cta, .yc-sponsor-child .bpn-content-header__cta.btn--primary {
  display: inline-flex !important;
width: auto !important;
align-self: center;
justify-content: center;
align-items: center;
color: #ffffff !important;
border-radius: 30px !important;
padding: 10px 20px !important;
font-family: Oswald, sans-serif !important;
font-weight: 300 !important;
font-size: 16px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.027), 0 22.3px 17.9px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.07);
background: #90B3B9 !important;
border: 1px solid #90B3B9 !important;
}
.yc-sponsor-haven .bpn-content-header__cta, .yc-sponsor-haven .bpn-content-header__cta.btn--primary {
  display: inline-flex !important;
width: auto !important;
align-self: center;
justify-content: center;
align-items: center;
color: #ffffff !important;
border-radius: 30px !important;
padding: 10px 20px !important;
font-family: Oswald, sans-serif !important;
font-weight: 300 !important;
font-size: 16px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.027), 0 22.3px 17.9px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.07);
background: #648084 !important;
border: 1px solid #648084 !important;
}
.yc-sponsor-school .bpn-content-header__cta, .yc-sponsor-school .bpn-content-header__cta.btn--primary {
  display: inline-flex !important;
width: auto !important;
align-self: center;
justify-content: center;
align-items: center;
color: #ffffff !important;
border-radius: 30px !important;
padding: 10px 20px !important;
font-family: Oswald, sans-serif !important;
font-weight: 300 !important;
font-size: 16px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.027), 0 22.3px 17.9px rgba(0, 0, 0, 0.043), 0 100px 80px rgba(0, 0, 0, 0.07);
background: #91564C !important;
border: 1px solid #91564C !important;
}
.yc-sponsor-child .bpn-content-header__cta:hover, .yc-sponsor-haven .bpn-content-header__cta:hover, .yc-sponsor-school .bpn-content-header__cta:hover, .yc-sponsor-child .bpn-content-header__cta:focus-visible, .yc-sponsor-haven .bpn-content-header__cta:focus-visible, .yc-sponsor-school .bpn-content-header__cta:focus-visible {
  filter: brightness(0.92); color: #ffffff !important;
}
.yc-about-slider, .yc-about-slider .splide {
  --dot-clr-active: #B2977C;
--dot-hover-clr: #90B3B9;
@media (max-width: 640px) {
  --dot-size: 6px;
  --pagination-gap: 0.28rem;
  --pagination-padding: 8px 10px;
}
}
.yc-contact__seal-link {
  display: block;
line-height: 0;
text-decoration: none;
}
.yc-contact__seal, .yc-contact__seal-link .yc-contact__seal {
  width: 7.5rem;
height: auto;
}
.yc-contact__form[hidden] {
  display: none !important;
}
.yc-contact__success {
  margin: 0;
padding: 1.25rem;
background: #F7F7F7;
color: #2B2C28;
border-radius: 0.25rem;
font: inherit;
}
.yc-contact__error {
  margin: 0;
color: #91564C;
font-size: 0.9rem;
&:empty {
  display: none;
}
}