/* Seaweed Radar: shared sheet for every page.
   Idea: a pilot book (sailing directions) printed on chart paper. Navy chart ink,
   chart magenta for notices and the one action, land in roman type, water in italic
   (the chart-maker's rule). Phone first (390), desktop from 900 px (designed at 1280).
   No JavaScript anywhere; the offer swaps state with :target or a server-side class. */

@font-face {
  font-family: "Brygada 1918";
  src: url("/type/Brygada1918-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Brygada 1918";
  src: url("/type/Brygada1918-VariableItalic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("/type/RedHatMono-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* page */
  --paper: #F6F5EF;      /* chart paper */
  --ink: #142A47;        /* chart navy: text, outlines */
  --ink-2: #4A5A70;      /* secondary text, 6.6:1 on paper */
  --rule: #B9C1CC;       /* hairlines only, never text */
  --sea: #DCEAF0;        /* water in drawings */
  --sea-line: #6F95AE;   /* depth contours */
  --sea-ink: #2B5877;    /* water names, 6.9:1 on --sea */
  --land: #EDE3C8;       /* land in drawings only */
  --magenta: #9E1F63;    /* notices, limits, the one action: 7.1:1 on paper */

  /* the four levels: a light-to-dark ramp, so they read in greyscale too */
  --low: #DDEEF1;
  --warning: #E8C23A;
  --medium: #E39046;
  --high: #6E2A12;

  --serif: "Brygada 1918", Georgia, "Times New Roman", serif;
  --mono: "Red Hat Mono", ui-monospace, Menlo, Consolas, monospace;

  /* 4/8 spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px;

  --step: 17px;          /* one level of height in the gauge and the 14-day strip */
}

[data-level="low"]     { --lvl: var(--low);     --on-lvl: var(--ink);   --n: 1; }
[data-level="warning"] { --lvl: var(--warning); --on-lvl: var(--ink);   --n: 2; }
[data-level="medium"]  { --lvl: var(--medium);  --on-lvl: var(--ink);   --n: 3; }
[data-level="high"]    { --lvl: var(--high);    --on-lvl: var(--paper); --n: 4; }

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-text-size-adjust: 100%;
  font-kerning: normal;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 1.125rem;
  line-height: 1.5;
  font-variant-numeric: lining-nums;
}

h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; font-weight: 600; }
p, dd, li { text-wrap: pretty; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

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

.quiet {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- the sheet: one grid per page ---------- */

.sheet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--s4);
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
}
.sheet > * { grid-column: 1 / -1; min-width: 0; }

.pilot-head, .reading, .wrackline, .almanac, .bearing, .notice-row, .soundings, .datum,
.landfall, .coasts, .key, .tideline-body {
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
}
.reading > *, .wrackline > *, .almanac > *, .bearing > *, .notice-row > *, .soundings > *,
.datum > *, .landfall > *, .coasts > *, .key > *, .tideline-body > * {
  grid-column: 1 / -1; min-width: 0;
}

/* section heads: a real heading, set like a pilot book's paragraph head */
.leg-title {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.leg-sub {
  margin-top: var(--s1);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

/* ---------- neatline: the graduated border of a chart ---------- */

.neatline {
  height: 10px;
  border-block: 1.5px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 48px, var(--paper) 48px 96px);
}
.neatline--on-ink {
  border-color: var(--paper);
  background: repeating-linear-gradient(90deg, var(--paper) 0 48px, var(--ink) 48px 96px);
}

/* ---------- pilot-head: the site's masthead ---------- */

.pilot-head {
  padding-block: 14px;
  border-bottom: 1px solid var(--ink);
}
.pilot-head-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
.pilot-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.pilot-mark i { font-weight: 500; }
.pilot-weed { width: 30px; height: 22px; flex: none; }
.pilot-nav {
  display: flex;
  gap: var(--s5);
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pilot-nav-wide { display: none; }

/* ---------- buoy: a level, always colour + letter + word ---------- */

.buoy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.buoy-letter {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--lvl);
  color: var(--on-lvl);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  font-weight: 700;
  font-size: 0.8125rem;
}

/* ================= beach page ================= */

/* ---------- reading: the answer, the level, the age ---------- */

.reading { padding-block: 28px 40px; row-gap: 0; }
.reading-title {
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.reading-place {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.reading-answer {
  margin-top: var(--s4);
  font-size: 1.625rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.reading-level {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--high);
  text-decoration-thickness: 0.16em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}
.reading-gloss {
  margin-top: var(--s3);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.45;
  max-width: 34em;
}

/* gauge: the tide staff. Four steps, the current one solid, the rest hatched. */
.gauge { margin-top: var(--s5); }
.gauge-staff {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 6px;
  align-items: end;
}
.gauge-step { display: grid; row-gap: 6px; }
.gauge-bar {
  display: grid;
  align-items: end;
  justify-items: start;
  height: calc(var(--n) * var(--step));
  padding: 0 6px 2px;
  border: 1px solid var(--ink-2);
  border-radius: 2px 2px 0 0;
  background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(20, 42, 71, 0.16) 5px 6px);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--ink-2);
}
.gauge-word {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 16px;
  color: var(--ink-2);
}
.gauge-step[aria-current] .gauge-bar {
  background: var(--lvl);
  color: var(--on-lvl);
  border: 2px solid var(--ink);
  font-size: 1.75rem;
  font-weight: 700;
  padding: 0 8px 4px;
}
.gauge-step[aria-current] .gauge-word {
  color: var(--ink);
  font-weight: 700;
}
.gauge-age {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 22px;
}
.gauge-age strong { font-weight: 700; }

/* ---------- wrackline: the last 14 days ---------- */

.wrackline { padding-block: 32px 40px; border-top: 1px solid var(--ink); }
.wrack {
  margin-top: var(--s5);
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  column-gap: 3px;
  align-items: end;
  /* the strand line under the bars */
  background: linear-gradient(var(--ink), var(--ink)) left bottom 24px / 100% 2px no-repeat;
}
.wrack-day { display: grid; row-gap: 8px; justify-items: stretch; }
.wrack-bar {
  display: grid;
  align-items: end;
  justify-items: center;
  height: calc(var(--n) * 18px);
  padding-bottom: 3px;
  background: var(--lvl);
  color: var(--on-lvl);
  border: 1.5px solid var(--ink);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}
.wrack-date {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 16px;
  text-align: center;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.wrack-note {
  margin-top: var(--s4);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---------- almanac: month by month, as a tide table ---------- */

.almanac { padding-block: 32px 40px; border-top: 1px solid var(--ink); }
.almanac-key {
  margin-top: var(--s4);
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px var(--s5);
}
.almanac-table {
  margin-top: var(--s5);
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.almanac-table col.almanac-c-month { width: 52px; }
.almanac-table col.almanac-c-count { width: 30px; }
.almanac-table thead th {
  height: 34px;
  padding: 0 0 6px;
  vertical-align: bottom;
  font-weight: 500;
  color: var(--ink-2);
  text-align: left;
  border-bottom: 2px solid var(--ink);
}
.almanac-table thead th.almanac-count { text-align: right; }
.almanac-table thead .buoy-letter { width: 22px; height: 22px; font-size: 0.75rem; }
.almanac-year th {
  height: 34px;
  padding: 10px 0 4px;
  vertical-align: bottom;
  text-align: left;
  font-family: var(--serif);
  font-style: normal;
  font-size: 1rem;
  font-weight: 700;
  border-bottom: 1px solid var(--ink);
}
.almanac-month th, .almanac-month td {
  height: 30px;
  padding: 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.almanac-month th { text-align: left; font-weight: 500; }
.almanac-month th small { display: block; margin-top: 2px; font-size: 0.6875rem; color: var(--ink-2); font-weight: 400; }
.almanac-month .almanac-bar { padding-inline: 6px 10px; }
.almanac-table abbr { text-decoration: none; }
.almanac-track {
  display: flex;
  height: 16px;
  width: calc(var(--days) / 31 * 100%);
  outline: 1.5px solid var(--ink);
  outline-offset: -0.75px;
}
.almanac-seg {
  flex: 0 0 calc(var(--d) / var(--days) * 100%);
  background: var(--lvl);
}
.almanac-seg + .almanac-seg { box-shadow: inset 1px 0 0 var(--paper); }
.almanac-count { text-align: right; }
.almanac-count.is-nil { color: var(--ink-2); }

/* ---------- bearing: which way the beach faces, and the sheltered neighbour ---------- */

.bearing { padding-block: 32px 40px; border-top: 1px solid var(--ink); }
.bearing-facing {
  margin-top: var(--s3);
  font-size: 1.625rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.bearing-facing i { font-weight: 500; }
.bearing-why { margin-top: var(--s3); font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.bearing-chart { margin-top: var(--s5); }
.bearing-chart svg { display: block; width: 100%; height: auto; }
.bearing-chart figcaption {
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 18px;
  color: var(--ink-2);
}
.lee {
  margin-top: var(--s5);
  padding-left: var(--s4);
  border-left: 3px solid var(--ink);
}
.lee-title { font-size: 1.125rem; line-height: 1.3; }
.lee-where { margin-top: var(--s1); font-size: 1.25rem; line-height: 1.35; }
.lee-where a { font-weight: 600; }
.lee-same { margin-top: var(--s2); font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }

/* chart drawing */
.chart-sea { fill: var(--sea); }
.chart-land { fill: var(--land); stroke: var(--ink); stroke-width: 1.2; }
.chart-spit-edge { fill: none; stroke: var(--ink); stroke-width: 15; stroke-linecap: round; }
.chart-spit { fill: none; stroke: var(--land); stroke-width: 12; stroke-linecap: round; }
.chart-depth { fill: none; stroke: var(--sea-line); stroke-width: 1.2; stroke-dasharray: 2 4; }
.chart-limit { fill: none; stroke: var(--magenta); stroke-width: 1.8; stroke-dasharray: 12 3 2 3; }
.chart-span { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-face { fill: none; stroke: var(--ink); stroke-width: 2; }
.chart-face-head { fill: var(--ink); }
.chart-dot { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.chart-frame { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.chart-name { font-family: var(--serif); font-size: 16px; font-weight: 600; fill: var(--ink); }
.chart-water { font-family: var(--serif); font-style: italic; font-size: 19px; fill: var(--sea-ink); letter-spacing: 0.04em; }
.chart-note { font-family: var(--mono); font-size: 14px; fill: var(--ink); }
.chart-note--limit { fill: var(--magenta); font-weight: 600; }
.chart-north { font-family: var(--serif); font-size: 15px; font-weight: 700; fill: var(--ink); }
.chart-halo { paint-order: stroke; stroke: var(--sea); stroke-width: 4px; stroke-linejoin: round; }

/* ---------- notice: the offer, set as a notice to mariners in chart magenta ---------- */

.notice-row { padding-block: 32px 40px; border-top: 1px solid var(--ink); }
.notice {
  border: 2px solid var(--magenta);
  border-radius: 2px;
  padding: 20px;
  background: var(--paper);
}
.notice-label {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--magenta);
}
.notice-text {
  margin-top: 10px;
  font-size: 1.25rem;
  line-height: 1.4;
}
.notice-price {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1;
}
.notice-figure {
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.notice-take {
  margin-top: var(--s4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--s5);
  border: 0;
  border-radius: 2px;
  background: var(--magenta);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
}
.notice-take:hover { background: #821950; text-decoration: none; }
.notice-fine {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 20px;
  color: var(--ink-2);
}
.notice-field { margin-top: var(--s4); display: grid; row-gap: 6px; }
.notice-field-name {
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 20px;
  font-weight: 600;
}
.notice-field-name span { font-weight: 400; color: var(--ink-2); }
.notice-input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: #FFFFFF;
  font-family: var(--mono);
  font-size: 1rem;
}
.notice-input::placeholder { color: var(--ink-2); }
select.notice-input {
  appearance: none;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23142A47' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding-right: 40px;
}

/* the two states. Default: the offer. After the tap (#notice-list is the target, or the
   server adds .notice--list after the button's GET), the sign-up replaces it. */
.notice-list { display: none; }
.notice-list:target, .notice--list .notice-list { display: block; }
.notice:has(.notice-list:target) .notice-offer, .notice--list .notice-offer { display: none; }

/* design sheet only (notice.html): the label over each state */
.notice-state {
  padding-top: var(--s5);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.notice-state + .notice-row { border-top: 0; padding-top: var(--s3); }
.notice-end { margin-top: var(--s2); }

/* ---------- soundings: questions and answers ---------- */

.soundings { padding-block: 32px 40px; border-top: 1px solid var(--ink); }
.soundings-list { margin-top: var(--s5); display: grid; row-gap: var(--s5); }
.sounding dt { font-size: 1.1875rem; line-height: 1.35; font-weight: 600; }
.sounding dd { margin-top: 6px; font-size: 1.0625rem; line-height: 1.5; }

/* ---------- datum: sources and limits ---------- */

.datum { padding-block: 32px 48px; border-top: 1px solid var(--ink); }
.datum-credit {
  margin-top: var(--s4);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.6;
  font-weight: 600;
}
.datum-text { margin-top: var(--s3); font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.datum-text em { font-style: italic; color: var(--ink); }

/* ---------- tideline: the footer, which grows to the bottom of the window ---------- */

.tideline {
  flex: 1 0 auto;
  background: var(--ink);
  color: var(--paper);
}
.tideline-body { padding-block: 32px 40px; row-gap: var(--s5); }
.tideline-title {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #C4CDD9;
}
.tideline-list { margin-top: var(--s2); display: grid; row-gap: 2px; }
.tideline-list a { display: inline-block; padding-block: 4px; font-size: 1.0625rem; line-height: 24px; }
.tideline-list--site { grid-template-columns: repeat(2, max-content); column-gap: var(--s6); }
.tideline-list--site a { font-family: var(--mono); font-size: 0.9375rem; }
.tideline-maker {
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 22px;
  color: #C4CDD9;
}

/* ================= home page ================= */

.landfall { padding-block: 28px 40px; }
.landfall-title {
  font-size: 1.625rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.landfall-title i { font-weight: 500; }
.landfall-date {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 22px;
}

.coasts { border-top: 1px solid var(--ink); }
.coast { padding-block: 28px 8px; }
.coast + .coast { border-top: 1px solid var(--rule); }
.coast-name { font-size: 1.5rem; line-height: 1.2; }
.coast-where {
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 20px;
  color: var(--ink-2);
}
.coast-beaches { margin-top: var(--s3); }
.coast-beach + .coast-beach { border-top: 1px solid var(--rule); }
.coast-beach a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s3);
  min-height: 60px;
  padding-block: 8px;
  text-decoration: none;
}
.coast-beach-name { font-size: 1.1875rem; line-height: 24px; font-weight: 600; }
.coast-beach a:hover .coast-beach-name { text-decoration: underline; text-underline-offset: 0.18em; }
.coast-beach-date {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 18px;
  color: var(--ink-2);
}
.coast-beach .buoy { grid-column: 2; grid-row: 1 / span 2; }
.coast-beach .buoy-word { min-width: 4.4em; }

.key { padding-block: 32px 48px; border-top: 1px solid var(--ink); }
.key-points { margin-top: var(--s5); display: grid; row-gap: var(--s4); counter-reset: key; }
.key-point {
  position: relative;
  padding-left: 40px;
  font-size: 1.0625rem;
  line-height: 1.5;
  counter-increment: key;
}
.key-point::before {
  content: counter(key);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}
.key-legend {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 2px solid var(--ink);
}
.key-legend-list {
  margin-top: var(--s3);
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px var(--s6);
}
.key-legend-note {
  margin-top: var(--s4);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 20px;
  color: var(--ink-2);
}
.key-legend-title {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ================= desktop: 12 columns from 900 px ================= */

@media (min-width: 900px) {
  :root { --step: 30px; }
  body { font-size: 1.1875rem; }

  .sheet {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s5);
    padding-inline: 40px;
  }

  .pilot-head { padding-block: 18px; }
  .pilot-mark { font-size: 1.375rem; }
  .pilot-nav-wide { display: inline; }

  .leg-title { font-size: 1.75rem; }

  .reading { padding-block: 56px 64px; }
  .reading-title, .reading-place, .reading-answer, .reading-gloss { grid-column: 1 / 9; }
  .reading-title { font-size: 1.625rem; }
  .reading-answer { margin-top: var(--s5); font-size: 3rem; line-height: 1.1; letter-spacing: -0.02em; }
  .reading-gloss { margin-top: var(--s4); font-size: 1.3125rem; }
  .gauge { grid-column: 9 / -1; grid-row: 1 / span 4; align-self: end; margin-top: 0; }
  .gauge-staff { column-gap: 8px; }
  .gauge-bar { padding: 0 8px 4px; font-size: 0.875rem; }
  .gauge-step[aria-current] .gauge-bar { font-size: 2.75rem; padding: 0 10px 6px; }
  .gauge-word { font-size: 0.875rem; }

  .wrackline { padding-block: 56px 64px; }
  .wrackline .leg-title, .wrackline .leg-sub, .wrack { grid-column: 1 / 9; }
  .wrack { column-gap: 6px; margin-top: var(--s6); }
  .wrack-bar { height: calc(var(--n) * 24px); font-size: 0.875rem; padding-bottom: 5px; }
  .wrack-date { font-size: 0.8125rem; }
  .wrack-note { grid-column: 9 / -1; grid-row: 1 / span 3; align-self: end; margin-top: 0; font-size: 1.0625rem; }

  .almanac { padding-block: 56px 64px; }
  .almanac .leg-title, .almanac .leg-sub, .almanac-table { grid-column: 1 / 10; }
  .almanac-key {
    grid-column: 10 / -1; grid-row: 1 / span 3; align-self: start;
    grid-template-columns: max-content; margin-top: 6px; padding-left: var(--s5);
    border-left: 1px solid var(--ink);
  }
  .almanac-table { margin-top: var(--s6); font-size: 0.875rem; }
  .almanac-table col.almanac-c-month { width: 102px; }
  .almanac-table col.almanac-c-count { width: 54px; }
  .almanac-month th, .almanac-month td { height: 32px; }
  .almanac-month th small { display: inline; margin: 0 0 0 6px; }
  .almanac-month .almanac-bar { padding-inline: 12px 24px; }
  .almanac-track { height: 18px; }

  .bearing { padding-block: 56px 64px; }
  .bearing .leg-title, .bearing-facing, .bearing-why, .lee { grid-column: 1 / 7; }
  .bearing-facing { font-size: 2.25rem; line-height: 1.15; }
  .bearing-chart { grid-column: 8 / -1; grid-row: 1 / span 4; margin-top: 0; }
  .lee { margin-top: var(--s6); }

  .notice-row { padding-block: 56px 64px; }
  .notice {
    grid-column: 1 / 10;
    display: grid;
    grid-template-columns: subgrid;
    padding: 32px 0;
  }
  .notice-offer, .notice-list { grid-column: 1 / -1; }
  .notice-offer { display: grid; grid-template-columns: subgrid; align-items: end; }
  .notice:has(.notice-list:target) .notice-offer, .notice--list .notice-offer { display: none; }
  .notice-offer-words { grid-column: 1 / 6; padding-left: 32px; }
  .notice-offer-act { grid-column: 6 / -1; padding-right: 32px; }
  .notice-list:target, .notice--list .notice-list { display: grid; grid-template-columns: subgrid; }
  .notice-list-words { grid-column: 1 / 6; padding-left: 32px; }
  .notice-list-fields { grid-column: 6 / -1; padding-right: 32px; }
  .notice-text { font-size: 1.5rem; line-height: 1.35; }
  .notice-price { margin-top: 0; }
  .notice-figure { font-size: 3rem; line-height: 52px; }

  .soundings { padding-block: 56px 64px; }
  .soundings .leg-title { grid-column: 1 / 4; }
  .soundings-list { grid-column: 4 / 11; grid-row: 1; margin-top: 0; row-gap: var(--s6); }
  .sounding dt { font-size: 1.375rem; }
  .sounding dd { font-size: 1.1875rem; }

  .datum { padding-block: 56px 72px; }
  .datum .leg-title { grid-column: 1 / 4; }
  .datum-credit, .datum-text { grid-column: 4 / 11; }
  .datum-credit { grid-row: 1; margin-top: 4px; }

  .tideline-body { padding-block: 48px 56px; }
  .tideline-beaches { grid-column: 1 / 5; }
  .tideline-site { grid-column: 5 / 9; }
  .tideline-maker { grid-column: 9 / -1; align-self: end; text-align: right; }
  .tideline-beaches, .tideline-site, .tideline-maker { grid-row: 1; }
  .tideline-body--home .tideline-site { grid-column: 1 / 7; }

  /* home */
  .landfall { padding-block: 56px 64px; }
  .landfall-title { grid-column: 1 / 10; font-size: 3rem; line-height: 1.1; letter-spacing: -0.02em; }
  .landfall-date { grid-column: 1 / 7; margin-top: var(--s6); }

  .coasts { padding-block: 8px 48px; }
  .coast { padding-block: 40px 8px; }
  .coast + .coast { border-top: 0; }
  .coast--mexico { grid-column: 1 / 7; }
  .coast--away { grid-column: 7 / -1; }
  .coast--r1 { grid-row: 1; }
  .coast--r2 { grid-row: 2; }
  .coast--r3 { grid-row: 3; }
  .coast-name { font-size: 1.75rem; }
  .coast-beaches { border-top: 2px solid var(--ink); }
  .coast-beach a { min-height: 56px; grid-template-columns: minmax(0, 1fr) 132px auto; }
  .coast-beach-date { grid-column: 2; grid-row: 1; text-align: right; }
  .coast-beach .buoy { grid-column: 3; grid-row: 1; }

  .key { padding-block: 56px 72px; }
  .key .leg-title { grid-column: 1 / 4; }
  .key-points { grid-column: 4 / 9; grid-row: 1; margin-top: 0; }
  .key-legend { grid-column: 10 / -1; grid-row: 1; margin-top: 0; }
  .key-legend-list { grid-template-columns: max-content; }
  .key-point { font-size: 1.1875rem; }
}

/* ---- added when the design was ported (2026-11-14) ---- */

/* the shoreline as traced from NOAA's map: a sand-coloured band with an ink edge */
.chart-shore-edge { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.chart-shore { fill: none; stroke: var(--land); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

/* a day NOAA did not publish: an empty mark, never a low one */
.wrack-day[data-level="none"] .wrack-bar { background: transparent; border-style: dashed; color: var(--ink-2); }
.almanac-gap { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-2); }

/* long text pages: how it works, privacy, terms, contact */
.longread { grid-column: 1 / -1; padding-block: 28px 56px; max-width: 42rem; }
.longread h1 { font-size: 2rem; line-height: 1.12; letter-spacing: -0.015em; font-weight: 500; }
.longread-lead { margin-top: var(--s4); font-size: 1.1875rem; line-height: 1.5; }
.longread h2 { margin-top: var(--s7, 40px); padding-top: var(--s3); border-top: 1.5px solid var(--ink); font-size: 1.3125rem; line-height: 1.25; font-weight: 600; }
.longread p + p, .longread h2 + p { margin-top: var(--s3); }
.longread p { line-height: 1.6; }
.longread a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .longread { grid-column: 1 / 9; padding-block: 56px 88px; }
  .longread h1 { font-size: 3rem; }
}

/* the offer after an email is kept, or when the list is not open yet */
.notice-kept { display: none; }
.notice--kept .notice-kept { display: block; }
.notice--kept .notice-offer, .notice--kept .notice-list { display: none !important; }
.notice-trap { position: absolute; left: -200vw; }
[data-level="none"] { --lvl: transparent; --on-lvl: var(--ink-2); --n: 1; }

/* ---- blog (2026-11-14): articles reuse the long-read page and the beach-list rows ---- */
.notice-shelf { grid-column: 1 / -1; }
.notice-shelf .coast-beach a { grid-template-columns: 1fr auto; }
.notice-body { margin-top: var(--s5); }
.notice-body h3 { margin-top: var(--s5); font-size: 1.125rem; line-height: 1.3; font-weight: 600; }
.notice-body p, .notice-body ul, .notice-body ol, .notice-body table, .notice-body blockquote { margin-top: var(--s3); line-height: 1.6; }
.notice-body ul, .notice-body ol { padding-left: 1.25em; }
.notice-body li + li { margin-top: var(--s1); }
.notice-body blockquote { padding-left: var(--s4); border-left: 3px solid var(--ink); font-style: italic; }
.notice-body table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.875rem; }
.notice-body th, .notice-body td { padding: 6px 8px 6px 0; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
.notice-body th { border-bottom: 1.5px solid var(--ink); font-weight: 600; }
.notice-body code { font-family: var(--mono); font-size: 0.9em; }
.notice-page .soundings-list { margin-top: var(--s3); }
.notice-sources { margin-top: var(--s3); padding-left: 1.25em; line-height: 1.6; }
.notice-onward { margin-top: var(--s7); padding-top: var(--s3); border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .notice-shelf { grid-column: 1 / 10; } }