/* lumos-build v2 — generated from main.css, do not edit. */
/*
 * Lumos WP — stylesheet entry point.
 *
 * Mirrors Lumos's own global.css: four cascade layers, lowest priority first.
 * A later layer always beats an earlier one, whatever the selectors say.
 *
 *   base        tokens, colour themes, reset, text styles   (vendor, untouched)
 *   patterns    shared multi-property patterns               (vendor, untouched)
 *   components  one file per component                       (extracted from Lumos + yours)
 *   utilities   single-property classes                      (vendor, untouched)
 *
 * Your own brand values go in theme/tokens.css, which sits after the vendor
 * base inside the same layer, so it overrides Lumos's defaults without
 * touching the vendor file.
 */

@layer base, patterns, components, utilities;

/* Base */
/* ./vendor/lumos/base.css */
@layer base {
/* Design tokens */
:root {
  /* Swatches */
  --light-100: #ffffff;
  --light-200: #ebebeb;
  --light-300: #d9d9d9;
  --dark-700: #453e42;
  --dark-800: #2f2b2d;
  --dark-900: #1f1d1e;
  --brand-500: #c6fb50;
  --brand-text: var(--dark-900);

  /* Typography primitives */
  --primary-family: var(--font-inter, system-ui, sans-serif);
  --primary-regular: 400;
  --primary-medium: 500;
  --primary-bold: 700;

  /* Letter spacing */
  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0em;

  /* Line height */
  --line-height-small: 1;
  --line-height-medium: 1.1;
  --line-height-large: 1.3;
  --line-height-huge: 1.5;

  /* Borders & focus */
  --border-width: 0.0625rem;
  --focus-width: 0.125rem;
  --focus-offset: 0.1827rem;
  --focus-offset-inner: calc(var(--focus-width) * -1);

  /* Hover motion */
  --hover-duration: 200ms;
  --hover-ease: ease;

  /* Opening motion */
  --open-duration: var(--hover-duration);
  --open-ease: var(--hover-ease);

  /* Radius */
  --radius-small: 0.5rem;
  --radius-main: 1rem;
  --radius-round: 100vw;

  /* Fluid scale range */
  --viewport-min: 320;
  --viewport-max: 1440;

  /* Max width */
  --max-width-small: 70rem;
  --max-width-main: calc(var(--viewport-max) / 16 * 1rem);
  --max-width-full: 100%;

  /* Nav */
  --nav-height: 5rem;

  /* Typography styles */
  --display: clamp(var(--display-min) / 16 * 1rem, ((var(--display-min) - ((var(--display-max) - var(--display-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--display-max) - var(--display-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--display-max) / 16 * 1rem);
  --display-min: 64;
  --display-max: 112;
  --display-line-height: var(--line-height-small);
  --display-letter-spacing: var(--letter-spacing-tight);
  --display-text-transform: none;
  --display-margin-top: var(--space-7);
  --display-margin-bottom: var(--space-6);
  --display-font-family: var(--primary-family);
  --display-font-weight: var(--primary-medium);
  --display-text-wrap: balance;

  --h1: clamp(var(--h1-min) / 16 * 1rem, ((var(--h1-min) - ((var(--h1-max) - var(--h1-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--h1-max) - var(--h1-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--h1-max) / 16 * 1rem);
  --h1-min: 48;
  --h1-max: 80;
  --h1-line-height: var(--line-height-small);
  --h1-letter-spacing: var(--letter-spacing-tight);
  --h1-text-transform: none;
  --h1-margin-top: var(--space-7);
  --h1-margin-bottom: var(--space-6);
  --h1-font-family: var(--primary-family);
  --h1-font-weight: var(--primary-medium);
  --h1-text-wrap: balance;

  --h2: clamp(var(--h2-min) / 16 * 1rem, ((var(--h2-min) - ((var(--h2-max) - var(--h2-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--h2-max) - var(--h2-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--h2-max) / 16 * 1rem);
  --h2-min: 40;
  --h2-max: 64;
  --h2-line-height: var(--line-height-small);
  --h2-letter-spacing: var(--letter-spacing-tight);
  --h2-text-transform: none;
  --h2-margin-top: var(--space-7);
  --h2-margin-bottom: var(--space-5);
  --h2-font-family: var(--primary-family);
  --h2-font-weight: var(--primary-medium);
  --h2-text-wrap: balance;

  --h3: clamp(var(--h3-min) / 16 * 1rem, ((var(--h3-min) - ((var(--h3-max) - var(--h3-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--h3-max) - var(--h3-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--h3-max) / 16 * 1rem);
  --h3-min: 36;
  --h3-max: 48;
  --h3-line-height: var(--line-height-medium);
  --h3-letter-spacing: var(--letter-spacing-tight);
  --h3-text-transform: none;
  --h3-margin-top: var(--space-6);
  --h3-margin-bottom: var(--space-5);
  --h3-font-family: var(--primary-family);
  --h3-font-weight: var(--primary-medium);
  --h3-text-wrap: balance;

  --h4: clamp(var(--h4-min) / 16 * 1rem, ((var(--h4-min) - ((var(--h4-max) - var(--h4-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--h4-max) - var(--h4-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--h4-max) / 16 * 1rem);
  --h4-min: 28;
  --h4-max: 32;
  --h4-line-height: var(--line-height-medium);
  --h4-letter-spacing: var(--letter-spacing-tight);
  --h4-text-transform: none;
  --h4-margin-top: var(--space-6);
  --h4-margin-bottom: var(--space-4);
  --h4-font-family: var(--primary-family);
  --h4-font-weight: var(--primary-medium);
  --h4-text-wrap: balance;

  --h5: clamp(var(--h5-min) / 16 * 1rem, ((var(--h5-min) - ((var(--h5-max) - var(--h5-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--h5-max) - var(--h5-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--h5-max) / 16 * 1rem);
  --h5-min: 22;
  --h5-max: 24;
  --h5-line-height: var(--line-height-medium);
  --h5-letter-spacing: var(--letter-spacing-tight);
  --h5-text-transform: none;
  --h5-margin-top: var(--space-5);
  --h5-margin-bottom: var(--space-4);
  --h5-font-family: var(--primary-family);
  --h5-font-weight: var(--primary-medium);
  --h5-text-wrap: balance;

  --h6: clamp(var(--h6-min) / 16 * 1rem, ((var(--h6-min) - ((var(--h6-max) - var(--h6-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--h6-max) - var(--h6-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--h6-max) / 16 * 1rem);
  --h6-min: 16;
  --h6-max: 18;
  --h6-line-height: var(--line-height-medium);
  --h6-letter-spacing: var(--letter-spacing-tight);
  --h6-text-transform: none;
  --h6-margin-top: var(--space-5);
  --h6-margin-bottom: var(--space-3);
  --h6-font-family: var(--primary-family);
  --h6-font-weight: var(--primary-medium);
  --h6-text-wrap: balance;

  --text-large: clamp(var(--text-large-min) / 16 * 1rem, ((var(--text-large-min) - ((var(--text-large-max) - var(--text-large-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--text-large-max) - var(--text-large-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--text-large-max) / 16 * 1rem);
  --text-large-min: 18;
  --text-large-max: 20;
  --text-large-line-height: var(--line-height-large);
  --text-large-letter-spacing: var(--letter-spacing-normal);
  --text-large-text-transform: none;
  --text-large-margin-top: var(--space-4);
  --text-large-margin-bottom: var(--space-4);
  --text-large-font-family: var(--primary-family);
  --text-large-font-weight: var(--primary-regular);
  --text-large-text-wrap: pretty;

  --text-main: clamp(var(--text-main-min) / 16 * 1rem, ((var(--text-main-min) - ((var(--text-main-max) - var(--text-main-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--text-main-max) - var(--text-main-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--text-main-max) / 16 * 1rem);
  --text-main-min: 16;
  --text-main-max: 18;
  --text-main-line-height: var(--line-height-huge);
  --text-main-letter-spacing: var(--letter-spacing-normal);
  --text-main-text-transform: none;
  --text-main-margin-top: var(--space-4);
  --text-main-margin-bottom: var(--space-4);
  --text-main-font-family: var(--primary-family);
  --text-main-font-weight: var(--primary-regular);
  --text-main-text-wrap: pretty;

  --text-small: clamp(var(--text-small-min) / 16 * 1rem, ((var(--text-small-min) - ((var(--text-small-max) - var(--text-small-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--text-small-max) - var(--text-small-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--text-small-max) / 16 * 1rem);
  --text-small-min: 14;
  --text-small-max: 16;
  --text-small-line-height: var(--line-height-huge);
  --text-small-letter-spacing: var(--letter-spacing-normal);
  --text-small-text-transform: none;
  --text-small-margin-top: var(--space-4);
  --text-small-margin-bottom: var(--space-4);
  --text-small-font-family: var(--primary-family);
  --text-small-font-weight: var(--primary-regular);
  --text-small-text-wrap: pretty;

  /* Site layout */
  --site-margin: clamp(var(--site-margin-min) / 16 * 1rem, ((var(--site-margin-min) - ((var(--site-margin-max) - var(--site-margin-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--site-margin-max) - var(--site-margin-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--site-margin-max) / 16 * 1rem);
  --site-margin-min: 16;
  --site-margin-max: 48;

  --site-gutter: clamp(var(--site-gutter-min) / 16 * 1rem, ((var(--site-gutter-min) - ((var(--site-gutter-max) - var(--site-gutter-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--site-gutter-max) - var(--site-gutter-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--site-gutter-max) / 16 * 1rem);
  --site-gutter-min: 16;
  --site-gutter-max: 32;

  --site-width: calc(100% - var(--site-margin) * 2);

  /* Spacing */
  --space-1: clamp(var(--space-1-min) / 16 * 1rem, ((var(--space-1-min) - ((var(--space-1-max) - var(--space-1-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-1-max) - var(--space-1-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-1-max) / 16 * 1rem);
  --space-1-min: 6;
  --space-1-max: 8;
  --space-2: clamp(var(--space-2-min) / 16 * 1rem, ((var(--space-2-min) - ((var(--space-2-max) - var(--space-2-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-2-max) - var(--space-2-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-2-max) / 16 * 1rem);
  --space-2-min: 10;
  --space-2-max: 12;
  --space-3: clamp(var(--space-3-min) / 16 * 1rem, ((var(--space-3-min) - ((var(--space-3-max) - var(--space-3-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-3-max) - var(--space-3-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-3-max) / 16 * 1rem);
  --space-3-min: 14;
  --space-3-max: 16;
  --space-4: clamp(var(--space-4-min) / 16 * 1rem, ((var(--space-4-min) - ((var(--space-4-max) - var(--space-4-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-4-max) - var(--space-4-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-4-max) / 16 * 1rem);
  --space-4-min: 20;
  --space-4-max: 24;
  --space-5: clamp(var(--space-5-min) / 16 * 1rem, ((var(--space-5-min) - ((var(--space-5-max) - var(--space-5-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-5-max) - var(--space-5-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-5-max) / 16 * 1rem);
  --space-5-min: 28;
  --space-5-max: 32;
  --space-6: clamp(var(--space-6-min) / 16 * 1rem, ((var(--space-6-min) - ((var(--space-6-max) - var(--space-6-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-6-max) - var(--space-6-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-6-max) / 16 * 1rem);
  --space-6-min: 32;
  --space-6-max: 40;
  --space-7: clamp(var(--space-7-min) / 16 * 1rem, ((var(--space-7-min) - ((var(--space-7-max) - var(--space-7-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-7-max) - var(--space-7-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-7-max) / 16 * 1rem);
  --space-7-min: 36;
  --space-7-max: 48;
  --space-8: clamp(var(--space-8-min) / 16 * 1rem, ((var(--space-8-min) - ((var(--space-8-max) - var(--space-8-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--space-8-max) - var(--space-8-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--space-8-max) / 16 * 1rem);
  --space-8-min: 40;
  --space-8-max: 64;

  --section-space-small: clamp(var(--section-space-small-min) / 16 * 1rem, ((var(--section-space-small-min) - ((var(--section-space-small-max) - var(--section-space-small-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--section-space-small-max) - var(--section-space-small-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--section-space-small-max) / 16 * 1rem);
  --section-space-small-min: 48;
  --section-space-small-max: 80;
  --section-space-medium: clamp(var(--section-space-medium-min) / 16 * 1rem, ((var(--section-space-medium-min) - ((var(--section-space-medium-max) - var(--section-space-medium-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--section-space-medium-max) - var(--section-space-medium-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--section-space-medium-max) / 16 * 1rem);
  --section-space-medium-min: 64;
  --section-space-medium-max: 112;
  --section-space-large: clamp(var(--section-space-large-min) / 16 * 1rem, ((var(--section-space-large-min) - ((var(--section-space-large-max) - var(--section-space-large-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--section-space-large-max) - var(--section-space-large-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--section-space-large-max) / 16 * 1rem);
  --section-space-large-min: 88;
  --section-space-large-max: 160;
  --section-space-nav-overlap: clamp(var(--section-space-nav-overlap-min) / 16 * 1rem, ((var(--section-space-nav-overlap-min) - ((var(--section-space-nav-overlap-max) - var(--section-space-nav-overlap-min)) / (var(--viewport-max) - var(--viewport-min)) * var(--viewport-min))) / 16 * 1rem + ((var(--section-space-nav-overlap-max) - var(--section-space-nav-overlap-min)) / (var(--viewport-max) - var(--viewport-min))) * 100vw), var(--section-space-nav-overlap-max) / 16 * 1rem);
  --section-space-nav-overlap-min: 160;
  --section-space-nav-overlap-max: 224;
}

/* Color themes */
:root,
.theme-light,
.theme-dark .theme-invert,
.theme-brand .theme-invert {
  color-scheme: light;

  --background: var(--light-300);
  --background-2: var(--light-200);
  --background-3: var(--light-100);
  --background-skeleton: color-mix(in lab, currentcolor 10%, transparent);
  --text: var(--dark-900);
  --text-2: color-mix(in lab, currentcolor 60%, transparent);
  --border: color-mix(in lab, var(--text) 20%, transparent);
  --heading-accent: color-mix(in srgb, var(--brand-500), black 20%);

  --selection-background: var(--text);
  --selection-text: var(--background);

  --button-background: var(--brand-500);
  --button-border: var(--button-background);
  --button-text: var(--brand-text);
  --button-background-hover: var(--text);
  --button-border-hover: var(--button-background-hover);
  --button-text-hover: var(--background);

  --button-2-background: transparent;
  --button-2-border: var(--border);
  --button-2-text: var(--text);
  --button-2-background-hover: var(--text);
  --button-2-border-hover: var(--button-2-background-hover);
  --button-2-text-hover: var(--background);

  --link-text: var(--text);
  --link-border: var(--border);
  --link-text-hover: var(--text);
  --link-border-hover: var(--brand-500);
}

.theme-dark,
.theme-light .theme-invert {
  color-scheme: dark;

  --background: var(--dark-900);
  --background-2: var(--dark-800);
  --background-3: var(--dark-700);
  --background-skeleton: color-mix(in lab, currentcolor 10%, transparent);
  --text: var(--light-100);
  --text-2: color-mix(in lab, currentcolor 60%, transparent);
  --border: color-mix(in lab, var(--text) 20%, transparent);
  --heading-accent: var(--brand-500);

  --selection-background: var(--text);
  --selection-text: var(--background);

  --button-background: var(--brand-500);
  --button-border: var(--button-background);
  --button-text: var(--brand-text);
  --button-background-hover: var(--text);
  --button-border-hover: var(--button-background-hover);
  --button-text-hover: var(--background);

  --button-2-background: transparent;
  --button-2-border: var(--border);
  --button-2-text: var(--text);
  --button-2-background-hover: var(--text);
  --button-2-border-hover: var(--button-2-background-hover);
  --button-2-text-hover: var(--background);

  --link-text: var(--text);
  --link-border: var(--border);
  --link-text-hover: var(--text);
  --link-border-hover: var(--text);
}

.theme-brand {
  color-scheme: dark;

  --background: var(--brand-500);
  --background-2: color-mix(in lab, var(--background) 90%, var(--text));
  --background-3: color-mix(in lab, var(--background) 80%, var(--text));
  --background-skeleton: color-mix(in lab, currentcolor 10%, transparent);
  --text: var(--brand-text);
  --text-2: color-mix(in lab, currentcolor 60%, transparent);
  --border: color-mix(in lab, var(--text) 20%, transparent);
  --heading-accent: color-mix(in srgb, var(--text), white 20%);

  --selection-background: var(--text);
  --selection-text: var(--background);

  --button-background: var(--brand-text);
  --button-border: var(--button-background);
  --button-text: var(--background);
  --button-background-hover: var(--light-100);
  --button-border-hover: var(--button-background-hover);
  --button-text-hover: var(--dark-900);

  --button-2-background: transparent;
  --button-2-border: var(--border);
  --button-2-text: var(--text);
  --button-2-background-hover: var(--light-100);
  --button-2-border-hover: var(--button-2-background-hover);
  --button-2-text-hover: var(--dark-900);

  --link-text: var(--text);
  --link-border: var(--border);
  --link-text-hover: var(--text);
  --link-border-hover: var(--text);
}

:root,
[class*="theme-"] {
  background-color: var(--background);
  color: var(--text);
}

/* Reset & base */
*,
::before,
::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  > main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
}

a {
  text-decoration: none;
  color: inherit;
}
a:not([class]) {
  text-decoration: underline;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  width: 100%;
  object-fit: cover;
}

img {
  height: auto;
  overflow: clip;
  user-select: none;
}

button {
  background-color: transparent;
  text-align: inherit;
  padding: 0;
  border: 0;
}
button:not(:disabled) {
  cursor: pointer;
}

button,
label:has(input:is([type="radio"], [type="checkbox"])) {
  user-select: none;
}

input,
button,
textarea,
select {
  font: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
  list-style-type: "";
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

label {
  font-weight: inherit;
}

select:has(option[value=""]:checked) {
  color: color-mix(in lab, currentcolor 60%, transparent);
}

:target {
  scroll-margin-block: 2rem;
}

:focus-visible {
  outline-color: var(--text);
  outline-offset: var(--focus-offset);
  outline-width: var(--focus-width);
  outline-style: solid;
}

::selection {
  background-color: var(--selection-background);
  color: var(--selection-text);
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Text styles */
body,
.text-style-main {
  font-family: var(--text-main-font-family);
  font-size: var(--text-main);
  font-weight: var(--text-main-font-weight);
  line-height: var(--text-main-line-height);
  letter-spacing: var(--text-main-letter-spacing);
  text-transform: var(--text-main-text-transform);
  text-wrap: var(--text-main-text-wrap);
  --_margin-top: var(--text-main-margin-top);
  --_margin-bottom: var(--text-main-margin-bottom);
}

.text-style-small {
  font-family: var(--text-small-font-family);
  font-size: var(--text-small);
  font-weight: var(--text-small-font-weight);
  line-height: var(--text-small-line-height);
  letter-spacing: var(--text-small-letter-spacing);
  text-transform: var(--text-small-text-transform);
  text-wrap: var(--text-small-text-wrap);
  --_margin-top: var(--text-small-margin-top);
  --_margin-bottom: var(--text-small-margin-bottom);
}

.text-style-large {
  font-family: var(--text-large-font-family);
  font-size: var(--text-large);
  font-weight: var(--text-large-font-weight);
  line-height: var(--text-large-line-height);
  letter-spacing: var(--text-large-letter-spacing);
  text-transform: var(--text-large-text-transform);
  text-wrap: var(--text-large-text-wrap);
  --_margin-top: var(--text-large-margin-top);
  --_margin-bottom: var(--text-large-margin-bottom);
}

.text-style-display {
  font-family: var(--display-font-family);
  font-size: var(--display);
  font-weight: var(--display-font-weight);
  line-height: var(--display-line-height);
  letter-spacing: var(--display-letter-spacing);
  text-transform: var(--display-text-transform);
  text-wrap: var(--display-text-wrap);
  --_margin-top: var(--display-margin-top);
  --_margin-bottom: var(--display-margin-bottom);
}

h1,
.text-style-h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  text-transform: var(--h1-text-transform);
  text-wrap: var(--h1-text-wrap);
  --_margin-top: var(--h1-margin-top);
  --_margin-bottom: var(--h1-margin-bottom);
}

h2,
.text-style-h2 {
  font-family: var(--h2-font-family);
  font-size: var(--h2);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  text-transform: var(--h2-text-transform);
  text-wrap: var(--h2-text-wrap);
  --_margin-top: var(--h2-margin-top);
  --_margin-bottom: var(--h2-margin-bottom);
}

h3,
.text-style-h3 {
  font-family: var(--h3-font-family);
  font-size: var(--h3);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  text-transform: var(--h3-text-transform);
  text-wrap: var(--h3-text-wrap);
  --_margin-top: var(--h3-margin-top);
  --_margin-bottom: var(--h3-margin-bottom);
}

h4,
.text-style-h4 {
  font-family: var(--h4-font-family);
  font-size: var(--h4);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  text-transform: var(--h4-text-transform);
  text-wrap: var(--h4-text-wrap);
  --_margin-top: var(--h4-margin-top);
  --_margin-bottom: var(--h4-margin-bottom);
}

h5,
.text-style-h5 {
  font-family: var(--h5-font-family);
  font-size: var(--h5);
  font-weight: var(--h5-font-weight);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
  text-transform: var(--h5-text-transform);
  text-wrap: var(--h5-text-wrap);
  --_margin-top: var(--h5-margin-top);
  --_margin-bottom: var(--h5-margin-bottom);
}

h6,
.text-style-h6 {
  font-family: var(--h6-font-family);
  font-size: var(--h6);
  font-weight: var(--h6-font-weight);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
  text-transform: var(--h6-text-transform);
  text-wrap: var(--h6-text-wrap);
  --_margin-top: var(--h6-margin-top);
  --_margin-bottom: var(--h6-margin-bottom);
}

/* Text trim */
h1,
h2,
h3,
h4,
h5,
h6,
p,
[class*="text-style-"] {
  text-box: trim-both cap alphabetic;
}

}
/* ./theme/fonts.css */
@layer base {
/*
 * Site font.
 *
 * 1. Put the font file in assets/fonts/ as .woff2. To convert a .ttf:
 *    python3 -m fontTools.ttLib.woff2 compress Font.ttf
 * 2. Declare it with an @font-face below. For a variable font give the
 *    weight range (e.g. font-weight: 200 800) so every Lumos weight uses
 *    the real font instead of a faked bold.
 * 3. Name it in --primary-family in :root below. Lumos takes every heading
 *    and text style from that variable; this file loads after vendor
 *    base.css, so it wins.
 *
 * The first .woff2 in an @font-face here (outside comments) is preloaded
 * automatically by inc/assets.php, so declare the main font first.
 * A second family (e.g. for headings) can be set per style in tokens.css:
 * --display-font-family, --h1-font-family … --h6-font-family.
 */

@font-face {
  font-family: "Manrope";
  src: url("../../fonts/Manrope-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 800; /* variable font: every weight from one file */
  font-style: normal;
  font-display: swap;
}

:root {
  --primary-family: "Manrope", system-ui, sans-serif;
}

}
/* ./theme/theme-accent.css */
@layer base {
/*
 * Theme addition: an Accent colour theme, alongside Lumos's light, dark and
 * brand themes. For a light, tinted band (a stats strip, a call to action)
 * that isn't the page background or the brand colour.
 *
 * It behaves like Lumos's light theme (dark text, brand buttons), with
 * --accent-500 as the background. Set the swatch per client in tokens.css,
 * which loads after this file; the default is a pale tint of the brand colour.
 * --accent-text sets the text colour (default --dark-900); keep it dark,
 * because the theme's buttons and borders assume a light background.
 *
 * Section level only (Settings → Colour theme → Accent): the page theme
 * doesn't offer it. Invert inside an accent area gives Lumos's dark theme.
 *
 * Loaded in layer base after vendor base.css and before tokens.css.
 */

:root {
  --accent-500: color-mix(in srgb, var(--brand-500) 25%, var(--light-100));
  --accent-text: var(--dark-900);
}

.theme-accent {
  color-scheme: light;

  --background: var(--accent-500);
  --background-2: color-mix(in lab, var(--background) 60%, var(--light-100));
  --background-3: var(--light-100);
  --background-skeleton: color-mix(in lab, currentcolor 10%, transparent);
  --text: var(--accent-text);
  --text-2: color-mix(in lab, currentcolor 60%, transparent);
  --border: color-mix(in lab, var(--text) 20%, transparent);
  --heading-accent: color-mix(in srgb, var(--brand-500), black 20%);

  --selection-background: var(--text);
  --selection-text: var(--background);

  --button-background: var(--brand-500);
  --button-border: var(--button-background);
  --button-text: var(--brand-text);
  --button-background-hover: var(--text);
  --button-border-hover: var(--button-background-hover);
  --button-text-hover: var(--background);

  --button-2-background: transparent;
  --button-2-border: var(--border);
  --button-2-text: var(--text);
  --button-2-background-hover: var(--text);
  --button-2-border-hover: var(--button-2-background-hover);
  --button-2-text-hover: var(--background);

  --link-text: var(--text);
  --link-border: var(--border);
  --link-text-hover: var(--text);
  --link-border-hover: var(--brand-500);
}

/* Invert inside accent: Lumos's dark theme values (vendor base.css). */
.theme-accent .theme-invert {
  color-scheme: dark;

  --background: var(--dark-900);
  --background-2: var(--dark-800);
  --background-3: var(--dark-700);
  --text: var(--light-100);
  --border: color-mix(in lab, var(--text) 20%, transparent);
  --heading-accent: var(--brand-500);

  --button-background: var(--brand-500);
  --button-border: var(--button-background);
  --button-text: var(--brand-text);
  --button-background-hover: var(--text);
  --button-border-hover: var(--button-background-hover);
  --button-text-hover: var(--background);

  --button-2-background: transparent;
  --button-2-border: var(--border);
  --button-2-text: var(--text);
  --button-2-background-hover: var(--text);
  --button-2-border-hover: var(--button-2-background-hover);
  --button-2-text-hover: var(--background);

  --link-text: var(--text);
  --link-border: var(--border);
  --link-text-hover: var(--text);
  --link-border-hover: var(--text);
}

}
/* ./theme/tokens.css */
@layer base {
/*
 * Brand tokens — the one file you edit per client.
 *
 * Anything set here overrides the default in vendor/lumos/base.css, because
 * it loads after it in the same layer. Only redeclare what you change; every
 * other token keeps Lumos's value. See base.css for the full list.
 *
 * Fluid sizes are set as px numbers at the smallest (320) and largest (1440)
 * viewport, and Lumos interpolates between them in rem.
 */

:root {
  /* Swatches */
  /* --light-100: #ffffff; */
  --light-150: #f3f6fa; /* CleanNZ addition: pale grey-blue for panels (cards, fields) on white */
  --light-200: #d8f2f5;
  --light-300: #b8e7ed;
  --dark-700: #2d3465;
  --dark-800: #21264f;
  --dark-900: #181c3a;
  --brand-500: #2e3d96;
  --brand-text: var(--light-100);

  /* Accent theme background (theme/theme-accent.css) */
  --accent-500: var(--light-300);

  /* Corners */
  /* --radius-small: 0.5rem; */
  /* --radius-main: 1rem; */

  /* Type scale: smaller display heading (heroes), 40px → 76px as in the design */
  --display-min: 40;
  --display-max: 76;
  /* H1 sits between them: 44px → 64px (also the Stats figures) */
  --h1-min: 44;
  --h1-max: 64;
  /* Section headings: 32px → 48px as in the design */
  --h2-min: 32;
  --h2-max: 48;
  /* H3 and H4 stepped down to sit below that h2 (Lumos: 36 → 48 and 28 → 32,
     which made h3 as big as h2). H5 and H6 keep Lumos's sizes. */
  --h3-min: 28;
  --h3-max: 36;
  --h4-min: 24;
  --h4-max: 28;

  /* Font Weights */
  --primary-medium: 700;
  /* Headings extra bold, as in the design (Lumos: medium). Buttons, labels
     and other medium text stay at 700. Mike, 2026-11-10. */
  --display-font-weight: 800;
  --h1-font-weight: 800;
  --h2-font-weight: 800;
  --h3-font-weight: 800;
  --h4-font-weight: 800;
  --h5-font-weight: 800;
  --h6-font-weight: 800;

  /* Image overlays are navy, not black (theme/overlay.css) */
  --overlay-color: var(--dark-900);

  /* Eyebrows (theme/eyebrow.css): spaced capitals, no marker line */
  --eyebrow-font-size: 0.8125rem;
  --eyebrow-font-weight: var(--primary-bold);
  --eyebrow-text-transform: uppercase;
  --eyebrow-letter-spacing: 0.18em;
  --eyebrow-marker: none;
}

/*
 * Eyebrows, details labels, tag and icon-item icons: brand blue on light and accent,
 * aqua on dark and brand.
 */
:root,
.theme-light,
.theme-accent,
.theme-dark .theme-invert,
.theme-brand .theme-invert {
  --eyebrow-text: var(--brand-500);
  --tag-icon: var(--brand-500);
  --icon-item-icon: var(--brand-500);
  --list-tick-color: var(--brand-500);
  /* Highlighted heading words: the brand blue itself (Lumos darkens it 20%,
     which is barely different from the navy text) */
  --heading-accent: var(--brand-500);
  --rings-color: color-mix(in srgb, var(--light-300) 70%, transparent);
}


/* Rings (theme/decoration.css): white on the aqua accent band */
.theme-accent {
  --rings-color: color-mix(in srgb, var(--light-100) 60%, transparent);
}

.theme-dark,
.theme-brand,
.theme-light .theme-invert,
.theme-accent .theme-invert {
  --eyebrow-text: var(--light-300);
  --tag-icon: var(--light-300);
  --icon-item-icon: var(--light-300);
  --list-tick-color: var(--light-300);
  /* Highlighted heading words: aqua (the brand blue is hard to read on navy) */
  --heading-accent: var(--light-300);
  --rings-color: color-mix(in srgb, var(--light-300) 35%, transparent);
}

/*
 * White light theme. Lumos's light theme steps up in lightness, from the page
 * (--light-300 grey) to panels (--light-200) to raised surfaces (white). Here
 * the page is white and the steps go darker instead, so cards, form fields
 * and hover states still stand out.
 *
 * Only where the light theme is in force: the page root unless the page is
 * dark or brand (a bare :root would also match <html class="theme-dark"> and,
 * loading later, beat Lumos's dark theme), and sections set to Light.
 * Sections inverted to light inside dark or brand areas keep Lumos's grey:
 * overriding those selectors here can beat Lumos's own nested dark rules.
 */
:root:not(.theme-dark, .theme-brand),
.theme-light {
  --background: var(--light-100);
  --background-2: var(--light-150);
  --background-3: var(--light-200);
}

/*
 * CleanNZ: primary buttons on dark are aqua with navy text (Lumos uses the
 * brand blue). Same selectors as Lumos's dark theme; loading later in the
 * same layer, these win. Hover keeps Lumos's (white).
 */
.theme-dark,
.theme-light .theme-invert,
.theme-accent .theme-invert {
  --button-background: var(--light-300);
  --button-text: var(--dark-900);
}

}

/* Patterns */
/* ./vendor/lumos/patterns.css */
@layer patterns {
.heading:has(+ .text) {
  margin-bottom: var(--_margin-bottom);
}

.heading,
.text {
  margin-top: var(--_margin-top);
  max-width: var(--_mw, none);
}

.heading + .text {
  margin-top: 0;
}

.section {
  padding-top: var(--section-space-medium);
  padding-bottom: var(--section-space-medium);
  background-color: var(--background);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  position: relative;
}

.container {
  width: var(--site-width);
  max-width: var(--max-width-main);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: var(--_alignment, start);
  gap: var(--space-8);
  position: relative;
  margin-inline: auto;
  & > [class] {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.button-wrapper {
  margin-top: var(--space-6);
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: var(--_alignment, start);
  grid-column-gap: var(--space-2);
  grid-row-gap: var(--space-2);
}

.image {
  background-color: var(--background-skeleton);

  &.densities {
    width: auto;
    max-width: 100%;
  }

  &.transparent {
    background-color: transparent;
    object-fit: contain;
  }
}

.video {
  background-color: var(--background-skeleton);
  height: auto;

  &.transparent {
    background-color: transparent;
    object-fit: contain;
  }
}
/* Section background children */
.section > :where(:not(.container)) {
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Flex */
.flex-horizontal-wrap {
  display: flex;
  flex-flow: wrap;
  align-content: center;
  align-items: center;
  justify-content: var(--_alignment, start);
}

.flex-horizontal-nowrap {
  display: flex;
  flex-flow: row;
  align-content: center;
  align-items: center;
  justify-content: var(--_alignment, start);
}

.flex-vertical-wrap {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: var(--_alignment, start);
}

.flex-vertical-nowrap {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: var(--_alignment, start);
}

/* Grid */
.grid-autofit {
  --_gap-size: var(--site-gutter);
  --_column-count: 12;
  display: grid;
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  grid-template-rows: auto;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(min(max(8rem, (100% - ((var(--_column-count) - 1) * var(--_gap-size))) / var(--_column-count)), 100%), 1fr));
}

.grid-autofill {
  --_gap-size: var(--site-gutter);
  --_column-count: 12;
  display: grid;
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  grid-template-rows: auto;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: repeat(auto-fill, minmax(min(max(8rem, (100% - ((var(--_column-count) - 1) * var(--_gap-size))) / var(--_column-count)), 100%), 1fr));
}

/* Trim, clamp & cover */
:is(.margin-trim, .heading, .text, .layout > *) {
  & > :first-child {
    margin-top: 0;
  }
  & > :last-child {
    margin-bottom: 0;
  }
}

[class*="line-clamp"] {
  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cover-absolute {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.heading-accent strong {
  color: var(--heading-accent);
  font-weight: inherit;
}

.display-contents {
  display: contents;
  align-items: inherit;
  justify-content: inherit;
  text-align: inherit;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.field-label {
  display: flex;
}

.field-star {
  color: var(--text-2);
}

.field-control {
  --_field-pad-block: 0.75em;
  --_field-pad-inline: 1em;
  width: 100%;
  min-height: calc(1lh + var(--_field-pad-block) * 2 + var(--border-width) * 2);
  padding: var(--_field-pad-block) var(--_field-pad-inline);
  background-color: var(--background-2);
  color: inherit;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-small);
  transition:
    background-color var(--hover-duration) var(--hover-ease),
    border-color var(--hover-duration) var(--hover-ease);
  &::placeholder {
    color: var(--text-2);
  }
  @media (hover: hover) {
    &:hover:not(:disabled) {
      background-color: var(--background-3);
    }
  }
  &:focus-visible {
    border-color: var(--text);
    outline-offset: var(--focus-offset-inner);
  }
  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

}

/* Components (each file declares @layer components itself) */
/* ./components/layout.css */
/* Lumos layout — extracted unchanged from src/components/wrapper/ContentWrapper.astro (Lumos v1.0.0). */

@layer components {
  .layout {
    /* layout defaults */
    --_visual-ratio: 3 / 2;
    --_alignment: start;
    --_column-count: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    column-gap: var(--site-gutter);
    row-gap: var(--space-8);
    align-items: stretch;
    grid-template-columns: repeat(var(--_column-count), minmax(0, 1fr));

    /* column defaults */
    & > * {
      display: flex;
      flex-direction: column;
      align-items: var(--_alignment, start);
      text-align: var(--_alignment, start);
      width: 100%;
      max-width: 100%;
    }
    & > :first-child {
      align-self: center;
    }

    /* visual ratio lock */
    & > :last-child:not(:has(> :not(.image, .video, .overlay))) {
      position: relative;
      border-radius: var(--radius-small);
      aspect-ratio: var(--_visual-ratio);
      & > :is(.image, .video, .overlay) {
        border-radius: inherit;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
    }

    /* variant overrides */
    &.centered {
      --_alignment: center;
    }
    &.auto-width {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: end;
      row-gap: var(--space-6);
      & > * {
        width: auto;
        align-self: unset;
      }
      & > :last-child {
        min-width: min(4rem, 100%);
      }
    }
    &.columns {
      display: grid;
      column-gap: var(--section-space-small);
      @media (width >= 64rem) {
        --_column-count: 2;
        &.reversed {
          & > :last-child {
            order: -1;
          }
        }
      }
    }
    &.sticky-content {
      --_visual-ratio: 1 / 1;
      display: grid;
      @media (width >= 64rem) {
        --_column-count: 2;
        & > :first-child {
          align-self: start;
          position: sticky;
          top: calc(var(--site-margin) + var(--nav-height));
        }
      }
    }
    &.sticky-visual {
      --_visual-ratio: 1 / 1;
      display: grid;
      @media (width >= 64rem) {
        --_column-count: 2;
        & > :first-child {
          align-self: start;
        }
        & > :last-child {
          align-self: start;
          position: sticky;
          top: calc(var(--site-margin) + var(--nav-height));
          max-height: calc(
            100svh - var(--nav-height) - var(--site-margin) * 2
          );
        }
      }
    }
    &.breakout {
      display: grid;
      width: 100vw;
      flex-shrink: 0;
      align-self: center;
      column-gap: 0;
      row-gap: 0;
      & > :first-child {
        margin-inline: auto;
        width: var(--site-width);
        padding-block: var(--section-space-medium);
      }
      & > :last-child {
        border-radius: 0;
      }
      @media (width >= 64rem) {
        --_column-count: 2;
        & > :first-child {
          max-width: calc(var(--max-width-main) / 2);
        }
        & > :last-child {
          border-top-left-radius: var(--radius-small);
          border-bottom-left-radius: var(--radius-small);
        }
        &.reversed {
          & > :last-child {
            order: -1;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-top-right-radius: var(--radius-small);
            border-bottom-right-radius: var(--radius-small);
          }
        }
      }
    }
    &.contain {
      display: grid;
      column-gap: 0;
      row-gap: 0;
      background-color: var(--background-2);
      border-radius: var(--radius-main);
      position: relative;
      overflow: clip;
      & > :first-child {
        padding: var(--space-6);
      }
      & > :last-child {
        border-radius: 0;
      }
      @media (width >= 64rem) {
        --_column-count: 2;
        &.reversed {
          & > :last-child {
            order: -1;
          }
        }
      }
    }
    &.card-layout {
      border-radius: var(--radius-main);
      position: relative;
      overflow: clip;
      min-height: 26rem;
      justify-content: center;
      & > :first-child {
        padding: var(--space-6);
      }
      & > :first-child {
        padding-block: var(--section-space-medium);
        padding-inline: var(--space-5);
        position: relative;
        z-index: 1;
        --_alignment: center;
      }
      & > :last-child {
        position: absolute;
        inset: 0;
        border-radius: 0;
        width: 100%;
        height: 100%;
        opacity: calc(var(--_media-opacity, 70) / 100);
        pointer-events: none;
      }
    }
  }
}

/* ./components/grid.css */
/* Lumos grid — extracted unchanged from src/components/wrapper/Grid.astro (Lumos v1.0.0). */

@layer components {
  .grid {
    --_cols: var(--_cols-xs);
    --_cols-xs: 1;
    --_cols-sm: var(--_cols-xs);
    --_cols-md: var(--_cols-sm);
    --_cols-lg: var(--_cols-md);
    --_gap-size: var(--site-gutter);
    width: 100%;
    display: grid;
    grid-column-gap: var(--_gap-size);
    grid-row-gap: var(--_gap-size);
    grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
    @media (width >= 30rem) {
      --_cols: var(--_cols-sm);
    }
    @media (width >= 48rem) {
      --_cols: var(--_cols-md);
    }
    @media (width >= 64rem) {
      --_cols: var(--_cols-lg);
    }
    &:is(.autofit, .autofill) {
      --_max-cols: 12;
      --_min-col-width: 12;
      --_fit: (100% - (var(--_max-cols) - 1) * var(--_gap-size)) /
        var(--_max-cols);
      --_track: min(
        max(calc(var(--_min-col-width) * 1rem), var(--_fit)),
        100%
      );
    }
    &.autofit {
      grid-template-columns: repeat(auto-fit, minmax(var(--_track), 1fr));
    }
    &.autofill {
      grid-template-columns: repeat(auto-fill, minmax(var(--_track), 1fr));
    }
  }
}

/* ./components/eyebrow.css */
/* Lumos eyebrow — extracted unchanged from src/components/typography/Eyebrow.astro (Lumos v1.0.0). */

@layer components {
  .eyebrow_wrap {
    display: inline-flex;
    align-items: center;
    justify-content: var(--_alignment, start);
    gap: var(--space-2);

    &.tag {
      background-color: var(--text);
      color: var(--background);
      padding: var(--space-1) var(--space-2);
      border-radius: var(--radius-small);
    }
    .eyebrow_marker {
      flex: none;
      width: var(--border-width);
      height: 0.75rem;
      background-color: currentcolor;
    }
  }
}

/* ./components/icon.css */
/* Lumos Icon — extracted unchanged from src/components/media/Icon.astro (Lumos v1.0.0). */

@layer components {
  .icon {
    --_size: 1.5em;
    flex: none;
    display: block;
    width: var(--_size);
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 100%;

    &.small {
      --_size: 1em;
    }

    &.large {
      --_size: 2em;
    }

    &.full-width {
      width: 100%;
      aspect-ratio: unset;
    }
  }
}

/* ./components/button.css */
/* Lumos button — extracted unchanged from src/components/Button.astro (Lumos v1.0.0). */

@layer components {
  .button_wrap {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    padding: 0.75em 1.5em;
    background-color: var(--button-background);
    color: var(--button-text);
    border: var(--border-width) solid var(--button-border);
    border-radius: 0.5em;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    transition:
      background-color var(--hover-duration) var(--hover-ease),
      color var(--hover-duration) var(--hover-ease),
      border-color var(--hover-duration) var(--hover-ease);
    @media (hover: hover) {
      &:hover:not(:disabled) {
        background-color: var(--button-background-hover);
        color: var(--button-text-hover);
        border-color: var(--button-border-hover);
      }
    }
    &.secondary {
      --button-background: var(--button-2-background);
      --button-text: var(--button-2-text);
      --button-border: var(--button-2-border);
      --button-background-hover: var(--button-2-background-hover);
      --button-text-hover: var(--button-2-text-hover);
      --button-border-hover: var(--button-2-border-hover);
    }
    &.link {
      --button-background: transparent;
      --button-text: var(--link-text);
      --button-border: var(--link-border);
      --button-background-hover: transparent;
      --button-text-hover: var(--link-text-hover);
      --button-border-hover: var(--link-border);

      padding: 0.4em 0;
      border: 0;
      border-bottom: var(--border-width) solid var(--button-border);
      border-radius: 0;
      background-image: linear-gradient(
        var(--link-border-hover),
        var(--link-border-hover)
      );
      background-repeat: no-repeat;
      background-origin: border-box;
      background-position: 100% 100%;
      background-size: 0 var(--border-width);
      transition:
        background-size calc(var(--hover-duration) * 2) var(--hover-ease),
        color var(--hover-duration) var(--hover-ease),
        border-color var(--hover-duration) var(--hover-ease);
      @media (hover: hover) {
        &:hover:not(:disabled) {
          background-position: 0 100%;
          background-size: 100% var(--border-width);
        }
      }
    }
    &:is(.play, .close, .arrow) {
      gap: 0;
      padding: 0.75em;
      border-radius: var(--radius-round);
    }
    &.back .button_mark {
      rotate: 180deg;
    }
    &.play .button_pause {
      display: none;
    }
    &.play[aria-pressed="true"] {
      & .button_play {
        display: none;
      }
      & .button_pause {
        display: block;
      }
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
}

/* ./components/card.css */
/* Lumos card — extracted unchanged from src/components/item/Card.astro (Lumos v1.0.0). */

@layer components {
  .card_wrap {
    --_padding: var(--space-6);
    --_min-height: 20rem;
    --_visual-ratio: 3 / 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--_padding);
    position: relative;
    background-color: var(--background-2);
    border-radius: var(--radius-main);
    overflow: clip;

    &.cover {
      min-height: var(--_min-height);
    }
    &.stacked {
      background-color: transparent;
      overflow: visible;
    }
  }

  .card_visual {
    position: relative;
    width: 100%;
    flex: none;
    border-radius: inherit;
    overflow: clip;

    .stacked > & {
      aspect-ratio: var(--_visual-ratio);
    }

    .cover > & {
      position: absolute;
      inset: 0;
      height: 100%;
      pointer-events: none;
    }

    > :is(.image, .video) {
      width: 100%;
      height: 100%;
    }
  }

  /* Media fills its box, be that the whole card or the band across its top.
     The component layer puts this above the `height: auto` every image and
     video starts from. */
  .card_visual > :is(.image, .video) {
    width: 100%;
    height: 100%;
  }

  /* Buttons closing a card sit on its floor, however tall the row around it
     grows. This outranks the margin `.button-wrapper` sets for itself. */
  .card_content > .button-wrapper:last-child {
    margin-top: auto;
    padding-top: var(--space-6);
  }

  .card_content {
    display: flex;
    flex-direction: column;
    align-items: var(--_alignment, start);
    text-align: var(--_alignment, start);
    flex-grow: 1;
    width: 100%;
    max-width: 100%;
    padding: var(--_padding);

    .cover > & {
      z-index: 1;
    }

    .stacked > & {
      padding-inline: 0;
      padding-top: 0;
    }
  }

  .card_wrap:has(.button_wrap) {
    .button_wrap::after {
      content: "";
      position: absolute;
      inset: 0;
    }

    .card_content a:not(.button_wrap) {
      position: relative;
      z-index: 1;
    }

    .image {
      transition: scale calc(var(--hover-duration) * 2) var(--hover-ease);
    }

    @media (hover: hover) {
      &:hover .image {
        scale: 1.04;
      }
    }
  }
}

/* ./components/overlay.css */
/* Lumos overlay — extracted unchanged from src/components/media/Overlay.astro (Lumos v1.0.0). */

@layer components {
  .overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: color-mix(
      in srgb,
      black calc(var(--_strength, 50) / 100 * 80%),
      transparent
    );

    &.gradient {
      background-color: color-mix(
        in srgb,
        black calc(var(--_strength, 50) / 100 * 60%),
        transparent
      );
      background-image: linear-gradient(
        to bottom,
        transparent,
        color-mix(
            in srgb,
            black calc(var(--_strength, 50) / 100 * 62%),
            transparent
          )
          84%
      );
    }
  }
}

/* ./components/rich-text.css */
/* Lumos rich-text — extracted unchanged from src/components/typography/RichText.astro (Lumos v1.0.0). */

@layer components {
  .rich-text {
    & :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, pre, table) {
      margin-top: var(--_margin-top);
      margin-bottom: var(--_margin-bottom);
    }

    & > :first-child,
    & :is(blockquote, li) > :first-child:not(:is(ul, ol)) {
      margin-top: 0;
    }
    & > :last-child,
    & :is(blockquote, li) > :last-child {
      margin-bottom: 0;
    }

    & :is(ul, ol) {
      padding-left: 1.5em;
    }
    & ul {
      list-style-type: disc;
    }
    & ul ul {
      list-style-type: circle;
    }
    & ul ul ul {
      list-style-type: square;
    }
    & ol {
      list-style-type: decimal;
    }
    & li::marker {
      color: color-mix(in lab, currentcolor 60%, transparent);
    }
    & li + li {
      margin-top: var(--space-2);
    }

    & li > :is(ul, ol) {
      margin-block: var(--space-2);
    }

    & blockquote {
      padding-left: var(--space-4);
      border-left: var(--border-width) solid var(--border);
    }
  }
}

/* ./components/dropdown.css */
/* Lumos Dropdown — extracted unchanged from src/components/interactive/Dropdown.astro (Lumos v1.0.0). */

@layer components {
  .dropdown_wrap {
    --_control-pad: 0.75em;
    --_leaving: calc(var(--open-duration) * 0.7);
    position: relative;
    z-index: 10;
    display: inline-block;
  }

  /* Block-level, not inline: an inline box would sit on a line of its own
     inside the `details`, and the leading around it would push the control
     off the centre its neighbours are aligned to. */
  .dropdown_toggle {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: var(--_control-pad) 0;
    color: inherit;
    list-style: none;
    cursor: pointer;
    transition: color var(--hover-duration) var(--hover-ease);
    &::-webkit-details-marker {
      display: none;
    }
    @media (hover: hover) {
      &:hover {
        color: color-mix(in lab, currentcolor 60%, transparent);
      }
    }
  }

  .dropdown_icon {
    flex: none;
    rotate: 90deg;
    transition: rotate var(--open-duration) var(--open-ease);
  }

  /* The builder cannot set the `open` attribute, so its own classes dress
     the control as open alongside it, as `Modal` does. */
  .dropdown_wrap:is([open], .stacki-opened) .dropdown_icon,
  .stacki-designer .dropdown_wrap.preview .dropdown_icon {
    rotate: -90deg;
  }

  .dropdown_wrap::details-content {
    opacity: 0;
    content-visibility: hidden;
    transition:
      opacity var(--_leaving) var(--open-ease),
      content-visibility var(--_leaving) var(--open-ease) allow-discrete;
  }

  .dropdown_wrap:is([open], .stacki-opened)::details-content,
  .stacki-designer .dropdown_wrap.preview::details-content {
    opacity: 1;
    content-visibility: visible;
    transition:
      opacity var(--open-duration) var(--open-ease),
      content-visibility var(--open-duration) var(--open-ease) allow-discrete;
  }

  .dropdown_content {
    position: absolute;
    top: calc(100% - var(--_control-pad) + var(--space-2));
    inset-inline-start: 0;
    width: max-content;
    min-width: 100%;
    max-width: min(22rem, calc(100vw - var(--site-margin) * 2));
    background-color: var(--background-2);
    border-radius: var(--radius-small);
    transform-origin: top left;
    translate: 0 -0.5rem;
    scale: 0.98;
    transition:
      translate var(--_leaving) var(--open-ease),
      scale var(--_leaving) var(--open-ease);
  }

  .dropdown_wrap:is([open], .stacki-opened) .dropdown_content,
  .stacki-designer .dropdown_wrap.preview .dropdown_content {
    translate: 0 0;
    scale: 1;
    transition:
      translate var(--open-duration) var(--open-ease),
      scale var(--open-duration) var(--open-ease);
  }

  .dropdown_body {
    padding: var(--space-5);
  }
}

/* ./components/accordion.css */
/* Lumos Accordion — extracted unchanged from src/components/interactive/Accordion.astro (Lumos v1.0.0). */

@layer components {
  .accordion_wrap {
    width: 100%;
  }
}

/* ./components/accordion-item.css */
/* Lumos AccordionItem — extracted unchanged from src/components/interactive/AccordionItem.astro (Lumos v1.0.0). */

@layer components {
  .accordion_item {
    interpolate-size: allow-keywords;
    border-bottom: var(--border-width) solid var(--border);
    transition: border-color var(--hover-duration) var(--hover-ease);
    @media (hover: hover) {
      &:hover {
        border-bottom-color: currentcolor;
      }
    }
  }

  .accordion_toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-5);
    list-style: none;
    cursor: pointer;
    &::-webkit-details-marker {
      display: none;
    }
  }

  .accordion_title {
    margin-block: 0;
  }

  .accordion_icon {
    rotate: 90deg;
    transition: rotate var(--open-duration) var(--open-ease);
  }

  .accordion_item:is([open], .stacki-opened) .accordion_icon,
  .stacki-designer .accordion_wrap.preview .accordion_icon {
    rotate: -90deg;
  }

  .accordion_item::details-content {
    block-size: 0;
    overflow: hidden;
    content-visibility: hidden;
    transition:
      block-size var(--open-duration) var(--open-ease),
      content-visibility var(--open-duration) var(--open-ease) allow-discrete;
  }

  .accordion_item:is([open], .stacki-opened)::details-content,
  .stacki-designer .accordion_wrap.preview .accordion_item::details-content {
    block-size: auto;
    content-visibility: visible;
  }

  .accordion_body {
    padding-bottom: var(--space-5);
  }
}

/* ./components/tabs.css */
/* Lumos Tabs — extracted unchanged from src/components/interactive/Tabs.astro (Lumos v1.0.0). */

@layer components {
  .tabs_wrap {
    --_dir: 1;
    --_interval: 6s;
    --_slide: 500ms;
    display: grid;
    gap: var(--space-6);
    width: 100%;

    &.side {
      @media (width >= 48rem) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: start;
      }
    }
  }

  .tabs_bar {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .tabs_links {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    .tabs_wrap.side & {
      flex-direction: column;
      gap: var(--space-2);
      overflow-x: visible;
    }
  }

  .tabs_link {
    flex: 1;
    min-width: 8rem;
    padding-block: var(--space-3);
    background: none;
    border-bottom: var(--border-width) solid var(--border);
    color: color-mix(in lab, currentcolor 60%, transparent);
    text-align: center;
    transition:
      color var(--hover-duration) var(--hover-ease),
      border-color var(--hover-duration) var(--hover-ease);
    &.is-active {
      border-bottom-color: var(--text);
      color: var(--text);
    }
    @media (hover: hover) {
      &:hover {
        color: var(--text);
      }
    }
    .tabs_wrap.side & {
      flex: none;
      min-width: 0;
      padding: var(--space-3) var(--space-5);
      border: var(--border-width) solid var(--border);
      border-radius: var(--radius-round);
      text-align: start;
      &.is-active {
        background-color: var(--text);
        color: var(--background);
      }
    }
  }

  .tabs_wrap.auto:not(.side) {
    & .tabs_link.is-active {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: calc(var(--border-width) * -1);
        height: var(--border-width);
        background-color: var(--text);
        transform-origin: left;
        scale: 0 1;
      }
    }
    &.running:not(.is-paused) .tabs_link.is-active {
      border-bottom-color: var(--border);
      &::after {
        animation: tabs-progress var(--_interval) linear forwards;
      }
    }
  }

  @keyframes tabs-progress {
    from {
      scale: 0 1;
    }
    to {
      scale: 1 1;
    }
  }

  .tabs_panels {
    display: grid;
    min-width: 0;
    overflow: clip;
  }

  .tabs_panels > * {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--open-duration) var(--open-ease),
      visibility var(--open-duration) var(--open-ease);
    .tabs_wrap:not(.is-ready) &:first-child,
    &.is-active {
      opacity: 1;
      visibility: visible;
    }
  }

  /* Design mode lays the panels out one after another, the same way the
     `noscript` fallback above does, so every one can be edited. The bar
     stays put so the links can be edited too. */
  .stacki-designer .tabs_wrap.preview .tabs_panels {
    gap: var(--space-6);
    overflow: visible;
  }

  .stacki-designer .tabs_wrap.preview .tabs_panels > * {
    grid-area: auto;
    opacity: 1;
    visibility: visible;
    translate: none;
    animation: none;
  }

  .tabs_wrap.auto[data-moved] .tabs_panels > * {
    &.is-active {
      animation: tabs-in var(--_slide) var(--open-ease) both;
    }
    &.is-leaving {
      visibility: visible;
      animation: tabs-out var(--_slide) var(--open-ease) both;
    }
  }

  @keyframes tabs-in {
    from {
      translate: calc(var(--_dir) * 100%) 0;
      opacity: 0;
    }
    to {
      translate: 0 0;
      opacity: 1;
    }
  }

  @keyframes tabs-out {
    from {
      translate: 0 0;
      opacity: 1;
    }
    to {
      translate: calc(var(--_dir) * -100%) 0;
      opacity: 0;
    }
  }

  .tabs_controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .tabs_steps {
    display: flex;
    gap: var(--space-2);
  }
}

/* ./components/modal.css */
/* Lumos Modal — extracted unchanged from src/components/interactive/Modal.astro (Lumos v1.0.0). */

@layer components {
  html:has(.modal_wrap[open]) {
    overflow: hidden;
  }

  .modal_wrap {
    --_leaving: calc(var(--open-duration) * 0.7);
    --_from: 0 2rem;
    --_body: 0 0;
    --_backdrop: color-mix(in lab, black 60%, transparent);
    --_close: calc(2.75em + var(--space-4) * 2);
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: var(--site-margin);
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--text);
    overflow: clip;
    transition:
      display var(--_leaving) allow-discrete,
      overlay var(--_leaving) allow-discrete;

    &[open] {
      display: flex;
      transition:
        display var(--open-duration) allow-discrete,
        overlay var(--open-duration) allow-discrete;
    }

    .stacki-designer &.preview,
    &.stacki-opened {
      display: flex;
      position: fixed;
      inset: 0;
      z-index: 100;
      background-color: var(--_backdrop);
    }

    &::backdrop {
      background-color: var(--_backdrop);
      opacity: 0;
      transition: opacity var(--_leaving) var(--open-ease);
    }

    &[open]::backdrop {
      opacity: 1;
      transition: opacity var(--open-duration) var(--open-ease);
    }

    @starting-style {
      &[open]::backdrop {
        opacity: 0;
      }
    }

    &.side-panel {
      --_panel: 28rem;
      --_from: var(--_panel) 0;
      padding: 0;
      align-items: stretch;
      justify-content: end;
    }

    &.full-screen {
      --_from: 0 0;
      --_body: 0 2rem;
      padding: 0;
      align-items: stretch;
    }
  }

  .modal_content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 34rem;
    max-height: 100%;
    background-color: var(--background);
    border-radius: var(--radius-main);
    overflow: hidden;
    opacity: 0;
    translate: var(--_from);
    transition:
      opacity var(--_leaving) var(--open-ease),
      translate var(--_leaving) var(--open-ease);

    .modal_wrap.side-panel & {
      max-width: var(--_panel);
      max-height: none;
      border-radius: 0;
    }

    .modal_wrap.full-screen & {
      max-width: none;
      max-height: none;
      border-radius: 0;
    }

    .modal_wrap:is([open], .stacki-opened) &,
    .stacki-designer .modal_wrap.preview & {
      opacity: 1;
      translate: 0 0;
      transition:
        opacity var(--open-duration) var(--open-ease),
        translate var(--open-duration) var(--open-ease);
    }

    @starting-style {
      .modal_wrap[open] & {
        opacity: 0;
        translate: var(--_from);
      }
    }
  }

  .modal_close {
    position: absolute;
    top: var(--space-4);
    inset-inline-end: var(--space-4);
    z-index: 1;
  }

  .modal_scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;

    .modal_wrap.full-screen & {
      height: 100%;
    }
  }

  .modal_body {
    padding: var(--_close) var(--space-6) var(--space-7);
    translate: var(--_body);
    transition: translate var(--_leaving) var(--open-ease);

    .modal_wrap.full-screen & {
      min-height: 100%;
      display: grid;
      align-content: center;
    }

    .modal_wrap:is([open], .stacki-opened) &,
    .stacki-designer .modal_wrap.preview & {
      translate: 0 0;
      transition: translate var(--open-duration) var(--open-ease);
    }

    @starting-style {
      .modal_wrap[open] & {
        translate: var(--_body);
      }
    }
  }
}

/* ./components/slider.css */
/* Lumos Slider — extracted unchanged from src/components/interactive/Slider.astro (Lumos v1.0.0). */

@layer components {
  .slider_wrap {
    --_gap-size: var(--site-gutter);
    --_edge: max(var(--site-margin), (100vw - var(--max-width-main)) / 2);
    --_visible: var(--_visible-xs);
    --_visible-xs: 1.02;
    --_visible-sm: var(--_visible-xs);
    --_visible-md: var(--_visible-sm);
    --_visible-lg: var(--_visible-md);
    display: grid;
    gap: var(--space-6);
    width: 100%;

    @media (width >= 30rem) {
      --_visible: var(--_visible-sm);
    }
    @media (width >= 48rem) {
      --_visible: var(--_visible-md);
    }
    @media (width >= 64rem) {
      --_visible: var(--_visible-lg);
    }
  }

  .slider_list {
    display: flex;
    gap: var(--_gap-size);
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
    margin-inline: calc(-1 * var(--_edge));
    padding-inline: var(--_edge);
    scroll-padding-inline: var(--_edge);

    &::-webkit-scrollbar {
      display: none;
    }

    &:active {
      cursor: grabbing;
    }

    &.is-dragging {
      scroll-snap-type: none;
      -webkit-user-select: none;
      user-select: none;
    }

    .slider_wrap:not(.is-ready) &,
    .slider_wrap:has(.slider_controls.is-empty) & {
      cursor: auto;
    }

    & > * {
      flex: 0 0
        calc(
          (100% - (var(--_visible) - 1) * var(--_gap-size)) / var(--_visible)
        );
      min-width: 0;
      scroll-snap-align: start;
    }

    .slider_wrap.crop-start & {
      margin-inline-start: 0;
      padding-inline-start: 0;
      scroll-padding-inline-start: 0;
    }

    .slider_wrap.contained & {
      margin-inline: 0;
      padding-inline: 0;
      scroll-padding-inline: 0;
    }
  }

  .slider_controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);

    .slider_wrap:not(.is-ready) &,
    &.is-empty {
      display: none;
    }
  }

  .slider_markers {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .slider_marker {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    border: var(--border-width) solid var(--text);
    border-radius: var(--radius-round);
    background: none;
    transition: background-color var(--hover-duration) var(--hover-ease);

    &.is-active {
      background-color: var(--text);
    }
    @media (hover: hover) {
      &:hover {
        background-color: var(--text);
      }
    }
  }

  .slider_steps {
    display: flex;
    gap: var(--space-2);
  }
}

/* ./components/marquee.css */
/* Lumos Marquee — extracted unchanged from src/components/interactive/Marquee.astro (Lumos v1.0.0). */

@layer components {
  .marquee_wrap {
    --_gap-size: var(--space-6);
    --_item-height: 3rem;
    /* Seconds spent on each item, so a strip keeps its pace however many it
       holds — the count comes in on the element. */
    --_speed: 4s;
    --_count: 1;
    --_duration: calc(var(--_count) * var(--_speed));
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
  }

  /* Clips the strip without swallowing the toggle beside it, and fades what
     is arriving and leaving rather than cutting it off. */
  .marquee_viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: clip;
    /* The width the track measures itself against. */
    container-type: inline-size;
    mask-image: linear-gradient(
      to right,
      transparent,
      black 3%,
      black 97%,
      transparent
    );
  }

  /* Two panels and the gap between them, moved by exactly one panel and one
     gap, which lands the second where the first began. */
  .marquee_track {
    display: flex;
    /* Sized by the two panels it holds, so half the track plus half the gap
       is one panel and one gap — the distance the keyframe travels, which
       lands the copy exactly where the original began. */
    width: max-content;
    align-items: center;
    gap: var(--_gap-size);
    animation: marquee var(--_duration) linear infinite;

    .marquee_wrap.backwards & {
      animation-direction: reverse;
    }

    /* Held while something inside has focus, so a link can't travel out from
       under the person reading it. The toggle sits outside the track. */
    &:focus-within,
    .marquee_wrap[data-state="paused"] & {
      animation-play-state: paused;
    }
  }

  .marquee_panel {
    display: flex;
    flex: none;
    /* A panel is never narrower than the strip it runs in. That is what keeps
       the loop full: the track travels one panel and one gap, so the copy has
       to be wide enough to still cover the strip when the original has left
       it. A short set spreads across rather than bunching at the start. */
    min-width: 100cqw;
    justify-content: space-around;
    align-items: center;
    gap: var(--_gap-size);

    /* The type patterns carry block margins that mean nothing in a row. */
    > * {
      flex: none;
      margin-block: 0;
    }

    /* Media fills its container by default, which here is the whole strip.
       A height instead of a width keeps every item on one line and, with the
       ratio the markup already carries, holds the space before the file
       arrives — a panel that changes width once an image loads would break
       the loop. Override with --_item-height. */
    > :is(.image, .video) {
      width: auto;
      height: var(--_item-height);
    }
  }

  .marquee_toggle {
    flex: none;
  }

  @keyframes marquee {
    to {
      translate: calc(-50% - var(--_gap-size) / 2) 0;
    }
  }

  /* The reset collapses every animation to a moment, which would snap the
     track to its end. It holds still instead, and runs its full length only
     for someone who starts it themselves. */
  @media (prefers-reduced-motion: reduce) {
    .marquee_track {
      animation-name: none;
    }

    .marquee_wrap[data-state="playing"] .marquee_track {
      animation-name: marquee;
      animation-duration: var(--_duration) !important;
    }
  }
}

/* ./components/form.css */
/* Lumos Form — extracted unchanged from src/components/form/Form.astro (Lumos v1.0.0). */

@layer components {
  .form_wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
  }

  .form_fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    row-gap: var(--space-8);
    column-gap: var(--space-8);
  }

  .form_note {
    display: none;
    padding: var(--space-4) var(--space-5);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-small);
  }

  .form_wrap[data-state="sent"] {
    & .form_fields {
      display: none;
    }
    & .form_note-sent {
      display: block;
    }
  }

  .form_wrap[data-state="failed"] .form_note-failed {
    display: block;
    color: var(--text);
  }
}

/* ./components/fieldset.css */
/* Lumos Fieldset — extracted unchanged from src/components/form/Fieldset.astro (Lumos v1.0.0). */

@layer components {
  .form-fieldset {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .form-fieldset_legend {
    padding: 0;
    margin-bottom: var(--space-2);
  }

  .form-fieldset_legend-heading {
    margin-bottom: var(--space-3);
  }

  .form-fieldset_fields {
    display: grid;
    gap: var(--space-5);

    .form-fieldset.inline & {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3) var(--space-5);
      > * {
        width: auto;
      }
    }

    @media (width >= 48rem) {
      .form-fieldset.columns & {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .form-fieldset.thirds & {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
  }
}

/* ./components/textarea.css */
/* Lumos Textarea — extracted unchanged from src/components/form/Textarea.astro (Lumos v1.0.0). */

@layer components {
  .form-textarea_field {
    field-sizing: content;
    min-height: calc(
      var(--_min-lines, 3) * 1lh + var(--_field-pad-block) * 2 +
        var(--border-width) * 2
    );
    max-height: calc(
      var(--_max-lines, 12) * 1lh + var(--_field-pad-block) * 2 +
        var(--border-width) * 2
    );
    resize: vertical;
  }
}

/* ./components/select.css */
/* Lumos Select — extracted unchanged from src/components/form/Select.astro (Lumos v1.0.0). */

@layer components {
  .form-select_control {
    position: relative;
    display: block;
  }

  .form-select_field {
    appearance: none;
    padding-inline-end: 3em;
    &:has(option[value=""]:checked) {
      color: var(--text-2);
    }
  }

  .form-select_mark {
    position: absolute;
    inset-inline-end: 1em;
    top: 50%;
    translate: 0 -50%;
    rotate: 90deg;
    pointer-events: none;
    color: var(--text-2);
  }

  /* The list the browser draws itself, where it will */
  @supports (appearance: base-select) {
    .form-select_field,
    .form-select_field::picker(select) {
      appearance: base-select;
    }

    .form-select_field::picker-icon {
      display: none;
    }

    .form-select_field {
      display: flex;
      align-items: center;
      &::before,
      &::after {
        content: none;
      }
    }

    .form-select_mark {
      transition: rotate var(--open-duration) var(--open-ease);
    }

    .form-select_field:open ~ .form-select_mark {
      rotate: -90deg;
    }

    .form-select_field:open {
      background-color: var(--background-3);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }

    .form-select_field::picker(select) {
      margin-block: 0;
      padding: var(--space-1);
      max-height: min(18rem, calc(100dvh - 6rem));
      position-try-order: normal;
      overscroll-behavior: contain;
      background-color: var(--background-3);
      border: 0;
      border-radius: var(--radius-small);
      border-start-start-radius: 0;
      border-start-end-radius: 0;
      opacity: 0;
      scale: 0.98;
      transition:
        opacity var(--open-duration) var(--open-ease),
        scale var(--open-duration) var(--open-ease),
        overlay var(--open-duration) var(--open-ease) allow-discrete,
        display var(--open-duration) var(--open-ease) allow-discrete;
    }

    .form-select_field:open::picker(select) {
      opacity: 1;
      scale: 1;
    }

    @starting-style {
      .form-select_field:open::picker(select) {
        opacity: 0;
        scale: 0.98;
      }
    }

    .form-select_field option {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-1) var(--space-2);
      font-size: var(--text-small);
      line-height: var(--line-height-large);
      color: var(--text);
      background-color: transparent;
      border-radius: var(--radius-small);
      cursor: pointer;
      transition: background-color var(--hover-duration) var(--hover-ease);
      &:hover,
      &:focus {
        background-color: var(--background-2);
        outline: 0;
      }
    }

    .form-select_field option[hidden] {
      display: none;
    }

    .form-select_field option::checkmark {
      order: 1;
      margin-inline-start: auto;
      color: var(--text-2);
    }
  }
}

/* ./components/choice.css */
/* Lumos Choice — extracted unchanged from src/components/form/Choice.astro (Lumos v1.0.0). */

@layer components {
  .form-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    cursor: pointer;
  }

  .form-choice_input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .form-choice_mark {
    --_mark: var(--background-2);
    --_mark-hover: var(--background-3);
    --_mark-chosen: var(--text);
    --_ink: var(--background);

    flex: none;
    display: grid;
    place-items: center;
    width: 1.5em;
    height: 1.5em;
    background-color: var(--_mark);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-small);
    transition:
      background-color var(--hover-duration) var(--hover-ease),
      border-color var(--hover-duration) var(--hover-ease);
  }

  .form-choice_mark:has(.form-choice_dot) {
    border-radius: var(--radius-round);
  }

  .form-choice_tick {
    color: var(--_ink);
    opacity: 0;
    transition: opacity var(--hover-duration) var(--hover-ease);
  }

  .form-choice_dot {
    width: 1.1em;
    height: 1.1em;
    background-color: var(--_ink);
    border-radius: var(--radius-round);
    scale: 0;
    transition: scale var(--hover-duration) var(--hover-ease);
  }

  .form-choice:has(:checked) {
    & .form-choice_mark {
      background-color: var(--_mark-chosen);
    }
    & .form-choice_tick {
      opacity: 1;
    }
    & .form-choice_dot {
      scale: 1;
    }
  }

  @media (hover: hover) {
    .form-choice:hover .form-choice_input:not(:checked) ~ .form-choice_mark {
      background-color: var(--_mark-hover);
    }
  }

  .form-choice_input:focus-visible ~ .form-choice_mark {
    outline: var(--focus-width) solid var(--text);
    outline-offset: var(--focus-offset);
  }

  /* Toggle */
  .form-choice.toggle {
    & .form-choice_mark {
      width: 2.75em;
      height: 1.5em;
      border-radius: var(--radius-round);
      place-items: center start;
      padding: 0.15em;
    }
    & :is(.form-choice_tick, .form-choice_dot) {
      display: none;
    }
    & .form-choice_mark::after {
      content: "";
      width: 1.1em;
      height: 1.1em;
      border-radius: var(--radius-round);
      background-color: var(--text);
      transition:
        translate var(--hover-duration) var(--hover-ease),
        background-color var(--hover-duration) var(--hover-ease);
    }
    &:has(:checked) .form-choice_mark::after {
      translate: 1.2em 0;
      background-color: var(--_ink);
    }
  }

  /* Chip */
  .form-choice.chip {
    padding: 0.75em 1.5em;
    background-color: var(--background-2);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-round);
    transition:
      background-color var(--hover-duration) var(--hover-ease),
      color var(--hover-duration) var(--hover-ease),
      border-color var(--hover-duration) var(--hover-ease);
    & .form-choice_mark {
      --_mark: var(--background);
      --_mark-hover: var(--background);
      --_mark-chosen: var(--background);
      --_ink: var(--text);
    }
    @media (hover: hover) {
      &:hover:not(:has(:checked)) {
        background-color: var(--background-3);
      }
    }
    &:has(:checked) {
      background-color: var(--text);
      color: var(--background);
    }
    & .form-choice_input:focus-visible ~ .form-choice_mark {
      outline: 0;
    }
    &:has(.form-choice_input:focus-visible) {
      outline: var(--focus-width) solid var(--text);
      outline-offset: var(--focus-offset);
    }
  }
}

/* ./components/range.css */
/* Lumos Range — extracted unchanged from src/components/form/Range.astro (Lumos v1.0.0). */

@layer components {
  .form-range {
    --_handle: 1.75rem;
    --_handle-face: currentColor;
    --_rail: 0.25rem;
  }

  .form-range.is-drawn {
    --_handle-face: transparent;
  }

  .form-range:not(.is-drawn) :is(.form-range_fill, .form-range_handle) {
    display: none;
  }

  .form-range_control {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--_handle);
  }

  .form-range_input {
    appearance: none;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    background: none;
    cursor: grab;
    &:active {
      cursor: grabbing;
    }
    &::-webkit-slider-thumb {
      appearance: none;
      width: var(--_handle);
      height: var(--_handle);
      border-radius: var(--radius-round);
      background: var(--_handle-face);
    }
    &::-moz-range-thumb {
      width: var(--_handle);
      height: var(--_handle);
      border: 0;
      border-radius: var(--radius-round);
      background: var(--_handle-face);
    }
    &:focus-visible ~ .form-range_handle {
      outline: var(--focus-width) solid var(--text);
      outline-offset: var(--focus-offset);
    }
  }

  .form-range_track,
  .form-range_fill {
    position: absolute;
    inset-inline-start: 0;
    height: var(--_rail);
    border-radius: var(--radius-round);
    pointer-events: none;
  }

  .form-range_track {
    inset-inline-end: 0;
    background-color: var(--border);
  }

  .form-range_fill {
    width: calc(
      var(--_progress, 0) * (100% - var(--_handle)) + var(--_handle) / 2
    );
    background-color: var(--text);
  }

  .form-range_handle {
    position: absolute;
    inset-inline-start: calc(
      var(--_progress, 0) * (100% - var(--_handle)) + var(--_handle) / 2
    );
    translate: -50% 0;
    width: var(--_handle);
    height: var(--_handle);
    border: calc(var(--border-width) * 2) solid var(--text);
    border-radius: var(--radius-round);
    background-color: var(--background);
    pointer-events: none;
  }

  .form-range_output {
    display: flex;
    align-self: start;
    margin-inline-start: calc(
      var(--_progress, 0) * (100% - var(--_handle)) + var(--_handle) / 2
    );
    translate: -50% 0;
    padding: var(--space-1) var(--space-3);
    background-color: var(--background-2);
    border-radius: var(--radius-small);
    white-space: nowrap;
  }
}

/* ./components/skip-link.css */
/* Lumos SkipLink — extracted unchanged from src/components/global/SkipLink.astro (Lumos v1.0.0). */

@layer components {
  .skip-link {
    position: fixed;
    top: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 100;
    translate: 0 calc(-100% - var(--space-2) * 2);

    &:focus {
      translate: 0 0;
    }
  }
}

/* ./components/nav.css */
/* Lumos Nav — extracted unchanged from src/components/global/Nav.astro (Lumos v1.0.0). */

@layer components {
  .nav_wrap {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    padding-inline: var(--site-margin);
    background-color: var(--background);
    color: var(--text);
    border-bottom: var(--border-width) solid var(--border);

    &.overlap {
      position: fixed;
      inset-inline: 0;
    }
  }

  .nav_inner {
    width: 100%;
    max-width: var(--max-width-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--space-6);
  }

  /* Bar height */
  .nav_logo,
  .nav_toggle {
    min-height: var(--nav-height);
  }

  .nav_logo {
    display: flex;
    align-items: center;
    width: 6.5rem;
    transition: opacity var(--hover-duration) var(--hover-ease);
    @media (hover: hover) {
      &:hover {
        opacity: 0.6;
      }
    }
  }

  .nav_toggle {
    --_icon-width: 1.5rem;
    --_bar-gap: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    margin-right: calc((2.75rem - var(--_icon-width)) / -2);
    color: inherit;
    border-radius: var(--radius-small);
    transition: opacity var(--hover-duration) var(--hover-ease);
    @media (hover: hover) {
      &:hover {
        opacity: 0.6;
      }
    }
  }

  .nav_toggle_icon {
    position: relative;
    display: block;
    width: var(--_icon-width);
    height: calc(var(--_bar-gap) + var(--border-width));
    &::before,
    &::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      height: var(--border-width);
      background-color: currentcolor;
      transition: transform var(--open-duration) var(--open-ease);
    }
    &::before {
      top: 0;
    }
    &::after {
      top: var(--_bar-gap);
    }
  }

  .nav_wrap.open .nav_toggle_icon {
    &::before {
      transform: translateY(calc(var(--_bar-gap) / 2)) rotate(45deg);
    }
    &::after {
      transform: translateY(calc(var(--_bar-gap) / -2)) rotate(-45deg);
    }
  }

  .nav_menu {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    max-height: calc(100svh - var(--nav-height));
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--background);
    border-bottom: var(--border-width) solid var(--border);
    transition:
      grid-template-rows var(--open-duration) var(--open-ease),
      visibility var(--open-duration) var(--open-ease);
  }

  .nav_menu_inner {
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--open-duration) var(--open-ease);
  }

  .nav_wrap.open .nav_menu {
    grid-template-rows: 1fr;
    visibility: visible;
  }

  .nav_wrap.open .nav_menu_inner {
    opacity: 1;
    overflow-y: auto;
  }

  .nav_links {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--site-margin) var(--space-4);
    font-size: var(--text-main);
    font-weight: var(--primary-medium);
    & > li + li {
      border-top: var(--border-width) solid var(--border);
    }
  }

  .nav_link {
    display: block;
    padding-block: var(--space-3);
    color: color-mix(in lab, currentcolor 60%, transparent);
    text-decoration: none;
    text-underline-offset: 0.4em;
    text-decoration-thickness: var(--border-width);
    transition: color var(--hover-duration) var(--hover-ease);
    &[aria-current="page"] {
      color: var(--text);
    }
    @media (hover: hover) {
      &:hover {
        color: var(--text);
      }
    }
  }

  @media (width >= 48rem) {
    .nav_toggle {
      display: none;
    }

    .nav_menu {
      position: static;
      display: block;
      visibility: visible;
      background-color: transparent;
      border-bottom: 0;
    }

    .nav_menu_inner {
      overflow: visible;
      opacity: 1;
    }

    .nav_links {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      padding: 0;
      gap: var(--space-4);
      font-size: var(--text-small);
      & > li + li {
        border-top: 0;
      }
    }

    .nav_link {
      padding-block: 0;
      &[aria-current="page"] {
        text-decoration: underline;
      }
    }
  }
}

/* ./components/footer.css */
/* Lumos Footer — extracted unchanged from src/components/global/Footer.astro (Lumos v1.0.0). */

@layer components {
  .footer_wrap {
    display: flex;
    justify-content: center;
    padding-block: var(--section-space-small);
    padding-inline: var(--site-margin);
    background-color: var(--background);
    color: var(--text);
    border-top: var(--border-width) solid var(--border);
  }

  .footer_inner {
    width: 100%;
    max-width: var(--max-width-main);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .footer_top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
  }

  .footer_logo {
    display: block;
    width: 7.5rem;
    max-width: 100%;
    transition: opacity var(--hover-duration) var(--hover-ease);
    @media (hover: hover) {
      &:hover {
        opacity: 0.6;
      }
    }
  }

  .footer_links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-small);
    font-weight: var(--primary-medium);
  }

  .footer_link {
    color: var(--text-2);
    text-decoration: none;
    transition: color var(--hover-duration) var(--hover-ease);
    @media (hover: hover) {
      &:hover {
        color: var(--text);
      }
    }
  }

  .footer_bottom {
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border);
  }

  .footer_copyright {
    color: var(--text-2);
  }
}


/* Theme additions to components (load after them, same layer) */
/* ./theme/dropdown-menu.css */
/*
 * Theme addition: a list inside a Dropdown reads as a plain link menu.
 *
 * Dropdown content is rich text (sections/content.php), so a list of links
 * would otherwise get Lumos's rich-text bullets, indent and underlines.
 * Link colours follow Lumos's NavLink: dimmed, full colour on hover and focus.
 */

@layer components {
  .dropdown_body .rich-text {
    & :is(ul, ol) {
      padding-left: 0;
      list-style: none;
    }

    & li::marker {
      content: none;
    }

    & li a {
      display: block;
      color: color-mix(in lab, currentcolor 60%, transparent);
      text-decoration: none;
      transition: color var(--hover-duration) var(--hover-ease);
      @media (hover: hover) {
        &:hover {
          color: var(--text);
        }
      }
      &:focus-visible {
        color: var(--text);
      }
    }
  }
}

/* ./theme/nav-button.css */
/*
 * Theme addition: a menu item with the CSS class "button" renders as a Lumos
 * Button in the Nav (inc/menus.php). Lumos's Nav has no button, so this only
 * spaces it to sit with the links: in the mobile menu it gets the same row
 * height as a link and no divider above it; on desktop it sits in the row.
 */

@layer components {
  .nav_links > li.nav_item-button {
    padding-block: var(--space-3);
    border-top: 0;
  }

  @media (width >= 48rem) {
    .nav_links > li.nav_item-button {
      padding-block: 0;
    }
  }
}

/* ./theme/nav-wrap.css */
/*
 * Theme addition: when the desktop nav links wrap onto a second row.
 *
 * Lumos's Nav uses one gap (--space-4) between links and between wrapped rows,
 * and no padding above or below them, so wrapped rows sit far apart and touch
 * the top and bottom of the bar. This keeps Lumos's gap between links, uses
 * a smaller gap between rows, and adds the same space above and below. On a
 * single row the bar keeps its height: the links are shorter than
 * --nav-height (5rem) even with the padding.
 */

@layer components {
  @media (width >= 48rem) {
    .nav_links {
      row-gap: var(--space-2);
      padding-block: var(--space-2);
    }
  }
}

/* ./theme/nav-dropdown.css */
/*
 * Theme addition: sub-menus in the Nav (inc/menus.php). A menu item with
 * sub-items renders as a Lumos Dropdown (.nav_dropdown) whose panel holds
 * NavLinks (.nav_sublinks). Lumos's Nav has no sub-menus; this dresses the
 * Dropdown to match it, without changing the Dropdown component itself.
 *
 * Trigger: NavLink colours (dimmed, full on hover, open or when a sub-link is
 * the current page). Mobile menu: the panel opens in place as an indented
 * list. Desktop: Lumos's floating panel, kept on screen by
 * assets/js/nav-dropdown.js (adds .align-end near the right edge).
 */

@layer components {
  .nav_dropdown {
    display: block;

    & .dropdown_toggle {
      justify-content: space-between;
      padding-block: var(--space-3);
      color: color-mix(in lab, currentcolor 60%, transparent);
      @media (hover: hover) {
        &:hover {
          color: var(--text);
        }
      }
    }

    &:is([open], .is-current) .dropdown_toggle {
      color: var(--text);
    }

    /* Mobile menu: in the flow, under the trigger. */
    & .dropdown_content {
      position: static;
      width: auto;
      max-width: none;
      background-color: transparent;
      translate: none;
      scale: none;
    }

    & .dropdown_body {
      padding: 0 0 var(--space-2) var(--space-4);
    }
  }

  .nav_sublinks {
    display: flex;
    flex-direction: column;
  }

  /* Mobile menu: sub links sit closer together than the top-level rows. */
  @media (width < 48rem) {
    .nav_sublinks .nav_link {
      padding-block: var(--space-1);
    }
  }

  @media (width >= 48rem) {
    /* Lumos's Nav keeps the menu's mobile overflow-y: auto on desktop, which
       would clip the floating panel. */
    .nav_menu:has(.nav_dropdown) {
      overflow: visible;
    }

    .nav_dropdown {
      & .dropdown_toggle {
        justify-content: flex-start;
        padding-block: 0;
      }

      &.is-current .dropdown_label {
        text-decoration: underline;
        text-underline-offset: 0.4em;
        text-decoration-thickness: var(--border-width);
      }

      /* Lumos's floating panel, as on any Dropdown (Lumos's open rule
         still moves it into place). */
      & .dropdown_content {
        position: absolute;
        top: calc(100% + var(--space-3));
        width: max-content;
        min-width: 12rem;
        max-width: min(22rem, calc(100vw - var(--site-margin) * 2));
        background-color: var(--background-2);
        translate: 0 -0.5rem;
        scale: 0.98;
      }

      &.align-end .dropdown_content {
        inset-inline: auto 0;
        transform-origin: top right;
      }

      & .dropdown_body {
        padding: var(--space-4) var(--space-5);
      }
    }

    .nav_sublinks {
      gap: var(--space-3);
    }
  }
}

/* ./theme/wordpress.css */
/*
 * Theme addition: the classes WordPress's classic editor puts in content.
 *
 * Every editor field (Text, Content rich text, FAQ answers, Modal content,
 * posts) can contain images aligned, sized and captioned in the editor. A
 * classic theme has to style these itself; Lumos doesn't know about them.
 */

@layer components {
  /* Images inserted in the editor keep the size chosen there (Lumos makes
     every img fill its container), still capped at the container width. */
  img[class*="wp-image-"] {
    width: auto;
  }

  .alignleft {
    float: left;
    margin: 0 var(--space-5) var(--space-4) 0;
  }

  .alignright {
    float: right;
    margin: 0 0 var(--space-4) var(--space-5);
  }

  .aligncenter {
    display: block;
    margin-inline: auto;
  }

  .wp-caption {
    max-width: 100%;
  }

  .wp-caption-text {
    margin-top: var(--space-2);
    font-size: var(--text-small);
    color: var(--text-2);
  }

  /* WordPress's name for Lumos's .sr-only (pagination, comments, plugins). */
  .screen-reader-text {
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
    border-width: 0;
    width: 1px;
    height: 1px;
    margin-inline: auto;
    padding: 0;
    position: absolute;
    inset: 0% 0% auto;
    overflow: hidden;
  }
}

/* ./theme/layout-card.css */
/*
 * Theme addition: more side padding inside Lumos's card layout when a
 * section uses it (the contained Hero and the Content section's Image card
 * add the class "card-roomy"). The Lumos component itself, and the code
 * Example Components page that mirrors Lumos, keep Lumos's padding.
 *
 * Lumos uses --space-5 (28–32px), which reads tight beside a large heading.
 * --space-8 scales from 40px on phones to 64px on desktop. Change the value
 * here to adjust every section card at once.
 */

@layer components {
  .layout.card-layout.card-roomy {
    --card-padding-inline: var(--space-8);

    & > :first-child {
      padding-inline: var(--card-padding-inline);
    }
  }
}

/* ./theme/hero-video.css */
/*
 * Theme addition: the pause/play button for a Hero background video
 * (sections/hero.php, assets/js/hero-video.js). Sits in the bottom corner of
 * the full-width section, or of the card when the hero is contained.
 */

@layer components {
  .hero-card-wrap {
    position: relative;
    width: 100%;
  }

  .hero-video-toggle {
    position: absolute;
    inset-block-end: var(--space-5);
    inset-inline-end: var(--space-5);
    z-index: 2;
  }

  /* Full width: the toggle is in the section's background layer, which
     Lumos sizes to fill the section and makes click-through. Undo both. */
  .section > .hero-video-toggle {
    inset: auto var(--space-5) var(--space-5) auto;
    width: auto;
    height: auto;
    pointer-events: auto;
  }
}

/* ./theme/anchors.css */
/*
 * Theme addition: links to sections (#section-id).
 *
 * Smooth scrolling; Lumos's base already turns it off for visitors who
 * prefer reduced motion (scroll-behavior: auto !important).
 *
 * A section scrolled to stops below the sticky header, and below the sticky
 * Section nav when it's one of the sections that nav covers (page-nav.css).
 * For logged-in editors, admin-bar.css adjusts for WordPress's admin bar.
 * --header-height is the header's measured height (assets/js/header-height.js),
 * taller than --nav-height when the desktop nav links wrap onto two rows.
 */

@layer components {
  html {
    scroll-behavior: smooth;
  }

  .section[id],
  :target {
    scroll-margin-top: calc(var(--header-height, var(--nav-height)) + var(--_page-nav-offset, 0px) + var(--_admin-bar-scroll-fix, 0px));
  }
}

/* ./theme/page-nav.css */
/*
 * Theme addition: the Section nav (sections/page-nav.php). Not a Lumos
 * component: a bar of NavLinks, styled to sit with Lumos's Nav. It can
 * stick just under the header, scrolls sideways when the links don't fit,
 * and underlines the link for the section in view (assets/js/page-nav.js
 * sets aria-current="location").
 *
 * page.php wraps the bar and the sections it links to in .page-nav-group.
 * A sticky element only sticks inside its parent, so the bar is released
 * after the last linked section and scrolls away with the page.
 */

@layer components {
  .page-nav {
    --page-nav-height: 3.5rem;
    display: flex;
    justify-content: center;
    padding-inline: var(--site-margin);
    background-color: var(--background);
    color: var(--text);
    border-bottom: var(--border-width) solid var(--border);

    &.is-sticky {
      position: sticky;
      top: calc(var(--header-height, var(--nav-height)) + var(--_admin-bar-sticky, 0px));
      z-index: 90;
    }
  }

  /* Sections in the bar's group scroll clear of it; later ones, where the
     bar has gone, only clear the header (theme/anchors.css). */
  .page-nav-group:has(> .page-nav.is-sticky) {
    --_page-nav-offset: 3.5rem;
  }

  .page-nav_inner {
    width: 100%;
    max-width: var(--max-width-main);
    min-width: 0;
  }

  .page-nav_links {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: var(--page-nav-height);
    overflow-x: auto;
    scrollbar-width: none;
    font-size: var(--text-small);
    font-weight: var(--primary-medium);
    &::-webkit-scrollbar {
      display: none;
    }
    & > li {
      flex: none;
    }
    & .nav_link {
      padding-block: var(--space-2);
      white-space: nowrap;
    }
    & .nav_link[aria-current] {
      color: var(--text);
      text-decoration: underline;
    }

    /* Link style "Pills" (class is-pills): each link in a rounded outline,
       the current one filled in the text colour, so it follows the colour
       theme. Underline off; the fill marks the current link. */
    .page-nav.is-pills & {
      gap: var(--space-2);
      padding-block: var(--space-3);
      & .nav_link {
        padding: var(--space-1) var(--space-4);
        border: var(--border-width) solid var(--border);
        border-radius: var(--radius-round);
        color: var(--text);
        text-decoration: none;
        transition-property: color, background-color, border-color;
        transition-duration: var(--hover-duration);
        transition-timing-function: var(--hover-ease);
        @media (hover: hover) {
          &:hover {
            border-color: var(--text);
          }
        }
      }
      & .nav_link[aria-current] {
        background-color: var(--text);
        border-color: var(--text);
        color: var(--background);
      }
    }

    /* Centred: auto margins rather than justify-content: center, which would
       push the first links out of reach when the row overflows and scrolls. */
    .page-nav.is-centered & {
      & > li:first-child {
        margin-inline-start: auto;
      }
      & > li:last-child {
        margin-inline-end: auto;
      }
    }
  }
}

/* ./theme/admin-bar.css */
/*
 * Theme addition: keep the sticky header, the Section nav and section links
 * right when an editor is logged in and WordPress shows its admin bar.
 *
 * WordPress's admin-bar.css defines --wp-admin--admin-bar--height (32px,
 * 46px at 782px and below) and adds that much scroll-padding-top to the
 * page. Above 600px the bar is fixed, so the sticky header and Section nav
 * sit below it, and WordPress's scroll padding already makes room for it.
 * At 600px and below the bar scrolls away, so they stick at the top as
 * usual and the extra scroll padding is cancelled through the section
 * scroll margin (theme/anchors.css).
 */

@layer components {
  body.admin-bar {
    --_admin-bar-sticky: var(--wp-admin--admin-bar--height, 0px);
  }

  @media screen and (max-width: 600px) {
    body.admin-bar {
      --_admin-bar-sticky: 0px;
      --_admin-bar-scroll-fix: calc(-1 * var(--wp-admin--admin-bar--height, 0px));
    }
  }

  body.admin-bar .nav_wrap {
    top: var(--_admin-bar-sticky);
  }
}

/* ./theme/grid-cell.css */
/*
 * Theme addition: cells of the Grid section (sections/grid.php).
 *
 * Background, corners, padding and image ratio are Lumos's own utilities
 * (background-2, theme-*, radius-*, padding-*, ratio-*, overflow-hidden),
 * added by the section. This only makes an image cell's image fill the cell:
 * the whole stretched row height, or the cell's aspect ratio when one is set.
 */

@layer components {
  .grid-cell.is-image > img {
    height: 100%;
  }

  /* Grid section → Width → Full width: edge to edge, the way Lumos's breakout
     layout leaves the container (100vw, centred in the column). */
  .grid.grid-full {
    width: 100vw;
    max-width: none;
    align-self: center;
  }

  /* 100vw includes the scrollbar where one takes up space, so the grid is a
     few pixels wider than the page: the section clips it, no sideways scroll. */
  .section:has(> .container > .grid-full) {
    overflow-x: clip;
  }
}

/* ./theme/card-visual.css */
/*
 * Theme addition: "Image on top" (stacked) cards keep Lumos's image shape.
 *
 * Lumos gives the image band aspect-ratio 3 / 2, but a box with an aspect
 * ratio still grows to fit its content (its automatic minimum height). Media
 * Library images carry their own width and height, so a portrait or square
 * photo made its card's band taller and the cards in a row stopped lining up.
 * min-height: 0 lets the ratio win; the image fills the band (object-fit:
 * cover, from Lumos's base styles). Lumos's own example images are all one
 * shape, so its demo never shows this.
 */

@layer components {
  .stacked > .card_visual {
    min-height: 0;
  }
}

/* ./theme/card-cover.css */
/*
 * Theme addition: Card options (components/card.php). The Card component's
 * Lumos markup and CSS are unchanged; these classes are added by its props.
 *
 *   .content-bottom  content_position "bottom" on a cover card: a 4:5 card
 *                    (grows if the text needs more room) with the text at its
 *                    foot, over an Overlay fading in from the bottom
 *                    (.overlay.bottom in theme/overlay.css).
 *                    Token: --card-cover-ratio (default 4 / 5).
 *   .button-hidden   hide_button: the card's button stays in the page, so the
 *                    whole card is still one link with a focus ring around it,
 *                    but it is drawn invisibly over the card. Its label is
 *                    read by screen readers.
 */

@layer components {
  .card_wrap.cover.content-bottom {
    min-height: 0;
    aspect-ratio: var(--card-cover-ratio, 4 / 5);

    > .card_content {
      justify-content: end;
    }
  }

  .card_wrap.button-hidden {
    .card_content > .button-wrapper:last-child {
      margin: 0;
      padding: 0;
    }

    .button_wrap,
    .button_wrap:hover {
      position: absolute;
      inset: 0;
      z-index: 1;
      padding: 0;
      border: 0;
      border-radius: inherit;
      background: transparent;
      /* Inside the edge: the card clips anything outside it. */
      outline-offset: var(--focus-offset-inner);
    }

    .button_text {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }
  }
}

/* ./theme/decoration.css */
/*
 * Theme addition: section decoration — concentric rings in one or two
 * corners, partly off the edge (images/graphics/rings.svg, used as a mask so
 * the colour comes from the colour theme).
 *
 * A section's Settings → Decoration puts data-decoration on the section
 * (lumos_section_attrs()), so every section supports it without template
 * changes:
 *   rings-top-end       top right
 *   rings-top-start     top left
 *   rings-bottom-start  bottom left
 *   rings-bottom-end    bottom right
 *   rings-bottom-both   bottom left and bottom right
 *   rings-diagonal      top right and bottom left
 *
 * Tokens (set per colour theme in tokens.css):
 *   --rings-color  default: the text colour at 15%.
 *   --rings-size        default: 13rem on phones up to 26rem.
 *   --rings-size-large  Ring size → Large (data-decoration-size="large"):
 *                       default 16rem up to 32.5rem.
 *
 * Ring strength (data-decoration-opacity="75" / "50" / "25") fades the rings
 * to that share of the theme's ring colour.
 *
 * The rings sit above a section's background image and overlay and below its
 * content, and the section clips them at its edges.
 */

@layer components {
  .section[data-decoration] {
    --_rings-size: var(--rings-size, clamp(13rem, 30vw, 26rem));
    --_rings-in: calc(var(--_rings-size) * -0.23);
    --_rings-out: calc(var(--_rings-size) * -0.36);
    overflow: clip;

    > .container {
      z-index: 1;
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-color: var(--rings-color, color-mix(in lab, currentcolor 15%, transparent));
      mask-image: url("../../images/graphics/rings.svg");
      mask-repeat: no-repeat;
      mask-size: var(--_rings-size) var(--_rings-size);
    }
  }

  .section[data-decoration][data-decoration-size="large"] {
    --_rings-size: var(--rings-size-large, clamp(16rem, 36vw, 32.5rem));
  }

  .section[data-decoration="rings-top-end"]::after {
    mask-position: right var(--_rings-in) top var(--_rings-out);
  }

  .section[data-decoration="rings-top-start"]::after {
    mask-position: left var(--_rings-in) top var(--_rings-out);
  }

  .section[data-decoration="rings-bottom-start"]::after {
    mask-position: left var(--_rings-in) bottom var(--_rings-out);
  }

  .section[data-decoration="rings-bottom-end"]::after {
    mask-position: right var(--_rings-in) bottom var(--_rings-out);
  }

  .section[data-decoration-opacity="75"]::after {
    opacity: 0.75;
  }

  .section[data-decoration-opacity="50"]::after {
    opacity: 0.5;
  }

  .section[data-decoration-opacity="25"]::after {
    opacity: 0.25;
  }

  .section[data-decoration="rings-bottom-both"]::after {
    mask-image: url("../../images/graphics/rings.svg"), url("../../images/graphics/rings.svg");
    mask-position:
      left var(--_rings-in) bottom var(--_rings-out),
      right var(--_rings-in) bottom var(--_rings-out);
  }

  .section[data-decoration="rings-diagonal"]::after {
    mask-image: url("../../images/graphics/rings.svg"), url("../../images/graphics/rings.svg");
    mask-position:
      right var(--_rings-in) top var(--_rings-out),
      left var(--_rings-in) bottom var(--_rings-out);
  }
}

/* ./theme/overlay.css */
/*
 * Theme addition: Overlay colour and a "side" variant. The Lumos Overlay
 * component is unchanged; these rules repeat its solid and gradient
 * backgrounds with the colour as a token, and add one more shape.
 *
 *   --overlay-color  the overlay's colour. Default black, as in Lumos.
 *   .overlay.bottom  a fade up from the bottom: clear down to 40%, then to the
 *                    full strength at the bottom edge (cover cards with their
 *                    text at the bottom; strength 92 as in the CleanNZ design).
 *   .overlay.side    a horizontal fade: strongest on the left (behind left-
 *                    aligned text), fading to about a third of the strength on
 *                    the right. Strength 94 gives 94% → 82% (at 42%) → 35%.
 *
 * Pass the class to the component: lumos( 'overlay', [ 'class' => 'side' ] ).
 */

@layer components {
  .overlay {
    background-color: color-mix(
      in srgb,
      var(--overlay-color, black) calc(var(--_strength, 50) / 100 * 80%),
      transparent
    );

    &.gradient {
      background-color: color-mix(
        in srgb,
        var(--overlay-color, black) calc(var(--_strength, 50) / 100 * 60%),
        transparent
      );
      background-image: linear-gradient(
        to bottom,
        transparent,
        color-mix(
            in srgb,
            var(--overlay-color, black) calc(var(--_strength, 50) / 100 * 62%),
            transparent
          )
          84%
      );
    }

    &.side {
      background-color: transparent;
      background-image: linear-gradient(
        to right,
        color-mix(in srgb, var(--overlay-color, black) calc(var(--_strength, 50) * 1%), transparent),
        color-mix(in srgb, var(--overlay-color, black) calc(var(--_strength, 50) * 0.872%), transparent) 42%,
        color-mix(in srgb, var(--overlay-color, black) calc(var(--_strength, 50) * 0.372%), transparent)
      );
    }

    &.bottom {
      background-color: transparent;
      background-image: linear-gradient(
        to bottom,
        transparent 40%,
        color-mix(in srgb, var(--overlay-color, black) calc(var(--_strength, 50) * 1%), transparent)
      );
    }
  }
}

/* ./theme/eyebrow.css */
/*
 * Theme addition: Eyebrow styling hooks. The Lumos Eyebrow component is
 * unchanged; these tokens restyle it per client from tokens.css. Unset, each
 * falls back to Lumos's own look (text colour, marker line, small text).
 *
 *   --eyebrow-text            colour (set per colour theme for tinted eyebrows)
 *   --eyebrow-font-size       size
 *   --eyebrow-font-weight     weight
 *   --eyebrow-text-transform  e.g. uppercase
 *   --eyebrow-letter-spacing  e.g. 0.18em
 *   --eyebrow-marker          none hides the marker line
 *
 * Details labels (theme/details.css) reuse the colour, transform and spacing.
 */

@layer components {
  .eyebrow_wrap:not(.tag) {
    color: var(--eyebrow-text, inherit);

    .eyebrow_text {
      font-size: var(--eyebrow-font-size, var(--text-small));
      font-weight: var(--eyebrow-font-weight, var(--text-small-font-weight));
      text-transform: var(--eyebrow-text-transform, var(--text-small-text-transform));
      letter-spacing: var(--eyebrow-letter-spacing, var(--text-small-letter-spacing));
    }

    .eyebrow_marker {
      display: var(--eyebrow-marker, block);
    }
  }
}

/* ./theme/tag.css */
/*
 * Theme addition: Tag and Tag list (components/tag.php, components/tag-list.php).
 * A pill of information. Filled (primary) or outlined (secondary), with an
 * optional icon tinted by --tag-icon (default: the text colour).
 */

@layer components {
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .tag_wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1em;
    background-color: var(--background-3);
    color: var(--text);
    border: var(--border-width) solid var(--background-3);
    border-radius: var(--radius-round);
    font-weight: var(--primary-medium);
    line-height: 1.2;
    margin: 0;

    &.secondary {
      background-color: transparent;
      border-color: var(--border);
    }

    .tag_icon {
      color: var(--tag-icon, currentcolor);
    }
  }

  /* A number in its own circle at the start of a tag (<span class="tag_count">),
     in the reverse colours, e.g. the Hero's Exhibitor count. The tag's padding
     shrinks so the circle has the same space above, below and before it, and
     the tag stays the height of a plain one. */
  .tag_wrap:has(.tag_count) {
    padding-block: 0.25em;
    padding-inline-start: 0.25em;
  }

  .tag_count {
    display: inline-grid;
    place-items: center;
    min-width: 1.7em;
    height: 1.7em;
    margin-inline-end: 0.5em;
    padding-inline: 0.5em;
    border-radius: var(--radius-round);
    background-color: var(--tag-count-background, var(--text));
    color: var(--tag-count-text, var(--background));
    font-weight: var(--primary-bold);
    font-variant-numeric: tabular-nums;
  }
}

/* ./theme/details.css */
/*
 * Theme addition: Details (components/details.php), label/value pairs.
 *
 * strip: tiles in a raised panel, 2 per row, all in one row from 64rem (up to
 *        4; fewer items fill the row). A last odd tile spans the row on small
 *        screens. Faint dividers: the 1px gaps show --details-divider.
 * list:  label and value rows.
 *
 * Labels use the eyebrow styling tokens (theme/eyebrow.css) so they match the
 * site's eyebrows: --details-label, else --eyebrow-text, else the text colour.
 */

@layer components {
  .details_wrap {
    margin: 0;

    .details_label {
      color: var(--details-label, var(--eyebrow-text, currentcolor));
      font-weight: var(--primary-bold);
      text-transform: var(--eyebrow-text-transform, none);
      letter-spacing: var(--eyebrow-letter-spacing, normal);
    }

    .details_value {
      margin: 0;
    }

    .details_note {
      display: block;
      margin-top: var(--space-1);
      color: var(--text-2);
    }
  }

  /* Strip */
  .details_wrap.strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--border-width);
    width: 100%;
    /* The gaps show this: a faint divider laid over the panel colour, opaque
       so nothing behind the strip (e.g. the hero image) shows through. */
    background:
      linear-gradient(var(--details-divider), var(--details-divider)),
      var(--background);
    --details-divider: color-mix(in lab, var(--text) 10%, transparent);
    border-radius: var(--radius-main);
    overflow: hidden;
    box-shadow: var(--details-shadow, 0 1.5rem 3.75rem color-mix(in lab, var(--dark-900) 16%, transparent));

    &.count-1 {
      grid-template-columns: minmax(0, 1fr);
    }

    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));

      &.count-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      &.count-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .details_item {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      padding: var(--space-6);
      background-color: var(--background);
      color: var(--text);

      &:last-child:nth-child(odd) {
        grid-column: 1 / -1;
      }
      @media (width >= 64rem) {
        &:last-child:nth-child(odd) {
          grid-column: auto;
        }
      }
    }

    .details_label {
      font-size: var(--details-label-size, 0.75rem);
    }

    .details_value {
      font-size: var(--text-large);
      line-height: var(--text-large-line-height);
      font-weight: var(--primary-bold);
    }
  }

  /* List */
  /* One label column shared by all rows (subgrid), as wide as the longest
     label (at least 6rem), so a long label like "Accessibility" never runs
     into its value. Rows are split by a faint line (--border). */
  .details_wrap.list {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) 1fr;
    column-gap: var(--space-4);
    width: 100%;

    .details_item {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      padding-block: var(--space-3);

      &:first-child {
        padding-top: 0;
      }

      &:last-child {
        padding-bottom: 0;
      }

      & + .details_item {
        border-top: var(--border-width) solid var(--border);
      }
    }
  }

  /* In a text column (e.g. the Content section), after the heading or text:
     the same space Lumos puts before a paragraph. */
  :is(.heading, .text, .rich-text) + .details_wrap.list {
    margin-top: var(--space-6);
  }
}

/* ./theme/stat.css */
/*
 * Theme addition: Stat (components/stat.php) and the Stats section
 * (sections/stats.php). The figure takes a Lumos text style (text-style-h1
 * etc.); margins are reset so the figure and label sit tight together.
 */

@layer components {
  .stat_wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: var(--_alignment, start);
    text-align: var(--_alignment, start);

    &.panel {
      padding: var(--space-6);
      background-color: var(--background-2);
      border-radius: var(--radius-main);
    }

    > p {
      margin: 0;
    }
  }

  .stat_value {
    font-weight: var(--primary-bold);
    line-height: 1;
  }

  .stat_label {
    font-weight: var(--primary-medium);
  }

  .stats_note {
    color: var(--text-2);
  }
}

/* Content section → Figures: a two-column grid of Stat panels under the text,
   with the same space before it as Lumos puts before a paragraph, and the
   small note close below. */
@layer components {
  .content-stats {
    margin-top: var(--space-6);

    .stat_wrap.panel {
      gap: var(--space-2);
      padding: var(--space-5);
    }

    /* Smaller labels than the Stats section's, to suit the narrow panels. */
    .stat_label {
      font-size: var(--text-small);
      line-height: var(--text-small-line-height);
    }
  }

  .content-stats-note {
    margin-top: var(--space-4);
  }
}

/* ./theme/icon-list.css */
/*
 * Theme addition: Icon item (components/icon-item.php) and the Icon list
 * section (sections/icon-list.php).
 *
 * An icon in a round badge beside a label (and optional text below it).
 * Panel: a card on the page background with a faint border, so it stands out
 * on a Subtle section, like the Testimonial card.
 *
 * Tokens: --icon-item-icon (icon colour, default the text colour),
 * --icon-item-badge (badge colour, default --background-3),
 * --icon-item-background (panel, default --background).
 */

@layer components {
  .icon-item_wrap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 100%;

    &.panel {
      padding: var(--space-4) var(--space-5);
      background-color: var(--icon-item-background, var(--background));
      border: var(--border-width) solid var(--border);
      border-radius: var(--radius-main);
    }

    /* With text below the label, the badge lines up with the label */
    &:has(.icon-item_text) {
      align-items: start;
    }
  }

  .icon-item_badge {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75em;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-round);
    background-color: var(--icon-item-badge, var(--background-3));
    color: var(--icon-item-icon, var(--text));
  }

  .icon-item_content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;

    > p {
      margin: 0;
    }
  }

  .icon-item_label {
    font-weight: var(--primary-bold);
  }

  .icon-item_text {
    color: var(--text-2);
  }

  /* Icon list section → Note: small print under the items; bold text in it
     is a highlighted line in the eyebrow colour, main text size. The section's
     own gap sits above it, so no extra margin. */
  .icon-list_note {
    margin-top: 0;
    color: var(--text-2);

    strong {
      display: block;
      margin-bottom: var(--space-1);
      color: var(--eyebrow-text, var(--text));
      font-size: var(--text-main);
      line-height: var(--text-main-line-height);
      font-weight: var(--primary-bold);
    }
  }
}

/* ./theme/faq.css */
/*
 * Theme addition: FAQ section, Stacked + Alignment Centre (sections/faq.php).
 * The intro is centred by the section/layout; the questions sit in a
 * narrower column in the middle, left-aligned so they stay easy to read.
 *
 * Token: --faq-centered-width (default 48rem).
 */

@layer components {
  .faq-centered {
    width: 100%;
    max-width: var(--faq-centered-width, 48rem);
    margin-inline: auto;
    text-align: start;
  }
}

/* ./theme/schedule.css */
/*
 * Theme addition: Schedule list (components/schedule-list.php) and the
 * Schedule section (sections/schedule.php).
 *
 * List: rows of time | title + detail, split by a faint line. Panel: a card
 * on the page background with a faint border, so it stands out on a Subtle
 * section (like the Icon item panel). The time uses the eyebrow colour.
 *
 * Section: day tabs as pills (Lumos Tabs, horizontal, restyled like the
 * Section nav pills: rounded outlines, the current one filled), the
 * "until it's ready" notice, and the Narrow width (--schedule-width).
 *
 * Tokens: --schedule-time (time colour), --schedule-background (panel,
 * default --background), --schedule-width (Narrow, default 60rem).
 */

@layer components {
  /* List */
  .schedule_list {
    margin: 0;
    padding: 0;
    list-style: none;

    &.panel {
      background-color: var(--schedule-background, var(--background));
      border: var(--border-width) solid var(--border);
      border-radius: var(--radius-main);
      overflow: hidden;
    }
  }

  .schedule_item {
    display: grid;
    gap: var(--space-1) var(--space-6);
    padding: var(--space-5);

    @media (width >= 48rem) {
      grid-template-columns: 8rem 1fr;
      padding: var(--space-5) var(--space-6);
    }

    & + .schedule_item {
      border-top: var(--border-width) solid var(--border);
    }

    .schedule_list:not(.panel) & {
      padding-inline: 0;
    }

    p {
      margin: 0;
    }
  }

  .schedule_time {
    color: var(--schedule-time, var(--eyebrow-text, currentcolor));
    font-weight: var(--primary-bold);
    font-variant-numeric: tabular-nums;
  }

  .schedule_content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
  }

  .schedule_title {
    font-weight: var(--primary-bold);
    font-size: var(--text-large);
    line-height: var(--text-large-line-height);
  }

  .schedule_detail {
    color: var(--text-2);
  }

  /* Section */
  .schedule_wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;

    &.is-narrow {
      max-width: var(--schedule-width, 60rem);
      margin-inline: auto;
    }

    > .layout {
      margin: 0;
    }
  }

  .schedule_day {
    margin: 0;
    font-weight: var(--primary-bold);
  }

  /* Day tabs as pills */
  .schedule_tabs {
    .tabs_links {
      gap: var(--space-2);
    }

    .tabs_link {
      flex: none;
      min-width: 0;
      padding: var(--space-2) var(--space-4);
      border: var(--border-width) solid var(--border);
      border-radius: var(--radius-round);
      background-color: var(--background);
      color: var(--text);
      white-space: nowrap;

      &.is-active {
        border-color: var(--text);
        background-color: var(--text);
        color: var(--background);
      }

      @media (hover: hover) {
        &:not(.is-active):hover {
          border-color: var(--text);
        }
      }
    }
  }

  /* Until the programme is ready */
  .schedule_notice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background-color: var(--schedule-background, var(--background));
    border: var(--border-width) dashed var(--border);
    border-radius: var(--radius-main);

    p {
      margin: 0;
    }
  }

  .schedule_notice-icon {
    flex: none;
    color: var(--schedule-time, var(--eyebrow-text, currentcolor));
  }
}

/* ./theme/exhibitor-directory.css */
/*
 * Theme addition (event module): Exhibitor card (components/exhibitor-card.php)
 * and the Exhibitor directory section (sections/exhibitor-directory.php).
 *
 * Bar: search (wider) | category | sort, in a row from 48rem, stacked on
 * phones; hidden until assets/js/exhibitor-directory.js marks the directory
 * .is-ready, so it never shows without the script.
 *
 * Grid: as many 14rem+ columns as fit, up to 4 (--exhibitor-columns); 2 per
 * row on phones (9rem+).
 *
 * Card: a --background panel with a faint border (stands out on a Subtle
 * section, like the Icon item and Schedule panels): logo tile, name,
 * categories, then stand Tag and website link on the card's floor.
 */

@layer components {
  .exhibitor-directory {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
  }

  .exhibitor-directory_bar {
    display: none;
    gap: var(--space-4);
    /* A faint line between the bar and the cards. */
    padding-bottom: var(--space-6);
    border-bottom: var(--border-width) solid var(--border);

    .exhibitor-directory.is-ready & {
      display: grid;
    }

    @media (width >= 48rem) {
      grid-template-columns: 2fr 1fr 1fr;
      align-items: end;

      &:not(:has(> :nth-child(3))) {
        grid-template-columns: 2fr 1fr;
      }
    }

    .field {
      min-width: 0;
    }
  }

  .exhibitor-directory_grid {
    --_columns: var(--exhibitor-columns, 4);
    --_min: 9rem; /* 2 per row on phones */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--_min), (100% - (var(--_columns) - 1) * var(--space-4)) / var(--_columns)), 1fr));
    gap: var(--space-4);

    @media (width >= 48rem) {
      --_min: 14rem;
    }
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .exhibitor-directory_none,
  .exhibitor-directory_empty {
    margin: 0;
    color: var(--text-2);
  }

  /* Card */
  .exhibitor-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    background-color: var(--exhibitor-card-background, var(--background));
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-main);

    &[hidden] {
      display: none;
    }
  }

  .exhibitor-card_logo {
    width: 100%;
    /* Less padding than a Logo grid tile, so logos stay legible in narrow cards. */
    padding: var(--space-3);
  }

  .exhibitor-card_content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .exhibitor-card_name {
    margin: 0;
    font-size: var(--text-large);
    line-height: var(--text-large-line-height);
    font-weight: var(--primary-bold);
  }

  .exhibitor-card_category {
    margin: 0;
    color: var(--text-2);
  }

  .exhibitor-card_footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    margin-top: auto;
  }

  .exhibitor-card_link {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 0.2em;

    @media (hover: hover) {
      &:hover {
        text-decoration-thickness: 2px;
      }
    }
  }
}

/* ./theme/price-list.css */
/*
 * Theme addition: Price list (components/price-list.php), used by the Content
 * section → Prices.
 *
 * Each row is a card on the page background with a faint border (like the
 * Icon item and Schedule panels): name + small detail on the left, the price
 * on the right in the eyebrow colour. The price wraps under the name when
 * there isn't room beside it.
 *
 * Tokens: --price-list-price (price colour), --price-list-background
 * (card, default --background).
 */

@layer components {
  .price-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .price-list_item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-4) var(--space-5);
    background-color: var(--price-list-background, var(--background));
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-main);

    p {
      margin: 0;
    }
  }

  .price-list_content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .price-list_name {
    font-weight: var(--primary-bold);
  }

  .price-list_detail {
    color: var(--text-2);
  }

  .price-list_price {
    color: var(--price-list-price, var(--eyebrow-text, currentcolor));
    font-weight: var(--primary-bold);
    white-space: nowrap;
  }

  /* Content section: the same space before it as Lumos puts before a
     paragraph, and the small note close below. */
  .content-prices {
    margin-top: var(--space-6);
  }

  .content-prices-note {
    margin-top: var(--space-4);
    color: var(--text-2);
  }
}

/* ./theme/content-image.css */
/*
 * Theme addition: Content section → Image fit → Show the whole image
 * (.layout.image-whole) and Image size → Small (.layout.image-small),
 * sections/content.php.
 *
 * Lumos's layouts lock the image column to a ratio and crop the image to fill
 * it (object-fit: cover). For plans, maps and diagrams that must not lose
 * their edges, this drops the lock: the image keeps its own shape at the
 * column's width, with a faint border and rounded corners so one on a white
 * background still stands out from the page. Not used by the card layout (the image is its background).
 */

@layer components {
  .layout.image-whole > :last-child:not(:has(> :not(.image, .video, .overlay))) {
    aspect-ratio: auto;
    align-self: start;

    > .image {
      position: static;
      height: auto;
      object-fit: contain;
      background-color: transparent;
      /* A faint border, so an image on a white background doesn't get lost. */
      border: var(--border-width) solid var(--border);
      border-radius: var(--radius-main);
    }
  }

  /* Image border → No border (e.g. an image with its own frame or shadow). */
  .layout.image-whole.image-no-border > :last-child > .image {
    border: 0;
    border-radius: 0;
  }

  /* Image size → Small (Two columns): from 64rem, where Lumos puts the
     columns side by side, the image takes a third and the text two thirds;
     both centred vertically. Image first (reversed) swaps the shares. */
  @media (width >= 64rem) {
    .layout.columns.image-small {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      align-items: center;

      &.reversed {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      }
    }
  }

  /* …and the image itself is capped (--content-image-small-width, 18rem) and
     centred in its column, at every width. */
  .layout.image-small > :last-child > .image {
    max-width: var(--content-image-small-width, 18rem);
    margin-inline: auto;
  }
  .layout.image-small > :last-child:not(:has(> :not(.image, .video, .overlay))) {
    align-items: center;
  }
}

/* ./theme/divider.css */
/*
 * Theme addition: Divider section (sections/divider.php), a horizontal line.
 *
 *   .is-faint / .is-text / .is-highlight  colour: the theme's --border, the
 *       text colour, or the eyebrow colour (--divider-highlight to override)
 *   .is-page / .is-narrow / .is-full      width: the page width, a centred
 *       --divider-narrow-width (48rem), or edge to edge (100vw, the section
 *       clips the scrollbar's few pixels, as the Grid's Full width does)
 *   data-thickness  1 / 2 / 4 px
 *   data-strength   100 / 75 / 50 / 25 % opacity
 */

@layer components {
  .divider {
    --_divider-color: var(--border);
    align-self: stretch;
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--_divider-color);

    &.is-text {
      --_divider-color: var(--text);
    }
    &.is-highlight {
      --_divider-color: var(--divider-highlight, var(--eyebrow-text, var(--text)));
    }

    &.is-narrow {
      align-self: center;
      max-width: var(--divider-narrow-width, 48rem);
    }
    &.is-full {
      align-self: center;
      width: 100vw;
      max-width: none;
    }

    &[data-thickness="2"] {
      border-top-width: 2px;
    }
    &[data-thickness="4"] {
      border-top-width: 4px;
    }

    &[data-strength="75"] {
      opacity: 0.75;
    }
    &[data-strength="50"] {
      opacity: 0.5;
    }
    &[data-strength="25"] {
      opacity: 0.25;
    }
  }

  .section.divider-section:has(.divider.is-full) {
    overflow-x: clip;
  }
}

/* ./theme/contact-panel.css */
/*
 * Theme addition: Contact section → Layout → "Form on a card, with a contact
 * panel" (sections/contact.php).
 *
 *   .contact-card-layout  the card and panel side by side from 64rem (card two
 *                         thirds, panel a third; .panel-left swaps them),
 *                         stacked below, card first.
 *   .contact-card         the intro and form on a card: --background-2 on a
 *                         plain section, --background (white on light) on a
 *                         Subtle one, so it always stands out.
 *   .contact-panel        its own colour theme (Settings → Panel colour), an
 *                         eyebrow, email / phone with icons, and an optional
 *                         note under a faint line.
 */

@layer components {
  .contact-card-layout {
    display: grid;
    gap: var(--space-6);
    width: 100%;

    @media (width >= 64rem) {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      align-items: start;

      &.panel-left {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);

        > .contact-panel {
          order: -1;
        }
      }
    }
  }

  .contact-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-7);
    background-color: var(--contact-card-background, var(--background-2));
    border-radius: var(--radius-main);

    .section[data-background="subtle"] & {
      background-color: var(--contact-card-background, var(--background));
    }

    /* Lumos fields use --background-2, the card's own colour on a plain
       section, so there they switch to --background with a faint border to
       stay visible. (On a Subtle section the card is --background and the
       fields keep their usual --background-2.) */
    .section:not([data-background="subtle"]) & .field-control {
      background-color: var(--background);
      border-color: var(--border);
    }

    > form,
    > .form_wrap {
      margin-top: var(--space-6);
    }

    /* Lumos's form spaces its parts with a large gap; on the card the button's
       own margin (--space-4, sections/contact.php) is the only space above it. */
    .form_fields {
      gap: 0;
    }

    /* Tighter field spacing on the card: --space-3 between fields. */
    .form-fieldset_fields {
      gap: var(--space-3);
    }

    /* Fields → Two per row: the message box takes the whole row. */
    .form-fieldset.columns .form-textarea {
      grid-column: 1 / -1;
    }
  }

  .contact-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border-radius: var(--radius-main);
  }

  .contact-panel_list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    a {
      color: inherit;
      font-weight: var(--primary-bold);
      text-decoration: none;

      @media (hover: hover) {
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .contact-panel_icon {
    flex: none;
    color: var(--eyebrow-text, currentcolor);
  }

  .contact-panel_note {
    margin: 0;
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--border);

    a {
      color: inherit;
      text-decoration: underline;
    }
  }
}

/* ./theme/form-validation.css */
/*
 * Theme addition: form validation and sending (components/form.php,
 * assets/js/form.js).
 *
 *   .field-error          the message under a field (added by the script)
 *   [aria-invalid]        the field itself: an error-coloured border
 *   .form_hp              the honeypot, moved off screen (not display:none,
 *                         which some bots skip)
 *   [data-state=sending]  the form dims while it's being sent
 *
 * Token: --form-error (the error colour), set per light/dark below and
 * overridable in tokens.css. Lumos has no error colour of its own.
 */

@layer components {
  :root,
  .theme-light {
    --form-error: #c4262e;
  }

  .theme-dark,
  .theme-brand {
    --form-error: #ff9b9b;
  }

  .field-error {
    display: block;
    margin-top: var(--space-1);
    color: var(--form-error);
    font-weight: var(--primary-medium);
  }

  .field-control[aria-invalid="true"] {
    border-color: var(--form-error);
  }

  .form_hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .form_wrap[data-state="sending"] .form_fields {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity var(--hover-duration) var(--hover-ease);
  }

  .form_turnstile {
    min-height: 65px;
  }

  .form_note-sent:focus {
    outline: none;
  }
}

/* ./theme/field-control.css */
/*
 * Theme addition (Lumos bug fix): form fields don't clip their text.
 *
 * Lumos puts text-style-main on its inputs, selects and textareas for the
 * font size, and its base styles give every [class*="text-style-"] element
 * text-box: trim-both cap alphabetic. Inside a form field that trim cuts the
 * line box down to cap height, and the field clips what's outside it, so
 * descenders (g, j, p, q, y) and the tops of tall letters were cut off. Fields
 * keep the full line box; their height (1lh + padding) is Lumos's, unchanged.
 */

@layer components {
  .field-control {
    text-box: normal;
  }
}

/* ./theme/logo-grid.css */
/*
 * Theme addition: Logo tile (components/logo-tile.php) and the Logo grid
 * section (sections/logo-grid.php).
 *
 *   .logo-tile       panel: the logo, contained and centred, on a tile with a
 *                    faint border. Tokens --logo-tile-ratio (default 2 / 1),
 *                    --logo-tile-background (default var(--background)).
 *   .logo-tile.fill  the image fills the tile (logos supplied with their own
 *                    background colour). Token --logo-tile-fill-ratio
 *                    (default 1120 / 424).
 *
 * Without an image, the tile shows the company name.
 *
 *   a.logo-tile      a tile with a link (sponsors with a website): the border
 *                    darkens on hover.
 *   .logo-group      Sponsors: one level's label (.logo-group_label, small
 *                    spaced capitals) above a row of tiles that wraps and
 *                    follows the section's alignment. .large / .medium set
 *                    the tile width (--logo-group-large-width 21.5rem,
 *                    --logo-group-medium-width 15rem, 2 per row on phones);
 *                    tiles are 8:3.
 *   .logo-marquee    Display → Marquee: tiles in a Lumos Marquee get a fixed
 *                    width (Lumos sizes marquee items by height, for bare
 *                    logos). Tokens --logo-marquee-tile-width (default 12rem),
 *                    --logo-marquee-fill-width (default 16rem).
 */

@layer components {
  .logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--logo-tile-ratio, 2 / 1);
    /* An aspect-ratio box grows to fit its content by default, so a tall
       logo file would stretch its tile; keep every tile to the ratio. */
    min-height: 0;
    padding: var(--space-4) var(--space-5);
    background-color: var(--logo-tile-background, var(--background));
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-main);
    color: var(--text);
    text-decoration: none;
    overflow: clip;

    > .logo-tile_image {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    &.fill {
      aspect-ratio: var(--logo-tile-fill-ratio, 1120 / 424);
      padding: 0;
      border: 0;

      > .logo-tile_image {
        object-fit: cover;
      }
    }
  }

  .logo-marquee {
    --_gap-size: var(--space-4);

    + .logo-marquee {
      margin-top: var(--space-4);
    }

    .marquee_panel > .logo-tile {
      width: var(--logo-marquee-tile-width, 12rem);

      &.fill {
        width: var(--logo-marquee-fill-width, 16rem);
      }
    }
  }

  a.logo-tile {
    transition: border-color var(--hover-duration) var(--hover-ease);

    @media (hover: hover) {
      &:hover {
        border-color: color-mix(in srgb, var(--text) 40%, transparent);
      }
    }
  }

  .logo-group {
    --logo-tile-ratio: 8 / 3;
    --_gap: var(--space-4);
    --_tile-width: var(--logo-group-medium-width, 15rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    &.large {
      --_tile-width: var(--logo-group-large-width, 21.5rem);
    }
  }

  .logo-group_label {
    margin: 0;
    font-size: var(--eyebrow-font-size, 0.8125rem);
    font-weight: var(--primary-bold);
    letter-spacing: var(--eyebrow-letter-spacing, 0.12em);
    text-transform: uppercase;
    text-align: var(--_alignment, start);
    color: var(--text-2);
  }

  .logo-group_tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--_alignment, start);
    gap: var(--_gap);

    > .logo-tile {
      flex: 0 1 var(--_tile-width);
    }
  }

  /* Phones: medium tiles two to a row. */
  .logo-group.medium .logo-group_tiles > .logo-tile {
    flex-basis: min(var(--_tile-width), calc(50% - var(--_gap) / 2));
  }

  .logo-tile_name {
    font-weight: var(--primary-bold);
    text-align: center;
  }
}

/* ./theme/section-background.css */
/*
 * Theme addition: section Background setting. Settings → Background →
 * Subtle puts data-background="subtle" on the section (lumos_section_attrs())
 * and fills it with the colour theme's second background step,
 * --background-2 (a pale grey-blue on light, a lighter navy on dark).
 *
 * Panels such as cards also use --background-2, so they blend in on a
 * Subtle section; logo tiles use --background and stand out.
 */

@layer components {
  .section[data-background="subtle"] {
    background-color: var(--background-2);
  }
}

/* ./theme/list-ticks.css */
/*
 * Theme addition: tick lists. A Rich text with class "list-ticks" (Content
 * section → Settings → List style → Ticks) shows its top-level bullet lists
 * with a circled tick (images/icons/check-circle.svg, used as a mask so the
 * colour comes from the colour theme) instead of a bullet. Numbered lists and
 * nested lists keep Lumos's markers.
 *
 * Token: --list-tick-color (default: the text colour), set per colour theme
 * in tokens.css.
 */

@layer components {
  .rich-text.list-ticks > ul {
    padding-left: 0;
    list-style: none;

    > li {
      position: relative;
      padding-left: 1.75em;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: calc((1lh - 1.25em) / 2);
        width: 1.25em;
        height: 1.25em;
        background-color: var(--list-tick-color, currentcolor);
        mask: url("../../images/icons/check-circle.svg") center / contain no-repeat;
      }
    }
  }
}

/* ./theme/testimonial-card.css */
/*
 * Theme addition: Testimonial card (components/testimonial-card.php), used
 * by the Testimonials section.
 *
 * A panel on the page background with a faint border: the quote at the top,
 * who said it pinned to the foot (photo, name, role, tag). The card fills
 * its slot's height (Slider items in a row stretch to the tallest), so cards
 * side by side always match, and keeps a minimum height so short quotes
 * still give the tall card of the design.
 *
 * Tokens: --testimonial-card-background (default var(--background)),
 * --testimonial-card-min-height (default 22rem).
 */

@layer components {
  .testimonial-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    height: 100%;
    min-height: var(--testimonial-card-min-height, 22rem);
    margin: 0;
    padding: var(--space-6);
    background-color: var(--testimonial-card-background, var(--background));
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-main);
  }

  .testimonial-card_quote {
    margin: 0;

    > p {
      margin: 0;
    }
  }

  .testimonial-card_footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
  }

  .testimonial-card_photo {
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-round);
    object-fit: cover;
  }

  /* Lumos trims each paragraph's box to its letters (text-box), so the
     space between name and role comes from the gap. */
  .testimonial-card_person {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;

    > p {
      margin: 0;
    }
  }

  .testimonial-card_name {
    font-weight: var(--primary-bold);
  }

  .testimonial-card_role {
    color: var(--text-2);
  }

  /* Small spaced capitals, pinned right. */
  .testimonial-card_tag {
    flex: none;
    margin-left: auto;
    padding: 0.4em 0.9em;
    font-size: 0.75rem;
    font-weight: var(--primary-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

/* ./theme/footer-columns.css */
/*
 * Theme addition: Footer options (components/footer.php). Lumos's footer CSS
 * is unchanged; these apply only when the footer uses the new props.
 *
 *   .has-columns     a tagline or columns: the top row becomes a grid. The
 *                    logo and tagline take the first, wider column, then one
 *                    per footer column (--_columns, set inline); stacked on
 *                    phones, logo on its own row on tablets.
 *   .footer_links.is-column  links stacked, at the main text size.
 *   .footer_meta     the right of the bottom bar: bottom links, then the
 *                    small, muted credit line.
 */

@layer components {
  .footer_wrap.has-columns .footer_top {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-8) var(--space-6);

    @media (width >= 30rem) {
      grid-template-columns: repeat(var(--_columns, 1), minmax(0, 1fr));

      > .footer_brand {
        grid-column: 1 / -1;
      }
    }

    @media (width >= 64rem) {
      grid-template-columns: minmax(0, 2fr) repeat(var(--_columns, 1), minmax(0, 1fr));

      > .footer_brand {
        grid-column: auto;
      }
    }
  }

  .footer_brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .footer_tagline {
    margin: 0;
    max-width: 36ch;
    color: var(--text-2);
  }

  .footer_column {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .footer_links.is-column {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    font-size: var(--text-main);
    list-style: none;
  }

  .footer_wrap .footer_bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
  }

  .footer_meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);

    @media (width < 48rem) {
      align-items: flex-start;
    }
  }

  .footer_bottom-links {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer_credit {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-2);

    /* Like the footer links: no underline, full text colour on hover. */
    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--hover-duration) var(--hover-ease);

      @media (hover: hover) {
        &:hover {
          color: var(--text);
        }
      }
    }
  }
}

/* ./theme/hero-details.css */
/*
 * Theme addition: the Hero's tags, stacked buttons and key-details strip
 * (sections/hero.php).
 *
 * Overlap (full-width hero): the strip is output in its own transparent
 * section right after the hero and pulled up by --hero-details-overlap, so it
 * straddles the hero's bottom edge. A spacer of the same height at the end of
 * the hero's text column keeps the text clear of it, so the space between the
 * buttons and the strip is the hero's "Space below". Everything stays inside
 * the Hero section's output, so it doesn't depend on the section that follows.
 * Without overlap (or in a contained hero) the strip simply follows the hero.
 */

@layer components {
  .section {
    --hero-details-overlap: calc(var(--space-8) * 1.5);
  }

  .hero-tags {
    margin-top: var(--space-5);
  }

  .hero-details-spacer {
    block-size: var(--hero-details-overlap);
  }

  .section.hero-details {
    position: relative;
    z-index: 1;
    /* Transparent, or Lumos's section background would cover the hero's
       bottom edge where the strip is pulled up over it. */
    background-color: transparent;

    &.overlap {
      margin-top: calc(var(--hero-details-overlap) * -1);
    }
  }

  /* Hero → Settings → Buttons → Stacked: one button under another, following
     the hero's alignment (Lumos's --_alignment). */
  .button-wrapper.is-stacked {
    flex-direction: column;
    align-items: var(--_alignment, start);
    row-gap: var(--space-4);
  }
}


/* Your own site CSS (last in the components layer, so it wins there) */
/* ./theme/site.css */
/*
 * Your own CSS for this site.
 *
 * Keep every rule inside @layer components. CSS outside a layer beats all of
 * Lumos, utilities included, so section settings that use utility classes
 * (gap-*, padding-*, radius-*…) would stop working. Inside this layer your
 * rules beat Lumos's component styles (this file loads after them) and the
 * utilities still win.
 *
 * Use Lumos's variables so your styles follow the colour themes:
 * var(--space-1…8), var(--text), var(--background-2), var(--border),
 * var(--radius-main). The full list is at the top of vendor/lumos/base.css.
 * Brand colours, fonts and spacing belong in tokens.css, not here.
 */

@layer components {
  .button_wrap {
    border-radius: var(--radius-round);
  }

  /* Details list (Plan your visit): plain bold labels, not the eyebrow's
     spaced capitals, and more room between the label and value columns. */
  .details_wrap.list {
    column-gap: var(--space-6);

    .details_label {
      text-transform: none;
      letter-spacing: normal;
    }
  }

  /* The buttons under a Details list sit further apart. */
  .details_wrap.list + .button-wrapper {
    column-gap: var(--space-5);
  }

  /* Buttons Overrides (theme/button.css) */
  .button-wrapper {
    grid-column-gap: var(--space-5);
    grid-row-gap: var(--space-4);
  }
}


/* Utilities */
/* ./vendor/lumos/utilities.css */
@layer utilities {
.flex-grow {
  flex: 1;
}

.flex-shrink {
  flex: 0 auto;
}

.flex-noshrink {
  flex: none;
}

/* Padding — all sides */
.padding-0 {
  padding: 0;
}

.padding-1 {
  padding: var(--space-1);
}

.padding-2 {
  padding: var(--space-2);
}

.padding-3 {
  padding: var(--space-3);
}

.padding-4 {
  padding: var(--space-4);
}

.padding-5 {
  padding: var(--space-5);
}

.padding-6 {
  padding: var(--space-6);
}

.padding-7 {
  padding: var(--space-7);
}

.padding-8 {
  padding: var(--space-8);
}

.padding-sitemargin {
  padding: var(--site-margin);
}

.padding-gutter {
  padding: var(--site-gutter);
}

.padding-small {
  padding: var(--section-space-small);
}

.padding-medium {
  padding: var(--section-space-medium);
}

.padding-large {
  padding: var(--section-space-large);
}

/* Padding — block (top + bottom) */
.padding-block-0 {
  padding-block: 0;
}

.padding-block-1 {
  padding-block: var(--space-1);
}

.padding-block-2 {
  padding-block: var(--space-2);
}

.padding-block-3 {
  padding-block: var(--space-3);
}

.padding-block-4 {
  padding-block: var(--space-4);
}

.padding-block-5 {
  padding-block: var(--space-5);
}

.padding-block-6 {
  padding-block: var(--space-6);
}

.padding-block-7 {
  padding-block: var(--space-7);
}

.padding-block-8 {
  padding-block: var(--space-8);
}

.padding-block-sitemargin {
  padding-block: var(--site-margin);
}

.padding-block-gutter {
  padding-block: var(--site-gutter);
}

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

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

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

/* Padding — inline (left + right) */
.padding-inline-0 {
  padding-inline: 0;
}

.padding-inline-1 {
  padding-inline: var(--space-1);
}

.padding-inline-2 {
  padding-inline: var(--space-2);
}

.padding-inline-3 {
  padding-inline: var(--space-3);
}

.padding-inline-4 {
  padding-inline: var(--space-4);
}

.padding-inline-5 {
  padding-inline: var(--space-5);
}

.padding-inline-6 {
  padding-inline: var(--space-6);
}

.padding-inline-7 {
  padding-inline: var(--space-7);
}

.padding-inline-8 {
  padding-inline: var(--space-8);
}

.padding-inline-sitemargin {
  padding-inline: var(--site-margin);
}

.padding-inline-gutter {
  padding-inline: var(--site-gutter);
}

/* Padding — top */
.padding-top-0 {
  padding-top: 0;
}

.padding-top-1 {
  padding-top: var(--space-1);
}

.padding-top-2 {
  padding-top: var(--space-2);
}

.padding-top-3 {
  padding-top: var(--space-3);
}

.padding-top-4 {
  padding-top: var(--space-4);
}

.padding-top-5 {
  padding-top: var(--space-5);
}

.padding-top-6 {
  padding-top: var(--space-6);
}

.padding-top-7 {
  padding-top: var(--space-7);
}

.padding-top-8 {
  padding-top: var(--space-8);
}

.padding-top-sitemargin {
  padding-top: var(--site-margin);
}

.padding-top-gutter {
  padding-top: var(--site-gutter);
}

.padding-top-small {
  padding-top: var(--section-space-small);
}

.padding-top-medium {
  padding-top: var(--section-space-medium);
}

.padding-top-large {
  padding-top: var(--section-space-large);
}

.padding-top-navoverlap {
  padding-top: var(--section-space-nav-overlap);
}

/* Padding — bottom */
.padding-bottom-0 {
  padding-bottom: 0;
}

.padding-bottom-1 {
  padding-bottom: var(--space-1);
}

.padding-bottom-2 {
  padding-bottom: var(--space-2);
}

.padding-bottom-3 {
  padding-bottom: var(--space-3);
}

.padding-bottom-4 {
  padding-bottom: var(--space-4);
}

.padding-bottom-5 {
  padding-bottom: var(--space-5);
}

.padding-bottom-6 {
  padding-bottom: var(--space-6);
}

.padding-bottom-7 {
  padding-bottom: var(--space-7);
}

.padding-bottom-8 {
  padding-bottom: var(--space-8);
}

.padding-bottom-sitemargin {
  padding-bottom: var(--site-margin);
}

.padding-bottom-gutter {
  padding-bottom: var(--site-gutter);
}

.padding-bottom-small {
  padding-bottom: var(--section-space-small);
}

.padding-bottom-medium {
  padding-bottom: var(--section-space-medium);
}

.padding-bottom-large {
  padding-bottom: var(--section-space-large);
}

.padding-bottom-navoverlap {
  padding-bottom: var(--section-space-nav-overlap);
}

/* Padding — left */
.padding-left-0 {
  padding-left: 0;
}

.padding-left-1 {
  padding-left: var(--space-1);
}

.padding-left-2 {
  padding-left: var(--space-2);
}

.padding-left-3 {
  padding-left: var(--space-3);
}

.padding-left-4 {
  padding-left: var(--space-4);
}

.padding-left-5 {
  padding-left: var(--space-5);
}

.padding-left-6 {
  padding-left: var(--space-6);
}

.padding-left-7 {
  padding-left: var(--space-7);
}

.padding-left-8 {
  padding-left: var(--space-8);
}

.padding-left-sitemargin {
  padding-left: var(--site-margin);
}

.padding-left-gutter {
  padding-left: var(--site-gutter);
}

/* Padding — right */
.padding-right-0 {
  padding-right: 0;
}

.padding-right-1 {
  padding-right: var(--space-1);
}

.padding-right-2 {
  padding-right: var(--space-2);
}

.padding-right-3 {
  padding-right: var(--space-3);
}

.padding-right-4 {
  padding-right: var(--space-4);
}

.padding-right-5 {
  padding-right: var(--space-5);
}

.padding-right-6 {
  padding-right: var(--space-6);
}

.padding-right-7 {
  padding-right: var(--space-7);
}

.padding-right-8 {
  padding-right: var(--space-8);
}

.padding-right-sitemargin {
  padding-right: var(--site-margin);
}

.padding-right-gutter {
  padding-right: var(--site-gutter);
}

/* Margin */
.margin-top-auto {
  margin-top: auto;
}

.margin-top-0 {
  margin-top: 0;
}

.margin-top-1 {
  margin-top: var(--space-1);
}

.margin-top-2 {
  margin-top: var(--space-2);
}

.margin-top-3 {
  margin-top: var(--space-3);
}

.margin-top-4 {
  margin-top: var(--space-4);
}

.margin-top-5 {
  margin-top: var(--space-5);
}

.margin-top-6 {
  margin-top: var(--space-6);
}

.margin-top-7 {
  margin-top: var(--space-7);
}

.margin-top-8 {
  margin-top: var(--space-8);
}

.margin-top-gutter {
  margin-top: var(--site-gutter);
}

.margin-top-text {
  margin-top: var(--_margin-top);
}

.margin-bottom-auto {
  margin-bottom: auto;
}

.margin-bottom-0 {
  margin-bottom: 0;
}

.margin-bottom-1 {
  margin-bottom: var(--space-1);
}

.margin-bottom-2 {
  margin-bottom: var(--space-2);
}

.margin-bottom-3 {
  margin-bottom: var(--space-3);
}

.margin-bottom-4 {
  margin-bottom: var(--space-4);
}

.margin-bottom-5 {
  margin-bottom: var(--space-5);
}

.margin-bottom-6 {
  margin-bottom: var(--space-6);
}

.margin-bottom-7 {
  margin-bottom: var(--space-7);
}

.margin-bottom-8 {
  margin-bottom: var(--space-8);
}

.margin-bottom-gutter {
  margin-bottom: var(--site-gutter);
}

.margin-bottom-text {
  margin-bottom: var(--_margin-bottom);
}

.margin-block-auto {
  margin-block: auto;
}

.margin-block-0 {
  margin-block: 0;
}

.margin-block-1 {
  margin-block: var(--space-1);
}

.margin-block-2 {
  margin-block: var(--space-2);
}

.margin-block-3 {
  margin-block: var(--space-3);
}

.margin-block-4 {
  margin-block: var(--space-4);
}

.margin-block-5 {
  margin-block: var(--space-5);
}

.margin-block-6 {
  margin-block: var(--space-6);
}

.margin-block-7 {
  margin-block: var(--space-7);
}

.margin-block-8 {
  margin-block: var(--space-8);
}

.margin-block-gutter {
  margin-block: var(--site-gutter);
}

.margin-block-text {
  margin-block: var(--_margin-top) var(--_margin-bottom);
}

.margin-inline-auto {
  margin-inline: auto;
}

.line-clamp-2 {
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.line-clamp-4 {
  line-clamp: 4;
  -webkit-line-clamp: 4;
}

/* Gap */
.gap-inherit {
  grid-column-gap: inherit;
  grid-row-gap: inherit;
}

.gap-0 {
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  --_gap-size: 0rem;
}

.gap-1 {
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  --_gap-size: var(--space-1);
}

.gap-2 {
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  --_gap-size: var(--space-2);
}

.gap-3 {
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  --_gap-size: var(--space-3);
}

.gap-4 {
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  --_gap-size: var(--space-4);
}

.gap-5 {
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  --_gap-size: var(--space-5);
}

.gap-6 {
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  --_gap-size: var(--space-6);
}

.gap-7 {
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  --_gap-size: var(--space-7);
}

.gap-8 {
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  --_gap-size: var(--space-8);
}

.gap-gutter {
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  --_gap-size: var(--site-gutter);
}

.gap-small {
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  --_gap-size: var(--section-space-small);
}

.gap-medium {
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  --_gap-size: var(--section-space-medium);
}

.gap-large {
  grid-column-gap: var(--_gap-size);
  grid-row-gap: var(--_gap-size);
  --_gap-size: var(--section-space-large);
}

.gap-row-inherit {
  grid-row-gap: inherit;
}

.gap-row-0 {
  grid-row-gap: 0rem;
}

.gap-row-1 {
  grid-row-gap: var(--space-1);
}

.gap-row-2 {
  grid-row-gap: var(--space-2);
}

.gap-row-3 {
  grid-row-gap: var(--space-3);
}

.gap-row-4 {
  grid-row-gap: var(--space-4);
}

.gap-row-5 {
  grid-row-gap: var(--space-5);
}

.gap-row-6 {
  grid-row-gap: var(--space-6);
}

.gap-row-7 {
  grid-row-gap: var(--space-7);
}

.gap-row-8 {
  grid-row-gap: var(--space-8);
}

.gap-row-gutter {
  grid-row-gap: var(--site-gutter);
}

/* Align & justify */
.alignment-start {
  --_alignment: start;
  text-align: start;
}

.alignment-center {
  --_alignment: center;
  text-align: center;
}

.alignment-end {
  --_alignment: end;
  text-align: end;
}

.align-self-inherit {
  align-self: inherit;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-stretch {
  align-self: stretch;
}

.align-items-stretch {
  align-items: stretch;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-inherit {
  align-items: inherit;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.justify-content-inherit {
  justify-content: inherit;
}

/* Sizing */
.width-full {
  width: 100%;
}

.width-auto {
  width: auto;
}

.min-width-auto {
  min-width: auto;
}

.height-full {
  height: 100%;
}

.height-auto {
  height: auto;
}

.cover {
  width: 100%;
  height: 100%;
}

.max-width-none {
  max-width: none;
}

.max-width-small {
  max-width: var(--max-width-small);
}

.max-width-full {
  max-width: var(--max-width-full);
}

.min-height-screen {
  min-height: 100svh;
}

/* Aspect ratio & object fit */
.ratio-auto {
  aspect-ratio: auto;
}

.ratio-1-1 {
  aspect-ratio: 1;
}

.ratio-16-9 {
  aspect-ratio: 16 / 9;
}

.ratio-3-2 {
  aspect-ratio: 3 / 2;
}

.ratio-2-3 {
  aspect-ratio: 2 / 3;
}

.ratio-2-1 {
  aspect-ratio: 2;
}

.ratio-5-4 {
  aspect-ratio: 5 / 4;
}

.ratio-4-5 {
  aspect-ratio: 4 / 5;
}

.object-fit-cover {
  object-fit: cover;
}

.object-fit-contain {
  object-fit: contain;
}

/* Typography */
.line-height-small {
  line-height: var(--line-height-small);
}

.line-height-medium {
  line-height: var(--line-height-medium);
}

.line-height-large {
  line-height: var(--line-height-large);
}

.line-height-huge {
  line-height: var(--line-height-huge);
}

.letter-spacing-tight {
  letter-spacing: var(--letter-spacing-tight);
}

.letter-spacing-normal {
  letter-spacing: var(--letter-spacing-normal);
}

.weight-regular {
  font-family: var(--primary-family);
  font-weight: var(--primary-regular);
}

.weight-medium {
  font-family: var(--primary-family);
  font-weight: var(--primary-medium);
}

.weight-bold {
  font-family: var(--primary-family);
  font-weight: var(--primary-bold);
}

.text-transform-none {
  text-transform: none;
}

.text-transform-uppercase {
  text-transform: uppercase;
}

.text-transform-capitalize {
  text-transform: capitalize;
}

.text-transform-lowercase {
  text-transform: lowercase;
}

.text-wrap-default {
  text-wrap: wrap;
}

.text-wrap-balance {
  text-wrap: balance;
}

.text-wrap-pretty {
  text-wrap: pretty;
}

.color-inherit {
  color: inherit;
}

.color-faded {
  color: color-mix(in srgb, currentColor 70%, transparent);
}

/* Background & radius */
.background-transparent {
  background-color: transparent;
}

.background-1 {
  background-color: var(--background);
}

.background-2 {
  background-color: var(--background-2);
}

.background-skeleton {
  background-color: var(--background-skeleton);
}

.radius-none {
  border-radius: 0;
}

.radius-inherit {
  border-radius: inherit;
}

.radius-small {
  border-radius: var(--radius-small);
}

.radius-main {
  border-radius: var(--radius-main);
}

.radius-round {
  border-radius: var(--radius-round);
}

/* Display */
.display-block {
  display: block;
}

.display-inline {
  display: inline;
}

.display-inline-block {
  display: inline-block;
}

.display-inline-flex {
  display: inline-flex;
}

.display-inline-grid {
  display: inline-grid;
}

.display-none {
  display: none;
}

/* Overflow */
.overflow-visible {
  overflow: visible;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-clip {
  overflow: clip;
}

.overflow-x-auto {
  overflow: auto clip;
}

.overflow-y-auto {
  overflow: clip auto;
}

.overflow-hidden-left {
  clip-path: polygon(0 0, calc(100% + 100vw) 0, calc(100% + 100vw) 100%, 0% 100%);
}

/* Position & z-index */
.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-sticky {
  position: sticky;
  top: 0;
}

.position-fixed {
  position: fixed;
}

.zindex-negative {
  z-index: -1;
  position: relative;
}

.zindex-0 {
  z-index: 0;
  position: relative;
}

.zindex-unset {
  z-index: unset;
  position: relative;
}

.zindex-1 {
  z-index: 1;
  position: relative;
}

.zindex-2 {
  z-index: 2;
  position: relative;
}

.zindex-3 {
  z-index: 3;
  position: relative;
}

/* Interaction & order */
.pointer-on {
  pointer-events: auto;
}

.pointer-off {
  pointer-events: none;
}

.order-first {
  order: -1;
}

.order-last {
  order: 1;
}

/* Accessibility */
.sr-only {
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
  border-width: 0;
  width: 1px;
  height: 1px;
  margin-inline: auto;
  padding: 0;
  position: absolute;
  inset: 0% 0% auto;
  overflow: hidden;
}

}