/* Brainspotting Online: one stylesheet.
   Look (DESIGN.md): warm paper, dark readable text, and a light birch signature as the only ornament: fine ink
   branch lines, serrated birch leaves and winged seeds that drifted down and settled. Saffron is for leaves,
   seeds and small touches only, never text. Structure and rhythm match Divergent Therapy on purpose.
   Calm: only icons and the action button move, slowly; nothing moves for people who prefer reduced motion. */

@font-face { font-family: "Source Sans 3"; src: url("assets/fonts/SourceSans3-var.woff2?v=9ef356ea") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("assets/fonts/SourceSans3-italic.woff2?v=410bdda6") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-300.woff2?v=382c36de") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-400.woff2?v=3c986c66") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --paper: #faf6ef;        /* warm paper ground */
  --paper-2: #f1ebe0;      /* footer */
  --bark: #f3ece0;         /* the one quiet surface (bands): pale birch bark */
  --ink: #151916;          /* text and birch ink: 16.5:1 on paper */
  --ink-2: #4a4540;        /* secondary text: 8.8:1 on paper, 8.1:1 on bark */
  --rust: #a14d24;         /* the logo's lettering and the button (5.4:1 on paper); no rust first letters here */
  --rust-deep: #7e3a1a;    /* links and hover (7.8:1 on paper) */
  --saffron: #e8a25c;      /* NEW soft saffron accent (to choose in preview): leaves, seeds, small touches; never text */
  --saffron-pale: #f2c995; /* lighter leaves and seed wings */
  /* more leaf colours, all from a turning birch: they sit between the saffron and the logo's rust */
  --leaf-gold: #e2b24e;
  --leaf-amber: #d9823f;
  --leaf-honey: #c99a52;
  --leaf-olive: #b4a95e;   /* a late-summer leaf just starting to turn */
  --leaf-blush: #eab98f;
  --leaf-rust: #c46a37;
  --wood: #151916;         /* branches, like the logo's black tree */
  --focus: #151916;
  --font-head: "Jost", "Century Gothic", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --head-weight: 300;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --measure: 64ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --space-section: clamp(2.25rem, 5vw, 3.75rem);   /* tightened in the UX pass: less dead space between sections */
  --wrap: 1140px;
  --edge: clamp(22px, 3vw, 40px);
  /* Hand-drawn edges (from the Intrinsic Change site), recoloured for Brainspotting Online */
  --wave-top: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C34%20C140%2C14%20260%2C44%20420%2C26%20C580%2C8%20720%2C40%20880%2C24%20C1010%2C11%201110%2C30%201200%2C18%20V60%20H0%20Z%27%2F%3E%3C%2Fsvg%3E");
  --wave-bottom: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2060%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C0%20H1200%20V36%20C1080%2C52%20980%2C22%20820%2C38%20C660%2C54%20540%2C20%20380%2C36%20C230%2C50%20110%2C24%200%2C40%20Z%27%2F%3E%3C%2Fsvg%3E");
  --ink-line: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20900%2012%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M1.0%2C5.3%20L25.9%2C5.2%20L50.9%2C5.2%20L75.8%2C5.2%20L100.8%2C5.2%20L125.7%2C5.1%20L150.7%2C5.0%20L175.6%2C5.0%20L200.6%2C4.9%20L225.5%2C4.8%20L250.4%2C4.8%20L275.4%2C4.8%20L300.3%2C4.9%20L325.3%2C5.0%20L350.2%2C5.2%20L375.2%2C5.4%20L400.1%2C5.6%20L425.1%2C5.9%20L450.0%2C6.1%20L474.9%2C6.3%20L499.9%2C6.4%20L524.8%2C6.4%20L549.8%2C6.4%20L574.7%2C6.4%20L599.7%2C6.2%20L624.6%2C6.0%20L649.6%2C5.8%20L674.5%2C5.5%20L699.4%2C5.3%20L724.4%2C5.1%20L749.3%2C5.0%20L774.3%2C5.1%20L799.2%2C5.2%20L824.2%2C5.2%20L849.1%2C5.2%20L874.1%2C5.2%20L899.0%2C5.3%20L899.0%2C5.4%20L874.1%2C5.4%20L849.1%2C5.3%20L824.2%2C5.3%20L799.2%2C5.3%20L774.3%2C5.5%20L749.3%2C5.8%20L724.4%2C6.0%20L699.4%2C6.2%20L674.5%2C6.4%20L649.6%2C6.6%20L624.6%2C6.8%20L599.7%2C7.0%20L574.7%2C7.2%20L549.8%2C7.3%20L524.8%2C7.5%20L499.9%2C7.6%20L474.9%2C7.6%20L450.0%2C7.7%20L425.1%2C7.7%20L400.1%2C7.8%20L375.2%2C7.8%20L350.2%2C7.8%20L325.3%2C7.9%20L300.3%2C7.9%20L275.4%2C7.9%20L250.4%2C7.9%20L225.5%2C7.9%20L200.6%2C7.9%20L175.6%2C7.8%20L150.7%2C7.6%20L125.7%2C7.4%20L100.8%2C7.1%20L75.8%2C6.8%20L50.9%2C6.4%20L25.9%2C6.0%20L1.0%2C5.5Z%27%20fill%3D%27%233a2a20%27%20fill-opacity%3D%270.8%27%2F%3E%3C%2Fsvg%3E");
  --ink-line-v: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M4.4%2C2%20C3.2%2C60%205.3%2C110%204%2C170%20C2.9%2C220%205.1%2C260%203.8%2C298%27%20fill%3D%27none%27%20stroke%3D%27%233a2a20%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  --brush-under: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%208%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M1.0%2C4.5%20L9.3%2C4.3%20L17.6%2C4.1%20L25.8%2C3.9%20L34.1%2C3.8%20L42.4%2C3.6%20L50.7%2C3.4%20L58.9%2C3.2%20L67.2%2C3.0%20L75.5%2C2.9%20L83.8%2C2.7%20L92.1%2C2.7%20L100.3%2C2.7%20L108.6%2C2.7%20L116.9%2C2.8%20L125.2%2C3.0%20L133.4%2C3.2%20L141.7%2C3.4%20L150.0%2C3.6%20L158.3%2C3.8%20L166.6%2C4.0%20L174.8%2C4.1%20L183.1%2C4.3%20L191.4%2C4.3%20L199.7%2C4.4%20L207.9%2C4.4%20L216.2%2C4.4%20L224.5%2C4.4%20L232.8%2C4.4%20L241.1%2C4.4%20L249.3%2C4.5%20L257.6%2C4.6%20L265.9%2C4.8%20L274.2%2C4.9%20L282.4%2C4.9%20L290.7%2C5.0%20L299.0%2C5.1%20L299.0%2C5.2%20L290.7%2C5.1%20L282.4%2C5.1%20L274.2%2C5.0%20L265.9%2C4.9%20L257.6%2C5.0%20L249.3%2C5.1%20L241.1%2C5.1%20L232.8%2C5.1%20L224.5%2C5.1%20L216.2%2C5.0%20L207.9%2C5.0%20L199.7%2C5.0%20L191.4%2C5.0%20L183.1%2C4.9%20L174.8%2C4.9%20L166.6%2C4.9%20L158.3%2C4.8%20L150.0%2C4.8%20L141.7%2C4.7%20L133.4%2C4.7%20L125.2%2C4.7%20L116.9%2C4.7%20L108.6%2C4.8%20L100.3%2C4.8%20L92.1%2C4.9%20L83.8%2C5.0%20L75.5%2C5.1%20L67.2%2C5.2%20L58.9%2C5.2%20L50.7%2C5.2%20L42.4%2C5.2%20L34.1%2C5.2%20L25.8%2C5.1%20L17.6%2C5.0%20L9.3%2C4.9%20L1.0%2C4.7Z%27%20fill%3D%27%23a14d24%27%20fill-opacity%3D%270.45%27%2F%3E%3C%2Fsvg%3E");
  --brush-under-hover: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%208%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M1.0%2C4.5%20L9.3%2C4.2%20L17.6%2C4.0%20L25.8%2C3.8%20L34.1%2C3.5%20L42.4%2C3.3%20L50.7%2C3.1%20L58.9%2C2.9%20L67.2%2C2.7%20L75.5%2C2.5%20L83.8%2C2.4%20L92.1%2C2.3%20L100.3%2C2.3%20L108.6%2C2.4%20L116.9%2C2.5%20L125.2%2C2.7%20L133.4%2C2.9%20L141.7%2C3.2%20L150.0%2C3.4%20L158.3%2C3.6%20L166.6%2C3.9%20L174.8%2C4.0%20L183.1%2C4.2%20L191.4%2C4.3%20L199.7%2C4.3%20L207.9%2C4.3%20L216.2%2C4.3%20L224.5%2C4.3%20L232.8%2C4.3%20L241.1%2C4.3%20L249.3%2C4.4%20L257.6%2C4.6%20L265.9%2C4.8%20L274.2%2C4.9%20L282.4%2C4.9%20L290.7%2C5.0%20L299.0%2C5.1%20L299.0%2C5.2%20L290.7%2C5.1%20L282.4%2C5.1%20L274.2%2C5.0%20L265.9%2C4.9%20L257.6%2C5.0%20L249.3%2C5.1%20L241.1%2C5.1%20L232.8%2C5.1%20L224.5%2C5.1%20L216.2%2C5.1%20L207.9%2C5.1%20L199.7%2C5.1%20L191.4%2C5.1%20L183.1%2C5.0%20L174.8%2C5.0%20L166.6%2C5.0%20L158.3%2C4.9%20L150.0%2C4.9%20L141.7%2C4.9%20L133.4%2C4.9%20L125.2%2C5.0%20L116.9%2C5.0%20L108.6%2C5.1%20L100.3%2C5.2%20L92.1%2C5.3%20L83.8%2C5.3%20L75.5%2C5.4%20L67.2%2C5.5%20L58.9%2C5.5%20L50.7%2C5.5%20L42.4%2C5.5%20L34.1%2C5.4%20L25.8%2C5.3%20L17.6%2C5.1%20L9.3%2C5.0%20L1.0%2C4.7Z%27%20fill%3D%27%237e3a1a%27%20fill-opacity%3D%270.85%27%2F%3E%3C%2Fsvg%3E");
  --brush-under-saffron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%208%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M1.0%2C4.5%20L9.3%2C4.3%20L17.6%2C4.1%20L25.8%2C3.9%20L34.1%2C3.8%20L42.4%2C3.6%20L50.7%2C3.4%20L58.9%2C3.2%20L67.2%2C3.0%20L75.5%2C2.9%20L83.8%2C2.7%20L92.1%2C2.7%20L100.3%2C2.7%20L108.6%2C2.7%20L116.9%2C2.8%20L125.2%2C3.0%20L133.4%2C3.2%20L141.7%2C3.4%20L150.0%2C3.6%20L158.3%2C3.8%20L166.6%2C4.0%20L174.8%2C4.1%20L183.1%2C4.3%20L191.4%2C4.3%20L199.7%2C4.4%20L207.9%2C4.4%20L216.2%2C4.4%20L224.5%2C4.4%20L232.8%2C4.4%20L241.1%2C4.4%20L249.3%2C4.5%20L257.6%2C4.6%20L265.9%2C4.8%20L274.2%2C4.9%20L282.4%2C4.9%20L290.7%2C5.0%20L299.0%2C5.1%20L299.0%2C5.2%20L290.7%2C5.1%20L282.4%2C5.1%20L274.2%2C5.0%20L265.9%2C4.9%20L257.6%2C5.0%20L249.3%2C5.1%20L241.1%2C5.1%20L232.8%2C5.1%20L224.5%2C5.1%20L216.2%2C5.0%20L207.9%2C5.0%20L199.7%2C5.0%20L191.4%2C5.0%20L183.1%2C4.9%20L174.8%2C4.9%20L166.6%2C4.9%20L158.3%2C4.8%20L150.0%2C4.8%20L141.7%2C4.7%20L133.4%2C4.7%20L125.2%2C4.7%20L116.9%2C4.7%20L108.6%2C4.8%20L100.3%2C4.8%20L92.1%2C4.9%20L83.8%2C5.0%20L75.5%2C5.1%20L67.2%2C5.2%20L58.9%2C5.2%20L50.7%2C5.2%20L42.4%2C5.2%20L34.1%2C5.2%20L25.8%2C5.1%20L17.6%2C5.0%20L9.3%2C4.9%20L1.0%2C4.7Z%27%20fill%3D%27%23e8a25c%27%20fill-opacity%3D%270.45%27%2F%3E%3C%2Fsvg%3E");
  --saffron-line: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20900%2012%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M1.0%2C5.3%20L25.9%2C5.2%20L50.9%2C5.2%20L75.8%2C5.2%20L100.8%2C5.2%20L125.7%2C5.1%20L150.7%2C5.0%20L175.6%2C5.0%20L200.6%2C4.9%20L225.5%2C4.8%20L250.4%2C4.8%20L275.4%2C4.8%20L300.3%2C4.9%20L325.3%2C5.0%20L350.2%2C5.2%20L375.2%2C5.4%20L400.1%2C5.6%20L425.1%2C5.9%20L450.0%2C6.1%20L474.9%2C6.3%20L499.9%2C6.4%20L524.8%2C6.4%20L549.8%2C6.4%20L574.7%2C6.4%20L599.7%2C6.2%20L624.6%2C6.0%20L649.6%2C5.8%20L674.5%2C5.5%20L699.4%2C5.3%20L724.4%2C5.1%20L749.3%2C5.0%20L774.3%2C5.1%20L799.2%2C5.2%20L824.2%2C5.2%20L849.1%2C5.2%20L874.1%2C5.2%20L899.0%2C5.3%20L899.0%2C5.4%20L874.1%2C5.4%20L849.1%2C5.3%20L824.2%2C5.3%20L799.2%2C5.3%20L774.3%2C5.5%20L749.3%2C5.8%20L724.4%2C6.0%20L699.4%2C6.2%20L674.5%2C6.4%20L649.6%2C6.6%20L624.6%2C6.8%20L599.7%2C7.0%20L574.7%2C7.2%20L549.8%2C7.3%20L524.8%2C7.5%20L499.9%2C7.6%20L474.9%2C7.6%20L450.0%2C7.7%20L425.1%2C7.7%20L400.1%2C7.8%20L375.2%2C7.8%20L350.2%2C7.8%20L325.3%2C7.9%20L300.3%2C7.9%20L275.4%2C7.9%20L250.4%2C7.9%20L225.5%2C7.9%20L200.6%2C7.9%20L175.6%2C7.8%20L150.7%2C7.6%20L125.7%2C7.4%20L100.8%2C7.1%20L75.8%2C6.8%20L50.9%2C6.4%20L25.9%2C6.0%20L1.0%2C5.5Z%27%20fill%3D%27%23e8a25c%27%20fill-opacity%3D%270.8%27%2F%3E%3C%2Fsvg%3E");
  --saffron-line-v: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M4.4%2C2%20C3.2%2C60%205.3%2C110%204%2C170%20C2.9%2C220%205.1%2C260%203.8%2C298%27%20fill%3D%27none%27%20stroke%3D%27%23e8a25c%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");

}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.125rem; line-height: 1.6; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-family: var(--font-head); font-weight: var(--head-weight); line-height: 1.2; color: var(--ink); margin: 0 0 0.6em; text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 1.4rem + 2.8vw, 3.3rem); letter-spacing: -0.005em; }
h2 { font-size: clamp(1.65rem, 1.3rem + 1.3vw, 2.2rem); }
h3 { font-size: 1.3rem; }
/* saffron accent: a short hand-drawn saffron stroke under each page title and section heading
   (the coloured first letter belongs to Divergent Therapy, not this site) */
.page-hero h1::after, .post-head h1::after, .hero h1::after, .section > .wrap > h2::after, .prose > h2::after, .duo-text > h2::after, .invite-text > h2::after {
  content: ""; display: block; width: min(4.4em, 45%); height: 0.42em; margin-top: 0.18em;
  background: var(--brush-under-saffron) left center / 100% 100% no-repeat;
}
.section > .wrap > h2::after, .prose > h2::after, .duo-text > h2::after, .invite-text > h2::after { width: 3.6em; height: 0.5em; }
p { margin: 0 0 1em; max-width: var(--measure); }
strong { font-weight: 700; }

a { color: var(--rust-deep); text-underline-offset: 0.22em; }
a:hover { color: var(--ink); }
/* links in running text get a hand-drawn brush underline, not a typed one */
:where(p, li, dd, figcaption, .note, .drop-a) a:not([class]) {
  text-decoration: none; padding-bottom: 0.14em;
  background: var(--brush-under-saffron) left 100% / 100% 0.36em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:where(p, li, dd, figcaption, .note, .drop-a) a:not([class]):hover { background-image: var(--brush-under-hover); }
.footer-links a, .nav-list a { background: none; padding-bottom: 0; }
a[href^="tel:"], a[href^="mailto:"]:not(.bark-btn) { white-space: nowrap; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: 0.75rem 1rem; background: #fff; color: var(--ink); font-weight: 700; border: 2px solid var(--ink); border-radius: 10px; }
.skip-link:focus { top: 1rem; }
.todo { color: var(--ink-2); font-style: italic; }

/* ---------- Header (same pattern as Divergent Therapy) ---------- */
.site-header { position: relative; z-index: 5; padding: 1rem 0 1.25rem; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; }
.brand { position: relative; display: block; text-decoration: none; border-radius: 12px; }
.brand img { height: 104px; width: auto; }   /* empty margin trimmed from the logo file so it reads larger */
/* the place line (for search) sits under the wordmark, beside the tree's roots */
.brand-tag { position: absolute; left: 36.6%; top: 67%; display: flex; flex-direction: column; font-family: var(--font-head); font-weight: 400; font-size: 0.84rem; line-height: 1.3; color: var(--ink-2); white-space: nowrap; letter-spacing: 0.01em; }
.nav-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.3rem; margin: 0; padding: 0; }
.nav-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.65rem; color: var(--ink); text-decoration: none; font-family: var(--font-head); font-weight: 400; font-size: 1.08rem; border-radius: 10px; }
.nav-list a:hover, .nav-list a[aria-current="page"] { background: var(--brush-under-saffron) center calc(100% - 6px) / calc(100% - 1.3rem) 0.36em no-repeat; }
/* Contact: plain words in rust with a rust brush stroke, like Divergent Therapy's red Contact */
.nav-contact { margin-left: 0.3rem; }
.nav-contact a, .nav-contact a[aria-current="page"] { color: var(--rust-deep); background: var(--brush-under) center calc(100% - 6px) / calc(100% - 1.3rem) 0.36em no-repeat; }
.nav-contact a:hover { color: var(--ink); background-image: var(--brush-under-hover); }
.nav-toggle { display: none; }

/* ---------- The button: a lopsided strip of birch bark in rust (barkBtn() in tools/site.cjs) ---------- */
.bark-btn {
  position: relative; isolation: isolate; display: inline-grid; place-items: center;
  min-height: 64px; padding: 0.95rem 2.4rem 1rem 2.1rem;
  color: #fffaf2; font-family: var(--font-head); font-weight: 400; font-size: 1.18rem; line-height: 1.2; letter-spacing: 0.02em; text-align: center; text-decoration: none;
}
.bark-btn > span { position: relative; z-index: 1; }
.bark-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bark { fill: var(--rust); }
.lenticels { fill: none; stroke: #5e2810; stroke-width: 2.2; stroke-linecap: round; stroke-opacity: 0.5; vector-effect: non-scaling-stroke; }
.bark-line { fill: none; stroke: var(--ink); stroke-width: 1.2px; stroke-opacity: 0.75; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.btn-seed { position: absolute; z-index: 2; right: -0.55rem; top: -0.75rem; }
.bark-btn:hover, .bark-btn:focus-visible { color: #fff; }
.bark-btn:hover .bark, .bark-btn:focus-visible .bark { fill: #7e3a1a; }
.bark-btn:focus-visible { outline-offset: 5px; border-radius: 14px 20px 12px 18px; }
@media (forced-colors: active) {
  .bark-btn { border: 2px solid ButtonText; color: ButtonText; border-radius: 12px; }
  .bark-art, .btn-seed { display: none; }
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin: 1.6rem 0 1rem; }
.next { font-size: 1rem; color: var(--ink-2); max-width: 46ch; }

/* ---------- Birch drawings (all decorative) ---------- */
.seed, .leaf { display: block; flex: none; width: var(--w, 24px); height: auto; overflow: visible; pointer-events: none; }
.branch { display: block; height: auto; overflow: visible; pointer-events: none; }
.wood { fill: var(--wood); }
.bud { fill: none; stroke: var(--wood); stroke-width: 1.8; stroke-linecap: round; }
.stem, .style { fill: none; stroke: var(--wood); stroke-width: 1.1; stroke-linecap: round; }
.dry { fill: none; stroke: var(--wood); stroke-width: 0.9; stroke-opacity: 0.4; stroke-linecap: round; }
.wash--saffron { fill: var(--saffron); }
.wash--pale { fill: var(--saffron-pale); }
.wash--rust { fill: var(--leaf-rust); }
.wash--gold { fill: var(--leaf-gold); }
.wash--amber { fill: var(--leaf-amber); }
.wash--honey { fill: var(--leaf-honey); }
.wash--olive { fill: var(--leaf-olive); }
.wash--blush { fill: var(--leaf-blush); }
/* greens, for the home page's closing branch: one colour family in several shades */
.wash--sage { fill: #a9b27c; } .wash--moss { fill: #8e9b58; } .wash--fern { fill: #bcc28a; } .wash--pine { fill: #76864a; }
/* the seed's wing is thin and papery: the colour is light and you can almost see through it */
.wing { fill: #f6e6cc; fill-opacity: 0.85; }
.wash { fill-opacity: 0.92; }
/* hand-drawn ink: contour, midrib and veins over the colour wash */
.contour, .rib, .vein { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.contour { stroke-width: 1.1px; stroke-opacity: 0.85; }
.contour--fine { stroke-width: 0.9px; }
.rib { stroke-width: 0.9px; stroke-opacity: 0.6; }
.vein { stroke-width: 0.6px; stroke-opacity: 0.38; }
.nutlet { fill: #8a4f26; stroke: var(--ink); stroke-width: 0.8px; stroke-opacity: 0.6; vector-effect: non-scaling-stroke; }
.nutlet--saffron { fill: #c27a36; } .nutlet--honey { fill: #a8722f; } .nutlet--amber { fill: #b5612b; } .nutlet--rust { fill: #8f4a24; } .nutlet--gold { fill: #b98d2c; }
.nut-shine { fill: none; stroke: #e9b98a; stroke-width: 1.2px; stroke-linecap: round; stroke-opacity: 0.75; vector-effect: non-scaling-stroke; }
.seed .vein { stroke-opacity: 0.3; }

/* seeds falling from the tree in a slight breeze: scattered through a box, each at its own angle */
.drift { position: absolute; pointer-events: none; }
.drift > span { position: absolute; left: var(--x); top: var(--y); opacity: var(--o, 1); }
/* inner pages: they fall from the title branch (top right), down and to the left beside the title */
.hero-seeds { z-index: 0; right: clamp(1rem, 4vw, 5rem); top: clamp(5rem, 9vw, 8rem); width: clamp(12rem, 32vw, 28rem); height: calc(100% - clamp(5rem, 9vw, 8rem)); }
.photo-wrap { position: relative; }
.photo-seeds { z-index: 2; left: -2.5rem; bottom: -1rem; width: 6rem; height: 7rem; }
.about-photo .photo-seeds { bottom: -1.5rem; left: auto; right: -2rem; }
/* beside a narrow text column, seeds keep falling through the open space on the right */
.has-aside-seeds { position: relative; overflow-x: clip; }
.aside-seeds { right: clamp(1rem, 6vw, 7rem); top: 2rem; width: clamp(12rem, 26vw, 22rem); height: calc(100% - 4rem); }
@media (max-width: 900px) { .aside-seeds { display: none; } }
/* home: a small, quiet branch grows in from the right under the photo, with a few seeds drifting off it */
.ways { position: relative; overflow-x: clip; }
.ways .small-branch { top: 0.4rem; width: clamp(170px, 20vw, 270px); opacity: 0.92; }
.small-branch-seeds { right: clamp(5rem, 14vw, 13rem); top: 3.2rem; width: clamp(8rem, 14vw, 13rem); height: 7rem; }

/* seed bullets: each seed at its own angle; the list sits loosely, not ruled */
.seed-list { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.seed-list li { display: flex; gap: 0.8rem; align-items: flex-start; margin: 0 0 0.65rem; max-width: var(--measure); }
.seed-list li:nth-child(even) { padding-left: 0.9rem; }
.seed-list .seed { margin-top: 0.15em; }

/* ---------- Sections ---------- */
.section { position: relative; padding: var(--space-section) 0; }
.band { position: relative; isolation: isolate; margin: var(--edge) 0; }
.band::before {
  content: ""; position: absolute; inset: calc(var(--edge) * -0.6) 0; z-index: -1; background: var(--bark);
  -webkit-mask: var(--wave-top) top / 100% var(--edge) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--edge) + 2px) no-repeat, var(--wave-bottom) bottom / 100% var(--edge) no-repeat;
          mask: var(--wave-top) top / 100% var(--edge) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--edge) + 2px) no-repeat, var(--wave-bottom) bottom / 100% var(--edge) no-repeat;
}
.lead { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); line-height: 1.6; }
.note { font-size: 0.98rem; color: var(--ink-2); }
.section-intro { color: var(--ink-2); margin-top: -0.3rem; }
.more-link { margin-top: 1.4rem; font-family: var(--font-head); font-weight: 400; font-size: 1.18rem; }
.more-link a { text-decoration: none; background: var(--brush-under) left 100% / 100% 0.36em no-repeat; padding-bottom: 0.15em; }
.more-link a:hover { background-image: var(--brush-under-hover); }
.from-blog { margin-top: 1.6rem; font-size: 0.98rem; color: var(--ink-2); }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.2rem; }
.prose > h2:first-child { margin-top: 0; }

/* ---------- Home: the opening ---------- */
.hero { position: relative; isolation: isolate; padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.hero h1 { max-width: 19ch; margin-bottom: 0.7em; }
.hero .lead { max-width: 42ch; padding-left: 1.3rem; margin-left: 0.2rem; background: var(--saffron-line-v) left top / 8px 100% no-repeat; }
.hero .actions { margin: 2rem 0 0.9rem; }
.hero-photo { position: relative; margin: 0; justify-self: center; width: min(100%, 320px); }
.portrait, .about-photo img { width: 100%; object-fit: cover; }
.hero-photo .portrait { aspect-ratio: 420 / 538; }
.hero-photo figcaption { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; margin-top: 1.3rem; text-align: center; }
.hello { font-size: 1.05rem; line-height: 1.55; margin: 0; max-width: 30ch; }
.hero-photo .more-link { margin: 0.6rem 0 0.4rem; }
.place { font-family: var(--font-head); font-weight: 400; font-size: 0.9rem; color: var(--ink-2); margin: 0.2rem 0 0; letter-spacing: 0.01em; }
/* a long, fine branch grows in from the screen's right edge along the top of a section */
.edge-branch { position: absolute; z-index: 0; top: -0.4rem; right: 0; width: clamp(260px, 38vw, 560px); }
.hero .edge-branch { top: -1.6rem; width: clamp(260px, 30vw, 460px); }
.hero .wrap, .page-hero .wrap { position: relative; z-index: 1; }

/* ways in: leaf, link and one line, staggered rather than ruled */
.loose-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 5rem); max-width: 1000px; }
.loose-list li { display: flex; gap: 1rem; align-items: flex-start; }
.loose-list li:nth-child(even) { margin-top: 1.6rem; }
.loose-list li:nth-child(3n) { padding-left: 1.2rem; }
.loose-list a { font-family: var(--font-head); font-weight: 400; font-size: 1.3rem; line-height: 1.3; text-decoration: none; background: var(--brush-under) left 100% / 100% 0.3em no-repeat; padding-bottom: 0.12em; }
.loose-list a:hover { background-image: var(--brush-under-hover); }
.loose-list p { margin: 0.35rem 0 0; color: var(--ink-2); }
.loose-list p a { font-family: var(--font-body); font-size: inherit; }

/* a quiet route on to a sister site */
.route-on { display: flex; gap: clamp(1rem, 3vw, 2rem); align-items: flex-start; max-width: 860px; }
.route-on h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
.route-leaf { margin-top: 0.4rem; }

/* ---------- Drop-downs: a leaf turns as the answer opens ---------- */
.drops { max-width: 820px; margin-top: 1rem; }
.drops details { background: var(--ink-line) top left / 100% 12px no-repeat; }
.drops details:last-child { background: var(--ink-line) top left / 100% 12px no-repeat, var(--ink-line) bottom left / 100% 12px no-repeat; }
.drops summary { display: flex; align-items: center; gap: 1.1rem; min-height: 60px; padding: 0.95rem 0.25rem; cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 400; font-size: 1.22rem; line-height: 1.35; color: var(--ink); }
.drops summary::-webkit-details-marker { display: none; }
.drops summary span { flex: 1; }
.drops summary:hover span { color: var(--rust-deep); }
.drop-leaf { width: 2.4rem; }
.drops details[open] .drop-leaf { rotate: 70deg; }
.drop-a { padding: 0 3.6rem 1.1rem 0.25rem; }
.drop-a p:last-child { margin-bottom: 0; }

/* ---------- The invitation (end of most pages) ---------- */
.invite { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; max-width: 900px; margin: 0 auto; }
.invite-branch { width: auto; height: clamp(240px, 28vw, 340px); }
.invite-text p { max-width: 42ch; }
.invite .actions { margin-bottom: 0.4rem; }
.contact-direct { margin-top: 1.2rem; padding-top: 1.1rem; background: var(--saffron-line) top left / min(100%, 560px) 12px no-repeat; }
.contact-direct p { margin-bottom: 0.45rem; }
.email-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; }
.email { font-weight: 700; font-size: 1.15rem; text-decoration: none; background: var(--brush-under) left 100% / 100% 0.36em no-repeat; padding-bottom: 0.1em; }
.contact-direct--big .email { font-size: 1.3rem; }
.copy-btn { min-height: 44px; padding: 0 0.4rem; border: 0; background: none; cursor: pointer; font: inherit; font-family: var(--font-head); font-weight: 400; font-size: 1.02rem; color: var(--rust-deep); text-decoration: underline dotted; text-underline-offset: 0.3em; }
.copy-btn:hover { color: var(--ink); }
.copy-status { font-size: 0.95rem; color: var(--ink-2); }
.reply { font-weight: 700; }

/* ---------- Inner pages ---------- */
.page-hero { position: relative; overflow-x: clip; padding: clamp(3rem, 7vw, 5rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.page-hero-text { max-width: 46rem; }
.page-hero h1 { max-width: 22ch; }
.hero-sub { font-family: var(--font-head); font-weight: 400; font-size: 1.15rem; color: var(--ink-2); margin: -0.4rem 0 1rem; }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
.page-hero--art .wrap { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); }
.page-hero-art { justify-self: center; width: 100%; max-width: 300px; }
.page-hero + .section { padding-top: clamp(1rem, 3vw, 2rem); }
.about-photo { position: relative; margin: 0; }
.about-photo img { aspect-ratio: 400 / 513; object-position: 50% 30%; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; max-width: 1060px; }
.duo-text > :last-child { margin-bottom: 0; }
.duo--top { align-items: start; }
.duo--top .duo-text { padding-top: 2rem; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); }
.two-col p { margin: 0; }
.blocks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.2rem clamp(2rem, 6vw, 5rem); max-width: 1000px; }
.blocks > div:nth-child(even) { margin-top: 2.2rem; }
.blocks h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); margin: 0.6rem 0 0.45em; }
.blocks p { margin: 0; }
.infographic { margin: 0; justify-self: center; max-width: 340px; }
.infographic img { border-radius: 14px 22px 16px 26px; box-shadow: 0 1px 3px rgba(21, 25, 22, 0.14); }
.infographic figcaption { margin-top: 0.7rem; font-size: 0.98rem; text-align: center; }
.gfe p, .gfe li { font-size: 1.02rem; }
/* the Good Faith Estimate reads in two columns on wide screens, so it doesn't leave half the page empty */
.gfe-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0.5rem clamp(2rem, 5vw, 4rem); max-width: 1060px; }
.gfe-cols .seed-list { margin-top: 0.2rem; }
@media (max-width: 900px) { .gfe-cols { grid-template-columns: minmax(0, 1fr); } }

/* contact */
.contact-main { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.contact-main .actions { margin-top: 0; }
.frame-branch { width: auto; height: 320px; }
.next-text h2 { font-size: 1.5rem; }

/* video: a muted local poster, framed by a branch; YouTube loads only after pressing play */
.video { position: relative; margin: 1.4rem 0 0; max-width: 560px; }
.video { padding-left: clamp(4.4rem, 7.5vw, 6rem); }   /* room so the branch frames the video with a clear gap */
.video-branch { position: absolute; z-index: 2; left: -0.4rem; top: -1.1rem; width: auto; height: clamp(170px, 17vw, 225px); }
.video-link { position: relative; display: block; text-decoration: none; color: var(--ink); }
/* an organic, pebble-like outline (organicFrame() in tools/site.cjs) instead of a box, kept when the video plays */
.video-frame { display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.video-frame img, .video-frame iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-play { position: absolute; left: 50%; top: 44%; translate: -50% -50%; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; background: rgba(250, 246, 239, 0.88); }
.video-play::after { content: ""; position: absolute; left: 31px; top: 25px; border-left: 17px solid var(--rust); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.video-title { display: block; margin-top: 0.7rem; font-weight: 700; }
.video-link:hover .video-title { color: var(--rust-deep); }
.video figcaption { font-size: 0.92rem; color: var(--ink-2); }

/* blog */
.post .wrap { max-width: 800px; }
.post-head { padding: clamp(2rem, 5vw, 3.5rem) 0 1rem; }
.post-head h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem); }
.post-body { overflow-wrap: anywhere; }
.post-body h2 { margin-top: 2.2rem; font-size: 1.6rem; }
.post-body img { border-radius: 14px 22px 16px 26px; margin: 1.6rem 0; }
.post-body blockquote { margin: 1.5rem 0; padding-left: 1.4rem; background: var(--ink-line-v) left top / 8px 100% no-repeat; font-style: italic; }
.post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; max-width: 760px; }
.post-list li { display: flex; gap: 1rem; align-items: flex-start; }
.post-list li:nth-child(even) { margin-left: clamp(0px, 4vw, 2.5rem); }
.post-list a { font-family: var(--font-head); font-weight: 400; font-size: 1.3rem; text-decoration: none; background: var(--brush-under) left 100% / 100% 0.3em no-repeat; }
.post-date { margin: 0.15rem 0 0; color: var(--ink-2); font-size: 0.95rem; }

/* a band that ends a page sits close to the footer instead of leaving a strip of paper between */
main:has(> .band:last-child) + .site-footer { margin-top: calc(var(--edge) * 0.2); }
main:has(> .band:last-child) > .band:last-child { margin-bottom: 0; }

/* ---------- Footer: the same three-column rhythm as the other two sites ---------- */
.site-footer { position: relative; isolation: isolate; margin-top: calc(var(--edge) + 3.5rem); padding: 3.25rem 0 1.25rem; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); }
.site-footer::before {
  content: ""; position: absolute; inset: calc(var(--edge) * -0.6) 0 0; z-index: -1; background: var(--paper-2);
  -webkit-mask: var(--wave-top) top / 100% var(--edge) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--edge) + 2px) no-repeat;
          mask: var(--wave-top) top / 100% var(--edge) no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--edge) + 2px) no-repeat;
}
.site-footer p { margin: 0 0 0.75rem; max-width: none; }
.footer-grid { display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.footer-name { font-family: var(--font-head); font-weight: 400; font-size: 1.3rem; line-height: 1.3; color: var(--ink); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-template-columns: max-content max-content; column-gap: 1.4rem; }
.footer-links a { display: inline-block; padding: 1px 0; white-space: nowrap; color: var(--rust-deep); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-contact a { color: var(--ink); }
.footer-fine { margin-top: 0.75rem; padding-top: 0.9rem; background: var(--ink-line) top left / 100% 12px no-repeat; }
.footer-fine p { margin-bottom: 0.4rem; }
.footer-fine a { color: var(--ink-2); }
.footer-fine .crisis { color: var(--ink); font-weight: 700; }
.footer-fine .crisis a { color: var(--ink); }

/* ---------- Motion: soft and slow, only on icons and the action button; none for reduced motion ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* the bark darkens slowly; its seed lifts and turns a little, as if a breath of air caught it */
  .bark { transition: fill 1.3s ease; }
  .btn-seed { transition: rotate 1.6s cubic-bezier(.3,.1,.25,1), translate 1.6s cubic-bezier(.3,.1,.25,1); }
  .bark-btn:hover .btn-seed, .bark-btn:focus-visible .btn-seed { rotate: 24deg; translate: 3px -5px; }
  /* leaf icons sway on their stalks; the invitation's branch answers its button with a slow nod */
  .loose-list .leaf, .route-leaf, .drop-leaf { transition: rotate 1.2s cubic-bezier(.3,.1,.25,1); transform-origin: 50% 50%; }
  .loose-list li:hover .leaf, .route-on:hover .route-leaf { rotate: 9deg; }
  .invite-branch { transition: rotate 2.2s cubic-bezier(.3,.1,.25,1); transform-origin: 50% 0; }
  .invite:has(.main-action:hover) .invite-branch { rotate: 1.5deg; }
}
@media (prefers-reduced-motion: no-preference) {
  /* seeds drift down and settle once, as they come into view (main.js?v=f3dcb548 adds the classes) */
  /* each seed drifts in once, down and with the breeze, turning a little as it comes; then it stays put */
  .will-settle > span { opacity: 0; translate: calc(var(--sway) * -1) -2.6rem; rotate: -35deg; }
  .is-settled > span { opacity: var(--o, 1); translate: 0 0; rotate: 0deg; transition: opacity 1.4s ease var(--d), translate 3.2s cubic-bezier(.25,.55,.3,1) var(--d), rotate 3.2s cubic-bezier(.3,.7,.3,1) var(--d); }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: max-content max-content; justify-content: start; column-gap: 4rem; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: 2rem; }
  .duo, .two-col, .blocks, .loose-list { grid-template-columns: minmax(0, 1fr); }
  .blocks > div:nth-child(n), .loose-list li:nth-child(n) { margin-top: 0; }
  .contact-main { grid-template-columns: minmax(0, 1fr); }
  .frame-branch { display: none; }
  .page-hero--art .wrap { grid-template-columns: minmax(0, 1fr); }
  .page-hero-art { order: -1; justify-self: start; max-width: 220px; }
  .edge-branch { width: 50vw; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .brand img { height: 62px; }
  .brand-tag { display: none; }
  .header-inner { flex-wrap: nowrap; }
  .site-nav { display: contents; }
  .nav-list { justify-content: flex-end; flex-wrap: nowrap; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; border: 0; cursor: pointer;
    font: inherit; font-family: var(--font-head); font-size: 1.1rem; color: var(--ink); order: 2;
    background: var(--brush-under-saffron) center calc(100% - 8px) / 80% 0.36em no-repeat;
  }
  /* collapsed: only Contact shows (one action visible, no overlay) */
  .js .nav-list:not(.is-open) li:not(.nav-contact) { display: none; }
  .js .nav-list.is-open { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; flex-direction: column; align-items: stretch; padding: 0.5rem var(--gutter) 1rem; background: var(--paper); box-shadow: 0 10px 18px -12px rgba(21, 25, 22, 0.4); }
  .js .nav-list.is-open .nav-contact { margin: 0.5rem 0 0; }
  .header-inner { position: static; }
  .invite { grid-template-columns: minmax(0, 1fr); }
  .invite-branch { display: none; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-links { grid-template-rows: none; grid-auto-flow: row; grid-template-columns: max-content; }
}
@media (max-width: 640px) {
  /* phones: the photo comes first, small, beside its caption, so it and the headline share the first screen */
  .hero { padding: 1rem 0 2rem; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .hero-photo { order: -1; justify-self: stretch; width: 100%; display: grid; grid-template-columns: min(38vw, 160px) minmax(0, 1fr); gap: 1.1rem; align-items: center; }
  .hero-photo figcaption { align-items: flex-start; text-align: left; margin: 0; }
  .hello { font-size: 0.98rem; }
  .photo-seeds { display: none; }
  .hero h1 { font-size: 2rem; }
  .hero .edge-branch { display: none; }
  .hero-seeds { right: 54vw; top: 3.2rem; width: 32vw; height: 4.4rem; }
  .hero-seeds .seed { width: calc(var(--w) * 0.62); }
  .hero-seeds > span:nth-child(n+5) { display: none; }
  .ways .small-branch { width: 38vw; top: 0; }
  .small-branch-seeds { display: none; }
  /* the title branch shrinks into the space above the title; the video branch steps aside */
  .page-hero { padding-top: 5.2rem; }
  .page-hero .edge-branch { width: 50vw; top: -0.8rem; }
  .page-hero { padding-top: 6rem; }
  .video { padding-left: 0; }
  .video-branch { display: none; }
  .drop-a { padding-right: 0.25rem; }
}
@media (max-width: 420px) {
  .brand img { height: 52px; }
}