/* A shipyard's brochure: full-width film, a builder's plate, a register of the fleet on pale paper. */
:root {
  --abyss: #082530;     /* the page */
  --deep: #0e3543;      /* raised bands */
  --mist: #e6edef;      /* paper sections */
  --ink: #0a2630;       /* text on paper */
  --foam: #f3f8f8;      /* text on the deep */
  --haze: #a8c1c8;      /* quiet text on the deep */
  --slate: #4b6873;     /* quiet text on paper */
  --brass: #d3aa5c;     /* the one accent */
  --brass-dark: #75571a;
  --rule: rgba(243, 248, 248, .17);
  --rule-paper: rgba(10, 38, 48, .18);

  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --data: Consolas, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--abyss); color: var(--foam);
  font: 400 17px/1.62 var(--body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; width: 100%; height: auto; max-width: 100%; background: var(--deep); }
a { color: inherit; text-decoration-color: var(--brass); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--brass); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
kbd { font: 700 .94em var(--body); color: var(--brass); }

.wrap {
  width: 100%; max-width: 1240px; margin-inline: auto;
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
}
.band { padding-block: clamp(64px, 9vw, 120px); }
.band.tight { padding-block: clamp(40px, 6vw, 72px); }
.paper { background: var(--mist); color: var(--ink); }
.paper a { text-decoration-color: var(--brass-dark); }
.paper a:hover { color: var(--brass-dark); }
.paper kbd { color: var(--brass-dark); }
.raised { background: var(--deep); }

/* type */
h2 { font: 700 clamp(30px, 4.6vw, 56px)/1.1 var(--display); letter-spacing: -.024em; }
h2 em { font-style: normal; color: var(--brass); }
.paper h2 em { color: var(--brass-dark); }
h3 { font: 700 18px/1.3 var(--body); margin-bottom: 8px; }
.label { font: 700 14px/1.4 var(--body); color: var(--brass); margin-bottom: 14px; }
.paper .label { color: var(--brass-dark); }
.quiet { color: var(--haze); }
.paper .quiet { color: var(--slate); }
.prose { max-width: 62ch; }
.prose p + p { margin-top: 14px; }
.note { font-size: 14px; line-height: 1.55; color: var(--haze); max-width: 74ch; }
.paper .note { color: var(--slate); }
.statement { font: 500 clamp(21px, 2.9vw, 32px)/1.38 var(--display); letter-spacing: -.012em; max-width: 30em; text-wrap: pretty; }

/* hero: the film and the name */
.hero { position: relative; background: var(--abyss); }
.hero video { aspect-ratio: 16 / 9; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 37, 48, 0) 46%, rgba(8, 37, 48, .55) 74%, var(--abyss) 100%);
}
.hero-copy { position: absolute; left: 0; right: 0; bottom: clamp(14px, 3vw, 44px); z-index: 1; }
h1 { font: 800 clamp(40px, 8.2vw, 112px)/1.02 var(--display); letter-spacing: -.035em; }
h1 em { font: 800 .34em/1 var(--body); letter-spacing: .02em; text-transform: uppercase; background: var(--foam); color: var(--abyss); padding: .2em .42em; border-radius: 6px; vertical-align: .95em; margin-left: .1em; white-space: nowrap; }
.hero-line { font-weight: 500; font-size: clamp(16px, 2.1vw, 22px); line-height: 1.35; margin-top: clamp(8px, 1.4vw, 16px); max-width: 40em; }

/* the builder's plate, in place of tags */
.plate { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.plate div { padding: 16px 18px 18px 0; min-width: 0; }
.plate div + div { padding-left: 18px; border-left: 1px solid var(--rule); }
.plate dt { font: 600 13px/1.4 var(--body); color: var(--brass); margin-bottom: 6px; }
.plate dd { margin: 0; font: 700 clamp(15px, 1.6vw, 18px)/1.3 var(--display); }

/* film */
.bleed { position: relative; background: var(--deep); }
.bleed video { aspect-ratio: 16 / 9; object-fit: cover; }
.bleed.over::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 37, 48, .62) 0%, rgba(8, 37, 48, 0) 46%);
}
.bleed .over-copy { position: absolute; left: 0; right: 0; top: clamp(20px, 4vw, 56px); z-index: 1; }
.film { aspect-ratio: 16 / 9; width: 100%; background: var(--deep); }
.film iframe { display: block; width: 100%; height: 100%; border: 0; }

/* layout */
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 44px); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stack { display: grid; gap: clamp(24px, 3.4vw, 44px); }
.after { margin-top: clamp(28px, 4vw, 48px); }

/* moving pictures with a name */
.shot { position: relative; margin: 0; overflow: hidden; background: var(--deep); }
.shot video, .shot img { aspect-ratio: 16 / 9; object-fit: cover; }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 9px;
  font: 600 13px/1.3 var(--body); color: var(--foam);
  background: linear-gradient(180deg, rgba(8, 37, 48, 0), rgba(8, 37, 48, .78));
}
.fleet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fleet .lead-shot { grid-column: span 2; grid-row: span 2; }
.fleet .lead-shot { display: flex; }
.fleet .lead-shot video { height: 100%; }

/* the register */
.register-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 10px 14px 10px 0; vertical-align: baseline; }
th { font: 700 13px/1.3 var(--body); color: var(--brass); border-bottom: 1px solid var(--rule); white-space: nowrap; }
td { border-bottom: 1px solid var(--rule); }
.paper th { color: var(--brass-dark); border-bottom-color: var(--ink); }
.paper td { border-bottom-color: var(--rule-paper); }
.register td:not(:first-child), .register th:not(:first-child) { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; padding-left: 14px; padding-right: 0; }
.register th:not(:first-child) { font-size: 13px; font-weight: 700; }
.register td:first-child { font: 700 16px/1.3 var(--display); }

/* facts as rows */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rows li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.paper .rows, .paper .rows li { border-color: var(--rule-paper); }

/* the types of water, set as a sentence */
.waters { font: 700 clamp(21px, 2.9vw, 32px)/1.32 var(--display); letter-spacing: -.015em; max-width: 27em; color: var(--foam); }
.waters span { color: var(--brass); }

/* measured */
.gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--rule); }
.gauges div { padding: 20px 18px 22px 0; min-width: 0; }
.gauges div + div { padding-left: 18px; border-left: 1px solid var(--rule); }
.gauges dd { margin: 0; font: 800 clamp(30px, 4.8vw, 58px)/1 var(--display); letter-spacing: -.03em; white-space: nowrap; }
.gauges dt { font-size: 14.5px; font-weight: 600; line-height: 1.4; margin-top: 12px; color: var(--foam); }
.gauges small { display: block; font: 500 13px/1.5 var(--body); color: var(--haze); margin-top: 8px; }

/* steps and questions */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 38px minmax(0, 1fr); padding: 14px 0; border-top: 1px solid var(--rule-paper); }
.steps li::before { content: counter(s); font: 800 22px/1.2 var(--display); color: var(--brass-dark); }
details { border-top: 1px solid var(--rule-paper); }
details:last-of-type { border-bottom: 1px solid var(--rule-paper); }
summary { cursor: pointer; padding: 14px 26px 14px 0; font-weight: 600; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 2px; top: 10px; font: 500 22px/1.3 var(--display); color: var(--brass-dark); }
details[open] summary::after { content: "\2212"; }
details p { padding-bottom: 16px; }
.docs-link { font: 700 clamp(19px, 2.2vw, 24px)/1.25 var(--display); display: inline-block; }

footer { padding-block: 34px 44px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--haze); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

/* documentation */
.doc { padding-block: 40px 60px; }
.doc .back { font: 600 14px var(--body); margin-bottom: 18px; }
.doc h1 { font-size: clamp(38px, 6vw, 68px); margin-bottom: 8px; }
.doc h2 { font-size: clamp(25px, 3.2vw, 36px); margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--rule); margin-bottom: 16px; scroll-margin-top: 12px; }
.doc h3 { font: 700 20px/1.3 var(--body); margin-top: 34px; margin-bottom: 10px; scroll-margin-top: 12px; }
.doc .col { max-width: 74ch; }
.doc p, .doc ul, .doc ol { margin-block: 0 14px; color: var(--foam); }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 7px; }
.doc li ul { margin: 7px 0 0; }
.doc li::marker { color: var(--brass); }
.doc i { color: var(--haze); }
.doc code, .doc pre { font-family: var(--data); font-size: .88em; }
.doc code { color: var(--brass); }
.doc pre { background: var(--deep); padding: 14px 16px; overflow-x: auto; margin: 0 0 14px; }
.doc pre code { color: var(--foam); }
.doc .media { margin: 12px 0 20px; }
.doc .figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 20px; }
.doc .figs .media { margin: 0; }
.tablewrap { overflow-x: auto; margin: 8px 0 18px; }
.toc { columns: 2; column-gap: 36px; margin: 22px 0 8px; padding-block: 16px; border-block: 1px solid var(--rule); }
.toc a { display: block; padding: 3px 0; text-decoration: none; font-size: 15.5px; break-inside: avoid; }

@media (max-width: 760px) {
  .two, .three { grid-template-columns: minmax(0, 1fr); }
  .plate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate div { border-bottom: 1px solid var(--rule); }
  .plate div + div { padding-left: 0; border-left: 0; }
  .plate div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--rule); }
  .plate div:last-child { grid-column: span 2; border-bottom: 0; }
  .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gauges div:nth-child(3) { padding-left: 0; border-left: 0; }
  .gauges div { border-bottom: 1px solid var(--rule); }
  .fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc { columns: 1; }
  .doc .figs { grid-template-columns: minmax(0, 1fr); }
  .wrap { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 480px) {
  .hero video { aspect-ratio: 4 / 5; }
}

/* rounded corners: pictures, bands and boxes alike */
:root { --r: 12px; --r-big: 18px; --inset: 12px; }
.hero, .bleed, .paper, .raised { border-radius: var(--r-big); overflow: hidden; margin-inline: var(--inset); }
.hero { margin-top: var(--inset); }
.framed { --r-big: 12px; }
.framed .hero, .framed .bleed, .framed .paper, .framed .raised { margin-inline: 0; }
.framed .hero { margin-top: 0; }
.shot, .film { border-radius: var(--r); overflow: hidden; }
.pair, .fleet { gap: 8px; }
.plate, .gauges { border: 1px solid var(--rule); border-radius: var(--r); padding-inline: 18px; }
.doc .media { border-radius: var(--r); overflow: hidden; }
.doc pre { border-radius: var(--r); }
.toc { border: 1px solid var(--rule); border-radius: var(--r); padding: 16px 20px; }
@media (max-width: 760px) {
  :root { --inset: 8px; }
  .plate, .gauges { padding-inline: 14px; }
}