/*
 * Saltmere: layout. Every value comes from assets/tokens.css (--s-*).
 * The page goes under and comes up for air: deep water for the arrival and the
 * ritual, mineral white for the rooms, building and membership, slate for
 * visiting, deep water again to book.
 * Breakpoints used below match --s-mq-phone / --s-bp-tablet / --s-bp-desktop.
 */

@font-face {
    font-family: "Commissioner";
    src: url("fonts/commissioner-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Spectral";
    src: url("fonts/spectral-latin-300-italic.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--s-bg-dark);
    color: var(--s-text-on-dark);
    font-family: var(--s-font);
    font-weight: var(--s-w-body);
    font-size: var(--s-step-body);
    line-height: var(--s-lh-body);
    letter-spacing: var(--s-track-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
[data-sm-reveal] { overflow: hidden; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: var(--s-focus-ring) solid var(--s-focus-dark); outline-offset: var(--s-focus-offset); }
.sm-light :focus-visible, .sm-tidecard :focus-visible { outline-color: var(--s-focus-light); }

.sm-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.sm-vh {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sm-wrap { width: 100%; max-width: var(--s-max); margin-inline: auto; padding-inline: var(--s-gutter); }

.sm-skip {
    position: absolute; left: var(--s-gutter); top: var(--s-gap-xs); z-index: var(--s-z-sheet);
    padding: var(--s-gap-xs) var(--s-gap-s); border-radius: var(--s-radius-s);
    background: var(--s-btn-bg); color: var(--s-btn-text);
    transform: translateY(-200%);
}
.sm-skip:focus { transform: none; }

section[id], article[id] { scroll-margin-top: var(--s-nav-h); }
.sm-stage[id] { scroll-margin-top: calc(var(--s-nav-h) + var(--s-tap)); }

/* ---- Shared type --------------------------------------------------------- */
.sm-kicker { font-size: var(--s-step-small); font-weight: var(--s-w-strong); color: var(--s-seaglass); margin-bottom: var(--s-gap-s); }
.sm-light .sm-kicker { color: var(--s-seaglass-deep); }
.sm-h2 {
    font-size: var(--s-step-h2); font-weight: var(--s-w-heading); line-height: var(--s-lh-heading);
    letter-spacing: var(--s-track-display); max-width: 20ch; text-wrap: balance;
}
.sm-h3 { font-size: var(--s-step-h3); font-weight: var(--s-w-heading); line-height: var(--s-lh-tight); margin-bottom: var(--s-gap-s); }
.sm-lede { font-size: var(--s-step-lede); color: var(--s-muted-on-dark); max-width: var(--s-measure); margin-top: var(--s-gap-m); }
.sm-light .sm-lede { color: var(--s-muted-on-light); }
.sm-voice { font-family: var(--s-font-voice); font-style: italic; font-weight: var(--s-w-voice); font-size: var(--s-step-voice); line-height: var(--s-lh-tight); }
.sm-head { padding-top: var(--s-section-tight); margin-bottom: var(--s-gap-xl); }
.sm-head--flush { padding-top: 0; margin-bottom: 0; }
/* The building opens in the house's voice, not the section formula: one italic line, set large. */
.sm-h2--voice { font-family: var(--s-font-voice); font-style: italic; font-weight: var(--s-w-voice); font-size: var(--s-step-h2-wide); max-width: 18ch; }
.sm-h2--voice .sm-kicker--inline { font-family: var(--s-font); font-style: normal; }
.sm-head--voice { text-align: center; }
.sm-head--voice .sm-h2 { margin-inline: auto; }

/* ---- Buttons + links: colour transitions only ------------------------------ */
.sm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--s-tap); padding: 0 var(--s-btn-pad-x);
    border: 0; border-radius: var(--s-radius);
    background: var(--s-btn-bg); color: var(--s-btn-text);
    font: inherit; font-weight: var(--s-w-strong); text-decoration: none; cursor: pointer;
    transition: background-color var(--s-dur-ui) var(--s-ease-settle), color var(--s-dur-ui) var(--s-ease-settle);
}
.sm-btn:hover { background: var(--s-btn-bg-hover); }
.sm-btn--light { background: var(--s-btn-bg-light); color: var(--s-btn-text-light); }
.sm-btn--light:hover { background: var(--s-btn-bg-light-hover); }
.sm-link {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    color: var(--s-text-on-dark); text-decoration: underline; text-decoration-thickness: var(--s-hairline);
    text-underline-offset: var(--s-gap-xs);
    transition: color var(--s-dur-ui) var(--s-ease-settle);
}
.sm-link:hover { color: var(--s-seaglass); }

/* ---- Nav: floats over the arrival, settles onto a veil once you move ----------- */
.sm-nav {
    position: sticky; top: 0; z-index: var(--s-z-nav);
    height: var(--s-nav-h); margin-bottom: calc(-1 * var(--s-nav-h));
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-gap-s);
    padding-inline: var(--s-gutter);
    transition: background-color var(--s-dur-fade) var(--s-ease-breath);
}
.sm-nav.is-solid { background: var(--s-veil); -webkit-backdrop-filter: blur(var(--s-blur-nav)); backdrop-filter: blur(var(--s-blur-nav)); }
/* Over the arrival only: a soft deep-water scrim so the wordmark never sits on the bright window glass. */
.sm-nav::before {
    content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--s-nav-scrim-h);
    background: var(--s-nav-scrim); pointer-events: none;
    transition: opacity var(--s-dur-fade) var(--s-ease-breath);
}
.sm-nav.is-solid::before { opacity: var(--s-o-hidden); }
.sm-nav__links { display: none; }
.sm-nav__links ul { display: flex; align-items: center; gap: var(--s-nav-link-gap); }
.sm-nav__links a {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    font-size: var(--s-step-small); color: var(--s-text-on-dark); text-decoration: none;
    transition: color var(--s-dur-ui) var(--s-ease-settle);
}
.sm-nav__links a:hover { color: var(--s-seaglass); }
@media (min-width: 1200px) {
    .sm-nav__links { display: block; justify-self: center; }
    .sm-nav__menu { display: none; }
}
.sm-wordmark {
    justify-self: start; display: inline-flex; align-items: center; min-height: var(--s-tap);
    font-size: var(--s-step-small); font-weight: var(--s-w-wordmark); letter-spacing: var(--s-track-wordmark);
    color: var(--s-text-on-dark); text-decoration: none;
}
.sm-wordmark--static { min-height: 0; }
.sm-nav__menu {
    justify-self: center; min-height: var(--s-tap); padding: 0 var(--s-gap-s);
    background: none; border: 0; border-radius: var(--s-radius-s); color: var(--s-text-on-dark);
    font: inherit; font-size: var(--s-step-small); cursor: pointer;
}
.sm-nav__menu:hover { color: var(--s-seaglass); }
.sm-btn--nav {
    justify-self: end; padding: 0 var(--s-btn-pad-x-s); font-size: var(--s-step-small); font-weight: var(--s-w-body);
    background: transparent; color: var(--s-text-on-dark);
}
.sm-btn--nav:hover { background: transparent; color: var(--s-seaglass); }
.sm-nav.is-solid .sm-btn--nav { background: var(--s-btn-bg); color: var(--s-btn-text); font-weight: var(--s-w-strong); }
.sm-nav.is-solid .sm-btn--nav:hover { background: var(--s-btn-bg-hover); }
.sm-nav__short { display: none; }

/* Menu sheet */
.sm-sheet {
    width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
    background: var(--s-deep); color: var(--s-text-on-dark);
}
.sm-sheet[open] { animation: sm-fade var(--s-dur-ui) var(--s-ease-settle) both; }
.sm-sheet::backdrop { background: var(--s-veil); }
.sm-sheet__inner { max-width: var(--s-max); margin-inline: auto; padding: 0 var(--s-gutter) var(--s-gap-xl); }
.sm-sheet__top { display: flex; align-items: center; justify-content: space-between; height: var(--s-nav-h); }
.sm-sheet__close {
    min-height: var(--s-tap); min-width: var(--s-tap); padding: 0 var(--s-gap-s);
    background: none; border: 0; color: var(--s-text-on-dark); font: inherit; font-size: var(--s-step-small); cursor: pointer;
}
.sm-sheet__list { margin-top: var(--s-gap-l); counter-reset: sheet; }
.sm-sheet__list li { border-top: var(--s-hairline) solid var(--s-rule-dark); counter-increment: sheet; }
.sm-sheet__list a {
    display: flex; align-items: baseline; gap: var(--s-gap-m); min-height: var(--s-tap);
    padding-block: var(--s-gap-s); text-decoration: none;
    font-size: var(--s-step-h2); font-weight: var(--s-w-heading); line-height: var(--s-lh-heading);
}
.sm-sheet__list a::before { content: counter(sheet); min-width: var(--s-gap-m); font-size: var(--s-step-small); color: var(--s-fog); font-variant-numeric: tabular-nums; }
.sm-sheet__list a:hover { color: var(--s-seaglass); }
.sm-sheet__foot { display: grid; gap: var(--s-gap-m); margin-top: var(--s-gap-l); padding-top: var(--s-gap-l); border-top: var(--s-hairline) solid var(--s-rule-dark); }
.sm-sheet__foot .sm-btn { justify-self: start; }
.sm-sheet__hours { font-size: var(--s-step-small); color: var(--s-fog); }

/* ---- 1. Arrival ------------------------------------------------------------- */
.sm-arrival {
    position: relative; overflow: hidden;
    height: calc(100svh - var(--s-ribbon-h)); min-height: var(--s-hero-min);
    display: flex; flex-direction: column; justify-content: flex-end;
    background: var(--s-deep);
}
.sm-arrival__photo, .sm-arrival__photo picture { position: absolute; inset: 0; }
.sm-arrival__photo img {
    width: 100%; height: calc(100% - var(--s-hero-type-floor));
    object-fit: cover; object-position: var(--s-hero-pos);
    -webkit-mask-image: var(--s-hero-mask); mask-image: var(--s-hero-mask);
}
.sm-arrival__copy { position: relative; z-index: 1; padding: 0 var(--s-gutter) var(--s-hero-copy-bottom); }
.sm-arrival__title {
    font-size: var(--s-step-hero); font-weight: var(--s-w-hero); line-height: var(--s-lh-display);
    letter-spacing: var(--s-track-display);
    animation: sm-surface var(--s-dur-line) var(--s-ease-breath) var(--s-delay-line) both;
}
.sm-arrival__lede { line-height: var(--s-lh-tight); margin: var(--s-hero-lede-gap) 0 var(--s-hero-cta-gap); max-width: var(--s-measure-narrow); font-size: var(--s-step-hero-lede); color: var(--s-mineral); }
.sm-arrival__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-gap-xs) var(--s-gap-m); }
/* Today's water: a designed gauge strip, three readings in a row of hairline cells. */
.sm-readings {
    position: absolute; z-index: 1; right: var(--s-gutter); bottom: var(--s-hero-copy-bottom);
    width: var(--s-readings-w);
    animation: sm-fade var(--s-dur-fade) var(--s-ease-breath) var(--s-delay-readings) both;
}
.sm-readings__head {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-gap-s);
    padding-bottom: var(--s-gap-xs); border-bottom: var(--s-hairline) solid var(--s-rule-strong);
    font-size: var(--s-step-small); line-height: var(--s-lh-tight);
}
.sm-readings__label { color: var(--s-text-on-dark); font-weight: var(--s-w-strong); }
.sm-readings__note { color: var(--s-fog-light); font-size: var(--s-step-micro); text-align: right; }
.sm-readings__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm-readings__item { display: flex; flex-direction: column-reverse; padding: var(--s-gap-s) var(--s-gap-s) 0; border-left: var(--s-hairline) solid var(--s-rule-strong); }
.sm-readings__item:first-child { padding-left: 0; border-left: 0; }
.sm-readings__item dt { font-size: var(--s-step-small); color: var(--s-fog-light); }
.sm-readings__item dd { font-size: var(--s-step-reading); font-weight: var(--s-w-temp); line-height: var(--s-lh-temp); color: var(--s-text-on-dark); }
.sm-readings__deg { font-size: var(--s-unit-scale); vertical-align: top; color: var(--s-seaglass); }

@media (min-width: 768px) { .sm-arrival__title { white-space: nowrap; } }

@keyframes sm-surface { from { opacity: var(--s-o-hidden); transform: translateY(var(--s-reveal-shift)); } }
@keyframes sm-fade { from { opacity: var(--s-o-hidden); } }

/* ---- 2. The ritual ------------------------------------------------------------ */
.sm-ritual { background: var(--s-deep); }
.sm-ritual__head { padding-top: var(--s-section-tight); padding-bottom: var(--s-gap-xl); display: grid; gap: var(--s-gap-m); }
.sm-ritual__intro { color: var(--s-fog-light); max-width: var(--s-measure-narrow); }
.sm-h2--wide { font-size: var(--s-step-h2-wide); max-width: 16ch; }
.sm-kicker--inline { display: block; font-size: var(--s-step-small); line-height: var(--s-lh-body); letter-spacing: var(--s-track-body); }
@media (min-width: 1024px) {
    .sm-ritual__head { grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap); align-items: end; }
    .sm-ritual__head .sm-h2 { grid-column: 1 / span 8; }
    .sm-ritual__intro { grid-column: 9 / span 4; padding-bottom: var(--s-gap-xs); }
}

/* Stacked (default, reduced motion, phones and tablets): one full stage per screen. */
.sm-stage { position: relative; }
.sm-stage__photo { overflow: hidden; }
.sm-stage__photo img { width: 100%; height: calc(100svh - var(--s-nav-h)); object-fit: cover; }
.sm-stage__text { color: var(--s-text-on-dark); text-shadow: var(--s-stage-halo); }
.sm-stage__count { font-size: var(--s-step-micro); color: var(--s-text-on-dark); }
.sm-stage__name { font-size: var(--s-step-h3); font-weight: var(--s-w-heading); margin-top: var(--s-gap-xs); }
.sm-stage__temp {
    font-size: var(--s-step-temp); font-weight: var(--s-w-temp); line-height: var(--s-lh-temp);
    letter-spacing: var(--s-track-display); margin-top: var(--s-gap-xs);
}
.sm-stage__unit { font-size: var(--s-unit-scale); vertical-align: top; margin-left: var(--s-hairline); }
.sm-stage__time { font-size: var(--s-step-small); color: var(--s-text-on-dark); margin-top: var(--s-gap-s); }
.sm-stage__line { margin-top: var(--s-gap-m); max-width: var(--s-measure-narrow); }

/* Breath line, stacked form: a quiet row of four labelled dots that stays with you. */
.sm-breath {
    position: sticky; top: var(--s-nav-h); z-index: 5;
    background: var(--s-veil); -webkit-backdrop-filter: blur(var(--s-blur-nav)); backdrop-filter: blur(var(--s-blur-nav));
    border-block: var(--s-hairline) solid var(--s-rule-dark);
}
.sm-breath__line { display: none; }
.sm-breath__nodes { display: flex; justify-content: center; gap: var(--s-gap-xs); }
.sm-breath__node {
    display: inline-flex; align-items: center; gap: var(--s-gap-xs);
    min-height: var(--s-tap); min-width: var(--s-tap); padding: 0 var(--s-gap-xs);
    color: var(--s-fog); text-decoration: none; font-size: var(--s-step-micro);
    transition: color var(--s-dur-ui) var(--s-ease-settle);
}
.sm-breath__dot {
    width: var(--s-progress-node); height: var(--s-progress-node); flex: none; border-radius: 50%;
    border: var(--s-node-ring) solid var(--s-fog); background: transparent;
    transition: background-color var(--s-dur-ui) var(--s-ease-settle), border-color var(--s-dur-ui) var(--s-ease-settle);
}
.sm-breath__node[aria-current] { color: var(--s-text-on-dark); }
.sm-breath__node[aria-current] .sm-breath__dot { background: var(--s-seaglass); border-color: var(--s-seaglass); }
.sm-breath__node:hover { color: var(--s-text-on-dark); }

@media (min-width: 768px) {
    /* Stacked on wide screens: the caption sits in each photo's measured flat zone. The photo is
       a full screen tall here too, so its crop (and so every caption's safe zone) is the same as
       the pinned stage the zones were measured on. */
    .sm-stage__photo img { height: 100svh; }
    /* Wide screens, stacked too: the sticky breath row above already names the stage, and a 12px
       label over photo detail is the one line that cannot be made safe everywhere (Salt measured
       worst 1.5:1 on a bright pan). The count stays for screen readers. */
    .sm-stage__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sm-stage__text { position: absolute; width: var(--s-stage-text-w); }
    .sm-stage--right .sm-stage__text { right: var(--s-gutter); top: 50%; transform: translateY(-50%); }
    .sm-stage--bottom-left .sm-stage__text { left: var(--s-stage-inset); bottom: var(--s-stage-bottom); }
    .sm-stage--bottom-right .sm-stage__text { right: var(--s-gutter); bottom: var(--s-stage-bottom); }
    .sm-stage--top-left .sm-stage__text { left: var(--s-stage-inset); top: calc(var(--s-nav-h) + var(--s-stage-top)); }
    .sm-stage--top-right .sm-stage__text { right: var(--s-gutter); top: calc(var(--s-nav-h) + var(--s-stage-top)); }
    /* A photographic burn in the caption's corner (dodge-and-burn, not a box). It lives on the
       photo layer, so it dissolves in with its photograph. */
    .sm-stage--burn .sm-stage__photo { position: relative; }
    .sm-stage--burn .sm-stage__photo::after { content: ""; position: absolute; inset: 0; background: var(--s-stage-burn); pointer-events: none; }
    /* Rest sits above the chair back: a tighter block (measured, PAIR-NOTES). */
    .sm-stage--top-left .sm-stage__time, .sm-stage--top-right .sm-stage__time { margin-top: var(--s-gap-xs); }
    .sm-stage--top-left .sm-stage__line, .sm-stage--top-right .sm-stage__line { margin-top: var(--s-gap-s); }
}

/* Pinned (desktop, motion allowed, set by site.js): four stages share one screen. */
.sm-ritual.is-pinned .sm-ritual__pin { position: relative; height: 100svh; overflow: hidden; }
.sm-ritual.is-pinned .sm-stage { position: absolute; inset: 0; }
.sm-ritual.is-pinned .sm-stage__photo img { height: 100svh; }
/* Pinned, every caption holds ONE position (right, centred) over ONE fixed shade, so the copy never
   jumps between steps and is never left on a bare photograph mid-dissolve. */
.sm-ritual.is-pinned .sm-ritual__pin::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--s-stage-scrim); pointer-events: none; }
.sm-ritual.is-pinned .sm-stage__text { z-index: 2; left: auto; right: var(--s-gutter); top: 50%; bottom: auto; transform: translateY(-50%); color: var(--s-text-on-dark); }
/* Every line of the caption in the full-strength light ink: the italic body is body copy, never muted. */
.sm-ritual.is-pinned .sm-stage__line, .sm-ritual.is-pinned .sm-stage__time { color: var(--s-text-on-dark); }
.sm-ritual.is-pinned .sm-stage--burn .sm-stage__photo::after { display: none; }
/* Pinned, the breath line already says which stage this is: the count stays for screen readers only. */
.sm-ritual.is-pinned .sm-stage__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sm-ritual.is-pinned .sm-breath {
    position: absolute; z-index: 5; top: 50%; left: var(--s-breath-x); transform: translateY(-50%);
    height: var(--s-breath-len); background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sm-ritual.is-pinned .sm-breath__line {
    display: block; position: absolute; top: 0; bottom: 0;
    left: calc(var(--s-progress-node-hit) / 2 - var(--s-progress-w) / 2); width: var(--s-progress-w);
    background: color-mix(in srgb, var(--s-mineral) calc(var(--s-o-line-rest) * 100%), transparent);
}
.sm-ritual.is-pinned .sm-breath__fill { display: block; height: 100%; background: var(--s-seaglass); transform-origin: top; transform: scaleY(0); }
.sm-ritual.is-pinned .sm-breath__nodes { position: relative; height: 100%; flex-direction: column; justify-content: space-between; gap: 0; }
.sm-ritual.is-pinned .sm-breath__node {
    position: relative; width: var(--s-progress-node-hit); height: var(--s-progress-node-hit); padding: 0; justify-content: center;
    margin-block: calc(var(--s-progress-node-hit) / -2);
}
.sm-ritual.is-pinned .sm-breath__dot { border-color: var(--s-mineral); background: var(--s-deep); box-shadow: var(--s-shadow-node); }
.sm-ritual.is-pinned .sm-breath__node[aria-current] .sm-breath__dot { background: var(--s-seaglass); border-color: var(--s-seaglass); }
.sm-ritual.is-pinned .sm-breath__label {
    position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    padding: var(--s-gap-xs) var(--s-gap-s); border-radius: var(--s-radius-s);
    background: var(--s-veil); color: var(--s-text-on-dark); white-space: nowrap;
    color: var(--s-fog-light); pointer-events: none;
    transition: color var(--s-dur-ui) var(--s-ease-settle);
}
/* The four step names stay on screen the whole time; the current one is lit. */
.sm-ritual.is-pinned .sm-breath__node[aria-current] .sm-breath__label,
.sm-ritual.is-pinned .sm-breath__node:hover .sm-breath__label,
.sm-ritual.is-pinned .sm-breath__node:focus-visible .sm-breath__label { color: var(--s-seaglass); }

/* ---- 3. The rooms (light ground from here) ------------------------------------- */
.sm-light { background: var(--s-bg-light); color: var(--s-text-on-light); }
.sm-rooms { padding-bottom: var(--s-section-tight); }
/* Coming up for air: a clean surface line, no grey band (the pin has released above it). */
.sm-rooms { border-top: var(--s-surface-line) solid var(--s-seaglass-deep); }
.sm-rooms__head { padding-top: var(--s-section-tight); display: grid; gap: var(--s-gap-m); }
.sm-rooms__head .sm-lede { margin-top: 0; }
@media (min-width: 1024px) {
    .sm-rooms__head { grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap); align-items: end; }
    .sm-rooms__head .sm-h2 { grid-column: 1 / span 7; }
    .sm-rooms__head .sm-lede { grid-column: 9 / span 4; }
}

/* The temperature board: every room on one line, coldest to hottest. Phones get a two-column index. */
.sm-scale { margin-block: var(--s-gap-l) var(--s-gap-xl); }
.sm-scale__track { display: none; }
.sm-scale__marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-gap-m); border-top: var(--s-hairline) solid var(--s-rule-light); }
.sm-scale__mark a {
    display: flex; align-items: baseline; gap: var(--s-gap-xs); min-height: var(--s-tap);
    padding-block: var(--s-gap-xs); border-bottom: var(--s-hairline) solid var(--s-rule-light);
    text-decoration: none; transition: color var(--s-dur-ui) var(--s-ease-settle);
}
.sm-scale__mark a:hover { color: var(--s-seaglass-deep); }
.sm-scale__temp { font-size: var(--s-step-h3); font-weight: var(--s-w-heading); min-width: var(--s-scale-num-w); }
.sm-scale__name { font-size: var(--s-step-small); color: var(--s-muted-on-light); }
@media (min-width: 768px) {
    .sm-scale { position: relative; height: var(--s-scale-h); }
    .sm-scale__track {
        display: flex; justify-content: space-between; align-items: center;
        position: absolute; left: var(--s-gutter); right: var(--s-gutter); top: 50%; height: 0;
        border-top: var(--s-rule-accent) solid var(--s-text-on-light);
        font-size: var(--s-step-micro); color: var(--s-muted-on-light);
    }
    .sm-scale__end { transform: translateY(var(--s-scale-end-y)); }
    .sm-scale__marks { position: absolute; left: var(--s-gutter); right: var(--s-gutter); top: 0; bottom: 0; display: block; border: 0; }
    .sm-scale__mark { position: absolute; left: calc(var(--sm-at) * 1%); top: 50%; }
    .sm-scale__mark::before {
        content: ""; position: absolute; left: 0; top: 0; width: var(--s-scale-dot); height: var(--s-scale-dot);
        border-radius: 50%; background: var(--s-bg-light); border: var(--s-rule-accent) solid var(--s-text-on-light);
        transform: translate(-50%, -50%);
    }
    .sm-scale__mark a {
        position: absolute; left: 0; flex-direction: column; gap: 0; min-height: 0; padding: 0; border: 0;
        transform: translateX(-50%); white-space: nowrap; align-items: center; line-height: var(--s-lh-tight);
    }
    .sm-scale__mark--up a { bottom: var(--s-scale-lift); }
    .sm-scale__mark--down a { top: var(--s-scale-lift); flex-direction: column-reverse; }
    .sm-scale__temp { min-width: 0; font-size: var(--s-step-h3); }
}

/* Six rooms in three uneven pairs. Each pair shares one photo height; each room is led by its reading. */
.sm-rooms__list { display: grid; gap: var(--s-gap-xl); }
.sm-room__photo { overflow: hidden; }
.sm-room__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sm-room__cap { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-gap-m); padding-top: var(--s-gap-m); }
.sm-room__gauge { grid-column: 1 / -1; display: block; height: var(--s-rule-accent); margin-bottom: var(--s-gap-m); background: var(--s-rule-light); }
.sm-room__fill { display: block; height: 100%; width: calc(var(--sm-at) * 1%); background: var(--s-seaglass-deep); transform-origin: left; }
.sm-room__temp { display: flex; flex-direction: column; font-size: var(--s-step-room-temp); font-weight: var(--s-w-temp); line-height: var(--s-lh-temp); letter-spacing: var(--s-track-tight); }
.sm-room__templabel { font-size: var(--s-step-small); font-weight: var(--s-w-strong); letter-spacing: var(--s-track-body); line-height: var(--s-lh-body); color: var(--s-seaglass-deep); }
.sm-room__n { white-space: nowrap; }
.sm-room__deg { font-size: var(--s-unit-scale); vertical-align: top; margin-left: var(--s-hairline); color: var(--s-seaglass-deep); }
.sm-room__name { font-size: var(--s-step-h3); font-weight: var(--s-w-strong); line-height: var(--s-lh-tight); }
.sm-facts { display: flex; flex-wrap: wrap; margin-top: var(--s-gap-xs); }
.sm-facts > div {
    display: flex; flex-direction: column; padding-inline: var(--s-gap-s);
    border-left: var(--s-hairline) solid var(--s-rule-light);
}
.sm-facts > div:first-child { padding-left: 0; border-left: 0; }
.sm-facts dt { font-size: var(--s-step-micro); color: var(--s-muted-on-light); }
.sm-facts dd { font-size: var(--s-step-body); font-weight: var(--s-w-strong); }
.sm-room__note { margin-top: var(--s-gap-s); font-size: var(--s-step-body); color: var(--s-muted-on-light); max-width: var(--s-measure-narrow); }

@media (min-width: 768px) {
    .sm-rooms__list { grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap); row-gap: var(--s-gap-xl); align-items: start; }
    .sm-room__photo img { aspect-ratio: auto; height: var(--s-room-photo-h); }
    .sm-room:nth-child(4n + 1), .sm-room:nth-child(4n + 4) { grid-column: span 7; }
    .sm-room:nth-child(4n + 2), .sm-room:nth-child(4n + 3) { grid-column: span 5; }
}

/* ---- 4. The building ------------------------------------------------------------ */
.sm-building { padding-bottom: var(--s-section-tight); }
.sm-building .sm-head--voice { padding-top: 0; margin-bottom: var(--s-gap-xl); }
/* One spread, two dates: the engine house (with a valve pinned on its corner) beside the bath
   hall, both photographs the same height, each year as the headline figure beneath its own photo. */
.sm-spread { display: grid; gap: var(--s-gap-xl); }
.sm-spread figure { display: grid; gap: var(--s-gap-m); align-content: start; position: relative; }
.sm-spread__photo { overflow: hidden; border-radius: var(--s-radius); }
.sm-spread__photo picture, .sm-spread__photo img { width: 100%; height: 100%; object-fit: cover; }
.sm-spread__then .sm-spread__photo { aspect-ratio: var(--s-spread-then-ratio); }
.sm-spread__inset {
    position: absolute; right: var(--s-gap-m);
    top: calc((100vw - 2 * var(--s-gutter)) / (var(--s-spread-then-ratio)) - var(--s-spread-inset-w) * 4 / 3 - var(--s-gap-m));
    width: var(--s-spread-inset-w); aspect-ratio: var(--s-spread-inset-ratio);
    overflow: hidden; border-radius: var(--s-radius);
    outline: var(--s-spread-inset-border) solid var(--s-mineral);
}
.sm-spread__inset picture, .sm-spread__inset img { width: 100%; height: 100%; object-fit: cover; }
.sm-spread__text p:last-child { color: var(--s-muted-on-light); max-width: var(--s-measure); }
.sm-spread .sm-year { font-size: var(--s-step-spread-year); margin-bottom: 0; }
.sm-spread .sm-h3 { margin-top: calc(-1 * var(--s-gap-xs)); }
.sm-year { display: flex; align-items: baseline; gap: var(--s-gap-s); font-size: var(--s-step-year); font-weight: var(--s-w-display); line-height: var(--s-lh-display); margin-bottom: var(--s-gap-m); }
.sm-year__label { font-size: var(--s-step-small); font-weight: var(--s-w-strong); color: var(--s-seaglass-deep); }
.sm-ledger {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-gap-m) var(--s-grid-gap);
}
.sm-ledger > div { padding-top: var(--s-gap-s); border-top: var(--s-hairline) solid var(--s-rule-light); }
.sm-ledger dt { font-size: var(--s-step-micro); color: var(--s-muted-on-light); }
.sm-ledger dd { font-size: var(--s-step-h3); font-weight: var(--s-w-heading); }

@media (min-width: 768px) {
    .sm-spread { grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap); row-gap: var(--s-gap-xl); }
    .sm-spread__then { grid-column: 1 / span 5; }
    .sm-spread__now { grid-column: 6 / span 7; }
    .sm-spread__then .sm-spread__photo, .sm-spread__now .sm-spread__photo { aspect-ratio: auto; height: var(--s-spread-h); }
    .sm-spread__inset { width: var(--s-spread-inset-w-wide); top: calc(var(--s-spread-h) - var(--s-spread-inset-w-wide) * 4 / 3 - var(--s-gap-m)); }
    .sm-ledger { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- 5. Membership ---------------------------------------------------------------- */
.sm-member { padding-block: var(--s-section-tight); }
.sm-member__head { display: grid; gap: var(--s-gap-l); margin-bottom: var(--s-gap-xl); }
/* The opener: three prices as the headline, the month set largest. */
.sm-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-gap-l) var(--s-grid-gap); align-items: end; margin-bottom: var(--s-gap-xl); }
.sm-prices__item { display: flex; flex-direction: column; gap: var(--s-gap-xs); }
.sm-prices__item--rec { grid-column: 1 / -1; order: -1; }
.sm-prices__fig { font-size: var(--s-step-price-side); font-weight: var(--s-w-display); line-height: var(--s-lh-display); letter-spacing: var(--s-track-display); }
.sm-prices__item--rec .sm-prices__fig { font-size: var(--s-step-price-hero); color: var(--s-seaglass-deep); }
.sm-prices__per { font-size: var(--s-step-small); color: var(--s-ink-muted-panel); }
.sm-prices__item--rec .sm-prices__per { font-size: var(--s-step-body); color: var(--s-text-on-light); font-weight: var(--s-w-strong); }
.sm-prices__rec { font-size: var(--s-step-micro); font-weight: var(--s-w-strong); color: var(--s-seaglass-deep); }
.sm-tiers { display: grid; gap: var(--s-tier-gap); }
.sm-tier {
    display: flex; flex-direction: column;
    padding: var(--s-panel-pad); border-radius: var(--s-radius);
    background: var(--s-mineral-2); color: var(--s-text-on-light);
    border-top: var(--s-rule-accent) solid transparent;
}
.sm-tier--rec { border-top-color: var(--s-seaglass-deep); }
.sm-tier__rec { font-size: var(--s-step-micro); font-weight: var(--s-w-strong); color: var(--s-seaglass-deep); margin-bottom: var(--s-gap-xs); }
.sm-tier__name { font-size: var(--s-step-h3); font-weight: var(--s-w-heading); }
.sm-tier__price { margin-top: var(--s-gap-m); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-gap-xs); }
.sm-tier__price .sm-num { font-size: var(--s-step-h3); font-weight: var(--s-w-display); line-height: var(--s-lh-display); }
.sm-tier__per { font-size: var(--s-step-small); color: var(--s-ink-muted-panel); }
.sm-tier__summary { margin-top: var(--s-gap-s); font-size: var(--s-step-small); }
.sm-tier__label { margin-top: var(--s-gap-m); font-size: var(--s-step-micro); font-weight: var(--s-w-strong); }
.sm-tier__list, .sm-tier__terms { margin-top: var(--s-gap-xs); font-size: var(--s-step-small); }
.sm-tier__list li, .sm-tier__terms li { padding-block: var(--s-gap-xs); border-top: var(--s-hairline) solid var(--s-rule-light); }
.sm-tier__terms { line-height: var(--s-lh-tight); color: var(--s-ink-muted-panel); }
.sm-member__cta { margin-top: var(--s-gap-l); }

@media (min-width: 768px) {
    .sm-member__head { grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap); align-items: end; }
    .sm-member__head > .sm-head { grid-column: 1 / span 7; }
    .sm-prices { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); }
    .sm-prices__item--rec { grid-column: auto; order: 0; }
    .sm-prices__item:last-child { text-align: right; align-items: flex-end; }
    .sm-member__photo { grid-column: 9 / span 4; }
}
@media (min-width: 1024px) {
    .sm-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm-tier { grid-column: var(--sm-col); grid-row: 1; }
}

/* ---- 6. Visiting: the tide table ---------------------------------------------------- */
.sm-visit { background: var(--s-slate); color: var(--s-text-on-dark); padding-block: var(--s-section-tight); }
.sm-visit .sm-lede { color: var(--s-fog); }
.sm-visit__grid { display: grid; gap: var(--s-gap-l); }
.sm-tidecard { padding: var(--s-panel-pad); border-radius: var(--s-radius); background: var(--s-mineral); color: var(--s-text-on-light); }
.sm-tides { width: 100%; border-collapse: collapse; font-size: var(--s-step-small); }
.sm-tides caption { caption-side: top; text-align: left; font-weight: var(--s-w-strong); line-height: var(--s-lh-tight); padding-bottom: var(--s-gap-s); }
.sm-tides th, .sm-tides td { padding: var(--s-gap-xs) var(--s-tide-cell-x); text-align: left; vertical-align: top; border-bottom: var(--s-hairline) solid var(--s-rule-light); }
.sm-tides th:first-child, .sm-tides td:first-child { padding-left: 0; }
.sm-tides thead th { font-size: var(--s-step-micro); font-weight: var(--s-w-strong); color: var(--s-muted-on-light); }
.sm-tides tbody th { font-weight: var(--s-w-strong); }
.sm-tides__short { display: none; }
.sm-tides__pair { white-space: nowrap; }
.sm-tides__pair span + span { margin-left: var(--s-gap-s); }
.sm-tides tr.is-today { background: var(--s-mineral-2); }
.sm-tides__today { display: block; font-size: var(--s-step-micro); color: var(--s-seaglass-deep); font-weight: var(--s-w-strong); }
.sm-tidecard__note { margin-top: var(--s-gap-s); font-size: var(--s-step-small); color: var(--s-muted-on-light); line-height: var(--s-lh-tight); }
.sm-rules { counter-reset: rule; }
.sm-rules li {
    counter-increment: rule; display: grid; grid-template-columns: var(--s-gap-l) 1fr; align-items: baseline;
    padding-block: var(--s-gap-s); border-top: var(--s-hairline) solid var(--s-rule-dark);
    font-family: var(--s-font-voice); font-style: italic; font-weight: var(--s-w-voice); font-size: var(--s-step-voice); line-height: var(--s-lh-tight);
}
.sm-rules li::before { content: counter(rule); font-family: var(--s-font); font-style: normal; font-size: var(--s-step-small); color: var(--s-fog); font-variant-numeric: tabular-nums; }
.sm-bring li { padding-block: var(--s-gap-s); border-top: var(--s-hairline) solid var(--s-rule-dark); }
.sm-visit__photo img { width: 100%; }
/* The section opens on the tide table itself: today's high water is the headline figure. */
.sm-tidehead { display: grid; gap: var(--s-gap-s); align-content: start; }
.sm-tidehead__title { font-size: var(--s-step-body); font-weight: var(--s-w-strong); color: var(--s-seaglass); line-height: var(--s-lh-tight); }
.sm-tidehead__figure { display: grid; gap: var(--s-gap-xs); padding-top: var(--s-gap-s); border-top: var(--s-hairline) solid var(--s-rule-dark); }
.sm-tidehead__label { font-size: var(--s-step-small); color: var(--s-fog); }
.sm-tidehead__time { font-size: var(--s-step-tide); font-weight: var(--s-w-display); line-height: var(--s-lh-display); letter-spacing: var(--s-track-display); }
.sm-tidehead__line { max-width: var(--s-measure-narrow); font-size: var(--s-step-lede); color: var(--s-mineral); line-height: var(--s-lh-body); }

@media (min-width: 1024px) {
    .sm-visit__grid { grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap); row-gap: var(--s-gap-xl); }
    .sm-visit__head { grid-column: 1 / span 4; grid-row: 1; }
    .sm-tidecard { grid-column: 5 / span 8; grid-row: 1; }
    .sm-visit__rules { grid-column: 1 / span 4; grid-row: 2; }
    .sm-visit__bring { grid-column: 5 / span 4; grid-row: 2; }
    .sm-visit__photo { grid-column: 9 / span 4; grid-row: 2; }
}

/* ---- 7. Book ------------------------------------------------------------------- */
.sm-book { display: grid; background: var(--s-deep); }
.sm-book__photo img { width: 100%; }
.sm-book__body { padding: var(--s-section-tight) var(--s-gutter) var(--s-section); }
.sm-form { display: grid; gap: var(--s-gap-m); margin-top: var(--s-gap-l); max-width: var(--s-measure); }
.sm-form__note { font-size: var(--s-step-small); color: var(--s-fog); }
.sm-field { display: grid; gap: var(--s-gap-xs); }
.sm-field label, .sm-field legend { font-size: var(--s-step-small); font-weight: var(--s-w-strong); }
.sm-field input:not([type="radio"]):not([type="checkbox"]), .sm-field select, .sm-field textarea {
    width: 100%; min-height: var(--s-input-h); padding: var(--s-gap-s);
    border: var(--s-hairline) solid var(--s-rule-dark); border-radius: var(--s-radius-s);
    background: var(--s-slate); color: var(--s-text-on-dark);
    font: inherit; font-size: var(--s-step-input); line-height: var(--s-lh-tight);
    transition: border-color var(--s-dur-ui) var(--s-ease-settle);
}
.sm-field select { cursor: pointer; }
.sm-field textarea { resize: vertical; }
.sm-field input:hover, .sm-field select:hover, .sm-field textarea:hover { border-color: var(--s-fog); }
.sm-field [aria-invalid="true"] { border-color: var(--s-error); }
.sm-field__hint { font-size: var(--s-step-small); color: var(--s-fog); }
.sm-field__err { font-size: var(--s-step-small); color: var(--s-error); }
.sm-choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.sm-choice legend { padding: 0; margin-bottom: var(--s-gap-xs); }
.sm-choice__row { display: flex; flex-wrap: wrap; gap: var(--s-gap-xs); }
.sm-choice__opt {
    display: inline-flex; align-items: center; gap: var(--s-gap-xs); min-height: var(--s-tap);
    padding: 0 var(--s-gap-s); border: var(--s-hairline) solid var(--s-rule-dark); border-radius: var(--s-radius-s);
    font-weight: var(--s-w-body); cursor: pointer;
    transition: border-color var(--s-dur-ui) var(--s-ease-settle);
}
.sm-choice__opt:has(input:checked) { border-color: var(--s-seaglass); }
.sm-choice__opt input, .sm-check input { accent-color: var(--s-seaglass); width: var(--s-check); height: var(--s-check); margin: 0; }
.sm-check { display: flex; align-items: center; gap: var(--s-gap-s); min-height: var(--s-tap); }
.sm-check label { font-weight: var(--s-w-body); font-size: var(--s-step-body); cursor: pointer; }
.sm-form__submit { justify-self: start; }
.sm-form__status:empty { display: none; }
.sm-form__status { padding: var(--s-gap-s); border-left: var(--s-rule-accent) solid var(--s-seaglass); color: var(--s-text-on-dark); }

@media (min-width: 768px) {
    .sm-book { grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); }
    .sm-book__photo { grid-column: 1 / span 5; position: relative; }
    /* The sea holds for the full height of the form: a horizon crops cleanly, so it stretches. */
    .sm-book__photo picture { position: absolute; inset: 0; }
    .sm-book__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--s-book-pos); }
    .sm-book__body { grid-column: 6 / span 7; padding-left: var(--s-gap-xl); }
}

/* ---- Footer --------------------------------------------------------------------- */
.sm-foot { background: var(--s-deep); color: var(--s-fog); border-top: var(--s-hairline) solid var(--s-rule-dark); padding-block: var(--s-gap-xl) var(--s-gap-l); font-size: var(--s-step-small); }
.sm-foot__grid { display: grid; gap: var(--s-gap-l); }
.sm-foot .sm-wordmark { color: var(--s-text-on-dark); margin-bottom: var(--s-gap-m); }
.sm-foot__title { font-size: var(--s-step-small); font-weight: var(--s-w-strong); color: var(--s-text-on-dark); margin-bottom: var(--s-gap-xs); }
.sm-foot address { font-style: normal; }
.sm-foot__list a { display: inline-flex; align-items: center; min-height: var(--s-tap); color: var(--s-seaglass); text-decoration: none; }
.sm-foot__list a:hover { text-decoration: underline; }
.sm-foot__small { font-size: var(--s-step-micro); margin-bottom: var(--s-gap-xs); }
.sm-credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-gap-m); font-size: var(--s-step-micro); }
.sm-credits li { display: flex; flex-direction: column; padding-bottom: var(--s-gap-xs); }
.sm-credits a { display: inline-flex; align-items: center; min-height: var(--s-tap); color: var(--s-seaglass); }
.sm-credits span { line-height: var(--s-lh-tight); }
.sm-foot__copy { margin-top: var(--s-gap-l); font-size: var(--s-step-micro); }

@media (min-width: 1024px) {
    .sm-foot__grid { grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap); }
    .sm-foot__grid > :nth-child(1) { grid-column: 1 / span 3; }
    .sm-foot__grid > :nth-child(2) { grid-column: 4 / span 2; }
    .sm-foot__grid > :nth-child(3) { grid-column: 6 / span 2; }
    .sm-foot__credits { grid-column: 8 / span 5; }
}

/* ---- Sticky book bar (phones) ------------------------------------------------------- */
.sm-sticky { display: none; }

/* ---- Phones ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    section[id], article[id] { scroll-margin-top: var(--s-nav-h-mobile); }
    .sm-stage[id] { scroll-margin-top: calc(var(--s-nav-h-mobile) + var(--s-tap)); }
    .sm-nav { height: var(--s-nav-h-mobile); margin-bottom: calc(-1 * var(--s-nav-h-mobile)); grid-template-columns: 1fr auto auto; gap: var(--s-gap-xs); }
    .sm-nav__menu { order: 3; padding: 0 var(--s-gap-xs); }
    .sm-btn--nav { background: var(--s-btn-bg); color: var(--s-btn-text); font-weight: var(--s-w-strong); }
    .sm-btn--nav:hover { background: var(--s-btn-bg-hover); color: var(--s-btn-text); }
    .sm-nav__long { display: none; }
    .sm-nav__short { display: inline; }

    .sm-arrival__photo img { height: calc(100% - var(--s-hero-type-floor-m)); object-position: var(--s-hero-pos-p); }
    .sm-arrival__copy { padding-bottom: var(--s-gap-s); }
    .sm-arrival__actions .sm-btn { width: 100%; }
    .sm-arrival__actions .sm-link { display: none; }
    .sm-readings { position: relative; right: auto; bottom: auto; width: auto; margin: 0 var(--s-gutter) var(--s-hero-copy-bottom-m); }
    .sm-readings__note { display: none; }

    .sm-breath { top: var(--s-nav-h-mobile); }
    .sm-stage__photo img { height: auto; }
    .sm-stage__text { padding: var(--s-gap-l) var(--s-gutter) var(--s-gap-xl); background: var(--s-deep); }

    .sm-tides { font-size: var(--s-step-micro); }
    .sm-tides__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sm-tides__short { display: inline; }
    .sm-tides__pair span { display: block; }
    .sm-tides__pair span + span { margin-left: 0; }

    .sm-book__photo { order: 2; }
    .sm-form__submit { width: 100%; }

    .sm-sticky {
        position: fixed; z-index: var(--s-z-sticky); left: 0; right: 0; bottom: 0;
        display: flex; align-items: center; justify-content: space-between; gap: var(--s-gap-s);
        min-height: var(--s-sticky-h);
        padding: var(--s-gap-xs) var(--s-gutter) calc(var(--s-gap-xs) + env(safe-area-inset-bottom));
        background: var(--s-veil); -webkit-backdrop-filter: blur(var(--s-blur-nav)); backdrop-filter: blur(var(--s-blur-nav));
        border-top: var(--s-hairline) solid var(--s-rule-dark);
        opacity: var(--s-o-hidden); visibility: hidden;
        transition: opacity var(--s-dur-fade) var(--s-ease-breath), visibility 0s linear var(--s-dur-fade);
    }
    .sm-sticky.is-shown { opacity: 1; visibility: visible; transition: opacity var(--s-dur-fade) var(--s-ease-breath), visibility 0s; }
    .sm-sticky__note { font-size: var(--s-step-small); color: var(--s-fog-light); }
}

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