/* Solenne Atoll — layout and art direction. Every value comes from tokens.css.
 * Breakpoint: 900px (the same number as --s-bp-desk, which site.js reads). */

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s-nav-h); }
body {
    margin: 0;
    background: var(--s-sand);
    color: var(--s-reef);
    font: var(--s-weight-body) var(--s-step-body)/var(--s-leading-body) var(--s-font-body);
    font-feature-settings: "kern", "liga";
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus { outline: none; }
:focus-visible { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-off); border-radius: var(--s-radius-sm); }
.sa-vh {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sa-skip {
    position: absolute; left: var(--s-gutter); top: 0; z-index: var(--s-z-skip);
    padding: var(--s-space-6) var(--s-space-9); background: var(--s-reef); color: var(--s-sand);
    border-radius: 0 0 var(--s-radius-sm) var(--s-radius-sm);
    transform: translateY(-110%); transition: transform var(--s-dur-fast) var(--s-ease);
}
.sa-skip:focus-visible { transform: none; }
.sa-num { font-variant-numeric: lining-nums tabular-nums; }

.sa-wrap { width: 100%; max-width: var(--s-max); margin-inline: auto; padding-inline: var(--s-gutter); }
.sa-section { padding-block: var(--s-section); scroll-margin-top: var(--s-nav-h); }
section[id] { scroll-margin-top: var(--s-nav-h); }

h2 {
    font: var(--s-weight-light) var(--s-step-h2)/var(--s-leading-head) var(--s-font-display);
    letter-spacing: var(--s-tracking-head);
    text-wrap: balance;
}
h3 { font: var(--s-weight-strong) var(--s-step-h3)/var(--s-leading-head) var(--s-font-display); }
.sa-lede { margin-top: var(--s-space-10); max-width: var(--s-measure); font-size: var(--s-step-lede); color: var(--s-reef-soft); text-wrap: pretty; }

/* The tide table: the time of day and the water, in the margin beside each heading */
.sa-tide {
    display: flex; align-items: center; gap: var(--s-space-6);
    font: italic var(--s-weight-body) var(--s-step-tide)/var(--s-leading-135) var(--s-font-italic);
    color: var(--s-reef-soft);
}
.sa-tide-glyph { flex: none; width: var(--s-tide-glyph); height: auto; fill: none; stroke: var(--s-lagoon-deep); stroke-width: var(--s-stroke-7); stroke-linecap: round; }

/* Buttons: a crisp coral rectangle with a lift — deliberately not a pill (Morrow & Rook owns that shape). Links: reef underline. */
.sa-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--s-touch); padding: var(--s-space-6) var(--s-space-12);
    border: 0; border-radius: var(--s-btn-radius);
    background: var(--s-coral); color: var(--s-reef);
    font: var(--s-weight-button) var(--s-step-body)/var(--s-leading-120) var(--s-font-body);
    text-decoration: none; cursor: pointer;
    box-shadow: var(--s-shadow-lift);
    transition: transform var(--s-dur-fast) var(--s-ease), box-shadow var(--s-dur-fast) var(--s-ease), background-color var(--s-dur-fast) var(--s-ease);
}
.sa-btn:hover { background: var(--s-coral-lift); box-shadow: var(--s-shadow-lift-hover); transform: translateY(var(--s-lift)); }
.sa-btn:active { transform: translateY(0); }
.sa-textlink {
    display: inline-flex; align-items: center; min-height: var(--s-touch);
    color: var(--s-reef); font-weight: var(--s-weight-strong);
    text-decoration: underline; text-decoration-color: var(--s-lagoon-deep);
    text-decoration-thickness: var(--s-underline-w); text-underline-offset: var(--s-underline-off);
    transition: text-underline-offset var(--s-dur-fast) var(--s-ease);
}
.sa-textlink:hover { text-underline-offset: var(--s-underline-off-hover); }

/* ── Nav ───────────────────────────────────────────────────────────────── */
.sa-nav {
    position: sticky; top: 0; z-index: var(--s-z-nav);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-space-12);
    height: var(--s-nav-h); padding-inline: var(--s-gutter);
    background: var(--s-nav-bg);
    -webkit-backdrop-filter: blur(var(--s-blur-nav)); backdrop-filter: blur(var(--s-blur-nav));
    border-bottom: var(--s-hairline) solid var(--s-line);
}
.sa-wordmark {
    display: inline-flex; align-items: center; min-height: var(--s-touch);
    font: var(--s-weight-body) var(--s-step-wordmark)/var(--s-leading-100) var(--s-font-display);
    letter-spacing: var(--s-tracking-wordmark); text-decoration: none; white-space: nowrap;
}
.sa-menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sa-menu-btn { display: none; }
.sa-links { display: flex; align-items: center; gap: var(--s-nav-links-gap); }
.sa-links ul { display: flex; gap: var(--s-nav-item-gap); }
.sa-links li a {
    display: inline-flex; align-items: center; min-height: var(--s-touch); padding-inline: var(--s-space-3);
    text-decoration: none; font-size: var(--s-step-small); color: var(--s-reef);
    background: linear-gradient(var(--s-lagoon-deep), var(--s-lagoon-deep)) no-repeat left calc(100% - var(--s-nav-underline-y)) / var(--s-underline-start) var(--s-underline-w);
    transition: background-size var(--s-dur) var(--s-ease);
}
.sa-links li a:hover, .sa-links li a[aria-current="true"] { background-size: calc(100% - var(--s-nav-underline-inset)) var(--s-underline-w); background-position-x: var(--s-space-3); }
.sa-link-time { display: none; }
.sa-only-sheet { display: none; }
.sa-btn-nav { min-height: var(--s-touch-min); padding: var(--s-space-5) var(--s-space-10); font-size: var(--s-step-small); }

@media (max-width: 899px) {
    .sa-menu-btn {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: var(--s-touch-min); min-width: var(--s-menu-btn-w); padding: var(--s-space-4) var(--s-space-8);
        border: var(--s-hairline) solid var(--s-line-strong); border-radius: var(--s-radius);
        background: var(--s-paper); font-weight: var(--s-weight-strong); font-size: var(--s-step-small);
        cursor: pointer; position: relative; z-index: 2;
    }
    .sa-menu-close { display: none; }
    .sa-menu-toggle:checked ~ .sa-menu-btn .sa-menu-open { display: none; }
    .sa-menu-toggle:checked ~ .sa-menu-btn .sa-menu-close { display: inline; }
    .sa-menu-toggle:focus-visible ~ .sa-menu-btn { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-off-sm); }
    /* The sheet hangs from the sticky header (absolute, so a backdrop-filter on the
       header cannot clip it); the header's filter is dropped while it is open anyway. */
    .sa-links {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        height: calc(100vh - var(--s-nav-h)); height: calc(100svh - var(--s-nav-h));
        flex-direction: column; align-items: stretch; gap: var(--s-space-13);
        padding: var(--s-space-10) var(--s-gutter) var(--s-space-14); overflow-y: auto;
        background: var(--s-sheet-bg); z-index: var(--s-z-sheet);
    }
    .sa-nav:has(.sa-menu-toggle:checked) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--s-sheet-bg); }
    .sa-menu-toggle:checked ~ .sa-links { display: flex; }
    .sa-links ul { flex-direction: column; gap: 0; }
    .sa-links li { border-bottom: var(--s-hairline) solid var(--s-line); }
    .sa-only-sheet { display: block; }
    .sa-links li a { display: flex; gap: var(--s-space-9); align-items: baseline; min-height: var(--s-sheet-row); padding: var(--s-space-7) 0; font: var(--s-weight-light) var(--s-step-h3)/var(--s-leading-120) var(--s-font-display); background: none; }
    .sa-link-time { display: inline; min-width: var(--s-sheet-time-w); font: italic var(--s-weight-body) var(--s-step-tide)/var(--s-leading-100) var(--s-font-italic); color: var(--s-reef-soft); }
    .sa-btn-nav { min-height: var(--s-touch); font-size: var(--s-step-body); }
    body:has(.sa-menu-toggle:checked) { overflow: hidden; }
}

/* ── 1. Arrival ────────────────────────────────────────────────────────── */
.sa-hero {
    position: relative; display: flex; align-items: center;
    min-height: calc(100vh - var(--s-nav-h) - var(--s-ribbon-h));
    min-height: calc(100svh - var(--s-nav-h) - var(--s-ribbon-h));
    padding: var(--s-hero-pad-y) var(--s-gutter);
    overflow: clip;
}
.sa-hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: var(--s-hero-art-w); pointer-events: none; }
.sa-hero-art picture, .sa-hero-art img { width: 100%; height: 100%; }
.sa-hero-art img { object-fit: contain; object-position: 60% 50%; }
.sa-caustics {
    position: absolute; inset: 0; width: 100%; height: 100%;
    filter: blur(var(--s-blur-caustic)); opacity: var(--s-caustic-opacity);
    -webkit-mask: url("img/atoll-mask.webp") 60% 50% / contain no-repeat;
    mask: url("img/atoll-mask.webp") 60% 50% / contain no-repeat;
}
.sa-hero-copy { position: relative; width: var(--s-hero-copy-w); display: grid; gap: var(--s-hero-gap); justify-items: start; }
.sa-title {
    font: var(--s-weight-display) var(--s-step-hero)/var(--s-leading-tight) var(--s-font-display);
    letter-spacing: var(--s-tracking-display);
    margin-left: var(--s-title-optical);
}
.sa-title span { display: block; }
.sa-hero-line { font: italic var(--s-weight-body) var(--s-step-hero-line)/var(--s-leading-130) var(--s-font-italic); max-width: var(--s-hero-line-measure); text-wrap: balance; }
.sa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-7) var(--s-space-13); }
.sa-seaplane { display: flex; align-items: center; gap: var(--s-space-6); font-size: var(--s-step-small); color: var(--s-reef); }
.sa-plane-glyph { width: var(--s-plane-glyph); height: auto; fill: none; stroke: var(--s-reef); stroke-width: var(--s-stroke-6); stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 899px) {
    .sa-hero { display: block; padding: 0 0 var(--s-space-11); min-height: 0; }
    .sa-hero-art { position: relative; width: 100%; height: var(--s-hero-art-m-h-fallback); height: var(--s-hero-art-m-h); }
    .sa-hero-art img { object-fit: cover; object-position: 50% 50%; }
    .sa-caustics {
        -webkit-mask: url("img/atoll-mask-m.webp") 50% 50% / cover no-repeat;
        mask: url("img/atoll-mask-m.webp") 50% 50% / cover no-repeat;
    }
    .sa-hero-copy { width: auto; padding: var(--s-space-2) var(--s-gutter) 0; gap: var(--s-space-6); }
    .sa-hero-copy .sa-tide { display: none; }
    .sa-hero-line { font-size: var(--s-step-lede); }
    .sa-actions { width: 100%; gap: var(--s-space-2) var(--s-space-10); }
    .sa-actions .sa-btn { flex: 1 1 100%; }
    .sa-seaplane { font-size: var(--s-step-micro); }
}

/* ── Section heads: the tide line sits in the margin, beside the heading ── */
.sa-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-gap); row-gap: var(--s-space-7); margin-bottom: var(--s-gap-lg); }
.sa-head .sa-tide { grid-column: 1 / 4; align-self: start; padding-top: var(--s-head-tide-pad); padding-right: var(--s-space-6); border-top: var(--s-hairline) solid var(--s-line); }
.sa-head-main { grid-column: 4 / 12; }
@media (max-width: 899px) {
    .sa-head { display: block; }
    .sa-head .sa-tide { border-top: 0; padding: 0; margin-bottom: var(--s-space-6); }
}

/* ── 2. The villas ─────────────────────────────────────────────────────── */
.sa-villas .sa-head-main { grid-column: 4 / 10; }
.sa-staff { grid-column: 10 / 13; align-self: end; padding: var(--s-space-11) 0 var(--s-space-2) var(--s-space-11); border-left: var(--s-hairline) solid var(--s-line-strong); }
.sa-staff-fig { display: flex; align-items: baseline; gap: var(--s-space-5); font: var(--s-weight-display) var(--s-step-figure)/var(--s-leading-100) var(--s-font-display); }
.sa-staff-fig span + span { font: italic var(--s-weight-body) var(--s-step-h3)/var(--s-leading-100) var(--s-font-italic); }
.sa-staff-per { margin-top: var(--s-space-3); font-weight: var(--s-weight-strong); }
.sa-staff-note { margin-top: var(--s-space-4); font-size: var(--s-step-small); color: var(--s-reef-soft); }

/* Each villa is a wide row: its plan drawn large across seven columns, the particulars beside it.
   The second row mirrors the first, so the page walks along the jetty and onto the sand. */
.sa-villa-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-gap); align-items: start; }
.sa-villa {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; overflow: hidden;
    background: var(--s-paper); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-card);
}
.sa-villa + .sa-villa .sa-plan { order: 2; }
.sa-villa + .sa-villa .sa-plan-box { justify-content: flex-end; }
.sa-plan { padding: var(--s-plan-pad); align-self: stretch; display: flex; align-items: center; background: var(--s-sand-deep); }
.sa-plan-box { width: 100%; }
/* The key and the plan light each other: point at a room in either. */
.sa-plan-zone, .sa-plan-marker circle { transition: fill var(--s-dur-fast) var(--s-ease), stroke var(--s-dur-fast) var(--s-ease); }
.sa-plan-svg .sa-plan-zone.is-lit { fill: var(--s-plan-lit); }
.sa-plan-marker.is-lit circle { fill: var(--s-plan-lit-edge); }
.sa-plan-zone[data-sa-zone] { cursor: pointer; }
.sa-plan-key li { cursor: pointer; border-radius: var(--s-radius-sm); padding: var(--s-space-2) var(--s-space-3); margin: calc(var(--s-space-2) * -1) calc(var(--s-space-3) * -1); transition: background-color var(--s-dur-fast) var(--s-ease); }
.sa-plan-key li.is-lit { background: var(--s-plan-lit); color: var(--s-reef); }
.sa-plan-key li.is-lit::before { background: var(--s-plan-lit-edge); }
.sa-plan-box { display: flex; align-items: flex-end; aspect-ratio: 25 / 14; }
.sa-plan-svg { width: calc(var(--plan-share) * 100%); height: auto; aspect-ratio: var(--plan-ratio); }
.sa-villa-body { padding: var(--s-card-pad); display: grid; gap: var(--s-space-6); align-content: start; }
.sa-villa-count { font: italic var(--s-weight-body) var(--s-step-tide)/var(--s-leading-130) var(--s-font-italic); color: var(--s-reef-soft); }
.sa-villa-area { display: flex; align-items: baseline; gap: var(--s-space-2); flex-wrap: wrap; }
.sa-villa-area .sa-num { font: var(--s-weight-display) var(--s-step-figure)/var(--s-leading-100) var(--s-font-display); }
.sa-villa-unit { font-size: var(--s-step-h3); font-weight: var(--s-weight-light); }
.sa-villa-areanote { margin-left: var(--s-space-4); color: var(--s-reef-soft); font-size: var(--s-step-small); }
.sa-villa-feel { max-width: var(--s-measure); }
.sa-plan-key { counter-reset: zone; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-space-3) var(--s-space-10); margin-top: var(--s-space-2); padding-top: var(--s-space-7); border-top: var(--s-hairline) solid var(--s-line); font-size: var(--s-step-small); color: var(--s-reef); }
.sa-plan-key li { counter-increment: zone; display: flex; gap: var(--s-space-4); }
.sa-plan-key li::before {
    content: counter(zone); flex: none; display: inline-grid; place-items: center;
    width: var(--s-key-dot); height: var(--s-key-dot); margin-top: var(--s-hairline); border-radius: 50%;
    background: var(--s-reef); color: var(--s-sand); font-size: var(--s-step-badge); font-weight: var(--s-weight-strong);
}
.sa-plan-area { margin-left: auto; white-space: nowrap; color: var(--s-reef); font-variant-numeric: tabular-nums; }
.sa-villa-facts { display: grid; gap: 0; margin-top: var(--s-space-3); }
.sa-villa-facts div { display: grid; grid-template-columns: var(--s-facts-label-w) 1fr; gap: var(--s-space-6); padding: var(--s-space-5) 0; border-top: var(--s-hairline) solid var(--s-line); font-size: var(--s-step-small); }
.sa-villa-facts dt { color: var(--s-reef-soft); }
.sa-plan-note { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-space-5); margin-top: var(--s-space-9); font-size: var(--s-step-micro); color: var(--s-reef-soft); }

/* plan drawing */
.sa-plan-ground { fill: var(--s-plan-water); }
.sa-plan-garden .sa-plan-ground { fill: var(--s-plan-garden); }
.sa-plan-ripple { fill: none; stroke: var(--s-plan-ripple); stroke-width: var(--s-stroke-8); stroke-linecap: round; }
.sa-plan-leaf { fill: var(--s-plan-garden-dot); }
.sa-plan-hatch { stroke: var(--s-plan-wall); stroke-width: var(--s-stroke-2); opacity: 0.45; }
.sa-plan-gardenwall { fill: none; stroke: var(--s-reef-soft); stroke-width: var(--s-stroke-8); stroke-dasharray: var(--s-plan-dash); }
.sa-plan-access { fill: var(--s-plan-deck); stroke: var(--s-plan-wall); stroke-width: var(--s-stroke-3); }
.sa-plan-zone { fill: var(--s-plan-room); stroke: var(--s-plan-wall); stroke-width: var(--s-stroke-4); }
.sa-plan-zone.is-deck { fill: var(--s-plan-deck); }
.sa-plan-glass { fill: var(--s-plan-glass); stroke: var(--s-plan-wall); stroke-width: var(--s-stroke-3); }
.sa-plan-pool { fill: var(--s-plan-pool); stroke: var(--s-plan-wall); stroke-width: var(--s-stroke-3); }
.sa-plan-steps rect { fill: var(--s-plan-deck); stroke: var(--s-plan-wall); stroke-width: var(--s-stroke-3); }
.sa-plan-steps line { stroke: var(--s-plan-wall); stroke-width: var(--s-stroke-3); }
.sa-plan-outline { fill: none; stroke: var(--s-plan-wall); stroke-width: var(--s-stroke-13); }
.sa-plan-marker circle { fill: var(--s-reef); }
.sa-plan-marker text { fill: var(--s-sand); font: var(--s-weight-strong) var(--s-plan-marker-size)/var(--s-leading-100) var(--s-font-body); }
/* Phones draw the plans small: the badges and the scale label grow so they render at 12px or more. */
.sa-plan-dot, .sa-plan-scale text { transform-box: fill-box; transform-origin: center; transform: scale(var(--s-plan-badge-scale)); }
.sa-plan-scale text { transform-origin: right center; }
.sa-plan-furn rect, .sa-plan-furn circle { fill: var(--s-paper); stroke: var(--s-reef-soft); stroke-width: var(--s-stroke-1); }
.sa-plan-furn .is-soft { fill: var(--s-sand-deep); }
.sa-plan-furn .is-line { fill: none; stroke: var(--s-reef-soft); stroke-width: var(--s-stroke-1); }
.sa-plan-zone { fill: var(--s-plan-room); }
.sa-plan-scale path { fill: none; stroke: var(--s-reef); stroke-width: var(--s-stroke-7); }
.sa-plan-scale text { fill: var(--s-reef); font: var(--s-weight-strong) var(--s-plan-scale-size)/var(--s-leading-100) var(--s-font-body); }

@media (max-width: 899px) {
    .sa-villas .sa-head-main { margin-bottom: var(--s-space-11); }
    .sa-staff { padding: var(--s-space-8) 0 0; border-left: 0; border-top: var(--s-hairline) solid var(--s-line-strong); }
    .sa-villa-list {
        display: flex; gap: var(--s-space-7); overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-gutter);
        margin-inline: calc(var(--s-gutter) * -1); padding: var(--s-space-2) var(--s-gutter) var(--s-space-13);
        scrollbar-width: none;
    }
    .sa-villa-list::-webkit-scrollbar { display: none; }
    .sa-villa { flex: 0 0 var(--s-carousel-peek); scroll-snap-align: start; }
    .sa-villa { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .sa-villa + .sa-villa .sa-plan { order: 0; }
    .sa-plan-key { grid-template-columns: 1fr; }
    .sa-plan-note { margin-top: var(--s-space-2); }
}

/* ── 3. A day here ─────────────────────────────────────────────────────── */
.sa-day { padding-top: var(--s-section-tight); scroll-margin-top: var(--s-nav-h); }
/* Still (no JS, reduced motion): the title heads the strip, one line, the intro beside it. */
.sa-day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-space-4) var(--s-gap); margin-bottom: var(--s-day-head-gap); }
.sa-day-intro { font: italic var(--s-weight-body) var(--s-step-lede)/var(--s-leading-135) var(--s-font-italic); color: var(--s-reef-soft); max-width: var(--s-measure); }
/* Moving: the hour is the headline; the title is read once, on the scene, as a caption. */
.sa-js .sa-day:not(.is-static) .sa-day-headwrap {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sa-day-cap {
    position: absolute; z-index: 2; left: var(--s-space-8); top: var(--s-space-8); max-width: min(30rem, calc(100% - 2 * var(--s-space-8)));
    display: grid; gap: var(--s-space-1); padding: var(--s-space-6) var(--s-space-8);
    background: var(--s-cap-bg); border-radius: var(--s-radius-sm); box-shadow: var(--s-shadow-card);
    -webkit-backdrop-filter: blur(var(--s-cap-blur)); backdrop-filter: blur(var(--s-cap-blur));
    font: italic var(--s-weight-body) var(--s-step-tide)/var(--s-leading-130) var(--s-font-italic); color: var(--s-reef-soft);
}
.sa-day-cap-title { font: var(--s-weight-strong) var(--s-step-lede)/var(--s-leading-130) var(--s-font-display); color: var(--s-reef); font-style: normal; }

/* The scene is a pure function of --sa-t: every colour is a stop mixed by the clock. */
.sa-scene, .sa-day-sticky {
    --f1: clamp(0, var(--sa-t) / var(--k1), 1);
    --f2: clamp(0, (var(--sa-t) - var(--k1)) / (var(--k2) - var(--k1)), 1);
    --f3: clamp(0, (var(--sa-t) - var(--k2)) / (var(--k3) - var(--k2)), 1);
    --f4: clamp(0, (var(--sa-t) - var(--k3)) / (var(--k4) - var(--k3)), 1);
}
.sa-scene {
    --c-sky-top: color-mix(in oklab, var(--s-day-night-sky-top) calc(var(--f4) * 100%), color-mix(in oklab, var(--s-day-dusk-sky-top) calc(var(--f3) * 100%), color-mix(in oklab, var(--s-day-afternoon-sky-top) calc(var(--f2) * 100%), color-mix(in oklab, var(--s-day-morning-sky-top) calc(var(--f1) * 100%), var(--s-day-dawn-sky-top)))));
    --c-sky-low: color-mix(in oklab, var(--s-day-night-sky-low) calc(var(--f4) * 100%), color-mix(in oklab, var(--s-day-dusk-sky-low) calc(var(--f3) * 100%), color-mix(in oklab, var(--s-day-afternoon-sky-low) calc(var(--f2) * 100%), color-mix(in oklab, var(--s-day-morning-sky-low) calc(var(--f1) * 100%), var(--s-day-dawn-sky-low)))));
    --c-sea-far: color-mix(in oklab, var(--s-day-night-sea-far) calc(var(--f4) * 100%), color-mix(in oklab, var(--s-day-dusk-sea-far) calc(var(--f3) * 100%), color-mix(in oklab, var(--s-day-afternoon-sea-far) calc(var(--f2) * 100%), color-mix(in oklab, var(--s-day-morning-sea-far) calc(var(--f1) * 100%), var(--s-day-dawn-sea-far)))));
    --c-sea-near: color-mix(in oklab, var(--s-day-night-sea-near) calc(var(--f4) * 100%), color-mix(in oklab, var(--s-day-dusk-sea-near) calc(var(--f3) * 100%), color-mix(in oklab, var(--s-day-afternoon-sea-near) calc(var(--f2) * 100%), color-mix(in oklab, var(--s-day-morning-sea-near) calc(var(--f1) * 100%), var(--s-day-dawn-sea-near)))));
    --c-ground: color-mix(in oklab, var(--s-day-night-ground) calc(var(--f4) * 100%), color-mix(in oklab, var(--s-day-dusk-ground) calc(var(--f3) * 100%), color-mix(in oklab, var(--s-day-afternoon-ground) calc(var(--f2) * 100%), color-mix(in oklab, var(--s-day-morning-ground) calc(var(--f1) * 100%), var(--s-day-dawn-ground)))));
    --c-wall: color-mix(in oklab, var(--s-day-night-wall) calc(var(--f4) * 100%), color-mix(in oklab, var(--s-day-dusk-wall) calc(var(--f3) * 100%), color-mix(in oklab, var(--s-day-afternoon-wall) calc(var(--f2) * 100%), color-mix(in oklab, var(--s-day-morning-wall) calc(var(--f1) * 100%), var(--s-day-dawn-wall)))));
    --c-roof: color-mix(in oklab, var(--s-day-night-roof) calc(var(--f4) * 100%), color-mix(in oklab, var(--s-day-dusk-roof) calc(var(--f3) * 100%), color-mix(in oklab, var(--s-day-afternoon-roof) calc(var(--f2) * 100%), color-mix(in oklab, var(--s-day-morning-roof) calc(var(--f1) * 100%), var(--s-day-dawn-roof)))));
    --c-sun: color-mix(in oklab, var(--s-day-night-sun) calc(var(--f4) * 100%), color-mix(in oklab, var(--s-day-dusk-sun) calc(var(--f3) * 100%), color-mix(in oklab, var(--s-day-afternoon-sun) calc(var(--f2) * 100%), color-mix(in oklab, var(--s-day-morning-sun) calc(var(--f1) * 100%), var(--s-day-dawn-sun)))));
    --u: clamp(0, var(--sa-t) / var(--k-set), 1);
    --sun-x: calc(var(--s-day-sun-x0) + var(--u) * (var(--s-day-sun-x1) - var(--s-day-sun-x0)));
    --sun-y: calc(var(--s-day-horizon) - sin(var(--u) * 180deg) * var(--s-day-sun-rise));
    --sun-o: calc(1 - clamp(0, (var(--sa-t) - var(--k-set)) / var(--s-day-fade), 1));
    --night: clamp(0, (var(--sa-t) - var(--k-stars)) / (var(--k4) - var(--k-stars)), 1);
    --lit: clamp(0, (var(--sa-t) - var(--k-lights)) / var(--s-day-fade), 1);
    --tide: cos(calc(var(--tide-a) + var(--sa-t) * var(--tide-b)));
    width: 100%; height: 100%;
}
.sa-st-sky-top { stop-color: var(--c-sky-top); }
.sa-st-sky-low { stop-color: var(--c-sky-low); }
.sa-st-sea-far { stop-color: var(--c-sea-far); }
.sa-st-sea-near { stop-color: var(--c-sea-near); }
.sa-st-glow-in { stop-color: var(--c-sun); stop-opacity: 0.6; }
.sa-st-glow-out { stop-color: var(--c-sun); stop-opacity: 0; }
.sa-st-refl-in { stop-color: var(--s-mask-fade); stop-opacity: 0.9; }
.sa-st-refl-out { stop-color: var(--s-mask-fade); stop-opacity: 0; }
.sa-mask-on { fill: var(--s-mask-on); }
.sa-mask-off { fill: var(--s-mask-off); }
.sa-night { opacity: var(--night); fill: var(--s-star); }
.sa-moon { fill: var(--s-day-moon); }
.sa-clouds { fill: color-mix(in oklab, var(--c-sky-low) 55%, var(--c-sun)); opacity: calc(0.7 - var(--night) * 0.6); }
.sa-sun { transform: translate(calc(var(--sun-x) * 1px), calc(var(--sun-y) * 1px)); opacity: var(--sun-o); }
.sa-sun-disc { fill: var(--c-sun); }
.sa-horizon { stroke: var(--c-sky-low); stroke-width: var(--s-stroke-5); opacity: 0.7; }
.sa-glitter { fill: var(--c-sun); transform: translateX(calc(var(--sun-x) * 1px)); opacity: calc(sin(var(--u) * 180deg) * var(--sun-o) * 0.85); }
.sa-reefline { fill: none; stroke: var(--s-day-foam); stroke-width: var(--s-stroke-9); stroke-linecap: round; opacity: calc(0.75 - var(--night) * 0.55); }
.sa-stilts rect, .sa-jetty-posts rect { fill: var(--c-roof); }
.sa-deck { fill: color-mix(in oklab, var(--c-wall) 70%, var(--c-roof)); }
.sa-wall { fill: var(--c-wall); }
.sa-window rect { fill: color-mix(in oklab, var(--s-day-window-lit) calc(var(--lit) * 100%), color-mix(in oklab, var(--c-sea-far) 55%, var(--c-roof))); }
.sa-roof { fill: var(--c-roof); }
.sa-roof-top { fill: color-mix(in oklab, var(--c-roof) 82%, var(--c-sun)); }
.sa-roof-edge { fill: none; stroke: color-mix(in oklab, var(--c-roof) 60%, var(--s-day-thatch-ink)); stroke-width: var(--s-stroke-15); stroke-linecap: round; }
.sa-thatch { fill: none; stroke: color-mix(in oklab, var(--c-roof) 72%, var(--s-day-thatch-ink)); stroke-width: var(--s-stroke-7); stroke-linecap: round; opacity: 0.75; }
.sa-fringe { fill: none; stroke: color-mix(in oklab, var(--c-roof) 65%, var(--s-day-thatch-ink)); stroke-width: var(--s-stroke-8); stroke-linecap: round; }
.sa-eave { fill: var(--s-day-thatch-ink); opacity: calc(var(--s-day-eave-shade) * (1 - var(--night))); }
.sa-mullion { fill: none; stroke: var(--c-wall); stroke-width: var(--s-stroke-12); }
.sa-brace, .sa-rail path, .sa-ladder { fill: none; stroke: var(--c-roof); stroke-width: var(--s-stroke-12); stroke-linecap: round; }
.sa-deck-line { fill: none; stroke: color-mix(in oklab, var(--c-roof) 60%, var(--c-wall)); stroke-width: var(--s-stroke-5); opacity: 0.6; }
.sa-jetty { fill: none; stroke: color-mix(in oklab, var(--c-wall) 70%, var(--c-roof)); stroke-width: var(--s-stroke-16); }
.sa-planks { fill: none; stroke: color-mix(in oklab, var(--c-roof) 70%, var(--s-day-thatch-ink)); stroke-width: var(--s-stroke-5); opacity: 0.55; }
.sa-rope { fill: none; stroke: var(--c-roof); stroke-width: var(--s-stroke-8); opacity: 0.8; }
.sa-reflection { opacity: var(--s-day-refl); }
/* Breeze: the bands that break the reflection drift with the clock, strongest at midday. */
.sa-shimmer {
    --breeze: calc(var(--s-day-shimmer-calm) + sin(var(--u) * 180deg) * (1 - var(--s-day-shimmer-calm)));
    fill: none; stroke: var(--c-sea-near); stroke-width: var(--s-stroke-10); stroke-linecap: round; opacity: calc(var(--breeze) * var(--s-day-shimmer-o) * (1 - var(--night) * 0.5));
}
.sa-shimmer-a { transform: translateX(calc(sin(var(--sa-t) * var(--s-day-shimmer-turns) * 360deg) * var(--breeze) * var(--s-day-shimmer-dx))); }
.sa-shimmer-b { transform: translateX(calc(cos(var(--sa-t) * var(--s-day-shimmer-turns) * 360deg) * var(--breeze) * var(--s-day-shimmer-dx) * -1)); }
.sa-ripples { fill: none; stroke: var(--c-sky-low); stroke-width: var(--s-stroke-9); stroke-linecap: round; opacity: 0.55; }
.sa-lightpaths { fill: var(--s-day-glow); opacity: calc(var(--lit) * 0.6); }
.sa-shore { transform: translateY(calc(var(--tide) * var(--s-day-tide-rise) * 1px)); }
.sa-ground { fill: var(--c-ground); }
.sa-foam { fill: none; stroke: var(--s-day-foam); stroke-width: var(--s-stroke-11); opacity: calc(0.85 - var(--night) * 0.5); }

/* The pinned version (motion allowed + JS): one stage, the clock scrubbed by scroll */
.sa-day-pin { display: none; }
.sa-js .sa-day:not(.is-static) .sa-day-pin { display: block; }
.sa-js .sa-day:not(.is-static) .sa-day-static { display: none; }
.sa-day-pin { height: calc(100vh + var(--s-day-pin)); height: calc(100svh + var(--s-day-pin)); }
.sa-day-sticky {
    position: sticky; top: var(--s-nav-h);
    height: calc(100vh - var(--s-nav-h)); height: calc(100svh - var(--s-nav-h));
    display: grid; grid-template-rows: var(--s-day-stage-h) minmax(0, 1fr);
    gap: var(--s-day-gap);
    padding: var(--s-day-pad-top) var(--s-gutter) var(--s-day-pad-bottom);
    max-width: calc(var(--s-max) + var(--s-gutter) * 2); margin-inline: auto;
}
.sa-day-sticky.is-fit { grid-template-rows: var(--sa-stage) minmax(0, 1fr); }
.sa-day-stage { position: relative; overflow: hidden; border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-card); }
.sa-day-foot { display: grid; grid-template-rows: auto 1fr; gap: var(--s-day-foot-gap); min-height: 0; }

.sa-ruler { position: relative; height: var(--s-ruler-h); margin-inline: var(--s-space-5); }
.sa-ruler::before, .sa-ruler::after { content: ""; position: absolute; left: 0; right: 0; top: var(--s-ruler-line-y); height: var(--s-rule-w); border-radius: var(--s-rule-w); background: var(--s-line); }
.sa-ruler::after { background: var(--s-lagoon-deep); transform-origin: left; transform: scaleX(var(--sa-t)); }
.sa-ruler li {
    --near: clamp(0, 1 - max(var(--sa-t) - var(--ti), var(--ti) - var(--sa-t)) / var(--s-day-near), 1);
    position: absolute; top: 0; left: calc(var(--ti) * 100%); transform: translateX(-50%);
    display: grid; justify-items: center; gap: var(--s-space-2);
}
.sa-ruler li::before {
    content: ""; width: var(--s-ruler-dot); height: var(--s-ruler-dot); border-radius: 50%;
    background: color-mix(in oklab, var(--s-coral) calc(var(--near) * 100%), var(--s-sand));
    border: var(--s-rule-w) solid var(--s-lagoon-deep);
    transform: scale(calc(0.75 + var(--near) * 0.35));
}
.sa-ruler li:first-child { transform: none; justify-items: start; }
.sa-ruler li:last-child { transform: translateX(-100%); justify-items: end; }
.sa-ruler span { font: italic var(--s-weight-body) var(--s-step-micro)/var(--s-leading-100) var(--s-font-italic); color: var(--s-reef-soft); }

.sa-hours { display: grid; grid-template-areas: "card"; align-items: start; min-height: 0; }
/* Each card owns the window [lo, hi] and is fully gone at both edges, so two
 * cards are never visible together: the outgoing card rises away, the next
 * rises in from below, with a short empty beat between them. */
.sa-hour {
    --in: clamp(0, (var(--sa-t) - var(--lo)) / var(--s-day-card-fade), 1);
    --out: clamp(0, (var(--hi) - var(--sa-t)) / var(--s-day-card-fade), 1);
    grid-area: card; opacity: min(var(--in), var(--out));
    transform: translateY(calc((1 - var(--in)) * var(--s-day-card-shift) - (1 - var(--out)) * var(--s-day-card-shift)));
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-gap); align-items: start; align-content: start;
}
.sa-hour-time { font: var(--s-weight-display) var(--s-step-hour)/var(--s-leading-100) var(--s-font-display); font-variant-numeric: tabular-nums; }
.sa-hour-text { display: grid; gap: var(--s-space-3); max-width: var(--s-measure-wide); }
.sa-hour-tide { font: italic var(--s-weight-body) var(--s-step-tide)/var(--s-leading-130) var(--s-font-italic); color: var(--s-reef-soft); }
.sa-hour h3 { font-weight: var(--s-weight-body); }

@supports (animation-timeline: view()) {
    .sa-day.is-sdt .sa-day-pin { view-timeline: --sa-day block; view-timeline-inset: var(--s-nav-h) 0; }
    .sa-day.is-sdt .sa-day-sticky { animation: sa-clock linear both; animation-timeline: --sa-day; animation-range: contain 0% contain 100%; }
}
@keyframes sa-clock { from { --sa-t: 0; } to { --sa-t: 1; } }

/* The designed static version (reduced motion, no JS): five panels, then every hour */
.sa-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-space-6); }
.sa-strip-scene { aspect-ratio: var(--s-strip-ratio); overflow: hidden; border-radius: var(--s-radius); box-shadow: var(--s-shadow-card); }
.sa-strip p { display: flex; gap: var(--s-space-4); align-items: baseline; margin-top: var(--s-space-5); font-size: var(--s-step-small); }
.sa-strip-time { font: italic var(--s-weight-body) var(--s-step-tide)/var(--s-leading-100) var(--s-font-italic); color: var(--s-reef-soft); }
.sa-hours-static { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-gap-lg) var(--s-gap); margin-top: var(--s-gap-lg); padding-bottom: var(--s-section); }
.sa-hours-static li { display: grid; gap: var(--s-space-3); align-content: start; padding-top: var(--s-space-8); border-top: var(--s-hairline) solid var(--s-line-strong); }
.sa-hours-static .sa-hour-time { font-size: var(--s-step-h2); }
.sa-hours-static h3 { font-weight: var(--s-weight-body); }

@media (max-width: 899px) {
    .sa-day-sticky { padding-inline: var(--s-gutter); gap: var(--s-space-6); }
    .sa-day-stage { border-radius: var(--s-radius); }
    .sa-ruler li:not(:first-child):not(:last-child) span { display: none; }
    .sa-hour { grid-template-columns: 1fr; gap: var(--s-space-3); }
    .sa-hour-time { font-size: var(--s-step-h2); }
    .sa-hour h3 { font-size: var(--s-step-lede); font-weight: var(--s-weight-strong); }
    .sa-hour-text p:last-child { font-size: var(--s-step-small); }
    .sa-strip {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-space-6);
        margin-inline: calc(var(--s-gutter) * -1); padding: 0 var(--s-gutter) var(--s-space-4); scroll-padding-inline: var(--s-gutter);
        scrollbar-width: none;
    }
    .sa-strip::-webkit-scrollbar { display: none; }
    .sa-strip li { flex: 0 0 62%; scroll-snap-align: start; }
    .sa-hours-static { grid-template-columns: 1fr; gap: var(--s-space-11); }
}
@media (prefers-reduced-motion: reduce) {
    .sa-js .sa-day:not(.is-static) .sa-day-pin { display: none; }
    .sa-js .sa-day:not(.is-static) .sa-day-static { display: block; }
    .sa-js .sa-day:not(.is-static) .sa-day-headwrap { position: static; width: auto; height: auto; margin: 0 auto; padding-inline: var(--s-gutter); overflow: visible; clip: auto; white-space: normal; }
}

/* ── 4. The reef ───────────────────────────────────────────────────────── */
.sa-reef-fig { margin-bottom: var(--s-gap); }
/* The section opens on the drawing: its title is set in the lagoon, between the surface and the sand. */
.sa-reef-head { display: grid; gap: var(--s-space-5); margin-bottom: var(--s-space-11); }
.sa-reef-head .sa-tide { color: var(--s-reef); }
@media (min-width: 900px) {
    /* Measured against the drawing's own width, so the words stay in the same water at every size. */
    .sa-reef-fig { position: relative; container-type: inline-size; }
    .sa-reef-head {
        position: absolute; z-index: 1; left: var(--s-reef-head-x); top: var(--s-reef-head-y); max-width: var(--s-reef-head-w); margin: 0;
        isolation: isolate;
    }
    .sa-reef-head::before { /* a pool of lagoon water under the words: the sand shows through, faintly */
        content: ""; position: absolute; z-index: -1; inset: var(--s-reef-pool-inset); pointer-events: none;
        background: radial-gradient(closest-side, var(--s-reef-pool) 62%, transparent); 
    }
    .sa-reef-head h2 { font-size: var(--s-step-reef-head); color: var(--s-reef); }
}
.sa-reef-lede { margin: 0 0 var(--s-gap-lg); }
@media (min-width: 900px) { .sa-reef-lede { margin-left: calc((100% + var(--s-gap)) / 12 * 3); } }
.sa-reef-draw { position: relative; aspect-ratio: var(--reef-ratio); }
.sa-reef-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sa-st-rw { stop-color: var(--s-reef-water); }
.sa-st-rw-deep { stop-color: var(--s-reef-water-deep); }
.sa-st-rw-clear { stop-color: var(--s-reef-water); stop-opacity: 0; }
.sa-st-rw-shade { stop-color: var(--s-reef-water-deep); stop-opacity: 0.55; }
.sa-reef-surface { fill: none; stroke: var(--s-lagoon-deep); stroke-width: var(--s-stroke-9); vector-effect: non-scaling-stroke; }
.sa-reef-surf { fill: none; stroke: var(--s-paper); stroke-width: var(--s-stroke-14); stroke-linecap: round; }
.sa-st-rg { stop-color: var(--s-reef-ground); }
.sa-st-rg-deep { stop-color: var(--s-reef-ground-deep); }
.sa-reef-grass { fill: none; stroke: var(--s-reef-grass); stroke-width: var(--s-stroke-8); stroke-linecap: round; }
.sa-reef-ground { fill: none; stroke: var(--s-reef-soft); stroke-width: var(--s-stroke-7); vector-effect: non-scaling-stroke; }
.sa-reef-strata path { fill: var(--s-reef-ground); }
.sa-reef-strata path.is-2 { fill: var(--s-reef-ground-deep); opacity: var(--s-reef-strata-2); }
.sa-reef-strata path.is-3 { fill: url(#sa-rfade); }
.sa-st-rfade { stop-color: var(--s-reef-ground-deep); stop-opacity: var(--s-reef-strata-3); }
.sa-st-rfade-out { stop-color: var(--s-reef-ground-deep); stop-opacity: 0; }
.sa-st-ray { stop-color: var(--s-paper); stop-opacity: var(--s-reef-ray); }
.sa-st-ray-out { stop-color: var(--s-paper); stop-opacity: 0; }
.sa-reef-coral path { fill: var(--s-reef-coral); }
.sa-reef-coral path.is-alt { fill: var(--s-reef-coral-2); }
.sa-reef-coral path.is-branch { fill: none; stroke: var(--s-reef-coral); stroke-width: var(--s-stroke-11); stroke-linecap: round; }
.sa-reef-coral path.is-branch.is-alt { stroke: var(--s-reef-coral-2); }
.sa-reef-nursery { fill: none; stroke: var(--s-reef); stroke-width: var(--s-stroke-7); opacity: 0.7; }
.sa-reef-hut { fill: var(--s-reef-soft); }
.sa-reef-fish { fill: var(--s-reef-fish); opacity: 0.6; }
.sa-reef-ticks { stroke: var(--s-reef-soft); stroke-width: var(--s-stroke-7); }
.sa-reef-break path { fill: none; stroke: var(--s-reef-soft); stroke-width: var(--s-stroke-7); vector-effect: non-scaling-stroke; }
.sa-reef-break .sa-reef-gap { fill: var(--s-sand); stroke: none; }
.sa-reef-scale { margin-top: var(--s-space-2); text-align: right; font-size: var(--s-step-micro); color: var(--s-reef-soft); }
.sa-reef-marker {
    position: absolute; top: 0; transform: translate(-50%, 0);
    display: grid; place-items: center; width: var(--s-badge); height: var(--s-badge); border-radius: 50%;
    background: var(--s-reef); color: var(--s-sand); font-size: var(--s-step-micro); font-weight: var(--s-weight-strong);
}
.sa-reef-tick { position: absolute; right: 0; transform: translateY(-50%); font-size: var(--s-step-micro); color: var(--s-reef-soft); font-variant-numeric: tabular-nums; }
.sa-reef-sides { display: flex; justify-content: space-between; margin-top: var(--s-space-5); font: italic var(--s-weight-body) var(--s-step-tide)/var(--s-leading-120) var(--s-font-italic); color: var(--s-reef-soft); }
.sa-reef-sides span:last-child { margin-right: var(--s-reef-sides-end); }
.sa-fish-a, .sa-fish-b { transform-box: fill-box; }
.sa-js .sa-fish-a { animation: sa-drift var(--s-fish-drift) var(--s-ease) infinite alternate; }
.sa-js .sa-fish-b { animation: sa-drift var(--s-fish-drift-2) var(--s-ease) infinite alternate-reverse; }
.sa-reef-fig.is-off .sa-reef-fish { animation-play-state: paused; }
@keyframes sa-drift { from { transform: translateX(0); } to { transform: translateX(var(--s-fish-dx)); } }

.sa-reef-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-gap); }
.sa-reef-left { grid-column: 1 / 6; display: grid; align-content: start; }
.sa-zones { display: grid; gap: 0; align-content: start; }
.sa-zones li { display: grid; grid-template-columns: var(--s-badge) 1fr; gap: var(--s-space-8); padding: var(--s-space-9) 0; border-top: var(--s-hairline) solid var(--s-line); }
.sa-zones li:last-child { border-bottom: var(--s-hairline) solid var(--s-line); }
.sa-zone-n { display: grid; place-items: center; width: var(--s-badge); height: var(--s-badge); border-radius: 50%; background: var(--s-reef); color: var(--s-sand); font-size: var(--s-step-micro); font-weight: var(--s-weight-strong); }
.sa-zones h3 { font-size: var(--s-step-lede); font-weight: var(--s-weight-strong); margin-bottom: var(--s-space-2); }
.sa-zone-depth { margin-left: var(--s-space-4); font: italic var(--s-weight-body) var(--s-step-tide)/var(--s-leading-100) var(--s-font-italic); color: var(--s-reef-soft); }
.sa-zones p { font-size: var(--s-step-body); line-height: var(--s-leading-body); color: var(--s-reef); }
.sa-figures { grid-column: 7 / 13; }
.sa-figures ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-gap); }
.sa-figures li { padding: var(--s-space-11) var(--s-space-11) var(--s-space-12); background: var(--s-paper); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-card); }
.sa-figure { display: flex; align-items: baseline; gap: var(--s-space-1); font: var(--s-weight-display) var(--s-step-figure)/var(--s-leading-100) var(--s-font-display); }
.sa-figure-unit { font-size: var(--s-step-h2); }
.sa-figure-label { margin-top: var(--s-space-5); font-weight: var(--s-weight-strong); }
.sa-figure-note { margin-top: var(--s-space-2); font-size: var(--s-step-body); line-height: var(--s-leading-body); color: var(--s-reef); }
.sa-pull { margin-top: var(--s-gap); padding-left: var(--s-space-10); border-left: var(--s-rule-w) solid var(--s-coral); font: italic var(--s-weight-body) var(--s-step-pull)/var(--s-leading-140) var(--s-font-italic); max-width: var(--s-measure); }

@media (max-width: 899px) {
    .sa-reef-fig { margin-inline: calc(var(--s-gutter) * -0.5); }
    .sa-reef-draw { aspect-ratio: var(--s-reef-ratio-m); }
    .sa-reef-marker { width: var(--s-badge-m); height: var(--s-badge-m); }
    .sa-reef-ticks { display: none; }
    .sa-reef-grid { display: block; }
    .sa-figures { margin-top: var(--s-gap-lg); }
    .sa-figures ul { grid-template-columns: 1fr; gap: var(--s-space-6); }
    .sa-figures li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-space-8); align-items: baseline; }
    .sa-figure { grid-row: span 2; }
    .sa-figure-label { margin-top: 0; }
}

/* ── 5. Getting here ───────────────────────────────────────────────────── */
.sa-getting .sa-tide { margin-bottom: var(--s-space-9); }
.sa-getting-sum {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-space-7) var(--s-gap); align-items: end;
    padding-top: var(--s-space-11); margin-bottom: var(--s-gap-lg); border-top: var(--s-hairline) solid var(--s-line-strong);
}
.sa-getting-sum h2 { grid-column: 1 / 7; }
.sa-getting-sum .sa-lede { grid-column: 7 / 13; margin-top: 0; }
.sa-route { --route-p: 1; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-gap); margin-bottom: var(--s-gap-lg); padding-top: var(--s-route-pad); }
.sa-route::before, .sa-route::after { content: ""; position: absolute; top: var(--s-route-line-y); left: var(--s-route-inset); right: calc(25% - var(--s-route-inset)); height: var(--s-rule-w); background: var(--s-line-strong); }
.sa-route::after { background: var(--s-lagoon-deep); transform-origin: left; transform: scaleX(var(--route-p)); }
.sa-stop { position: relative; display: grid; gap: var(--s-space-3); align-content: start; }
.sa-stop-dot { width: var(--s-route-dot); height: var(--s-route-dot); margin-bottom: var(--s-space-7); border-radius: 50%; background: var(--s-sand); border: var(--s-rule-w) solid var(--s-lagoon-deep); position: relative; z-index: 1; }
.sa-stop.is-end .sa-stop-dot { background: var(--s-coral); border-color: var(--s-reef); }
.sa-leg { position: absolute; top: var(--s-route-leg-y); left: calc(var(--s-gap) / -2 - 50% + var(--s-route-leg-x)); transform: translateX(-50%); white-space: nowrap; font: italic var(--s-weight-body) var(--s-step-micro)/var(--s-leading-100) var(--s-font-italic); color: var(--s-reef-soft); }
.sa-stop-time { font: var(--s-weight-display) var(--s-step-h2)/var(--s-leading-100) var(--s-font-display); font-variant-numeric: tabular-nums; }
.sa-stop h3 { font-size: var(--s-step-lede); font-weight: var(--s-weight-strong); }
.sa-stop p:last-child { font-size: var(--s-step-body); line-height: var(--s-leading-body); color: var(--s-reef); max-width: var(--s-measure-narrow); }

.sa-getting-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-gap); }
/* Worth knowing sits in the same card, at the same scale, as the water chart beside it. */
.sa-know { grid-column: 1 / 7; padding: var(--s-space-12); background: var(--s-paper); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-card); }
.sa-know h3, .sa-water h3 { font-size: var(--s-step-lede); font-weight: var(--s-weight-strong); margin-bottom: var(--s-space-7); }
.sa-know dl div { display: grid; grid-template-columns: var(--s-know-label-w) 1fr; gap: var(--s-space-7); padding: var(--s-space-7) 0; border-top: var(--s-hairline) solid var(--s-line); }
.sa-know dl div:last-child { border-bottom: var(--s-hairline) solid var(--s-line); }
.sa-know dt { color: var(--s-reef); font-size: var(--s-step-body); font-weight: var(--s-weight-strong); }
.sa-know dd { font-size: var(--s-step-body); line-height: var(--s-leading-body); color: var(--s-reef); }
.sa-water { grid-column: 7 / 13; align-self: stretch; padding: var(--s-space-12) var(--s-space-12); background: var(--s-paper); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-card); }
.sa-water figcaption p { font-size: var(--s-step-body); color: var(--s-reef); margin-bottom: var(--s-space-7); }
.sa-water-table { width: 100%; border-collapse: collapse; font-size: var(--s-step-small); font-variant-numeric: tabular-nums; }
.sa-water-table thead th { text-align: left; font-weight: var(--s-weight-body); color: var(--s-reef-soft); padding-bottom: var(--s-space-3); font-size: var(--s-step-micro); }
.sa-water-table th[scope="row"] { width: var(--s-chart-month-w); text-align: left; font-weight: var(--s-weight-body); padding: var(--s-space-2) 0; }
.sa-water-table abbr { text-decoration: none; }
.sa-water-table td { display: flex; align-items: center; gap: var(--s-space-5); padding: var(--s-space-2) 0; }
.sa-bar { position: relative; flex: 1 1 auto; height: var(--s-bar-h); border-radius: var(--s-bar-r); background: var(--s-chart-track); overflow: hidden; }
.sa-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: var(--s-bar-r); background: var(--s-chart-bar); }
.is-best .sa-bar::before { background: var(--s-chart-bar-best); }
.sa-bar-val { width: var(--s-chart-val-w); text-align: right; }
.sa-best { width: var(--s-chart-best-w); font: italic var(--s-weight-body) var(--s-step-micro)/var(--s-leading-100) var(--s-font-italic); color: var(--s-reef-soft); }
tr:not(.is-best) .sa-bar-val { margin-right: var(--s-chart-best-gap); }
/* Desktop: the year reads left to right as twelve bars of warm water, the best months in coral. */
@media (min-width: 900px) {
    .sa-water-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .sa-water-table, .sa-water-table tbody { display: block; }
    .sa-water-table tbody { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-space-3); height: var(--s-chart-col-h); align-items: stretch; }
    .sa-water-table tr { display: flex; flex-direction: column-reverse; align-items: stretch; min-width: 0; }
    .sa-water-table th[scope="row"] { width: auto; text-align: center; padding: var(--s-space-3) 0 0; font-size: var(--s-step-micro); }
    .sa-water-table td { flex: 1; flex-direction: column-reverse; justify-content: flex-start; align-items: stretch; gap: var(--s-space-2); padding: 0; }
    .sa-bar { flex: none; height: calc(var(--s-chart-col-floor) + var(--w) * (100% - var(--s-chart-col-floor) - var(--s-chart-col-head))); border-radius: var(--s-bar-r) var(--s-bar-r) 0 0; }
    .sa-bar::before { width: 100%; }
    .sa-bar-val, tr:not(.is-best) .sa-bar-val { width: auto; margin: 0; text-align: center; font-size: var(--s-step-micro); }
    .sa-best { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.sa-water-legend { display: flex; align-items: center; gap: var(--s-space-4); margin-top: var(--s-space-6); font-size: var(--s-step-micro); color: var(--s-reef-soft); }
.sa-best-dot { width: var(--s-chart-key-w); height: var(--s-bar-h); border-radius: var(--s-bar-r); background: var(--s-chart-bar-best); }

@media (max-width: 899px) {
    .sa-route { grid-template-columns: 1fr; gap: var(--s-space-12); padding: 0 0 0 var(--s-route-pad-m); }
    .sa-route::before, .sa-route::after { top: var(--s-route-inset); bottom: var(--s-route-tail); left: var(--s-route-inset); right: auto; width: var(--s-rule-w); height: auto; }
    .sa-route::after { transform-origin: top; transform: scaleY(var(--route-p)); }
    .sa-stop-dot { position: absolute; left: var(--s-route-dot-x); top: var(--s-space-3); margin: 0; }
    .sa-stop.has-leg { padding-top: 0; }
    .sa-leg { position: static; transform: none; margin-bottom: var(--s-space-1); }
    .sa-getting-grid { display: block; }
    .sa-getting-sum { display: block; }
    .sa-getting-sum .sa-lede { margin-top: var(--s-space-7); }
    .sa-water { margin-top: var(--s-gap-lg); padding: var(--s-space-10) var(--s-space-9); }
    .sa-know { padding: var(--s-space-10) var(--s-space-9); }
    .sa-know dl div { grid-template-columns: 1fr; gap: var(--s-space-2); }
}

/* ── 6. Plan a stay ────────────────────────────────────────────────────── */
.sa-getting { padding-bottom: var(--s-seam); }
.sa-plan-stay { padding-top: var(--s-seam); }
.sa-reef { padding-bottom: var(--s-seam); }
.sa-getting { padding-top: var(--s-seam); }
.sa-plan-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-gap); align-items: start; }
.sa-plan-intro { grid-column: 1 / 6; display: grid; gap: var(--s-space-9); position: sticky; top: calc(var(--s-nav-h) + var(--s-space-14)); }
.sa-plan-intro .sa-tide { margin-bottom: var(--s-space-2); }
.sa-plan-intro .sa-lede { margin-top: 0; }
.sa-plan-intro h3 { font-size: var(--s-step-lede); font-weight: var(--s-weight-strong); margin-top: var(--s-space-5); }
.sa-steps { counter-reset: step; display: grid; gap: var(--s-space-6); }
.sa-steps li { counter-increment: step; display: grid; grid-template-columns: var(--s-step-num-w) 1fr; gap: var(--s-space-5); }
.sa-steps li::before { content: counter(step); font: italic var(--s-weight-body) var(--s-step-h3)/var(--s-leading-100) var(--s-font-italic); color: var(--s-reef-soft); }
.sa-minstay { font-size: var(--s-step-small); color: var(--s-reef-soft); }

.sa-form {
    grid-column: 7 / 13; display: grid; gap: var(--s-space-9);
    padding: var(--s-form-pad); background: var(--s-paper);
    border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-card);
}
.sa-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-space-9); }
.sa-field { display: grid; gap: var(--s-space-3); align-content: start; }
.sa-field label { font-size: var(--s-step-small); font-weight: var(--s-weight-strong); }
.sa-opt { font-weight: var(--s-weight-body); color: var(--s-reef-soft); }
.sa-field input, .sa-field select, .sa-field textarea {
    width: 100%; min-height: var(--s-touch); padding: var(--s-space-6) var(--s-space-7);
    font: var(--s-weight-body) var(--s-step-input)/var(--s-leading-130) var(--s-font-body);
    color: var(--s-reef); background: var(--s-sand);
    border: var(--s-hairline) solid var(--s-line-strong); border-radius: var(--s-radius-sm);
    -webkit-appearance: none; appearance: none;
    transition: border-color var(--s-dur-fast) var(--s-ease), box-shadow var(--s-dur-fast) var(--s-ease);
}
.sa-field select {
    background-image: linear-gradient(45deg, transparent 50%, var(--s-reef) 50%), linear-gradient(135deg, var(--s-reef) 50%, transparent 50%);
    background-position: var(--s-select-arrow-pos);
    background-size: var(--s-select-arrow) var(--s-select-arrow), var(--s-select-arrow) var(--s-select-arrow); background-repeat: no-repeat; padding-right: var(--s-space-15);
}
.sa-field textarea { resize: vertical; min-height: var(--s-textarea-min); }
/* Dates keep type=date (native pickers on phones) but wear the form's own skin. */
.sa-field input[type="date"] {
    position: relative; display: block; padding-right: var(--s-touch); text-align: left; cursor: pointer;
    background: var(--s-sand) var(--s-icon-calendar) no-repeat right var(--s-space-7) center / var(--s-icon-size);
}
.sa-field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.sa-field input[type="date"]::-webkit-datetime-edit { padding: 0; color: var(--s-reef); }
.sa-field input[type="date"]:invalid:not(:focus)::-webkit-datetime-edit { color: var(--s-reef-soft); }
.sa-field input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.sa-field input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute; top: 0; right: 0; bottom: 0; width: var(--s-touch); height: auto; margin: 0; padding: 0;
    opacity: 0; cursor: pointer;
}
.sa-field input::placeholder, .sa-field textarea::placeholder { color: var(--s-reef-soft); opacity: 1; }
.sa-field input:focus-visible, .sa-field select:focus-visible, .sa-field textarea:focus-visible { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-off-xs); border-color: var(--s-reef); }
.sa-field [aria-invalid="true"] { border-color: var(--s-error); box-shadow: var(--s-shadow-invalid); }
.sa-err { font-size: var(--s-step-micro); color: var(--s-error); }
.sa-errors { padding: var(--s-space-7) var(--s-space-8); border-radius: var(--s-radius-sm); border-left: var(--s-rule-w-bold) solid var(--s-error); background: var(--s-sand); color: var(--s-error); font-size: var(--s-step-small); }
.sa-errors ul { margin-top: var(--s-space-3); padding-left: var(--s-space-9); list-style: disc; }
.sa-submit { justify-self: start; min-width: var(--s-submit-min); }
.sa-done:not(:empty) { padding: var(--s-space-8) var(--s-space-9); border-radius: var(--s-radius-sm); background: var(--s-shallows-pale); border-left: var(--s-rule-w-bold) solid var(--s-lagoon-deep); }

@media (max-width: 899px) {
    .sa-plan-grid { display: block; }
    .sa-plan-intro { position: static; margin-bottom: var(--s-gap-lg); }
    .sa-row { grid-template-columns: 1fr; }
    .sa-form { margin-inline: calc(var(--s-gutter) * -0.4); }
    .sa-submit { justify-self: stretch; }
}

/* ── Footer: the day ends at night ─────────────────────────────────────── */
.sa-foot { position: relative; overflow: hidden; background: linear-gradient(var(--s-night-deep), var(--s-night)); color: var(--s-sand); padding: var(--s-foot-pad-top) 0 var(--s-space-14); }
.sa-foot-stars { position: absolute; inset: 0 0 auto; width: 100%; height: 70%; fill: var(--s-star); pointer-events: none; }
.sa-foot-inner { position: relative; display: grid; gap: var(--s-space-11); }
.sa-foot-mark { font: var(--s-weight-display) var(--s-step-foot-mark)/var(--s-leading-tight) var(--s-font-display); letter-spacing: var(--s-tracking-display); }
.sa-foot-line { font: italic var(--s-weight-body) var(--s-step-hero-line)/var(--s-leading-130) var(--s-font-italic); color: var(--s-sand); }
.sa-foot-facts { display: flex; flex-wrap: wrap; gap: var(--s-space-3) var(--s-space-6); color: var(--s-sand-dim); font-size: var(--s-step-small); }
.sa-foot-facts li { display: flex; align-items: center; gap: var(--s-space-6); }
.sa-foot-facts li + li::before { content: ""; flex: none; width: var(--s-bullet); height: var(--s-bullet); border-radius: 50%; background: var(--s-coral); }
.sa-foot-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-space-11); margin-top: var(--s-space-9); padding-top: var(--s-space-9); border-top: var(--s-hairline) solid var(--s-line-night); }
.sa-foot-nav a { display: inline-flex; align-items: center; min-height: var(--s-touch); color: var(--s-sand-dim); text-decoration: none; font-size: var(--s-step-small); }
.sa-foot-nav a:hover { color: var(--s-sand); text-decoration: underline; text-underline-offset: var(--s-underline-off-hover); }
.sa-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-space-5) var(--s-space-12); font-size: var(--s-step-micro); color: var(--s-sand-dim); }
.sa-textlink-night { color: var(--s-sand); text-decoration-color: var(--s-lagoon); }
.sa-foot :focus-visible { outline-color: var(--s-sand); }

/* ── Reduced motion: nothing loops, nothing moves ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}