/* One stylesheet for every page.

   The accent colours are the app's AccentColor asset (#0B5E8A light,
   #4FA8D8 dark) so the site and the app read as one thing.

   The ground is paper, not white: a logbook is written on something. The
   monospace face carries day markers, section labels and figures — the parts
   a real log sets in a fixed column — while prose stays on the system face.
   That split is the whole idea, so both faces are system stacks: no webfont
   may be loaded (CSP: default-src 'none'), and none is needed. */

:root {
  color-scheme: light dark;
  --accent: #0b5e8a;
  --ink: #14161a;
  --ink-soft: #454a52;
  --ink-faint: #767c86;
  --ground: #fbfaf7;
  --ground-deep: #f2efe8;
  --rule: #ddd8cc;
  --rule-soft: #e8e4da;
  --measure: 44rem;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #4fa8d8;
    --ink: #eceae5;
    --ink-soft: #b4b0a8;
    --ink-faint: #85817a;
    --ground: #12130f;
    --ground-deep: #1a1b16;
    --rule: #34352e;
    --rule-soft: #26271f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 4rem;
  background: var(--ground);
  color: var(--ink);
  font: 1rem/1.7 var(--sans);
  -webkit-text-size-adjust: 100%;
}

main, header, footer { max-width: var(--measure); margin-inline: auto; }

/* ── Masthead ─────────────────────────────────────────────────────────── */

header { padding-block: 2.5rem 0; }

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.625rem;
}

.wordmark {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

.meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.meta a { color: var(--ink-faint); text-underline-offset: 0.2em; }

/* ── Type ─────────────────────────────────────────────────────────────── */

h1 {
  font-size: clamp(1.875rem, 5.5vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 1rem;
  max-width: 20ch;
}

/* Section labels are set like the column headings of a log: small, spaced,
   monospace, with a rule under them. They carry the legal pages too, where
   they turn a wall of text into something scannable. */
h2 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 3rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 1.75rem 0 0.375rem;
  color: var(--ink);
}

p, li { color: var(--ink-soft); }
p { margin: 0 0 1rem; max-width: 62ch; }

.lead {
  font-size: 1.125rem;
  color: var(--ink-soft);
  margin: 0 0 2.5rem;
  max-width: 52ch;
}

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

ul { padding-left: 1.25rem; }
li { margin-bottom: 0.375rem; }

/* ── The log entry: the landing page's one picture, drawn in text ─────── */

.entry {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0 0 3rem;
}

.row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  padding: 0.8125rem 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}

.row:last-child { border-bottom: 0; }

.day {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.1rem;
}

.place { font-weight: 550; letter-spacing: -0.01em; }

.place small {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--ink-soft);
  letter-spacing: 0;
}

/* A sea day is part of the voyage, but it is not a place. */
.sea .place { color: var(--ink-faint); font-weight: 450; font-style: italic; }

/* ── Numbered list, for "what it does" ────────────────────────────────── */

ul.plain { list-style: none; padding: 0; margin: 0; }

ul.plain li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.5rem;
  padding: 0.5rem 0;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-soft);
}

ul.plain li:last-child { border-bottom: 0; }
ul.plain b { color: var(--ink); font-weight: 550; }

.tick { font-family: var(--mono); color: var(--accent); font-size: 0.875rem; }

/* ── Figures, set like a ship's data plate ────────────────────────────── */

.plate {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 1.5rem 0 0;
}

@media (min-width: 32rem) {
  .plate { grid-template-columns: repeat(4, 1fr); }
}

.plate div { background: var(--ground); padding: 0.875rem 1rem; }

.plate .n {
  font-family: var(--mono);
  font-size: 1.375rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.plate .l {
  font-size: 0.75rem;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── Stamp: the one boxed notice per page ─────────────────────────────── */

.stamp {
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  padding: 1.125rem 1.25rem;
  margin: 2.5rem 0;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.stamp h3 {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

.stamp p:last-child { margin-bottom: 0; }

/* `.card` is the quieter variant, used by the legal pages for the
   disclaimer block. Same shape, no accent border. */
.card {
  background: var(--ground-deep);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.125rem 1.25rem;
  margin: 2rem 0;
}

.card p:last-child { margin-bottom: 0; }

/* ── Definition lists: the imprint's and the policy's field/value pairs ─ */

dl { margin: 0 0 1rem; }

dt {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 1.125rem;
}

dd { margin: 0.1875rem 0 0; color: var(--ink); }

/* ── Tables carry the third-party data — never widen the page ─────────── */

.scroll { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
  min-width: 30rem;
}

th, td {
  text-align: left;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}

th {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-color: var(--rule);
}

td { color: var(--ink-soft); }

.updated {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2.5rem;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

footer {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

footer nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.875rem;
  font-family: var(--mono);
  letter-spacing: 0.03em;
}

footer a { color: var(--ink-faint); }

.disclaimer { margin: 0; max-width: 66ch; }