@font-face {
  font-family: "Junicode";
  src: url("fonts/Junicode-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Junicode";
  src: url("fonts/Junicode-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: "GT America";
  src: url("fonts/GT-America-Standard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT America";
  src: url("fonts/GT-America-Standard-Regular-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: #fff;
  font-family: "Junicode", Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.6;
  max-width: 92rem;
  margin: 0 auto;
  padding: 0 2rem;
}

header {
  position: absolute;
  right: 0;
  top: 0;
  text-align: right;
  padding: 1rem 2rem;
  z-index: 10;
}

main {
  position: relative;
}

section {
  margin: 0;
  padding: 4em 0;
}

section > *,
header {
  zoom: 0.85;
}

.arrow {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%, 0);
}

.arrow svg {
  width: 24px;
  height: auto;
}

.start {
  min-height: 100svh;
  width: 100%;
  align-content: center;
  position: relative;
}

p {
  display: flex;
  flex-direction: row;
  column-gap: 0.25em;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.5rem 0;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color 400ms;
}

a:hover {
  color: rgba(0, 0, 0, 0.4);
}

figure {
  width: min-content;
}

figcaption {
  font-family: "GT America", sans-serif;
  line-height: 140%;
  color: rgba(0, 0, 0, 0.4);
  font-size: 1rem;
  margin: 0.5rem 0 0 0;
}

figure a {
  text-decoration: none;
}

figure a img {
  transition: transform 800ms;
  transform-origin: bottom center;
}

figure a:hover img {
  transform: scale(1.03);
}

img {
  display: block;
}

sup {
  left: -0.25em;
  top: 0.125em;
  position: relative;
  font-size: 0.625em;
}

.left {
  justify-content: flex-start;
}
.right {
  justify-content: flex-end;
}
.center {
  justify-content: center;
}
.text-center {
  text-align: center;
}

/* — photo sets — */

.photos-salish-sea {
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
  margin: -7em auto 4em auto;
  max-width: 86rem;
}

.photos-salish-sea figure:nth-child(2) {
  margin-top: -7em;
}

.photos-salish-sea figure:nth-child(3) {
  margin-left: 10%;
}

.photos-silueta {
  display: flex;
  gap: 2em;
  margin: -1.25em 0.5em 1em 0;
  justify-content: center;
  padding-left: calc(20ch + 10%);
}

.photos-silueta figure:first-child img {
  max-height: 280px;
  width: auto;
}

.photos-silueta figure:nth-child(2) {
  margin-top: -5em;
}

.photos-rivers {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: -1em;
  gap: 1em;
}

.photos-rivers figure a,
.photos-atrato figure a {
  display: grid;
  grid-template-columns: 1em 1fr;
}

.photos-rivers figcaption,
.photos-atrato figcaption {
  margin: 0;
}

.photos-rivers figure:last-child {
  margin-top: -4.5em;
}
.photos-rivers figure:last-child img {
  width: 243px;
  height: 176px;
}

.photos-atrato {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 9.5em 0 0.75em 0;
}

.photos-salmon {
  display: flex;
  gap: 2em;
  flex-direction: column;
  padding-left: 18%;
}

.photos-salmon figure:last-child {
  padding-left: 15%;
}

.photos-bakhtiari,
.photos-river-bank,
.photos-forest-stream,
.photos-canopy {
  margin: 1em 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.photos-bear-sign,
.photos-olive-harvest {
  margin: 1em 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.photos-glacier {
  margin: 1.5em 0 3em 0;
  gap: 2em;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-end;
}

.photos-glacier figure:first-child {
  margin-bottom: 4em;
}

.photos-crocus,
.photos-moon-river {
  gap: 3em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}

.photos-crocus {
  margin: 1em 0 1.75em 0;
}

.photos-moon-river {
  margin: 8em 0 2em 0;
}

.photos-white-river {
  margin: 0 0 3em 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

/* — spacers — */

.push-auto {
  flex: 1 1 auto;
}

.push-1 {
  width: 1%;
}
.push-2 {
  width: 2%;
}
.push-3 {
  width: 3%;
}
.push-4 {
  width: 4%;
}
.push-5 {
  width: 5%;
}
.push-6 {
  width: 6%;
}
.push-7 {
  width: 7%;
}
.push-8 {
  width: 8%;
}
.push-9 {
  width: 9%;
}
.push-10 {
  width: 10%;
}
.push-11 {
  width: 11%;
}
.push-12 {
  width: 12%;
}
.push-14 {
  width: 14%;
}
.push-15 {
  width: 15%;
}
.push-16 {
  width: 16%;
}
.push-17 {
  width: 17%;
}
.push-18 {
  width: 18%;
}
.push-19 {
  width: 19%;
}
.push-20 {
  width: 20%;
}
.push-21 {
  width: 21%;
}
.push-22 {
  width: 22%;
}
.push-23 {
  width: 23%;
}
.push-24 {
  width: 24%;
}
.push-25 {
  width: 25%;
}
.push-28 {
  width: 28%;
}
.push-29 {
  width: 29%;
}
.push-30 {
  width: 30%;
}
.push-31 {
  width: 31%;
}
.push-32 {
  width: 32%;
}
.push-33 {
  width: 33%;
}
.push-35 {
  width: 35%;
}
.push-38 {
  width: 38%;
}
.push-39 {
  width: 39%;
}
.push-40 {
  width: 40%;
}
.push-41 {
  width: 41%;
}
.push-42 {
  width: 42%;
}
.push-45 {
  width: 45%;
}
.push-48 {
  width: 48%;
}
.push-49 {
  width: 49%;
}
.push-52 {
  width: 52%;
}
.push-54 {
  width: 54%;
}
.push-55 {
  width: 55%;
}
.push-57 {
  width: 57%;
}
.push-63 {
  width: 63%;
}
.br {
  width: 100%;
}

/* — offsets — */

.float-0-5 {
  position: relative;
  top: -0.5em;
}
.float-1 {
  position: relative;
  top: -0.75em;
}
.float-1-5 {
  position: relative;
  top: -1em;
}
.float-2 {
  position: relative;
  top: -1.25em;
}
.float-2-5 {
  position: relative;
  top: -1.75em;
}
.float-3 {
  position: relative;
  top: -2.25em;
}

.sink-0-5 {
  position: relative;
  top: 0.5em;
}
.sink-1 {
  position: relative;
  top: 1em;
}
.sink-1-5 {
  position: relative;
  top: 1.125em;
}
.sink-2 {
  position: relative;
  top: 2em;
}
.sink-2-5 {
  position: relative;
  top: 2.5em;
}
.sink-3 {
  position: relative;
  top: 3em;
}
.sink-4 {
  position: relative;
  top: 4em;
}

/* — decorative — */

.section-end {
  display: block;
  margin: 3em auto 3em;
  display: flex;
  justify-content: center;
}

.section-end svg {
  width: 84px;
  height: auto;
}

/* — utilities — */

.ml-10 {
  margin-left: 10%;
}
.ml-auto {
  margin-left: auto;
}
.m-auto {
  margin-left: auto;
  margin-right: auto;
}

.mr-12 {
  margin-right: 12%;
}
.mr-14 {
  margin-right: 14%;
}
.mr-25 {
  margin-right: 25%;
}
.mr-30 {
  margin-right: 30%;
}
.mt-1 {
  margin-top: 1em;
}
.mt-2 {
  margin-top: 2.25em;
}
.mt-3 {
  margin-top: 3em;
}
.mt-9-5 {
  margin-top: 9.5em;
}
.mt-neg-3 {
  margin-top: -3em;
}

.w-35ch {
  width: 35ch;
}
.truth-about-water {
  max-width: 47ch;
}
.onward {
  max-width: 56ch;
  margin: 0 12% 0 auto;
}

.whanganui {
  max-width: 56ch;
  margin: -16em 0 13em 33%;
}

.multiple-occasions {
  width: 35ch;
  margin: 3em 14% 0 auto;
}

.once-winding {
  margin-left: 5%;
}

.plumbed {
  padding-right: 5%;
}

@media screen and (max-width: 920px) {
  section > *,
  header {
    zoom: 0.67;
  }

  .photos-silueta {
    margin-top: 1em;
  }
}

@media screen and (max-width: 767px) {
  body,
  header {
    font-size: 1rem;
  }

  body {
    padding: 0 1.5rem;
  }

  section > *,
  header {
    zoom: 1;
  }

  header {
    padding: 1rem 1.25rem;
  }

  main {
    padding: 0;
  }

  figcaption {
    font-size: 0.8125rem;
  }

  sup {
    font-size: 0.8125rem;
  }

  .onward {
    max-width: 100%;
    margin: 0;
  }

  .whanganui {
    max-width: 56ch;
    margin: 3em 0 0 0;
  }

  .multiple-occasions {
    margin-right: 0;
    width: auto;
  }
  .plumbed {
    padding-right: 0;
  }

  .truth-about-water {
    width: max-content;
    left: -1ch;
    position: relative;
  }

  .m-left {
    justify-content: flex-start;
  }

  .m-mr-0 {
    margin-right: 0;
  }
  .m-mt-0 {
    margin-top: 0;
  }
  .m-mt-1 {
    margin-top: 1em;
  }
  .m-mt-2 {
    margin-top: 1.5em;
  }

  .m-mt-3 {
    margin-top: 3em;
  }

  .m-br {
    width: 100%;
  }

  .m-push-auto {
    width: auto;
    flex: 1 1 auto;
  }
  .m-push-0 {
    width: 0%;
  }
  .m-push-5 {
    width: 5%;
  }
  .m-push-10 {
    width: 10%;
  }
  .m-push-12 {
    width: 12%;
  }
  .m-push-15 {
    width: 15%;
  }
  .m-push-20 {
    width: 20%;
  }
  .m-push-25 {
    width: 25%;
  }
  .m-push-30 {
    width: 30%;
  }
  .m-push-35 {
    width: 35%;
  }
  .m-push-40 {
    width: 40%;
  }

  .thousand {
    margin: 0.5rem 0;
  }

  .arrow svg {
    width: 22px;
  }

  .section-end svg {
    height: 22px;
  }

  .photos-salish-sea {
    height: auto;
    flex-direction: column;
    margin-top: 5rem;
    margin-bottom: 5rem;
    gap: 1.25rem;
  }

  .photos-salish-sea figure:first-child img {
    width: 100%;
    height: auto;
  }

  .photos-salish-sea figure:nth-child(2) {
    margin-top: 0;
  }

  .photos-salish-sea figure:first-child,
  .photos-salish-sea figure:nth-child(3) {
    width: 100%;
    margin-left: 0;
  }

  .photos-salish-sea figure:nth-child(3) img {
    width: 100%;
    height: auto;
  }

  .photos-silueta {
    margin: 3.75rem 0 0 0;
    padding: 0;
    flex-direction: column-reverse;
    gap: 1.25rem;
  }
  .photos-silueta figure:first-child {
    margin-left: auto;
  }
  .photos-silueta figure:nth-child(2) {
    margin-top: 1.5rem;
    width: 100%;
  }

  .photos-silueta figure:nth-child(2) img {
    width: 100%;
    height: auto;
  }

  .photos-rivers {
    margin: 0;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.5em;
    max-width: 400px;
    margin: 3em auto 0 auto;
  }

  .photos-atrato figure {
    width: 100%;
  }

  .photos-rivers figure:nth-child(2),
  .photos-rivers figure:nth-child(2) img {
    width: 100%;
    height: auto;
  }

  .photos-rivers figure:last-child {
    margin: 0 0 0 auto;
  }

  .photos-atrato {
    margin-top: 1.5em;
    margin-bottom: 5rem;
  }

  .photos-salmon {
    padding-left: 0;
    margin-top: 10rem;
    margin-bottom: 5rem;
    gap: 1.25rem;
  }

  .photos-salmon figure:first-child img {
    max-width: 280px;
    height: auto;
  }

  .photos-salmon figure:last-child {
    padding: 0;
    width: 100%;
    height: auto;
  }

  .photos-salmon figure:nth-child(2) img {
    width: 100%;
    height: auto;
  }

  .photos-bakhtiari,
  .photos-bear-sign,
  .photos-river-bank,
  .photos-forest-stream,
  .photos-canopy,
  .photos-crocus {
    margin-top: 5rem;
  }

  .photos-bakhtiari,
  .photos-forest-stream,
  .photos-canopy,
  .photos-crocus {
    margin-bottom: 5rem;
  }

  .photos-bakhtiari img,
  .photos-bakhtiari figure {
    width: 100%;
    height: auto;
  }
  .photos-olive-harvest {
    margin-top: 1.25rem;
  }
  .photos-olive-harvest img {
    width: 100%;
    height: auto;
  }
  .photos-canopy {
    justify-content: flex-start;
  }

  .photos-glacier {
    flex-direction: column;
    gap: 1.5em;
    margin: 5rem 0;
    align-items: flex-start;
  }

  .photos-glacier figure,
  .photos-glacier figure:first-child {
    margin-bottom: 0;
    width: 100%;
  }
  .photos-glacier figure:first-child img {
    width: 100%;
    height: auto;
  }

  .photos-glacier figure:nth-child(2) img {
    max-width: 90%;
    height: auto;
  }

  .photos-moon-river img {
    max-width: calc(100vw - 2rem);
    height: auto;
  }
  .photos-white-river {
    margin-bottom: 5rem;
  }

  .photos-white-river img {
    width: 80vw;
    max-width: 300px;
    height: auto;
  }

  .photos-river-bank {
    margin: 5rem 0;
  }
}