/* Organic design system tokens + components */
/* Organic — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Caprasimo:wght@400&family=Figtree:wght@400;600;700&display=swap');

:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.washed{filter:saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — rounded frame: everything softens, small controls go pill — */
.card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); }
.btn, .tag, .seg, .input { border-radius: 999px; }
.input { padding-inline: 14px; }



/* Sunblossom Pharm page styles */

/* Template scaffolding — page layout and web-scale sizing only; every color,
   font, radius and shadow comes from ../../styles.css. The voice is the
   deck's, re-derived for a scrolling page: warm and a little playful —
   Caprasimo headings over Figtree, soft circles as marks (dot markers, a
   decoration circle), over-rounded containers, whitespace over rules (the
   system avoids .hr; sections part on air), photographs washed so they
   sit back into the cream page.

   THE RHYTHM: a 28px leading unit (17px Figtree body at ~1.65), 14px
   half-step; line-heights and block margins in unit multiples, heads
   cap-trimmed, ?baselines/B to review. The deck's seat-pinning relaxes to
   per-block discipline on a fluid page. The system's own interface
   components keep their styles.css leading.

   THE LANDING LAWS (shared by all six systems' landing templates):
   #1 display headers break per sentence (.line spans); #2 the landing
   advertises an invented product played straight — organic's is Little
   Acre, a monthly seed-box subscription, written like a letter from a
   slightly muddy friend; #3 spacing is cluster-scoped (display leading
   ratio-governed ≈1.08 — the display-block lattice exemption — tight
   single-unit gaps inside a cluster, the air between sections); #4 no
   hero eyebrow — the nav brand names the product.

   Optical left alignment: the deck's measured Caprasimo value carries
   verbatim (-0.028em where caps lead a display line). */
:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;

  /* Brand retint: berry-blue takes the accent role in place of terracotta;
     sage stays the second accent (already reads as green/herbal). Same
     OKLCH-ramp structure and steps as the base system, new hue only. */
  --color-accent: #4a6fa5;
  --color-accent-100: #eef3fb;
  --color-accent-200: #d9e6f5;
  --color-accent-300: #b7cee9;
  --color-accent-400: #8fadd6;
  --color-accent-500: #6688bb;
  --color-accent-600: #4a6fa5;
  --color-accent-700: #35507d;
  --color-accent-800: #253a5c;
  --color-accent-900: #182740;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; overflow-x: clip; } /* the hero's decoration
   circle deliberately rises past the page edge — clip (not hidden: no new
   scroll container) keeps it from widening the page, the way a slide edge
   clips the deck's divider circle */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
/* the component demo pads the masthead with its own spacing; on the page the
   masthead's contents take the page gutter and sit on the wrap's text axis
   (padding-only — full-width paint such as a masthead rule is untouched) */
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
@media (max-width: 480px) { .nav a { display: none; } } /* phone width: the nav
   keeps brand + the one action (layout-only — the component's look is untouched) */

/* — kicker (Figtree label; terracotta small text takes the DEEP step:
   accent-700 measures 5.7:1 on the cream, where the base terracotta is a
   3.0:1 large-text value) — */
.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* — hero (the blueberry photo full and large, the first thing on the
   page — washed per the system's photography rule, with a scrim so the
   headline reads over it; text reversed onto the cream-ground token,
   not invented white) — */
.hero { position: relative; overflow: hidden; margin-top: var(--half);
  border-radius: calc(2 * var(--radius-lg));
  min-height: clamp(480px, 78vh, 760px);
  display: flex; align-items: flex-end;
  padding: calc(2.5 * var(--leading)) clamp(24px, 5vw, 64px) calc(2.5 * var(--leading)); }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; }
.hero-scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--color-text) 70%, transparent) 0%,
    color-mix(in srgb, var(--color-text) 18%, transparent) 55%,
    transparent 85%); }
.hero-content { position: relative; z-index: 2; max-width: var(--measure); }

.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 5.8vw, 76px);
  line-height: clamp(43px, 6.26vw, 82px); /* law #3: ratio-governed ≈1.08 —
     Caprasimo's chunky rounds; the display-block lattice exemption */
  letter-spacing: 0; margin: 0;
  margin-left: -0.028em; /* optical left alignment — the deck's measured Caprasimo value */
  text-box: trim-both cap alphabetic;
  color: var(--color-bg);
}
.display .line { display: block; } /* law #1 */
.hero .sub { font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic;
  color: color-mix(in srgb, var(--color-bg) 92%, transparent); }
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }
/* the ghost/secondary button is tuned for the cream ground — over the photo it
   needs its own on-image treatment: a translucent cream fill with dark text
   reads at every point on the photo, unlike a near-invisible outline */
.hero-content .btn-secondary { background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  color: var(--color-text); border-color: transparent; }
.hero-content .btn-secondary:hover { background: var(--color-bg); }
.hero-content .btn-secondary:active { background: color-mix(in srgb, var(--color-bg) 80%, transparent); }
@media (max-width: 720px) { .hero { border-radius: var(--radius-lg); } }

/* — the seed bed (this system diverges from the shared stat-row chassis
   here): where the chassis set four numerals on one row, Little Acre
   plants them — four soft tinted circles of different sizes, staggered
   and overlapping like seeds thrown rather than sown in rows, the
   biggest rising past the section's top boundary into the hero's air.
   This is the system's own grammar doing structural work: the bouba
   shapes the readme asks for ("soft circles and blobs", tinted fills
   from the light ramp steps) stop decorating the grid and start
   breaking it. Both accents carry fills (terracotta and sage tints);
   3,400 keeps its sage voice from the old row. Whitespace still parts
   everything — the shapes only overlap each other, at corners, and the
   rise crosses into air, never into copy.

   Inside a circle the content centers: a round has no flush axis, so
   the landing's left alignment stays the SECTION grammar while the
   circle interiors follow the button-label precedent (centered within
   the shape). The optical left comp is a flush-axis device and does
   not apply. Numerals keep proportional figures (display figures — the
   deck's policy) at the old row's scale; labels keep the 13px stat
   grammar with inks re-measured per tinted ground (each annotated at
   its rule). Rhythm: numeral and label line-heights stay on the 28/14
   lattice; the circles themselves are display blocks under the
   display-block exemption — their staggers are deliberate, sized in
   half-step multiples of the lattice. — */
.bed { position: relative; padding: calc(1.5 * var(--leading)) 0 calc(2.5 * var(--leading));
  min-height: calc(17 * var(--leading)); }
.seed { position: absolute; border-radius: 50%; aspect-ratio: 1;
  display: grid; place-content: center; text-align: center;
  padding: var(--leading); box-sizing: border-box; }
.seed-a { width: 240px; left: 64px; top: calc(2.5 * var(--leading));
  background: var(--color-accent-100); }
.seed-b { width: 190px; left: 208px; top: calc(9 * var(--leading));
  background: var(--color-accent-200); } /* corner-overlaps seed-a (18px deep
     by the circle math, not the boxes') — later in the bed, so it plants
     on top */
.seed-c { width: 310px; right: 96px; top: calc(-3.5 * var(--leading));
  background: var(--color-accent-2-300); } /* the big one rises past the
     section's top: its crest enters the hero CTA row's horizontal band —
     air, never copy: bounding-box gap 305→417px across the band, settling
     ≈403 at full width (drawn-edge cream 396→508, ≈494 at full width);
     the body's
     overflow-x: clip owns the page edges. One tint step past the hero's
     sage-200 decoration circle (1.23:1 vs the deco's 1.02:1 whisper on
     cream — measured), so the data seed quietly outranks the ornament */
.seed-d { width: 175px; right: 321px; top: calc(4.5 * var(--leading));
  background: var(--color-accent-2-100); } /* overlaps seed-c from the
     LOWER-LEFT (20.5px deep) — the two pairs throw in different directions,
     and the seed bridges the bed's middle, one arc instead of two
     mirrored islands. Right-anchored like seed-c so the pair's geometry
     holds at every stage width */
.seed .stat-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.4vw, 48px); line-height: calc(2 * var(--leading));
  margin: 0; text-box: trim-both cap alphabetic; /* display figures stay
     proportional — the deck's figure policy; no optical margin-left: the
     comp is a flush-axis device and a centered round has no axis */ }
.seed-a .stat-num, .seed-b .stat-num { color: var(--color-accent-700); } /* terracotta's
     deep step on its own tints: 6.2:1 on the 100, 5.5:1 on the 200 —
     measured; the base terracotta's 3.0:1 is a cream-ground value */
.seed-d .stat-num { color: var(--color-accent-2-700); } /* sage's deep step
     on its own 100 tint: 6.0:1 — measured */
.seed-c .stat-num { color: var(--color-accent-2-800); } /* the 300 tint needs
     the deeper step: 6.7:1 measured, where the 700 reads 4.4:1 — a
     large-text value only; 3,400 keeps the sage voice it had in the old row */
.seed .stat-label { font-size: 13px; line-height: var(--half); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); /* 70% ink
     re-measured per tinted ground: 5.8:1 / 5.5:1 on the terracotta 100/200,
     5.9:1 on the sage 100, 5.1:1 on the sage 300 — all past the 4.5
     small-text bar */
  margin: var(--half) 0 0; max-width: 17ch;
  text-wrap: balance; /* even rag inside a round — "boxes a year, in season"
     breaks as two weighed lines, not a word on a cliff */ }

/* — feature rows (the deck's dot grammar: a drawn terracotta circle at
   marker scale hangs at each feature — soft shapes, no rules, no cards;
   whitespace parts the rows) — */
.features { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.feature { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px); align-items: baseline;
  padding: calc(1.25 * var(--leading)) 0; }
.f-title { position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: var(--leading);
  margin: 0; text-box: trim-both cap alphabetic; }
.f-title::before { content: ""; position: absolute; left: -36px; top: calc(0.5cap - 9px);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-accent); } /* the dot, hanging left of the title's
     axis; at narrow widths the gutter folds it away */
@media (max-width: 1280px) { .f-title::before { display: none; } }
.f-copy { font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 52ch; text-box: trim-both cap alphabetic; }

/* — imagery split (the washed photograph in an over-rounded frame — the
   system's big radius carried past the token's card scale, the "soft
   containers" direction; the wrapper carries the wash) — */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
.split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading));
  margin: 0; text-box: trim-both cap alphabetic; }
.split-copy .note { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch; text-box: trim-both cap alphabetic; }
.split-figure { margin: 0; width: min(400px, 100%); justify-self: end;
  border-radius: calc(2 * var(--radius-lg)); overflow: hidden; } /* over-rounded:
     the 16px token grown to container scale, the system's signature move;
     explicit width — the slot sizes from the figure, so the figure cannot
     size from the slot */
.split-figure img { width: 100%; aspect-ratio: 493 / 668; }

/* — brand mark (icon: a leaf over a thrown cluster of three blueberries,
   the two accents together — shown alone, in lockup, and reversed on a
   tinted tile, the way a brand sheet presents a mark) — */
.brand-mark { padding: calc(2 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.mark-row { display: flex; gap: clamp(16px, 3vw, 28px); flex-wrap: wrap; margin-top: var(--leading); }
.mark-tile { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--leading) clamp(20px, 3vw, 32px); border-radius: var(--radius-lg);
  background: var(--color-surface); }
.mark-tile--tint { background: var(--color-accent-600); }
.mark-tile .wordmark { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; color: var(--color-text); text-box: trim-both cap alphabetic; }
.mark-tile--tint .wordmark { color: var(--color-bg); }
.mark-tile--icon svg { width: 72px; height: 72px; }
.mark-tile--lockup svg, .mark-tile--tint svg { width: 40px; height: 40px; }

/* — gallery (washed photos in a simple 3-up grid — the same over-rounded
   frame as the split figure, repeated) — */
.gallery { padding: calc(1.5 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 28px); margin-top: var(--leading); }
.gallery-grid figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; }
@media (max-width: 720px) { .gallery-grid { grid-template-columns: 1fr; } }

/* — the rounded patch (the close): a sage-TINTED panel at the light step —
   a tinted fill, not a saturated flood — over-rounded, the system's one
   big soft shape on the page; ink keeps 15.4:1 on the tint — */
.close { padding: 0 0 calc(2 * var(--leading)); }
.patch { background: var(--color-accent-2-100);
  border-radius: calc(2 * var(--radius-lg));
  padding: calc(2 * var(--leading)) clamp(24px, 4vw, 64px); }
.patch h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.patch .sub { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: var(--measure); text-box: trim-both cap alphabetic; }
.signup { display: flex; gap: var(--space-3); align-items: stretch; flex-wrap: wrap;
  max-width: 620px; margin-top: var(--leading); }
.signup .input { flex: 1 1 200px; }
.signup .input, .signup .btn { min-height: 36px; } /* one control height floor; the row
  stretches, so whichever of the pair is taller sets both and they read as one row */
footer { padding: calc(2 * var(--leading)) 0; font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); /* 70% ink on
     the cream ground: 5.6:1 measured */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.footer-social { display: inline-flex; align-items: center; gap: 6px;
  color: inherit; text-decoration: none; font-weight: 600; }
.footer-social:hover, .footer-social:focus-visible { color: var(--color-accent); text-decoration: underline; }

/* — responsive collapse — */
@media (max-width: 1080px) {
  /* the constellation needs about 960px of stage (seed-d bridges the
     middle, so the arc compresses before anything else) — below that the
     bed re-plants as a staggered two-up cluster: circles leave the
     absolute constellation (no overlaps here — soft shapes need air) but
     keep the thrown look through alternating single-unit drops. The
     min() cap pins every circle inside its own column, so the pair can
     never close the gutter from either side, at any width */
  .bed { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--leading) var(--half); justify-items: center;
    padding-bottom: calc(3.5 * var(--leading)); /* the dropped pair's
     extra unit stays inside the section's air */ }
  .seed { position: static; width: min(clamp(160px, 44vw, 240px), 100%); }
  .seed-c { width: min(clamp(180px, 50vw, 280px), 100%); } /* the biggest
     number keeps its mass where the columns have room (the 600-1080
     band); at phone widths the shared column cap levels the family */
  .seed-b, .seed-d { transform: translateY(var(--leading)); }
}
@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; gap: var(--half); }
  .f-copy { max-width: var(--measure); }
}
@media (max-width: 720px) {
  .hero { padding-top: calc(2.5 * var(--leading)); }
  .hero::before { width: 280px; height: 280px; top: -160px; }
  .split { grid-template-columns: 1fr; }
  .split-figure { order: -1; justify-self: start; }
}
@media (max-width: 389px) {
  /* two-up runs out of room below 390: the column cap shrinks the circles
     faster than the type inside them, and the glyph-to-boundary margin
     decays through the 380s (measured: seed-c 18px at 385 down to 7px at
     361) — so the bed becomes a single staggered column, seeds
     alternating off the axis like a garden path. The handoff at 390 also
     absorbs the size step where the biggest column circle would
     otherwise jump ~50% larger crossing down in width (+35% for the
     other three) */
  .bed { grid-template-columns: 1fr; gap: var(--leading); }
  .seed { width: clamp(160px, 56vw, 220px); }
  .seed-c { width: clamp(180px, 62vw, 240px); }
  .seed-a, .seed-c { justify-self: start; }
  .seed-b, .seed-d { transform: none; justify-self: end; }
}

/* Review aid: the 28px rhythm drawn as hairlines — debug chrome, toggled by
   ?baselines or the B key, never part of the look. */
body[data-baselines] { position: relative; }
body[data-baselines]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--color-accent) 35%, transparent) 0 1px,
      transparent 1px var(--leading)),
    repeating-linear-gradient(to bottom,
      transparent 0 var(--half),
      color-mix(in srgb, var(--color-accent) 16%, transparent) var(--half) calc(var(--half) + 1px),
      transparent calc(var(--half) + 1px) var(--leading));
}

/* deploy: images fill their frames */
.hero-bg img, .split-figure img, .gallery-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-grid img { aspect-ratio: 4 / 5; }
@media (max-width: 720px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }