/* ══════════════════════════════════════════════════════════════════════
   SOLUNA HOUSE — boutique coastal hotel, Cala Soluna, Costa Ligure

   Design language
   ───────────────
   Palette      the six house colours, and mixtures of them. Every sky,
                sea, wash and night tone in this file is derived from
                these six hexes at runtime (see world.js) — there is no
                colour in this world that is not the palette or a blend.
   Type         high-contrast editorial serif (Didot / Bodoni lineage)
                for display — Bodoni Moda, loaded as a real FontFace, with
                Didot / Bodoni MT / Hoefler Text as the system fallbacks;
                Jost, a Helvet-lineage grotesque, for navigation and booking
                detail; monospace at 10–11px for coordinates.
   Shape        architecture, not interface. Arched tops, pill buttons,
                1px hairline rules, no radii anywhere else, no shadows
                except the sun. Nothing floats on a blurred card.
   Motion       slow and ease-out. Long durations (600–900ms), nothing
                bounces except the rubber stamp.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── the palette ────────────────────────────────────────────────── */
  --shell-cream: #FFF8EE;   /* shell cream  */
  --dawn-lavender: #C7B8FF; /* dawn lavender */
  --sea-violet: #6D5BD0;     /* sea violet   */
  --sunset-coral: #F28F86;   /* sunset coral */
  --deep-ink: #25213A;      /* deep ink     */
  --pale-sky: #DDEBFF;      /* pale sky     */

  /* derived once, statically — these never change with the time slider */
  --ink-70: color-mix(in srgb, var(--deep-ink) 70%, var(--shell-cream));
  --ink-52: color-mix(in srgb, var(--deep-ink) 52%, var(--shell-cream));
  --ink-34: color-mix(in srgb, var(--deep-ink) 34%, var(--shell-cream));
  --hair: color-mix(in srgb, var(--deep-ink) 15%, transparent);
  --hair-soft: color-mix(in srgb, var(--deep-ink) 9%, transparent);
  --page: var(--shell-cream);
  --tint: color-mix(in srgb, var(--dawn-lavender) 22%, var(--shell-cream));

  /* ── time of day: written by world.js every frame of the slider ──── */
  --sky-1: #F7DCC8;         /* top of the sky gradient   */
  --sky-2: #CFC1E8;         /* the middle band           */
  --sky-3: #E7EBF5;         /* the haze at the waterline */
  --sun-fill: #FFC7A4;      /* the body of the sun       */
  --sun-core: #FFF3DF;      /* its hot centre            */
  --sun-glow: #F28F86;      /* the halo around it        */
  --orb-y: 78%;             /* where the sun sits         */
  --moon-op: 0;             /* crescent fades up at dusk  */
  --star-op: 0;             /* stars fade up at dusk      */
  --sea-1: #3A3170;         /* deep water                 */
  --sea-2: #8E7DD8;         /* the shallows              */
  --plate-sat: .78;         /* the "photograph" treatment */
  --plate-con: .92;
  --plate-bri: 1.02;
  --plate-sep: .18;
  --wash: #F28F86;
  --wash-a: .16;
  --accent: var(--sunset-coral);
  --hero-ink: var(--deep-ink);  /* ink over the scene, flips at night */
  --cloud-shift: -3vw;
  --cloud-op: .5;
  --tint-a: 12%;           /* how much dawn lavender bleeds into the page */

  /* ── type ───────────────────────────────────────────────────────── */
  --serif: "Bodoni Moda", Didot, "Bodoni MT", "Hoefler Text", "Playfair Display", "Times New Roman", Times, serif;
  --grotesk: "Jost", "Helvetica Neue", Helvetica, Inter, "Segoe UI", Arial, sans-serif;
  --mono: "SF Mono", "Cascadia Mono", ui-monospace, Consolas, "Roboto Mono", "Courier New", monospace;

  /* ── metrics ────────────────────────────────────────────────────── */
  --gut: clamp(20px, 4vw, 56px);
  --band: clamp(76px, 11vh, 148px);
  --ease: cubic-bezier(.22, .68, .28, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--deep-ink);
  font: 400 clamp(15px, 1.02vw, 17px)/1.62 var(--grotesk);
  letter-spacing: .004em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* a slow cream→lavender wash so the page is never a flat fill */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 70% at 12% -8%, color-mix(in srgb, var(--dawn-lavender) var(--tint-a), transparent) 0%, transparent 62%),
    radial-gradient(90% 60% at 100% 8%, color-mix(in srgb, var(--pale-sky) 34%, transparent) 0%, transparent 58%);
  transition: background 600ms linear;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

::selection { background: var(--dawn-lavender); color: var(--deep-ink); }

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

.wrap {
  width: min(1160px, 100% - var(--gut) * 2);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* ── small shared parts ───────────────────────────────────────────── */

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--deep-ink); color: var(--shell-cream);
  padding: 10px 18px; border-radius: 999px;
  font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

.label {
  font: 500 10px/1.2 var(--mono);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-52);
}

.mono { font: 400 11px/1.5 var(--mono); letter-spacing: .1em; color: var(--ink-52); }

.coords {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px;
  font: 400 10px/1.6 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-52);
}
.coords i { color: var(--accent); font-style: normal; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 28px;
  border: 1px solid transparent; border-radius: 999px;
  font: 500 11px/1 var(--grotesk);
  letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
}
.btn--pill { background: var(--sea-violet); color: var(--shell-cream); }
.btn--pill:hover { background: var(--deep-ink); transform: translateY(-2px); }
.btn--ghost { border-color: var(--hair); color: var(--deep-ink); }
.btn--ghost:hover { border-color: var(--deep-ink); background: color-mix(in srgb, var(--deep-ink) 5%, transparent); }
.btn--ink { background: var(--deep-ink); color: var(--shell-cream); width: 100%; }
.btn--ink:hover { background: var(--sea-violet); }

.linkbtn {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 400 11px/1 var(--mono); letter-spacing: .1em;
  color: var(--sea-violet);
  border-bottom: 1px solid color-mix(in srgb, var(--sea-violet) 40%, transparent);
  transition: color .3s, border-color .3s;
}
.linkbtn:hover { color: var(--deep-ink); border-color: var(--deep-ink); }

.chip {
  border: 1px solid var(--hair); background: none; cursor: pointer;
  border-radius: 999px; padding: 7px 15px;
  font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-52);
  transition: all .35s var(--ease);
}
.chip:hover { border-color: var(--ink-34); color: var(--deep-ink); }
.chip--on { background: var(--deep-ink); border-color: var(--deep-ink); color: var(--shell-cream); }

/* ── the bar ──────────────────────────────────────────────────────── */

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; gap: 26px;
  padding: 20px var(--gut);
  color: var(--hero-ink);
  transition: color .7s linear, background-color .5s var(--ease),
              border-color .5s var(--ease), padding .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar.is-solid {
  color: var(--deep-ink);
  background: color-mix(in srgb, var(--shell-cream) 88%, transparent);
  border-bottom-color: var(--hair-soft);
  padding-block: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar__mark {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
.mark { width: 30px; height: 30px; }
.topbar__word {
  font: 400 12px/1 var(--serif);
  letter-spacing: .3em; text-transform: uppercase;
}

.topbar__nav { display: flex; gap: clamp(14px, 2.2vw, 30px); }
.topbar__nav a {
  position: relative;
  font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; opacity: .82;
  padding-block: 6px;
  transition: opacity .3s;
}
.topbar__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.topbar__nav a:hover { opacity: 1; }
.topbar__nav a:hover::after { transform: scaleX(1); }

.topbar__cta { min-height: 38px; padding: 0 20px; font-size: 10px; }

.navtoggle {
  display: none;
  border: 1px solid currentColor; background: none; cursor: pointer;
  width: 42px; height: 42px; border-radius: 50%;
  align-items: center; justify-content: center;
  padding: 0;
}
.navtoggle__lines { display: grid; gap: 5px; width: 16px; }
.navtoggle__lines i {
  display: block; height: 1px; background: currentColor;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.navtoggle[aria-expanded="true"] .navtoggle__lines i:first-child { transform: translateY(3px) rotate(35deg); }
.navtoggle[aria-expanded="true"] .navtoggle__lines i:last-child { transform: translateY(-3px) rotate(-35deg); }

/* ═══════════════════════ HERO ═══════════════════════════════════════ */

.hero { height: 200svh; position: relative; }

.hero__sticky {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
}

.hero__scene { position: absolute; inset: 0; overflow: hidden; }

/* Painted value, not tooth. This is the layer that makes the sky read as a
   painted surface rather than a CSS gradient: very low frequency turbulence
   remapped into a narrow band near white, laid in with soft-light, which is
   the mode that actually deposits on a pale ground. Overlay does not — it is
   base-preserving and this sky has almost no shadow for it to bite into.
   Measured: sd delta +1.15, 6.78 levels deposited at 1440x900. */
.hero__scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='p' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.5' intercept='0.55'/%3E%3CfeFuncG type='linear' slope='0.5' intercept='0.55'/%3E%3CfeFuncB type='linear' slope='0.5' intercept='0.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23p)'/%3E%3C/svg%3E");
  opacity: .85;
  /* one tile, stretched to the scene: a repeating 600px tile leaves a visible
     vertical seam at every tile boundary across a wide sky */
  background-size: cover;
  background-repeat: no-repeat;
}

/* the filter defs are declared once, here; the svg itself is zero-sized */
.scenefx { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Film tooth over the whole sky — the fine grain the plate already used, hoisted
   out of that one figure and laid across the entire scene. NORMAL blend, not
   overlay: overlay is base-preserving and measures a no-op both on this pale
   sky and on the near-black one at 22:00; normal deposits on both. The
   colour matrix pins the noise to a neutral grey so it is tooth, not a veil. */
.hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: normal;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.5 0 0 0 0 0.48 0 0 0 0 0.52 1.2 0 0 0 -0.45'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grain 1.5s steps(1, end) infinite;
}
/* the tooth shifts, so the surface never reads as a still digital fill */
@keyframes grain {
  0%   { background-position:   0px   0px; }
  25%  { background-position: -13px   9px; }
  50%  { background-position:   8px -11px; }
  75%  { background-position:  -7px  -6px; }
  100% { background-position:   0px   0px; }
}

.sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 54%, var(--sky-3) 100%);
  transition: background 240ms linear;
}

/* stars: written by JS, only ever visible at night */
.stars {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: var(--star-op);
  transition: opacity 500ms linear;
}
.stars circle { fill: var(--shell-cream); }

/* clouds: outer div is placed by the time engine, inner puff drifts on its own */
.cloud {
  position: absolute;
  opacity: var(--cloud-op);
  transition: opacity 600ms linear;
  /* the silhouette is broken by turbulence and softened, so a pill stops
     reading as a pill. On the outer div: it is placed by the time engine and
     never animated, so the filter is rasterised once, not every frame. */
  filter: url(#cloudWarp);
}
.cloud--a { width: 34vmin; left: 6%;  top: 16%; --y: 0;   --dur: 46s; --amp: 12px; --deep: .34; }
.cloud--b { width: 22vmin; left: 62%; top: 27%; --y: -6px; --dur: 61s; --amp: 9px;  --deep: .5; }
.cloud--c { width: 46vmin; left: 34%; top: 44%; --y: 4px;  --dur: 78s; --amp: 15px; --deep: .2; }
.cloud--d { width: 17vmin; left: 82%; top: 12%; --y: -10px;--dur: 54s; --amp: 7px;  --deep: .42; }
.cloud__puff {
  width: 100%; height: 62%;
  background: var(--shell-cream);
  border-radius: 999px;
  opacity: calc(var(--deep) + .12);
  transform: translate3d(var(--cloud-shift), var(--y), 0);
  transition: transform 700ms var(--ease);
  animation: drift var(--dur) ease-in-out infinite alternate;
}
@keyframes drift {
  from { margin-left: 0; }
  to   { margin-left: var(--amp); }
}

/* the sun: a large circle that rises with the hour — sized so it never
   swallows the headline, and displaced so it is never a true circle */
.orbwrap {
  --size: clamp(320px, 60vmin, 820px);
  position: absolute; left: 50%; top: var(--orb-y);
  width: var(--size);
  aspect-ratio: 1;
  /* centred with margins, not a translate: `scale` composes BEFORE `transform`,
     so a translate(-50%,-50%) would shift the disc off its own axis when the
     moon shrinks it. Margins leave scale to act about the centre alone. */
  margin-left: calc(var(--size) / -2);
  margin-top: calc(var(--size) / -2);
  /* the same disc is the sun by day and the moon after dusk, so it changes
     scale with the moon rather than sitting on the headline at full size */
  scale: calc(1 - var(--moon-op) * .6);
}
.orb {
  position: relative; width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%,
              var(--sun-core) 0%, var(--sun-fill) 42%,
              color-mix(in srgb, var(--sun-glow) 62%, var(--sun-fill)) 74%,
              color-mix(in srgb, var(--sun-glow) 30%, transparent) 100%);
  box-shadow: 0 0 clamp(70px, 9vw, 150px) color-mix(in srgb, var(--sun-glow) 42%, transparent);
  transition: background 300ms linear, box-shadow 300ms linear;
  filter: url(#orbWarp);
}
/* the breathing halo lives outside the filtered disc, so the thirteen-second
   swell never forces the turbulence to be recomputed */
.orb__halo {
  position: absolute; inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sun-glow) 34%, transparent) 0%, transparent 68%);
  filter: url(#haloWarp);
  animation: breathe 13s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: .5; transform: scale(.97); } to { opacity: 1; transform: scale(1.05); } }

/* a crescent that takes over from the sun after dusk */
.orb__moon {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 44% 40%, #FFFDF8 0%, #DCE6F6 58%, #AFC0DE 100%);
  opacity: var(--moon-op);
  transition: opacity 500ms linear;
  -webkit-mask: radial-gradient(circle at 68% 30%, transparent 40%, #000 41%);
  mask: radial-gradient(circle at 68% 30%, transparent 40%, #000 41%);
}

/* the coastal photograph — a duotone plate standing in front of the sun */
.plate {
  position: absolute;
  right: clamp(24px, 7vw, 120px);
  bottom: 6vh;
  width: clamp(240px, 27vw, 396px);
  aspect-ratio: 600 / 760;
  overflow: hidden;
  border-radius: 46% 46% 4px 4px / 30% 30% 4px 4px;
  box-shadow: 0 40px 90px -50px rgba(37, 33, 58, .55);
}
.plate__art {
  width: 100%; height: 100%;
  /* the colour grading the time engine drives, then the same displacement the
     clouds get: a hard black headland rectangle and a mathematically perfect
     white sun stop reading as vector once the edges are torn */
  filter: saturate(var(--plate-sat)) contrast(var(--plate-con))
          brightness(var(--plate-bri)) sepia(var(--plate-sep))
          url(#plateWarp);
  transition: filter 300ms linear;
}
.plate__wash {
  position: absolute; inset: 0;
  background: var(--wash);
  opacity: var(--wash-a);
  mix-blend-mode: soft-light;
  transition: background 300ms linear, opacity 300ms linear;
}
.plate__grain {
  position: absolute; inset: 0;
  opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.plate__cap {
  position: absolute; inset: auto 0 0 0;
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  font: 400 9px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--shell-cream) 82%, transparent);
  background: linear-gradient(0deg, rgba(20, 16, 40, .55), transparent);
  border-top: 1px solid color-mix(in srgb, var(--shell-cream) 22%, transparent);
}

/* the type, laid over the scene */
.hero__stage {
  position: relative; z-index: 3;
  height: 100svh;
  display: grid; align-content: end;
  gap: 0;
  padding: 0 var(--gut) clamp(30px, 6vh, 62px);
  width: min(1160px, 100%);
  margin-inline: auto;
  color: var(--hero-ink);
  transition: color 700ms linear;
}

/* The hero's secondary inks are re-derived from --hero-ink, which the time
   engine drives, so the lede, the coordinates and the dial flip with the hour
   exactly as the headline already does. Before this they were deep-ink mixes
   all night and only stayed legible by accident, because the old 540px moon
   happened to sit behind them. Shadowing the tokens here, rather than editing
   each rule, is what makes every descendant follow at once. */
.hero__stage {
  --ink-70: color-mix(in srgb, var(--hero-ink) 70%, var(--shell-cream));
  --ink-52: color-mix(in srgb, var(--hero-ink) 52%, var(--shell-cream));
  --ink-34: color-mix(in srgb, var(--hero-ink) 34%, var(--shell-cream));
  --hair: color-mix(in srgb, var(--hero-ink) 15%, transparent);
}
.hero__stage .btn--ghost { color: var(--ink-70); border-color: var(--hair); }

.display {
  font: 400 clamp(3.1rem, 9.4vw, 8.6rem)/.92 var(--serif);
  letter-spacing: -.024em;
  margin-block: clamp(16px, 2.6vh, 30px) 0;
  max-width: 15ch;
}
.display__line { display: block; }
.display em {
  font-style: italic;
  color: var(--accent);
  transition: color 500ms linear;
}
.display--2 {
  font-size: clamp(2.5rem, 6.2vw, 5.4rem);
  max-width: 17ch;
  margin-block: 14px 0;
}

.lede {
  max-width: 46ch;
  margin-top: clamp(18px, 2.6vh, 30px);
  color: var(--ink-70);
  transition: color 700ms linear;
  max-width: 46ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3vh, 34px); }

.hero__cue {
  position: absolute; z-index: 4; left: 50%; bottom: 16px;
  transform: translateX(-50%);
  font: 400 9px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-52);
  display: flex; align-items: center; gap: 10px;
  transition: opacity .6s var(--ease);
}
.hero__cue::before,
.hero__cue::after {
  content: ""; width: 34px; height: 1px; background: currentColor; opacity: .5;
}
.hero__cue.is-gone { opacity: 0; pointer-events: none; }

/* ── the time-of-day dial: the whole point of the world ───────────── */

.dial {
  margin-top: clamp(26px, 4.4vh, 52px);
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  max-width: 620px;
}
.dial__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
}
.dial__read {
  font: 400 11px/1 var(--mono); letter-spacing: .16em;
  /* deep ink, never the accent: this readout sits on the sun's disc from first
     light to night, and the disc is a pale body at every one of those hours */
  color: var(--deep-ink);
  transition: color 400ms linear;
  font-variant-numeric: tabular-nums;
}

.dial__track {
  position: relative;
  height: 120px;                /* replaced by world.js with real arc math */
  margin-top: 10px;
  touch-action: pan-y;           /* let the page scroll through the track  */
}
.dial__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial__arc path {
  stroke: var(--hair);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.dial__sun {
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: radial-gradient(circle at 46% 42%, var(--sun-core), var(--sun-fill) 62%, var(--sun-glow));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--sun-glow) 16%, transparent),
              0 0 26px color-mix(in srgb, var(--sun-glow) 55%, transparent);
  pointer-events: none;
  transition: background 300ms linear, box-shadow 300ms linear;
}
/* the real control: a transparent range input over the arc */
.dial__input {
  position: absolute; inset: -6px 0;
  width: 100%; height: calc(100% + 12px);
  margin: 0; padding: 0;
  opacity: 0; cursor: grab;
  -webkit-appearance: none; appearance: none; background: none;
}
.dial__input:active { cursor: grabbing; }
.dial__input::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; }
.dial__input::-moz-range-thumb { width: 44px; height: 44px; border: 0; }
.dial__input::-moz-range-track { background: none; }

.dial__ticks {
  display: flex; justify-content: space-between;
  font: 400 9px/1 var(--mono); letter-spacing: .16em;
  color: var(--ink-34);
  border-top: 0;
  margin-top: -6px;
}

.dial__mode {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px;
  font: 400 11px/1.5 var(--mono); letter-spacing: .06em;
  color: var(--ink-52);
}
.dial:focus-within .dial__sun {
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--sea-violet) 24%, transparent),
              0 0 30px color-mix(in srgb, var(--sun-glow) 60%, transparent);
}

/* ── the sea band, where the cursor leaves a ripple ───────────────── */

.sea {
  position: relative;
  z-index: 1;
  height: clamp(96px, 13vh, 150px);
  background: linear-gradient(180deg, var(--sea-2) 0%, var(--sea-1) 100%);
  transition: background 400ms linear;
  overflow: hidden;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 44 C 190 10 400 78 620 50 C 850 20 1030 80 1200 46 L1200 200 L0 200 Z' fill='%23000'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 44 C 190 10 400 78 620 50 C 850 20 1030 80 1200 46 L1200 200 L0 200 Z' fill='%23000'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.ripple {
  position: absolute;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border: 1px solid color-mix(in srgb, var(--shell-cream) 62%, transparent);
  border-radius: 50%;
  pointer-events: none;
  animation: ripple 1150ms var(--ease) forwards;
}
@keyframes ripple {
  from { transform: scale(.25); opacity: .9; }
  to   { transform: scale(5.2); opacity: 0; }
}

/* ═══════════════════════ ARRIVAL ═══════════════════════════════════ */

.arrival { position: relative; z-index: 1; padding-block: var(--band); }

.arrival__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 72px);
  margin-top: clamp(30px, 5vh, 56px);
  max-width: 1000px;
  color: var(--ink-70);
}
.arrival__cols p:first-child::first-letter {
  float: left;
  font: 400 3.4em/.78 var(--serif);
  padding: 6px 12px 0 0;
  color: var(--sea-violet);
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: clamp(40px, 7vh, 80px);
  border-top: 1px solid var(--hair);
}
.facts > div {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 24px 22px 0;
  border-bottom: 1px solid var(--hair-soft);
}
.facts dt {
  font: 500 10px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase;
  color: var(--sunset-coral);
}
.facts dd { color: var(--ink-70); font-size: .95em; }

.pull {
  margin-top: clamp(48px, 8vh, 96px);
  padding-left: clamp(20px, 3vw, 44px);
  border-left: 1px solid var(--sunset-coral);
  max-width: 34ch;
}
.pull p { font: 400 clamp(1.5rem, 2.9vw, 2.5rem)/1.2 var(--serif); letter-spacing: -.015em; }
.pull cite {
  display: block; margin-top: 18px;
  font: 400 10px/1.5 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  font-style: normal; color: var(--ink-52);
}

/* ═══════════════════════ ROOMS ═════════════════════════════════════ */

.roomsec { position: relative; z-index: 1; padding-block: var(--band) 0; }

.plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: clamp(24px, 4vw, 60px);
  align-items: end;
  margin-top: clamp(34px, 6vh, 64px);
}
.plan__draw { position: relative; }
.plan__svg { width: 100%; height: auto; overflow: visible; }
.plan__wall { fill: none; stroke: var(--deep-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plan__wall--thin { stroke-width: .9; opacity: .55; }
.plan__hatch path { stroke: var(--ink-34); stroke-width: 1; fill: none; }
.plan__water path { stroke: var(--sea-violet); stroke-width: 1.2; fill: none; opacity: .55; stroke-linecap: round; }
.plan__hint {
  margin-top: 14px;
  font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-34);
}

.plan__label {
  cursor: pointer;
  transition: opacity .35s var(--ease);
}
.plan__label text { pointer-events: none; }
.plan__label .pl-name {
  font: 400 17px var(--serif); letter-spacing: .01em;
  fill: var(--deep-ink);
}
.plan__label .pl-num {
  font: 400 10px var(--mono); letter-spacing: .2em;
  fill: var(--ink-52);
}
.plan__label .pl-dot { fill: none; stroke: var(--sunset-coral); stroke-width: 1; }
.plan__label:hover .pl-name,
.plan__label.is-on .pl-name { fill: var(--sea-violet); }
.plan__label.is-on .pl-dot { fill: var(--sunset-coral); }
.plan__label.is-on .pl-num { fill: var(--sea-violet); }
.plan__label:focus-visible { outline: 1px dashed var(--sea-violet); outline-offset: 4px; }

/* the stamped room number */
.plan__stamp { text-align: center; }
.stamp {
  width: 100%; max-width: 200px; margin-inline: auto;
  color: var(--sunset-coral);
  opacity: 0;
  transform: rotate(-26deg) scale(1.28);
  transition: opacity .45s var(--ease), transform .7s var(--ease);
}
.stamp.is-in { animation: stamppress .62s var(--ease) both; }
@keyframes stamppress {
  0%   { opacity: 0; transform: rotate(-26deg) scale(1.28); }
  55%  { opacity: .95; transform: rotate(-4deg) scale(.94); }
  100% { opacity: 1; transform: rotate(-7deg) scale(1); }
}
.stamp__svg { width: 100%; height: auto; }
.stamp__ring { font: 500 12px var(--mono); letter-spacing: .28em; fill: currentColor; }
.stamp__num  { font: 400 54px var(--serif); letter-spacing: .02em; fill: currentColor; text-anchor: middle; }
.stamp__sub  { font: 500 10px var(--mono); letter-spacing: .34em; fill: currentColor; text-anchor: middle; }
.plan__stampnote {
  margin-top: 20px;
  font: 400 11px/1.6 var(--mono); letter-spacing: .05em;
  color: var(--ink-52);
}

/* the rail: rooms open sideways, never downward */
.railwrap { position: relative; z-index: 1; margin-top: clamp(40px, 7vh, 84px); }
.rooms {
  display: flex; align-items: stretch;
  height: clamp(340px, 44vh, 430px);
  padding-inline: var(--gut);
  gap: 3px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
}
.room {
  position: relative;
  flex: 0 0 clamp(74px, 7vw, 96px);
  display: flex;
  border: 1px solid var(--hair);
  border-bottom: 0;
  background: color-mix(in srgb, var(--shell-cream) 62%, transparent);
  text-align: left; font: inherit; color: inherit;
  padding: 0; margin: 0; cursor: pointer;
  overflow: hidden;
  transition: flex-grow .78s var(--ease), background-color .5s var(--ease),
              border-color .5s var(--ease);
}
.room:hover { background: color-mix(in srgb, var(--dawn-lavender) 20%, var(--shell-cream)); }
.room.is-open {
  flex-grow: 9;
  background: var(--shell-cream);
  border-color: var(--ink-34);
}

.room__tag {
  position: absolute; inset: 20px auto 20px 0;
  width: 100%;
  display: grid; justify-items: center; align-content: space-between; gap: 18px;
  transition: opacity .35s var(--ease);
}
.room__tag b {
  font: 500 11px/1 var(--mono); letter-spacing: .2em;
  writing-mode: vertical-rl; text-orientation: mixed;
  transform: rotate(180deg);
  white-space: nowrap;
}
.room__tag i {
  font: 400 13px/1 var(--serif); font-style: italic;
  writing-mode: vertical-rl; transform: rotate(180deg);
  color: var(--ink-52); white-space: nowrap;
}
.room.is-open .room__tag { opacity: 0; }

.room__body {
  padding: 26px clamp(20px, 2.4vw, 34px);
  min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 20px;
  opacity: 0; transform: translateX(14px);
  transition: opacity .45s var(--ease) .12s, transform .6s var(--ease) .12s;
  pointer-events: none;
}
.room.is-open .room__body { opacity: 1; transform: none; pointer-events: auto; }

.room__top { display: flex; align-items: baseline; gap: 14px; }
.room__top h3 { font: 400 clamp(1.6rem, 3vw, 2.5rem)/1 var(--serif); letter-spacing: -.02em; }
.room__top span { font: 400 10px/1 var(--mono); letter-spacing: .24em; color: var(--sunset-coral); }
.room__line { color: var(--ink-70); max-width: 40ch; font-style: italic; font-family: var(--serif); font-size: 1.06em; }
.room__specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px 22px;
  border-top: 1px solid var(--hair-soft);
  padding-top: 18px;
}
.room__specs div { display: flex; flex-direction: column; gap: 3px; }
.room__specs dt { font: 500 9px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-34); }
.room__specs dd { font-size: .92em; color: var(--ink-70); }
.room__rate {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--hair-soft); padding-top: 16px;
}
.room__rate b { font: 400 1.1rem var(--serif); }
.room__rate span { font: 400 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-52); }

.rail__hint {
  margin: 18px var(--gut) 0;
  font: 400 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-34);
}

/* ═══════════════════════ THE HOUSE ═════════════════════════════════ */

.thehouse {
  position: relative; z-index: 1;
  padding-block: var(--band);
  background: color-mix(in srgb, var(--dawn-lavender) 13%, var(--shell-cream));
  margin-top: var(--band);
}
.thehouse__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: clamp(34px, 6vh, 66px);
  border-top: 1px solid var(--hair);
}
.card {
  padding: 30px clamp(20px, 2.4vw, 36px) 34px 0;
  border-bottom: 1px solid var(--hair-soft);
}
.card h3 {
  font: 400 clamp(1.35rem, 2.2vw, 1.9rem)/1.1 var(--serif); letter-spacing: -.015em;
  margin-bottom: 12px;
}
.card p { color: var(--ink-70); font-size: .95em; max-width: 34ch; }

/* ═══════════════════════ AROUND SOLUNA ════════════════════════════ */

.around { position: relative; z-index: 1; padding-block: var(--band); }
.around__grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(34px, 6vh, 66px);
  align-items: start;
}

.coast {
  position: relative;
  border: 1px solid var(--hair);
  background: color-mix(in srgb, var(--pale-sky) 40%, var(--shell-cream));
  aspect-ratio: 800 / 470;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.coast.is-drag { cursor: grabbing; }
.coast:focus-visible { outline: 2px solid var(--sea-violet); outline-offset: 3px; }
.coast__svg { width: 100%; height: 100%; }
.coast__sea { fill: color-mix(in srgb, var(--pale-sky) 70%, var(--shell-cream)); }
.coast__inner { transition: transform .5s var(--ease); }
.coast.is-drag .coast__inner { transition: none; }
.coast__land { fill: color-mix(in srgb, var(--dawn-lavender) 44%, var(--shell-cream)); }
.coast__shallow { fill: none; stroke: color-mix(in srgb, var(--sea-violet) 34%, transparent); stroke-width: 6; }
.coast__roads path { fill: none; stroke: color-mix(in srgb, var(--deep-ink) 26%, transparent); stroke-width: 1.2; stroke-dasharray: 5 4; }
.coast__town rect { fill: color-mix(in srgb, var(--sunset-coral) 52%, transparent); }
.coast__hills path { fill: color-mix(in srgb, var(--sea-violet) 26%, var(--shell-cream)); }
.coast__trees circle { fill: color-mix(in srgb, var(--sea-violet) 44%, transparent); }
.coast__mark circle { fill: none; stroke: var(--deep-ink); stroke-width: 1.2; }
.coast__mark text {
  font: 500 10px var(--mono); letter-spacing: .18em; fill: var(--deep-ink);
}
.coast__mark--home circle { stroke: var(--sunset-coral); stroke-width: 1.6; }
.coast__mark--home text { fill: var(--sunset-coral); }
.coast__markdot { fill: var(--sunset-coral); }
.coast__gulls path { stroke: var(--ink-34); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.coast__compass path { fill: var(--deep-ink); }
.coast__compassring { fill: none; stroke: var(--ink-34); stroke-width: 1; }
.coast__compass text { font: 500 10px var(--mono); fill: var(--ink-52); letter-spacing: .1em; }
.coast__grid path { stroke: color-mix(in srgb, var(--deep-ink) 7%, transparent); stroke-width: 1; }
.coast__hint {
  position: absolute; left: 16px; bottom: 14px;
  display: flex; align-items: center; gap: 9px;
  font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-52);
  background: color-mix(in srgb, var(--shell-cream) 78%, transparent);
  padding: 8px 12px; border-radius: 999px;
}
.coast__arrow { animation: nudge 2.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }

.around__list { border-top: 1px solid var(--hair); }
.around__list li {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 4px 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair-soft);
}
.around__list .mono { grid-row: span 2; padding-top: 4px; color: var(--sunset-coral); }
.around__list b { font: 400 1.22rem/1.15 var(--serif); letter-spacing: -.01em; }
.around__list i { font-style: normal; color: var(--ink-70); font-size: .92em; }

/* ═══════════════════════ JOURNAL ═══════════════════════════════════ */

.journal { position: relative; z-index: 1; padding-block: 0 var(--band); }
.journal__list { margin-top: clamp(30px, 5vh, 56px); border-top: 1px solid var(--hair); }
.entry {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 40px;
  gap: 6px clamp(16px, 3vw, 44px);
  align-items: start;
  padding: clamp(24px, 3.4vh, 38px) 0;
  border-bottom: 1px solid var(--hair-soft);
  text-decoration: none;
  transition: padding-left .5s var(--ease), background-color .5s var(--ease);
}
.entry:hover { padding-left: 18px; background: color-mix(in srgb, var(--dawn-lavender) 12%, transparent); }
.entry .mono { grid-row: span 2; padding-top: 8px; }
.entry h3 {
  font: 400 clamp(1.5rem, 2.9vw, 2.35rem)/1.12 var(--serif); letter-spacing: -.018em;
  transition: color .35s var(--ease);
}
.entry:hover h3 { color: var(--sea-violet); }
.entry p { color: var(--ink-70); max-width: 62ch; margin-top: 6px; font-size: .96em; }
.entry__more {
  grid-row: span 2; justify-self: end;
  font: 400 9px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-34); padding-top: 10px;
  transition: color .35s, transform .35s var(--ease);
}
.entry:hover .entry__more { color: var(--sunset-coral); transform: translateX(4px); }

/* ═══════════════════════ BOOKING ═══════════════════════════════════ */

.booking {
  position: relative; z-index: 1;
  padding-block: var(--band);
  background: color-mix(in srgb, var(--pale-sky) 30%, var(--shell-cream));
  border-top: 1px solid var(--hair-soft);
}
.booking__intro { max-width: 48ch; margin-top: 22px; color: var(--ink-70); }
.booking__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 84px);
  margin-top: clamp(36px, 6vh, 70px);
  align-items: start;
}

.cal { border: 1px solid var(--hair); padding: clamp(18px, 2.4vw, 30px); background: var(--shell-cream); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cal__month { font: 400 1.4rem/1 var(--serif); letter-spacing: -.01em; }
.cal__modes { display: flex; gap: 8px; }
.cal__dows {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-top: 22px; padding-bottom: 8px;
  border-bottom: 1px solid var(--hair-soft);
  font: 500 9px/1 var(--mono); letter-spacing: .18em; color: var(--ink-34);
}
.cal__dows span { text-align: center; }

.cal__grid {
  position: relative;
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-top: 8px;
}
.day {
  position: relative; z-index: 1;
  aspect-ratio: 1;
  display: grid; place-items: center;
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  font: 400 clamp(12px, 1.3vw, 14px)/1 var(--mono);
  color: var(--deep-ink);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.day--pad { visibility: hidden; cursor: default; }
.day--full { color: var(--ink-34); text-decoration: line-through; cursor: not-allowed; }
.day:not(.day--full):hover { background: color-mix(in srgb, var(--dawn-lavender) 40%, transparent); }
.day.is-arrive, .day.is-depart { background: var(--deep-ink); color: var(--shell-cream); }
.day.is-between { background: color-mix(in srgb, var(--sunset-coral) 26%, transparent); }
.day.is-pick { background: var(--sea-violet); color: var(--shell-cream); }

.cal__arc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.cal__arc path { stroke: var(--sunset-coral); stroke-width: 1.2; stroke-dasharray: 3 4; }

.cal__marker {
  position: absolute; z-index: 3; pointer-events: none;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  opacity: 0;
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.cal__marker.is-on { opacity: 1; }
.cal__marker svg { width: 100%; height: 100%; }
.cal__marker--sun svg { fill: var(--sunset-coral); }
.cal__marker--moon svg { fill: var(--sea-violet); }
.cal__marker--spin { animation: flip .55s var(--ease); }
@keyframes flip { from { transform: rotate(-180deg) scale(.4); } to { transform: none; } }

.cal__legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair-soft);
  font: 400 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-52);
}
.cal__legend span { display: flex; align-items: center; gap: 7px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--deep-ink); }
.dot--last { background: var(--sunset-coral); }
.dot--full { background: color-mix(in srgb, var(--deep-ink) 22%, transparent); }

.req { display: flex; flex-direction: column; gap: 20px; }
.req__summary {
  font: 400 clamp(1.25rem, 2.1vw, 1.7rem)/1.25 var(--serif);
  letter-spacing: -.015em; color: var(--deep-ink);
  min-height: 2.5em;
}
.req__line { display: flex; flex-direction: column; gap: 8px; }
.req__line input {
  border: 0; border-bottom: 1px solid var(--ink-34);
  background: none; padding: 8px 0;
  font: 400 15px var(--grotesk); color: var(--deep-ink);
  border-radius: 0;
  transition: border-color .35s var(--ease);
}
.req__line input:focus { outline: none; border-bottom-color: var(--sea-violet); }
.req__note { font: 400 11px/1.6 var(--mono); letter-spacing: .06em; color: var(--ink-52); }
.req__note.is-sent { color: var(--sea-violet); }

/* ═══════════════════════ FOOT ══════════════════════════════════════ */

.foot {
  position: relative; z-index: 1;
  padding-block: clamp(50px, 8vh, 90px) 40px;
  background: var(--deep-ink);
  color: color-mix(in srgb, var(--shell-cream) 72%, var(--deep-ink));
}
.foot__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
}
.foot__mark {
  font: 400 clamp(1.9rem, 3.6vw, 3rem)/1 var(--serif);
  letter-spacing: -.02em; color: var(--shell-cream);
}
.foot .label { color: color-mix(in srgb, var(--shell-cream) 44%, var(--deep-ink)); margin-bottom: 14px; }
.coords--foot { color: color-mix(in srgb, var(--shell-cream) 46%, var(--deep-ink)); margin-top: 14px; }
.foot__addr { margin-top: 14px; font-size: .9em; line-height: 1.7; }
.foot__nav { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.foot__nav a {
  text-decoration: none; font-size: .92em;
  transition: color .3s;
}
.foot__nav a:hover { color: var(--sunset-coral); }
.foot__contact p + p { margin-top: 12px; }
.foot__mail {
  display: inline-block;
  font: 400 clamp(1.05rem, 1.7vw, 1.35rem) var(--serif);
  color: var(--shell-cream); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--sunset-coral) 50%, transparent);
  transition: border-color .3s, color .3s;
}
.foot__mail:hover { color: var(--sunset-coral); border-color: var(--sunset-coral); }
.foot__made {
  font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--shell-cream) 34%, var(--deep-ink)) !important;
}

/* ═══════════════════════ REVEAL ════════════════════════════════════ */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ═══════════════════════ RESPONSIVE ════════════════════════════════ */

@media (max-width: 1080px) {
  .plan { grid-template-columns: 1fr; align-items: start; }
  .plan__stamp { display: flex; align-items: center; gap: 24px; text-align: left; }
  .stamp { max-width: 130px; margin: 0; flex: 0 0 auto; }
  .plan__stampnote { margin-top: 0; max-width: 26ch; }
  .around__grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__contact { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .topbar__nav {
    position: absolute; top: 100%; left: var(--gut); right: var(--gut);
    flex-direction: column; gap: 0;
    background: var(--shell-cream);
    border: 1px solid var(--hair);
    padding: 6px 0;
    display: none;
  }
  .topbar__nav.is-open { display: flex; }
  .topbar__nav a { padding: 15px 20px; font-size: 11px; }
  .topbar__nav a::after { display: none; }
  .topbar__cta { display: none; }
  .navtoggle { display: inline-flex; }

  /* no scroll-driven sunrise on small screens — the slider takes over */
  .hero { height: auto; }
  .hero__sticky { position: static; height: auto; overflow: visible; }
  .hero__scene { position: absolute; inset: 0 0 auto 0; height: 54svh; }
  .orbwrap { width: clamp(220px, 62vw, 440px); }
  .plate {
    left: 50%; right: auto; bottom: auto; top: 12%;
    width: clamp(190px, 56vw, 300px);
    translate: -50% 0;
  }
  .hero__stage {
    height: auto; align-content: start;
    padding-top: calc(54svh + 18px);
    padding-bottom: clamp(40px, 8vh, 70px);
  }
  .hero__cue { display: none; }
  .hero { padding-bottom: clamp(30px, 6vh, 60px); }

  .arrival__cols { grid-template-columns: 1fr; }
  .booking__grid { grid-template-columns: 1fr; }
  .entry { grid-template-columns: 92px minmax(0, 1fr); }
  .entry__more { display: none; }
  .foot__grid { grid-template-columns: 1fr; }
  .rail__hint { margin-inline: var(--gut); }
}

@media (max-width: 620px) {
  .display { max-width: 12ch; }
  .dial__track { height: 92px; }
  .rooms { height: 400px; }
  .room { flex-basis: 66px; }
  .room.is-open { flex-grow: 1; }
  .cal__modes { width: 100%; }
  .chip { flex: 1; }
  .around__list li { grid-template-columns: 54px 1fr; }
  .entry { grid-template-columns: 1fr; gap: 8px; }
  .entry .mono { padding-top: 0; }
}

/* ═══════════════════════ REDUCED MOTION ════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero { height: auto; }
  .hero__sticky { position: static; height: auto; overflow: visible; }
  .hero__scene { position: absolute; inset: 0 0 auto 0; height: 54svh; }
  .hero__stage { height: auto; padding-top: calc(54svh + 18px); padding-bottom: 60px; }
  .cloud__puff { animation: none; }
  .coast__arrow { animation: none; }
  .ripple { display: none; }
}