/* fraunces-latin-400-normal */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/fraunces-latin-400-normal.6IfK1voy.woff2) format('woff2'), url(/_astro/fraunces-latin-400-normal.NUPT2cO8.woff) format('woff');
}/* fraunces-latin-400-italic */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/fraunces-latin-400-italic.ChpO6tcr.woff2) format('woff2'), url(/_astro/fraunces-latin-400-italic.B7iDoVhm.woff) format('woff');
}/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/inter-latin-400-normal.C38fXH4l.woff2) format('woff2'), url(/_astro/inter-latin-400-normal.CyCys3Eg.woff) format('woff');
}/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/inter-latin-600-normal.LgqL8muc.woff2) format('woff2'), url(/_astro/inter-latin-600-normal.CiBQ2DWP.woff) format('woff');
}/* jetbrains-mono-latin-400-normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/jetbrains-mono-latin-400-normal.V6pRDFza.woff2) format('woff2'), url(/_astro/jetbrains-mono-latin-400-normal.6-qcROiO.woff) format('woff');
}/* Exact values live ONLY in this file. Everything else uses the names. */
:root {
  /* Palette: Pine Green, Field Cream, Soil Brown, Clay, Sage.
     WCAG 2.x contrast ratios for every text/background pair in use.
     AA needs 4.5 for normal text and 3 for large text (24px, or 19px bold).

     Soil on Cream            10.60  body text
     Pine on Cream             9.84  headings, links on hover, quiet buttons
     Cream on Pine             9.84  buttons, footer, CTA band
     Cream on Soil            10.60  impact strip
     Ink soft on Cream         7.08  secondary text
     Ink soft on Surface       6.30  secondary text on tinted bands
     Soil on Surface           9.43  body text on tinted bands
     Pine on Surface           8.76  headings on tinted bands
     Clay deep on Cream        5.27  links, eyebrows, section numbers
     Clay deep on Surface      4.69  links on tinted bands
     Cream on Clay deep        5.27  header CTA fill and button hover
     Sage on Soil              5.83  mono labels on dark band
     Sage on Pine              5.42  mono labels on pine
     Ink soft on Placeholder   5.73  photo placeholder captions
     Soil on Sage              5.83  text on sage fills
     Pine on Sage              5.42  hover fill on the light button
     Cream on Clay deep        5.27  text on the clay band
     Focus ring, cream on Pine 9.84  ring on pine bands and footer
     Focus ring, cream on Soil 10.60 ring on dark bands
     Focus ring, Clay deep on Cream 5.27 and on Surface 4.69  ring on light bands (needs 3)
     Clay deep on Placeholder  4.27  FAILS 4.5, never put accent text on photo boxes
     Clay #C4622D alone:
     Clay on Cream             3.54  FAILS 4.5, large text only
     Cream on Clay             3.54  FAILS 4.5, never used for text or buttons
     Clay on Soil              2.99  never used for text
     So Clay is used only for rules, bars and decorative shapes.
     Clay deep is the same hue, darkened, for all clay text and fills.
     Non-text notes: the Sage cleared-land bar is 1.82 against Cream and the Clay rule on Soil is
     2.99. Both are decorative and the bar also has a Pine border, so no failure.
     Breakpoints cannot be custom properties inside @media. They are 24rem, 40rem, 52rem and
     64rem, used as written in global.css. */
  --color-bg: #f4eee3;            /* Field Cream */
  --color-surface: #eae1d0;       /* cream, one step darker, for tinted bands */
  --color-ink: #43312d;           /* Soil Brown: body text and dark sections */
  --color-ink-soft: #5e4b45;      /* soil, lightened, for secondary text */
  --color-pine: #24402e;          /* Pine Green: primary */
  --color-clay: #c4622d;          /* Clay: rules, bars, decorative shapes, large text only */
  --color-accent: #9e4a1c;        /* Clay deep: text and button fills */
  --color-sage: #a9b89a;          /* Sage: fills and illustration, plus mono labels on dark */
  --color-rule: #cfc3ad;
  --color-on-pine: #f4eee3;
  --color-on-dark: #f4eee3;
  --color-placeholder: #d6dac8;
  --color-focus: #9e4a1c;
  --color-focus-on-dark: #f4eee3;
  --color-print-ink: #000;
  --color-print-bg: #fff;
  --mask-solid: #000;         /* mask alpha only, never drawn */

  /* Type: Fraunces display, Inter body, JetBrains Mono for small labels and figures only */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --text-2xl: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --text-hero: clamp(1.7rem, 0.6rem + 5.2vw, 4.4rem);
  --text-figure: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  --leading-body: 1.6;
  --leading-tight: 1.1;
  --tracking-mono: 0.08em;
  --measure: 62ch;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --page-max: 72rem;

  /* Shape and motion */
  --radius: 2px;
  --border: 1px;
  --border-2: 2px;
  --border-3: 3px;
  --border-4: 4px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --plot-height: 3.5rem;
  --dot: 0.4rem;
  --col-label: 14rem;
  --col-quote: 44rem;
  --col-card: 48rem;
  --header-h: 4.75rem;
  --header-h-wide: 5.5rem;
  --header-h-small: 4.75rem;
  --topo-step: 0.9rem;
  --fade-edge: 3rem;
  --print-text: 9.5pt;
  --print-small: 9pt;
  --print-lede: 10.5pt;
  --print-h1: 18pt;
  --print-h2: 13pt;
  --print-boiler: 11pt;
  --print-gap: 0.35rem;
  --print-gap-sm: 0.2rem;
  --print-gap-xs: 0.12rem;
  --reveal-shift: 0.75rem;
  --reveal-floor: 0.35;
  --line-shift: 105%;
  --line-duration: 0.6s;
  --line-stagger: 0.08s;
  --ticker-duration: 50s;
  --header-pad: var(--space-4);
  --header-pad-condensed: var(--space-2);
  --header-inset: var(--space-3);
  --header-inset-narrow: 0;
  --header-inset-top: var(--space-2);
  --radius-pill: 1.75rem;

  /* Hero craft, video facade, media overlay */
  --ratio-hero: 4 / 3;
  --ratio-video: 16 / 9;
  --topo-line-opacity: 0.35;
  --colorbar-h: 0.6rem;
  --cb-pine: 5;
  --cb-clay: 2;
  --cb-sage: 3;
  --cb-soil: 2;
  --shape: 0.9rem;
  --underline-stroke: 2.4;
  --topo-media-opacity: 0.16;
  --line-pad: 0.12em;
  --print-gap-md: 0.5rem;
  --col-video-meta: 36rem;
  --stat-pad: var(--space-4);
  --stat-overlap: var(--space-5);
  --play: 4.5rem;
  --play-narrow: 3.25rem;
  --chip-row: 2.5rem;
  --ratio-video-narrow: 1 / 1;
  --mute-saturate: 0.8;
  --video-gap: var(--space-5);
  --underline-h: 0.2em;
  --underline-gap: -0.06em;
  --draw-duration: 0.7s;
  --draw-delay: 0.5s;
  --poster-line: 0.35;
  --pause-gap: var(--space-3);

  /* Real photos: credit chip, facade scrim, Land parallax */
  --scrim-strong: rgb(36 64 46 / 0.92);   /* Pine at 90%, behind facade text: cream on it stays above 7 */
  --scrim-soft: rgb(36 64 46 / 0.12);
  --scrim-hold: 55%;
  --parallax-scale: 1.14;
  --parallax-shift: 5%;
  --photo-gap: var(--space-4);
}

/* Hero film (docs/hero/film-edit.md). Scrim sits only behind the wordmark lockup and the Scroll cue. */
:root {
  --ratio-film: 16 / 9;
  --film-scrim: rgba(20, 34, 26, 0.55);
  --film-scrim-clear: rgba(20, 34, 26, 0);
  --film-btn-bg: rgba(20, 34, 26, 0.72);
  --text-wordmark: clamp(1.6rem, 1rem + 3vw, 3.4rem);
  --text-place: 1rem;            /* 16 px floor for the thin place line, per the contrast gate */
  --tap: 2.75rem;                /* 44 px minimum target */
  --scroll-cue-duration: 1.2s;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h-small) + var(--space-4)); }
@media (min-width: 40rem) { html { scroll-padding-top: calc(var(--header-h) + var(--space-4)); } }
@media (min-width: 64rem) { html { scroll-padding-top: calc(var(--header-h-wide) + var(--space-4)); } }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: var(--leading-tight); margin: 0 0 var(--space-4); letter-spacing: -0.01em; }
h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-xl); color: var(--color-pine); }
h3 { font-size: var(--text-lg); color: var(--color-pine); }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
a { color: var(--color-accent); text-underline-offset: 0.2em; }
a:hover { color: var(--color-pine); }
:focus-visible { outline: var(--border-3) solid var(--color-focus); outline-offset: 3px; }
/* The accent ring fails 3:1 on dark fills, so dark bands use the cream ring */
.band-pine :focus-visible, .band-dark :focus-visible, .band-clay :focus-visible, .site-footer :focus-visible { outline-color: var(--color-focus-on-dark); }

/* Mono: small labels and figures only */
.mono, .eyebrow, .label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; font-weight: 400; }
.eyebrow { display: block; color: var(--color-accent); margin-bottom: var(--space-3); }
.label { color: var(--color-ink-soft); }

.skip { position: absolute; left: var(--space-4); top: -4rem; background: var(--color-pine); color: var(--color-on-pine); padding: var(--space-2) var(--space-4); z-index: 20; }
.skip:focus { top: var(--space-2); }

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-7); }
.section + .section { border-top: var(--border) solid var(--color-rule); }
.band-dark { background: var(--color-ink); color: var(--color-on-dark); border-top: 0 !important; }
.band-dark + .section { border-top: 0; }
.band-surface { background: var(--color-surface); }
.band-pine { background: var(--color-pine); color: var(--color-on-pine); }
.band-pine h2, .band-pine h3 { color: var(--color-on-pine); }
.band-pine a { color: var(--color-on-pine); }
.band-clay { background: var(--color-accent); color: var(--color-on-dark); }
.band-clay h2, .band-clay h3, .band-clay .eyebrow { color: var(--color-on-dark); }

/* Header: sticky, never hides. DOM order is brand, nav, CTA so Tab follows the visual order. */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--color-bg); border-bottom: var(--border) solid var(--color-rule); }
.header-inner { box-shadow: inset 0 0 0 var(--border) transparent; border-radius: 0; background: var(--color-bg); }
/* Below 64rem the header is one compact row (brand and Menu). The CSS-only checkbox opens nav and CTA
   as rows beneath it, in DOM order, so Tab follows what is on screen. Closed links are display none. */
.header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-4); padding-block: var(--header-pad); }
.brand-wrap { grid-area: 1 / 1; display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.nav-toggle { grid-area: 1 / 2; z-index: 1; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.nav-toggle-label { grid-area: 1 / 2; color: var(--color-pine); border: var(--border-2) solid var(--color-pine); border-radius: var(--radius); padding: var(--space-1) var(--space-3); }
.nav-toggle:checked + .nav-toggle-label { background: var(--color-pine); color: var(--color-on-pine); }
.nav-toggle:focus-visible + .nav-toggle-label { outline: var(--border-3) solid var(--color-focus); outline-offset: 3px; }
.header-inner nav { grid-area: 2 / 1 / 3 / -1; min-width: 0; }
.header-cta { grid-area: 3 / 1 / 4 / -1; justify-self: start; margin-top: var(--space-2); }
@media (max-width: 63.99rem) {
  .nav-toggle:not(:checked) ~ nav, .nav-toggle:not(:checked) ~ .header-cta { display: none; }
  .nav { flex-direction: column; }
}
@media (min-width: 64rem) {
  .header-inner { grid-template-columns: auto 1fr auto; gap: var(--space-5); }
  .nav-toggle, .nav-toggle-label { display: none; }
  .header-inner nav { grid-area: 1 / 2; justify-self: end; }
  .header-cta { grid-area: 1 / 3; margin-top: 0; justify-self: auto; }
}
.est { display: none; color: var(--color-ink-soft); white-space: nowrap; }
@media (min-width: 40rem) { .est { display: inline; } }
.brand { font-family: var(--font-display); font-size: var(--text-base); white-space: nowrap; color: var(--color-pine); text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
@media (max-width: 24rem) { .nav { column-gap: var(--space-2); } }
@media (min-width: 40rem) { .nav { column-gap: var(--space-4); } }
.nav a { color: var(--color-ink); text-decoration: none; padding-block: var(--space-2); display: inline-block; border-bottom: var(--border-2) solid transparent; }
.nav a:hover, .nav a[aria-current='page'] { border-bottom-color: var(--color-clay); color: var(--color-ink); }
.header-cta { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); white-space: nowrap; }

.site-footer { background: var(--color-pine); color: var(--color-on-pine); padding-block: var(--space-6); margin-top: 0; }
.site-footer a { color: var(--color-on-pine); }
.site-footer p { margin-bottom: var(--space-2); }
.coords { color: var(--color-sage); }

/* Title with line reveal (static by default, animated below) */
.title .line { display: block; }
.title .line > span { display: block; }

/* Hero: headline spans the full width, then lede and photo below */
.hero { padding-block: var(--space-6) var(--space-7); }
.hero-grid { display: grid; gap: var(--space-6); align-items: start; margin-top: var(--space-5); }
@media (min-width: 52rem) { .hero-grid { grid-template-columns: 1fr 1fr; } }
.hero h1 { color: var(--color-pine); max-width: none; text-wrap: balance; }
.hero h1 .line { overflow: hidden; padding-bottom: var(--line-pad); margin-bottom: calc(var(--line-pad) * -1); display: block; }
@media (min-width: 40rem) { .hero h1 .line > span { white-space: nowrap; } }
.lede { font-size: var(--text-lg); color: var(--color-ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.page-hero { padding-block: var(--space-7) var(--space-6); }
.page-hero h1 { color: var(--color-pine); max-width: 18ch; text-wrap: balance; }

/* Topographic contour texture, decorative only. Fades out toward the text. */
.topo { position: relative; overflow: hidden; }
.topo::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(ellipse 120% 90% at 92% 30%, transparent 0 var(--topo-step), var(--color-rule) var(--topo-step) calc(var(--topo-step) + var(--border)));
  -webkit-mask-image: linear-gradient(to left, var(--mask-solid), transparent 70%);
  mask-image: linear-gradient(to left, var(--mask-solid), transparent 70%); }
.topo > .wrap { position: relative; }

/* Photo placeholder */
.photo { margin: 0; }
.photo-box { background: var(--color-placeholder); aspect-ratio: var(--ratio, 4 / 3); border-radius: var(--radius); border: var(--border) solid var(--color-pine); display: flex; align-items: flex-end; padding: var(--space-3); }
.photo-box span { font-size: var(--text-sm); color: var(--color-ink-soft); }

/* Real photos: the frame holds the ratio, the image covers it. Width and height attributes also reserve space. */
.photo-frame { aspect-ratio: var(--ratio, 4 / 3); border-radius: var(--radius); overflow: hidden; background: var(--color-placeholder); }
.photo-frame picture { display: block; width: 100%; height: 100%; }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.photo-mute img { filter: saturate(var(--mute-saturate)); }
.photo-credit { margin: var(--space-1) 0 0; color: var(--color-ink-soft); }
.band-clay .photo-credit, .band-dark .photo-credit, .band-pine .photo-credit { color: var(--color-on-dark); }
.photo-pair { display: grid; gap: var(--photo-gap); margin-block: var(--space-5); }
@media (min-width: 40rem) { .photo-pair { grid-template-columns: 1fr 1fr; } }
/* Credit on moving or busy imagery sits on a solid chip so it never depends on the frame behind it */
.photo-credit-chip { position: absolute; z-index: 1; top: var(--space-3); right: var(--space-3); background: var(--color-bg); color: var(--color-ink); padding: var(--space-1) var(--space-2); border-radius: var(--radius); pointer-events: none; }
.hero-video .photo-credit-chip { right: auto; left: var(--space-3); }
.video-poster .photo-credit-chip { right: auto; left: var(--space-4); top: var(--space-4); max-width: calc(100% - var(--space-5)); }
.land-hero-photo { margin-top: var(--space-6); }

/* Impact strip */
.impact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5) var(--space-5); grid-template-columns: 1fr 1fr; }
@media (min-width: 52rem) { .impact { grid-template-columns: repeat(3, 1fr); } }
.impact li { border-top: var(--border-2) solid var(--color-clay); padding-top: var(--space-3); }
.impact .fig { display: block; font-family: var(--font-display); font-size: var(--text-figure); line-height: 1.05; color: var(--color-on-dark); }
.impact .label { display: block; color: var(--color-sage); margin-top: var(--space-2); }

/* Pillars */
.pillars { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-6) var(--space-5); }
@media (min-width: 52rem) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillars .num { display: block; color: var(--color-accent); margin: var(--space-3) 0; }
.pillars h3 { margin-bottom: var(--space-2); }
.pillars p { color: var(--color-ink); }

/* Plot strip: 66 acres, 40 forest and 26 cleared, drawn to scale */
.plot { margin: var(--space-5) 0 var(--space-6); }
.plot-bar { display: flex; height: var(--plot-height); border-radius: var(--radius); overflow: hidden; border: var(--border) solid var(--color-pine); }
.plot-forest { flex: var(--forest) 0 0; background: var(--color-pine); }
.plot-cleared { flex: var(--cleared) 0 0; background: var(--color-sage); border-left: var(--border-2) solid var(--color-clay); }
.plot-labels { display: flex; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-soft); }
.plot-labels span:first-child { flex: var(--forest) 0 0; padding-right: var(--space-2); }
.plot-labels span:last-child { flex: var(--cleared) 0 0; padding-left: var(--space-2); }
.plot-labels b { display: block; color: var(--color-accent); font-weight: 400; }

/* Partner ticker: static wrapped list by default */
.ticker { border-block: var(--border) solid var(--color-rule); padding-block: var(--space-4); overflow: hidden; }
.ticker-track { display: block; }
.ticker-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-pine); }
.ticker-row[aria-hidden='true'] { display: none; }
.ticker-row li::after { content: ''; display: inline-block; width: var(--dot); height: var(--dot); background: var(--color-clay); margin-left: var(--space-5); vertical-align: middle; }
.ticker-row li:last-child::after { display: none; }
.ticker-ctl { display: none; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-ink-soft); cursor: pointer; }
.ticker-ctl input { accent-color: var(--color-pine); width: 1.1rem; height: 1.1rem; margin: 0; }

.facts-list { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }

/* Two-column text sections. The heading column stays in view on wide screens. */
.split { display: grid; gap: var(--space-5) var(--space-7); }
@media (min-width: 52rem) {
  .split { grid-template-columns: 1fr 2fr; }
  .split > :first-child { align-self: start; position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}
@media (min-width: 64rem) { .split > :first-child { top: calc(var(--header-h-wide) + var(--space-5)); } }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding-block: var(--space-3); border-bottom: var(--border) solid var(--color-rule); }
.plain-list li:first-child { border-top: var(--border) solid var(--color-rule); }
.list-h { margin-top: var(--space-6); }
.youth-quote { margin-block: var(--space-6); }
.plain-list b { font-weight: 600; }
.stack > * + * { margin-top: var(--space-6); }

/* Quote */
blockquote { margin: 0; max-width: var(--col-quote); }
blockquote p { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); line-height: 1.3; color: var(--color-pine); max-width: none; }
blockquote footer { color: var(--color-ink-soft); }
.quotes { display: grid; gap: var(--space-6) var(--space-7); margin-top: var(--space-7); }
@media (min-width: 52rem) {
  .quotes { grid-template-columns: 1fr 1fr; align-items: start; }
  .quotes > :last-child { margin-top: var(--space-7); }
}

/* Buttons */
.btn { display: inline-block; font: inherit; font-weight: 600; background: var(--color-pine); color: var(--color-on-pine); border: 0; padding: var(--space-3) var(--space-5); border-radius: var(--radius); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--color-accent); color: var(--color-on-pine); }
.btn-clay { background: var(--color-accent); }
.btn-clay:hover { background: var(--color-pine); }
.btn-quiet { background: transparent; color: var(--color-pine); border: var(--border-2) solid var(--color-pine); padding-block: calc(var(--space-3) - var(--border-2)); }
.btn-quiet:hover { background: var(--color-pine); color: var(--color-on-pine); }
.btn-light { background: var(--color-on-pine); color: var(--color-pine); }
.band-pine .btn-light { color: var(--color-pine); }
.btn-light:hover { background: var(--color-sage); color: var(--color-pine); }

/* Story */
.chapters { list-style: none; margin: 0; padding: 0; }
.chapter { display: grid; gap: var(--space-3) var(--space-6); padding-block: var(--space-6); border-top: var(--border) solid var(--color-rule); }
.chapter:last-child { border-bottom: var(--border) solid var(--color-rule); }
@media (min-width: 52rem) { .chapter { grid-template-columns: var(--col-label) 1fr; } }
.chapter .when { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; color: var(--color-pine); }
.chapter .label { display: block; margin-bottom: var(--space-2); color: var(--color-accent); }
.chapter p { margin-bottom: var(--space-3); }
.collage { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
.collage > :first-child { grid-column: 1 / -1; }
.collage > * { min-width: 0; }
.collage .photo-credit { font-size: var(--text-xs); overflow-wrap: anywhere; }
@media (min-width: 52rem) { .collage .photo-credit { white-space: nowrap; } }
@media (min-width: 52rem) {
  .collage { grid-template-columns: repeat(6, 1fr); align-items: start; }
  .collage > :nth-child(1) { grid-column: span 3; }
  .collage > :nth-child(2) { grid-column: span 3; }
  .collage > :nth-child(n+3) { grid-column: span 2; }
}
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { padding-block: var(--space-3); border-bottom: var(--border) solid var(--color-rule); }
.news-list li:first-child { border-top: var(--border) solid var(--color-rule); }

/* Disclosure box */
.disclosure { border: var(--border-2) solid var(--color-pine); background: var(--color-bg); padding: var(--space-5); max-width: var(--col-card); border-radius: var(--radius); }
.disclosure h2 { margin-bottom: var(--space-2); }
.disclosure p:last-child { margin-bottom: 0; }

/* Kit */
.boiler { border-left: var(--border-4) solid var(--color-clay); padding: var(--space-2) 0 var(--space-2) var(--space-5); margin-bottom: var(--space-4); }
.boiler p { font-family: var(--font-display); font-size: var(--text-lg); max-width: 50ch; margin: 0; }
.copy-status { margin-left: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-soft); }
.facts-table { width: 100%; border-collapse: collapse; }
.facts-table th, .facts-table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: var(--border) solid var(--color-rule); }
.facts-table th { width: 30%; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; font-weight: 400; color: var(--color-pine); padding-top: calc(var(--space-3) + var(--space-1)); }
.reviewed { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-soft); }
.downloads { list-style: none; margin: 0; padding: 0; }
.downloads li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-3); border-bottom: var(--border) solid var(--color-rule); }
.soon { font-size: var(--text-sm); color: var(--color-ink-soft); }
.contact-grid { display: grid; gap: var(--space-5); }
@media (min-width: 52rem) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-grid > div { border-top: var(--border-3) solid var(--color-pine); padding-top: var(--space-3); }
.contact-grid p { margin: 0; }


/* Hero media: photo or video, topo overlay, stat card sits on its edges */
.hero { position: relative; }
.hero-media { position: relative; margin-bottom: var(--stat-overlap); }
.hero-media .photo-box, .hero-video { border-radius: var(--radius); }
.hero-media .photo-box { align-items: flex-start; }
.hero-video { position: relative; aspect-ratio: var(--ratio-hero); background: var(--color-placeholder); border: var(--border) solid var(--color-pine); overflow: hidden; }
.hero-video picture, .hero-video .hero-poster { display: block; width: 100%; height: 100%; }
.hero-video .hero-poster { object-fit: cover; }
.hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video video[hidden] { display: none; }
.hero-pause { position: absolute; right: var(--pause-gap); bottom: var(--pause-gap); background: var(--color-bg); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.hero-pause:hover { color: var(--color-on-pine); }
/* On moving video: cream outer ring with a pine inner ring, readable on any frame */
.hero-pause:focus-visible { outline: var(--border-3) solid var(--color-focus-on-dark); outline-offset: var(--border-3); box-shadow: 0 0 0 var(--border-3) var(--color-pine); }
.hero-pause[hidden] { display: none; }
.topo-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.topo-svg path { fill: none; stroke: var(--color-pine); stroke-width: var(--border); vector-effect: non-scaling-stroke; opacity: var(--topo-line-opacity); }
/* Over real photo or video the lines are cream, very faint, and kept to the top-right corner */
.hero-media .topo-svg { -webkit-mask-image: radial-gradient(ellipse 70% 70% at 100% 0%, var(--mask-solid), transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 100% 0%, var(--mask-solid), transparent 75%); }
.has-media .topo-svg path { stroke: var(--color-bg); opacity: var(--topo-media-opacity); }
.stat-card { position: absolute; left: var(--space-3); bottom: calc(var(--stat-overlap) * -1); margin: 0; background: var(--color-bg); border: var(--border-2) solid var(--color-pine); border-radius: var(--radius); padding: var(--stat-pad); }
.stat-card .fig { display: block; font-family: var(--font-display); font-size: var(--text-figure); line-height: 1.05; color: var(--color-pine); }
.stat-card .label { display: block; margin-top: var(--space-1); }
@media (min-width: 52rem) { .stat-card { left: calc(var(--stat-overlap) * -1); } }
.ul-word { position: relative; display: inline-block; }
.ul-svg { position: absolute; left: 0; bottom: var(--underline-gap); width: 100%; height: var(--underline-h); overflow: visible; }
.ul-svg path { fill: none; stroke: var(--color-clay); stroke-width: var(--underline-stroke); stroke-linecap: round; }
.colorbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--colorbar-h); display: flex; }
.colorbar span:nth-child(1) { flex: var(--cb-pine) 0 0; background: var(--color-pine); }
.colorbar span:nth-child(2) { flex: var(--cb-clay) 0 0; background: var(--color-clay); }
.colorbar span:nth-child(3) { flex: var(--cb-sage) 0 0; background: var(--color-sage); }
.colorbar span:nth-child(4) { flex: var(--cb-soil) 0 0; background: var(--color-ink); }

/* Section markers: clay quarter circles and squares, decorative only */
.mark::before { content: ''; display: inline-block; width: var(--shape); height: var(--shape); background: var(--color-clay); border-radius: 100% 0 0 0; margin-right: var(--space-2); vertical-align: -0.05em; }
.mark-sq::before { border-radius: 0; }

/* Video facade: local poster, square on phones and 16:9 from 40rem, no request until click */
@media (min-width: 40rem) { .video-frame { aspect-ratio: var(--ratio-video) !important; } }
.video { margin: 0; }
.video-frame { position: relative; aspect-ratio: var(--ratio-video-narrow); background: var(--color-pine); border-radius: var(--radius); overflow: hidden; }
.video-poster { overflow: hidden; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-4); color: var(--color-on-pine); text-decoration: none; background: var(--color-pine); }
.video-poster .topo-svg path { stroke: var(--color-sage); opacity: var(--poster-line); }
.video-poster:hover { color: var(--color-on-pine); }
.video-poster:focus-visible { outline: var(--border-3) solid var(--color-focus-on-dark); outline-offset: calc(var(--border-3) * -2); }
.video-poster picture, .video-still { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.video-still { object-fit: cover; }
.video-scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--scrim-strong) 0, var(--scrim-strong) var(--scrim-hold), var(--scrim-soft) 100%); }
.video-play { position: absolute; z-index: 1; top: calc(var(--space-4) + var(--chip-row)); left: var(--space-4); width: var(--play-narrow); height: var(--play-narrow); border-radius: 50%; background: var(--color-bg); }
@media (min-width: 40rem) { .video-play { width: var(--play); height: var(--play); top: var(--space-5); left: var(--space-5); }
  .video-poster .photo-credit-chip { top: var(--space-3); right: var(--space-3); left: auto; } .video-poster { padding: var(--space-5); } }
.video-play::after { content: ''; position: absolute; inset: 0; background: var(--color-pine); clip-path: polygon(38% 28%, 38% 72%, 72% 50%); }
.video-poster:hover .video-play { background: var(--color-sage); }
.video-meta { position: relative; z-index: 1; display: block; max-width: var(--col-video-meta); }
.video-title { display: block; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; color: var(--color-on-pine); }
.video-by { display: block; margin-top: var(--space-2); color: var(--color-on-pine); }
.video-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { margin-top: var(--space-2); }
.video-pair { display: grid; gap: var(--video-gap); margin-top: var(--space-5); }
@media (min-width: 52rem) { .video-pair { grid-template-columns: 1fr 1fr; } }
.press-by { display: block; }

/* Motion: calm. CSS only, opacity and transform, inside @supports and no-preference.
   The one exception is the header condense, which animates padding on a small bar.
   Scroll-driven rules keep animation-timeline as a longhand. The build uses the esbuild CSS
   minifier because lightningcss folds it into the animation shorthand, which Chromium rejects. */
@media (prefers-reduced-motion: no-preference) {
  /* (a) section reveal, a few blocks per page */
  @supports (animation-timeline: view()) {
    .reveal { animation-name: reveal; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    @keyframes reveal {
      from { opacity: var(--reveal-floor); transform: translateY(var(--reveal-shift)); }
      to { opacity: 1; transform: none; }
    }
    /* (b) section titles: line rises as the title enters */
    .title .line { overflow: hidden; padding-bottom: var(--line-pad); margin-bottom: calc(var(--line-pad) * -1); view-timeline: --title block; }
    .title .line > span { animation-name: line-rise; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --title; animation-range: entry 0% entry 80%; }
  }
  /* (b) Home hero headline: time-based, 0.6s plus staggered delay, under 0.8s total */
  @supports (animation-name: line-rise) {
    .hero h1 .line > span { animation: line-rise var(--line-duration) var(--ease-out) both; animation-timeline: auto; animation-range: normal; }
    .hero h1 .line:nth-child(2) > span { animation-delay: var(--line-stagger); }
    .hero h1 .line:nth-child(3) > span { animation-delay: calc(var(--line-stagger) * 2); }
    @keyframes line-rise { from { transform: translateY(var(--line-shift)); } to { transform: none; } }
  }
  /* (c) sticky header condenses on scroll, then floats as a rounded pill inset from the page edges.
     Exceptions to transform and opacity: padding, border-radius and background on the header bar only. */
  @supports (animation-timeline: scroll()) {
    @media (min-width: 40rem) { :root { --header-inset-narrow: var(--header-inset); } }
    .site-header { animation-name: float-bar; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root block); animation-range: 0 8rem; }
    .header-inner { animation-name: condense; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root block); animation-range: 0 8rem; }
    @keyframes float-bar {
      from { padding: 0; background-color: var(--color-bg); border-bottom-color: var(--color-rule); }
      to { padding: var(--header-inset-top) var(--header-inset-narrow) 0; background-color: transparent; border-bottom-color: transparent; }
    }
    @keyframes condense {
      from { padding-block: var(--header-pad); border-radius: 0; box-shadow: inset 0 0 0 var(--border) transparent; }
      to { padding-block: var(--header-pad-condensed); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--border) var(--color-rule); }
    }
  }
  /* (f) The Land: the one signature moment. Hero photo drifts slowly inside its frame, transform only. */
  @supports (animation-timeline: view()) {
    .parallax .photo-frame { view-timeline: --land block; }
    .parallax img { transform: scale(var(--parallax-scale)); animation-name: land-drift; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --land; animation-range: cover 0% cover 100%; }
    @keyframes land-drift {
      from { transform: translateY(calc(var(--parallax-shift) * -1)) scale(var(--parallax-scale)); }
      to { transform: translateY(var(--parallax-shift)) scale(var(--parallax-scale)); }
    }
  }
  /* (e) Home hero underline draws on once, under 1s. Static when motion is reduced or unsupported. */
  @supports (stroke-dashoffset: 1) {
    .ul-svg path { stroke-dasharray: 1; animation: draw var(--draw-duration) var(--ease-out) var(--draw-delay) both; }
    @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  }
  /* (d) partner ticker: CSS marquee, duplicate row hidden from assistive tech, pause checkbox for touch and keyboard */
  @supports (animation-duration: 1s) {
    .ticker-ctl { display: inline-flex; }
    .ticker { -webkit-mask-image: linear-gradient(to right, transparent, var(--mask-solid) var(--fade-edge), var(--mask-solid) calc(100% - var(--fade-edge)), transparent); mask-image: linear-gradient(to right, transparent, var(--mask-solid) var(--fade-edge), var(--mask-solid) calc(100% - var(--fade-edge)), transparent); }
    .ticker-track { display: flex; width: max-content; animation: marquee var(--ticker-duration) linear infinite; }
    .ticker-row, .ticker-row[aria-hidden='true'] { display: flex; flex-wrap: nowrap; flex-shrink: 0; padding-right: var(--space-5); white-space: nowrap; gap: 0 var(--space-5); }
    .ticker-row li:last-child::after { display: inline-block; }
    .ticker:hover .ticker-track, .ticker:focus-within .ticker-track, .ticker-ctl:has(input:checked) + .ticker .ticker-track { animation-play-state: paused; }
    @keyframes marquee { from { transform: none; } to { transform: translateX(-50%); } }
  }
}

/* Print: the kit page prints as a one-pager */
@media print {
  :root { --color-bg: var(--color-print-bg); }
  body { font-size: var(--print-text); line-height: 1.35; color: var(--color-print-ink); }
  .site-header, .site-footer .footer-nav, .skip, .no-print, .downloads, .btn { display: none !important; }
  .site-footer { background: none; color: var(--color-print-ink); margin: 1rem 0 0; padding: var(--print-gap-sm) 0; border-top: var(--border) solid var(--color-print-ink); }
  .site-footer a { color: var(--color-print-ink); }
  .section { padding-block: var(--print-gap); border-top: 0 !important; }
  .wrap { max-width: none; padding-inline: 0; }
  .topo::before { display: none; }
  .stat-card, .colorbar, .topo-svg, .photo-credit-chip { display: none !important; }
  h1 { font-size: var(--print-h1); margin-bottom: var(--print-gap-sm); }
  h2 { font-size: var(--print-h2); margin-bottom: var(--print-gap-sm); }
  .lede { font-size: var(--print-lede); margin-bottom: var(--print-gap-sm); }
  .boiler { margin-bottom: var(--print-gap-sm); }
  .boiler p { font-size: var(--print-boiler); }
  .facts-table th, .facts-table td { padding: var(--print-gap-xs) var(--print-gap-md) var(--print-gap-xs) 0; font-size: var(--print-small); }
  .facts-table tr { break-inside: avoid; }
  a { color: var(--color-print-ink); text-decoration: none; }
  .reveal { animation: none; }
  .contact-grid { gap: var(--print-gap-md); }
  .contact-grid > div { padding-top: var(--print-gap-sm); }
  .reviewed { margin-top: var(--print-gap-sm); }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Hero film ---------- */
/* Default (phones, reduced motion, slow connections): the A1 still in a boxed 16:9 frame, lockup on it. */
.film { padding: var(--space-4) var(--gutter) 0; max-width: var(--page-max); margin-inline: auto; }
.film-frame { position: relative; aspect-ratio: var(--ratio-film); overflow: hidden; background: var(--color-pine); border-radius: var(--radius); }
.film-frame picture, .film-frame .film-poster, .film-frame video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.film-lockup { position: absolute; left: 0; bottom: 0; padding: var(--space-6) var(--space-4) var(--space-3); color: var(--color-on-dark); }
/* Scrim behind the lockup only: a soft corner wash on the frame itself, so it never shows a box edge. */
.film-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 15% 100%, var(--film-scrim) 0%, var(--film-scrim) 40%, var(--film-scrim-clear) 100%); }
.film-lockup, .film-btn, .film-scroll { z-index: 1; }
.film-wordmark { font-family: var(--font-display); font-size: var(--text-wordmark-boxed); line-height: var(--leading-tight); margin: 0; max-width: none; }
.film-place { font-size: var(--text-place); font-weight: 600; margin: var(--space-1) 0 0; max-width: none; }
.film-btn { position: absolute; top: var(--space-4); right: var(--space-4); min-height: var(--tap); min-width: var(--tap);
  padding: var(--space-2) var(--space-4); border: var(--border) solid var(--color-on-dark); border-radius: var(--radius-pill);
  background: var(--film-btn-bg); color: var(--color-on-dark); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.film-btn:focus-visible, .film-scroll:focus-visible { outline: var(--border-3) solid var(--color-focus-on-dark); outline-offset: var(--border-3); }
.film-btn[hidden] { display: none; }
.film-scroll { display: none; }

/* Desktop with motion: the film fills the viewport under the header. Size is reserved, so nothing jumps. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  html:not(.film-still) .film { padding: 0; max-width: none; }
  html:not(.film-still) .film-frame { aspect-ratio: auto; height: calc(100svh - var(--header-h-wide)); min-height: 28rem; border-radius: 0; }
  /* Wide screens: lockup and Scroll cue line up with the page column (.wrap), and the scrim follows the lockup */
  html:not(.film-still) .film-frame { --film-inset: calc(max(0px, (100% - var(--page-max)) / 2) + var(--gutter)); }
  html:not(.film-still) .film-lockup { padding: var(--space-8) var(--gutter) var(--space-6) var(--film-inset); }
  html:not(.film-still) .film-frame::after { background: radial-gradient(ellipse 70% 60% at calc(max(0px, (100% - var(--page-max)) / 2) + 15%) 100%, var(--film-scrim) 0%, var(--film-scrim) 40%, var(--film-scrim-clear) 100%); }
  html:not(.film-still) .film-wordmark { font-size: var(--text-wordmark); }
  html:not(.film-still) .film-scroll { display: inline-flex; align-items: center; min-height: var(--tap); position: absolute; right: var(--film-inset); bottom: var(--space-5);
    padding: var(--space-2) var(--space-4); color: var(--color-on-dark); text-decoration: none; letter-spacing: var(--tracking-mono); text-transform: uppercase;
    font-size: var(--text-sm); background: radial-gradient(ellipse at center, var(--film-scrim), var(--film-scrim-clear) 75%);
    animation: scroll-cue var(--scroll-cue-duration) var(--ease-out) 1 both; }
  /* Pause sits just left of the Scroll cue, inside the page column, so it never meets the lockup on wide screens */
  html:not(.film-still) .film-btn { top: auto; bottom: var(--space-5); left: auto; right: calc(var(--film-inset) + 6.5rem); }
}
@keyframes scroll-cue { from { opacity: 0; transform: translateY(calc(var(--space-2) * -1)); } to { opacity: 1; transform: none; } }

/* Cream band below the film */
.hero-band { padding-block: var(--space-6) var(--space-7); }
.hero-band h1 { margin: 0; }
.hero-lockup { margin-top: var(--space-4); color: var(--color-ink-soft); font-size: var(--text-sm); letter-spacing: var(--tracking-mono); }
.hero-band .lede { margin-top: var(--space-5); max-width: var(--measure); }
.asks { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-3); border-top: var(--border) solid var(--color-rule); padding-top: var(--space-5); }
@media (min-width: 52rem) { .asks { grid-template-columns: repeat(4, 1fr); } }
.asks a { display: block; min-height: var(--tap); color: var(--color-pine); font-weight: 600; }
.ask-note { display: block; font-weight: 400; color: var(--color-ink-soft); font-size: var(--text-sm); }
.hero-band h1 .line > span { white-space: normal; display: inline-block; }