.shell {
  display: grid;
  grid-template-areas:
    "masthead"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.shell__masthead {
  grid-area: masthead;
}

.shell__main {
  grid-area: main;
  
  padding-top: 101px;
}

.shell__content {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: min-content;
}

.shell__footer {
  grid-area: footer;
}


.wrapper {
  width: min(1180px, 92vw);
  margin-inline: auto;
}

.wrapper--narrow {
  width: min(760px, 90vw);
}

.wrapper--wide {
  width: min(1320px, 95vw);
}


.band {
  padding: 6.4vh 0 6.4vh;
  position: relative;
}

.band--tint {
  background: #f0fdfa;
}

.band--deep {
  background: #042f2e;
  color: #cbe9e4;
}

.band--deep h1,
.band--deep h2,
.band--deep h3,
.band--deep h4 {
  color: #ffffff;
}

.band--deep p {
  color: #a7d3cd;
}

.band--tight {
  padding: 3.4vh 0;
}

.band__head {
  max-width: 62ch;
  margin-bottom: 3.2vh;
}

.band__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0d9488;
  margin-bottom: 0.9rem;
}

.band--deep .band__eyebrow {
  color: #5eead4;
}


.duo {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.4vw;
  align-items: center;
}

.band:nth-of-type(odd) .duo__copy {
  order: 1;
}

.band:nth-of-type(odd) .duo__visual {
  order: 2;
}

.band:nth-of-type(even) .duo__copy {
  order: 2;
}

.band:nth-of-type(even) .duo__visual {
  order: 1;
}


.mesh {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1.6vw;
}

.mesh--pair {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.mesh--quad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2vw;
}


.prose-cols {
  columns: 3;
  column-gap: 2rem;
  column-rule: 1px solid #cfe9e5;
  font-size: 0.95rem;
}

.prose-cols p {
  margin-bottom: 0.5rem;
  break-inside: avoid;
}

.prose-cols--duo {
  columns: 2;
}


.rule--dots {
  height: 60px;
  background-image: radial-gradient(currentColor 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  color: #b6ded8;
  opacity: 0.8;
}

.rule--dots-deep {
  color: #10504c;
  opacity: 0.9;
}


.stack > * + * {
  margin-top: 1.1rem;
}

.stack--tight > * + * {
  margin-top: 0.55rem;
}



@media (max-width: 1024px) {
  .wrapper {
    width: 93vw;
  }

  .duo {
    grid-template-columns: 1fr;
    gap: 3.2vh;
  }

  .band:nth-of-type(odd) .duo__visual,
  .band:nth-of-type(even) .duo__visual {
    order: 1;
  }

  .band:nth-of-type(odd) .duo__copy,
  .band:nth-of-type(even) .duo__copy {
    order: 2;
  }

  .mesh--quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.2vw;
  }

  .prose-cols {
    columns: 2;
  }
}

@media (max-width: 768px) {
  
  .band {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8vh 0;
  }

  .band--tight,
  .band--flow {
    min-height: 0;
    display: block;
    padding: 5vh 0;
  }

  .mesh,
  .mesh--quad,
  .mesh--pair {
    grid-template-columns: 1fr;
    gap: 3vh;
  }

  .prose-cols,
  .prose-cols--duo {
    columns: 1;
    column-rule: 0;
  }

  .rule--dots {
    height: 42px;
  }
}