@font-face {
  font-family: 'Source Serif 4';
  src: url('assets/fonts/source-serif-4-latin-standard-normal.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/instrument-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Most frequent RGB value sampled from the source plate's outer 20px. */
  --paper: #fefdf9;
  --ink: #101114;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Instrument Sans', Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p, h1, figure { margin: 0; }
/* Shared box edge; text indents below compensate for each initial glyph bearing. */
.masthead { padding: 39px 3.125vw 0; }
.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 3.54vw, 72px);
  line-height: 1;
  letter-spacing: 0;
  text-indent: -.04em;
  font-variation-settings: "opsz" 60;
}
.landing { position: relative; min-height: calc(100svh - 97px); }
.introduction {
  position: relative;
  z-index: 1;
  width: 32%;
  margin-inline-start: 3.125%;
  padding-top: 55px;
}
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 4.883vw, 95px);
  line-height: 1.05;
  letter-spacing: -.015em;
  text-indent: -.04em;
  font-variation-settings: "opsz" 60;
  white-space: nowrap;
}
.description {
  max-width: 475px;
  text-indent: -.036em;
  margin-inline-start: 0;
  margin-top: 23px;
  font-size: clamp(20px, 1.66vw, 32px);
  line-height: 1.375;
}
form { position: relative; width: 87.5%; margin-top: 82px; margin-inline-start: 0; }
label { display: block; font-size: 17.5px; line-height: 1; text-indent: -.086em; }
input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 16px/20px var(--sans);
}

button {
  display: block;
  position: relative;
  margin-top: 25px;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 22px/1.25 var(--sans);
  text-indent: -.086em;
  text-decoration: none;
  cursor: pointer;
}
/* Keep the underline on the shared edge while offsetting the N's side bearing. */
button::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 10px;
  width: 100%;
  border-bottom: 1px solid currentColor;
}
:focus-visible { outline: 2px solid #154b42; outline-offset: 5px; }
/* The same full-width rule thickens; fixed border-box height prevents a jump. */
input:focus { border-bottom-width: 2px; }
input:focus-visible { outline: none; }
/* This line enters normal flow only when populated; its height is the only shift. */
.form-message {
  font-size: 14px;
  line-height: 1.35;
}
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.privacy { margin-top: 12px; max-width: 38ch; font-size: 14px; line-height: 1.35; }
.availability { text-indent: -.05em; margin-top: 33px; font-size: 18px; line-height: 1.4; }
.no-script { max-width: 30ch; margin-top: 12px; font-size: 14px; }
.aquascape {
  position: absolute;
  top: -2px;
  right: 0;
  width: 69.6%;
}
.figure-stage { position: relative; aspect-ratio: 1536 / 1130; }
picture { position: absolute; top: 6.725664%; width: 100%; }
img { display: block; width: 100%; height: auto; filter: saturate(.9); }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leader path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.25px;
  vector-effect: non-scaling-stroke;
}
.leader circle { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.figure-label, .band-number {
  position: absolute;
  font-family: var(--serif);
  font-weight: 400;
  white-space: nowrap;
  line-height: 1;
}
.figure-label { font-size: clamp(14px, 1.302vw, 25px); }
.light-label { left: 42.25%; top: 4.7%; }
.flow-label { left: 10.2%; top: 32.5%; }
.shade-label { left: 11.9%; top: 79.5%; }
.dead-label { left: 55.86%; top: 94.6%; }
.band-number { font-size: clamp(11px, 1.042vw, 20px); transform: translate(-50%, -50%); }
.band-80 { left: 46.22%; top: 26.46%; }
.band-60 { left: 54.04%; top: 39.38%; }
.band-40 { left: 67.06%; top: 46.2%; }
.band-20 { left: 74.22%; top: 52.21%; }
figcaption {
  position: absolute;
  left: 5.34%;
  top: 92%;
  font-family: var(--serif);
  font-size: clamp(14px, 1.237vw, 23px);
  line-height: 1.3;
}
@media (max-width: 1100px) and (min-width: 761px) {
  .masthead { padding-top: 32px; }
  .introduction { padding-top: 48px; }
  h1 { font-size: 4.883vw; }
  .description { font-size: 1.8vw; }
  form { margin-top: 58px; }
  .aquascape { top: 10px; }
  label, .availability { font-size: 16px; }
  button { font-size: 20px; }
}
@media (max-width: 760px) {
  .masthead { padding: 28px 16px 0; }
  .wordmark { font-size: 22px; line-height: 42px; text-indent: -.1em; }
  .landing { min-height: 0; }
  .introduction { width: auto; margin: 0 16px; padding-top: 41px; }
  h1 { font-size: clamp(43px, 11.8vw, 70px); letter-spacing: -.015em; }
  .description { max-width: 475px; margin-inline-start: 0; margin-top: 18px; font-size: 20px; line-height: 1.4; }
  form { width: 100%; margin-inline-start: 0; max-width: 430px; margin-top: 39px; }
  label { font-size: 16px; }
  input { font-size: 16px; }
  button { font-size: 20px; margin-top: 17px; }
  .availability { margin-top: 30px; font-size: 16px; }
  .aquascape { position: relative; top: auto; right: auto; width: auto; margin: 33px 16px 30px; }
  .figure-label { font-size: clamp(11px, 2.9vw, 18px); }
  .flow-label { left: 7%; top: 32.5%; }
  .shade-label { left: 9%; top: 79.5%; }
  .band-number { font-size: clamp(11px, 2.8vw, 16px); }
  figcaption { font-size: 12px; top: 99%; }
  .leader path { stroke-width: 1px; }
  .leader circle { r: 6px; stroke-width: 1px; }
}

/* A quiet continuation of the existing small-text treatment. */
.quiet-links { margin-top: 18px; font-size: 14px; line-height: 1.35; }
.quiet-links a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.quiet-links a { white-space: nowrap; }
.link-separator { display: inline-block; margin-inline: .35em; }