@import url("/assets/fonts/fonts.css");

/* ============================================================
   Hotels Valls d'Àneu
   Committed oxblood on warm paper. Vollkorn + Archivo.
   See DESIGN.md for why.
   ============================================================ */

:root {
  /* --- colour ------------------------------------------------ */
  --paper:        oklch(0.968 0.012 75);
  --paper-deep:   oklch(0.938 0.018 72);
  --paper-edge:   oklch(0.888 0.020 70);
  --ink:          oklch(0.215 0.014 55);
  --ink-soft:     oklch(0.435 0.020 55);
  --oxblood:      oklch(0.352 0.112 24);
  --oxblood-deep: oklch(0.278 0.094 24);
  --oxblood-lift: oklch(0.468 0.140 26);
  --amber:        oklch(0.735 0.152 68);
  --amber-deep:   oklch(0.515 0.122 60);
  --moss:         oklch(0.505 0.072 148);

  /* on dark grounds */
  --on-ox:        oklch(0.962 0.014 72);
  --on-ox-soft:   oklch(0.830 0.026 66);

  /* --- type -------------------------------------------------- */
  --display: "Vollkorn", Georgia, "Times New Roman", serif;
  --text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs:  0.78rem;
  --t-sm:  0.9rem;
  --t-base: 1rem;
  --t-md:  1.3rem;
  --t-lg:  1.7rem;
  --t-xl:  2.2rem;
  --t-2xl: 2.9rem;
  --t-3xl: clamp(3.1rem, 7vw, 5.2rem);

  /* --- space ------------------------------------------------- */
  --gap-section: clamp(4rem, 9vw, 8rem);
  --gap-block: clamp(2rem, 4vw, 3.5rem);
  --pad-x: clamp(1.15rem, 5vw, 4rem);
  --measure: 68ch;
  --wide: 84rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   base
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-base);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); line-height: 0.98; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--oxblood-lift); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--oxblood); }

img { max-width: 100%; height: auto; display: block; }

/* Blur-up: the inline 24px placeholder is painted as the element's own
   background, scaled to fill and softened, then hidden the moment the real
   file decodes. No JS, no extra request, no layout shift. */
img.ph {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: auto;
}
/* progressive: the 320px tier shows softly blurred, then the sharp tier
   fades in over it (clip-path keeps the blur halo inside the frame) */
img.ph.is-low { filter: blur(14px); clip-path: inset(0); }
img.ph.is-sharp { filter: blur(0); clip-path: inset(0); transition: filter 0.45s var(--ease); }
@media (prefers-reduced-motion: reduce) { img.ph.is-sharp { transition: none; } }


::selection { background: var(--amber); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--oxblood-lift);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--oxblood); color: var(--on-ox);
  padding: 0.75rem 1.25rem; font-weight: 600;
}
.skip:focus { left: 0; }

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

/* ============================================================
   layout helpers
   ============================================================ */

.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--pad-x); }
.wrap-narrow { width: 100%; max-width: 58rem; margin-inline: auto; padding-inline: var(--pad-x); }

.section { padding-block: var(--gap-section); }
.section-tight { padding-block: var(--gap-block); }

/* A heading with a rule that runs to the edge of the measure, not the page. */
.lede {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ============================================================
   prototype banner
   ============================================================ */

.demo {
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-xs);
  letter-spacing: 0.01em;
}
.demo .wrap { display: flex; gap: 0.85rem; align-items: baseline; padding-block: 0.55rem; flex-wrap: wrap; }
.demo b {
  font-weight: 700; letter-spacing: 0.09em; font-size: 0.7rem;
  background: var(--amber); color: var(--ink);
  padding: 0.15rem 0.45rem; border-radius: 2px; flex: none;
}
.demo span { color: oklch(0.80 0.012 70); }

/* ============================================================
   header
   ============================================================ */

.head {
  position: relative; z-index: 60;
  border-bottom: 1px solid var(--paper-edge);
  background: var(--paper);
}
.head .wrap {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1rem;
}

/* The house's own mark: a pen-and-ink drawing of the building with the
   handwritten name. Black linework on transparency, so it sits directly on
   the paper ground and gets inverted on the oxblood ones. */
/* The house's own mark, split from its lockup: the engraved building reads at
   header size, the handwritten script under it does not, so the name is set in
   type here and the full lockup runs large in the footer. */
.brand {
  display: flex; align-items: center; gap: 0.8rem;
  flex: none; margin-right: auto; text-decoration: none; color: var(--ink);
}
.brand-mark {
  height: clamp(2.6rem, 4vw, 3.3rem);
  width: auto; max-width: none; flex: none;
}
.brand-name {
  font-family: var(--display);
  font-size: var(--t-md); font-weight: 600; line-height: 1;
  letter-spacing: -0.015em;
  display: flex; flex-direction: column; gap: 0.28rem;
}
.brand-name small {
  font-family: var(--text);
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* Pre-rendered in paper ink rather than CSS-inverted: the linework is fine
   enough that inverting antialiased near-transparent pixels leaves nothing.
   It also has to run large: at thumbnail size the 1px strokes downscale into
   near-transparency and the drawing disappears entirely. */
.foot-logo {
  width: min(100%, 44rem);
  height: auto;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.note { font-size: var(--t-sm); color: var(--ink-soft); max-width: 46ch; }

.nav { display: flex; gap: clamp(0.9rem, 2vw, 1.7rem); align-items: center; }
.nav a {
  color: var(--ink); text-decoration: none; white-space: nowrap;
  font-size: var(--t-sm); font-weight: 500;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.nav a:hover { border-bottom-color: var(--oxblood); }
.nav a[aria-current="page"] { border-bottom-color: var(--oxblood); font-weight: 600; }

.btn-book {
  background: var(--oxblood); color: var(--on-ox);
  padding: 0.6rem 1.15rem; text-decoration: none;
  font-size: var(--t-sm); font-weight: 600; border-radius: 2px;
  display: inline-flex; align-items: center; min-height: 2.5rem;
  flex: none;
  transition: background 0.25s var(--ease);
}
.btn-book:hover { color: var(--on-ox); }
.btn-book:hover { background: var(--oxblood-deep); }

.langs { display: flex; gap: 0.4rem; align-items: center; }
.langs a {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none;
  color: var(--ink-soft); padding: 0.2rem 0.3rem; border-radius: 2px;
}
.langs a:hover { color: var(--ink); background: var(--paper-deep); }
.langs a[aria-current="true"] { color: var(--paper); background: var(--oxblood); }

.menu-toggle { display: none; }

/* ============================================================
   hero
   ============================================================ */

.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero-img {
  width: 100%;
  height: clamp(24rem, 74vh, 44rem);
  height: clamp(24rem, 74svh, 44rem);
  object-fit: cover;
  transform: scale(1.04);
  animation: heroSettle 1.5s var(--ease) forwards;
}
/* Scale only: fading from opacity 0 would also hide the blur-up placeholder
   this element carries as its background, which defeats the point of it. */
@keyframes heroSettle { to { transform: none; } }

.hero-body {
  position: absolute; inset: auto 0 0 0;
  padding-block: clamp(2.5rem, 7vw, 5rem);
  /* Deep enough to hold white type over the bright stone facade. */
  background: linear-gradient(to top,
    oklch(0.17 0.022 45 / 0.95) 0%,
    oklch(0.17 0.022 45 / 0.88) 38%,
    oklch(0.17 0.022 45 / 0.62) 68%,
    oklch(0.17 0.022 45 / 0) 100%);
  color: var(--paper);
  text-shadow: 0 1px 14px oklch(0.17 0.02 45 / 0.5);
}
.hero-body .wrap > * {
  opacity: 0;
  animation: riseIn 0.9s var(--ease) forwards;
}
.hero-body .wrap > :nth-child(1) { animation-delay: 0.35s; }
.hero-body .wrap > :nth-child(2) { animation-delay: 0.45s; }
.hero-body .wrap > :nth-child(3) { animation-delay: 0.58s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(1.4rem); } to { opacity: 1; transform: none; } }

.hero-eyebrow {
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  background: oklch(0.968 0.012 75 / 0.92);
  margin: 0 0 1.1rem;
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  text-shadow: none;
}
.hero h1 { color: var(--paper); max-width: 16ch; }
.hero p.lede { color: oklch(0.90 0.014 72); margin-top: 1.1rem; max-width: 44ch; }

/* ============================================================
   booking bar
   ============================================================ */

.bookbar { background: var(--oxblood); color: var(--on-ox); }
.bookbar-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0.85rem;
  align-items: end;
  padding-block: 1.15rem;
}
.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.field label {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--on-ox-soft);
}
/* Dates are chosen from the calendar, never typed: a native date input renders
   in the browser's locale (mm/dd/yyyy on an en-US browser) and cannot be told
   otherwise, which is wrong for a Catalan site. */
.datebtn {
  font-family: var(--text); font-size: var(--t-base);
  text-align: left; cursor: pointer;
  padding: 0.62rem 0.7rem; min-height: 2.75rem; width: 100%;
  border: 1px solid oklch(0.55 0.06 25); border-radius: 2px;
  background: oklch(0.30 0.09 24); color: var(--on-ox-soft);
  transition: border-color 0.2s var(--ease);
}
.datebtn:hover { border-color: var(--amber); }
.datebtn.is-set { color: var(--on-ox); font-weight: 600; }

.bookbar-form { position: relative; }
.cal-pop {
  position: absolute; z-index: 80; top: calc(100% + 0.5rem); left: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  background: var(--paper); color: var(--ink);
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--paper-edge); border-radius: 3px;
  box-shadow: 0 18px 44px oklch(0.2 0.02 40 / 0.28);
  /* explicit width: absolute shrink-to-fit was collapsing the two months
     into one narrow stacked column under the condensed bar */
  width: min(46rem, calc(100vw - 2rem));
  max-width: min(46rem, calc(100vw - 2rem));
  /* belt: if a locale's price labels ever widen the grids again, scroll
     inside the panel rather than clipping a month mid-column */
  overflow-x: auto;
}
/* A class rule setting `display` beats the UA stylesheet's [hidden]{display:none},
   so the popover stayed visible while its hidden attribute was set. */
.cal-pop[hidden] { display: none; }
.cal-nav { grid-column: 1 / -1; display: flex; gap: 0.6rem; justify-content: space-between; }
.cal-pop .cal caption { font-size: var(--t-base); }
.cal-pop .day { min-height: 2.4rem; font-size: var(--t-xs); }
.cal-pop .day em { font-size: 0.55rem; }

.results-head {
  grid-column: 1 / -1; background: var(--paper); margin: 0; max-width: none;
  padding: 0.85rem 1rem; font-size: var(--t-sm); color: var(--ink-soft);
}

.summary dt i { font-style: normal; color: var(--amber-deep); font-size: var(--t-xs); }

.field input, .field select {
  font-family: var(--text); font-size: var(--t-base);
  padding: 0.62rem 0.7rem;
  border: 1px solid oklch(0.55 0.06 25);
  border-radius: 2px;
  background: oklch(0.30 0.09 24);
  color: var(--on-ox);
  width: 100%;
  min-height: 2.75rem;
}
/* selects lose the stock OS look everywhere: flat field + our own chevron */
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23e8ddd2' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 0.72rem;
  padding-right: 2.1rem; cursor: pointer;
}
.field input::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.75); cursor: pointer; }
.field input:focus-visible, .field select:focus-visible { outline-color: var(--amber); }

.btn {
  font-family: var(--text); font-size: var(--t-base); font-weight: 600;
  padding: 0.72rem 1.5rem; min-height: 2.75rem;
  border: 0; border-radius: 2px; cursor: pointer;
  background: var(--amber); color: var(--ink);
  transition: background 0.22s var(--ease), transform 0.22s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: oklch(0.79 0.16 70); }
.btn:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent; color: var(--oxblood);
  border: 1.5px solid var(--oxblood);
}
.btn-ghost:hover { background: var(--oxblood); color: var(--on-ox); }
.btn-lg { font-size: var(--t-md); padding: 0.95rem 2rem; }

/* ============================================================
   direct booking
   ============================================================ */

.direct { background: var(--oxblood); color: var(--paper);
  padding-block: clamp(3.4rem, 7vw, 5.6rem); text-align: center; }
.direct h2 { color: var(--paper); font-size: clamp(2rem, 3.4vw, 2.9rem); }
.direct-points { list-style: none; margin: 2.7rem auto 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 66rem; text-align: left; }
.direct-points li { border-top: 1px solid oklch(1 0 0 / 0.28); padding-top: 1.15rem; }
.direct-points li b { display: block; font-family: var(--display); font-weight: 600;
  font-size: 1.22rem; margin-bottom: 0.4rem; }
.direct-points li span { font-size: var(--t-sm); color: var(--paper-deep); line-height: 1.45; }
.direct-cta { margin-top: 2.9rem; text-align: center; max-width: none; }
@media (max-width: 62rem) { .direct-points { grid-template-columns: 1fr 1fr; } }
@media (max-width: 32rem) { .direct-points { grid-template-columns: 1fr; gap: 1.4rem; } }

.saving {
  margin-top: 1.75rem;
  font-size: var(--t-base); color: var(--ink);
  max-width: 40ch;
}
.saving b {
  color: var(--oxblood); font-size: var(--t-xl);
  font-family: var(--display); font-weight: 600;
  vertical-align: -0.06em; padding-left: 0.1rem;
}
.saving span { display: block; margin-top: 0.3rem; font-size: var(--t-xs); color: var(--ink-soft); }

/* ============================================================
   the two houses
   ============================================================ */

.houses { display: grid; gap: var(--gap-block); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.houses > :nth-child(2) { margin-top: clamp(2rem, 6vw, 5rem); }
.house figure { margin: 0; }
.house img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.house h3 { margin-top: 1.15rem; }
.house .where {
  font-size: var(--t-xs); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; margin: 0.4rem 0 0.7rem;
}
.house p { font-size: var(--t-sm); }

/* ============================================================
   rooms — editorial list, alternating. never a card grid.
   ============================================================ */

.rooms { display: grid; gap: clamp(3rem, 6vw, 5.5rem); }
.room {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.room:nth-child(even) > figure { order: 2; }
.room figure { margin: 0; position: relative; }
.room figure img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }

.room-house {
  position: absolute; top: 0.85rem; left: 0.85rem;
  background: var(--paper); color: var(--ink);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.6rem; border-radius: 2px;
}

.room-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.room-price { margin-left: auto; text-align: right; flex: none; }
.room-price b {
  font-family: var(--display); font-size: var(--t-xl);
  font-weight: 600; color: var(--oxblood); display: block; line-height: 1;
}
.room-price span { font-size: var(--t-xs); color: var(--ink-soft); }

.room-meta {
  display: flex; gap: 0.5rem 1.1rem; flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--ink-soft);
  margin: 0.7rem 0 1rem;
}
.room p { font-size: var(--t-sm); }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.1rem 0 0; padding: 0; }
.tags li {
  font-size: var(--t-xs); color: var(--ink-soft);
  border: 1px solid var(--paper-edge);
  padding: 0.24rem 0.6rem; border-radius: 100px;
}
.rates { margin-top: 1rem; border-collapse: collapse; font-size: var(--t-xs); }
.rates th, .rates td { padding: 0.32rem 0; text-align: left; font-weight: 500; color: var(--ink-soft); }
.rates th { padding-right: 1.4rem; }
.rates td { font-weight: 700; color: var(--oxblood); font-variant-numeric: tabular-nums; }
.rates tr + tr th, .rates tr + tr td { border-top: 1px solid var(--paper-edge); }

/* ============================================================
   restaurant — oxblood ground, the menu board
   ============================================================ */

.dark { background: var(--oxblood); color: var(--on-ox); }
.dark h1, .dark h2, .dark h3 { color: var(--paper); }
.dark p { color: var(--on-ox-soft); }
.dark .lede { color: oklch(0.87 0.02 66); }
.dark a { color: var(--amber); }
/* Buttons keep their own contrast; without this they inherit the amber link
   colour and become amber-on-amber. */
.dark .btn { color: var(--ink); }
.dark .btn-ghost { color: var(--paper); border-color: var(--paper); background: transparent; }
.dark .btn-ghost:hover { background: var(--paper); color: var(--oxblood); }

.rest-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.rest-split img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; }
/* Photographs of people keep their own portrait proportion and are framed on
   the upper half. A square centre-crop of a portrait cuts faces off, which is
   exactly what happened on the about page. */
.rest-split img.portrait {
  aspect-ratio: 3 / 4; object-position: 50% 22%;
  max-height: 60vh; width: auto; margin-inline: auto;
  max-height: 60svh;
}
/* The printed carta as a booklet: the cover sits on the band with two sheets
   fanned behind it, and a tap opens the whole thing in the lightbox. */
.carta-book { width: min(100%, 21rem); margin-inline: auto; padding: 0.8rem 1rem 1.2rem 0.4rem; }
.carta-cover { position: relative; margin: 0; z-index: 0; }
.carta-cover img {
  width: 100%; aspect-ratio: 1241 / 1755; object-fit: cover; display: block;
  background: var(--paper); cursor: zoom-in;
  box-shadow: 0 18px 40px oklch(0.1 0.03 30 / 0.45);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.carta-cover::before, .carta-cover::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: oklch(0.955 0.012 75);
  box-shadow: 0 8px 20px oklch(0.1 0.03 30 / 0.3);
}
.carta-cover::before { transform: rotate(-2.4deg) translate(-5px, 6px); }
.carta-cover::after  { transform: rotate(1.8deg) translate(7px, 10px); }
.carta-cover:hover img { transform: translate(2px, -6px) rotate(-0.6deg); box-shadow: 0 26px 48px oklch(0.1 0.03 30 / 0.5); }

.hours { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.55rem; max-width: 24rem; }
.hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.55rem; border-bottom: 1px solid oklch(0.47 0.09 24);
  font-size: var(--t-sm);
}
.hours dt, .hours b { font-weight: 600; color: var(--paper); }
.hours time { font-variant-numeric: tabular-nums; color: var(--on-ox-soft); }

/* menu: real columns, like the board */
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.8rem, 4.5vw, 4rem); }
.menu-col { min-width: 0; }
@media (max-width: 46rem) { .menu-cols { grid-template-columns: 1fr; } }
/* The set menu has exactly three courses; flowing them through two CSS columns
   strands the last one beside a long middle course. Lay it out as a grid. */
.menu-day .menu-cols {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.menu-day-card {
  background: var(--paper); border: 1px solid var(--paper-edge);
  padding: clamp(1.6rem, 4vw, 2.8rem); max-width: 72rem; margin-inline: auto;
}
.menu-day-head { text-align: center; margin-bottom: 2rem; }
.menu-day-head b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.7rem); color: var(--oxblood); margin: 0.35rem 0 0.3rem;
}
.menu-day-head p { font-size: var(--t-sm); color: var(--ink-soft); margin-inline: auto; }
.menu-day .menu-sec { margin-bottom: 0; }
.menu-sec { break-inside: avoid; margin-bottom: 2.2rem; }
.menu-day .menu-sec h3 { color: var(--oxblood); border-bottom-color: var(--paper-edge); }
.menu-day .menu-sec li i { color: var(--ink-soft); }
.menu-sec li { display: flex; align-items: baseline; gap: 0.6rem; }
.menu-sec li .lead {
  flex: 1 1 1.5rem; min-width: 1.5rem;
  border-bottom: 1px dotted currentColor; opacity: 0.3;
  transform: translateY(-0.3em);
}
.menu-day .menu-sec li { display: block; }
.menu-sec li .dish { min-width: 0; }
.menu-sec li .pr { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.menu-sec li small { color: var(--ink-soft); }
.carta-note { margin-top: 0.5rem; }
.menu-sec h3 {
  font-size: var(--t-md); color: var(--paper);
  padding-bottom: 0.45rem; margin-bottom: 0.75rem;
  border-bottom: 1px solid oklch(0.47 0.09 24);
}
.menu-sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.menu-sec li { font-size: var(--t-sm); line-height: 1.4; }
.menu-sec li i {
  display: block; font-style: normal; font-size: var(--t-xs);
  color: oklch(0.72 0.04 60); margin-top: 0.1rem;
}

.menu-day {
  border: 1px solid oklch(0.50 0.10 25);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 2px;
}
.menu-day .price {
  font-family: var(--display); font-size: var(--t-2xl);
  color: var(--amber); line-height: 1; display: block;
}

/* ============================================================
   restaurant thumbnails + valley teaser
   ============================================================ */

.thumbs {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
}
.thumbs img { aspect-ratio: 1; object-fit: cover; border-radius: 2px; }

.valley-teaser {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.valley-shots {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem;
}
.valley-shots img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
/* stagger the column so it reads as a composition rather than a tiled block */
.valley-shots li:nth-child(2n) { transform: translateY(clamp(1rem, 3vw, 2.25rem)); }

/* ============================================================
   ratings band
   ============================================================ */

.ratings { background: var(--paper); text-align: center; }
.ratings .scores { display: flex; justify-content: center;
  gap: clamp(2.5rem, 8vw, 7rem); flex-wrap: wrap; }
.ratings .score { display: block; padding: 0; border: 0; }
.ratings .score:first-child { border: 0; }
.ratings .score b { display: block; font-family: var(--display); font-weight: 600;
  color: var(--ink); font-size: clamp(3rem, 5.5vw, 4.6rem); line-height: 1; }
.ratings .score b i { font-style: normal; font-size: 0.38em; color: var(--ink-soft); }
.ratings .score em { display: block; font-style: normal; font-family: var(--display);
  font-size: var(--t-md); margin-top: 0.55rem; }
.ratings .score span { display: block; font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 0.3rem; }
.ratings-note { margin-top: 2.4rem; margin-inline: auto; font-size: var(--t-sm); color: var(--ink-soft); }

/* ============================================================
   reviews
   ============================================================ */

.reviews-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--gap-block) clamp(2rem, 6vw, 5rem); align-items: start;
}
.scores { display: grid; }
.score {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 0.9rem; align-items: baseline;
  padding: 0.95rem 0; border-bottom: 1px solid var(--paper-edge);
}
.score:first-child { border-top: 1px solid var(--paper-edge); }
.score b {
  font-family: var(--display); font-size: var(--t-xl);
  font-weight: 600; color: var(--oxblood); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score b i { font-style: normal; font-size: 0.5em; color: var(--ink-soft); }
.score em { font-style: normal; font-weight: 600; color: var(--ink); font-size: var(--t-sm); }
.score span { font-size: var(--t-xs); color: var(--ink-soft); }

.honest {
  padding: clamp(1.25rem, 3vw, 1.9rem);
  background: var(--paper-deep);
  border-radius: 2px;
  font-size: var(--t-sm);
  max-width: 52ch;
}

/* ============================================================
   valley
   ============================================================ */

.acts { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.act {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
}
.act:nth-child(even) > figure { order: 2; }
.act figure { margin: 0; }
.act img { aspect-ratio: 5 / 3; object-fit: cover; border-radius: 2px; }
.act p { font-size: var(--t-sm); }

.seasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--gap-block) clamp(1.5rem, 3vw, 2.5rem); }
.season h3 { color: var(--oxblood); margin-bottom: 0.5rem; }
/* The seasons block sits on the oxblood ground, where an oxblood heading is
   invisible. Same trap as a button inheriting the link colour. */
.dark .season h3 { color: var(--paper); }
.season p { font-size: var(--t-sm); }

/* ============================================================
   gallery
   ============================================================ */


@media (max-width: 46rem) {
}

/* ============================================================
   contact
   ============================================================ */

.wide-shot { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }

/* A full-width photograph at the top of a page. Capped: an image taller than
   about two thirds of the screen stops being a picture and becomes a wall. */

/* Backstop for every content image. All of them are object-fit: cover, so
   clamping height crops rather than distorts. */
main img { max-height: 78vh; max-height: 78svh; }
.maplink { font-family: var(--text); font-size: var(--t-sm); font-weight: 600; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--gap-block); }
.dl { margin: 0; display: grid; gap: 1.35rem; }
.dl dt {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.25rem;
}
.dl dd { margin: 0; font-size: var(--t-md); font-family: var(--display); }
.dl dd a { text-decoration: none; }
.dl dd small { display: block; font-family: var(--text); font-size: var(--t-xs); color: var(--ink-soft); margin-top: 0.2rem; }

.routes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.routes li {
  font-size: var(--t-sm); padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--paper-edge);
}

/* ============================================================
   booking page
   ============================================================ */

/* min-width:0 on both levels: grid items default to min-width:auto, which
   makes them size to content instead of shrinking, and the calendar then
   lays out more columns than fit. */
.steps { display: grid; gap: var(--gap-block); min-width: 0; }
.steps > div { min-width: 0; }

.cal-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
  max-width: 62rem;
}
.cal caption {
  font-family: var(--display); font-size: var(--t-md); font-weight: 600;
  text-align: left; padding-bottom: 0.75rem; color: var(--ink);
}
.cal { width: 100%; border-collapse: collapse; }
.cal th {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
  padding-bottom: 0.5rem; text-align: center;
}
.cal td { padding: 1px; text-align: center; }
.day {
  width: 100%; aspect-ratio: 1; min-height: 2.8rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.05rem;
  border: 1px solid transparent; background: var(--paper-deep);
  border-radius: 2px; cursor: pointer; font-family: var(--text);
  font-size: var(--t-sm); color: var(--ink); line-height: 1;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.day em { font-style: normal; font-size: 0.6rem; color: var(--amber-deep); font-weight: 600; }
.day:hover:not(:disabled) { background: var(--oxblood-lift); color: var(--on-ox); }
.day:hover:not(:disabled) em { color: var(--amber); }
.day:disabled { background: transparent; color: oklch(0.615 0.012 70); cursor: not-allowed; text-decoration: line-through; }
.day[aria-pressed="true"] { background: var(--oxblood); color: var(--on-ox); font-weight: 700; }
.day[aria-pressed="true"] em { color: var(--amber); }
.day.in-range { background: oklch(0.86 0.045 30); color: var(--oxblood-deep); }
.day.today { border-color: var(--amber-deep); }

.results { display: grid; gap: 1px; background: var(--paper-edge); border: 1px solid var(--paper-edge); border-radius: 2px; }
.result {
  background: var(--paper);
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto;
  gap: clamp(0.85rem, 2vw, 1.5rem); align-items: center;
  padding: 1rem;
}
.result img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.result h3 { font-size: var(--t-md); }
.result .meta { font-size: var(--t-xs); color: var(--ink-soft); margin-top: 0.25rem; }
.result .cost { text-align: right; }
.result .cost b { font-family: var(--display); font-size: var(--t-lg); color: var(--oxblood); display: block; line-height: 1; }
.result .cost b.on-req { font-family: var(--text); font-size: var(--t-sm); font-weight: 600; line-height: 1.3; max-width: 9rem; margin-left: auto; }
.result .cost span { font-size: var(--t-xs); color: var(--ink-soft); display: block; margin: 0.2rem 0 0.6rem; }
/* chosen = affirmative, not alarming: the old pink tint matched the error
   message palette and read as a problem (2026-09-01 audit) */
.result[data-chosen="true"] { background: var(--paper-deep); box-shadow: inset 0 0 0 2px var(--oxblood); }
.result .btn-chosen { background: var(--moss); color: oklch(0.97 0.01 148); }

.house-link { margin-top: 0.7rem; }
.house-link a { font-weight: 600; text-decoration-color: var(--paper-edge); }
.house-link b { color: var(--amber-deep); }

/* CTA on oxblood bands: outline, not amber (amber is the price signal) */
.btn-line {
  display: inline-block; font-family: var(--text); font-size: var(--t-base);
  font-weight: 600; padding: 0.68rem 1.5rem; min-height: 2.75rem;
  border: 1px solid var(--on-ox-soft); border-radius: 2px;
  color: var(--on-ox); text-decoration: none;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn-line:hover { background: oklch(0.31 0.10 24); border-color: var(--on-ox); color: var(--on-ox); }

/* which house a room belongs to matters when prices sit side by side */
.house-tag { font-family: var(--text); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--paper-edge); border-radius: 2px;
  padding: 0.14rem 0.4rem; vertical-align: 0.15em; white-space: nowrap; }

.msg { padding: 1.15rem 1.25rem; border-radius: 2px; font-size: var(--t-sm); background: var(--paper-deep); }
.msg-bad { background: oklch(0.92 0.045 25); color: var(--oxblood-deep); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.15rem; }
.form-grid .full { grid-column: 1 / -1; }
.f label {
  display: block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.35rem;
}
.f input, .f textarea {
  font-family: var(--text); font-size: var(--t-base);
  width: 100%; padding: 0.68rem 0.75rem; min-height: 2.75rem;
  border: 1px solid var(--paper-edge); border-radius: 2px;
  background: var(--paper); color: var(--ink);
}
.f textarea { min-height: 6rem; resize: vertical; }
.f small { display: block; font-size: var(--t-xs); color: var(--ink-soft); margin-top: 0.3rem; }
.f input[aria-invalid="true"], .f textarea[aria-invalid="true"] { border-color: var(--oxblood-lift); }
.err { font-size: var(--t-xs); color: var(--oxblood-lift); font-weight: 600; margin-top: 0.3rem; }
/* honeypot: invisible to people, present for bots that fill every field */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* display-currency picker on the booking page */
.cur-pick { display: flex; align-items: center; gap: 0.55rem; font-size: var(--t-xs);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); }
.cur-pick select { font: inherit; font-size: var(--t-sm); letter-spacing: normal;
  padding: 0.5rem 2.1rem 0.5rem 0.75rem; min-height: 2.5rem;
  border: 1px solid var(--paper-edge); border-radius: 2px; background-color: var(--paper);
  color: var(--ink); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235a2420' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 0.72rem; }
.cur-pick select:hover { border-color: var(--amber-deep); }
.cur-pick select:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---- step 3: the details form ---- */
.f label .opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.f input:focus-visible, .f textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* phone: the country code is a real <select> laid invisibly over a plain "+34" box */
.phone { display: flex; gap: 0.5rem; }
.cc {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0 0.7rem 0 0.8rem; min-height: 2.75rem;
  border: 1px solid var(--paper-edge); border-radius: 2px; background: var(--paper);
  font-size: var(--t-base); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cc::after {
  content: ''; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem;
  border-right: 1.6px solid var(--ink-soft); border-bottom: 1.6px solid var(--ink-soft); transform: rotate(45deg);
}
.cc:hover { border-color: var(--amber-deep); }
.cc:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }
.cc select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.phone input { flex: 1; min-width: 0; }
.send-row { margin-top: 1.5rem; }
.fine { font-size: var(--t-xs); color: var(--ink-soft); margin-top: 1rem; max-width: 54ch; line-height: 1.55; }
.fine a { color: var(--oxblood-lift); }

/* ---- the stay summary beside the form ---- */
.summary { background: var(--paper-deep); border-radius: 2px; overflow: hidden; }
.sum-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* a short laptop screen: flatter photo so the whole card fits while it follows the scroll */
@media (min-width: 60.01rem) and (max-height: 52rem) { .sum-photo { aspect-ratio: 5 / 2; } }
.sum-body { padding: clamp(1.15rem, 3vw, 1.7rem); }
.sum-house { font-size: var(--t-xs); color: var(--ink-soft); }
.summary h3 { font-size: var(--t-lg); line-height: 1.05; margin: 0.1rem 0 0.25rem; }
.sum-meta { font-size: var(--t-xs); color: var(--ink-soft); }
.summary dl { display: grid; gap: 0.5rem; margin: 0; }
.summary dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); }
.summary dt { color: var(--ink-soft); flex: none; }
.summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sum-stay { margin-top: 1.1rem; padding: 1rem 0; border-top: 1px solid var(--paper-edge); }
.sum-stay dd { font-weight: 500; }
@media (max-width: 40rem) {
  .sum-stay div { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.15rem; line-height: 1.4; }
  .sum-stay dd { text-align: left; }
}
.sum-nights { padding-top: 1rem; border-top: 1px solid var(--paper-edge); }
.sum-nights dd { font-weight: 600; }
.summary .grand { border-top: 1px solid var(--paper-edge); padding-top: 0.9rem; margin-top: 0.4rem; align-items: baseline; }
.summary .grand dt { color: var(--ink); font-size: var(--t-base); }
.summary .grand dd { font-family: var(--display); font-size: var(--t-lg); color: var(--oxblood); line-height: 1; font-weight: 600; }
.sum-note, .sum-incl { font-size: var(--t-xs); color: var(--ink-soft); margin-top: 0.85rem; max-width: 44ch; }
/* beside the form the summary keeps pace with the scroll while the form is
   the taller of the two; it stays put when it is not */
@media (min-width: 60.01rem) {
  #form-step .summary { position: sticky; top: 1.25rem; align-self: start; }
}

.done { text-align: left; max-width: 44rem; }
.done-ref {
  font-family: var(--display); font-size: var(--t-xl); color: var(--oxblood);
  letter-spacing: 0.04em;
}
.tick { width: 3rem; height: 3rem; color: var(--moss); margin-bottom: 1rem; }

/* ============================================================
   footer
   ============================================================ */

.foot { background: var(--oxblood-deep); color: var(--on-ox-soft); padding-block: var(--gap-section) var(--gap-block); font-size: var(--t-sm); }
.foot a { color: var(--paper); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--gap-block); }
.foot h3 { color: var(--paper); font-size: var(--t-sm); font-family: var(--text); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.8rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.foot-base {
  margin-top: var(--gap-block); padding-top: 1.25rem;
  border-top: 1px solid oklch(0.40 0.08 24);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: var(--t-xs);
}

/* ============================================================
   lightbox
   ============================================================ */

.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline-offset: 2px; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 3vw, 2.5rem);
  background: oklch(0.14 0.016 45 / 0.975);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; min-width: 0; text-align: center; }
.lightbox img {
  max-width: 100%; max-height: 82vh;
  max-height: 82svh;
  margin-inline: auto; border-radius: 2px;
  box-shadow: 0 24px 60px oklch(0.1 0.02 40 / 0.5);
}
.lightbox figcaption {
  color: var(--on-ox-soft); font-size: var(--t-sm);
  margin-top: 0.9rem; max-width: 60ch; margin-inline: auto;
}
.lb-close, .lb-nav {
  background: transparent; border: 0; cursor: pointer;
  color: var(--paper); font-size: 1.9rem; line-height: 1;
  min-width: 3rem; min-height: 3rem; border-radius: 2px;
}
.lb-close:hover, .lb-nav:hover { background: oklch(1 0 0 / 0.12); }
.lb-close { position: absolute; top: 0.6rem; right: 0.9rem; font-size: 2.4rem; }
.lb-nav[hidden] { visibility: hidden; display: block; }

@media (max-width: 46rem) {
  /* One column, and the nav buttons must be told to sit in it: without an
     explicit grid-column, auto-placement invents a second column and squeezes
     the photograph into the remainder. */
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding: 0.5rem; }
  .lightbox figure, .lb-prev, .lb-next { grid-column: 1; }
  .lightbox figure { grid-row: 1; align-self: center; }
  .lb-prev { grid-row: 2; justify-self: start; }
  .lb-next { grid-row: 2; justify-self: end; }
  .lightbox img { max-height: 72vh; max-height: 72svh; }
  .lightbox figcaption { margin-top: 0.7rem; }
}

/* thumbnails under a room's main photograph */
.ph-count {
  position: absolute; right: 0.7rem; bottom: 0.7rem;
  font-size: 0.72rem; letter-spacing: 0.06em;
  background: oklch(0.13 0.02 30 / 0.78); color: var(--paper);
  padding: 0.28rem 0.6rem; border-radius: 2px; pointer-events: none;
}

/* ============================================================
   scroll reveal
   ============================================================ */

/* Only ever hide content when JS is confirmed running (html.js is set by an
   inline script in <head>). Without this guard, a JS failure or a crawler
   would see an empty page. */
.js .reveal { opacity: 0; transform: translateY(1.5rem); }
.js .reveal.seen { opacity: 1; transform: none; transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }

/* ============================================================
   responsive
   ============================================================ */

@media (max-width: 60rem) {
  .direct-grid, .rest-split, .contact-grid, .houses, .reviews-grid,
  .valley-teaser, .ratings-row { grid-template-columns: 1fr; }
  /* on a phone the price summary must come BEFORE the details form: nobody
     should reach the send button without having seen their total */
  #form-step .contact-grid { display: flex; flex-direction: column; }
  #form-step .summary { order: -1; }
  /* 40px food thumbnails say nothing; the big plate photo carries the band */
  .thumbs { display: none; }
  .valley-shots li:nth-child(2n) { transform: none; }
  .houses > :nth-child(2) { margin-top: 0; }
  .room, .act { grid-template-columns: 1fr; }
  .room:nth-child(even) > figure, .act:nth-child(even) > figure { order: 0; }
  .menu-cols { columns: 1; }
  .bookbar-form { grid-template-columns: 1fr 1fr; }
  .bookbar-form .field-guests { grid-column: 1 / -1; }
  .bookbar-form .btn { grid-column: 1 / -1; }
}

/* The header runs out of room before the rest of the layout does: the brand
   lockup, four nav links, the CTA and the language switcher stop fitting on
   one line around 60rem, so it wraps earlier than everything else. */
@media (max-width: 64rem) {
  .head .wrap { flex-wrap: wrap; row-gap: 0.6rem; padding-block: 0.75rem; }
  /* Links WRAP rather than scroll: a hidden-scrollbar nav reads as a cut-off
     nav ("Cont…"), and nothing hints that it slides. Two visible rows beat
     one secretly scrollable one. The booking CTA stays pinned in the top row. */
  .nav { order: 3; width: 100%; flex-wrap: wrap; gap: 0 1.25rem; }
  .nav a { min-height: 44px; display: flex; align-items: center; white-space: nowrap; }
  .btn-book { order: 2; margin-left: auto; }
  .langs { order: 2; }
}

@media (max-width: 30rem) {
  .brand-name small { display: none; }
  .brand { gap: 0.6rem; }
  /* compress the header stack: brand + Reservar + languages share the top
     row, nav fits one line — four stacked rows ate the first screen */
  .brand-name { font-size: 1.02rem; }
  .brand-mark { height: 2.2rem; }
  .btn-book { padding: 0.45rem 0.8rem; min-height: 2.5rem; }
  .langs { gap: 0.05rem; }
  .langs a { padding: 0.3rem 0.32rem; font-size: 0.68rem; }
  .nav { gap: 0 0.85rem; }
  .nav a { font-size: 0.84rem; min-height: 40px; }
}

@media (max-width: 46rem) {
  .nav::-webkit-scrollbar { display: none; }
  /* a 16:9 strip is too thin to read on a phone */
  .wide-shot { aspect-ratio: 4 / 3; }
  .result { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .result .cost { grid-column: 1 / -1; text-align: left; display: flex; align-items: center; gap: 1rem; }
  .result .cost span { margin: 0; }
  .hero h1 { font-size: clamp(2.3rem, 10vw, 3.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-img, .hero-body .wrap > * { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .demo, .bookbar, .nav, .langs, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- accessibility settings (native panel, no third party) ---------- */
.a11y-btn { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; width: 48px; height: 48px;
  border-radius: 50%; border: 1px solid var(--paper-edge); background: var(--paper);
  color: var(--oxblood); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(28, 23, 19, 0.18); }
.a11y-btn svg { width: 26px; height: 26px; }
.a11y-btn:hover { background: var(--paper-deep); }
.a11y-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.a11y-panel { position: fixed; right: 1rem; bottom: 4.6rem; z-index: 91; width: min(20rem, calc(100vw - 2rem));
  background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 8px;
  padding: 1.1rem 1.2rem 1.2rem; box-shadow: 0 8px 30px rgba(28, 23, 19, 0.25); }
.a11y-panel[hidden] { display: none !important; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.a11y-head h2 { font-size: var(--t-md); }
.a11y-close { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer;
  color: var(--ink-soft); padding: 0.2rem 0.45rem; }
.a11y-close:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.a11y-panel fieldset { border: 0; padding: 0; margin: 0 0 0.9rem; }
.a11y-panel legend { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.45rem; }
.a11y-seg { display: flex; gap: 0.4rem; }
.a11y-seg button { flex: 1; font: inherit; font-size: var(--t-sm); padding: 0.45rem 0.3rem;
  border: 1px solid var(--paper-edge); border-radius: 4px; background: transparent;
  color: var(--ink); cursor: pointer; }
.a11y-seg button[aria-pressed="true"] { background: var(--oxblood); color: var(--on-ox); border-color: var(--oxblood); }
.a11y-seg button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.a11y-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; font-size: var(--t-sm); cursor: pointer; }
.a11y-row input { width: 1.1rem; height: 1.1rem; accent-color: var(--oxblood); }
.a11y-reset { margin-top: 0.7rem; width: 100%; }

/* effect classes, set on <html> */
.a11y-text-lg { font-size: 115%; }
.a11y-text-xl { font-size: 130%; }
.a11y-underline main a, .a11y-underline .foot a, .a11y-underline .nav a { text-decoration: underline !important; }
.a11y-no-motion *, .a11y-no-motion *::before, .a11y-no-motion *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.a11y-no-motion .reveal { opacity: 1 !important; transform: none !important; }
.a11y-contrast { --ink: #000; --ink-soft: #1c1713; --paper: #fff; --paper-deep: #fff;
  --paper-edge: #444; --oxblood: #4a120e; --oxblood-lift: #6d1207; --amber: #8a5a00;
  --amber-deep: #5c3c00; --on-ox: #fff; --on-ox-soft: #fff; --moss: #1e3a1e; }
.a11y-contrast img { filter: contrast(1.06); }

/* full-bleed interstitial band (welcome section): photography breaking the
   measure, capped so it stays a picture rather than a wall */
.wide-band { width: 100%; max-height: 68vh; object-fit: cover; max-height: 68svh; }

/* ---------- welcome band: the statement lives ON the photograph ---------- */
.welcome { position: relative; background: var(--ink); overflow: hidden; }
.welcome-img { width: 100%; height: clamp(26rem, 82vh, 46rem); object-fit: cover; height: clamp(26rem, 82svh, 46rem); }
.welcome-body {
  position: absolute; inset: auto 0 0 0;
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
  background: linear-gradient(to top,
    oklch(0.17 0.022 45 / 0.94) 0%,
    oklch(0.17 0.022 45 / 0.85) 40%,
    oklch(0.17 0.022 45 / 0.55) 70%,
    oklch(0.17 0.022 45 / 0) 100%);
  color: var(--paper);
  text-shadow: 0 1px 14px oklch(0.17 0.02 45 / 0.5);
}
.welcome-body h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); max-width: 18ch; }
.welcome-body h1 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); color: var(--paper); }
.welcome-body p { margin-top: 1.1rem; max-width: 52ch; font-size: var(--t-md); line-height: 1.5; }

/* rooms page: a chapter per building, so hotel vs hostal reads at a glance */
.house-band .welcome-img { height: clamp(18rem, 52vh, 28rem); height: clamp(18rem, 52svh, 28rem); }
.hb-where {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-deep); margin-bottom: 0.5rem;
}
.house-band .welcome-body h2 { color: var(--paper); font-size: clamp(1.9rem, 3.6vw, 2.8rem); max-width: none; }

/* the two houses as immersive split panels: the choice IS the design */
.houses-panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
  padding-inline: 0.6rem;
}
.house-panel {
  position: relative; display: block; overflow: hidden;
  background: var(--ink); color: var(--paper); text-decoration: none;
  border-radius: 2px;
}
.house-panel-img {
  width: 100%; height: clamp(26rem, 72vh, 42rem); object-fit: cover;
  height: clamp(26rem, 72svh, 42rem);
  transition: transform 0.9s var(--ease);
}
.house-panel:hover .house-panel-img, .house-panel:focus-visible .house-panel-img { transform: scale(1.045); }
.house-panel-body {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: linear-gradient(to top,
    oklch(0.17 0.022 45 / 0.94) 0%,
    oklch(0.17 0.022 45 / 0.82) 45%,
    oklch(0.17 0.022 45 / 0) 100%);
  text-shadow: 0 1px 12px oklch(0.17 0.02 45 / 0.5);
}
.house-panel-body .where {
  font-family: var(--text); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ox-soft);
  margin: 0 0 0.4rem;
}
.house-panel-body h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); color: var(--paper); }
.house-panel-body .blurb { margin: 0.55rem 0 0; font-size: var(--t-sm); color: var(--on-ox); max-width: 44ch; }
.house-panel-body .from { margin: 0.8rem 0 0; font-weight: 600; color: var(--on-ox); }
.house-panel-body .from b { color: var(--amber); }
@media (max-width: 60rem) {
  .houses-panels { grid-template-columns: 1fr; }
  .house-panel-img { height: clamp(18rem, 52vh, 26rem); height: clamp(18rem, 52svh, 26rem); }
}

/* justified gallery rows + a caption for photo-led welcome bands */
.collage { padding-bottom: 4px; }
.collage-label {
  font-family: var(--text); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  text-align: center; margin: clamp(2.2rem, 5vw, 3.5rem) 0 1.1rem;
}
.collage:first-of-type .collage-label { margin-top: 0.5rem; }
.grid-shots { display: flex; flex-direction: column; gap: 4px; }
.jfeature { margin: 0; position: relative; }
.jfeature img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.jrow { display: flex; gap: 4px; }
.jcell { min-width: 0; margin: 0; position: relative; }
.jcell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jcell figcaption, .jfeature figcaption {
  position: absolute; inset-inline: 0; bottom: 0; margin: 0;
  padding: 2.2rem 0.85rem 0.65rem; pointer-events: none;
  background: linear-gradient(transparent, oklch(0.15 0.02 30 / 0.62));
  color: var(--paper); font-size: 0.82rem; letter-spacing: 0.02em;
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.jcell:hover figcaption, .jcell:focus-within figcaption,
.jfeature:hover figcaption, .jfeature:focus-within figcaption { opacity: 1; }
@media (max-width: 46rem) {
  .jrow { display: grid; grid-template-columns: 1fr 1fr; }
  .jcell { width: auto !important; flex: none !important; }
  .jcell img { aspect-ratio: 1; }
  .jcell figcaption, .jfeature figcaption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jcell figcaption, .jfeature figcaption { transition: none; }
}
.welcome-caption {
  font-size: var(--t-sm); color: var(--on-ox-soft); margin: 0;
  letter-spacing: 0.04em;
}

/* extended accessibility toggles (parity with the old site's Ally widget) */
.a11y-lh body, .a11y-lh p, .a11y-lh li { line-height: 1.95; }
.a11y-font h1, .a11y-font h2, .a11y-font h3, .a11y-font h4,
.a11y-font .brand-name, .a11y-font .done-ref { font-family: var(--text) !important; letter-spacing: 0; }
.a11y-gray { filter: grayscale(1); }
.a11y-noimg img { visibility: hidden !important; background-image: none !important; }
.a11y-noimg .hero, .a11y-noimg .welcome, .a11y-noimg .house-panel { background: var(--oxblood-deep); }

/* the booking bar travels with the page on desktop; a small wordmark rides
   along so the bar stays branded once the header has scrolled away */
.bookbar-brand { display: none; }
@media (min-width: 60rem) {
  .bookbar-sticky { position: sticky; top: 0; z-index: 70; }
  .bookbar .wrap { display: flex; align-items: center; gap: 1.5rem; }
  .bookbar-brand {
    display: block; font-family: var(--display); font-weight: 600;
    font-size: var(--t-md); color: var(--on-ox); white-space: nowrap;
  }
  .bookbar-form { flex: 1; }
}

/* anchored sections land clear of the sticky booking bar */
[id] { scroll-margin-top: 6.5rem; }

/* FAQ: native accordion in the house style */
.faq-item { border-bottom: 1px solid var(--paper-edge); }
.faq-item summary {
  font-family: var(--display); font-size: var(--t-md); font-weight: 600;
  padding: 1.1rem 0; cursor: pointer; list-style: none; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0.2rem; color: var(--oxblood-lift);
  font-family: var(--text); font-weight: 500;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { padding: 0 0 1.2rem; color: var(--ink-soft); max-width: 60ch; }

/* ---------- hotel Q&A chat ---------- */
.chat-btn { position: fixed; right: 4.6rem; bottom: 1rem; z-index: 90; width: 48px; height: 48px;
  border-radius: 50%; border: 0; background: var(--oxblood); color: var(--on-ox);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(28, 23, 19, 0.22); }
.chat-btn svg { width: 25px; height: 25px; }
.chat-btn:hover { background: var(--oxblood-lift); }
.chat-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.chat-panel { position: fixed; right: 1rem; bottom: 4.6rem; z-index: 91;
  width: min(24rem, calc(100vw - 2rem));
  background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 8px;
  box-shadow: 0 8px 30px rgba(28, 23, 19, 0.25); overflow: hidden; }
.chat-panel[hidden] { display: none !important; }
.chat-head { display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.1rem; background: var(--oxblood); color: var(--on-ox); }
.chat-head h2 { font-size: var(--t-md); color: var(--on-ox); }
.chat-head .a11y-close { color: var(--on-ox-soft); }

.chat-log { height: min(20rem, 45vh); overflow-y: auto; padding: 1rem;
height: min(20rem, 45svh);
  display: flex; flex-direction: column; gap: 0.55rem; }
.chat-inline .chat-log { height: 16rem; border: 1px solid var(--paper-edge);
  border-radius: 6px 6px 0 0; background: var(--paper); }
.chat-msg { max-width: 85%; padding: 0.55rem 0.8rem; border-radius: 10px;
  font-size: var(--t-sm); line-height: 1.45; margin: 0; }
.chat-assistant { background: var(--paper-deep); align-self: flex-start;
  border-bottom-left-radius: 3px; }
.chat-user { background: var(--oxblood); color: var(--on-ox); align-self: flex-end;
  border-bottom-right-radius: 3px; }
.chat-wait { color: var(--ink-soft); font-style: italic; }

.chat-form { display: flex; gap: 0.5rem; padding: 0.8rem 1rem 0.35rem; }
.chat-inline .chat-form { border: 1px solid var(--paper-edge); border-top: 0;
  border-radius: 0 0 6px 6px; padding: 0.8rem 1rem; }
.chat-form input { flex: 1; font: inherit; font-size: var(--t-sm);
  padding: 0.55rem 0.7rem; border: 1px solid var(--paper-edge); border-radius: 4px;
  background: var(--paper); color: var(--ink); min-width: 0; }
.chat-form input:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.chat-form .btn { padding: 0.55rem 1rem; min-height: auto; }
.chat-disclaimer { font-size: var(--t-xs); color: var(--ink-soft);
  padding: 0 1rem 0.8rem; margin: 0.25rem 0 0; }
.chat-inline .chat-disclaimer { padding: 0.5rem 0 0; }
@media (max-width: 30rem) {
  .chat-panel { bottom: 4.4rem; right: 0.8rem; }
}

/* ---------- neat little touches (2026-09-01, Morris) ---------- */

/* The booking bar: generous at rest, condensing when it sticks. The extra
   padding at rest also gives the hero and the photo band room to breathe. */
.bookbar { background: transparent !important; pointer-events: none; }
.bookbar-bar { background: var(--oxblood); pointer-events: auto;
  padding-block: clamp(1.3rem, 2.6vw, 2rem); transition: padding 0.3s var(--ease); }
.bookbar.is-stuck .bookbar-bar { padding-block: 0.55rem; }
.bookbar-brand { opacity: 0; transform: translateY(4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.bookbar.is-stuck .bookbar-brand { opacity: 1; transform: none; }
@media (max-width: 60rem) {
  .bookbar-bar { padding-block: 1rem; }   /* mobile bar is not sticky; stay compact */
}

/* photographs answer the cursor, gently */
.jcell { overflow: hidden; border-radius: 2px; }
.jcell img, .jfeature { overflow: hidden; }
.jcell img, .jfeature img, .room figure > a img, .room figure img {
  transition: transform 0.7s var(--ease);
}
.jcell:hover img, .jfeature:hover img { transform: scale(1.03); }

/* the calendar popover arrives instead of appearing */
@keyframes popIn { from { opacity: 0; transform: translateY(7px) scale(0.985); } to { opacity: 1; transform: none; } }
.cal-pop:not([hidden]) { animation: popIn 0.28s var(--ease); }

/* big photo bands drift very slightly as you scroll through them
   (scroll-driven, CSS only, ignored by older browsers) */
@supports (animation-timeline: view()) {
  @keyframes bandDrift { from { transform: scale(1.06); } to { transform: scale(1); } }
  .welcome-img { animation: bandDrift linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
}

/* buttons acknowledge the press */
.btn:active, .btn-book:active, .btn-line:active { transform: translateY(1px); }
.btn, .btn-book, .btn-line { transition: background 0.25s var(--ease), transform 0.12s var(--ease); }

/* motion preferences win over all of the above */
@media (prefers-reduced-motion: reduce) {
  .bookbar-bar, .bookbar-brand, .jcell img, .jfeature img { transition: none; }
  .cal-pop:not([hidden]) { animation: none; }
  .welcome-img { animation: none; }
}

/* ---------- the same quiet touches, site-wide ---------- */

/* every zoomable or clickable photograph lifts a little */
.room figure { overflow: hidden; border-radius: 2px; }
.room figure img:hover { transform: scale(1.025); }

/* gallery leads drift with the scroll like the welcome bands */
@supports (animation-timeline: view()) {
  .jfeature img { animation: bandDrift linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
}

/* the lightbox fades up instead of blinking on */
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox { animation: lbIn 0.22s var(--ease); }
.lightbox img { animation: popIn 0.3s var(--ease); }

/* floating panels (chat, accessibility) arrive like the calendar does */
.chat-panel:not([hidden]), .a11y-panel:not([hidden]) { animation: popIn 0.26s var(--ease); }

/* chat bubbles slide in as they land */
.chat-msg { animation: popIn 0.25s var(--ease); }

/* FAQ: the answer unfolds where the browser supports it, and the question
   warms on hover everywhere */
.faq-item summary { transition: color 0.2s var(--ease); }
.faq-item summary:hover { color: var(--oxblood-lift); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    transition: height 0.3s var(--ease), content-visibility 0.3s allow-discrete;
    height: 0; overflow: clip;
  }
  .faq-item[open]::details-content { height: auto; }
}

/* reduced motion still wins */
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox img, .chat-panel:not([hidden]), .a11y-panel:not([hidden]),
  .chat-msg { animation: none; }
  .room figure img, .carta-cover img { transition: none; }
  .jfeature img { animation: none; }
  .faq-item::details-content { transition: none; }
}

/* people bands crop from the top so nobody loses their head */
.team-band { object-position: 50% 15%; }
.food-band { object-position: 50% 30%; }

/* contact: the self-serve pair leads; the phone stays for table bookings */
.self-serve { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; margin: 1.9rem 0 var(--gap-block); max-width: 52rem; }
.serve-tile { position: relative; display: flex; flex-direction: column; justify-content: center;
  text-align: left; font-family: var(--text);
  padding: 1.7rem 3.8rem 1.7rem 1.8rem; border: 0; border-radius: 2px;
  background: var(--oxblood); color: var(--paper); text-decoration: none; cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.serve-tile::after { content: "\2192"; position: absolute; right: 1.5rem; top: 50%;
  translate: 0 -50%; font-size: 1.45rem; line-height: 1; transition: translate 0.25s var(--ease); }
.serve-tile:hover { background: var(--oxblood-deep); color: var(--paper);
  transform: translateY(-2px); box-shadow: 0 10px 24px oklch(0.2 0.05 24 / 0.18); }
.serve-tile:hover::after { translate: 0.35rem -50%; }
.serve-tile b { display: block; font-family: var(--display); font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  font-weight: 600; margin-bottom: 0.4rem; color: var(--paper); }
.serve-tile span { font-size: var(--t-sm); color: var(--paper-deep); }
@media (max-width: 46rem) { .self-serve { grid-template-columns: 1fr; } }

/* the house: split centered; bottom pair aligned to equal heights */
.about-split { align-items: center; }
.about-split .portrait { max-height: 32rem; width: auto; margin-inline: auto; display: block; }
.about-pair figure img { height: 26rem; object-fit: cover; width: 100%; }
@media (max-width: 60rem) { .about-pair figure img { height: auto; } }

/* ---------- touch devices: smooth beats clever ----------
   Hover zooms would stick after a tap, image transitions cost frames,
   scroll-driven drift stutters on phone GPUs, and reveal pop-in reads as lag
   while thumbing. On touch the photographs are simply there. */
@media (hover: none), (pointer: coarse) {
  .jcell img, .jfeature img, .room figure img, .carta-cover img, .house-panel-img,
  .serve-tile { transition: none; }
  .jcell:hover img, .jfeature:hover img, .room figure img:hover, .carta-cover:hover img,
  .house-panel:hover .house-panel-img { transform: none; }
  .welcome-img, .jfeature img { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .serve-tile:hover { transform: none; box-shadow: none; }
}

/* ---------- carta reader ---------- */
.reader { position: fixed; inset: 0; z-index: 120; background: oklch(0.96 0.012 75); color: oklch(0.25 0.02 40);
  display: grid; grid-template-rows: auto 1fr; }
.reader[hidden] { display: none; }
.reader-bar { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem;
  border-bottom: 1px solid oklch(0.88 0.02 70); background: oklch(0.975 0.01 75); font-size: 0.9rem; }
.reader-name { font-family: var(--display); font-size: 1.05rem; font-weight: 600; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-pos { font-variant-numeric: tabular-nums; color: oklch(0.5 0.02 40); }
.reader-zoom { display: inline-flex; gap: 0.3rem; }
.reader-zoom button, .reader-close {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid oklch(0.85 0.02 70);
  background: oklch(0.985 0.008 75); color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.reader-zoom button:disabled { opacity: 0.3; cursor: default; }
.reader-close { font-size: 1.6rem; border: 0; background: none; }
/* the pane scrolls; the sheet lets the page centre when it fits and scroll
   from its top-left corner when it does not (auto margins, not justify) */
.reader-page { position: relative; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.reader-sheet { display: flex; min-width: 100%; min-height: 100%; width: max-content; padding: 20px; box-sizing: border-box; }
.reader-sheet img { display: block; margin: auto; flex: none; height: auto;
  box-shadow: 0 10px 30px oklch(0.1 0.03 30 / 0.22); background: #fff; cursor: zoom-in; }
.reader.is-zoomed .reader-sheet img { cursor: zoom-out; }
.reader-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid oklch(0.85 0.02 70); background: oklch(0.985 0.008 75); color: inherit; font-size: 1.3rem;
  cursor: pointer; box-shadow: 0 4px 14px oklch(0.1 0.03 30 / 0.15); }
.reader-nav:disabled { opacity: 0.3; cursor: default; }
.reader-prev { left: 1rem; } .reader-next { right: 1rem; }
@media (max-width: 46rem) {
  .reader-bar { gap: 0.6rem; padding: 0.5rem 0.7rem; }
  .reader-name { font-size: 0.95rem; }
  .reader-nav { top: auto; bottom: 1.1rem; transform: none; }
}