/*
 * @pot/renderer — Pot block styles + design tokens (ADR-0030).
 *
 * Framework-agnostic: plain CSS + CSS custom properties, ZERO Tailwind. Import
 * this once to render Pot pages anywhere (`import '@pot/renderer/styles.css'`).
 * Per-website theming overrides the `--pot-*` vars via theme presets (ADR-0029);
 * blocks never hardcode colors/fonts (ADR-0004). Editor/admin chrome (shadcn /
 * Tailwind) lives in the consuming app, not here.
 */

/*
 * System breakpoints (ADR-0041), the only ones any Pot stylesheet may use:
 *
 *   sm 640px · md 768px · lg 1024px · xl 1280px
 *
 * Always as `@media (min-width: …)`; plus `prefers-reduced-motion`. Layout
 * switches live in the layout blocks below (Grid `collapse`/`order`/`cols`,
 * Stack `direction`); documents name a step, never a width. Sizes between the
 * steps are fluid look tokens (Humus). A test lints every stylesheet for this.
 */

/*
 * Design tokens — the website design system. Self-contained defaults (oklch);
 * a theme preset swaps these values per website. Paired color tokens (bg + its
 * `*-foreground`) are contrast-safe by construction (ADR-0020).
 */
:root {
  --pot-color-background: oklch(1 0 0);
  --pot-color-foreground: oklch(0.145 0 0);
  --pot-color-muted: oklch(0.97 0 0);
  --pot-color-muted-foreground: oklch(0.556 0 0);
  /* Muted text on the muted surface: the renderer swaps it in under
   * `data-bg="muted"` (and on element-level muted fills), so the tinted
   * surface can get a darker grey than the page (Humus derives both to APCA
   * 60 and WCAG 4.5:1). */
  --pot-color-muted-foreground-on-muted: oklch(0.5 0 0);
  --pot-color-primary: oklch(0.205 0 0);
  --pot-color-primary-foreground: oklch(0.985 0 0);
  --pot-color-accent: oklch(0.97 0 0);
  --pot-color-accent-foreground: oklch(0.205 0 0);
  --pot-color-border: oklch(0.922 0 0);
  /* Dark surface pair (ADR-0040) — a deep band (footer, emphasis) whose text
   * flips via `data-bg="dark"`. Placeholder values; Humus supplies the look's. */
  --pot-color-dark: oklch(0.205 0 0);
  --pot-color-dark-foreground: oklch(0.985 0 0);
  /* Brand colour usable AS TEXT on light surfaces (eyebrows, links, dates).
   * Separate from `primary` because a light brand (yellow) fails contrast as
   * text; Humus derives a darkened variant. Placeholder: primary. */
  --pot-color-brand-text: oklch(0.205 0 0);
  /* Danger pair (ADR-0040): error text and invalid borders on light surfaces;
   * `*-foreground` is text on a danger fill. Placeholder red; a look may set
   * its own. Remapped to the surface foreground on primary/accent/dark. */
  --pot-color-danger: oklch(0.577 0.245 27.325);
  --pot-color-danger-foreground: oklch(0.985 0 0);

  --pot-spacing-sm: 8px;
  /* Step between sm and md (heading → intro). Placeholder; evoped@1: 12. */
  --pot-spacing-sm2: 12px;
  --pot-spacing-md: 16px;
  --pot-spacing-lg: 32px;
  --pot-spacing-xl: 56px;
  /* Steps between md and lg (gap scale `sm < sm2 < md < md2 < md3 < md4 < lg < xl`).
   * Placeholders; a look sets its own (evoped@1: 24, 32, 40 fixed). */
  --pot-spacing-md2: 20px;
  --pot-spacing-md3: 24px;
  --pot-spacing-md4: 28px;
  /* Section-only step above xl (Section `paddingY`/`paddingTop`/`paddingBottom`
   * `2xl`): tall openings. Placeholder; evoped@1: 96 / sm 128 / lg 160. */
  --pot-spacing-2xl: 72px;

  /* Typography scale — themeable (ADR-0029/0030). Visual size is decoupled from
   * semantic level (memory typography_axis_decoupled): a block maps its level to
   * a scale step. */
  --pot-text-sm: 0.9rem;
  --pot-text-base: 1rem;
  --pot-text-lg: 1.15rem;
  --pot-text-xl: 1.25rem;
  --pot-text-2xl: 1.5rem;
  --pot-text-3xl: 2rem;
  --pot-text-4xl: 2.5rem;

  /* Font roles (ADR-0040). Placeholders: the platform stack; Humus sets the
   * look's families (served from the font mirror, never from Google). */
  --pot-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --pot-font-display: var(--pot-font-body);

  --pot-font-weight-normal: 400;
  --pot-font-weight-medium: 500;
  --pot-font-weight-semibold: 600;
  --pot-font-weight-bold: 700;

  --pot-radius-sm: 4px;
  --pot-radius-md: 6px;
  --pot-radius-lg: 10px;

  /* Card surface (Container `surface: card`, sealed cards): a light fill on the
   * section with its radius and elevation. Placeholders; a look sets them. */
  --pot-color-card: oklch(0.985 0 0);
  --pot-radius-card: var(--pot-radius-lg);
  --pot-shadow-card: none;

  /* Elevation (ADR-0035 Container decoration). Plain rgba — no color-mix (it gets
   * stripped by Lightning CSS, see memory css_gotchas). */
  --pot-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --pot-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --pot-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);

  /* Motion scale (ADR-0040): a unitless multiplier motion classes read
   * (`pot-m-*`, from Humus). 0 switches all motion off. Placeholder value. */
  --pot-motion: 1;

  /* Hairlines between layout cells (Grid `divider`, Stack `rule`); surfaces
   * with their own foreground use the page surface at 20% instead. */
  --pot-divider-color: var(--pot-color-border);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pot-motion: 0;
  }
}

@media (min-width: 768px) {
  :root {
    --pot-spacing-sm: 12px;
    --pot-spacing-sm2: 18px;
    --pot-spacing-md: 24px;
    --pot-spacing-lg: 64px;
    --pot-spacing-xl: 112px;
    --pot-spacing-md2: 32px;
    --pot-spacing-md3: 40px;
    --pot-spacing-md4: 48px;
    --pot-spacing-2xl: 144px;
  }
}

.pot-section {
  display: block;
  width: 100%;
  font-family: var(--pot-font-body);
  /* The padding steps below set these, so a decoration can place itself
   * against the content box (`.pot-deco-dots-start`). */
  padding-top: var(--pot-section-pt, 0);
  padding-bottom: var(--pot-section-pb, 0);
}

/*
 * Contained-inner wrapper. Section emits this around its children when
 * `contained='contained'` (the default). Caps width only — horizontal padding
 * lives on Container so Section → Container doesn't double-pad.
 */
.pot-section-inner {
  margin-inline: auto;
}

/*
 * Section layout (ADR-0040; moved from the publish shell): the contained inner
 * carries the page gutter and a vertical rhythm between its children, so
 * Section → Grid → Container → leaf stays within depth 4. Containers inside a
 * section do not pad again, and fill the inner's width.
 */
.pot-section-inner {
  display: flex;
  flex-direction: column;
  gap: var(--pot-spacing-lg);
  /* The gutter is a property so layout inside can reckon with it (Grid ratio). */
  --pot-gutter: var(--pot-spacing-md);
  padding-inline: var(--pot-gutter);
}
/* A padded container (a card) keeps its padding. */
.pot-section-inner .pot-container:not(.pot-pad-sm, .pot-pad-md, .pot-pad-lg, .pot-pad-xl) {
  padding-inline: 0;
}
.pot-section-inner > .pot-container {
  width: 100%;
}
/* Wide sections use the 1280px container of Tailwind sites: gutters 16 /
 * sm 24 / lg 32 inside the max width. */
.pot-section-inner.pot-maxw-xl {
  --pot-gutter: 1rem;
}
@media (min-width: 640px) {
  .pot-section-inner.pot-maxw-xl {
    --pot-gutter: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .pot-section-inner.pot-maxw-xl {
    --pot-gutter: 2rem;
  }
}

/*
 * Contrast scoping: any element with a dark bg (`data-bg`, set by a Section,
 * a sealed frame or a card) flips descendant text-tokens to the bg-paired
 * foreground, so block authors keep using `color: foreground` /
 * `muted-foreground` and stay readable. Light bgs leave the defaults (dark
 * text on light surface is already correct); `data-bg="background"` restores
 * them inside a dark surface. The `--pot-page-*` copies are computed at the
 * root, so they keep the page values wherever a surface remaps the originals.
 * Button roles are tokens too. On a primary surface the primary button turns
 * page-coloured with the page's brand text (paired with `background` in
 * Humus, APCA-checked), lighter by 10 % / 20 % on hover / press over the
 * brand like the original's white/90, white/80; the secondary button keeps
 * its outline in the surface's foreground (spross getButtonColor.ts,
 * highlighted variants). Hover and press shades are set per scope because a
 * custom property resolves its `var()`s where it is declared.
 */
:root {
  --pot-page-foreground: var(--pot-color-foreground);
  --pot-page-muted-foreground: var(--pot-color-muted-foreground);
  --pot-page-brand-text: var(--pot-color-brand-text);
  --pot-page-danger: var(--pot-color-danger);
  --pot-page-danger-foreground: var(--pot-color-danger-foreground);
  --pot-button-primary-bg: var(--pot-color-primary);
  --pot-button-primary-fg: var(--pot-color-primary-foreground);
  --pot-button-primary-hover: color-mix(
    in srgb,
    var(--pot-color-primary) 93%,
    var(--pot-color-primary-foreground)
  );
  --pot-button-primary-active: color-mix(
    in srgb,
    var(--pot-color-primary) 86%,
    var(--pot-color-primary-foreground)
  );
  --pot-button-secondary-line: var(--pot-color-primary);
}
.pot-section,
[data-bg="background"],
[data-bg="card"] {
  --pot-divider-color: var(--pot-color-border);
}
[data-bg="primary"],
[data-bg="accent"],
[data-bg="dark"] {
  --pot-divider-color: color-mix(in srgb, var(--pot-color-background) 20%, transparent);
}
[data-bg="primary"] {
  --pot-color-foreground: var(--pot-color-primary-foreground);
  --pot-color-muted-foreground: var(--pot-color-primary-foreground);
  --pot-color-brand-text: var(--pot-color-primary-foreground);
  --pot-color-danger: var(--pot-color-primary-foreground);
  --pot-color-danger-foreground: var(--pot-color-primary);
  --pot-button-primary-bg: var(--pot-color-background);
  --pot-button-primary-fg: var(--pot-page-brand-text);
  --pot-button-primary-hover: color-mix(
    in srgb,
    var(--pot-color-background) 90%,
    var(--pot-color-primary)
  );
  --pot-button-primary-active: color-mix(
    in srgb,
    var(--pot-color-background) 80%,
    var(--pot-color-primary)
  );
  --pot-button-secondary-line: var(--pot-color-primary-foreground);
  --pot-button-secondary-fg: var(--pot-color-primary-foreground);
}
[data-bg="accent"] {
  --pot-color-foreground: var(--pot-color-accent-foreground);
  --pot-color-muted-foreground: var(--pot-color-accent-foreground);
  --pot-color-brand-text: var(--pot-color-accent-foreground);
  --pot-color-danger: var(--pot-color-accent-foreground);
  --pot-color-danger-foreground: var(--pot-color-accent);
}
/* Brand text is checked on the page and the soft accent only (Humus); on the
 * brand-tinted muted surface it reads as the foreground. Muted text takes the
 * muted surface's own grey. */
[data-bg="muted"] {
  --pot-color-brand-text: var(--pot-color-foreground);
  --pot-color-muted-foreground: var(--pot-color-muted-foreground-on-muted);
}
[data-bg="dark"] {
  --pot-color-foreground: var(--pot-color-dark-foreground);
  --pot-color-muted-foreground: var(--pot-color-dark-foreground);
  --pot-color-brand-text: var(--pot-color-dark-foreground);
  --pot-color-danger: var(--pot-color-dark-foreground);
  --pot-color-danger-foreground: var(--pot-color-dark);
}
[data-bg="background"],
[data-bg="card"] {
  --pot-color-foreground: var(--pot-page-foreground);
  --pot-color-muted-foreground: var(--pot-page-muted-foreground);
  --pot-color-brand-text: var(--pot-page-brand-text);
  --pot-color-danger: var(--pot-page-danger);
  --pot-color-danger-foreground: var(--pot-page-danger-foreground);
  --pot-button-primary-bg: var(--pot-color-primary);
  --pot-button-primary-fg: var(--pot-color-primary-foreground);
  --pot-button-primary-hover: color-mix(
    in srgb,
    var(--pot-color-primary) 93%,
    var(--pot-color-primary-foreground)
  );
  --pot-button-primary-active: color-mix(
    in srgb,
    var(--pot-color-primary) 86%,
    var(--pot-color-primary-foreground)
  );
  --pot-button-secondary-line: var(--pot-color-primary);
  /* unset: the label falls back to the scoped brand-text again */
  --pot-button-secondary-fg: initial;
}

/* Section padding steps read `--pot-section-<step>`, which a look sets
 * apart from the gap scale (Humus `sectionSteps`, ADR-0041 spacing 4); a
 * step the look leaves out pads with the spacing step of the same name. */
.pot-py-none,
.pot-py-0 {
  --pot-section-pt: 0;
  --pot-section-pb: 0;
}
.pot-py-sm {
  --pot-section-pt: var(--pot-section-sm, var(--pot-spacing-sm));
  --pot-section-pb: var(--pot-section-sm, var(--pot-spacing-sm));
}
.pot-py-md {
  --pot-section-pt: var(--pot-section-md, var(--pot-spacing-md));
  --pot-section-pb: var(--pot-section-md, var(--pot-spacing-md));
}
.pot-py-lg {
  --pot-section-pt: var(--pot-section-lg, var(--pot-spacing-lg));
  --pot-section-pb: var(--pot-section-lg, var(--pot-spacing-lg));
}
.pot-py-xl {
  --pot-section-pt: var(--pot-section-xl, var(--pot-spacing-xl));
  --pot-section-pb: var(--pot-section-xl, var(--pot-spacing-xl));
}
.pot-py-2xl {
  --pot-section-pt: var(--pot-section-2xl, var(--pot-spacing-2xl));
  --pot-section-pb: var(--pot-section-2xl, var(--pot-spacing-2xl));
}
/* One side only (Section `paddingTop` / `paddingBottom` differing from each
 * other): the importer maps a live section's top and bottom space apart. */
.pot-pt-none {
  --pot-section-pt: 0;
}
.pot-pb-none {
  --pot-section-pb: 0;
}
.pot-pt-sm {
  --pot-section-pt: var(--pot-section-sm, var(--pot-spacing-sm));
}
.pot-pb-sm {
  --pot-section-pb: var(--pot-section-sm, var(--pot-spacing-sm));
}
.pot-pt-md {
  --pot-section-pt: var(--pot-section-md, var(--pot-spacing-md));
}
.pot-pb-md {
  --pot-section-pb: var(--pot-section-md, var(--pot-spacing-md));
}
.pot-pt-lg {
  --pot-section-pt: var(--pot-section-lg, var(--pot-spacing-lg));
}
.pot-pb-lg {
  --pot-section-pb: var(--pot-section-lg, var(--pot-spacing-lg));
}
.pot-pt-xl {
  --pot-section-pt: var(--pot-section-xl, var(--pot-spacing-xl));
}
.pot-pb-xl {
  --pot-section-pb: var(--pot-section-xl, var(--pot-spacing-xl));
}
.pot-pt-2xl {
  --pot-section-pt: var(--pot-section-2xl, var(--pot-spacing-2xl));
}
.pot-pb-2xl {
  --pot-section-pb: var(--pot-section-2xl, var(--pot-spacing-2xl));
}

.pot-container {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  padding-inline: var(--pot-spacing-md);
}

/*
 * Grid (core.grid, ADR-0041). One column below the `collapse` step (default
 * sm); from the step `cols` 2 / auto take their columns, 3–4 take two up to
 * lg and their full count from lg. `order: reverse` flips the visual order at
 * and above the step (source order stays the mobile reading order); `divider`
 * separates the cells with a hairline. Selectors stay at one class of
 * specificity (`:where`), so later steps win by source order.
 */
.pot-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  --pot-grid-two: repeat(2, minmax(0, 1fr));
  --pot-gap: 0px;
  /* unset: a nested grid does not inherit its parent's column gap */
  --pot-col-gap: initial;
}
/* 2 + 3 (and 3 + 2): the five-column split of the Tailwind sites, taken over
 * the section box including its gutters, each column padded by half the gap
 * (spross SectionContact/VariantSplit.tsx:49, SectionEvents.tsx:58-61): the
 * narrow column is 40% of (width + 2 gutters), less a gutter and half a gap. */
.pot-grid-ratio-2-3 {
  --pot-grid-narrow: calc(
    40% -
    0.2 *
    var(--pot-gutter, 0px) -
    0.5 *
    var(--pot-col-gap, var(--pot-gap))
  );
  --pot-grid-two: minmax(0, var(--pot-grid-narrow)) minmax(0, 1fr);
}
.pot-grid-ratio-3-2 {
  --pot-grid-narrow: calc(
    40% -
    0.2 *
    var(--pot-gutter, 0px) -
    0.5 *
    var(--pot-col-gap, var(--pot-gap))
  );
  --pot-grid-two: minmax(0, 1fr) minmax(0, var(--pot-grid-narrow));
}
.pot-grid-reverse > * {
  direction: ltr;
}
.pot-grid-divider > * {
  padding-block: var(--pot-spacing-lg);
}
.pot-grid-divider > * + * {
  border-top: 2px solid var(--pot-divider-color);
}
/* The quote in the first divided cell fills the cell, so its attribution
 * sits at the bottom; the cells after it keep the attribution under the
 * quote (spross SectionTestimonials/VariantSideBySide.tsx:88-94, 104-107:
 * only the first half is `md:flex md:flex-col`, so `md:flex-grow` acts
 * there alone). */
.pot-grid-divider > .pot-stack:first-child > .pot-prose-quote {
  flex-grow: 1;
}
.pot-grid-narrow-sm {
  max-width: 32rem;
  margin-inline: auto;
}
/* `md` is the 36rem box of `max-w-xl px-4 sm:px-6` (spross
 * SectionSideBySide/VariantContained.tsx:55): the gutters sit inside it. */
.pot-grid-narrow-md {
  max-width: calc(36rem - 2 * var(--pot-gutter, 0px));
  margin-inline: auto;
}
.pot-grid-narrow-lg {
  max-width: 42rem;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .pot-grid-cols-2:where(:not(.pot-grid-collapse-md, .pot-grid-collapse-lg)) {
    grid-template-columns: var(--pot-grid-two);
  }
  :is(.pot-grid-cols-3, .pot-grid-cols-4):where(
      :not(.pot-grid-collapse-md, .pot-grid-collapse-lg)
    ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pot-grid-cols-auto:where(:not(.pot-grid-collapse-md, .pot-grid-collapse-lg)) {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .pot-grid-reverse:where(:not(.pot-grid-collapse-md, .pot-grid-collapse-lg)) {
    direction: rtl;
  }
  .pot-grid-divider:where(:not(.pot-grid-collapse-md, .pot-grid-collapse-lg)) > * + * {
    border-top: 0;
    border-inline-start: 1px solid var(--pot-divider-color);
    padding-inline-start: var(--pot-spacing-lg);
  }
  .pot-grid-divider:where(:not(.pot-grid-collapse-md, .pot-grid-collapse-lg)) > :not(:last-child) {
    border-inline-end: 1px solid var(--pot-divider-color);
    padding-inline-end: var(--pot-spacing-lg);
  }
}
@media (min-width: 768px) {
  .pot-grid-cols-2:where(.pot-grid-collapse-md) {
    grid-template-columns: var(--pot-grid-two);
  }
  :is(.pot-grid-cols-3, .pot-grid-cols-4):where(.pot-grid-collapse-md) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pot-grid-cols-auto:where(.pot-grid-collapse-md) {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .pot-grid-reverse:where(.pot-grid-collapse-md) {
    direction: rtl;
  }
  /* Beside the line md4 from md, lg from lg (spross VariantSideBySide.tsx:91-93,
   * `md:pr-10 lg:pr-16`, `md:pl-10 lg:pl-16`). */
  .pot-grid-divider:where(.pot-grid-collapse-md) > * + * {
    border-top: 0;
    border-inline-start: 1px solid var(--pot-divider-color);
    padding-inline-start: var(--pot-spacing-md4);
  }
  .pot-grid-divider:where(.pot-grid-collapse-md) > :not(:last-child) {
    border-inline-end: 1px solid var(--pot-divider-color);
    padding-inline-end: var(--pot-spacing-md4);
  }
}
@media (min-width: 1024px) {
  :is(.pot-grid-narrow-sm, .pot-grid-narrow-md, .pot-grid-narrow-lg) {
    max-width: none;
  }
  .pot-grid-cols-2:where(.pot-grid-collapse-lg) {
    grid-template-columns: var(--pot-grid-two);
  }
  .pot-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pot-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .pot-grid-cols-auto:where(.pot-grid-collapse-lg) {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .pot-grid-reverse:where(.pot-grid-collapse-lg) {
    direction: rtl;
  }
  .pot-grid-divider:where(.pot-grid-collapse-md) > * + * {
    padding-inline-start: var(--pot-spacing-lg);
  }
  .pot-grid-divider:where(.pot-grid-collapse-md) > :not(:last-child) {
    padding-inline-end: var(--pot-spacing-lg);
  }
  .pot-grid-divider:where(.pot-grid-collapse-lg) > * + * {
    border-top: 0;
    border-inline-start: 1px solid var(--pot-divider-color);
    padding-inline-start: var(--pot-spacing-lg);
  }
  .pot-grid-divider:where(.pot-grid-collapse-lg) > :not(:last-child) {
    border-inline-end: 1px solid var(--pot-divider-color);
    padding-inline-end: var(--pot-spacing-lg);
  }
}
.pot-maxw-sm {
  max-width: 640px;
}
/* Reading measure: 65 characters of large text (Tailwind `text-lg
 * max-w-prose`, spross SectionText.tsx:42); the container sets the large
 * text size its measure is counted in. */
.pot-maxw-prose {
  max-width: 65ch;
  font-size: var(--pot-text-lg);
}
.pot-maxw-md {
  max-width: 768px;
}
.pot-maxw-lg {
  max-width: 1024px;
}
.pot-maxw-xl {
  max-width: 1280px;
}
.pot-maxw-full {
  max-width: 100%;
}

/* A stack or container without a gap class has no gap: zero specificity, so
 * the `.pot-gap-*` classes win and a nested box never reads its parent's gap. */
:where(.pot-stack, .pot-container) {
  --pot-gap: 0px;
}
.pot-gap-none,
.pot-gap-0 {
  --pot-gap: 0px;
  gap: 0;
}
.pot-gap-sm {
  --pot-gap: var(--pot-spacing-sm);
  gap: var(--pot-gap);
}
.pot-gap-sm2 {
  --pot-gap: var(--pot-spacing-sm2);
  gap: var(--pot-gap);
}
.pot-gap-md {
  --pot-gap: var(--pot-spacing-md);
  gap: var(--pot-gap);
}
.pot-gap-lg {
  --pot-gap: var(--pot-spacing-lg);
  gap: var(--pot-gap);
}
.pot-gap-xl {
  --pot-gap: var(--pot-spacing-xl);
  gap: var(--pot-gap);
}
.pot-gap-md2 {
  --pot-gap: var(--pot-spacing-md2);
  gap: var(--pot-gap);
}
.pot-gap-md3 {
  --pot-gap: var(--pot-spacing-md3);
  gap: var(--pot-gap);
}
.pot-gap-md4 {
  --pot-gap: var(--pot-spacing-md4);
  gap: var(--pot-gap);
}
/* Grid `columnGap`: a column gap other than the row gap (Tailwind `gap-x-*`
 * beside `gap-y-*`); after the gap steps so it wins by source order. Its own
 * property, so the row gap keeps `--pot-gap`; ratio columns read it first. */
.pot-col-gap-sm {
  --pot-col-gap: var(--pot-spacing-sm);
  column-gap: var(--pot-col-gap);
}
.pot-col-gap-md {
  --pot-col-gap: var(--pot-spacing-md);
  column-gap: var(--pot-col-gap);
}
.pot-col-gap-md2 {
  --pot-col-gap: var(--pot-spacing-md2);
  column-gap: var(--pot-col-gap);
}
.pot-col-gap-md3 {
  --pot-col-gap: var(--pot-spacing-md3);
  column-gap: var(--pot-col-gap);
}
.pot-col-gap-md4 {
  --pot-col-gap: var(--pot-spacing-md4);
  column-gap: var(--pot-col-gap);
}
.pot-col-gap-lg {
  --pot-col-gap: var(--pot-spacing-lg);
  column-gap: var(--pot-col-gap);
}
.pot-col-gap-xl {
  --pot-col-gap: var(--pot-spacing-xl);
  column-gap: var(--pot-col-gap);
}

/* Stack (core.stack, ADR-0040): vertical flow of children with a gap step. */
.pot-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pot-stack-align-start {
  align-items: flex-start;
}
.pot-stack-align-center {
  align-items: center;
  text-align: center;
}
.pot-stack-align-end {
  align-items: flex-end;
  text-align: right;
}
.pot-stack-align-stretch {
  align-items: stretch;
}
/* ADR-0041: side by side, wrapping; distribution along the main axis; a
 * hairline above (feature items). */
.pot-stack-row {
  flex-direction: row;
  flex-wrap: wrap;
}
/* `row-sm`: a column below sm (640), side by side and wrapping from sm (hero
 * actions: Tailwind `flex-col sm:flex-row sm:flex-wrap`). */
@media (min-width: 640px) {
  .pot-stack-row-sm {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.pot-justify-center {
  justify-content: center;
}
.pot-justify-end {
  justify-content: flex-end;
}
.pot-justify-between {
  justify-content: space-between;
}
.pot-stack-rule-top {
  padding-top: var(--pot-spacing-md);
  border-top: 1px solid var(--pot-divider-color);
}

.pot-align-items-start {
  align-items: flex-start;
}
.pot-align-items-center {
  align-items: center;
}
.pot-align-items-end {
  align-items: flex-end;
}
.pot-align-items-stretch {
  align-items: stretch;
}

.pot-align-left {
  text-align: left;
}
.pot-align-center {
  text-align: center;
}
.pot-align-right {
  text-align: right;
}

.pot-image-wrap {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--pot-radius-md);
}
.pot-image {
  display: block;
  width: 100%;
  height: 100%;
}
.pot-image-fit-cover {
  object-fit: cover;
}
.pot-image-fit-contain {
  object-fit: contain;
}
.pot-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--pot-color-muted);
  color: var(--pot-color-muted-foreground-on-muted);
  font-size: 0.85rem;
  border: 1px dashed var(--pot-color-border);
  border-radius: var(--pot-radius-md);
}
.pot-aspect-auto {
  aspect-ratio: auto;
}
.pot-aspect-square {
  aspect-ratio: 1 / 1;
}
.pot-aspect-4-3 {
  aspect-ratio: 4 / 3;
}
.pot-aspect-16-9 {
  aspect-ratio: 16 / 9;
}
.pot-aspect-21-9 {
  aspect-ratio: 21 / 9;
}
.pot-aspect-portrait {
  aspect-ratio: 4 / 5;
}
/* A wide band of fixed height that fades into the page surface at the bottom. */
.pot-aspect-panorama {
  height: 24rem;
}
.pot-aspect-panorama .pot-image {
  object-position: center;
  -webkit-mask-image: linear-gradient(to top, transparent, var(--pot-color-background) 45%);
  mask-image: linear-gradient(to top, transparent, var(--pot-color-background) 45%);
}
.pot-image-radius-none {
  border-radius: 0;
}
.pot-image-radius-lg {
  border-radius: var(--pot-radius-lg);
}
.pot-image-radius-full {
  border-radius: 9999px;
}
/* Avatar size; not centred, so it sits at the start of a row. */
.pot-image-maxw-xs {
  max-width: 3rem;
  flex: none;
}
.pot-image-maxw-sm {
  max-width: 12rem;
  margin-inline: auto;
}
.pot-image-maxw-md {
  max-width: 36rem;
  margin-inline: auto;
}

/* Buttons (spross components/Button: -constants.ts:11-16, sizes.ts, paddings.ts,
 * theme/-utils/getButtonColor.ts:141-177). Colours switch without transition,
 * like the original; hover shades derive from the role tokens. */
.pot-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-weight: var(--pot-font-weight-medium);
  text-decoration: none;
  border-radius: var(--pot-radius-md);
  cursor: pointer;
  width: fit-content;
  /* <button class="pot-button">: drop the UA border and system font. */
  border: 2px solid transparent;
  font-family: inherit;
  line-height: 1.5;
  /* A label that wraps stays centred (spross Button `text-center`). */
  text-align: center;
}
.pot-button:focus-visible {
  outline: 2px solid var(--pot-color-brand-text);
  outline-offset: 2px;
}
.pot-button-sm {
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--pot-text-sm);
}
.pot-button-md {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-size: var(--pot-text-base);
}
.pot-button-lg {
  min-height: 3rem;
  padding: 0.625rem 1.25rem;
  font-size: var(--pot-text-lg);
}
.pot-button-primary {
  background: var(--pot-button-primary-bg);
  border-color: var(--pot-button-primary-bg);
  color: var(--pot-button-primary-fg);
}
.pot-button-primary:hover {
  background: var(--pot-button-primary-hover);
  border-color: var(--pot-button-primary-hover);
}
.pot-button-primary:active {
  background: var(--pot-button-primary-active);
  border-color: var(--pot-button-primary-active);
}
/* Outlined: brand border and brand-text label (the surface's foreground on a
 * primary surface), faint wash of the outline colour on hover. */
.pot-button-secondary {
  background: transparent;
  border-color: var(--pot-button-secondary-line);
  color: var(--pot-button-secondary-fg, var(--pot-color-brand-text));
}
.pot-button-secondary:hover {
  background: color-mix(in srgb, var(--pot-button-secondary-line) 5%, transparent);
}
.pot-button-link {
  background: transparent;
  /* No frame at all: a text link has no border box (spross Button link variant). */
  border-width: 0;
  color: var(--pot-color-muted-foreground);
  padding: 0.25rem 0.5rem;
  /* Text links at body weight (spross Footer/Menu.tsx: link variant, normal). */
  font-weight: var(--pot-font-weight-normal);
}
/* Navigation-style link (spross getButtonColor.ts:173-177): a step darker on
 * hover and press, no underline, no transition. */
.pot-button-link:hover {
  color: color-mix(in srgb, var(--pot-color-muted-foreground) 70%, var(--pot-color-foreground));
}
.pot-button-link:active {
  color: color-mix(in srgb, var(--pot-color-muted-foreground) 45%, var(--pot-color-foreground));
}
.pot-button-link:focus-visible {
  outline-offset: 0;
}

/* Text for screen readers only (a term whose icon stands in for it). */
.pot-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Icon (core.icon, ADR-0041): line icon in `currentColor`; `tile` sets it on
 * a brand square. */
.pot-icon-wrap {
  display: inline-flex;
}
.pot-icon {
  display: block;
  flex: none;
}
.pot-icon-sm {
  width: 1.25rem;
  height: 1.25rem;
}
.pot-icon-md {
  width: 1.5rem;
  height: 1.5rem;
}
.pot-icon-lg {
  width: 2rem;
  height: 2rem;
}
.pot-icon-tile {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--pot-radius-sm);
  background: var(--pot-color-primary);
}

/* Contact rows (core.contact-rows): icon 20, 4 down, value 12 beside it,
 * rows 4 apart (the imprint's contact list). */
.pot-contact-rows {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  font-size: var(--pot-text-base);
  line-height: 1.5rem;
}
.pot-contact-row {
  display: flex;
  gap: 0.75rem;
  margin: 0;
}
.pot-contact-row-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.25rem;
}

.pot-heading {
  display: block;
  margin: 0;
  font-family: var(--pot-font-display);
  /* A look may set heading weight and tracking (Humus `heading`). */
  letter-spacing: var(--pot-heading-tracking, normal);
}

.pot-list {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin: 0;
  padding-left: 1.4em;
}
.pot-list-bullet {
  list-style: disc;
}
.pot-list-numbered {
  list-style: decimal;
}
.pot-list-check {
  list-style: none;
  padding-left: 0;
}
.pot-list-check .pot-list-item::before {
  content: "✓";
  color: var(--pot-color-brand-text);
  margin-right: 0.5em;
  font-weight: 700;
}
.pot-list-sm {
  font-size: var(--pot-text-sm);
}
.pot-list-md {
  font-size: var(--pot-text-base);
}
.pot-list-lg {
  font-size: var(--pot-text-lg);
}

.pot-text {
  display: block;
  margin: 0;
  line-height: 1.6;
}
.pot-text-sm {
  font-size: var(--pot-text-sm);
}
.pot-text-md {
  font-size: var(--pot-text-base);
}
.pot-text-lg {
  font-size: var(--pot-text-lg);
}
/* Tagline above a heading: bold, uppercase, tracked (colour from the `color` prop). */
.pot-text-eyebrow {
  line-height: 1.5rem;
  font-weight: var(--pot-font-weight-bold);
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
/* The heading under a tagline sits `sm` below it whatever the column's gap
 * (the heading owns the space, like spross SectionHeading `tagline && 'mt-2'`),
 * so a pattern needs no extra stack to hold the pair. Column boxes only. */
:is(.pot-stack:not(.pot-stack-row, .pot-stack-row-sm), .pot-container)
  > .pot-text-eyebrow
  + .pot-heading {
  margin-top: calc(var(--pot-spacing-sm) - var(--pot-gap, 0px));
}
.pot-text-semibold {
  font-weight: var(--pot-font-weight-semibold);
}
/* Levels h1–h4 default to the size steps xl, lg, md, sm; a look may set a
 * step's type size and line height (Humus `headingSizes`). */
.pot-heading-h1 {
  font-size: var(--pot-heading-xl-size, var(--pot-text-4xl));
  font-weight: var(--pot-heading-weight, var(--pot-font-weight-bold));
  line-height: var(--pot-heading-xl-leading, 1.1);
}
.pot-heading-h2 {
  font-size: var(--pot-heading-lg-size, var(--pot-text-3xl));
  font-weight: var(--pot-heading-weight, var(--pot-font-weight-semibold));
  line-height: var(--pot-heading-lg-leading, 1.2);
}
.pot-heading-h3 {
  font-size: var(--pot-heading-md-size, var(--pot-text-2xl));
  font-weight: var(--pot-heading-weight, var(--pot-font-weight-semibold));
  line-height: var(--pot-heading-md-leading, 1.3);
}
.pot-heading-h4 {
  font-size: var(--pot-heading-sm-size, var(--pot-text-xl));
  font-weight: var(--pot-heading-weight, var(--pot-font-weight-semibold));
  line-height: var(--pot-heading-sm-leading, 1.4);
}
.pot-heading-h5 {
  font-size: var(--pot-text-lg);
  font-weight: var(--pot-heading-weight, var(--pot-font-weight-semibold));
  line-height: 1.4;
}
.pot-heading-h6 {
  font-size: var(--pot-text-base);
  font-weight: var(--pot-heading-weight, var(--pot-font-weight-semibold));
  line-height: 1.4;
}
/* Heading lines: each on its own line, highlighted ones in the brand text colour. */
.pot-heading-line {
  display: block;
}
.pot-heading-line-highlight {
  color: var(--pot-color-brand-text);
}
/* Heading visual size (decoupled from level, ADR-0040 / typography_axis_decoupled).
 * Declared after the level classes so an explicit size wins over the level's. */
.pot-heading-size-sm {
  font-size: var(--pot-heading-sm-size, var(--pot-text-xl));
  line-height: var(--pot-heading-sm-leading, 1.3);
}
.pot-heading-size-md {
  font-size: var(--pot-heading-md-size, var(--pot-text-2xl));
  line-height: var(--pot-heading-md-leading, 1.25);
}
.pot-heading-size-lg {
  font-size: var(--pot-heading-lg-size, var(--pot-text-3xl));
  line-height: var(--pot-heading-lg-leading, 1.2);
}
.pot-heading-size-xl {
  font-size: var(--pot-heading-xl-size, var(--pot-text-4xl));
  line-height: var(--pot-heading-xl-leading, 1.1);
}

/* Events collection blocks (core.events.list / core.events.detail, ADR-0023). */
.pot-events-empty {
  padding: var(--pot-spacing-lg);
  text-align: center;
  color: var(--pot-color-muted-foreground-on-muted);
  background: var(--pot-color-muted);
  border: 1px dashed var(--pot-color-border);
  border-radius: var(--pot-radius-md);
  font-size: var(--pot-text-sm);
}
.pot-event-card {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  align-items: flex-start;
}
.pot-event-card-media {
  width: 100%;
  overflow: hidden;
  border-radius: var(--pot-radius-md);
}
.pot-event-card-date {
  font-size: var(--pot-text-sm);
  color: var(--pot-color-muted-foreground);
}
.pot-event-card-title {
  font-family: var(--pot-font-display);
  font-size: var(--pot-text-xl);
  font-weight: var(--pot-font-weight-semibold);
  line-height: 1.3;
  margin: 0;
}
.pot-event-card-desc {
  font-size: var(--pot-text-base);
  color: var(--pot-color-foreground);
  line-height: 1.5;
  margin: 0;
}
.pot-event-card-meta {
  font-size: var(--pot-text-sm);
  font-weight: var(--pot-font-weight-medium);
  color: var(--pot-color-foreground);
}
.pot-event-dates {
  display: flex;
  flex-direction: column;
  gap: var(--pot-spacing-sm);
}
.pot-event-detail {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  align-items: flex-start;
}
.pot-event-detail-media {
  width: 100%;
  overflow: hidden;
  border-radius: var(--pot-radius-md);
}
.pot-event-subevents {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 100%;
  margin-top: var(--pot-spacing-md);
}
.pot-event-subevent {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  padding: var(--pot-spacing-sm) 0;
  border-top: 1px solid var(--pot-color-border);
}

/* Form block (core.form, ADR-0031). */
.pot-form {
  display: flex;
  flex-direction: column;
  gap: var(--pot-spacing-md);
  max-width: 32rem;
}
.pot-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  border: 0;
  padding: 0;
  margin: 0;
}
.pot-form-label {
  font-size: var(--pot-text-sm);
  font-weight: var(--pot-font-weight-medium);
  color: var(--pot-color-foreground);
}
/* Field border in muted text, not the hairline `border`: a field's boundary
 * identifies it, so it needs 3:1 (WCAG 1.4.11; the gate checks the role). */
.pot-form-input {
  font: inherit;
  color: var(--pot-color-foreground);
  background: var(--pot-color-background);
  border: 1px solid var(--pot-color-muted-foreground);
  border-radius: var(--pot-radius-md);
  padding: 0.5rem 0.7rem;
  width: 100%;
}
.pot-form-input:focus {
  outline: 2px solid var(--pot-color-brand-text);
  outline-offset: 1px;
}
.pot-form-check {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--pot-text-sm);
}
.pot-form-help {
  font-size: var(--pot-text-sm);
  color: var(--pot-color-muted-foreground);
}
.pot-form-error {
  color: var(--pot-color-brand-text);
  font-size: var(--pot-text-sm);
}
.pot-form-success {
  padding: var(--pot-spacing-md);
  border: 1px solid var(--pot-color-border);
  border-radius: var(--pot-radius-md);
  background: var(--pot-color-muted);
  color: var(--pot-color-foreground);
}

/* Jobs + Team collection blocks (ADR-0023). */
.pot-jobs-list {
  display: flex;
  flex-direction: column;
  gap: var(--pot-spacing-md);
}
.pot-jobs-list .pot-event-card {
  padding-bottom: var(--pot-spacing-md);
  border-bottom: 1px solid var(--pot-color-border);
}
.pot-team-photo {
  width: 100%;
  overflow: hidden;
  border-radius: var(--pot-radius-md);
}

/* Card surface (Container `surface: card`): fill, radius and elevation from the
 * look's card tokens; the element carries `data-bg="card"`, so text inside
 * reads in the page colours on any section surface (gate-checked). Sealed
 * cards (features.icon-card@1) reuse the class. */
.pot-surface-card {
  background: var(--pot-color-card);
  color: var(--pot-color-foreground);
  border-radius: var(--pot-radius-card);
  box-shadow: var(--pot-shadow-card);
}

/* Container decoration (ADR-0035) — card-chrome as token-driven, opt-in classes.
 * Composed onto .pot-container so any container can read as a card. */
.pot-bordered {
  border: 1px solid var(--pot-color-border);
}
.pot-shadow-sm {
  box-shadow: var(--pot-shadow-sm);
}
.pot-shadow-md {
  box-shadow: var(--pot-shadow-md);
}
.pot-shadow-lg {
  box-shadow: var(--pot-shadow-lg);
}
.pot-radius-sm {
  border-radius: var(--pot-radius-sm);
}
.pot-radius-md {
  border-radius: var(--pot-radius-md);
}
.pot-radius-lg {
  border-radius: var(--pot-radius-lg);
}
.pot-pad-sm {
  padding: var(--pot-spacing-sm);
}
.pot-pad-md {
  padding: var(--pot-spacing-md);
}
.pot-pad-lg {
  padding: var(--pot-spacing-lg);
}
.pot-pad-xl {
  padding: var(--pot-spacing-xl);
}

/* Richtext (ADR-0039) — token-driven semantic richtext output. Marks render as
 * <strong>/<em>/<u>/<s>/<code>; blocks as <p>/<h2-4>/<ul|ol>. No hardcoded
 * colors/sizes (Hard Rule #1) — everything resolves to --pot-* tokens. */
.pot-rich-paragraph {
  margin: 0 0 var(--pot-spacing-md);
  font-size: var(--pot-text-base);
  line-height: 1.65;
  color: var(--pot-color-foreground);
}
.pot-rich-paragraph:last-child {
  margin-bottom: 0;
}
.pot-rich-heading {
  font-family: var(--pot-font-display);
  margin: var(--pot-spacing-md4) 0 var(--pot-spacing-sm);
  font-weight: var(--pot-font-weight-semibold);
  line-height: 1.25;
  color: var(--pot-color-foreground);
}
.pot-rich-heading:first-child {
  margin-top: 0;
}
.pot-rich-h2 {
  font-size: var(--pot-text-2xl);
}
.pot-rich-h3 {
  font-size: var(--pot-text-xl);
}
.pot-rich-h4 {
  font-size: var(--pot-text-lg);
}
.pot-rich-list {
  margin: 0 0 var(--pot-spacing-md);
  /* Prose indent: ul pl 20 px (spross app/(website)/globals.css:63-66,
   * `.formattedHTML ul { pl-5 }` over Tailwind typography's 1.625em), li pl
   * 0.375em; the marker takes the item's colour. */
  padding-left: 1.25rem;
  font-size: var(--pot-text-base);
  line-height: 1.65;
  color: var(--pot-color-foreground);
}
/* Re-assert markers: element+class beats a reset's `ul { list-style: none }`
 * (Tailwind preflight / UA) so bullets and numbers actually render. Use the
 * longhand — Lightning CSS strips `disc` from the `list-style` shorthand as a
 * "redundant" UA default (css_gotchas), which silently kills the bullet. */
ul.pot-rich-list {
  list-style-type: disc;
  list-style-position: outside;
}
ol.pot-rich-list {
  list-style-type: decimal;
  list-style-position: outside;
}
.pot-rich-item {
  display: list-item;
  margin: 0 0 var(--pot-spacing-sm);
  padding-left: 0.375em;
}
/* Prose links (spross app/(website)/globals.css:42-49): brand text, bold, no
 * underline until hover; no transition. */
.pot-rich-link {
  color: var(--pot-color-brand-text);
  font-weight: var(--pot-font-weight-bold);
  text-decoration: none;
}
/* A word with no break opportunity (a URL as link text, a compound with a
 * slash) wraps inside its box instead of pushing the page wider than a
 * narrow phone; live sets `break-word` on its headings and body text too.
 * `break-word`, not `anywhere`: min-content sizes are unchanged. */
.pot-heading,
.pot-text,
.pot-rich-heading,
.pot-rich-paragraph,
.pot-rich-list {
  overflow-wrap: break-word;
}
.pot-rich-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pot-rich-paragraph code,
.pot-rich-list code,
.pot-rich-heading code {
  padding: 0.1em 0.35em;
  border-radius: var(--pot-radius-sm);
  background: var(--pot-color-muted);
  font-size: 0.9em;
}

/*
 * Richtext steps (core.richtext, ADR-0041): size, tone, alignment, variant.
 * Line heights follow the look's type scale (sm 20, lg/xl 28 px); paragraph
 * gaps scale with the type (prose).
 */
.pot-prose-sm :is(.pot-rich-paragraph, .pot-rich-list) {
  font-size: var(--pot-text-sm);
  line-height: 1.25rem;
}
.pot-prose-lg :is(.pot-rich-paragraph, .pot-rich-list) {
  font-size: var(--pot-text-lg);
  line-height: 1.75rem;
}
.pot-prose-xl :is(.pot-rich-paragraph, .pot-rich-list) {
  font-size: var(--pot-text-xl);
  line-height: 1.75rem;
}
:is(.pot-prose-lg, .pot-prose-xl) :is(.pot-rich-paragraph, .pot-rich-list):not(:last-child) {
  margin-bottom: 1.25em;
}
/* Relaxed leading: the `prose-lg` rhythm (line 1.7778, paragraph gap
 * 1.3333em: 32 / 24 px at 18 px) from lg text up. */
:is(.pot-prose-lg, .pot-prose-xl).pot-prose-relaxed :is(.pot-rich-paragraph, .pot-rich-list) {
  line-height: 1.7777778;
}
:is(.pot-prose-lg, .pot-prose-xl).pot-prose-relaxed
  :is(.pot-rich-paragraph, .pot-rich-list):not(:last-child) {
  margin-bottom: 1.3333333em;
}
/* Small prose keeps `prose-sm` paragraph gaps (1.1429em, 16 px; Tailwind typography). */
.pot-prose-sm :is(.pot-rich-paragraph, .pot-rich-list):not(:last-child) {
  margin-bottom: 1.1429em;
}
/* Tight leading: a 24 px line from md text up (Tailwind `leading-6`; spross
 * SectionContact -utils/getVariantSplit.ts:70-74, SectionEvents.tsx:79-81). */
.pot-prose-tight:not(.pot-prose-sm) :is(.pot-rich-paragraph, .pot-rich-list) {
  line-height: 1.5rem;
}
.pot-prose-muted :is(.pot-rich-paragraph, .pot-rich-list) {
  color: var(--pot-color-muted-foreground);
}
.pot-prose-center {
  text-align: center;
}
/* A centred lead (20 px intro) keeps a 42rem measure (spross SectionHeading.tsx:126-131
 * `max-w-2xl mx-auto` on every centred intro; SectionText intros). */
.pot-prose-xl.pot-prose-center {
  max-width: 42rem;
  margin-inline: auto;
}
/* Quote (testimonials, spross VariantSideBySide.tsx:104-107, FilledQuoteChar.tsx):
 * 16 / 1.75, medium, lines without paragraph gaps; a filled 32 px quote mark
 * at the top left behind the text: on the page surface `text-accent
 * opacity-20`, where Spross's accent is the second colour or else the brand
 * (theme/variables/colors/colors.ts:265-267) — Humus's `accent` is a tint when
 * a site has none, so the mark takes the brand; on a coloured surface the
 * page surface at 20 % (medium theme `text-white opacity-20`). */
.pot-prose-quote {
  position: relative;
  margin-top: 1.5rem;
}
.pot-prose-quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 2rem;
  transform: translate(-0.75rem, -0.5rem);
  background: var(--pot-color-primary);
  opacity: 0.2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  pointer-events: none;
}
:is([data-bg="primary"], [data-bg="accent"], [data-bg="dark"]) .pot-prose-quote::before {
  background: var(--pot-color-background);
}
/* Quote paragraphs: medium, `prose-base` gaps of 1.25em between them (live
 * 20 px at 16 px). The size steps are scoped to the quote so they win over
 * the generic richtext steps: md 16 / 1.75 (VariantSideBySide.tsx:104-107),
 * xl 24 / 36 (`text-2xl leading-9`, VariantLargeAvatar.tsx:77). */
.pot-prose-quote .pot-rich-paragraph {
  position: relative;
  margin: 0;
  font-size: var(--pot-text-base);
  font-weight: var(--pot-font-weight-medium);
  line-height: 1.75;
}
.pot-prose-quote .pot-rich-paragraph:not(:last-child) {
  margin-bottom: 1.25em;
}
.pot-prose-quote.pot-prose-sm .pot-rich-paragraph {
  font-size: var(--pot-text-sm);
  line-height: 1.25rem;
}
.pot-prose-quote.pot-prose-lg .pot-rich-paragraph {
  font-size: var(--pot-text-lg);
  line-height: 1.75rem;
}
.pot-prose-quote.pot-prose-xl .pot-rich-paragraph {
  font-size: var(--pot-text-2xl);
  line-height: 2.25rem;
}

/*
 * Section decoration (ADR-0041 closed value `decoration`): a dot field behind
 * the content, `aria-hidden`, out of flow. `.pot-deco` spans the section's
 * height and the inner's width (it carries the same `pot-maxw-*`), so bands
 * are placed against the content column like the live `max-w-7xl` box. The
 * section clips them and isolates the stack so the field sits above the
 * section background and below the content. Dots are 4 px squares on a
 * 20 px grid, drawn as a mask over a token fill.
 *
 * `dots-start` (spross SectionTestimonials/DecorativePattern.tsx): the live
 * field sits in the quote box inside the section shell's padding
 * (VariantLargeAvatar.tsx:49-51, `overflow-hidden` > `relative max-w-7xl`),
 * so its box is the section's content box, clipped top and bottom there and
 * only by the section at the sides. Below lg a 784 × 404 band from 320 px
 * into the column, its top 96 px above the box's bottom (`top-full
 * translate-x-80 -translate-y-24`); from lg a 404 × 784 band centred on the
 * column's start edge (`right-full top-1/2 translate-x-1/2 -translate-y-1/2`).
 * Brand at 50 %; on a coloured surface the page surface at full strength
 * (live `text-white` on highlighted sections).
 *
 * `dots-end` (spross SectionHero/DotPattern.tsx), from lg only: a 640 px
 * faint panel 40 px below the section top and 256 px right of the centre
 * (live `gray-50` on white: the muted text colour at 4 %), and a
 * 404 × 784 dot band 118 px into it from 32 px above the top, in the muted
 * text colour at 20 %.
 */
.pot-section-deco {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pot-deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin-inline: auto;
  pointer-events: none;
  --pot-deco-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='4' height='4'/%3E%3C/svg%3E");
}
.pot-deco::before,
.pot-deco::after {
  content: "";
  position: absolute;
}
.pot-deco-dots-start {
  top: var(--pot-section-pt, 0);
  bottom: var(--pot-section-pb, 0);
  overflow-x: visible;
  overflow-y: clip;
}
.pot-deco-dots-start::before {
  left: 320px;
  top: calc(100% - 6rem);
  width: 784px;
  height: 404px;
  background: var(--pot-color-primary);
  opacity: 0.5;
  -webkit-mask: var(--pot-deco-dots) 0 0 / 20px 20px repeat;
  mask: var(--pot-deco-dots) 0 0 / 20px 20px repeat;
}
:is([data-bg="primary"], [data-bg="accent"], [data-bg="dark"]) > .pot-deco-dots-start::before {
  background: var(--pot-color-background);
  opacity: 1;
}
@media (min-width: 1024px) {
  .pot-deco-dots-start::before {
    left: -202px;
    top: 50%;
    width: 404px;
    height: 784px;
    transform: translateY(-50%);
  }
}
@media (min-width: 1024px) {
  .pot-deco-dots-end::before {
    left: calc(50% + 256px);
    top: 40px;
    width: 640px;
    height: 640px;
    background: var(--pot-color-muted-foreground);
    opacity: 0.04;
  }
  .pot-deco-dots-end::after {
    left: calc(50% + 374px);
    top: -32px;
    width: 404px;
    height: 784px;
    background: var(--pot-color-muted-foreground);
    opacity: 0.2;
    -webkit-mask: var(--pot-deco-dots) 0 0 / 20px 20px repeat;
    mask: var(--pot-deco-dots) 0 0 / 20px 20px repeat;
  }
}

/*
 * Neutral chrome (ADR-0042): core.header, the default header of a site
 * without a pack header, and core.footer.legal, the footer policy leaf. A
 * pack's chrome presentations restyle the legal leaf in their own CSS.
 */
.pot-site-header {
  color: var(--pot-color-foreground);
  background: var(--pot-color-background);
  border-bottom: 1px solid var(--pot-color-border);
}
.pot-site-header-inner {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pot-spacing-sm) var(--pot-spacing-md);
  padding-block: var(--pot-spacing-sm);
}
.pot-site-header-brand {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.pot-site-header-logo {
  display: block;
  height: 2.5rem;
  width: auto;
}
.pot-site-header-nav,
.pot-site-header-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pot-spacing-sm);
}
.pot-site-header-links,
.pot-footer-legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pot-footer-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pot-spacing-sm);
  color: var(--pot-color-foreground);
}
.pot-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pot-spacing-sm);
}
.pot-footer-copy {
  margin: 0;
  text-align: center;
  font-size: var(--pot-text-sm);
  color: var(--pot-color-muted-foreground);
}