/* AdaptDam — site stylesheet
   Layout: single quiet column; the one bold element is the "water line" motif
   (a ditch profile with water held back), echoed in the wordmark, the About
   diagram and section rules. Logos always sit on a white panel. */

/* ---------- Fonts (self-hosted, SIL OFL 1.1 — see assets/fonts/OFL-*.txt) ---------- */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  /* colour: spruce-shade neutrals, spruce accent, peat-water amber for the water motif only */
  --bg: #fafbf9;
  --surface: #f0f3f0;
  --fg: #1b2320;
  --muted: #56615c;
  --line: #d6ddd9;
  --accent: #2d5a4c;
  --accent-hover: #1f4238;
  --water: #93622f;
  --water-soft: rgba(147, 98, 47, .16);
  --logo-panel: #ffffff;
  --logo-fg: #56615c;
  /* type */
  --display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --step-0: 1.0625rem;      /* 17px body */
  --step--1: .9rem;
  --step--2: .8rem;
  --step-1: 1.3rem;
  --step-2: 1.7rem;
  --step-3: clamp(2rem, 1.4rem + 2.6vw, 3.05rem);
  --measure: 66ch;
  --wide: 1080px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121715; --surface: #1a211e; --fg: #e5ebe7; --muted: #a2ada8; --line: #2d3632;
    --accent: #8fc3af; --accent-hover: #b3dccb; --water: #cf9d63; --water-soft: rgba(207, 157, 99, .2);
    --logo-panel: #ffffff; --logo-fg: #56615c; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121715; --surface: #1a211e; --fg: #e5ebe7; --muted: #a2ada8; --line: #2d3632;
  --accent: #8fc3af; --accent-hover: #b3dccb; --water: #cf9d63; --water-soft: rgba(207, 157, 99, .2);
  --logo-panel: #ffffff; --logo-fg: #56615c; color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: var(--step-3); letter-spacing: -.01em; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 0; background: var(--bg); padding: .5rem 1rem; }
.skip:focus { left: 1rem; z-index: 10; }

.wrap { max-width: var(--wide); margin-inline: auto; padding-inline: max(16px, 4vw); }
.prose { max-width: var(--measure); display: grid; gap: 1rem; }
.label {
  font-size: var(--step--2); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.muted { color: var(--muted); }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 2rem; padding-block: 1.1rem;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--fg); text-decoration: none; }
.brand:hover { color: var(--fg); }
.brand svg { width: 38px; height: 20px; flex: none; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: .02em; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: var(--step--1); padding-block: .25rem; }
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--water); }

/* water-line motif */
.motif .ground { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.motif .water { fill: var(--water); }

/* ---------- Main sections ---------- */
main { display: block; }
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section + .section { border-top: 1px solid var(--line); }
.page-head { padding-block: clamp(2.5rem, 6vw, 4rem) 0; display: grid; gap: .9rem; }
.page-head .lede { max-width: var(--measure); font-size: 1.2rem; color: var(--muted); }

/* Home hero */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1.2rem; }
.hero h1 { max-width: 20ch; }
.hero .lede { max-width: var(--measure); display: grid; gap: .8rem; font-size: 1.18rem; }
.hero .actions { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; padding-top: .4rem; }
.hero .actions a { font-weight: 600; }
.hero-figure { margin: 0; }
.hero-figure img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 35%; }
figcaption { font-size: var(--step--1); color: var(--muted); padding-top: .5rem; }

/* three-up "what we do" */
.triad { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 2rem; }
.triad > div { display: grid; gap: .45rem; align-content: start; min-width: 0; }
.triad h3 { display: flex; align-items: baseline; gap: .6rem; }
.triad h3::before { content: ""; width: 14px; height: 3px; background: var(--water); transform: translateY(-.3em); flex: none; }

.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }
.split figure { margin: 0; }
.split figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.stack { display: grid; gap: 1.1rem; }
.stack-lg { display: grid; gap: 2.2rem; }

/* diagram */
.diagram { margin: 0; display: grid; gap: .6rem; }
.diagram-scroll { overflow-x: auto; }
.diagram svg { width: 100%; min-width: 520px; height: auto; display: block; }
.diagram .soil { fill: var(--surface); stroke: none; }
.diagram .surface { fill: none; stroke: var(--fg); stroke-width: 1.5; }
.diagram .wt { fill: none; stroke: var(--water); stroke-width: 2; stroke-dasharray: 6 5; }
.diagram .pool { fill: var(--water-soft); stroke: var(--water); stroke-width: 1.2; }
.diagram .dam { fill: var(--fg); }
.diagram text { fill: var(--muted); font-family: var(--body); font-size: 13px; }
.diagram .ttl { fill: var(--fg); font-weight: 600; font-size: 14px; }

/* work packages */
.wp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 2.5rem; }
.wp li { display: grid; grid-template-columns: 3.2rem 1fr; gap: .5rem; padding-block: .7rem; border-bottom: 1px solid var(--line); }
.wp .t { display: block; }
.wp .d { display: block; color: var(--muted); font-size: var(--step--1); line-height: 1.45; margin-top: .15rem; }
.wp .n { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; font-size: var(--step--1); padding-top: .12rem; }

/* partners + team */
.partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1.6rem 2rem; }
.partner { display: grid; gap: .25rem; align-content: start; }
.partner .name { font-weight: 600; }
.partner .focus { font-size: var(--step--1); line-height: 1.45; }
.team { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.team-scroll { overflow-x: auto; }
.team th { text-align: left; font-size: var(--step--2); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 1.2rem .5rem 0; border-bottom: 1px solid var(--line); }
.team td { padding: .75rem 1.2rem .75rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.team td:first-child { font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
  .team thead { display: none; }
  .team, .team tbody, .team tr, .team td { display: block; }
  .team tr { padding-block: .8rem; border-bottom: 1px solid var(--line); }
  .team td { border: 0; padding: 0; }
}

/* outputs + news */
.shelf { display: grid; gap: 2rem; }
.shelf section { display: grid; gap: .5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.pubs { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; max-width: var(--measure); }
.pubs a { overflow-wrap: anywhere; }
.empty { color: var(--muted); font-style: italic; }
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.post-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .3rem 1.5rem; padding-block: 1.2rem; border-top: 1px solid var(--line); }
.post-row time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--step--1); padding-top: .2rem; }
.post-row h3 a { color: var(--fg); text-decoration: none; }
.post-row h3 a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 560px) { .post-row { grid-template-columns: 1fr; } }
.post-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin: 0; }
.post-figs figure { margin: 0; }
.post-figs img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.contact-list { display: grid; gap: 1.6rem; }
.contact-list > div { display: grid; gap: .15rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: clamp(2rem, 5vw, 3.5rem); padding-block: 2.5rem 2rem; }
.site-footer .wrap { display: grid; gap: 1.6rem; }
.logo-panel {
  background: var(--logo-panel); color: var(--logo-fg);
  padding: 1.5rem clamp(1rem, 3vw, 2rem); display: grid; gap: 1.4rem;
}
.logo-row { display: grid; gap: .7rem; }
.logo-row .label { color: var(--logo-fg); }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.4rem; }
.logos a { display: inline-flex; align-items: center; }
.logos img { height: 46px; width: auto; }
.logos.small img { height: 36px; }
.logos .etag img { height: 58px; }
.logos .stacked img { height: 64px; }
.logos .lzp img { height: 70px; }
.logos.small .lfrs img { height: 50px; }
.logo-text { font-size: var(--step--1); font-weight: 600; line-height: 1.25; color: var(--logo-fg); }
.logo-pending {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .35rem .9rem;
  border: 1px dashed #b9c2bd; color: #6b7571; font-size: var(--step--2); letter-spacing: .04em; text-align: center; line-height: 1.2;
}
.logos.small .logo-pending { min-height: 36px; }
.ack { font-size: var(--step--1); color: var(--muted); max-width: var(--measure); }
.foot-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: var(--step--1); color: var(--muted); }
.foot-meta a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* team grouped by partner */
.team-groups { display: grid; gap: 2.2rem; }
.team-group { display: grid; gap: .6rem; }
.team-group h3 { font-size: var(--step-1); }
.team-group h3 .muted { font-family: var(--body); font-weight: 400; font-size: var(--step--1); }
.people { list-style: none; margin: 0; padding: 0; }
.people li { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.6fr) 5rem; gap: .2rem 1.5rem; padding-block: .7rem; border-top: 1px solid var(--line); }
.people .who { font-weight: 600; }
.people .role { color: var(--muted); }
.people .link { text-align: right; }
@media (max-width: 640px) {
  .people li { grid-template-columns: 1fr auto; }
  .people .role { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1.4rem; }
.gallery figure { margin: 0; display: grid; gap: .45rem; }
.gallery a { display: block; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery a:focus-visible img { outline: 3px solid var(--water); outline-offset: 2px; }
.credits { margin-top: 1.6rem; font-size: var(--step--1); min-height: 1.5em; }

/* expected-impact box (About) */
.callout { max-width: var(--measure); display: grid; gap: .8rem; background: var(--surface); border-left: 3px solid var(--water); padding: 1.4rem clamp(1.1rem, 3vw, 1.8rem); }
.callout h2 { font-size: var(--step-1); }