/* ————————————————————————————————————————————————
   Tidewater & Gale — coastal brokers, Stonington, Maine
   fog #F4F2EC · slate #1F3A4A · buoy #C7392E · glass #9FB6BD · dune #D8C9A3
   ———————————————————————————————————————————————— */

:root {
  --fog: #F4F2EC;
  --paper: #FAF8F1;
  --slate: #1F3A4A;
  --slate-2: #16303F;
  --buoy: #C7392E;
  --glass: #9FB6BD;
  --dune: #D8C9A3;
  --ink: #22333E;
  --hairline: rgba(31, 58, 74, 0.18);
  --hairline-soft: rgba(31, 58, 74, 0.10);
  --disp: "Libre Caslon Display", "Iowan Old Style", Georgia, serif;
  --body: "Mulish", "Avenir Next", system-ui, sans-serif;
  --mono: "Red Hat Mono", "SF Mono", ui-monospace, monospace;
  --ease-swell: cubic-bezier(.33, .01, .18, 1);
  --ease-snap: cubic-bezier(.2, .9, .27, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--fog);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--glass); color: var(--slate-2); }

h1, h2, h3 { font-family: var(--disp); font-weight: 400; color: var(--slate); }

a { color: var(--slate); text-decoration-color: rgba(31,58,74,.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--buoy); }

:focus-visible {
  outline: 2px solid var(--buoy);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 99;
  background: var(--slate); color: var(--fog); padding: .6rem 1rem;
  font-family: var(--mono); font-size: .8rem; transition: top .2s;
}
.skip:focus { top: 1rem; }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate);
  opacity: .75;
}

/* ————— top bar ————— */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 1rem 1.5rem;
  background: color-mix(in srgb, var(--fog) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline-soft);
}
.wordmark {
  font-family: var(--disp); font-size: 1.15rem; letter-spacing: .04em;
  color: var(--slate); text-decoration: none; white-space: nowrap;
}
.wordmark .amp { font-style: italic; color: var(--buoy); }
.topbar nav { display: flex; gap: 1.5rem; }
.topbar nav a {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; color: var(--slate);
}
.topbar nav a:hover { color: var(--buoy); }
.nav-hail { color: var(--buoy) !important; }

/* ————— tide clock (fixed, live) ————— */
.tideclock {
  position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 60;
  display: flex; align-items: center; gap: .65rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: .45rem .8rem .45rem .5rem;
  box-shadow: 0 6px 22px rgba(31,58,74,.12);
}
.tideclock svg { width: 52px; height: 52px; display: block; }
.tc-text { display: flex; flex-direction: column; gap: .1rem; }
.tc-text strong {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  color: var(--slate); font-weight: 500; white-space: nowrap;
}
.tc-text span {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em;
  color: rgba(31,58,74,.65); white-space: nowrap;
}
.tc-dial { stroke: var(--slate); fill: none; }
.tc-tick { stroke: rgba(31,58,74,.55); }
.tc-label { font-family: var(--mono); font-size: 8.5px; fill: var(--slate); text-anchor: middle; letter-spacing: .08em; }
.tc-hand { stroke: var(--buoy); stroke-width: 2.2; stroke-linecap: round; }
.tc-hub { fill: var(--buoy); }

/* ————— chart section (signature) ————— */
.chart-scroll { position: relative; height: 560vh; background: var(--paper); }
.chart-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden;
  cursor: crosshair;
}
.chart-sticky::before {
  /* paper grain over the whole chart viewport */
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'/%3E%3C/filter%3E%3Crect%20width='220'%20height='220'%20filter='url(%23n)'%20opacity='0.6'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: multiply;
}
.chart-stage {
  position: absolute; left: 0; top: 0;
  width: 2000px; height: 1400px;
  transform-origin: 0 0;
  will-change: transform;
}
#chart { display: block; width: 2000px; height: 1400px; }

.swell {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; mix-blend-mode: multiply; opacity: .8;
}

/* chart paper + generated groups */
.chart-paper { fill: var(--paper); }
.shallow-band path { fill: rgba(159,182,189,.16); stroke: rgba(159,182,189,.16); stroke-width: 116; stroke-linejoin: round; }
.shallow-core path { fill: rgba(159,182,189,.20); stroke: rgba(159,182,189,.20); stroke-width: 44; stroke-linejoin: round; }
.ctr { fill: none; stroke: var(--slate); stroke-linejoin: round; }
.ctr-1  { stroke-opacity: .38; stroke-width: 1.4; }
.ctr-2  { stroke-opacity: .30; stroke-width: 1.1; }
.ctr-3  { stroke-opacity: .26; stroke-width: 1;   }
.ctr-5  { stroke-opacity: .22; stroke-width: 1;   }
.ctr-10 { stroke-opacity: .18; stroke-width: 1; stroke-dasharray: 1 7; stroke-linecap: round; }
.snd {
  font-family: var(--mono); font-style: italic; font-size: 14.5px;
  fill: rgba(31,58,74,.52); text-anchor: middle;
}
.snd-ft { font-size: 9.5px; }
.grat { stroke: rgba(31,58,74,.16); stroke-width: 1; fill: none; }
.rock line { stroke: rgba(31,58,74,.5); stroke-width: 1.1; }
.land-fill path { fill: #E4D7AF; }
.land-coast path { fill: none; stroke: rgba(31,58,74,.82); stroke-width: 2; }

/* compass rose */
.rose-ring { fill: none; stroke: rgba(31,58,74,.5); stroke-width: 1.2; }
.rose-ring.thin { stroke-width: .8; stroke-opacity: .6; }
.rose-hub { fill: var(--slate); }
.rose-tick { stroke: rgba(31,58,74,.55); stroke-width: 1; }
.rose-tick.bold { stroke-width: 1.8; stroke: rgba(31,58,74,.8); }
.rose-deg { font-family: var(--mono); font-size: 11px; fill: rgba(31,58,74,.6); text-anchor: middle; }
.rose-card { font-family: var(--disp); font-size: 21px; fill: var(--slate); text-anchor: middle; }
.rose-star { fill: var(--buoy); }
.rose-star.pale { fill: rgba(31,58,74,.4); }
.rose-var { font-family: var(--mono); font-style: italic; font-size: 10.5px; fill: rgba(31,58,74,.55); text-anchor: middle; }

/* hand-authored chart decoration */
.lbl-land { font-family: var(--disp); fill: rgba(31,58,74,.85); text-anchor: middle; letter-spacing: .22em; }
.lbl-water { font-family: var(--disp); font-style: italic; fill: rgba(31,58,74,.55); text-anchor: middle; letter-spacing: .34em; }
.lbl-note { font-family: var(--mono); font-style: italic; fill: rgba(31,58,74,.55); text-anchor: middle; }
.lbl-danger { font-family: var(--mono); font-style: italic; fill: rgba(199,57,46,.75); text-anchor: middle; }
.ferry-route { fill: none; stroke: rgba(31,58,74,.55); stroke-width: 1.6; stroke-dasharray: 11 9; }
.ferry-lbl { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; fill: rgba(31,58,74,.62); }
.shoal { fill: url(#hatch); stroke: rgba(31,58,74,.5); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; }
.house-mark { fill: var(--slate-2); }
.house-leader { stroke: rgba(199,57,46,.6); stroke-width: 1.3; stroke-dasharray: 3 5; fill: none; }
.title-block text { fill: var(--slate); }
.tb-back { fill: var(--paper); stroke: rgba(31,58,74,.4); stroke-width: 1.2; }
.tb-back2 { fill: none; stroke: rgba(31,58,74,.25); stroke-width: 1; }
.tb-brand { font-family: var(--disp); font-size: 34px; letter-spacing: .06em; }
.tb-line { font-family: var(--mono); font-size: 13.5px; letter-spacing: .14em; }
.tb-line.soft { fill: rgba(31,58,74,.65); font-style: italic; letter-spacing: .05em; }
.tb-rule { stroke: rgba(31,58,74,.5); stroke-width: 1.2; }

/* ————— the survey draws itself: one orchestrated page-load moment ————— */
@keyframes drawline { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes chart-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html.js .land-coast path { stroke-dasharray: 1 1; animation: drawline 1.7s var(--ease-swell) .1s both; }
  html.js .ctr-1 { stroke-dasharray: 1 1; animation: drawline 2s var(--ease-swell) .35s both; }
  html.js .ctr-2 { stroke-dasharray: 1 1; animation: drawline 2s var(--ease-swell) .6s both; }
  html.js .ctr-3 { stroke-dasharray: 1 1; animation: drawline 2s var(--ease-swell) .85s both; }
  html.js .ctr-5 { stroke-dasharray: 1 1; animation: drawline 2s var(--ease-swell) 1.1s both; }
  html.js .ctr-10 { animation: chart-fade 1.2s ease 1.5s both; }
  html.js #chart-sea, html.js .land-fill { animation: chart-fade 1.4s ease .25s both; }
  html.js #chart-soundings, html.js #chart-rocks, html.js #chart-grat { animation: chart-fade 1.4s ease 1.3s both; }
  html.js #chart-deco { animation: chart-fade 1.2s ease 1.55s both; }
  html.js #compass-rose { animation: chart-fade 1.2s ease 1.7s both; }
  html.js #buoys { animation: chart-fade .9s ease 1.9s both; }
}

/* buoys */
.buoy { cursor: pointer; }
.buoy-body, .buoy-band, .buoy-num { transition: transform .35s var(--ease-snap); transform-origin: 0 2px; }
.buoy:hover .buoy-body, .buoy:hover .buoy-band, .buoy:hover .buoy-num { transform: scale(1.18); }
.buoy-ring { fill: none; stroke: rgba(31,58,74,.4); stroke-width: 1.2; }
.buoy-ring.r2 { stroke-opacity: .18; }
.buoy-body { fill: var(--buoy); stroke: var(--slate-2); stroke-width: 1.4; }
.buoy-band { fill: var(--paper); }
.buoy-num {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  fill: var(--paper); text-anchor: middle;
}
.buoy-lbl { font-family: var(--mono); font-size: 13.5px; letter-spacing: .1em; fill: var(--buoy); }
.buoy-lbl tspan { fill: rgba(31,58,74,.78); }

/* fixed chart frame + readout */
.chart-frame {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
}
.chart-frame::before {
  content: ""; position: absolute; inset: 12px;
  border: 1px solid var(--hairline);
}
.chart-frame::after {
  content: ""; position: absolute; inset: 16px;
  border: 1px solid var(--hairline-soft);
}
.cf-top, .cf-bottom {
  position: absolute; left: 34px; right: 34px;
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  color: rgba(31,58,74,.72); text-transform: uppercase;
}
.cf-top { top: 76px; }
.cf-bottom { bottom: 26px; }
.cf-top span, .cf-bottom span { background: var(--paper); padding: 0 .5em; }
#cf-pos { font-variant-numeric: tabular-nums; }
.cf-scale { display: inline-flex; align-items: center; gap: .55em; margin-left: auto; }
@media (min-width: 700px) {
  .cf-bottom span:first-child { margin-left: 200px; } /* clear the tide clock */
}
#cf-scalebar {
  display: inline-block; height: 5px; width: 84px;
  border: 1px solid rgba(31,58,74,.7); border-top: none;
  position: relative;
}
#cf-scalebar::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  border-left: 1px solid rgba(31,58,74,.7);
}

/* overlay stops */
.chart-overlay { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.stop {
  position: absolute; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease-swell), transform .55s var(--ease-swell), visibility 0s .55s;
  transform: translateY(14px);
}
.stop.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .55s var(--ease-swell) .1s, transform .55s var(--ease-swell) .1s, visibility 0s;
  pointer-events: auto;
}
.stop-hero {
  left: clamp(1.5rem, 6vw, 7rem); top: 50%;
  transform: translateY(calc(-50% + 14px));
  max-width: 620px;
}
.stop-hero::before, .stop-out::before {
  /* a bank of fog so the type reads over the chart */
  content: ""; position: absolute; inset: -4rem -5rem; z-index: -1;
  background: radial-gradient(ellipse at 42% 46%,
    rgba(250,248,241,.94) 34%, rgba(250,248,241,.6) 62%, rgba(250,248,241,0) 80%);
}
.stop-out::before { inset: -3rem -4rem; }
.stop-hero.is-active { transform: translateY(-50%); }
.stop-hero h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  line-height: 1.06; letter-spacing: -0.005em;
  margin: 1rem 0 1.2rem;
  text-wrap: balance;
}
.stop-hero .lede { max-width: 33em; color: rgba(34,51,62,.9); }
.scrollcue {
  margin-top: 1.6rem; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--buoy);
}
.scrollcue::after {
  content: ""; display: inline-block; width: .55em; height: .55em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); margin-left: .6em;
}

.stop-prop {
  right: clamp(1.25rem, 6vw, 7rem); top: 50%;
  transform: translateY(calc(-50% + 14px));
  width: min(400px, calc(100vw - 2.5rem));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--buoy);
  box-shadow: 0 18px 50px rgba(31,58,74,.14);
  padding: 1.5rem 1.7rem 1.4rem;
}
.stop-prop.is-active { transform: translateY(-50%); }
.stop-prop.stop-left { right: auto; left: clamp(1.25rem, 6vw, 7rem); }
.stop-no {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
  color: var(--buoy); text-transform: uppercase;
}
.stop-prop h2 { font-size: 1.75rem; line-height: 1.15; margin: .5rem 0 .55rem; }
.stop-prop p { font-size: .95rem; color: rgba(34,51,62,.85); }
.stop-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 1rem; padding-top: .8rem; border-top: 1px dotted var(--hairline);
  font-family: var(--mono); font-size: .78rem; letter-spacing: .05em;
}
.stop-meta .price { color: var(--slate); font-weight: 500; }
.stop-meta a { color: var(--buoy); text-decoration: none; }
.stop-meta a:hover { text-decoration: underline; }

.stop-out { left: 50%; top: 74%; transform: translate(-50%, 14px); text-align: center; }
.stop-out.is-active { transform: translate(-50%, 0); }
.stop-out p { font-family: var(--disp); font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--slate); font-style: italic; }
.stop-out .scrollcue { margin-top: .6rem; }

/* ————— reduced-motion / no-js chart fallback ————— */
html.no-js .chart-scroll, html.rm .chart-scroll { height: auto; }
html.no-js .chart-sticky, html.rm .chart-sticky {
  position: relative; height: auto; overflow: visible; cursor: auto;
  display: flex; flex-direction: column-reverse; /* headline first, chart after */
}
html.no-js .chart-stage, html.rm .chart-stage {
  position: relative; width: 100%; height: auto;
}
html.no-js #chart, html.rm #chart { width: 100%; height: auto; }
html.no-js .chart-overlay, html.rm .chart-overlay { position: relative; padding: 2rem clamp(1.5rem, 6vw, 7rem) 3rem; }
html.no-js .stop, html.rm .stop {
  position: static; opacity: 1; visibility: visible; transform: none;
  pointer-events: auto; margin: 0 auto 1.5rem; max-width: 640px;
}
html.no-js .stop-hero, html.rm .stop-hero { padding-top: 4.5rem; }
html.no-js .swell, html.rm .swell, html.no-js .chart-frame, html.rm .chart-frame { display: none; }

/* ————— shared section chrome ————— */
section { position: relative; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.sect-head { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.sect-head h2 { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.005em; }
.sect-head .rule { flex: 1; border-bottom: 1px solid var(--hairline); position: relative; top: -6px; }

/* ————— firm intro ————— */
.firm { padding: clamp(5rem, 9vw, 8.5rem) 0 clamp(4rem, 7vw, 6.5rem); background: var(--fog); }
.firm-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.firm h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.18; margin: 1.1rem 0 1.4rem; text-wrap: balance; }
.firm p { max-width: 36em; }
.firm p + p { margin-top: 1em; }
.firm em { font-style: italic; }
.firm-aside {
  border-top: 3px solid var(--slate);
  padding-top: 1.1rem;
  font-size: .92rem;
}
.firm-aside dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.2rem; }
.firm-aside dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(31,58,74,.65); padding-top: .2em; }
.firm-aside dd { color: var(--ink); }

/* ————— moorings: ship's-log pages ————— */
.moorings { background: var(--fog); padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 8vw, 7rem); }
.log {
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 60px rgba(31,58,74,.10);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.log-head {
  display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap;
  padding: 1.6rem clamp(1.4rem, 3.5vw, 2.8rem) 1.3rem;
  border-bottom: 3px double rgba(31,58,74,.5);
}
.log-no {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .16em;
  color: var(--paper); background: var(--buoy);
  padding: .3em .7em; border-radius: 2px; white-space: nowrap;
}
.log-head h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1; }
.log-pos { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; color: rgba(31,58,74,.65); margin-top: .35rem; }
.log-price { margin-left: auto; text-align: right; font-family: var(--disp); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--slate); white-space: nowrap; }
.log-price span {
  display: block; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(31,58,74,.6);
}
.log-body {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 0;
}
.log-fig { border-right: 1px solid var(--hairline-soft); padding: clamp(1.4rem, 3vw, 2.4rem); display: flex; flex-direction: column; justify-content: center; gap: 1rem; background: linear-gradient(180deg, rgba(159,182,189,.07), rgba(159,182,189,0) 55%); }
.log-fig svg { width: 100%; height: auto; display: block; }
.log-fig figcaption { font-family: var(--mono); font-size: .72rem; font-style: italic; letter-spacing: .05em; color: rgba(31,58,74,.6); }

.log-page {
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background:
    linear-gradient(90deg, transparent 0, transparent 2.2rem, rgba(199,57,46,.28) 2.2rem, rgba(199,57,46,.28) calc(2.2rem + 1px), transparent calc(2.2rem + 1px)),
    repeating-linear-gradient(180deg, transparent 0, transparent 27px, rgba(159,182,189,.28) 27px, rgba(159,182,189,.28) 28px);
  background-origin: content-box;
}
.log-page > * { padding-left: 3rem; }
.specs { font-size: .9rem; }
.specs .row { display: flex; align-items: baseline; gap: .6em; line-height: 28px; }
.specs dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(31,58,74,.72); white-space: nowrap; }
.specs .leader { flex: 1; border-bottom: 1px dotted rgba(31,58,74,.4); position: relative; top: -4px; min-width: 1.5em; }
.specs dd { text-align: right; color: var(--ink); }
.specs .ditto { color: rgba(31,58,74,.55); font-family: var(--disp); }
.remarks { margin-top: 1.6rem; }
.remarks h4 {
  font-family: var(--mono); font-weight: 500; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--buoy);
  margin-bottom: .5rem; line-height: 28px;
}
.remarks p { font-size: .95rem; line-height: 28px; }
.remarks p + p { margin-top: 28px; }
.remarks .plainly { color: rgba(34,51,62,.85); }
.remarks .plainly strong { font-weight: 700; color: var(--slate); }

/* house elevation drawing styles */
.hs-line { stroke: var(--slate); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hs-fill { fill: var(--paper); stroke: var(--slate); stroke-width: 1.6; stroke-linejoin: round; }
.hs-shade { fill: rgba(159,182,189,.30); stroke: var(--slate); stroke-width: 1.6; stroke-linejoin: round; }
.hs-dune { fill: rgba(216,201,163,.5); stroke: none; }
.hs-red { fill: var(--buoy); stroke: var(--slate-2); stroke-width: 1.3; }
.hs-thin { stroke: rgba(31,58,74,.55); stroke-width: 1; fill: none; }
.hs-fog { fill: rgba(159,182,189,.14); }
.hs-water { stroke: rgba(31,58,74,.4); stroke-width: 1.2; fill: none; }
.hs-glass { fill: rgba(159,182,189,.4); stroke: var(--slate); stroke-width: 1.2; }

/* ————— weather board (dark) ————— */
.weather { background: var(--slate); color: var(--fog); padding: clamp(4.5rem, 8vw, 7rem) 0; }
.weather .sect-head h2 { color: var(--fog); }
.weather .sect-head .rule { border-color: rgba(244,242,236,.25); }
.weather .eyebrow { color: var(--glass); opacity: 1; }
.weather-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.weather-copy p { color: rgba(244,242,236,.88); max-width: 34em; }
.weather-copy p + p { margin-top: 1em; }
.weather-copy .kicker { font-family: var(--disp); font-style: italic; font-size: 1.35rem; line-height: 1.4; color: var(--dune); margin-bottom: 1.2rem; }
table.board { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .82rem; }
.board caption {
  text-align: left; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--glass);
  padding-bottom: .8rem;
}
.board th, .board td { padding: .65rem .5rem; text-align: right; font-weight: 400; }
.board thead th {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--glass); border-bottom: 1px solid rgba(244,242,236,.3);
}
.board tbody th { text-align: left; color: var(--dune); letter-spacing: .06em; }
.board td { color: rgba(244,242,236,.92); border-bottom: 1px solid rgba(244,242,236,.12); font-variant-numeric: tabular-nums; }
.board tbody th { border-bottom: 1px solid rgba(244,242,236,.12); }
.board .ditto { color: rgba(244,242,236,.5); }
.board tfoot td {
  border: none; text-align: left; padding-top: 1rem;
  font-style: italic; font-size: .72rem; color: rgba(244,242,236,.6);
}

/* ————— passage ————— */
.passage { background: var(--fog); padding: clamp(4.5rem, 8vw, 7rem) 0; }
.passage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; }
.pass-card {
  background: var(--paper); border: 1px solid var(--hairline);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.pass-card h3 { font-size: 1.5rem; margin: .4rem 0 1rem; }
.timetable { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .82rem; }
.timetable th, .timetable td { text-align: left; padding: .5rem .6rem .5rem 0; border-bottom: 1px dotted var(--hairline); font-weight: 400; }
.timetable thead th { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(31,58,74,.6); }
.timetable td.num { font-variant-numeric: tabular-nums; }
.timetable .ditto { color: rgba(31,58,74,.5); }
.pass-note { margin-top: 1rem; font-size: .88rem; color: rgba(34,51,62,.85); }
.causeway-live {
  margin-top: 1.2rem; padding: .9rem 1rem;
  border-left: 3px solid var(--buoy);
  background: rgba(199,57,46,.06);
  font-family: var(--mono); font-size: .8rem; line-height: 1.7;
}
.causeway-live strong { color: var(--buoy); font-weight: 500; letter-spacing: .1em; }
.drive-list { list-style: none; margin-top: 1.1rem; }
.drive-list li { display: flex; gap: .6em; align-items: baseline; padding: .35rem 0; font-size: .92rem; }
.drive-list .leader { flex: 1; border-bottom: 1px dotted rgba(31,58,74,.4); position: relative; top: -4px; }
.drive-list .t { font-family: var(--mono); font-size: .82rem; }

/* ————— hail (form) ————— */
.hail { background: var(--fog); padding: 0 0 clamp(5rem, 9vw, 8rem); }
.hail-inner {
  max-width: 760px; margin: 0 auto;
  background: var(--slate); color: var(--fog);
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(31,58,74,.25);
}
.hail-inner .eyebrow { color: var(--glass); opacity: 1; }
.hail-inner h2 { color: var(--fog); font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin: .8rem 0 .6rem; }
.hail-inner > p { color: rgba(244,242,236,.85); max-width: 38em; }
.hail form { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.4rem; }
.hail .field { display: flex; flex-direction: column; gap: .4rem; }
.hail .field.full { grid-column: 1 / -1; }
.hail label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--glass);
}
.hail input, .hail select, .hail textarea {
  background: rgba(244,242,236,.07);
  border: 1px solid rgba(244,242,236,.3);
  border-radius: 2px;
  color: var(--fog);
  font-family: var(--body); font-size: .95rem;
  padding: .7rem .8rem;
}
.hail select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--glass) 50%), linear-gradient(135deg, var(--glass) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.hail select option { color: var(--ink); background: var(--fog); }
.hail textarea { min-height: 7.5rem; resize: vertical; }
.hail input::placeholder, .hail textarea::placeholder { color: rgba(244,242,236,.4); }
.hail input:focus-visible, .hail select:focus-visible, .hail textarea:focus-visible {
  outline: 2px solid var(--dune); outline-offset: 2px; border-color: transparent;
}
.hail button {
  grid-column: 1 / -1; justify-self: start;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  background: var(--buoy); color: var(--fog);
  border: none; border-radius: 2px; padding: .95rem 1.8rem;
  cursor: pointer;
  transition: transform .25s var(--ease-snap), box-shadow .25s var(--ease-snap), background .2s;
}
.hail button:hover { background: #B23227; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.hail button:focus-visible { outline: 2px solid var(--dune); outline-offset: 3px; }
.hail-fine { grid-column: 1 / -1; font-family: var(--mono); font-size: .7rem; font-style: italic; color: rgba(244,242,236,.55); }
.hail-reply { margin-top: 1.4rem; font-family: var(--mono); font-size: .85rem; color: var(--dune); min-height: 1.5em; }

/* ————— footer ————— */
footer { background: var(--slate-2); color: rgba(244,242,236,.75); padding: 3rem 0 2.2rem; font-size: .85rem; }
.foot-grid { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: baseline; }
footer .wordmark { color: var(--fog); font-size: 1.05rem; }
footer address { font-style: normal; font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; line-height: 2; }
footer a { color: rgba(244,242,236,.85); }
.foot-fine {
  margin-top: 2rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(244,242,236,.12);
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  font-size: .72rem; font-family: var(--mono); color: rgba(244,242,236,.5);
}
.foot-fine a { color: rgba(244,242,236,.6); }

/* Sections do not animate in: the chart is the page's one choreographed moment,
   and a ship's log does not fade — it is simply there when you turn to it. */

/* ————— responsive ————— */
@media (max-width: 1024px) {
  .log-body { grid-template-columns: 1fr; }
  .log-fig { border-right: none; border-bottom: 1px solid var(--hairline-soft); }
  .firm-grid { grid-template-columns: 1fr; }
  .weather-grid { grid-template-columns: 1fr; }
  .passage-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .topbar { padding: .8rem 1rem; }
  .topbar nav { gap: .9rem; }
  .topbar nav a:not(.nav-hail) { display: none; }
  .stop-hero { left: 1.25rem; right: 1.25rem; max-width: none; }
  .stop-prop, .stop-prop.stop-left {
    left: 1rem; right: 1rem; top: auto; bottom: 5.6rem; width: auto;
    transform: translateY(14px); padding: 1.1rem 1.2rem 1rem;
  }
  .stop-prop.is-active { transform: none; }
  .stop-prop h2 { font-size: 1.4rem; }
  .stop-prop p { font-size: .88rem; }
  .stop-out { width: 100%; padding: 0 1.25rem; }
  .cf-top { top: 64px; flex-direction: column; gap: .2rem; align-items: flex-start; }
  .cf-top span, .cf-bottom span { padding-left: 0; }
  .cf-bottom span:first-child { display: none; }
  .tideclock { left: .75rem; bottom: .75rem; padding: .35rem .6rem .35rem .4rem; gap: .5rem; }
  .tideclock svg { width: 42px; height: 42px; }
  .tc-text strong { font-size: .64rem; }
  .tc-text span { font-size: .6rem; }
  .log-head { padding: 1.2rem 1.2rem 1rem; gap: .8rem 1rem; }
  .log-price { margin-left: 0; text-align: left; }
  .log-page > * { padding-left: 0; }
  .log-page { background: repeating-linear-gradient(180deg, transparent 0, transparent 27px, rgba(159,182,189,.28) 27px, rgba(159,182,189,.28) 28px); background-origin: content-box; }
  .specs .row { flex-wrap: nowrap; }
  .hail form { grid-template-columns: 1fr; }
  .foot-grid { flex-direction: column; gap: 1rem; }
}