:root {
  --water: #16324a;
  --pale: #d7e4ee;
  --ink: #14202b;
  --concrete: #8d97a1;
  --paper: #f4f7f8;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body {
  font-family: "Gill Sans", "Trebuchet MS", sans-serif;
  padding-right: 132px;
}
.waterline {
  background: linear-gradient(#16324a 0 58%, #8fb4c9 58% 100%);
  color: white;
  min-height: 34vh;
  display: grid;
  grid-template-columns: 1fr 160px;
  align-items: end;
  padding: 28px 6vw 18px;
  position: relative;
}
.waterline h1 { margin: 0 0 8px; font-weight: 600; font-size: clamp(28px, 4vw, 44px); }
.waterline p { margin: 0; max-width: 46ch; color: #e7f1f6; }
.buoy {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #f4f7f8;
  justify-self: end;
  margin-bottom: -48px;
}
.strata {
  position: fixed;
  top: 0;
  right: 0;
  width: 132px;
  height: 100vh;
  background: #0e2436;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.strata a {
  color: #c5d5e2;
  text-decoration: none;
  padding: 16px 14px;
  border-top: 1px solid #234056;
  font-size: 14px;
}
.strata a.on { background: #8fb4c9; color: #0e2436; }
article { padding: 64px 6vw 40px; max-width: 820px; }
article p { font-size: 18px; line-height: 1.6; }
.level {
  margin: 8px -6vw 8px;
  background: var(--pale);
  padding: 16px 6vw;
  font-size: 20px;
  line-height: 1.4;
}
figure.break { margin: 20px 0 20px -4vw; }
figure.break img { width: min(100%, 760px); height: 380px; object-fit: cover; display: block; }
figure.break figcaption { font-size: 14px; color: #4d5d6b; margin-top: 8px; max-width: 62ch; }
.gauge { width: min(100%, 640px); height: 140px; display: block; background: white; }
footer.shore { padding: 10px 6vw 36px; color: #4d5d6b; font-size: 14px; }
@media (max-width: 800px) {
  body { padding-right: 0; padding-bottom: 64px; }
  .strata {
    top: auto; bottom: 0; height: 64px; width: 100%;
    flex-direction: row;
  }
  .strata a { flex: 1; border-top: 0; border-left: 1px solid #234056; padding: 10px 6px; font-size: 12px; }
  .waterline { grid-template-columns: 1fr; }
  .buoy { margin: 12px 0 -28px; width: 96px; height: 96px; }
  figure.break { margin-left: 0; }
  figure.break img { height: 220px; }
}