@charset "UTF-8";
html, body {
  margin: 0;
  padding: 0;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  border-style: none;
}

/* Base font size: use --base-font-size for accessibility (e.g. .font-size-large). */
:root {
  --base-font-size: 24px;
  font-size: var(--base-font-size);
}

/* Light accessibility: larger text via CSS (no JS required). */
.font-size-large {
  --base-font-size: 28px;
}

.font-size-larger {
  --base-font-size: 32px;
}

@font-face {
  font-family: "Hyperlegible";
  src: url("../fonts/Atkinson-Hyperlegible-Regular-102.woff2") format("woff2"), url("../fonts/Atkinson-Hyperlegible-Regular-102.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Hyperlegible";
  src: url("../fonts/Atkinson-Hyperlegible-Bold-102.woff2") format("woff2"), url("../fonts/Atkinson-Hyperlegible-Bold-102.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Hyperlegible";
  src: url("../fonts/Atkinson-Hyperlegible-Bold-102.woff2") format("woff2"), url("../fonts/Atkinson-Hyperlegible-Bold-102.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Hyperlegible";
  src: url("../fonts/Atkinson-Hyperlegible-Italic-102.woff2") format("woff2"), url("../fonts/Atkinson-Hyperlegible-Italic-102.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "KS";
  src: url("../fonts/Keedy Sans OT Bold Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "KS";
  src: url("../fonts/Keedy Sans OT Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
/**
 * Design tokens & theming (light + dark)
 * Primitives: --color-text, --color-page, --color-text-inverse, --purple, --lightpurple, --green, --gray, --brown, --red.
 * Spacing: --space-* rem scale (canonical; plugins alias via --questions-spacing-* / --map-spacing-*).
 * Typography: --text-* rem scale (relative to root em from --base-font-size in _font.scss; plugins alias via --questions-font-size-* / --map-font-size-*).
 * All other tokens are derived from these. Dark: prefers-color-scheme or [data-theme="dark"]; force light: [data-theme="light"].
 *
 * Verify OKLCH: https://oklch.com or https://formatfuse.com/convert/color/hsl-to-oklch
 */
/* ==========================================================================
   Light theme (default)
   ========================================================================== */
:root {
  /* --- Primitives (only these are set per theme) --- */
  --color-text: oklch(0.22 0.01 30);
  --color-page: oklch(0.93 0.01 0);
  --color-text-inverse: oklch(0.98 0 0);
  --purple: oklch(0.52 0.25 295); /* 0.55 was 4.44:1 as text on --color-page (WCAG 1.4.3) */
  --lightpurple: oklch(0.68 0.22 295);
  --green: oklch(0.5 0.16 142.58);
  --gray: oklch(0.88 0.008 80);
  --brown: oklch(0.28 0.06 35);
  --red: oklch(0.55 0.22 25);
  /* --- Derived from primitives (defined once; recompute when primitives change) --- */
  --color-text-muted: color-mix(
    in oklch,
    var(--color-text) 58%,
    var(--color-page)
  );
  --color-bg-elevated: color-mix(
    in oklch,
    var(--color-page) 92%,
    var(--color-text-inverse)
  );
  --color-bg-muted: color-mix(
    in oklch,
    var(--color-page) 88%,
    var(--color-text)
  );
  --color-surface: var(--color-bg-elevated);
  --color-border: var(--gray);
  --color-primary-muted: color-mix(
    in oklch,
    var(--purple) 14%,
    var(--color-page)
  );
  --color-accent-muted: color-mix(
    in oklch,
    var(--green) 14%,
    var(--color-page)
  );
  --color-on-primary: var(--color-text-inverse);
  --color-on-accent: var(--color-text-inverse);
  --color-focus-ring: var(--color-text);
  --color-skip-link-bg: var(--color-text);
  --color-skip-link-text: var(--color-text-inverse);
  --color-error: var(--red);
  --color-error-bg: color-mix(in oklch, var(--red) 12%, var(--color-page));
  --color-success: var(--green);
  /* --- Table: derived from --brown and --color-page --- */
  --table-header-bg: color-mix(in oklch, var(--brown) 72%, transparent);
  --table-header-color: var(--color-text-inverse);
  --table-border-color: color-mix(
    in oklch,
    var(--brown) 35%,
    var(--color-page)
  );
  --table-row-bg: color-mix(
    in oklch,
    color-mix(in oklch, var(--color-page) 96%, var(--brown)) 30%,
    transparent
  );
  --table-row-hover-bg: color-mix(
    in oklch,
    var(--color-page) 92%,
    var(--brown)
  );
  --table-link-color: color-mix(in oklch, var(--brown) 75%, var(--color-text));
  --table-fade-gradient: linear-gradient(
    to left,
    color-mix(in oklch, var(--brown) 30%, transparent),
    transparent
  );
  /* --- Glass / frosted panels (nav pills, landing sections, scroll-spy) --- */
  --glass-blur: 8px;
  --glass-bg: color-mix(in srgb, var(--color-page) 65%, transparent);
  --glass-radius: var(--space-md);
  --table-blur: 50px;
  /* --- Spacing scale (1rem = 16px; rem-based for accessibility) --- */
  --space-2xs: 0.25rem; /*  4px — tight gaps, chip padding */
  --space-xs: 0.5rem; /*  8px — small gaps, compact padding */
  --space-sm: 0.75rem; /* 12px — inline clusters, nav groups */
  --space-md: 1rem; /* 16px — default block rhythm */
  --space-lg: 1.25rem; /* 20px — card / panel padding */
  --space-xl: 1.5rem; /* 24px — section sub-gaps */
  --space-2xl: 2rem; /* 32px — stacked sections */
  --space-3xl: 4rem; /* 64px — intro / section separation */
  --space-4xl: 5rem; /* 80px — large content blocks */
  --space-main: 8rem; /* 128px — main offset below site header */
  /* Horizontal inset from viewport — mobile matches .mh2 (--space-xs); desktop matches .mh4-ns */
  --site-gutter-x: var(--space-xs);
  /* --- Typography scale (rem; scales with --base-font-size on :root in _font.scss) --- */
  --text-3xs: 0.5rem; /* 12px @ 24px root — fine print utilities */
  --text-2xs: 0.58rem; /* secondary nav labels */
  --text-xs: 0.75rem; /* captions, settings headings */
  --text-sm: 0.875rem; /* compact UI, nav bar */
  --text-md: 0.9rem; /* table headers, slightly larger small text */
  --text-base: 1rem; /* default component text */
  --text-lg: 1.125rem; /* emphasis, map/questions large */
  --text-xl: 1.25rem; /* intro, lead paragraphs */
  --text-2xl: 1.45rem; /* mobile wordmark */
  --text-3xl: 1.5rem; /* section headings */
  --text-display: 4.5rem; /* home wordmark */
}

/* --- Spacing: tablet+ (matches former questions plugin breakpoints) --- */
@media (min-width: 768px) {
  :root {
    --space-lg: 1.5rem; /* 24px */
    --space-xl: 2rem; /* 32px */
    --space-2xl: 2.5rem; /* 40px */
  }
}
@media (min-width: 1024px) {
  :root {
    --space-xl: 2.5rem; /* 40px */
    --space-2xl: 3rem; /* 48px */
  }
}
/* ==========================================================================
   Dark theme: system preference
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --color-text: oklch(0.92 0.01 80);
    --color-page: oklch(0.18 0.02 280);
    --color-text-inverse: oklch(0.22 0.01 30);
    --purple: oklch(0.65 0.22 295);
    --lightpurple: oklch(0.72 0.18 295);
    --green: oklch(0.62 0.14 145); /* ≥4.5:1 on --color-page (WCAG 1.4.3) */
    --gray: oklch(0.3 0.02 280);
    --brown: oklch(0.62 0.06 55);
    --red: oklch(0.65 0.2 25);
  }
}
/* ==========================================================================
   Dark theme: explicit [data-theme="dark"]
   ========================================================================== */
[data-theme=dark] {
  --color-text: oklch(0.92 0.01 80);
  --color-page: oklch(0.18 0.02 280);
  --color-text-inverse: oklch(0.22 0.01 30);
  --purple: oklch(0.65 0.22 295);
  --lightpurple: oklch(0.72 0.18 295);
  --green: oklch(0.62 0.14 145); /* ≥4.5:1 on --color-page (WCAG 1.4.3) */
  --gray: oklch(0.3 0.02 280);
  --brown: oklch(0.62 0.06 55);
  --red: oklch(0.65 0.2 25);
}

/* ==========================================================================
   Light theme: explicit [data-theme="light"]
   ========================================================================== */
[data-theme=light] {
  --color-text: oklch(0.22 0.01 30);
  --color-page: oklch(0.93 0.01 0);
  --color-text-inverse: oklch(0.98 0 0);
  --purple: oklch(0.52 0.25 295); /* 0.55 was 4.44:1 as text on --color-page (WCAG 1.4.3) */
  --lightpurple: oklch(0.68 0.22 295);
  --green: oklch(0.5 0.16 142.58);
  --gray: oklch(0.88 0.008 80);
  --brown: oklch(0.28 0.06 35);
  --red: oklch(0.55 0.22 25);
}

/**
 * Utility Classes
 * Site design-system utilities (colors, typography, effects)
 * 
 * @package   Site Utilities
 * @author    DS
 * @version   1.0.0
 */
/**
 * Table of Contents:
 * 1. CSS Custom Properties (Variables)
 * 2. Breakpoints
 * 3. Colors
 * 4. Typography
 * 5. Layout & Positioning
 * 6. Effects & Animations
 * 7. Object Fit
 * 8. States & Interactions
 */
/*****************************************************************************
 * CSS Custom Properties
 * ⚙️
 *****************************************************************************/
/* Color tokens come from _theme.scss. Only non-color vars here. */
:root {
  --hl: oklch(58.24% 0.3113 306); /* Display P3 fallback */
  --f-mono: "SF Mono", SFMono-Regular, "Cascadia Code", "Source Code Pro", "Fira Code", Menlo, Monaco, monospace;
  --transition-fast: 0.2s;
  --transition-medium: 0.3s;
  --transition-slow: 0.5s;
  --transition-debug: 10s;
}

/*****************************************************************************
 * Breakpoints
 * 📱
 *****************************************************************************/
/**
 * Breakpoint Variables
 * Core breakpoint values for responsive design
 * @type SCSS Variables
 */
/**
 * Breakpoint Map
 * Maps breakpoint names to their media query configurations
 * @type SCSS Map
 * @prop {String} s - Small screens only (max-width: 480px)
 * @prop {String} ns - Not-small screens (min-width: 480px)
 * @prop {String} m - Medium screens only (min-width: 960px) and (max-width: 1440px)
 * @prop {String} l - Large screens (min-width: 1440px)
 * @prop {String} xl - Extra-large screens (min-width: 1920px)
 */
/**
 * Breakpoint Mixin
 * Generates media queries for responsive styles using predefined ranges
 * 
 * @mixin breakpoint
 * @param {String} $breakpoint - Breakpoint name (s, ns, m, l, xl)
 * 
 * @example scss
 *   .my-class {
 *     @include breakpoint("m") {
 *       display: flex; // Only applies to medium screens
 *     }
 *   }
 * 
 * @example scss
 *   .desktop-only {
 *     @include breakpoint("l") {
 *       display: block; // Only applies to large screens and up
 *     }
 *   }
 */
/*****************************************************************************
 * Colors
 * 🎨
 *****************************************************************************/
/**
 * Base Colors
 * Core color utilities
 * @type Utility Classes
 */
/* Theme-aware color utilities */
.c {
  color: var(--color-text);
}

.bg {
  background-color: var(--color-page);
}

.c-muted {
  color: var(--color-text-muted);
}

.c-gray {
  color: var(--gray);
}

.bg-gray {
  background-color: var(--gray);
}

.bg-elevated {
  background-color: var(--color-bg-elevated);
}

.bg-surface {
  background-color: var(--color-surface);
}

.cc {
  color: currentColor;
}

/**
 * Highlight Colors
 * Accent and emphasis color utilities
 * @type Utility Classes
 */
.c-hl {
  color: var(--hl) !important;
}

.bg-hl {
  background-color: var(--hl);
}

.c-hl-muted {
  color: hsla(var(--hl), 0.75) !important;
}

/**
 * Special Colors
 */
.transparent {
  color: transparent;
}

.bg-inherit {
  background-color: inherit;
}

/**
 * Gradients
 */
.bg-gg {
  background: linear-gradient(to bottom, var(--color-page), var(--color-bg-muted));
}

/**
 * Legacy color class names (formerly Tachyons) mapped to theme tokens.
 */
.black,
.near-black,
.dark-gray {
  color: var(--color-text) !important;
}

.mid-gray,
.gray,
.silver,
.light-silver,
.moon-gray,
.light-gray,
.near-white {
  color: var(--color-text-muted) !important;
}

.white {
  color: var(--color-text-inverse) !important;
}

.bg-black,
.bg-near-black,
.bg-dark-gray,
.bg-mid-gray,
.bg-gray,
.bg-silver,
.bg-light-silver,
.bg-moon-gray,
.bg-light-gray,
.bg-near-white,
.bg-white {
  background-color: var(--color-bg-elevated) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.green,
.dark-green {
  color: var(--green) !important;
}

.light-green {
  color: var(--color-accent-muted) !important;
}

.bg-green,
.bg-dark-green {
  background-color: var(--green) !important;
}

.b--black,
.b--near-black,
.b--dark-gray {
  border-color: var(--color-border) !important;
}

.b--white,
.b--near-white {
  border-color: var(--gray) !important;
}

/*****************************************************************************
 * Typography
 * 🤏🏽🤏🏽🤏🏽
 *****************************************************************************/
/**
 * Font Families
 * Typography family utilities
 * @type Utility Classes
 */
.type-m {
  font-family: var(--f-mono);
}

/**
 * Text Transform
 */
.ttu,
.uc {
  text-transform: uppercase;
}

/**
 * Font Sizes
 */
.tt-sm {
  font-size: 0.95em;
}

.f7 {
  font-size: var(--text-3xs);
}
@media screen and (max-width: 30em) {
  .f7-sm {
    font-size: var(--text-3xs);
  }
}

.f--1 {
  font-size: 0.9em;
}

.sub {
  vertical-align: sub;
  font-size: 0.75em;
}

/**
 * Line Heights
 */
.lh-copy {
  line-height: 1.26;
}

.lh-same {
  line-height: 1rem;
}

.lh-0 {
  line-height: 0;
}

.lh-1 {
  line-height: 1.1;
}

.lh-2 {
  line-height: 1.2;
}

.lh-3 {
  line-height: 1.3;
}

.lh-4 {
  line-height: 1.4;
}

/**
 * Text Indentation
 */
.text-indent-1 {
  text-indent: 1rem;
}

.text-indent-2 {
  text-indent: 2rem;
}

.outdent {
  text-indent: -2ch;
  margin-left: 2ch;
}

/**
 * Word Breaking & Spacing
 */
.wb-w {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.wb-a {
  word-break: break-all;
}

.wb-ka {
  word-break: keep-all;
}

.nw {
  white-space: nowrap;
}

.pre {
  white-space: pre-wrap;
}

/**
 * Text Decoration
 */
.u {
  text-decoration: none;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

/**
 * Text Effects
 */
.ts-1 {
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
}

.text-outline {
  color: transparent;
  -webkit-text-stroke: 0.9px black;
}

/**
 * Flexible Typography
 * Utility for setting font size using CSS custom properties
 * Allows for dynamic font sizing through the --s variable
 * 
 * @example
 * <span class="f-t" style="--s: 1.5em">Larger text</span>
 */
.f-t {
  --s: 1em; /* Default value for width */
  font-size: var(--s);
}

/*****************************************************************************
 * Layout & Positioning
 * ↕️↔️
 *****************************************************************************/
/**
 * Position Sticky
 * Sticky positioning with responsive variants
 * 
 * @example
 * <div class="sticky">Sticks to viewport</div>
 * <div class="sticky-ns">Sticks on larger screens</div>
 * @type Utility Classes
 */
.sticky {
  position: -webkit-sticky;
  position: sticky;
}
@media screen and (max-width: 30em) {
  .sticky-sm {
    position: sticky;
  }
}
@media screen and (min-width: 30em) {
  .sticky-ns {
    position: sticky;
  }
}
@media screen and (min-width: 60em) and (max-width: 90em) {
  .sticky-m {
    position: sticky;
  }
}
@media screen and (min-width: 90em) {
  .sticky-l {
    position: sticky;
  }
}

/**
 * Z-index
 */
.z-back {
  z-index: -999;
}

.z-max-1 {
  z-index: 2147483646;
}

/**
 * Fine Position Adjustments
 * Allows for precise positioning adjustments using CSS custom properties
 * @example
 * <span class="push" style="--push-y: -1px">©</span>
 * <div class="push" style="--push-x: 2px">→</div>
 */
.push-t {
  --push-x: 0px; /* Default value for translateX */
  --push-y: 0px; /* Default value for translateY */
  transform: translate(var(--push-x), var(--push-y));
}

/**
 * Aspect Ratio Container
 */
[style*="--aspect-ratio"] {
  position: relative;
}
[style*="--aspect-ratio"]::before {
  content: "";
  display: block;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[style*="--aspect-ratio"] > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/**
 * Scroll Snap
 * Utilities for scroll snapping behavior
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
 */
/* Container */
.ss-y {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100dvh;
}

.ss-x {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  width: 100vw;
}

/* Optional snap instead of mandatory */
.ss-y-proximity {
  scroll-snap-type: y proximity;
  overflow-y: scroll;
}

.ss-x-proximity {
  scroll-snap-type: x proximity;
  overflow-x: scroll;
}

/* Child elements */
.ss-start {
  scroll-snap-align: start;
}

.ss-center {
  scroll-snap-align: center;
}

.ss-end {
  scroll-snap-align: end;
}

/* Stop points */
.ss-stop {
  scroll-snap-stop: always;
}

/**
 * Grid Utilities
 * Common grid patterns
 */
.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.gap-3 {
  gap: 3rem;
}

/**
 * Container Queries
 * Modern container query utilities
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries
 */
.container {
  container-type: inline-size;
}

@container (min-width: $bp-ns) {
  .cols-2\@sm {
    columns: 2;
  }
}
/**
 * Backdrop Filter
 * Modern glass-like effects
 */
.glass {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.5);
}

.glass-dark {
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.5);
}

/**
 * Writing Modes
 * For vertical text and other writing directions
 */
.vertical-rl {
  writing-mode: vertical-rl;
}

.vertical-lr {
  writing-mode: vertical-lr;
}

/**
 * Scrollbar Customization
 * Hide scrollbars while maintaining functionality
 */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/**
 * Scroll Prevention
 */
.noscroll {
  height: 100%;
  overflow: hidden;
}

/**
 * Smooth Scroll
 * Enable smooth scrolling on containers
 */
.scroll-smooth {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/**
 * Clamp Text
 * Truncate text with ellipsis after n lines
 */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/**
 * Aspect Ratios
 * Common aspect ratio utilities
 */
.aspect-square {
  aspect-ratio: 1/1;
}

.aspect-video {
  aspect-ratio: 16/9;
}

.aspect-portrait {
  aspect-ratio: 3/4;
}

/**
 * Frosted panel — shared semi-transparent surface (landing sections, etc.).
 * Extend this instead of repeating the color/radius/blur stack.
 */
body.landing-snap .landing-chunk .block {
  background: var(--glass-bg);
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

/**
 * Nav pill: shared green pill appearance for nav links and pill buttons.
 * Extend this instead of repeating the color/border/radius/blur stack.
 * Active state is separate so callers can apply it to :hover and .is-active independently.
 */
nav .nav-pages a {
  color: var(--green);
  background: color-mix(in oklch, var(--color-bg-elevated) 80%, transparent);
  border: 2px solid var(--green);
  border-radius: 9999px;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

/**
 * Focus Styles
 * Better focus indicators for accessibility
 */
.focus-ring:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

/**
 * Visibility
 */
/**
 * Print Styles
 * Hide elements when printing
 */
@media print {
  .no-print {
    display: none !important;
  }
}
/*****************************************************************************
 * Effects & Animations
 * 💨
 *****************************************************************************/
/**
 * Transitions
 */
.fade-in {
  opacity: 1;
  transition: opacity 1s ease-out;
}
.fade-in.htmx-settling {
  opacity: 0;
}

/**
 * Mix Blend Modes
 */
.mxb-m {
  mix-blend-mode: multiply;
}

.mxb-d {
  mix-blend-mode: difference;
}

.mxb-s {
  mix-blend-mode: screen;
}

.mxb-hl {
  mix-blend-mode: hard-light;
}

/**
 * Shadows
 */
.shadow {
  box-shadow: 2px 2px 9px 0 rgba(0, 0, 0, 0.1);
}

.shadow-6 {
  box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.6);
}

.shadow-7 {
  box-shadow: 0px 0px 60px 10px rgba(0, 0, 0, 0.1);
}

/*****************************************************************************
 * Object Fit
 * 🖼️
 *****************************************************************************/
/**
 * Object Position
 * Utilities for controlling how replaced elements are positioned within their containers
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
 */
/* Base positioning */
.obf-center {
  object-position: center center;
}

.obf-top {
  object-position: top center;
}

.obf-right {
  object-position: center right;
}

.obf-bottom {
  object-position: bottom center;
}

.obf-left {
  object-position: center left;
}

/* Not-small screens (30em+) */
@media screen and (min-width: 30em) {
  .obf-center-ns {
    object-position: center center;
  }
  .obf-top-ns {
    object-position: top center;
  }
  .obf-right-ns {
    object-position: center right;
  }
  .obf-bottom-ns {
    object-position: bottom center;
  }
  .obf-left-ns {
    object-position: center left;
  }
}
/* Medium screens (60em+) */
@media screen and (min-width: 60em) and (max-width: 90em) {
  .obf-center-m {
    object-position: center center;
  }
  .obf-top-m {
    object-position: top center;
  }
  .obf-right-m {
    object-position: center right;
  }
  .obf-bottom-m {
    object-position: bottom center;
  }
  .obf-left-m {
    object-position: center left;
  }
}
/* Large screens (90em+) */
@media screen and (min-width: 90em) {
  .obf-center-l {
    object-position: center center;
  }
  .obf-top-l {
    object-position: top center;
  }
  .obf-right-l {
    object-position: center right;
  }
  .obf-bottom-l {
    object-position: bottom center;
  }
  .obf-left-l {
    object-position: center left;
  }
}
/**
 * Object Fit
 * Utilities for controlling how replaced elements are sized within their containers
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
 */
/* Base fit */
.obf-fill {
  object-fit: fill;
}

.obf-contain {
  object-fit: contain;
}

.obf-cover {
  object-fit: cover;
}

.obf-none {
  object-fit: none;
}

.obf-scale-down {
  object-fit: scale-down;
}

/* Not-small screens (30em+) */
@media screen and (min-width: 30em) {
  .obf-fill-ns {
    object-fit: fill;
  }
  .obf-contain-ns {
    object-fit: contain;
  }
  .obf-cover-ns {
    object-fit: cover;
  }
  .obf-none-ns {
    object-fit: none;
  }
  .obf-scale-down-ns {
    object-fit: scale-down;
  }
}
/* Medium screens (60em+) */
@media screen and (min-width: 60em) and (max-width: 90em) {
  .obf-fill-m {
    object-fit: fill;
  }
  .obf-contain-m {
    object-fit: contain;
  }
  .obf-cover-m {
    object-fit: cover;
  }
  .obf-none-m {
    object-fit: none;
  }
  .obf-scale-down-m {
    object-fit: scale-down;
  }
}
/* Large screens (90em+) */
@media screen and (min-width: 90em) {
  .obf-fill-l {
    object-fit: fill;
  }
  .obf-contain-l {
    object-fit: contain;
  }
  .obf-cover-l {
    object-fit: cover;
  }
  .obf-none-l {
    object-fit: none;
  }
  .obf-scale-down-l {
    object-fit: scale-down;
  }
}
/*****************************************************************************
 * States & Interactions
 * 🔘
 *****************************************************************************/
/**
 * Cursor States
 */
.cursor-zi {
  cursor: zoom-in;
}

.cursor-pointer {
  cursor: pointer;
}

.no-pointer-events {
  pointer-events: none;
}

/**
 * Drag & Selection Prevention
 * Prevents users from dragging elements or selecting text
 * Useful for images and UI elements that shouldn't be interactive
 */
.no-select {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/**
 * Disabled State
 */
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/**
 * Visibility
 */
.hide {
  visibility: hidden;
}
@media screen and (max-width: 30em) {
  .hide-sm {
    visibility: hidden;
  }
}
@media screen and (min-width: 30em) {
  .hide-ns {
    visibility: hidden;
  }
}
@media screen and (min-width: 60em) and (max-width: 90em) {
  .hide-m {
    visibility: hidden;
  }
}
@media screen and (min-width: 90em) {
  .hide-l {
    visibility: hidden;
  }
}

.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Small Screen Utilities */
@media screen and (max-width: 30em) {
  .dn-sm {
    display: none;
  }
}
/**
 * Dimensions
 * Allows for setting width and height using CSS custom properties
 * @example
 * <div class="dims-t" style="--w: 200px; --h: 100px">
 * <div class="dims-t" style="--w: 50%">
 */
.dims-t {
  --w: auto; /* Default value for width */
  --h: auto; /* Default value for height */
  width: var(--w);
  height: var(--h);
}

/**
 * Layout utilities used in markup (formerly Tachyons class names).
 * Values map to design tokens from _theme.scss where possible.
 * Responsive -ns variants use the site breakpoint("ns") mixin (min-width: 30em).
 */
/* --- Display --- */
.dn {
  display: none;
}

.db {
  display: block;
}

.dib {
  display: inline-block;
}

.flex {
  display: flex;
}

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

.flex-wrap {
  flex-wrap: wrap;
}

@media screen and (min-width: 30em) {
  .dn-ns {
    display: none;
  }
  .db-ns {
    display: block;
  }
  .flex-row-ns {
    flex-direction: row;
  }
}
/* --- Flex alignment --- */
.items-center {
  align-items: center;
}

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

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

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

@media screen and (min-width: 30em) {
  .items-start-ns {
    align-items: flex-start;
  }
  .justify-between-ns {
    justify-content: space-between;
  }
}
/* --- Position --- */
.relative {
  position: relative;
}

/* --- Width & height --- */
.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.w4 {
  width: 8rem;
}

.h4 {
  height: 8rem;
}

.mw7 {
  max-width: 48rem;
}

.mw8 {
  max-width: 64rem;
}

@media screen and (min-width: 30em) {
  .w-25-ns {
    width: 25%;
  }
  .w-75-ns {
    width: 75%;
  }
}
/* --- Spacing: margin --- */
.mt0 {
  margin-top: 0;
}

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

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

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

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

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

.mh2 {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}

.mh4 {
  margin-left: var(--space-2xl);
  margin-right: var(--space-2xl);
}

.ml4 {
  margin-left: var(--space-2xl);
}

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

@media screen and (min-width: 30em) {
  .mh4-ns {
    margin-left: var(--space-2xl);
    margin-right: var(--space-2xl);
  }
  .mv0-ns {
    margin-top: 0;
    margin-bottom: 0;
  }
}
/* --- Spacing: padding --- */
.pa2 {
  padding: var(--space-xs);
}

.pa3 {
  padding: var(--space-md);
}

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

.pv2 {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

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

.ph2 {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}

.ph3 {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.pl0 {
  padding-left: 0;
}

@media screen and (min-width: 30em) {
  .pa4-ns {
    padding: var(--space-2xl);
  }
  .pv4-ns {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }
  .ph3-ns {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  .ph4-ns {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
  }
  .pl3-ns {
    padding-left: var(--space-md);
  }
}
/* --- Typography --- */
.f6 {
  font-size: var(--text-sm);
}

.lh-title {
  line-height: 1.25;
}

.tc {
  text-align: center;
}

.list {
  list-style-type: none;
}

/* Lining + tabular figures — stable counters/timers (no width jitter on update) */
.nums-tabular {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Fixed-width number column; set --nums-ch to max digit count (e.g. 4 for 2000) */
.nums-slot {
  display: inline-block;
  min-width: var(--nums-ch, 4ch);
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

@media screen and (min-width: 30em) {
  .f3-ns {
    font-size: var(--text-3xl);
  }
}
.link {
  text-decoration: none;
}

.link,
.link:active,
.link:focus,
.link:hover,
.link:link,
.link:visited {
  transition: color 0.15s ease-in;
}

.link:focus {
  outline: 1px dotted currentColor;
}

/* --- Border radius --- */
.br-100 {
  border-radius: 100%;
}

#mobile-main button {
  border-radius: 9999px;
  border: 2px solid;
  padding: var(--space-xs) var(--space-md);
  color: var(--lightpurple);
  text-decoration: none;
  transition: all 0.5s ease;
  text-align: center;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}
#mobile-main #mobile-btn {
  margin-bottom: var(--space-xs);
  width: 100%;
}
#mobile-main #mobile-close-btn {
  margin-bottom: 0;
  background-color: var(--lightpurple);
  border-color: var(--lightpurple);
  width: auto;
  min-width: 120px;
  color: var(--color-on-primary);
}

#mobile-btn span.mobile-btn-text::before {
  display: inline-block;
  content: "⚬";
  margin-right: 0.2em;
  transform: translateY(0.1em);
}

#mobile-close-btn span.mobile-btn-text::before {
  display: inline-block;
  content: "×";
  margin-right: 0.2em;
  transform: translateY(0em);
}

.nav-is-open #mobile-btn span.mobile-btn-text::before {
  content: "×";
  transform: translateY(0em);
}

#mobile-nav {
  display: none;
  background-color: var(--color-page);
  transition: opacity 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  padding-inline: var(--site-gutter-x);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 10000;
}
#mobile-nav.show {
  display: block !important;
  opacity: 1 !important;
}
#mobile-nav .mobile-nav__close-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
#mobile-nav li {
  width: 100%;
}
#mobile-nav li a {
  display: block;
}

.nav-is-open #mobile-nav {
  display: block !important;
  opacity: 1 !important;
}

#contact-info {
  transition: opacity 0.3s ease;
}
#contact-info.show {
  display: flex !important;
  opacity: 1 !important;
}

html.mobile-nav-open,
body.mobile-nav-open {
  overflow: hidden;
}

body.mobile-nav-open {
  position: fixed;
  width: 100%;
  top: var(--scroll-lock-top, 0);
}

/**
 * WCAG Accessibility Styles
 * A collection of styles to ensure WCAG 2.1 compliance
 * 
 * @package   Site Accessibility
 * @version   1.0.0
 */
:root {
  --focus-outline-color: var(--color-focus-ring);
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --skip-link-bg: var(--color-skip-link-bg);
  --skip-link-color: var(--color-skip-link-text);
  --contrast-ratio-text: 4.5;
  --contrast-ratio-large: 3;
  --contrast-ratio-aaa-text: 7;
  --contrast-ratio-aaa-large: 4.5;
  --min-touch-target: 44px;
  --reduced-motion-duration: 0.01ms;
  --focus-target-spacing: var(--space-xs);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible, .skip-to-main-content:focus-visible, nav .nav-pages a:focus-visible, .touch-target:focus-visible, button:focus-visible,
[role=button]:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}
@media (forced-colors: active) {
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible, .skip-to-main-content:focus-visible, nav .nav-pages a:focus-visible, .touch-target:focus-visible, button:focus-visible,
  [role=button]:focus-visible {
    outline-color: CanvasText;
  }
}

nav .nav-pages a, .touch-target, button,
[role=button],
input[type=submit],
input[type=button] {
  cursor: pointer;
  min-height: var(--min-touch-target);
  min-width: var(--min-touch-target);
  padding: var(--space-xs);
}
nav .nav-pages a[disabled], [disabled].touch-target, button[disabled],
[disabled][role=button],
input[disabled][type=submit],
input[disabled][type=button] {
  cursor: not-allowed;
  opacity: 0.6;
}

.skip-to-main-content {
  position: absolute;
  top: -100%;
  left: 6px;
  background: var(--color-skip-link-bg);
  color: var(--color-skip-link-text);
  padding: var(--space-xs);
  text-decoration: none;
  z-index: 9999;
  border-radius: 4px;
}
.skip-to-main-content:focus, .skip-to-main-content:focus-visible {
  top: 6px;
}

.sr-only, .sr-only-focusable, .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.uniform__potty {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
}

.sr-only:focus, .sr-only-focusable:focus, .visually-hidden:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: inherit !important;
}

address.not-italic {
  font-style: normal;
}

input::placeholder,
select::placeholder,
textarea::placeholder {
  color: rgba(0, 0, 0, 0.6);
  opacity: 1;
}

@media (forced-colors: active) {
  :root {
    --focus-outline-color: CanvasText;
  }
  img {
    forced-color-adjust: none;
  }
  svg {
    forced-color-adjust: auto;
  }
}
.high-contrast, .force-contrast {
  --color-text: oklch(0 0 0);
  --color-bg: oklch(1 0 0);
  color: var(--color-text);
  background-color: var(--color-page);
}
.high-contrast img, .force-contrast img {
  filter: grayscale(100%) contrast(120%);
}

[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.6;
}

[aria-busy=true] {
  cursor: progress;
}

.error,
[aria-invalid=true] {
  border-color: var(--color-error);
}
.error:focus,
[aria-invalid=true]:focus {
  outline-color: var(--color-error);
}

.required::after,
[aria-required=true]::after {
  content: "*";
  color: var(--color-error);
  margin-left: 0.25em;
}

/*****************************************************************************
 * Accessibility Utilities
 * Utility classes for enhancing accessibility
 *****************************************************************************/
.sr-only-focusable:focus, .sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.reduce-motion {
  animation-duration: var(--reduced-motion-duration) !important;
  transition-duration: var(--reduced-motion-duration) !important;
}

.focus-ring-inset:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: calc(var(--focus-outline-offset) * -1);
}

.focus-ring-large:focus-visible {
  outline-width: calc(var(--focus-outline-width) * 2);
}

.live-region[aria-live] {
  min-height: 1em;
}

#mobile-nav nav .nav-secondary__link:focus,
#mobile-nav nav .nav-settings__trigger:focus, nav.site-nav .nav-secondary__link:focus,
nav.site-nav .nav-settings__trigger:focus, nav .nav-pages a:focus, a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}
#mobile-nav nav .nav-secondary__link:focus:not(:focus-visible),
#mobile-nav nav .nav-settings__trigger:focus:not(:focus-visible), nav.site-nav .nav-secondary__link:focus:not(:focus-visible),
nav.site-nav .nav-settings__trigger:focus:not(:focus-visible), a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}
#mobile-nav nav .nav-secondary__link:focus-visible,
#mobile-nav nav .nav-settings__trigger:focus-visible, nav.site-nav .nav-secondary__link:focus-visible,
nav.site-nav .nav-settings__trigger:focus-visible, nav .nav-pages a:focus-visible, a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

@media (forced-colors: active) {
  a:focus,
  button:focus {
    outline: var(--focus-outline-width) solid CanvasText;
  }
  img,
  svg {
    forced-color-adjust: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: var(--reduced-motion-duration) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--reduced-motion-duration) !important;
    scroll-behavior: auto !important;
  }
  .skip-to-main-content {
    transition: none;
  }
}
html[data-reduced-motion=reduce] * {
  animation-duration: var(--reduced-motion-duration) !important;
  animation-iteration-count: 1 !important;
  transition-duration: var(--reduced-motion-duration) !important;
  scroll-behavior: auto !important;
}
html[data-reduced-motion=reduce] .skip-to-main-content {
  transition: none;
}

/**
 * Settings panel (nav submenu).
 * Trigger pill styling: nav.site-nav .nav-settings__trigger in _nav.scss
 */
.nav-settings {
  position: relative;
  flex: 0 0 auto;
}

.nav-settings__trigger {
  /* appearance: _nav.scss */
  font: inherit;
}

.nav-settings__panel {
  position: absolute;
  z-index: 10001;
  left: 0;
  right: auto;
  top: calc(100% + var(--space-2xs));
  width: max-content;
  max-width: min(18rem, 92vw);
  padding: var(--space-sm) var(--space-sm);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--space-xs);
  box-shadow: 0 var(--space-2xs) var(--space-lg) color-mix(in oklch, var(--color-text) 12%, transparent);
}
.nav-settings__panel[hidden] {
  display: none !important;
}

.nav-settings__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-2xs) 0;
}
.nav-settings__section:first-child {
  padding-top: 0;
}
.nav-settings__section:last-child {
  padding-bottom: 0;
}

.nav-settings__title {
  font-size: var(--text-xs);
  font-weight: bold;
  font-family: var(--font-ks);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.nav-settings__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.nav-settings__label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  line-height: 1.3;
  cursor: pointer;
  color: var(--color-text);
}
.nav-settings__label input {
  /* 24px minimum target size (WCAG 2.5.8); native size was 13px */
  width: 1.5rem;
  height: 1.5rem;
  min-height: auto;
  min-width: auto;
  margin: 0;
  accent-color: var(--green);
}
.nav-settings__label span {
  flex: 1;
}

#mobile-nav .nav-settings {
  position: relative;
}

#mobile-nav .nav-settings__panel {
  left: 0;
  top: calc(100% + var(--space-2xs));
}

/**
 * Site navigation
 * - nav .nav-pages: green primary pills (desktop + mobile drawer)
 * - nav.site-nav: desktop layout + brown utility groups
 * - body.header-compact: smaller tokens (layout in _site-header.scss)
 */
#mobile-nav nav .nav-secondary__link,
#mobile-nav nav .nav-settings__trigger, nav.site-nav .nav-secondary__link,
nav.site-nav .nav-settings__trigger {
  color: var(--brown);
  background: color-mix(in oklch, var(--color-bg-elevated) 80%, transparent);
  border: 2px solid var(--brown);
  border-radius: 9999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#mobile-nav nav .nav-settings--open .nav-settings__trigger, #mobile-nav nav .nav-secondary__link:hover, #mobile-nav nav .nav-secondary__link.is-active,
#mobile-nav nav .nav-settings__trigger:hover,
#mobile-nav nav .nav-settings__trigger.is-active, nav.site-nav .nav-settings--open .nav-settings__trigger, nav.site-nav .nav-secondary__link:hover, nav.site-nav .nav-secondary__link.is-active,
nav.site-nav .nav-settings__trigger:hover,
nav.site-nav .nav-settings__trigger.is-active {
  background-color: var(--brown);
  border-color: var(--brown);
  color: var(--color-on-accent);
}

#mobile-nav nav .nav-settings, #mobile-nav nav .nav-actions, #mobile-nav nav .nav-lang, nav.site-nav .nav-settings, nav.site-nav .nav-actions, nav.site-nav .nav-lang {
  display: flex;
  flex-direction: column;
  gap: var(--nav-sec-gap);
}

/**
 * Optical centring for the uppercase utility pills.
 *
 * `place-items: center` centres the font's em box — for Atkinson Hyperlegible
 * roughly .765em of ascent over .282em of descent. These pills are typeset in
 * uppercase, so their ink fills only the cap band (baseline up to the cap line)
 * and nothing balances the descent half: centred text reads high by
 * (descent - ascent + cap-height) / 2. Padding moves a centred grid item by
 * half its own value, so the block-start padding is twice that correction.
 *
 * .17em zeroes the ink above/below difference for DONATE, SETTINGS and the
 * circular EN/ES pills, measured off screenshots at 4x token scale; being in em
 * it holds for the compact header and the mobile drawer too. Uppercase only —
 * the mixed-case page pills (nav .nav-pages) balance on their own ascenders and
 * descenders and must not be shifted.
 */
nav.site-nav,
#mobile-nav nav {
  --nav-pill-caps-nudge: 0.17em;
}

/* Primary page links — shared by desktop nav and mobile drawer */
nav .nav-pages {
  --nav-page-pill-max-width: 12em;
  --nav-page-pill-line-height: 1.25;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
nav .nav-pages li {
  flex: 0 0 auto;
  min-width: 0;
}
nav .nav-pages a {
  box-sizing: border-box;
  display: -webkit-box;
  width: max-content;
  min-width: var(--min-touch-target);
  max-width: var(--nav-page-pill-max-width);
  padding: var(--space-xs) var(--space-md);
  line-height: var(--nav-page-pill-line-height);
  text-align: center;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: all 0.5s ease;
}
nav .nav-pages a:hover, nav .nav-pages a.is-active {
  background-color: var(--green);
  border-color: var(--green);
  color: var(--color-on-accent);
}
nav .nav-pages a.is-active {
  max-width: var(--nav-page-pill-active-max-width, var(--nav-page-pill-max-width));
  font-weight: bold;
}
nav .nav-pages a .nav-page-pill__line {
  display: block;
  white-space: nowrap;
}
nav .nav-pages a.show-beta .nav-page-pill__line:last-child::after {
  content: "beta";
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.12em;
  text-transform: lowercase;
  pointer-events: none;
  color: inherit;
}
nav .nav-pages a {
  /* Structured line spans define exactly two rows — drop webkit clamp */
}
nav .nav-pages a:has(.nav-page-pill__line) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

/* Desktop nav bar */
nav.site-nav {
  --nav-sec-font: var(--text-2xs);
  --nav-sec-size: 1.4rem;
  --nav-sec-pad-x: var(--space-xs);
  --nav-sec-gap: var(--space-2xs);
  display: none;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm) var(--space-md);
  line-height: 1;
  font-size: var(--text-base);
  max-width: 2500px;
}
@media screen and (min-width: 30em) {
  nav.site-nav {
    display: flex;
    font-size: var(--text-sm);
  }
}
nav.site-nav .nav-pages {
  font-size: inherit;
}
nav.site-nav .nav-trailing {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
  font-size: var(--nav-sec-font);
}
nav.site-nav .nav-utility {
  display: flex;
  align-items: flex-end;
  gap: 0.1rem;
  font-size: inherit;
}
nav.site-nav .nav-secondary__link,
nav.site-nav .nav-settings__trigger {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  height: var(--nav-sec-size);
  min-width: auto;
  min-height: auto;
  margin: 0;
  padding: var(--nav-pill-caps-nudge) var(--nav-sec-pad-x) 0;
  border-width: 2px;
  font: inherit;
  font-size: inherit;
  line-height: 1;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
nav.site-nav .nav-lang {
  align-items: center;
}
nav.site-nav .nav-lang .nav-secondary__link {
  width: var(--nav-sec-size);
  height: var(--nav-sec-size);
  min-width: var(--nav-sec-size);
  min-height: var(--nav-sec-size);
  max-width: var(--nav-sec-size);
  max-height: var(--nav-sec-size);
  padding-inline: 0;
  border-radius: 50%;
}
nav.site-nav .nav-lang .nav-secondary__link span {
  display: grid;
  place-items: center;
  line-height: 1;
}
nav.site-nav .nav-actions {
  align-items: flex-start;
}
nav.site-nav .nav-actions .nav-secondary__link {
  width: auto;
  white-space: nowrap;
}
nav.site-nav .nav-settings {
  align-items: flex-start;
}

/* Home: nav sits below mark, aligned right */
@media screen and (min-width: 30em) {
  body.home nav.site-nav {
    align-self: flex-end;
    margin-top: var(--space-xs);
  }
}

/* Compact header: smaller nav tokens (flex layout in _site-header.scss) */
@media screen and (min-width: 30em) {
  body.header-compact nav.site-nav {
    --nav-sec-font: 0.55rem;
    --nav-sec-size: calc(0.35rem * 2 + 4px + 0.55rem);
    --nav-sec-pad-x: var(--space-2xs);
  }
  body.header-compact nav .nav-pages {
    --nav-page-pill-max-width: 11em;
    --nav-page-pill-active-max-width: 11em;
  }
}

/* Mobile drawer — same tokens and pill colors as desktop header nav */
#mobile-nav nav {
  --nav-sec-font: var(--text-2xs);
  --nav-sec-size: 1.4rem;
  --nav-sec-pad-x: var(--space-xs);
  --nav-sec-gap: var(--space-2xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  line-height: 1;
  font-size: var(--text-base);
}
#mobile-nav nav .nav-pages {
  font-size: inherit;
}
#mobile-nav nav .nav-trailing {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-xs);
  font-size: var(--nav-sec-font);
}
#mobile-nav nav .nav-utility {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: inherit;
}
#mobile-nav nav .nav-secondary__link,
#mobile-nav nav .nav-settings__trigger {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  height: var(--nav-sec-size);
  min-width: auto;
  min-height: auto;
  margin: 0;
  padding: var(--nav-pill-caps-nudge) var(--nav-sec-pad-x) 0;
  border-width: 2px;
  font: inherit;
  font-size: inherit;
  line-height: 1;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
#mobile-nav nav .nav-lang {
  align-items: center;
}
#mobile-nav nav .nav-lang .nav-secondary__link {
  width: var(--nav-sec-size);
  height: var(--nav-sec-size);
  min-width: var(--nav-sec-size);
  min-height: var(--nav-sec-size);
  max-width: var(--nav-sec-size);
  max-height: var(--nav-sec-size);
  padding-inline: 0;
  border-radius: 50%;
}
#mobile-nav nav .nav-lang .nav-secondary__link span {
  display: grid;
  place-items: center;
  line-height: 1;
}
#mobile-nav nav .nav-actions {
  align-items: flex-start;
}
#mobile-nav nav .nav-actions .nav-secondary__link {
  width: auto;
  white-space: nowrap;
}
#mobile-nav nav .nav-settings {
  align-items: flex-start;
}

/**
 * Site header shell + compact wordmark (secondary pages).
 * Nav pill styling lives in _nav.scss; settings panel in _settings-menu.scss.
 */
.site-header {
  display: flex;
  flex-direction: column;
  max-width: 2500px;
  position: relative;
  /* Filter defs live in mark.php; keep out of header flex flow */
}
.site-header > svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Flex line break — each row spreads independently (matches home wordmark) */
@media screen and (min-width: 30em) {
  .mark-line-break {
    flex-basis: 100%;
    height: 0;
    overflow: hidden;
  }
}
/* Home wordmark scale */
body.home span.type-block {
  font-size: var(--text-display);
}
@media screen and (max-width: 30em) {
  body.home span.type-block {
    font-size: var(--text-2xl);
  }
}

/* Secondary pages: wordmark | nav-pages | nav-trailing as flex siblings */
@media screen and (min-width: 30em) {
  body.header-compact main {
    margin-top: var(--space-3xl);
  }
  body.header-compact .site-header {
    flex-flow: row nowrap;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    gap: var(--space-sm);
    /* Flatten nav — .nav-pages and .nav-trailing become header flex children */
  }
  body.header-compact .site-header .site-nav {
    display: contents;
  }
  body.header-compact .site-header .nav-pages {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  body.header-compact .site-header .nav-trailing {
    flex: 0 0 auto;
  }
  body.header-compact .site-header:has(.site-mark:hover), body.header-compact .site-header:has(.site-mark:focus-within) {
    flex-wrap: wrap;
  }
  body.header-compact .site-mark {
    /* Tunables */
    --mark-size: var(--text-display);
    --mark-layout-em: 10;
    --mark-scale: calc(0.75rem / var(--mark-size));
    /* Hover = home desktop reference size (4.5rem) */
    --mark-scale-hover: calc(var(--mark-size) / var(--mark-size));
    --mark-duration: 40s;
    --mark-descale-duration: 1s;
    --mark-stroke: 0.125em;
    /* Slot size must match scaled h1 footprint */
    --mark-slot-w: calc(var(--mark-layout-em) * var(--mark-size));
    --mark-slot-h: calc(5 * var(--mark-size));
    position: relative;
    flex: 0 0 auto;
    align-self: flex-end;
    width: calc(var(--mark-slot-w) * var(--mark-scale));
    height: calc(var(--mark-slot-h) * var(--mark-scale));
    overflow: visible;
    z-index: 1;
  }
  body.header-compact .site-mark a {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    transform: scale(var(--mark-scale));
    transform-origin: left top;
    transition: transform var(--mark-descale-duration) ease-in-out;
  }
  body.header-compact .site-mark h1 {
    margin: 0;
    width: calc(var(--mark-layout-em) * 1em);
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: normal;
    gap: 0.25em;
    font-size: var(--mark-size);
    line-height: 1;
  }
  body.header-compact .site-mark h1 span.type-block {
    font-size: var(--mark-size);
    margin-top: 0;
    margin-right: 0;
    padding: var(--space-xs) var(--space-2xs);
    border-radius: var(--space-2xs);
    white-space: normal;
    color: transparent;
    background-color: transparent;
    box-sizing: border-box;
    border: none;
    filter: none;
    /* Inset stroke without growing layout */
    outline: var(--mark-stroke) solid var(--lightpurple);
    outline-offset: calc(-1 * var(--mark-stroke));
  }
  body.header-compact .site-mark h1 span.green {
    visibility: hidden;
  }
  body.header-compact .site-mark:hover, body.header-compact .site-mark:focus-within {
    z-index: 20;
  }
  body.header-compact .site-mark:hover a, body.header-compact .site-mark:focus-within a {
    transform: scale(var(--mark-scale-hover));
    transition: transform var(--mark-duration) ease-in-out;
  }
  body.header-compact .site-mark:hover h1 span.type-block, body.header-compact .site-mark:focus-within h1 span.type-block {
    color: black !important;
    background-color: var(--lightpurple);
    filter: url(#remove-black);
  }
  body.header-compact .site-mark:hover h1 span.green, body.header-compact .site-mark:focus-within h1 span.green {
    visibility: visible;
  }
}

@media screen and (min-width: 30em) {
  html[data-reduced-motion=reduce] body.header-compact .site-mark a {
    transition: none;
  }
}

/**
 * Site footer — nav groups + brand (mirrors header nav-content groupings)
 */
@media screen and (max-width: 30em) {
  footer.site-footer {
    padding-block: var(--space-md);
  }
}

.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-xl);
  width: 100%;
}
@media screen and (max-width: 30em) {
  .site-footer__grid {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2xs);
  margin-left: 0;
  color: inherit;
  text-decoration: none;
}
@media screen and (max-width: 30em) {
  .site-footer__brand {
    align-items: flex-start;
  }
}

.site-footer__mark {
  --w: 250px;
}

.site-footer__title {
  --s: 0.9em;
}

/* Footer nav: text-color links only (override header pill styles on nav .nav-pages) */
footer.site-footer .site-footer__grid {
  font-size: inherit;
  line-height: inherit;
}
footer.site-footer .site-footer__grid .nav-pages a,
footer.site-footer .site-footer__grid .nav-lang a,
footer.site-footer .site-footer__grid .nav-actions a,
footer.site-footer .site-footer__grid .nav-actions .feedback-dialog__trigger,
footer.site-footer .site-footer__grid .nav-settings--inline,
footer.site-footer .site-footer__grid .nav-settings--inline .nav-settings__title {
  font-size: var(--text-base);
  line-height: inherit;
  font-family: inherit;
}
footer.site-footer .site-footer__grid .nav-utility {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md) var(--space-lg);
}
@media screen and (max-width: 30em) {
  footer.site-footer .site-footer__grid .nav-utility {
    justify-content: space-between;
    width: 100%;
  }
}
footer.site-footer .site-footer__grid .nav-pages {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin: 0;
}
footer.site-footer .site-footer__grid .nav-pages li {
  margin: 0;
}
footer.site-footer .site-footer__grid .nav-pages a {
  background: none;
  border: none;
  border-radius: 0;
  display: inline;
  min-height: 0;
  max-width: none;
  padding: 0;
  text-decoration: none;
  font-weight: inherit;
  color: var(--color-text-muted);
  -webkit-box-orient: unset;
  -webkit-line-clamp: unset;
  overflow: visible;
  transition: none;
}
footer.site-footer .site-footer__grid .nav-pages a .nav-page-pill__line {
  display: inline;
}
footer.site-footer .site-footer__grid .nav-pages a .nav-page-pill__line:not(:first-child)::before {
  content: " ";
}
footer.site-footer .site-footer__grid .nav-pages a.show-beta .nav-page-pill__line:last-child::after {
  content: "beta";
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.12em;
  text-transform: lowercase;
  pointer-events: none;
  color: inherit;
}
footer.site-footer .site-footer__grid .nav-pages a:hover {
  color: var(--color-text);
}
footer.site-footer .site-footer__grid .nav-pages a.is-active {
  color: var(--color-text);
  font-weight: bold;
}
footer.site-footer .site-footer__grid .nav-lang,
footer.site-footer .site-footer__grid .nav-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}
footer.site-footer .site-footer__grid .nav-lang a,
footer.site-footer .site-footer__grid .nav-lang .feedback-dialog__trigger,
footer.site-footer .site-footer__grid .nav-actions a,
footer.site-footer .site-footer__grid .nav-actions .feedback-dialog__trigger {
  color: var(--color-text-muted);
  font-weight: inherit;
  text-decoration: none;
  display: inline;
}
footer.site-footer .site-footer__grid .nav-lang a:hover,
footer.site-footer .site-footer__grid .nav-lang .feedback-dialog__trigger:hover,
footer.site-footer .site-footer__grid .nav-actions a:hover,
footer.site-footer .site-footer__grid .nav-actions .feedback-dialog__trigger:hover {
  color: var(--color-text);
}
footer.site-footer .site-footer__grid .nav-lang a.is-active,
footer.site-footer .site-footer__grid .nav-lang .feedback-dialog__trigger.is-active,
footer.site-footer .site-footer__grid .nav-actions a.is-active,
footer.site-footer .site-footer__grid .nav-actions .feedback-dialog__trigger.is-active {
  color: var(--color-text);
  font-weight: bold;
}
footer.site-footer .site-footer__grid .nav-settings--inline .nav-settings__panel {
  position: static;
  margin: 0;
  padding: 0;
  max-width: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
footer.site-footer .site-footer__grid .nav-settings--inline .nav-settings__section {
  padding: 0;
  gap: var(--space-2xs);
}
footer.site-footer .site-footer__grid .nav-settings--inline .nav-settings__section + .nav-settings__section {
  margin-top: var(--space-xs);
}
footer.site-footer .site-footer__grid .nav-settings--inline .nav-settings__title {
  font-size: var(--text-xs);
  font-weight: inherit;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: inherit;
}
footer.site-footer .site-footer__grid .nav-settings--inline .nav-settings__options {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
}
footer.site-footer .site-footer__grid .nav-settings--inline .nav-settings__label {
  font-size: var(--text-sm);
  gap: var(--space-2xs);
  color: var(--color-text-muted);
  font-weight: inherit;
}
footer.site-footer .site-footer__grid .nav-settings--inline .nav-settings__label span {
  color: var(--color-text-muted);
  font-weight: inherit;
}
footer.site-footer .site-footer__grid .nav-settings--inline .nav-settings__label input:checked + span {
  color: var(--color-text);
  font-weight: bold;
}
footer.site-footer .site-footer__grid .nav-settings--inline .nav-settings__label input {
  accent-color: var(--color-text);
}

wc-feedback {
  --wcf-accent: var(--green);
  --wcf-accent-text: var(--color-on-accent);
  --wcf-border: var(--color-border);
  --wcf-muted: var(--color-text-muted);
  --wcf-bg: transparent;
  --wcf-input-bg: var(--color-page);
  --wcf-input-border: color-mix(in oklch, var(--color-text) 22%, var(--color-page));
  --wcf-font: var(--font-hl);
  --wcf-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wcf-radius: 0.25rem;
  --wcf-pill-radius: 9999px;
  --wcf-gap: var(--space-xs);
  --wcf-gap-lg: var(--space-sm);
  --wcf-text-base: var(--text-base);
  --wcf-text-sm: var(--text-xs);
  --wcf-text-heading: var(--text-lg);
  --wcf-canvas-height: 9rem;
  --wcf-btn-primary-bg: var(--green);
  --wcf-btn-primary-color: var(--color-on-accent);
  --wcf-btn-secondary-bg: color-mix(in oklch, var(--color-border) 55%, var(--color-page));
  --wcf-btn-secondary-color: var(--color-text);
  --wcf-focus: var(--color-focus-ring);
  --wcf-progress-fill: color-mix(in oklch, var(--color-text) 38%, var(--color-page));
  --wcf-recording-dot: #c00;
  display: block;
  font-size: var(--wcf-text-base);
}

.feedback-dialog__trigger {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: inherit;
  color: inherit;
}

#mobile-nav .feedback-dialog__trigger {
  display: grid;
  width: auto;
}

.feedback-dialog {
  /* Tighter than site gutter — popup content should feel edge-to-edge on small screens */
  --feedback-dialog-inset-x: var(--space-2xs);
  font-size: var(--text-base);
  line-height: 1.4;
  border: none;
  border-radius: 0;
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  box-shadow: none;
  background-color: var(--color-page);
  color: var(--color-text);
}
.feedback-dialog::backdrop {
  background-color: color-mix(in oklch, var(--color-text) 45%, transparent);
}
.feedback-dialog__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.feedback-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-shrink: 0;
  padding: var(--space-md) var(--feedback-dialog-inset-x) var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.feedback-dialog__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.feedback-dialog__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--space-2xs);
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feedback-dialog__close:hover {
  background-color: var(--color-bg-muted);
  color: var(--color-text);
}
.feedback-dialog__close:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.feedback-dialog__body {
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--feedback-dialog-inset-x);
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}
.feedback-dialog__body wc-feedback {
  display: flex;
  flex-direction: column;
  font-size: inherit;
  line-height: inherit;
  --wcf-text-base: 1em;
  --wcf-text-sm: 0.8125em;
  --wcf-text-heading: 1.125em;
  --wcf-gap: 0.33em;
  --wcf-gap-lg: 0.5em;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  align-self: stretch;
}
@media screen and (max-width: 30em) {
  .feedback-dialog__header {
    padding-inline: var(--space-xs);
  }
  .feedback-dialog__body {
    padding-inline: 0;
  }
  .feedback-dialog wc-feedback {
    --wcf-content-inset-x: var(--space-xs);
  }
}
@media screen and (min-width: 30em) {
  .feedback-dialog {
    --feedback-dialog-inset-x: var(--space-md);
    width: min(48rem, 100vw - 2 * var(--feedback-dialog-inset-x));
    max-width: 48rem;
    height: auto;
    max-height: min(90dvh, 100%);
    margin: auto;
    border-radius: var(--space-2xs);
    box-shadow: 0 0.5rem 2rem color-mix(in oklch, var(--color-text) 20%, transparent);
  }
  .feedback-dialog__inner {
    height: min(75dvh, 100%);
    max-height: min(90dvh, 100%);
  }
  .feedback-dialog__header {
    padding: var(--space-lg) var(--feedback-dialog-inset-x) var(--space-md);
  }
  .feedback-dialog__body {
    padding: var(--space-lg) var(--feedback-dialog-inset-x);
  }
}

@media (forced-colors: active) {
  .feedback-dialog {
    border: 2px solid ButtonText;
  }
}
/**
 * Landing page — content sections with frosted panels
 *
 * Accessibility constraints (TASK-135):
 * - sections use min-height, never a fixed height, so nothing clips at zoom
 *   (WCAG 1.4.4/1.4.10)
 * - the header pill nav (nav.site-nav) is pinned to the viewport bottom,
 *   transparent, from $bp-m up only — below that the nav wraps several
 *   rows tall and would sit on top of section text; on small screens a
 *   frosted bar pins the menu button + section counter instead
 * - clearance for whichever bar is pinned is reserved via
 *   --landing-nav-height (set by main.js) plus scroll-padding, so focus
 *   is never obscured (WCAG 2.4.11). DOM order is unchanged — only the
 *   visual position moves.
 */
:root:has(body.landing-snap) {
  scroll-padding-bottom: var(--landing-nav-height, 0px);
}

body.landing-snap .landing-chunk {
  box-sizing: border-box;
  min-height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  padding-block: var(--space-xl);
  padding-bottom: calc(var(--landing-nav-height, 0px) + var(--space-xl));
}
body.landing-snap .landing-chunk .block {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-lg);
}
body.landing-snap .landing-chunk .block-type-feedback wc-feedback {
  font-size: inherit;
  line-height: inherit;
  --wcf-text-base: 1em;
  --wcf-text-sm: 0.8125em;
  --wcf-text-heading: 1.125em;
  --wcf-gap: 0.33em;
  --wcf-gap-lg: 0.5em;
  --wcf-canvas-height: 6em;
}
body.landing-snap .landing-chunk:has(.block-type-feedback) .block {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  border-radius: 0;
}
:root[data-reduced-motion=reduce] body.landing-snap .landing-chunk .block {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--color-bg-muted);
}
:root[data-reduced-motion=reduce] body.landing-snap .landing-chunk:has(.block-type-feedback) .block {
  background: transparent;
}
body.landing-snap header.site-header {
  box-sizing: border-box;
  min-height: 100svh;
  justify-content: flex-start;
}
@media screen and (min-width: 30em) {
  body.landing-snap header.site-header {
    min-height: calc(100svh - 2 * var(--space-2xl));
  }
}
body.landing-snap footer.site-footer {
  padding-bottom: calc(var(--landing-nav-height, 0px) + var(--space-md));
}
body.landing-snap wc-scroll-spy {
  --wcs-bg: var(--glass-bg);
  --wcs-text: var(--color-text);
  --wcs-text-muted: var(--color-text-muted);
  --wcs-font-size: var(--text-xs);
  --wcs-blur: var(--glass-blur);
}
@media screen and (min-width: 30em) {
  body.landing-snap wc-scroll-spy {
    display: flex;
    align-items: flex-end;
    margin-left: auto;
  }
}
@media screen and (max-width: 30em) {
  body.landing-snap wc-scroll-spy {
    position: absolute;
    width: 0;
    height: 0;
    overflow: visible;
  }
}
body.landing-snap wc-scroll-spy::part(next) {
  min-height: 4.5rem;
}
body.landing-snap wc-scroll-spy::part(counter) {
  font-variant-numeric: tabular-nums lining-nums;
}
body.landing-snap wc-scroll-spy::part(counter-current) {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}
:root[data-reduced-motion=reduce] body.landing-snap wc-scroll-spy {
  --wcs-transition: 0s;
  --wcs-sheet-transition: 0s;
  --wcs-draw-duration: 0s;
}
@media screen and (max-width: 30em) {
  body.landing-snap nav.site-nav {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
  body.landing-snap nav.site-nav wc-scroll-spy {
    visibility: visible;
  }
}
@media screen and (max-width: 30em) {
  body.landing-snap #mobile-main .mobile-btn#mobile-btn {
    position: fixed;
    left: var(--space-sm);
    bottom: var(--space-xs);
    z-index: 5;
    width: auto;
    margin-top: 0;
    margin-bottom: 0;
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
}
@media screen and (min-width: 60em) {
  body.landing-snap nav.site-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    margin: 0;
    padding: var(--space-sm) var(--space-lg);
  }
  body.landing-snap nav.site-nav .nav-settings__panel {
    top: auto;
    bottom: calc(100% + var(--space-2xs));
  }
}

@media screen and (min-width: 30em) {
  :root {
    --site-gutter-x: var(--space-2xl);
  }
}
:root {
  --font-ks: "KS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI";
  --font-hl:
    "Hyperlegible", "fantasy", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
    "Helvetica Neue", sans-serif;
}

.f-ks {
  font-family: var(--font-ks);
}

.f-hl {
  font-family: var(--font-hl);
}

.purple {
  color: var(--purple);
}

.lightpurple {
  color: var(--lightpurple);
}

/* Custom site styles */
.bg-purple {
  background-color: color-mix(in srgb, var(--purple) 50%, transparent 50%);
  backdrop-filter: blur(20px);
}

body {
  font-family: var(--font-hl);
  background-color: var(--color-page);
  color: var(--color-text);
}

/* Mobile long-form pages: reduce widows/orphans (home, library, tended by) */
@media screen and (max-width: 30em) {
  body.landing-snap main,
  body.landing-snap .site-header,
  body.page-library main,
  body.page-library .site-header,
  body.page-tenders main,
  body.page-tenders .site-header {
    text-wrap: pretty;
  }
}
/* Shared horizontal inset — one gutter token, applied to site chrome + main */
.site-header,
main:not(.site-gutter-none),
footer.site-footer {
  padding-inline: var(--site-gutter-x);
  box-sizing: border-box;
}

main {
  max-width: 64rem;
}

/* Narrow shell for non-site headers/footers (e.g. blockquote footer) */
header:not(.site-header),
footer:not(.site-footer) {
  max-width: 64rem;
}

/* Wide shell — matches .site-header */
footer.site-footer {
  max-width: 2500px;
  width: 100%;
}

main {
  margin-top: var(--space-main);
}

a {
  color: var(--color-text);
}

p:first-of-type {
  margin-top: 0;
}

mouse-heatmap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  opacity: 0.5;
  mix-blend-mode: difference;
  pointer-events: none;
}

header a {
  text-decoration: none;
}
header h1 {
  color: black !important;
  font-family: var(--font-ks);
  gap: 0.25em;
}
@media screen and (max-width: 30em) {
  header h1 {
    font-size: var(--text-xl);
  }
}
header h1 span.type-block {
  background-color: var(--lightpurple);
  padding: var(--space-xs) var(--space-md);
  margin-top: var(--space-md);
  margin-right: var(--space-xs);
  display: inline-block; /* dib */
  border-radius: var(--space-2xs);
  filter: url(#remove-black);
  line-height: 1;
  padding-inline: var(--space-2xs);
}
@media screen and (max-width: 30em) {
  header h1 span.type-block {
    margin-top: 0rem;
    margin-right: 0rem;
  }
}

section {
  line-height: 1.4;
}

section.intro {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3xl);
}

div.block blockquote {
  font-family: var(--font-ks);
  color: var(--table-header-bg);
  margin-bottom: var(--space-4xl);
}
@media screen and (max-width: 30em) {
  div.block blockquote {
    margin-inline: var(--space-xs);
  }
}
div.block blockquote em {
  font-style: normal;
  font-weight: normal;
}
div.block blockquote footer {
  margin-top: var(--space-xs);
  text-align: right;
  font-size: 0.75em;
}
div.block ul {
  list-style-type: none;
  padding-left: 0;
}
div.block ul li {
  position: relative;
  padding-left: 1.5em;
}
div.block ul li::before {
  content: "🐌";
  position: absolute;
  left: 0.5em;
  top: 0.1em;
  font-size: 0.75em;
}
div.block ul li p {
  margin-top: 0;
  margin-bottom: 0.25em;
  font-size: 0.8em;
}

/* Data Table Styles (tokens from _theme.scss) */
.data-table {
  position: relative;
}
.data-table .table-wrapper {
  position: relative;
}
.data-table .table-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  pointer-events: none;
  background: var(--table-fade-gradient);
  z-index: 1;
}
.data-table .table-container {
  overflow-x: auto;
}
.data-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--space-md) 0;
  -webkit-backdrop-filter: blur(var(--table-blur));
  backdrop-filter: blur(var(--table-blur));
  position: relative;
}
.data-table th {
  font-family: var(--font-ks);
  font-size: var(--text-md);
  text-transform: uppercase;
  background: var(--table-header-bg);
  color: var(--table-header-color);
  font-weight: bold;
  padding: var(--space-md);
  text-align: center;
  vertical-align: bottom;
  border: 1px solid var(--table-border-color);
}
.data-table td {
  padding: var(--space-md);
  text-align: left;
  border: 1px solid var(--color-border);
  background: inherit;
  vertical-align: middle;
}
.data-table td:not(:first-child) {
  text-align: center;
}
.data-table td:not(:first-child) a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
}
.data-table tbody tr:nth-child(even) {
  background: var(--table-row-bg);
}
.data-table a {
  color: var(--table-link-color);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.data-table a:hover {
  opacity: 0.8;
}
.data-table .error {
  color: var(--color-error);
  padding: var(--space-md);
  border: 1px solid var(--color-error);
  background: var(--color-error-bg);
}
@media screen and (max-width: 30em) {
  .data-table .table-container {
    background: none;
  }
  .data-table table {
    display: block;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .data-table th {
    display: none;
  }
  .data-table td {
    display: block;
    text-align: left !important;
  }
  .data-table td::before {
    content: attr(data-label);
    font-family: var(--font-ks);
    font-weight: normal;
    font-size: 0.8em;
    display: block;
    margin-bottom: var(--space-xs);
  }
  .data-table tr {
    display: block;
    margin-bottom: var(--space-md);
    border: 1px solid var(--color-border);
  }
}