@font-face {
  font-family: Atlas Inter;
  src: url(../../fonts/inter-cyrillic.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0400-052F;
}
@font-face {
  font-family: Atlas Inter;
  src: url(../../fonts/inter-latin.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-024F,U+2000-206F,U+20BD,U+2190-21FF;
}
@font-face {
  font-family: Atlas Serif;
  src: url(../relay/cormorant-italic.ttf) format("truetype");
  font-style: italic;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --dark: #04171b;
  --paper: #e9ebe0;
  --mint: #bde7c8;
  --line: #354a4c;
  --sans: "Atlas Inter", "Arial", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --side: clamp(18px,5vw,200px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--dark);
  color: var(--paper);
  font: 400 clamp(16px,1.11vw,36px)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  --position: 30%;
}
body[data-depth="50"] { --position: 5%; }
body[data-depth="1000"] { --position: 100%; }
h1,h2,h3,p,dl,dd,figure { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #f4b874; outline-offset: 4px; }
.frame { padding-inline: var(--side); margin-inline: auto; max-width: 3980px; }
.sr-only,.skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; z-index: 5; top: 6px; left: 8px; background: var(--paper); color: var(--dark); padding: .6em 1em; }
.mast {
  position: relative;
  z-index: 2;
  background: #041418;
  border-bottom: 1px solid #52676866;
}
.mast-inner { display: flex; align-items: center; justify-content: space-between; min-height: clamp(65px,5.4vw,176px); gap: 1.5em; }
.brand,.mast nav,.back { display: inline-flex; align-items: center; }
.brand { min-height: 44px; gap: .37em; font-size: clamp(27px,2.2vw,82px); font-weight: 650; letter-spacing: -.047em; }
.porthole {
  position: relative;
  width: 1.07em;
  height: 1.07em;
  border-radius: 50%;
  background: var(--mint);
  overflow: hidden;
}
.porthole::before,.porthole::after { content: ""; position: absolute; border-radius: 50%; border: .055em solid #0a2c31; }
.porthole::before { inset: 26% 13% -24%; box-shadow: 0 0 0 .09em var(--mint),0 0 0 .14em #0a2c31; }
.porthole::after { inset: 48% 29% -14%; }
.mast nav { gap: clamp(24px,3vw,118px); color: #d1dcd6; font-size: .92em; }
.mast a:not(.brand),footer a { display: inline-flex; align-items: center; min-height: 44px; }
.mast nav a:hover,.back:hover,footer a:hover { color: var(--mint); text-decoration: underline; text-underline-offset: .3em; }
.back { font: 600 clamp(12px,.8vw,26px)/1.45 var(--mono); letter-spacing: .045em; gap: .5em; }
.back span { font-size: 1.4em; color: var(--mint); }
.descent { position: relative; isolation: isolate; overflow: hidden; background: #03161f; }
.sea,.sea > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.sea { z-index: -1; overflow: hidden; pointer-events: none; }
.sea img { object-fit: cover; object-position: 64% 49%; }
@media (min-resolution: 1.5dppx) { .sea { --art-density: 2; } }
@media (min-resolution: 2.5dppx) { .sea { --art-density: 3; } }
@media (min-width: 1673px), (min-width: 836px) and (min-resolution: 1.5dppx), (min-width: 721px) and (min-resolution: 2.5dppx) {
  .sea { background: linear-gradient(130deg,#041925 8%,#052536 57%,#02141e); }
  .sea img {
    inset: 50% 2% auto auto;
    translate: 0 -50%;
    width: min(78%,calc(1630px / var(--art-density, 1)));
    height: auto;
    mask-image: linear-gradient(90deg,transparent,#000 18%,#000 90%,transparent),
                linear-gradient(0deg,transparent,#000 12%,#000 80%,transparent);
    mask-composite: intersect;
  }
}
.daylight { opacity: 0; background: linear-gradient(151deg, #6cafac8c, #248ea04c 45%, transparent 76%); mix-blend-mode: screen; }
.midnight { opacity: 0; background: linear-gradient(109deg,#010911ad, #02102582 52%, #12103d21 79%); }
.scrim { background: linear-gradient(90deg,#011419a6,#02101c25 42%,transparent 65%),linear-gradient(0deg,#03171b8a 0%,transparent 26%); }
body[data-depth="50"] .daylight { opacity: 1; }
body[data-depth="1000"] .midnight { opacity: 1; }
body[data-depth="50"] .sea img { filter: brightness(1.13) saturate(.9); }
body[data-depth="1000"] .sea img { filter: brightness(.78) saturate(.93); transform: scale(1.025); }
.scene-frame {
  position: relative;
  min-height: clamp(480px,min(51vw,76svh),1740px);
  display: flex;
  align-items: center;
  padding-block: clamp(58px,7vw,230px);
}
.scene-copy { position: relative; max-width: 47%; }
.eyebrow,.caption { font: 500 clamp(12px,.85vw,27px)/1.4 var(--mono); letter-spacing: .065em; }
.eyebrow { display: flex; align-items: center; gap: .8em; text-transform: uppercase; color: var(--mint); }
.eyebrow i { width: 1.15em; height: .45em; background: linear-gradient(90deg,currentColor 22%,transparent 22% 39%,currentColor 39% 60%,transparent 60% 78%,currentColor 78%); transform: skew(-18deg); }
h1 { margin-block: .22em .18em; font-size: clamp(80px,8.6vw,334px); font-weight: 510; letter-spacing: -.063em; line-height: .88; }
h1 em { font-family: "Atlas Serif",Georgia,serif; font-weight: 400; font-size: 1.18em; letter-spacing: -.045em; color: #ceead2; }
.lede { max-width: 31ch; color: #d3e2e2; line-height: 1.5; font-size: clamp(16px,1.32vw,45px); }
.sounder { position: absolute; right: clamp(13px,1.9vw,64px); height: 40%; top: 26%; display: grid; grid-template-rows: auto 1fr auto; justify-items: end; color: #d3e7e8d9; font: 500 clamp(10px,.74vw,21px)/1.45 var(--mono); gap: .6em; text-shadow: 0 1px 5px #02141b; }
.rule { position: relative; width: 1.15em; border-right: 1px solid #c3d9d59c; background: repeating-linear-gradient(0deg,#d6e7e482 0 1px,transparent 1px 10%); }
.rule i { position: absolute; top: var(--position); right: -.2em; margin-top: -1px; width: 1.85em; height: 2px; background: #f3c99a; }
.console { background: #071c20; color: var(--paper); border-block: 1px solid var(--line); scroll-margin-block-start: 1em; }
.console-inner { display: grid; grid-template-columns: 1.08fr 1fr; gap: 5vw; align-items: center; padding-block: clamp(22px,2.2vw,75px); }
.caption { color: #aec2b8; text-transform: uppercase; letter-spacing: .075em; }
.station-list { display: flex; gap: .4em; flex-wrap: wrap; margin-top: .55em; }
.station-list a { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .5em .95em; min-height: 44px; border: 1px solid #4b6363; border-radius: .2em; font-weight: 500; font-variant-numeric: tabular-nums; }
.station-list a i { width: .43em; height: .43em; border: 1px solid #819b94; border-radius: 50%; }
.station-list a[aria-current] { background: var(--mint); color: #12322a; border-color: var(--mint); }
.station-list a[aria-current] i { border-color: currentColor; background: currentColor; }
.station-list a:hover:not([aria-current]) { border-color: var(--mint); background: #203739; }
.telemetry { display: grid; grid-template-columns: .85fr 1.25fr; gap: 2em; border-left: 1px solid var(--line); padding-inline-start: max(2vw,1.5em); }
.telemetry dd { margin-top: .26em; font-size: clamp(18px,1.62vw,52px); letter-spacing: -.024em; line-height: 1.25; }
.journal { background: var(--paper); color: #18352e; padding-block: clamp(50px,7vw,185px); }
.journal-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding-bottom: 1.15em; border-bottom: 1px solid #a9b7a7; }
.journal-heading h2 { font-size: clamp(25px,2vw,66px); font-weight: 540; line-height: 1.2; letter-spacing: -.03em; }
.journal .caption,.journal .eyebrow { color: #3f6151; }
.entries { display: grid; grid-template-columns: 1.04fr 1fr; gap: clamp(38px,8vw,270px); margin-top: clamp(36px,3.8vw,132px); align-items: start; }
.logbook h3 { font: italic 400 clamp(50px,4.8vw,166px)/.99 "Atlas Serif",Georgia,serif; letter-spacing: -.032em; margin: .22em 0; }
.observation { max-width: 48ch; line-height: 1.6; }
.profile { padding: clamp(20px,1.9vw,70px); background: #dce3d4; color: #28483b; }
.profile figcaption { font-weight: 570; }
.profile p { margin-top: 1.2em; font-size: max(.8em,12px); color: #3d5747; line-height: 1.5; }
.graph { color: #466153; display: grid; grid-template-columns: auto 1fr; gap: .5em .8em; margin-top: 1.7em; font: 450 clamp(11px,.8vw,27px)/1.25 var(--mono); }
.axis-y,.axis-x { display: flex; justify-content: space-between; }
.axis-y { flex-direction: column; align-items: end; }
.axis-x { grid-column: 2; }
.plot { position: relative; height: clamp(100px,9vw,330px); border: 1px solid #92a692; background: linear-gradient(to right bottom,transparent calc(50% - 1px),#436950 50%,transparent calc(50% + 1px)),linear-gradient(90deg,transparent 49.8%,#a8b7a7 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.65%,#a8b7a7 50%,transparent 50.35%); }
.plot i { position: absolute; left: var(--position); bottom: var(--position); transform: translate(-50%,50%); width: .96em; height: .96em; border-radius: 50%; background: #244936; box-shadow: 0 0 0 .24em #dce3d4; }
footer { background: #081e20; }
footer .frame { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding-block: 1.1em; }
footer .frame > span { font-weight: 610; }
footer a { font-size: max(.9em,14px); }
@media (prefers-reduced-motion:no-preference) {
  .daylight,.midnight { transition: opacity .85s ease; }
  .sea img { transition: filter .9s ease,transform 1.35s ease; }
  .rule i,.plot i { transition: top .55s ease,left .55s ease,bottom .55s ease; }
}
@media (max-width: 820px) {
  .console-inner { grid-template-columns: 1fr 1fr; gap: 1.3em; }
  .telemetry { gap: .9em; padding-inline-start: 1em; }
  .station-list a { padding-inline: .65em; }
  .scene-copy { max-width: 55%; }
  .entries { gap: 2em; }
}
@media (max-width: 650px) {
  .mast-inner { min-height: 57px; }
  .mast nav { display: none; }
  .scene-frame { align-items: flex-start; min-height: clamp(468px,73svh,650px); padding-top: clamp(36px,8vw,56px); padding-bottom: 24px; }
  .sea { background: linear-gradient(160deg,#05222e,#061927 65%); }
  .sea img {
    top: auto; bottom: 0; height: 73%; object-position: 76% 53%;
    mask-image: linear-gradient(180deg,transparent,#000 19%);
  }
  @media (min-resolution: 2.5dppx) {
    .sea img { max-height: 305px; }
  }
  .scrim { background: linear-gradient(180deg,#031823e0, #03182287 31%,transparent 59%,#03171b6b),linear-gradient(90deg,#04131a39,transparent 64%); }
  .scene-copy { max-width: 100%; }
  h1 { font-size: clamp(72px,15vw,99px); }
  .lede { max-width: 23ch; font-size: 15px; }
  .sounder { height: 30%; top: auto; bottom: 7%; right: var(--side); }
  .console-inner { grid-template-columns: 1fr; gap: 1.1em; padding-block: 19px; }
  .station-list { gap: .45em; }
  .station-list a { padding-inline: .82em; }
  .telemetry { padding: .95em 0 0; border-left: 0; border-top: 1px solid var(--line); grid-template-columns: .9fr 1.2fr; }
  .entries { grid-template-columns: 1fr; }
  .journal-heading .caption { font-size: 10px; white-space: nowrap; }
  .graph { font-size: 12px; }
}
@media (max-width: 365px) {
  .scene-frame { min-height: 548px; }
  .sea img { height: 64%; object-position: 78% 52%; }
  .station-list { gap: .3em; }
  .station-list a { padding-inline: .52em; }
  .telemetry .caption { font-size: 10.5px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
}