@charset "UTF-8";
/* ==========================================================================
   Context Hubs — front-end entry point.
   ==========================================================================

   One of exactly two entry points. Layers load in cascade order: settings first
   so every later layer can consume the aliases, then generic, roles, Panels.

   Anything content-facing added below must also be reachable from editor.scss,
   or the editor and the rendered page will disagree.
   ========================================================================== */
/* ==========================================================================
   Brand layer — semantic aliases over theme.json presets.
   ==========================================================================

   theme.json is the single source of design values. WordPress emits them as
   --wp--preset--* and --wp--custom--*. This layer gives them stable semantic
   names so the role and Panel layers never reference a preset slug directly.

   Renaming a preset in theme.json therefore touches this file only, and a
   client re-skin is a theme.json change with no CSS edit at all.

   No literal design values below. If a value is not derivable from theme.json,
   it belongs in theme.json first.
   ========================================================================== */
:root {
  /* Surface roles and the hero gradient, by the token contract's names. The
     page's own text, line and action colours are contract names too, and are
     declared with the Panel roles. The inverse surface falls back to the
     contrast preset, which is what the old --ds-color-inverse-bg read. */
  --ds-surface-sunken: var(--wp--preset--color--surface-sunken);
  --ds-surface-inverse: var(--wp--preset--color--surface-inverse, var(--wp--preset--color--contrast));
  --ds-surface-accent: var(--wp--preset--color--surface-accent);
  --ds-surface-marker: var(--wp--preset--color--surface-marker);
  --ds-gradient-hero: var(--wp--preset--gradient--hero);
  /* Typography. Sizes, weights and leading are contract names, declared
     with the Panel roles. */
  --ds-font-body: var(--wp--preset--font-family--body);
  --ds-font-heading: var(--wp--preset--font-family--heading);
  /* Shape. The radius steps, the card shadow and the three widths are
     contract names, declared with the Panel roles. */
  --ds-radius-pill: var(--wp--custom--radius--pill);
  /* Banner artwork. The Page Banner screen sets these on the banner itself;
     a theme can give defaults through settings.custom.banner in theme.json. */
  --ds-banner-art-cap: var(--wp--custom--banner--art-max);
  --ds-banner-art-phone: var(--wp--custom--banner--art-phone);
  --ds-banner-art-bg-fill: var(--wp--custom--banner--bg-fill);
  --ds-banner-art-bg-opacity: var(--wp--custom--banner--bg-opacity);
  --ds-banner-art-bg-radius: var(--wp--custom--banner--bg-radius);
  --ds-banner-art-bg-size: var(--wp--custom--banner--bg-size);
}

/* ==========================================================================
   Panel roles — the tokens the Row Panels read, with plain defaults.
   ==========================================================================

   Every name here is a contract name (tokens/contract.template.tokens.json,
   role.fg.strong -> --ds-fg-strong). A client names these in its own token
   map. The defaults read theme.json, directly or through another contract
   name, so a site without a map still gets a readable, unbranded Panel. The
   few theme.json has no slot for fall back to a plain value.

   :where() keeps them at zero specificity: a client's :root map wins however
   the stylesheets end up ordered. Three roles the Panels use are declared in
   _brand.scss already and are not repeated here: surface-sunken,
   surface-marker and radius-pill.
   ========================================================================== */
/*
   The light-ground colour roles, from theme.json.

   The page ground takes the same set, to put them back for a light card inside
   a dark band (panels/_grounds.scss). A ground can't restore a role by pointing
   it at itself, so the set is stated once here for both.
*/
:where(:root, .c-ground--page) {
  --ds-fg-strong: var(--wp--preset--color--accent);
  --ds-fg-medium: var(--wp--preset--color--contrast);
  --ds-fg-secondary: var(--ds-fg-medium);
  --ds-fg-muted: var(--wp--preset--color--muted);
  --ds-fg-eyebrow: var(--ds-action-primary-bg);
  --ds-fg-link: var(--ds-action-primary-bg);
  --ds-border-faint: var(--wp--preset--color--border);
  --ds-border-card: var(--ds-border-faint);
}

:where(:root) {
  /* Text */
  --ds-fg-on-dark: var(--wp--preset--color--base);
  --ds-fg-on-badge: var(--ds-fg-medium);
  --ds-fg-on-dark-soft: var(--ds-fg-on-dark);
  --ds-fg-emphasis-on-dark: var(--ds-fg-on-dark);
  --ds-fg-link-on-dark: var(--ds-fg-on-dark);
  --ds-fg-on-accent: var(--ds-fg-on-dark);
  --ds-fg-on-accent-soft: var(--ds-fg-on-dark);
  /* Surfaces and lines */
  --ds-surface-page: var(--wp--preset--color--base);
  --ds-surface-badge: var(--ds-action-primary-bg);
  --ds-border-soft: var(--ds-border-faint);
  --ds-border-accent: var(--ds-action-primary-bg);
  --ds-surface-selected: var(--wp--custom--surface--selected, color-mix(in srgb, var(--ds-action-primary-bg) 8%, var(--ds-surface-page)));
  --ds-border-selected: var(--ds-action-primary-bg);
  --ds-border-on-dark: var(--wp--custom--border--on-dark, color-mix(in srgb, var(--ds-fg-on-dark) 24%, transparent));
  --ds-border-accent-on-dark: var(--wp--custom--border--accent-on-dark, color-mix(in srgb, var(--ds-fg-on-dark) 40%, transparent));
  --ds-hairline: var(--wp--custom--hairline, 1px);
  --ds-shadow-card-tinted: var(--ds-shadow-card-sm);
  --ds-graphic-swipe: var(--ds-surface-marker, transparent);
  --ds-mask-chevron-down: var(--wp--custom--mask--chevron-down, none);
  /* Actions */
  --ds-action-primary-bg: var(--wp--preset--color--primary);
  --ds-action-primary-fg: var(--ds-surface-page);
  --ds-action-ghost-border: var(--ds-action-primary-bg);
  --ds-action-ghost-fg: var(--ds-action-primary-bg);
  --ds-action-on-dark-bg: var(--ds-fg-on-dark);
  --ds-action-on-dark-fg: var(--ds-surface-inverse);
  --ds-action-on-accent-bg: var(--ds-fg-on-dark);
  --ds-action-on-accent-fg: var(--ds-action-primary-bg);
  /* Type */
  --ds-t-hero: var(--wp--preset--font-size--xx-large);
  --ds-t-section: var(--wp--preset--font-size--x-large);
  --ds-t-lead: var(--wp--preset--font-size--large);
  --ds-t-h3: var(--ds-t-lead);
  --ds-t-card-title: var(--ds-t-lead);
  --ds-t-stat: var(--ds-t-hero);
  --ds-t-body: var(--wp--preset--font-size--medium);
  --ds-t-small: var(--wp--preset--font-size--small);
  --ds-t-eyebrow: var(--ds-t-small);
  --ds-t-label: var(--ds-t-small);
  --ds-t-tag: var(--ds-t-small);
  --ds-fw-regular: var(--wp--custom--typography--weight--regular);
  --ds-fw-semi: var(--wp--custom--typography--weight--semibold);
  --ds-fw-bold: var(--wp--custom--typography--weight--bold);
  --ds-lh-tight: var(--wp--custom--typography--line-height--heading);
  --ds-lh-snug: var(--ds-lh-tight);
  --ds-lh-relaxed: var(--wp--custom--typography--line-height--body);
  --ds-lh-normal: var(--ds-lh-relaxed);
  /* Space. theme.json has six steps; the contract has twelve, so the steps
     between fall on the one below. */
  --ds-space-2: var(--wp--preset--spacing--20);
  --ds-space-1: var(--wp--preset--spacing--10, calc(var(--ds-space-2) / 2));
  --ds-space-3: var(--wp--preset--spacing--30);
  --ds-space-4: var(--ds-space-3);
  --ds-space-5: var(--wp--preset--spacing--40);
  --ds-space-6: var(--ds-space-5);
  --ds-space-7: var(--wp--preset--spacing--50);
  --ds-space-8: var(--ds-space-7);
  --ds-space-9: var(--wp--preset--spacing--60);
  --ds-space-10: var(--ds-space-9);
  --ds-space-11: var(--wp--preset--spacing--70);
  --ds-gutter: var(--ds-space-5);
  /* Shape and width */
  --ds-radius-sm: var(--wp--custom--radius--small);
  --ds-radius-md: var(--wp--custom--radius--card);
  --ds-radius-lg: var(--ds-radius-md);
  --ds-shadow-card-sm: var(--wp--custom--shadow--card);
  --ds-measure-banner: var(--wp--style--global--wide-size);
  --ds-measure-content: var(--wp--style--global--content-size);
  --ds-measure-prose: var(--wp--custom--measure);
}

/* ==========================================================================
   Generic — what the plugin's own CSS assumes, and nothing the parent owns.
   ==========================================================================

   Kadence is the client's frame and ships its own element defaults. This layer
   is not a reset of that frame: an element rule here reaches every element on
   the site, including the ones the parent draws. A global
   `img, svg { display: block }` did exactly that — it took Kadence's inline
   icons and inline images out of their lines, on every page, from a plugin
   whose business is the page content. Component media is styled by the
   component (see components/_banner.scss), never from here.

   What remains is what the plugin's components rely on.
   ========================================================================== */
/* Every width and padding in the role and component layers assumes border-box.
   Kadence resolves to the same box model, so this states the assumption rather
   than changing anything. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Let long words break rather than force a horizontal scrollbar. */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
figcaption {
  overflow-wrap: break-word;
}

/* Respect a reduced-motion preference for everything the plugin animates. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important; /* stylelint-disable-line declaration-no-important -- an accessibility preference must beat presentation styles. */
    animation-iteration-count: 1 !important; /* stylelint-disable-line declaration-no-important -- as above. */
    transition-duration: 0.01ms !important; /* stylelint-disable-line declaration-no-important -- as above. */
    scroll-behavior: auto !important; /* stylelint-disable-line declaration-no-important -- as above. */
  }
}
/* ==========================================================================
   Roles — the invariant semantic vocabulary.
   ==========================================================================

   Every class here must have a matching entry in config/vocabulary.json, with
   its allowed blocks, conflicts and purpose. The build fails on a role class
   that is not declared there, and on a declared role with no implementation.

   Roles consume --ds-* only. A role name must never contain a design value:
   .ds-t-display is a role, .ds-text-48 is not.

   The first set is deliberately small and provisional. It was derived from
   semantic concepts in the Ascendant Article Subpages design export, not from
   its fixed pixel utilities or Kadence implementation.
   ========================================================================== */
.ds-t-display {
  color: var(--ds-fg-strong);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-t-hero);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-tight);
}

.ds-t-section-title {
  color: var(--ds-fg-strong);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-t-section);
  font-weight: var(--ds-fw-semi);
  line-height: var(--ds-lh-tight);
}

.ds-t-subheading {
  color: var(--ds-fg-strong);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-t-lead);
  font-weight: var(--ds-fw-semi);
  line-height: var(--ds-lh-tight);
}

.ds-t-lead {
  color: var(--ds-fg-medium);
  font-family: var(--ds-font-body);
  font-size: var(--ds-t-lead);
  font-weight: var(--ds-fw-regular);
  line-height: var(--ds-lh-relaxed);
}

.ds-t-longform {
  max-width: var(--ds-measure-prose);
  color: var(--ds-fg-medium);
  font-family: var(--ds-font-body);
  font-size: var(--ds-t-body);
  font-weight: var(--ds-fw-regular);
  line-height: var(--ds-lh-relaxed);
}

.ds-t-quote {
  color: var(--ds-fg-strong);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-t-lead);
  font-weight: var(--ds-fw-semi);
  line-height: var(--ds-lh-relaxed);
}

.ds-t-supporting {
  color: var(--ds-fg-muted);
  font-family: var(--ds-font-body);
  font-size: var(--ds-t-small);
  font-weight: var(--ds-fw-regular);
  line-height: var(--ds-lh-relaxed);
}

.ds-t-eyebrow {
  color: var(--ds-fg-eyebrow);
  font-family: var(--ds-font-heading);
  font-size: var(--ds-t-small);
  font-weight: var(--ds-fw-semi);
  line-height: var(--ds-lh-tight);
  text-transform: uppercase;
}

.ds-measure {
  max-width: var(--ds-measure-prose);
}

.ds-section-space {
  padding-block: var(--ds-space-11);
}

.ds-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
}

.ds-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
}

.ds-inverse {
  color: var(--ds-fg-on-dark);
  background-color: var(--ds-surface-inverse);
}

/* ==========================================================================
   Banner — the hooked hero.
   ==========================================================================

   Structure only. Layout, rhythm and shape live here because the plugin owns
   the markup, so it owns the rules targeting it. Colour comes from a role
   token, falling back to the site's own theme.json preset, so the banner
   renders plain but correct on a site with no Chassis tokens and right on one
   with them. No literal values.

   The background image itself is set inline by the renderer, because it is a
   per-page value rather than anything the design system has an opinion about.

   Front-end only: the banner is put into the frame by a placement adapter and
   is never drawn inside the editor canvas, so it is listed in vocabulary.json's
   frontEndOnly and editor.scss does not import it.
   ========================================================================== */
.c-banner {
  background-color: var(--ds-surface-page, var(--wp--preset--color--surface));
  padding-block: var(--ds-space-9, 3rem);
  padding-inline: var(--ds-space-5, 1.25rem);
}

.c-banner--has-background {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*
   The two grounds.

   Both re-point existing aliases rather than introducing colours, so a site
   that has mapped its tokens gets both variants for nothing and the plugin
   still knows no brand values.

   The roles move as a set — surface and every text role together — because
   changing a ground without the text on it is how a heading ends up at
   1.00:1. That is not hypothetical here: the brush stroke behind a headline
   measures 11.44:1 in ink and 1.47:1 in white against Ascendant's own swipe,
   so the light ground is what makes a swiped heading legible at all.

   Neither is a default. A banner with no ground set keeps whatever the site's
   own rules give it.

   In the light variant `background-image: none` is the load-bearing line. A
   site that wants a dark banner everywhere says so by painting .c-banner —
   Ascendant's token map gives it a gradient — and a light variant has to undo
   that, not merely state a background colour underneath it.
*/
.c-banner--light {
  background-color: var(--ds-surface-page, var(--wp--preset--color--surface));
  background-image: none;
  color: var(--ds-fg-medium, var(--wp--preset--color--body));
}

.c-banner--inverse {
  background-color: var(--ds-surface-inverse, var(--wp--preset--color--contrast));
  color: var(--ds-fg-on-dark, var(--wp--preset--color--base));
}

/*
   Under the banner look the grounds are the token contract's roles: the sunken
   surface, and the inverse surface under the hero gradient. They hang off
   c-banner--look, so a page that only sets its own ground keeps the colours it
   had. A site without the roles falls back to the two rules above.
*/
.c-banner--look.c-banner--light {
  background-color: var(--ds-surface-sunken, var(--ds-surface-page, var(--wp--preset--color--surface)));
}

.c-banner--look.c-banner--inverse {
  background-color: var(--ds-surface-inverse, var(--wp--preset--color--contrast));
  background-image: var(--ds-gradient-hero, none);
}

.c-banner--inverse :is(.c-banner__heading, .c-banner__body) {
  color: var(--ds-fg-on-dark, var(--wp--preset--color--base));
}

.c-banner--light .c-banner__heading {
  color: var(--ds-fg-strong, var(--wp--preset--color--body));
}

.c-banner--light .c-banner__body {
  color: var(--ds-fg-medium, var(--wp--preset--color--body));
}

.c-banner__inner {
  display: grid;
  gap: var(--ds-space-7, 2rem);
  margin-inline: auto;
  max-width: var(--ds-measure-banner, 75rem);
}

/* Two columns once there is room for them, one column below that. */
.c-banner--two-column .c-banner__inner {
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .c-banner--two-column .c-banner__inner {
    grid-template-columns: 1fr 1fr;
  }
}
.c-banner__content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3, 0.75rem);
}

/*
   Typography is repeated here, with fallbacks, on purpose.

   The role layer sets font-size: var(--ds-t-hero) with no fallback, so on
   a site carrying no Chassis tokens the declaration is invalid and the heading
   inherits whatever the theme gives it. Measured on a Kadence site with no
   client token file: the display heading rendered at 18px while the body
   rendered at 36px — the hierarchy inverted.

   The component loads after the roles layer, so these win where a token is
   missing and lose to nothing where one is present. Remove them once the role
   layer carries its own fallbacks.
*/
.c-banner__heading {
  font-size: var(--ds-t-hero, 2.25rem);
  font-weight: var(--ds-fw-bold, 700);
  line-height: var(--ds-lh-tight, 1.15);
}

.c-banner__body {
  font-size: var(--ds-t-lead, 1.125rem);
  line-height: var(--ds-lh-relaxed, 1.6);
  max-width: var(--ds-measure-prose, 60ch);
}

.c-banner__body > p:last-child {
  margin-block-end: 0;
}

.c-banner__media img {
  border-radius: var(--ds-radius-md, 0.5rem);
  display: block;
  height: auto;
  max-width: 100%;
}

/* Artwork ------------------------------------------------------------------ */
/*
   The right-side image under the banner look. c-banner--art is only set on a
   page that uses the look; any other keeps the rule above and whatever the
   site's own stylesheet gives it.

   The image is centred in its column and drawn up to the art size. The
   background shape sits behind it, centred on it and sized from its width.
*/
.c-banner--art .c-banner__media {
  display: grid;
  min-width: 0;
  place-items: center;
  position: relative;
}

.c-banner--art .c-banner__media :is(img, svg) {
  height: auto;
  margin-inline: auto;
  max-height: none;
  max-width: var(--ds-banner-art-cap, 100%);
  position: relative;
  width: 100%;
}

.c-banner--art-bg .c-banner__media::before {
  aspect-ratio: 1;
  background: var(--ds-banner-art-bg-fill, var(--ds-surface-inverse, var(--wp--preset--color--contrast)));
  border-radius: var(--ds-banner-art-bg-radius, 50%);
  content: "";
  inset-block-start: 50%;
  inset-inline-start: 50%;
  opacity: var(--ds-banner-art-bg-opacity, 1);
  position: absolute;
  transform: translate(-50%, -50%);
  width: calc(min(var(--ds-banner-art-cap, 100%), 100%) * var(--ds-banner-art-bg-size, 0.81));
}

/* The fills are the site's own colours, by role. The gradient is the one the dark ground uses. */
.c-banner--art-bg-gradient {
  --ds-banner-art-bg-fill: var(--ds-gradient-hero, var(--ds-surface-inverse));
}

.c-banner--art-bg-ink {
  --ds-banner-art-bg-fill: var(--ds-surface-inverse);
}

.c-banner--art-bg-accent {
  --ds-banner-art-bg-fill: var(--ds-surface-accent, var(--wp--preset--color--accent));
}

.c-banner--art-bg-tint {
  --ds-banner-art-bg-fill: var(--ds-surface-marker, var(--ds-border-faint));
}

/* A phone gets one column: the image goes, or sits under the text at a smaller size. */
@media (max-width: 47.99em) {
  .c-banner--art .c-banner__media {
    display: none;
  }
  .c-banner--art-phone-below .c-banner__media :is(img, svg) {
    max-width: var(--ds-banner-art-phone, 10rem);
  }
  .c-banner--art-phone-below .c-banner__media::before {
    width: calc(var(--ds-banner-art-phone, 10rem) * var(--ds-banner-art-bg-size, 0.81));
  }
  .c-banner--art-phone-below .c-banner__media {
    display: grid;
  }
}
/* Breadcrumbs -------------------------------------------------------------- */
.c-banner__breadcrumbs {
  color: var(--ds-fg-muted, var(--wp--preset--color--muted));
  display: flex;
  flex-wrap: wrap;
  font-size: var(--ds-t-small, 0.875rem);
  gap: var(--ds-space-2, 0.5rem);
}

.c-banner__crumb-sep {
  color: var(--ds-border-faint, var(--wp--preset--color--border));
}

/* Geotag ------------------------------------------------------------------- */
.c-banner__geotag {
  color: var(--ds-fg-muted, var(--wp--preset--color--muted));
  font-size: var(--ds-t-small, 0.875rem);
}

/* Calls to action ---------------------------------------------------------- */
.c-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3, 0.75rem);
  margin-block-start: var(--ds-space-3, 0.75rem);
}

/*
   The reassurance line under the actions.

   Muted and small on purpose: it qualifies the buttons rather than competing
   with them, and it is the last thing read before someone decides to click.
   It keeps a measure because it is a sentence, not a label.
*/
.c-banner__actions-note {
  color: var(--ds-fg-muted, var(--wp--preset--color--muted));
  font-size: var(--ds-t-small, 0.875rem);
  margin-block-start: var(--ds-space-2, 0.5rem);
  max-width: var(--ds-measure-prose, 60ch);
}

.c-banner__button {
  border-radius: var(--ds-radius-pill, 2rem);
  display: inline-block;
  font-weight: var(--ds-fw-semi, 600);
  padding-block: var(--ds-space-2, 0.5rem);
  padding-inline: var(--ds-space-5, 1.25rem);
  text-decoration: none;
}

/*
   The last fallback is a named colour, not a brand one. A filled button whose
   fill does not resolve renders as transparent with dark text on a dark ground,
   which is the one failure worth spending a literal to avoid. Kadence names its
   palette --global-palette*, so the WordPress preset names do not resolve there
   either — the chain has to end somewhere real.
*/
.c-banner__button--primary {
  background-color: var(--ds-action-primary-bg, var(--wp--preset--color--primary, black));
  color: var(--ds-action-primary-fg, var(--wp--preset--color--base, white));
}

/*
   The secondary action is outlined rather than filled. Two filled buttons of
   equal weight give the reader no steer, which is the point of having a
   second one at all.
*/
.c-banner__button--secondary {
  border: 1px solid var(--ds-action-ghost-border, var(--wp--preset--color--primary, currentColor));
  color: var(--ds-action-ghost-fg, var(--wp--preset--color--primary, currentColor));
}

/* Quick links -------------------------------------------------------------- */
/*
   The field is called "Show Mobile Quick Links", and until now it was not
   mobile-only — it rendered at every width.

   On the site this came from, the hiding lived in the Kadence Element that
   carried the banner: it was set to hide on large screens (.kvs-lg-false).
   The chassis banner replaced that Element and inherited the markup but not
   the visibility rule, so every page with the legacy switch on grew a second
   section menu on desktop — the flat list here, plus the sidebar's tree.
   Measured on the clone: 74 published pages have that switch on.

   1025px is the breakpoint the context menu already uses to decide between
   its two presentations, and for the same reason: it is where the sidebar
   stops sitting beside the content. Above it a sidebar can carry the section
   menu, so this one is a duplicate. Below it there is no sidebar beside the
   reader, which is exactly when a menu at the top of the page earns its place.

   It sits under the banner rather than inside it, so the banner holds only its
   own content, on either ground.
*/
@media screen and (min-width: 1025px) {
  .c-banner-menu {
    display: none;
  }
}
.c-context-menu__root {
  display: inline-block;
  font-weight: var(--ds-fw-semi, 600);
  text-decoration: none;
}

/*
   wp_list_pages supplies the list. Its own classes are left alone, so a site
   already styling the retired shortcode keeps the styling it has; only the
   reset below is ours.
*/
.c-context-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-context-menu__list a {
  display: inline-block;
  padding-block: var(--ds-space-2, 0.5rem);
}

/* The list shares the old sidebar menu's class, and with it that menu's
   right-hand rule, which does not belong under a banner. */
.c-banner-menu .c-context-menu {
  border-inline-end: 0;
}

/* Quick menu --------------------------------------------------------------- */
/*
   Automatic, and a dropdown: includes/quick-menu.php fills it on every page
   whose section has sub-pages and wraps it in <details>.

   Where it shows is unchanged: the rule above hides it from 1025px up, where
   the sidebar sits beside the content and carries the section menu. Below
   that, the sidebar has collapsed and the quick menu takes its place.

   Deliberately NOT shown on a wide page that has no sidebar by design. Those
   are hub pages, whose own content already introduces their sub-pages; a menu
   above them would repeat it (Matt, 6 October 2026). When the sidebar's
   breakpoint becomes a contract setting, this should follow it rather than
   a fixed 1025px.
*/
.c-banner-menu {
  padding-inline: var(--ds-space-5, 1.25rem);
}

.c-quick-menu {
  border-block-end: 1px solid var(--ds-border-faint, currentcolor);
  margin-inline: auto;
  max-width: var(--ds-measure-banner, 75rem);
}

.c-quick-menu__toggle {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: var(--ds-fw-semi, 600);
  gap: var(--ds-space-2, 0.5rem);
  justify-content: space-between;
  list-style: none;
  padding-block: var(--ds-space-3, 0.75rem);
}

.c-quick-menu__toggle::-webkit-details-marker {
  display: none;
}

/* A chevron drawn from two borders: down when closed, up when open. */
.c-quick-menu__toggle::after {
  block-size: 0.5em;
  border-block-end: 2px solid currentcolor;
  border-inline-end: 2px solid currentcolor;
  content: "";
  flex: none;
  inline-size: 0.5em;
  transform: translate(0, -25%) rotate(45deg);
}

.c-quick-menu[open] > .c-quick-menu__toggle::after {
  transform: translate(0, 25%) rotate(-135deg);
}

.c-quick-menu__panel {
  padding-block-end: var(--ds-space-3, 0.75rem);
}

/* ==========================================================================
   Row Panels — the approved panel library.
   ==========================================================================

   The Panel files in patterns/ carry the markup; these rules carry the look,
   read entirely from --ds-* roles. Grounds come first so every Panel after
   them can sit on one.

   The Panel rules sit under :root:root, two classes above a theme's content
   rules such as .single-content .wp-block-group, so they win whatever order
   the stylesheets load in. Grounds and the :where() rules stay at zero on
   purpose.
   ========================================================================== */
/* ==========================================================================
   Grounds — a surface re-points the colour roles for everything inside it.
   ==========================================================================

   A Panel never names a colour for its surface; it takes a ground class and
   its text, links and lines follow. These are the plain versions. A client's
   token layer states its own grounds, and :where() lets those win.
   ========================================================================== */
:where(.c-ground--sunken) {
  background: var(--ds-surface-sunken, var(--ds-surface-page));
}

:where(.c-ground--raised) {
  --ds-fg-muted: var(--ds-fg-medium);
  background: var(--ds-surface-page);
}

:where(.c-ground--inverse) {
  --ds-fg-strong: var(--ds-fg-on-dark);
  --ds-fg-medium: var(--ds-fg-on-dark-soft);
  --ds-fg-secondary: var(--ds-fg-on-dark-soft);
  --ds-fg-muted: var(--ds-fg-on-dark-soft);
  --ds-fg-eyebrow: var(--ds-fg-emphasis-on-dark);
  --ds-fg-link: var(--ds-fg-link-on-dark);
  --ds-border-faint: var(--ds-border-on-dark);
  --ds-border-card: var(--ds-border-on-dark);
  --ds-shadow-card-tinted: none;
  background: var(--ds-gradient-hero, var(--ds-surface-inverse));
  color: var(--ds-fg-on-dark);
}

/* A light card inside a dark band. The light-ground roles it restores are
   declared with :root's, in settings/_panel-roles.scss. */
:where(.c-ground--page) {
  background: var(--ds-surface-page);
  color: var(--ds-fg-medium);
}

:where(.c-ground--accent) {
  --ds-fg-strong: var(--ds-fg-on-accent);
  --ds-fg-medium: var(--ds-fg-on-accent-soft);
  --ds-fg-secondary: var(--ds-fg-on-accent-soft);
  --ds-fg-muted: var(--ds-fg-on-accent-soft);
  --ds-fg-eyebrow: var(--ds-fg-on-accent-soft);
  --ds-fg-link: var(--ds-fg-on-accent);
  --ds-border-faint: var(--ds-border-on-dark);
  --ds-border-card: var(--ds-border-on-dark);
  --ds-shadow-card-tinted: none;
  background: var(--ds-surface-accent, var(--ds-action-primary-bg));
  color: var(--ds-fg-on-accent);
}

/* ==========================================================================
   Shared marks.
   ==========================================================================

   Type, badges, actions, links and cards the Panels are built from. None of
   these is a Panel on its own.
   ========================================================================== */
:root:root {
  /* A theme's content rules give every Group a bottom margin. Inside a Panel
     the Panel sets its own spacing, so those margins go: they left gaps
     nobody asked for and shortened every grid item but the last. */
}
:root:root :is(.c-strip-facts,
.c-cards-cases,
.c-rows-quotes,
.c-rows-stories,
.c-inset-facts,
.c-grid-facts,
.c-cards-guides,
.c-band-cta,
.c-stack-prose,
.c-inset-figure,
.c-inset-quotes,
.c-split-cases,
.c-rows-facts,
.c-strip-links,
.c-rows-faq,
.c-sidebar-stack,
.c-sidebar-index,
.c-sidebar-promo),
:root:root :where(.c-strip-facts,
.c-cards-cases,
.c-rows-quotes,
.c-rows-stories,
.c-inset-facts,
.c-grid-facts,
.c-cards-guides,
.c-band-cta,
.c-stack-prose,
.c-inset-figure,
.c-inset-quotes,
.c-split-cases,
.c-rows-facts,
.c-strip-links,
.c-rows-faq,
.c-sidebar-stack,
.c-sidebar-index,
.c-sidebar-promo) .wp-block-group {
  margin-block: 0;
}
:root:root .c-strip-facts,
:root:root .c-cards-cases,
:root:root .c-rows-quotes,
:root:root .c-rows-stories,
:root:root .c-inset-facts,
:root:root .c-grid-facts,
:root:root .c-cards-guides,
:root:root .c-band-cta,
:root:root .c-strip-facts--inverse,
:root:root .c-stack-prose,
:root:root .c-inset-figure,
:root:root .c-inset-quotes,
:root:root .c-split-cases,
:root:root .c-rows-facts,
:root:root .c-strip-links,
:root:root .c-rows-faq {
  padding-block: var(--ds-space-9);
}
:root:root .c-stack-prose {
  padding-block: var(--ds-space-7);
}
:root:root .c-strip-facts,
:root:root .c-band-cta {
  padding-inline: var(--ds-gutter);
}
:root:root .c-measure {
  max-width: var(--ds-measure-banner);
  margin-inline: auto;
}
:root:root .c-eyebrow {
  margin: 0 0 var(--ds-space-3);
  font-size: var(--ds-t-eyebrow);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ds-fg-eyebrow);
}
:root:root .c-title {
  margin: 0;
  font-size: var(--ds-t-section);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  letter-spacing: -0.022em;
  color: var(--ds-fg-strong);
  text-wrap: pretty;
}
:root:root .c-title--hero {
  font-size: var(--ds-t-hero);
  line-height: var(--ds-lh-tight);
  letter-spacing: -0.025em;
  max-width: 22ch;
}
:root:root .c-title em {
  font-style: normal;
  color: var(--ds-fg-emphasis-on-dark);
}
:root:root .c-lead {
  margin: var(--ds-space-4) 0 0;
  font-size: var(--ds-t-lead);
  font-weight: var(--ds-fw-regular);
  line-height: var(--ds-lh-relaxed);
  color: var(--ds-fg-medium);
  text-wrap: pretty;
}
:root:root .c-body {
  margin: 0;
  font-size: var(--ds-t-body);
  font-weight: var(--ds-fw-regular);
  line-height: var(--ds-lh-relaxed);
  color: var(--ds-fg-muted);
  text-wrap: pretty;
}
:root:root .c-body + .c-body {
  margin-block-start: var(--ds-space-5);
}
:root:root .c-body--note {
  font-size: var(--ds-t-small);
  color: var(--ds-fg-muted);
}
:root:root .c-body strong {
  color: var(--ds-fg-strong);
  font-weight: var(--ds-fw-bold);
}
:root:root .c-mark {
  color: var(--ds-fg-strong);
  box-shadow: inset 0 -0.62em 0 0 var(--ds-graphic-swipe);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  padding-inline: 0.14em;
  margin-inline: -0.1em;
}
:root:root .c-sub {
  margin: var(--ds-space-8) 0 var(--ds-space-4);
  font-size: var(--ds-t-h3);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  letter-spacing: -0.015em;
  color: var(--ds-fg-strong);
  text-wrap: pretty;
}
:root:root .c-sub--sm {
  margin-block: var(--ds-space-7) var(--ds-space-3);
  font-size: var(--ds-t-card-title);
  letter-spacing: 0;
}
:root:root .c-bullets {
  margin: var(--ds-space-5) 0 0;
  padding: 0;
  list-style: none;
}
:root:root .c-bullets__item {
  position: relative;
  padding-inline-start: var(--ds-space-7);
  padding-block: var(--ds-space-2);
  font-size: var(--ds-t-body);
  line-height: var(--ds-lh-relaxed);
  color: var(--ds-fg-muted);
  text-wrap: pretty;
}
:root:root .c-bullets__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1.1em;
  inline-size: 0.6875rem;
  block-size: 0.6875rem;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-badge);
}
:root:root .c-bullets__item strong {
  color: var(--ds-fg-strong);
  font-weight: var(--ds-fw-bold);
}
:root:root .c-await {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-space-2) var(--ds-space-4);
  margin: var(--ds-space-6) 0 0;
  padding: var(--ds-space-5) var(--ds-space-6);
  border: var(--ds-hairline) dashed var(--ds-border-card);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-t-small);
  line-height: var(--ds-lh-relaxed);
  color: var(--ds-fg-muted);
}
:root:root .c-await__tag {
  flex: 0 0 auto;
  font-size: var(--ds-t-eyebrow);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ds-fg-eyebrow);
}
:root:root .c-head {
  margin-block-end: var(--ds-space-8);
}
:root:root .c-head .c-title + .c-lead {
  margin-block-start: var(--ds-space-4);
}
:root:root .c-badge {
  align-self: flex-start;
  margin: 0;
  padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-badge);
  font-size: var(--ds-t-eyebrow);
  font-weight: var(--ds-fw-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ds-fg-on-badge);
}
:root:root .c-chip {
  display: inline-flex;
  align-self: flex-start;
  margin: 0;
  padding: var(--ds-space-2) var(--ds-space-4);
  border: var(--ds-hairline) solid var(--ds-border-card);
  border-radius: var(--ds-radius-pill);
  font-size: var(--ds-t-tag);
  font-weight: var(--ds-fw-bold);
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ds-fg-muted);
}
:root:root .c-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  margin-block-start: var(--ds-space-7);
}
:root:root .c-actions__note {
  margin: var(--ds-space-6) 0 0;
  font-size: var(--ds-t-small);
  line-height: var(--ds-lh-relaxed);
  color: var(--ds-fg-medium);
}
:root:root {
  /* Buttons. Core's Button block puts a custom class on its wrapper, so the
     look is on the link inside; a link that carries the class itself, as
     older markup does, gets the same look. */
}
:root:root .c-btn {
  width: 100%;
}
:root:root :is(.c-btn .wp-block-button__link, a.c-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3);
  width: 100%;
  padding: var(--ds-space-4) var(--ds-space-6);
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-action-primary-bg);
  color: var(--ds-action-primary-fg);
  font-size: var(--ds-t-lead);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  text-align: center;
  text-decoration: none;
  transition: filter 160ms cubic-bezier(0.2, 0.8, 0.2, 1), background 160ms cubic-bezier(0.2, 0.8, 0.2, 1), color 160ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root:root :is(.c-btn .wp-block-button__link, a.c-btn):active {
  transform: translateY(1px);
  box-shadow: none;
}
:root:root :is(.c-btn .wp-block-button__link, a.c-btn):focus-visible {
  outline: 0.1875rem solid var(--ds-fg-eyebrow);
  outline-offset: 0.125rem;
}
:root:root :is(.c-btn--accent .wp-block-button__link, a.c-btn--accent) {
  background: var(--ds-action-on-accent-bg);
  color: var(--ds-action-on-accent-fg);
}
:root:root :is(.c-btn--accent .wp-block-button__link, a.c-btn--accent):hover {
  filter: brightness(1.08);
}
:root:root :is(.c-btn--on-dark .wp-block-button__link, a.c-btn--on-dark) {
  background: var(--ds-action-on-dark-bg);
  color: var(--ds-action-on-dark-fg);
}
:root:root :is(.c-btn--on-dark .wp-block-button__link, a.c-btn--on-dark):hover {
  box-shadow: var(--ds-shadow-card-tinted);
}
:root:root :is(.c-btn--ghost .wp-block-button__link, a.c-btn--ghost) {
  background: transparent;
  color: var(--ds-action-ghost-fg);
  box-shadow: inset 0 0 0 calc(var(--ds-hairline) * 1.5) var(--ds-action-ghost-border);
}
:root:root :is(.c-btn--ghost .wp-block-button__link, a.c-btn--ghost):hover {
  background: var(--ds-action-ghost-border);
  color: var(--ds-fg-on-dark);
  box-shadow: none;
}
:root:root .c-btn__arrow {
  flex: 0 0 auto;
}
:root:root .c-link {
  align-self: flex-start;
  font-size: var(--ds-t-body);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  color: var(--ds-fg-strong);
  text-decoration: none;
}
:root:root .c-link:hover {
  color: var(--ds-fg-link);
}
:root:root .c-link--quiet {
  color: var(--ds-fg-link);
}
:root:root .c-link--quiet:hover {
  color: var(--ds-fg-strong);
}
:root:root .c-link__arrow {
  padding-inline-start: var(--ds-space-1);
  opacity: 0.8;
}
:root:root .c-link-inline {
  color: var(--ds-fg-strong);
  font-weight: var(--ds-fw-bold);
  text-decoration: underline;
  text-decoration-thickness: var(--ds-hairline);
  text-underline-offset: 0.1875rem;
}
:root:root .c-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2);
  margin: 0 0 var(--ds-space-7);
  font-size: var(--ds-t-eyebrow);
  font-weight: var(--ds-fw-bold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-fg-on-dark);
}
:root:root .c-breadcrumb a {
  color: var(--ds-fg-link-on-dark);
  text-decoration: none;
}
:root:root .c-breadcrumb a:hover {
  color: var(--ds-fg-on-dark);
}
:root:root .c-breadcrumb > span[aria-hidden] {
  color: var(--ds-fg-on-dark-soft);
}
:root:root .c-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  padding: var(--ds-space-7) var(--ds-space-7) var(--ds-space-6);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-sunken);
}
:root:root .c-card--outlined {
  border: var(--ds-hairline) solid var(--ds-border-card);
  background: var(--ds-surface-page);
  box-shadow: var(--ds-shadow-card-tinted);
}
:root:root .c-card--stat {
  gap: var(--ds-space-3);
  padding: var(--ds-space-6);
  border: var(--ds-hairline) solid var(--ds-border-card);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-page);
  box-shadow: var(--ds-shadow-card-tinted);
}
:root:root .c-card__title {
  margin: 0;
  font-size: var(--ds-t-h3);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  color: var(--ds-fg-strong);
  text-wrap: pretty;
}
:root:root .c-card__title--sm {
  font-size: var(--ds-t-card-title);
}
:root:root .c-card .c-body {
  flex: 1 1 auto;
}
:root:root .c-stat {
  margin: 0;
  font-size: var(--ds-t-stat);
  font-weight: var(--ds-fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ds-fg-strong);
  font-variant-numeric: tabular-nums;
}
:root:root .c-stat__of {
  margin: 0;
  font-size: var(--ds-t-body);
  line-height: var(--ds-lh-normal);
  color: var(--ds-fg-muted);
}

/* ==========================================================================
   Row Panels, in hub page order.
   ==========================================================================

   strip-facts, cards-cases, rows-quotes, rows-stories, inset-facts, grid-facts,
   cards-guides and band-cta. Each Panel owns its vertical padding.
   ========================================================================== */
:root:root .c-strip-facts {
  border-block-end: var(--ds-hairline) solid var(--ds-border-card);
}
:root:root .c-strip-facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--ds-space-7) var(--ds-space-8);
}
:root:root .c-strip-facts__term {
  margin: 0 0 var(--ds-space-2);
  font-size: var(--ds-t-card-title);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  color: var(--ds-fg-strong);
  text-wrap: pretty;
}
:root:root .c-cards-cases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--ds-space-5);
}
:root:root .c-cards-cases__wide {
  grid-column: 1/-1;
}
:root:root .c-rows-quotes__ground {
  padding: var(--ds-space-7) var(--ds-space-6);
  border-radius: var(--ds-radius-md);
}
:root:root .c-rows-quotes__ground .c-title {
  color: var(--ds-fg-emphasis-on-dark);
}
:root:root .c-rows-quotes__list {
  margin: var(--ds-space-7) 0 0;
  padding: 0;
  list-style: none;
}
:root:root .c-rows-quotes__item {
  padding-block: var(--ds-space-5);
  border-block-end: var(--ds-hairline) solid var(--ds-border-accent-on-dark);
  font-size: var(--ds-t-lead);
  font-weight: var(--ds-fw-regular);
  line-height: var(--ds-lh-normal);
  color: var(--ds-fg-on-accent-soft);
  text-wrap: pretty;
}
:root:root .c-rows-quotes__item:last-child {
  border-block-end-color: transparent;
}
:root:root .c-rows-quotes__ground .c-body {
  margin-block-start: var(--ds-space-7);
}
:root:root .c-rows-stories__item {
  padding-block-end: var(--ds-space-8);
  margin-block-end: var(--ds-space-8);
  border-block-end: var(--ds-hairline) solid var(--ds-border-faint);
}
:root:root .c-rows-stories__item:last-child {
  padding-block-end: 0;
  margin-block-end: 0;
  border-block-end: 0;
}
:root:root .c-rows-stories__name {
  margin: 0 0 var(--ds-space-4);
  font-size: var(--ds-t-h3);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  color: var(--ds-fg-strong);
  text-wrap: pretty;
}
:root:root .c-rows-stories__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--ds-space-6) var(--ds-space-8);
  margin-block-start: var(--ds-space-7);
}
:root:root .c-rows-stories__col {
  padding-block-start: var(--ds-space-4);
  border-block-start: 2px solid var(--ds-border-accent);
}
:root:root .c-rows-stories__label {
  margin: 0 0 var(--ds-space-3);
  font-size: var(--ds-t-label);
  font-weight: var(--ds-fw-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ds-fg-strong);
}
:root:root .c-inset-facts__ground {
  padding: var(--ds-space-7) var(--ds-space-6);
  border-radius: var(--ds-radius-md);
}
:root:root .c-inset-facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--ds-space-4);
  margin-block: var(--ds-space-7);
}
:root:root .c-grid-facts__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--ds-space-8) var(--ds-space-9);
  margin: 0;
  padding: 0;
  list-style: none;
}
:root:root .c-grid-facts__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.375rem;
  block-size: 2.375rem;
  margin-block-end: var(--ds-space-5);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-badge);
  font-size: var(--ds-t-card-title);
  font-weight: var(--ds-fw-bold);
  line-height: 1;
  color: var(--ds-fg-on-badge);
  font-variant-numeric: tabular-nums;
}
:root:root .c-grid-facts__term {
  display: block;
  margin: 0 0 var(--ds-space-3);
  font-size: var(--ds-t-card-title);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  color: var(--ds-fg-strong);
  text-wrap: pretty;
}
:root:root .c-grid-facts__item .c-body {
  display: block;
}
:root:root .c-cards-guides__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ds-space-5);
}
:root:root .c-cards-guides__wide {
  margin-block-start: var(--ds-space-5);
}
:root:root .c-band-cta__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-9);
  align-items: flex-start;
}
:root:root .c-band-cta__copy {
  flex: 1 1 22rem;
  min-width: 0;
}
:root:root .c-band-cta__steps {
  flex: 1 1 22rem;
  min-width: 0;
}
:root:root .c-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
:root:root .c-steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ds-space-5);
  padding-block: var(--ds-space-5);
  border-block-end: var(--ds-hairline) solid var(--ds-border-on-dark);
}
:root:root .c-steps__item:last-child {
  border-block-end-color: transparent;
}
:root:root .c-steps__n {
  font-size: var(--ds-t-card-title);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  color: var(--ds-fg-on-accent);
  font-variant-numeric: tabular-nums;
}
:root:root .c-steps__term {
  display: block;
  margin: 0 0 var(--ds-space-1);
  font-size: var(--ds-t-body);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  color: var(--ds-fg-on-accent);
}
:root:root .c-steps__item .c-body {
  display: block;
  font-size: var(--ds-t-small);
  color: var(--ds-fg-on-accent-soft);
}

/* ==========================================================================
   Row Panels the article template adds.
   ==========================================================================

   stack-prose, inset-figure, inset-quotes, split-cases, rows-facts, strip-links,
   rows-faq and the contained strip-facts.
   ========================================================================== */
:root:root .c-strip-facts--inverse {
  border-block-end: 0;
  padding-inline: 0;
}
:root:root .c-strip-facts--inverse .c-strip-facts__ground {
  padding: var(--ds-space-7) var(--ds-space-6);
  border-radius: var(--ds-radius-md);
}
:root:root .c-strip-facts--inverse .c-strip-facts__grid {
  margin-block-start: var(--ds-space-6);
}
:root:root .c-strip-facts--inverse .c-eyebrow {
  color: var(--ds-fg-emphasis-on-dark);
}
:root:root .c-stack-prose__title {
  margin: 0 0 var(--ds-space-5);
  font-size: var(--ds-t-section);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  letter-spacing: -0.022em;
  color: var(--ds-fg-strong);
  text-wrap: pretty;
}
:root:root .c-stack-prose__answer {
  margin: 0 0 var(--ds-space-5);
  font-size: var(--ds-t-lead);
  line-height: var(--ds-lh-relaxed);
  color: var(--ds-fg-secondary);
  text-wrap: pretty;
}
:root:root .c-stack-prose--quiet {
  padding-block: var(--ds-space-6);
  border-block-start: var(--ds-hairline) solid var(--ds-border-faint);
}
:root:root .c-stack-prose--quiet .c-stack-prose__title {
  font-size: var(--ds-t-card-title);
  letter-spacing: 0;
  margin-block-end: var(--ds-space-3);
}
:root:root .c-stack-prose--quiet .c-body {
  font-size: var(--ds-t-small);
}
:root:root .c-inset-figure__frame {
  display: grid;
  place-items: center;
  inline-size: 100%;
  padding: var(--ds-space-5);
  border: var(--ds-hairline) solid var(--ds-border-card);
  border-radius: var(--ds-radius-md);
}
:root:root .c-inset-figure--wide .c-inset-figure__frame {
  aspect-ratio: 2/1;
}
:root:root .c-inset-figure--tall .c-inset-figure__frame {
  aspect-ratio: 3/2;
}
:root:root .c-inset-figure__frame img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--ds-radius-sm);
}
:root:root .c-inset-figure__caption {
  margin: var(--ds-space-4) 0 0;
  font-size: var(--ds-t-small);
  line-height: var(--ds-lh-relaxed);
  color: var(--ds-fg-muted);
}
:root:root .c-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  text-align: center;
  color: var(--ds-fg-secondary);
}
:root:root .c-slot__name {
  font-size: var(--ds-t-eyebrow);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
:root:root .c-slot__spec {
  font-size: var(--ds-t-small);
  line-height: var(--ds-lh-normal);
  color: var(--ds-fg-muted);
}
:root:root .c-inset-quotes__q {
  position: relative;
  margin: 0;
  padding-inline-start: var(--ds-space-7);
  font-size: var(--ds-t-h3);
  font-style: italic;
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  letter-spacing: -0.015em;
  color: var(--ds-fg-eyebrow);
  text-wrap: pretty;
}
:root:root .c-inset-quotes__q::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0.15em 0.1em;
  inline-size: 3px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-badge);
}
:root:root .c-inset-quotes__by {
  margin: var(--ds-space-4) 0 0;
  padding-inline-start: var(--ds-space-7);
  font-size: var(--ds-t-small);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-normal);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ds-fg-muted);
}
:root:root .c-split-cases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--ds-space-5);
}
:root:root .c-split-cases__case {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding: var(--ds-space-7);
  border: var(--ds-hairline) solid var(--ds-border-card);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-page);
  box-shadow: var(--ds-shadow-card-tinted);
}
:root:root .c-split-cases__case--yes {
  border-block-start: 2px solid var(--ds-border-accent);
}
:root:root .c-split-cases__case--no {
  border-block-start: 2px solid var(--ds-border-soft);
}
:root:root .c-split-cases__label {
  margin: 0;
  font-size: var(--ds-t-label);
  font-weight: var(--ds-fw-bold);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ds-fg-strong);
}
:root:root .c-split-cases__case .c-bullets {
  margin-block-start: var(--ds-space-2);
}
:root:root .c-rows-facts__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: var(--ds-hairline) solid var(--ds-border-card);
  border-radius: var(--ds-radius-md);
}
:root:root .c-rows-facts__scroll:focus-visible {
  outline: 0.1875rem solid var(--ds-fg-eyebrow);
  outline-offset: 0.125rem;
}
:root:root .c-rows-facts__table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--ds-t-small);
  line-height: var(--ds-lh-normal);
}
:root:root .c-rows-facts__table th,
:root:root .c-rows-facts__table td {
  padding: var(--ds-space-4) var(--ds-space-5);
  text-align: start;
  vertical-align: top;
  border-block-end: var(--ds-hairline) solid var(--ds-border-faint);
}
:root:root .c-rows-facts__table thead th {
  background: var(--ds-surface-sunken);
  font-size: var(--ds-t-tag);
  font-weight: var(--ds-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-strong);
  white-space: nowrap;
}
:root:root .c-rows-facts__table tbody th {
  font-weight: var(--ds-fw-bold);
  color: var(--ds-fg-strong);
}
:root:root .c-rows-facts__table td {
  color: var(--ds-fg-muted);
}
:root:root .c-rows-facts__table tbody tr:last-child th,
:root:root .c-rows-facts__table tbody tr:last-child td {
  border-block-end: 0;
}
:root:root .c-rows-facts__note {
  margin: var(--ds-space-4) 0 0;
  font-size: var(--ds-t-small);
  line-height: var(--ds-lh-relaxed);
  color: var(--ds-fg-muted);
}
:root:root .c-strip-links__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-space-1) var(--ds-space-3);
  padding: var(--ds-space-5) var(--ds-space-6);
  border-inline-start: 3px solid var(--ds-border-accent);
  border-radius: var(--ds-radius-sm);
  text-decoration: none;
  transition: background 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root:root .c-strip-links__kicker {
  flex: 0 0 auto;
  font-size: var(--ds-t-eyebrow);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ds-fg-eyebrow);
}
:root:root .c-strip-links__title {
  font-size: var(--ds-t-body);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  color: var(--ds-fg-strong);
}
:root:root .c-strip-links__sub {
  font-size: var(--ds-t-small);
  line-height: var(--ds-lh-normal);
  color: var(--ds-fg-muted);
}
:root:root .c-strip-links__link:hover {
  background: var(--ds-surface-marker);
}
:root:root .c-strip-links__link:hover .c-strip-links__title {
  color: var(--ds-fg-link);
}
:root:root .c-strip-links__link:focus-visible {
  outline: 0.1875rem solid var(--ds-fg-eyebrow);
  outline-offset: 0.125rem;
}
:root:root .c-rows-faq__list {
  border-block-start: var(--ds-hairline) solid var(--ds-border-faint);
}
:root:root .c-rows-faq__item {
  border-block-end: var(--ds-hairline) solid var(--ds-border-faint);
}
:root:root .c-rows-faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding-block: var(--ds-space-5);
  cursor: pointer;
  font-size: var(--ds-t-card-title);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  color: var(--ds-fg-strong);
  list-style: none;
}
:root:root .c-rows-faq__q::-webkit-details-marker {
  display: none;
}
:root:root .c-rows-faq__q::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 1rem;
  block-size: 1rem;
  background: var(--ds-fg-eyebrow);
  -webkit-mask: var(--ds-mask-chevron-down) center/contain no-repeat;
          mask: var(--ds-mask-chevron-down) center/contain no-repeat;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root:root .c-rows-faq__item[open] .c-rows-faq__q::after {
  transform: rotate(180deg);
}
:root:root .c-rows-faq__a {
  padding-block-end: var(--ds-space-6);
}
:root:root .c-cards-guides__empty {
  padding: var(--ds-space-6);
  border: var(--ds-hairline) dashed var(--ds-border-card);
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-t-small);
  line-height: var(--ds-lh-relaxed);
  color: var(--ds-fg-muted);
}

/* ==========================================================================
   Sidebar Panels.
   ==========================================================================

   The sidebar stack and its label, the in-this-article index and the promo.
   ========================================================================== */
:root:root .c-sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-7);
}
:root:root .c-sidebar__label {
  margin: 0 0 var(--ds-space-4);
  font-size: var(--ds-t-eyebrow);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ds-fg-eyebrow);
}
:root:root .c-sidebar-index__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: c-sidebar-index;
}
:root:root .c-sidebar-index__item {
  counter-increment: c-sidebar-index;
}
:root:root .c-sidebar-index__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ds-space-3);
  padding-block: var(--ds-space-2);
  font-size: var(--ds-t-small);
  line-height: var(--ds-lh-normal);
  color: var(--ds-fg-secondary);
  text-decoration: none;
}
:root:root .c-sidebar-index__link::before {
  content: counter(c-sidebar-index, decimal-leading-zero);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-fg-muted);
  font-variant-numeric: tabular-nums;
}
:root:root .c-sidebar-index__link:hover {
  color: var(--ds-fg-link);
}
:root:root .c-sidebar-index__link[aria-current=true] {
  font-weight: var(--ds-fw-bold);
  color: var(--ds-fg-strong);
}
:root:root .c-sidebar-index__link[aria-current=true]::before {
  color: var(--ds-fg-eyebrow);
}
:root:root .c-sidebar-index:empty {
  display: none;
}
:root:root .c-sidebar-promo {
  padding: var(--ds-space-6);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-card-tinted);
}
:root:root {
  /* On a sunken ground the card sits flat, without the raised shadow. */
}
:root:root .c-sidebar-promo--sunken {
  box-shadow: none;
}
:root:root .c-sidebar-promo__body {
  margin: 0;
  font-size: var(--ds-t-small);
  line-height: var(--ds-lh-relaxed);
  color: var(--ds-fg-medium);
}
:root:root .c-sidebar-promo .c-actions {
  margin-block-start: var(--ds-space-5);
}

/* ==========================================================================
   Section menu in a sidebar.
   ==========================================================================

   The section menu as the audit layout draws it: a label, ruled rows with a
   chevron, the page you are on in a tinted row with a bar, a link to the
   whole section, and the promo card under it. The rows come from the page
   tree; nothing is typed.

   Only a section whose hub gives its menu a heading is drawn this way, so
   other sections keep the menu they have. Written against Kadence's sidebar,
   #secondary, which also lifts these rules above the menu's own stylesheet
   and a theme's padding on menu links.
   ========================================================================== */
/* stylelint-disable selector-class-pattern -- the menu is WordPress's page list inside Kadence's sidebar, so its classes are theirs. */
/* The chevron from the design: a 2px stroke icon, coloured by the row. */
#secondary .c-context-menu:has(> .c-context-menu__heading) {
  padding: 0;
  border: 0;
  background: none;
}
#secondary .c-context-menu__heading {
  margin: 0;
  padding-block-end: var(--ds-space-2);
  border-block-end: var(--ds-hairline) solid var(--ds-border-card);
  font-size: var(--ds-t-eyebrow);
  font-weight: var(--ds-fw-bold);
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ds-fg-muted);
}
#secondary .c-context-menu__heading ~ .c-context-menu__list,
#secondary .c-context-menu__heading ~ .c-context-menu__list .children {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
#secondary .c-context-menu__heading ~ .c-context-menu__list li {
  margin: 0;
  padding: 0;
  border: 0;
}
#secondary {
  /* The rows: the hub's own link and every page under it. */
}
#secondary .c-context-menu__heading ~ .c-context-menu__root,
#secondary .c-context-menu__heading ~ .c-context-menu__list li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-2);
  margin: 0;
  padding: var(--ds-space-2) var(--ds-space-4);
  border: 0;
  border-block-end: var(--ds-hairline) solid var(--ds-border-card);
  background: none;
  font-size: var(--ds-t-small);
  font-weight: var(--ds-fw-regular);
  line-height: var(--ds-lh-normal);
  color: var(--ds-fg-medium);
  text-decoration: none;
}
#secondary .c-context-menu__heading ~ .c-context-menu__root .menu-title {
  margin: 0;
  font: inherit;
  color: inherit;
}
#secondary .c-context-menu__heading ~ .c-context-menu__root::after,
#secondary .c-context-menu__heading ~ .c-context-menu__list li > a::after {
  content: "";
  flex: none;
  inline-size: 15px;
  block-size: 15px;
  background-color: currentcolor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2715%27 height=%2715%27 viewBox=%270 0 15 15%27 fill=%27none%27%3E%3Cpath d=%27M1 1L4.5 4.5L1 8%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2715%27 height=%2715%27 viewBox=%270 0 15 15%27 fill=%27none%27%3E%3Cpath d=%27M1 1L4.5 4.5L1 8%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
#secondary .c-context-menu__heading ~ .c-context-menu__root:hover,
#secondary .c-context-menu__heading ~ .c-context-menu__list li > a:hover {
  color: var(--ds-fg-strong);
}
#secondary {
  /* The page you are on: no rule under it, as in the design. */
}
#secondary .c-context-menu__heading ~ .c-context-menu__root[aria-current=page],
#secondary .c-context-menu__heading ~ .c-context-menu__list li.current_page_item > a {
  padding-inline-start: calc(var(--ds-space-4) - 3px);
  border-block-end: 0;
  border-inline-start: 3px solid var(--ds-border-selected);
  background: var(--ds-surface-selected);
  font-weight: var(--ds-fw-semi);
  color: var(--ds-fg-strong);
}
#secondary .c-context-menu__heading ~ .c-context-menu__root[aria-current=page]::after,
#secondary .c-context-menu__heading ~ .c-context-menu__list li.current_page_item > a::after {
  color: var(--ds-fg-link);
}
#secondary {
  /* A site's menu stylesheet may set the current link's colour with
     !important, and the menu's own stylesheet hides the current row's marker. */
}
#secondary .c-context-menu__heading ~ .c-context-menu__list li.current_page_item > a {
  color: var(--ds-fg-strong) !important; /* stylelint-disable-line declaration-no-important -- only !important beats the menu stylesheet's own. */
}
#secondary .c-context-menu__heading ~ .c-context-menu__list li.current_page_item > a::after {
  display: block;
  position: static;
}
#secondary {
  /* The rows draw their own marker, so the menu's gutter rule stays off. */
}
#secondary .c-context-menu__heading ~ .c-context-menu__list li > a::before {
  display: none;
}
#secondary {
  /* Close under the rows, whatever padding a theme gives the menu's links. */
}
#secondary .c-context-menu__all {
  display: flex;
  gap: var(--ds-space-2);
  width: -moz-fit-content;
  width: fit-content;
  margin-block-start: var(--ds-space-4);
  padding: 0;
  font-size: var(--ds-t-body);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-relaxed);
  color: var(--ds-fg-link);
  text-decoration: none;
}
#secondary .c-page-band--sidebar {
  margin-block-start: var(--ds-space-7);
}

/* A widget that wraps the menu's shortcode in paragraphs leaves empty ones
   around it, and their margins push the menu down. */
#secondary .widget:has(> .cw-context) > p:empty {
  display: none;
}

/* Level with the top of the content, as the design draws it: 35px down for
   the content column's top padding, plus 10px because Ascendant's child theme
   starts the sidebar that far above the column. When the content opens with
   one of the Panels that sit beside the sidebar, level with that Panel's
   eyebrow instead, the Panel's padding further down. */
@media (min-width: 1025px) {
  #secondary .c-context-menu:has(> .c-context-menu__heading) {
    padding-block-start: 45px;
  }
  .has-sidebar:has(.single-content > :is(.c-cards-cases, .c-rows-quotes, .c-rows-stories, .c-inset-facts, .c-grid-facts, .c-cards-guides):first-child) #secondary .c-context-menu:has(> .c-context-menu__heading) {
    padding-block-start: calc(var(--ds-space-7) + 45px);
  }
  /* Content that opens with the dark facts strip: level with the strip's box,
     which sits the Panel's wide-screen top padding down. */
  .has-sidebar:has(.single-content > .c-strip-facts--inverse:first-child) #secondary .c-context-menu:has(> .c-context-menu__heading) {
    padding-block-start: calc(var(--ds-space-11) + 45px);
  }
}
/* The promo card under a headed menu: flat, a full-width button. */
#secondary:has(.c-context-menu__heading) .c-sidebar-promo {
  padding: var(--ds-space-4);
}
#secondary:has(.c-context-menu__heading) .c-sidebar-promo__body {
  color: var(--ds-fg-muted);
  line-height: var(--ds-lh-normal);
}
#secondary:has(.c-context-menu__heading) .c-sidebar-promo .c-actions {
  margin-block-start: var(--ds-space-7);
}
#secondary:has(.c-context-menu__heading) .c-sidebar-promo .wp-block-button,
#secondary:has(.c-context-menu__heading) .c-sidebar-promo .c-btn {
  width: 100%;
}
#secondary:has(.c-context-menu__heading) .c-sidebar-promo :is(.c-btn .wp-block-button__link, a.c-btn) {
  padding-block: var(--ds-space-3);
  background: var(--ds-surface-inverse);
  color: var(--ds-fg-emphasis-on-dark);
  font-size: var(--ds-t-body);
  line-height: var(--ds-lh-snug);
}

/* stylelint-enable selector-class-pattern */
/* ==========================================================================
   Author box — who wrote the page, at its foot.
   ==========================================================================

   One block, five styles, all drawn from the same profile. Compact is the
   default and the shortest. Each style lays itself out on the box's own
   width, so the same rules serve the content column, the editor and a phone.
   ========================================================================== */
:root:root .c-author {
  container: c-author/inline-size;
  margin-block: var(--ds-space-9) 0;
  color: var(--ds-fg-strong);
}
:root:root {
  /* A theme's content rules space and bullet these; the box sets its own. */
}
:root:root :where(.c-author) :is(p, ul, dl, dd) {
  margin: 0;
}
:root:root :where(.c-author) ul {
  padding: 0;
  list-style: none;
}
:root:root :where(.c-author) a {
  color: inherit;
  text-decoration: none;
}
:root:root :where(.c-author) a:focus-visible {
  outline: 0.1875rem solid var(--ds-fg-eyebrow);
  outline-offset: 0.125rem;
}
:root:root .c-author__inner {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-7);
}
:root:root {
  /* Sizes follow the spacing scale rather than rem, which some themes enlarge. */
}
:root:root .c-author__photo {
  display: block;
  flex: none;
  inline-size: calc(var(--ds-space-8) * 4);
  block-size: auto;
  aspect-ratio: 1;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-marker, var(--ds-surface-sunken));
  -o-object-fit: cover;
     object-fit: cover;
}
:root:root .c-author__label {
  font-size: var(--ds-t-eyebrow);
  font-weight: var(--ds-fw-semi);
  line-height: var(--ds-lh-normal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-fg-eyebrow);
}
:root:root .c-author__name {
  font-size: var(--ds-t-card-title);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  color: var(--ds-fg-strong);
}
:root:root .c-author__name a:hover {
  color: var(--ds-fg-link);
}
:root:root .c-author__role {
  margin-block-start: var(--ds-space-1);
  font-size: var(--ds-t-small);
  line-height: var(--ds-lh-normal);
  color: var(--ds-fg-medium);
}
:root:root .c-author__bio {
  margin-block-start: var(--ds-space-4);
  font-size: var(--ds-t-body);
  line-height: var(--ds-lh-relaxed);
  color: var(--ds-fg-strong);
  text-wrap: pretty;
}
:root:root .c-author__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-4) var(--ds-space-5);
  margin-block-start: var(--ds-space-4);
}
:root:root .c-author__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
}
:root:root .c-author__social-link {
  display: block;
  inline-size: var(--ds-space-5);
  block-size: var(--ds-space-5);
  background-color: currentcolor;
  color: var(--ds-border-selected);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
:root:root .c-author__social-link:hover {
  color: var(--ds-fg-strong);
}
:root:root .c-author__social-link--linkedin {
  -webkit-mask-image: url("../icons/linkedin.svg");
          mask-image: url("../icons/linkedin.svg");
}
:root:root .c-author__social-link--x {
  -webkit-mask-image: url("../icons/x.svg");
          mask-image: url("../icons/x.svg");
}
:root:root .c-author__social-link--facebook {
  -webkit-mask-image: url("../icons/facebook.svg");
          mask-image: url("../icons/facebook.svg");
}
:root:root .c-author__social-link--threads {
  -webkit-mask-image: url("../icons/threads.svg");
          mask-image: url("../icons/threads.svg");
}
:root:root {
  /* The link to the profile: a button in three styles, a text link in two. */
}
:root:root .c-author__more {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  font-size: var(--ds-t-small);
  font-weight: var(--ds-fw-semi);
  line-height: var(--ds-lh-normal);
  white-space: nowrap;
  transition: filter 160ms cubic-bezier(0.2, 0.8, 0.2, 1), background 160ms cubic-bezier(0.2, 0.8, 0.2, 1), color 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root:root :is(.c-author--compact, .c-author--card, .c-author--panel) .c-author__more {
  padding: var(--ds-space-2) var(--ds-space-4);
  border: calc(var(--ds-hairline) * 1.5) solid;
  border-radius: var(--ds-radius-sm);
}
:root:root :is(.c-author--compact, .c-author--panel) .c-author__more:hover {
  filter: brightness(1.08);
}
:root:root :is(.c-author--ledger, .c-author--inverse) .c-author__more {
  margin-block-start: var(--ds-space-4);
  border-block-end: var(--ds-hairline) solid transparent;
  font-size: var(--ds-t-body);
  color: var(--ds-fg-link);
}
:root:root :is(.c-author--ledger, .c-author--inverse) .c-author__more:hover {
  border-block-end-color: currentcolor;
}
:root:root {
  /* Compact: the photo beside a ruled column. The default, and the shortest. */
}
:root:root :is(.c-author--compact, .c-author--card, .c-author--ledger) {
  padding-block-start: var(--ds-space-7);
  border-block-start: var(--ds-hairline) solid var(--ds-border-card);
}
:root:root .c-author--compact .c-author__body {
  padding-inline-start: var(--ds-space-6);
  border-inline-start: 2px solid var(--ds-border-selected);
}
:root:root .c-author--compact .c-author__more {
  border-color: var(--ds-surface-accent);
  background: var(--ds-surface-accent);
  color: var(--ds-fg-on-accent);
}
:root:root {
  /* Card: everything on one sunken plate, with chips and a footer. */
}
:root:root .c-author--card .c-author__inner {
  gap: var(--ds-space-6);
  padding: var(--ds-space-5);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-sunken);
}
:root:root :is(.c-author--card, .c-author--panel) .c-author__photo {
  inline-size: calc(var(--ds-space-9) * 2);
}
:root:root :is(.c-author--card, .c-author--ledger, .c-author--inverse) .c-author__photo {
  border-radius: var(--ds-radius-pill);
}
:root:root .c-author--card .c-author__role {
  font-size: var(--ds-t-body);
}
:root:root .c-author__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-block-start: var(--ds-space-4);
}
:root:root .c-author__chip {
  padding: var(--ds-space-2) var(--ds-space-3);
  border: var(--ds-hairline) solid var(--ds-border-card);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-page);
  font-size: var(--ds-t-tag);
  font-weight: var(--ds-fw-semi);
  line-height: var(--ds-lh-tight);
  color: var(--ds-fg-medium);
}
:root:root .c-author__chip--strong {
  border-color: transparent;
  background: var(--ds-surface-marker, var(--ds-surface-sunken));
  color: var(--ds-fg-strong);
}
:root:root .c-author--card .c-author__actions {
  justify-content: space-between;
  -moz-column-gap: var(--ds-space-4);
       column-gap: var(--ds-space-4);
  padding-block-start: var(--ds-space-4);
  border-block-start: var(--ds-hairline) solid var(--ds-border-card);
}
:root:root .c-author--card .c-author__social {
  gap: var(--ds-space-4);
}
:root:root .c-author--card .c-author__more {
  border-color: var(--ds-fg-strong);
  background: var(--ds-surface-page);
  color: var(--ds-fg-strong);
}
:root:root .c-author--card .c-author__more:hover {
  background: var(--ds-fg-strong);
  color: var(--ds-surface-page);
}
:root:root {
  /* Ledger: a ruled top, the bio in the middle and the facts as a list. */
}
:root:root .c-author--ledger {
  border-block-start: calc(var(--ds-hairline) * 1.5) solid var(--ds-fg-strong);
}
:root:root :is(.c-author--ledger, .c-author--inverse) .c-author__photo {
  inline-size: calc(var(--ds-space-8) * 2);
}
:root:root :is(.c-author--ledger, .c-author--inverse) .c-author__name {
  margin-block-start: var(--ds-space-2);
  font-weight: var(--ds-fw-semi);
  letter-spacing: -0.01em;
}
:root:root :is(.c-author--ledger, .c-author--inverse) .c-author__bio {
  margin-block-start: var(--ds-space-2);
}
:root:root .c-author__facts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding-block: var(--ds-space-2);
  border-block-end: var(--ds-hairline) solid var(--ds-border-card);
  font-size: var(--ds-t-small);
  line-height: var(--ds-lh-normal);
}
:root:root .c-author__facts > div:last-child {
  border-block-end: 0;
}
:root:root .c-author__facts dt {
  flex: none;
  font-weight: var(--ds-fw-regular);
  color: var(--ds-fg-medium);
}
:root:root .c-author__facts dd {
  font-weight: var(--ds-fw-semi);
  color: var(--ds-fg-strong);
  text-align: end;
}
:root:root .c-author__facts .c-author__social {
  justify-content: flex-end;
}
:root:root .c-author--ledger .c-author__facts .c-author__social {
  gap: var(--ds-space-4);
}
:root:root {
  /* Dark: the ledger on the inverse ground, under an accent rule. */
}
:root:root .c-author--inverse .c-author__inner {
  padding: var(--ds-space-5);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-inverse);
  color: var(--ds-fg-on-dark);
}
:root:root .c-author--inverse .c-author__inner::before {
  content: "";
  border-block-start: calc(var(--ds-hairline) * 1.5) solid var(--ds-border-accent);
}
:root:root .c-author--inverse :is(.c-author__name, .c-author__bio, .c-author__facts dd) {
  color: var(--ds-fg-on-dark);
}
:root:root .c-author--inverse :is(.c-author__label, .c-author__facts dt, .c-author__social-link) {
  color: var(--ds-fg-on-dark-soft);
}
:root:root .c-author--inverse .c-author__facts > div {
  border-block-end-color: var(--ds-border-on-dark);
}
:root:root .c-author--inverse .c-author__more {
  color: var(--ds-fg-emphasis-on-dark);
}
:root:root .c-author--inverse :is(.c-author__name a, .c-author__social-link):hover {
  color: var(--ds-fg-emphasis-on-dark);
}
:root:root .c-author--inverse a:focus-visible {
  outline-color: var(--ds-fg-emphasis-on-dark);
}
:root:root {
  /* Panel: who they are on a tinted plate, what they write beside it. */
}
:root:root .c-author--panel .c-author__inner {
  gap: 0;
  overflow: hidden;
  border: var(--ds-hairline) solid var(--ds-border-card);
  border-radius: var(--ds-radius-md);
}
:root:root .c-author__id {
  padding: var(--ds-space-7) var(--ds-space-6);
  background: var(--ds-surface-marker, var(--ds-surface-sunken));
}
:root:root .c-author--panel .c-author__name {
  margin-block-start: var(--ds-space-4);
}
:root:root .c-author__id .c-author__social {
  margin-block-start: var(--ds-space-4);
}
:root:root .c-author--panel .c-author__body {
  padding: var(--ds-space-7);
}
:root:root .c-author--panel .c-author__bio {
  margin-block-start: var(--ds-space-2);
}
:root:root .c-author__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-7);
  margin-block-start: var(--ds-space-5);
}
:root:root {
  /* The figure reads above its name, as in the design; the list keeps dt first. */
}
:root:root .c-author__stats > div {
  display: flex;
  flex-direction: column-reverse;
}
:root:root .c-author__stats dt {
  font-size: var(--ds-t-small);
  font-weight: var(--ds-fw-regular);
  line-height: var(--ds-lh-normal);
  color: var(--ds-fg-medium);
}
:root:root .c-author__stats dd {
  font-size: var(--ds-t-lead);
  font-weight: var(--ds-fw-semi);
  line-height: var(--ds-lh-snug);
  color: var(--ds-fg-strong);
}
:root:root .c-author--panel .c-author__more {
  margin-block-start: var(--ds-space-4);
  border-color: var(--ds-action-primary-bg);
  background: var(--ds-action-primary-bg);
  color: var(--ds-action-primary-fg);
}
:root:root {
  /* Side by side once the box is wide enough; stacked below that. In px,
     because some themes scale the root font size with the viewport. */
}
@container c-author (min-width: 576px) {
  :root:root :is(.c-author--compact, .c-author--card) .c-author__inner {
    flex-direction: row;
    align-items: flex-start;
  }
  :root:root :is(.c-author--compact, .c-author--card) .c-author__body {
    flex: 1 1 0;
    min-inline-size: 0;
  }
  :root:root .c-author--card .c-author__inner {
    gap: var(--ds-space-7);
    padding: var(--ds-space-7);
  }
  :root:root .c-author--inverse .c-author__inner {
    padding: var(--ds-space-8);
  }
}
@container c-author (min-width: 640px) {
  :root:root .c-author--panel .c-author__inner {
    flex-direction: row;
  }
  :root:root .c-author__id {
    flex: 8 1 0;
  }
  :root:root .c-author--panel .c-author__body {
    flex: 11 1 0;
    min-inline-size: 0;
  }
}
@container c-author (min-width: 768px) {
  :root:root .c-author--ledger .c-author__inner {
    flex-direction: row;
    align-items: flex-start;
  }
  :root:root .c-author--ledger .c-author__body {
    flex: 1.2 1 0;
    min-inline-size: 0;
  }
  :root:root .c-author--ledger .c-author__facts {
    flex: 1 1 0;
    min-inline-size: 0;
  }
}
:root:root {
  /* The dark card's padding takes width from its columns, so it waits longer. */
}
@container c-author (min-width: 864px) {
  :root:root .c-author--inverse .c-author__inner {
    flex-flow: row wrap;
    align-items: flex-start;
  }
  :root:root .c-author--inverse .c-author__inner::before {
    flex-basis: 100%;
  }
  :root:root .c-author--inverse .c-author__body {
    flex: 1.2 1 0;
    min-inline-size: 0;
  }
  :root:root .c-author--inverse .c-author__facts {
    flex: 1 1 0;
    min-inline-size: 0;
  }
}

/* ==========================================================================
   Links on inverted grounds.
   ==========================================================================

   The site link colour can match an inverted ground. :where() keeps these at
   zero specificity so a component's own colours still win.
   ========================================================================== */
:where(.c-ground--inverse, .c-ground--accent) a:not(.c-btn, .wp-block-button__link, .c-link-inline, .c-breadcrumb a) {
  color: var(--ds-fg-link);
}

:where(.c-ground--inverse, .c-ground--accent) a:not(.c-btn, .wp-block-button__link, .c-link-inline, .c-breadcrumb a):hover {
  color: var(--ds-fg-on-dark);
}

:where(.c-ground--inverse, .c-ground--accent) .c-link-inline {
  color: var(--ds-fg-on-dark);
}

/* ==========================================================================
   Group wrappers on classic themes.
   ==========================================================================

   A classic theme wraps a Group's children in .wp-block-group__inner-container,
   so a grid built from a Group has one child. display: contents makes the real
   children the grid items.
   ========================================================================== */
:where(.c-strip-facts__grid, .c-cards-cases__grid, .c-inset-facts__grid, .c-cards-guides__grid, .c-band-cta__grid, .c-rows-stories__cols, .c-split-cases__grid, .c-inset-figure__frame, .c-sidebar-stack, .c-card) > .wp-block-group__inner-container {
  display: contents;
}

/* ==========================================================================
   The three widths.
   ==========================================================================

   Mobile first: the base has no query, then 48em and 64em.
   ========================================================================== */
@media (min-width: 48em) {
  :root:root .c-strip-facts,
  :root:root .c-cards-cases,
  :root:root .c-rows-quotes,
  :root:root .c-rows-stories,
  :root:root .c-inset-facts,
  :root:root .c-grid-facts,
  :root:root .c-cards-guides,
  :root:root .c-band-cta,
  :root:root .c-strip-facts--inverse,
  :root:root .c-inset-figure,
  :root:root .c-inset-quotes,
  :root:root .c-split-cases,
  :root:root .c-rows-facts,
  :root:root .c-strip-links,
  :root:root .c-rows-faq {
    padding-block: var(--ds-space-10);
  }
  :root:root .c-stack-prose {
    padding-block: var(--ds-space-8);
  }
  :root:root .c-strip-facts--inverse .c-strip-facts__ground {
    padding: var(--ds-space-8);
  }
  :root:root .c-btn {
    width: auto;
  }
  :root:root .c-rows-quotes__ground,
  :root:root .c-inset-facts__ground {
    padding: var(--ds-space-8);
  }
}
@media (min-width: 64em) {
  :root:root .c-strip-facts,
  :root:root .c-cards-cases,
  :root:root .c-rows-quotes,
  :root:root .c-rows-stories,
  :root:root .c-inset-facts,
  :root:root .c-grid-facts,
  :root:root .c-cards-guides,
  :root:root .c-band-cta,
  :root:root .c-strip-facts--inverse,
  :root:root .c-inset-figure,
  :root:root .c-inset-quotes,
  :root:root .c-split-cases,
  :root:root .c-rows-facts,
  :root:root .c-strip-links,
  :root:root .c-rows-faq {
    padding-block: var(--ds-space-11);
  }
  :root:root .c-stack-prose {
    padding-block: var(--ds-space-9);
  }
  :root:root .c-inset-quotes__q {
    font-size: var(--ds-t-section);
  }
}/*# sourceMappingURL=main.css.map */