:root {
  color-scheme: light;
  --forest: #102c25;
  --night: #09211b;
  --ivory: #f7f5ee;
  --sand: #e9dfc9;
  --ink: #202725;
  --muted: #4d5f53;
  --gold: #edc58c;
  --line: #c6cbbd;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", Arial, sans-serif;
  --ease-out: cubic-bezier(.23,1,.32,1);
  --gutter: clamp(1.25rem, 5.5vw, 6rem);
  --section: clamp(4.25rem, 8.5vw, 9rem);
  --nav-height: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--nav-height) + 1.25rem); }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 1rem/1.65 var(--sans); }
img { display: block; max-width: 100%; height: auto; }
figure, ul, ol, p { margin: 0; }
h1, h2, h3 { margin: 0; line-height: 1.02; text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.04em; }
h1 { font-size: clamp(2.85rem, 6.1vw, 7.25rem); }
h2 { font-size: clamp(2.25rem, 4.6vw, 5rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.55rem); line-height: 1.2; }
h1 em { font-weight: 400; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: .08em; }
:focus-visible { outline: 3px solid #a74a19; outline-offset: 4px; }
.homepage .site-header :focus-visible, .site-footer :focus-visible, .gh-dark :focus-visible { outline-color: var(--gold); }
.wrap { width: min(100% - 2 * var(--gutter), 83rem); margin-inline: auto; }
.section-space { padding-block: var(--section); }
.eyebrow { font-size: .77rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; line-height: 1.35; }
.section-lede { max-width: 42rem; }
.section-lede .eyebrow { margin-bottom: 1rem; }
.section-lede > p:not(.eyebrow) { margin-top: 1.15rem; max-width: 37rem; }
.section-lede .text-link { margin-top: .8rem; }
.skip { position: fixed; left: 1rem; top: .5rem; z-index: 4; padding: .65rem 1rem; color: var(--forest); background: var(--ivory); transform: translateY(-160%); }
.skip:focus { transform: none; }
.site-header { position: sticky; z-index: 3; top: 0; color: var(--forest); background: var(--ivory); border-bottom: 1px solid var(--line); }
.homepage .site-header { color: var(--ivory); background: var(--night); border-color: #345044; }
.site-bar { min-height: var(--nav-height); display: flex; align-items: center; gap: clamp(1rem, 4vw, 4rem); }
.site-header.compact .site-bar .brand img { transform: scale(.88); }
.site-bar .brand img { transition: transform 200ms var(--ease-out); }
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: .7rem; font: 400 1.15rem/1.14 var(--serif); text-decoration: none; }
.brand img { flex: 0 0 auto; width: 38px; height: 38px; }
.site-bar nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.6rem, 2.3vw, 2rem); }
.site-bar nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: .92rem; text-decoration: none; font-weight: 600; }
.site-bar nav a::after { content: ""; position: absolute; bottom: .45rem; inset-inline: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--ease-out); }
.site-bar nav a:hover::after, .site-bar nav a[aria-current]::after { transform: scaleX(1); }
.text-link, .light-link, .header-action, .button { display: inline-flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 44px; max-width: 100%; font-weight: 650; line-height: 1.3; }
.text-link span, .light-link span, .header-action span, .button span { flex: 0 0 auto; transition: transform 180ms var(--ease-out); }
.text-link:hover span, .light-link:hover span, .header-action:hover span, .button:hover span { transform: translate(2px, -2px); }
.header-action { margin-inline-start: auto; font-size: .875rem; white-space: nowrap; }
.button { padding: .85rem 1.15rem; background: var(--gold); color: var(--night); text-decoration: none; transition: background-color 160ms ease, transform 140ms var(--ease-out); }
.button:hover { background: #f5d6a7; }
.button:active { transform: scale(.97); }
.actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.35rem; row-gap: .75rem; margin-top: 1.8rem; }
.faq { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(1.5rem, 6vw, 6rem); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { min-height: 50px; padding-block: .85rem; cursor: pointer; font-weight: 650; }
.faq details p { padding: 0 1rem 1rem; color: var(--muted); }
.site-footer { position: relative; isolation: isolate; overflow: hidden; color: var(--ivory); background: var(--night); border-top-right-radius: 34% 4rem; }
.site-footer::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url("/assets/root-traces.svg") right bottom / min(65rem, 86%) auto no-repeat; opacity: .42; pointer-events: none; }
.footer-grid { display: grid; grid-template-columns: 1.1fr .65fr 1.25fr 1fr; gap: 1.5rem clamp(1rem, 4vw, 4rem); padding-block: clamp(3rem, 7vw, 6rem) 2.4rem; }
.footer-grid h2 { font: 700 .78rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: .65rem; }
.footer-grid p { max-width: 23ch; margin-top: .85rem; color: #d3dfd4; font-size: .9rem; }
.footer-grid ul, .toc ol, .toc ul, .related ul { list-style: none; padding: 0; }
.footer-grid li a, .footer-end a { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.35; }
.footer-end { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-top: 1px solid #456156; padding-block: .55rem; font-size: .84rem; }
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .86rem; }
.breadcrumbs li + li::before { content: "/"; opacity: .8; margin-right: .4rem; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.atlas-hero { background: var(--forest); color: var(--ivory); }
.atlas-hero .wrap { display: grid; grid-template-columns: 1.07fr 1fr; align-items: center; gap: 2rem; padding-block: clamp(2.2rem, 4vw, 4.25rem); }
.atlas-hero h1 { margin-block: .45rem 1.3rem; font-size: clamp(3.1rem, 6.2vw, 6.75rem); }
.atlas-hero em { display: block; color: var(--gold); }
.atlas-hero p { max-width: 42ch; }
.atlas-hero figure { border-radius: 55% 3% 3% 3% / 34% 3% 3% 3%; overflow: hidden; }
.atlas-hero img { width: 100%; }
.atlas-routes { isolation: isolate; position: relative; padding-block: var(--section); }
.atlas-routes::before { content: ""; position: absolute; z-index: -1; inset: 5% 4% 4%; background: url("/assets/atlas-trace.svg") center / 100% 100% no-repeat; opacity: .55; }
.atlas-feature { display: grid; align-items: center; gap: clamp(1.5rem, 5.5vw, 5.5rem); }
.atlas-feature + .atlas-feature { margin-top: clamp(4rem, 9vw, 9rem); }
.atlas-feature h2 { font-size: clamp(2.25rem, 4vw, 4.15rem); }
.atlas-feature p:not(.eyebrow) { margin-block: 1rem .65rem; max-width: 43ch; }
.atlas-feature .eyebrow { margin-bottom: 1rem; color: var(--muted); }
.atlas-feature img { width: 100%; }
.feature-1 { grid-template-columns: 1.2fr 1fr; }
.feature-1 figure { overflow: hidden; border-top-left-radius: 39% 28%; }
.feature-2 { grid-template-columns: .88fr 1.12fr; padding-inline-start: clamp(0rem, 5vw, 5rem); }
.feature-2 figure { grid-column: 2; grid-row: 1; overflow: hidden; border-bottom-right-radius: 43% 32%; }
.feature-2 .atlas-copy { grid-column: 1; grid-row: 1; }
.feature-3 { grid-template-columns: 1.3fr .7fr; gap: 0; background: var(--sand); border-top-right-radius: 4rem; overflow: hidden; }
.feature-3 .atlas-copy { padding: clamp(1.5rem, 4vw, 4rem); }
.feature-3 figure img { height: 100%; object-fit: cover; }
.feature-3 figure { height: 100%; }
.article-hero, .doc-hero { background: var(--sand); color: var(--forest); }
.article-hero .wrap { display: grid; grid-template-columns: 1.37fr .82fr; align-items: center; gap: clamp(1.4rem, 4vw, 4rem); padding-block: clamp(2.3rem, 4.5vw, 4.75rem); }
.article-hero h1, .doc-hero h1 { font-size: clamp(2.45rem, 4.65vw, 5.35rem); margin-block: .65rem 1.1rem; }
.article-hero .eyebrow { margin-top: .7rem; }
.article-hero p:not(.eyebrow), .doc-hero p { max-width: 58ch; }
.article-hero figure { border-top-right-radius: 40% 25%; overflow: hidden; }
.article-hero img { width: 100%; }
.article-layout, .doc-layout { display: grid; grid-template-columns: minmax(12rem,.37fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; padding-block: clamp(2.25rem, 6vw, 6rem) var(--section); }
.doc-hero .wrap { padding-block: clamp(2.3rem, 5vw, 4.75rem); }
.toc { position: sticky; top: calc(var(--nav-height) + 1rem); max-height: calc(100vh - var(--nav-height) - 2rem); overflow-y: auto; border-top: 1px solid var(--line); padding-top: .8rem; }
.toc h2 { font: 700 .85rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .4rem; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; font-size: .92rem; line-height: 1.3; padding-block: .25rem; }
.article-body { width: 100%; max-width: 47rem; font-size: 1.06rem; }
.article-body h2 { font-size: clamp(1.9rem, 3.65vw, 3rem); margin-block: 2.1rem .85rem; }
.article-body h3 { margin-block: 1.4rem .65rem; }
.article-body p + p, .article-body p + ul, .article-body ul + p, .article-body ol + p { margin-top: .85rem; }
.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body li + li { margin-top: .35rem; }
.article-body code { overflow-wrap: anywhere; }
.article-body table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.45; }
.article-body th, .article-body td { border-bottom: 1px solid var(--line); padding: .75rem; text-align: left; vertical-align: top; }
.article-body th { background: var(--sand); }
.table-scroll { overflow-x: auto; margin-block: 1.1rem; }
.article-body .route-ribbon { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; list-style: none; padding: .9rem 0; border-block: 1px solid var(--line); color: var(--forest); font-size: .9rem; font-weight: 650; }
.route-ribbon li + li { margin: 0; }
.route-ribbon li + li::before { content: "\21B3"; margin-right: .35rem; }
.article-return { border-top: 1px solid var(--line); padding-top: 1.2rem; margin-top: 2.75rem; }
.article-body .related ul { padding: 0; }
.related li { border-bottom: 1px solid var(--line); }
.related a { width: 100%; padding-block: .45rem; }
.notice { border-block: 1px solid #b4a68f; background: #eee7d8; padding: 1rem 1.15rem; margin-block: 1.35rem; }
.contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 7vw, 7rem); }
.contact-form { display: grid; align-items: start; gap: .55rem; max-width: 42rem; }
.contact-form label { font-weight: 650; margin-top: .5rem; }
.contact-form label span, .contact-form small, .form-privacy { color: var(--muted); font-size: .91rem; }
.contact-form input, .contact-form textarea { width: 100%; min-height: 46px; border: 1px solid #7b8c7e; background: #fffefa; padding: .65rem .8rem; font: inherit; color: var(--ink); }
.contact-form textarea { resize: vertical; }
.contact-form .button { justify-self: start; border: 0; margin-top: .65rem; cursor: pointer; font: 650 1rem/1.3 var(--sans); }
.contact-form .button:disabled { opacity: .75; cursor: wait; }
.form-status { min-height: 1.7em; font-weight: 650; }
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .faq, .atlas-hero .wrap, .atlas-feature, .article-hero .wrap, .article-layout, .doc-layout, .contact-layout { grid-template-columns: minmax(0,1fr); }
  .feature-2 figure, .feature-2 .atlas-copy { grid-area: auto; }
  :root { --nav-height: 110px; }
  .site-bar { display: grid; grid-template-columns: 1fr auto; gap: 0 .75rem; padding-block: .3rem; }
  .site-bar nav { grid-row: 2; grid-column: 1 / -1; gap: .55rem 1.45rem; }
  .site-bar .brand { font-size: 1.02rem; }
  .brand img { width: 32px; height: 32px; }
  .header-action { font-size: .81rem; white-space: normal; gap: .4rem; }
  .feature-2 { padding-inline-start: 0; }
  .feature-3 { gap: 0; }
  .atlas-feature .atlas-copy { max-width: 33rem; }
  .atlas-routes::before { inset-inline: 0; }
  .toc { position: static; max-height: none; }
  .article-hero figure { max-width: 26rem; }
  .article-body th, .article-body td { padding: .55rem; }
}
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: minmax(0,1fr); }
  .site-bar { grid-template-columns: minmax(0,1fr) minmax(0,.72fr); }
  .site-bar .brand { gap: .4rem; }
  .site-bar nav { column-gap: 1.15rem; }
  .footer-grid { gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Blog closing band */
.closing { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 6vw, 6rem); align-items: center; background: var(--sand); padding: clamp(1.5rem, 4vw, 4rem); margin-bottom: var(--section); border-top-right-radius: 3rem; }
.closing h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.closing p { margin-top: .8rem; }
.closing .button { color: var(--ivory); background: var(--forest); }
.closing .button:hover { background: #1d4639; }
@media (max-width: 760px) { .closing { grid-template-columns: minmax(0,1fr); gap: 1rem; } .closing > a { justify-self: start; } }
/* ===== Homepage: roots and towers ===== */
.homepage { --canopy: #1a3627; --soil: #a8452a; --moss-green: #6f9a4a; --leaf: #8fb35c; background: var(--ivory); }
.moss { background: linear-gradient(rgb(214 236 170 / .42), rgb(214 236 170 / .42)), #9cbf6a url("/assets/moss-concrete-texture-480.webp") center / 14rem auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-style: normal; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .moss { background: none; color: #9cbf6a; -webkit-text-fill-color: currentColor; } }
.homepage h2 em { font-style: normal; }
.homepage .light-link { color: inherit; }

/* Hero: one image melting into the dark sections below */
.gh-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--forest); background: var(--night); min-height: clamp(40rem, 62vw, 58rem); display: grid; grid-template-rows: 1fr auto; }
.gh-hero-art { position: absolute; inset: 0; z-index: -1; }
.gh-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 0; transform-origin: 70% 30%; animation: gh-breathe 26s ease-in-out infinite alternate; }
.gh-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(247 240 222 / .78) 0%, rgb(247 240 222 / .45) 34%, transparent 58%), linear-gradient(0deg, var(--night) 0%, transparent 34%); }
@keyframes gh-breathe { to { transform: scale(1.045); } }
.gh-hero-copy { align-self: center; padding-block: clamp(3rem, 7vw, 6.5rem) 2rem; }
.gh-hero-copy > * { max-width: 40rem; }
.gh-hero-copy .eyebrow { display: flex; align-items: center; gap: .6rem; color: #7a3a1d; margin-bottom: 1.25rem; }
.gh-hero-copy .eyebrow i { width: .5rem; aspect-ratio: 1; background: currentColor; transform: rotate(45deg); }
.gh-hero h1 { font-size: clamp(3rem, 6.4vw, 6.9rem); line-height: .98; }
.gh-hero h1 > span, .gh-hero h1 em { display: block; }
.gh-hero h1 em { font-size: .5em; line-height: 1.12; margin-top: .45em; color: var(--forest); font-style: italic; max-width: 14ch; }
.gh-hero .moss, .gh-coverage .moss, .gh-strata .moss, .gh-canopy .moss { background-image: linear-gradient(rgb(22 52 20 / .55), rgb(22 52 20 / .55)), url("/assets/moss-concrete-texture-480.webp"); background-size: auto, 12rem auto; filter: saturate(1.3); }
.vined { position: relative; width: max-content; max-width: 100%; }
.vine { position: absolute; left: -4%; top: 4%; width: 108%; height: 96%; overflow: visible; pointer-events: none; }
.vine-stem { fill: none; stroke: #2f5a24; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: gh-draw 2.4s .3s var(--ease-out) forwards; }
.vine-stem.back { stroke: #213f1b; opacity: .55; z-index: -1; }
.leaf { fill: #5d8f3a; transform-box: fill-box; transform-origin: 0 0; scale: 0; animation: gh-leaf .6s var(--ease-out) forwards; animation-delay: 1s; }
@keyframes gh-draw { to { stroke-dashoffset: 0; } }
@keyframes gh-leaf { to { scale: 1; } }
.gh-hero-copy > p:not(.eyebrow) { margin-top: 1.5rem; font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 37rem; color: #1d2b25; }
.gh-hero .actions { margin-top: 1.9rem; }
.gh-hero .button { background: var(--forest); color: var(--ivory); }
.gh-hero .button:hover { background: #1d4639; }
.gh-hero .light-link { color: var(--forest); }
.gh-facts { background: var(--night); box-shadow: 0 0 0 100vmax var(--night); clip-path: inset(0 -100vmax); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-block: 0; padding-block: 1.2rem 1.6rem; color: var(--ivory); border-top: 1px solid rgb(237 197 140 / .35); }
.gh-facts div { padding-inline: 0 1rem; }
.gh-facts dt { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.gh-facts dd { margin: .2rem 0 0; font: 400 clamp(1.15rem, 1.8vw, 1.6rem)/1.2 var(--serif); }

/* Billboard: architectural letters */
.gh-billboard { position: relative; background: linear-gradient(180deg, var(--night) 0, var(--canopy) 14rem); color: var(--ivory); padding-bottom: clamp(4rem, 7vw, 6rem); }
.gh-billboard-art { width: min(100%, 120rem); margin-inline: auto; padding-top: clamp(1rem, 3vw, 3rem); }
.gh-billboard-art img { width: 100%; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 52%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 52%, #000 62%, transparent 100%); }
.gh-landscape { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.5rem, 6vw, 6rem); margin-top: clamp(-4rem, -3vw, -1rem); position: relative; }
.gh-landscape h2 { font-size: clamp(2.2rem, 4.2vw, 4.4rem); }
.gh-landscape p + p { margin-top: 1rem; }
.gh-landscape p { color: #dbe5da; max-width: 60ch; }
.root-seam { position: absolute; left: 0; width: 100%; height: clamp(5rem, 10vw, 9rem); overflow: hidden; pointer-events: none; }
.root-seam path { fill: none; stroke: #4b3a24; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--ease-out); vector-effect: non-scaling-stroke; }
.motion .root-seam path { stroke-dashoffset: 400; }
.motion .root-seam.is-in path { stroke-dashoffset: 0; }
.seam-a { bottom: calc(-1 * clamp(5rem, 10vw, 9rem) + 2px); }
.seam-a path { stroke: var(--canopy); }
.seam-b { top: -1px; }
.seam-b path { stroke: #d9cdb3; }

/* Specimen: herbarium sheet for the one live method */
.gh-specimen { background: var(--sand); padding-top: clamp(8rem, 13vw, 12rem); }
.gh-specimen-grid { display: grid; grid-template-columns: 1fr minmax(18rem, 27rem) 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.gh-specimen h2 { font-size: clamp(2.1rem, 3.6vw, 3.8rem); }
.specimen-card { position: relative; background: #fbf8ef; padding: 2rem 1.8rem 2.2rem; box-shadow: 0 1px 0 #cdbf9f, 0 18px 40px -28px rgb(16 44 37 / .55); transform: rotate(-1.4deg); }
.specimen-card::before { content: ""; position: absolute; top: -.7rem; left: 50%; width: 5.5rem; height: 1.4rem; translate: -50% 0; background: rgb(233 223 201 / .85); transform: rotate(2deg); }
.specimen-no { font: 600 .78rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--soil); }
.specimen-card h3 { font: 400 clamp(3rem, 5vw, 4.4rem)/1 var(--serif); letter-spacing: -.04em; margin-block: .4rem 1.2rem; color: var(--forest); }
.specimen-card dl { margin: 0; border-top: 1px solid var(--line); }
.specimen-card dl div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; padding-block: .55rem; border-bottom: 1px dashed #cbc2ac; font-size: .93rem; }
.specimen-card dt { color: var(--muted); font-style: italic; font-family: var(--serif); }
.specimen-card dd { margin: 0; font-weight: 600; }
.specimen-sprig { position: absolute; right: -1.6rem; bottom: -2.4rem; width: 5.5rem; fill: #6f9a4a; stroke: #3f6a2e; stroke-width: 2; }
.specimen-sprig path:first-child { fill: none; }
.specimen-note { border-top: 2px solid var(--soil); padding-top: 1rem; align-self: end; }
.specimen-note p { margin-top: .7rem; color: var(--muted); }

/* Flow: the root spine grows as you read */
.gh-flow { background: var(--night); color: var(--ivory); }
.gh-flow-grid { display: grid; grid-template-columns: minmax(10rem, 22rem) 1fr; gap: clamp(2rem, 6vw, 6rem); padding-block: var(--section); }
.gh-spine { position: sticky; top: calc(var(--nav-height) + 1rem); align-self: start; height: calc(100vh - var(--nav-height) - 2rem); max-height: 52rem; overflow: hidden; border-radius: 999px 999px 1.5rem 1.5rem; }
.gh-spine img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.spine-progress { position: absolute; left: 50%; top: 14%; width: 3px; height: 82%; translate: -50% 0; background: linear-gradient(var(--gold), transparent); transform-origin: top; transform: scaleY(var(--grow, 0)); opacity: .8; }
.gh-flow h2 { font-size: clamp(2.1rem, 3.8vw, 4rem); }
.gh-flow .section-lede p { color: #cfdccf; }
.flow-steps { list-style: none; padding: 0; margin-block: 2.5rem 1.5rem; counter-reset: step; }
.flow-steps li { counter-increment: step; position: relative; padding: 1.4rem 0 1.6rem 4.2rem; border-top: 1px solid #2f4b40; }
.flow-steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 1.2rem; font: 400 2rem/1 var(--serif); color: var(--gold); }
.flow-steps li::after { content: ""; position: absolute; left: 2.85rem; top: 1.75rem; width: .55rem; height: .55rem; border-radius: 50% 0; background: var(--leaf); }
.flow-steps p { margin-top: .5rem; color: #cfdccf; max-width: 58ch; }

/* Strata: two soil layers for two connection methods */
.gh-strata { background: var(--ivory); }
.gh-strata h2 { font-size: clamp(2.2rem, 4vw, 4.2rem); }
.strata { display: grid; margin-top: 2.6rem; }
.stratum { position: relative; padding: clamp(1.6rem, 4vw, 3.2rem) clamp(1.3rem, 4vw, 3.5rem); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, .8fr); gap: 1rem clamp(1rem, 3vw, 3rem); align-items: start; }
.stratum-api { background: #e3d4b4; clip-path: polygon(0 0, 100% 0, 100% 92%, 82% 100%, 61% 94%, 37% 100%, 16% 95%, 0 100%); }
.stratum-hosted { background: #96532f; color: #fff9ef; margin-top: -1.2rem; padding-top: clamp(2.6rem, 5vw, 4.2rem); clip-path: polygon(0 4%, 18% 0, 40% 5%, 63% 0, 84% 4%, 100% 0, 100% 100%, 0 100%); }
.stratum-tag { grid-column: 1; font: 700 .75rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.stratum h3 { grid-column: 1; font: 400 clamp(1.6rem, 2.6vw, 2.4rem)/1.1 var(--serif); letter-spacing: -.02em; }
.stratum > p:not(.stratum-tag) { grid-column: 2; grid-row: 1 / span 2; }
.stratum ul { grid-column: 3; grid-row: 1 / span 2; list-style: none; padding: 0; font-weight: 600; font-size: .93rem; }
.stratum li { padding-block: .45rem; border-bottom: 1px solid currentColor; border-color: rgb(16 44 37 / .25); }
.stratum-hosted li { border-color: rgb(255 249 239 / .4); }

/* Tree rings: operations after payment */
.gh-rings { position: relative; background: var(--forest); color: var(--ivory); padding-top: clamp(7rem, 12vw, 11rem); }
.gh-rings-grid { display: grid; grid-template-columns: minmax(16rem, .85fr) 1.15fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.rings { width: 100%; max-width: 30rem; }
.ring { fill: none; stroke: #8c7552; stroke-width: 1.6; opacity: .9; transition: opacity .8s ease; }
.ring:nth-child(odd) { stroke: #b39363; }
.motion .ring { opacity: 0; }
.motion .is-in .ring { opacity: .9; }
.ring-arc { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 85 100; transition: stroke-dasharray 2s .6s var(--ease-out); }
.motion .ring-arc { stroke-dasharray: 0 100; }
.motion .is-in .ring-arc { stroke-dasharray: 85 100; }
.ring-core { fill: var(--forest); }
.ring-big { font: 400 64px var(--serif); fill: var(--ivory); }
.ring-small { font: 600 15px var(--sans); fill: var(--gold); letter-spacing: .04em; }
.gh-rings h2 { font-size: clamp(2.1rem, 3.8vw, 4rem); }
.ops { margin: 2rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.2rem; }
.ops dt { font: 400 1.45rem/1.2 var(--serif); color: var(--gold); }
.ops dd { margin: .5rem 0 0; color: #d3dfd4; font-size: .97rem; }

/* Canopy: industries as a hanging row of leaves */
.gh-canopy { background: var(--ivory); }
.gh-canopy h2 { font-size: clamp(2.1rem, 3.8vw, 4rem); max-width: 18ch; }
.canopy { list-style: none; padding: 0; margin-top: 2.8rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1rem, 3vw, 2.5rem); }
.canopy li { position: relative; padding: 2.4rem 0 1.8rem; border-top: 1px solid var(--line); }
.canopy li:nth-child(3n + 2) { translate: 0 2.2rem; }
.canopy li::before { content: ""; position: absolute; top: -1px; left: 0; width: 1.6rem; height: 1.6rem; background: var(--moss-green); border-radius: 0 100% 0 100%; transform: translateY(-50%) rotate(-12deg); }
.canopy li:nth-child(even)::before { background: var(--soil); border-radius: 100% 0 100% 0; }
.canopy h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.75rem); }
.canopy p { margin-top: .55rem; color: var(--muted); max-width: 34ch; }

/* Field notes glossary */
.gh-notes { background: var(--canopy); color: var(--ivory); }
.gh-notes h2 { font-size: clamp(2.1rem, 3.8vw, 4rem); }
.gh-notes .section-lede p { color: #d3dfd4; }
.notes { list-style: none; padding: 0; margin-top: 2.6rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #355a45; border: 1px solid #355a45; counter-reset: note; }
.notes li { counter-increment: note; background: var(--canopy); padding: 1.5rem 1.4rem 1.7rem; }
.notes li::before { content: "Note " counter(note, decimal-leading-zero); display: block; font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; }
.notes h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.notes p { margin-top: .55rem; color: #d3dfd4; font-size: .96rem; }
.notes-foot { margin-top: 2rem; max-width: 70ch; color: #d3dfd4; }

/* Ledger: selection checklist beside the tea terraces */
.gh-ledger { background: var(--sand); }
.gh-ledger-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.gh-ledger h2 { font-size: clamp(2.1rem, 3.6vw, 3.8rem); }
.gh-ledger-grid > div > p { margin-top: 1.1rem; max-width: 52ch; }
.ledger-art { margin-top: 2rem; overflow: hidden; border-radius: 48% 48% 1rem 1rem / 26% 26% 1rem 1rem; }
.ledger-art img { width: 100%; }
.ledger { width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.45; background: repeating-linear-gradient(180deg, transparent 0 2.4rem, rgb(16 44 37 / .07) 2.4rem calc(2.4rem + 1px)); }
.ledger th, .ledger td { text-align: left; vertical-align: top; padding: .85rem .8rem; border-bottom: 1px solid #c9b996; }
.ledger thead th { font: 700 .74rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--soil); border-bottom: 2px solid var(--forest); }
.ledger tbody th { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; width: 32%; }
.ledger td:last-child { font-weight: 650; color: var(--forest); }
.ledger-note { font-size: .93rem; color: var(--muted); margin-top: 1rem; }

/* Coverage */
.gh-coverage { background: var(--ivory); }
.gh-coverage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.gh-coverage h2 { font-size: clamp(2.1rem, 3.8vw, 4rem); }
.gh-coverage .section-lede p + p { margin-top: .8rem; }
.markets { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.markets li { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-block: .9rem; border-bottom: 1px solid var(--line); align-items: baseline; }
.markets b { font: 400 1.45rem/1.2 var(--serif); }
.markets span { color: var(--muted); }

/* FAQ headings inside summary */
.faq summary h3 { display: inline; font: 650 1rem/1.5 var(--sans); }
.faq summary { list-style: none; position: relative; padding-right: 2.4rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .6rem; top: 50%; width: .9rem; height: .9rem; background: var(--moss-green); border-radius: 0 100% 0 100%; translate: 0 -50%; transition: transform 220ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(90deg); background: var(--soil); }

/* Closing */
.gh-closing { position: relative; isolation: isolate; overflow: hidden; color: var(--ivory); background: var(--night); min-height: clamp(28rem, 46vw, 44rem); display: grid; align-items: center; }
.gh-closing-art { position: absolute; inset: 0; z-index: -1; }
.gh-closing-art img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.gh-closing-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgb(9 33 27 / .88) 0%, rgb(9 33 27 / .55) 40%, transparent 70%), linear-gradient(0deg, var(--night) 0%, transparent 25%); }
.gh-closing-copy { display: grid; justify-items: start; padding-block: 4rem; }
.gh-closing-copy > * { margin-left: auto; width: min(100%, 30rem); }
.gh-closing-copy .button { width: auto; margin-top: 1.6rem; }
.gh-closing-copy h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
.gh-closing-copy p { margin-top: 1rem; color: #e1e9df; }
.homepage .site-footer { border-top-right-radius: 0; }

.ring:nth-of-type(1) { transition-delay: 0ms; }
.ring:nth-of-type(2) { transition-delay: 90ms; }
.ring:nth-of-type(3) { transition-delay: 180ms; }
.ring:nth-of-type(4) { transition-delay: 270ms; }
.ring:nth-of-type(5) { transition-delay: 360ms; }
.ring:nth-of-type(6) { transition-delay: 450ms; }
.ring:nth-of-type(7) { transition-delay: 540ms; }
.ring:nth-of-type(8) { transition-delay: 630ms; }
.ring:nth-of-type(9) { transition-delay: 720ms; }
.root-seam path:nth-child(5n + 1) { transition-delay: 0.00s; }
.root-seam path:nth-child(5n + 2) { transition-delay: 0.15s; }
.root-seam path:nth-child(5n + 3) { transition-delay: 0.30s; }
.root-seam path:nth-child(5n + 4) { transition-delay: 0.45s; }
.root-seam path:nth-child(5n + 5) { transition-delay: 0.60s; }
.leaf:nth-of-type(1) { animation-delay: 1.00s; }
.leaf:nth-of-type(2) { animation-delay: 1.18s; }
.leaf:nth-of-type(3) { animation-delay: 1.36s; }
.leaf:nth-of-type(4) { animation-delay: 1.54s; }
.leaf:nth-of-type(5) { animation-delay: 1.72s; }
.leaf:nth-of-type(6) { animation-delay: 1.90s; }
.leaf:nth-of-type(7) { animation-delay: 2.08s; }

.root-seam .w0 { stroke-width: 5; }
.root-seam .w1 { stroke-width: 3.4; }
.root-seam .w2 { stroke-width: 2.1; }
.root-seam .w3 { stroke-width: 1.1; }
.homepage .faq h2 { font-size: clamp(2rem, 3.4vw, 3.4rem); }

.homepage main { overflow-x: clip; }

/* Reveal */
[data-grow] { transition: opacity .7s var(--ease-out), translate .9s var(--ease-out); }
[data-grow].grow-pending { opacity: 0; translate: 0 1.4rem; }

@media (max-width: 1000px) {
  .gh-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; }
  .gh-specimen-grid { grid-template-columns: 1fr 1fr; }
  .gh-specimen-grid .section-lede { grid-column: 1 / -1; }
  .stratum { grid-template-columns: 1fr 1fr; }
  .stratum > p:not(.stratum-tag) { grid-column: 1 / -1; grid-row: auto; }
  .stratum ul { grid-column: 2; grid-row: 1 / span 2; }
  .canopy, .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .canopy li:nth-child(3n + 2) { translate: none; }
  .gh-ledger-grid { grid-template-columns: minmax(0, 1fr); }
  .ledger-art { max-width: 34rem; }
}
@media (max-width: 760px) {
  .gh-hero { min-height: 0; }
  .gh-hero-art img { object-position: 78% 0; }
  .gh-hero-art::after { background: linear-gradient(180deg, rgb(247 240 222 / .9) 0%, rgb(247 240 222 / .74) 72%, var(--night) 86%); }
  .gh-hero h1 { font-size: clamp(2.6rem, 11vw, 3.6rem); }
  .gh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-landscape, .gh-flow-grid, .gh-rings-grid, .gh-coverage-grid, .gh-specimen-grid { grid-template-columns: minmax(0, 1fr); }
  .gh-landscape { margin-top: 1rem; }
  .gh-spine { position: relative; top: 0; height: 18rem; width: 100%; border-radius: 999px 999px 1rem 1rem; }
  .gh-spine img { object-position: 50% 10%; }
  .specimen-card { transform: none; }
  .stratum { grid-template-columns: minmax(0, 1fr); }
  .stratum > *, .stratum ul, .stratum > p:not(.stratum-tag) { grid-column: 1; grid-row: auto; }
  .ops, .canopy, .notes { grid-template-columns: minmax(0, 1fr); }
  .rings { max-width: 18rem; margin-inline: auto; }
  .markets li { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .gh-closing-art::after { background: linear-gradient(0deg, rgb(9 33 27 / .92) 0%, rgb(9 33 27 / .55) 60%, rgb(9 33 27 / .3) 100%); }
  .gh-closing-copy > * { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-grow].grow-pending { opacity: 1; translate: none; }
  .vine-stem { stroke-dashoffset: 0; }
  .leaf { scale: 1; }
  .motion .root-seam path { stroke-dashoffset: 0; }
  .motion .ring { opacity: .9; }
  .motion .ring-arc { stroke-dasharray: 85 100; }
}