:root {
  color-scheme: dark;
  --graphite: #161b1b;
  --peat: #392d27;
  --lake: #123d64;
  --sedge: #667848;
  --clay: #c96e45;
  --wax: #f1d69a;
  --mist: #e9efe8;
  --quiet: rgba(233, 239, 232, 0.72);
  --line: rgba(241, 214, 154, 0.35);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--graphite);
  color: var(--mist);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--graphite); }
body { margin: 0; min-width: 280px; background: var(--graphite); }
a { color: inherit; text-underline-offset: .24em; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sourcehead {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem clamp(1rem, 4vw, 4.5rem);
  border-bottom: 1px solid var(--line);
  background: rgba(22, 27, 27, .92);
  backdrop-filter: blur(14px);
}
.sourcehead strong { font-family: Georgia, serif; font-size: 1.45rem; color: var(--wax); font-weight: 500; }
.sourcehead a { font-size: .9rem; color: var(--quiet); }

.source {
  position: relative;
  min-height: min(820px, 92vh);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
  gap: clamp(1rem, 4vw, 5rem);
  align-items: end;
  padding: clamp(3rem, 10vw, 9rem) clamp(1rem, 6vw, 7rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
.source::after {
  content: "";
  position: absolute;
  width: 52vw;
  height: 52vw;
  left: -22vw;
  bottom: -34vw;
  border: 1px solid var(--line);
  border-radius: 48% 52% 66% 34%;
  box-shadow: 0 0 0 5vw rgba(18, 61, 100, .12), 0 0 0 11vw rgba(102, 120, 72, .06);
  pointer-events: none;
}
.source-copy { position: relative; z-index: 1; max-width: 52rem; }
.source h1 {
  max-width: 8ch;
  margin: 0 0 1.25rem;
  font: 500 clamp(4.4rem, 11vw, 10.5rem)/.82 Georgia, serif;
  letter-spacing: -.065em;
  color: var(--wax);
}
.source .lead { max-width: 44rem; margin: 0; color: var(--quiet); font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.5; }
.source figure { margin: 0; height: clamp(23rem, 60vh, 44rem); border-radius: 48% 12% 42% 18%; overflow: hidden; background: radial-gradient(circle at 60% 25%, var(--clay), var(--peat) 45%, var(--lake)); }

.delta {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2.5rem);
  padding: clamp(4rem, 8vw, 9rem) clamp(1rem, 5vw, 6rem);
  border-top: 1px solid var(--line);
}
.channel { position: relative; min-width: 0; }
.channel h2 { margin: 0 0 1rem; font: 500 clamp(2.1rem, 4vw, 4.4rem)/1 Georgia, serif; color: var(--wax); }
.channel p { margin: 0 0 1.4rem; max-width: 39rem; color: var(--quiet); line-height: 1.68; }
.channel-source { grid-column: 1 / span 5; padding-top: 4rem; }
.channel-imagined { grid-column: 7 / -1; }
.channel-meander { grid-column: 3 / span 8; padding-top: 2rem; }
.channel::before {
  content: "";
  position: absolute;
  top: -2.4rem;
  left: 0;
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, var(--wax), transparent);
}

.relief-run {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.6rem, 1.2vw, 1.25rem);
  margin: 2.2rem 0 3.5rem;
}
.relief-run figure { margin: 0; min-height: 12rem; overflow: hidden; background: linear-gradient(135deg, var(--peat), var(--lake)); }
.relief-run figure:nth-child(1) { grid-column: span 4; height: clamp(18rem, 34vw, 34rem); border-radius: 34% 8% 36% 12%; }
.relief-run figure:nth-child(2) { grid-column: span 2; height: clamp(18rem, 34vw, 34rem); border-radius: 8% 44% 10% 36%; }
.relief-run figure:nth-child(3) { grid-column: span 2; height: 16rem; border-radius: 44% 8% 30% 12%; }
.relief-run figure:nth-child(4) { grid-column: span 4; height: 16rem; border-radius: 8% 36% 12% 42%; }

.crossing {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(15rem, .6fr);
  gap: clamp(1.5rem, 5vw, 6rem);
  align-items: center;
  margin: clamp(2rem, 8vw, 8rem) 0;
  padding: clamp(1.4rem, 4vw, 4rem);
  border: 1px solid var(--line);
  border-radius: 4rem 1rem 8rem 1rem;
  background: linear-gradient(115deg, rgba(18,61,100,.42), rgba(57,45,39,.5));
}
.crossing h2 { margin: 0 0 1rem; font: 500 clamp(2.4rem, 5vw, 5rem)/.95 Georgia, serif; color: var(--wax); }
.crossing p { color: var(--quiet); line-height: 1.65; }
.crossing figure { margin: 0; min-height: 27rem; border-radius: 52% 18% 36% 10%; overflow: hidden; background: var(--peat); }

.shoreline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 72vh;
  border-top: 1px solid var(--line);
}
.shoreline figure { margin: 0; min-height: 24rem; overflow: hidden; background: var(--lake); }
.shoreline figure:nth-child(1) { grid-column: span 2; }
.shoreline figure:nth-child(4) { grid-column: span 2; }
.shoreline .closing {
  grid-column: 1 / -1;
  padding: clamp(3rem, 8vw, 8rem) clamp(1rem, 7vw, 8rem);
  background: var(--wax);
  color: var(--graphite);
}
.closing h2 { max-width: 13ch; margin: 0 0 1rem; font: 500 clamp(3rem, 7vw, 7rem)/.9 Georgia, serif; }
.closing p { max-width: 48rem; font-size: 1.15rem; line-height: 1.65; }

.sitefoot { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem clamp(1rem, 5vw, 6rem); color: var(--quiet); border-top: 1px solid var(--line); }

/* Policy: a calmer source-to-mouth reading. */
.policy-shell { background: linear-gradient(180deg, var(--graphite), #1f2827 28%, var(--graphite)); }
.policy-intro {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(18rem, 1.25fr);
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(3rem, 8vw, 8rem) clamp(1rem, 6vw, 7rem);
  align-items: center;
}
.policy-intro h1 { margin: 0 0 1rem; font: 500 clamp(3.6rem, 8vw, 8rem)/.86 Georgia, serif; color: var(--wax); letter-spacing: -.05em; }
.policy-intro p { color: var(--quiet); line-height: 1.65; }
.policy-intro figure { margin: 0; min-height: 36rem; border-radius: 52% 8% 44% 16%; overflow: hidden; background: var(--peat); }
.topic-map {
  margin: 0 clamp(1rem, 6vw, 7rem) clamp(4rem, 9vw, 9rem);
  padding: clamp(1.2rem, 3vw, 2.5rem);
  border-block: 1px solid var(--line);
}
.topic-map h2 { margin: 0 0 1.4rem; font: 500 1.65rem Georgia, serif; color: var(--wax); }
.topic-map ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 2rem; }
.topic-map a { display: block; padding: .55rem 0; color: var(--quiet); text-decoration-color: rgba(241,214,154,.3); }
.policy-flow { padding: 0 clamp(1rem, 6vw, 7rem) 8rem; }
.reach { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 3rem); padding: clamp(3rem, 7vw, 7rem) 0; border-top: 1px solid var(--line); }
.reach::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--line), transparent); }
.reach > h2 { grid-column: 1 / span 3; margin: 0; font: 500 clamp(2rem, 4vw, 4rem)/1 Georgia, serif; color: var(--wax); position: sticky; top: 2rem; align-self: start; }
.policy-unit { grid-column: 4 / -1; display: grid; grid-template-columns: minmax(11rem, .55fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: start; padding: 1.25rem 0; scroll-margin-top: 2rem; }
.policy-unit:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(11rem, .55fr); }
.policy-unit:nth-of-type(even) figure { order: 2; }
.policy-unit figure { margin: 0; min-height: 14rem; border-radius: 44% 8% 36% 14%; overflow: hidden; background: var(--peat); }
.policy-unit h3 { margin: 0 0 .65rem; font: 500 clamp(1.35rem, 2.5vw, 2.2rem)/1.12 Georgia, serif; color: var(--mist); }
.policy-unit p { margin: 0 0 .75rem; color: var(--quiet); line-height: 1.66; }
.policy-mouth { display: grid; grid-template-columns: 1fr 1fr; min-height: 60vh; align-items: stretch; background: var(--wax); color: var(--graphite); }
.policy-mouth figure { margin: 0; min-height: 28rem; overflow: hidden; background: var(--lake); }
.policy-mouth div { padding: clamp(3rem, 8vw, 8rem); align-self: center; }
.policy-mouth h2 { margin: 0 0 1rem; font: 500 clamp(2.8rem, 6vw, 6rem)/.92 Georgia, serif; }
.policy-mouth p { line-height: 1.65; }

@media (max-width: 820px) {
  .source, .policy-intro, .crossing, .policy-mouth { grid-template-columns: 1fr; }
  .source { min-height: auto; padding-top: 5rem; }
  .source figure { height: 60vh; }
  .delta { display: block; }
  .channel { padding: 2rem 0; }
  .relief-run { grid-template-columns: 1fr 1fr; }
  .relief-run figure:nth-child(n) { grid-column: span 1; height: 13rem; border-radius: 2rem .5rem 2rem .5rem; }
  .topic-map ol { grid-template-columns: 1fr 1fr; }
  .reach { display: block; }
  .reach::before { left: .35rem; }
  .reach > h2 { position: static; padding-left: 1.5rem; }
  .policy-unit, .policy-unit:nth-of-type(even) { display: block; padding-left: 1.5rem; }
  .policy-unit figure, .policy-unit:nth-of-type(even) figure { order: initial; min-height: 13rem; margin-bottom: 1.1rem; }
  .shoreline { grid-template-columns: 1fr 1fr; }
  .shoreline figure:nth-child(n) { grid-column: span 1; }
  .shoreline .closing { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .topic-map ol { grid-template-columns: 1fr; }
  .source h1 { font-size: 4.25rem; }
  .sourcehead { align-items: flex-start; }
  .sitefoot { display: block; }
  .sitefoot a { display: inline-block; margin-top: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}