/* Patches index and patch pages: matched rows, full-bleed hero, sub-nav, fact cards, connects band, funding panel. */
/* Shared by the patch cards and the patch pages. */
.tag-outline { color: var(--moss); }
.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); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.plate:hover { box-shadow: 11px 11px 0 rgba(18, 56, 42, .14); }
.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; }
.plate-caption .money { font-size: 11px; letter-spacing: .06em; }
.stamp { position: absolute; top: -32px; right: -14px; z-index: 4; width: 96px; height: 96px; color: var(--moss); pointer-events: none; animation: stamp-spin 48s linear infinite; }
.stamp-disc { fill: var(--canvas); }
.stamp-ring { font: 500 8.6px var(--sans); letter-spacing: 1.7px; text-transform: uppercase; }
.stamp-word { font: italic 500 13px var(--display); }
@keyframes stamp-spin { from { transform: rotate(-11deg); } to { transform: rotate(349deg); } }
.conn-label { font: 500 7.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; fill: var(--stone); }
.conn-km { fill: var(--forest); letter-spacing: .08em; }
@media (prefers-reduced-motion: reduce) { .stamp { animation: none; } }


/* Numbers set in the sans, tabular. Defined here too so pages that skip gift.css still get it. */

/* ---------- Patches index page head, on a soft photo ---------- */
.page-patches-index .page-head { position: relative; overflow: hidden; isolation: isolate; }
.page-patches-index .page-head .ph-bg { position: absolute; inset: 0; z-index: -2; }
.page-patches-index .page-head .ph-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.page-patches-index .page-head { min-height: 62svh; display: grid; align-content: end; padding-bottom: clamp(48px, 6vw, 84px); }
.page-patches-index .page-head h1 { color: #fff; font-size: var(--t-88); }
.page-patches-index .page-head h1 em { color: var(--sprout); font-style: italic; }
.page-patches-index .page-head .lede { color: rgba(255,255,255,.84); }

/* ---------- Patch hero, full bleed photo ---------- */
.patch-hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: #fff; isolation: isolate; }
.patch-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.patch-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* line the tag up with the title below it: .wrap's own content edge, not a fixed inset */
.patch-hero-tag { position: absolute; top: calc(var(--header-h) + var(--header-fade-depth) + 16px); left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
/* Named so the morph can hold the words back and rise them in once the photograph has landed. */
.patch-hero-inner { padding: 0 0 clamp(40px, 6vh, 72px); display: grid; gap: 20px; justify-items: start; view-transition-name: patch-copy; }
.patch-hero-inner h1 { font-size: var(--t-88); }
.patch-hero-lede { color: rgba(255,255,255,.92); max-width: 42em; }
.patch-facts { display: flex; gap: clamp(20px, 4vw, 40px); flex-wrap: wrap; margin-top: 4px; }
.patch-fact { display: grid; gap: 4px; }
.patch-fact b { font-size: var(--t-22); font-family: var(--display); font-weight: 500; }
.patch-fact span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.68); }
.patch-fact-match { border-left: 1px solid rgba(255,255,255,.3); padding-left: clamp(20px, 4vw, 40px); }
.patch-fact-match:hover b { text-decoration: underline; text-underline-offset: 3px; }
.patch-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 640px) {
  .patch-hero-inner h1 { font-size: clamp(40px, 12vw, 60px); }
  .patch-fact-match { border-left: 0; padding-left: 0; width: 100%; }
}

/* ---------- Sub-nav ---------- */
.patch-subnav { position: sticky; top: var(--header-h); z-index: 50; background: rgba(251,252,249,.92); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); }
.patch-subnav-inner { height: 56px; display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); overflow-x: auto; scrollbar-width: none; }
.patch-subnav-inner::-webkit-scrollbar { display: none; }
.patch-subnav a { white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--stone); padding: 4px 0; border-bottom: 2px solid transparent; transition: color .3s, border-color .3s; }
.patch-subnav a:hover { color: var(--forest); }
.patch-subnav a.is-active { color: var(--forest); border-color: var(--leaf); }

/* ---------- Sections ---------- */
.patch-section { padding: calc(var(--sect) * .7) 0; scroll-margin-top: 90px; }
.patch-section h2 { font-size: var(--t-48); color: var(--forest); }

/* The patch: story and what is being created, beside a fact card */
.patch-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 64px); align-items: start; margin-bottom: calc(var(--sect) * .5); }
/* No icons in this list. A leaf beside every line was decoration standing in for meaning, and the
   alternating bird and tree said nothing about which line was which. Hairlines give the rhythm, and
   the wildlife lines get a label instead of a glyph, which is the thing the icons were reaching for. */
/* One rule per row, the label in its own column: what the project makes, what comes back and which
   species are named read as three answers instead of a run of look-alike lines. Selectors are
   .prose-qualified so they beat the prose list defaults, which would indent every item by 1.2em. */
.prose .patch-created { margin: 22px 0 0; }
.patch-created-row { display: grid; grid-template-columns: minmax(104px, 136px) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); }
.patch-created dt { margin: 0; font: 500 var(--t-14) / 1.35 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--leaf); }
.prose .patch-created dd { margin: 0; }
.prose .patch-created ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.prose .patch-created li { margin: 0; line-height: 1.55; }
.prose .patch-created .species-chips { margin: 0; }
@media (max-width: 620px) {
  .patch-created-row { grid-template-columns: 1fr; gap: 10px; }
}
.patch-videos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.patch-video-link { display: inline-flex; padding: 10px 16px; border-radius: 8px; background: var(--mist); color: var(--forest); font-weight: 500; }
/* The extra photos fill the column instead of sitting as one stranded thumbnail under the list. */
.patch-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 28px; }
.patch-gallery-photo { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-12); overflow: hidden; }
.patch-gallery-photo img { width: 100%; height: 100%; object-fit: cover; }

.patch-fact-card { background: var(--mist); border-radius: var(--r-20); padding: clamp(24px, 3vw, 36px); }
.patch-fact-card h3 { font-family: var(--display); font-size: var(--t-28); line-height: 1.05; font-weight: 500; color: var(--forest); margin: 0 0 14px; }
.patch-fact-card h4 { font: 500 12px / 1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--moss); margin: 22px 0 12px; }
.patch-fact-rows { display: grid; gap: 10px; }
.patch-fact-row { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 10px; min-width: 0; flex-wrap: wrap; }
.patch-fact-row:first-child { border-top: 0; padding-top: 0; }
.patch-fact-row dt { color: var(--stone); font-size: 14px; margin: 0; }
.patch-fact-row dd { margin: 0; font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.patch-fact-row dd a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; }
.patch-fact-sub { display: block; font-weight: 400; margin-top: 3px; text-align: right; }

/* Biodiversity: pictograms rotate, species as chips */
.biodiversity-block h2 { margin-bottom: 6px; }
.biodiversity-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 28px; }
.biodiversity-list li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.biodiversity-list .ico-ring { flex: none; }
.species-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* ---------- Where it connects: dark band, match photo behind ---------- */
.patch-connects { position: relative; isolation: isolate; overflow: hidden; color: var(--forest); background: var(--mist) url("/assets/contours.svg") center / 1600px auto; padding: calc(var(--sect) * .8) 0; }
.connects-bg { position: absolute; inset: 0; z-index: -2; opacity: .3; }
.connects-bg img { width: 100%; height: 100%; object-fit: cover; }
.connects-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(6,18,12,.94), rgba(18,56,42,.8)); }
.patch-connects .eyebrow { color: var(--moss); }
.patch-connects h2 { font-size: var(--t-48); }
.connects-lede { color: var(--ink); margin-top: 10px; max-width: 40em; }
.connects-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 3vw, 32px); margin-top: clamp(36px, 5vw, 56px); }
.connects-card { display: grid; gap: 12px; color: var(--forest); text-decoration: none; }
.connects-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border: 1.5px solid var(--forest); padding: 9px; box-shadow: 8px 8px 0 rgba(18,56,42,.12); }
.connects-grid .connects-card:first-child .connects-photo { rotate: -1.2deg; }
.connects-grid .connects-card:last-child .connects-photo { rotate: 1.2deg; }
.connects-photo img { width: 100%; height: 100%; object-fit: cover; }
.connects-name { font-size: var(--t-28); }
.connects-connector { display: flex; flex-direction: column; align-items: center; width: 56px; }
.cc-line { flex: 1; width: 2px; min-height: 24px; background: linear-gradient(to bottom, var(--sprout), var(--leaf)); }
.cc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cc-dot-filled { background: var(--sprout); }
.cc-dot-ring { background: transparent; border: 2px solid var(--sprout); }
.cc-pill { background: #fff; border: 1px solid var(--line-strong); color: var(--forest); font: 500 12px / 1 var(--sans); letter-spacing: .02em; white-space: nowrap; padding: 8px 14px; border-radius: 999px; margin: 10px 0; }
@media (min-width: 901px) {
  .connects-grid .connects-card:first-child .connects-photo { transform: translateX(10px); }
  .connects-grid .connects-card:last-child .connects-photo { transform: translateX(-10px); }
}
@media (max-width: 900px) {
  .connects-grid { grid-template-columns: 1fr; }
  .connects-connector { flex-direction: row; width: auto; height: 40px; margin: 4px 0; }
  .cc-line { width: auto; height: 2px; min-height: 0; min-width: 24px; background: linear-gradient(to right, var(--sprout), var(--leaf)); }
  .cc-pill { margin: 0 10px; }
}
.connects-facts { display: flex; gap: clamp(24px, 5vw, 56px); flex-wrap: wrap; margin-top: clamp(32px, 5vw, 48px); }
.connects-facts div { display: grid; gap: 4px; }
.connects-facts b { font-size: var(--t-28); font-family: var(--display); font-weight: 500; }
.connects-facts span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }

/* ---------- Funding: mist panel, gift control beside the figures ---------- */
.funding-panel { position: relative; background: var(--mist); border-radius: var(--r-20); padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); }
.funding-col { display: grid; gap: 16px; align-content: start; }
.funding-figures { display: flex; gap: clamp(24px, 4vw, 48px); flex-wrap: wrap; }
.funding-figures .small { display: block; }
.funding-figures b { font: 500 var(--t-36) / 1 var(--sans); color: var(--forest); }
.funding-bar { height: 8px; border-radius: 4px; background: rgba(18,56,42,.14); overflow: hidden; }
.funding-bar i { display: block; height: 100%; background: var(--leaf); border-radius: 4px; min-width: 2px; }
.funding-note { margin: 0; color: var(--stone); font-size: 14px; }
.funding-supports-h { margin-top: 8px; }
.funding-supports { list-style: none; display: grid; gap: 12px; margin: 4px 0 0; padding: 0; }
.funding-supports li { position: relative; padding-left: 20px; color: var(--ink); line-height: 1.5; }
.funding-supports li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }
@media (max-width: 900px) { .funding-panel { grid-template-columns: 1fr; } .patch-grid { grid-template-columns: 1fr; } }

/* ---------- What changes / When ---------- */
.changes-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.outcomes-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.outcomes-list li { position: relative; padding-left: 22px; line-height: 1.55; }
.outcomes-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); }
.timeline-list { list-style: none; margin: 24px 0 0; padding: 0 0 0 28px; border-left: 1px solid var(--line); display: grid; gap: 24px; }
.timeline-list li { position: relative; }
.timeline-list li::before { content: ""; position: absolute; left: -33px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px var(--canvas); }
.timeline-list p { margin: 6px 0 0; max-width: 44em; }
@media (max-width: 900px) { .changes-grid { grid-template-columns: 1fr; gap: calc(var(--sect) * .4); } }

/* ---------- Updates / Links ---------- */
.updates-links-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.updates-list { display: grid; gap: 24px; margin-top: 24px; }
.update-card { display: grid; gap: 8px; align-content: start; }
.update-photo { aspect-ratio: 16 / 10; border-radius: var(--r-12); overflow: hidden; }
.update-photo img { width: 100%; height: 100%; object-fit: cover; }
.update-card h3 { font-family: var(--display); font-weight: 500; font-size: var(--t-22); color: var(--forest); }
.empty-card { margin-top: 24px; background: var(--mist); border-radius: var(--r-20); padding: clamp(24px, 3vw, 36px); display: grid; gap: 18px; justify-items: start; }
.links-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.links-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.links-list a { color: var(--moss); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.links-note { margin-top: 24px; }
.links-partners-text { margin-top: 16px; }
@media (max-width: 900px) { .updates-links-grid { grid-template-columns: 1fr; gap: calc(var(--sect) * .4); } }

/* ---------- Other patches ---------- */
.patch-others { padding: calc(var(--sect) * .5) 0 calc(var(--sect) * .9); border-top: 1px solid var(--line); }
.patch-others-head { margin-bottom: clamp(20px, 2.5vw, 28px); }
.patch-others-head h2 { font-size: var(--t-48); color: var(--forest); margin: 6px 0 0; }

.connects-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: var(--moss); }
.connects-go .arrow { width: 14px; height: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Updates: timeline stands in until the first field report; links live in the fact card */
.page-patch #updates .wrap > .reveal { max-width: 720px; }
.page-patch .timeline-list + .empty-card { margin-top: 32px; }
.patch-fact-card .links-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.patch-fact-card .links-list a { color: var(--forest); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.patch-fact-card .species-chips, .prose .species-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Marks the hero as an illustration, opposite the status tag. */
.patch-hero-illus { position: absolute; z-index: 3; right: var(--gutter); top: calc(var(--header-h) + var(--header-fade-depth) + 16px); }

/* The empty updates state shows the ground as it is now: planted, nothing grown yet. */
.empty-card .empty-photo { justify-self: stretch; width: 100%; margin: 0 0 2px; border-radius: var(--r-12); overflow: hidden; }
.empty-card .empty-photo img { width: 100%; height: clamp(200px, 26vw, 320px); object-fit: cover; }


/* ---------- All patches: filter bar and the card grid ---------- */
.patch-all { padding: calc(var(--sect) * .6) 0 calc(var(--sect) * .45); }
.patch-all-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; }
.patch-all-head h2 { font-size: var(--t-48); color: var(--forest); margin: 6px 0 0; }
.patch-all-head h2 em { font-style: italic; color: var(--moss); }
.patch-all-count { margin: 0 0 6px; font: 500 var(--t-14) / 1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }
.patch-all-count .money { color: var(--forest); font-size: var(--t-16); letter-spacing: .04em; }
.patch-all-empty { margin: 32px 0 0; color: var(--stone); }

.patch-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: clamp(22px, 3vw, 32px) 0 clamp(26px, 3.5vw, 38px); }
.patch-filter-group { display: flex; flex-wrap: wrap; gap: 8px; }
.patch-filter-group + .patch-filter-group { padding-left: 22px; border-left: 1px solid var(--line); }
.filter-pill { min-height: 40px; padding: 10px 14px; border-radius: 4px; border: 1px solid var(--line-strong); background: transparent; color: var(--forest); font: 500 12px / 1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.filter-pill:hover { border-color: var(--moss); color: var(--moss); }
.filter-pill.is-on { background: var(--forest); border-color: var(--forest); color: #fff; }
.filter-pill:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }
@media (max-width: 620px) {
  .patch-filter { gap: 12px; }
  .patch-filter-group + .patch-filter-group { padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; }
}

.patch-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 5vw, 72px) clamp(28px, 3vw, 44px); padding-top: 12px; }
.patch-card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1080px) { .patch-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .patch-card-grid, .patch-card-grid-2 { grid-template-columns: minmax(0, 1fr); gap: 48px; } }

/* ---------- Patch cards: the plate, then the words in plain flow ---------- */
.patch-card { position: relative; min-width: 0; transition: opacity .24s var(--ease), transform .24s var(--ease); }
.patch-plate { position: relative; display: block; }
.patch-card:nth-child(odd) .patch-plate { transform: rotate(-1deg); }
.patch-card:nth-child(even) .patch-plate { transform: rotate(1deg); }
.patch-card:nth-child(odd) .patch-plate:hover, .patch-card:nth-child(odd) .patch-plate:focus-visible { transform: rotate(-1deg) translateY(-4px); }
.patch-card:nth-child(even) .patch-plate:hover, .patch-card:nth-child(even) .patch-plate:focus-visible { transform: rotate(1deg) translateY(-4px); }
.patch-plate:focus-visible { outline: 2px solid var(--leaf); outline-offset: 4px; }
.patch-plate-media { position: relative; }
.patch-plate-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.patch-plate-media .pc-a { z-index: 1; }
/* The second photograph shows through on a slow loop, the motion the diptychs have, out of step
   from card to card so the grid breathes rather than blinks. */
@media (prefers-reduced-motion: no-preference) {
  .patch-plate-media .pc-b + .pc-a { animation: pc-fade 17s var(--ease) infinite; animation-delay: var(--fade-delay, 0s); }
}
@keyframes pc-fade { 0%, 42% { opacity: 1 } 50%, 92% { opacity: 0 } 100% { opacity: 1 } }
.patch-card-body { display: grid; gap: 10px; padding: clamp(22px, 2.4vw, 30px) 6px 0; }
.patch-card-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: var(--t-28); line-height: 1.05; color: var(--forest); margin: 0; }
.patch-card-name a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.patch-card-status { font-size: 12px; padding: 5px 10px; vertical-align: middle; }
.patch-card-line { margin: 0; color: var(--stone); line-height: 1.5; font-size: var(--t-16); max-width: 34ch; }
.patch-card-match { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: var(--t-14); color: var(--stone); line-height: 1.4; }
.patch-card-match b { color: var(--forest); font-weight: 500; }
.patch-card-match a:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.patch-card-match .money { color: var(--moss); font-size: var(--t-14); }
.pc-thread { width: 36px; height: 10px; flex: none; overflow: visible; }
.pc-thread-line { stroke: var(--leaf); stroke-width: 1.6; animation: pc-march 3.4s linear infinite; }
.pc-thread-a { fill: var(--sprout); stroke: var(--leaf); stroke-width: 1.2; }
.pc-thread-b { fill: #fff; stroke: var(--leaf); stroke-width: 1.4; }
/* A match still being agreed: the far end of the thread is open */
.patch-card-match.is-forming .pc-thread-b { fill: none; stroke-dasharray: 2 2; }
.patch-card-match.is-forming b { font-weight: 400; }
.patch-fact-match.is-forming:hover b { text-decoration: none; }
@keyframes pc-march { to { stroke-dashoffset: -14.4px; } }
/* filtered out: fade and shrink, then leave the flow */
.patch-card.is-out { opacity: 0; transform: scale(.96); pointer-events: none; }
.patch-card[hidden] { display: none; }
/* The notice for partnerships still being agreed: an open, dashed frame under the grid */
.patch-forming { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px clamp(24px, 3vw, 44px); margin-top: clamp(56px, 6vw, 88px); padding: clamp(20px, 2.4vw, 28px) clamp(22px, 3vw, 36px); border: 1.5px dashed var(--line-strong); border-radius: var(--r-20); }
.patch-forming-plate { width: clamp(76px, 8vw, 104px); transform: rotate(-2deg); }
.patch-forming-plate .plate-media { aspect-ratio: 1; }
.patch-forming-plate img { width: 100%; height: 100%; object-fit: cover; }
.patch-forming-copy h3 { margin: 0 0 6px; font-size: var(--t-28); line-height: 1.1; color: var(--forest); }
.patch-forming-copy p { margin: 0; max-width: 58ch; color: var(--stone); line-height: 1.5; }
.patch-forming-link { align-self: center; }
@media (max-width: 760px) {
  .patch-forming { grid-template-columns: auto minmax(0, 1fr); }
  .patch-forming-link { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 520px) {
  .patch-forming { grid-template-columns: minmax(0, 1fr); }
  .patch-forming-plate { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-thread-line { animation: none; }
  .patch-card, .patch-card.is-out { transition: none; transform: none; }
}

/* The pairs now follow the card grid, so they get their own heading and the first spread keeps
   its rule: .spread is no longer the first child of the wrap. */
.spreads-head { padding-top: calc(var(--sect) * .4); }
.spreads-head h2 { font-size: var(--t-48); color: var(--forest); margin: 6px 0 0; }
.spreads-head + .spread { border-top: 0; padding-top: clamp(20px, 2.5vw, 32px); }

/* Sibling projects sit in the same labelled list as the rest of the work. */
.prose .patch-created .sibling-list li { line-height: 1.55; }
.prose .patch-created .sibling-list b { color: var(--forest); font-weight: 500; }

/* Restor connects the patch directory to the wider restoration movement. */
.fact-restor { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-strong); font-size: 15px; line-height: 1.55; }
.fact-restor a { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; color: var(--moss); text-decoration: underline; text-underline-offset: 4px; }
.patch-campaign { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); padding: clamp(28px, 4vw, 56px); background: var(--mist); align-items: center; }
.patch-campaign h2 { font-size: var(--t-48); color: var(--forest); margin: 14px 0; }
.patch-campaign p { color: var(--stone); line-height: 1.6; }
.patch-campaign .campaign-target { font-size: var(--t-64); display: block; color: var(--forest); margin: 18px 0 8px; }
.patch-campaign .btn { margin-top: 24px; }
.patch-campaign-photo { position: relative; margin: 0; align-self: stretch; min-height: 340px; }
.patch-campaign-photo > img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.patch-campaign-photo figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 20px 18px; color: #fff; background: linear-gradient(transparent,rgba(6,18,12,.9)); font-size: 13px; }
.patch-sponsor { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 14px; }
.patch-sponsor img { width: 70px; height: auto; }
.patch-sponsor a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
        .patch-campaign { grid-template-columns: 1fr; }
  .patch-campaign-photo { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---------- The three pairs, as one compact list ---------- */
.pair-list { padding: calc(var(--sect) * .5) 0 var(--sect); }
.pair-list h2 { font-size: var(--t-48); color: var(--forest); margin-bottom: clamp(24px, 3vw, 36px); }
.pairs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.pair-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 1fr) minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2vw, 28px); padding: 22px 0; border-bottom: 1px solid var(--line-strong); }
.pair-end { display: flex; align-items: center; gap: 14px; color: var(--forest); text-decoration: none; }
.pair-end-wild { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
.pair-thumb { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--canvas), 0 0 0 4.5px var(--line-strong); transition: box-shadow .3s var(--ease); }
.pair-end-urban .pair-thumb { box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px var(--sprout); }
.pair-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pair-end b { display: block; font: 500 var(--t-28) / 1.05 var(--display); }
.pair-end small { display: block; margin-top: 4px; font-size: 13px; color: var(--stone); }
.pair-end:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pair-end:hover .pair-thumb { box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px var(--leaf); }
.pair-thread { position: relative; display: block; color: var(--leaf); height: 24px; }
.pair-thread svg { width: 100%; height: 24px; }
.pair-km { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); padding: 0 8px; background: var(--canvas); font-size: 12px; color: var(--moss); white-space: nowrap; }
.pair-give { height: 46px; padding: 0 18px; }
@media (max-width: 900px) {
  .pair-row { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); }
  .pair-give { grid-column: 1 / -1; justify-self: start; }
  .pair-end b { font-size: 20px; }
  .pair-thumb { width: 48px; height: 48px; }
}
@media (max-width: 560px) { .pair-end small { display: none; } .pair-end { gap: 10px; } }

/* ---------- Restor: the six patches drawn as one web, Restor at the middle ---------- */
.restor-network { padding: var(--sect) 0; background: var(--mist); }
.restor-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.restor-top h2 { font-size: var(--t-64); color: var(--forest); max-width: 12ch; }
.restor-lead { font-size: var(--t-22); line-height: 1.5; color: var(--forest); }
.restor-web { position: relative; height: clamp(320px, 34vw, 460px); margin: clamp(40px, 5vw, 64px) 0; }
.restor-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.restor-lines path { vector-effect: non-scaling-stroke; }
.rl-spoke path { stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 3 6; }
.rl-pair path { stroke: var(--leaf); stroke-width: 2; stroke-dasharray: 6 5; animation: dash-march 3.4s linear infinite; }
.rw-node { position: absolute; display: grid; justify-items: center; gap: 8px; transform: translate(-50%, -50%); }
.rw-node img { width: clamp(64px, 7vw, 96px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 4px var(--mist), 0 0 0 6px var(--leaf); }
.rw-urban img { box-shadow: 0 0 0 4px var(--mist), 0 0 0 6px var(--sprout); }
.rw-node em { font: 500 13px / 1.2 var(--sans); font-style: normal; color: var(--forest); white-space: nowrap; background: var(--mist); padding: 0 6px; }
.rw-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: clamp(96px, 10vw, 128px); aspect-ratio: 1; border-radius: 50%; background: var(--forest); color: #fff; font: 500 var(--t-22) / 1 var(--display); box-shadow: 0 0 0 8px rgba(18,56,42,.08), 0 0 0 18px rgba(18,56,42,.05); }
.restor-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px clamp(24px, 4vw, 64px); }
.restor-body p { font-size: var(--t-16); line-height: 1.65; color: var(--ink); }
.restor-cta { grid-column: 1 / -1; justify-self: start; margin-top: 10px; }
@media (max-width: 900px) {
  .restor-top, .restor-body { grid-template-columns: 1fr; }
  .rw-node em { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rl-pair path { animation: none; } }
@keyframes dash-march { to { stroke-dashoffset: -28.5px; } }
.restor-network + .next-step { padding-top: 0; }

.connects-photo img { display: block; }
.fact-restor a .arrow, .fact-restor a svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 900px) {
  .restor-top, .restor-body { grid-template-columns: minmax(0, 1fr); }
  .restor-cta { white-space: normal; height: auto; min-height: 52px; padding-block: 12px; text-align: left; }
}
@media (max-width: 560px) {
  .restor-web { height: 300px; margin-inline: -8px; }
  .rw-node img { width: 54px; }
  .rw-hub { width: 76px; font-size: 16px; }
}

/* The shade lives inside the photograph's frame, so the frame that travels in the page
   transition carries it. */
main .patch-hero[data-hero]::after { content: none; }
.patch-hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(6,18,12,var(--hero-shade-floor)) 0%, rgba(6,18,12,var(--hero-shade-middle)) 30%, rgba(6,18,12,.1) 55%, transparent 72%),
    linear-gradient(to right, rgba(6,18,12,var(--hero-shade-left)) 0%, rgba(6,18,12,var(--hero-shade-shoulder)) var(--hero-shade-shoulder-position), transparent var(--hero-shade-end)); }
@media (max-width: 900px) { .patch-hero-media::after { background: linear-gradient(to top, rgba(6,18,12,.74) 0%, rgba(6,18,12,.64) 40%, rgba(6,18,12,var(--hero-shade-phone-upper)) 68%, transparent 84%), linear-gradient(to right, rgba(6,18,12,.25), transparent); } }

/* ---------- The patch record: replaces the grey "at a glance" box ---------- */
.rec { position: sticky; top: calc(var(--header-h) + 56px + 24px); align-self: start; background: #fff; border: 1.5px solid var(--forest); box-shadow: 10px 10px 0 rgba(18,56,42,.1); color: var(--ink); }
.rec-head { position: relative; padding: 22px 24px 24px; background: var(--forest) url("/assets/contours.svg") 60% 40% / 700px auto; color: #fff; overflow: hidden; isolation: isolate; }
.rec-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(18,56,42,.96) 30%, rgba(18,56,42,.78)); }
.rec-kicker { font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sprout); }
.rec-name { margin-top: 12px; font-size: var(--t-36); line-height: 1; max-width: 10ch; }
.rec-coord { margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.72); letter-spacing: .02em; }
.rec-mark { position: absolute; right: 18px; top: 18px; width: 64px; height: 64px; }
.rec-mark .f { fill: var(--sprout); }
.rec-mark .r { fill: none; stroke: var(--sprout); stroke-width: 4; }
.rec-mark .o { fill: none; stroke: rgba(169,213,160,.4); stroke-width: 1.2; stroke-dasharray: 2 4; animation: rec-turn 30s linear infinite; transform-origin: 32px 32px; }
@keyframes rec-turn { to { transform: rotate(360deg); } }
.rec-big { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.rec-big div { display: grid; gap: 6px; align-content: start; padding: 18px 24px; }
.rec-big div + div { border-left: 1px solid var(--line); }
.rec-big b { font-size: var(--t-28); font-weight: 500; color: var(--forest); line-height: 1.05; }
.rec-big div + div b { font-family: var(--display); }
.rec-big span { font-size: 12px; letter-spacing: .04em; color: var(--stone); }
.rec-rows { padding: 6px 24px; }
.rec-rows div { display: grid; grid-template-columns: 6.2em 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.rec-rows div:last-child { border-bottom: 0; }
.rec-rows dt { font: 500 11px/1.9 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--moss); }
.rec-rows dd a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rec-pin { white-space: nowrap; }
.rec-check { display: flex; gap: 8px; align-items: center; }
.rec-check svg { width: 18px; height: 18px; flex: none; stroke: var(--leaf); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rec-links { list-style: none; margin: 0 24px; border-top: 1px solid var(--line-strong); }
.rec-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 500; font-size: 15px; color: var(--forest); transition: color .3s, padding .4s var(--ease); }
.rec-links a:hover { color: var(--moss); padding-left: 6px; }
.rec-links .arrow { width: 16px; height: 16px; flex: none; }
.rec-also { margin: 10px 24px 0; font-size: 13px; color: var(--stone); }
.rec-restor { display: flex; justify-content: space-between; align-items: center; margin: 18px 24px 24px; padding: 14px 18px; border-radius: 12px; background: var(--mist); color: var(--forest); transition: background-color .3s; }
.rec-restor:hover { background: var(--sprout); }
.rec-restor span { display: grid; gap: 3px; font-family: var(--display); font-size: 24px; line-height: 1; }
.rec-restor small { font: 500 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--moss); }
.rec-restor .arrow { width: 20px; height: 20px; }
@media (max-width: 900px) { .rec { position: relative; top: 0; } }

/* the gallery: one wide photograph and the rest as a strip */
.patch-gallery { grid-template-columns: repeat(6, 1fr); }
.patch-gallery-photo { grid-column: span 3; }
.patch-gallery-photo:first-child:nth-last-child(odd) { grid-column: span 6; aspect-ratio: 16 / 9; }
.patch-gallery-photo:nth-child(n+2):nth-last-child(-n+3):first-child ~ .patch-gallery-photo { grid-column: span 3; }
.patch-gallery:has(.patch-gallery-photo:nth-child(3):last-child) .patch-gallery-photo:first-child { grid-column: span 6; aspect-ratio: 16 / 8; }

/* ---------- Where it connects, and giving: one section ---------- */
.patch-give { position: relative; padding: calc(var(--sect) * .8) 0; background: var(--mist); overflow: hidden; isolation: isolate; scroll-margin-top: 110px; }
/* the contour lines stay, but only where there is no text: they rise from the bottom right */
.patch-give::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/contours.svg") right bottom / 1500px auto; opacity: .7;
  -webkit-mask-image: radial-gradient(90% 80% at 100% 100%, #000 20%, transparent 70%); mask-image: radial-gradient(90% 80% at 100% 100%, #000 20%, transparent 70%); }
.patch-give-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.patch-give-head h2 { font-size: var(--t-48); color: var(--forest); max-width: 16ch; }
.patch-give-head p { font-size: var(--t-18); line-height: 1.55; color: var(--ink); max-width: 30em; }
.patch-give-foot { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 96px); margin-top: clamp(28px, 4vw, 44px); align-items: start; }
.pg-facts { display: flex; gap: clamp(24px, 3.5vw, 48px); }
.pg-facts div { display: grid; gap: 6px; }
.pg-facts b { font-size: var(--t-36); color: var(--forest); white-space: nowrap; }
.pg-facts span { font-size: 13px; color: var(--stone); }
.pg-uses-h { font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--moss); margin-bottom: 12px; }
.pg-uses ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.pg-uses li { display: flex; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.4; color: var(--ink); }
.pg-uses i { flex: none; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-1px); }
.pg-uses i.d { background: var(--leaf); }
.pg-uses i.r { border: 1.6px solid var(--leaf); }
.patch-subnav-give { margin-left: auto; color: var(--forest) !important; padding: 7px 14px !important; border: 0 !important; border-radius: 8px; background: var(--forest); color: #fff !important; }
.patch-subnav-give:hover { background: var(--moss); }
@media (max-width: 900px) {
  .patch-give-head, .patch-give-foot { grid-template-columns: 1fr; }
  .pg-uses ul { grid-template-columns: 1fr; }
  .pg-facts b { font-size: 26px; }
  .patch-give > .wrap { width: calc(100% - 20px); }
  .patch-give-head, .patch-give-foot { padding: 0 6px; }
}
#patch .patch-grid { margin-bottom: 0; }
#patch { padding-bottom: calc(var(--sect) * .6); }
.patch-give-head h2 { max-width: 22ch; }
.pg-uses ul { grid-template-rows: repeat(3, auto); grid-auto-flow: column; }

/* Updates: the season so far on the left, the first field report waiting on the right */
.page-patch #updates .wrap > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 clamp(40px, 6vw, 96px); align-items: start; }
.page-patch #updates h2 { grid-column: 1; }
.page-patch #updates .timeline-list { grid-column: 1; margin-top: 32px; padding-left: 32px; border-left: 1.5px dashed var(--line-strong); gap: 30px; }
.page-patch #updates .timeline-list li::before { left: -39px; top: 0; width: 13px; height: 13px; background: var(--canvas); border: 2px solid var(--leaf); box-shadow: none; }
.page-patch #updates .timeline-list li:first-child::before { background: var(--leaf); }
.page-patch #updates .timeline-list p { font-family: var(--display); font-size: var(--t-22); line-height: 1.25; color: var(--forest); }
.page-patch #updates .empty-card { grid-column: 2; grid-row: 1 / span 2; margin: 0; background: #fff; border: 1.5px solid var(--forest); border-radius: 0; padding: 10px 10px 22px; box-shadow: 10px 10px 0 rgba(18,56,42,.1); rotate: 1.2deg; }
.page-patch #updates .empty-card p { padding: 0 12px; font-size: 16px; color: var(--ink); }
.page-patch #updates .empty-card .btn { margin-left: 12px; }
.page-patch #updates .empty-card .empty-photo { border-radius: 0; }
@media (max-width: 900px) {
  .page-patch #updates .wrap > div { grid-template-columns: 1fr; }
  .page-patch #updates .empty-card { grid-column: 1; grid-row: auto; margin-top: 36px; rotate: 0deg; }
}
@media (max-width: 900px) {
  .pg-uses ul { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .pg-facts { flex-wrap: wrap; gap: 18px 28px; }
  .pg-facts b { font-size: 24px; }
  .rec-rows div { grid-template-columns: 5.6em 1fr; }
}

/* ---------- Pairs into Restor: three lanes, read left to right ---------- */
.lanes { padding: var(--sect) 0; background: var(--mist); position: relative; overflow: hidden; }
.lanes::before { content: ""; position: absolute; inset: 0; background: url("/assets/contours.svg") left bottom / 1400px auto; opacity: .5; -webkit-mask-image: linear-gradient(to top, #000, transparent 60%); mask-image: linear-gradient(to top, #000, transparent 60%); pointer-events: none; }
.lanes .wrap { position: relative; }
.lanes-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.lanes-top h2 { font-size: var(--t-48); color: var(--forest); max-width: 14ch; }
.lanes-top p { font-size: var(--t-18); line-height: 1.6; color: var(--ink); max-width: 32em; }
.lanes-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 300px); gap: 0; align-items: stretch; }
.lanes-list { list-style: none; display: grid; gap: 14px; padding: 0; }
.lane { display: grid; grid-template-columns: minmax(0, 1fr) clamp(70px, 9vw, 140px) minmax(0, 1fr) minmax(40px, 1fr) auto; align-items: center; gap: 0 14px; padding: 14px 0 14px 14px; background: #fff; border: 1px solid var(--line); border-right: 0; border-radius: 18px 0 0 18px; position: relative; }
.lane-end { display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--forest); }
.lane-pic { position: relative; flex: none; width: 64px; height: 64px; }
.lane-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; transition: transform .6s var(--ease); }
.lane-end:hover .lane-pic img { transform: scale(1.06) rotate(-2deg); }
/* A match still being agreed: no link, the photo quiet, the mark an open ring */
.lane-end.is-forming .lane-pic img { opacity: .55; }
.lane-end.is-forming:hover .lane-pic img { transform: none; }
.lane-end.is-forming .lane-mark { background: #fff; border: 2px dashed var(--leaf); }
.lane-end.is-forming .lane-txt b { color: var(--stone); font-weight: 500; }
.lane-mark { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 3px #fff; }
.lane-mark-d { background: var(--leaf); }
.lane-mark-r { background: #fff; border: 3px solid var(--leaf); }
.lane-txt { display: grid; gap: 3px; min-width: 0; }
.lane-txt small { font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--moss); }
.lane-txt b { font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.05; }
.lane-txt span { font-size: 13px; color: var(--stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-thread, .lane-out { position: relative; height: 20px; }
.lane-thread svg, .lane-out svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lane-thread path, .lane-out path { fill: none; stroke: var(--leaf); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: lane-flow 1.4s linear infinite; }
.lane-out path { stroke: var(--line-strong); }
@keyframes lane-flow { to { stroke-dashoffset: -16; } }
.lane-km { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; background: var(--mist); font-size: 12px; color: var(--moss); white-space: nowrap; }
.lane-status { justify-self: end; margin-right: -2px; }

.lane-out { grid-column: 4; grid-row: 1; margin-right: 110px; }
.lane-status { grid-column: 4; grid-row: 1; }
.lane-give { position: absolute; right: 14px; top: -11px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 10px; background: var(--forest); color: #fff; font-size: 13px; font-weight: 500; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s var(--ease); }
.lane:hover .lane-give, .lane-give:focus-visible, .lane-give:has(em) { opacity: 1; transform: none; }
.lane-give em { font-style: normal; color: var(--sprout); margin-right: 2px; }
.lane-give svg { width: 13px; height: 13px; }
.lanes-restor { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 26px; border-radius: 0 22px 22px 0; background: var(--forest); color: #fff; min-height: 100%; }
.lanes-restor-bg { position: absolute; inset: 0; z-index: -1; }
.lanes-restor-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.lanes-restor-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,56,42,.98) 35%, rgba(18,56,42,.4)); }
.lanes-restor-k { font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sprout); }
.lanes-restor-h { font-size: clamp(40px, 4vw, 56px); line-height: 1; }
.lanes-restor p:not([class]) { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.86); }
.lanes-restor a { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; height: 48px; padding: 0 16px; border-radius: 12px; background: var(--sprout); color: var(--forest); font-weight: 500; }
.lanes-restor a svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.lanes-restor a:hover svg { transform: translateX(3px); }
@media (max-width: 1100px) {
  .lane { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) auto; }
  .lane-out { display: none; }
  .lane-status { grid-column: 4; margin-right: 12px; }
}
@media (max-width: 900px) {
  .lanes-top, .lanes-grid { grid-template-columns: 1fr; }
  .lane { grid-template-columns: 1fr; gap: 10px; padding: 16px; border-radius: 18px; border-right: 1px solid var(--line); }
  .lane-thread { height: 26px; width: 2px; margin-left: 31px; }
  .lane-thread svg { display: none; }
  .lane-thread::before { content: ""; position: absolute; inset: 0; border-left: 2px dotted var(--leaf); }
  .lane-km { left: 16px; top: 3px; transform: none; }
  .lane-status { grid-column: 1; grid-row: auto; justify-self: start; margin: 4px 0 0; }
  .lane-give { opacity: 1; transform: none; top: 16px; right: 16px; }
  .lanes-restor { border-radius: 22px; margin-top: 14px; min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) { .lane-thread path, .lane-out path { animation: none; } }
.lanes { padding-bottom: calc(var(--sect) * .7); }