/* =========================================================
   FURTHER — MARTIJN KLIJNSTRA
   Main stylesheet
   ========================================================= */


/* =========================================================
   VARIABLES / RESET
   ========================================================= */

:root {
  --navy: #071522;
  --navy2: #0d2435;
  --cream: #f2eee5;
  --orange: #f26a2e;
  --muted: #71818a;
  --line: rgba(242, 238, 229, .16);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font-family: "Space Grotesk", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}


/* =========================================================
   TYPOGRAPHY / UTILITIES
   ========================================================= */

.mono {
  font-family: "DM Mono", monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

nav {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;

  padding: 22px 4vw;

  display: flex;
  justify-content: space-between;
  align-items: center;

  background: linear-gradient(
    var(--navy),
    transparent
  );
}

.logo {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .14em;

  display: flex;
  flex-direction: column;
  gap: 2px;
}

.logo small {
  font-family: "DM Mono", monospace;
  font-size: .58rem;
  letter-spacing: .18em;
  color: var(--orange);
  font-weight: 400;
}

nav .links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

nav .links a {
  font-family: "DM Mono", monospace;
  font-size: .65rem;
  color: var(--cream);
  opacity: .72;
  transition: .2s;
}

nav .links a:hover {
  color: var(--orange);
  opacity: 1;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  min-height: 100vh;

  padding: 8vh 7vw 7vh;

  display: flex;
  flex-direction: column;
  justify-content: center;

  position: relative;
  overflow: hidden;

  background: #050e16;
}

.hero:before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      90deg,
      rgba(5, 14, 22, .98) 0%,
      rgba(5, 14, 22, .88) 32%,
      rgba(5, 14, 22, .35) 58%,
      rgba(5, 14, 22, .05) 100%
    ),
    url("../img/hero.png");

  background-position:
    center,
    right center;

  background-size:
    100% 100%,
    auto 100%;

  background-repeat: no-repeat;
}

.hero:after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      0deg,
      rgba(5, 14, 22, .82),
      transparent 45%
    );

  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero .eyebrow {
  margin-bottom: 24px;
}

.hero h1 {
  font-size: clamp(5rem, 15vw, 15rem);
  line-height: .78;

  margin: 0 0 42px;

  letter-spacing: -.075em;
}

.manifesto {
  max-width: 1000px;

  font-size: clamp(1.45rem, 3vw, 3.2rem);
  line-height: 1.02;
  font-weight: 500;

  text-shadow: 0 2px 18px rgba(0, 0, 0, .2);
}

.manifesto span {
  display: block;
}

.manifesto span:last-child {
  color: var(--orange);
}

.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;

  margin-top: 60px;
}

.scroll {
  color: var(--orange);
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

section {
  padding: 12vw 7vw;
  border-top: 1px solid var(--line);
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-end;

  margin-bottom: 8vw;
}

.section-head h2 {
  font-size: clamp(3.5rem, 9vw, 9rem);
  line-height: .82;
  letter-spacing: -.06em;
  margin: 0;
}

.section-head .tag {
  max-width: 280px;
  text-align: right;
}


/* =========================================================
   GENERAL GRID
   ========================================================= */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.intro {
  grid-column: span 7;

  font-size: clamp(1.5rem, 2.6vw, 2.7rem);
  line-height: 1.1;
}

.aside {
  grid-column: 9 / span 4;

  border-top: 1px solid var(--line);
  padding-top: 14px;
}


/* =========================================================
   STATS
   ========================================================= */

.statgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;

  background: var(--line);

  margin-top: 7vw;
}

.stat {
  background: var(--navy);

  padding: 38px 25px;
  min-height: 190px;
}

.num {
  font-size: clamp(3rem, 6vw, 6rem);
  letter-spacing: -.06em;
  line-height: .9;
}

.label {
  margin-top: 22px;

  font-family: "DM Mono", monospace;
  font-size: .68rem;

  color: var(--muted);

  text-transform: uppercase;
}


/* =========================================================
   IMAGE BLOCK
   ========================================================= */

.image {
  min-height: 48vw;

  margin: 8vw 0;

  background:
    linear-gradient(
      135deg,
      #102f43,
      #06121d
    );

  position: relative;
  overflow: hidden;
}

.image:before {
  content: "PHOTOGRAPHY / FIELD IMAGE";

  position: absolute;
  top: 25px;
  left: 25px;

  font: .65rem "DM Mono", monospace;
  color: var(--orange);

  letter-spacing: .08em;
}

.image .placeholder {
  position: absolute;
  inset: auto 25px 25px 25px;

  font-size: clamp(2rem, 5vw, 6rem);
  letter-spacing: -.06em;

  color: rgba(242, 238, 229, .14);
}


/* =========================================================
   CARDS
   ========================================================= */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;

  margin-top: 7vw;
}

.card {
  border: 1px solid var(--line);

  padding: 28px;
  min-height: 300px;

  transition: .25s;
}

.card:hover {
  border-color: var(--orange);
  transform: translateY(-5px);
}

.card h3 {
  font-size: 2rem;

  margin: 40px 0 18px;

  letter-spacing: -.04em;
}

.card p {
  color: #c2c6c3;
  line-height: 1.5;
}


/* =========================================================
   QUOTES
   ========================================================= */

.quote {
  font-size: clamp(2rem, 4.5vw, 5rem);
  line-height: 1;

  letter-spacing: -.05em;

  max-width: 1050px;

  margin: 9vw 0;
}

.quote em {
  color: var(--orange);
  font-style: normal;
}


/* =========================================================
   STANDARD CTA
   ========================================================= */

.cta {
  display: inline-flex;
  gap: 25px;
  align-items: center;

  border: 1px solid var(--orange);
  background: transparent;

  color: var(--orange);

  padding: 16px 22px;

  font-family: "DM Mono", monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;

  margin-top: 25px;

  transition: .2s;
}

.cta:hover {
  padding-right: 32px;

  background: var(--orange);
  color: #071522;
}


/* =========================================================
   THE MAN — HOMEPAGE
   ========================================================= */

.man-home {
  display: grid;
  grid-template-columns: 1fr 1.25fr;

  background: var(--cream);
  color: var(--navy);

  border-top: 0;

  padding: 0;
}

.man-home-photo {
  position: relative;

  min-height: 42vw;

  overflow: hidden;

  background: #0b2230;
}

.man-home-photo img {
  width: 100%;
  height: 100%;
  min-height: 42vw;

  object-fit: cover;
  object-position: center center;

  display: block;

  filter: saturate(.9);
}

.man-home-photo:after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 78%,
      rgba(7, 21, 34, .18) 100%
    );

  pointer-events: none;
}

.man-home-copy {
  padding: 7vw 7vw 7vw 6vw;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.man-home-copy .kicker {
  font-family: "DM Mono", monospace;
  font-size: .72rem;

  letter-spacing: .08em;
  text-transform: uppercase;

  margin-bottom: 1.2rem;
}

.man-home-copy h2 {
  font-size: clamp(3rem, 6vw, 6.5rem);
  line-height: .86;

  letter-spacing: -.06em;

  margin: 0 0 3.5vw;
}

.man-home-story {
  max-width: 650px;

  font-family: "DM Mono", monospace;
  font-size: .95rem;
  line-height: 1.65;
}

.man-home-story p {
  margin: 0 0 1.2rem;
}

.man-home-story p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   SEO INTRO
   ========================================================= */

.seo-intro {
  font-family: "DM Mono", monospace;

  font-size: .68rem;
  line-height: 1.55;

  letter-spacing: .03em;

  color: var(--muted);

  max-width: 520px;

  margin-top: 34px;
}


/* =========================================================
   THE SITE / CHAPTERS
   ========================================================= */

.chapters {
  padding: 8vw 7vw;

  border-top: 1px solid var(--line);
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;

  background: var(--line);

  margin-top: 5vw;
}

.chapter {
  background: var(--navy);

  min-height: 220px;

  padding: 24px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  transition: .2s;
}

.chapter:hover {
  background: var(--navy2);
}

.chapter .k {
  font-family: "DM Mono", monospace;
  font-size: .65rem;

  color: var(--muted);

  letter-spacing: .08em;
}

.chapter h3 {
  font-size: clamp(1.7rem, 2.8vw, 3rem);

  margin: 30px 0 12px;

  letter-spacing: -.05em;
}

.chapter p {
  margin: 0;

  color: #c2c6c3;

  line-height: 1.45;

  max-width: 280px;
}

.chapter .arrow {
  font-size: 1.5rem;

  color: var(--orange);

  margin-top: 25px;
}


/* =========================================================
   HOMEPAGE GLIMPSES
   ========================================================= */

.glimpse-grid {
  padding: 0 !important;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  background: var(--line);

  gap: 1px;

  margin-bottom: clamp(70px, 8vw, 130px);
}

.glimpse {
  position: relative;

  min-height: 18vw;

  overflow: hidden;

  background:
    #081722
    center / cover
    no-repeat;

  display: block;
}

.glimpse:after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(5, 14, 22, .12),
      rgba(5, 14, 22, .88)
    );
}

.glimpse:hover:after {
  background:
    linear-gradient(
      180deg,
      rgba(5, 14, 22, .18),
      rgba(5, 14, 22, .78)
    );
}

.glimpse-overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  padding: 24px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.glimpse h3 {
  font-size: clamp(1.15rem, 1.8vw, 2rem);
  line-height: .95;

  letter-spacing: -.045em;

  margin: 12px 0 18px;
}

.glimpse .arrow {
  font-size: 1.2rem;
  color: var(--orange);
}

.glimpse .mono {
  color: var(--orange);
}

.glimpse-depth{background-image:url("https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=1000&q=82")}
.glimpse-gas{background-image:url("https://images.unsplash.com/photo-1544550285-f813152fb2fd?auto=format&fit=crop&w=1000&q=82")}
.glimpse-ccr{background-image:url("https://images.unsplash.com/photo-1559825481-12a05cc00344?auto=format&fit=crop&w=1000&q=82")}
.glimpse-teacher{background-image:url("https://images.unsplash.com/photo-1500375592092-40eb2168fd21?auto=format&fit=crop&w=1000&q=82")}
.glimpse-fish{background-image:url("https://images.unsplash.com/photo-1544551763-77ef2d0cfc6c?auto=format&fit=crop&w=1000&q=82")}
.glimpse-place{background-image:url("https://images.unsplash.com/photo-1500375592092-40eb2168fd21?auto=format&fit=crop&w=1000&q=82")}


/* =========================================================
   HOMEPAGE PROOF / DEPTH
   ========================================================= */

.home-proof {
  padding: 0;

  background: #0d2435;

  display: grid;
  grid-template-columns: 1fr 1fr;

  min-height: 46vw;

  border-top: 1px solid var(--line);

  overflow: hidden;
}

.proof-photo {
  min-height: 46vw;
  overflow: hidden;
}

.proof-photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  filter: saturate(.8) brightness(.72);
}

.proof-content {
  padding: 7vw;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-proof .big {
  font-size: clamp(7rem, 17vw, 18rem);

  line-height: .72;

  letter-spacing: -.09em;
}

.proof-unit {
  margin-top: 2.5vw;

  font-family: "DM Mono", monospace;
  font-size: clamp(1rem, 1.6vw, 1.5rem);

  letter-spacing: .12em;

  color: var(--orange);
}

.proof-status {
  margin-top: 2.5vw;

  font-family: "DM Mono", monospace;
  font-size: .65rem;

  letter-spacing: .1em;

  color: var(--muted);

  text-transform: uppercase;
}


/* =========================================================
   THE FISH — HOMEPAGE
   ========================================================= */

.fish-home {
  position: relative;

  overflow: hidden;

  background: #06111b;

  border-top: 1px solid var(--line);
}

.fish-home-photo {
  position: relative;

  overflow: hidden;

  background: #06111b;

  height: min(62vw, 720px);
}

.fish-home-photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  display: block;
}

.fish-home-photo:after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(6, 17, 27, .08) 0%,
      rgba(6, 17, 27, 0) 45%,
      rgba(6, 17, 27, .62) 100%
    ),
    linear-gradient(
      90deg,
      rgba(6, 17, 27, .28) 0%,
      transparent 32%,
      transparent 78%,
      rgba(6, 17, 27, .18) 100%
    );
}

.fish-home-copy {
  position: relative;

  padding: 42px 4vw 48px;

  background: #06111b;
}

.fish-home-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.fish-home-kicker {
  font-family: "DM Mono", monospace;
  font-size: .68rem;

  letter-spacing: .18em;

  text-transform: uppercase;

  color: var(--orange);

  margin-bottom: 18px;
}

.fish-home-copy h2 {
  margin: 0 0 28px;

  font-size: clamp(3rem, 7vw, 7rem);
  line-height: .86;

  letter-spacing: -.055em;

  color: var(--cream);
}

.fish-home-text {
  max-width: 620px;

  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.45;

  color: rgba(244, 239, 226, .82);
}

.fish-home-text p {
  margin: 0;
}

.fish-home-text p + p {
  margin-top: 4px;
}

.fish-home-meta {
  margin-top: 30px;

  font-family: "DM Mono", monospace;
  font-size: .65rem;
  line-height: 1.5;

  letter-spacing: .12em;

  text-transform: uppercase;

  color: rgba(244, 239, 226, .42);
}


/* =========================================================
   THE FURTHER — HOMEPAGE CTA
   ========================================================= */

.further-cta {
  position: relative;

  overflow: hidden;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  background:
    url("../img/further.png")
    center center / cover
    no-repeat;

  padding: 54px 4vw 38px;

  min-height: 390px;
}

.further-cta:before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(3, 9, 14, .96) 0%,
      rgba(3, 9, 14, .82) 28%,
      rgba(3, 9, 14, .42) 55%,
      rgba(3, 9, 14, .16) 78%,
      rgba(3, 9, 14, .38) 100%
    ),
    linear-gradient(
      0deg,
      rgba(3, 9, 14, .62) 0%,
      transparent 48%,
      rgba(3, 9, 14, .18) 100%
    );
}

.further-cta-inner {
  position: relative;
  z-index: 1;
}

.further-kicker {
  font-family: "DM Mono", monospace;
  color: var(--orange);

  font-size: .64rem;

  letter-spacing: .09em;

  text-transform: uppercase;

  margin-bottom: 10px;
}

.further-cta h2 {
  font-size: clamp(2.4rem, 4.4vw, 5rem);

  line-height: .92;

  letter-spacing: -.055em;

  margin: 0;

  max-width: 520px;
}

.further-journey {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 36px;

  margin-top: 28px;

  width: 100%;
  max-width: 1000px;
}

.further-step {
  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 110px;

  font-family: "DM Mono", monospace;
  font-size: .58rem;
  line-height: 1.35;

  text-transform: uppercase;

  color: var(--cream);
}

.step-icon {
  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  color: var(--orange);

  font-size: 1.65rem;
  line-height: 1;

  border: 1px solid rgba(201, 126, 22, .75);

  font-family: Arial, sans-serif;
}

.further-step:first-child .step-icon {
  border-radius: 50%;
  font-size: 1.1rem;
}

.further-step:nth-child(2) .step-icon {
  font-size: 1rem;
}

.further-step:nth-child(3) .step-icon {
  border: 0;
  font-size: 1.4rem;
}

.further-step:nth-child(4) .step-icon {
  border-radius: 50%;
  font-size: 1rem;
}

.further-step:nth-child(5) .step-icon {
  border: 0;
  font-size: 2rem;
}

.further-bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 35px;

  margin-top: 24px;
}

.further-line {
  font-family: "DM Mono", monospace;

  font-size: .72rem;

  color: var(--cream);

  letter-spacing: .03em;
}

.further-button {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 50px;

  min-width: 330px;

  padding: 17px 22px;

  border: 1px solid var(--orange);

  color: var(--orange);

  font-family: "DM Mono", monospace;
  font-size: .7rem;

  letter-spacing: .12em;

  text-transform: uppercase;

  transition: .2s;
}

.further-button:hover {
  background: var(--orange);
  color: #06111b;
}

.further-button span {
  font-size: 1.4rem;
  line-height: .5;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
  border-top: 1px solid var(--line);

  padding: 42px 4vw 34px;

  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1.05fr .55fr;

  gap: 34px;

  align-items: start;

  background: #050e16;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-wordmark {
  font-size: clamp(3.4rem, 5vw, 5.5rem);

  line-height: .82;

  letter-spacing: -.07em;
}

.footer-name {
  font-family: "DM Mono", monospace;

  font-size: .9rem;

  letter-spacing: .1em;

  color: var(--orange);

  text-transform: uppercase;
}

.footer-meta {
  font-family: "DM Mono", monospace;

  font-size: .62rem;
  line-height: 1.65;

  letter-spacing: .07em;

  text-transform: uppercase;

  color: var(--muted);

  padding-top: 4px;
}

.footer-quote {
  border-left: 1px solid var(--line);

  padding-left: 28px;

  font-size: clamp(1.05rem, 1.45vw, 1.5rem);

  line-height: 1.15;

  letter-spacing: -.02em;

  max-width: 230px;
}

.footer-nav {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px 22px;

  padding-top: 4px;
}

.footer-nav a,
.footer-contact a {
  font-family: "DM Mono", monospace;

  font-size: .62rem;

  letter-spacing: .07em;

  text-transform: uppercase;

  color: var(--cream);

  opacity: .78;

  transition: .2s;
}

.footer-nav a:hover,
.footer-contact a:hover {
  color: var(--orange);
  opacity: 1;
}

.footer-contact {
  display: flex;

  flex-direction: column;

  gap: 13px;

  padding-top: 4px;

  justify-self: end;
}

.footer-contact .contact-label {
  font-family: "DM Mono", monospace;

  font-size: .62rem;

  letter-spacing: .07em;

  text-transform: uppercase;

  color: var(--muted);

  margin-bottom: 2px;
}

.footer-bottom {
  grid-column: 1 / -1;

  border-top: 1px solid var(--line);

  padding-top: 18px;

  margin-top: 12px;

  display: flex;

  justify-content: space-between;

  gap: 20px;
}

.footer-bottom .mono {
  font-size: .58rem;
}


/* =========================================================
   HOME INTRO
   ========================================================= */

.home-intro {
  padding: 8vw 7vw 7vw;

  background: var(--cream);
  color: var(--navy);
}

.home-intro .lead {
  max-width: 900px;

  font-size: clamp(2rem, 4vw, 4.5rem);

  line-height: .98;

  letter-spacing: -.05em;
}

.home-intro .small {
  margin-top: 2.5vw;

  max-width: 560px;

  font-family: "DM Mono", monospace;

  font-size: .75rem;
  line-height: 1.6;

  text-transform: uppercase;

  letter-spacing: .06em;
}


/* =========================================================
   GENERIC MAN PHOTO
   ========================================================= */

.man-photo {
  margin: 5vw 0 0;

  min-height: 42vw;

  overflow: hidden;

  background: #0b2230;
}

.man-photo img {
  width: 100%;
  height: 100%;

  min-height: 42vw;

  object-fit: cover;
  object-position: center 48%;

  display: block;

  filter: saturate(.9);
}


/* =========================================================
   RESPONSIVE — 1000px
   ========================================================= */

@media (max-width: 1000px) {

  .further-journey {
    gap: 20px;
  }

  .further-step {
    min-width: 0;
    flex: 1;
  }

  .further-button {
    min-width: 280px;
  }

}


/* =========================================================
   RESPONSIVE — 800px
   ========================================================= */

@media (max-width: 800px) {

  nav .links {
    display: none;
  }

  .hero {
    padding-left: 6vw;
    padding-right: 6vw;
  }

  .grid {
    display: block;
  }

  .aside {
    margin-top: 50px;
  }

  .section-head {
    display: block;
  }

  .section-head .tag {
    text-align: left;
    margin-top: 25px;
  }

  .statgrid,
  .cards {
    grid-template-columns: 1fr 1fr;
  }

  .image {
    min-height: 70vw;
  }

  .chapter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .glimpse-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .glimpse {
    min-height: 40vw;
  }

  .home-proof {
    grid-template-columns: 1fr;
  }

  .proof-photo {
    min-height: 60vw;
  }

  .proof-content {
    padding: 10vw 7vw;
  }

  .proof-unit,
  .proof-status {
    margin-top: 5vw;
  }

  .man-home {
    grid-template-columns: 1fr;
  }

  .man-home-photo,
  .man-home-photo img {
    min-height: 70vw;
  }

  .man-home-copy {
    padding: 10vw 6vw;
  }

  .further-cta {
    padding: 46px 6vw 32px;
  }

  .further-journey {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px 24px;
  }

  .further-step {
    flex: none;
  }

  .further-bottom {
    display: block;
  }

  .further-button {
    margin-top: 20px;

    min-width: 0;

    width: 100%;
  }

  footer {
    display: grid;

    grid-template-columns: 1fr 1fr;

    padding: 45px 6vw 28px;
  }

  .footer-contact {
    justify-self: start;
  }

  .footer-quote {
    border-left: 0;
    border-top: 1px solid var(--line);

    padding: 20px 0 0;

    max-width: none;
  }

  .footer-bottom {
    grid-column: 1 / -1;
  }

}


/* =========================================================
   RESPONSIVE — 700px
   ========================================================= */

@media (max-width: 700px) {

  .fish-home-photo {
    height: 78vw;
  }

  .fish-home-copy {
    padding: 34px 6vw 40px;
  }

}


/* =========================================================
   RESPONSIVE — 500px
   ========================================================= */

@media (max-width: 500px) {

  .hero h1 {
    font-size: 28vw;
  }

  .manifesto {
    font-size: 1.35rem;
  }

  .statgrid,
  .cards {
    grid-template-columns: 1fr;
  }

  .chapter-grid {
    grid-template-columns: 1fr;
  }

  .glimpse-grid {
    grid-template-columns: 1fr;
  }

  .glimpse {
    min-height: 64vw;
  }

  .further-cta h2 {
    font-size: 12vw;
  }

  .further-journey {
    grid-template-columns: 1fr;
  }

  .further-step {
    font-size: .62rem;
  }

  .further-button {
    gap: 20px;
  }

  footer {
    display: block;
  }

  .footer-brand,
  .footer-meta,
  .footer-quote,
  .footer-nav,
  .footer-contact {
    margin-bottom: 34px;
  }

  .footer-bottom {
    margin-top: 0;
  }

}