/* Kedge: the deck plan of one yacht, bow at the top */
@font-face { font-family: "Imbue"; src: url("/assets/fonts/specimen/imbue-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("/assets/fonts/specimen/funnel-sans-var.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Imbue Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 88%; }

body.spec-kedge { margin: 0; background: #F7F6F1; }
.spec-kedge {
  --kd-deck: #F7F6F1; --kd-deck-2: #EFEDE4; --kd-ink: #0B2440; --kd-flag: #F2B705; --kd-sea: #2F6E8E;
  --kd-line: rgba(11, 36, 64, .22); --kd-night: #06162A; --kd-night-ink: #E9ECF0; --kd-night-sea: #8FB3C7;
  --kd-display: "Imbue", "Imbue Fallback", "Bodoni 72", "Didot", "Times New Roman", serif;
  --kd-text: "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --kd-ease: cubic-bezier(.3, 0, .1, 1);
  --kd-gut: 40px; --kd-nav: 56px;
  --kd-s1: 4px; --kd-s2: 8px; --kd-s3: 12px; --kd-s4: 16px; --kd-s5: 24px; --kd-s6: 32px; --kd-s7: 48px; --kd-s8: 72px; --kd-s9: 112px; --kd-s10: 168px;
}
@media (max-width: 1279px) { .spec-kedge { --kd-gut: 32px; } }
@media (max-width: 1023px) { .spec-kedge { --kd-gut: 24px; } }
@media (max-width: 700px) { .spec-kedge { --kd-gut: 16px; --kd-nav: 48px; } }

.kd-page {
  position: relative; isolation: isolate; background: var(--kd-deck); color: var(--kd-ink);
  font: 400 clamp(16px, 1.1vw, 17.5px)/1.62 var(--kd-text); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.kd-page *, .kd-page *::before, .kd-page *::after { box-sizing: border-box; }
.kd-page :focus-visible { outline: 2px solid var(--kd-ink); outline-offset: 3px; }
.kd-page a { color: inherit; }
.kd-sq { display: inline-block; width: 6px; height: 6px; background: var(--kd-flag); flex: none; }

/* ── captions, stations ───────────────────────────────────────────── */
.kd-cap, .kd-stn {
  font: 600 11.5px/1.3 var(--kd-text); letter-spacing: .14em; text-transform: uppercase; color: var(--kd-sea); margin: 0;
}
.kd-stn { display: flex; align-items: center; gap: 10px; }
@media (max-width: 399px) { .kd-cap, .kd-stn { font-size: 11px; letter-spacing: .12em; } }

/* ── the hull (drawn by JS; a nominal hull without it) ────────────── */
.kd-hull { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.kd-hull path, .kd-hull line { fill: none; vector-effect: non-scaling-stroke; }
.kd-gun { stroke: var(--kd-ink); stroke-width: 1; }
.kd-toe { stroke: var(--kd-sea); stroke-width: 1; opacity: .55; }
.kd-cl { stroke: var(--kd-sea); stroke-width: 1; opacity: .4; stroke-dasharray: 12 4 2 4; }
.kd-stl { stroke: var(--kd-line); stroke-width: 1; }
.kd-bulk { stroke: var(--kd-ink); stroke-width: .75; }
@media (max-width: 1023px) {
  .kd-nojs .kd-hull { display: none; }
  .kd-nojs::before { content: ""; position: absolute; inset: 0 12px; border: solid var(--kd-ink); border-width: 0 1px; pointer-events: none; z-index: 2; }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .kd-live-hull .kd-gun, .kd-live-hull .kd-toe {
      stroke-dasharray: var(--kd-len) var(--kd-len);
      animation: kd-lay linear both; animation-timeline: scroll(root);
    }
  }
}
@keyframes kd-lay { from { stroke-dashoffset: var(--kd-lay); } to { stroke-dashoffset: 0px; } }

/* ── nav ──────────────────────────────────────────────────────────── */
.kd-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 20; height: var(--kd-nav);
  background: rgba(247, 246, 241, .94); border-bottom: 1px solid var(--kd-ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.kd-nav-in { height: 100%; max-width: 1680px; margin: 0 auto; padding: 0 var(--kd-gut); display: flex; align-items: center; gap: 24px; }
.kd-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.kd-mark { width: 28px; height: 28px; display: block; }
.kd-word { font: 500 22px/1 var(--kd-display); font-variation-settings: "opsz" 36; letter-spacing: .12em; text-transform: uppercase; padding-top: 2px; }
.kd-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.kd-links a { font: 560 15px/1.2 var(--kd-text); letter-spacing: .01em; text-decoration: none; }
.kd-links a:not(.kd-pill) { background: linear-gradient(var(--kd-sea), var(--kd-sea)) 0 100% / 0 1px no-repeat; padding: 4px 0; transition: background-size .3s var(--kd-ease); }
.kd-links a:not(.kd-pill):hover { background-size: 100% 1px; }
.kd-pill {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 20px 0 16px; border: 1px solid var(--kd-ink); border-radius: 999px;
  font: 560 15px/1 var(--kd-text); letter-spacing: .01em; text-decoration: none; color: var(--kd-ink); background: transparent;
  transition: background-color .25s var(--kd-ease), color .25s var(--kd-ease);
}
.kd-pill .kd-sq { width: 8px; height: 8px; }
.kd-pill:hover { background: var(--kd-ink); color: var(--kd-deck); }
.kd-links .kd-pill { height: 36px; }
.kd-menu { display: none; }
@media (max-width: 860px) {
  .kd-menu {
    display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border: 1px solid var(--kd-ink); border-radius: 999px;
    background: transparent; color: var(--kd-ink); font: 560 14px/1 var(--kd-text); cursor: pointer;
  }
  .kd-menu::before { content: ""; width: 12px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
  .kd-menu[aria-expanded="true"]::before { height: 0; border-bottom: 0; }
  .kd-links {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--kd-deck); border-bottom: 1px solid var(--kd-ink); padding: 8px var(--kd-gut) 20px;
  }
  .kd-links li { border-top: 1px solid var(--kd-line); }
  .kd-links li:first-child { border-top: 0; }
  .kd-links a:not(.kd-pill) { display: block; padding: 14px 0; font-size: 17px; }
  .kd-links-cta { padding-top: 16px; }
  .kd-js .kd-links:not(.is-open) { display: none; }
}
@media (max-width: 359px) { .kd-word { font-size: 19px; letter-spacing: .1em; } .kd-nav-in { gap: 12px; } }

/* ── the bow (hero) ───────────────────────────────────────────────── */
.kd-bow {
  position: relative; z-index: 1; max-width: 1680px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr 1fr; column-gap: 24px;
  padding: 16px var(--kd-gut) 32px; min-height: calc(100svh - var(--bar-h, 40px) - var(--kd-nav));
}
.kd-bow-port { display: flex; flex-direction: column; padding: 38px 0 4px; min-width: 0; }
.kd-h1 {
  font: 300 clamp(40px, 6.4vw, 104px)/.9 var(--kd-display); font-variation-settings: "opsz" 100;
  letter-spacing: -.005em; margin: 26px 0 0; text-wrap: balance; color: var(--kd-ink);
}
.kd-bow-foot { margin-top: auto; padding-top: 32px; }
.kd-lede { font: 380 clamp(17px, 1.35vw, 21px)/1.5 var(--kd-text); max-width: 36ch; margin: 0; }
.kd-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 32px 0 0; }
.kd-acts .kd-pill { height: 48px; padding: 0 24px 0 20px; font-size: 16px; }
.kd-more { font: 560 15px/1.2 var(--kd-text); text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--kd-sea); }
.kd-more:hover { border-bottom-color: var(--kd-ink); }

.kd-bow-photo { position: relative; margin: 0; min-height: 520px; min-width: 0; }
.kd-bow-photo picture { position: absolute; inset: 0; display: block; overflow: hidden;
  clip-path: polygon(50% 0%, 55.9% 4%, 61.5% 8%, 66.7% 12%, 71.5% 16%, 75.9% 20%, 79.9% 24%, 83.5% 28%, 86.7% 32%, 89.5% 36%, 91.9% 40%, 94% 45%, 96% 50%, 97.6% 56%, 98.8% 63%, 99.6% 72%, 100% 84%, 100% 100%, 0% 100%, 0% 84%, 0.4% 72%, 1.2% 63%, 2.4% 56%, 4% 50%, 6% 45%, 8.1% 40%, 10.5% 36%, 13.3% 32%, 16.5% 28%, 20.1% 24%, 24.1% 20%, 28.5% 16%, 33.3% 12%, 38.5% 8%, 44.1% 4%);
}
.kd-bow-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 76% 50%; }
.kd-bow-photo picture[style*="clip-path"] { transition: none; }
.kd-dim { position: absolute; top: 0; bottom: 0; right: -18px; width: 12px; margin: 0; pointer-events: none; }
.kd-dim-line { position: absolute; left: 50%; top: 0; bottom: 0; border-left: .75px solid var(--kd-ink); }
.kd-dim-line::before, .kd-dim-line::after { content: ""; position: absolute; left: -5px; width: 9px; border-top: .75px solid var(--kd-ink); transform: rotate(-45deg); }
.kd-dim-line::before { top: 0; }
.kd-dim-line::after { bottom: 0; }
.kd-dim-t {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); white-space: nowrap;
  font: 600 11px/1 var(--kd-text); letter-spacing: .12em; text-transform: uppercase; color: var(--kd-ink);
  background: var(--kd-deck); padding: 0 8px;
}

/* the planner */
.kd-plan { display: flex; flex-direction: column; gap: 12px; padding-top: 2px; min-width: 0; }
.kd-plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kd-plan-from { color: var(--kd-ink); }
.kd-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kd-chip {
  height: 36px; padding: 0 14px; border: 1px solid var(--kd-ink); border-radius: 999px; background: transparent; color: var(--kd-ink);
  font: 560 14px/1 var(--kd-text); letter-spacing: .01em; cursor: pointer; white-space: nowrap; text-align: left;
  display: flex; align-items: center; gap: 9px; transition: background-color .2s var(--kd-ease);
}
.kd-chip::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--kd-ink); border-radius: 50%; flex: none; }
.kd-chip[aria-checked="true"] { background: var(--kd-flag); }
.kd-chip[aria-checked="true"]::before { background: var(--kd-ink); }
.kd-chip:hover:not([aria-checked="true"]) { background: var(--kd-deck-2); }
.kd-chart { position: relative; aspect-ratio: 6 / 5; border: 1px solid var(--kd-ink); background: var(--kd-deck); overflow: hidden; }
.kd-chart-poster, .kd-chart-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kd-chart-cv { opacity: 0; transition: opacity .3s var(--kd-ease); }
.kd-chart.is-live .kd-chart-cv { opacity: 1; }
.kd-chart.is-live .kd-chart-poster { visibility: hidden; }
.kd-pl-land { fill: #EAE7DC; stroke: var(--kd-ink); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.kd-pl-route { fill: none; stroke: var(--kd-ink); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.kd-pl-place { font: 600 21px/1 var(--kd-text); letter-spacing: .14em; fill: var(--kd-sea); text-anchor: middle; }
.kd-pl-name { font: 700 21px/1 var(--kd-text); letter-spacing: .08em; fill: var(--kd-ink); paint-order: stroke; stroke: var(--kd-deck); stroke-width: 7px; }
.kd-pl-note { font: 600 19px/1 var(--kd-text); letter-spacing: .1em; fill: var(--kd-ink); }
.kd-pl-anch { fill: var(--kd-flag); stroke: var(--kd-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kd-pl-start { fill: var(--kd-deck); stroke: var(--kd-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.kd-ctl { display: grid; grid-template-columns: 96px 1fr 1.15fr; gap: 0 20px; align-items: center; }
.kd-dial { width: 96px; height: 96px; border-radius: 50%; cursor: grab; touch-action: none; }
.kd-dial:active { cursor: grabbing; }
.kd-dial svg { width: 100%; height: 100%; display: block; overflow: visible; }
.kd-dial-rim { fill: var(--kd-deck); stroke: var(--kd-ink); stroke-width: 1; }
.kd-dial-ticks line { stroke: var(--kd-ink); stroke-width: .75; }
.kd-dial-ticks line.is-major { stroke-width: 1.1; }
.kd-dial-l { font: 700 9px/1 var(--kd-text); fill: var(--kd-sea); text-anchor: middle; letter-spacing: .05em; }
.kd-needle { transform-origin: 50px 50px; transform: rotate(225deg); transition: transform .18s var(--kd-ease); }
.kd-needle path { fill: var(--kd-flag); stroke: var(--kd-ink); stroke-width: 1; stroke-linejoin: miter; }
.kd-dial-hub { fill: var(--kd-ink); }
.kd-wind, .kd-dep { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kd-from { color: var(--kd-ink); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .08em; }
.kd-step { display: flex; align-items: center; gap: 8px; }
.kd-step-b {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--kd-ink); background: transparent; color: var(--kd-ink);
  font: 400 20px/1 var(--kd-text); cursor: pointer; display: grid; place-items: center; padding: 0 0 2px;
}
.kd-step-b:hover { background: var(--kd-deck-2); }
.kd-kn { min-width: 64px; text-align: center; font: 600 20px/1 var(--kd-text); font-variant-numeric: tabular-nums lining-nums; }
.kd-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; cursor: pointer; }
.kd-range::-webkit-slider-runnable-track { height: 1px; background: var(--kd-ink); }
.kd-range::-moz-range-track { height: 1px; background: var(--kd-ink); }
.kd-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -8px; background: var(--kd-flag); border: 1px solid var(--kd-ink); }
.kd-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 0; background: var(--kd-flag); border: 1px solid var(--kd-ink); }
.kd-range-ends { display: flex; justify-content: space-between; font: 600 10.5px/1 var(--kd-text); letter-spacing: .08em; color: var(--kd-sea); margin-top: -8px; font-variant-numeric: tabular-nums; }

.kd-reads { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 12px 16px; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--kd-ink); }
.kd-reads div { min-width: 0; }
.kd-reads dt { font: 600 10.5px/1.2 var(--kd-text); letter-spacing: .12em; text-transform: uppercase; color: var(--kd-sea); white-space: nowrap; }
.kd-reads dd { margin: 6px 0 0; font: 600 clamp(22px, 1.9vw, 30px)/1 var(--kd-text); letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.kd-reads small { font-size: .52em; font-weight: 600; letter-spacing: .02em; margin: 0 .3em 0 .1em; color: var(--kd-sea); }
.kd-reads dd small:last-child { margin-right: 0; }
.kd-reads.is-far dd { font-size: 16px; }
.kd-plan-note { font: 400 13px/1.5 var(--kd-text); margin: 2px 0 0; max-width: 58ch; }

.kd-nojs .kd-ctl, .kd-nojs .kd-reads, .kd-nojs .kd-chips { display: none; }

/* 1024–1279 */
@media (max-width: 1279px) {
  .kd-bow { grid-template-columns: .9fr 1fr 1.25fr; }
  .kd-h1 { font-size: clamp(56px, 6.4vw, 76px); }
  .kd-chip { height: 32px; padding: 0 10px; font-size: 13px; gap: 7px; }
  .kd-plan-from { display: none; }
  .kd-ctl { grid-template-columns: 88px 1fr; grid-template-rows: auto auto; gap: 10px 18px; }
  .kd-dial { width: 88px; height: 88px; grid-row: 1 / 3; }
  .kd-reads { grid-template-columns: 1fr 1fr; }
}
/* large screens with little height: keep the chart and readouts in view */
@media (min-width: 1024px) and (max-height: 820px) {
  .kd-bow-port { padding-top: 18px; }
  .kd-bow-foot { margin-top: 0; padding-top: 40px; }
  .kd-h1 { margin-top: 18px; }
  .kd-plan { gap: 10px; }
  .kd-chart { aspect-ratio: 6 / 4.6; }
  .kd-plan-note { font-size: 12.5px; }
}
@media (min-width: 1280px) and (max-height: 820px) {
  .kd-ctl { grid-template-columns: 80px 1fr 1.15fr; }
  .kd-dial { width: 80px; height: 80px; }
}

/* ≤ 1023: the bow photograph on top, the words, then the planner */
@media (max-width: 1023px) {
  .kd-bow { grid-template-columns: 1fr 1fr; column-gap: 32px; padding-top: 40px; min-height: 0; }
  .kd-bow-photo { grid-column: 1 / -1; grid-row: 1; height: clamp(300px, 46svh, 560px); min-height: 0; }
  .kd-bow-photo picture { clip-path: polygon(50% 0, 62% 4%, 72% 9%, 81% 15%, 88% 21%, 94% 27%, 98% 31%, 100% 34%, 100% 100%, 0 100%, 0 34%, 2% 31%, 6% 27%, 12% 21%, 19% 15%, 28% 9%, 38% 4%); }
  .kd-bow-photo img { object-position: 64% 42%; }
  .kd-dim { display: none; }
  .kd-bow-port { grid-column: 1 / -1; grid-row: 2; padding: 28px 0 0; display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 32px; }
  .kd-bow-port .kd-stn { grid-column: 1 / -1; }
  .kd-h1 { font-size: clamp(48px, 7.4vw, 72px); margin-top: 18px; }
  .kd-bow-foot { padding-top: 22px; margin: 0; align-self: end; }
  .kd-acts { margin-top: 24px; }
  .kd-plan {
    grid-column: 1 / -1; grid-row: 3; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--kd-ink);
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px 24px; align-items: start;
  }
  .kd-plan-head { grid-column: 1 / -1; }
  .kd-chart { grid-column: 1; grid-row: 2 / 5; }
  .kd-chips { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; overflow: visible; }
  .kd-ctl { grid-column: 2; grid-row: 3; }
  .kd-reads { grid-column: 2; grid-row: 4; }
  .kd-plan-note { grid-column: 1 / -1; }
}
/* phones */
@media (max-width: 700px) {
  .kd-bow { display: flex; flex-direction: column; padding: 32px 16px 24px; }
  .kd-bow-photo { order: 0; height: clamp(220px, 52svh, 460px); }
  .kd-bow-photo img { object-position: 50% 42%; }
  .kd-bow-port { order: 1; display: flex; padding-top: 22px; }
  .kd-h1 { font-size: clamp(46px, 14.6vw, 64px); line-height: .9; margin-top: 12px; }
  .kd-bow-foot { padding-top: 18px; align-self: stretch; }
  .kd-lede { font-size: 17px; }
  .kd-acts { margin-top: 20px; gap: 12px 22px; }
  .kd-acts .kd-pill { height: 44px; }
  .kd-plan { order: 2; display: flex; align-items: stretch; margin-top: 40px; gap: 12px; }
  .kd-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .kd-chip { height: 36px; padding: 0 10px; font-size: 13px; gap: 7px; min-width: 0; }
  .kd-ctl { grid-template-columns: 88px 1fr; }
  .kd-reads { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-height: 640px) and (max-width: 700px) {
  .kd-bow-photo { height: clamp(200px, 44svh, 300px); }
  .kd-bow { padding-top: 24px; }
  .kd-bow-port { padding-top: 14px; }
  .kd-h1 { font-size: clamp(40px, 12vw, 46px); margin-top: 8px; }
}

/* ── sections: the spaces aboard ──────────────────────────────────── */
.kd-sec { position: relative; z-index: 1; padding: clamp(96px, 13vh, 168px) 0; }
.kd-beam { width: var(--kd-beam, 84%); max-width: 1200px; margin: 0 auto; container-type: inline-size; }
.kd-foredeck .kd-beam { width: var(--kd-beam, 70%); }
.kd-mast .kd-beam { width: var(--kd-beam, 80%); }
.kd-saloon .kd-beam { width: var(--kd-beam, 84%); }
.kd-galley .kd-beam { width: var(--kd-beam, 84%); }
.kd-cabins .kd-beam { width: var(--kd-beam, 82%); }
.kd-cockpit .kd-beam { width: var(--kd-beam, 80%); }
.kd-swimstep .kd-beam { width: var(--kd-beam, 78%); }
@media (max-width: 1023px) { .kd-page .kd-beam { width: auto; margin: 0 max(28px, var(--kd-gut)); } }

/* the station caption rides a dimension string across the beam */
.kd-sec .kd-stn { display: grid; grid-template-columns: 1fr auto auto 1fr; gap: 10px; align-items: center; width: min(100%, 780px); margin: 0 auto; }
.kd-sec .kd-stn::before, .kd-sec .kd-stn::after { content: ""; height: 9px; border: solid var(--kd-line); border-width: 0 0 0 1px; background: linear-gradient(var(--kd-line), var(--kd-line)) 0 50% / 100% 1px no-repeat; }
.kd-sec .kd-stn::before { order: -1; }
.kd-sec .kd-stn::after { border-width: 0 1px 0 0; }
.kd-space {
  font: 300 clamp(52px, 13cqi, 176px)/.85 var(--kd-display); font-variation-settings: "opsz" 100;
  letter-spacing: .04em; text-transform: uppercase; text-align: center; margin: 36px 0 0; color: var(--kd-ink);
  white-space: nowrap;
}
.kd-h2 { font: 400 clamp(34px, 4.3vw, 66px)/1 var(--kd-display); font-variation-settings: "opsz" 72; margin: 28px 0 32px; text-align: center; text-wrap: balance; }
.kd-h3 { font: 500 clamp(22px, 1.9vw, 28px)/1.1 var(--kd-display); font-variation-settings: "opsz" 28; margin: 0 0 12px; }
.kd-read { max-width: 62ch; margin: 0 0 1em; }
.kd-note { font: 400 13px/1.5 var(--kd-text); margin: 12px 0 0; }
.kd-sec p { text-wrap: pretty; }

/* fittings, drawn at pen weight */
.kd-fit { display: block; overflow: visible; }
.kd-fit .kd-draw { fill: none; stroke: var(--kd-ink); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.kd-fit .kd-chain { stroke-dasharray: 3 3; stroke: var(--kd-sea); }
.kd-fit .kd-shroud { stroke: var(--kd-sea); }
.kd-fit .kd-dimp { stroke-width: .75; }
.kd-fit-t { font: 600 16px/1 var(--kd-text); letter-spacing: .14em; fill: var(--kd-sea); text-anchor: middle; }

/* foredeck: port and starboard, the windlass between */
.kd-sides { display: grid; grid-template-columns: 1fr 104px 1fr; gap: 28px; align-items: start; margin-top: 16px; }
.kd-side { margin-bottom: 14px; }
.kd-way > p:not(.kd-cap) { margin: 0; }
.kd-windlass { width: 104px; margin: 40px auto 0; }
@container (max-width: 640px) {
  .kd-sides { grid-template-columns: 1fr; gap: 24px; max-width: 560px; margin-left: auto; margin-right: auto; }
  .kd-windlass { width: 84px; margin: 0 auto; }
}
.kd-log { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--kd-ink); }
.kd-log li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--kd-line); font-size: 15.5px; line-height: 1.45; }
.kd-log-t { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.kd-kedge { display: grid; grid-template-columns: 44px 1fr; gap: 24px; align-items: center; max-width: 620px; margin: 72px auto 0; padding-top: 32px; border-top: 1px solid var(--kd-line); }
.kd-kedge p { margin: 0; font: 380 clamp(17px, 1.3vw, 19px)/1.55 var(--kd-text); }
.kd-anchor { width: 44px; }

/* mast and chart table: a read beside the polar */
.kd-mast-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; margin-top: 40px; }
.kd-mast .kd-h2 { text-align: left; margin: 20px 0 24px; }
.kd-maststep { width: min(360px, 100%); }
.kd-polar { margin: 0; max-width: 340px; justify-self: end; width: 100%; }
.kd-polar svg { width: 100%; height: auto; display: block; overflow: visible; }
.kd-polar .kd-note { margin-top: 8px; }
.kd-polar-h { display: block; margin-bottom: 6px; }
.kd-polar-h output { color: var(--kd-ink); }
.kd-po-nogo { fill: var(--kd-flag); fill-opacity: .35; stroke: none; }
.kd-po-ring { fill: none; stroke: var(--kd-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kd-po-other { fill: none; stroke: var(--kd-sea); stroke-opacity: .32; stroke-width: 1; vector-effect: non-scaling-stroke; }
.kd-po-now { fill: none; stroke: var(--kd-ink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.kd-po-leg { stroke: var(--kd-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.kd-po-dot { fill: var(--kd-flag); stroke: var(--kd-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.kd-po-wind { fill: none; stroke: var(--kd-ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.kd-po-l { font: 600 10px/1 var(--kd-text); letter-spacing: .08em; fill: var(--kd-sea); text-anchor: middle; font-variant-numeric: tabular-nums; }
.kd-po-w, .kd-po-ng { text-anchor: start; fill: var(--kd-ink); }
@container (max-width: 720px) {
  .kd-mast-grid { grid-template-columns: 1fr; gap: 40px; }
  .kd-polar { justify-self: center; }
}

/* photographs cut to their own spaces */
.kd-photo { position: relative; margin: 0; }
.kd-clip, .kd-clip picture { display: block; }
.kd-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kd-settee { margin-top: 8px; }
.kd-settee picture { aspect-ratio: 2.1 / 1; clip-path: inset(0 round 999px); }
.kd-dimh { position: relative; margin: 18px 12% 0; height: 12px; border: solid var(--kd-ink); border-width: 0 .75px; }
.kd-dimh::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: .75px solid var(--kd-ink); }
.kd-dimh .kd-dim-t { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 600 11px/1 var(--kd-text); letter-spacing: .12em; text-transform: uppercase; background: var(--kd-deck); padding: 0 10px; white-space: nowrap; }
.kd-pull { font: 300 clamp(28px, 5.2cqi, 78px)/1.02 var(--kd-display); font-variation-settings: "opsz" 100; letter-spacing: -.005em; text-align: center; margin: 64px auto 64px; max-width: 22ch; text-wrap: balance; }
.kd-saloon-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 24px 72px; align-items: start; }
.kd-saloon-copy p { margin: 0 0 1em; max-width: 44ch; }
.kd-saloon-copy p:first-child { font: 380 clamp(18px, 1.35vw, 21px)/1.5 var(--kd-text); }
@container (max-width: 820px) { .kd-saloon-grid { grid-template-columns: 1fr; } }
.kd-tl { list-style: none; margin: 16px 0 0; padding: 0; position: relative; }
.kd-tl::before { content: ""; position: absolute; left: 74px; top: 14px; bottom: 14px; border-left: 1px solid var(--kd-ink); }
.kd-tl li { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 40px; padding: 7px 0; line-height: 1.45; }
.kd-tl li::after { content: ""; position: absolute; left: 70px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--kd-deck); border: 1px solid var(--kd-ink); }
.kd-tl li.is-anchor::after { background: var(--kd-flag); width: 11px; height: 11px; left: 69px; top: 12px; }
.kd-tl li.is-anchor { font-weight: 600; }
.kd-tl-t { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; text-align: right; }

/* galley */
.kd-galley-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; margin-top: 48px; }
.kd-galley-photo picture { aspect-ratio: 1; clip-path: url(#kd-cp-galley); }
.kd-stove { position: absolute; width: 38%; top: 0; right: 0; }
.kd-photo-c { margin-top: 12px; }
.kd-galley .kd-h2 { text-align: left; margin-top: 0; }
.kd-galley-copy > p { margin: 0 0 1em; max-width: 56ch; }
.kd-seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.kd-seg .kd-chip { height: 36px; }
.kd-menu-t { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 15px; line-height: 1.45; font-variant-numeric: lining-nums; }
.kd-menu-t caption { text-align: left; font: 600 11.5px/1.3 var(--kd-text); letter-spacing: .14em; text-transform: uppercase; color: var(--kd-sea); padding-bottom: 12px; }
.kd-menu-t th, .kd-menu-t td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--kd-line); }
.kd-menu-t thead th { font: 600 11.5px/1.3 var(--kd-text); letter-spacing: .14em; text-transform: uppercase; color: var(--kd-sea); border-bottom-color: var(--kd-ink); }
.kd-menu-t tbody th { font: 300 34px/.9 var(--kd-display); font-variation-settings: "opsz" 100; width: 52px; }
@container (max-width: 820px) {
  .kd-galley-grid { grid-template-columns: 1fr; gap: 40px; }
  .kd-galley-photo { max-width: 520px; width: 88%; }
}
@container (max-width: 560px) {
  .kd-menu-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .kd-menu-t tr { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; border-bottom: 1px solid var(--kd-line); padding: 12px 0; }
  .kd-menu-t tbody th { grid-row: 1 / 4; border: 0; padding: 4px 0 0; width: auto; }
  .kd-menu-t td { border: 0; padding: 2px 0; }
  .kd-menu-t td::before { display: block; font: 600 10.5px/1.4 var(--kd-text); letter-spacing: .14em; text-transform: uppercase; color: var(--kd-sea); }
  .kd-menu-t td:nth-of-type(1)::before { content: "Breakfast"; }
  .kd-menu-t td:nth-of-type(2)::before { content: "Lunch"; }
  .kd-menu-t td:nth-of-type(3)::before { content: "Dinner"; }
}

/* cabins: the one dark space */
.kd-cab-head { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 28px 0 32px; }
.kd-cab-head .kd-h2 { margin: 0; }
.kd-hatch { width: 56px; flex: none; }
.kd-lid { fill: var(--kd-deck-2); transition: fill .6s var(--kd-ease); }
.kd-hatch.is-lit .kd-lid { fill: var(--kd-flag); }
.kd-bolt { fill: var(--kd-ink); }
.kd-sky { position: relative; margin: 0; border: 1px solid var(--kd-ink); background: var(--kd-night); aspect-ratio: 16 / 9; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.kd-sky:active { cursor: grabbing; }
.kd-sky:focus-visible { outline: 2px solid var(--kd-ink); outline-offset: 3px; }
.kd-sky-poster, .kd-sky-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kd-sky-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s var(--kd-ease); }
.kd-sky.is-live .kd-sky-cv { opacity: 1; }
.kd-sky-l { position: absolute; left: 0; top: 0; font: 600 11px/1 var(--kd-text); letter-spacing: .14em; text-transform: uppercase; color: var(--kd-night-ink); white-space: nowrap; pointer-events: none; }
.kd-sky-l::before { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--kd-flag); margin: 0 8px 1px 0; }
.kd-sky-hint { position: absolute; right: 14px; bottom: 12px; font: 600 11px/1 var(--kd-text); letter-spacing: .14em; text-transform: uppercase; color: var(--kd-night-sea); pointer-events: none; display: none; }
.kd-sky.is-live .kd-sky-hint { display: block; }
.kd-night { background: var(--kd-night); color: var(--kd-night-ink); padding: 28px clamp(20px, 4cqi, 44px) 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; }
.kd-live { grid-column: 1 / -1; font: 400 clamp(22px, 2.3cqi, 32px)/1.25 var(--kd-display); font-variation-settings: "opsz" 48; margin: 0; padding-bottom: 20px; border-bottom: 1px solid rgba(233, 236, 240, .22); text-wrap: balance; }
.kd-ncap { font: 600 11.5px/1.3 var(--kd-text); letter-spacing: .14em; text-transform: uppercase; color: var(--kd-night-sea); margin: 0; display: block; }
.kd-ncap output { color: var(--kd-night-ink); margin-left: 6px; font-variant-numeric: tabular-nums; }
.kd-night-ctl { display: flex; flex-direction: column; gap: 10px; }
.kd-range-n::-webkit-slider-runnable-track { background: var(--kd-night-ink); }
.kd-range-n::-moz-range-track { background: var(--kd-night-ink); }
.kd-range-n::-webkit-slider-thumb { border-color: var(--kd-night-ink); }
.kd-range-n:focus-visible { outline-color: var(--kd-night-ink); }
.kd-night .kd-range-ends { color: var(--kd-night-sea); }
.kd-night-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.kd-toggle { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 18px 0 14px; border: 1px solid var(--kd-night-ink); border-radius: 999px; background: transparent; color: var(--kd-night-ink); font: 560 14px/1 var(--kd-text); cursor: pointer; }
.kd-toggle .kd-sq { background: transparent; border: 1px solid var(--kd-night-ink); width: 8px; height: 8px; }
.kd-toggle[aria-pressed="true"] .kd-sq { background: var(--kd-flag); border-color: var(--kd-flag); }
.kd-toggle:focus-visible { outline-color: var(--kd-night-ink); }
.kd-night-copy p { margin: 0; }
.kd-night .kd-note { color: var(--kd-night-sea); margin-top: 14px; }
.kd-nojs .kd-night-ctl, .kd-sky-nogl .kd-night-row { display: none; }
.kd-nojs .kd-night { grid-template-columns: 1fr; }
@container (max-width: 700px) { .kd-night { grid-template-columns: 1fr; } }
@media (max-width: 1180px) and (min-width: 701px) { .kd-sky { aspect-ratio: 16 / 10; } }
@media (max-width: 700px) { .kd-sky { aspect-ratio: 4 / 5; } }
@media (max-width: 700px) and (max-height: 640px) { .kd-sky { aspect-ratio: auto; height: min(448px, 70svh); } }

/* cockpit */
.kd-cock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 56px; }
.kd-cock-photo { margin-bottom: 60px; }
.kd-cock-photo picture { aspect-ratio: 3 / 2; clip-path: url(#kd-cp-cockpit); }
.kd-winch { position: absolute; width: 64px; top: -24px; }
.kd-winch-p { left: -24px; }
.kd-winch-s { right: -24px; }
.kd-wheel { position: absolute; width: 33%; left: 50%; top: 100%; transform: translate(-50%, -50%); }
.kd-cock .kd-h2, .kd-cock-copy .kd-h2 { text-align: left; margin-top: 0; }
.kd-cock-copy > p { margin: 0 0 28px; max-width: 52ch; }
.kd-pack { margin: 0; border-top: 1px solid var(--kd-ink); }
.kd-pack div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--kd-line); }
.kd-pack dt { font: 600 11.5px/1.6 var(--kd-text); letter-spacing: .14em; text-transform: uppercase; color: var(--kd-sea); }
.kd-pack dd { margin: 0; font-size: 15.5px; line-height: 1.5; }
@container (max-width: 820px) { .kd-cock-grid { grid-template-columns: 1fr; gap: 24px; } .kd-winch { width: 48px; top: -16px; } .kd-winch-p { left: -12px; } .kd-winch-s { right: -12px; } }

/* swim step and the enquiry */
.kd-step-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 16px; }
.kd-step-photo picture { aspect-ratio: 3 / 2; clip-path: url(#kd-cp-transom); }
.kd-ladder { position: absolute; width: 30px; left: 50%; bottom: -46px; transform: translateX(-50%); }
.kd-step-read { margin: 72px 0 0; max-width: 46ch; font: 380 clamp(17px, 1.3vw, 19px)/1.55 var(--kd-text); }
@container (max-width: 820px) { .kd-step-grid { grid-template-columns: 1fr; gap: 48px; } .kd-step-read { margin-top: 64px; } }
.kd-form { display: grid; gap: 18px; padding: 28px clamp(20px, 3cqi, 36px) 32px; border: 1px solid var(--kd-ink); background: var(--kd-deck); }
.kd-form .kd-h3 { margin: 0 0 4px; }
.kd-f-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.kd-fl { display: block; font: 600 11.5px/1.3 var(--kd-text); letter-spacing: .14em; text-transform: uppercase; color: var(--kd-ink); padding: 0; margin: 0 0 8px; }
.kd-f-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.kd-opt { position: relative; display: inline-flex; }
.kd-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.kd-opt span { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px 0 13px; border: 1px solid var(--kd-ink); border-radius: 999px; font: 560 14.5px/1 var(--kd-text); }
.kd-opt span::before { content: ""; width: 8px; height: 8px; border: 1px solid var(--kd-ink); border-radius: 50%; }
.kd-opt input:checked + span { background: var(--kd-flag); }
.kd-opt input:checked + span::before { background: var(--kd-ink); }
.kd-opt input:focus-visible + span { outline: 2px solid var(--kd-ink); outline-offset: 3px; }
.kd-f-days[hidden] { display: none; }
.kd-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
@container (max-width: 520px) { .kd-f-row { grid-template-columns: 1fr; } }
.kd-field { display: block; min-width: 0; }
.kd-field input, .kd-field select, .kd-field textarea {
  display: block; font: 400 16px/1.4 var(--kd-text); color: var(--kd-ink); background: var(--kd-deck-2); border: 0; border-bottom: 1px solid var(--kd-ink);
  padding: 11px 12px; border-radius: 0; width: 100%; min-width: 0;
}
.kd-field textarea { resize: vertical; min-height: 88px; }
.kd-field textarea::placeholder { color: #55657A; }
.kd-field select { -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--kd-ink) 50%), linear-gradient(-45deg, transparent 50%, var(--kd-ink) 50%); background-size: 5px 5px; background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-repeat: no-repeat; }
.kd-guests { display: flex; align-items: center; gap: 8px; }
.kd-guests input { width: 64px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; padding: 8px 4px; }
.kd-guests input::-webkit-inner-spin-button, .kd-guests input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.kd-seats { display: flex; gap: 5px; margin-left: 12px; }
.kd-seats i { width: 10px; height: 10px; border: 1px solid var(--kd-ink); border-radius: 50%; }
.kd-seats i.is-on { background: var(--kd-ink); }
.kd-f-plan { display: flex; gap: 10px; align-items: baseline; margin: 0; font-size: 14.5px; line-height: 1.45; }
.kd-f-plan .kd-sq { transform: translateY(-1px); }
.kd-send { height: 54px; border: 1px solid var(--kd-ink); background: var(--kd-flag); color: var(--kd-ink); font: 600 16px/1 var(--kd-text); letter-spacing: .01em; cursor: pointer; border-radius: 0; transition: background-color .2s var(--kd-ease); }
.kd-send:hover { background: #E3AB00; }
.kd-f-status { min-height: 1.5em; margin: 0; font-size: 15px; font-weight: 560; }

/* the transom: the name across her stern, the home port under it */
.kd-transom { position: relative; z-index: 1; text-align: center; padding: 56px var(--kd-gut) 96px; overflow: hidden; container-type: inline-size; }
.kd-wake { position: absolute; left: 50%; top: 0; bottom: 0; width: var(--kd-tw, 66%); transform: translateX(-50%); pointer-events: none; }
.kd-wake::before, .kd-wake::after { content: ""; position: absolute; top: 0; height: 110%; border-left: 1px solid rgba(47, 110, 142, .55); transform-origin: 0 0; transform: rotate(8deg); }
.kd-wake::before { left: 0; }
.kd-wake::after { right: 0; transform: rotate(-8deg); }
.kd-name { position: relative; font: 700 clamp(64px, 24cqi, 340px)/.8 var(--kd-display); font-variation-settings: "opsz" 100; letter-spacing: .06em; text-transform: uppercase; margin: 0; padding-left: .06em; }
.kd-port { position: relative; font: 600 13px/1 var(--kd-text); letter-spacing: .3em; text-transform: uppercase; margin: 22px 0 48px; padding-left: .3em; }
.kd-foot-links { position: relative; list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.kd-foot-links a { font: 560 15px/1.2 var(--kd-text); text-decoration: none; border-bottom: 1px solid var(--kd-sea); padding: 4px 0; }
.kd-foot-links a:hover { border-bottom-color: var(--kd-ink); }
.kd-foot-note { position: relative; max-width: 60ch; margin: 0 auto; font-size: 13px; line-height: 1.5; background: var(--kd-deck); padding: 4px 8px; }

/* ── laid down by scroll ─────────────────────────────────────────── */
.kd-page { timeline-scope: --kd-t2, --kd-t3, --kd-t5, --kd-t7, --kd-t8, --kd-t9, --kd-t10; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kd-foredeck { view-timeline: --kd-t2 block; }
    .kd-mast { view-timeline: --kd-t3 block; }
    .kd-saloon { view-timeline: --kd-t5 block; }
    .kd-galley { view-timeline: --kd-t7 block; }
    .kd-cabins { view-timeline: --kd-t8 block; }
    .kd-cockpit { view-timeline: --kd-t9 block; }
    .kd-swimstep { view-timeline: --kd-t10 block; }
    .kd-js .kd-sec .kd-draw { stroke-dasharray: 1 1; animation: kd-draw linear both; animation-timeline: var(--kd-tl); animation-range: entry 5% cover 34%; }
    .kd-js .kd-sec .kd-space { animation: kd-focus linear both; animation-timeline: var(--kd-tl); animation-range: entry 20% cover 45%; }
    .kd-js .kd-sec .kd-clip { animation: kd-clip linear both; animation-timeline: var(--kd-tl); animation-range: entry 0% cover 28%; }
    .kd-live-hull .kd-stl { transform-box: fill-box; transform-origin: 50% 50%; animation: kd-bulk linear both; animation-range: entry 0% cover 35%; }
  }
}
.kd-foredeck { --kd-tl: --kd-t2; } .kd-mast { --kd-tl: --kd-t3; } .kd-saloon { --kd-tl: --kd-t5; } .kd-galley { --kd-tl: --kd-t7; }
.kd-cabins { --kd-tl: --kd-t8; } .kd-cockpit { --kd-tl: --kd-t9; } .kd-swimstep { --kd-tl: --kd-t10; }
@keyframes kd-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kd-focus { from { font-variation-settings: "opsz" 36; font-weight: 200; letter-spacing: .09em; } to { font-variation-settings: "opsz" 100; font-weight: 300; letter-spacing: .04em; } }
@keyframes kd-clip { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes kd-bulk { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
/* without scroll timelines: each space steps in as it arrives */
@media (prefers-reduced-motion: no-preference) {
  .kd-steps .kd-sec .kd-draw { stroke-dasharray: 1 1; transition: stroke-dashoffset .9s var(--kd-ease) .2s; }
  .kd-steps .kd-sec .kd-clip { transition: clip-path .9s var(--kd-ease); }
  .kd-steps .kd-sec .kd-space { transition: font-variation-settings .9s var(--kd-ease), font-weight .9s var(--kd-ease), letter-spacing .9s var(--kd-ease); }
  .kd-steps .kd-sec:not(.is-aboard) .kd-draw { stroke-dashoffset: 1; }
  .kd-steps .kd-sec:not(.is-aboard) .kd-clip { clip-path: inset(0 50% 0 50%); }
  .kd-steps .kd-sec:not(.is-aboard) .kd-space { font-variation-settings: "opsz" 36; font-weight: 200; letter-spacing: .09em; }
  .kd-steps .kd-hull .kd-gun, .kd-steps .kd-hull .kd-toe { stroke-dasharray: var(--kd-len) var(--kd-len); stroke-dashoffset: var(--kd-off, 0); transition: stroke-dashoffset .9s var(--kd-ease); }
}
/* ── entrance ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .kd-js .kd-h1, .kd-js .kd-bow-port .kd-stn, .kd-js .kd-bow-foot { animation: kd-rise .9s var(--kd-ease) both; }
  .kd-js .kd-h1 { animation-delay: .12s; }
  .kd-js .kd-bow-foot { animation-delay: .24s; }
  .kd-js .kd-bow-photo picture { animation: kd-open .9s var(--kd-ease) both; }
}
@keyframes kd-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes kd-open { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .kd-page *, .kd-page *::before, .kd-page *::after { animation: none !important; transition: none !important; }
}
.kd-wind-l .kd-from, .kd-dep .kd-from { display: block; margin-top: 4px; font-size: 13px; letter-spacing: .1em; }
.kd-pl-t { font-weight: 600; fill: var(--kd-sea); }
.kd-nojs .kd-hull { top: calc(100svh - 24px); height: auto; bottom: 0; }
@media (max-width: 440px) {
  .kd-sec .kd-stn { display: flex; justify-content: center; text-align: center; }
  .kd-sec .kd-stn::before, .kd-sec .kd-stn::after { display: none; }
}