/* =====================================================================
   Ports of Fleetwood and Silloth: site stylesheet, rebuild v1
   ---------------------------------------------------------------------
   Palette: the Fox brand values from design/tokens.css, unchanged, plus
   one new accent family, "dock cyan", sampled from the marina ops hub
   (#3294C0 is the software's primary action colour).

   Type: a golden ratio scale (phi = 1.618) on a 17px body.
     body 17px, h3 27.5px, h2 44.5px, h1 72px on a wide screen.
     On a phone every step is the square root of phi (1.272), so two
     phone steps still make one golden step: 17, 21.6, 27.5, 35.
   Spacing uses the same ratio, so section rhythm matches the type.
   ===================================================================== */

:root {
  /* Brand values. Do not alter. */
  --deep-blue: #00355F;     /* white on it 12.54:1 */
  --blue: #00579E;          /* on white 7.35:1, links */
  --orange: #EB941F;        /* blocks and accents only, never text on light */
  --orange-deep: #A85F00;   /* the only orange that carries text on light, 4.88:1 */
  --muted: #4E6473;         /* on white 6.19:1 */
  --paper: #F5F7FA;
  --white: #FFFFFF;
  --rule: #C7D2DA;          /* decorative hairlines only */
  --rule-strong: #7F94A3;   /* meaningful boundaries, 3.15:1 */

  /* New accent: dock cyan, from the marina ops hub. */
  --cyan: #3294C0;          /* graphics and large type. 3.42:1 on white, 3.66:1 on deep blue */
  --cyan-light: #5FB3DA;    /* text on deep blue, 5.34:1 */
  --cyan-deep: #1B6F93;     /* text on light, 5.61:1 on white, 5.23:1 on paper */
  --mist: #E6F2F8;          /* tinted light ground. Deep blue on it 11.0:1 */

  /* Semantic tokens, light theme. */
  --bg: var(--white);
  --bg-alt: var(--paper);
  --bg-tint: var(--mist);
  --ink: var(--deep-blue);
  --ink-muted: var(--muted);
  --link: var(--blue);
  --link-visited: var(--muted);
  --accent-ink: var(--cyan-deep);
  --line: var(--rule);
  --line-strong: var(--rule-strong);
  --focus: var(--deep-blue);
  --warn-ink: var(--orange-deep);

  /* Golden ratio type scale. */
  --phi: 1.618;
  --fs-small: 0.8359rem;                                   /* 13.4px, 17 / sqrt(phi) */
  --fs-body: 1.0625rem;                                    /* 17px */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);    /* 17 to 19px */
  --fs-h3: clamp(1.125rem, 1.05rem + 0.25vw, 1.2rem);      /* 18 to 19.2px, 17 x phi^0.25 */
  --fs-h2: clamp(1.5rem, 1.15rem + 1vw, 1.7191rem);        /* 24 to 27.5px, 17 x phi */
  --fs-h1: clamp(2.1875rem, 1.3rem + 2.1vw, 2.7813rem);    /* 35 to 44.5px, 17 x phi squared */

  --lh-body: 1.618;
  --lh-h3: 1.3;
  --lh-h2: 1.18;
  --lh-h1: 1.08;

  /* Golden spacing. */
  --s-1: 0.4063rem;  /* 6.5px */
  --s0: 0.6563rem;   /* 10.5px */
  --s1: 1.0625rem;   /* 17px */
  --s2: 1.7191rem;   /* 27.5px */
  --s3: 2.7813rem;   /* 44.5px */
  --s4: 4.5rem;      /* 72px */
  --s5: 7.2813rem;   /* 116.5px */
  --section-gap: clamp(var(--s2), 2vw + 1rem, var(--s3));

  --font-display: 'Arvo', Rockwell, 'Roboto Slab', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --measure: 75ch;
  --page: 90rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --radius: 4px;
  --tap: 2.75rem;
  --control: 3rem;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 1rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }

/* ---------- Headings: one H1, H2 for sections, H3 under them ---------- */
h1, h2, h3 { color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.01em; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.005em; }
h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); }

p, ul, ol, table, figure, .note, .callout { margin: 0 0 var(--s1); }
.prose > * + h2 { margin-top: 0; }
.prose p, .prose ul:not([class]), .prose ol:not([class]) { max-width: var(--measure); }
.prose ul:not([class]) li + li, .prose ol:not([class]) li + li { margin-top: var(--s-1); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); max-width: 70ch; }
strong { font-weight: 600; }

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

.skip-link { position: absolute; left: -999px; top: 0; background: var(--white); color: var(--deep-blue); padding: var(--s0) var(--s1); z-index: 100; font-weight: 600; }
.skip-link:focus { left: var(--gutter); top: var(--s0); }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Draft flag ---------- */
.draft-flag { background: var(--paper); color: var(--muted); font-size: var(--fs-small); border-bottom: 1px solid var(--rule); }
.draft-flag .wrap { padding-top: var(--s-1); padding-bottom: var(--s-1); }
.draft-flag strong { color: var(--deep-blue); }

/* ---------- Masthead ---------- */
.masthead { background: var(--deep-blue); color: var(--white); position: relative; z-index: 20; }
.masthead a { color: var(--white); }
.masthead__bar { display: flex; align-items: center; gap: var(--s1); padding-top: var(--s0); padding-bottom: var(--s0); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: var(--s0); text-decoration: none; min-height: var(--tap); margin-right: auto; }
.brand img { width: 44px; height: 44px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.brand__sub { font-size: var(--fs-small); color: var(--cyan-light); }

.context { display: flex; align-items: center; gap: var(--s0); flex-wrap: wrap; }
.context__label { font-size: var(--fs-small); color: rgba(255,255,255,.78); }
.switcher { display: flex; list-style: none; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius); overflow: hidden; }
.switcher a { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--s1); text-decoration: none; font-size: 0.9375rem; }
.switcher li + li a { border-left: 1px solid rgba(255,255,255,.35); }
.switcher a[aria-current="true"] { background: var(--white); color: var(--deep-blue); font-weight: 600; }
.switcher a:not([aria-current="true"]):hover { background: rgba(255,255,255,.1); }

.quick-contact { font-size: var(--fs-small); color: rgba(255,255,255,.85); }
.quick-contact strong { color: var(--white); }

/* ---------- Mega menu ---------- */
.nav { position: relative; border-top: 1px solid rgba(255,255,255,.22); }
.nav__list { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--page); display: flex; align-items: stretch; }
@media screen and (min-width: 64em) { .nav__list { padding-left: calc(var(--gutter) - var(--s1)); padding-right: calc(var(--gutter) - var(--s1)); } }
.nav__item { position: static; }
.nav__item > details > summary,
.nav__item > a {
  display: flex; align-items: center; gap: var(--s-1);
  min-height: 3.25rem; padding: 0 var(--s1);
  color: var(--white); text-decoration: none; font-weight: 600; font-size: 0.9688rem;
  cursor: pointer; list-style: none; border-bottom: 3px solid transparent;
}
.nav__item > details > summary::-webkit-details-marker { display: none; }
.nav__item > details > summary::after {
  content: ""; width: 0.45em; height: 0.45em; margin-left: 0.15em; margin-top: -0.2em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .15s ease;
}
.nav__item > details[open] > summary::after { transform: rotate(-135deg); margin-top: 0.25em; }
.nav__item > details > summary:hover, .nav__item > a:hover { background: rgba(255,255,255,.08); }
.nav__item > details[open] > summary { background: var(--white); color: var(--deep-blue); }
.nav__item.is-current > details > summary,
.nav__item.is-current > a { border-bottom-color: var(--orange); }
.nav__item--cta { margin-left: auto; }
.nav__item--cta > a { border: 0; padding-right: var(--s1); }
.nav__item--cta > a span { background: var(--cyan-light); color: var(--deep-blue); padding: var(--s-1) var(--s1); border-radius: var(--radius); }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); color: var(--deep-blue);
  border-top: 3px solid var(--cyan);
  box-shadow: 0 18px 40px rgba(0, 53, 95, .22);
}
.mega__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: var(--s3); padding-top: var(--s2); padding-bottom: var(--s2); }
.mega__inner--wide { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr); }
.mega__col-title { font-weight: 700; font-size: 1.0625rem; color: var(--deep-blue); margin: 0 0 var(--s-1); padding-bottom: var(--s-1); border-bottom: 2px solid var(--cyan); }
.mega__links { list-style: none; margin: 0; padding: 0; }
.mega__links a { display: flex; align-items: center; min-height: 2rem; padding: 2px 0; color: var(--muted); text-decoration: none; font-weight: 400; font-size: 0.9063rem; line-height: 1.35; }
.mega__links a:hover { color: var(--deep-blue); text-decoration: underline; }
.mega__links a[aria-current="page"] { font-weight: 600; color: var(--deep-blue); box-shadow: inset 3px 0 0 var(--orange); padding-left: var(--s0); }
.mega__links small { display: block; }
.mega__feature { background: var(--deep-blue); color: var(--white); border-radius: var(--radius); padding: var(--s1) var(--s2); font-size: 0.9375rem; display: flex; flex-direction: column; gap: var(--s0); }
.mega__feature p { margin: 0; }
.mega__feature .mega__feature-title { font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.mega__feature a { color: var(--white); font-weight: 600; }
.mega__feature--mist { background: var(--mist); color: var(--deep-blue); }
.mega__feature--mist a { color: var(--deep-blue); }
.mega__feature img { border-radius: 2px; aspect-ratio: 2.618; object-fit: cover; width: 100%; }
.mega__radio { display: inline-block; background: var(--orange); color: var(--deep-blue); font-weight: 700; padding: 2px var(--s0); border-radius: var(--radius); align-self: flex-start; }

/* Phone: the menu stacks, every group is still a native disclosure. */
.nav-toggle { display: none; }
@media screen and (max-width: 63.99em) {
  .nav__list { flex-direction: column; }
  .nav__item > details > summary, .nav__item > a { justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.14); }
  .nav__item.is-current > details > summary, .nav__item.is-current > a { box-shadow: inset 4px 0 0 var(--orange); border-bottom-color: rgba(255,255,255,.14); }
  .nav__item--cta { margin-left: 0; }
  .mega { position: static; box-shadow: none; border-top: 0; }
  .mega__inner, .mega__inner--wide { grid-template-columns: 1fr; gap: var(--s1); padding-top: var(--s1); padding-bottom: var(--s2); }
  .mega__feature { padding: var(--s1); }
  .nav-toggle { display: flex; }
  .js .nav:not(.is-open) .nav__list { display: none; }
  .nav-toggle button { all: unset; display: flex; align-items: center; gap: var(--s0); min-height: var(--control); padding: 0 var(--s1); font-weight: 600; cursor: pointer; width: 100%; box-sizing: border-box; }
  .nav-toggle button:focus-visible { outline: 3px solid var(--white); outline-offset: -3px; }
  .nav-toggle__icon { width: 20px; height: 14px; position: relative; border-top: 2px solid; border-bottom: 2px solid; }
  .nav-toggle__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 2px solid; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { background: var(--bg-alt); border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.breadcrumbs ol { list-style: none; margin: 0; padding: var(--s0) 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s0); }
.breadcrumbs li { display: flex; align-items: center; gap: var(--s0); color: var(--ink-muted); }
.breadcrumbs li + li::before { content: ""; width: 0.4em; height: 0.4em; border-right: 1.5px solid var(--line-strong); border-top: 1.5px solid var(--line-strong); transform: rotate(45deg); }
.breadcrumbs a { color: var(--link); }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- Page head ---------- */
.page-head { padding-top: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.page-head__port { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--accent-ink); font-weight: 600; font-size: 0.9375rem; margin-bottom: var(--s1); }
.page-head__port::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--cyan); }
.page-head h1 { max-width: 30ch; margin-bottom: var(--s1); }
.page-head .lead { margin: 0; max-width: 70ch; }

/* ---------- Golden split: content 1.618, aside 1 ---------- */
.page-grid { display: grid; grid-template-columns: minmax(0, 2.618fr) minmax(0, 1fr); gap: var(--s3); padding-top: var(--s2); padding-bottom: var(--s3); align-items: start; }
@media screen and (max-width: 63.99em) {
  .page-grid { grid-template-columns: 1fr; gap: var(--s3); }
  .aside .toc { display: none; }
}

/* Every H2 section is the same unit, with the same space above and below. */
.block { padding-bottom: var(--section-gap); margin-bottom: var(--section-gap); border-bottom: 1px solid var(--line); }
.block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.block > h2 { margin-bottom: var(--s1); }
.block h3 { margin: var(--s1) 0 var(--s-1); }
.block > h2 + h3, .block > h2 + .sub > h3:first-child { margin-top: 0; }
.sub { padding-left: var(--s1); border-left: 2px solid var(--line); margin-bottom: var(--s1); }
.sub:last-child { margin-bottom: 0; }
.sub > h3 { margin-top: 0; }

/* Aside */
.aside { position: sticky; top: var(--s1); display: grid; gap: var(--s1); }
@media screen and (max-width: 63.99em) { .aside { position: static; } }
.panel { background: var(--bg-alt); border-radius: var(--radius); padding: var(--s1) var(--s2); }
.panel__title { font-weight: 600; margin: 0 0 var(--s0); }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li + li { border-top: 1px solid var(--line); }
.panel li a { display: flex; align-items: center; min-height: var(--tap); padding: var(--s-1) 0; }
.panel li a[aria-current="page"] { font-weight: 700; color: var(--ink); text-decoration: none; box-shadow: inset 3px 0 0 var(--orange); padding-left: var(--s0); }
.panel--dark { background: var(--deep-blue); color: var(--white); }
.panel--dark .panel__title, .panel--dark p { color: var(--white); }
.panel--dark a { color: var(--white); }
.panel--dark .big { font-family: var(--font-display); font-weight: 700; font-size: 1.3516rem; line-height: 1.2; margin: 0 0 var(--s0); }
.panel--dark .big span { color: var(--orange); }
.panel--dark p:last-child { margin-bottom: 0; }

/* ---------- Components ---------- */
.callout { border-left: 6px solid var(--orange); background: var(--deep-blue); color: var(--white); padding: var(--s2); border-radius: 0 var(--radius) var(--radius) 0; max-width: var(--measure); }
.callout p { color: var(--white); }
.callout p:last-child { margin-bottom: 0; }
.callout a { color: var(--white); }
.callout__title { font-weight: 700; font-size: 1.1875rem; margin-bottom: var(--s0) !important; }
.callout--info { border-left-color: var(--cyan); background: var(--bg-tint); color: var(--ink); }
.callout--info p, .callout--info a { color: var(--ink); }

.note { border: 2px dashed var(--orange-deep); border-radius: var(--radius); padding: var(--s1) var(--s2); background: var(--bg); max-width: var(--measure); font-size: 0.9688rem; }
.note__label { display: block; font-weight: 700; color: var(--warn-ink); margin-bottom: var(--s-1); }
.note p:last-child { margin-bottom: 0; }

.link-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--s1); }
.link-list li { margin: 0; }
.link-list a { display: block; height: 100%; padding: var(--s1) var(--s2) var(--s1) var(--s1); border: 1px solid var(--line-strong); border-radius: var(--radius); text-decoration: none; color: var(--ink); border-left: 4px solid var(--cyan); }
.link-list a:hover { background: var(--bg-tint); }
.link-list strong { display: block; color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; }
.link-list span { display: block; color: var(--ink-muted); font-size: 0.9375rem; margin-top: 2px; }

figure { margin: 0 0 var(--s2); }
figure img { border-radius: var(--radius); width: 100%; aspect-ratio: 1.618; object-fit: cover; }
figcaption { font-size: 0.9375rem; color: var(--ink-muted); margin-top: var(--s0); max-width: var(--measure); }

.table-wrap { overflow-x: auto; margin-bottom: var(--s1); }
table { border-collapse: collapse; width: 100%; font-size: 0.9688rem; border: 1px solid var(--line-strong); }
caption { text-align: left; font-weight: 600; padding-bottom: var(--s0); color: var(--ink); }
th, td { text-align: left; padding: var(--s0) var(--s1); border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--deep-blue); color: var(--white); font-weight: 600; }
tbody tr:nth-child(even) { background: var(--bg-alt); }
tbody th { font-weight: 600; }
@media screen and (max-width: 47.99em) {
  .table-stack table, .table-stack thead, .table-stack tbody, .table-stack tr, .table-stack th, .table-stack td { display: block; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack tr { border-bottom: 1px solid var(--line-strong); padding: var(--s0) 0; }
  .table-stack td, .table-stack tbody th { border: 0; padding: 2px var(--s1); }
  .table-stack td::before { content: attr(data-label) ": "; font-weight: 600; }
}

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control); padding: 0 var(--s2); border-radius: var(--radius); font-weight: 600; text-decoration: none; border: 2px solid transparent; }
.btn--light { background: var(--white); color: var(--deep-blue) !important; }
.btn--light:hover { background: var(--mist); }
.btn--ghost { border-color: rgba(255,255,255,.7); color: var(--white) !important; }
.btn--ghost:hover { background: rgba(255,255,255,.1); }
.btn--primary { background: var(--deep-blue); color: var(--white) !important; }
.btn--primary:hover { background: var(--blue); }

.meta-line { font-size: var(--fs-small); color: var(--ink-muted); margin-top: var(--s2); }
.meta-line code { font-size: 0.95em; }

/* Status words, drawn not coloured alone */
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9375rem; }
.status::before { content: ""; width: 0.65em; height: 0.65em; border-radius: 50%; }
.status--open::before { background: var(--cyan-deep); }
.status--closed { color: var(--warn-ink); }
.status--closed::before { border: 2px solid currentColor; background: transparent; }

/* ---------- Home ---------- */
/* Home hero. Text stays on solid navy; the photo fades in from the navy
   and runs to the right edge. The mark is never placed on the photo or the
   gradient (BRAND.md), so it stays in the header only. */
.hero { background: var(--deep-blue); color: var(--white); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); container-type: inline-size; }
.hero__text {
  padding: var(--s3) var(--s3) var(--s3) max(var(--gutter), calc((100cqw - var(--page)) / 2 + var(--gutter)));
  display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1;
}
.hero__text h1 { color: var(--white); margin-bottom: var(--s0); max-width: 22ch; }
.hero__text .lead { color: rgba(255,255,255,.92); margin-bottom: var(--s2); max-width: 52ch; }
.hero__notice { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s0); margin: 0 0 var(--s2); font-size: 0.9375rem; color: rgba(255,255,255,.92); }
.hero__notice a { color: var(--white); font-weight: 600; }
.hero__date { background: var(--orange); color: var(--deep-blue); font-weight: 700; padding: 2px var(--s0); border-radius: var(--radius); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s1); }
.hero__link { color: var(--white) !important; font-weight: 600; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-1); }
.hero__photo { position: relative; min-height: 24rem; overflow: hidden; }
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, var(--deep-blue) 0%, rgba(0,53,95,.82) 14%, rgba(0,53,95,.35) 38%, rgba(0,53,95,0) 62%);
}
@media screen and (max-width: 63.99em) {
  .hero { grid-template-columns: 1fr; }
  .hero__photo { order: -1; min-height: 0; aspect-ratio: 2.2; }
  .hero__photo::after { background: linear-gradient(to bottom, rgba(0,53,95,0) 45%, rgba(0,53,95,.7) 80%, var(--deep-blue) 100%); }
  .hero__text { padding: var(--s1) var(--gutter) var(--s3); }
}

.tasks { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.tasks__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: var(--s1); padding-top: var(--s2); padding-bottom: var(--s2); }
.task { display: block; background: var(--bg); border: 1px solid var(--line-strong); border-top: 4px solid var(--cyan); border-radius: var(--radius); padding: var(--s1); text-decoration: none; color: var(--ink); }
a.task:hover { background: var(--bg-tint); }
a.task strong { color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; }
.task strong { display: block; font-size: 1.0625rem; }
.task span { display: block; color: var(--ink-muted); font-size: 0.9375rem; margin-top: 2px; }
.task--dark { background: var(--deep-blue); border-color: var(--deep-blue); border-top-color: var(--orange); color: var(--white); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
.task--dark p { margin: 0; }
.task--dark strong { color: var(--white); }
.task--dark span { color: rgba(255,255,255,.88); }
@media screen and (max-width: 63.99em) { .tasks__grid { grid-template-columns: 1fr 1fr; } .task--dark { grid-column: 1 / -1; } }
@media screen and (max-width: 29.99em) { .tasks__grid { grid-template-columns: 1fr; } .task--dark { grid-template-columns: 1fr; } }

.transfer { background: var(--bg-tint); border-bottom: 1px solid var(--line); }
.transfer__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding-top: var(--s2); padding-bottom: var(--s2); }
.transfer__date { background: var(--orange); color: var(--deep-blue); font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; padding: var(--s0) var(--s1); border-radius: var(--radius); white-space: nowrap; }
.transfer p { margin: 0; max-width: 60ch; }
.transfer__links { display: flex; flex-wrap: wrap; gap: var(--s0) var(--s1); }
@media screen and (max-width: 63.99em) { .transfer__grid { grid-template-columns: 1fr; gap: var(--s1); } .transfer__date { justify-self: start; } }

.home-section { padding-top: var(--section-gap); padding-bottom: var(--section-gap); border-bottom: 1px solid var(--line); }
.home-section:nth-of-type(even) { background: var(--bg-alt); }
.home-section__head { margin-bottom: var(--s2); }
.home-section__head h2 { margin-bottom: var(--s0); }
.home-section__head p { margin: 0; max-width: 75ch; }

.port-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
@media screen and (max-width: 63.99em) { .port-cards { grid-template-columns: 1fr; } }
.port-card { background: var(--bg); border: 1px solid var(--line-strong); border-top: 6px solid var(--deep-blue); border-radius: var(--radius); padding: var(--s2); display: flex; flex-direction: column; }
.port-card--marina { border-top-color: var(--cyan); }
.port-card h3 { margin-bottom: var(--s-1); }
.port-card__entity { font-size: var(--fs-small); color: var(--ink-muted); margin-bottom: var(--s1); }
.port-card__facts { margin: 0 0 var(--s2); }
.port-card__action { margin-top: auto; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2) var(--s3); }
@media screen and (max-width: 63.99em) { .two-col { grid-template-columns: 1fr; gap: var(--s2); } }
.two-col h3 { margin-bottom: var(--s0); }
.two-col p { max-width: 70ch; }

/* ---------- Standing notice and footer ---------- */
.standing { background: var(--bg-alt); border-top: 1px solid var(--line); }
.standing__inner { padding-top: var(--s3); padding-bottom: var(--s3); border-left: 0; }
.standing__box { border-left: 6px solid var(--deep-blue); padding-left: var(--s2); max-width: var(--measure); }
.standing__title { font-weight: 700; font-size: 1.1875rem; margin: 0 0 var(--s0); }
.standing p { font-size: 0.9688rem; }
.standing p:last-child { margin-bottom: 0; }

.footer { background: var(--deep-blue); color: var(--white); font-size: 0.9375rem; }
.footer a { color: var(--white); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); padding-top: var(--s3); padding-bottom: var(--s3); }
@media screen and (max-width: 63.99em) { .footer__grid { grid-template-columns: 1fr; gap: var(--s2); } }
.footer__head { font-weight: 600; color: var(--orange); margin: 0 0 var(--s0); }
.footer__entity + .footer__entity { margin-top: var(--s1); padding-top: var(--s1); border-top: 1px solid rgba(255,255,255,.25); }
.footer__entity p { margin: 0; color: rgba(255,255,255,.9); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li a { display: inline-flex; min-height: 2.25rem; align-items: center; }
.footer__base { border-top: 1px solid rgba(255,255,255,.22); padding-top: var(--s1); padding-bottom: var(--s2); color: rgba(255,255,255,.85); font-size: var(--fs-small); }
.footer__base p { max-width: 90ch; }

.print-stamp { display: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Print: black on white, stamped, URLs after links ---------- */
@media print {
  @page { margin: 15mm; }
  :root { --ink: #000; --bg: #fff; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .draft-flag, .nav, .switcher, .quick-contact, .aside, .breadcrumbs, .hero__photo, .hero__actions, .tasks, .skip-link { display: none !important; }
  .masthead, .hero, .footer, .callout, .panel--dark, thead th, .transfer__date { background: #fff !important; color: #000 !important; }
  .masthead *, .hero *, .footer *, .callout * { color: #000 !important; }
  .print-stamp { display: block; border: 1px solid #000; padding: 6pt; margin: 0 0 12pt; font-size: 9pt; }
  .page-grid { display: block; padding: 0; }
  .prose a[href^="http"]::after, .prose a[href^="/"]::after { content: " (" attr(data-print-href) ")"; font-size: 0.85em; }
  tr, .sub, figure { break-inside: avoid; }
  thead { display: table-header-group; }
  h1, h2, h3 { color: #000; break-after: avoid; }
}

/* Anything that sits before the first section keeps the section rhythm. */
.prose > .callout, .prose > figure, .prose > p:not(.meta-line) { margin-bottom: var(--section-gap); }

/* Update coming: the public face of an open item */
.update { background: var(--bg-tint); border-left: 4px solid var(--cyan); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s0) var(--s1); max-width: var(--measure); margin: 0 0 var(--s1); font-size: 0.9688rem; }
.update__label { display: block; font-weight: 700; color: var(--accent-ink); font-size: var(--fs-small); }
.update p { margin: 0; }
.footer__draft { margin-top: var(--s0); padding-top: var(--s0); border-top: 1px solid rgba(255,255,255,.18); }
.footer__draft strong { color: var(--orange); }
@media screen and (max-width: 63.99em) { .mega__links a { min-height: var(--tap); font-size: 1rem; } }

/* Phone: every tappable thing meets the 44px floor, the switcher fills the width. */
.transfer__links a { display: inline-flex; align-items: center; min-height: var(--tap); }
@media screen and (max-width: 47.99em) {
  .context { width: 100%; }
  .switcher { width: 100%; }
  .switcher li { flex: 1; }
  .switcher a { justify-content: center; padding: 0 var(--s0); }
  .hero__actions .btn { width: 100%; }
  .port-card__action .btn, .prose .btn { width: 100%; text-align: center; }
  .block > h2 { scroll-margin-top: var(--s1); }
}
/* Long URLs and references break rather than push the page sideways. */
.prose, .footer, .standing, .callout, .update { overflow-wrap: anywhere; }
.prose h1, .prose h2, .prose h3 { overflow-wrap: break-word; }
.prose table, .prose caption { overflow-wrap: normal; }
@media screen and (max-width: 47.99em) {
  .table-stack caption { display: block; }
  .table-stack tbody th { padding-top: var(--s0); font-size: 1.0625rem; }
}
@media screen and (max-width: 22.5em) { .switcher a { font-size: 0.875rem; padding: 0 var(--s-1); white-space: nowrap; } }
@media screen and (max-width: 47.99em) { .table-stack caption { padding: var(--s0) var(--s1); border-bottom: 1px solid var(--line-strong); } }
.hero__notice { flex-wrap: nowrap; align-items: flex-start; max-width: 60ch; }
.hero__notice > span:last-child { flex: 1; padding-top: 2px; }
.hero__date { flex: none; }


/* =====================================================================
   Readability pass, v8: fewer outlines, more air, quieter controls.
   ===================================================================== */
:root { --measure: 66ch; }

/* Masthead: bigger mark, clearer name, quiet port switcher */
.masthead__bar { padding-top: var(--s1); padding-bottom: var(--s1); gap: var(--s2); }
.brand { gap: var(--s1); }
.brand img { width: 60px; height: 60px; }
.brand__name { font-size: 1.3516rem; letter-spacing: 0.04em; }
.brand__name--shared { text-transform: none; letter-spacing: 0; }
.brand__sub { font-size: 0.875rem; color: rgba(255,255,255,.8); }
.context { gap: var(--s-1) var(--s1); }
.context__label { display: none; }
.switcher { border: 0; gap: 2px; }
.switcher li + li a { border-left: 0; }
.switcher a { min-height: 2.25rem; padding: 0 var(--s0); font-size: 0.875rem; color: rgba(255,255,255,.78) !important; border-radius: var(--radius); }
.switcher a[aria-current="true"] { background: transparent; color: var(--white) !important; box-shadow: inset 0 -2px 0 var(--orange); border-radius: 0; }
.switcher a:not([aria-current="true"]):hover { background: rgba(255,255,255,.08); color: var(--white) !important; }
.switcher::before { content: "Port:"; align-self: center; font-size: 0.875rem; color: rgba(255,255,255,.6); margin-right: var(--s-1); }

/* Phone in the nav bar */
.nav__item--phone { margin-left: auto; }
.nav__item--phone + .nav__item--cta { margin-left: 0; }
.nav__item--phone > a { font-weight: 600; gap: var(--s0) !important; }
.nav__item--phone > a small { font-weight: 400; color: rgba(255,255,255,.75); font-size: 0.8125rem; }

/* Buttons: smaller, so they stop pulling the eye */
.btn { min-height: var(--tap); padding: 0 var(--s1); font-size: 0.9375rem; border-width: 1.5px; }
.hero__actions { gap: var(--s0) var(--s1); }

/* Home: more air between sections, no rules between them */
.home-section { padding-top: var(--s4); padding-bottom: var(--s4); border-bottom: 0; }
.home-section__head { margin-bottom: var(--s3); }
.home-section__head p { max-width: 62ch; }
.tasks { border-bottom: 0; }
.tasks__grid { gap: var(--s2); padding-top: var(--s2); padding-bottom: var(--s2); }
.task { border: 0; border-top: 3px solid var(--cyan); background: var(--white); padding: var(--s1) var(--s1) var(--s1) 0; background: transparent; }
.task--dark { padding: var(--s1); background: var(--deep-blue); border-top-color: var(--orange); }
a.task:hover { background: transparent; }
a.task:hover strong { text-decoration-thickness: 2px; }
.port-cards { gap: var(--s3); }
.port-card { border: 0; border-top: 3px solid var(--deep-blue); border-radius: 0; padding: var(--s1) 0 0; background: transparent; }
.port-card--marina { border-top-color: var(--cyan); }
.port-card__facts { color: var(--ink); }
.arrow-link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); gap: var(--s-1); }
.arrow-link::after { content: ""; width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.arrow-link:hover { text-decoration: underline; }
.two-col { gap: var(--s3) var(--s4); }

/* Lists of links: lighter, no heavy outlines */
.link-list a { border: 0; border-left: 3px solid var(--cyan); border-radius: 0; padding: var(--s-1) var(--s1); background: var(--bg-alt); }

/* Inner pages: calmer blocks */
.block > h2 { margin-bottom: var(--s1); }
.sub { border-left: 0; padding-left: 0; }

/* Contact panel at the top of the sidebar */
.contact-panel { background: var(--deep-blue); color: var(--white); border-radius: var(--radius); padding: var(--s2); border-top: 4px solid var(--orange); }
.contact-panel p { margin: 0 0 var(--s-1); color: rgba(255,255,255,.88); }
.contact-panel .contact-panel__title { font-weight: 600; color: var(--white); }
.contact-panel .tel { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.7191rem; line-height: 1.2; color: var(--white); text-decoration: none; margin: var(--s-1) 0 var(--s0); }
.contact-panel .tel:hover { text-decoration: underline; }
.contact-panel a { color: var(--white); }

/* Big number on a contact page */
.tel-block { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s1); margin-bottom: var(--s1); }
.tel-block__label { font-weight: 600; }
.tel-block__number { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); text-decoration: none; }
.tel-block__number:hover { text-decoration: underline; }

/* Footer: more space, smaller type */
.footer { font-size: 0.875rem; line-height: 1.65; }
.footer__grid { gap: var(--s4); padding-top: var(--s4); padding-bottom: var(--s3); }
.footer__entity + .footer__entity { margin-top: var(--s2); padding-top: var(--s2); }
.footer__entity p + p { margin-top: 2px; }

@media screen and (max-width: 63.99em) {
  .brand img { width: 52px; height: 52px; }
  .nav__item--phone { margin-left: 0; }
  .home-section { padding-top: var(--s3); padding-bottom: var(--s3); }
  .footer__grid { gap: var(--s2); padding-top: var(--s3); }
  .two-col { gap: var(--s2); }
}
@media screen and (max-width: 47.99em) {
  .switcher a { min-height: var(--tap); }
  .switcher::before { display: none; }
}

/* Phone: the number stays on the Menu bar, always visible */
.nav-call { display: none; }
@media screen and (max-width: 63.99em) {
  .nav-toggle { align-items: center; }
  .nav-toggle button { width: auto; flex: 1; }
  .nav-call { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; min-height: var(--control); padding: 0 var(--gutter) 0 var(--s1); color: var(--white) !important; text-decoration: none; font-weight: 700; line-height: 1.2; }
  .nav-call small { font-weight: 400; font-size: 0.75rem; color: rgba(255,255,255,.75); }
  .nav__item--phone { display: none; }
}
.nav-call small { font-size: 0.8125rem !important; }
.contact-panel .tel { display: flex; align-items: center; min-height: var(--tap); }
@media screen and (max-width: 63.99em) { .switcher a { min-height: var(--tap); } }
.tel-block__number { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Content coming soon: a page with nothing to carry over */
.soon { background: var(--paper); border: 2px dashed var(--cyan-deep); border-radius: var(--radius); padding: var(--s1) var(--s2); max-width: var(--measure); margin-bottom: var(--section-gap); }
.soon__label { display: block; font-weight: 700; color: var(--cyan-deep); margin-bottom: var(--s-1); }
.soon p { margin: 0; }