/* alumni-sans-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Alumni Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/alumni-sans-cyrillic-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* alumni-sans-cyrillic-600-normal */
@font-face {
  font-family: 'Alumni Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/alumni-sans-cyrillic-600-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* alumni-sans-vietnamese-600-normal */
@font-face {
  font-family: 'Alumni Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/alumni-sans-vietnamese-600-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* alumni-sans-latin-ext-600-normal */
@font-face {
  font-family: 'Alumni Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/alumni-sans-latin-ext-600-normal.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;
}

/* alumni-sans-latin-600-normal */
@font-face {
  font-family: 'Alumni Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/alumni-sans-latin-600-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;
}
/* alumni-sans-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Alumni Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/alumni-sans-cyrillic-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* alumni-sans-cyrillic-700-normal */
@font-face {
  font-family: 'Alumni Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/alumni-sans-cyrillic-700-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* alumni-sans-vietnamese-700-normal */
@font-face {
  font-family: 'Alumni Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/alumni-sans-vietnamese-700-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* alumni-sans-latin-ext-700-normal */
@font-face {
  font-family: 'Alumni Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/alumni-sans-latin-ext-700-normal.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;
}

/* alumni-sans-latin-700-normal */
@font-face {
  font-family: 'Alumni Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/alumni-sans-latin-700-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;
}
/* old-standard-tt-cyrillic-ext-400-italic */
@font-face {
  font-family: 'Old Standard TT';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/old-standard-tt-cyrillic-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* old-standard-tt-cyrillic-400-italic */
@font-face {
  font-family: 'Old Standard TT';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/old-standard-tt-cyrillic-400-italic.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* old-standard-tt-vietnamese-400-italic */
@font-face {
  font-family: 'Old Standard TT';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/old-standard-tt-vietnamese-400-italic.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* old-standard-tt-latin-ext-400-italic */
@font-face {
  font-family: 'Old Standard TT';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/old-standard-tt-latin-ext-400-italic.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;
}

/* old-standard-tt-latin-400-italic */
@font-face {
  font-family: 'Old Standard TT';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/old-standard-tt-latin-400-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;
}
/* pt-mono-cyrillic-ext-400-normal */
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/pt-mono-cyrillic-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* pt-mono-cyrillic-400-normal */
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/pt-mono-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* pt-mono-latin-ext-400-normal */
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/pt-mono-latin-ext-400-normal.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;
}

/* pt-mono-latin-400-normal */
@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/pt-mono-latin-400-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;
}

/* ============================================================
   Luna Hotel — «Печатный гранд-отель»
   Design tokens copied verbatim from ~/.claude/skills/luna-hotel/tokens.css
   ============================================================ */
:root {
  /* paper & ink */
  --luna-paper:      #F3ECDD;
  --luna-paper-2:    #E9DFC9;
  --luna-card:       #FBF8F1;
  --luna-ink:        #231F1A;
  --luna-ink-60:     rgba(35,31,26,.62);
  --luna-rule:       rgba(35,31,26,.28);

  /* signature accents */
  --luna-neon:       #E2452F;
  --luna-neon-glow:  #FF6A55;
  --luna-gold:       #D4A84B;
  --luna-mustard:    #E8CB6E;
  --luna-rust:       #8C3B1E;

  /* dark sections */
  --luna-lobby:      #1E3328;
  --luna-lobby-2:    #2A4638;
  --luna-velvet:     #5E1D26;
  --luna-on-dark:    #F3ECDD;

  /* type */
  --font-display: "Alumni Sans", "Oswald", Impact, sans-serif;
  --font-mono:    "PT Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-italic:  "Old Standard TT", Georgia, serif;

  --fs-hero: clamp(64px, 9.17vw, 132px);
  --fs-h1:   clamp(56px, 6.2vw, 92px);
  --fs-h2:   clamp(44px, 5.5vw, 80px);
  --fs-h3:   clamp(28px, 3vw, 40px);
  --fs-body: 15px;
  --fs-meta: 12px;
  --lh-display: .86;
  --lh-body: 1.6;
  --track-label: .18em;

  /* layout */
  --container: 1280px;
  --gutter: 24px;
  --space-section: clamp(72px, 9vw, 140px);
  --overlap: 48px;
  --radius: 0;
  --border: 1px solid var(--luna-rule);
  --border-strong: 1.5px solid var(--luna-ink);
}

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--luna-paper);
  color: var(--luna-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: -.01em;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0; }
button { font: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* meta / labels */
.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--luna-rust);
  font-size: clamp(24px, 2.4vw, 32px);
  margin: 0 0 10px;
  text-transform: none;
}
.eyebrow--on-dark { color: var(--luna-mustard); }

.photo-caption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--luna-ink-60);
}
.photo-caption--on-dark { color: rgba(243,236,221,.6); }

/* ============================================================
   Buttons + links
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1.5px solid var(--luna-ink);
  color: var(--luna-ink);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--luna-ink); color: var(--luna-paper); }

.btn-primary {
  background: var(--luna-neon);
  border-color: var(--luna-neon);
  color: var(--luna-paper);
}
.btn-primary:hover { background: transparent; color: var(--luna-neon); border-color: var(--luna-neon); }

.btn-on-dark { color: var(--luna-on-dark); border-color: rgba(243,236,221,.6); }
.btn-on-dark:hover { background: var(--luna-on-dark); color: var(--luna-lobby); border-color: var(--luna-on-dark); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--luna-ink);
  border-bottom: 1px solid var(--luna-rule);
  padding-bottom: 2px;
  transition: border-color .18s ease, color .18s ease;
}
.link-arrow:hover { border-color: var(--luna-ink); color: var(--luna-neon); }
.link-arrow--on-dark { color: var(--luna-on-dark); border-color: rgba(243,236,221,.35); }
.link-arrow--on-dark:hover { color: var(--luna-mustard); border-color: var(--luna-mustard); }

/* stamp */
.stamp {
  display: inline-block;
  border: 2px solid var(--luna-rust);
  color: var(--luna-rust);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 11px 18px;
  transform: rotate(-4deg);
  background: var(--luna-paper);
}

/* price tag */
.price-tag {
  display: inline-block;
  background: var(--luna-mustard);
  color: var(--luna-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  padding: 8px 14px 8px 20px;
  position: relative;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
.price-tag::before {
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--luna-card);
  transform: translateY(-50%);
}

/* todo chip — marks unconfirmed facts inline, in placeholders, everywhere */
.todo {
  display: inline-block;
  background: var(--luna-mustard);
  color: var(--luna-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.5;
  padding: 2px 6px;
}

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   Top bar + nav
   ============================================================ */
.topbar {
  border-bottom: var(--border);
  background: var(--luna-paper);
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 9px;
  padding-bottom: 9px;
  flex-wrap: wrap;
  gap: 6px;
}
.topbar .meta { color: var(--luna-ink-60); }
.topbar a { text-decoration: none; }
.topbar a:hover { color: var(--luna-neon); }

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--luna-paper);
  border-bottom: var(--border-strong);
}
.nav .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 18px;
  padding-bottom: 18px;
  gap: 16px;
}
.nav__links {
  display: flex;
  gap: 28px;
}
.nav__links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.nav__links a:hover { border-color: currentColor; color: var(--luna-neon); }

.wordmark {
  justify-self: center;
  text-align: center;
  line-height: 1;
}
.wordmark a { text-decoration: none; }
.wordmark__type {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wordmark__note {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--luna-ink-60);
}
.wordmark__logo { display: block; height: 58px; width: auto; margin: 0 auto; }
.footer__brand .wordmark__logo { height: 92px; margin: 0; }
.nav__cta { justify-self: end; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  background: var(--luna-paper);
}
.hero__frame {
  position: relative;
}
.hero__photo {
  position: relative;
  height: 82vh;
  min-height: 640px;
  max-height: 840px;
  overflow: hidden;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}
.hero--illustration .hero__photo picture { display: block; width: 100%; height: 100%; }
.hero--illustration .hero__photo img { display: block; object-position: 65% 50%; }
/* Local scrim behind the kicker + first H1 line, distinct from .hero__fade
   below (which handles the photo→paper colour transition at the very
   bottom). Read text needs contrast even where the fade hasn't kicked in
   yet — this covers the bottom 45% with a translucent wash that never
   reaches paper colour, so the photo stays visible through it. */
.hero__scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(20,14,10,0) 0%, rgba(20,14,10,.42) 60%, rgba(20,14,10,.55) 100%);
  pointer-events: none;
}
.hero--illustration .hero__scrim {
  height: 100%;
  background: linear-gradient(180deg, rgba(22,36,28,0) 0%, rgba(22,36,28,.35) 30%, rgba(22,36,28,.82) 60%, rgba(22,36,28,.95) 100%);
}
/* darker pass for busier / lighter daylight photos (e.g. restaurant.html
   hero), where the base scrim alone isn't enough for text contrast */
.hero__scrim--strong {
  background: linear-gradient(180deg, rgba(20,14,10,0) 0%, rgba(20,14,10,.55) 55%, rgba(20,14,10,.72) 100%);
  height: 55%;
}
.hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  background: linear-gradient(180deg, rgba(35,31,26,0) 0%, rgba(20,16,12,.55) 55%, var(--luna-paper) 100%);
}
@media (min-width: 761px) {
  .hero--illustration .hero__fade {
    height: 3%;
    background: linear-gradient(180deg, rgba(22,36,28,0), var(--luna-paper));
  }
  .hero--illustration .hero__title .ln--paper { margin-top: 43px; }
}
.hero__neon {
  position: absolute;
  right: clamp(20px, 4vw, 64px);
  top: 40px;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 64px);
  letter-spacing: .32em;
  color: var(--luna-neon-glow);
  text-shadow: 0 0 6px #ff3b2a, 0 0 18px rgba(255,59,42,.75), 0 0 44px rgba(255,59,42,.4);
  padding: 18px 11px;
  border: 2px solid rgba(255,106,85,.7);
  box-shadow: 0 0 16px rgba(255,59,42,.35), inset 0 0 16px rgba(255,59,42,.22);
  background: rgba(20,16,12,.18);
  opacity: 1;
  z-index: 2;
}
/* Flicker-in is opt-in via a JS-toggled class removed on animationend, so
   the element's resting state is plain static CSS (opacity:1 above) with
   no animation object attached — immune to viewport-resize edge cases
   (headless full-page capture, zoom, orientation change) restarting a
   long-lived animation mid-flicker. No-JS fallback: already fully lit. */
.hero__neon.is-flickering {
  animation: neonFlicker .9s steps(1, end) 1 backwards;
}
.hero--illustration .hero__neon { display: none; }
@keyframes neonFlicker {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  6%   { opacity: .3; }
  9%   { opacity: 1; }
  13%  { opacity: .5; }
  16%  { opacity: 1; }
  55%  { opacity: 1; }
  58%  { opacity: .4; }
  62%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Editorial spill: kicker + first two H1 lines sit over the photo (pulled
   up over .hero__frame's bottom edge via negative margin); the third line,
   subtitle and buttons continue in normal flow on the paper below. One
   semantic H1, no absolute-positioning hacks. */
.hero__overlap {
  position: relative;
  z-index: 3;
  margin-top: -260px;
  padding-top: 40px;
}
.hero__kicker {
  color: var(--luna-on-dark);
  margin-bottom: 16px;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.hero__title {
  font-size: var(--fs-hero);
  margin: 0 0 28px;
}
.hero__title .ln { display: block; }
.hero__title .ln--photo {
  color: var(--luna-on-dark);
  text-shadow: 0 2px 22px rgba(0,0,0,.45);
}
.hero__title .ln--paper {
  color: var(--luna-ink);
}
.hero__sub {
  max-width: 46ch;
  color: var(--luna-ink-60);
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 30px;
}
.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

.hero__stamp-wrap { position: relative; padding-bottom: 8px; }
.hero__stamp-wrap .stamp { display: inline-block; }

@media (max-width: 900px) {
  .hero__overlap { margin-top: -160px; padding-top: 24px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .hero--illustration .hero__overlap { margin-top: calc(-104px - 15vw); }
}
@media (min-width: 901px) {
  .hero--illustration .hero__overlap {
    margin-top: calc(-260px - clamp(0px, calc(15.77vw - 146px), 81px));
  }
}

/* ============================================================
   Facts ribbon
   ============================================================ */
.facts {
  border-bottom: var(--border);
  padding: 22px 0;
}
.facts__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--luna-ink-60);
}

/* booklet "table of contents" strip — marks paper→paper seams on the
   homepage where two light sections would otherwise run together with no
   visual break. Active section (scroll-spy, see index.html script) reads
   in rust. */
.toc { border-top: var(--border); border-bottom: var(--border); }
.toc__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 16px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--luna-ink-60);
}
.toc__item { text-decoration: none; color: inherit; transition: color .18s ease; }
.toc__item:hover { color: var(--luna-ink); }
.toc__item.is-active { color: var(--luna-rust); }
.toc__sep { opacity: .5; }

/* ============================================================
   Section rhythm
   ============================================================ */
.section { position: relative; }
.section--history   { padding: 140px 0 120px; }
.section--rooms      { padding: 130px 0 100px; }
.section--rooms--tight { padding-top: 0; }
.section--restaurant { padding: var(--space-section) 0; background: var(--luna-lobby); color: var(--luna-on-dark); }
.section--details    { padding: 110px 0 120px; }
.section--city        { padding: 120px 0 100px; background: var(--luna-paper-2); }
.section--city--tight-top { padding-top: calc(var(--space-section) / 2); }
.section--reviews    { padding: 80px 0; }
.section--booking    { padding: 100px 0; background: var(--luna-paper-2); border-top: var(--border); border-bottom: var(--border); }

.section-head { margin-bottom: 56px; max-width: 780px; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.section-head--split .section-note { max-width: 320px; font-size: 13px; color: var(--luna-ink-60); padding-bottom: 6px; }
.section--restaurant .section-note { color: rgba(243,236,221,.65); }

/* ============================================================
   01 — История
   ============================================================ */
.history__grid {
  display: grid;
  grid-template-columns: 1.15fr .95fr;
  align-items: center;
}
.history__media { position: relative; }
.history__media img { width: 100%; height: 560px; object-fit: cover; }
.history__card {
  position: relative;
  z-index: 2;
  margin-left: calc(var(--overlap) * -1);
  background: var(--luna-card);
  border: var(--border);
  padding: 48px 44px;
}
.history__card p { margin-bottom: 26px; max-width: 46ch; }
.history__card h2 { font-size: var(--fs-h3); line-height: .9; margin-bottom: 22px; }

/* small square photo tucked under the card (restaurant.html "Зал") —
   sits in normal flow, right-aligned under the card column */
.history__extra {
  width: 180px;
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  margin: 16px 0 0 auto;
}
.history__extra img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   02 — Номера
   ============================================================ */
.rooms__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
.room-card {
  background: var(--luna-card);
  border: var(--border);
  display: flex;
  flex-direction: column;
}
.room-card__media { height: 200px; overflow: hidden; }
.room-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.room-card:hover .room-card__media img { transform: scale(1.04); }
.room-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.room-card__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--luna-ink-60); margin-bottom: 6px; }
.room-card__name { font-size: 28px; margin-bottom: 16px; }
.room-card__specs {
  margin: 0 0 20px;
  border-top: 1px dashed var(--luna-rule);
  border-bottom: 1px dashed var(--luna-rule);
}
.room-card__specs div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); column-gap: 12px; align-items: start; padding: 7px 0; font-size: 12px; }
.room-card__specs dt { color: var(--luna-ink-60); font-weight: 400; }
.room-card__specs dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.room-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.room-card__footer .link-arrow { font-size: 12px; white-space: nowrap; }

.rooms__note {
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--luna-ink-60);
}

/* ============================================================
   03 — Ресторан
   ============================================================ */
.restaurant__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.restaurant__text p { max-width: 44ch; margin-bottom: 30px; font-size: 15px; color: rgba(243,236,221,.85); }
.restaurant__collage {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  height: 480px;
}
/* 4-photo variant (index.html): big + 3 stacked, still zero empty cells */
.restaurant__collage--quad { grid-template-rows: repeat(3, 1fr); }
.restaurant__collage > div { position: relative; overflow: hidden; }
.restaurant__collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.restaurant__collage .big { grid-row: 1 / 3; }
.restaurant__collage--quad .big { grid-row: 1 / 4; }
.restaurant__collage .photo-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 8px 10px;
  background: linear-gradient(0deg, rgba(20,16,12,.78) 0%, rgba(20,16,12,0) 100%);
  color: var(--luna-on-dark);
  font-size: 10px;
}

/* ============================================================
   04 — Детали
   ============================================================ */
.details__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  grid-auto-rows: calc((min(100vw, 1280px) - 2 * var(--gutter) - 2 * 16px) / 3);
}
.details__item { position: relative; overflow: hidden; background: var(--luna-ink); }
.details__item img { width: 100%; height: 100%; object-fit: cover; }
.details__item--big { grid-column: span 2; grid-row: span 2; }
.details__grid--quartet .details__item--wide { grid-column: span 2; }
.details__item .photo-caption,
.room-gallery__thumbs > div .photo-caption,
.history__extra .photo-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 10px 12px;
  background: linear-gradient(0deg, rgba(20,16,12,.78) 0%, rgba(20,16,12,0) 100%);
  color: var(--luna-on-dark);
  font-size: 10px;
}
.room-gallery__thumbs > div { position: relative; }

/* ============================================================
   05 — Город
   ============================================================ */
.city__strip { height: 680px; overflow: hidden; margin-bottom: 0; width: 100vw; margin-left: calc(50% - 50vw); }
.city__strip img { width: 100%; height: 100%; object-fit: cover; }
.section--city { overflow-x: clip; }
.city__strip picture { display: block; width: 100%; height: 100%; }
.city__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
.postcard { background: var(--luna-card); border: var(--border); }
.postcard__ph {
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: repeating-linear-gradient(135deg, var(--luna-paper-2), var(--luna-paper-2) 10px, #e3d7ba 10px, #e3d7ba 11px);
  border-bottom: var(--border);
}
.postcard__ph .moon { font-size: 28px; color: var(--luna-gold); }
.postcard__ph .meta { color: var(--luna-ink-60); text-align: center; padding: 0 16px; }
.postcard__body { padding: 20px 22px 24px; }
.postcard__body h3 { font-size: 19px; line-height: 1.15; min-height: 44px; margin-bottom: 10px; text-transform: none; font-family: var(--font-mono); font-weight: 700; letter-spacing: .01em; }
.postcard__dist { font-size: 12px; color: var(--luna-ink-60); }
.postcard__desc { margin-top: 12px; font-size: 13px; line-height: 1.55; }
.postcard__ph--img { position: relative; padding: 0; background: var(--luna-paper-2); overflow: hidden; }
.postcard__ph--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postcard__credit {
  position: absolute; left: 0; bottom: 0; max-width: 100%;
  padding: 3px 8px; background: rgba(243,236,221,.88); color: var(--luna-ink);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.postcard__credit:hover { color: var(--luna-neon); }
.hero--illustration .hero__credit {
  left: auto;
  right: clamp(18px, 4vw, 64px);
  bottom: 18px;
  z-index: 2;
  font-size: 11px;
  text-transform: uppercase;
}
@media (min-width: 761px) {
  .hero--illustration .hero__credit { bottom: 80px; }
}
@media (max-width: 760px) {
  .hero--illustration .hero__credit { bottom: 88px; }
}

@media (min-width: 761px) and (max-width: 1024px) {
  main > .hero--illustration ~ .section--rooms .rooms__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   Отзывы — гостевая книга
   ============================================================ */
.guestbook {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
.guestbook__entry {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 26px 24px 22px;
  background: var(--luna-card);
  border: var(--border);
}
.guestbook__quote { margin: 0 0 24px; }
.guestbook__quote p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.guestbook__byline {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--luna-rule);
  color: var(--luna-ink-60);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.guestbook__original { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; }
.guestbook__original summary { width: fit-content; cursor: pointer; color: var(--luna-rust); }
.guestbook__original summary:focus-visible { outline: 2px solid var(--luna-neon); outline-offset: 3px; }
.guestbook__original p { margin: 12px 0 0; overflow-wrap: anywhere; }
@media (min-width: 761px) and (max-width: 1024px) {
  .guestbook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .guestbook { grid-template-columns: 1fr; }
}

/* ============================================================
   CTA booking
   ============================================================ */
.booking__head { max-width: 640px; margin-bottom: 44px; }
.booking__head h2 { margin-bottom: 16px; }
.booking__head p { color: var(--luna-ink-60); }

/* generic bordered card, used to frame the booking form as a "registration
   card" (index, rooms) — same family as .contact-card / .reg-card */
.card { background: var(--luna-card); border: var(--border); padding: 44px; }
.card .booking__head { margin-bottom: 32px; }

.booking-form__row {
  display: flex;
  align-items: end;
  gap: var(--gutter);
  margin-bottom: var(--gutter);
}
.booking-form__row:last-child { margin-bottom: 0; }
.booking-form .field { display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; min-width: 0; }
.booking-form .field--wide { flex: 1 1 260px; max-width: 360px; }
.booking-form .field--submit { flex: 0 0 auto; margin-left: auto; }
.booking-form__status { margin-top: 18px; font-size: 12px; color: var(--luna-rust); display: none; }
.booking-form__status.is-active { display: block; }

/* registration-card field style, shared by the booking form (index, rooms)
   and the room.html sticky reg-card mini-form: mono label above, no boxed
   border — just a dashed baseline like .room-card__specs, chevron on the
   .field wrapper for any select it contains. */
.field { position: relative; }
.field:has(select)::after {
  content: "▾";
  position: absolute;
  right: 4px; bottom: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--luna-ink);
  pointer-events: none;
}
.booking-form label,
.reg-card__form label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--luna-ink-60);
}
.booking-form input,
.booking-form select,
.reg-card__form input,
.reg-card__form select {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 10px 24px 10px 2px;
  border: none;
  border-bottom: 1px dashed var(--luna-rule);
  border-radius: 0;
  background: transparent;
  color: var(--luna-ink);
  appearance: none;
}
.booking-form input:focus,
.booking-form select:focus,
.reg-card__form input:focus,
.reg-card__form select:focus {
  outline: none;
  border-bottom: 1.5px solid var(--luna-neon);
}
.booking-form input::placeholder,
.reg-card__form input::placeholder { color: var(--luna-ink-60); opacity: 1; }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--luna-lobby);
  color: var(--luna-on-dark);
  padding: 88px 0 28px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr .8fr .8fr .9fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(243,236,221,.18);
}
.footer__brand .wordmark__type { font-size: 28px; }
.footer__brand { color: var(--luna-on-dark); }
.footer__brand .wordmark { text-align: left; justify-self: start; }
.footer__address { margin-top: 20px; font-size: 13px; color: rgba(243,236,221,.72); line-height: 1.9; }
.footer__address a { text-decoration: none; }
.footer__address a:hover { color: var(--luna-mustard); }
.footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(243,236,221,.72);
  margin: 0 0 18px;
  font-weight: 400;
}
.footer__nav a {
  display: block;
  text-decoration: none;
  font-size: 13px;
  color: rgba(243,236,221,.85);
  margin-bottom: 12px;
}
.footer__nav a:hover { color: var(--luna-mustard); }
/* shared RU · RO · EN link row — topbar + footer */
.lang { display: flex; gap: 10px; }
.lang a { text-decoration: none; color: inherit; }
.lang a:hover { color: var(--luna-neon); }
.footer .lang a:hover { color: var(--luna-mustard); }
.footer__lang { font-size: 13px; letter-spacing: .08em; }
.footer__clock { font-size: 13px; color: rgba(243,236,221,.85); }
.footer__bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: rgba(243,236,221,.72);
}
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { color: var(--luna-mustard); }
.legal-line { flex-basis: 100%; margin-top: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: rgba(243,236,221,.62); }
.amenities-copy { font-family: var(--font-mono); font-size: 14px; line-height: 1.7; margin-bottom: 12px; }

/* ============================================================
   Shared — interior pages (rooms, room, restaurant, contacts)
   Reusable building blocks. Page-specific tweaks live further
   below in dedicated "page: …" blocks.
   ============================================================ */

/* breadcrumbs */
.crumbs { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--luna-ink-60); margin-bottom: 28px; }
.crumbs a { color: var(--luna-ink-60); text-decoration: none; }
.crumbs a:hover { color: var(--luna-neon); }
.crumbs .sep { margin: 0 8px; }
.crumbs .current { color: var(--luna-ink); }

/* page title — big display heading for interior pages (no hero photo) */
.page-title { font-size: var(--fs-h1); margin: 0 0 20px; }
.page-title--on-photo { color: var(--luna-on-dark); text-shadow: 0 2px 22px rgba(0,0,0,.45); }

/* photo-less page header block */
.page-head { padding: calc(var(--space-section) + 32px) 0 var(--space-section); }
.page-head--compact { padding-bottom: 48px; }
.section--gallery { padding: 0 0 var(--space-section); }
.section--room-detail { padding: 0 0 56px; }
.page-head__intro { max-width: 60ch; color: var(--luna-ink-60); font-size: 15px; text-transform: none; letter-spacing: normal; }
.page-head .eyebrow { margin-bottom: 14px; }
.page-head .stamp { margin-top: 32px; display: inline-block; }

/* full-bleed photo hero, simpler than the homepage hero (no neon, no spill) */
.page-hero__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding-bottom: 64px;
}
.page-hero__content .eyebrow--on-dark { margin-bottom: 14px; }
.page-hero__sub { color: var(--luna-on-dark); font-size: 15px; max-width: 46ch; text-shadow: 0 1px 10px rgba(0,0,0,.4); margin-top: 18px; text-transform: none; letter-spacing: normal; }

/* room-feature — alternating photo/card rows (rooms.html) */
.section--room-features { padding: 0 0 var(--space-section); }
.room-feature { display: grid; grid-template-columns: 1.15fr .95fr; align-items: center; margin-bottom: 96px; }
.room-feature:last-child { margin-bottom: 0; }
.room-feature--reverse { grid-template-columns: .95fr 1.15fr; }
.room-feature__media { position: relative; }
.room-feature__media img { width: 100%; height: 520px; object-fit: cover; display: block; }
.room-feature__card {
  position: relative;
  z-index: 2;
  background: var(--luna-card);
  border: var(--border);
  padding: 44px 40px;
  margin-left: calc(var(--overlap) * -1);
}
.room-feature--reverse .room-feature__card { margin-left: 0; margin-right: calc(var(--overlap) * -1); }
.room-feature__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--luna-ink-60); margin-bottom: 8px; }
.room-feature__card h2 { font-size: var(--fs-h3); line-height: .9; margin-bottom: 20px; }
.room-feature__specs { margin: 0 0 24px; border-top: 1px dashed var(--luna-rule); border-bottom: 1px dashed var(--luna-rule); }
.room-feature__specs div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); column-gap: 12px; align-items: start; padding: 8px 0; font-size: 13px; }
.room-feature__specs dt { color: var(--luna-ink-60); font-weight: 400; }
.room-feature__specs dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.room-feature__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.room-feature__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.room-feature__caption { margin-top: 14px; }

/* amenities grid — "В каждом номере" */
.amenities { background: var(--luna-paper-2); padding: var(--space-section) 0; }
.amenities--tight-top { padding-top: calc(var(--space-section) / 2); }
.amenities__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.amenities__grid div {
  font-family: var(--font-mono);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--luna-rule);
}
.amenities__grid .moon { color: var(--luna-gold); }

/* rooms grid modifier — compact 3-up ("Другие номера") */
.rooms__grid--compact { grid-template-columns: repeat(3, 1fr); }

/* generic body copy, sized/muted like the dark restaurant text but usable
   on paper too (no bg-specific color baked in) */
.section-text { max-width: 44ch; color: var(--luna-ink-60); font-size: 15px; }
.section--sub { padding: var(--space-section) 0; }
.section--sub--tight-top { padding-top: calc(var(--space-section) / 2); }

/* generic two-image duo (restaurant.html "Гратар") */
.duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; height: 460px; }
.duo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* generic 3-up photo row (restaurant.html "Завтрак", contacts.html strip) */
.photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.photo-row img { width: 100%; height: 280px; object-fit: cover; display: block; }

/* centered CTA strip (restaurant.html) */
.cta-strip { padding: var(--space-section) 0; background: var(--luna-paper-2); border-top: var(--border); border-bottom: var(--border); text-align: center; }
.cta-strip .btn { margin: 0 8px; }
.cta-strip p { margin-bottom: 28px; color: var(--luna-ink-60); }

/* room.html — gallery */
.room-gallery__main { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 16px; }
.room-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.room-gallery__thumbs.room-gallery__thumbs--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.room-gallery__thumbs > div { aspect-ratio: 1; overflow: hidden; }
.room-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* room.html — two-column description + sticky registration card */
.room-detail { display: grid; grid-template-columns: 1.3fr .8fr; gap: 64px; align-items: start; }
.room-detail__desc p { max-width: 54ch; margin-bottom: 24px; color: var(--luna-ink-60); font-size: 15px; }
.room-detail__amenities { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.room-detail__amenities div { font-family: var(--font-mono); font-size: 13px; display: flex; align-items: center; gap: 10px; }
.room-detail__amenities .moon { color: var(--luna-gold); }

.reg-card { position: sticky; top: 104px; background: var(--luna-card); border: var(--border); padding: 36px; }
.reg-card__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--luna-ink-60); margin-bottom: 8px; }
.reg-card h3 { font-size: 26px; margin-bottom: 20px; }
.reg-card .room-card__specs { margin-bottom: 24px; }
.reg-card .price-tag { margin-bottom: 24px; }
.reg-card__form { margin-top: 4px; display: flex; flex-direction: column; gap: 20px; }
.reg-card__form .field { display: flex; flex-direction: column; gap: 8px; }
.reg-card__form .btn { width: 100%; justify-content: center; margin-top: 4px; }

/* contacts.html — contact card */
.contact-card { background: var(--luna-card); border: var(--border); padding: 40px; }
.contact-card__rows { margin: 0 0 28px; border-top: 1px dashed var(--luna-rule); }
.contact-card__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--luna-rule); }
.contact-card__rows dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--luna-ink-60); }
.contact-card__rows dd { margin: 0; text-align: right; font-family: var(--font-mono); font-size: 14px; }
.contact-card__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* contacts.html — static map, linked to the existing directions URL */
.map-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: var(--border);
  background: var(--luna-paper-2);
  overflow: hidden;
  color: var(--luna-ink);
}
.map-card picture, .map-card img { display: block; width: 100%; height: 100%; }
.map-card img { object-fit: cover; }
.map-card__cta {
  position: absolute;
  top: 16px;
  right: 16px;
  max-width: calc(100% - 32px);
  padding: 12px 14px;
  border: 1px solid var(--luna-ink);
  background: var(--luna-paper);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}
.map-card:hover .map-card__cta, .map-card:focus-visible .map-card__cta {
  color: var(--luna-paper);
  background: var(--luna-ink);
}
.map-card:focus-visible { outline: 2px solid var(--luna-neon); outline-offset: 3px; }

/* contacts.html — "Как добраться" */
.howto { padding: var(--space-section) 0; }
.howto .card { padding: 48px; }
.howto__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.howto__grid > div { padding: 0 32px; }
.howto__grid > div:first-child { padding-left: 0; }
.howto__grid > div:last-child { padding-right: 0; }
.howto__grid > div + div { border-left: 1px dashed var(--luna-rule); }
.howto__grid .eyebrow { font-size: 26px; margin-bottom: 12px; }
.howto__grid p:not(.eyebrow) { font-family: var(--font-mono); font-size: 14px; color: var(--luna-ink-60); }

/* contacts.html — contact card + map two-up */
.contacts__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.contacts__grid .stamp { margin-top: 24px; display: inline-block; }

/* ============================================================
   Mobile — 390px
   ============================================================ */
@media (max-width: 760px) {
  :root { --gutter: 18px; --space-section: 72px; }

  .topbar .container { flex-direction: column; align-items: flex-start; gap: 4px; }
  .topbar .meta { font-size: 10px; }

  .nav .container { grid-template-columns: auto auto; }
  .nav__links { display: none; }
  .wordmark { justify-self: start; }
  .wordmark__logo { height: 44px; margin: 0; }
  .footer__brand .wordmark__logo { height: 76px; }
  .nav__cta .btn { padding: 10px 16px; font-size: 11px; }

  /* Mobile hero: neon becomes a horizontal strip under the photo (not over
     it), and the heading drops the photo/paper spill — everything below
     the strip sits plainly on paper for legibility on small screens. */
  .hero__photo { height: auto; min-height: 0; max-height: none; aspect-ratio: 3 / 4; }
  .hero__neon {
    position: static;
    writing-mode: horizontal-tb;
    display: block;
    width: 100%;
    text-align: center;
    letter-spacing: .5em;
    font-size: 22px;
    padding: 14px 0;
    border: none;
    border-top: 2px solid rgba(255,106,85,.55);
    border-bottom: 2px solid rgba(255,106,85,.55);
    box-shadow: none;
    background: var(--luna-ink);
    opacity: 1;
  }
  .hero__overlap { margin-top: 0; padding-top: 32px; }
  .hero__title { font-size: clamp(56px, 15vw, 72px); }
  .hero__title .ln--photo,
  .hero__title .ln--paper { color: var(--luna-ink); text-shadow: none; }
  /* Kicker stays part of the photo/spill reading, even though H1 has
     dropped fully to paper on this breakpoint: shift it up visually
     (layout space untouched, so nothing below it moves) to sit back over
     the neon strip/photo seam, on paper-colour with its own scrim. */
  .hero__kicker {
    position: relative;
    top: -74px;
    color: var(--luna-on-dark);
    text-shadow: 0 1px 10px rgba(0,0,0,.5);
  }
  .hero__actions { margin-bottom: 48px; }
  .hero__stamp-wrap .stamp { display: inline-block; margin-bottom: 8px; }

  .facts__row { font-size: 11px; gap: 8px 10px; }

  .section--history    { padding: 88px 0 64px; }
  .section--rooms      { padding: 72px 0 56px; }
  .section--restaurant { padding: 72px 0; }
  .section--details    { padding: 64px 0 72px; }
  .section--city         { padding: 72px 0 56px; }
  .section--reviews    { padding: 56px 0; }
  .section--booking    { padding: 64px 0; }
  .section-head { margin-bottom: 36px; }
  .history__grid { grid-template-columns: 1fr; }
  .history__media img { height: 320px; }
  .history__card { margin-left: 0; margin-top: calc(var(--overlap) * -1); margin-right: var(--gutter); padding: 32px 26px; }

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

  .restaurant__grid { grid-template-columns: 1fr; gap: 40px; }
  .restaurant__collage { height: 360px; }

  .details__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: calc((100vw - 2 * var(--gutter) - 16px) / 2);
  }
  .details__item--big { grid-column: span 2; grid-row: span 2; }

  .city__strip { height: 300px; margin-bottom: 40px; }
  .city__grid { grid-template-columns: 1fr; }

  .booking-form__row { flex-direction: column; align-items: stretch; gap: 20px; }
  .booking-form .field,
  .booking-form .field--wide { flex: 0 0 auto; max-width: none; }
  .booking-form .field--submit { margin-left: 0; }
  .booking-form .field--submit .btn { width: 100%; justify-content: center; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer__bottom { flex-direction: column; }

  /* interior pages */
  .page-head { padding: 64px 0 56px; }
  .page-hero__content { padding-bottom: 32px; }

  .room-feature,
  .room-feature--reverse { grid-template-columns: 1fr; margin-bottom: 56px; }
  .room-feature__media img { height: 320px; }
  .room-feature__card,
  .room-feature--reverse .room-feature__card { margin-left: 0; margin-right: 0; margin-top: calc(var(--overlap) * -1); padding: 30px 24px; }

  .amenities { padding: 64px 0; }
  .amenities__grid { grid-template-columns: 1fr 1fr; gap: 16px 24px; }

  .rooms__grid--compact { grid-template-columns: 1fr; }

  .duo { grid-template-columns: 1fr; height: auto; gap: 12px; }
  .duo img { height: 280px; }

  .photo-row { grid-template-columns: 1fr; gap: 12px; }
  .photo-row img { height: 240px; }

  .cta-strip { padding: 56px 0; }
  .cta-strip .btn { display: block; width: 100%; margin: 0 0 12px; justify-content: center; }

  .room-gallery__thumbs { grid-template-columns: repeat(2, 1fr); }

  .room-detail { grid-template-columns: 1fr; gap: 40px; }
  .reg-card { position: static; }

  .contact-card { padding: 28px; }

  .howto { padding: 56px 0; }
  .howto .card { padding: 28px; }
  .howto__grid { grid-template-columns: 1fr; gap: 0; }
  .howto__grid > div { padding: 24px 0; }
  .howto__grid > div:first-child { padding-top: 0; }
  .howto__grid > div:last-child { padding-bottom: 0; }
  .howto__grid > div + div { border-left: none; border-top: 1px dashed var(--luna-rule); }

.contacts__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (min-width: 761px) and (max-width: 768px) {
  .contacts__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Room detail booklet: amenities, daily schedule and compact request card. */
.section--room-detail .room-detail {
  grid-template-columns: minmax(0, 1.5fr) minmax(340px, .85fr);
  gap: 48px;
}
.room-amenities { margin-top: 34px; }
.room-amenities h2,
.room-day h2 {
  margin: 0 0 16px;
  font-family: var(--font-italic);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  color: var(--luna-rust);
}
.room-amenities__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.room-amenity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 61px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--luna-rule);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
}
.room-amenity svg { flex: 0 0 24px; color: var(--luna-rust); }
.room-amenity span { min-width: 0; overflow-wrap: anywhere; }
.room-day { margin-top: 36px; }
.room-day__timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--luna-rule);
}
.room-day__timeline li {
  position: relative;
  min-width: 0;
  padding: 23px 10px 4px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
}
.room-day__timeline li::before {
  content: "☾";
  position: absolute;
  top: -12px;
  left: 0;
  padding-right: 5px;
  background: var(--luna-paper);
  color: var(--luna-rust);
  font-size: 17px;
}
.room-day__time { display: block; margin-bottom: 8px; color: var(--luna-rust); white-space: nowrap; }
.room-day__timeline strong { display: block; font-weight: 400; }
.room-day__note { display: block; margin-top: 4px; color: var(--luna-ink-60); }
.section--room-detail .room-day__reception {
  max-width: none;
  margin: 20px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--luna-rule);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--luna-ink);
}
.room-day__reception span { color: var(--luna-rust); }
.section--room-detail .reg-card { top: 24px; padding: 20px; min-width: 0; }
.section--room-detail .reg-card h3 { margin-bottom: 8px; }
.section--room-detail .reg-card .room-card__specs { margin-bottom: 12px; }
.section--room-detail .reg-card .price-tag { margin-bottom: 8px; }
.section--room-detail .reg-card__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 0;
}
.section--room-detail .reg-card__form .field { min-width: 0; gap: 3px; }
.section--room-detail .reg-card__form input,
.section--room-detail .reg-card__form select {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
}
.section--room-detail .reg-card__form .field--full,
.section--room-detail .reg-card__form .btn { grid-column: 1 / -1; }
.section--room-detail .reg-card__form .btn { min-height: 48px; margin-top: 8px; white-space: normal; }
.section--rooms--tight .room-card__media a,
.section--rooms--tight .room-card__media picture { display: block; width: 100%; height: 100%; }
.section--rooms--tight .room-card__media img { display: block; }

@media (max-width: 1100px) {
  .room-amenities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-day__timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
}
@media (max-width: 900px) {
  .section--room-detail .room-detail { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .section--room-detail .reg-card { position: static; }
  .section--rooms--tight .rooms__grid--compact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .room-day__timeline { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 0; border-left: 1px dashed var(--luna-rule); }
  .room-day__timeline li { padding: 0 0 25px 20px; }
  .room-day__timeline li::before { top: -4px; left: -8px; padding: 2px 0; }
  .section--room-detail .reg-card__form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 390px) {
  html[lang="ro"] .hero__title .ln--paper { font-size: 53px; letter-spacing: -1.5px; }
  .page-title--rooms-en { font-size: 52px; }
}

/* ============================================================
   2026-10-12 · fix4 — отзывы, «Город», мобильный первый экран
   ============================================================ */
/* Отзывы: «Оригинал» свёрнут, подсказка-стрелка */
.guestbook__original summary::after { content: " ↓"; }
.guestbook__original[open] summary::after { content: " ↑"; }
.guestbook__original summary { min-height: 24px; }

/* Город: крупная карточка на всю ширину + две рядом */
.city__grid--feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gutter); }
.city__grid--feature .postcard__ph { height: auto; aspect-ratio: 3 / 2; display: block; border-bottom: var(--border); }
.city__grid--feature .postcard__ph--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.city__grid--feature .postcard--feature { grid-column: 1 / -1; }
.city__grid--feature .postcard--feature .postcard__ph { aspect-ratio: 21 / 9; }
.city__grid--feature .postcard--feature .postcard__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px 40px; align-items: start; padding: 26px 30px 30px; }
.city__grid--feature .postcard--feature .postcard__body h3 { grid-column: 1; font-size: 28px; min-height: 0; margin-bottom: 4px; }
.city__grid--feature .postcard--feature .postcard__dist { grid-column: 1; font-size: 13px; }
.city__grid--feature .postcard--feature .postcard__desc { grid-column: 2; grid-row: 1 / span 2; margin-top: 4px; font-size: 15px; line-height: 1.6; }
.city__grid--feature .postcard:not(.postcard--feature) .postcard__body h3 { font-size: 22px; min-height: 0; }
@media (max-width: 760px) {
  .city__grid--feature { grid-template-columns: 1fr; gap: 20px; }
  .city__grid--feature .postcard--feature .postcard__ph,
  .city__grid--feature .postcard__ph { aspect-ratio: 4 / 3; }
  .city__grid--feature .postcard--feature .postcard__body { display: block; padding: 20px 20px 24px; }
  .city__grid--feature .postcard--feature .postcard__body h3 { font-size: 24px; margin-bottom: 8px; }
  .city__grid--feature .postcard--feature .postcard__desc { margin-top: 12px; font-size: 14px; }
}

/* Мобильный первый экран */
@media (max-width: 760px) {
  .topbar .container { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 12px; padding-top: 0; padding-bottom: 0; min-height: 44px; }
  .topbar__addr, .topbar__landline, .topbar__mail { display: none; }
  .topbar .meta { font-size: 12px; }
  .topbar__mobile { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; color: var(--luna-ink); font-weight: 700; letter-spacing: .03em; }
  .topbar__mobile::before { content: "☎"; font-size: 15px; color: var(--luna-rust); }
  .topbar .lang-switch a { display: inline-block; padding: 12px 4px; }

  .hero--illustration .hero__photo { height: calc(100svh - 124px); min-height: 560px; max-height: 720px; aspect-ratio: auto; }
  .hero--illustration .hero__photo img { object-position: 62% 40%; }
  .hero--illustration .hero__scrim { background: linear-gradient(180deg, rgba(14,22,17,.0) 0%, rgba(14,22,17,.0) 38%, rgba(14,22,17,.72) 70%, rgba(14,22,17,.94) 100%); }
  .hero--illustration .hero__fade { display: none; }
  .hero--illustration .hero__overlap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0 var(--gutter) 28px; }
  .hero--illustration .hero__kicker { position: static; top: auto; margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--luna-on-dark); }
  .hero--illustration .hero__title { font-size: clamp(46px, 13.4vw, 60px); line-height: .98; margin: 0 0 22px; }
  .hero--illustration .hero__title .ln--photo,
  .hero--illustration .hero__title .ln--paper { color: var(--luna-on-dark); text-shadow: 0 2px 18px rgba(0,0,0,.55); margin-top: 0; }
  .hero--illustration .hero__actions { flex-direction: column; gap: 10px; margin: 0; }
  .hero--illustration .hero__actions .btn { width: 100%; min-height: 48px; justify-content: center; text-align: center; }
  .hero--illustration .hero__actions .btn:not(.btn-primary) { color: var(--luna-on-dark); border-color: rgba(243,236,221,.7); background: rgba(14,22,17,.35); }
  .hero--illustration .hero__credit { top: 12px; right: 12px; bottom: auto; left: auto; font-size: 10px; padding: 4px 8px; }
  .hero__stamp-wrap { padding-top: 28px; }
}
@media (max-width: 760px) {
  .hero--illustration .hero__kicker { font-size: 11px; letter-spacing: .06em; }
  .nav__cta .btn { min-height: 44px; }
  .topbar .lang-switch a { padding: 13px 4px; }
  .guestbook__original summary { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 760px) {
  .field input, .field select, .field textarea { min-height: 44px; }
  .field select { padding-top: 10px; padding-bottom: 10px; }
}

/* Valea Morilor (2026-10-12): <picture> внутри карточки места */
.postcard__ph--img picture { display: block; width: 100%; height: 100%; }


.skip-link{position:absolute;z-index:10000;left:12px;top:12px;transform:translateY(-160%);padding:12px 16px;color:var(--luna-paper);background:var(--luna-ink)}.skip-link:focus{transform:translateY(0)}:focus-visible{outline:3px solid var(--luna-rust);outline-offset:3px}
:root{--luna-ink-60:#6a655c}
.booking-form input[type="date"]{font-family:var(--font-mono);font-size:14px;color:var(--luna-ink-60);font-variant-numeric:tabular-nums;}
.booking-form input[type="date"]:valid{color:var(--luna-ink);}
.booking-form input[type="date"]::-webkit-datetime-edit{color:inherit;font-family:var(--font-mono);font-size:14px;}
.booking-form input[type="date"]::-webkit-calendar-picker-indicator{width:14px;height:14px;opacity:.55;cursor:pointer;}
.booking-form input[type="date"]:focus-visible::-webkit-calendar-picker-indicator{opacity:.8;}
.booking-consent label{min-height:44px;align-items:flex-start!important;padding-block:6px;box-sizing:border-box;}
.booking-consent input[type="checkbox"]{appearance:none;-webkit-appearance:none;flex:0 0 18px;width:18px;height:18px;min-height:18px;margin:1px 0 0;padding:0;border:1px solid var(--luna-ink);border-radius:0;background:var(--luna-paper);display:grid;place-content:center;cursor:pointer;}
.booking-consent input[type="checkbox"]::before{content:"";width:9px;height:5px;border-left:2px solid var(--luna-paper);border-bottom:2px solid var(--luna-paper);transform:rotate(-45deg) scale(0);transform-origin:center;}
.booking-consent input[type="checkbox"]:checked{background:var(--luna-ink);}
.booking-consent input[type="checkbox"]:checked::before{transform:rotate(-45deg) scale(1);}
.booking-consent input[type="checkbox"]:focus-visible{outline:3px solid var(--luna-rust);outline-offset:3px;}
.footer h2{font-family:var(--font-mono);font-size:11px;line-height:1.6;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,236,221,.72);margin:0 0 18px;font-weight:400}
.contact-card__rows dd a[href^="tel:"]{display:inline-flex;align-items:center;min-height:24px}
.privacy-content h1,.privacy-content h2,.privacy-content h3{margin:1.4em 0 .5em}.privacy-content h1{font-size:var(--fs-h1)}.privacy-content h2{font-size:var(--fs-h3)}.privacy-content p,.privacy-content li{max-width:76ch;margin:.75em 0;line-height:1.7}.privacy-content ul{padding-left:1.5em}.privacy-content li{list-style:disc}
.privacy-content{overflow-wrap:anywhere;word-break:normal}.privacy-content h1{font-size:clamp(32px,5vw,72px);line-height:1.02;overflow-wrap:anywhere}
@media(max-width:390px){html[lang="ro"][data-page="rooms"] .page-head .page-title{font-size:44px}}
/* Hero photography added in stage 7; these overrides are intentionally scoped
   to the homepage so the editorial layouts of other page types stay intact. */
html[data-page="index"] .hero--illustration .hero__scrim {
  background: linear-gradient(90deg, rgba(9, 13, 11, .72) 0%, rgba(9, 13, 11, .36) 42%, transparent 76%), linear-gradient(0deg, rgba(9, 13, 11, .40), transparent 48%);
}
html[data-page="index"] .hero--illustration .hero__title .ln--paper { color: var(--luna-on-dark); }
@media (min-width: 761px) {
  html[data-page="index"] .hero--illustration .hero__scrim {
    background: linear-gradient(90deg, rgba(8, 12, 10, .68) 0%, rgba(8, 12, 10, .64) 46%, rgba(8, 12, 10, .38) 58%, rgba(8, 12, 10, .05) 74%, transparent 82%), linear-gradient(180deg, rgba(8, 12, 10, 0) 0%, rgba(8, 12, 10, .12) 55%, rgba(8, 12, 10, .35) 100%);
  }
  html[data-page="index"] .hero--illustration .hero__overlap {
    position: absolute; left: 0; right: 0; bottom: 76px; margin: 0 auto; padding: 0 var(--gutter);
  }
  html[data-page="index"] .hero--illustration .hero__title { font-size: clamp(54px, 5.3vw, 78px); line-height: .98; max-width: 58%; margin-bottom: 20px; }
  html[data-page="index"] .hero--illustration .hero__title .ln { white-space: nowrap; }
  html[data-page="index"] .hero--illustration .hero__title .ln--paper { margin-top: 0; font-size: inherit; letter-spacing: inherit; }
  html[data-page="index"] .hero--illustration .hero__actions { margin-bottom: 0; }
  html[data-page="index"] .hero--illustration .hero__actions .btn:not(.btn-primary) { color: var(--luna-on-dark); border-color: rgba(243, 236, 221, .75); background: rgba(12, 16, 14, .58); text-shadow: 0 1px 3px rgba(0,0,0,.45); }
}
@media (max-width: 760px) {
  html[data-page="index"] .hero--illustration .hero__scrim {
    background: linear-gradient(90deg, rgba(8, 12, 10, .68) 0%, rgba(8, 12, 10, .50) 70%, rgba(8, 12, 10, .08) 100%), linear-gradient(180deg, rgba(8, 12, 10, .40) 0%, rgba(8, 12, 10, .2) 42%, transparent 65%, rgba(8, 12, 10, .26) 100%);
  }
  html[data-page="index"] .hero--illustration .hero__overlap {
    top: 8px; bottom: auto; padding: 0 var(--gutter); max-width: none;
  }
  html[data-page="index"] .hero--illustration .hero__title { font-size: clamp(34px, 9.4vw, 39px); line-height: .98; max-width: none; margin-bottom: 14px; }
  html[data-page="index"] .hero--illustration .hero__title .ln { white-space: nowrap; }
  html[data-page="index"] .hero--illustration .hero__actions { flex-direction: row; gap: 6px; flex-wrap: nowrap; margin-bottom: 0; }
  html[data-page="index"] .hero--illustration .hero__actions .btn { flex: 1 1 0; width: auto; min-width: 0; font-size: 10px; padding: 10px 4px; letter-spacing: .08em; white-space: nowrap; }
  html[data-page="index"] .hero--illustration .hero__actions .btn:not(.btn-primary) { color: var(--luna-on-dark); border-color: rgba(243, 236, 221, .78); background: rgba(12, 16, 14, .52); }
  html[data-page="index"] .hero--illustration .hero__kicker { max-width: 31ch; font-size: 10px; }
}
@media (max-width: 375px) {
  html[lang="ro"][data-page="index"] .hero--illustration .hero__title { font-size: 30px; }
  html[lang="ro"][data-page="index"] .hero--illustration .hero__title .ln--paper { font-size: inherit; letter-spacing: inherit; }
}

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Progressive reveal: no-JS and reduced-motion users always see the content. */
[data-reveal],[data-reveal-item]{opacity:1;transform:none;filter:none;transition:none}
html.js [data-reveal]:not(.is-visible){opacity:0;transform:translateY(14px);filter:blur(6px);transition:opacity .7s ease-out,transform .7s ease-out,filter .7s ease-out}
html.js [data-reveal].is-visible{opacity:1;transform:translateY(0);filter:blur(0)}
html.js [data-reveal-item]{transition:opacity .7s ease-out,transform .7s ease-out,filter .7s ease-out;transition-delay:calc(var(--i,0)*80ms);}
html.js [data-reveal]:not(.is-visible) [data-reveal-item]{opacity:0;transform:translateY(8px);filter:blur(4px)}
html.js [data-reveal].is-visible [data-reveal-item]{opacity:1;transform:none;filter:none}
@media(max-width:760px){html.js [data-reveal]:not(.is-visible){filter:blur(2px)}html.js [data-reveal-item]{transition-delay:calc(var(--i,0)*60ms)}}
@media(prefers-reduced-motion:reduce){html.js [data-reveal],html.js [data-reveal-item]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}}
.postcard__actions{margin-top:16px}.postcard__route{display:inline-flex;align-items:center;min-height:44px;padding:8px 0}
.nav__links a.is-current{border-color:currentColor;color:var(--luna-rust)}
.nav__links a{min-height:44px;display:inline-flex;align-items:center}
.nav .mobile-nav a.is-current{border-bottom:1px solid currentColor}
html[data-page="rooms"] .page-head,html[data-page="contacts"] .page-head,html[data-page="restaurant"] .page-head{padding-bottom:80px}
html[data-page="rooms"] .page-head + .section,html[data-page="contacts"] .page-head + .section,html[data-page="restaurant"] .page-head + .section{padding-top:0}
.lightbox{position:fixed;inset:0;z-index:10000;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr auto;align-items:center;justify-items:center;padding:24px;background:rgba(10,12,11,.94);color:#f3ecdd}.lightbox[hidden]{display:none}.lightbox__image{grid-column:2;grid-row:1;max-width:min(88vw,1400px);max-height:82vh;object-fit:contain}.lightbox__close,.lightbox__prev,.lightbox__next{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;min-width:44px;min-height:44px;cursor:pointer}.lightbox__close{position:absolute;top:16px;right:16px}.lightbox__prev{grid-column:1;grid-row:1}.lightbox__next{grid-column:3;grid-row:1}.lightbox__count{grid-column:2;grid-row:2;margin:12px 0 0;font-family:var(--font-mono)}.lightbox-image-trigger{cursor:zoom-in}.mobile-nav-toggle{display:none}
@media(max-width:760px){html[data-page="rooms"] .page-head,html[data-page="contacts"] .page-head,html[data-page="restaurant"] .page-head{padding-bottom:40px}.mobile-nav-toggle{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--luna-rule);background:transparent;color:var(--luna-ink);font-size:19px;cursor:pointer;grid-column:2;grid-row:1;justify-self:center;margin:0}.nav .container{position:relative;grid-template-columns:auto 44px auto}.nav__cta{grid-column:3;grid-row:1}.mobile-nav{position:absolute;z-index:20;top:calc(100% + 8px);left:var(--gutter);right:var(--gutter);padding:12px 18px;margin:0;list-style:none;background:var(--luna-paper);border:1px solid var(--luna-rule);box-shadow:0 8px 24px rgba(0,0,0,.12)}.mobile-nav[hidden]{display:none}.mobile-nav a{display:flex;align-items:center;min-height:44px;color:var(--luna-ink);text-decoration:none}.mobile-nav a.is-current{font-weight:700}.lightbox{padding:12px;grid-template-columns:44px minmax(0,1fr) 44px}.lightbox__image{max-width:92vw;max-height:76vh}.lightbox__close{top:8px;right:8px}}
@media(max-width:760px){html:not(.js) .mobile-nav-toggle{display:none}html:not(.js) .nav__links{display:none}html:not(.js) .mobile-nav,html:not(.js) .mobile-nav[hidden]{position:static;display:block;grid-column:1/-1;top:auto;left:auto;right:auto;box-shadow:none}}
.lightbox__image,.lightbox{touch-action:pan-y}
@media(max-width:760px){.lightbox{grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:1fr auto auto}.lightbox__image{grid-column:1/-1;grid-row:1;max-width:calc(100vw - 24px);max-height:68vh}.lightbox__prev{grid-column:1;grid-row:2;justify-self:end}.lightbox__next{grid-column:3;grid-row:2;justify-self:start}.lightbox__count{grid-column:2;grid-row:2;align-self:center}.lightbox__prev,.lightbox__next{background:rgba(10,12,11,.72);border-color:rgba(243,236,221,.75)}}
@media print{[data-reveal]{opacity:1!important;transform:none!important;visibility:visible!important}}
@media print{html.js [data-reveal-item]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}}

/* Luna motion and booking details. */
:focus-visible{outline:3px solid var(--luna-rust);outline-offset:4px;box-shadow:0 0 0 2px var(--luna-paper)}
.btn{transition:background-color .2s ease,color .2s ease,border-color .2s ease,translate .2s ease}
.btn .room-cta__arrow,.btn .arrow,.link-arrow .room-cta__arrow{transition:transform .2s ease}
.link-arrow{border-bottom-color:transparent;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .22s ease,color .18s ease}
.nav .container{transition:padding .25s ease}
.nav{transition:box-shadow .25s ease,background-color .25s ease}
.nav.is-scrolled{box-shadow:0 4px 16px rgba(35,31,26,.10);background:rgba(243,236,221,.97);backdrop-filter:blur(8px)}
.nav.is-scrolled .container{padding-top:10px;padding-bottom:10px}
.facts--trust .facts__row{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.trust-stamp{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid var(--luna-rust);color:var(--luna-rust);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.trust-stamp strong{font-size:14px;font-weight:700;white-space:nowrap}
.trust-stamp strong[data-count-up]{min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.room-price{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.room-card__breakfast{color:var(--luna-lobby);font-family:var(--font-mono);font-size:10px;letter-spacing:.025em}
.room-card__footer,.room-feature__footer{flex-wrap:wrap}
.room-card__footer .room-booking-link,.room-feature__footer .room-booking-link{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 11px;font-size:10px;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.sticky-booking{display:none}
@media(hover:hover) and (pointer:fine){
  .btn:hover{translate:0 -1px}
  .btn-primary:hover{background:var(--luna-ink);border-color:var(--luna-ink);color:var(--luna-paper)}
  .link-arrow:hover{background-size:100% 1px}
  .link-arrow:hover .room-cta__arrow{transform:translateX(4px)}
  .lightbox-image-trigger{cursor:zoom-in}
  .lightbox-image-trigger{transition:transform .5s ease,filter .5s ease}
  .lightbox-image-trigger:hover,.lightbox-image-trigger:focus-visible{transform:scale(1.04);filter:brightness(.88)}
  .lightbox-frame{position:relative;display:block;overflow:hidden}
  .lightbox-frame::after{content:"＋";position:absolute;right:10px;bottom:10px;z-index:2;display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(243,236,221,.85);border-radius:50%;background:rgba(35,31,26,.52);color:#f3ecdd;font-size:20px;line-height:1;opacity:0;pointer-events:none;transition:opacity .2s ease}
  .lightbox-frame:has(.lightbox-image-trigger:hover)::after,.lightbox-frame:has(.lightbox-image-trigger:focus-visible)::after{opacity:1}
}
@media(hover:hover) and (pointer:fine){.lightbox-frame:has(.lightbox-image-trigger:hover)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg,transparent 52%,rgba(35,31,26,.14))}}
@media(hover:none),(pointer:coarse){.lightbox-image-trigger{transform:none!important;filter:none!important}}
@media(hover:none),(pointer:coarse){.btn:active,.room-booking-link:active{transform:scale(.98)}}
@media(max-width:760px){
  .nav.is-scrolled{backdrop-filter:none;box-shadow:0 2px 8px rgba(35,31,26,.12)}
  .facts--trust .facts__row{justify-content:flex-start;gap:6px}
  .trust-stamp{font-size:9px;padding:6px 7px}
  .room-card__footer .room-booking-link,.room-feature__footer .room-booking-link{flex:1 0 100%;width:100%}
  .sticky-booking{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:48px;padding:0 16px;background:var(--luna-rust);color:var(--luna-paper);border:1px solid var(--luna-rust);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;box-shadow:0 4px 16px rgba(35,31,26,.18);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
  .sticky-booking[data-active="true"]{opacity:1;visibility:visible;pointer-events:auto}
  .footer{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.nav,.nav .container,.btn,.link-arrow,.lightbox-image-trigger,.sticky-booking{transition:none!important}}
@media print{.sticky-booking{display:none!important}.nav.is-scrolled{box-shadow:none;backdrop-filter:none}.trust-stamp{color:#000;border-color:#000}}

/* V4: room cards use a framed, full-card CTA while preserving editorial layouts. */
.room-card{position:relative;transition:translate .22s ease,box-shadow .22s ease,border-color .22s ease}
.room-feature__card{position:relative;transition:translate .22s ease,box-shadow .22s ease,border-color .22s ease}
.room-card__cover-link{position:absolute;inset:0;z-index:1}
.room-card__media{position:relative;z-index:2}
.room-card__footer .link-arrow::after,.room-feature__footer .link-arrow::after{content:none}
.room-card__footer .link-arrow,.room-feature__footer .link-arrow{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-height:44px;padding:9px 14px;border:1px solid var(--luna-ink);color:var(--luna-ink);background:transparent;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.room-card__footer .link-arrow::after,.room-feature__footer .link-arrow::after{content:"";position:absolute;inset:0;z-index:1}
.room-cta__arrow{display:inline-block;transition:transform .2s ease}
.room-card__media>a[aria-hidden="true"]{pointer-events:none}
@media(hover:hover) and (pointer:fine){.room-card:hover,.room-feature__card:hover{translate:0 -3px;box-shadow:0 12px 28px rgba(30,31,27,.12);border-color:var(--luna-ink)}.room-card__footer .link-arrow:hover,.room-feature__footer .link-arrow:hover{color:var(--luna-paper);background:var(--luna-ink)}.room-card__footer .link-arrow:hover .room-cta__arrow,.room-feature__footer .link-arrow:hover .room-cta__arrow{transform:translateX(3px)}}
.room-card__footer .link-arrow:focus-visible,.room-feature__footer .link-arrow:focus-visible{outline:3px solid var(--luna-rust);outline-offset:3px}
.room-card__footer .link-arrow::after,.room-feature__footer .link-arrow::after{content:none}

/* Reduce accumulated section padding without changing luna.css source. */
:root{--space-section:clamp(48px,5.6vw,84px)}
.footer{padding-top:56px}
.section--sub{padding:40px 0}
.section--sub--tight-top{padding-top:40px;padding-bottom:40px}
html[data-page="restaurant"] .section--sub--tight-top{padding-bottom:24px}
.section--restaurant-contacts{padding:40px 0 32px}
.section--restaurant{padding:60px 0 64px}
html[data-page="restaurant"] .section--restaurant{padding-top:60px}
html[data-page="index"] .section--history{padding:80px 0 40px}
html[data-page="index"] .section--rooms{padding:40px 0 48px}
html[data-page="index"] .section--details{padding:40px 0}
html[data-page="index"] .section--city{padding:40px 0}
html[data-page="index"] .section--reviews{padding:40px 0}
html[data-page="index"] .section--booking{padding:40px 0}
html[data-page="rooms"] .section--rooms--tight{padding-bottom:48px}
html[data-page="rooms"] .amenities--tight-top{padding-top:48px;padding-bottom:48px}
html[data-page="contacts"] .section--gallery{padding-bottom:40px}
html[data-page="contacts"] .howto{padding-top:40px;padding-bottom:40px}
html[data-page="contacts"] .section--city--tight-top{padding-top:40px;padding-bottom:40px}
html[data-page^="room-"] .section--gallery{padding-bottom:16px}
html[data-page^="room-"] .section--room-detail{padding-bottom:40px}
html[data-page^="room-"] .section--rooms--tight{padding-bottom:48px}
@media (min-width: 761px) and (max-width: 820px){
  .topbar .container{align-items:center;gap:4px 16px}
  .topbar__addr,.topbar__landline,.topbar__mail{display:none}
  .topbar__mobile{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;color:var(--luna-ink);font-weight:700;letter-spacing:.03em}
  .topbar__mobile::before{content:"☎";font-size:15px;color:var(--luna-rust)}
  .topbar .meta{font-size:12px}
  .topbar__contacts{min-width:0;flex:1 1 420px}
  .topbar .lang{flex:0 0 auto}
  html[data-page="index"] .section--history{padding:56px 0 24px}
  html[data-page="index"] .section--rooms{padding:24px 0}
  html[data-page="index"] .section--restaurant{padding:40px 0}
  .footer{padding-top:32px}
}
@media(max-width:760px){
  .footer{padding-top:48px}
  .section--sub,.section--sub--tight-top{padding-top:24px;padding-bottom:24px}
  .section--restaurant-contacts{padding:24px 0 48px}
  .section--restaurant{padding:36px 0}
  html[data-page="restaurant"] .section--restaurant{padding-top:48px}
  html[data-page="index"] .section--history{padding:56px 0 40px}
  html[data-page="index"] .section--rooms{padding:48px 0}
  html[data-page="index"] .section--details{padding:48px 0}
  html[data-page="index"] .section--city{padding:48px 0 32px}
  html[data-page="index"] .section--reviews{padding:32px 0}
  html[data-page="index"] .section--booking{padding:48px 0 40px}
  html[data-page="rooms"] .section--rooms--tight{padding-bottom:32px}
  html[data-page="rooms"] .amenities--tight-top{padding-top:32px;padding-bottom:48px}
  html[data-page="contacts"] .section--gallery{padding-bottom:24px}
  html[data-page="contacts"] .howto{padding-top:24px;padding-bottom:40px}
  html[data-page="contacts"] .section--city--tight-top{padding-top:24px;padding-bottom:32px}
  html[data-page^="room-"] .section--gallery{padding-bottom:32px}
  html[data-page^="room-"] .section--room-detail{padding-bottom:32px}
  html[data-page^="room-"] .section--rooms--tight{padding-top:0;padding-bottom:48px}
}

/* V4 responsive pass: preserve the editorial order on narrow and tablet screens. */
@media(max-width:900px){
  .room-feature,.room-feature--reverse{grid-template-columns:minmax(0,1fr)}
  .room-feature__media{grid-column:1;grid-row:1;min-width:0}
  .room-feature__card,.room-feature--reverse .room-feature__card{grid-column:1;grid-row:2;min-width:0;width:auto;margin:0}
  .history__grid{grid-template-columns:minmax(0,1fr)}
  .history__media{grid-column:1;grid-row:1;min-width:0}
  .history__card{grid-column:1;grid-row:2;min-width:0}
  .restaurant__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .restaurant__grid>.restaurant__collage{grid-column:1;grid-row:1;min-width:0}
  .restaurant__grid>:not(.restaurant__collage){grid-column:1;grid-row:2;min-width:0}
}
html[data-page="restaurant"] .hero__scrim--strong{top:0;bottom:0;height:100%;background:linear-gradient(180deg,rgba(12,16,14,.28) 0%,rgba(12,16,14,.62) 38%,rgba(12,16,14,.84) 62%,rgba(12,16,14,.94) 100%)}
@media(max-width:760px){
  .nav .container{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto;align-items:center;gap:8px}
  .nav .wordmark{grid-column:1;grid-row:1;justify-self:start;min-width:0}
  .nav .nav__cta{grid-column:2;grid-row:1;justify-self:end;min-width:0}
  .nav .mobile-nav-toggle{grid-column:3;grid-row:1;justify-self:end;margin:0}
  .mobile-nav{top:calc(100% + 8px);left:var(--gutter);right:var(--gutter);z-index:50}
  html[data-page="restaurant"] .hero__scrim{top:0;bottom:0;height:100%;background:linear-gradient(180deg,rgba(12,16,14,.68) 0%,rgba(12,16,14,.76) 48%,rgba(12,16,14,.9) 100%)}
  html[data-page="restaurant"] .page-hero__content{padding-bottom:24px}
  html[data-page="restaurant"] .page-hero__content .eyebrow--on-dark{font-size:15px;line-height:1.35;margin-bottom:12px}
  html[data-page="restaurant"] .page-title--on-photo{font-size:clamp(32px,8vw,44px);line-height:1.02;margin-bottom:12px}
  html[data-page="restaurant"] .page-hero__sub{font-size:14px;line-height:1.45;margin-top:12px}
  html[data-page="index"] .hero--illustration .hero__photo{height:clamp(560px,146vw,640px);min-height:0;max-height:none;aspect-ratio:auto}
  html[data-page="index"] .hero--illustration .hero__overlap{top:auto;bottom:0;margin:0;padding:0 var(--gutter) 28px;max-width:none}
  html[data-page="index"] .hero--illustration .hero__scrim{background:linear-gradient(90deg,rgba(8,12,10,.5) 0%,rgba(8,12,10,.42) 76%,rgba(8,12,10,.3) 100%),linear-gradient(180deg,rgba(8,12,10,.3) 0%,rgba(8,12,10,.5) 40%,rgba(8,12,10,.75) 72%,rgba(8,12,10,.84) 100%)}
}
@media(max-width:360px){
  :root{--gutter:12px}
  .contacts__grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .contacts__grid>*{min-width:0}
  .contact-card,.map-card{box-sizing:border-box;max-width:100%;min-width:0}
  .contact-card{padding:20px 14px}
  .contact-card__rows div{gap:8px;flex-wrap:wrap}
  .contact-card__rows dd{max-width:100%;overflow-wrap:anywhere}
  .footer__grid{grid-template-columns:minmax(0,1fr);gap:20px}
}

/* Restaurant collages use an even two-row rhythm on narrow phones. */
@media(max-width:480px){
  html[data-page="restaurant"] .restaurant__collage{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
    grid-auto-rows:auto;
    height:auto;
    gap:10px;
  }
  html[data-page="restaurant"] .restaurant__collage>div{
    aspect-ratio:16/10;
    min-width:0;
  }
  html[data-page="restaurant"] .restaurant__collage .big,
  html[data-page="restaurant"] .restaurant__collage--quad .big{grid-row:auto}
  html[data-page="restaurant"] .restaurant__collage>div:last-child:nth-child(odd){
    grid-column:1/-1;
    aspect-ratio:3.3/1;
  }
  html[data-page="restaurant"] .restaurant__collage img{
    display:block;
    position:static;
    width:100%;
    height:auto;
    aspect-ratio:16/10;
    object-fit:cover;
  }
  html[data-page="restaurant"] .restaurant__collage>div:last-child:nth-child(odd) img{aspect-ratio:3.3/1}
}

/* Lightbox JS marks the picture as a frame; keep it and its image at tile size. */
html[data-page] main [class*="collage"]>div>.lightbox-frame{
  display:block;
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}
html[data-page] main [class*="collage"]>div>.lightbox-frame>img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}

/* DSC_2263 hero: retain the entrance and dome while keeping white copy readable. */
.hero--2263 .hero__photo img { object-position: 50% 50%; }
.hero--2263 .hero__scrim {
  height: 100%;
  background: linear-gradient(90deg, rgba(8,12,10,.88) 0%, rgba(8,12,10,.78) 34%, rgba(8,12,10,.48) 68%, rgba(8,12,10,.24) 100%), linear-gradient(0deg, rgba(8,12,10,.78) 0%, rgba(8,12,10,.16) 72%, rgba(8,12,10,.06) 100%);
}
@media (max-width: 760px) {
  .hero--2263 .hero__photo img { object-position: 50% 50%; }
  html[data-page="index"] .hero--2263 .hero__scrim {
    background: linear-gradient(180deg, rgba(8,12,10,0) 0%, rgba(8,12,10,0) 43%, rgba(8,12,10,.74) 54%, rgba(8,12,10,.82) 66%, rgba(8,12,10,.94) 100%);
  }
}
@media (min-width: 1025px) {
  .guestbook { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .guestbook__entry { grid-column: span 2; }
  .guestbook__entry:nth-last-child(-n + 4) { grid-column: span 3; }
}


.booking-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.booking-consent { flex: 1 1 100% !important; max-width: none !important; }
.booking-consent label { display: flex; flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-size: 13px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--luna-ink); text-align: left; }
.booking-consent-copy { min-width: 0; overflow-wrap: anywhere; }
.booking-consent-copy a { overflow-wrap: anywhere; }
.booking-consent input { width: auto; min-height: auto; margin-top: 2px; }
.booking-status:not(:empty) { display: block; margin: 16px 0 0; color: var(--luna-rust); }
.booking-status:empty { display: none; }
.booking-form button:disabled { opacity: .6; cursor: wait; }
.booking-date-control { display: flex; align-items: stretch; gap: 4px; width: 100%; }
.booking-date-control input { min-width: 0; font-family: var(--font-mono); font-size: 14px; letter-spacing: .04em; }
.booking-date-control input::placeholder { color: var(--luna-ink-60); opacity: 1; }
.booking-date-picker { flex: 0 0 38px; width: 38px !important; min-height: 38px !important; padding: 0 !important; border: 1px solid var(--luna-ink) !important; background: var(--luna-paper) !important; color: var(--luna-ink) !important; font-size: 19px !important; cursor: pointer; }
.booking-date-picker:focus-visible { outline: 2px solid var(--luna-neon); outline-offset: 2px; }
.booking-date-picker[hidden] { display: none !important; }
.booking-form [data-error] { display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 4px; color: var(--luna-rust); font: 12px/1.4 var(--font-mono); overflow-wrap: anywhere; }
.booking-form [aria-invalid="true"] { border-bottom-color: var(--luna-rust); }
.booking-consent [data-error] { padding-left: 24px; }

.calendar[hidden] { display: none !important; }
.calendar { position: fixed; z-index: 1000; color: var(--luna-ink); font-family: var(--font-body, inherit); }
.calendar__panel { overflow: hidden; border: 1px solid var(--luna-ink); background: var(--luna-card); box-shadow: 0 12px 36px rgba(35,31,26,.2); }
.calendar__header { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 16px; padding: 16px 20px 12px; border-bottom: 1px solid var(--luna-ink); }
.calendar__eyebrow { margin: 0; font-family: var(--font-display); font-size: 17px; line-height: 1.2; }
.calendar__close { display: none; }
.calendar__nav { display: flex; grid-column: 2; grid-row: 1 / span 2; align-items: center; gap: 8px; }
.calendar__nav button,.calendar__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--luna-ink); background: transparent; color: inherit; font: 27px/1 var(--font-mono); cursor: pointer; }
.calendar--popover .calendar__close { display: none; }
.calendar__nav button:hover:not(:disabled),.calendar__close:hover { background: var(--luna-ink); color: var(--luna-paper); }
.calendar__nav button:disabled { opacity: .38; cursor: not-allowed; }
.calendar__months { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; padding: 16px 20px 20px; }
.calendar__month { min-width: 0; }
.calendar__month-title { margin: 0 0 12px; font: 20px/1.2 var(--font-display); text-align: center; text-transform: capitalize; }
.calendar__grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.calendar__grid th { height: 36px; color: var(--luna-ink-60); font: 12px/1 var(--font-mono); text-align: center; }
.calendar__grid td { height: 44px; padding: 1px; text-align: center; }
.calendar__day { display: grid; place-items: center; width: 100%; min-width: 40px; height: 42px; padding: 0; border: 1px solid transparent; background: transparent; color: var(--luna-ink); font: 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .16s ease,color .16s ease,border-color .16s ease; }
.calendar__day:hover:not(:disabled) { border-color: var(--luna-rust); }
.calendar__day.is-start,.calendar__day.is-end { border-color: var(--luna-neon); background: var(--luna-neon); color: var(--luna-paper); }
.calendar__day.is-in-range,.calendar__day.is-preview { background: color-mix(in srgb,var(--luna-neon) 18%,transparent); }
.calendar__day:disabled { color: var(--luna-ink-60); opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.calendar__day:focus-visible,.calendar__nav button:focus-visible,.calendar__close:focus-visible,.calendar__actions button:focus-visible { outline: 3px solid var(--luna-rust); outline-offset: 2px; }
.calendar__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--luna-ink); background: var(--luna-paper); }
.calendar__nights { margin: 0; font: 14px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.calendar__actions { display: flex; align-items: center; gap: 10px; }
.calendar__actions button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--luna-ink); font: 12px/1.2 var(--font-mono); cursor: pointer; }
.calendar__clear { background: transparent; color: var(--luna-ink); }
.calendar__done { background: var(--luna-ink); color: var(--luna-paper); }
.calendar__actions button:hover { border-color: var(--luna-rust); background: var(--luna-rust); color: var(--luna-paper); }
body[data-calendar-open="true"] .sticky-booking { display: none !important; }
body[data-calendar-sheet="true"] { position: fixed; top: calc(var(--calendar-scroll-lock, 0px) * -1); inset-inline: 0; overflow: hidden; width: 100%; }
@media (max-width:760px) {
  .calendar--sheet { inset: 0; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: rgba(22,19,16,.42); }
  .calendar--sheet .calendar__panel { display: flex; flex-direction: column; width: 100%; max-height: min(94dvh,900px); padding-bottom: env(safe-area-inset-bottom); border-width: 1px 0 0; box-shadow: 0 -12px 36px rgba(35,31,26,.22); }
  .calendar--sheet .calendar__header { position: sticky; z-index: 1; top: 0; grid-template-columns: 44px 1fr 96px; gap: 8px; padding: 10px 14px; background: var(--luna-card); }
  .calendar--sheet .calendar__close { display: grid; grid-column: 1; grid-row: 1; border: 0; }
  .calendar--sheet .calendar__eyebrow { grid-column: 2; grid-row: 1; font-size: 16px; }
  .calendar--sheet .calendar__nav { grid-column: 3; grid-row: 1; }
  .calendar--sheet .calendar__nav button { width: 44px; height: 44px; }
  .calendar__months--single { display: block; overflow: auto; min-height: 0; padding: 14px 12px 18px; overscroll-behavior: contain; }
  .calendar__month-title { margin-bottom: 8px; font-size: 21px; }
  .calendar__grid th { height: 40px; font-size: 12px; }
  .calendar__grid td { height: 48px; padding: 2px; }
  .calendar__day { min-width: 44px; height: 44px; font-size: 14px; }
  .calendar__footer { position: sticky; z-index: 1; bottom: 0; flex: 0 0 auto; padding: 12px 16px max(12px,env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(35,31,26,.08); }
  .calendar__actions { gap: 8px; }
  .calendar__actions button { min-height: 48px; }
}
@media (prefers-reduced-motion:reduce) { .calendar__day { transition: none; } }
@media print { .calendar { display: none !important; } }