/* ============================================================
   pages-work.css — Our Work hub, Urban Rewilding, Urban to Wild
   Page-specific styles only. Shared system lives in the core files.
   ============================================================ */

/* ============================================================
   OUR WORK — staggered two-column masonry
   ============================================================ */
.work-hero { position: relative; }
.work-hero__meta {
  margin-top: calc(var(--tile) * 1.5);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lichen);
  line-height: 2;
}

.work-masonry-section { padding-top: 0; }
.work-masonry {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--tile) * 3);
}
.work-col {
  display: flex;
  flex-direction: column;
  gap: calc(var(--tile) * 3.5);
}
@media (min-width: 900px) {
  .work-masonry {
    grid-template-columns: 6fr 5fr; /* uneven on purpose */
    gap: calc(var(--tile) * 3.5);
    align-items: start;
  }
  .work-col--offset { margin-top: calc(var(--tile) * 7); }
  .work-col { gap: calc(var(--tile) * 4.5); }
}

.work-card { max-width: 640px; }
.work-card__photo-link {
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: var(--radius-card);
}
.work-card .photo img {
  width: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
/* varied card shapes — a masonry, not a grid */
.work-card--tall .photo img   { aspect-ratio: 4 / 5; }
.work-card--square .photo img { aspect-ratio: 1 / 1; }
.work-card--wide .photo img   { aspect-ratio: 3 / 2; }
.work-card--portrait .photo img { aspect-ratio: 3 / 4; }
.work-card__photo-link:hover img { transform: scale(1.03); }

.work-card .photo figcaption { padding-inline: 2px; }
.work-card .specimen { margin-top: 18px; }
.work-card .specimen__name a {
  text-decoration-color: transparent;
}
.work-card .specimen__name a:hover {
  text-decoration-color: var(--candytuft);
  text-decoration-thickness: 2px;
}
.work-card__summary {
  margin-top: 12px;
  font-size: var(--small);
  line-height: 1.6;
  color: var(--text-on-dark-mute);
  max-width: 44ch;
}
.work-card__go {
  display: inline-block;
  margin-top: 12px;
  font-size: var(--small);
  font-weight: 500;
}

/* Living Trails — the full-width feature. New, so it gets the room. */
.trails-feature { overflow: clip; }
.trails-feature__grid { align-items: center; }
.trails-feature__media { grid-column: 1 / -1; }
.trails-feature__body  { grid-column: 1 / -1; margin-top: calc(var(--tile) * 1.5); }
@media (min-width: 900px) {
  .trails-feature__media { grid-column: 8 / 13; }
  .trails-feature__body  { grid-column: 1 / 7; margin-top: 0; }
  /* source order puts media second in DOM; place it right, body left */
}
.trails-feature__body .h2 { margin-block: 16px 20px; max-width: 18ch; }
.trails-feature__body p { color: var(--text-on-dark-mute); }
.trails-feature__body p + p { margin-top: 1em; }
.trails-feature__how {
  margin-block: calc(var(--tile) * 1.25);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chalk);
}
.trails-feature__how .dash {
  flex: 1 1 24px;
  min-width: 20px;
  border-top: 1px solid var(--rule-dark);
}
.trails-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: calc(var(--tile) * 1.25);
}

/* ============================================================
   URBAN REWILDING — split hero
   ============================================================ */
.split-hero { padding-top: calc(76px + var(--space-section) * .55); }
.split-hero__grid { align-items: end; }
.split-hero__copy { grid-column: 1 / -1; padding-bottom: calc(var(--tile) * 1.5); }
.split-hero__media { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .split-hero__copy  { grid-column: 1 / 7; padding-bottom: calc(var(--tile) * 2); }
  .split-hero__media { grid-column: 8 / 13; }
}
.split-hero h1 {
  font-size: var(--display-l);
  line-height: 1.02;
  max-width: 14ch;
}
.split-hero .eyebrow { margin-bottom: 20px; }
.split-hero .lede {
  margin-top: 24px;
  color: var(--text-on-dark-mute);
  max-width: 44ch;
}
.split-hero__media img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

/* ============================================================
   THE FIVE BENEFITS — one connected transect, not five cards
   ============================================================ */
.eco-flow-section { overflow: clip; }
.eco-flow-head { max-width: 56ch; margin-bottom: calc(var(--tile) * 3); }
.eco-flow-head .h2 { margin-block: 16px 0; max-width: 22ch; }

.eco-flow {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.eco-node { position: relative; }
.eco-node__label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chalk);
  margin-bottom: 8px;
}
.eco-node__text {
  font-size: var(--small);
  line-height: 1.6;
  color: var(--text-on-dark-mute);
  max-width: 30ch;
}
/* the tessera that marks each node on the line */
.eco-node::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--lichen);
  border-radius: var(--radius-tile);
}
.eco-node:nth-child(odd)::before  { transform: rotate(4deg); }
.eco-node:nth-child(even)::before { transform: rotate(-5deg); }

/* mobile: a vertical transect down the left edge */
@media (max-width: 899px) {
  .eco-flow {
    border-left: 1px solid var(--rule-dark);
    padding-left: 28px;
    display: flex;
    flex-direction: column;
    gap: calc(var(--tile) * 1.75);
  }
  .eco-node::before { left: -33px; top: 3px; }
}

/* desktop: one horizontal transect line; each benefit hangs off it
   like a specimen tag, on a stem of its own length. Asymmetric. */
@media (min-width: 900px) {
  .eco-flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gap);
  }
  /* the transect itself */
  .eco-flow::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 5px;
    border-top: 1px solid var(--rule-dark);
  }
  .eco-node::before { top: 0; left: 0; }
  /* the stem from line to tag */
  .eco-node::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 10px;
    width: 1px;
    background: var(--rule-dark);
    height: calc(var(--stem, 44px) - 14px);
  }
  .eco-node { padding-top: var(--stem, 44px); }
  /* staggered stem lengths — a hand-hung line, not a template */
  .eco-node:nth-child(1) { --stem: 46px; }
  .eco-node:nth-child(2) { --stem: 118px; }
  .eco-node:nth-child(3) { --stem: 64px; }
  .eco-node:nth-child(4) { --stem: 150px; }
  .eco-node:nth-child(5) { --stem: 90px; }
}

/* ============================================================
   ECOSYSTEM SERVICES — a taxonomy wants a table
   ============================================================ */
.services-section .eyebrow { margin-bottom: 16px; }
.services-section .h2 { max-width: 22ch; margin-bottom: 12px; }
.services-intro { color: var(--text-on-light-mute); max-width: 56ch; }

.services-table {
  width: 100%;
  margin-top: calc(var(--tile) * 2);
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--small);
}
.services-table caption {
  text-align: left;
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-on-light-mute);
  padding-bottom: 14px;
}
.services-table th,
.services-table td {
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--rule-light);
  padding: 18px 24px 18px 0;
}
.services-table thead th {
  border-top: none;
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-on-light-mute);
  padding-block: 0 12px;
}
.services-table tbody th {
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-deep);
  white-space: nowrap;
  width: 1%;
}
.services-table td { color: var(--text-on-light-mute); letter-spacing: .01em; line-height: 1.7; }
.services-table tbody tr:last-child th,
.services-table tbody tr:last-child td { border-bottom: 1px solid var(--rule-light); }
@media (max-width: 639px) { .services-table { display: none; } }

/* the same taxonomy, as a definition list, for small screens */
.services-dl {
  margin-top: calc(var(--tile) * 2);
  font-family: var(--font-mono);
}
.services-dl dt {
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-deep);
  border-top: 1px solid var(--rule-light);
  padding-top: 16px;
}
.services-dl dd {
  margin: 6px 0 18px;
  font-size: var(--small);
  color: var(--text-on-light-mute);
  line-height: 1.7;
}
.services-dl dd:last-child { border-bottom: 1px solid var(--rule-light); padding-bottom: 18px; margin-bottom: 0; }
@media (min-width: 640px) { .services-dl { display: none; } }

/* ============================================================
   TINY FORESTS — the story, and where the movement stands
   ============================================================ */
.tiny-forests__grid { align-items: start; }
.tiny-forests__copy { grid-column: 1 / -1; }
.tiny-forests__media { grid-column: 1 / -1; margin-top: calc(var(--tile) * 1.5); }
@media (min-width: 900px) {
  .tiny-forests__copy  { grid-column: 1 / 7; }
  .tiny-forests__media { grid-column: 8 / 13; margin-top: calc(var(--tile) * 3); }
}
.tiny-forests__copy .h2 { margin-block: 16px 20px; max-width: 18ch; }
.tiny-forests__copy p { color: var(--text-on-light-mute); }
.tiny-forests__copy p + p { margin-top: 1em; }
.tiny-forests__copy .footnote { margin-top: calc(var(--tile) * 1.5); }

.movement-line {
  margin-block: calc(var(--tile) * 1.5);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-deep);
  line-height: 2.4;
  border-top: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
  padding-block: 14px;
  max-width: none;
}
/* inline-block separators create soft-wrap points between countries —
   the markup has no spaces, so without this the line is one unbreakable run */
.movement-line .sep { display: inline-block; color: var(--text-on-light-mute); padding-inline: .5em; }
.movement-line__what {
  display: block;
  color: var(--text-on-light-mute);
  letter-spacing: .14em;
  font-size: .6875rem;
  margin-top: 2px;
}

/* ============================================================
   REWILDING CTA — sponsor a patch + the compact module
   ============================================================ */
/* the hidden attribute must win over .tier-grid's display:grid */
.tier-grid[hidden] { display: none; }

.rewild-ask__note {
  margin-top: calc(var(--tile) * 1.5);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lichen);
  line-height: 2;
}
.rewild-ask__note a { color: var(--chalk); }

/* ============================================================
   URBAN TO WILD — light hero, the linking model
   ============================================================ */
/* the fixed header is chalk-on-transparent; over a limestone hero
   it needs its dark ground from the first pixel */
.page-light .site-header {
  background: rgba(15, 50, 57, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--rule-dark);
}

.utw-hero { padding-top: calc(76px + var(--space-section) * .6); }
.utw-hero h1 { max-width: 12ch; }
.utw-hero .lede { color: var(--text-on-light-mute); }
.utw-hero__deck {
  margin-top: 24px;
  max-width: 52ch;
}
.utw-hero__grid { align-items: end; }
.utw-hero__copy { grid-column: 1 / -1; }
.utw-hero__aside {
  grid-column: 1 / -1;
  margin-top: calc(var(--tile) * 1.5);
}
@media (min-width: 900px) {
  .utw-hero__copy  { grid-column: 1 / 8; }
  .utw-hero__aside { grid-column: 9 / 13; margin-top: 0; padding-bottom: 6px; }
}
.utw-hero__aside .specimen { max-width: none; }

/* full-bleed photo band between hero and partner grid */
.photo-band { position: relative; }
.photo-band img {
  width: 100%;
  height: clamp(340px, 58vh, 620px);
  object-fit: cover;
  display: block;
}
.photo-band::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(6, 24, 28, .72), transparent);
  pointer-events: none;
}
.photo-band figcaption {
  position: absolute;
  z-index: 1;
  left: var(--pad-x);
  bottom: 14px;
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: .06em;
  color: rgba(237, 238, 234, .9);
}

/* small screens: keep PLANT—CONNECT—GROW—SHARE on one line */
@media (max-width: 479px) {
  .utw-steps {
    gap: 8px;
    font-size: .6875rem;
    letter-spacing: .12em;
  }
  .utw-steps .dash { flex: 1 1 10px; min-width: 8px; }
}

/* partner section heading offset — asymmetric, body right */
.utw-partners-head { max-width: 60ch; margin-bottom: calc(var(--tile) * 2); }
.utw-partners-head .h2 { margin-block: 16px 20px; max-width: 22ch; }
.utw-partners-head .lede { color: var(--text-on-light-mute); max-width: 54ch; }

/* ============================================================
   START A FOREST AT YOUR SCHOOL — audience #3's conversion
   ============================================================ */
.school-section { overflow: clip; }
.school-grid { align-items: center; }
.school-copy { grid-column: 1 / -1; }
.school-facts { grid-column: 1 / -1; margin-top: calc(var(--tile) * 2); }
@media (min-width: 900px) {
  .school-copy  { grid-column: 1 / 7; }
  .school-facts { grid-column: 8 / 13; margin-top: 0; }
}
.school-copy .h2 { margin-block: 16px 20px; max-width: 15ch; }
.school-copy p { color: var(--text-on-dark-mute); }
.school-copy p + p { margin-top: 1em; }
.school-copy__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: calc(var(--tile) * 1.5);
}
.school-copy__mailto {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lichen);
}
.school-copy__mailto a { color: var(--chalk); }

.school-facts .specimen { max-width: none; }
.school-facts .photo { margin-top: calc(var(--tile) * 1.25); }
.school-facts .photo img { aspect-ratio: 4 / 3; object-fit: cover; }