/* ══════════════════════════════════════════════════════════════════════════
   Heritage Yacht Academy — "The Chart"
   Admiralty chart / survey plate. Cream paper, navy ink, cyan water,
   magenta marks, hairline graticule, mono numerals.

   Tokens live in :root. Nothing here hardcodes a colour twice.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. tokens ─────────────────────────────────────────────────────────── */
:root {
  /* palette, taken from the crest */
  --ink:        #0C1236;
  --ink-soft:   #2A3160;
  --ink-mute:   #5A6088;
  --paper:      #F1ECE1;
  --paper-2:    #E7E0D1;
  --paper-3:    #DBD2BF;
  --water:      #1CC6D8;
  --water-deep: #0B6F80;
  --magenta:    #B01E5B;

  --rule:       rgba(12, 18, 54, .16);
  --rule-soft:  rgba(12, 18, 54, .085);
  --rule-loud:  rgba(12, 18, 54, .34);

  /* type */
  --f-display: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --f-body:    "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-hero:  clamp(2.55rem, 1.05rem + 6.1vw, 5.6rem);
  --t-h2:    clamp(1.85rem, 1.05rem + 2.6vw, 3.15rem);
  --t-h3:    clamp(1.15rem, 0.98rem + 0.72vw, 1.5rem);
  --t-lede:  clamp(1.03rem, 0.97rem + 0.34vw, 1.22rem);
  --t-body:  clamp(0.975rem, 0.94rem + 0.16vw, 1.055rem);
  --t-small: 0.845rem;
  --t-micro: 0.72rem;

  /* space + frame */
  --gut:   clamp(1.15rem, 0.7rem + 2vw, 2.6rem);
  --band-y: clamp(4rem, 2.4rem + 6.4vw, 8.5rem);
  --wide:  1320px;
  --narrow: 62ch;
  --head-h: 62px;
}

/* ── 2. base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.62 var(--f-body);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; margin: 0; }
p { margin: 0; }
a { color: inherit; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

img, svg { display: block; max-width: 100%; }

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.wrap { width: min(100% - (var(--gut) * 2), var(--wide)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--paper); padding: .7rem 1.1rem;
  font: 500 var(--t-micro)/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase;
}
.skip:focus { left: .6rem; top: .6rem; }

:focus-visible { outline: 2px solid var(--water-deep); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.crest-arc   { font-family: var(--f-display); font-weight: 700; fill: var(--ink); letter-spacing: .035em; }
.crest-miami { font-family: var(--f-mono); }
.mono-sym    { font-family: var(--f-mono); font-weight: 600; }

.crest-sm { width: 32px; height: 32px; flex: none; }
.crest-lg { width: min(100%, 250px); height: auto; aspect-ratio: 1; margin-inline: auto; }

/* ── 3. plate head ─────────────────────────────────────────────────────── */
.head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(9px);
  border-bottom: 1px solid var(--rule);
}
.head-in {
  width: min(100% - (var(--gut) * 2), var(--wide));
  margin-inline: auto;
  min-height: var(--head-h);
  display: flex; align-items: center; gap: clamp(.8rem, 2vw, 2rem);
}
.head-mark { display: flex; align-items: center; gap: .62rem; text-decoration: none; flex: none; }
.head-words { display: flex; flex-direction: column; line-height: 1.14; }
.head-words b { font: 600 .94rem/1.1 var(--f-display); letter-spacing: -.012em; }
.head-words i {
  font: 500 var(--t-micro)/1.3 var(--f-mono); font-style: normal;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-mute);
}
.head-nav {
  margin-left: auto; display: flex; gap: clamp(.9rem, 1.9vw, 1.9rem);
  font: 500 var(--t-micro)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
}
.head-nav a, .head-sheet a { text-decoration: none; color: var(--ink-soft); padding: .35rem 0; border-bottom: 1px solid transparent; }
.head-nav a:hover, .head-nav a:focus-visible { color: var(--ink); border-bottom-color: var(--water); }

.head-call {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--rule-loud); padding: .46rem .78rem;
  white-space: nowrap;
}
.head-call:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.head-call .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--water);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--water) 26%, transparent);
}
.head-call:hover .dot { background: var(--water); }

.head-toggle {
  display: none; margin-left: auto; background: none; cursor: pointer;
  border: 1px solid var(--rule-loud); color: var(--ink); padding: .46rem .7rem;
}
.head-sheet { border-top: 1px solid var(--rule); padding: .5rem var(--gut) 1rem; display: grid; gap: .1rem; }
.head-sheet[hidden] { display: none; }
.head-sheet a { font: 500 var(--t-micro)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: .62rem 0; border-bottom: 1px solid var(--rule-soft); }
.head-sheet-call { color: var(--magenta) !important; }

@media (max-width: 900px) {
  .head-nav { display: none; }
  .head-toggle { display: block; }
  .head-call { margin-left: auto; }
  .head-toggle { margin-left: .5rem; }
  .head-sheet { display: grid; }
}
@media (min-width: 901px) { .head-sheet { display: none !important; } }
@media (max-width: 560px) {
  .head-words { display: none; }
}

/* ── 4. hero plate ─────────────────────────────────────────────────────── */
.plate { position: relative; padding-top: clamp(2.4rem, 1.6rem + 4vw, 5.4rem); overflow: hidden; }

.grid-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, var(--rule-soft) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(90deg, var(--rule-soft) 0 1px, transparent 1px 84px);
  mask-image: radial-gradient(118% 92% at 62% 34%, #000 22%, transparent 88%);
}
.soundings { position: absolute; inset: 0; pointer-events: none; }
.soundings span {
  position: absolute; left: var(--x); top: var(--y);
  font: 500 .74rem/1 var(--f-mono); color: color-mix(in srgb, var(--ink) 21%, transparent);
  letter-spacing: .06em;
}

.plate-in {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, .88fr);
  gap: clamp(1.8rem, 1rem + 4.4vw, 4.6rem);
  align-items: start;
  padding-bottom: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem);
}

.titleblock { max-width: 46rem; }

.rule-row {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule-loud);
  padding: .55rem 0; margin-bottom: clamp(1.3rem, 1rem + 1.6vw, 2.3rem);
  color: var(--ink-mute);
}
.rule-row span:last-child { color: var(--ink-soft); }

h1 {
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.032em;
  font-variation-settings: "opsz" 84;
  margin-bottom: clamp(1rem, .7rem + 1.2vw, 1.6rem);
  text-wrap: balance;
}

.lede { font-size: var(--t-lede); line-height: 1.58; color: var(--ink-soft); max-width: 40rem; }

.spec {
  margin: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem) 0;
  border-top: 1px solid var(--rule-loud);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.4rem, 3vw, 2.6rem);
}
.spec > div { border-bottom: 1px solid var(--rule); padding: .78rem 0; }
.spec dt { color: var(--ink-mute); margin-bottom: .32rem; }
.spec dd { font-family: var(--f-body); font-size: .94rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.4; color: var(--ink); }
@media (max-width: 620px) { .spec { grid-template-columns: 1fr; } }

.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; }

.btn {
  display: inline-flex; flex-direction: column; gap: .28rem;
  text-decoration: none; padding: .82rem 1.15rem;
  border: 1px solid var(--ink); line-height: 1.25;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.btn .mono { letter-spacing: .075em; }
.btn-key { background: var(--ink); color: var(--paper); }
.btn-key .btn-num { color: var(--water); font-size: .95rem; letter-spacing: .05em; }
.btn-key:hover { background: var(--water); color: var(--ink); border-color: var(--water); transform: translateY(-1px); }
.btn-key:hover .btn-num { color: var(--ink); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--rule-loud); justify-content: center; }
.btn-quiet:hover { background: var(--paper-2); border-color: var(--ink); }

/* the framed mark */
.plate-mark { display: grid; gap: 1.5rem; }
.frame {
  position: relative; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  border: 1px solid var(--rule-loud); background: var(--paper-2);
}
.tick { position: absolute; width: 9px; height: 9px; border: 1px solid var(--ink); }
.tick.tl { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.tick.tr { top: -1px; right: -1px; border-width: 1px 1px 0 0; }
.tick.bl { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }
.tick.br { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.plate-cap { text-align: center; margin-top: 1.1rem; color: var(--ink-mute); }

.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule-loud); }
.figures li { padding: .85rem .2rem .85rem 0; border-bottom: 1px solid var(--rule); }
.figures b { display: block; font-size: 1.72rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; margin-bottom: .34rem; color: var(--ink); }
.figures b::after { content: ""; display: block; width: 22px; height: 2px; background: var(--water); margin-top: .42rem; }
.figures span { display: block; font-size: .83rem; line-height: 1.4; color: var(--ink-soft); padding-right: .8rem; }

/* soundings band */
.sounding-strip { background: var(--ink); color: var(--paper); position: relative; }
.strip-in { padding: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem) 0; }
.strip-label { color: color-mix(in srgb, var(--water) 88%, #fff); margin-bottom: 1.5rem; display: block; }
.depth { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.1rem, 2.4vw, 2.4rem); }
.depth li { border-top: 1px solid rgba(241, 236, 225, .22); padding-top: .95rem; }
.depth b { display: block; font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem); font-weight: 500; letter-spacing: -.035em; line-height: 1; color: var(--paper); }
.depth b sup { font-size: .5em; letter-spacing: 0; color: var(--water); }
.depth span { display: block; margin-top: .58rem; font-size: .84rem; line-height: 1.45; color: rgba(241, 236, 225, .76); }
.strip-src {
  margin-top: 1.7rem; padding-top: 1.1rem; border-top: 1px solid rgba(241, 236, 225, .18);
  text-transform: none; letter-spacing: .015em; font-size: .7rem; line-height: 1.7;
  color: rgba(241, 236, 225, .58); max-width: 78rem;
}
@media (max-width: 860px) { .depth { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .depth { grid-template-columns: 1fr; } }

/* ── 5. bands + section heads ──────────────────────────────────────────── */
.band { padding: var(--band-y) 0; border-top: 1px solid var(--rule); }
.band:nth-of-type(even) { background: var(--paper-2); }

.sec-head { max-width: 52rem; margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); }
.sec-key { color: var(--water-deep); margin-bottom: .95rem; display: block; }
.sec-head h2 {
  font-size: var(--t-h2); line-height: 1.03; letter-spacing: -.028em;
  font-variation-settings: "opsz" 60; margin-bottom: .95rem; text-wrap: balance;
}
.sec-note { font-size: var(--t-lede); line-height: 1.56; color: var(--ink-soft); max-width: var(--narrow); }

/* ── 6. legend ─────────────────────────────────────────────────────────── */
.legend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.4rem, 3vw, 3rem); border-top: 1px solid var(--ink); }
.legend-grid li { padding: 1.5rem 0 1.7rem; border-bottom: 1px solid var(--rule); }
.key { color: var(--water-deep); margin-bottom: .7rem; display: block; }
.legend-grid h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.018em; margin-bottom: .6rem; }
.legend-grid p:not(.key) { font-size: .93rem; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 900px) { .legend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .legend-grid { grid-template-columns: 1fr; } }

/* ── 7. pathways ───────────────────────────────────────────────────────── */
.pathways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.1rem, 2.4vw, 2rem); align-items: start; }
.route { border: 1px solid var(--rule-loud); background: var(--paper); padding: clamp(1.3rem, 1rem + 1.6vw, 2.1rem); position: relative; }
.route::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--water); }
.route-short::before { background: var(--magenta); }
.route-key { color: var(--ink-mute); margin-bottom: .85rem; display: block; }
.route h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -.024em; line-height: 1.08; margin-bottom: .8rem; }
.route-lede { font-size: .97rem; line-height: 1.58; color: var(--ink-soft); }
.route-spec { margin: 1.5rem 0; border-top: 1px solid var(--rule); }
.route-spec > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--rule-soft); }
.route-spec dt { color: var(--ink-mute); }
.route-spec dd { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .04em; text-align: right; color: var(--ink); }
.route h4 { font-family: var(--f-body); font-size: var(--t-micro); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .8rem; }
.ticks { display: grid; gap: .58rem; }
.ticks li { position: relative; padding-left: 1.28rem; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .52em; width: 7px; height: 7px; border: 1px solid var(--water-deep); background: color-mix(in srgb, var(--water) 34%, transparent); }
.route-foot { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule-loud); color: var(--ink-mute); text-transform: none; letter-spacing: .02em; font-size: .7rem; line-height: 1.65; }
@media (max-width: 880px) { .pathways { grid-template-columns: 1fr; } }

/* ── 8. curriculum accordion ───────────────────────────────────────────── */
.course-list { border-top: 1px solid var(--ink); }
.course { border-bottom: 1px solid var(--rule); }
.course > summary {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 1.5rem;
  gap: clamp(.7rem, 1.8vw, 1.8rem); align-items: center;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
}
.course > summary::-webkit-details-marker { display: none; }
.course > summary:hover .c-title b { color: var(--water-deep); }
.c-title { display: flex; flex-direction: column; gap: .3rem; }
.c-title b { font-family: var(--f-display); font-size: clamp(1.08rem, .98rem + .55vw, 1.36rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; transition: color .16s ease; }
.c-title i { font-style: normal; color: var(--water-deep); }
.c-goal { font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.c-caret { position: relative; width: 14px; height: 14px; justify-self: end; }
.c-caret::before, .c-caret::after { content: ""; position: absolute; background: var(--ink); }
.c-caret::before { inset: 6px 0 6px 0; height: 1px; }
.c-caret::after { inset: 0 6px; width: 1px; transition: transform .18s ease; }
.course[open] .c-caret::after { transform: scaleY(0); }
.c-body { padding: 0 0 1.9rem; display: grid; gap: 1.15rem; max-width: 62rem; }
.weeks { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.weeks li { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); gap: clamp(.8rem, 2vw, 2rem); padding: .95rem 0; border-bottom: 1px solid var(--rule-soft); }
.weeks b { color: var(--water-deep); }
.weeks span { font-size: .93rem; line-height: 1.55; color: var(--ink-soft); }
.weeks strong { color: var(--ink); font-weight: 600; }
.c-kit, .c-align, .c-flag { text-transform: none; letter-spacing: .02em; font-size: .7rem; line-height: 1.7; color: var(--ink-mute); max-width: 66ch; }
.c-flag { color: var(--magenta); border-left: 2px solid var(--magenta); padding-left: .8rem; }
@media (max-width: 880px) {
  .course > summary { grid-template-columns: minmax(0, 1fr) 1.4rem; }
  .c-goal { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .weeks li { grid-template-columns: 1fr; gap: .35rem; } }

/* ── 9. schedule ───────────────────────────────────────────────────────── */
.tide-key { display: flex; flex-wrap: wrap; gap: .7rem 1.7rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--rule); }
.tide-key p { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink-soft); }
.swatch { width: 13px; height: 9px; border: 1px solid var(--ink); flex: none; }
.swatch-class { background: var(--paper-3); }
.swatch-lab { background: var(--water); }
.swatch-cap { background: var(--magenta); }

.table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; padding: 1.25rem 0; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip {
  background: transparent; border: 1px solid var(--rule-loud); color: var(--ink-soft);
  padding: .38rem .6rem; cursor: pointer; font-size: .7rem; letter-spacing: .07em;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.table-count { margin-left: auto; color: var(--ink-mute); }

.table-scroll { border: 1px solid var(--rule-loud); background: var(--paper); overflow-x: auto; }
.tide { width: 100%; border-collapse: collapse; min-width: 1120px; }
.tide caption { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--rule-loud); color: var(--ink-mute); }
.tide thead th {
  position: sticky; top: var(--head-h); z-index: 3;
  background: var(--paper-2); color: var(--ink);
  text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.tide th.num, .tide td.col-hr { text-align: right; }
.tide tbody td { padding: .58rem .85rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; font-size: .87rem; line-height: 1.45; }
.tide tbody tr:hover td { background: color-mix(in srgb, var(--water) 9%, transparent); }
.tide .col-wk { font-weight: 600; color: var(--ink); }
.tide tr.wk-start td { border-top: 1px solid var(--rule-loud); }
.tide .col-day { color: var(--ink-mute); }
.tide .col-mod { font-weight: 500; color: var(--ink); min-width: 13rem; }
.tide .col-focus { color: var(--ink-soft); min-width: 15rem; }
.tide .col-hr { font-weight: 600; color: var(--ink); white-space: nowrap; }
.tide .col-del { color: var(--ink-mute); font-size: .8rem; min-width: 13rem; }
.tide tr.capstone .col-wk, .tide tr.capstone .col-hr { color: var(--magenta); }
.tide tr[hidden] { display: none; }
@media (max-width: 700px) {
  .tide thead th { top: 0; }
  .table-count { margin-left: 0; }
}

/* ── 10. pathway route line ────────────────────────────────────────────── */
/* The vertical rule is the course line and the small squares are waypoints.
   Sequence is carried by the <ol> and the rule, not by a decorative index. */
.route-line { border-top: 1px solid var(--ink); }
.route-line li {
  display: grid; grid-template-columns: minmax(0, 1fr) 12rem;
  gap: clamp(.7rem, 2vw, 2.2rem); align-items: start;
  padding: 1.7rem 0 1.7rem 1.7rem; border-bottom: 1px solid var(--rule);
  position: relative;
}
.route-line li::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--rule-soft);
}
.route-line li:first-child::after { top: 2.3rem; }
.route-line li:last-child::after { bottom: auto; height: 2.3rem; }
.route-line li::before {
  content: ""; position: absolute; left: -3px; top: 2.05rem;
  width: 7px; height: 7px; background: var(--water);
}
.route-line h3 { font-size: var(--t-h3); letter-spacing: -.018em; margin-bottom: .55rem; }
.route-line p:not(.bearing) { font-size: .93rem; line-height: 1.58; color: var(--ink-soft); max-width: 60ch; }
.bearing { text-align: right; color: var(--ink-mute); padding-top: .3rem; }
@media (max-width: 780px) {
  .route-line li { grid-template-columns: minmax(0, 1fr); }
  .bearing { text-align: left; padding-top: 0; }
}

/* ── 11. place ─────────────────────────────────────────────────────────── */
.place-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.6rem, 3.4vw, 3.6rem); align-items: start; }
.berths { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.berths li { padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.berths h3 { font-size: var(--t-h3); letter-spacing: -.018em; margin-bottom: .45rem; }
.berths p:not(.tag) { font-size: .93rem; line-height: 1.55; color: var(--ink-soft); max-width: 54ch; }
.tag { color: var(--water-deep); margin-bottom: .55rem; display: block; }
.tag-plan { color: var(--magenta); }
.rose-box { display: grid; gap: 1.4rem; }
.rose { width: min(100%, 240px); height: auto; aspect-ratio: 1; margin-inline: auto; color: var(--rule-loud); }
.berth-facts { display: grid; border-top: 1px solid var(--rule-loud); }
.berth-facts li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .72rem 0; border-bottom: 1px solid var(--rule); }
.berth-facts b { font-size: .95rem; letter-spacing: -.01em; color: var(--ink); }
.berth-facts span { font-size: .82rem; color: var(--ink-mute); text-align: right; }
@media (max-width: 880px) { .place-grid { grid-template-columns: 1fr; } .rose-box { order: -1; } }

/* ── 12. enroll ────────────────────────────────────────────────────────── */
.enroll-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.8vw, 2.6rem); align-items: start; }
.call-box { background: var(--ink); color: var(--paper); padding: clamp(1.5rem, 1.1rem + 2vw, 2.6rem); }
.call-label { color: color-mix(in srgb, var(--water) 88%, #fff); display: block; margin-bottom: .75rem; }
.call-name { font-family: var(--f-display); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem); font-weight: 600; letter-spacing: -.024em; line-height: 1.06; }
.call-num {
  display: inline-block; margin: .55rem 0 .7rem;
  font: 500 clamp(1.5rem, 1.1rem + 2vw, 2.35rem)/1.1 var(--f-mono);
  letter-spacing: -.02em; text-decoration: none; color: var(--water);
  border-bottom: 2px solid transparent;
}
.call-num:hover { border-bottom-color: var(--water); }
.call-when { color: rgba(241, 236, 225, .62); text-transform: none; letter-spacing: .02em; font-size: .72rem; }
.next-up { margin-top: 1.8rem; border-top: 1px solid rgba(241, 236, 225, .22); }
.next-up li { padding: .82rem 0; border-bottom: 1px solid rgba(241, 236, 225, .14); font-size: .9rem; line-height: 1.5; color: rgba(241, 236, 225, .84); display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .8rem; }
.next-up span { color: var(--water); }

.addr-box { border: 1px solid var(--rule-loud); padding: clamp(1.3rem, 1rem + 1.6vw, 2.1rem); background: var(--paper); }
.addr-box h3 { font-family: var(--f-body); font-size: var(--t-micro); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-mute); }
.addr-box h3:not(:first-child) { margin-top: 1.9rem; }
.addr-box h3 { margin-bottom: .75rem; }
.addr-box address { font-style: normal; font-size: 1.02rem; line-height: 1.6; color: var(--ink); font-weight: 500; }
.addr-alt { font-size: .78rem; line-height: 1.68; color: var(--ink-mute); margin-top: .9rem; max-width: 46ch; }
.addr-box .ticks { margin-top: .9rem; }
@media (max-width: 880px) { .enroll-grid { grid-template-columns: 1fr; } }

/* ── 13. colophon ──────────────────────────────────────────────────────── */
.colophon { background: var(--ink); color: var(--paper); border-top: 1px solid var(--ink); }
.colophon-grid {
  display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr));
  gap: clamp(1.3rem, 3vw, 2.6rem); padding: clamp(2.4rem, 1.7rem + 3vw, 4rem) 0 2.4rem;
}
.colophon-mark { display: flex; gap: .9rem; align-items: flex-start; }
.colophon-h { color: color-mix(in srgb, var(--water) 82%, #fff); margin-bottom: .8rem; }
.colophon p.mono { text-transform: none; letter-spacing: .02em; font-size: .72rem; line-height: 1.75; color: rgba(241, 236, 225, .74); }
.colophon-foot {
  display: flex; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap;
  padding: 1.1rem 0 1.7rem; border-top: 1px solid rgba(241, 236, 225, .18);
  text-transform: none; letter-spacing: .02em; font-size: .68rem; line-height: 1.7;
  color: rgba(241, 236, 225, .5);
}
.colophon-foot span { max-width: 62ch; }
@media (max-width: 900px) { .colophon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .colophon-grid { grid-template-columns: 1fr; } }

/* ── 14. motion policy ─────────────────────────────────────────────────── */
/* Deliberately no scroll-triggered entrance animation. Content on this page is
   a document: it must render in full for screenshot, print and no-JS paths.
   Motion is limited to hover, focus, the sticky head and the accordion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* anchor offset under the sticky head */
section[id], main > section { scroll-margin-top: calc(var(--head-h) + 16px); }

/* ── 15. print ─────────────────────────────────────────────────────────── */
@media print {
  .head, .head-sheet, .soundings, .grid-lines, .table-tools { display: none !important; }
  body { background: #fff; }
  .band { padding: 1.4rem 0; break-inside: avoid; }
  .sounding-strip, .call-box, .colophon { background: #fff; color: #000; border-top: 2px solid #000; }
  .tide thead th { position: static; }
  .course > summary { border-bottom: 1px solid #000; }
  a[href^="tel"]::after { content: " " attr(href); }
}