/* Lyngen Aurora Resort. Loaded after /engine/scrollcraft.css; overrides its tokens and
   adds the site's own markup styles. One ground (night), one accent hue. The day sky and its
   switch were removed on 2026-10-22. */

:root {
  --sc-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --sc-font-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono: "Geist", system-ui, sans-serif;
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px; --sc-r-pill: 2px;
  --sc-maxw: 85rem;
  --sc-section: clamp(4rem, 9vw, 9rem);
  --sc-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --sc-measure: 46ch;
  --bar-h: 72px;
  --sky-t: 600ms;
  /* One left edge for everything: the bar, the hero copy, the wrap, the rail and the plate all start here. */
  --edge: calc(max(0px, (100vw - var(--sc-maxw)) / 2) + var(--sc-gutter));

  /* night, the one ground */
  --sc-canvas: #061013;
  --sc-surface: #0C1A1E;
  --sc-ink: #ECF3F1;
  --sc-ink-soft: #93A9A6;
  --sc-accent: #7BE3B0;
  --sc-accent-ink: #061013;
  --sc-shadow-color: 190 40% 3%;
  --grain: 0.045;
  --map-filter: invert(1) hue-rotate(180deg) brightness(0.72) contrast(0.9) saturate(0.12);
  color-scheme: dark;
}

html { background: var(--sc-canvas); }
body { background: var(--sc-canvas); color: var(--sc-ink); }
.sc-grain { opacity: var(--grain); }

/* ------------------------------------------------------------- type ---- */
.sc-display { font-weight: 300; font-variation-settings: "SOFT" 30, "WONK" 0; }
.sc-display--lg { line-height: 0.98; letter-spacing: -0.03em; }
/* Three display sizes on the site: XL (hero), LG (act headings), MD (object titles). MD is the ramp's xl step. */
.sc-display--md { font-size: var(--sc-t-xl); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.sc-display em { font-style: italic; font-weight: 300; }
.sc-body { color: var(--sc-ink); }
.muted { color: var(--sc-ink-soft); }
.lede { font-size: var(--sc-t-lg); line-height: 1.45; font-weight: 300; letter-spacing: -0.01em; max-width: 34rem; text-wrap: pretty; margin: 0; }
.label {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 500; line-height: 1.2;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.nums { font-variant-numeric: tabular-nums; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

/* ------------------------------------------------------------ controls -- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.95rem 1.75rem; border-radius: var(--sc-r-sm);
  background: var(--sc-ink); color: var(--sc-canvas);
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 500; line-height: 1.2;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 120ms var(--sc-ease-out), background-color 150ms var(--sc-ease-out), border-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out);
}
.btn:hover { background: color-mix(in oklab, var(--sc-ink) 86%, var(--sc-accent)); }
.btn:active { transform: scale(0.97); }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: var(--sc-hairline-strong); }
.btn--ghost:hover { background: transparent; border-color: var(--sc-ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; pointer-events: none; }
.arrow {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink); text-decoration: none; text-underline-offset: 0.4em; text-decoration-color: var(--sc-accent);
}
.arrow::after { content: "\2197"; color: var(--sc-accent); font-size: 1.1em; transition: transform 150ms var(--sc-ease-out); }
.arrow:hover { text-decoration: underline; }
.arrow:hover::after { transform: translate(2px, -2px); }
.arrow--quiet::after { color: var(--sc-ink-soft); }
.arrow--down::after { content: "\2193"; }
.arrow--down:hover::after { transform: translateY(2px); }
.skip { position: absolute; left: var(--sc-gutter); top: -6rem; z-index: 100; background: var(--sc-ink); color: var(--sc-canvas); padding: 0.6em 1em; line-height: 1.2; }
.skip:focus { top: 0.75rem; }

/* ---------------------------------------------------------------- bar --- */
.bar {
  position: fixed; inset: 0 0 auto 0; height: var(--bar-h); z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-6);
  padding-inline: var(--edge);
  border-bottom: 1px solid transparent;
  transition: background-color 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out), backdrop-filter 240ms;
}
.bar.is-scrolled { background: color-mix(in oklab, var(--sc-surface) 84%, transparent); backdrop-filter: blur(14px); border-color: var(--sc-hairline); }
.bar__mark { display: flex; align-items: center; text-decoration: none; color: inherit; }
.bar__mark img { height: 32px; width: auto; }
.bar__links { display: flex; gap: var(--sc-6); list-style: none; margin: 0; padding: 0; }
.bar__links a { font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink); text-decoration: none; text-underline-offset: 0.5em; text-decoration-color: var(--sc-accent); white-space: nowrap; }
/* Five links: tighter between 900 and 1100 so they hold one line beside the button. */
@media (max-width: 1099px) { .bar__links { gap: var(--sc-4); } .bar__links a { letter-spacing: 0.1em; } }
.bar__links a:hover, .bar__links a[aria-current="page"] { text-decoration: underline; }
.bar__right { display: flex; align-items: center; gap: var(--sc-4); }
.burger { display: none; width: 40px; height: 40px; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); background: transparent; color: var(--sc-ink); place-items: center; cursor: pointer; padding: 0; }
.burger svg { width: 18px; height: 18px; }
.sheet {
  position: fixed; inset: 0; z-index: 59; background: var(--sc-canvas);
  display: none; flex-direction: column; justify-content: space-between;
  padding: calc(var(--bar-h) + var(--sc-6)) var(--sc-gutter) var(--sc-7);
}
.sheet[data-open] { display: flex; }
.sheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-4); }
.sheet ul a { font-family: var(--sc-font-display); font-weight: 300; font-size: var(--sc-t-2xl); color: var(--sc-ink); text-decoration: none; line-height: 1.1; }
.sheet__foot { display: grid; gap: var(--sc-4); }
@media (max-width: 899px) {
  .bar__links { display: none; }
  .bar .btn { padding: 0.75rem 1rem; letter-spacing: 0.1em; }
  .bar__right { gap: var(--sc-2); }
  .burger { display: grid; }
}
@media (max-width: 380px) {
  .bar .btn { display: none; }
}
html[data-menu] { overflow: hidden; }

/* -------------------------------------------------------------- media --- */
.img, .pair img, .cover img { width: 100%; height: auto; }
.pair { position: relative; overflow: hidden; margin: 0; aspect-ratio: 3 / 2; background: var(--sc-surface); border-radius: var(--sc-r-sm); }
.pair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--sky-t) var(--sc-ease-out); }
.cover { position: relative; overflow: hidden; margin: 0; border-radius: var(--sc-r-sm); background: var(--sc-surface); }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
figcaption { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin-top: var(--sc-3); }
.vslot { position: relative; overflow: hidden; margin: 0; border-radius: var(--sc-r-sm); background: var(--sc-surface); }
.vslot video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A real film keeps its own frame: the captions sit in the lower third, so no slot may crop it. */
.film-band .vslot.vslot--film, .route .vslot.vslot--film, .table .vslot.vslot--film, .here__film .vslot.vslot--film { aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------- schema --- */
.schema { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5em; row-gap: 0.55em; margin: 0; padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }
.schema dt { font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: 0.2em; }
.schema dd { margin: 0; color: var(--sc-ink); font-size: var(--sc-t-sm); }

/* ------------------------------------------------------------- layout --- */
.wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.section { padding-block: var(--sc-section); position: relative; }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-6); row-gap: var(--sc-8); }
.page-head { padding-top: calc(var(--bar-h) + var(--sc-9)); padding-bottom: var(--sc-8); }
/* In-page anchors (the rail's Read more, #availability, #getting-here) land below the fixed bar, not under it. */
main [id] { scroll-margin-top: calc(var(--bar-h) + var(--sc-5)); }
.page-head .lede { margin-top: var(--sc-5); }
.stack > * + * { margin-top: var(--sc-4); }
.stack > :is(h2, h3) { margin-top: var(--sc-7); }
.stack > :is(h2, h3):first-child { margin-top: 0; }
.rule { height: 1px; background: var(--sc-hairline); border: 0; margin: 0; }
.cta-row { display: flex; gap: var(--sc-3); flex-wrap: wrap; align-items: center; }
.band { background: var(--sc-surface); border-block: 1px solid var(--sc-hairline); }

/* --------------------------------------------------------------- hero --- */
.hero .sc-stage { background: var(--sc-canvas); }
.hero__bed { position: absolute; inset: -8% 0; }
.hero__media { position: absolute; inset: 0; transform: translate(calc((var(--sc-mx, 0.5) - 0.5) * -14px), calc((var(--sc-my, 0.5) - 0.5) * -10px)); transition: transform 600ms var(--sc-ease-out); }
.hero__media :is(video, img) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--sky-t) var(--sc-ease-out); }
.hero [data-sc-spotlight]::after { display: none; }
/* The hero is a film frame: light type on a dark corner scrim. The floor fades into the page ground. */
.hero .sc-scrim { --sc-canvas: #061013; background: linear-gradient(to top right, rgba(6, 16, 19, 0.97) 0%, rgba(6, 16, 19, 0.93) 30%, rgba(6, 16, 19, 0.8) 54%, transparent 80%); }
/* The film cuts between bright and dark frames, so the bar gets a dark top band and reads light
   until the page scrolls or the menu opens. */
.hero__top { position: absolute; inset: 0 0 auto 0; height: 26%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(6, 16, 19, 0.62) 0%, rgba(6, 16, 19, 0.26) 55%, transparent 100%); }
html:not([data-menu]) body:has(.hero) .bar:not(.is-scrolled) { --sc-canvas: #061013; --sc-ink: #ECF3F1; --sc-ink-soft: #93A9A6; --sc-accent: #7BE3B0; --sc-hairline-strong: rgba(236, 243, 241, 0.35); }
.hero .sc-copy, .hero .sc-copy .sc-display, .hero__sub { color: #ECF3F1; }
.hero .btn { background: #ECF3F1; color: #061013; }
.hero .btn:hover { background: color-mix(in oklab, #ECF3F1 86%, #7BE3B0); }
.hero .btn--ghost { background: transparent; color: #ECF3F1; border-color: rgba(236, 243, 241, 0.35); }
.hero .btn--ghost:hover { background: transparent; border-color: #ECF3F1; }
.hero__floor { position: absolute; inset: auto 0 0 0; height: 34%; z-index: 1; pointer-events: none; background: linear-gradient(to top, var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 60%, transparent) 45%, transparent 100%); }
.hero .sc-copy--lead { left: var(--edge); bottom: clamp(3.5rem, 13vh, 9rem); max-width: min(54rem, 84vw); }
.hero__sub { margin-top: var(--sc-5); max-width: 32rem; font-size: var(--sc-t-lg); line-height: 1.45; font-weight: 300; text-wrap: pretty; }
.hero__cta { display: flex; gap: var(--sc-3); margin-top: var(--sc-6); flex-wrap: wrap; }
@media (max-width: 860px) {
  /* The lead corner becomes a full-width block on a phone, so the scrim becomes a band. */
  .hero .sc-scrim--lead { background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 86%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 50%, transparent) 52%,
    transparent 72%); }
  .hero__floor { height: 42%; }
}
@media (max-width: 700px) {
  .hero h1 { font-size: var(--sc-t-2xl); }
  .hero .sc-copy--lead { bottom: clamp(4.5rem, 12vh, 7rem); }
  .hero__sub { font-size: var(--sc-t-base); }
}

/* -------------------------------------------------------------- cabin --- */
.cabin { position: relative; z-index: 2; padding-block: var(--sc-8) var(--sc-9); }
.cabin__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-6); row-gap: var(--sc-9); }
/* Row one: the heading leads, the kitchen answers it on the right. Row two: the big photograph and the facts. */
.cabin__head { grid-column: 1 / 7; align-self: end; order: 1; }
.cabin__kitchen { grid-column: 8 / 13; aspect-ratio: 4 / 3; order: 2; }
.cabin__head .lede { margin-top: var(--sc-5); }
.cabin__photo { grid-column: 1 / 8; aspect-ratio: 6 / 5; order: 3; }
.cabin__copy { grid-column: 8 / 13; align-self: end; order: 4; }
.cabin__copy .schema { margin-top: var(--sc-6); }
.cabin__copy .arrow { margin-top: var(--sc-6); }
@media (max-width: 899px) {
  .cabin { padding-top: var(--sc-7); }
  .cabin__grid { row-gap: var(--sc-7); }
  .cabin__head { order: 1; padding-top: 0; }
  .cabin__kitchen { order: 2; grid-column: 1 / 8; margin-top: 0; box-shadow: none; }
  .hero__floor { height: 26%; }
  .cabin__photo { order: 3; }
  .cabin__copy { order: 4; }
  .cabin__head, .cabin__photo, .cabin__copy { grid-column: 1 / -1; }
  .cabin__photo { aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------------- peak --- */
.peak { --peak-p: clamp(0, calc((var(--sc-p, 0) - 0.14) / 0.5), 1); }
.peak .sc-stage { background: color-mix(in oklab, #061013 82%, #0b1a1e); }
.peak__media { position: absolute; inset: 0; }
.peak__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Same film-frame corner scrim as the hero: the lead line sits over the bright water in the left glass panel. */
.peak__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, rgba(6, 16, 19, 0.95) 0%, rgba(6, 16, 19, 0.75) 30%, rgba(6, 16, 19, 0.3) 48%, transparent 62%); }
.peak__media .for-night { opacity: var(--peak-p); }
.peak__dusk { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: calc(0.35 + var(--peak-p) * 0.65);
  background: linear-gradient(to top, color-mix(in oklab, #03080a 88%, transparent) 0%, color-mix(in oklab, #03080a 45%, transparent) 34%, transparent 62%); }
.peak .sc-copy { max-width: min(46rem, 84vw); color: #ECF3F1; }
.peak .sc-copy--lead { left: var(--edge); }
.peak .sc-copy--trail { text-align: right; right: var(--edge); }
.peak .sc-copy .sc-display { color: #ECF3F1; text-wrap: balance; }

/* --------------------------------------------------------------- rail --- */
/* The rail sits in the space under the bar with the same margin above the images and below the tallest
   card. The image row takes what the tallest card's text leaves (subgrid), so every image has the same
   height. The cap keeps images from growing tall on very tall screens. */
.rail-act { --rail-gap: var(--sc-6); }
.rail-act .sc-stage { display: flex; align-items: center; padding-top: var(--bar-h); background: var(--sc-canvas); }
/* Items leave through the edges; a soft mask stops half a word standing at the frame edge. */
.rail-act .sc-stage::before, .rail-act .sc-stage::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(2rem, 6vw, 6rem); z-index: 5; pointer-events: none; }
.rail-act .sc-stage::before { left: 0; background: linear-gradient(to right, var(--sc-canvas) 30%, transparent); }
.rail-act .sc-stage::after { right: 0; background: linear-gradient(to left, var(--sc-canvas) 30%, transparent); }
.rail-head { padding-block: var(--sc-9) var(--sc-6); }
.rail-head .lede { margin-top: var(--sc-4); }
.section--after-pin { padding-top: var(--sc-6); }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(17rem, 26vw, 23rem);
  grid-template-rows: minmax(0, 1fr) auto; column-gap: var(--sc-6);
  height: min(calc(100svh - var(--bar-h) - 2 * var(--rail-gap)), 58rem);
  padding-inline: calc(var(--edge) + clamp(2rem, 6vw, 6rem));
}
.rail__item .arrow { margin-top: var(--sc-4); }
.rail__lead .lede { margin-top: var(--sc-5); }
.rail__item { grid-row: span 2; display: grid; grid-template-rows: subgrid; order: var(--o-night); --i: var(--o-night); }
.rail__item .cover { height: 100%; min-height: 0; }
.rail__item h3 { margin-top: var(--sc-5); }
.rail__item p { margin-top: var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.rail__item .schema { margin-top: var(--sc-4); row-gap: 0.35em; }
.rail__close { grid-row: 1 / -1; order: 99; align-self: center; border-left: 1px solid var(--sc-hairline); padding-left: var(--sc-6); margin-right: var(--sc-gutter); }
.rail__close .arrow { margin-top: var(--sc-5); }
@media (prefers-reduced-motion: no-preference) {
  .rail__item { opacity: clamp(0.55, calc(var(--sc-p, 0) * 9 - var(--i) + 1.6), 1); }
}
/* On a short screen the two-line summary goes, so the images keep a useful height; the facts stay. */
@media (max-height: 820px) {
  .rail__text > p { display: none; }
}
@media (max-width: 899px) {
  .rail-act { --rail-gap: var(--sc-5); }
  .rail { grid-auto-columns: 72vw; }
  .rail__text > p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-act .sc-stage { display: block; }
  .rail { display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); grid-template-rows: none; height: auto; gap: var(--sc-7); padding-block: var(--sc-8); }
  .rail__item { grid-row: auto; display: flex; flex-direction: column; order: var(--o-night); }
  .rail__item .cover { height: auto; aspect-ratio: 4 / 5; }
  .rail__close { grid-row: auto; }
}

/* ---------------------------------------------------------- getting here */
.here__grid { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--sc-9); row-gap: var(--sc-8); align-items: start; }
.dist { display: grid; margin: 0; border-top: 1px solid var(--sc-hairline); }
.dist__row { display: grid; grid-template-columns: 1fr auto auto; column-gap: 1.5em; row-gap: 0.15em; padding-block: 0.8em; border-bottom: 1px solid var(--sc-hairline); }
.dist__row > * { margin: 0; }
.dist dt { color: var(--sc-ink); }
.dist dd { color: var(--sc-ink); font-variant-numeric: tabular-nums; text-align: right; }
.dist .note { grid-column: 1 / -1; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.here__film .film-band__cap { margin-top: var(--sc-3); }
/* The table: the food film on the left, the heading and the copy at its foot on the right. */
.table { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--sc-9); row-gap: var(--sc-6); align-items: end; }
.founders { margin-top: var(--sc-10); }
.founders .cover { aspect-ratio: 21 / 9; }
.founders figcaption { display: grid; grid-template-columns: 1fr auto; gap: var(--sc-6); align-items: baseline; margin-top: var(--sc-4); font-size: var(--sc-t-base); color: var(--sc-ink); }
.founders figcaption span { max-width: 56ch; }
@media (max-width: 899px) {
  .here__grid, .table { grid-template-columns: 1fr; }
  .founders .cover { aspect-ratio: 4 / 3; }
  .founders figcaption { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- close --- */
/* The closing frame: the photograph at the top, the booking widget where it fades into the ground,
   the footer under both. A plain section, not pinned: the widget needs room to scroll. */
.close { position: relative; background: var(--sc-canvas); }
.close__bg { position: absolute; inset: 0 0 auto 0; height: min(100%, 130svh); }
.close__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* The photograph holds the top; density builds towards the widget, which sits on the ground. */
.close__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom,
  color-mix(in oklab, var(--sc-canvas) 40%, transparent) 0%, transparent 12%,
  color-mix(in oklab, var(--sc-canvas) 55%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 46%, var(--sc-canvas) 62%); }
.close__inner { position: relative; z-index: 2; padding-top: clamp(10rem, 40svh, 22rem); }

/* -------------------------------------------------------------- plate --- */
.plate { position: relative; z-index: 2; border-top: 1px solid var(--sc-hairline); padding: var(--sc-7) var(--edge) var(--sc-6); background: color-mix(in oklab, var(--sc-canvas) 90%, transparent); }
.plate__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-6); row-gap: var(--sc-6); }
.plate__brand { grid-column: 1 / 6; display: grid; gap: var(--sc-4); align-content: start; }
.plate__brand img { height: 28px; width: auto; }
.plate__contact { grid-column: 6 / 9; }
.plate__links { grid-column: 9 / 13; justify-self: end; }
.plate address { font-style: normal; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; }
.plate a { color: var(--sc-ink); text-decoration: none; }
.plate a:hover { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--sc-accent); }
.plate .plate__by { color: var(--sc-ink-soft); margin-left: auto; }
.plate ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5em; font-size: var(--sc-t-sm); }
.plate__links ul { display: flex; flex-wrap: wrap; gap: 0.5em 1.5em; }
.plate__links a { font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.plate__small { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
@media (max-width: 899px) {
  .plate__brand, .plate__contact, .plate__links { grid-column: 1 / -1; justify-self: start; }
  .plate__coords { display: none; }
}

/* ----------------------------------------------------------- objects ---- */
.index { display: flex; gap: var(--sc-4) var(--sc-6); flex-wrap: wrap; padding-block: var(--sc-4); border-block: 1px solid var(--sc-hairline); }
@media (max-width: 899px) {
  .index { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; margin-inline: calc(-1 * var(--sc-gutter)); padding-inline: var(--sc-gutter); mask-image: linear-gradient(to right, black 82%, transparent); -webkit-mask-image: linear-gradient(to right, black 82%, transparent); }
  .index::-webkit-scrollbar { display: none; }
}
.season--continued { padding-top: 0; }
.season--continued .object:first-child { border-top: 0; }
.index a { color: var(--sc-ink); text-decoration: none; }
.index a:hover { text-decoration: underline; text-underline-offset: 0.4em; text-decoration-color: var(--sc-accent); }
.credit { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-top: var(--sc-2); }
.cover img { object-position: var(--pos, 50% 50%); }
/* The featured object */
.feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-6); row-gap: var(--sc-7); padding-block: var(--sc-6) var(--sc-9); }
.feature__photo { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.feature__text { grid-column: 1 / 8; }
.feature__text .label { margin-bottom: var(--sc-4); }
.feature__text .stack { margin-top: var(--sc-5); }
.feature__facts { grid-column: 9 / 13; align-self: start; padding-top: 0; }
.feature__facts .arrow { margin-top: var(--sc-6); }
/* Seasons and objects */
.season { padding-block: var(--sc-6) 0; }
.season__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-6); padding-bottom: var(--sc-3); border-bottom: 1px solid var(--sc-hairline); }
.season__head h2 { color: var(--sc-ink); }
.object { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-6); row-gap: var(--sc-6); padding-block: var(--sc-9); border-bottom: 1px solid var(--sc-hairline); }
.object .cover { aspect-ratio: 3 / 2; }
.object[data-shape="a"] .cover { grid-column: 1 / 7; }
.object[data-shape="a"] .object__text { grid-column: 8 / 13; align-self: center; }
.object[data-shape="b"] .cover { grid-column: 7 / 13; order: 2; }
.object[data-shape="b"] .object__text { grid-column: 1 / 6; align-self: center; }
.object[data-shape="a"] .cover, .object[data-shape="b"] .cover { aspect-ratio: 4 / 3; }
.object[data-shape="wide"] .cover { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
/* Type-only and wide objects: title and the ask in the first column, the story in the second, the facts in the third. */
.object[data-shape="wide"] .object__text, .object[data-shape="text"] .object__text { grid-column: 1 / -1; display: grid; grid-template-columns: 4fr 5fr 3fr; grid-auto-rows: min-content; column-gap: var(--sc-6); align-items: start; }
.object[data-shape="wide"] .object__text h3, .object[data-shape="text"] .object__text h3 { grid-column: 1; grid-row: 1; }
.object[data-shape="wide"] .object__text .stack, .object[data-shape="text"] .object__text .stack { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
.object[data-shape="wide"] .object__text .schema, .object[data-shape="text"] .object__text .schema { grid-column: 3; grid-row: 1 / span 3; margin-top: 0; }
.object[data-shape="wide"] .object__text .arrow, .object[data-shape="text"] .object__text .arrow { grid-column: 1; grid-row: 2; margin-top: var(--sc-5); }
.object[data-shape="text"] { padding-block: var(--sc-8); }
.object__text .stack { margin-top: var(--sc-5); }
.object__text .schema { margin-top: var(--sc-6); }
.object__text .arrow { margin-top: var(--sc-6); }
.film-band { padding-block: var(--sc-9) var(--sc-6); }
.film-band .cover, .film-band .vslot, .film-band .pair { aspect-ratio: 3 / 1; }
.film-band__cap { margin-top: var(--sc-3); }
.band-close { display: flex; justify-content: space-between; align-items: center; gap: var(--sc-6); flex-wrap: wrap; padding-block: var(--sc-8); margin-top: var(--sc-6); }
@media (max-width: 899px) {
  .feature__text, .feature__facts { grid-column: 1 / -1; }
  .feature__photo { aspect-ratio: 4 / 3; }
  .object[data-shape] .cover, .object[data-shape] .object__text { grid-column: 1 / -1; order: 0; display: block; }
  .object[data-shape] .object__text .stack { margin-top: var(--sc-5); }
  .object[data-shape] .object__text .schema { margin-top: var(--sc-6); }
  .object[data-shape] .object__text .arrow { margin-top: var(--sc-6); }
  .object[data-shape="wide"] .cover { aspect-ratio: 4 / 3; }
  .object { padding-block: var(--sc-8); }
  .film-band .cover, .film-band .vslot, .film-band .pair { aspect-ratio: 4 / 3; }
}

/* ----------------------------------------------------- transportation --- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sc-7); row-gap: var(--sc-7); list-style: none; margin: 0; padding: var(--sc-6) 0 0; border-top: 1px solid var(--sc-hairline); }
.ways p { margin-top: var(--sc-4); max-width: var(--sc-measure); }
.ways a { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 0.3em; white-space: nowrap; }
@media (max-width: 899px) {
  .ways { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- about --- */
.group { aspect-ratio: 2 / 1; }
.group figcaption { position: absolute; left: var(--sc-4); bottom: var(--sc-4); margin: 0; color: #ECF3F1; font-size: var(--sc-t-sm); text-shadow: 0 1px 8px rgba(6, 16, 19, 0.7); }
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-6); row-gap: var(--sc-8); margin-top: var(--sc-9); align-items: center; }
.story__text { grid-column: 1 / 7; }
.story__photo { grid-column: 8 / 13; aspect-ratio: 1; }
/* Three people as editorial rows, not a card row */
.people { display: grid; gap: 0; margin-top: var(--sc-8); border-top: 1px solid var(--sc-hairline); }
.person { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-6); align-items: center; padding-block: var(--sc-7); border-bottom: 1px solid var(--sc-hairline); }
.person__photo { grid-column: 1 / 4; aspect-ratio: 4 / 5; }
.person__text { grid-column: 5 / 10; }
.person__text .label { margin-top: var(--sc-3); }
.person__text .sc-body { margin-top: var(--sc-5); }
.person__meta { grid-column: 10 / 13; align-self: center; justify-self: end; text-align: right; margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); display: grid; gap: 0.3em; }
.person__meta a { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-hairline-strong); text-underline-offset: 0.3em; }
.person__meta a:hover { text-decoration-color: var(--sc-accent); }
.built { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sc-6); row-gap: var(--sc-7); margin-top: var(--sc-10); padding-bottom: var(--sc-10); align-items: start; }
.built__wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.built__wide figcaption { position: absolute; left: var(--sc-4); bottom: var(--sc-4); margin: 0; color: #ECF3F1; font-size: var(--sc-t-sm); text-shadow: 0 1px 8px rgba(6, 16, 19, 0.7); }
.built__text { grid-column: 1 / 7; }
.built__text .arrow { display: inline-flex; margin-right: var(--sc-6); }
.built__small { grid-column: 8 / 13; aspect-ratio: 4 / 3; }
@media (max-width: 899px) {
  .group, .built__wide { aspect-ratio: 4 / 3; }
  .story__text, .story__photo, .built__wide, .built__text, .built__small { grid-column: 1 / -1; }
  .person { grid-template-columns: 5fr 7fr; column-gap: var(--sc-4); align-items: start; row-gap: var(--sc-3); }
  .person__photo { grid-column: 1; grid-row: 1 / span 2; }
  .person__text { display: contents; }
  .person__text h2 { grid-column: 2; align-self: end; }
  .person__text .label { grid-column: 2; margin-top: 0; }
  .person__text .sc-body { grid-column: 1 / -1; margin-top: var(--sc-3); }
  .person__meta { grid-column: 1 / -1; justify-self: start; text-align: left; margin-top: 0; }
}

/* ------------------------------------------------------------ contact --- */
.route { display: grid; grid-template-columns: 6fr 6fr; column-gap: var(--sc-9); row-gap: var(--sc-8); align-items: start; }
.route .vslot, .route .cover, .route .pair { aspect-ratio: 4 / 5; }
.route__text .dist { margin-top: var(--sc-6); }
/* One plate: details and map on the left, the form on the right, one hairline between. */
.plate2 { display: grid; grid-template-columns: 5fr 7fr; background: var(--sc-surface); border-radius: var(--sc-r-sm); box-shadow: var(--sc-e2), var(--sc-edge); overflow: hidden; }
.plate2__details { display: grid; gap: var(--sc-5); align-content: start; padding: var(--sc-7); border-right: 1px solid var(--sc-hairline); }
.plate2__details address { font-style: normal; line-height: 1.7; }
.plate2__details a { color: var(--sc-ink); text-decoration: none; }
.plate2__details a:hover { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--sc-accent); }
.plate2__details .credit { margin-top: calc(-1 * var(--sc-3)); }
.form { display: grid; gap: var(--sc-5); padding: var(--sc-7); align-content: start; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.field { display: grid; gap: 0.5em; }
.field :is(input, textarea, select) { background: var(--sc-canvas); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); padding: 0.85em 1em; color: var(--sc-ink); width: 100%; min-height: 3rem; appearance: none; -webkit-appearance: none; }
.field ::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.field textarea { min-height: 9rem; resize: none; }
.form .cta-row { display: grid; gap: var(--sc-3); }
.form .cta-row .btn { width: 100%; justify-content: center; }
.field :is(input, textarea, select):focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.select { position: relative; display: block; }
.select::after { content: ""; position: absolute; right: 1em; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--sc-ink-soft); border-bottom: 1.5px solid var(--sc-ink-soft); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select select { padding-right: 2.5em; cursor: pointer; }
.form__note { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.form__status { padding: var(--sc-4); border: 1px solid var(--sc-accent); border-radius: var(--sc-r-sm); font-size: var(--sc-t-sm); }
.form__status[hidden] { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.map { aspect-ratio: 1; border-radius: var(--sc-r-sm); overflow: hidden; background: var(--sc-canvas); position: relative; isolation: isolate; z-index: 0; }
.map .leaflet-tile-pane { filter: var(--map-filter); }
.route__media .cover img { object-position: var(--pos, 50% 50%); }
.map .leaflet-container { background: var(--sc-canvas); font: inherit; }
.pin { width: 14px; height: 14px; border-radius: 50%; background: var(--sc-accent); border: 2px solid var(--sc-canvas); box-shadow: var(--sc-e1); }
@media (max-width: 899px) {
  .route, .plate2 { grid-template-columns: 1fr; }
  .plate2__details { border-right: 0; border-bottom: 1px solid var(--sc-hairline); padding: var(--sc-5); }
  .form { padding: var(--sc-5); }
  .form__row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- book --- */
/* Booking head: a full-bleed frame of the cabin with the title on it, like the home hero. */
.page-hero { position: relative; height: 78svh; min-height: 32rem; display: flex; align-items: flex-end; overflow: clip; background: var(--sc-canvas); }
.page-hero .pair, .page-hero__photo { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
/* The cabin page: a shorter head, so the booking widget under it starts in the first screen. */
.page-hero--short { height: 62svh; min-height: 28rem; }
.page-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top right, rgba(6, 16, 19, 0.94) 0%, rgba(6, 16, 19, 0.78) 30%, rgba(6, 16, 19, 0.4) 55%, transparent 74%); }
/* A dark band under the transparent bar, as on the home hero: the daylight photograph is bright at the top. */
.page-hero__scrim::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 30%; background: linear-gradient(to bottom, rgba(6, 16, 19, 0.62) 0%, rgba(6, 16, 19, 0.26) 55%, transparent 100%); }
.page-hero__copy { position: relative; z-index: 2; padding-bottom: var(--sc-8); color: #ECF3F1; }
.page-hero__copy .sc-display, .page-hero__copy .lede, .page-hero__copy .arrow { color: #ECF3F1; }
.page-hero__copy .lede { margin-top: var(--sc-5); }
.page-hero__copy .arrow { margin-top: var(--sc-6); }
.page-hero__copy .arrow::after { color: #7BE3B0; }
@media (max-width: 860px) {
  .page-hero { height: 70svh; min-height: 26rem; }
  .page-hero__scrim { background: linear-gradient(to top, rgba(6, 16, 19, 0.96) 0%, rgba(6, 16, 19, 0.8) 32%, rgba(6, 16, 19, 0.4) 56%, transparent 74%); }
  .page-hero__copy h1 { font-size: var(--sc-t-2xl); }
}
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-4); margin-top: var(--sc-4); }
/* Row one: the landscape beside a portrait that sets the row's height. Row two: three portraits. */
.gallery .cover:nth-child(1) { grid-column: 1 / 8; height: 100%; min-height: 24rem; }
.gallery .cover:nth-child(2) { grid-column: 8 / 13; aspect-ratio: 4 / 5; }
.gallery .cover:nth-child(n + 3) { grid-column: span 4; aspect-ratio: 4 / 5; }
@media (max-width: 899px) {
  .gallery .cover:nth-child(n) { grid-column: 1 / -1; aspect-ratio: 4 / 5; height: auto; min-height: 0; }
  .gallery .cover:nth-child(1) { aspect-ratio: 4 / 3; }
}
/* The sauna and the jacuzzi: two photographs side by side, the text under them. */
.shore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4); margin-top: var(--sc-10); padding-bottom: var(--sc-section); }
.shore .cover { aspect-ratio: 3 / 2; }
.shore__text { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--sc-9); row-gap: var(--sc-4); align-items: baseline; margin-top: var(--sc-5); }
.shore__text .arrow { grid-column: 2; }
@media (max-width: 899px) {
  .shore { grid-template-columns: 1fr; margin-top: var(--sc-8); }
  .shore__text { grid-template-columns: 1fr; }
  .shore__text .arrow { grid-column: 1; }
}
.page-head .arrow { margin-top: var(--sc-6); }
.facts { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--sc-9); row-gap: var(--sc-8); align-items: start; margin-top: var(--sc-10); }
.amenities { list-style: none; margin: var(--sc-4) 0 0; padding: 0; border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); }
.amenities li { padding: 0.6em 0; color: var(--sc-ink); border-bottom: 1px solid var(--sc-hairline); }
.book { display: grid; grid-template-columns: 8fr 4fr; column-gap: var(--sc-8); row-gap: var(--sc-8); align-items: start; padding-block: var(--sc-8) var(--sc-9); }
.btn--accent { background: var(--sc-accent); color: var(--sc-accent-ink); }
.btn--accent:hover { background: color-mix(in oklab, var(--sc-accent) 86%, var(--sc-ink)); }
.cal { position: relative; background: var(--sc-surface); border-radius: var(--sc-r-sm); padding: var(--sc-6); box-shadow: var(--sc-e2), var(--sc-edge); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); margin-bottom: var(--sc-4); }
.cal__head h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); letter-spacing: -0.02em; }
.cal__nav { display: flex; gap: var(--sc-2); }
.cal__nav button { width: 40px; height: 40px; border-radius: var(--sc-r-sm); border: 1px solid var(--sc-hairline-strong); background: transparent; color: var(--sc-ink); cursor: pointer; display: grid; place-items: center; }
.cal__nav button:hover { border-color: var(--sc-accent); }
.cal__nav button[disabled] { opacity: 0.35; cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.cal__dow { text-align: center; padding-block: 0.6em; }
.cal__day { aspect-ratio: 1; min-height: 44px; display: grid; place-content: center; gap: 0.15em; text-align: center; border-radius: 0; background: transparent; border: 1px solid transparent; color: var(--sc-ink); font-variant-numeric: tabular-nums; font-size: var(--sc-t-sm); cursor: pointer; padding: 0; transition: background-color 120ms var(--sc-ease-out), border-color 120ms var(--sc-ease-out); }
.cal__day small { font-size: 0.68rem; color: var(--sc-ink-soft); letter-spacing: 0.02em; }
@media (min-width: 900px) { .cal__day { aspect-ratio: 3 / 2; font-size: var(--sc-t-base); } .cal__day small { font-size: 0.75rem; } }
.cal__day:not([disabled]):hover { border-color: var(--sc-accent); border-radius: var(--sc-r-sm); }
.cal__day[disabled] { color: var(--sc-ink-soft); opacity: 0.4; cursor: default; }
/* A day with no check-in is hatched, so it reads apart from the plain dimmed days that have passed. */
.cal__day.is-closed, .cal__swatch { background-image: repeating-linear-gradient(135deg, color-mix(in oklab, var(--sc-ink-soft) 30%, transparent) 0 1px, transparent 1px 5px); }
.cal__day.is-closed { opacity: 0.75; }
/* The picked range is one continuous fill; the run has one hairline around it and the edge days are set bold. */
.cal__day.is-range { background: color-mix(in oklab, var(--sc-accent) 16%, transparent); border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); border-left-color: transparent; border-right-color: transparent; }
.cal__day.is-range:hover { border-radius: 0; border-left-color: transparent; border-right-color: transparent; }
.cal__day.is-start:hover { border-left-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); }
.cal__day.is-end:hover { border-right-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); }
.cal__day.is-edge { font-weight: 600; }
.cal__day.is-start { border-left-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); border-radius: var(--sc-r-sm) 0 0 var(--sc-r-sm); }
.cal__day.is-end { border-right-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); border-radius: 0 var(--sc-r-sm) var(--sc-r-sm) 0; }
.cal__day.is-start.is-end { border-radius: var(--sc-r-sm); }
.book__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-3) var(--sc-5); margin-bottom: var(--sc-5); }
.cal__day.is-pad { visibility: hidden; }
.cal__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-2) var(--sc-5); margin-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.cal__key { display: inline-flex; align-items: center; gap: 0.5em; }
.cal__key[hidden] { display: none; }
.cal__swatch { width: 1rem; height: 1rem; border: 1px solid var(--sc-hairline-strong); }
/* The stays BookVisit allows from the picked arrival date, opened under that date. */
.stay { position: absolute; z-index: 10; width: min(19rem, calc(100% - 1rem)); background: var(--sc-canvas); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); box-shadow: var(--sc-e2); }
.stay[hidden] { display: none; }
.stay__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-3); padding: var(--sc-3) var(--sc-4); font-size: var(--sc-t-sm); border-bottom: 1px solid var(--sc-hairline); }
.stay ul { list-style: none; margin: 0; padding: 0; max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; }
.stay li + li { border-top: 1px solid var(--sc-hairline); }
.stay button { display: flex; justify-content: space-between; gap: var(--sc-4); width: 100%; min-height: 44px; align-items: center; padding: 0.5rem var(--sc-4); background: transparent; border: 0; color: var(--sc-ink); font-size: var(--sc-t-sm); text-align: left; cursor: pointer; }
.stay button:hover, .stay button:focus-visible { background: color-mix(in oklab, var(--sc-accent) 16%, transparent); outline: none; }
/* Cabins and guests */
.guests { position: relative; }
.guests__toggle { display: inline-flex; align-items: center; gap: 0.6em; min-height: 40px; padding: 0 0.9em; background: transparent; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); color: var(--sc-ink); font-size: var(--sc-t-sm); cursor: pointer; }
.guests__toggle:hover, .guests__toggle[aria-expanded="true"] { border-color: var(--sc-accent); }
.guests__panel { position: absolute; z-index: 20; right: 0; top: calc(100% + 0.5rem); display: grid; gap: var(--sc-4); width: min(22rem, calc(100vw - 2 * var(--sc-gutter))); max-height: min(72svh, 36rem); overflow-y: auto; padding: var(--sc-5); background: var(--sc-canvas); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); box-shadow: var(--sc-e2); outline: none; }
.guests__panel[hidden] { display: none; }
.guests__cabin { display: grid; gap: var(--sc-2); padding-bottom: var(--sc-4); border-bottom: 1px solid var(--sc-hairline); }
.guests__name { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; }
.guests__name button { background: none; border: 0; padding: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); text-decoration: underline; text-underline-offset: 0.3em; cursor: pointer; }
.guests__name button:hover { color: var(--sc-ink); }
.stepper { display: grid; grid-template-columns: 1fr 2.5rem 2rem 2.5rem; align-items: center; font-size: var(--sc-t-sm); }
.stepper output { text-align: center; font-variant-numeric: tabular-nums; }
.stepper button { height: 2.5rem; background: transparent; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); color: var(--sc-ink); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.stepper button:hover:not([disabled]) { border-color: var(--sc-accent); }
.stepper button[disabled] { opacity: 0.35; cursor: default; }
.guests__age { display: grid; grid-template-columns: 1fr 7.5rem; align-items: center; font-size: var(--sc-t-sm); }
.guests__age select { width: 100%; min-height: 2.5rem; padding: 0 2em 0 0.8em; background: var(--sc-canvas); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); color: var(--sc-ink); appearance: none; -webkit-appearance: none; cursor: pointer; }
.guests__add { justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; }
.guests__add::after { content: "+"; }
.guests__panel .btn { justify-content: center; }
.summary { display: grid; gap: var(--sc-5); position: sticky; top: calc(var(--bar-h) + var(--sc-5)); }
.summary .price { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); letter-spacing: -0.02em; line-height: 1.08; font-variant-numeric: tabular-nums; }
.summary .price-unit { margin-top: var(--sc-2); }
.cal__day.is-avail small { color: var(--sc-ink-soft); }
.summary__lines { display: grid; gap: 0.5em; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }
.summary__lines strong { color: var(--sc-ink); font-weight: 500; }
.summary__warn { display: grid; gap: var(--sc-2); justify-items: start; padding: var(--sc-3) var(--sc-4); border: 1px solid var(--sc-accent); border-radius: var(--sc-r-sm); font-size: var(--sc-t-sm); }
.summary__warn[hidden] { display: none; }
.summary__warn .arrow { background: none; border: 0; padding: 0; cursor: pointer; }
.notice { padding: var(--sc-4); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.facts__aside .label { padding-bottom: var(--sc-2); }
.summary .price { white-space: nowrap; }
@media (max-width: 899px) {
  .facts, .book { grid-template-columns: 1fr; row-gap: var(--sc-6); }
  .facts { margin-top: var(--sc-8); }
  .book { padding-block: var(--sc-7); }
  /* The picker takes the full width on a phone, and its panel opens over the calendar. */
  .guests { width: 100%; }
  .guests__toggle { width: 100%; }
  .guests__toggle #guestsLabel { flex: 1; text-align: left; }
  .guests__panel { left: 0; right: auto; width: 100%; }
  .cal { padding: var(--sc-3); }
  /* On a phone the total and the action stay in reach while the calendar is used. */
  /* One compact row: the total on the left, the action on the right, so little of the calendar is covered. */
  .summary { position: sticky; bottom: 0; top: auto; z-index: 5; background: var(--sc-surface); margin-inline: calc(-1 * var(--sc-gutter)); padding: var(--sc-3) var(--sc-gutter); border-top: 1px solid var(--sc-hairline-strong); box-shadow: 0 -12px 30px -12px hsl(var(--sc-shadow-color) / 0.5); gap: 0 var(--sc-4); grid-template-columns: 1fr auto; align-items: center; }
  .summary .price { font-size: var(--sc-t-lg); grid-column: 1; }
  .summary .price-unit { grid-column: 1; margin-top: 0; }
  .summary__lines { display: none; }
  .summary__warn { grid-column: 1 / -1; margin-top: var(--sc-3); }
  .summary .btn { grid-column: 2; grid-row: 1 / span 2; padding: 0.8rem 1rem; letter-spacing: 0.08em; }
  .summary .form__note { display: none; }
}

/* ------------------------------------------------------------ utilities */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .hero__media { transition: none; transform: none; }
}