/* Patches index and patch pages: matched rows, full-bleed hero, sub-nav, fact cards, connects band, funding panel. */

/* 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%; }
/* The hero reads like every other landing photograph on the site: the picture carries it,
   the type sits in the dark half. It was washed out to near white before. */
.page-patches-index .page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,18,12,.9), rgba(6,18,12,.45) 58%, rgba(6,18,12,.3)), linear-gradient(to bottom, rgba(6,18,12,.5), transparent 24%); }
.page-patches-index .page-head { min-height: 62svh; display: grid; align-content: end; padding-bottom: clamp(48px, 6vw, 84px); }
.page-patches-index .page-head .eyebrow { color: var(--sprout); }
.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); }

/* ---------- Patches index: match spreads. Two tilted plates, a stamp, a drawn thread between them ---------- */
.spreads { padding: 0 0 calc(var(--sect) * .5); }
.spread { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--line); position: relative; scroll-margin-top: 90px; }
.spread:first-child { border-top: 0; padding-top: clamp(24px, 3vw, 40px); }
.spread-head { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 24px); flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.spread-num { font: 500 var(--t-14) / 1 var(--sans); letter-spacing: .04em; color: var(--leaf); }
.spread-head h2 { font-size: var(--t-48); color: var(--forest); margin: 0; }
.spread-head .link-glyph { color: var(--leaf); font-family: var(--sans); font-weight: 400; font-size: .55em; padding: 0 .5em; vertical-align: .15em; }
.tag-outline { background: transparent; border: 1px solid var(--moss); color: var(--moss); }

.spread-grid { display: grid; grid-template-columns: 1fr minmax(64px, 140px) 1fr; gap: 0 clamp(10px, 1.6vw, 24px); align-items: center; }
.spread-side { position: relative; }
.spread-side-urban .plate { transform: rotate(-1deg); }
.spread-side-wild .plate { transform: rotate(1deg); }
.spread-side-urban .plate:hover { transform: rotate(-1deg) translateY(-3px); }
.spread-side-wild .plate:hover { transform: rotate(1deg) translateY(-3px); }

/* Plates: white card, hairline forest border, hard offset shadow like the old atlas figures */
.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: sits on the corner of the city plate and turns slowly */
.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); } }

/* Connector: the thread draws in once, then the dashes march */
.spread-link { display: contents; }
.spread-link-label { display: none; }
.spread-connector { align-self: center; overflow: visible; width: 100%; }
.spread-connector .march { stroke: var(--leaf); animation: dash-march 3.4s linear infinite; }
.spread-connector .conn-dot-a { fill: var(--sprout); stroke: var(--leaf); stroke-width: 1.6; }
.spread-connector .conn-dot-b { fill: var(--canvas); stroke: var(--leaf); stroke-width: 2; }
.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; }
/* shift by a whole dash period (5 + 4.5 = 9.5) times three or the pattern jumps each loop */
@keyframes dash-march { to { stroke-dashoffset: -28.5px; } }

.spread-summary { margin: clamp(28px, 3.5vw, 40px) 0 0; max-width: 62ch; color: var(--stone); line-height: 1.55; }
.spread-copy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(32px, 4vw, 44px); }
.spread-copy h3 { font-size: var(--t-28); color: var(--forest); margin: 0 0 8px; }
.spread-copy h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.spread-copy .coords { display: block; margin-bottom: 12px; font: 500 12px / 1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.spread-copy .coords .money { font-size: 12px; letter-spacing: .06em; }
.spread-copy p { color: var(--stone); line-height: 1.55; margin: 0; }
.spread-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px !important; font-size: var(--t-14); }
.spread-stats span { position: relative; }
.spread-stats span + span::before { content: ""; position: absolute; left: -13px; top: .55em; width: 4px; height: 4px; border-radius: 50%; background: var(--sprout); }
.spread-stats b { color: var(--moss); font-weight: 500; }
.spread-cta { margin-top: clamp(28px, 4vw, 40px); display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
/* Wide screens read the foot as one line of the spread: the summary under the city plate and the
   two actions in the column where the wild plate sits, so the page keeps the same two-part rhythm. */
@media (min-width: 801px) {
  .spread-foot { display: grid; grid-template-columns: 1fr minmax(64px, 140px) 1fr; gap: 0 clamp(10px, 1.6vw, 24px); align-items: start; margin-top: clamp(28px, 3.5vw, 40px); }
  .spread-foot .spread-summary { margin-top: 0; }
  .spread-foot .spread-cta { grid-column: 3; margin-top: 0; }
}
.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--moss); transition: gap .4s var(--ease); }
.textlink:hover { gap: 12px; }
.textlink .arrow { width: 16px; height: 16px; }

@media (max-width: 800px) {
  .spread-grid { grid-template-columns: 1fr; gap: 12px; }
  /* vertical thread with an upright HTML label beside it; the SVG labels hide */
  .spread-link { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 2px 0; }
  .spread-connector { height: 96px; width: 72px; flex: none; transform: rotate(90deg); }
  .spread-connector .conn-label { display: none; }
  .spread-link-label { display: block; font: 500 12px / 1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--forest); }
  .spread-link-label .money { font-size: 12px; }
  .spread-copy { grid-template-columns: 1fr; gap: 28px; }
  .stamp { width: 76px; height: 76px; top: -24px; right: 2px; }
  .spread-side-urban .plate, .spread-side-wild .plate { transform: rotate(-.6deg); }
  .spread-side-wild .plate { transform: rotate(.6deg); }
}
@media (prefers-reduced-motion: reduce) { .stamp, .spread-connector .march { animation: none; } }

/* ---------- 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; }
.patch-hero-scrim-top { position: absolute; inset: 0 0 auto 0; height: 240px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(6,18,12,.55), transparent); }
.patch-hero-scrim-bottom { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,18,12,.85) 0%, rgba(6,18,12,.5) 32%, rgba(6,18,12,.1) 60%, transparent 78%); }
/* 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) + 20px); 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 .eyebrow { color: var(--sprout); }
.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: #fff; background: var(--forest); 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(--sprout); }
.patch-connects h2 { font-size: var(--t-48); }
.connects-lede { color: rgba(255,255,255,.85); margin-top: 10px; }
.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: #fff; }
.connects-photo { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-12); overflow: hidden; }
.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: rgba(255,255,255,.12); backdrop-filter: blur(6px); color: #fff; 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: rgba(255,255,255,.68); }

/* ---------- 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(--sprout); }
.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) + 20px); letter-spacing: .08em; }
@media (max-width: 700px) { .patch-hero-illus { top: calc(var(--header-h) + 12px); } }

/* 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: 10px; padding: 6px 9px; }
.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; }
@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; }
@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; }