@font-face {
  font-family: "DM Sans";
  src: url("assets/dm-sans-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("assets/newsreader-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --night: #081923;
  --paper: #e7eeeb;
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --edge: clamp(24px, 5.2vw, 180px);
  --scene-height: 100svh;
  --horizon: calc(var(--scene-height) * .415);
  --header-clearance: 108px;
  --optical-offset: 0px;
  /* Keep the approved responsive frame, including its short-screen guard. */
  --title-fit: min(calc((100vw - var(--edge) * 2) * .2315), max(42px, calc((var(--horizon) - var(--header-clearance)) / .645)));
  /* Let the ocean carry more of the scale; keep the title anchored to its horizon. */
  --title-size: calc(var(--title-fit) * .88);
  /* Lower the desktop centre; account for the existing mobile optical offset
     so portrait screens retain a similar horizon intersection. */
  --title-drop: min(2svh, max(0px, calc(var(--title-size) * .075 - var(--optical-offset))));
  /* Preserve the approved header/caption frame when reducing the title. */
  --composition-edge: max(var(--edge), calc((100vw - var(--title-fit) * 4.309) / 2));
  /* DM Sans's visible baseline follows the photographed horizon.
     Position the caption from the ink, not the oversized h1 line box. */
  --title-ink-bottom: calc(var(--horizon) + var(--title-size) * .088 + var(--optical-offset) + var(--title-drop));
  --caption-gap: clamp(64px, 9svh, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, p { margin: 0; }
html { background: var(--night); }
body {
  background: var(--night);
  color: var(--paper);
  font: 400 1rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
html, body { overscroll-behavior-y: none; }
::selection { background: #d3e3e7; color: #0b2330; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid #e7eeeb; outline-offset: 8px; border-radius: 2px; }

.site-header {
  position: absolute;
  z-index: 2;
  inset-block-start: max(24px, env(safe-area-inset-top));
  inset-inline-start: max(var(--composition-edge), env(safe-area-inset-left));
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font: 400 clamp(18px, 1.36vw, 22px)/1 var(--sans);
  letter-spacing: -.025em;
  color: var(--paper);
}
.brand-symbol {
  display: block;
  width: 28px;
  height: 22px;
  flex: none;
  transform: translateY(-.05em);
}

.hero {
  position: relative;
  min-height: var(--scene-height);
  isolation: isolate;
  overflow: clip;
}
.hero-image, .hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.hero-image { overflow: hidden; filter: saturate(.78); }
.hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 41.5%;
}
.hero-shade {
  z-index: -1;
  /* The original light direction stays intact. Keep some water detail at the edge. */
  background:
    linear-gradient(180deg, rgb(4 17 28 / .84) 0%, rgb(4 17 28 / .73) 36%, rgb(5 20 31 / .32) 52%, rgb(4 17 27 / .42) 73%, rgb(4 16 25 / .86) 100%),
    linear-gradient(90deg, rgb(2 13 23 / .07), transparent 50%, rgb(2 13 23 / .1));
}

.hero h1 {
  position: relative;
  padding-top: max(0px, calc(var(--horizon) - var(--title-size) * .754 + var(--optical-offset) + var(--title-drop)));
  font: 400 var(--title-size)/.98 var(--sans);
  letter-spacing: -.055em;
  text-align: center;
  text-indent: -.055em;
  white-space: nowrap;
  /* Preserve the horizon intersection while lowering the title visually. */
}
.hero-statement {
  position: absolute;
  inset-block-start: calc(var(--title-ink-bottom) + var(--caption-gap));
  inset-inline-start: max(var(--composition-edge), env(safe-area-inset-left));
  inset-inline-end: max(var(--composition-edge), env(safe-area-inset-right));
  margin: 0;
  font: italic 400 clamp(28px, 2.6vw, 44px)/1.2 var(--serif);
  letter-spacing: -.025em;
  text-align: right;
  text-wrap: balance;
}

.ocean-motion-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
}
.hero-image.motion-ready .ocean-motion-canvas { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .brand { animation: arrive 900ms ease-out both; }
  .hero h1 { animation: arrive 1100ms ease-out both; }
  .hero-statement { animation: arrive 1100ms 120ms ease-out both; }
}
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px) {
  :root {
    --edge: 24px;
    --header-clearance: 92px;
    --optical-offset: clamp(2px, .4svh, 4px);
    --caption-gap: clamp(56px, 9svh, 84px);
  }
  .site-header { inset-block-start: max(24px, env(safe-area-inset-top)); }
  .brand { gap: 9px; }
  .brand-symbol { width: 26px; height: 20px; }
  .hero-image img { object-position: 56% 41.5%; }
  .hero-statement { font-size: 26px; }
}

@media (max-height: 540px) and (orientation: landscape) {
  :root { --header-clearance: 70px; --edge: clamp(24px, 5.2vw, 64px); --optical-offset: 0px; --caption-gap: clamp(28px, 7svh, 38px); }
  .site-header { inset-block-start: max(8px, env(safe-area-inset-top)); }
  .brand { font-size: 17px; min-height: 36px; }
  .brand-symbol { width: 25px; height: 19px; }
  .hero-statement { font-size: clamp(19px, 5.6svh, 24px); }
}

/* Give narrow screens a little more room; the caption can still wrap. */
@media (max-width: 340px) {
  :root { --edge: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}