/* ==========================================================================
   FUTURE SPROUTS — THE GROVE RECORD
   Design system for futuresproutsfl.org

   Brand authority: Future_Sprouts_Complete_Brand_Guidelines.pdf
   Type: Lora (display / editorial) + Source Sans 3 (body / functional)
   Grounds: Natural Cream #F6F1E7 (light) · Deep Forest #163A2B (dark)

   Contrast rules verified against WCAG AA and enforced by token role:
     On cream  — text may be Future Green (8.49), Deep Root (9.51),
                 Root Brown (6.31), Deep Forest (11.14).
                 Sprout Green (2.92) and Soft Sage (1.78) are NON-TEXT only.
     On forest — text may be Cream (11.14), Light Sand (9.08),
                 Light Sage (7.67), Soft Sage (6.27), Light Sprout (6.70).
     On sand   — text may be Deep Forest (7.52), Future Green (5.73),
                 Deep Root (6.42). Root Brown (4.26) is NOT permitted.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS — self-hosted variable subsets (latin + latin-ext)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/lora-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/lora-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/lora-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/lora-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/source-sans-3-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/source-sans-3-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/source-sans-3-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/source-sans-3-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Brand inks — the fixed set. Ink economy: nothing outside this list. */
  --fs-forest:      #163A2B;   /* Deep Forest   — primary dark ground */
  --fs-green:       #244D3A;   /* Future Green  — primary identity ink */
  --fs-sprout:      #6F9A43;   /* Sprout Green  — living accent, non-text on cream */
  --fs-leaf:        #587D35;   /* Deep Leaf     — supporting leaf depth (4.24:1 on cream: large text only) */
  --fs-leaf-deep:   #527331;   /* Deep Leaf, darkened — 4.84:1 on cream, safe as text at any size */
  --fs-root:        #76502D;   /* Root Brown    — soil, secondary ink */
  --fs-soil:        #5A351C;   /* Deep Root     — deepest soil */
  --fs-sage:        #A9BE96;   /* Soft Sage     — land forms, rules */
  --fs-sand:        #E2C49A;   /* Nurture Sand  — the hands tone */
  --fs-cream:       #F6F1E7;   /* Natural Cream — primary light ground */

  /* Approved dark-ground companion tints (from the dark-BG logo artwork) */
  --fs-sage-lt:     #BFD0AE;
  --fs-sprout-lt:   #A7C96B;
  --fs-leaf-lt:     #8FB85A;
  --fs-sand-lt:     #F0D8B6;
  --fs-root-lt:     #C49462;

  /* --- Band roles. Every band re-declares these; everything else reads them. */
  --band-bg:        var(--fs-cream);
  --ink:            var(--fs-green);
  --ink-soft:       var(--fs-root);
  --ink-quiet:      var(--fs-root);
  /* Sprout Green is 2.92:1 on cream — NON-TEXT ONLY (stakes, rules, fills).
     Display accent text on light grounds uses Deep Leaf (4.24:1, large text). */
  --accent:         var(--fs-leaf-deep);
  --rule:           rgba(118, 80, 45, 0.22);
  --rule-strong:    rgba(36, 77, 58, 0.42);
  --stake:          var(--fs-sprout);
  --field:          rgba(169, 190, 150, 0.20);
  --field-firm:     rgba(169, 190, 150, 0.34);
  /* Interactive boundaries must clear 3:1 non-text contrast (WCAG 1.4.11).
     0.65 over cream = 3.49:1. Do not lighten. */
  --field-edge:     rgba(36, 77, 58, 0.65);

  /* Type scale — fluid, clamped. Display ceiling stays under 6rem. */
  --t-hero:   clamp(2.55rem, 1.30rem + 4.30vw, 5.00rem);
  --t-h1:     clamp(2.30rem, 1.35rem + 3.20vw, 4.10rem);
  --t-h2:     clamp(1.85rem, 1.28rem + 1.90vw, 2.95rem);
  --t-h3:     clamp(1.32rem, 1.10rem + 0.75vw, 1.75rem);
  --t-h4:     clamp(1.10rem, 1.00rem + 0.36vw, 1.30rem);
  --t-lead:   clamp(1.10rem, 1.01rem + 0.34vw, 1.32rem);
  --t-body:   clamp(1.02rem, 0.98rem + 0.16vw, 1.12rem);
  --t-small:  0.925rem;
  --t-label:  0.735rem;

  /* Spacing — one rhythm, used everywhere */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.75rem;
  --s-8:  3.5rem;
  --s-9:  4.5rem;
  --s-10: 6rem;
  --s-11: 8rem;

  --band-y: clamp(3.75rem, 2.2rem + 6vw, 7.5rem);

  /* Measure */
  --measure:       68ch;
  --measure-tight: 56ch;

  /* Shell */
  --shell:     78rem;
  --shell-pad: clamp(1.25rem, 0.55rem + 3vw, 3.5rem);

  /* Motion */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.32, 0.72, 0.28, 1);
  --dur-fast:    180ms;
  --dur-mid:     420ms;
  --dur-slow:    900ms;

  /* Tag geometry — the signature form */
  --notch: 15px;

  --header-h: 5.75rem;
}

/* Dark band role table */
.band--forest,
.band--soil {
  --ink:         var(--fs-cream);
  --ink-soft:    var(--fs-sage);
  --ink-quiet:   var(--fs-sage);
  --accent:      var(--fs-sprout-lt);
  --rule:        rgba(246, 241, 231, 0.20);
  --rule-strong: rgba(246, 241, 231, 0.42);
  --stake:       var(--fs-sprout-lt);
  --field:       rgba(246, 241, 231, 0.07);
  --field-firm:  rgba(246, 241, 231, 0.14);
  --field-edge:  rgba(246, 241, 231, 0.55); /* 4.53:1 on Deep Forest */
}
.band--forest { --band-bg: var(--fs-forest); }
.band--soil   { --band-bg: var(--fs-soil);   --ink-soft: var(--fs-sand); --ink-quiet: var(--fs-sand); }

.band--sand {
  --band-bg:     var(--fs-sand);
  --ink:         var(--fs-forest);
  --ink-soft:    var(--fs-soil);
  --ink-quiet:   var(--fs-soil);
  --accent:      var(--fs-green);
  --rule:        rgba(90, 53, 28, 0.26);
  --rule-strong: rgba(90, 53, 28, 0.48);
  --stake:       var(--fs-green);
  --field:       rgba(90, 53, 28, 0.09);
  --field-firm:  rgba(90, 53, 28, 0.16);
  --field-edge:  rgba(22, 58, 43, 0.70);
}

/* --------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--fs-cream);
  color: var(--fs-green);
  font-family: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: oldstyle-nums proportional-nums;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', ui-serif, Georgia, 'Times New Roman', serif;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}

p { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

:where(dl, dd, dt, figure, blockquote) { margin: 0; }

/* --------------------------------------------------------------------------
   4. BROWSER SURFACES — the parts we did not draw still carry the design
   -------------------------------------------------------------------------- */

::selection {
  background: var(--fs-sand);
  color: var(--fs-soil);
}
.band--forest ::selection,
.band--soil ::selection {
  background: var(--fs-sprout-lt);
  color: var(--fs-forest);
}

html { scrollbar-color: var(--fs-sage) var(--fs-cream); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--fs-cream); }
::-webkit-scrollbar-thumb {
  background: var(--fs-sage);
  border: 3px solid var(--fs-cream);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--fs-leaf); }

:focus-visible {
  outline: 2px solid var(--fs-green);
  outline-offset: 3px;
  border-radius: 2px;
}
.band--forest :focus-visible,
.band--soil :focus-visible { outline-color: var(--fs-sprout-lt); }
.band--sand :focus-visible { outline-color: var(--fs-forest); }

:where(input, select, textarea) { caret-color: var(--fs-leaf); }

/* Prose links get a properly offset underline, not a browser default */
.prose a,
.linky {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dur-fast) var(--ease-soft),
              text-decoration-thickness var(--dur-fast) var(--ease-soft);
}
.prose a:hover,
.linky:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 200;
  transform: translateY(-160%);
  background: var(--fs-forest);
  color: var(--fs-cream);
  padding: var(--s-3) var(--s-5);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: transform var(--dur-mid) var(--ease-settle);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --------------------------------------------------------------------------
   5. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
.shell--wide { max-width: 88rem; }

.band {
  background: var(--band-bg);
  color: var(--ink);
  padding-block: var(--band-y);
  position: relative;
}
.band--tight { padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); }
.band--flush-top { padding-top: 0; }
.band--flush-bottom { padding-bottom: 0; }

/* Organic boundary between a dark band and the cream below it.
   Light as medium: the edge bows rather than cutting square. */
.band--bowed { border-radius: 0 0 clamp(2rem, 6vw, 5.5rem) clamp(2rem, 6vw, 5.5rem); }
.band--bowed-top { border-radius: clamp(2rem, 6vw, 5.5rem) clamp(2rem, 6vw, 5.5rem) 0 0; }

.stack > * + * { margin-top: var(--flow, var(--s-5)); }

.prose {
  max-width: var(--measure);
  font-size: var(--t-body);
  color: var(--ink-soft);
}
.prose > * + * { margin-top: 1.05em; }
.prose--tight { max-width: var(--measure-tight); }
.prose--ink { color: var(--ink); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   6. THE ROW HEAD — the signature. A grove wire with a stake under it.
   -------------------------------------------------------------------------- */

.row-head {
  position: relative;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-6);
  margin-bottom: var(--s-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--s-6);
  row-gap: var(--s-3);
}

/* the stake: a short vertical tick dropping from the wire at the left edge */
.row-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: var(--s-6);
  background: var(--stake);
  transform-origin: top;
}

.row-head__title {
  grid-column: 1;
  font-size: var(--t-h2);
  max-width: 22ch;
}
.row-head__title--wide { max-width: 30ch; }

.row-head__meta {
  grid-column: 2;
  justify-self: end;
  text-align: right;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding-top: 0.5em;
  max-width: 24ch;
  line-height: 1.5;
  text-wrap: balance;
}

.row-head__note {
  grid-column: 1;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--t-lead);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   7. THE TAG — the world's object. Two cut top corners; optional punched hole.
   -------------------------------------------------------------------------- */

.tag {
  position: relative;
  background: var(--field);
  clip-path: polygon(
    0 var(--notch),
    var(--notch) 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    0 100%
  );
}

.tag--holed { padding-top: var(--s-7); }
.tag--holed::after {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--band-bg);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
}

/* --------------------------------------------------------------------------
   8. FIGURES — every image is framed as a tag and paired with a record card
   -------------------------------------------------------------------------- */

.fig { margin: 0; }

.fig__frame {
  position: relative;
  overflow: hidden;
  background: var(--field-firm);
  clip-path: polygon(
    0 var(--notch),
    var(--notch) 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    0 100%
  );
}

.fig__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--field-firm);
  color: var(--ink-quiet);
  font-size: var(--t-small);
  transition: transform var(--dur-slow) var(--ease-soft);
}

.fig--45  .fig__frame { aspect-ratio: 4 / 5; }
.fig--32  .fig__frame { aspect-ratio: 3 / 2; }
.fig--11  .fig__frame { aspect-ratio: 1 / 1; }
.fig--169 .fig__frame { aspect-ratio: 16 / 9; }
.fig--219 .fig__frame { aspect-ratio: 21 / 9; }

/* the record card that travels with every image */
.fig__record {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  letter-spacing: 0.015em;
  font-weight: 600;
  color: var(--ink-quiet);
  line-height: 1.5;
  text-wrap: pretty;
}
.fig__record::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 1px;
  background: var(--stake);
  transform: translateY(-0.34em);
}

/* --------------------------------------------------------------------------
   9. BUTTONS — shaped from the tag, never a generic pill
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--fs-green);
  --btn-ink: var(--fs-cream);
  --btn-edge: var(--fs-green);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.92em 1.5em;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid var(--btn-edge);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(
    0 10px,
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% 100%,
    0 100%
  );
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn__arrow {
  flex: 0 0 auto;
  transition: transform var(--dur-mid) var(--ease-settle);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary { --btn-bg: var(--fs-green); --btn-ink: var(--fs-cream); --btn-edge: var(--fs-green); }
.btn--primary:hover { --btn-bg: var(--fs-forest); --btn-edge: var(--fs-forest); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-edge: var(--field-edge);
}
.btn--ghost:hover { --btn-bg: var(--field-firm); --btn-edge: var(--ink); }

.band--forest .btn--primary,
.band--soil .btn--primary {
  --btn-bg: var(--fs-cream);
  --btn-ink: var(--fs-forest);
  --btn-edge: var(--fs-cream);
}
.band--forest .btn--primary:hover,
.band--soil .btn--primary:hover {
  --btn-bg: var(--fs-sprout-lt);
  --btn-edge: var(--fs-sprout-lt);
  --btn-ink: var(--fs-forest);
}

.band--sand .btn--primary { --btn-bg: var(--fs-forest); --btn-edge: var(--fs-forest); --btn-ink: var(--fs-sand); }
.band--sand .btn--primary:hover { --btn-bg: var(--fs-soil); --btn-edge: var(--fs-soil); }

.btn--lg { padding: 1.05em 1.9em; font-size: 0.98rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

/* A text action that sits on the wire rather than floating */
.wire-action {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 2px solid var(--ink);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: gap var(--dur-mid) var(--ease-settle), color var(--dur-fast) var(--ease-soft);
}
.wire-action:hover { gap: var(--s-5); border-top-color: var(--fs-sprout); }

/* --------------------------------------------------------------------------
   10. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--fs-cream) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(118, 80, 45, 0.18);
  transition: box-shadow var(--dur-mid) var(--ease-soft);
}
.site-header[data-scrolled="true"] {
  box-shadow: 0 6px 26px -18px rgba(22, 58, 43, 0.55);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
  padding-block: var(--s-3);
}

.brand { display: block; flex: 0 0 auto; line-height: 0; }
.brand img {
  height: 4.25rem;
  width: auto;
  transform-origin: left center;
  transition: transform var(--dur-mid) var(--ease-soft);
}
.site-header[data-scrolled="true"] .brand img { transform: scale(0.79); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 0.3rem + 1.5vw, 2rem); }

.nav__link {
  position: relative;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fs-green);
  padding-block: var(--s-2);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-soft);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--fs-sprout);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-settle);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--fs-forest); }

.nav__cta { margin-left: var(--s-2); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--s-3);
  background: transparent;
  border: 1px solid rgba(36, 77, 58, 0.38);
  color: var(--fs-green);
  padding: 0.6rem 0.85rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.nav-toggle__bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-mid) var(--ease-settle), opacity var(--dur-fast) linear;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5.25px; }
.nav-toggle__bars span:nth-child(3) { top: 10.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--fs-forest);
  color: var(--fs-cream);
  display: flex;
  flex-direction: column;
  padding: var(--s-5) 0 var(--s-8);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition: opacity var(--dur-mid) var(--ease-soft),
              transform var(--dur-mid) var(--ease-settle),
              visibility 0s linear var(--dur-mid);
}
.nav-drawer[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header-h);
}
.nav-drawer__top img { height: 2.9rem; width: auto; }

.nav-drawer__close {
  background: transparent;
  border: 1px solid rgba(246, 241, 231, 0.4);
  color: var(--fs-cream);
  padding: 0.6rem 0.85rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.nav-drawer__list { margin-top: var(--s-7); }
.nav-drawer__list li { border-top: 1px solid rgba(246, 241, 231, 0.18); }
.nav-drawer__list li:last-child { border-bottom: 1px solid rgba(246, 241, 231, 0.18); }

.nav-drawer__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  font-family: 'Lora', ui-serif, Georgia, serif;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--fs-cream);
}
.nav-drawer__link span {
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fs-sage);
}
.nav-drawer__link[aria-current="page"] { color: var(--fs-sprout-lt); }
.nav-drawer__link[aria-current="page"] span { color: var(--fs-sprout-lt); }

.nav-drawer__foot { margin-top: var(--s-8); }

body[data-nav-open="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   11. HERO
   -------------------------------------------------------------------------- */

.hero { padding-top: clamp(3rem, 1.8rem + 4.5vw, 5.5rem); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: end;
}
/* When the figure is taller than the copy, bottom-anchoring strands the
   headline against empty ground. Centre instead. */
.hero__grid--centred { align-items: center; }

.hero__title {
  font-size: var(--t-hero);
  line-height: 1.03;
  letter-spacing: -0.028em;
  max-width: 15ch;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  color: var(--fs-sprout-lt);
}

.hero__body { max-width: 54ch; margin-top: var(--s-6); color: var(--ink-soft); font-size: var(--t-lead); line-height: 1.56; }
.hero__body > * + * { margin-top: 0.9em; }

.hero__action { margin-top: var(--s-7); }

/* the wire that closes the hero and starts the record */
.hero__wire {
  margin-top: clamp(2.75rem, 1.8rem + 3.4vw, 4.5rem);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.hero__wire span { display: inline-flex; align-items: flex-start; gap: var(--s-3); }
.hero__wire span::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-top: 0.52em;
  background: var(--stake);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   12. THE LEDGER — home's "From Seed to Table" list. Not cards.
   -------------------------------------------------------------------------- */

.ledger { border-top: 1px solid var(--rule); }

.ledger__item {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
  gap: var(--s-4) clamp(1.5rem, 0.6rem + 3vw, 3.75rem);
  padding-block: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.ledger__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 1.6rem;
  background: var(--stake);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-mid) var(--ease-settle);
}
.ledger__item:hover::before { transform: scaleY(1); }

.ledger__name {
  font-size: var(--t-h3);
  font-weight: 500;
  align-self: start;
  max-width: 18ch;
}
.ledger__text { color: var(--ink-soft); max-width: 62ch; }

/* --------------------------------------------------------------------------
   13. PROGRAM ENTRIES — alternating grove rows with fixed-field records
   -------------------------------------------------------------------------- */

.entries { display: grid; gap: clamp(3rem, 1.9rem + 4vw, 5.5rem); }

.entry {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 0.9rem + 3vw, 3.5rem);
  align-items: start;
}
.entry:nth-child(even) .entry__figure { order: 2; }

.entry__head {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-5);
  position: relative;
}
.entry__head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: var(--s-5);
  background: var(--stake);
}

.entry__title { font-size: var(--t-h3); max-width: 20ch; }
.entry__text { margin-top: var(--s-4); color: var(--ink-soft); max-width: 60ch; }

/* the fixed-cell record — same fields, same positions, every entry */
.record {
  margin-top: var(--s-6);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.record__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.record__row dt {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.record__row dd {
  font-size: var(--t-small);
  color: var(--ink);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   14. BELIEFS — asymmetric editorial pairs, not a card grid
   -------------------------------------------------------------------------- */

.beliefs { display: grid; gap: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); }

.belief {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: var(--s-4) clamp(1.5rem, 0.8rem + 2.4vw, 3rem);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-6);
  position: relative;
}
.belief::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: var(--s-6);
  background: var(--stake);
}
.belief__marker {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding-top: 0.45em;
  line-height: 1.55;
}
.belief__title { font-size: var(--t-h3); max-width: 24ch; }
.belief__text { margin-top: var(--s-4); color: var(--ink-soft); max-width: 62ch; }

/* --------------------------------------------------------------------------
   15. STATEMENT & QUOTES — Lora carrying the campaign voice
   -------------------------------------------------------------------------- */

.statement {
  font-family: 'Lora', ui-serif, Georgia, serif;
  font-size: clamp(1.6rem, 1.1rem + 2.3vw, 2.85rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.022em;
  max-width: 20ch;
  text-wrap: balance;
  color: var(--ink);
}
.statement--wide { max-width: 26ch; }
.statement--fill { max-width: 34ch; }
.statement em { font-style: italic; color: var(--accent); }

.teach-list { margin-top: var(--s-7); border-top: 1px solid var(--rule); max-width: 60ch; }
.teach-list li {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
  font-family: 'Lora', ui-serif, Georgia, serif;
  font-size: var(--t-h4);
  line-height: 1.35;
  color: var(--ink);
}

.pull {
  font-family: 'Lora', ui-serif, Georgia, serif;
  font-size: clamp(1.35rem, 1.02rem + 1.5vw, 2.1rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 24ch;
  text-wrap: balance;
}

.cadence { max-width: 40ch; }
.cadence p {
  font-family: 'Lora', ui-serif, Georgia, serif;
  font-size: var(--t-h4);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
}
.cadence p + p { margin-top: 0.45em; }
.cadence strong { font-weight: 600; color: var(--accent); font-style: italic; }

/* --------------------------------------------------------------------------
   16. SPLIT — image beside text, the workhorse composition
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3.6vw, 4.5rem);
  align-items: center;
}
.split--figure-right .split__figure { order: 2; }
.split--top { align-items: start; }
.split--wide-text { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
/* The payoff column sits level with the line that sets it up, not above it. */
.split--foot { align-items: end; }

/* --------------------------------------------------------------------------
   17. THE DEDICATION TAG — Plant a Tree. The emotional centre.
   -------------------------------------------------------------------------- */

.dedication {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(2rem, 1rem + 3.6vw, 4.5rem);
  align-items: start;
}

.dedication-tag {
  position: relative;
  background: var(--fs-cream);
  color: var(--fs-green);
  padding: var(--s-8) clamp(1.5rem, 0.9rem + 2.2vw, 2.75rem) var(--s-7);
  clip-path: polygon(0 22px, 22px 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  box-shadow: 0 18px 38px -22px rgba(0, 0, 0, 0.62);
}
.dedication-tag::after {
  content: "";
  position: absolute;
  top: 1.5rem;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--band-bg);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.dedication-tag__label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fs-root);
  text-align: center;
}

.dedication-tag__field { margin-top: var(--s-6); }
.dedication-tag__field + .dedication-tag__field { margin-top: var(--s-5); }

.dedication-tag__key {
  display: block;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-root);
  margin-bottom: var(--s-2);
}
.dedication-tag__val {
  border-bottom: 1px solid rgba(118, 80, 45, 0.35);
  padding-bottom: var(--s-2);
  min-height: 1.9rem;
  font-family: 'Lora', ui-serif, Georgia, serif;
  font-size: var(--t-h4);
  color: var(--fs-green);
}
.dedication-tag__val--muted { color: var(--fs-root); font-style: italic; font-size: var(--t-body); }

.dedication-tag__note {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(118, 80, 45, 0.24);
  font-size: var(--t-small);
  color: var(--fs-root);
  text-align: center;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   18. ACTION BLOCKS — Get Involved. Room to breathe, unmistakable buttons.
   -------------------------------------------------------------------------- */

.actions { display: grid; gap: clamp(2.75rem, 1.8rem + 3.6vw, 4.75rem); }

.action {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.75rem, 0.9rem + 3vw, 3.5rem);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-7);
  position: relative;
}
.action::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: var(--s-7);
  background: var(--stake);
}
.action:nth-child(even) .action__figure { order: 2; }

.action__title { font-size: var(--t-h2); max-width: 16ch; }
.action__text { margin-top: var(--s-4); color: var(--ink-soft); max-width: 56ch; }
.action__cta { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   19. FORMS
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--s-5); }

.field { display: grid; gap: var(--s-2); }

.field__label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.field__control {
  width: 100%;
  background: var(--band-bg);
  color: var(--ink);
  border: 1px solid var(--field-edge);
  padding: 0.85rem 1rem;
  font-size: var(--t-body);
  border-radius: 0;
  clip-path: polygon(0 10px, 10px 0, 100% 0, 100% 100%, 0 100%);
  transition: border-color var(--dur-fast) var(--ease-soft),
              background var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft);
}
.field__control::placeholder { color: var(--ink-quiet); opacity: 0.75; }
.field__control:hover { border-color: var(--ink); }
/* clip-path would clip an outline, so the ring is drawn inside — as two layers,
   so a ground-coloured gap separates it from the border instead of thickening it. */
.field__control:focus-visible {
  outline: 2px solid transparent;
  box-shadow: inset 0 0 0 2px var(--band-bg), inset 0 0 0 5px var(--ink);
}
.field__control:focus { border-color: var(--ink); }
textarea.field__control { min-height: 10.5rem; resize: none; line-height: 1.6; }

.select-wrap { position: relative; display: block; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 3rem;
  cursor: pointer;
}
.select-wrap__icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ink-quiet);
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-2);
}
.form__note { font-size: var(--t-small); color: var(--ink-quiet); max-width: 42ch; line-height: 1.5; }

.form-status {
  display: none;
  border: 1px solid var(--field-edge);
  background: var(--field);
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-small);
  color: var(--ink);
  line-height: 1.55;
}
.form-status[data-visible="true"] { display: block; }

.field__error {
  font-size: var(--t-small);
  color: var(--fs-soil);
  font-weight: 600;
  display: none;
}
.field[data-invalid="true"] .field__error { display: block; }
.field[data-invalid="true"] .field__control { border-color: var(--fs-soil); border-width: 2px; }

/* --------------------------------------------------------------------------
   20. CONTACT DETAILS
   -------------------------------------------------------------------------- */

.details { border-top: 1px solid var(--rule); }
.details__row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.details__row dt {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.details__row dd { color: var(--ink); }

.placeholder {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--field-firm);
  border: 1px dashed var(--field-edge);
  padding: 0.2rem 0.6rem;
  font-size: var(--t-small);
  font-style: italic;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--fs-forest);
  color: var(--fs-cream);
  --ink: var(--fs-cream);
  --ink-soft: var(--fs-sage);
  --ink-quiet: var(--fs-sage);
  --rule: rgba(246, 241, 231, 0.2);
  --accent: var(--fs-sprout-lt);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--s-7);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--rule);
}

.site-footer__brand img { height: clamp(5.5rem, 4.4rem + 3vw, 7.5rem); width: auto; }
.site-footer__tag {
  margin-top: var(--s-5);
  font-family: 'Lora', ui-serif, Georgia, serif;
  font-size: var(--t-h4);
  line-height: 1.4;
  color: var(--fs-cream);
  max-width: 24ch;
}
.site-footer__where { margin-top: var(--s-5); color: var(--fs-sage); font-size: var(--t-small); line-height: 1.6; }

.footer-col__head {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fs-sage);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-4);
}
.footer-col li + li { margin-top: var(--s-3); }
.footer-col a {
  text-decoration: none;
  font-size: var(--t-small);
  color: var(--fs-cream);
  transition: color var(--dur-fast) var(--ease-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.footer-col a:hover { color: var(--fs-sprout-lt); }

.site-footer__base {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  font-size: var(--t-small);
  color: var(--fs-sage);
}
.site-footer__base a { color: var(--fs-sage); }

.social {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--rule);
  color: var(--fs-cream);
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}
.social a:hover {
  background: var(--fs-sprout-lt);
  border-color: var(--fs-sprout-lt);
  color: var(--fs-forest);
}

/* --------------------------------------------------------------------------
   22. UTILITIES
   -------------------------------------------------------------------------- */

.u-center { text-align: center; }
.u-mt-6 { margin-top: var(--s-6); }
.u-mt-7 { margin-top: var(--s-7); }
.u-mt-8 { margin-top: var(--s-8); }
.u-mt-9 { margin-top: var(--s-9); }

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

.centered-close { max-width: 46rem; margin-inline: auto; text-align: center; }
.centered-close .statement,
.centered-close .prose,
.centered-close .lead { margin-inline: auto; }
.centered-close .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   23. MOTION — one authored moment: the row wire draws, and its content settles.
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms var(--ease-soft), transform 900ms var(--ease-settle);
  }
  [data-reveal][data-shown="true"] {
    opacity: 1;
    transform: none;
  }
  [data-reveal] { transition-delay: var(--reveal-delay, 0ms); }

  /* the wire itself draws in from the left — the grove being planted */
  .row-head,
  .entry__head,
  .belief,
  .action,
  .ledger { position: relative; }

  .row-head[data-reveal]::after,
  .entry__head[data-reveal]::after,
  .belief[data-reveal]::after,
  .action[data-reveal]::after {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    height: 1px;
    width: 100%;
    background: var(--band-bg);
    transform-origin: right;
    transform: scaleX(1);
    transition: transform 1100ms var(--ease-settle);
  }
  .row-head[data-shown="true"]::after,
  .entry__head[data-shown="true"]::after,
  .belief[data-shown="true"]::after,
  .action[data-shown="true"]::after { transform: scaleX(0); }

  .row-head[data-reveal]::before,
  .entry__head[data-reveal]::before,
  .belief[data-reveal]::before,
  .action[data-reveal]::before { transform: scaleY(0); transform-origin: top; transition: transform 620ms var(--ease-settle) 380ms; }
  .row-head[data-shown="true"]::before,
  .entry__head[data-shown="true"]::before,
  .belief[data-shown="true"]::before,
  .action[data-shown="true"]::before { transform: scaleY(1); }

  /* the tag's one behaviour: nudged, it swings a little on its tie */
  .fig--swing .fig__frame {
    transform-origin: top center;
    transition: transform var(--dur-slow) var(--ease-settle);
  }
  .fig--swing:hover .fig__frame { transform: rotate(-0.55deg); }
  .fig--swing:hover .fig__frame img { transform: scale(1.028); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   24. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  :root { --header-h: 5rem; }

  .nav { display: none; }
  .nav-toggle { display: inline-flex; }

  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .hero__figure { max-width: 26rem; }

  .split,
  .dedication,
  .entry,
  .action { grid-template-columns: minmax(0, 1fr); }

  .split--figure-right .split__figure,
  .entry:nth-child(even) .entry__figure,
  .action:nth-child(even) .action__figure { order: -1; }
  /* The tag is an answer to the offer — it follows the copy, never leads it. */
  .dedication__figure { order: 2; margin-top: var(--s-6); }

  .entry__figure,
  .action__figure,
  .split__figure { max-width: 30rem; }

  .dedication__figure { max-width: 26rem; }

  .ledger__item { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .ledger__name { max-width: none; }

  .belief { grid-template-columns: minmax(0, 1fr); }
  .belief__marker { padding-top: 0; }
}

@media (max-width: 640px) {
  :root { --notch: 11px; }

  .row-head { grid-template-columns: minmax(0, 1fr); }
  .row-head__title { grid-row: 1; }
  .row-head__meta {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
    padding-top: 0;
    max-width: none;
  }
  .row-head__note { grid-row: 3; }

  .record__row,
  .details__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }

  .hero__wire { gap: var(--s-3); }

  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }

  .btn { width: 100%; justify-content: space-between; }
  .btn-row { gap: var(--s-3); }
  .btn-row .btn { width: 100%; }

  .entry__figure,
  .action__figure,
  .split__figure,
  .hero__figure,
  .dedication__figure { max-width: none; }
}

@media (max-width: 420px) {
  .nav-drawer__link { font-size: 1.4rem; }
  .brand img { height: 3.1rem; }
}

@media print {
  .site-header, .nav-drawer, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   25. THE CIRCLE RUN — the nine stages laid along one wire (founder page)
   -------------------------------------------------------------------------- */

.circle-run {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--rule);
  counter-reset: none;
}
.circle-run li {
  position: relative;
  flex: 1 1 auto;
  min-width: 6.5rem;
  padding: var(--s-5) var(--s-4) var(--s-4) 0;
  font-family: 'Lora', ui-serif, Georgia, serif;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.45rem);
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}
.circle-run li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: var(--s-5);
  background: var(--stake);
}
.circle-run li:not(:first-child) { padding-left: var(--s-4); }

@media (max-width: 640px) {
  .circle-run li { min-width: 45%; font-size: 1.05rem; }
}

/* --------------------------------------------------------------------------
   26. SIGNATURE
   -------------------------------------------------------------------------- */

.signature {
  font-family: 'Lora', ui-serif, Georgia, serif;
  font-size: var(--t-h4);
  font-style: italic;
  color: var(--ink);
  line-height: 1.6;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-5);
  max-width: 26rem;
}
.signature span {
  font-family: 'Source Sans 3', sans-serif;
  font-style: normal;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* Emphasis inside Daniela's own prose keeps her voice without shouting */
.prose strong { font-weight: 600; color: var(--ink); }
.prose em { font-style: italic; }

/* --------------------------------------------------------------------------
   27. JUMP LIST — the six ways, addressable from the first viewport
   -------------------------------------------------------------------------- */

.jump { align-self: end; }

.jump__head {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}

.jump ul { margin-top: 0; }
.jump li { border-bottom: 1px solid var(--rule); }

.jump a {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0 var(--s-4) var(--s-4);
  font-family: 'Lora', ui-serif, Georgia, serif;
  font-size: var(--t-h4);
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur-mid) var(--ease-settle);
}
.jump a::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--s-4);
  width: 2px;
  height: 1.15rem;
  background: var(--stake);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-mid) var(--ease-settle);
}
.jump a:hover { transform: translateX(6px); }
.jump a:hover::before,
.jump a:focus-visible::before { transform: scaleY(1); }

/* Always-visible arrow: the row must read as an action on touch too. */
.jump__go {
  flex: 0 0 auto;
  color: var(--ink-quiet);
  transition: transform var(--dur-mid) var(--ease-settle), color var(--dur-fast) var(--ease-soft);
}
.jump a:hover .jump__go { transform: translateX(3px); color: var(--ink); }

@media (max-width: 960px) {
  .jump { align-self: start; }
}

/* --------------------------------------------------------------------------
   28. RESPONSIVE COR­RECTIONS — finish review
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  /* A small all-caps label directly above a heading is a kicker, which the
     craft floor bans outright. Below the heading it stays a record field. */
  .belief > div { order: 1; }
  .belief__marker {
    order: 2;
    padding-top: var(--s-4);
    margin-top: var(--s-2);
    border-top: 1px solid var(--rule);
  }
}

/* Record labels wrap on their own measure. No hardcoded <br>: hiding one
   concatenates the halves ("ONE TREEYEARS OF GROWTH"). */
.belief__marker { text-wrap: balance; }

/* --------------------------------------------------------------------------
   29. THE TENURE — a working life, filed. Founder page.
   The programme record scaled up to page level: same fixed left column, same
   hairlines. Deliberately no per-row stake — the stake stays a heading device,
   and six of them stacked would read as decoration.
   -------------------------------------------------------------------------- */

.tenure { border-top: 1px solid var(--rule-strong); }

.tenure__row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--s-2) clamp(1.25rem, 0.5rem + 2.5vw, 3.25rem);
  align-items: baseline;
  padding-block: clamp(1.15rem, 0.85rem + 1.1vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
}

.tenure__when {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  line-height: 1.5;
  text-wrap: balance;
}

.tenure__what {
  font-family: 'Lora', ui-serif, Georgia, serif;
  font-size: var(--t-h4);
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}

.tenure__note {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
}

@media (max-width: 960px) {
  .tenure__row { grid-template-columns: 9rem minmax(0, 1fr); }
  .tenure__when { grid-row: span 2; }
}

@media (max-width: 640px) {
  .tenure__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .tenure__when { grid-row: auto; }
}