/* How it works page: hero, the route, two ecosystems, why it matters. */

/* ---------- Hero ---------- */
.how-hero { position: relative; min-height: 76svh; display: grid; align-items: end; color: #fff; isolation: isolate; }
.how-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #14251c; }
.how-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.how-hero-scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(6,18,12,.86) 0%, rgba(6,18,12,.42) 42%, rgba(6,18,12,.05) 72%, rgba(6,18,12,0) 88%);
}
.how-hero-inner { padding: calc(var(--header-h) + 6vh) 0 clamp(36px, 6vh, 64px); display: grid; gap: 22px; }
.how-hero .eyebrow { color: var(--sprout); }
.how-hero h1 { font-size: var(--t-88); max-width: 18ch; text-shadow: 0 2px 30px rgba(6,18,12,.35); }
.how-hero h1 em { color: var(--sprout); }
.how-hero .lede { color: rgba(255,255,255,.94); max-width: 34em; text-shadow: 0 1px 18px rgba(6,18,12,.5); }
.how-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 640px) { .how-hero h1 { font-size: clamp(38px, 11vw, 56px); } }

/* ---------- The approved plate ----------
   The same white card the patch spreads use: 1.5px forest hairline, 9px of white around the
   photograph, a hard offset shadow and an uppercase caption row under it. It lives in
   css/pages/patches.css for the patches pages; this page loads its own stylesheet only, so the
   card is restated here rather than reached for. Keep the two in step. */
.plate { display: block; background: #fff; border: 1.5px solid var(--forest); padding: 9px; box-shadow: 8px 8px 0 rgba(18, 56, 42, .1); color: var(--ink); }
.plate-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.plate-media img { width: 100%; height: 100%; object-fit: cover; }
.plate-caption { display: flex; justify-content: space-between; gap: 14px; font: 500 11px / 1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); padding: 10px 2px 2px; }
.plate-caption b { color: var(--forest); font-weight: 500; }

/* ---------- The route ----------
   One thread down the page through five stations, read like a line on a metro map: the station
   name sits beside its dot, its photograph hangs opposite. The thread is drawn by
   js/how-it-works.js from the measured position of every dot, so it cannot drift off them, and
   at the match it forks behind the two plates and rejoins underneath. */
.route { padding: calc(var(--sect) * .85) 0 calc(var(--sect) * .55); }
.route .eyebrow { margin-bottom: 4px; }
.route-run {
  position: relative;
  /* wider than the column the eyebrow sits in, so the route breaks the page grid */
  width: min(1360px, 100% - 2 * var(--gutter));
  margin: clamp(26px, 3.2vw, 46px) auto 0;
  --rail: clamp(56px, 6.4vw, 104px);
  --fork: 1;
}
.route-thread { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.route-thread .march { stroke: var(--leaf); animation: route-march 3.4s linear infinite; }
/* one whole dash period (5 + 4.5) times three, or the pattern jumps each loop */
@keyframes route-march { to { stroke-dashoffset: -28.5px; } }

.route-stations { position: relative; z-index: 1; list-style: none; display: grid; gap: clamp(36px, 4.4vw, 72px) 0; }
.station { display: grid; grid-template-columns: minmax(0, 44fr) var(--rail) minmax(0, 56fr); align-items: start; }

/* A station is a dot on the line. No pictogram, no disc behind it: 14px of sprout with a fine
   moss edge and a 3px canvas ring that keeps the thread from touching it. */
.station-dot { grid-column: 2; grid-row: 1; justify-self: center; align-self: start; width: 14px; height: 14px; border-radius: 50%; background: var(--sprout); box-shadow: 0 0 0 1.5px var(--moss), 0 0 0 4.5px var(--canvas); margin-top: calc(var(--t-48) * .5 - 7px); }

.station-copy { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; max-width: 27ch; padding-inline: 0 clamp(4px, 1vw, 16px); }
.station-copy h3 { font-size: var(--t-48); line-height: 1.02; color: var(--forest); }
.station-copy p { margin-top: clamp(10px, 1.2vw, 16px); max-width: 34ch; font-size: var(--t-16); line-height: 1.55; color: var(--stone); }
.station:nth-child(even) > .station-copy { grid-column: 3; justify-self: start; text-align: left; padding-inline: clamp(4px, 1vw, 16px) 0; }

.station-plate { grid-column: 3; grid-row: 1; width: min(100%, 400px); rotate: var(--tilt, -1deg); transition: rotate .6s var(--ease), box-shadow .6s var(--ease); }
/* the card rights itself under the cursor and the photograph inside it swells (see .zoom-img) */
.station-plate:hover { rotate: 0deg; box-shadow: 12px 12px 0 rgba(18, 56, 42, .15); }
.station:nth-child(even) > .station-plate { grid-column: 1; justify-self: end; --tilt: 1deg; }
.station-plate-tall { width: min(100%, 360px); }
.station-plate-tall .plate-media { aspect-ratio: 4 / 5; }
/* just-planted-seedling is a small file, so its plate stays small rather than being blown up */
.station-plate-small { width: min(100%, 268px); }
.station-plate-small .plate-media { aspect-ratio: 1 / 1; }
.station:last-child > .station-plate { width: min(100%, 376px); }

/* The match: the thread splits below the station, passes behind a plate each and rejoins. The two
   anchors are where it parts and where it comes back together; they carry no ink of their own. */
.station-fork { grid-template-rows: auto clamp(64px, 7vw, 96px) auto clamp(40px, 4.6vw, 60px); }
.station-fork > .fork-anchor { grid-column: 2; justify-self: center; align-self: center; width: 0; height: 0; }
.station-fork > [data-route-split] { grid-row: 2; }
.station-fork > [data-route-merge] { grid-row: 4; }
.station.station-fork > .fork-plate { grid-row: 3; width: min(100%, 312px); }
.station.station-fork > .fork-plate-urban { grid-column: 1; justify-self: end; --tilt: -1deg; }
.station.station-fork > .fork-plate-wild { grid-column: 3; justify-self: start; --tilt: 1deg; }

@media (max-width: 760px) {
  /* the line runs down the left, each station stacks its name then its picture beside it */
  .route-run { --rail: 48px; --fork: 0; }
  .station, .station-fork { grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: auto; gap: clamp(14px, 3vw, 20px) 0; }
  .station > .station-dot { grid-column: 1; grid-row: 1; }
  .station > .station-copy, .station:nth-child(even) > .station-copy { grid-column: 2; grid-row: 1; justify-self: start; text-align: left; max-width: none; padding-inline: 0; }
  .station > .station-plate, .station:nth-child(even) > .station-plate { grid-column: 2; grid-row: 2; justify-self: start; width: 100%; }
  .station-plate-small { width: 62%; }
  .station-fork > .fork-anchor { display: none; }
  .station.station-fork > .fork-plate { width: 100%; }
  .station.station-fork > .fork-plate-urban { grid-column: 2; grid-row: 2; justify-self: start; }
  .station.station-fork > .fork-plate-wild { grid-column: 2; grid-row: 3; justify-self: start; }
}

/* ---------- Two ecosystems ----------
   The eight things are set on the photograph itself, either side of the seam. Move between the
   halves and the seam travels, so the half you are reading takes the room. */
@property --seam { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.ecosystems { padding: calc(var(--sect) * .55) 0 calc(var(--sect) * .7); }
.ecosystems h2 { color: var(--forest); max-width: 20ch; margin-bottom: clamp(26px, 3.4vw, 40px); }
.ecosystems-photo { position: relative; margin: 0; aspect-ratio: 21 / 9; border-radius: var(--r-20); overflow: hidden; isolation: isolate; color: #fff; --seam: 50%; transition: --seam .7s var(--ease); }
/* Two photographs, the city patch and its wild match, parted on the seam: the wild one is clipped
   to the right of it, so moving the seam reveals more of one place and less of the other. */
.eco-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eco-img-wild { clip-path: inset(0 0 0 var(--seam)); }
.eco-half { position: absolute; top: 0; bottom: 0; }
.eco-half-urban { left: 0; width: var(--seam); }
.eco-half-wild { left: var(--seam); right: 0; }
.eco-half::after { content: ""; position: absolute; inset: 0; opacity: .84; transition: opacity .7s var(--ease);
  background: linear-gradient(to top, rgba(6,18,12,.94) 0%, rgba(6,18,12,.7) 30%, rgba(6,18,12,.22) 62%, rgba(6,18,12,0) 86%);
}
.eco-half:hover::after { opacity: 1; }
.ecosystems-photo:has(.eco-half-urban:hover) { --seam: 58%; }
.ecosystems-photo:has(.eco-half-wild:hover) { --seam: 42%; }

.ecosystems-seam { position: absolute; top: 0; bottom: 0; left: var(--seam); width: 2px; transform: translateX(-1px); z-index: 1; background: linear-gradient(to bottom, transparent, var(--sprout) 30%, var(--sprout) 70%, transparent); }
.ecosystems-seam::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--sprout); transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(169,213,160,.3); transition: box-shadow .7s var(--ease); }
.ecosystems-photo:has(.eco-half:hover) .ecosystems-seam::after { box-shadow: 0 0 0 9px rgba(169,213,160,.4), 0 0 26px 8px rgba(169,213,160,.55); }

.eco-note { position: absolute; bottom: 0; width: 38%; z-index: 2; padding: clamp(20px, 2.6vw, 38px); pointer-events: none; }
.eco-note-urban { left: 0; }
.eco-note-wild { right: 0; text-align: right; }
.eco-note h3 { font-size: var(--t-36); line-height: 1.04; text-shadow: 0 1px 20px rgba(6,18,12,.55); }
.eco-phrases { list-style: none; display: block; margin-top: clamp(8px, 1vw, 14px); font-family: var(--display); font-style: italic; font-weight: 500; font-size: var(--t-22); line-height: 1.34; letter-spacing: -.008em; color: rgba(255,255,255,.93); text-wrap: pretty; text-shadow: 0 1px 18px rgba(6,18,12,.6); }
.eco-phrases li { display: inline; }
.eco-phrases li + li::before { content: "\00b7"; font-style: normal; color: var(--sprout); padding: 0 .38em; }

@media (max-width: 760px) {
  /* the seam lies down, the halves stack, each keeps its words at its own foot */
  .ecosystems-photo { aspect-ratio: 4 / 5; }
  .eco-img-wild { clip-path: inset(var(--seam) 0 0 0); }
  .ecosystems-photo, .ecosystems-photo:has(.eco-half:hover) { --seam: 50%; }
  .eco-half-urban { left: 0; right: 0; width: auto; top: 0; bottom: auto; height: var(--seam); }
  .eco-half-wild { left: 0; right: 0; top: var(--seam); bottom: 0; }
  .ecosystems-seam { left: 0; right: 0; top: var(--seam); bottom: auto; width: auto; height: 2px; transform: translateY(-1px); background: linear-gradient(to right, transparent, var(--sprout) 26%, var(--sprout) 74%, transparent); }
  .eco-note { width: auto; left: 0; right: 0; text-align: left; }
  .eco-note-urban { bottom: 50%; }
  .eco-note-wild { bottom: 0; }
  .eco-note h3 { font-size: var(--t-28); }
  .eco-phrases { font-size: var(--t-18); }
}

/* ---------- Why it matters ----------
   Five lines of type and one photograph. The line you are on is tethered to its picture by the
   thread, which ends on the photograph at one end and on the line at the other. */
.manifesto { background: var(--mist); padding: calc(var(--sect) * .7) 0 var(--sect); }
.manifesto .eyebrow { margin-bottom: 14px; }
.manifesto h2 { color: var(--forest); max-width: 20ch; }
.manifesto-stage { --mf-gap: clamp(30px, 4.4vw, 72px); --mf-indent: clamp(22px, 2.2vw, 34px); --mf-reach: calc(var(--mf-gap) + 34px);
  display: grid; grid-template-columns: minmax(240px, 38%) minmax(0, 1fr); gap: 0 var(--mf-gap); align-items: start;
  margin-top: clamp(34px, 4.4vw, 60px);
}
.mf-stage { rotate: -1deg; }
.mf-frames { position: relative; aspect-ratio: 4 / 5; }
.mf-frame { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); }
.mf-frame img { width: 100%; height: 100%; object-fit: cover; }
.mf-frame.is-on { opacity: 1; }

.mf-lines { position: relative; padding-top: clamp(2px, 1vw, 14px); }
.mf-list { list-style: none; display: grid; padding-left: var(--mf-indent); }
.mf-item { padding: clamp(9px, 2vw, 28px) 0; }
.mf-line { display: block; width: 100%; padding: 0; text-align: left; }
.mf-title { display: block; font-size: var(--t-48); line-height: 1.04; color: var(--stone); opacity: .55; transition: color .5s var(--ease), opacity .5s var(--ease); }
.mf-item.is-on .mf-title { color: var(--forest); opacity: 1; }
.mf-unfold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.mf-unfold > p { min-height: 0; overflow: hidden; max-width: 40ch; font-size: var(--t-18); line-height: 1.55; color: var(--stone); opacity: 0; transition: opacity .35s var(--ease); }
.mf-item.is-on .mf-unfold { grid-template-rows: 1fr; }
.mf-item.is-on .mf-unfold > p { padding-top: 10px; opacity: 1; transition-delay: .18s; }

/* The tether: a fine dotted line with a dot at each end. The left one sits on the photograph,
   the right one is the sprout dot in the left margin of the line you are on. One element, so it
   slides from line to line rather than being redrawn. */
.mf-tether { position: absolute; top: 0; left: calc(-1 * var(--mf-reach)); width: calc(var(--mf-reach) + var(--mf-indent) - 11px); height: 9px; z-index: 2; pointer-events: none;
  transform: translateY(var(--mf-y, 0px)); transition: transform .55s var(--ease);
  background-image: radial-gradient(circle at 50% 50%, var(--leaf) 1.05px, transparent 1.2px);
  background-size: 9.5px 100%; background-repeat: repeat-x; animation: mf-march 3.4s linear infinite;
}
@keyframes mf-march { to { background-position-x: -28.5px; } }
.mf-tether::before, .mf-tether::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); }
.mf-tether::before { left: 0; background: var(--canvas); box-shadow: 0 0 0 2px var(--leaf); }
.mf-tether::after { left: 100%; background: var(--sprout); box-shadow: 0 0 0 1.5px var(--moss); }

@media (max-width: 860px) {
  .manifesto-stage { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 38px) 0; }
  .mf-stage { width: min(100%, 440px); }
  .mf-frames { aspect-ratio: 4 / 3; }
  .mf-title { font-size: var(--t-36); }
  /* no room for the run across: the sprout dot alone stays, in the margin of the live line */
  .mf-tether { left: 0; width: calc(var(--mf-indent) - 11px); background-image: none; animation: none; }
  .mf-tether::before { display: none; }
}

/* Photo hero: keep the header legible over bright sky, same rule as About */
.page-how [data-hero]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 240px; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(6,18,12,.55), transparent); }

@media (prefers-reduced-motion: reduce) {
  .route-thread .march, .mf-tether { animation: none; }
}