/* LIFE in Salt Marshes – terrestrial web story
   Palette from the salt marsh itself: salt crust, marsh ink, halophyte sage,
   Pannonian sea aster violet as the one accent, reed gold on dark. */
:root {
  --salt: #F2F3EE;
  --salt-2: #E5E8DF;
  --line: #CBD2C6;
  --ink: #1B2623;
  --ink-2: #394641;
  --muted: #5B6862;
  --sage: #5B7C73;
  --aster: #6B4C92;
  --aster-soft: #ECE6F3;
  --deep: #15201D;
  --deep-2: #1F2E2A;
  --on-deep: #E8ECE4;
  --on-deep-2: #AFBDB5;
  --reed: #D3B267;
  --clay: #9C8F7E;
  --loess: #B89B72;

  --serif: 'Signs', 'Literata', Georgia, 'Times New Roman', serif;
  --sans: 'Schibsted Grotesk', 'Segoe UI', system-ui, Helvetica, Arial, sans-serif;
  --gut: clamp(20px, 5vw, 96px);
  --hdr: 56px;
  --stage: calc(100svh - var(--hdr));
  --body: clamp(17px, 0.35vw + 14px, 20px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 8px); }
body {
  margin: 0; background: var(--salt); color: var(--ink-2);
  font: 400 var(--body)/1.7 var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--ink); font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.015em; line-height: 1.1; }
h3 { font-size: clamp(24px, 2vw, 34px); }
h4 { font-size: 1.15em; }
p { margin: 0 0 1em; }
.sci { font-family: var(--serif); font-style: italic; }
.wrap { width: 100%; max-width: 1560px; margin-inline: auto; padding-inline: var(--gut); }
.ph { color: var(--aster); font-family: var(--sans); font-size: .82em; font-weight: 500; }
.dark .ph { color: var(--reed); }
.src { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--muted); }
.src a { text-decoration-color: var(--line); text-underline-offset: 3px; }
.dark .src { color: var(--on-deep-2); }
:focus-visible { outline: 2px solid var(--aster); outline-offset: 3px; border-radius: 2px; }
.dark :focus-visible, .hero :focus-visible { outline-color: var(--reed); }

/* review mode: ?review in the URL */
.review .draft { text-decoration: underline wavy color-mix(in srgb, var(--aster) 55%, transparent) 1px; text-underline-offset: 5px; }
.review-hint { display: none; }
.review .review-hint { display: block; color: var(--reed); }

.skiplink { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; font-family: var(--sans); }
.skiplink:focus { top: 10px; }

/* ---------- header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr);
  padding: env(safe-area-inset-top, 0) var(--gut) 0;
  display: flex; align-items: center; gap: 24px;
  font-family: var(--sans); font-size: 14px; color: #fff;
  transition: background .35s, color .35s, box-shadow .35s;
}
.hdr.solid { background: color-mix(in srgb, var(--salt) 92%, transparent); color: var(--ink); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.hdr.on-dark { background: color-mix(in srgb, var(--deep) 90%, transparent); color: var(--on-deep); box-shadow: 0 1px 0 #ffffff14; }
.hdr-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600; white-space: nowrap; }
.hdr-brand img { width: 28px; height: auto; filter: invert(1); transition: filter .35s; }
.hdr.solid .hdr-brand img { filter: none; }
.hdr-brand em { font-style: normal; font-weight: 400; opacity: .7; }
.hdr-nav { margin-left: auto; }
.hdr-nav ol { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.hdr-nav a { display: block; padding: 6px 10px; text-decoration: none; border-radius: 999px; opacity: .8; transition: opacity .2s, background .2s; }
.hdr-nav a:hover { opacity: 1; }
.hdr-nav a[aria-current="true"] { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.hdr-nav .num { font-family: var(--serif); font-style: italic; margin-right: 6px; opacity: .75; }
.hdr-lang { text-decoration: none; padding: 5px 12px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 999px; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.progress span { display: block; height: 100%; width: 100%; background: var(--aster); transform-origin: 0 50%; transform: scaleX(0); }
.hdr.on-dark .progress span, .hdr:not(.solid) .progress span { background: var(--reed); }
@media (max-width: 760px) {
  .hdr-nav { display: none; }
  .hdr-lang { margin-left: auto; }
  .hdr-brand em { display: none; }
}

/* ---------- cover ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; color: #fff; overflow: hidden; background: var(--deep); isolation: isolate; }
.hero-media, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media video { object-fit: cover; object-position: 50% 40%; }
.hero-shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(10,16,14,.55) 0%, rgba(10,16,14,0) 22%),
  linear-gradient(0deg, rgba(10,16,14,.86) 0%, rgba(10,16,14,.35) 45%, rgba(10,16,14,0) 70%); }
.hero-funding {
  position: absolute; top: calc(var(--hdr) + 14px); right: var(--gut); z-index: 2;
  display: flex; align-items: center; gap: 18px; padding: 10px 16px;
  background: #fff; border-radius: 6px;
}
.hero-funding img { height: 40px; width: auto; }
.hero-funding .lg-natura { height: 46px; }
.hero-funding .lg-moe { height: 44px; }
.hero-text { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(88px, 14vh, 150px); z-index: 2; max-width: 1200px; }
.hero-title { color: #fff; font-weight: 300; font-size: clamp(46px, 8.4vw, 150px); line-height: .96; letter-spacing: -0.035em; margin-bottom: .35em; }
.hero-title .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .ln-in { display: inline-block; }
.hero-title .ln:nth-child(2) { padding-left: .9em; font-style: italic; font-weight: 300; }
.hero-title .ln:nth-child(3) { padding-left: 2.2em; }
.hero-sub { max-width: 40em; font-size: clamp(16px, 1.1vw + 8px, 21px); line-height: 1.55; color: #E4EAE3; margin: 0; }
.hero-foot { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(22px + env(safe-area-inset-bottom, 0)); z-index: 2; display: flex; justify-content: space-between; align-items: center; font-family: var(--sans); font-size: 14px; }
.hero-scroll { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #D8DFD6; }
.hero-scroll-line { width: 1px; height: 34px; background: linear-gradient(#fff0, #fff); animation: drip 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.btn-video { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,.35); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 8px 14px; font: inherit; cursor: pointer; }
.btn-video .ico { width: 10px; height: 12px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.btn-video[aria-pressed="true"] .ico { border: 0; width: 0; height: 0; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (max-width: 680px) {
  .hero-funding { left: var(--gut); right: auto; gap: 12px; padding: 8px 10px; }
  .hero-funding img { height: 24px; }
  .hero-funding .lg-natura, .hero-funding .lg-moe { height: 28px; }
  .hero-title .ln:nth-child(2) { padding-left: .4em; }
  .hero-title .ln:nth-child(3) { padding-left: 1em; }
  .hero-text { bottom: 90px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .hero-funding { display: none; }
  .hero-title { font-size: 12vh; }
  .hero-text { bottom: 70px; }
}

/* ---------- intro band ---------- */
.intro { padding: clamp(64px, 10vw, 140px) var(--gut) clamp(40px, 6vw, 80px); max-width: 1560px; margin: 0 auto; display: grid; gap: 56px; }
.intro-text { font-size: clamp(22px, 1.6vw + 12px, 38px); line-height: 1.35; color: var(--ink); max-width: 30em; font-weight: 350; letter-spacing: -0.01em; margin: 0; }
.partners { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.partners-label { font-family: var(--sans); font-size: 13px; color: var(--muted); flex-basis: 100%; }
.partners img, .ftr .partners-row img { height: 48px; width: auto; }
.partners .lg-cso, .ftr .lg-cso { height: 64px; }
.partners .lg-wfs, .ftr .lg-wfs { height: 40px; }
.partners .lg-vumop, .ftr .lg-vumop { height: 42px; }

/* ---------- chapter scaffolding ---------- */
.ch { position: relative; }
.ch-num { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(22px, 2vw, 32px); color: var(--aster); margin: 0 0 .2em; }
.dark .ch-num { color: var(--reed); }
.ch-title { font-size: clamp(40px, 5.6vw, 96px); font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.lede { font-size: clamp(20px, 1.2vw + 12px, 30px); line-height: 1.45; color: var(--ink); max-width: 30em; font-weight: 350; }
.prose { max-width: 36em; }
.dark { background: var(--deep); color: var(--on-deep-2); }
.dark h2, .dark h3, .dark h4, .dark .lede { color: var(--on-deep); }

/* ---------- chapter I ---------- */
.ch1-open { position: relative; height: 92svh; min-height: 520px; overflow: hidden; color: #fff; }
.ch1-open-img { position: absolute; inset: -8% 0; }
.ch1-open-img img { width: 100%; height: 100%; object-fit: cover; }
.ch1-open::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,18,16,.75), rgba(12,18,16,0) 55%); }
.ch1-open-text { position: absolute; left: var(--gut); bottom: clamp(40px, 8vh, 90px); z-index: 1; }
.ch1-open-text .ch-num, .ch1-open-text .ch-title { color: #fff; }
.ch1-open-text .ch-title { font-size: clamp(48px, 8vw, 140px); }
.ch1-body { padding-block: clamp(60px, 8vw, 120px); }
.ch1-body .lede { margin-bottom: 2em; }
.ch1-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.fig-tall { margin: 0; }
.fig-tall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 50%; border-radius: 3px; }
.ch1-body .ch-title { margin-bottom: .5em; }
.ch1-body .lede { margin-bottom: 1.2em; }
.ch1-cols { align-items: center; }
figcaption { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 12px; max-width: 46em; }
figcaption .src { display: block; margin-top: 6px; font-size: 12.5px; }
@media (max-width: 900px) { .ch1-cols { grid-template-columns: 1fr; } .fig-tall img { aspect-ratio: 4/3; } }

/* formation: sticky soil section with scroll steps */
.form { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; background: var(--salt-2); }
.form-sticky { position: sticky; top: var(--hdr); height: var(--stage); display: flex; align-items: center; padding: 4vh 0 4vh var(--gut); }
.soil { margin: 0; width: 100%; max-height: 80vh; aspect-ratio: 800 / 520; border-radius: 4px; overflow: hidden; background: #cfd8d3; }
.soil svg { width: 100%; height: 100%; }
.form-sticky .soil { max-width: calc(80vh * 800 / 520); }
.form-steps { padding: 18vh var(--gut) 30vh clamp(24px, 4vw, 72px); }
.form-head { margin-bottom: 30vh; }
.form-head h3 { font-size: clamp(30px, 3vw, 52px); font-weight: 300; margin-bottom: .4em; }
.form-head p { color: var(--muted); font-family: var(--sans); font-size: 15px; }
.form-step { min-height: 80vh; display: flex; align-items: center; }
.form-step .card { background: var(--salt); padding: 28px 30px; border-radius: 4px; max-width: 30em; border-left: 3px solid var(--line); transition: border-color .4s, opacity .4s; opacity: .45; }
.form-step.is-active .card { border-left-color: var(--aster); opacity: 1; }
.step-n { font-family: var(--serif); font-style: italic; font-size: 34px; color: var(--aster); display: block; line-height: 1; margin-bottom: 10px; }
.form-step h4 { margin-bottom: .4em; font-size: 24px; font-weight: 400; }
.form-step p { margin: 0; }
.form-src { margin-top: 10vh; }

/* soil svg states */
.soil .sky-top { stop-color: #cfdcd9; } .soil .sky-bot { stop-color: #eef1ea; }
.soil .topsoil { fill: #8b7458; }
.soil .clay-bg { fill: #8f9493; } .soil .clay-line { stroke: #7a8080; stroke-width: 3; }
.soil .groundwater { opacity: 0; transition: opacity .8s; }
.soil .salt { fill: #fff; opacity: .35; transition: opacity .6s; transform-box: fill-box; transform-origin: center; transform: rotate(45deg); }
.soil .lbls text { font: 500 15px var(--sans); fill: #fff; opacity: .9; }
.soil .lbl-gw, .soil .lbl-evap { opacity: 0 !important; transition: opacity .6s; }
.soil .lbl-evap { fill: var(--ink) !important; }
.soil .sun circle { fill: #F2C94C; } .soil .sun .rays line { stroke: #F2C94C; stroke-width: 4; stroke-linecap: round; }
.soil .sun { opacity: 0; transform: translateY(30px); transition: opacity .8s, transform .8s; }
.soil .rise { fill: none; stroke: #A9D2E3; stroke-width: 2.5; stroke-dasharray: 8 12; opacity: 0; transition: opacity .6s; }
.soil .ah { fill: #A9D2E3; }
.soil .part { fill: #fff; opacity: 0; }
.soil .crust { fill: #fff; opacity: 0; transition: opacity .5s var(--d); }
.soil .blade { fill: none; stroke-linecap: round; transform-box: fill-box; transform-origin: bottom center; }
.soil .blade.tall { stroke: #6f8f5f; stroke-width: 2.4; transition: transform 1s cubic-bezier(.2,.7,.2,1) var(--d); }
.soil .blade.short { stroke: #86a36e; stroke-width: 2.2; }
.soil .hoof path { fill: #3c332a; }
.soil .hoof { opacity: 0; transition: opacity .4s var(--d); }
/* 1: salt sits in the clay */
.soil[data-step="1"] .salt { opacity: 1; animation: glint 2.2s ease-in-out infinite var(--d); }
@keyframes glint { 50% { opacity: .45; } }
/* 2: water held above the clay dissolves salt; particles lift a little */
.soil[data-step="2"] .salt, .soil[data-step="3"] .salt, .soil[data-step="4"] .salt { opacity: .8; }
.soil[data-step="2"] .groundwater, .soil[data-step="3"] .groundwater, .soil[data-step="4"] .groundwater { opacity: 1; }
.soil[data-step="2"] .lbl-gw, .soil[data-step="3"] .lbl-gw { opacity: .95 !important; }
.soil[data-step="2"] .part { animation: lift 3s ease-in-out infinite var(--d); }
@keyframes lift { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-60px); } }
/* 3: evaporation pulls salty water all the way up, salt stays on the surface */
.soil[data-step="3"] .sun, .soil[data-step="4"] .sun { opacity: 1; transform: none; }
.soil[data-step="3"] .rise { opacity: .9; animation: up 1.4s linear infinite; }
@keyframes up { to { stroke-dashoffset: -40; } }
.soil[data-step="3"] .part { animation: rise var(--dur) ease-in infinite var(--d); }
@keyframes rise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .95; } 85% { opacity: .95; } 100% { opacity: 0; transform: translateY(-168px); } }
.soil[data-step="3"] .lbl-evap { opacity: 1 !important; }
.soil[data-step="3"] .crust, .soil[data-step="4"] .crust { opacity: .95; }
/* 4: grazing keeps the sward short and the soil compact */
.soil[data-step="4"] .blade.tall { transform: scaleY(.18); }
.soil[data-step="4"] .hoof { opacity: 1; }
@media (max-width: 900px) {
  .form { grid-template-columns: 1fr; }
  .form-sticky { padding: 12px var(--gut); height: auto; z-index: 1; background: var(--salt-2); }
  .form-steps { padding: 6vh var(--gut) 20vh; }
  .form-head { margin-bottom: 10vh; }
  .form-step { min-height: 60vh; }
}

/* plant strip */
.plants { padding-block: clamp(64px, 8vw, 120px) 24px; }
.plants-head { display: grid; grid-template-columns: 1fr auto; gap: 8px 40px; align-items: end; margin-bottom: 28px; }
.plants-head h3 { font-size: clamp(30px, 3vw, 52px); font-weight: 300; }
.plants-head p { grid-column: 1; color: var(--muted); margin: 0; max-width: 36em; }
.strip-btns { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 8px; }
.sbtn, .mbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--salt); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s; }
.sbtn:hover, .mbtn:hover { border-color: var(--ink); }
.plants-strip { list-style: none; margin: 0; padding: 0 var(--gut) 20px; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scroll-padding-inline: var(--gut); }
.plant { flex: 0 0 clamp(230px, 24vw, 360px); scroll-snap-align: start; margin: 0; }
.plant img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.plant p { margin: 12px 0 0; font-family: var(--sans); font-size: 15px; line-height: 1.35; color: var(--ink); }
.plant .pl-cz { display: block; }
.plant .sci { color: var(--muted); font-size: 15px; }
.plant:hover img { transform: scale(1.02); }

.needs { padding-block: clamp(60px, 8vw, 120px) clamp(80px, 10vw, 160px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.needs h3 { font-size: clamp(30px, 3vw, 52px); font-weight: 300; }
.needs-text { font-size: clamp(22px, 1.5vw + 12px, 36px); line-height: 1.4; color: var(--ink); font-weight: 350; margin: 0; max-width: 26em; }
@media (max-width: 760px) { .needs { grid-template-columns: 1fr; } }

/* ---------- chapter II ---------- */
.ch2 { padding-top: clamp(80px, 10vw, 160px); }
.ch2-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 5vw, 90px); align-items: center; }
.proj-logo { display: block; width: clamp(130px, 14vw, 220px); aspect-ratio: 1; border-radius: 50%; background: var(--salt); padding: clamp(16px, 1.8vw, 28px); transition: transform .3s; }
.proj-logo:hover { transform: rotate(-4deg) scale(1.03); }
.proj-logo img { width: 100%; height: 100%; object-fit: contain; }
.ch2-head .lede { margin-top: .6em; margin-bottom: 0; }
.ch2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); padding-block: clamp(56px, 7vw, 110px); }
.ch2-cols h3 { font-size: 22px; font-family: var(--sans); font-weight: 600; margin-bottom: .7em; letter-spacing: 0; }
.ch2-cols p { max-width: 36em; }
.link { color: var(--reed); text-underline-offset: 4px; font-family: var(--sans); font-size: 15px; }
@media (max-width: 760px) { .ch2-head, .ch2-cols { grid-template-columns: 1fr; } }

.targets { padding-bottom: clamp(64px, 8vw, 120px); }
.targets h3 { font-size: 22px; font-family: var(--sans); font-weight: 600; letter-spacing: 0; margin-bottom: 28px; }
.targets-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #ffffff22; }
.targets-grid li { padding: 28px 24px 8px 0; border-right: 1px solid #ffffff18; }
.targets-grid li + li { padding-left: 24px; }
.targets-grid li:last-child { border-right: 0; }
.big { margin: 0; color: var(--on-deep); font-family: var(--serif); font-weight: 300; font-size: clamp(56px, 7vw, 128px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.big .unit { font-size: .34em; letter-spacing: 0; margin-left: .15em; color: var(--reed); font-style: italic; }
.big-l { margin: 12px 0 0; font-family: var(--sans); font-size: 15px; line-height: 1.45; max-width: 16em; }
@media (max-width: 900px) { .targets-grid { grid-template-columns: 1fr 1fr; } .targets-grid li:nth-child(2) { border-right: 0; } .targets-grid li:nth-child(3) { padding-left: 0; } .targets-grid li:nth-child(n+3) { border-top: 1px solid #ffffff18; } }
@media (max-width: 480px) { .targets-grid { grid-template-columns: 1fr; } .targets-grid li { border-right: 0; padding-left: 0 !important; } .targets-grid li + li { border-top: 1px solid #ffffff18; } }

/* timeline – horizontal, pinned and scrubbed on wide screens */
.tl { background: var(--deep-2); overflow: hidden; }
.tl-pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 12vh; }
.tl-title { font-size: 22px !important; font-family: var(--sans); font-weight: 600; letter-spacing: 0; margin-bottom: 8vh; }
.tl-track { position: relative; padding-inline: var(--gut); }
.tl-list { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; }
.tl-item { position: relative; width: clamp(240px, 24vw, 360px); padding: 44px 36px 0 0; }
.tl-rail { position: absolute; left: var(--gut); top: 7px; height: 2px; background: #ffffff1f; }
.tl-fill { display: block; height: 100%; width: 100%; background: var(--reed); transform-origin: 0 50%; transform: scaleX(0); }
.tl-dot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--deep-2); border: 2px solid #ffffff55; transition: background .3s, border-color .3s, transform .3s; }
.tl-item.passed .tl-dot { background: var(--reed); border-color: var(--reed); }
.tl-item.now .tl-dot { transform: scale(1.35); box-shadow: 0 0 0 6px color-mix(in srgb, var(--reed) 25%, transparent); }
.tl-y { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 4.4vw, 80px); line-height: 1; color: var(--on-deep); margin: 0 0 14px; letter-spacing: -0.03em; }
.tl-item:not(.passed) .tl-y { color: #ffffff55; }
.tl-t { font-family: var(--sans); font-size: 15px; line-height: 1.5; max-width: 17em; margin: 0; }
.tl-now { position: absolute; top: -34px; left: -4px; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--deep); background: var(--reed); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 900px) {
  .tl-pin { min-height: 0; padding-block: 64px; }
  .tl-title { margin-bottom: 36px; }
  .tl-list { flex-direction: column; width: auto; gap: 30px; }
  .tl-item { width: auto; padding: 0 0 0 40px; }
  .tl-rail { left: calc(var(--gut) + 7px); top: 0; bottom: 0; width: 2px; height: auto; }
  .tl-fill { transform-origin: 50% 0; transform: scaleY(0); }
  .tl-now { position: static; display: inline-block; margin-bottom: 8px; }
  .tl-y { font-size: 44px; }
}

.banner { margin: 0; padding-bottom: 20px; }
.banner-img { height: min(88svh, 900px); overflow: hidden; }
.banner-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.banner figcaption { color: var(--on-deep-2); padding-block: 14px 60px; }

/* ---------- chapter III: map tour ---------- */
.ch3-head { padding-block: clamp(80px, 10vw, 150px) 48px; }
.ch3-head .lede { margin-top: .7em; }
.ch3-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-family: var(--sans); font-size: 15px; font-weight: 500; border: 1px solid var(--ink); transition: background .2s, color .2s; }
.btn:hover { background: var(--aster); border-color: var(--aster); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }

.tour { position: relative; }
.tour-map { position: sticky; top: var(--hdr); height: var(--stage); background: #2b3a35; overflow: hidden; }
.map { position: absolute; inset: 0; }
.map-fallback[hidden], .map-ctrl[hidden] { display: none !important; }
.map-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-deep); font-family: var(--sans); padding: 40px; text-align: center; }
.map-ctrl { position: absolute; right: 16px; bottom: 44px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.map-ctrl .mbtn { background: #fff; border-color: #0000; box-shadow: 0 1px 4px #0003; }
.map-attr { position: absolute; right: 12px; bottom: 8px; margin: 0; font-family: var(--sans); font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; z-index: 3; }
.site-index { position: absolute; right: 16px; top: 16px; z-index: 3; background: color-mix(in srgb, var(--salt) 94%, transparent); border-radius: 6px; padding: 8px; backdrop-filter: blur(6px); max-height: calc(100% - 120px); overflow: auto; }
.site-index ol { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 14px; }
.site-index a { display: flex; gap: 10px; align-items: center; padding: 6px 10px; text-decoration: none; color: var(--ink); border-radius: 4px; }
.site-index a span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--salt-2); flex: none; }
.site-index a:hover { background: var(--salt-2); }
.site-index a[aria-current="true"] { background: var(--ink); color: #fff; }
.site-index a[aria-current="true"] span { background: var(--aster); color: #fff; }
.site-index a.all { font-weight: 600; }

.tour-steps { position: relative; z-index: 2; margin-top: calc(-1 * var(--stage)); pointer-events: none; }
.tstep { min-height: 110svh; display: flex; align-items: center; padding: 10vh var(--gut); }
.tstep:first-child { min-height: 90svh; }
.tstep:last-child { min-height: 100svh; }
.tcard { pointer-events: auto; width: min(440px, 100%); background: var(--salt); border-radius: 6px; overflow: hidden; box-shadow: 0 12px 40px #0006; }
.tstep[data-site="0"] .tcard { padding: 28px 30px; }
.tstep[data-site="0"] h3 { margin-bottom: .4em; font-size: 30px; font-weight: 300; }
.tstep[data-site="0"] p { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--muted); }
.tcard-img { position: relative; }
.tcard-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.tcard-n { position: absolute; left: 16px; top: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--aster); color: #fff; display: grid; place-items: center; font-family: var(--sans); font-weight: 600; font-size: 17px; }
.tcard-body { padding: 22px 26px 18px; }
.tcard-body h3 { font-size: 28px; font-weight: 400; margin-bottom: .45em; }
.tcard-body > p:not(.src) { font-size: 16px; line-height: 1.6; margin-bottom: 1em; }
.tcard dl { margin: 0 0 12px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-family: var(--sans); font-size: 14px; line-height: 1.45; }
.tcard dt { color: var(--muted); }
.tcard dd { margin: 0; color: var(--ink); }
.tcard dd.area { font-family: var(--serif); font-size: 20px; line-height: 1.1; }
.chips, .spp { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { background: var(--aster-soft); color: var(--aster); border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.spp span { background: var(--salt-2); border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.tcard .src { margin: 0; font-size: 12px; }

/* map markers */
.pin { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; background: var(--ink); color: #fff; font: 600 13px var(--sans); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px #0008; transition: background .25s, transform .25s; padding: 0; }
.pin:hover { transform: scale(1.12); }
.pin.is-active { background: var(--aster); transform: scale(1.25); }
.maplibregl-ctrl-attrib { display: none; }

@media (max-width: 900px) {
  .site-index { display: none; }
  .tstep { align-items: flex-end; padding: 0 12px 4vh; min-height: 120svh; }
  .tcard { width: 100%; }
  .tcard-img img { aspect-ratio: 16 / 8; }
  .tcard-body { padding: 16px 18px 14px; }
  .tcard-body h3 { font-size: 23px; }
  .tcard-body > p:not(.src) { font-size: 15px; }
  .tcard dl { grid-template-columns: 1fr; gap: 2px; }
  .tcard dd { margin-bottom: 8px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .tcard-img { display: none; }
  .tstep { align-items: center; }
  .tcard { width: 46%; }
}

.next { padding-block: clamp(80px, 10vw, 150px); }
.next h2 { font-size: clamp(32px, 3.4vw, 58px); font-weight: 300; margin-bottom: .5em; }
.next p { max-width: 34em; color: var(--muted); }

/* ---------- footer ---------- */
.ftr { background: #fff; border-top: 1px solid var(--line); padding-block: 56px 40px; font-family: var(--sans); font-size: 14px; color: var(--muted); }
.ftr-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 44px; margin-bottom: 30px; }
.ftr .lg-eu { height: 50px; width: auto; }
.ftr .lg-natura { height: 56px; width: auto; }
.ftr .lg-moe { height: 60px; width: auto; }
.ftr-disc { max-width: 60em; line-height: 1.55; }
.ftr-meta a { color: var(--ink); }

/* ---------- motion helpers ---------- */
.reveal-img img { clip-path: inset(0 0 0 0); }
.js .reveal-img img { clip-path: inset(100% 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal-img img { clip-path: none; }
}

/* ---------- tour exit ---------- */
.tour-exit { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 4; display: inline-flex; gap: 8px; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font: 500 14px var(--sans); box-shadow: 0 4px 14px #0006; }
.tour-exit:hover { background: var(--aster); }
.tour-exit[hidden] { display: none; }
@media (max-width: 900px) { .tour-exit { left: auto; right: 12px; transform: none; top: 12px; } }

/* ---------- chapter heads (IV+) ---------- */
.ch-head { padding-block: clamp(80px, 10vw, 150px) clamp(32px, 4vw, 56px); }
.ch-head .lede { margin-top: .7em; }
.grp-title { font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: 0; margin: 12px 0 20px; }

/* ---------- chapter IV: species ---------- */
.sp-grid { list-style: none; margin: 0 0 clamp(48px, 6vw, 90px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
@media (max-width: 1100px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sp-grid { grid-template-columns: 1fr; } }
.sp { display: flex; flex-direction: column; background: #fff; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.sp-img { position: relative; overflow: hidden; }
.sp-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.sp:hover .sp-img img { transform: scale(1.04); }
.sp-status { position: absolute; top: 12px; right: 12px; min-width: 40px; text-align: center; padding: 4px 9px; border-radius: 4px; background: var(--ink); color: #fff; font: 600 13px var(--sans); text-decoration: none; cursor: help; }
.sp-status .ph { color: #fff; }
.sp-body { padding: 20px 22px 16px; display: flex; flex-direction: column; flex: 1; }
.sp-name { font-size: 25px; font-weight: 400; margin-bottom: 2px; }
.sp-la { margin: 0 0 14px; color: var(--muted); font-size: 16px; }
.sp-quote { margin: 4px 0 14px; padding-left: 14px; border-left: 2px solid var(--aster); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--ink); }
.sp-quote p { margin: 0; }
.sp-more { margin-bottom: 14px; font-size: 16px; line-height: 1.6; }
.sp-more summary { cursor: pointer; font: 500 14px var(--sans); color: var(--aster); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.sp-more summary::-webkit-details-marker { display: none; }
.sp-more summary::after { content: "+"; font-size: 18px; line-height: 1; transition: transform .3s; }
.sp-more[open] summary::after { transform: rotate(45deg); }
.sp-more .l, .sp-more[open] .m { display: none; }
.sp-more[open] .l { display: inline; }
.sp-more p { margin: 10px 0 0; }
.sp-sites { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 13px; }
.sp-sites span { color: var(--muted); display: block; margin-bottom: 6px; }
.sp-sites ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sp-sites li { background: var(--salt-2); border-radius: 999px; padding: 2px 10px; color: var(--ink); }
.sp .src { margin: 10px 0 0; font-size: 12px; }

/* ---------- chapter V ---------- */
.ch5 { background: var(--salt); }
.chips-nav { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: c; }
.chips-nav a { display: inline-flex; gap: 8px; align-items: center; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font: 500 14px var(--sans); color: var(--ink); text-decoration: none; background: #fff; }
.chips-nav li { counter-increment: c; }
.chips-nav a::before { content: counter(c); font-family: var(--serif); font-style: italic; color: var(--aster); }
.chips-nav a:hover { border-color: var(--ink); }
.v-block { padding-block: clamp(56px, 7vw, 110px); }
.v-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.v-n { font-family: var(--serif); font-style: italic; font-size: clamp(30px, 3vw, 46px); color: var(--aster); line-height: 1; }
.v-head h3 { font-size: clamp(30px, 3vw, 50px); font-weight: 300; }
.v-text { max-width: 38em; }
.hist { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0 8px; }
.hist figure { margin: 0; }
.hist img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; filter: grayscale(.15); }
@media (max-width: 680px) { .hist { grid-template-columns: 1fr; } }

.lu { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2.2fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(40px, 5vw, 80px); padding-top: 32px; border-top: 1px solid var(--line); }
.lu h4 { font-size: 24px; font-weight: 400; margin-bottom: .5em; }
.lu-intro { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--muted); }
.lu-tabs { display: flex; flex-direction: column; gap: 6px; margin: 18px 0; }
.lu-tab { text-align: left; font: 500 15px var(--sans); padding: 10px 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 4px; cursor: pointer; border-left-width: 3px; }
.lu-tab[aria-selected="true"] { border-left-color: var(--aster); background: var(--aster-soft); }
.lu-note { font-size: clamp(20px, 1vw + 12px, 26px); line-height: 1.35; color: var(--ink); min-height: 3em; }
.lu-note .n { font-family: var(--serif); color: var(--aster); font-variant-numeric: tabular-nums; }
.lu-fig { margin: 0; min-width: 0; }
.lu-plot { position: relative; width: 100%; }
.lu-plot svg { width: 100%; height: 100%; overflow: visible; }
.lu-plot .grid line { stroke: var(--line); stroke-width: 1; }
.lu-plot .axis text { font: 12px var(--sans); fill: var(--muted); }
.lu-plot .ka { fill: none; stroke: #9aa6a0; stroke-width: 1.2; opacity: .55; }
.lu-plot .mean { fill: none; stroke: var(--aster); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lu-plot .dot { fill: var(--aster); stroke: #fff; stroke-width: 2; }
.lu-plot .lbl { font: 600 13px var(--sans); fill: var(--ink); }
.lu-plot .hit { fill: transparent; cursor: crosshair; }
.lu-plot .xh { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.lu-tip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; font: 13px/1.45 var(--sans); padding: 8px 10px; border-radius: 4px; opacity: 0; transform: translate(-50%, -110%); white-space: nowrap; transition: opacity .15s; }
.lu-table summary { cursor: pointer; font: 500 14px var(--sans); color: var(--aster); margin-top: 10px; }
.lu-tablewrap { overflow-x: auto; }
.lu-tablewrap table { border-collapse: collapse; font: 13px var(--sans); margin-top: 10px; }
.lu-tablewrap th, .lu-tablewrap td { padding: 4px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.lu-tablewrap th:first-child, .lu-tablewrap td:first-child { text-align: left; }
@media (max-width: 900px) { .lu { grid-template-columns: 1fr; } .lu-tabs { flex-direction: row; flex-wrap: wrap; } }

/* filmstrip */
.v-inv { background: var(--deep); color: var(--on-deep-2); }
.v-inv h3, .v-inv .v-text { color: var(--on-deep); }
.v-inv .v-n { color: var(--reed); }
.v-inv .v-text strong { color: var(--reed); font-weight: 600; }
.strip { margin-top: 36px; }
.strip-stage { position: relative; height: min(78svh, 760px); overflow: hidden; }
.strip-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .7s, visibility 0s .7s; }
.strip-slide.is-on { opacity: 1; visibility: visible; transition: opacity .7s; }
.strip-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s ease-out; }
.strip-slide.is-on img { transform: scale(1); }
.strip-win { position: absolute; left: var(--gut); bottom: 32px; width: min(420px, calc(100% - 2 * var(--gut))); background: var(--salt); color: var(--ink-2); padding: 22px 24px; border-radius: 6px; box-shadow: 0 12px 40px #0006; }
.strip-win h4 { font-size: 28px; font-weight: 400; margin: 8px 0 2px; }
.strip-win p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; }
.strip-win .src { margin: 0; font-size: 12px; color: var(--muted); }
.strip-tag { display: inline-block; font: 600 12px var(--sans); padding: 3px 9px; border-radius: 999px; }
.strip-tag.inv, .strip-th.inv::before { background: var(--aster); color: #fff; }
.strip-tag.exp, .strip-th.exp::before { background: var(--reed); color: var(--deep); }
.strip-bar { display: flex; gap: 18px; align-items: center; padding-block: 16px 60px; }
.strip-filter { display: flex; flex-direction: column; gap: 6px; font: 600 12px var(--sans); }
.strip-g { padding: 3px 9px; border-radius: 999px; text-align: center; }
.strip-g.inv { background: var(--aster); color: #fff; } .strip-g.exp { background: var(--reed); color: var(--deep); }
.strip-thumbs { list-style: none; margin: 0; padding: 4px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; }
.strip-th { position: relative; display: block; width: 150px; padding: 0; border: 2px solid transparent; border-radius: 5px; background: none; color: var(--on-deep); cursor: pointer; text-align: left; overflow: hidden; }
.strip-th img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; opacity: .6; transition: opacity .3s; }
.strip-th span { display: block; font: 13px/1.3 var(--sans); padding: 6px 2px 2px; }
.strip-th::before { content: ""; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; }
.strip-th[aria-pressed="true"] { border-color: var(--reed); }
.strip-th[aria-pressed="true"] img, .strip-th:hover img { opacity: 1; }
@media (max-width: 680px) {
  .strip-stage { height: auto; }
  .strip-slide { position: relative; display: none; }
  .strip-slide.is-on { display: block; }
  .strip-slide img { height: 56svh; }
  .strip-win { position: static; width: auto; border-radius: 0; box-shadow: none; }
  .strip-filter { display: none; }
}

.pol { list-style: none; padding: 0; margin: 32px 0 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pol figure { margin: 0; }
.pol img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.pol figcaption strong { color: var(--ink); font-weight: 600; }
@media (max-width: 800px) { .pol { grid-template-columns: 1fr; } }

.v-dry { position: relative; min-height: 100svh; color: #fff; overflow: hidden; display: flex; align-items: flex-end; }
.v-dry-img { position: absolute; inset: -8% 0; }
.v-dry-img img { width: 100%; height: 100%; object-fit: cover; }
.v-dry::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,18,16,.85), rgba(12,18,16,.1) 60%); }
.v-dry-text { position: relative; z-index: 1; padding-block: 60px; }
.v-dry-text h3 { color: #fff; }
.v-dry-text .v-n { color: var(--reed); }
.v-dry-text p { max-width: 36em; color: #E4EAE3; }
.v-dry-text .src { color: #C9D2CB; }
.v-dry-ph .ph { color: var(--reed); }

.v-pub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.v-pub-img { margin: 0; }
.v-pub-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.big-quote { margin: 36px 0 0; padding: 0; }
.big-quote p { font-size: clamp(24px, 1.8vw + 12px, 40px); line-height: 1.3; font-weight: 300; font-style: italic; color: var(--ink); margin: 0 0 16px; }
.big-quote footer { font: 500 15px var(--sans); color: var(--ink); }
@media (max-width: 760px) { .v-pub { grid-template-columns: 1fr; } }

@media (max-width: 600px) {
  .soil .lbls text { font-size: 24px; }
  .v-dry::after { background: linear-gradient(0deg, rgba(12,18,16,.92) 20%, rgba(12,18,16,.35) 75%); }
}

/* ---------- chapter V additions ---------- */
.v-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 60px); max-width: 1100px; }
.v-cols .v-text { margin: 0; }
@media (max-width: 800px) { .v-cols { grid-template-columns: 1fr; gap: 0; } .v-cols .v-text { margin-bottom: 1em; } }
.v-temp { background: var(--deep); padding-block: clamp(48px, 6vw, 90px); }
.temp { max-width: none; }
.temp h4 { color: #fff; font-size: 24px; font-weight: 400; margin-bottom: .3em; }
.temp-intro { font-family: var(--sans); font-size: 14px; color: #D7DED8 !important; }
.temp-stats { display: flex; flex-wrap: wrap; gap: 20px 56px; margin: 18px 0 20px; }
.temp-stats p { margin: 0; max-width: 18em; }
.temp-stats .big { color: #fff; font-size: clamp(48px, 5vw, 88px); display: block; }
.temp-stats .big-l { display: block; font-family: var(--sans); font-size: 14px; color: #D7DED8; margin-top: 6px; }
.stripes { display: flex; height: clamp(70px, 10vh, 120px); position: relative; }
.stripes span:first-child { border-radius: 3px 0 0 3px; } .stripes span:nth-last-child(2) { border-radius: 0 3px 3px 0; }
.stripes span { flex: 1; transform-origin: bottom; }
.stripes span:hover { outline: 2px solid #fff; outline-offset: -2px; }
.stripes-axis { display: flex; justify-content: space-between; font: 12px var(--sans); color: #D7DED8; margin: 6px 0 8px; }
.st-tip { position: absolute; bottom: calc(100% + 8px); transform: translateX(-50%); background: #fff; color: var(--ink); font: 13px/1.4 var(--sans); padding: 6px 9px; border-radius: 4px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
.temp .stripes-wrap { position: relative; }

/* ---------- chapter VI ---------- */
.skip-inline { font: 500 14px var(--sans); color: var(--aster); }
.cow { position: relative; display: grid; grid-template-columns: 1.4fr .8fr; background: var(--salt-2); }
.cow-sticky { position: sticky; top: var(--hdr); height: var(--stage); display: flex; align-items: center; padding: 3vh 0 3vh var(--gut); }
.cow-stage { width: 100%; aspect-ratio: 1200 / 896; max-height: 84vh; overflow: hidden; border-radius: 4px; position: relative; background: #e8e2cf; }
.cow-canvas { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.2s cubic-bezier(.65,0,.35,1); }
.cow-img { width: 100%; height: 100%; object-fit: cover; }
.hot { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 2px solid #fff; background: var(--aster); color: #fff; font: 600 15px var(--sans); cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px #0006; padding: 0; transition: transform .3s, opacity .3s; }
.hot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid #fff; opacity: 0; animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { opacity: .8; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.4); } }
.cow[data-part]:not([data-part="0"]) .hot { opacity: .0; pointer-events: none; }
.cow[data-part="0"] .hot:hover { transform: scale(1.12); }
.cow-steps { padding: 14vh var(--gut) 24vh clamp(24px, 4vw, 64px); }
.cow-step { min-height: 90vh; display: flex; align-items: center; }
.cow-step:first-child { min-height: 70vh; align-items: flex-start; }
.cow-step .card { background: var(--salt); padding: 26px 28px; border-radius: 4px; max-width: 30em; border-left: 3px solid var(--line); }
.cow-step.is-active .card { border-left-color: var(--aster); }
.cow-step h3 { font-size: clamp(28px, 2.6vw, 44px); font-weight: 300; margin-bottom: .4em; }
.kicker { font: 500 14px var(--sans); color: var(--aster); margin: 0 0 6px; }
.cow-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 4px; }
.cow-list a { display: flex; gap: 10px; align-items: center; text-decoration: none; font: 15px var(--sans); color: var(--ink); padding: 6px 0; }
.cow-list a span { width: 26px; height: 26px; border-radius: 50%; background: var(--aster); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.cow-photo { margin: 16px 0 0; }
.cow-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.cow-src { margin-top: 6vh; }
@media (max-width: 900px) {
  .cow { grid-template-columns: 1fr; }
  .cow-sticky { height: auto; padding: 10px var(--gut); z-index: 1; background: var(--salt-2); }
  .cow-steps { padding: 4vh var(--gut) 12vh; }
  .cow-step, .cow-step:first-child { min-height: 70vh; }
  .hot { width: 30px; height: 30px; margin: -15px 0 0 -15px; font-size: 13px; }
}
.graz { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.graz figure { margin: 0; }
.graz img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.graz h4 { font-size: 22px; font-weight: 400; margin: 12px 0 4px; }
.graz p { font-family: var(--sans); font-size: 14px; line-height: 1.5; margin: 0; }
@media (max-width: 1100px) { .graz { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .graz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tools { display: grid; gap: clamp(36px, 5vw, 72px); margin-top: 20px; }
.tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(20px, 4vw, 64px); align-items: center; }
.tool:nth-child(even) .tool-text { order: 2; }
.tool h4 { font-size: clamp(24px, 2vw, 34px); font-weight: 400; margin-bottom: .4em; }
.tool-imgs { display: grid; gap: 12px; }
.tool-imgs.n2 { grid-template-columns: 1fr 1fr; }
.tool-imgs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.tool-imgs.n1 img { aspect-ratio: 16 / 9; }
.hemi { list-style: none; counter-reset: h; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; font-family: var(--sans); font-size: 14px; line-height: 1.45; }
.hemi li { display: flex; gap: 10px; align-items: baseline; }
.hemi li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--aster); opacity: calc(.25 + var(--i, 0) * .25); }
.hemi li:nth-child(1) { --i: 0; } .hemi li:nth-child(2) { --i: 1; } .hemi li:nth-child(3) { --i: 2; } .hemi li:nth-child(4) { --i: 3; }
@media (max-width: 800px) { .tool { grid-template-columns: 1fr; } .tool:nth-child(even) .tool-text { order: 0; } }

.wil { position: relative; display: grid; grid-template-columns: 1.4fr .8fr; }
.wil-sticky { position: sticky; top: var(--hdr); height: var(--stage); display: flex; align-items: center; padding: 3vh 0 3vh var(--gut); }
.wil-stage { position: relative; width: 100%; aspect-ratio: 2752 / 1536; max-height: 84vh; border-radius: 4px; overflow: hidden; background: #efeee6; }
.wil-f { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s; }
.wil-stage[data-step="1"] .f1, .wil-stage[data-step="2"] .f2, .wil-stage[data-step="3"] .f3, .wil-stage[data-step="4"] .f4 { opacity: 1; }
.wil-steps { padding: 10vh var(--gut) 20vh clamp(24px, 4vw, 64px); }
.wil-head { margin-bottom: 20vh; }
.wil-title { font-size: clamp(28px, 2.6vw, 44px); font-weight: 300; margin-bottom: .4em; }
.wil-step { min-height: 75vh; display: flex; align-items: center; }
.wil-step .card { background: #fff; padding: 24px 26px; border-radius: 4px; max-width: 28em; border-left: 3px solid var(--line); }
.wil-step.is-active .card { border-left-color: var(--aster); }
@media (max-width: 900px) {
  .wil { grid-template-columns: 1fr; }
  .wil-sticky { height: auto; padding: 10px var(--gut); z-index: 1; background: var(--salt); }
  .wil-steps { padding: 4vh var(--gut) 10vh; }
  .wil-head { margin-bottom: 6vh; }
  .wil-step { min-height: 60vh; }
}
.wil-video figure { margin: 0; }
.wil-video video { width: 100%; max-height: 80vh; background: #000; border-radius: 4px; }
.wil-video figcaption { font-family: var(--sans); font-size: 14px; color: var(--muted); margin-top: 8px; }
.wood { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.wood h4 { font-size: clamp(24px, 2vw, 34px); font-weight: 400; margin-bottom: .4em; }
.wood .note { font-family: var(--sans); font-size: 15px; border-left: 3px solid var(--aster); padding-left: 12px; }
.wood-imgs { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: end; }
.wood-imgs img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.wood-imgs img + img { aspect-ratio: 1; }
@media (max-width: 800px) { .wood { grid-template-columns: 1fr; } }
.aw { list-style: none; padding: 0; margin: 28px 0 8px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.aw li { grid-column: span 2; }
.aw .aw-0 { grid-column: span 4; grid-row: span 2; }
.aw figure { margin: 0; height: 100%; display: flex; flex-direction: column; }
.aw img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.aw .aw-0 img { flex: 1; aspect-ratio: auto; min-height: 0; height: 100%; }
.aw figcaption { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.link-dark { color: var(--aster); font-weight: 500; white-space: nowrap; }
@media (max-width: 900px) { .aw { grid-template-columns: 1fr 1fr; } .aw li, .aw .aw-0 { grid-column: span 1; grid-row: auto; } .aw .aw-0 { grid-column: span 2; } .aw .aw-0 img { aspect-ratio: 3 / 2; height: auto; } }
.wil-ph { display: block; margin-top: 16px; border-radius: 3px; overflow: hidden; position: relative; }
.wil-ph img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.wil-ph.wba { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.wil-ph.wba figure { margin: 0; position: relative; }
.wil-ph.wba img { aspect-ratio: 4/5; }
.wil-ph.wba span { position: absolute; left: 8px; bottom: 8px; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(21,32,29,.62); padding: 5px 7px; border-radius: 2px; }
.wil-ph.play .play-b { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--sans); color: #fff; background: rgba(21,32,29,.7); padding: 10px 16px 10px 12px; border-radius: 99px; white-space: nowrap; transition: background .25s; }
.wil-ph.play .play-b svg { width: 18px; height: 18px; fill: currentColor; }
.wil-ph.play:hover .play-b { background: var(--aster); }
.wil-step .cred { font-family: var(--sans); font-size: 12px; color: var(--muted); margin: 6px 0 0; }
@media (max-width: 899px) { .wil-ph img { aspect-ratio: 16/9; } .wil-ph.wba img { aspect-ratio: 1; } }
html { scroll-behavior: smooth; }

/* ---------- header nav with eight chapters: numerals, label on the current one ---------- */
.hdr-nav a { display: flex; align-items: baseline; }
.hdr-nav .lbl { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; transition: max-width .45s cubic-bezier(.2,.7,.2,1); }
.hdr-nav .num { margin-right: 0; }
.hdr-nav a[aria-current="true"] .lbl, .hdr-nav a:hover .lbl, .hdr-nav a:focus-visible .lbl { max-width: 12em; }
.hdr-nav a[aria-current="true"] .num, .hdr-nav a:hover .num, .hdr-nav a:focus-visible .num { margin-right: 6px; }

/* ---------- chapter VII: monitoring ---------- */
.dev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 72px); align-items: center; margin-top: clamp(48px, 6vw, 96px); }
.dev h4 { font-size: clamp(24px, 2vw, 34px); font-weight: 400; margin-bottom: .4em; }
.dev.rec { grid-template-columns: minmax(0, .55fr) minmax(0, 1.5fr); }
.dev.net { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.cam-dev { display: flex; gap: 12px; align-items: center; margin: 18px 0 0; }
.cam-dev img { width: 64px; height: 96px; object-fit: cover; border-radius: 3px; }
.cam-dev figcaption { font: 13px/1.4 var(--sans); color: var(--muted); }
.cam-view { position: relative; }
.cam-view:focus-visible { outline: 2px solid var(--aster); outline-offset: 4px; }
.cam-stage { position: relative; aspect-ratio: 1472 / 828; background: #111; border-radius: 4px; overflow: hidden; }
.cam-f { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s; }
.cam-f.is-on { opacity: 1; }
.cam-f img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 5s linear; }
.cam-f.is-on img { transform: scale(1); }
.cam-f figcaption { position: absolute; left: 14px; top: 12px; font: 600 13px var(--sans); color: #fff; background: rgba(0,0,0,.45); padding: 5px 9px; border-radius: 3px; }
.cam-f figcaption .ph { color: #fff; }
.cam-rec { position: absolute; right: 14px; top: 14px; font: 700 11px var(--sans); letter-spacing: .12em; color: #fff; display: flex; align-items: center; gap: 6px; }
.cam-rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #e34948; animation: blink 1.4s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.cam-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.cam-bar .src { margin: 0; }
.cam-dots { display: flex; gap: 6px; }
.cam-dots button { width: 44px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.cam-dots span { display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; position: relative; }
.cam-dots span::after { content: ""; position: absolute; inset: 0; background: var(--aster); transform: scaleX(0); transform-origin: 0 50%; }
.cam-dots [aria-pressed="true"] span::after { transform: scaleX(1); transition: transform var(--cam-t, 4.5s) linear; }
.cam-view.paused .cam-dots [aria-pressed="true"] span::after { transition: none; }
.rec-img { margin: 0; }
.rec-img img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; }
.players { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.player { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 14px 18px 14px 14px; }
.pl-btn { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .2s; }
.pl-btn:hover { background: var(--aster); transform: scale(1.05); }
.pl-btn svg { width: 22px; height: 22px; fill: currentColor; }
.pl-btn .i-pause, .player.is-playing .pl-btn .i-play { display: none; }
.player.is-playing .pl-btn .i-pause { display: inline; }
.pl-t { margin: 0; font: 600 16px var(--sans); color: var(--ink); }
.pl-dur { font-weight: 400; color: var(--muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.pl-s { margin: 2px 0 8px; font: 14px/1.4 var(--sans); color: var(--muted); }
.wave { display: flex; align-items: center; gap: 2px; height: 36px; cursor: pointer; }
.wave i { flex: 1; height: calc(var(--h) * 100%); min-height: 2px; background: var(--line); border-radius: 1px; transition: background .15s; }
.wave i.on { background: var(--aster); }
.player.is-playing .wave i.on:last-of-type { animation: none; }
.net-img { margin: 0; }
.net-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.net-img figcaption { font: 14px/1.5 var(--sans); color: var(--ink); margin-top: 8px; }
.net-img .src { display: block; }
@media (max-width: 860px) {
  .dev, .dev.rec, .dev.net { grid-template-columns: 1fr; }
  .dev.net .net-img { order: 2; }
  .rec-img img { aspect-ratio: 4 / 3; object-position: 50% 40%; }
}
.finds { font: 14px/1.45 var(--sans) !important; color: var(--muted); }
.finds b { color: var(--ink); font-weight: 600; }
[data-strip] .strip-slide img { object-position: 50% 40%; }

.survey { position: relative; margin: 20px 0 0; border-radius: 4px; overflow: hidden; }
.survey img { width: 100%; height: min(80svh, 820px); object-fit: cover; }
.survey-card { position: absolute; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 40px); width: min(420px, calc(100% - 32px)); background: var(--salt); padding: 22px 24px; border-radius: 4px; }
.survey-card h4 { font-size: 26px; font-weight: 400; margin-bottom: .3em; }
.survey-card p { margin: 0 0 8px; }
@media (max-width: 680px) { .survey img { height: 56svh; } .survey-card { position: static; width: auto; border-radius: 0; } }
.plots { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); margin-top: clamp(48px, 6vw, 96px); align-items: start; }
.plot-fig { margin: 0; position: sticky; top: calc(var(--hdr) + 24px); }
.plot-img { position: relative; border-radius: 4px; overflow: hidden; }
.plot-img img { width: 100%; height: auto; display: block; }
.plot-img svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plot-q { fill: rgba(255,255,255,0); stroke: #fff; stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linejoin: round; transition: stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1), fill .8s 1.6s; }
.plot-fig.is-in .plot-q { stroke-dashoffset: 0; fill: rgba(143,109,186,.18); }
.plot-lbl { position: absolute; left: 62%; top: 37%; font: 700 14px var(--sans); color: #fff; background: var(--aster); padding: 4px 8px; border-radius: 3px; opacity: 0; transform: translateY(6px); transition: opacity .5s 1.8s, transform .5s 1.8s; }
.plot-fig.is-in .plot-lbl { opacity: 1; transform: none; }
.plot-text h4 { font-size: clamp(24px, 2vw, 34px); font-weight: 400; margin-bottom: .3em; }
.kpi-inline { font-family: var(--sans); font-size: 15px; color: var(--muted); }
.kpi-inline .kpi-v { font-family: var(--serif); font-size: clamp(40px, 4vw, 64px); font-weight: 300; color: var(--ink); margin-right: 8px; line-height: 1; }
.pair { display: flex; align-items: center; gap: 12px; margin: 22px 0; font: 600 13px var(--sans); }
.sq { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sq i { width: 64px; height: 64px; border: 2px solid var(--ink); border-radius: 2px; }
.sq.m i { background: repeating-linear-gradient(45deg, var(--aster-soft) 0 6px, transparent 6px 12px); border-color: var(--aster); }
.sq.k i { border-style: dashed; }
.pair-l { flex: 0 0 60px; height: 0; border-top: 2px dotted var(--muted); margin-bottom: 22px; }
.releve { margin: 20px 0 0; }
.releve img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
@media (max-width: 860px) { .plots { grid-template-columns: 1fr; } .plot-fig { position: static; } }

.tiers { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: t; }
.tier figure { margin: 0 0 14px; }
.tier img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; background: #0b1220; }
.tier figure .src { font-size: 11px; margin-top: 4px; }
.tier h4 { font-size: 24px; font-weight: 400; margin: 0; }
.tier-sub { font: 14px var(--sans); color: var(--muted); margin: 2px 0 12px; }
.tier dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; padding: 10px 0; border-block: 1px solid var(--line); }
.tier dt { font: 12px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tier dd { margin: 2px 0 0; font-family: var(--serif); font-size: 22px; line-height: 1.15; color: var(--ink); }
.tier p:last-child { font-size: 16px; line-height: 1.55; margin: 0; }
@media (max-width: 1100px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tiers { grid-template-columns: 1fr; } }
.res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 72px); align-items: center; margin: clamp(56px, 7vw, 110px) 0 24px; padding-top: 32px; border-top: 1px solid var(--line); }
.res h4 { font-size: clamp(26px, 2.4vw, 40px); font-weight: 300; margin-bottom: .3em; }
.res-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.res-tab { font: 500 15px var(--sans); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.res-tab[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.res-view { position: relative; max-width: 480px; justify-self: center; width: 100%; }
.res-cv { width: 100%; height: auto; display: block; border-radius: 4px; background: #d9dcd4; image-rendering: pixelated; }
.res-px { position: absolute; right: 10px; bottom: 10px; font: 600 12px var(--sans); color: #fff; background: rgba(21,32,29,.7); padding: 4px 8px; border-radius: 3px; }
@media (max-width: 860px) { .res { grid-template-columns: 1fr; } }

/* ---------- chapter VIII: results ---------- */
.kpis { list-style: none; margin: 32px 0 48px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis.hl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis li { padding: 18px 22px 8px 0; border-right: 1px solid #ffffff18; }
.kpis li + li { padding-left: 22px; }
.kpis li:last-child { border-right: 0; }
.kpis.light li { border-right-color: var(--line); }
.kpi-v { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 5.2vw, 96px); line-height: 1; letter-spacing: -0.02em; color: var(--on-deep); font-variant-numeric: tabular-nums; }
.kpis.light .kpi-v { color: var(--ink); }
.kpi-v .ph { font-size: .5em; }
.kpi-v .unit { font-size: .34em; margin-left: .15em; color: var(--reed); font-style: italic; }
.kpis.light .kpi-v .unit { color: var(--aster); }
.kpi-l { margin: 10px 0 0; font: 15px/1.45 var(--sans); max-width: 18em; }
@media (max-width: 900px) { .kpis, .kpis.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis li, .kpis li + li { padding: 16px 16px 16px 0; border-right: 0; border-bottom: 1px solid #ffffff18; } .kpis.light li { border-bottom-color: var(--line); } }
@media (max-width: 520px) { .kpis.hl { grid-template-columns: 1fr; } }
.herd { list-style: none; margin: 0 0 48px; padding: 0; display: flex; flex-wrap: wrap; gap: 18px 34px; }
.herd li { display: grid; grid-template-columns: 72px auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; }
.herd img { grid-row: 1 / span 2; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--reed); }
.herd-n { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--on-deep); align-self: end; }
.herd-n .ph { font-size: 20px; }
.herd-t { font: 14px var(--sans); align-self: start; }
.gmap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 0; border-radius: 6px; overflow: hidden; background: var(--deep-2); min-height: 560px; }
.gmap-map { position: relative; min-height: 420px; background: #2b3a35; }
.gmap-hint { position: absolute; left: 14px; top: 12px; z-index: 2; margin: 0; font: 13px var(--sans); color: #fff; background: rgba(21,32,29,.7); padding: 5px 10px; border-radius: 3px; pointer-events: none; }
.gmap-side { max-height: 640px; overflow-y: auto; padding: 10px; }
.gmap-list { list-style: none; margin: 0; padding: 0; }
.gmap-list button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; padding: 9px 10px; border: 0; background: none; color: var(--on-deep); font: 15px var(--sans); border-radius: 4px; cursor: pointer; }
.gmap-list button:hover { background: #ffffff10; }
.gmap-list button[aria-pressed="true"] { background: #ffffff18; }
.gl-n { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); border: 2px solid #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.gmap-list button[aria-pressed="true"] .gl-n { background: var(--aster); }
.gl-info { padding: 4px 10px 14px 44px; }
.gl-info img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }
.gl-g { margin: 10px 0 2px; font: 600 15px var(--sans); color: var(--on-deep); }
.gl-h { margin: 0; font: 14px var(--sans); }
@media (max-width: 860px) { .gmap { grid-template-columns: 1fr; } .gmap-map { min-height: 340px; } .gmap-side { max-height: none; } }
.prog { max-width: 1100px; }
.prog-v { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(64px, 8vw, 150px); line-height: 1; color: var(--ink); }
.prog-v .unit { font-size: .3em; margin-left: .15em; color: var(--aster); font-style: italic; }
.prog-l { font: 16px var(--sans); color: var(--muted); margin: 8px 0 20px; }
.prog-bar { position: relative; height: 18px; border-radius: 999px; background: var(--salt-2); border: 1px solid var(--line); }
.prog-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--f) * 100%); border-radius: 999px; background: linear-gradient(90deg, var(--aster), #8f6dba); transform-origin: 0 50%; }
.js .prog-fill { transform: scaleX(0); transition: transform 2s cubic-bezier(.2,.7,.2,1); }
.js .prog.is-in .prog-fill { transform: scaleX(1); }
.prog-goal { position: absolute; right: 0; top: calc(100% + 8px); font: 600 13px var(--sans); color: var(--ink); }
.prog-mow { margin-top: 44px; font: 16px var(--sans); }
.ph-box { border: 1.5px dashed var(--line); border-radius: 6px; padding: 48px 24px; text-align: center; margin-bottom: 48px; background: repeating-linear-gradient(135deg, #0000 0 14px, #00000006 14px 28px); }
.ba { margin: 0 0 20px; }
.ba-stage { position: relative; overflow: hidden; border-radius: 4px; background: #222; aspect-ratio: 4136 / 3584; max-height: 86svh; user-select: none; touch-action: pan-y; }
.ba.tall .ba-stage { aspect-ratio: 4960 / 7015; }
.ba-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-a { clip-path: inset(0 0 0 var(--p)); }
.ba-h { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px #0006; pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px #0005; }
.ba-knob::before, .ba-knob::after { content: ""; position: absolute; top: 50%; margin-top: -6px; border: 6px solid transparent; }
.ba-knob::before { left: 7px; border-right-color: var(--ink); }
.ba-knob::after { right: 7px; border-left-color: var(--ink); }
.ba-in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-in:focus-visible + * , .ba-stage:focus-within .ba-knob { outline: 3px solid var(--aster); outline-offset: 2px; }
.ba-y { position: absolute; top: 14px; font: 700 14px var(--sans); color: #fff; background: rgba(21,32,29,.72); padding: 5px 10px; border-radius: 3px; pointer-events: none; }
.ba-yb { left: 14px; } .ba-ya { right: 14px; }
.ba figcaption { font: 14px/1.5 var(--sans); margin-top: 10px; color: var(--ink); }
.ba-hint { color: var(--aster); font-weight: 600; margin-right: 6px; }
.ba .src { display: block; }
.spc { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2.2fr); gap: clamp(24px, 4vw, 64px); margin-top: 16px; padding-top: 32px; border-top: 1px solid var(--line); }
.spc h4 { font-size: 24px; font-weight: 400; margin-bottom: .6em; }
.spc-tabs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.spc-tabs button { text-align: left; font: 500 15px var(--sans); padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--line); background: #fff; color: var(--ink); border-radius: 4px; cursor: pointer; }
.spc-tabs button[aria-pressed="true"] { border-left-color: var(--aster); background: var(--aster-soft); }
.spc-site { display: grid; gap: 6px; font: 13px var(--sans); color: var(--muted); }
.spc-site select { font: 15px var(--sans); padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); }
.spc-fig { margin: 0; min-width: 0; }
.spc-plot svg { width: 100%; height: auto; display: block; overflow: visible; }
.spc-plot .gl { stroke: var(--line); }
.spc-plot .ax { font: 13px var(--sans); fill: var(--muted); }
.spc-plot .bar { fill: var(--aster); transition: y .8s cubic-bezier(.2,.7,.2,1), height .8s cubic-bezier(.2,.7,.2,1); }
.spc-plot .bar.partial { fill: url(#hatch); stroke: var(--aster); stroke-width: 1.5; }
.spc-plot .val { font: 600 20px var(--serif); fill: var(--ink); transition: y .8s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.spc-plot .na { font: 13px var(--sans); fill: var(--muted); }
@media (max-width: 900px) { .spc { grid-template-columns: 1fr; } .spc-tabs { flex-direction: row; flex-wrap: wrap; } }
.ss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: center; margin-top: clamp(64px, 8vw, 120px); padding: clamp(24px, 3vw, 48px); background: #fff; border-radius: 8px; border: 1px solid var(--line); }
.ss h4 { font-size: clamp(30px, 3vw, 52px); font-weight: 300; margin-bottom: .4em; }
.ss-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 6px; }
.ss-imgs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.ss .ba { margin: 0; }
.ss .ba-stage { max-height: 80svh; margin-inline: auto; }
@media (max-width: 860px) { .ss { grid-template-columns: 1fr; } }
.concl { padding-block: clamp(90px, 12vw, 180px); }
.concl h2 { font-size: clamp(40px, 5vw, 88px); font-weight: 300; margin-bottom: .4em; }
.concl p:not(.src) { font-size: clamp(20px, 1.2vw + 12px, 30px); line-height: 1.45; max-width: 30em; color: var(--on-deep); }

/* ---------- round 3 ---------- */
.cow-stage { aspect-ratio: 5504 / 3072; }
.cam-dev { align-items: flex-end; }
.cam-dev img { width: clamp(120px, 12vw, 170px); height: auto; aspect-ratio: 9 / 16; }
.wil-ph.still { margin: 16px 0 0; }
.play-chip { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--sans); color: #fff; text-decoration: none; background: rgba(21,32,29,.55); padding: 7px 10px 7px 8px; border-radius: 99px; backdrop-filter: blur(4px); transition: background .25s; }
.play-chip svg { width: 13px; height: 13px; fill: currentColor; }
.play-chip:hover, .play-chip:focus-visible { background: var(--aster); }
.fig-tall img { object-position: 40% 50%; }

/* ---------- round 4: cover map, split image ---------- */
.cmap { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 0; margin: 32px 0 56px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: #fff; min-height: 560px; }
.cmap-text { padding: 24px 26px; }
.cmap-text h4 { font-size: 24px; font-weight: 400; margin-bottom: .4em; }
.cmap-text > p { font: 15px/1.5 var(--sans); color: var(--muted); }
.cmap-years { display: inline-flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; margin: 8px 0 16px; }
.cmap-years button { font: 600 15px var(--sans); padding: 8px 18px; border: 0; background: #fff; color: var(--ink); cursor: pointer; }
.cmap-years button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.cmap-sites { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.cmap-sites button { font: 13px var(--sans); padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.cmap-sites button[aria-pressed="true"] { background: var(--aster); border-color: var(--aster); color: #fff; }
.cmap-leg p { font: 600 13px var(--sans); margin: 0 0 6px; }
.cmap-leg ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font: 13px var(--sans); }
.cmap-leg i { display: inline-block; width: 14px; height: 14px; border-radius: 2px; vertical-align: -2px; margin-right: 6px; border: 1px solid #0001; }
.cmap-leg i.na { background: #9aa39e; opacity: .45; }
.cmap-map { position: relative; min-height: 420px; background: #2b3a35; }
@media (max-width: 860px) { .cmap { grid-template-columns: 1fr; } .cmap-map { min-height: 380px; } }
.split { margin: 28px 0 20px; }
.split-stage { position: relative; border-radius: 4px; overflow: hidden; }
.split-stage img { display: block; width: 100%; height: auto; max-height: 86svh; object-fit: cover; }
.split-l, .split-r { position: absolute; top: 14px; font: 700 14px var(--sans); color: #fff; background: rgba(21,32,29,.72); padding: 5px 10px; border-radius: 3px; }
.split-l { left: 14px; } .split-r { right: 14px; background: var(--aster); }
.split-line { position: absolute; top: 0; bottom: 0; left: 49%; width: 0; border-left: 2px dashed #fff; opacity: .85; }
.split figcaption { font: 14px/1.5 var(--sans); margin-top: 10px; }
.split .src { display: block; }

/* ---------- round 5: invasive = purple, expansive = ochre, everywhere ---------- */
:root { --inv: #6B4C92; --inv-l: #B99BDD; --exp: #D3B267; --exp-d: #8A6414; }
.v-inv .v-text strong.inv, strong.inv { color: var(--inv-l); }
.v-inv .v-text strong.exp, strong.exp { color: var(--exp); }
.kpis.light li.inv .kpi-v .unit { color: var(--inv); }
.kpis.light li.exp .kpi-v .unit { color: var(--exp-d); }
.kpis li.inv { box-shadow: inset 0 3px 0 var(--inv); } .kpis li.exp { box-shadow: inset 0 3px 0 var(--exp); }
.kpis li.inv, .kpis li.exp { padding-top: 22px; }
.cmap-kinds { display: flex; gap: 6px; margin: 8px 0 0; }
.cmap-kinds button { font: 600 14px var(--sans); padding: 7px 14px; border-radius: 999px; border: 2px solid transparent; background: var(--salt-2); color: var(--ink); cursor: pointer; }
.cmap-kinds button.inv[aria-pressed="true"] { background: var(--inv); color: #fff; }
.cmap-kinds button.exp[aria-pressed="true"] { background: var(--exp); color: var(--deep); }
.cmap-sites button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.spc-plot .bar { fill: #3E6B55; }
.spc-plot .bar.partial { fill: url(#hatch); stroke: #3E6B55; }
.spc-tabs button[aria-pressed="true"] { border-left-color: #3E6B55; background: #E4EEE7; }
.strip-tag.n { background: var(--ink); color: #fff; }

/* ---------- round 6: slider tabs, pre-project probability maps ---------- */
.ba-tabs, .pm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.ba-tabs button, .pm-tabs button { font: 500 14px var(--sans); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.ba-tabs button[aria-selected="true"], .pm-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.ba-panes .ba[hidden], .pm-pane[hidden] { display: none; }
.ba-stage { margin-inline: auto; }
.pmaps { margin-top: clamp(40px, 5vw, 80px); color: var(--on-deep-2); }
.pmaps h4 { color: var(--on-deep); font-size: clamp(26px, 2.4vw, 40px); font-weight: 300; margin-bottom: .3em; }
.pm-text { max-width: 44em; }
.pm-ctrl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; margin: 18px 0 12px; }
.pmaps .pm-tabs button { background: transparent; color: var(--on-deep); border-color: #ffffff33; }
.pmaps .pm-tabs button[aria-selected="true"] { background: var(--on-deep); color: var(--deep); }
.pm-kinds { display: flex; gap: 8px; }
.pm-kinds label { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--sans); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.pm-kinds label.inv { background: var(--inv); color: #fff; } .pm-kinds label.exp { background: var(--exp); color: var(--deep); }
.pm-pane { margin: 0; }
.pm-stage { position: relative; border-radius: 4px; overflow: hidden; background: #2b3a35; max-height: 80svh; }
.pm-stage img { display: block; width: 100%; height: auto; }
.pm-stage .pm-lyr { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .6s; }
.js .pmaps:not(.is-in) .pm-lyr { opacity: 0; }
.pmaps.no-inv .pm-lyr.inv, .pmaps.no-exp .pm-lyr.exp { opacity: 0; }
.pm-pane figcaption { font: 15px/1.5 var(--sans); margin-top: 10px; color: var(--on-deep-2); }
.pm-pane figcaption b { color: var(--on-deep); }
.pm-leg { display: flex; align-items: center; gap: 10px; font: 12px var(--sans); margin: 12px 0 4px; flex-wrap: wrap; }
.pm-ramp { display: inline-block; width: 110px; height: 10px; border-radius: 2px; }
.pm-ramp.inv { background: linear-gradient(90deg, #ECE1F6, #4A2774); }
.pm-ramp.exp { background: linear-gradient(90deg, #FAE8AA, #85530C); }
@media (max-width: 700px) { .pm-stage { max-height: none; } }
.pm-stage { width: min(100%, calc(80svh * var(--ar, 1.4))); margin-inline: auto; max-height: none; }
.ba-stage { width: min(100%, calc(86svh * var(--ar, 1.15))); max-height: none; }

/* ---------- round 7: slider, caption and map fit one laptop screen ---------- */
.ba { width: min(100%, calc((100svh - 230px) * var(--ar, 1.15))); margin-inline: auto; }
.ba .ba-stage { width: 100%; }
.pm-stage { width: min(100%, calc((100svh - 250px) * var(--ar, 1.4))); }

/* grazing map: whole block (map + note) fits one screen; year switch */
.gmap { height: clamp(440px, calc(100svh - 170px), 760px); min-height: 0; }
.gmap-map { min-height: 0; height: 100%; }
.gmap-side { max-height: none; height: 100%; }
.gmap-years { position: absolute; right: 12px; top: 12px; z-index: 3; display: flex; background: rgba(21,32,29,.78); border-radius: 999px; padding: 3px; }
.gmap-years button { font: 600 13px var(--sans); color: var(--on-deep); background: none; border: 0; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.gmap-years button[aria-pressed="true"] { background: #9CCB86; color: #15201D; }
.gl-y .gl-h + .gl-h { margin-top: 0; }
@media (max-width: 860px) { .gmap { height: auto; } .gmap-map { height: 60svh; min-height: 340px; } .gmap-side { height: auto; } }

/* pre-project probability map (zoomable) */
.pm-map { height: clamp(380px, calc(100svh - 300px), 720px); border-radius: 4px; overflow: hidden; background: #2b3a35; }
.pm-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 24px; margin-top: 10px; }
.pm-cap { font: 15px/1.5 var(--sans); margin: 0; color: var(--on-deep-2); max-width: 46em; }
.pm-cap b { color: var(--on-deep); }
.pm-foot .pm-leg { margin: 0; }
.pm-site-key { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.pm-site-key i { width: 22px; border-top: 2px dashed #fff; }

/* sources & credits behind an (i) button */
.ref-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin: 0 2px; vertical-align: -4px; border: 0; background: none; color: inherit; opacity: .55; cursor: pointer; border-radius: 50%; }
.ref-btn:hover, .ref-btn:focus-visible, .ref-btn[aria-expanded="true"] { opacity: 1; }
.ref-btn:focus-visible { outline: 2px solid var(--aster); outline-offset: 1px; }
.ref-btn svg { width: 15px; height: 15px; }
.ref-body { margin-left: 4px; font: 12px/1.5 var(--sans); }
.ref-body[hidden] { display: none; }
p.ref, figcaption.ref { min-height: 20px; }
figcaption .src.ref, .net-img .src.ref { display: inline; margin: 0; }

/* ---------- round 8: figures and maps fit the screen height (laptops, short windows) ---------- */
.banner-img { height: clamp(280px, calc(100svh - 150px), 900px); }
.fig-tall img { max-height: calc(100svh - 110px); }
.sp-img img { max-height: 34svh; }
.strip-stage { height: clamp(300px, calc(100svh - 250px), 760px); }
.strip-bar { padding-block: 12px 40px; }
.strip-th { width: clamp(100px, 10vw, 150px); }
.cmap { height: clamp(460px, calc(100svh - 90px), 780px); min-height: 0; }
.cmap-text { overflow-y: auto; }
.cmap-map { min-height: 0; }
.split { width: min(100%, calc((100svh - 170px) * 1.335)); margin-inline: auto; }
.split-stage img { max-height: none; }
.pm-map { height: clamp(300px, calc(100svh - 340px), 720px); }
@media (max-height: 760px) {
  .cmap-text { padding: 18px 20px; }
  .cmap-text h4 { font-size: 21px; }
  .cmap-text > p { font-size: 14px; }
  .cmap-sites { margin-bottom: 12px; }
}
@media (max-width: 860px) {
  .cmap { height: auto; }
  .cmap-map { height: 62svh; min-height: 320px; }
  .split { width: 100%; }
  .pm-map { height: 62svh; min-height: 320px; }
}

/* ---------- round 9 ---------- */
/* map hint (Ctrl/⌘ + scroll) */
.map-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 3; margin: 0; max-width: calc(100% - 180px); text-align: center; font: 12px/1.3 var(--sans); color: #fff; background: rgba(21,32,29,.72); padding: 5px 10px; border-radius: 999px; pointer-events: none; }
@media (max-width: 700px) { .map-hint { display: none; } }
.maplibregl-cooperative-gesture-screen { font-family: var(--sans); }
/* pre-project map: text column + tall map, fits a laptop screen */
.pm-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2.1fr); gap: 0; border-radius: 6px; overflow: hidden; background: var(--deep-2, #1d2a26); height: clamp(480px, calc(100svh - 90px), 800px); }
.pm-side { padding: 22px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.pm-side h4 { margin: 0; font-size: clamp(22px, 2vw, 32px); }
.pm-side .pm-text { margin: 0; font-size: 15px; line-height: 1.5; }
.pm-side .pm-tabs { margin: 0; } .pm-side .pm-leg { margin: 0; } .pm-side .src { margin: 0; }
.pmaps .pm-map { height: 100%; border-radius: 0; }
.pm-cap { font-size: 14px; }
@media (max-width: 860px) { .pm-grid { grid-template-columns: 1fr; height: auto; } .pmaps .pm-map { height: 62svh; min-height: 320px; } }
/* zoomable before/after */
.ba.gcmp { width: 100%; }
.gcmp-stage { position: relative; height: clamp(360px, calc(100svh - 250px), 780px); border-radius: 4px; overflow: hidden; background: #2b3a35; }
.gcmp-map { position: absolute; inset: 0; }
.gcmp-b { clip-path: inset(0 0 0 var(--p)); }
.gcmp-h { position: absolute; top: 0; bottom: 0; left: var(--p); width: 44px; margin-left: -22px; z-index: 4; cursor: ew-resize; touch-action: none; }
.gcmp-h::before { content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 2px; background: #fff; box-shadow: 0 0 8px #0006; }
.gcmp-h:focus-visible .ba-knob { outline: 3px solid var(--aster); outline-offset: 2px; }
.gcmp .ba-y { z-index: 4; }
.gcmp .maplibregl-ctrl-bottom-left { z-index: 5; }
/* photo strips: whole photo visible over a soft blurred fill, no heavy crop on wide screens */
.strip-slide { background: #15201D; overflow: hidden; }
.strip-slide .strip-fill { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(24px) brightness(.55); transform: none !important; }
.strip-slide img.strip-main { position: relative; object-fit: contain; }

/* ---------- round 10 ---------- */
/* photo strips: stage + thumbnail bar fit one screen */
.strip-stage { height: clamp(280px, calc(100svh - 300px), 740px); }
.strip-bar { padding-block: 10px 28px; gap: 14px; }
.strip-th { width: clamp(92px, 8.4vw, 140px); }
.strip-th img { aspect-ratio: 16 / 10; }
.strip-th span { font-size: 12px; line-height: 1.25; }
@media (max-height: 760px) { .strip-win { bottom: 16px; padding: 16px 18px; } .strip-win h4 { font-size: 22px; } .strip-win p { font-size: 14px; } }
/* pre-project map: compact side column */
.pm-grid { grid-template-columns: minmax(300px, 1fr) minmax(0, 2.3fr); }
.pm-side { padding: 18px 20px; gap: 10px; }
.pm-side h4 { font-size: clamp(20px, 1.7vw, 28px); }
.pm-side .pm-text { font-size: 14px; line-height: 1.45; }
.pm-side .pm-tabs { gap: 5px; }
.pm-side .pm-tabs button { font-size: 13px; padding: 5px 11px; }
.pm-side .pm-kinds label { font-size: 13px; padding: 4px 10px; }
.pm-side .pm-leg { gap: 6px 8px; font-size: 11.5px; }
.pm-side .pm-ramp { width: 70px; }
.pm-side .pm-cap { font-size: 13px; line-height: 1.45; }
.pm-side .src { font-size: 11.5px; }
/* cow: each card fills one screen and sits in its middle, so card and zoomed picture line up */
.cow-steps { padding-block: 0; }
.cow-step, .cow-step:first-child { min-height: var(--stage); align-items: center; }
.cow-step .card { max-height: calc(var(--stage) - 40px); overflow: hidden; }
.cow-photo img { aspect-ratio: 16 / 9; max-height: 24svh; }
@media (max-width: 900px) { .cow-step, .cow-step:first-child { min-height: 70vh; } .cow-step .card { max-height: none; } }
/* before/after: tabs + picture + caption fit one screen */
.gcmp-stage { height: clamp(320px, calc(100svh - 300px), 760px); }
.ba { width: min(100%, calc((100svh - 300px) * var(--ar, 1.15))); }
.ba.gcmp { width: 100%; }
.ba figcaption { font-size: 14px; line-height: 1.45; }
/* map layer toggle */
.lyr-tgl { position: absolute; left: 12px; top: 12px; z-index: 4; font: 600 12.5px var(--sans); color: #15201D; background: #fff; border: 0; border-radius: 999px; padding: 6px 12px; box-shadow: 0 1px 4px #0003; cursor: pointer; }
.lyr-tgl[aria-pressed="false"] { background: #15201D; color: #fff; }
.gmap-hint { top: 50px; }
/* species chart: land invertebrate groups */
.spc-sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.spc-sub[hidden] { display: none; }
.spc-sub button { font: 13px var(--sans); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.spc-sub button[aria-pressed="true"] { background: #3E6B55; border-color: #3E6B55; color: #fff; }
/* Dobré Pole gallery */
.ss2 { margin-top: clamp(40px, 5vw, 80px); padding-top: 32px; border-top: 1px solid var(--line); }
.ss2-text { max-width: 46em; }
.ss2-text h4 { font-size: clamp(26px, 2.4vw, 40px); font-weight: 300; margin: .2em 0 .4em; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 13vw, 230px); gap: 10px; margin-top: 22px; }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: 4px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 7px; font: 13px/1.3 var(--sans); color: #fff; background: linear-gradient(transparent, rgba(21,32,29,.8)); }
.gallery figcaption i { display: block; opacity: .85; font-size: 12px; }
.gallery .g1 { grid-column: span 2; grid-row: span 2; }
.gallery .g6 { grid-column: span 2; }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; } .gallery .g6 { grid-column: span 1; } }
/* author */
.hero-by { font: 14px var(--sans); letter-spacing: .02em; opacity: .8; margin-top: 14px; }
.ftr-author { font: 14px var(--sans); margin: 0 0 10px; }

/* round 11 */
.gallery .g6, .gallery .g7 { grid-column: span 2; }
@media (max-width: 700px) { .gallery .g6, .gallery .g7 { grid-column: span 1; } }
.cow-step .card { padding: 20px 24px; max-height: calc(var(--stage) - 64px); }
.cow-step .card p { font-size: 17px; line-height: 1.55; }
.cow-photo img { max-height: 20svh; }

.unk { font-style: italic; }
.kpis.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .kpis.n3 { grid-template-columns: 1fr; } }
.kpis.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kpis.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .kpis.n4, .kpis.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.herd-ic { grid-row: 1 / span 2; width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--reed); display: grid; place-items: center; color: var(--on-deep); }
.herd-ic svg { width: 54px; height: 54px; }

.hero-part { font: 500 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--reed); margin: 14px 0 0; }

/* hero: slide the video right so the cow's face sits beside the title, not under it; the freed left edge fades into dark */
.hero { background: #0f1614; }
@media (min-aspect-ratio: 1/1) {
  .hero-media video { object-position: 50% 40%; transform: translateX(24%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
}
.hero-shade { background:
  linear-gradient(90deg, rgba(10,16,14,.45) 0%, rgba(10,16,14,.15) 45%, rgba(10,16,14,0) 60%),
  linear-gradient(180deg, rgba(10,16,14,.55) 0%, rgba(10,16,14,0) 22%),
  linear-gradient(0deg, rgba(10,16,14,.86) 0%, rgba(10,16,14,.35) 45%, rgba(10,16,14,0) 70%); }
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) { .hero-media video { transform: translateX(32%); } }

/* phones: photo strip = photo, then its card, then the thumbnails (no overlap); pre-project map stacked under its text */
@media (max-width: 700px) {
  .strip-stage { height: auto; overflow: visible; }
  .strip-slide { position: relative; inset: auto; display: none; }
  .strip-slide.is-on { display: block; }
  .strip-slide > img:not(.strip-fill) { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .strip-slide.fit > img.strip-main { object-fit: contain; }
  .strip-win { position: static; width: auto; margin: 0; border-radius: 0; box-shadow: none; padding: 18px var(--gut); }
}
@media (max-width: 860px) {
  .pm-grid { grid-template-columns: 1fr; height: auto; }
  .pmaps .pm-map { height: 65svh; min-height: 320px; }
}
@media (max-width: 700px) { .strip-slide .strip-fill { display: none; } .strip-slide.fit > img.strip-main { object-fit: cover; } }

/* cow cards: never clip; on short screens make them more compact */
.cow-step .card { max-height: none; overflow: visible; }
.cow-step:first-child .cow-list { grid-template-columns: 1fr 1fr; column-gap: 16px; }
@media (max-height: 820px) {
  .cow-step .card { padding: 16px 20px; }
  .cow-step h3 { font-size: clamp(24px, 2.2vw, 34px); }
  .cow-step .card p { font-size: 15.5px; line-height: 1.5; }
  .cow-photo img { max-height: 17svh; }
  .cow-list a { padding: 3px 0; font-size: 14px; }
}

/* round 12: Red List + legal protection on species cards */
.sp-prot { margin: 14px 0 14px; display: grid; gap: 4px; font: 13px/1.45 var(--sans); }
.sp-prot div { display: block; }
.sp-prot dt { display: inline; font-weight: 600; }
.sp-prot dt::after { content: ': '; }
.sp-prot dd { display: inline; }
.sp-prot dd { margin: 0; }
/* species status note sits right under the last card grid */
.ch4 .sp-note { margin: calc(16px - clamp(48px, 6vw, 90px)) 0 0; }
/* snake shelter: mirrored wood block */
.wood.shelter { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding-top: 0; }
.sh-img { margin: 0; }
.sh-img img { width: 100%; aspect-ratio: 20 / 9; object-fit: cover; border-radius: 3px; }
@media (max-width: 800px) { .wood.shelter { grid-template-columns: 1fr; } .wood.shelter .wood-text { order: -1; } }
.sp-more .sp-h { margin: 16px 0 4px; font: 600 13px/1.3 var(--sans); letter-spacing: .02em; color: var(--muted); }
/* willow pair: stacked 16:9 photos with the same framing, so the row of willows lines up */
.wil-ph.wba { grid-template-columns: 1fr; gap: 4px; }
.wil-ph.wba img, .wil-ph.wba figure img { aspect-ratio: 16/9; }
@media (max-width: 899px) { .wil-ph.wba img { aspect-ratio: 16/9; } }
/* woodpecker video: always fits the screen below the header, caption included, no black bars */
.wil-video figure { width: min(100%, 1280px, calc((100svh - var(--hdr) - 190px) * 16 / 9)); margin-inline: auto; }
.wil-video video { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; }
.wil-video { scroll-margin-top: calc(var(--hdr) + 16px); }
.wil-video > .src { width: min(100%, 1280px, calc((100svh - var(--hdr) - 190px) * 16 / 9)); margin-inline: auto; }
/* when scrolling stops near the video, the page settles with the whole video centred */
html { scroll-snap-type: y proximity; }
.wil-video figure { scroll-snap-align: center; scroll-margin-top: var(--hdr); }
/* team photo: never crop the sides; at most trim sky and grass so it fits the screen, heads always in view */
.banner-img { height: auto; }
.banner-img img { height: auto; aspect-ratio: 3 / 2; max-height: calc(100svh - var(--hdr)); object-fit: cover; object-position: 50% 22%; }
/* grazers per site on the grazing map: icon + number */
.gl-an { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; gap: 6px; }
.gl-an li { display: grid; grid-template-columns: 30px auto 1fr; align-items: center; gap: 8px; font: 14px/1.3 var(--sans); }
.gl-an .gi { color: var(--on-deep); }
.gl-an .gi svg { width: 30px; height: 30px; display: block; }
.gl-an .gn { font: 600 17px var(--sans); color: var(--on-deep); min-width: 1.6em; text-align: right; }
.op-rng { position: absolute; left: 12px; top: 50px; z-index: 4; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 5px 12px; box-shadow: 0 1px 4px #0003; font: 600 12px var(--sans); color: #15201D; }
.op-rng input { width: 96px; accent-color: var(--aster); }
#pm-map .op-rng, .cmap .op-rng { top: 12px; }
/* chapter III on phones: a full screen of map before each card, so the map is not always covered */
@media (max-width: 900px) {
  .tstep { min-height: 0; padding-top: 80svh; padding-bottom: 6svh; }
  .tstep:first-child { padding-top: 40svh; }
  .tstep:last-child { padding-bottom: 20svh; }
}
/* photo credit icon right under the photo, on its right edge */
.src.ref.img-cr, figcaption .src.ref.img-cr { display: block; text-align: right; margin: 4px 0 6px; }
.gl-info .img-cr { margin: 4px 0 0; }
.ctry { font: 600 12px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #fff; opacity: .7; text-shadow: 0 1px 4px #000c; pointer-events: none; transition: opacity .4s; }
.ctry.off { opacity: 0; }
.gmap-list .ref-btn { width: 20px; height: 20px; display: inline-flex; padding: 0; margin: 0 2px; background: none; border: 0; border-radius: 50%; gap: 0; }
.gmap-list .ref-btn[aria-pressed], .gmap-list .ref-btn:hover { background: none; }

/* timeline: centre the list when it fits the screen; title follows the list start */
.tl-title.wrap { max-width: none; padding-left: calc(var(--gut) + var(--tl-off, 0px)); }
.tl-track { padding-left: calc(var(--gut) + var(--tl-off, 0px)); }
.tl-rail { left: calc(var(--gut) + var(--tl-off, 0px)); }
@media (max-width: 900px) { .tl-rail { left: calc(var(--gut) + 7px); } }