/* Our Work is a reading page: open text, a dated thread, and no card grid. */
.our-work-page .work-intro {
  grid-template-columns: 1.05fr 1fr; align-items: start; gap: 72px;
  padding-block: clamp(64px, 7vw, 100px); min-height: 0;
}
.our-work-page .work-intro h1 { font-size: clamp(2.6rem, 4.7vw, 4.4rem); max-width: 13ch; }
.our-work-page .work-intro .work-intro-lead {
  max-width: 42ch; margin: 28px 0 0; font-size: clamp(18px, 1.65vw, 21px);
  line-height: 1.75; font-weight: 600;
}
.our-work-page .work-intro-copy { max-width: 620px; }
.our-work-page .work-intro-copy > p { margin: 0 0 22px; font-size: 16px; line-height: 1.85; }
.our-work-page .work-intro-copy > p:last-of-type { margin-bottom: 0; }
.our-work-page .work-intro-links { display: flex; flex-wrap: wrap; gap: 18px 30px; margin-top: 28px; }
.our-work-page .work-intro + .history { padding-top: 0; }
.our-work-page .history-narrative { margin-bottom: 0; }
.our-work-page .history-story p:last-child { margin-bottom: 0; }
.our-work-page .history-pullquote p { text-transform: none; line-height: 1.5; }

/* Dates give the timeline structure. The single vertical thread conveys time. */
.our-work-page .work-chronology {
  display: grid; grid-template-columns: .7fr 1.3fr; align-items: start;
  gap: 64px; margin-top: 80px;
}
.our-work-page .chronology-heading h3 {
  margin: 0; max-width: 14ch; font: clamp(1.65rem, 2.4vw, 2.4rem)/1.2 var(--display);
  letter-spacing: -.035em; text-transform: uppercase;
}
.our-work-page .timeline {
  position: relative; display: block; list-style: none; margin: 0; padding: 0;
}
.our-work-page .timeline::before {
  content: ""; position: absolute; top: 9px; bottom: 30px; left: 122px;
  width: 1px; background: rgba(7, 137, 67, .25);
}
.our-work-page .timeline-item {
  position: relative; display: grid; grid-template-columns: 100px minmax(0, 1fr);
  gap: 48px; padding: 0 0 38px; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--ink); box-shadow: none;
}
.our-work-page .timeline-item:last-child { padding-bottom: 0; }
.our-work-page .timeline-item::before {
  content: ""; position: absolute; left: 118px; top: 7px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--acid);
}
.our-work-page .timeline-date { font-size: 11px; line-height: 1.7; padding-top: 2px; }
.our-work-page .timeline-detail h3 { font-size: 19px; line-height: 1.4; margin: 0 0 10px; }
.our-work-page .timeline-detail p { font-size: 15px; line-height: 1.8; margin: 0; }

/* The development is an editorial spread with clear, readable subheadings. */
.our-work-page .work-development { padding-top: 0; }
.our-work-page .development-intro { padding: 0; margin-bottom: 42px; max-width: 780px; }
.our-work-page .development-intro h2 {
  margin: 0 0 18px; max-width: 23ch; font: clamp(1.9rem, 3.3vw, 3.2rem)/1.18 var(--display);
  text-transform: uppercase; letter-spacing: -.04em;
}
.our-work-page .development-intro > p:last-child { font-size: 16px; line-height: 1.8; }
.our-work-page .development-map {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 72px;
  margin: 0; padding: 0;
}
.our-work-page .development-step,
.our-work-page .development-step:hover,
.our-work-page .critical-lens:nth-child(n),
.our-work-page .critical-lens:hover {
  min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; transform: none; transition: none; color: var(--ink);
}
.our-work-page .development-step > span { display: none; }
.our-work-page .development-step h3 {
  max-width: 27ch; margin: 0 0 12px; font: 800 21px/1.45 var(--sans); letter-spacing: -.025em;
}
.our-work-page .development-step p { max-width: 56ch; font-size: 16px; line-height: 1.85; }

/* A change in tone marks the two interventions without enclosing either one. */
.our-work-page .about-interventions { max-width: none; background: var(--ink); color: var(--paper); }
.our-work-page .interventions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 72px; }
.our-work-page .interventions-heading { grid-column: 1 / -1; margin: 0; }
.our-work-page .interventions-heading .section-kicker { color: #78d5a0; }
.our-work-page .interventions-heading h2 {
  font-size: clamp(1.9rem, 3.3vw, 3.2rem); line-height: 1.18; max-width: 18ch;
}
.our-work-page .intervention-card {
  min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; color: var(--paper); transition: none;
}
.our-work-page .intervention-card h3 { font-size: clamp(1.45rem, 2vw, 1.9rem); margin-bottom: 16px; }
.our-work-page .intervention-card p { max-width: 56ch; font-size: 16px; line-height: 1.85; }
.our-work-page .intervention-card .intervention-footer {
  margin-top: 24px; padding: 0; font: 11px/1.8 var(--mono); color: #78d5a0;
}

/* Frameworks read as a compact two-column reference, not twelve tiles. */
.our-work-page .critical-lenses-heading { margin-bottom: 52px; }
.our-work-page .critical-lenses-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 72px;
}
.our-work-page .critical-lens h3 {
  margin: 0 0 10px; font: 800 19px/1.5 var(--sans); letter-spacing: -.02em;
}
.our-work-page .critical-lens p,
.our-work-page .critical-lens:hover p { font-size: 15px; line-height: 1.85; max-width: 58ch; color: #42473f; }

@media (max-width: 900px) {
  .our-work-page .work-intro { grid-template-columns: 1fr; gap: 34px; }
  .our-work-page .work-intro h1 { max-width: none; }
  .our-work-page .work-intro .work-intro-lead { max-width: 55ch; }
  .our-work-page .work-chronology { grid-template-columns: 1fr; gap: 34px; margin-top: 60px; }
  .our-work-page .chronology-heading h3 { max-width: none; }
  .our-work-page .development-map, .our-work-page .critical-lenses-grid,
  .our-work-page .interventions { column-gap: 40px; }
}
@media (max-width: 600px) {
  .our-work-page .work-intro h1 { font-size: clamp(2.2rem, 8.7vw, 3.2rem); }
  .our-work-page .work-intro .work-intro-lead { margin-top: 22px; font-size: 18px; }
  .our-work-page .work-chronology { margin-top: 48px; }
  .our-work-page .timeline::before { left: 4px; top: 8px; bottom: 32px; }
  .our-work-page .timeline-item { grid-template-columns: 1fr; gap: 10px; padding: 0 0 32px 28px; }
  .our-work-page .timeline-item::before { left: 0; }
  .our-work-page .timeline-detail h3 { font-size: 18px; }
  .our-work-page .development-map, .our-work-page .critical-lenses-grid,
  .our-work-page .interventions { grid-template-columns: 1fr; gap: 32px; }
  .our-work-page .development-step h3 { font-size: 20px; max-width: none; }
  .our-work-page .development-intro, .our-work-page .critical-lenses-heading { margin-bottom: 34px; }
  .our-work-page .interventions-heading { grid-column: 1; }
}