/* Maria Studios & Apartments: page styles.
   scrollcraft.css is the mechanism and the taste floor; this file is the brand.
   Six colour roles, two families, one accent (two lightnesses: day and dusk). */

@font-face { font-family: "Commissioner"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/commissioner-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Commissioner"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/commissioner-greek-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/noto-serif-display-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../fonts/noto-serif-display-greek-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Noto Serif Display"; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url("../fonts/noto-serif-display-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Serif Display"; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url("../fonts/noto-serif-display-greek-italic.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

:root {
  --sc-canvas:     #f4f6f3;   /* limewash, cool */
  --sc-surface:    #ffffff;
  --sc-ink:        #102338;   /* Aegean night */
  --sc-ink-soft:   #46586b;
  --sc-accent:     #135e96;   /* Aegean blue */
  --sc-accent-ink: #ffffff;
  --sc-font-display: "Noto Serif Display", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-shadow-color: 212 45% 18%;

  --sky-top: #3f8bc8;
  --sky-low: #a9cdea;
  --sea: #1f78b4;
  --dusk: #171e2c;
  --bar-h: 4rem;
  --tape-x: clamp(1rem, 2.2vw, 2rem);
  --rail-gap: clamp(1.25rem, 3vw, 3rem);
}

body { font-weight: 380; }
h1, h2, h3 { font-weight: inherit; margin: 0; }
p { margin: 0; }
.sc-display { font-weight: 420; font-variation-settings: "wdth" 100; }
.sc-display em, .hero__main em { font-style: italic; font-weight: 380; }
.sc-lede { color: var(--sc-ink-soft); font-weight: 360; }
:lang(el) .sc-display { letter-spacing: -0.02em; }

.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  background: var(--sc-ink); color: var(--sc-canvas); padding: 0.6rem 1rem; border-radius: var(--sc-r-sm);
  transform: translateY(-200%); transition: transform 160ms var(--sc-ease-out);
}
.skip:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.55rem 1.15rem;
  border-radius: var(--sc-r-pill); border: 0; cursor: pointer;
  font-weight: 560; font-size: var(--sc-t-sm); letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn--cta { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: var(--sc-e1); }
.btn--lg { min-height: 3.25rem; padding-inline: 1.6rem; font-size: var(--sc-t-base); }
@media (hover: hover) and (pointer: fine) {
  .btn--cta:hover { background: color-mix(in oklab, var(--sc-accent) 86%, black); box-shadow: var(--sc-e2); }
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 540; color: var(--sc-accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
}
.link-arrow .ico { width: 1.1em; height: 1.1em; transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover .ico:last-child { transform: translateX(3px); } }
.ico { width: 1.4rem; height: 1.4rem; flex: none; }

/* ----------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem);
  padding-inline: var(--sc-gutter);
  padding-left: max(var(--sc-gutter), 6.5rem);
  transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.bar--solid {
  background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: 0 1px 0 var(--sc-hairline);
}
.brand { display: flex; align-items: baseline; gap: 0.55rem; text-decoration: none; margin-right: auto; color: var(--sc-ink); }
.brand__name { font-family: var(--sc-font-display); font-size: 1.6rem; font-style: italic; font-weight: 440; letter-spacing: -0.02em; line-height: 1; }
.brand__sub { font-size: var(--sc-t-xs); letter-spacing: 0.09em; text-transform: uppercase; font-weight: 520; }
.langs { display: flex; gap: 0.15rem; }
.langs a {
  display: inline-grid; place-items: center; min-width: 2.25rem; min-height: 2.25rem;
  font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.06em; text-decoration: none;
  border-radius: var(--sc-r-pill); color: var(--sc-ink);
}
.langs a[aria-current="page"] { background: color-mix(in oklab, var(--sc-ink) 12%, transparent); }
@media (hover: hover) and (pointer: fine) { .langs a:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); } }

/* ------------------------------------------------- the 20-metre tape ---- */
.tape {
  position: fixed; z-index: var(--sc-z-chrome);
  left: var(--tape-x); top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
  font-size: var(--sc-t-xs); color: var(--sc-ink);
}
.tape__end, .tape__beyond a { font-weight: 650; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; padding: 0.12rem 0.5rem; margin-left: -0.5rem; border-radius: var(--sc-r-pill); background: color-mix(in oklab, var(--sc-surface) 86%, transparent); color: var(--sc-ink); }
.tape__end--sea { color: #fff; background: var(--sea); }
.tape__track {
  position: relative; width: 0.5rem; height: min(52vh, 26rem);
  border-radius: 1px;
  background:
    repeating-linear-gradient(to bottom, color-mix(in oklab, var(--sc-ink) 55%, transparent) 0 1px, transparent 1px 5%),
    color-mix(in oklab, var(--sc-surface) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 30%, transparent);
}
.tape__fill {
  position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(var(--tape, 0));
  background: linear-gradient(to bottom, #e7c46a, #d79b4b 55%, var(--sea));
  border-radius: 1px;
}
.tape.is-sea .tape__fill { background: var(--sea); }
.tape__stations { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.tape__stations li { position: absolute; left: 0; top: calc(var(--at, 0) * 100%); translate: 0 -50%; }
.tape__stations a {
  position: relative; display: block; width: 1.75rem; height: 1.75rem; margin-left: -0.625rem;
  text-decoration: none; border-radius: 50%;
}
.tape__stations a::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.5rem; height: 0.5rem; translate: -50% -50%;
  border-radius: 50%; background: var(--sc-surface); box-shadow: 0 0 0 1.5px var(--sc-ink);
  transition: background-color 200ms var(--sc-ease-out), scale 200ms var(--sc-ease-out);
}
.tape__stations li.is-passed a::before { background: var(--sc-ink); }
.tape__stations li[data-station="beach"].is-passed a::before { background: var(--sea); box-shadow: 0 0 0 1.5px var(--sea); }
.tape__stations a span {
  position: absolute; left: 2rem; top: 50%; translate: 0 -50%; white-space: nowrap;
  padding: 0.2rem 0.55rem; border-radius: var(--sc-r-pill);
  background: var(--sc-ink); color: var(--sc-canvas); font-weight: 560;
  opacity: 0; transform: translateX(-4px); pointer-events: none;
  transition: opacity 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out);
}
.tape__stations a:focus-visible span { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .tape__stations a:hover span { opacity: 1; transform: none; } .tape__stations a:hover::before { scale: 1.3; } }
.tape__marker {
  position: absolute; left: 50%; top: calc(var(--tape, 0) * 100%);
  width: 1.1rem; height: 2px; translate: -50% -50%; background: var(--sc-ink);
}
.tape__readout {
  position: absolute; left: 1.25rem; top: 50%; translate: 0 -50%; white-space: nowrap;
  font-weight: 650; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  padding: 0.18rem 0.5rem; border-radius: var(--sc-r-pill);
  background: color-mix(in oklab, var(--sc-surface) 88%, transparent); color: var(--sc-ink);
  box-shadow: var(--sc-e1);
  transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out);
}
.tape.is-sea .tape__readout { background: var(--sea); color: #fff; }
.tape.is-hovering .tape__readout, .tape.is-start .tape__readout { opacity: 0; }
.tape__beyond { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.15rem; }
.tape__beyond a { text-decoration: none; font-weight: 540; display: inline-block; letter-spacing: 0.01em; color: var(--sc-ink-soft); }
.tape__beyond li.is-current a { color: var(--sc-ink); text-decoration: underline; text-underline-offset: 0.25em; }
.tape.is-dusk { color: #f2eee6; --sc-surface: #222b3c; --sc-ink: #f3eee6; --sc-ink-soft: #bcc4cf; }
.tape.is-dusk .tape__marker { background: #f2eee6; }

/* ---------------------------------------------------------------- hero -- */
.hero__stage { background: var(--sky-low); }
.hero__sky {
  position: absolute; inset: -6% 0 0;
  background:
    radial-gradient(60% 40% at 78% 8%, rgba(255, 249, 230, 0.55), transparent 70%),
    linear-gradient(to bottom, var(--sky-top) 0%, #63a2d6 38%, var(--sky-low) 72%, #c9dfee 100%);
  transform: translate3d(calc(var(--mx, 0) * -4px), calc(var(--sc-p, 0) * 3vh), 0);
}
.hero__scene {
  --W: max(100vw, 126.3svh);
  --H: calc(var(--W) / 1.5033);
  position: absolute; left: 50%; width: var(--W); height: var(--H);
  top: max(calc(100svh - var(--H)), min(15svh, calc(100svh - var(--H) * 0.76)));
  translate: -50% 0;
}
.plane { position: absolute; left: 0; width: 100%; max-width: none; height: auto; will-change: transform; }
.plane--kerkis {
  top: 18.7%;
  transform-origin: 50% 40%;
  transform: translate3d(calc(var(--mx, 0) * -9px), calc(var(--my, 0) * -4px), 0) scale(calc(1 + var(--sc-p, 0) * 0.07));
}
.plane--balcony {
  bottom: 0;
  transform-origin: 46% 100%;
  transform: translate3d(calc(var(--mx, 0) * -22px), 0, 0) scale(calc(1.02 + var(--sc-p, 0) * 0.17));
}
.hero__haze {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 55%, rgba(255, 246, 228, 0.18) 75%, transparent 100%);
  opacity: calc(0.6 + var(--sc-p, 0) * 0.4);
}
.hero__copy {
  position: absolute; z-index: 0;
  left: max(var(--sc-gutter), 6.5rem); top: calc(var(--bar-h) + clamp(0.5rem, 3vh, 2.5rem));
  max-width: min(56rem, 62vw);
  transform: translate3d(calc(var(--mx, 0) * -2px), calc(var(--sc-p, 0) * 46vh), 0);
}
.hero__scene { z-index: 1; }
.hero__haze { z-index: 2; }
.hero__title { display: grid; gap: 0.7rem; color: var(--sc-ink); }
.hero__kicker {
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: calc(1 - var(--sc-p, 0) * 4);
}
.hero__main { font-size: clamp(2.3rem, min(0.6rem + 3.6vw, 6.2svh), 4.6rem); line-height: 1.0; letter-spacing: -0.03em; display: block; }
.hero__main em { display: block; }
.hero__sub {
  position: absolute; z-index: 5; right: var(--sc-gutter); top: calc(var(--bar-h) + 2.2rem);
  max-width: min(22rem, 26vw); text-align: right;
  font-size: var(--sc-t-base); font-weight: 450; color: #0d2640;
  opacity: clamp(0, calc(1 - var(--sc-p, 0) * 3.2), 1);
}
.hero__turn {
  position: absolute; z-index: 5; right: var(--sc-gutter); top: calc(var(--bar-h) + 2vh);
  max-width: 22ch; text-align: right;
  font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-xl); line-height: 1.12; color: var(--sc-ink);
}

/* --------------------------------------------------------------- rooms -- */
.rooms .sc-wrap { padding-left: max(var(--sc-gutter), 7rem); }
.rooms__head { display: grid; gap: var(--sc-5); max-width: 62rem; margin-bottom: var(--sc-9); }
.room { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sc-6); align-items: end; margin-bottom: clamp(4rem, 9vw, 8rem); }
.room__media { margin: 0; border-radius: var(--sc-r-md); overflow: hidden; box-shadow: var(--sc-e2); }
.room__media img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.room--1 .room__media { grid-column: 1 / span 7; }
.room--1 .room__label { grid-column: 8 / span 4; }
.room--2 .room__media { grid-column: 6 / span 7; grid-row: 1; }
.room--2 .room__label { grid-column: 2 / span 4; grid-row: 1; align-self: center; }
.room--3 { align-items: start; }
.room--3 .room__media { grid-column: 1 / -1; }
.room--3 .room__media img { aspect-ratio: 21 / 9; }
.room--3 .room__label { grid-column: 7 / span 5; margin-top: calc(-1 * var(--sc-9)); position: relative; background: var(--sc-surface); padding: var(--sc-6); border-radius: var(--sc-r-md); box-shadow: var(--sc-e3), var(--sc-edge); }
.room__name { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: var(--sc-4); }
.room__facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.1rem; }
.room__facts li { padding-block: 0.55rem; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); }
.details { display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: var(--sc-5); align-items: start; }
.detail { margin: 0; border-radius: var(--sc-r-md); overflow: hidden; }
.detail img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.detail:nth-child(2) { margin-top: var(--sc-8); }
.detail:nth-child(2) img { aspect-ratio: 3 / 4; }
.rooms__note { margin-top: var(--sc-8); font-size: var(--sc-t-lg); max-width: 46rem; }
.rooms__note a { color: var(--sc-accent); font-weight: 560; }

/* ------------------------------------------------------------ included -- */
.included .sc-wrap { padding-left: max(var(--sc-gutter), 7rem); }
.included__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.included__aside { position: sticky; top: calc(var(--bar-h) + 2rem); display: grid; gap: var(--sc-7); }
.included__aside .sc-lede { margin-top: var(--sc-4); }
.included__photo { margin: 0; border-radius: var(--sc-r-md); overflow: hidden; box-shadow: var(--sc-e2); }
.included__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.ledger { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sc-7); }
.ledger__row {
  display: grid; grid-template-columns: auto 1fr; align-content: start; column-gap: var(--sc-4); row-gap: 0.2rem;
  padding-block: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong);
}
.ledger__row .ico { grid-row: 1; color: var(--sc-accent); margin-top: 0.05rem; }
.ledger dd { grid-column: 2; }
.ledger dt { font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: -0.01em; line-height: 1.3; }
.ledger dd { margin: 0; color: var(--sc-ink-soft); }
.faq { margin-top: var(--sc-10); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 6rem); }
.faq__list { border-bottom: 1px solid var(--sc-hairline-strong); }
.faq__item { border-top: 1px solid var(--sc-hairline-strong); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: var(--sc-5); border-radius: var(--sc-r-sm);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item h3 { font-size: var(--sc-t-lg); font-weight: 540; letter-spacing: -0.01em; line-height: 1.3; }
.faq__ico { transition: transform 200ms var(--sc-ease-out); color: var(--sc-accent); }
.faq__item[open] .faq__ico { transform: rotate(90deg); }
.faq__item p { padding-bottom: var(--sc-5); max-width: 60ch; color: var(--sc-ink-soft); }

/* -------------------------------------------------------------- garden -- */
.garden__stage { display: flex; align-items: center; background: transparent; }
.rail { gap: var(--rail-gap); padding-inline: max(var(--sc-gutter), 7rem) var(--sc-gutter); align-items: center; }
.rail > * { flex: none; }
.rail__lead { width: min(30rem, 80vw); display: grid; gap: var(--sc-5); }
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin-top: var(--sc-2); }
.rating__value { font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); line-height: 1; letter-spacing: -0.03em; }
.rating__stars { display: inline-flex; color: #c98a1a; }
.star { width: 1.25rem; height: 1.25rem; fill: currentColor; stroke: none; }
.rating__text { flex-basis: 100%; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.quote {
  margin: 0; width: min(24rem, 76vw); padding: var(--sc-6); border-radius: var(--sc-r-md);
  background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sc-5);
  min-height: min(22rem, 52svh);
}
.quote blockquote { margin: 0; }
.quote p { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.4; letter-spacing: -0.01em; }
.quote p::before { content: "\201C"; } .quote p::after { content: "\201D"; }
.quote:lang(el) p::before { content: "\00AB"; } .quote:lang(el) p::after { content: "\00BB"; }
.quote:lang(de) p::before { content: "\201E"; } .quote:lang(de) p::after { content: "\201C"; }
.quote figcaption { font-weight: 600; font-size: var(--sc-t-sm); }
.quote figcaption span { display: block; font-weight: 450; color: var(--sc-ink-soft); letter-spacing: 0.05em; }
.quote:nth-of-type(odd) { translate: 0 -1.5rem; }
.rail__photo { margin: 0; width: min(26rem, 70vw); border-radius: var(--sc-r-md); overflow: hidden; box-shadow: var(--sc-e2); }
.rail__photo img { width: 100%; height: min(60svh, 34rem); object-fit: cover; }
.rail__end { width: min(18rem, 70vw); }
@media (prefers-reduced-motion: no-preference) {
  .rail > :not(:first-child) {
    opacity: clamp(0.55, calc(var(--sc-p, 0) * 9 - var(--i, 0) * 0.62 + 1.2), 1);
  }
}

/* ------------------------------------------------------------ crossing -- */
.crossing__stage { background: #dfe9ee; }
.crossing__gate, .crossing__sea { position: absolute; inset: 0; margin: 0; }
.crossing__gate img, .crossing__sea img { width: 100%; height: 100%; object-fit: cover; }
.crossing__gate img {
  transform: scale(calc(1 + var(--sc-p, 0) * 0.18)); transform-origin: 62% 46%;
}
.crossing__sea img { transform: scale(calc(1.12 - var(--sc-p, 0) * 0.12)); transform-origin: 50% 60%; }
.crossing__line {
  position: absolute; z-index: 3; left: 50%; bottom: 14vh; translate: -50% 0;
  padding: 0.65rem 1.3rem; border-radius: var(--sc-r-pill);
  background: var(--sc-surface); box-shadow: var(--sc-e2);
  font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-xl); white-space: nowrap;
}
.crossing__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top left, rgba(244, 246, 243, 0.94) 0%, rgba(244, 246, 243, 0.78) 26%, rgba(244, 246, 243, 0.25) 48%, transparent 62%);
  opacity: clamp(0, calc((var(--sc-p, 0) - 0.5) * 6), 1);
}
.crossing__copy {
  position: absolute; z-index: 4; right: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 7rem);
  max-width: min(36rem, 80vw); text-align: right; display: grid; gap: var(--sc-4); justify-items: end;
}
.crossing__mark {
  font-family: var(--sc-font-text); font-weight: 700; font-size: var(--sc-t-sm); letter-spacing: 0.08em;
  color: #fff; background: var(--sea); padding: 0.25rem 0.7rem; border-radius: var(--sc-r-pill);
}
.crossing__text { max-width: 40ch; color: var(--sc-ink); font-weight: 430; }

/* ------------------------------------------------------------- further -- */
.further .sc-wrap { padding-left: max(var(--sc-gutter), 7rem); }
.further__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 6vw, 6rem); }
.further__text { display: grid; gap: var(--sc-8); align-content: start; }
.further__text .sc-lede { margin-top: var(--sc-4); }
.places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-6) var(--sc-7); }
.place h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: var(--sc-2); }
.place p { color: var(--sc-ink-soft); }
.getting { padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); display: grid; gap: var(--sc-3); max-width: 46rem; }
.getting h3 { font-weight: 620; font-size: var(--sc-t-lg); }
.getting p { color: var(--sc-ink-soft); }
.further__media { position: relative; min-height: 40rem; }
.further__photo { margin: 0; position: absolute; border-radius: var(--sc-r-md); overflow: hidden; box-shadow: var(--sc-e3); }
.further__photo img { width: 100%; height: 100%; object-fit: cover; }
.further__photo--a { top: 0; right: 0; width: 88%; aspect-ratio: 3 / 4; }
.further__photo--b { bottom: -2rem; left: 0; width: 62%; aspect-ratio: 4 / 3; }

/* ------------------------------------------------------------- evening -- */
.evening {
  --sc-canvas: var(--dusk); --sc-surface: #222b3c; --sc-ink: #f3eee6; --sc-ink-soft: #bcc4cf;
  --sc-accent: #8cc4ea; --sc-accent-ink: #0d1420; --sc-shadow-color: 222 40% 4%;
  position: relative; color: var(--sc-ink); background: var(--dusk);
  padding-top: clamp(14rem, 34vw, 30rem); overflow: clip;
}
.evening__sky { position: absolute; inset: 0 0 auto; height: clamp(26rem, 60vw, 54rem); }
.evening__img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 96%); mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
}
.evening__sky::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, var(--sc-canvas-light, #f6f3ec) 0%, transparent 16%);
}
.evening .sc-wrap { padding-left: max(var(--sc-gutter), 7rem); position: relative; z-index: 2; }
.evening__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sc-7) clamp(2rem, 6vw, 6rem); align-items: start; }
.evening__intro { grid-column: 1 / -1; display: grid; gap: var(--sc-5); max-width: 46rem; }
.form {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5);
  padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--sc-r-lg);
  background: var(--sc-surface); box-shadow: var(--sc-e3), var(--sc-edge);
}
.field { display: grid; gap: 0.4rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--sc-t-sm); font-weight: 540; }
.req { color: var(--sc-accent); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem; border-radius: var(--sc-r-sm);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 26%, transparent);
  background: color-mix(in oklab, var(--sc-canvas) 70%, var(--sc-surface)); color: var(--sc-ink);
  transition: border-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
  color-scheme: dark;
}
.field textarea { resize: vertical; min-height: 7.5rem; line-height: 1.5; }
.field ::placeholder { color: color-mix(in oklab, var(--sc-ink) 52%, transparent); }
.field :is(input, select, textarea):focus-visible { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 40%, transparent); }
.form.was-validated :is(input, textarea):invalid { border-color: #f0a08f; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 0.75rem; }
.field--check input { width: 1.25rem; height: 1.25rem; min-height: 0; margin-top: 0.15rem; padding: 0; }
.field--check label { font-weight: 420; color: var(--sc-ink-soft); }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-5); }
.form__status { flex: 1 1 16rem; font-weight: 500; }
.form__status.is-ok { color: #a8e0b8; }
.form__status.is-err { color: #f6b4a6; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.direct { font-style: normal; display: grid; gap: var(--sc-4); padding-top: var(--sc-4); }
.direct h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); margin-bottom: var(--sc-2); }
.direct p { display: flex; gap: 0.85rem; align-items: flex-start; }
.direct .ico { color: var(--sc-accent); margin-top: 0.15rem; }
.direct__k { display: block; font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.direct a { text-decoration: none; font-weight: 520; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .direct a:hover { text-decoration: underline; } }
.foot {
  position: relative; z-index: 2; margin-top: var(--sc-10); padding-block: var(--sc-7) var(--sc-8);
  border-top: 1px solid var(--sc-hairline); display: grid; grid-template-columns: 1fr auto; gap: var(--sc-5) var(--sc-7);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.foot__brand { color: var(--sc-ink); display: flex; align-items: baseline; gap: 0.5rem; }
.foot__nav, .foot__langs { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
.foot a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--sc-ink); text-decoration: underline; } }
.foot__privacy { grid-column: 1 / -1; max-width: 70ch; }

/* -------------------------------------------------------------- tablet -- */
@media (max-width: 1080px) {
  .ledger { grid-template-columns: 1fr; }
  .places { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  :root { --bar-h: 3.5rem; }
  .bar { padding-left: var(--sc-gutter); gap: 0.5rem; }
  .brand__sub { display: none; }
  .brand__name { font-size: 1.45rem; }
  .langs a { min-width: 2rem; }
  .bar .btn--cta { padding-inline: 0.9rem; font-size: var(--sc-t-xs); }

  /* the tape lies down: a strip under the bar, filling left to right */
  .tape {
    left: 0; right: 0; top: var(--bar-h); translate: none;
    flex-direction: row; align-items: center; gap: 0.5rem;
    padding: 0.35rem var(--sc-gutter);
    background: color-mix(in oklab, var(--sc-canvas) 90%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 var(--sc-hairline);
  }
  .tape.is-dusk { background: color-mix(in oklab, var(--dusk) 90%, transparent); }
  .tape__track { flex: 1; height: 0.4rem; width: auto;
    background: repeating-linear-gradient(to right, color-mix(in oklab, var(--sc-ink) 50%, transparent) 0 1px, transparent 1px 5%), color-mix(in oklab, var(--sc-surface) 70%, transparent); }
  .tape__fill { transform-origin: 0 50%; transform: scaleX(var(--tape, 0)); background: linear-gradient(to right, #e7c46a, #d79b4b 55%, var(--sea)); }
  .tape__stations li { top: 50%; left: calc(var(--at, 0) * 100%); translate: -50% -50%; }
  .tape__stations a { margin-left: 0; width: 1.5rem; height: 1.5rem; }
  .tape__stations a span { display: none; }
  .tape__marker { top: 50%; left: calc(var(--tape, 0) * 100%); width: 2px; height: 0.9rem; }
  .tape__readout { display: none; }
  .tape__beyond { display: none; }
  .tape__end { font-size: 0.7rem; }

  .hero__scene { --W: 93svh; --H: 62svh; top: auto; bottom: 0; }
  .plane--balcony { transform-origin: 50% 100%; }
  .hero__copy { left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--bar-h) + 2.6rem); max-width: none; }
  .hero__main { font-size: clamp(2rem, 8.4vw, 2.8rem); }
  .hero__sub { left: var(--sc-gutter); right: auto; top: 37svh; max-width: 30ch; text-align: left; font-size: var(--sc-t-sm); }
  .hero__turn { left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--bar-h) + 3rem); text-align: left; max-width: 18ch; }

  .rooms .sc-wrap, .included .sc-wrap, .further .sc-wrap, .evening .sc-wrap { padding-left: var(--sc-gutter); }
  .rooms__head { margin-bottom: var(--sc-8); }
  .room { grid-template-columns: 1fr; gap: var(--sc-5); }
  .room .room__media, .room .room__label { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .room--3 .room__label { margin-top: calc(-1 * var(--sc-7)); margin-inline: var(--sc-4); padding: var(--sc-5); }
  .room--3 .room__media img { aspect-ratio: 4 / 3; }
  .details { grid-template-columns: 1fr 1fr; }
  .detail:nth-child(2) { margin-top: 0; }
  .detail:nth-child(3) { grid-column: 1 / -1; }
  .detail:nth-child(2) img { aspect-ratio: 4 / 3; }

  .included__grid, .faq, .further__grid, .evening__grid { grid-template-columns: 1fr; }
  .included__aside { position: static; }
  .included__photo img { aspect-ratio: 16 / 10; }
  .faq { margin-top: var(--sc-9); gap: var(--sc-5); }

  .rail { padding-inline: var(--sc-gutter); }
  .quote { min-height: 0; padding: var(--sc-5); }
  .quote:nth-of-type(odd) { translate: none; }
  .rail__photo img { height: 46svh; }

  .crossing__line { font-size: var(--sc-t-lg); bottom: 18svh; }
  .crossing__copy { left: var(--sc-gutter); right: var(--sc-gutter); text-align: left; justify-items: start; bottom: 2.5rem; }
  .crossing__scrim { background: linear-gradient(to top, rgba(244, 246, 243, 0.95) 0%, rgba(244, 246, 243, 0.82) 30%, rgba(244, 246, 243, 0.3) 52%, transparent 66%); }

  .further__media { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
  .further__photo { position: relative; inset: auto; width: auto !important; }
  .further__photo--a { aspect-ratio: 3 / 4; }
  .further__photo--b { aspect-ratio: 3 / 4; margin-top: var(--sc-8); }

  .evening { padding-top: 12rem; }
  .form { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
}

/* compact phones: the sky only holds the headline */
@media (max-width: 860px) and (max-height: 700px) {
  .hero__sub { display: none; }
  .hero__main { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .hero__scene { --W: 98svh; --H: 65svh; }
}

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* The balcony keeps its depth as a still composition, with no pinned travel. */
  #balcony { height: 100svh !important; }
  #garden { height: 100svh !important; }
  #beach { height: 140svh !important; }
  .plane--kerkis, .plane--balcony, .hero__sky, .hero__copy, .crossing__gate img, .crossing__sea img { transform: none !important; }
  .hero__kicker, .hero__sub { opacity: 1; }
  .hero__turn { display: none; }
  .crossing__scrim { opacity: 1; }
  .tape__fill, .tape__stations a::before, .btn, .faq__ico { transition: none; }
}