@layer components {
  .section {
    background: var(--_bg);
    color: var(--_text);
    padding-block: var(--section-padding-block);
    padding-inline: var(--space-gutter);
  }

  /* Surface roles map semantic tokens onto private (--_) props, assigned only from tokens. */
  .section--default {
    --_bg: var(--surface-default-bg);
    --_text: var(--surface-default-text);
    --_link: var(--surface-default-link);
    --_border: var(--surface-default-border);
    --_focus: var(--surface-default-focus);
  }

  .section--raised {
    --_bg: var(--surface-raised-bg);
    --_text: var(--surface-raised-text);
    --_link: var(--surface-raised-link);
    --_border: var(--surface-raised-border);
    --_focus: var(--surface-raised-focus);
  }

  .section--inverse {
    --_bg: var(--surface-inverse-bg);
    --_text: var(--surface-inverse-text);
    --_link: var(--surface-inverse-link);
    --_border: var(--surface-inverse-border);
    --_focus: var(--surface-inverse-focus);
  }

  .section--accent {
    --_bg: var(--surface-accent-bg);
    --_text: var(--surface-accent-text);
    --_link: var(--surface-accent-link);
    --_border: var(--surface-accent-border);
    --_focus: var(--surface-accent-focus);
  }

  /* :where() keeps plain links below component classes like .button in specificity. */
  :where(.section) a {
    color: var(--_link);
  }

  :where(.section) :focus-visible {
    outline-color: var(--_focus);
  }

  .section__inner {
    display: grid;
    gap: var(--section-gap);
  }

  /*
   * Enumerated knob: --section-decoration is "rules" or "none".
   * A style query only styles descendants of the element carrying the property,
   * so the rule hangs off the title, not the section itself.
   */
  @container style(--section-decoration: rules) {
    .section__title {
      border-block-end: var(--section-rule-width) solid var(--_border);
      padding-block-end: var(--space-stack-sm);
    }
  }
}

@layer reset, tokens, base, components, utilities;
/* Cascade layer order, inlined first in <head> because stylesheet bundle order isn't guaranteed. */
/* also inlined in <head> by Base.astro */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body {
    min-height: 100vh;
  }

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

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

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

  @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;
    }
  }
}
/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 * ------------------------------------------- */

@layer tokens {
  :root,
  [data-brand="default"] {
    --button-bg: var(--surface-accent-bg);
    --button-border-color: var(--surface-accent-border);
    --button-border-width: var(--shape-border-width-default);
    --button-font-family: var(--type-family-body);
    --button-font-size: var(--type-size-body);
    --button-font-weight: var(--type-weight-heading);
    --button-padding-block: var(--space-inset-sm);
    --button-padding-inline: var(--space-inset-md);
    --button-radius: var(--shape-radius-control);
    --button-text: var(--surface-accent-text);
    --card-bg: var(--surface-raised-bg);
    --card-border-color: var(--surface-raised-border);
    --card-border-width: var(--shape-border-width-default);
    --card-gap: var(--space-stack-sm);
    --card-padding: var(--space-inset-lg);
    --card-radius: var(--shape-radius-container);
    --card-text: var(--surface-raised-text);
    --card-text-muted: var(--surface-raised-text-muted);
    --color-accent-0: oklch(99.5% 0.0023 255);
    --color-accent-50: oklch(97% 0.0143 255);
    --color-accent-100: oklch(93.5% 0.0315 255);
    --color-accent-200: oklch(88% 0.0595 255);
    --color-accent-300: oklch(80% 0.1024 255);
    --color-accent-400: oklch(71% 0.1504 255);
    --color-accent-500: oklch(62% 0.1597 255);
    --color-accent-600: oklch(54% 0.1572 255);
    --color-accent-700: oklch(46% 0.1445 255);
    --color-accent-800: oklch(38% 0.1218 255);
    --color-accent-900: oklch(29% 0.0841 255);
    --color-accent-950: oklch(22% 0.0459 255);
    --color-neutral-0: oklch(99.5% 0.0024 250);
    --color-neutral-50: oklch(97% 0.0039 250);
    --color-neutral-100: oklch(93.5% 0.0053 250);
    --color-neutral-200: oklch(88% 0.0074 250);
    --color-neutral-300: oklch(80% 0.0096 250);
    --color-neutral-400: oklch(71% 0.0113 250);
    --color-neutral-500: oklch(62% 0.012 250);
    --color-neutral-600: oklch(54% 0.0118 250);
    --color-neutral-700: oklch(46% 0.0108 250);
    --color-neutral-800: oklch(38% 0.0091 250);
    --color-neutral-900: oklch(29% 0.0063 250);
    --color-neutral-950: oklch(22% 0.0034 250);
    /* rules | none. Read by container style queries; never key CSS on a brand name. */
    --decoration: var(--knob-decoration);
    --focus-ring: var(--color-accent-500);
    --font-family-body: system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
    --font-family-display: system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
    --font-family-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
    --font-line-height-normal: 1.55;
    --font-line-height-snug: 1.3;
    --font-line-height-tight: 1.1;
    --font-size-2xl: 1.728rem;
    --font-size-3xl: 2.0736rem;
    --font-size-4xl: 2.4883rem;
    --font-size-5xl: 2.986rem;
    --font-size-lg: 1.2rem;
    --font-size-md: 1rem;
    --font-size-sm: 0.8333rem;
    --font-size-xl: 1.44rem;
    --font-size-xs: 0.6944rem;
    --font-weight-body: 400;
    --font-weight-display: 700;
    --knob-decoration: rules;
    /* rules | none. Read by container style queries; never key CSS on a brand name. */
    --section-decoration: var(--decoration);
    --section-gap: var(--space-stack-lg);
    --section-padding-block: var(--space-section);
    --section-rule-width: var(--shape-border-width-strong);
    --shape-border-width-default: var(--size-border-thin);
    --shape-border-width-strong: var(--size-border-thick);
    --shape-radius-container: var(--size-radius-lg);
    --shape-radius-control: var(--size-radius-md);
    --shape-radius-pill: var(--size-radius-full);
    --size-border-thick: 2px;
    --size-border-thin: 1px;
    --size-radius-full: 9999px;
    --size-radius-lg: 0.5rem;
    --size-radius-md: 0.25rem;
    --size-radius-sm: 0.125rem;
    --size-space-1: 0.25rem;
    --size-space-2: 0.5rem;
    --size-space-3: 0.75rem;
    --size-space-4: 1rem;
    --size-space-5: 1.5rem;
    --size-space-6: 2rem;
    --size-space-7: 3rem;
    --size-space-8: 4rem;
    --size-space-9: 6rem;
    --size-space-10: 8rem;
    --space-gutter: var(--size-space-5);
    --space-inset-lg: var(--size-space-6);
    --space-inset-md: var(--size-space-4);
    --space-inset-sm: var(--size-space-2);
    --space-section: var(--size-space-9);
    --space-stack-lg: var(--size-space-7);
    --space-stack-md: var(--size-space-5);
    --space-stack-sm: var(--size-space-3);
    --space-stack-xl: var(--size-space-8);
    --space-stack-xs: var(--size-space-1);
    --surface-accent-bg: var(--color-accent-700);
    --surface-accent-border: var(--color-accent-500);
    --surface-accent-focus: var(--color-neutral-0);
    --surface-accent-link: var(--color-neutral-0);
    --surface-accent-text: var(--color-neutral-0);
    --surface-accent-text-muted: var(--color-accent-100);
    --surface-default-bg: var(--color-neutral-50);
    --surface-default-border: var(--color-neutral-200);
    --surface-default-focus: var(--color-accent-500);
    --surface-default-link: var(--color-accent-700);
    --surface-default-text: var(--color-neutral-900);
    --surface-default-text-muted: var(--color-neutral-600);
    --surface-inverse-bg: var(--color-neutral-900);
    --surface-inverse-border: var(--color-neutral-700);
    --surface-inverse-focus: var(--color-accent-500);
    --surface-inverse-link: var(--color-accent-300);
    --surface-inverse-text: var(--color-neutral-50);
    --surface-inverse-text-muted: var(--color-neutral-300);
    --surface-raised-bg: var(--color-neutral-0);
    --surface-raised-border: var(--color-neutral-200);
    --surface-raised-focus: var(--color-accent-500);
    --surface-raised-link: var(--color-accent-700);
    --surface-raised-text: var(--color-neutral-900);
    --surface-raised-text-muted: var(--color-neutral-600);
    --type-family-body: var(--font-family-body);
    --type-family-code: var(--font-family-mono);
    --type-family-heading: var(--font-family-display);
    --type-leading-body: var(--font-line-height-normal);
    --type-leading-heading: var(--font-line-height-tight);
    --type-leading-snug: var(--font-line-height-snug);
    --type-size-body: var(--font-size-md);
    --type-size-display: var(--font-size-5xl);
    --type-size-h1: var(--font-size-4xl);
    --type-size-h2: var(--font-size-2xl);
    --type-size-h3: var(--font-size-xl);
    --type-size-lead: var(--font-size-lg);
    --type-size-small: var(--font-size-sm);
    --type-weight-body: var(--font-weight-body);
    --type-weight-heading: var(--font-weight-display);
  }
}

@layer tokens {
  [data-brand="alt"] {
    --button-bg: var(--surface-accent-bg);
    --button-border-color: var(--surface-accent-border);
    --button-border-width: var(--shape-border-width-default);
    --button-font-family: var(--type-family-body);
    --button-font-size: var(--type-size-body);
    --button-font-weight: var(--type-weight-heading);
    --button-padding-block: var(--space-inset-sm);
    --button-padding-inline: var(--space-inset-md);
    --button-radius: var(--shape-radius-control);
    --button-text: var(--surface-accent-text);
    --card-bg: var(--surface-raised-bg);
    --card-border-color: var(--surface-raised-border);
    --card-border-width: var(--shape-border-width-default);
    --card-gap: var(--space-stack-sm);
    --card-padding: var(--space-inset-lg);
    --card-radius: var(--shape-radius-container);
    --card-text: var(--surface-raised-text);
    --card-text-muted: var(--surface-raised-text-muted);
    --color-accent-0: oklch(99.5% 0.0023 30);
    --color-accent-50: oklch(97% 0.0147 30);
    --color-accent-100: oklch(93.5% 0.0329 30);
    --color-accent-200: oklch(88% 0.0638 30);
    --color-accent-300: oklch(80% 0.1123 30);
    --color-accent-400: oklch(71% 0.1316 30);
    --color-accent-500: oklch(62% 0.1397 30);
    --color-accent-600: oklch(54% 0.1375 30);
    --color-accent-700: oklch(46% 0.1264 30);
    --color-accent-800: oklch(38% 0.1065 30);
    --color-accent-900: oklch(29% 0.0736 30);
    --color-accent-950: oklch(22% 0.0402 30);
    --color-neutral-0: oklch(99.5% 0.0035 70);
    --color-neutral-50: oklch(97% 0.0065 70);
    --color-neutral-100: oklch(93.5% 0.0089 70);
    --color-neutral-200: oklch(88% 0.0123 70);
    --color-neutral-300: oklch(80% 0.016 70);
    --color-neutral-400: oklch(71% 0.0188 70);
    --color-neutral-500: oklch(62% 0.02 70);
    --color-neutral-600: oklch(54% 0.0196 70);
    --color-neutral-700: oklch(46% 0.0181 70);
    --color-neutral-800: oklch(38% 0.0152 70);
    --color-neutral-900: oklch(29% 0.0105 70);
    --color-neutral-950: oklch(22% 0.0057 70);
    /* rules | none. Read by container style queries; never key CSS on a brand name. */
    --decoration: var(--knob-decoration);
    --focus-ring: var(--color-accent-500);
    --font-family-body: "Iowan Old Style", "Palatino Linotype", "Palatino", "Georgia", serif;
    --font-family-display: "Didot", "Bodoni MT", "Georgia", serif;
    --font-family-mono: "Courier New", "Courier", monospace;
    --font-line-height-normal: 1.55;
    --font-line-height-snug: 1.3;
    --font-line-height-tight: 1.1;
    --font-size-2xl: 2.6647rem;
    --font-size-3xl: 3.552rem;
    --font-size-4xl: 4.7348rem;
    --font-size-5xl: 6.3115rem;
    --font-size-lg: 1.4996rem;
    --font-size-md: 1.125rem;
    --font-size-sm: 0.844rem;
    --font-size-xl: 1.999rem;
    --font-size-xs: 0.6331rem;
    --font-weight-body: 400;
    --font-weight-display: 400;
    --knob-decoration: none;
    /* rules | none. Read by container style queries; never key CSS on a brand name. */
    --section-decoration: var(--decoration);
    --section-gap: var(--space-stack-lg);
    --section-padding-block: var(--space-section);
    --section-rule-width: var(--shape-border-width-strong);
    --shape-border-width-default: var(--size-border-thin);
    --shape-border-width-strong: var(--size-border-thick);
    --shape-radius-container: var(--size-radius-lg);
    --shape-radius-control: var(--size-radius-md);
    --shape-radius-pill: var(--size-radius-full);
    --size-border-thick: 4px;
    --size-border-thin: 2px;
    --size-radius-full: 9999px;
    --size-radius-lg: 2rem;
    --size-radius-md: 1rem;
    --size-radius-sm: 0.5rem;
    --size-space-1: 0.375rem;
    --size-space-2: 0.75rem;
    --size-space-3: 1.125rem;
    --size-space-4: 1.5rem;
    --size-space-5: 2.25rem;
    --size-space-6: 3rem;
    --size-space-7: 4.5rem;
    --size-space-8: 6rem;
    --size-space-9: 9rem;
    --size-space-10: 12rem;
    --space-gutter: var(--size-space-5);
    --space-inset-lg: var(--size-space-6);
    --space-inset-md: var(--size-space-4);
    --space-inset-sm: var(--size-space-2);
    --space-section: var(--size-space-9);
    --space-stack-lg: var(--size-space-7);
    --space-stack-md: var(--size-space-5);
    --space-stack-sm: var(--size-space-3);
    --space-stack-xl: var(--size-space-8);
    --space-stack-xs: var(--size-space-1);
    --surface-accent-bg: var(--color-accent-700);
    --surface-accent-border: var(--color-accent-500);
    --surface-accent-focus: var(--color-neutral-0);
    --surface-accent-link: var(--color-neutral-0);
    --surface-accent-text: var(--color-neutral-0);
    --surface-accent-text-muted: var(--color-accent-100);
    --surface-default-bg: var(--color-neutral-50);
    --surface-default-border: var(--color-neutral-200);
    --surface-default-focus: var(--color-accent-500);
    --surface-default-link: var(--color-accent-700);
    --surface-default-text: var(--color-neutral-900);
    --surface-default-text-muted: var(--color-neutral-600);
    --surface-inverse-bg: var(--color-neutral-900);
    --surface-inverse-border: var(--color-neutral-700);
    --surface-inverse-focus: var(--color-accent-500);
    --surface-inverse-link: var(--color-accent-300);
    --surface-inverse-text: var(--color-neutral-50);
    --surface-inverse-text-muted: var(--color-neutral-300);
    --surface-raised-bg: var(--color-neutral-0);
    --surface-raised-border: var(--color-neutral-200);
    --surface-raised-focus: var(--color-accent-500);
    --surface-raised-link: var(--color-accent-700);
    --surface-raised-text: var(--color-neutral-900);
    --surface-raised-text-muted: var(--color-neutral-600);
    --type-family-body: var(--font-family-body);
    --type-family-code: var(--font-family-mono);
    --type-family-heading: var(--font-family-display);
    --type-leading-body: var(--font-line-height-normal);
    --type-leading-heading: var(--font-line-height-tight);
    --type-leading-snug: var(--font-line-height-snug);
    --type-size-body: var(--font-size-md);
    --type-size-display: var(--font-size-5xl);
    --type-size-h1: var(--font-size-4xl);
    --type-size-h2: var(--font-size-2xl);
    --type-size-h3: var(--font-size-xl);
    --type-size-lead: var(--font-size-lg);
    --type-size-small: var(--font-size-sm);
    --type-weight-body: var(--font-weight-body);
    --type-weight-heading: var(--font-weight-display);
  }
}

/* generated by `pnpm tokens` */

/* Element defaults. Semantic tokens only; never a raw value, never a brand name. */
@layer base {
  body {
    background: var(--surface-default-bg);
    color: var(--surface-default-text);
    font-family: var(--type-family-body);
    font-size: var(--type-size-body);
    font-weight: var(--type-weight-body);
    line-height: var(--type-leading-body);
  }

  h1,
  h2,
  h3 {
    font-family: var(--type-family-heading);
    font-weight: var(--type-weight-heading);
    line-height: var(--type-leading-heading);
  }

  h1 {
    font-size: var(--type-size-h1);
  }

  h2 {
    font-size: var(--type-size-h2);
  }

  h3 {
    font-size: var(--type-size-h3);
  }

  a {
    color: var(--surface-default-link);
  }

  code {
    font-family: var(--type-family-code);
  }

  :focus-visible {
    outline: var(--shape-border-width-strong) solid var(--focus-ring);
    outline-offset: var(--shape-border-width-strong);
  }
}
@layer utilities {
  .skip-link {
    background: var(--surface-inverse-bg);
    color: var(--surface-inverse-text);
    left: var(--space-inset-sm);
    padding: var(--space-inset-sm) var(--space-inset-md);
    position: absolute;
    top: var(--space-inset-sm);
    z-index: 1;
  }

  /* Hidden until keyboard focus lands on it. */
  .skip-link:not(:focus) {
    clip-path: inset(50%);
    /* stylelint-disable-next-line unit-allowed-list -- visually-hidden idiom: a 1px box, not a design value */
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    /* stylelint-disable-next-line unit-allowed-list -- visually-hidden idiom: a 1px box, not a design value */
    width: 1px;
  }
}