:root {
  color-scheme: light;
  --ink: #254351;
  --muted: #536c73;
  --line: rgb(37 67 81 / .25);
  --paper: #e8e9df;
  --brass: #e5d49a;
  --page-gutter: clamp(28px, 5.4vw, 88px);
  --depth-progress: 0%;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #e8e9df;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body[data-chapter="1"], body[data-chapter="2"], body[data-chapter="3"], body[data-chapter="4"] {
  --ink: #e5e9dc;
  --muted: #bccdca;
  --line: rgb(229 233 220 / .3);
  color-scheme: dark;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
  font: inherit;
  cursor: pointer;
}
a, button {
  -webkit-tap-highlight-color: transparent;
}
button:disabled {
  cursor: default;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}
::selection {
  color: #102e43;
  background: #e5d49a;
}
.skip-link {
  position: fixed;
  z-index: 40;
  top: 16px;
  left: 24px;
  padding: 14px 18px;
  background: #e8e9df;
  color: #254351;
  transform: translateY(-170%);
}
.skip-link:focus {
  transform: translateY(0);
}
.site-header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  padding: 35px var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 13px;
  transition: color 400ms;
}
.collection-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  white-space: nowrap;
}
.collection-link svg, .logbook-trigger svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}
.collection-word {
  opacity: .65;
}
.header-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font: italic 18px Georgia, 'Times New Roman', serif;
  opacity: 0;
  transition: opacity 400ms;
}
body:not([data-chapter="0"]) .header-title {
  opacity: .8;
}
.logbook-trigger {
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 7px 0;
  font-size: 13px;
}
.js .logbook-trigger {
  display: inline-flex;
}
.logbook-trigger:hover, .collection-link:hover {
  opacity: .7;
}
.stage {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  background: #e8e9df;
  pointer-events: none;
}
.ocean {
  display: block;
  width: 100%;
  height: 100%;
}
.ocean-scene {
  opacity: 0;
  transition: opacity 800ms ease;
}
.scene-surface {
  opacity: 1;
}
body[data-chapter="1"] .scene-sunlit, body[data-chapter="2"] .scene-twilight, body[data-chapter="3"] .scene-midnight, body[data-chapter="4"] .scene-floor {
  opacity: 1;
}
.diving-bell {
  will-change: transform;
}
.scene-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(9 29 42 / .3), transparent 65%);
  opacity: 0;
  transition: opacity 800ms;
}
body:not([data-chapter="0"]) .scene-vignette {
  opacity: 1;
}
.chapter {
  position: relative;
  min-height: 100svh;
  height: 100vh;
  padding: clamp(126px, 14vh, 160px) var(--page-gutter) 140px;
  display: flex;
  align-items: flex-start;
  scroll-margin-top: 0;
}
.chapter-copy {
  max-width: 650px;
}
.chapter-kicker {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 27px;
  font-size: 13px;
  letter-spacing: .015em;
}
.chapter-kicker > span {
  font-size: 11px;
  opacity: .65;
  font-variant-numeric: tabular-nums;
}
h1, h2, p {
  margin-top: 0;
}
h1, .chapter h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -.064em;
}
h1 {
  margin-bottom: 24px;
  font-size: clamp(88px, 10.1vw, 154px);
  line-height: .89;
}
.chapter h2 {
  margin-bottom: 30px;
  font-size: clamp(66px, 6.4vw, 102px);
  line-height: .98;
}
.chapter-intro {
  margin-bottom: 25px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.015em;
}
.begin-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  padding: 13px 17px;
  border: 1px solid rgb(37 67 81 / .45);
  background: #e8e9df;
  color: #254351;
  font-size: 13px;
  transition: background 180ms;
}
.begin-link > span {
  font-size: 24px;
  line-height: 20px;
}
.begin-link:hover {
  background: #e5d49a;
}
.surface-footnote {
  position: absolute;
  left: var(--page-gutter);
  bottom: 138px;
  margin: 0;
  color: #d0dcd4;
  font-size: 12px;
  line-height: 1.6;
}
.chapter-sunlit, .chapter-twilight, .chapter-midnight, .chapter-floor {
  color: #e5e9dc;
}
.chapter-body {
  max-width: 35ch;
  margin-bottom: 17px;
  font-size: 17px;
  line-height: 1.6;
  color: #d0dcd5;
  letter-spacing: -.012em;
}
.field-mark {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 30px;
  color: #a9c2c2;
  font-size: 11px;
}
.field-mark > span {
  color: #e5d49a;
  font-size: 20px;
}
.ending-links {
  display: flex;
  flex-wrap: wrap;
  gap: 17px 26px;
  margin-top: 28px;
}
.ending-links a {
  display: inline-flex;
  gap: 15px;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid #728a8d;
  font-size: 12px;
}
.ending-links a:hover {
  color: #e5d49a;
  border-color: #e5d49a;
}
.chapter-nav {
  position: fixed;
  z-index: 8;
  top: 50%;
  right: var(--page-gutter);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
}
.chapter-nav a {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 36px;
  height: 36px;
}
.chapter-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  transition: opacity 200ms, transform 200ms;
}
.chapter-nav a[aria-current] .chapter-dot {
  opacity: 1;
  transform: scale(1.2);
}
.chapter-nav a[aria-current] .chapter-dot::after {
  position: absolute;
  content: '';
  width: 13px;
  height: 13px;
  border: 1px solid currentColor;
  border-radius: 50%;
  left: -5px;
  top: -5px;
}
.chapter-nav-label {
  position: absolute;
  right: 27px;
  padding: 6px 9px;
  white-space: nowrap;
  font-size: 11px;
  background: #e8e9df;
  color: #254351;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms;
}
body:not([data-chapter="0"]) .chapter-nav-label {
  background: #16394a;
  color: #e5e9dc;
}
.chapter-nav a:focus-visible .chapter-nav-label {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .chapter-nav a:hover .chapter-nav-label {
    opacity: 1;
  }
}
.instruments {
  position: fixed;
  z-index: 7;
  left: var(--page-gutter);
  right: var(--page-gutter);
  bottom: 35px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: #dce4d4;
  pointer-events: none;
}
.chapter-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  pointer-events: auto;
}
.chapter-controls button {
  width: 38px;
  height: 38px;
  border: 1px solid rgb(220 228 212 / .5);
  border-radius: 50%;
  background: rgb(26 58 74 / .3);
  font-size: 19px;
  line-height: 1;
}
.chapter-controls button:hover:not(:disabled) {
  color: #203e4a;
  background: #e5d49a;
  border-color: #e5d49a;
}
.chapter-controls button:disabled {
  opacity: .3;
}
.chapter-position {
  margin-left: 13px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.of-five {
  margin-left: 5px;
  opacity: .5;
}
.depth-instrument {
  display: flex;
  align-items: flex-end;
  gap: 25px;
}
.depth-copy {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding-bottom: 1px;
}
.depth-label {
  max-width: 65px;
  font-size: 10px;
  line-height: 1.45;
  color: #bfd0ca;
  padding-bottom: 3px;
}
.depth-reading {
  min-width: 117px;
  text-align: right;
  white-space: nowrap;
  font: 42px/.9 Georgia, 'Times New Roman', serif;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.05em;
}
.depth-unit {
  margin-left: 6px;
  font: 11px Arial, sans-serif;
  letter-spacing: 0;
}
.depth-track {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 18px;
  height: 105px;
  border-right: 1px solid #93a8a8;
}
.depth-track > i {
  width: 6px;
  border-top: 1px solid #93a8a8;
}
.depth-track > i:nth-of-type(1), .depth-track > i:nth-of-type(5), .depth-track > i:nth-of-type(9) {
  width: 11px;
}
.depth-progress {
  position: absolute;
  top: var(--depth-progress);
  right: -5px;
  width: 9px;
  height: 9px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #e5d49a;
  box-shadow: 0 0 0 5px rgb(229 212 154 / .1);
}
.logbook {
  width: min(760px, calc(100% - 48px));
  max-height: calc(100svh - 60px);
  border: 0;
  padding: 32px 44px;
  color: #254351;
  background: #e8e9df;
  box-shadow: 0 24px 100px rgb(0 0 0 / .3);
}
.logbook::backdrop {
  background: rgb(5 22 33 / .75);
  backdrop-filter: blur(5px);
}
.logbook-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #60777b;
  font-size: 11px;
}
.close-log {
  width: 35px;
  height: 35px;
  padding: 0;
  border: 1px solid #bcc6be;
  background: none;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}
.close-log:hover {
  background: #d8dfd1;
}
.logbook h2 {
  margin: 22px 0 16px;
  font: 58px/1 Georgia, 'Times New Roman', serif;
  letter-spacing: -.05em;
}
.logbook-description {
  max-width: 58ch;
  margin-bottom: 28px;
  font-size: 13px;
  line-height: 1.65;
  color: #60757a;
}
.logbook-entries {
  list-style: none;
  padding: 0;
  margin: 0;
}
.logbook-entries li {
  border-top: 1px solid #bdc8c1;
}
.logbook-entries a {
  display: grid;
  grid-template-columns: 64px 1fr 14px;
  gap: 15px;
  padding: 18px 0;
}
.logbook-entries a:hover strong {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.entry-depth {
  padding-top: 3px;
  font-size: 11px;
  color: #60777b;
}
.logbook-entries strong {
  display: block;
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 6px;
}
.logbook-entries em {
  display: block;
  font: italic 15px/1.4 Georgia, 'Times New Roman', serif;
  color: #60757a;
}
.logbook-colophon {
  padding-top: 22px;
  border-top: 1px solid #bdc8c1;
  margin: 0;
  font-size: 10px;
  color: #60777b;
}
.no-script-note {
  position: absolute;
  top: 75px;
  left: var(--page-gutter);
  max-width: 50ch;
  font-size: 12px;
}
body:not(.js) .instruments {
  display: none;
}
body:not(.js) .chapter:not(.chapter-surface) {
  background: rgb(16 46 67 / .9);
}
@media (min-width: 1600px) {
  .chapter {
    padding-top: 16vh;
  }
  .chapter-copy {
    margin-left: 3vw;
  }
  .surface-footnote {
    left: calc(var(--page-gutter) + 3vw);
  }
}
@media (max-height: 780px) and (min-width: 761px) {
  .chapter {
    padding-top: 105px;
  }
  h1 {
    font-size: min(10vw, 126px);
  }
  .chapter h2 {
    font-size: min(6vw, 82px);
    margin-bottom: 22px;
  }
  .chapter-kicker {
    margin-bottom: 20px;
  }
  .chapter-body {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .field-mark {
    margin-top: 20px;
  }
  .surface-footnote {
    bottom: 105px;
  }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .chapter h2 {
    font-size: 75px;
  }
  .chapter-body {
    max-width: 30ch;
  }
  .scene-vignette {
    background: linear-gradient(90deg, rgb(9 29 42 / .45), transparent 85%);
  }
  .chapter-copy {
    max-width: 55%;
  }
}
@media (max-width: 760px) {
  :root {
    --page-gutter: 25px;
  }
  .site-header {
    padding-top: 24px;
    padding-bottom: 24px;
    font-size: 11px;
    gap: 15px;
  }
  .collection-link {
    gap: 8px;
  }
  .collection-link svg {
    width: 16px;
  }
  .logbook-trigger {
    font-size: 11px;
    gap: 5px;
  }
  .logbook-trigger svg {
    width: 17px;
  }
  .header-title {
    display: none;
  }
  .chapter {
    padding-top: clamp(114px, 15vh, 150px);
    padding-bottom: 120px;
  }
  .chapter-copy {
    max-width: calc(100vw - 75px);
  }
  .chapter-kicker {
    font-size: 11px;
    gap: 12px;
    margin-bottom: 22px;
  }
  .chapter-kicker > span {
    font-size: 10px;
  }
  h1 {
    font-size: clamp(80px, 22.6vw, 135px);
    margin-bottom: 22px;
    letter-spacing: -.07em;
  }
  .chapter-intro {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 20px;
  }
  .begin-link {
    padding: 12px 14px;
    font-size: 11px;
    gap: 25px;
  }
  .begin-link > span {
    font-size: 21px;
  }
  .surface-footnote {
    bottom: 115px;
    max-width: 220px;
    font-size: 10px;
    line-height: 1.55;
  }
  .chapter h2 {
    font-size: clamp(52px, 13.8vw, 82px);
    line-height: 1.02;
    letter-spacing: -.06em;
    margin-bottom: 24px;
  }
  .chapter-body {
    max-width: 29ch;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
  }
  .field-mark {
    max-width: 26ch;
    font-size: 10px;
    line-height: 1.5;
    margin-top: 22px;
    gap: 9px;
  }
  .scene-vignette {
    background: linear-gradient(90deg, rgb(7 28 40 / .45), rgb(7 28 40 / .22) 70%, transparent);
  }
  .scene-midnight > use:nth-of-type(1) {
    transform: translate(85px, 440px);
  }
  .scene-midnight > use:nth-of-type(2), .scene-midnight > use:nth-of-type(3) {
    display: none;
  }
  .chapter-nav {
    right: 18px;
  }
  .chapter-nav a {
    height: 34px;
    min-width: 23px;
  }
  .chapter-nav-label {
    right: 22px;
    font-size: 10px;
  }
  .chapter-dot {
    width: 4px;
    height: 4px;
  }
  .chapter-nav a[aria-current] .chapter-dot::after {
    width: 12px;
    height: 12px;
  }
  .instruments {
    bottom: 27px;
  }
  .chapter-controls {
    gap: 7px;
  }
  .chapter-controls button {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
  .chapter-position {
    margin-left: 6px;
    font-size: 10px;
  }
  .of-five {
    margin-left: 2px;
  }
  .depth-instrument {
    gap: 14px;
  }
  .depth-copy {
    display: block;
  }
  .depth-label {
    display: block;
    max-width: none;
    font-size: 8px;
    text-align: right;
    margin-bottom: 9px;
  }
  .depth-reading {
    display: block;
    min-width: 83px;
    font-size: 33px;
  }
  .depth-unit {
    font-size: 10px;
  }
  .depth-track {
    height: 75px;
    width: 13px;
  }
  .ending-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-top: 23px;
  }
  .ending-links a {
    font-size: 11px;
  }
  .logbook {
    padding: 24px;
    width: calc(100% - 28px);
    max-height: calc(100svh - 28px);
  }
  .logbook h2 {
    font-size: 47px;
  }
  .logbook-description {
    font-size: 12px;
  }
  .logbook-entries a {
    grid-template-columns: 48px 1fr 10px;
    gap: 10px;
  }
  .entry-depth {
    font-size: 10px;
  }
  .logbook-entries em {
    font-size: 14px;
  }
}
@media (max-width: 760px) and (max-height: 720px) {
  .chapter {
    padding-top: 96px;
    min-height: 700px;
    height: 100vh;
  }
  .chapter h2 {
    font-size: 50px;
  }
  h1 {
    font-size: 77px;
  }
  .chapter-body {
    font-size: 13px;
  }
  .field-mark {
    display: none;
  }
  .surface-footnote {
    bottom: 122px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .diving-bell {
    will-change: auto;
  }
}
@media print {
  body {
    background: white;
    color: #254351;
  }
  .stage, .site-header, .instruments, .chapter-nav, .begin-link, .ending-links, .field-mark {
    display: none;
  }
  .chapter {
    min-height: 0;
    height: auto;
    display: block;
    padding: 40px 0;
    break-inside: avoid;
    color: #254351;
  }
  h1, .chapter h2 {
    font-size: 50px;
  }
  .chapter-body {
    color: #254351;
    max-width: 60ch;
  }
  .surface-footnote {
    position: static;
    color: #536c73;
    margin-top: 30px;
  }
}