/* ============================================================================
   Navis Milos · page styles. Split stage: two grounds, one line between them.
   The engine's tokens are overridden here; its device selectors are untouched.
   ========================================================================== */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/instrument-serif-normal-latin.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: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/instrument-serif-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("assets/fonts/instrument-serif-italic-latin.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: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/jetbrains-mono-normal-latin.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; }

/* Greek. Instrument Serif has no Greek, so its Greek range is served by GFS
   Didot (same high-contrast Didone lineage) under the same family name: no
   selector changes, Latin stays Instrument Serif even inside Greek copy. */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/gfs-didot-greek.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: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("assets/fonts/gfs-didot-greek.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: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/jetbrains-mono-normal-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Two grounds. The page never drifts between them; each column paints its own. */
  --white:       #F4F1EA;   /* whitewash                        */
  --white-2:     #EAE5DA;   /* raised on whitewash              */
  --ink-on-w:    #0B2237;   /* navy ink on whitewash            */
  --soft-on-w:   #3E4C58;   /* tinted secondary on whitewash    */
  --navy:        #07213A;   /* the stay                         */
  --navy-2:      #0D2C4A;   /* raised on navy                   */
  --ink-on-n:    #F1ECE1;   /* bone ink on navy                 */
  --soft-on-n:   #A9B4BE;   /* tinted secondary on navy         */
  /* One accent hue, two lightnesses, keyed to the ground family. */
  --gold:        #F1C75B;   /* on navy: fills and large type    */
  --gold-deep:   #7A5C0E;   /* on whitewash: text-sized accent  */
  --gold-ink:    #0B2237;

  /* Engine roles default to the whitewash side; .half--r restates them. */
  --sc-canvas:     var(--white);
  --sc-surface:    var(--white-2);
  --sc-ink:        var(--ink-on-w);
  --sc-ink-soft:   var(--soft-on-w);
  --sc-accent:     var(--gold-deep);
  --sc-accent-ink: var(--white);
  --sc-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sc-font-text:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sc-font-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --sc-shadow-color: 210 40% 8%;
  --sc-r-sm: 2px; --sc-r-md: 3px; --sc-r-lg: 4px;   /* one radius scale: near-square */
  --sc-leading-none: 0.96;

  --split: 50%;             /* the divider's x. Driven by the page script. */
  --haze: rgba(255,255,255,0.0);
  --bar-h: 0px;             /* phones: the divider becomes a top rule of this height */
}

/* The signature move: one attribute on <html> regrades both grounds, the
   accent temperature and the haze plane over each hero back plate. */
html[data-season="may"]   { --white: #F2F4F1; --white-2: #E6EAE6; --navy: #0A2440; --navy-2: #12304F; --gold: #F0CB6A; --gold-deep: #6E5A12; --haze: rgba(214,228,238,0.34); }
html[data-season="high"]  { --white: #F7F5EE; --white-2: #ECE8DE; --navy: #061B31; --navy-2: #0C2A45; --gold: #F1C75B; --gold-deep: #7A5C0E; --haze: rgba(255,255,255,0.28); }
html[data-season="amber"] { --white: #F5EDDE; --white-2: #ECE0CB; --navy: #10233A; --navy-2: #182F49; --gold: #F0B94A; --gold-deep: #7E5408; --haze: rgba(240,185,74,0.22); }
html { transition: background-color 600ms var(--sc-ease-out); }
body { background: var(--white); transition: background-color 600ms var(--sc-ease-out); }

/* ---------------------------------------------------------- the columns -- */
.split { display: grid; grid-template-columns: 1fr 1fr; }
.half { position: relative; min-width: 0; }
.half--l {
  background: var(--white); color: var(--ink-on-w);
  --sc-canvas: var(--white); --sc-surface: var(--white-2);
  --sc-ink: var(--ink-on-w); --sc-ink-soft: var(--soft-on-w);
  --sc-accent: var(--gold-deep); --sc-accent-ink: var(--white);
  --sc-edge: inset 0 1px 0 rgba(255,255,255,0.7);
}
.half--r {
  background: var(--navy); color: var(--ink-on-n);
  --sc-canvas: var(--navy); --sc-surface: var(--navy-2);
  --sc-ink: var(--ink-on-n); --sc-ink-soft: var(--soft-on-n);
  --sc-accent: var(--gold); --sc-accent-ink: var(--gold-ink);
  /* light-on-dark compensation: a touch more leading and tracking */
  letter-spacing: 0.004em;
}
.half, body { transition: background-color 600ms var(--sc-ease-out), color 600ms var(--sc-ease-out); }

/* ---------------------------------------------------------------- mark -- */
.mark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.mark__glyph {
  width: 1.7rem; height: 1.9rem; background: currentColor;
  -webkit-mask: url("assets/img/logo-mask.png") center / contain no-repeat;
          mask: url("assets/img/logo-mask.png") center / contain no-repeat;
}
.mark__word { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.22em; text-transform: uppercase; }
.hero .mark { position: absolute; z-index: 5; top: clamp(1.1rem, 3vw, 2.2rem); left: var(--sc-gutter); }

/* ------------------------------------------------------------- buttons -- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: 0 1.35rem;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; border-radius: var(--sc-r-sm);
  cursor: pointer; white-space: nowrap;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
.cta:active { transform: translateY(1px); }
.cta--gold { background: var(--gold); color: var(--gold-ink); box-shadow: var(--sc-e1); }
.cta--gold:hover { background: #F6D57C; }
.cta--ink { background: var(--ink-on-w); color: var(--white); box-shadow: var(--sc-e1); }
.cta--ink:hover { background: #163554; }
.cta--big { min-height: 3.3rem; padding-inline: 1.8rem; }
.cta[disabled] { opacity: 0.55; cursor: progress; }
.half--r :focus-visible, .divider :focus-visible, .pop :focus-visible { outline-color: var(--gold); }

/* =============================================================== DIVIDER == */
.divider {
  position: fixed; inset: 0; pointer-events: none; z-index: var(--sc-z-chrome);
  --x: var(--split);
}
.divider__line {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px;
  background: linear-gradient(to bottom, rgba(241,199,91,0) 0%, var(--gold) 12%, var(--gold) 88%, rgba(241,199,91,0) 100%);
  opacity: 0.9;
  transform: translateX(-0.5px);
}
.divider__label {
  position: absolute; top: clamp(1.2rem, 3vw, 2.3rem); margin: 0;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.24em; text-transform: uppercase;
  transition: opacity 300ms var(--sc-ease-out);
}
.divider__label--l { right: calc(100% - var(--x) + 1.1rem); color: var(--ink-on-w); }
.divider__label--r { left: calc(var(--x) + 1.1rem); color: var(--ink-on-n); }
.divider__label span { display: inline-block; padding: 0.25rem 0; }

/* the language switch sits on the line, between the two labels */
.divider__lang {
  position: absolute; top: clamp(1rem, 2.7vw, 2.05rem); left: var(--x); transform: translateX(-50%);
  display: flex; pointer-events: auto;
  background: var(--navy); border: 1px solid var(--gold); border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-e1);
  transition: opacity 300ms var(--sc-ease-out);
}
.divider__lang button {
  min-width: 2.2rem; min-height: 1.75rem; padding: 0 0.45rem; margin: 0;
  background: none; border: 0; cursor: pointer; color: var(--soft-on-n);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.12em;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.divider__lang button:hover { color: var(--ink-on-n); }
.divider__lang button[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); }
.divider__label--l { right: calc(100% - var(--x) + 3.4rem); }
.divider__label--r { left: calc(var(--x) + 3.4rem); }
.divider.is-collapsing .divider__lang { opacity: 0; pointer-events: none; }
.divider.is-collapsed .divider__lang { left: var(--sc-gutter); transform: none; }

/* the arrival control sits on the line, a third of the way down */
.divider__arrive {
  position: absolute; top: 34vh; left: var(--x); transform: translateX(-50%);
  pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  background: none; border: 0; padding: 0.6rem 0.4rem; margin: 0; color: inherit;
  border-radius: var(--sc-r-md);
  transition: opacity 300ms var(--sc-ease-out);
}
.divider__knob {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--gold), var(--sc-e2);
  transition: transform 160ms var(--sc-ease-out);
}
.divider__arrive:hover .divider__knob { transform: scale(1.18); }
.divider__arrive-txt {
  display: grid; justify-items: center; gap: 0.15rem;
  padding: 0.45rem 0.75rem; border-radius: var(--sc-r-sm);
  background: var(--navy); color: var(--ink-on-n);
  box-shadow: var(--sc-e2), var(--sc-edge);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
}
.divider__arrive-k { color: var(--gold); }
.divider__arrive-v { color: var(--ink-on-n); }
.divider__arrive-s { color: var(--soft-on-n); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: none; }
.divider__arrive-s:empty { display: none; }

/* the progress of the argument, foot of the line */
.divider__steps {
  position: absolute; bottom: clamp(1rem, 2.4vw, 1.8rem); left: var(--x); transform: translateX(-50%);
  list-style: none; margin: 0; padding: 0; display: flex; gap: 0.35rem; pointer-events: auto;
}
.divider__steps li a {
  display: block; width: 2.6rem; height: 1.6rem; position: relative; text-decoration: none; color: inherit;
  font-size: 0; /* label lives in the tooltip-like span below at desktop */
}
.divider__steps li a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: var(--gold); opacity: 0.32; transition: opacity 240ms var(--sc-ease-out);
}
.divider__steps li a:hover::before, .divider__steps li a:focus-visible::before { opacity: 0.7; }
.divider__steps li.is-on a::before { opacity: 1; }
.divider__steps li.is-past a::before { opacity: 0.85; }

/* collapse state: labels and control step aside while the line travels */
.divider.is-collapsing .divider__label, .divider.is-collapsing .divider__arrive { opacity: 0; pointer-events: none; }
.divider.is-collapsed .divider__line { opacity: 0.35; }

/* ================================================================= POP == */
.pop {
  position: fixed; z-index: calc(var(--sc-z-chrome) + 1);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(22rem, calc(100vw - 2rem));
  background: var(--white); color: var(--ink-on-w);
  border: 1px solid rgba(11,34,55,0.14); border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e3);
  padding: 1rem 1rem 0.9rem;
}
.pop[hidden] { display: none; }
.pop__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pop__title { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); }
.pop__nav { background: none; border: 1px solid rgba(11,34,55,0.2); border-radius: var(--sc-r-sm); width: 2.2rem; height: 2.2rem; cursor: pointer; font-size: 1.3rem; line-height: 1; }
.pop__nav:hover { background: var(--white-2); }
.pop__hint, .pop__foot { margin: 0.5rem 0 0; font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--soft-on-w); }
.pop__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 0.7rem; }
.pop__dow { font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-align: center; color: var(--soft-on-w); padding: 0.2rem 0 0.4rem; }
.pop__day {
  aspect-ratio: 1; border: 0; background: none; border-radius: var(--sc-r-sm); cursor: pointer;
  font-family: var(--sc-font-mono); font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--ink-on-w);
  transition: background-color 120ms var(--sc-ease-out), color 120ms var(--sc-ease-out);
}
.pop__day:hover { background: var(--white-2); }
.pop__day.is-past, .pop__day[disabled] { color: rgba(76,90,102,0.45); cursor: default; background: none; }
.pop__day.is-busy { color: rgba(76,90,102,0.55); text-decoration: line-through; cursor: not-allowed; }
.pop__day.is-in { background: rgba(241,199,91,0.35); border-radius: 0; }
.pop__day.is-a, .pop__day.is-d { background: var(--navy); color: var(--ink-on-n); }
.pop__day.is-a { border-radius: var(--sc-r-sm) 0 0 var(--sc-r-sm); }
.pop__day.is-d { border-radius: 0 var(--sc-r-sm) var(--sc-r-sm) 0; }
.pop__day.is-a.is-d { border-radius: var(--sc-r-sm); }
.pop__blank { aspect-ratio: 1; }
.pop__close { margin-top: 0.8rem; width: 100%; min-height: 2.5rem; background: var(--navy); color: var(--ink-on-n); border: 0; border-radius: var(--sc-r-sm); font-family: var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--sc-t-xs); cursor: pointer; }
.pop__close:hover { background: var(--navy-2); }

/* ================================================================ HERO == */
.hero__stage { overflow: clip; }
.hero__stage .half { overflow: clip; height: 100%; }
.plane { position: absolute; will-change: transform; }
.plane--back { inset: -12% 0 -6% 0; z-index: 0; }
.plane--back img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
/* Mask the plate away from the copy: the type gets a clean ground and the
   photograph keeps its full contrast everywhere else. No overlay. */
.half--l .plane--back { -webkit-mask: linear-gradient(to bottom, #000 0%, #000 40%, transparent 66%); mask: linear-gradient(to bottom, #000 0%, #000 40%, transparent 66%); }
.half--r .plane--back { -webkit-mask: linear-gradient(to bottom, #000 0%, #000 38%, transparent 64%); mask: linear-gradient(to bottom, #000 0%, #000 38%, transparent 64%); }
.half--r .plane--back img { filter: saturate(0.92); }
/* atmosphere: a haze plane keyed to the season, moving at its own rate */
.plane--haze { inset: -20% -10% auto -10%; height: 70%; z-index: 1; background: radial-gradient(60% 55% at 50% 30%, var(--haze), transparent 70%); transition: background 600ms var(--sc-ease-out); }
/* the floating detail frame, between the plate and the type */
.plane--card { z-index: 2; margin: 0; width: clamp(9rem, 17vw, 15rem); box-shadow: var(--sc-e3), var(--sc-edge); border-radius: var(--sc-r-sm); overflow: hidden; background: var(--sc-surface); }
.plane--card img { width: 100%; height: auto; }
.plane--card-l { right: clamp(1rem, 6vw, 5rem); top: 12vh; }
.plane--card-r { right: clamp(1rem, 6vw, 5rem); top: 10vh; width: clamp(7rem, 12vw, 11rem); }
.hero__copy { z-index: 4; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(2.6rem, 9vh, 6.5rem); max-width: none; }
.hero__copy .hero__h { max-width: 12ch; font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.6rem); }
.half--r .hero__copy .hero__h { color: var(--ink-on-n); }
.hero__sub { margin: 1.1rem 0 0; max-width: 34ch; font-size: var(--sc-t-base); line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty; }
.half--r .hero__sub { color: var(--soft-on-n); }
.hero__copy .cta { margin-top: 1.4rem; }

/* =============================================================== ROOMS == */
/* a flow section straight after a pinned act takes reduced top padding: the
   stage above already spends a viewport leaving */
.rooms__col { padding: clamp(1.6rem, 3.5vw, 3.2rem) var(--sc-gutter) clamp(3.5rem, 8vw, 8rem); }
.rooms__inner { max-width: 34rem; }
.rooms__where { margin: 0.4rem 0 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); letter-spacing: 0.06em; color: var(--sc-ink-soft); }
.spec { margin: 1.8rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--sc-hairline-strong); }
.spec > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--sc-hairline); }
.spec dt { margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: 0.2em; }
.spec dd { margin: 0; text-wrap: pretty; }
.rooms__inner .cta { margin-top: 1.8rem; }
.rooms__photos { margin-top: clamp(2rem, 4vw, 3.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 1.4vw, 1.1rem); align-items: start; }
.ph { margin: 0; overflow: hidden; border-radius: var(--sc-r-sm); box-shadow: var(--sc-e2); background: var(--sc-surface); }
.ph img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.ph--wide { grid-column: 1 / -1; }
.ph--wide img { aspect-ratio: 16 / 9; }
.ph--tall img { aspect-ratio: 3 / 4; }
/* photos overlap the column edge slightly: one element crossing another's
   boundary is more depth than any shadow */
.half--l .rooms__photos { margin-right: calc(var(--sc-gutter) * -0.35); }
.half--r .rooms__photos { margin-left: calc(var(--sc-gutter) * -0.35); }

/* ============================================================== LEDGER == */
.ledger__stage { overflow: clip; }
.ledger__col { padding: clamp(3rem, 7vh, 5rem) var(--sc-gutter) clamp(3rem, 7vh, 5rem); display: grid; align-content: center; }
.ledger__title { margin: 0 0 clamp(1rem, 3vh, 2rem); }
.ledger__list { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.ledger__list li {
  display: grid; grid-template-columns: 5.6rem 1fr; grid-template-rows: auto auto; column-gap: 1.1rem; align-content: center;
  padding: 0.7rem 0; border-top: 1px solid var(--sc-hairline);
}
.ledger__list li img { grid-row: 1 / 3; width: 5.6rem; height: 4.1rem; object-fit: cover; border-radius: var(--sc-r-sm); box-shadow: var(--sc-e1); }
.ledger__list li b { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-lg); line-height: 1.1; letter-spacing: var(--sc-track-snug); }
.ledger__list li span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; text-wrap: pretty; margin-top: 0.15rem; }
.half--r .ledger__list li span { color: var(--soft-on-n); }

/* ============================================================== ISLAND == */
.island__col { padding: clamp(1.6rem, 3.5vw, 3.2rem) var(--sc-gutter) clamp(4rem, 9vw, 9rem); }
.island__inner { max-width: 30rem; }
.island__h { font-style: italic; }
.island__p { margin: 0.9rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 38ch; text-wrap: pretty; }
.island__grid { margin-top: clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.8rem, 2vw, 1.4rem); }
.island__grid figure { margin: 0; }
.island__grid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sc-r-sm); box-shadow: var(--sc-e2); }
.island__grid figcaption { margin-top: 0.5rem; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.island__credit { margin: clamp(2rem, 4vw, 3rem) 0 0; font-size: 0.72rem; line-height: 1.5; color: var(--soft-on-n); max-width: 40ch; }

/* =============================================================== CLOSE == */
.close__stage { overflow: clip; background: var(--navy); }
.close__photo { position: absolute; inset: 0; z-index: 0; }
.close__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; max-width: none; }
.close__white {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--split); z-index: 1;
  background: var(--white); color: var(--ink-on-w);
  display: grid; align-content: end; padding: 0 var(--sc-gutter) clamp(2.6rem, 9vh, 6.5rem);
  overflow: clip; will-change: width;
}
.close__whiteline { margin: 0; font-family: var(--sc-font-display); font-size: clamp(1.8rem, 1rem + 2.6vw, 3.4rem); line-height: 1.02; letter-spacing: var(--sc-track-snug); max-width: 14ch; color: var(--ink-on-w); }
.close__navy { position: absolute; top: 0; bottom: 0; right: 0; left: var(--split); z-index: 1; background: var(--navy); will-change: left, opacity; }
.close__panel {
  position: absolute; z-index: 2; top: 0; bottom: 0; right: 0; left: var(--split);
  display: grid; align-items: center; justify-items: start;
  padding: clamp(3rem, 7vh, 5rem) var(--sc-gutter);
  color: var(--ink-on-n);
  --sc-canvas: var(--navy); --sc-surface: var(--navy-2); --sc-ink: var(--ink-on-n); --sc-ink-soft: var(--soft-on-n); --sc-accent: var(--gold); --sc-accent-ink: var(--gold-ink);
  will-change: left;
}
.close__panel-in {
  width: min(100%, 36rem);
  background: color-mix(in oklab, var(--navy) 90%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(241,236,225,0.12); border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e3), var(--sc-edge);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.close__h { color: var(--ink-on-n); max-width: 14ch; }
.close__lede { margin: 1rem 0 0; color: var(--soft-on-n); max-width: 46ch; font-size: var(--sc-t-base); line-height: 1.55; text-wrap: pretty; }

.req { margin-top: 1.4rem; display: grid; gap: 0.9rem; }
.req__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.req__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.fld { display: grid; gap: 0.35rem; }
.fld > span { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft-on-n); }
.fld input, .fld select {
  width: 100%; min-height: 2.7rem; padding: 0.45rem 0.7rem;
  background: rgba(241,236,225,0.06); color: var(--ink-on-n);
  border: 1px solid rgba(241,236,225,0.22); border-radius: var(--sc-r-sm);
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.fld input:hover, .fld select:hover { border-color: rgba(241,236,225,0.4); }
.fld input:focus-visible, .fld select:focus-visible { outline-color: var(--gold); border-color: var(--gold); }
.fld input::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.7); }
.fld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F1ECE1' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2rem; }
.fld select option { color: #0B2237; background: #F4F1EA; }
.req__cal { justify-self: start; margin-top: -0.3rem; background: none; border: 0; padding: 0.2rem 0; color: var(--gold); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 0.25em; }
.ack { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-size: var(--sc-t-sm); color: var(--soft-on-n); line-height: 1.45; }
.ack input { margin: 0.25rem 0 0; width: 1rem; height: 1rem; accent-color: var(--gold); }
.ack a { color: var(--ink-on-n); }
.req__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 0.3rem; }
.req__note { margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.04em; color: var(--soft-on-n); }
.req__msg { margin: 0; min-height: 1.2em; font-size: var(--sc-t-sm); color: var(--ink-on-n); }
.req__msg:empty { display: none; }
.req__msg.is-err { color: #F6C9B4; }
.req__msg a { color: var(--gold); }
.req.is-sent .req__row, .req.is-sent .ack, .req.is-sent .req__actions, .req.is-sent .req__cal { display: none; }

/* an opaque strip, not text over the terrace floor */
.foot {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: 0.8rem var(--sc-gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.6rem;
  background: var(--navy); color: var(--ink-on-n);
  font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.06em;
  border-top: 1px solid rgba(241,199,91,0.35);
}
.foot__line { margin: 0; }
.foot a { color: inherit; }
.mark--foot .mark__glyph { width: 1.2rem; height: 1.35rem; }

/* ---------------------------------------------------------------- greek -- */
/* Greek runs 15 to 25 percent longer. Headings step down a notch, and
   uppercase mono labels lose their tonos (Chrome/Firefox do this under
   lang="el"; the tracking is eased so words don't break apart). */
html[lang="el"] .hero__copy .hero__h { font-size: clamp(2.3rem, 1.2rem + 3.8vw, 4.8rem); max-width: 13ch; }
html[lang="el"] .sc-display--lg { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.6rem); }
html[lang="el"] .close__h { max-width: 16ch; }
html[lang="el"] .close__whiteline { max-width: 16ch; font-size: clamp(1.6rem, 0.9rem + 2.3vw, 3rem); }
html[lang="el"] .divider__label, html[lang="el"] .mark__word { letter-spacing: 0.16em; }
html[lang="el"] .cta { letter-spacing: 0.05em; }
html[lang="el"] .spec > div { grid-template-columns: 8.2rem 1fr; }

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  html, body, .half, .plane--haze { transition: none; }
  .plane--back { inset: 0; }
  /* the collapse still happens (it is the ending, not decoration) but as a
     fade rather than a slide: the page script sets --split to 0 and lets the
     white plate cross-dissolve */
  .close__white { transition: opacity 400ms var(--sc-ease-out); }
}

/* --------------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  :root { --bar-h: 3rem; }
  /* the divider becomes a top rule carrying both labels and the arrival control */
  .divider { inset: 0 0 auto 0; height: var(--bar-h); pointer-events: auto;
    background: var(--navy); color: var(--ink-on-n); border-bottom: 1px solid var(--gold); }
  .divider__line { display: none; }
  .divider__label { top: 50%; transform: translateY(-50%); font-size: 0.62rem; }
  .divider__label--l { left: var(--sc-gutter); right: auto; color: var(--ink-on-n); }
  .divider__label--r { right: var(--sc-gutter); left: auto; color: var(--ink-on-n); }
  .divider__arrive { top: 50%; left: 50%; transform: translate(-50%, -50%); flex-direction: row; gap: 0.5rem; padding: 0.25rem 0.4rem; }
  .divider__knob { width: 10px; height: 10px; box-shadow: 0 0 0 2px var(--navy), 0 0 0 3px var(--gold); }
  .divider__arrive-txt { padding: 0.25rem 0.5rem; box-shadow: none; background: rgba(241,236,225,0.08); grid-auto-flow: column; gap: 0.45rem; font-size: 0.62rem; }
  .divider__arrive-s { display: none !important; }
  .divider__steps { display: none; }
  .divider.is-collapsing .divider__label, .divider.is-collapsing .divider__arrive { opacity: 1; pointer-events: auto; }
  .divider__label--r { display: none; }
  .divider__lang { top: 50%; left: auto; right: var(--sc-gutter); transform: translateY(-50%); box-shadow: none; }
  .divider__lang button { min-width: 2.75rem; min-height: 2rem; font-size: 0.62rem; }
  .divider.is-collapsing .divider__lang, .divider.is-collapsed .divider__lang { opacity: 1; pointer-events: auto; left: auto; transform: translateY(-50%); }
  .divider__arrive { left: 46%; }

  .split { grid-template-columns: 1fr; }
  .hero__stage { grid-template-rows: 1fr 1fr; padding-top: var(--bar-h); }
  .hero .mark { top: calc(var(--bar-h) + 0.9rem); }
  .hero__copy { bottom: clamp(1rem, 3vh, 1.6rem); }
  .hero__copy .hero__h { font-size: var(--sc-t-2xl); max-width: 14ch; }
  .hero__sub { font-size: var(--sc-t-sm); margin-top: 0.6rem; max-width: 30ch; }
  .hero__copy .cta { margin-top: 0.8rem; min-height: 2.5rem; }
  .half--l .plane--back, .half--r .plane--back { inset: -8% 0 -4% 0; -webkit-mask: linear-gradient(to bottom, #000 0%, #000 26%, transparent 50%); mask: linear-gradient(to bottom, #000 0%, #000 26%, transparent 50%); }
  .plane--card { width: clamp(5.5rem, 26vw, 8rem); }
  .plane--card-l { top: 4vh; right: var(--sc-gutter); }
  .plane--card-r { top: 3vh; right: var(--sc-gutter); width: clamp(4.5rem, 20vw, 6.5rem); }

  .rooms__photos { grid-template-columns: 1fr 1fr; }
  .half--l .rooms__photos, .half--r .rooms__photos { margin-inline: 0; }

  .ledger__stage { grid-template-rows: 1fr 1fr; padding-top: var(--bar-h); }
  .ledger__col { padding-top: clamp(1rem, 3vh, 2rem); }
  .ledger__title { font-size: var(--sc-t-xl); margin-bottom: 0.4rem; }
  .ledger__list li { grid-template-columns: 3rem 1fr; padding: 0.4rem 0; }
  .ledger__list li img { width: 3rem; height: 2.3rem; }
  .ledger__list li b { font-size: var(--sc-t-base); }
  .ledger__list li span { font-size: 0.78rem; line-height: 1.35; }

  .island__grid { grid-template-columns: 1fr 1fr; }

  /* the collapse on a phone: the white plate shrinks from the top instead of
     travelling to an edge, and the panel takes the whole height */
  .close__stage { padding-top: var(--bar-h); }
  .close__white { width: 100%; top: var(--bar-h); bottom: auto; height: calc(26svh * (1 - var(--collapse, 0))); padding-bottom: 1rem; will-change: height; }
  .close__whiteline { font-size: var(--sc-t-lg); }
  .close__navy { left: 0; top: calc(var(--bar-h) + 26svh * (1 - var(--collapse, 0))); }
  .close__panel { left: 0; top: calc(var(--bar-h) + 26svh * (1 - var(--collapse, 0))); bottom: 0; padding: 0.8rem var(--sc-gutter) 3.6rem; align-items: start; overflow: auto; will-change: top; }
  .close__panel-in { padding: 0.9rem; width: 100%; }
  .close__h { font-size: var(--sc-t-xl); }
  .close__lede { display: none; }
  .req { margin-top: 0.8rem; gap: 0.6rem; }
  .req__row--2 { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .fld input, .fld select { min-height: 2.5rem; }
  .req__actions { gap: 0.5rem 1rem; }
  .foot { padding: 0.5rem var(--sc-gutter); gap: 0.15rem 0.7rem; font-size: 0.6rem; }
  .foot .mark__word { display: none; }
}
@media (max-width: 400px) {
  .hero__copy .hero__h { font-size: clamp(1.7rem, 8vw, 2.1rem); }
}

/* ledger on phones: two lists have to share one viewport */
@media (max-width: 860px) {
  .ledger__col { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .ledger__title { font-size: var(--sc-t-lg); margin-bottom: 0.2rem; }
  .ledger__list li { grid-template-columns: 2.6rem 1fr; padding: 0.28rem 0; column-gap: 0.7rem; }
  .ledger__list li img { width: 2.6rem; height: 2rem; }
  .ledger__list li b { font-size: 0.95rem; }
  .ledger__list li span { font-size: 0.72rem; line-height: 1.3; margin-top: 0.05rem; }
  .close__panel { padding-bottom: 4.6rem; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .ledger__list li span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}

/* short phones (640px and under): each hero half is under 300px tall, so the
   subline goes and the plate keeps to the top third */
@media (max-width: 860px) and (max-height: 700px) {
  .hero__sub { display: none; }
  .hero__copy .cta { margin-top: 0.6rem; min-height: 2.3rem; }
  .half--l .plane--back, .half--r .plane--back { -webkit-mask: linear-gradient(to bottom, #000 0%, #000 18%, transparent 42%); mask: linear-gradient(to bottom, #000 0%, #000 18%, transparent 42%); }
  .plane--card { width: clamp(4.5rem, 20vw, 6rem); }
  .plane--card-r { width: clamp(3.6rem, 16vw, 5rem); }
}

/* ---------------------------------------------------- request on phones -- */
/* The close act is pinned, so the panel must fit the screen: a scroll box
   inside a pinned stage fights the page for the finger. Fields stay two to a
   row at every width, the guests field is narrow, and the panel keeps clear
   of the footer by its measured height (--foot-h, set by the page script). */
@media (max-width: 860px) {
  .req__row--suite { grid-template-columns: 1fr 4.4rem; }
  .req { gap: 0.5rem; margin-top: 0.6rem; }
  .fld { gap: 0.2rem; }
  .fld > span { font-size: 0.62rem; }
  .fld input, .fld select { min-height: 2.45rem; padding: 0.35rem 0.55rem; font-size: 16px; }  /* 16px: iOS won't zoom */
  .fld select { padding-right: 1.6rem; background-position: right 0.5rem center; }
  .fld input[type="date"] { font-size: 15px; }
  .close__h { font-size: var(--sc-t-lg); max-width: none; }
  .ack { font-size: 0.76rem; line-height: 1.38; gap: 0.5rem; }
  .req__actions .cta--big { min-height: 2.9rem; }
  .close__panel { padding-bottom: calc(var(--foot-h, 4.6rem) + 0.5rem); overflow: visible; }
  .foot { gap: 0.1rem 0.6rem; letter-spacing: 0.02em; }
}
/* short phones: the extras step aside. The calendar is still one tap away in
   the top bar, and the native date fields open their own picker. */
@media (max-width: 860px) and (max-height: 760px) {
  .close__panel { padding-top: 0.5rem; }
  .close__panel-in { padding: 0.75rem 0.8rem; }
  .foot__line:first-of-type { display: none; }
  .req__actions { margin-top: 0.1rem; }
}
@media (max-width: 860px) and (max-height: 600px) {
  .req__cal, .req__note { display: none; }
  .close__h { font-size: var(--sc-t-base); }
}
/* narrow phones: the bar holds two things, the arrival control on the left and
   the language switch on the right. The side label goes; on a stacked phone
   layout the columns are already one above the other. */
@media (max-width: 420px) {
  .divider__label--l { display: none; }
  .divider__arrive { left: calc(var(--sc-gutter) - 0.4rem); transform: translateY(-50%); }
}
/* grid children and date fields must be allowed to shrink below their
   intrinsic width, or the second column runs off a 320px screen */
.req__row--2 > *, .fld input, .fld select { min-width: 0; }
@media (max-width: 360px) {
  .fld input[type="date"] { font-size: 14px; padding-inline: 0.4rem; }
  .fld input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 0; }
}
/* links added for the live homepage: the room names open their own pages,
   the place captions open the discover-milos guides */
.rooms__name { color: inherit; text-decoration: none; }
.rooms__name:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.island__grid figcaption a { color: inherit; text-decoration: none; }
.island__grid figcaption a:hover, .island__grid figcaption a:focus-visible { color: var(--sc-ink); text-decoration: underline; text-underline-offset: 0.3em; }

/* the photographs are links too: a place photo follows its caption link
   (stretched, so the keyboard still lands on the caption), a room photo
   links to its apartment page */
.island__grid figure { position: relative; }
.island__grid figcaption a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.island__grid figure img { transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.island__grid figure:hover img { transform: scale(1.03); }
.island__grid figure:hover figcaption a { color: var(--sc-ink); text-decoration: underline; text-underline-offset: 0.3em; }
.ph { overflow: hidden; }
.ph__link { display: block; height: 100%; }
.ph__link img { transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.ph__link:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .island__grid figure:hover img, .ph__link:hover img { transform: none; } }