/* Emma's Map Art — palette taken from nautical charts:
   deep water is the paper, shallow water is blue, land is buff, aids to navigation are magenta. */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-italic.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --deep: #fbfcfa;
  --shoal: #c3dde6;
  --land: #eee2bd;
  --ink: #1d2d3c;
  --magenta: #a1185a;
  --magenta-ink: #ffffff;
  --sounding: #566572;
  --rule: #c7d2d8;
  --depth-line: #6f93a8;
  --relief: #b9a575;
  --panel: #ffffff;

  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --measure: 66ch;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light dark;
}

/* Night palette, after the dark mode of electronic chart displays. */
@media (prefers-color-scheme: dark) {
  :root {
    --deep: #0f1a24;
    --shoal: #1b3444;
    --land: #2c2a22;
    --ink: #dfe7ec;
    --magenta: #e05a9c;
    --magenta-ink: #13060d;
    --sounding: #9fb0bd;
    --rule: #2c3d4b;
    --depth-line: #3f6a82;
    --relief: #5a5238;
    --panel: #142230;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--deep);
  color: var(--ink);
  font: 400 1.125rem/1.62 var(--serif);
  font-optical-sizing: auto;
}
img, svg { display: block; max-width: 100%; }

a { color: var(--magenta); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--gutter); top: 8px; z-index: 10; background: var(--panel); padding: 8px 12px; }

h1, h2, h3 {
  font-family: var(--sans);
  font-stretch: 78%;
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 7.2vw, 5.25rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.3rem; font-stretch: 85%; font-weight: 700; margin-top: 1.6em; }
p, ul, ol, table { margin: 0 0 1em; }
p, li { max-width: var(--measure); }
strong { font-weight: 650; }

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: var(--deep);
}
.wordmark {
  font: 800 1.35rem/1 var(--sans);
  font-stretch: 72%;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.005em;
}
.site-nav ul { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  font: 560 0.98rem/1 var(--sans);
  font-stretch: 90%;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current='page'] { border-bottom-color: var(--magenta); }

/* ---------- hero chart ---------- */
.hero {
  position: relative;
  height: clamp(520px, 78vh, 720px);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.hero .chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart .deep { fill: var(--deep); }
.chart .shoal { fill: var(--shoal); fill-rule: evenodd; }
.chart .land { fill: var(--land); fill-rule: evenodd; }
.chart .depth path { fill: none; stroke: var(--depth-line); stroke-width: 0.9; stroke-dasharray: 7 3; }
.chart .relief path { fill: none; stroke: var(--relief); stroke-width: 0.8; }
.chart .coast { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.chart .soundings text { font: italic 400 15px var(--serif); fill: var(--sounding); text-anchor: middle; }
.chart .rose circle, .chart .rose-ticks { fill: none; stroke: var(--magenta); stroke-width: 1.1; }
.chart .rose-star { fill: none; stroke: var(--magenta); stroke-width: 1.1; }
.chart .rose-half { fill: var(--magenta); }
.chart .rose-labels text { font: 600 10px var(--sans); fill: var(--magenta); text-anchor: middle; }

/* The one moment of motion: the compass rose turns into place, once. */
@media (prefers-reduced-motion: no-preference) {
  .chart .rose { transform-box: fill-box; transform-origin: center; animation: rose-settle 1.6s cubic-bezier(.2,.7,.2,1) both .2s; }
  @keyframes rose-settle { from { transform: rotate(-38deg); opacity: 0; } to { transform: rotate(0); opacity: 1; } }
}

.cartouche {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(20px, 5vh, 56px);
  max-width: min(680px, calc(100% - 2 * var(--gutter)));
  background: var(--panel);
  border: 1px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 4px;
  padding: clamp(20px, 3.4vw, 34px);
}
.cartouche h1 { margin-bottom: 0.18em; }
.cartouche p { font-size: 1.2rem; line-height: 1.45; margin-bottom: 1.2em; }

.actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.button {
  display: inline-block;
  font: 650 1rem/1 var(--sans);
  font-stretch: 88%;
  text-decoration: none;
  padding: 14px 18px;
  border: 2px solid var(--magenta);
  border-radius: 2px;
}
.button-primary { background: var(--magenta); color: var(--magenta-ink); }
.button-primary:hover { filter: brightness(1.08); }
.button-secondary { color: var(--magenta); background: transparent; }
.button-secondary:hover { background: color-mix(in srgb, var(--magenta) 8%, transparent); }

/* ---------- content ---------- */
main { display: block; }
.band { padding: clamp(48px, 8vw, 96px) var(--gutter); border-bottom: 1px solid var(--rule); }
.band-inner { max-width: 1120px; margin: 0 auto; }
.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.lede { font-size: 1.32rem; line-height: 1.5; }

/* Chart legend box: a key, not a card. */
.legend { border: 1px solid var(--ink); padding: 22px 24px 8px; background: var(--panel); }
.legend h3 { margin-top: 0; }
.legend dl { margin: 0; }
.legend dt { font: 680 1rem/1.3 var(--sans); font-stretch: 88%; }
.legend dd { margin: 2px 0 16px; color: var(--sounding); font-size: 1rem; line-height: 1.5; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.steps li { counter-increment: step; padding: 18px 20px 4px 0; font-size: 1.02rem; line-height: 1.5; overflow-wrap: anywhere; }
.steps li + li { padding-left: 20px; border-left: 1px solid var(--rule); }
.steps li::before {
  content: counter(step);
  display: block;
  font: 760 2.4rem/1 var(--sans);
  font-stretch: 70%;
  color: var(--magenta);
  margin-bottom: 10px;
}

table.scopes { width: 100%; border-collapse: collapse; font-size: 1rem; max-width: 900px; }
.scopes caption { text-align: left; font: 650 1rem/1.4 var(--sans); font-stretch: 90%; padding-bottom: 8px; }
.scopes th, .scopes td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); }
.scopes thead th { font: 650 0.95rem/1.3 var(--sans); font-stretch: 90%; border-bottom: 2px solid var(--ink); }
.scopes code { font: 600 0.92rem/1 var(--sans); font-stretch: 90%; white-space: nowrap; color: var(--magenta); }

/* ---------- long-form pages (policies, connection details) ---------- */
.doc { padding: clamp(40px, 7vw, 80px) var(--gutter) clamp(56px, 8vw, 96px); }
.doc-inner { max-width: 760px; margin: 0 auto; }
.doc h1 { font-size: clamp(2.4rem, 5.6vw, 3.6rem); }
.doc h2 { font-size: 1.7rem; margin-top: 1.8em; padding-top: 0.9em; border-top: 1px solid var(--rule); }
.doc .meta { color: var(--sounding); font-size: 1rem; }
.doc ul, .doc ol { padding-left: 1.2em; }
.doc li { margin-bottom: 0.4em; }

.doc .trademark-inline { color: var(--sounding); font-size: 1rem; }
.doc .disclaimer { font: 600 0.92rem/1.55 var(--sans); font-stretch: 92%; letter-spacing: 0.01em; border: 1px solid var(--ink); padding: 16px 18px; }

.notice { max-width: 640px; margin: 12vh auto; padding: 0 var(--gutter); }
.consent { margin: 24px 0; }
.consent label { display: flex; gap: 12px; align-items: flex-start; font-size: 1.05rem; cursor: pointer; }
.consent input[type=checkbox] { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--magenta); flex: none; }
.consent .button { margin-top: 20px; cursor: pointer; }

/* ---------- footer: a chart title block ---------- */
.site-footer { padding: clamp(36px, 6vw, 64px) var(--gutter) 40px; font-size: 1rem; }
.title-block {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  border: 1px solid var(--ink);
}
.title-block > div { padding: 18px 20px; }
.title-block > div + div { border-left: 1px solid var(--ink); }
.title-block h2 { font-size: 1rem; font-stretch: 88%; font-weight: 680; margin: 0 0 6px; }
.title-block p { margin: 0 0 4px; }
.title-block ul { list-style: none; padding: 0; margin: 0; }
.title-block li { margin-bottom: 4px; }
.trademark { max-width: 1120px; margin: 18px auto 0; color: var(--sounding); font-size: 0.95rem; }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .title-block { grid-template-columns: 1fr; }
  .title-block > div + div { border-left: 0; border-top: 1px solid var(--ink); }
}
@media (max-width: 560px) {
  body { font-size: 1.0625rem; }
  .hero { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .hero .chart { position: relative; height: 300px; }
  .cartouche { position: relative; left: auto; bottom: auto; max-width: none; margin: -48px 16px 24px; }
  .steps { grid-template-columns: 1fr; }
  .steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .scopes thead { display: none; }
  .scopes tr { display: block; border-bottom: 1px solid var(--rule); padding: 10px 0; }
  .scopes th, .scopes td { display: block; border: 0; padding: 2px 0; }
}

.notice h1 { font-size: clamp(2rem, 5vw, 3rem); }
.notice .meta { color: var(--sounding); font-size: 1rem; }