/* base-classes.css -- GENERATED, do not edit.
   generated-by:: projects-tools-studio-engine-workbench-powershell-build-base-css@4
   source:: studio\meetup-140\base-classes\ -- edit the values there and re-run the build */

/* ==== 23-reset.css ==== */
/* 23-reset -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Reset
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   WHAT THIS GIVES YOU -- border-box on everything, a full-height body, form controls that
   inherit the page font, and interpolate-size: allow-keywords, which is what makes a
   transition to height: auto actually animate.

   so-a-template-never-writes-a-reset:: no box-sizing, no margin zeroing, no font inherit on
   inputs -- it is already done, and repeating it adds a rule the next author has to read.

   a-bare-button-already-looks-like-a-button:: the button rule here excludes nav buttons and
   anything carrying .btn--, so those two are free for a template to style. */

/* Feat: Reset */
:root {
  interpolate-size: allow-keywords;
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  min-block-size: 100svh;
  /* everything a reader reads inherits from here -- headings override it below.
     The fallback lives in the var() default, not in a second :root declaration:
     ONE file declares the token (the pairing) and the fallback covers the case
     where no pairing is loaded at all. */
  font-family: var(--text-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
input, button, textarea, select {
  font: inherit;
}
button:not(nav button, [class*="btn--"]) {
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  text-decoration: var(--btn-text-decoration);
  text-align: var(--btn-text-align);
  font-weight: var(--btn-font-weight);
  font-style: var(--btn-font-style);
  font-family: var(--btn-font-family);
}
:where(dd) {
  margin-inline-start: 0;
}

/* ==== 24-element-defaults.css ==== */
/* 24-element-defaults -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Body, Heading, or Text Defaults + Body Defaults + Link Defaults + Heading Defaults
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   WHAT THIS GIVES YOU -- body copy, paragraphs, links and headings already styled from the
   tokens. An h2 has its size, weight, line height and balance before a template touches it.

   so-a-template-styles-the-EXCEPTION-not-the-element:: writing font-size on every heading
   restates what is already true and buries the one place a size was deliberately different.

   nearly-all-of-it-is-:where():: which is ZERO specificity, so any class you write beats it
   without !important. That is the design -- but it is also why a colour written here is
   invisible in the file and impossible to override later from a class.

   the-one-!important-is-deliberate:: html font-size, because the root size must not lose to
   a plugin stylesheet -- everything else is left beatable on purpose.

   heading-defaults-do-not-survive-a-bg--section:: the contextual flip recolours them -- see
   base-classes\29-section-styles.css. */

/* Feat: Body, Heading, or Text Defaults */
html {
  font-size: var(--root-font-size) !important;
}

/* Feat: Body Defaults */
:where(body) {
  font-size: var(--text-m);
  overflow-x: clip;
  color: var(--text-color);
  line-height: var(--text-line-height);
  text-wrap: var(--text-text-wrap);
  background: var(--body-bg-color);
  transition: background var(--transition);
}
:where(p) {
  line-height: var(--text-line-height, calc(6px + 2ex));
}

/* Feat: Link Defaults */
body a:where(:not([class*= btn--])) {
  color: var(--link-color, var(--primary));
  font-weight: var(--link-weight, inherit);
  -webkit-text-decoration: var(--link-decoration, inherit);
  text-decoration: var(--link-decoration, inherit);
  text-underline-offset: var(--link-underline-offset, auto);
  transition: var(--link-transition, var(--transition));
}
@media (hover: hover) and (pointer: fine) {
  body a:where(:not([class*= btn--])):hover {
    color: var(--link-color-hover, var(--primary-hover));
  }
}

/* Feat: Heading Defaults */
h1, :where(.h1), h2, :where(.h2), h3, :where(.h3), h4, :where(.h4), h5, :where(.h5), h6, :where(.h6) {
  /* the font tokens are declared by the loaded PAIRING and by nothing else --
     not by base-tokens, not by a theme. ACSS emits no font-family here either,
     because in WordPress the theme supplies it; static HTML has no theme, so
     the class layer applies it and the pairing chooses it. */
  font-family: var(--heading-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  color: var(--heading-color);
  line-height: var(--heading-line-height);
  font-weight: var(--heading-font-weight);
  text-wrap: var(--heading-text-wrap);
}
h1 {
  font-size: var(--h1);
  max-width: var(--h1-max-width);
}
h2 {
  font-size: var(--h2);
}
h3 {
  font-size: var(--h3);
}
h4 {
  font-size: var(--h4);
  line-height: var(--h4-line-height);
}
h5 {
  font-size: var(--h5);
}
h6 {
  font-size: var(--h6);
}

/* ==== 25-color-scheme.css ==== */
/* 25-color-scheme -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Color Scheme Classes
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   WHAT THIS GIVES YOU -- .scheme--light and .scheme--dark, which force a color-scheme on a
   SUBTREE rather than the whole document.

   the-page-level-switch-is-elsewhere:: base-tokens\23-color-scheme.css sets the document
   scheme. These two classes are for one region that must not follow it -- an embedded
   widget, a preview panel showing the other scheme.

   this-is-not-how-you-make-a-section-dark:: a dark BAND is .bg--dark, which flips the text
   with it. color-scheme changes which half of a light-dark() pair resolves and is a
   different mechanism -- reaching for it to darken a section gives no text flip. */

/* Feat: Color Scheme Classes */
.scheme--light {
  color-scheme: light;
}
.scheme--dark {
  color-scheme: dark;
}

/* ==== 26-button-card-icon-and-blockquote-styles.css ==== */
/* 26-button-card-icon-and-blockquote-styles -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Blockquote Styling
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   THIS IS THE COMPONENT LIBRARY -- buttons, cards, icons and blockquotes, fully styled.
   Before writing a card or a button in a template, check what already exists here: a
   hand-rolled button that does not carry a .btn-- class gets none of the contextual
   flipping, none of the focus ring and none of the size scale.

   BUTTONS -- .btn--{role} for colour, .btn--{role}.btn--outline for the outline variant,
   sizes run .btn--xs..xxl, and .btn--none opts out of the system. A link styled as a
   button keeps its a element and takes the class.

   CARDS -- .card plus conventional child classes matched by pattern: anything named
   __media, __avatar, or carrying [data-icon] is picked up WITHOUT the card styling naming
   your block. That is why a template follows the __media / __avatar naming rather than
   inventing __image -- the convention is what wires it up.
   The two surface variants are .card--light and .card--dark.

   ICONS -- .icon--{size} or [data-icon-size], both accepted.

   BLOCKQUOTES -- the selector deliberately EXCLUDES anything inside a -card block, so a
   quote in a testimonial card is styled by the card rather than fighting the quote rules.

   everything-is-token-driven:: restyle by overriding --btn-*, --card-*, --icon-*,
   --blockquote-* at block level -- never by re-selecting these elements. The tokens are in
   base-tokens\09-buttons.css, 11-cards.css, 12-icons.css and 17-blockquotes.css.

   the-colours-flip-per-context:: [class*="btn--"] inside a .bg--{role} section is
   recoloured for that surface -- see base-classes\29-section-styles.css. */

/* Feat: Blockquote Styling */
:where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class*="-card"] blockquote, figure[class*="-card"], figure[class*="-card"] blockquote)))) {
  display: flex;
  flex-direction: column;
  gap: var(--blockquote-gap);
  inline-size: 100%;
  padding: var(--blockquote-padding);
  gap: var(--blockquote-gap);
  border-width: var(--blockquote-border-width);
  border-style: var(--blockquote-border-style);
  border-color: var(--blockquote-border-color);
  border-radius: var(--blockquote-border-radius);
  background: var(--blockquote-background);
  box-shadow: var(--blockquote-box-shadow);
}
:where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class*="-card"] blockquote, figure[class*="-card"], figure[class*="-card"] blockquote)))) p {
  color: var(--blockquote-text-color);
  font-family: var(--blockquote-text-font-family);
  font-style: var(--blockquote-text-font-style);
  font-size: var(--blockquote-text-font-size);
  font-weight: var(--blockquote-text-font-weight);
  line-height: var(--blockquote-text-line-height);
  text-align: var(--blockquote-text-text-align);
  text-transform: var(--blockquote-text-text-transform);
}
:where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class*="-card"] blockquote, figure[class*="-card"], figure[class*="-card"] blockquote)))) footer, :where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class*="-card"] blockquote, figure[class*="-card"], figure[class*="-card"] blockquote)))) figcaption {
  display: var(--blockquote-footer-display, flex);
  flex-direction: var(--blockquote-footer-flex-direction, row);
  align-items: var(--blockquote-footer-align-items, center);
  gap: var(--blockquote-footer-gap, calc(var(--content-gap) / 2));
  padding: var(--blockquote-footer-padding);
  margin-block: var(--blockquote-footer-margin-block);
  font-family: var(--blockquote-footer-font-family);
  font-size: var(--blockquote-footer-font-size);
  font-weight: var(--blockquote-footer-font-weight);
  font-style: var(--blockquote-footer-font-style);
  line-height: var(--blockquote-footer-line-height);
  text-transform: var(--blockquote-footer-text-transform);
  color: var(--blockquote-footer-color);
}
:where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class*="-card"] blockquote, figure[class*="-card"], figure[class*="-card"] blockquote)))) cite, :where(blockquote:where(:not(figure > blockquote)), figure:has(> blockquote), .blockquote):where(:not(:is(:is([class*="-card"] blockquote, figure[class*="-card"], figure[class*="-card"] blockquote)))) figcaption cite {
  font-family: var(--blockquote-cite-font-family);
  font-size: var(--blockquote-cite-font-size);
  font-weight: var(--blockquote-cite-font-weight);
  font-style: var(--blockquote-cite-font-style);
  line-height: var(--blockquote-cite-line-height);
  text-transform: var(--blockquote-cite-text-transform);
  color: var(--blockquote-cite-color);
}
.btn--primary {
  --btn-background: var(--primary);
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary-ultra-light);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
.btn--primary-dark {
  --btn-background: var(--primary-dark);
  --btn-background-hover: var(--primary-ultra-dark);
  --btn-text-color: var(--primary-ultra-light);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-semi-dark);
}
.btn--primary-light {
  --btn-background: var(--primary-ultra-light);
  --btn-background-hover: var(--primary-light);
  --btn-text-color: var(--primary);
  --btn-text-color-hover: var(--primary-ultra-dark);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
.btn--primary.btn--outline {
  --btn-background: transparent;
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-width: 1.5px;
  --btn-border-color: var(--primary);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
.btn--primary-dark.btn--outline {
  --btn-background: transparent;
  --btn-background-hover: var(--primary-dark);
  --btn-text-color: var(--primary-dark);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-width: 1.5px;
  --btn-border-color: var(--primary-dark);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
.btn--primary-light.btn--outline {
  --btn-background: transparent;
  --btn-background-hover: var(--primary-light);
  --btn-text-color: var(--primary-light);
  --btn-text-color-hover: var(--primary-dark);
  --btn-border-width: 1.5px;
  --btn-border-color: var(--primary-light);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
.btn--secondary {
  --btn-background: var(--secondary);
  --btn-background-hover: var(--secondary-hover);
  --btn-text-color: var(--secondary-ultra-light);
  --btn-text-color-hover: var(--secondary-ultra-light);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--secondary-light);
}
.btn--secondary-dark {
  --btn-background: var(--secondary-dark);
  --btn-background-hover: var(--secondary-ultra-dark);
  --btn-text-color: var(--secondary-ultra-light);
  --btn-text-color-hover: var(--secondary-ultra-light);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--secondary-semi-dark);
}
.btn--secondary-light {
  --btn-background: var(--secondary-ultra-light);
  --btn-background-hover: var(--secondary-light);
  --btn-text-color: var(--secondary);
  --btn-text-color-hover: var(--secondary-ultra-dark);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--secondary-light);
}
.btn--secondary.btn--outline {
  --btn-background: transparent;
  --btn-background-hover: var(--secondary-hover);
  --btn-text-color: var(--secondary);
  --btn-text-color-hover: var(--secondary-ultra-light);
  --btn-border-width: 1.5px;
  --btn-border-color: var(--secondary);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--secondary-light);
}
.btn--secondary-dark.btn--outline {
  --btn-background: transparent;
  --btn-background-hover: var(--secondary-dark);
  --btn-text-color: var(--secondary-dark);
  --btn-text-color-hover: var(--secondary-ultra-light);
  --btn-border-width: 1.5px;
  --btn-border-color: var(--secondary-dark);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--secondary-light);
}
.btn--secondary-light.btn--outline {
  --btn-background: transparent;
  --btn-background-hover: var(--secondary-light);
  --btn-text-color: var(--secondary-light);
  --btn-text-color-hover: var(--secondary-dark);
  --btn-border-width: 1.5px;
  --btn-border-color: var(--secondary-light);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--secondary-light);
}
[class*="btn--"]:where(:not(.btn--none, .wp-block-button)), [class*="btn--"].wp-block-button > .wp-block-button__link {
  background: var(--btn-background);
  color: var(--btn-text-color);
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  inline-size: var(--btn-width, auto);
  min-inline-size: var(--btn-min-width);
  line-height: var(--btn-line-height);
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size, var(--text-m));
  font-weight: var(--btn-font-weight);
  font-style: var(--btn-font-style);
  text-transform: var(--btn-text-transform);
  letter-spacing: var(--btn-letter-spacing);
  text-decoration: var(--btn-text-decoration);
  border-width: var(--btn-border-width);
  border-style: var(--btn-border-style);
  border-radius: var(--btn-border-radius);
  border-color: var(--btn-border-color);
  transition: var(--btn-transition, var(--transition));
  justify-content: var(--btn-justify-content, center);
  align-items: var(--btn-align-items, center);
  text-align: var(--btn-text-align, center);
  display: var(--btn-display, inline-flex);
}
@media (hover: hover) and (pointer: fine) {
  [class*="btn--"]:where(:not(.btn--none, .wp-block-button)):hover, [class*="btn--"].wp-block-button > .wp-block-button__link:hover {
    background: var(--btn-background-hover);
    color: var(--btn-text-color-hover);
    border-color: var(--btn-border-color-hover);
    text-decoration: var(--btn-text-decoration-hover);
  }
}
[class*="btn--"]:where(:not(.btn--none, .wp-block-button)):where(:focus-visible), [class*="btn--"].wp-block-button > .wp-block-button__link:where(:focus-visible) {
  outline-style: solid;
  outline-color: var(--focus-color);
  outline-width: var(--focus-width);
  outline-offset: var(--focus-offset);
}
.btn--xs {
  --btn-font-size: var(--text-xs);
}
.btn--s {
  --btn-font-size: var(--text-s);
}
.btn--m {
  --btn-font-size: var(--text-m);
}
.btn--l {
  --btn-font-size: var(--text-l);
}
.btn--xl {
  --btn-font-size: var(--text-xl);
}
.btn--xxl {
  --btn-font-size: var(--text-xxl);
}
.btn--none {
  background: none;
  border: none;
}
.card {
  color-scheme: inherit;
  display: var(--card-display, flex) !important;
  flex-direction: var(--card-flex-direction, column);
  position: relative;
  overflow: var(--card-overflow, clip);
  background-clip: padding-box;
  transition: var(--card-transition, var(--transition));
  font-size: var(--card-text-size, var(--text-s));
  border-width: var(--card-border-width, var(--border-width));
  border-style: var(--card-border-style, var(--border-style));
  border-color: var(--card-border-color, transparent);
  border-radius: var(--card-radius, var(--radius, 0));
  padding: var(--card-padding, var(--space-m));
  gap: var(--card-gap, var(--content-gap));
  background: var(--card-background, var(--white));
  color: var(--card-text-color, var(--text-dark));
  line-height: var(--card-line-height, inherit);
  box-shadow: var(--card-shadow, none);
}
.card :where([class*="__media"]:not([class*="wrapper"])) {
  border-radius: var(--card-media-radius, var(--radius, 0));
  aspect-ratio: var(--card-media-aspect-ratio, 16/9);
  object-fit: var(--card-media-object-fit, fill);
  overflow: clip;
  inline-size: 100%;
}
.card :where([class*="__media"]:not([class*="wrapper"])) img {
  object-fit: var(--card-media-object-fit, fill);
}
.card :where(img[class*="__avatar"]:not([class*="wrapper"])), .card :where([class*="__avatar"] img) {
  border-radius: var(--card-avatar-radius, 50vw);
  border-width: var(--card-avatar-border-width, 0);
  border-style: var(--card-avatar-border-style, solid);
  border-color: var(--card-avatar-border-color, transparent);
  inline-size: var(--card-avatar-size, 48px);
  block-size: var(--card-avatar-size, 48px);
  align-self: center;
  aspect-ratio: var(--card-avatar-aspect-ratio, 1);
  object-fit: cover;
  overflow: clip;
}
.card :where(img[class*="__avatar"]:not([class*="wrapper"])) img, .card :where([class*="__avatar"] img) img {
  object-fit: cover;
}
.card :is(h1, h2, h3, h4, h5, h6) {
  font-size: var(--card-heading-size, var(--h3));
  color: var(--card-heading-color, var(--text-dark));
}
.card a:where(:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, [class*="btn--"], [data-icon])) {
  --link-color: var(--card-link-color, var(--primary));
  --link-color-hover: var(--card-link-color-hover, var(--primary-hover));
}
.card :where([data-icon]) {
  --icon-radius: var(--card-icon-radius, var(--radius, 0));
  --icon-size: var(--card-icon-size, 48px);
  --icon-color: var(--card-icon-color, var(--icon-color, var(--text-dark)));
}
.card [class*="btn--"] {
  --btn-font-size: var(--card-button-font-size, var(--text-s));
  --btn-background: var(--primary);
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary-ultra-light);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
.card:where([class*="--light"]) {
  color-scheme: light;
}
.card:where([class*="--dark"]) {
  color-scheme: dark;
}
[data-icon]:is(svg, i, a) {
  color-scheme: var(--icon-scheme, default);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  color: var(--icon-color, var(--neutral-dark));
  font-size: var(--icon-size);
  height: var(--icon-height, var(--icon-size, 24px));
  width: var(--icon-width, var(--icon-size, 24px));
  transition: var(--icon-transition, var(--transition));
  box-shadow: var(--icon-shadow, none);
  overflow: visible;
}
[data-icon]:is(i)::before {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: var(--icon-size);
}
[data-icon] svg {
  color: var(--icon-color);
}
[data-icon]:is(a):hover, a:hover [data-icon], [data-icon] [data-icon-hover]:hover, [data-icon] [data-icon-hover]:hover [data-icon] {
  --icon-background: var(--icon-background-hover);
  --icon-color: var(--icon-color-hover);
  --icon-border-color: var(--icon-border-color-hover);
}
.icon--xs, [data-icon-size="xs"] {
  --icon-size: var(--icon-size-xs);
  --icon-padding: var(--icon-padding-xs);
}
.icon--s, [data-icon-size="s"] {
  --icon-size: var(--icon-size-s);
  --icon-padding: var(--icon-padding-s);
}
.icon--m, [data-icon-size="m"] {
  --icon-size: var(--icon-size-m);
  --icon-padding: var(--icon-padding-m);
}
.icon--l, [data-icon-size="l"] {
  --icon-size: var(--icon-size-l);
  --icon-padding: var(--icon-padding-l);
}
.icon--xl, [data-icon-size="xl"] {
  --icon-size: var(--icon-size-xl);
  --icon-padding: var(--icon-padding-xl);
}
.icon--2xl, [data-icon-size="2xl"] {
  --icon-size: var(--icon-size-2xl);
  --icon-padding: var(--icon-padding-2xl);
}
.icon--boxed, [data-icon-style="boxed"] {
  padding: var(--icon-padding, 12px);
  border-width: var(--icon-border-width, 0);
  border-style: var(--icon-border-style, solid);
  border-radius: var(--icon-radius, var(--radius));
  background: var(--icon-background, var(--neutral-ultra-light));
  border-color: var(--icon-border-color, transparent);
}
.icon--plain, [data-icon-style="plain"] {
  --icon-background: transparent;
  --icon-border-width: 0;
  --icon-padding: 0;
}
:is([data-icon-list], .icon-list) {
  display: flex;
  flex-direction: column;
  gap: var(--icon-list-gap, 1em);
}
:is([data-icon-list], .icon-list) :where(svg, i) {
  --icon-size: var(--icon-list-icon-size, 1em);
  position: relative;
  translate: var(--icon-inline-offset, 0) var(--icon-block-offset, 0);
  flex-shrink: 0;
}
:is([data-icon-list], .icon-list) :where(svg, i):is(svg, i, a) {
  color-scheme: var(--icon-scheme, default);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  color: var(--icon-color, var(--neutral-dark));
  font-size: var(--icon-size);
  height: var(--icon-height, var(--icon-size, 24px));
  width: var(--icon-width, var(--icon-size, 24px));
  transition: var(--icon-transition, var(--transition));
  box-shadow: var(--icon-shadow, none);
  overflow: visible;
}
:is([data-icon-list], .icon-list) :where(svg, i):is(i)::before {
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: var(--icon-size);
}
:is([data-icon-list], .icon-list) :where(svg, i) svg {
  color: var(--icon-color);
}
:is([data-icon-list], .icon-list) :where(svg, i):is(a):hover, a:hover :is([data-icon-list], .icon-list) :where(svg, i), :is([data-icon-list], .icon-list) :where(svg, i) [data-icon-hover]:hover, :is([data-icon-list], .icon-list) :where(svg, i) [data-icon-hover]:hover [data-icon] {
  --icon-background: var(--icon-background-hover);
  --icon-color: var(--icon-color-hover);
  --icon-border-color: var(--icon-border-color-hover);
}
:is([data-icon-list], .icon-list) a:hover {
  --icon-color: var(--icon-color-hover, var(--primary));
  --icon-background: var(--icon-background-hover, var(--primary-hover));
}
:where(a, button):has(> svg, > i):hover {
  --icon-color: var(--icon-color-hover, var(--primary));
  --icon-background: var(--icon-background-hover, var(--primary-hover));
}
/* Scroll offset */
[id] {
  scroll-margin-top: var(--offset, 0);
}

/* ==== 27-smooth-scrolling.css ==== */
/* 27-smooth-scrolling -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Smooth Scrolling
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   WHAT THIS GIVES YOU -- smooth anchor scrolling, .hidden-accessible, and the global
   reduced-motion guard.

   hidden-accessible-is-the-SCREEN-READER-ONLY-class:: text that must be announced but not
   seen -- a skip link, a form label, the word that makes "Read more" specific. It is NOT
   display: none, which would hide it from screen readers too. Never re-implement this by
   hand: the 1px + clip-path + white-space combination is the form that survives.

   the-1px-and--1px-are-the-known-EXCEPTION:: the checker allows them, because they are the
   mechanism rather than a spacing decision.

   scroll-behavior-turns-itself-OFF-for-keyboard-users:: html:has(:focus-visible) -- because
   smooth scrolling on Tab makes focus impossible to follow. Do not undo that.

   reduced-motion-is-handled-GLOBALLY-here:: the media query near the bottom cuts animation
   and transition duration site-wide. A template still guards its OWN motion, but it does
   not need to repeat this baseline.

   anchors-landing-under-a-sticky-header:: that is scroll-margin, from --offset in
   base-tokens\21-header-height.css. */

/* Feat: Smooth Scrolling */
html {
  scroll-behavior: smooth;
}
html:has(:focus-visible) {
  scroll-behavior: auto;
}
.hidden-accessible {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(100%);
  white-space: nowrap;
  /* added line */
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.skip-link {
  position: absolute !important;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  transform: translateY(-250%);
  --btn-min-width: fit-content;
  z-index: 100;
  background: var(--btn-background);
  color: var(--btn-text-color);
  padding-block: var(--btn-padding-block);
  padding-inline: var(--btn-padding-inline);
  inline-size: var(--btn-width, auto);
  min-inline-size: var(--btn-min-width);
  line-height: var(--btn-line-height);
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size, var(--text-m));
  font-weight: var(--btn-font-weight);
  font-style: var(--btn-font-style);
  text-transform: var(--btn-text-transform);
  letter-spacing: var(--btn-letter-spacing);
  text-decoration: var(--btn-text-decoration);
  border-width: var(--btn-border-width);
  border-style: var(--btn-border-style);
  border-radius: var(--btn-border-radius);
  border-color: var(--btn-border-color);
  transition: var(--btn-transition, var(--transition));
  justify-content: var(--btn-justify-content, center);
  align-items: var(--btn-align-items, center);
  text-align: var(--btn-text-align, center);
  display: var(--btn-display, inline-flex);
  --btn-background: var(--primary);
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary-ultra-light);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
@media (hover: hover) and (pointer: fine) {
  .skip-link:hover {
    background: var(--btn-background-hover);
    color: var(--btn-text-color-hover);
    border-color: var(--btn-border-color-hover);
    text-decoration: var(--btn-text-decoration-hover);
  }
}
.skip-link:where(:focus-visible) {
  outline-style: solid;
  outline-color: var(--focus-color);
  outline-width: var(--focus-width);
  outline-offset: var(--focus-offset);
}
.skip-link:focus-visible {
  transform: translateY(0);
}

/* ==== 28-focus-styles.css ==== */
/* 28-focus-styles -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Focus Styles
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   WHAT THIS GIVES YOU -- a keyboard focus ring on :focus-visible only, so a mouse click
   does not leave a ring behind while a Tab press does.

   the-outline-none-on-:focus-is-NOT-a-licence-to-copy-it:: it is paired with the
   :focus-visible rule directly beneath, which puts the ring back for keyboard users. That
   pairing is the whole point -- outline: none written anywhere else removes it for good and
   is a WCAG 2.4.7 failure.

   the-@supports-block-is-the-fallback:: browsers without :focus-visible get the ring on
   plain :focus, so nobody loses it.

   restyle-it-by-token:: --focus-color, --focus-width, --focus-offset in
   base-tokens\20-focus.css -- never by selecting :focus again. */

/* Feat: Focus Styles */
:focus {
  outline: none;
  box-shadow: none;
}
:focus-visible {
  outline-style: solid;
  outline-color: var(--focus-color);
  outline-width: var(--focus-width);
  outline-offset: var(--focus-offset);
}
@supports not selector(:focus-visible) {
  :focus {
    outline-style: solid;
    outline-color: var(--focus-color);
    outline-width: var(--focus-width);
    outline-offset: var(--focus-offset);
  }
}

/* ==== 29-section-styles.css ==== */
/* 29-section-styles -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Default Section Styles
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.

   THIS FILE IS WHERE THE CONTEXTUAL COLOUR FLIP LIVES. .bg--dark sets the surface, and
   :where(.bg--dark) then sets --relative-text-color, .bg--dark :where(h1..h6) takes
   --relative-heading-color, and .bg--dark [class*="btn--"] flips the whole button token
   set. One class in the markup answers surface, body text, headings and buttons together.

   READ THIS BEFORE WRITING A COLOUR IN A TEMPLATE -- the flip is written with :where(),
   which has ZERO specificity. Any authored selector beats it without !important and
   without looking wrong in the file, so a colour set on an element inside a bg-- section
   silently disables the relationship: swap the section's class afterwards and the words
   stay the colour they were.

   the-escape-hatch-is-named:: an element that must keep its colours regardless of surface
   carries .unrelate -- every flip here excludes it -- so "I mean it" is written as a class
   rather than as a more specific selector.

   the-tokens-it-reads:: base-tokens\02-contextual-colors.css
   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see
   [#the-background-class-carries-the-text-colours-with-it]
   the-framework-behaviour:: @ctx:atlas-wordpress-plugins-automaticcss-utilities@3 -- see
   [#color--contextual-auto-flip] */

/* Feat: Default Section Styles */
:where(section:not(section section)) {
  display: flex;
  flex-direction: column;
  padding-block: var(--section-padding-block);
  padding-inline: var(--gutter);
}
:where(body > header) {
  padding-block: var(--space-xs);
  padding-inline: var(--gutter);
}
:where(body > footer) {
  padding-block: var(--section-padding-block);
  padding-inline: var(--gutter);
}
.bg--ultra-light {
  background: var(--bg-ultra-light);
}
.bg--light {
  background: var(--bg-light);
}
.bg--dark {
  background: var(--bg-dark);
}
.bg--ultra-dark {
  background: var(--bg-ultra-dark);
}
.text--light {
  color: var(--text-light);
}
.text--light-muted {
  color: var(--text-light-muted);
}
.text--dark {
  color: var(--text-dark);
}
.text--dark-muted {
  color: var(--text-dark-muted);
}
:where(.bg--ultra-light) {
  --relative-text-color: var(--bg-ultra-light-text);
  color: var(--relative-text-color, inherit);
}
:where(.bg--light) {
  --relative-text-color: var(--bg-light-text);
  color: var(--relative-text-color, inherit);
}
:where(.bg--dark) {
  --relative-text-color: var(--bg-dark-text);
  color: var(--relative-text-color, inherit);
}
:where(.bg--ultra-dark) {
  --relative-text-color: var(--bg-ultra-dark-text);
  color: var(--relative-text-color, inherit);
}
.bg--ultra-light :where(h1, h2, h3, h4, h5, h6) {
  color: var(--relative-heading-color, inherit);
}
.bg--light :where(h1, h2, h3, h4, h5, h6) {
  color: var(--relative-heading-color, inherit);
}
.bg--dark :where(h1, h2, h3, h4, h5, h6) {
  color: var(--relative-heading-color, inherit);
}
.bg--ultra-dark :where(h1, h2, h3, h4, h5, h6) {
  color: var(--relative-heading-color, inherit);
}
.bg--ultra-light {
  --relative-heading-color: var(--bg-ultra-light-heading);
}
.bg--light {
  --relative-heading-color: var(--bg-light-heading);
}
.bg--dark {
  --relative-heading-color: var(--bg-dark-heading);
}
.bg--ultra-dark {
  --relative-heading-color: var(--bg-ultra-dark-heading);
}
.bg--ultra-light [class*="btn--"]:not(.unrelate) {
  --btn-background: var(--primary);
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary-ultra-light);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
.bg--ultra-light [class*="btn--"]:not(.unrelate).btn--outline {
  --btn-background: transparent;
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-width: 1.5px;
  --btn-border-color: var(--primary);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
.bg--light [class*="btn--"]:not(.unrelate) {
  --btn-background: var(--primary);
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary-ultra-light);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
.bg--light [class*="btn--"]:not(.unrelate).btn--outline {
  --btn-background: transparent;
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-width: 1.5px;
  --btn-border-color: var(--primary);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
.bg--dark [class*="btn--"]:not(.unrelate) {
  --btn-background: var(--primary);
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary-ultra-light);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
.bg--dark [class*="btn--"]:not(.unrelate).btn--outline {
  --btn-background: transparent;
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-width: 1.5px;
  --btn-border-color: var(--primary);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
.bg--ultra-dark [class*="btn--"]:not(.unrelate) {
  --btn-background: var(--primary);
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary-ultra-light);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-color: var(--btn-background);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
.bg--ultra-dark [class*="btn--"]:not(.unrelate).btn--outline {
  --btn-background: transparent;
  --btn-background-hover: var(--primary-hover);
  --btn-text-color: var(--primary);
  --btn-text-color-hover: var(--primary-ultra-light);
  --btn-border-width: 1.5px;
  --btn-border-color: var(--primary);
  --btn-border-color-hover: var(--btn-background-hover);
  --focus-color: var(--primary-light);
}
.bg--ultra-light {
  --icon-scheme: var(--bg-ultra-light-icon);
}
.bg--light {
  --icon-scheme: var(--bg-light-icon);
}
.bg--dark {
  --icon-scheme: var(--bg-dark-icon);
}
.bg--ultra-dark {
  --icon-scheme: var(--bg-ultra-dark-icon);
}

/* ==== 30-section-padding.css ==== */
/* 30-section-padding -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Section Padding
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   WHAT THIS GIVES YOU -- .section--{size} sets a section vertical rhythm plus the gutter,
   so a band changes height by SWAPPING A CLASS rather than by writing padding.

   the-to-forms-are-RESPONSIVE:: .section--l-to-m shrinks from l down to m across the
   viewport -- one class instead of a breakpoint.

   the-inline-padding-is-the-GUTTER-and-comes-free:: which is why a section never sets
   padding-inline itself -- doing so breaks the alignment every other band shares.

   a-section-with-no-class-still-has-rhythm:: --section-padding-block applies by default
   (base-classes\29-section-styles.css), so these classes are the deviation, not the setup.

   a-HEADER-band-has-its-own-scale:: header--xs through header--xxl do the same job for a
   site header, and they are the one place the two scales diverge -- a section reaches for
   the --section-space-* rhythm, a header reaches for the plain --space-* scale, because a
   masthead wants the spacing of a component rather than the breathing room of a band.

   the-empty-band-is-a-class-too:: section--none zeroes the block padding and KEEPS the
   gutter, which is what a full-bleed band wants -- a section written with padding: 0
   loses the inline alignment every other band shares.

   the-sizes-themselves:: base-tokens\04-sections.css */

/* Feat: Section Padding */
.section--xs {
  padding-block: var(--section-space-xs);
  padding-inline: var(--gutter);
}
.section--s {
  padding-block: var(--section-space-s);
  padding-inline: var(--gutter);
}
.section--s-to-xs {
  padding-block: var(--section-space-s-to-xs);
  padding-inline: var(--gutter);
}
.section--m {
  padding-block: var(--section-space-m);
  padding-inline: var(--gutter);
}
.section--m-to-s {
  padding-block: var(--section-space-m-to-s);
  padding-inline: var(--gutter);
}
.section--m-to-xs {
  padding-block: var(--section-space-m-to-xs);
  padding-inline: var(--gutter);
}
.section--l {
  padding-block: var(--section-space-l);
  padding-inline: var(--gutter);
}
.section--l-to-m {
  padding-block: var(--section-space-l-to-m);
  padding-inline: var(--gutter);
}
.section--l-to-s {
  padding-block: var(--section-space-l-to-s);
  padding-inline: var(--gutter);
}
.section--l-to-xs {
  padding-block: var(--section-space-l-to-xs);
  padding-inline: var(--gutter);
}
.section--xl {
  padding-block: var(--section-space-xl);
  padding-inline: var(--gutter);
}
.section--xl-to-l {
  padding-block: var(--section-space-xl-to-l);
  padding-inline: var(--gutter);
}
.section--xl-to-m {
  padding-block: var(--section-space-xl-to-m);
  padding-inline: var(--gutter);
}
.section--xl-to-s {
  padding-block: var(--section-space-xl-to-s);
  padding-inline: var(--gutter);
}
.section--xl-to-xs {
  padding-block: var(--section-space-xl-to-xs);
  padding-inline: var(--gutter);
}
.section--xxl {
  padding-block: var(--section-space-xxl);
  padding-inline: var(--gutter);
}
.section--xxl-to-xl {
  padding-block: var(--section-space-xxl-to-xl);
  padding-inline: var(--gutter);
}
.section--xxl-to-l {
  padding-block: var(--section-space-xxl-to-l);
  padding-inline: var(--gutter);
}
.section--xxl-to-m {
  padding-block: var(--section-space-xxl-to-m);
  padding-inline: var(--gutter);
}
.section--xxl-to-s {
  padding-block: var(--section-space-xxl-to-s);
  padding-inline: var(--gutter);
}
.section--xxl-to-xs {
  padding-block: var(--section-space-xxl-to-xs);
  padding-inline: var(--gutter);
}
.section--none {
  padding-block: 0;
  padding-inline: var(--gutter);
}
.header--xs {
  padding-block: var(--space-xs);
  padding-inline: var(--gutter);
}
.header--s {
  padding-block: var(--space-s);
  padding-inline: var(--gutter);
}
.header--m {
  padding-block: var(--space-m);
  padding-inline: var(--gutter);
}
.header--l {
  padding-block: var(--space-l);
  padding-inline: var(--gutter);
}
.header--xl {
  padding-block: var(--space-xl);
  padding-inline: var(--gutter);
}
.header--xxl {
  padding-block: var(--space-xxl);
  padding-inline: var(--gutter);
}

/* ==== 31-overlays.css ==== */
/* 31-overlays -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Overlays
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   WHAT THIS GIVES YOU -- .overlay draws a scrim through a ::before pseudo-element, which is
   how text stays readable over an arbitrary photo.

   this-is-the-CONTRAST-tool-for-a-background-image:: a photo is not a palette colour, so no
   token can guarantee the text on it is readable -- the overlay is what makes the promise.
   Pair it with .is-bg (base-classes\36-is-background.css).

   the-overlay-colour-is-the-knob:: the rgba default is the fallback, not the intended value.
   Set --overlay-color on the block, and prefer a color-mix on a role over a raw rgba.

   the-figure-rule-is-a-Z-INDEX-fix-not-a-style:: a figure wrapping media needs the overlay
   at z-index 0 rather than -1 or the scrim renders behind its own image.

   this-file-also-holds-the-.text--{size}-classes:: they set font-size AND the matching
   max-width, so a size class carries its own measure -- see base-tokens\03-text.css. */

/* Feat: Overlays */
[class*="overlay--"], .overlay {
  position: relative;
  z-index: 0;
  isolation: isolate;
}
[class*="overlay--"]::before, .overlay::before {
  content: "";
  background: var(--overlay-color, rgba(0, 0, 0, 0.7));
  position: absolute;
  inset: 0;
  z-index: var(--overlay-z-index, -1);
}
figure:where(:has(> img, > picture, > svg, > video, > iframe)):where(.overlay), figure:where(:has(> img, > picture, > svg, > video, > iframe)):where([class*="overlay--"]) {
  --overlay-z-index: 0;
}
:is(.text--xxl, .text--xl, .text--l, .text--m, .text--s, .text--xs) {
  line-height: var(--text-line-height);
  text-wrap: var(--text-text-wrap);
}
.text--xxl {
  font-size: var(--text-xxl);
}
.text--xxl:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) {
  max-width: var(--text-xxl-max-width);
}
.text--xl {
  font-size: var(--text-xl);
}
.text--xl:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) {
  max-width: var(--text-xl-max-width);
}
.text--l {
  font-size: var(--text-l);
}
.text--l:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) {
  max-width: var(--text-l-max-width);
}
.text--m {
  font-size: var(--text-m);
  line-height: var(--text-m-line-height);
}
.text--m:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) {
  max-width: var(--text-m-max-width);
}
.text--s {
  font-size: var(--text-s);
}
.text--s:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) {
  max-width: var(--text-s-max-width);
}
.text--xs {
  font-size: var(--text-xs);
}
.text--xs:is(p, li, blockquote, h1, h2, h3, h4, h5, h6, span, strong, cite) {
  max-width: var(--text-xs-max-width);
}
.h1 {
  font-size: var(--h1);
  max-width: var(--h1-max-width);
}
.h2 {
  font-size: var(--h2);
}
.h3 {
  font-size: var(--h3);
}
.h4 {
  font-size: var(--h4);
  line-height: var(--h4-line-height);
}
.h5 {
  font-size: var(--h5);
}
.h6 {
  font-size: var(--h6);
}
body blockquote {
  text-wrap: pretty;
}

/* ==== 32-position-and-sticky.css ==== */
/* 32-position-and-sticky -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Position & Sticky
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   WHAT THIS GIVES YOU -- .sticky, resting at --sticky-offset so it clears a sticky header
   automatically.

   sticky-fails-SILENTLY-and-it-is-usually-the-ancestor:: position sticky does nothing
   inside a parent with overflow hidden, overflow clip or a fixed height. Nothing errors --
   the element simply scrolls away. Check the ancestors before changing this rule.

   the-offset-comes-from-a-token:: base-tokens\22-position.css -- so a template applies the
   class and does not write inset-block-start. */

/* Feat: Position & Sticky */
.sticky {
  position: -webkit-sticky;
  position: sticky;
  inset-block-start: var(--sticky-offset, 0);
}

/* ==== 33-width-classes.css ==== */
/* 33-width-classes -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Width
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   WHAT THIS GIVES YOU -- .width--N caps an element at a FRACTION OF THE CONTENT MEASURE,
   not of the viewport. So .width--50 lines up with the grid rather than with the window.

   each-one-is-inline-size-100%-PLUS-a-max:: it fills what it is given and stops at the cap,
   so it is already responsive and needs no breakpoint to collapse on mobile.

   this-is-the-right-tool-for-a-READING-column:: capping prose at .width--70 keeps the line
   length comfortable. Capping it at a raw rem value does the same thing today and stops
   tracking the measure the moment --content-width changes.

   the-file-also-carries-the-gap-OFF-switch:: gap--none zeroes the row and column gap and
   the gap shorthand together. It is the counterpart to the automatic gaps in
   base-classes\34-gap-classes.css -- where a section, a div and a grid all receive a gap
   whether or not anybody asked, this is how a template declines one without writing a
   rule of its own.

   reach-for-it-rather-than-writing-gap-0:: the class is what the next reader recognises,
   and it clears the two custom properties as well as the shorthand, which a bare gap: 0
   does not.

   the-measure-itself:: base-tokens\06-width.css */

/* Feat: Width */
.width--10 {
  inline-size: 100%;
  max-inline-size: calc(var(--content-width) * 0.1);
}
.width--20 {
  inline-size: 100%;
  max-inline-size: calc(var(--content-width) * 0.2);
}
.width--30 {
  inline-size: 100%;
  max-inline-size: calc(var(--content-width) * 0.3);
}
.width--40 {
  inline-size: 100%;
  max-inline-size: calc(var(--content-width) * 0.4);
}
.width--50 {
  inline-size: 100%;
  max-inline-size: calc(var(--content-width) * 0.5);
}
.width--60 {
  inline-size: 100%;
  max-inline-size: calc(var(--content-width) * 0.6);
}
.width--70 {
  inline-size: 100%;
  max-inline-size: calc(var(--content-width) * 0.7);
}
.width--80 {
  inline-size: 100%;
  max-inline-size: calc(var(--content-width) * 0.8);
}
.width--90 {
  inline-size: 100%;
  max-inline-size: calc(var(--content-width) * 0.9);
}
.width--full {
  inline-size: 100%;
  max-inline-size: 100%;
}
figure[class*="width--"] img {
  inline-size: 100%;
}
.width--auto {
  inline-size: auto !important;
  max-inline-size: 100%;
}
.content-width {
  inline-size: 100%;
  max-inline-size: var(--content-width);
  margin-inline: auto;
}
.content-width--safe {
  inline-size: 100%;
  max-inline-size: var(--content-width-safe);
  margin-inline: auto;
}
.width--max-content {
  inline-size: max-content;
  max-inline-size: 100%;
}
.width--min-content {
  inline-size: min-content;
  max-inline-size: 100%;
}
.width--fit-content {
  inline-size: fit-content;
  max-inline-size: 100%;
}
.gap--none {
  --row-gap: 0;
  --col-gap: 0;
  gap: 0;
}
.container-gap {
  --row-gap: var(--container-gap);
  --col-gap: var(--container-gap);
  gap: var(--container-gap);
}
.content-gap {
  --row-gap: var(--content-gap);
  --col-gap: var(--content-gap);
  gap: var(--content-gap);
}
.grid-gap {
  --row-gap: var(--grid-gap);
  --col-gap: var(--grid-gap);
  gap: var(--grid-gap);
}

/* ==== 34-gap-classes.css ==== */
/* 34-gap-classes -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Auto Container Gap + Auto Content Gap + Auto Container Gap + Auto Grid Gap
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   THIS IS WHERE SPACING COMES FROM AUTOMATICALLY, and it is the file most likely to make
   you write a rule you did not need. A section already has --container-gap between its
   top-level children, any div/ul/ol inside it already has --content-gap, and anything
   carrying a grid-- class already has --grid-gap.

   SO A TEMPLATE USUALLY SETS NO GAP AT ALL:: check what is inherited before writing one.
   Restating the gap that is already applied is the single most common redundant rule here.

   when-a-gap-is-nearly-right-MULTIPLY-it:: calc(var(--content-gap) * 0.75) keeps the gap
   meaning what it means and keeps tracking the scale. Swapping in a --space-* token throws
   both away for a number that happens to look right today.

   these-are-:where()-so-you-always-win:: overriding takes no !important and no specificity
   trick -- which is also why an accidental gap silently replaces the system one.

   images-get---radius-here-too:: the img/figure rule rounds media by default, so a template
   sets border-radius on an image only to deviate.

   the-effects-system-used-to-live-at-the-END-of-this-file:: it is now base-classes\
   35-effects.css, lifted out as a contiguous tail so the merge order did not move. The Feat
   divider above the grid-gap rule is the last one ACSS draws, which is why fourteen effects
   rules sat under a heading about gaps for as long as they did.

   the-gap-OFF-switch-is-elsewhere:: gap--none lives in base-classes\33-width-classes.css.

   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see [#spacing] */

/* Feat: Auto Container Gap */
:where(section:not(section section)) {
  gap: var(--container-gap);
}

/* Feat: Auto Content Gap */
:where(section:not(section section)) > :where(div, ul, ol) {
  gap: var(--content-gap);
}

/* Feat: Auto Container Gap */
:where([data-etch-element="flex-div"]:not(main)) {
  gap: var(--content-gap);
}

/* Feat: Auto Grid Gap */
section > div:where([class*="grid--"]), :where([class*="grid--"]) {
  gap: var(--grid-gap);
}
:where(img:not(header img), figure:not(figure:has(img))) {
  border-radius: var(--radius);
}

/* ==== 35-effects.css ==== */
/* 35-effects -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Effects
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   THE SCROLL AND HOVER EFFECT SURFACE -- on-enter, on-exit, on-visible and on-hover. ACSS
   calls this its effects module. It has no Feat divider of its own in the emission, so it
   used to sit at the tail of 34-gap-classes.css under a heading about gaps.

   READ THIS BEFORE REACHING FOR ONE OF THESE CLASSES -- what ships here is the SCAFFOLDING
   and not the effects. The rules present are the parent that drives an on-enter-all or
   on-exit-all group, the stagger delays computed from sibling-index(), the @supports-not
   fallback that resets opacity and transform where animation-timeline is unsupported, and
   the prefers-reduced-motion block that switches all four families off.

   the-effect-classes-themselves-are-ABSENT:: fade, float, sink, slide, grow, shrink and
   blur are each gated behind their own dashboard option in the plugin, and every one was
   off on the install this cascade was taken from. The emission carries no keyframes at all
   and neither does this file, so the two animation-name declarations below name
   enter-animate and exit-animate and resolve to nothing.

   what-that-costs-a-template:: an element carrying an on-enter-all class gets an animation
   that does not exist and renders unanimated. The class reads as working, so this is the
   silent-failure shape rather than an error anybody sees.

   on-visible-all-is-the-odd-one-and-runs-on-TRANSITION:: where enter and exit are driven by
   a scroll timeline, the visible family changes state and lets a transition carry it, which
   is why the only rule shipped for it here is the stagger delay and why its reset in the
   reduced-motion block clears a transition rather than an animation. The state change that
   would trigger it is not in this stylesheet either.

   how-it-would-be-turned-on:: enable those effect options in the ACSS dashboard and import
   the values again -- the keyframes and the per-effect classes arrive WITH the emission and
   are never written here, because a hand-written keyframe is a second source for it.
   verified-against:: assets/scss/modules/effects/entrance/_classes.scss, where the
   @keyframes block sits inside an @if over the seven option flags

   the-reduced-motion-block-is-the-one-part-that-fully-works:: it needs no keyframes to do
   its job, so a visitor who asks for less motion gets it whether or not the effects are on.

   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see [#spacing] */

@supports (animation-timeline: view()) {
  [class*="on-enter-all--"] > * {
    animation-name: enter-animate;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: var(--animate-range-start, entry 20%) var(--animate-range-end, entry 100%);
  }
  [class*="on-enter-all--"].on-enter--stagger > * {
    animation-delay: calc(sibling-index() * var(--enter-stagger-interval, 5%));
  }
}
@supports not (animation-timeline: view()) {
  [class*="on-enter--"], [class*="on-enter-all--"] > * {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@supports (animation-timeline: view()) {
  [class*="on-exit-all--"] > * {
    animation-name: exit-animate;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: var(--exit-range-start, exit 0%) var(--exit-range-end, exit 80%);
  }
  [class*="on-exit-all--"].on-exit--stagger > * {
    animation-delay: calc(sibling-index() * var(--exit-stagger-interval, 5%));
  }
}
@supports not (animation-timeline: view()) {
  [class*="on-exit--"], [class*="on-exit-all--"] > * {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
[class*="on-visible-all--"].on-visible--stagger > * {
  transition-delay: calc(sibling-index() * var(--visible-stagger-interval, 0.1s));
}
@media (prefers-reduced-motion: reduce) {
  [class*="on-enter--"], [class*="on-enter-all--"] > *, [class*="on-exit--"], [class*="on-exit-all--"] > * {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
  [class*="on-visible--"], [class*="on-visible-all--"] > * {
    transition: none !important;
    opacity: 1;
    translate: none;
    scale: none;
    filter: none;
  }
  [class*="on-hover--"] {
    transition: none;
  }
  [class*="on-hover--"]:hover {
    transform: none;
    translate: none;
    scale: none;
    box-shadow: initial;
    filter: none;
  }
}

/* ==== 36-is-background.css ==== */
/* 36-is-background -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Is Background
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   WHAT THIS GIVES YOU -- .is-bg turns a real img or figure into a full-bleed background of
   its parent, and the :has() rule gives that parent the positioning context it needs.

   why-a-real-IMG-and-not-a-css-background:: an img can carry alt text, srcset, lazy loading
   and fetchpriority. A CSS background can carry none of those, which is why anything a
   reader needs must be a real element.

   the-parent-needs-nothing-from-you:: :has(> .is-bg) supplies position and isolation, so a
   template adds the class to the image and stops.

   every-value-is-a---bg--*-KNOB:: --bg-object-fit, --bg-object-position, --bg-radius,
   --bg-z-index. Set those on the parent block rather than re-selecting the image.

   text-over-it-needs-a-CONTRAST-guarantee:: the image is arbitrary, so readability comes
   from an overlay (base-classes\31-overlays.css) rather than from hoping the photo is dark. */

/* Feat: Is Background */
:has(> .is-bg) {
  position: relative;
  isolation: isolate;
}
:is(*, img, figure, picture).is-bg {
  position: var(--bg-position, absolute) !important;
  inset: var(--bg-inset, 0);
  inline-size: var(--bg-width, 100%);
  max-inline-size: 100%;
  block-size: var(--bg-height, 100%);
  border-radius: var(--bg-radius, 0);
  object-fit: var(--bg-object-fit, cover);
  object-position: var(--bg-object-position, center);
  z-index: var(--bg-z-index, -2);
  border-radius: var(--bg-radius, 0);
  pointer-events: none;
}
:is(*, img, figure, picture).is-bg > img {
  object-fit: var(--bg-object-fit, cover);
  object-position: var(--bg-object-position, center);
  inline-size: 100%;
  block-size: 100%;
  border-radius: var(--bg-radius, 0);
}
.content-grid > :is(*, img, figure, picture).is-bg {
  grid-column: full;
}

/* ==== 37-content-grid.css ==== */
/* 37-content-grid -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Content Grid
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   WHAT THIS GIVES YOU -- .content-grid lets a child BREAK OUT of the content measure
   without leaving the flow. Children sit in the content column by default, and
   the classes .content--feature, .content--feature-max, .content--full and --full-safe widen
   one child at a time.

   this-is-how-a-full-bleed-band-is-built:: no negative margins, no 100vw with a transform,
   no absolute positioning -- the named grid columns do it, and it stays correct when a
   scrollbar appears (100vw does not).

   content--full-safe-keeps-the-gutter:: edge-to-edge background, content still off the screen edge.
   Use it for anything with text; use --full for a bare image.

   the-!importants-are-STRUCTURAL:: column-gap and display are what the named columns depend
   on, so they are locked rather than left beatable.

   pick-this-over-a-nested-section:: a section inside a section loses the automatic gaps and
   padding -- see base-classes\34-gap-classes.css and 29-section-styles.css.

   a-padding-class-on-the-grid-ITSELF-gives-up-the-inline-padding:: a content-grid also
   carrying a padding, section or header class has its padding-inline zeroed, because the
   grid's own named columns are what position the content and an outer inline padding
   would fight them. The block padding those classes set still applies, so the band keeps
   its vertical rhythm and loses only the horizontal inset it does not need. */

/* Feat: Content Grid */
:where(.content-grid) {
  --full: minmax(var(--gutter), 1fr);
  padding-inline: 0;
  column-gap: 0 !important;
  display: grid !important;
  grid-template-columns: [full-start] var(--full) [feature-max-start] minmax(0, var(--feature-max-width, 100px)) [feature-start] minmax(0, var(--feature-width, 50px)) [content-start] min(var(--content-width), 100% - var(--gutter) * 2) [content-end] minmax(0, var(--feature-width, 50px)) [feature-end] minmax(0, var(--feature-max-width, 100px)) [feature-max-end] var(--full) [full-end];
}
:where(.content-grid) > :not(.content--feature, .content--feature-max, .content--full, .content--full-safe) {
  width: 100%;
  max-width: 100%;
}
:where(.content-grid) > :where(:not(.content--feature, .content--feature-max, .content--full, .content--full-safe)) {
  grid-column: content;
}
.content--feature {
  grid-column: feature;
}
.content--feature-max {
  grid-column: feature-max;
}
.content--full {
  grid-column: full;
}
.content--full-safe {
  grid-column: full;
  padding-inline: var(--gutter);
}
.content-grid:where(.content--full-safe) {
  padding-inline: var(--gutter);
}
:is(.content--feature, .content--feature-max, .content--full, .content--full-safe):not(.content-grid--off :is(.content--feature, .content--feature-max, .content--full, .content--full-safe)) {
  width: 100% !important;
  max-width: 100%;
}
:is(.content--feature, .content--feature-max, .content--full, .content--full-safe) :is(figure img, picture img) {
  width: 100%;
}
.content-grid:is([class*="padding--"], [class*="section--"], [class*="header--"]) {
  padding-inline: 0;
}

/* ==== 38-smart-spacing-rules.css ==== */
/* 38-smart-spacing-rules -- FRAMEWORK BEHAVIOUR, hand-edited
   Holds: Smart Spacing + Default Section Styles
   Derived from the ACSS 4.0.1 emission, cut at the Feat boundaries ACSS itself draws.
   build-base-css.ps1 merges every file in this folder, in name order, into one stylesheet.
   A token may be declared in :root in ONE file here -- the build fails on a second.
   WHAT THIS GIVES YOU -- .smart-spacing spaces children with margin-block-start on the
   FLOW, with a bigger step before a heading, so prose gets a rhythm the author never wrote.

   THIS IS THE ONE PLACE MARGIN IS THE RIGHT ANSWER:: everywhere else spacing between
   siblings is gap. gap needs a parent that owns its children, and nobody owns the output of
   a rich-text field -- so the exception is the ABSENCE OF CONTROL, not a preference.

   which-means-do-not-reach-for-it-on-markup-you-own:: on a template you wrote, .smart-spacing
   is the margin habit coming back under a different name. Use gap.

   the-heading-steps-are-per-level:: --h2-spacing, --h3-spacing, --h4-spacing fall back to
   --heading-spacing, so a heading gets more air above it than a paragraph does.

   it-turns-row-gap-OFF:: row-gap: 0 !important, because gap and flow margins together
   double every space. That is why the two systems are never mixed on one element.

   the-first-rule-is-global:: margin-block: 0 on every text element, which is what makes gap
   predictable everywhere else. It is not part of the opt-in.

   our-law:: @ctx:cockpit-format-rules-css-template@13 -- see [#spacing], the-rich-text-exception */

/* Feat: Smart Spacing */
body :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
  margin-block: 0;
}
.smart-spacing-normalize :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
  margin-block: 0;
}
.smart-spacing {
  row-gap: 0 !important;
}
.smart-spacing > * + * {
  margin-block-start: var(--flow-spacing, initial);
  margin-block-end: 0;
}
.smart-spacing > * + :where(h1, h2, h3, h4, h5, h6) {
  margin-block-start: var(--heading-spacing, var(--flow-spacing, initial));
  margin-block-end: 0;
}
.smart-spacing > :where(* + h2) {
  margin-block-start: var(--h2-spacing, var(--heading-spacing));
  margin-block-end: 0;
}
.smart-spacing > :where(* + h3) {
  margin-block-start: var(--h3-spacing, var(--heading-spacing));
  margin-block-end: 0;
}
.smart-spacing > :where(* + h4) {
  margin-block-start: var(--h4-spacing, var(--heading-spacing));
  margin-block-end: 0;
}
.smart-spacing > :where(* + h5) {
  margin-block-start: var(--h5-spacing, var(--heading-spacing));
  margin-block-end: 0;
}
.smart-spacing > :where(* + h6) {
  margin-block-start: var(--h6-spacing, var(--heading-spacing));
  margin-block-end: 0;
}
.smart-spacing > * + p {
  margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial));
  margin-block-end: 0;
}
.smart-spacing > :is(* + ul, * + ol) {
  margin-block: var(--list-spacing, var(--flow-spacing, initial));
}
.smart-spacing > :is(ul, ol) {
  padding-inline-start: var(--list-indent-spacing, var(--flow-spacing, initial));
}
.smart-spacing > ul * + li, .smart-spacing > ol * + li {
  margin-block-start: var(--list-item-spacing, var(--flow-spacing, initial));
  margin-block-end: 0;
}
.smart-spacing > ul ul, .smart-spacing > ol ol, .smart-spacing > ul ol, .smart-spacing > ol ul {
  margin-block: var(--nested-list-spacing, var(--list-item-spacing, initial));
  padding-inline-start: var(--nested-list-indent-spacing, initial);
}
.smart-spacing > :is(ul, ol) :is(ul, ol) li {
  margin-block-start: var(--nested-list-item-spacing, var(--list-item-spacing, initial));
}
.smart-spacing > * + figure, .smart-spacing > * + picture {
  margin-block: var(--figure-spacing, var(--flow-spacing, initial));
}
.smart-spacing figcaption {
  margin-block: var(--figcaption-spacing, var(--flow-spacing, initial));
}
.smart-spacing > * + blockquote:where(:not(figure > blockquote)) {
  margin-block: var(--blockquote-spacing, var(--flow-spacing, initial));
}
.smart-spacing > blockquote * + * {
  margin-block-start: var(--paragraph-spacing, var(--flow-spacing, initial));
  margin-block-end: 0;
}
.smart-spacing > :is(figure, blockquote, ul, ol):where(:not(:first-child)) + * {
  --paragraph-spacing: 0;
  --flow-spacing: 0;
}
.smart-spacing--off :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li) {
  margin-block: 0;
}

/* Feat: Default Section Styles */
#shadow-host-companion {
  padding: 0;
}