/*
 * Casa Elo · demo. The visual world is the restaurant's own printed menu: Playfair Display,
 * folded panels in olive, petrol and cocoa over sand paper, an inset cream frame on every panel,
 * and engraved illustrations. Instrument Sans carries the small text. One stylesheet, no build.
 */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/playfair-display-normal-400-900-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/playfair-display-italic-400-900-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-normal-400-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/instrument-sans-italic-400-700-latin.woff2") format("woff2");
}

:root {
  --paper: #efe4cf;
  --paper-deep: #e7d3b8;
  --cream: #f3ead8;
  --cream-2: rgba(243, 234, 216, 0.86);
  --cream-3: rgba(243, 234, 216, 0.42);
  --cream-line: rgba(243, 234, 216, 0.34);
  /* The menu's darker olive (page 1 prints both): cream reads at 5.8:1 on it, 4.6:1 on the lighter one. */
  --olive: #4e5f38;
  --olive-deep: #425231;
  --petrol: #2a515d;
  --petrol-deep: #24495a;
  --cocoa: #543627;
  --cocoa-deep: #4a2f22;
  --ink: #2b2418;
  --ink-2: #5a4d3a;
  --ink-3: rgba(43, 36, 24, 0.68);
  --ink-line: rgba(43, 36, 24, 0.22);
  --ochre: #c98a47;
  --berry: #9b3f3a;
  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --measure: 1240px;
  --top-h: 64px;
  --radius: 28px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --p: 0;
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--olive) var(--paper-deep);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px / 1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection {
  background: var(--olive);
  color: var(--cream);
}

/* Dark panels switch the ring to cream, so it reads on olive, petrol and cocoa. */
.moment,
.tarde,
.booking-card {
  --focus: var(--cream);
}
:focus-visible {
  outline: 2px solid var(--focus, var(--petrol));
  outline-offset: 3px;
  border-radius: 4px;
}

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

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

ul,
ol,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  transform: translateY(-200%);
}
.skip:focus-visible {
  transform: none;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: 600 15px / 1 var(--sans);
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}
.btn:active {
  transform: scale(0.97);
}
.spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}
.booking-form[data-busy="true"] .spinner {
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .booking-form[data-busy="true"] .spinner {
    animation: spin 800ms linear infinite;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.btn-ink {
  background: var(--ink);
  color: var(--cream);
}
.btn-ink:hover {
  background: var(--olive-deep);
}
.btn-line {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-line:hover {
  background: var(--ink);
  color: var(--cream);
}
.btn-cream {
  background: var(--cream);
  color: var(--petrol);
}
.btn-cream:hover {
  background: var(--paper);
}
.btn[disabled] {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

/* ---------- intro ---------- */

/*
 * The entrance morphs into the page: nothing is cut or duplicated at the end.
 *
 * `app.js` measures, before anything moves, where the header's wordmark and the hero's sleeping
 * cat sit, and places the intro's wordmark and cat exactly there (`left/top/width` on fixed
 * elements, out of flow: no layout shift). Each then starts from a transform (the wordmark large
 * and centred, `--from-*`; the cat off the top-right corner) and animates to `transform: none`,
 * which IS the page's geometry. When they arrive, the page's own wordmark and cat take over at
 * opacity 1 in the same pixels, the veil (the page's own paper colour) fades to reveal the hero's
 * panel, and the vines slide to the sides and stay as the page's ornament (`.vines`, fixed, behind
 * the content). The timeline:
 *   0 to 1.1 s   the wordmark draws itself (a mask stroke along each letter);
 *   0.2 to 1.7 s the vines grow and sprout;
 *   0.9 to 1.85 s Elo drops in and lands on the hero's spot;
 *   1.85 to 2.6 s the morph: wordmark to the header, veil off, vines to the sides.
 * A touch, key, wheel or scroll speeds every running animation up (`app.js`, through the Web
 * Animations API) so the morph completes in about 300 ms instead of cutting. Without the script
 * the pieces still draw and the veil still fades (CSS), only centred: a graceful fallback.
 * Reduced motion: no overlay at all; the page is simply in its final state.
 */
.intro,
.intro-stage {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  /* The veil: the page's paper and the vines. It fades; the stage above it does not. */
  .js:not(.intro-seen) .intro {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--paper);
    color: var(--olive);
    --vine-fill: var(--paper-deep);
    overflow: hidden;
    pointer-events: none;
    animation: veil-off 650ms var(--ease-soft) 1850ms forwards;
  }
  /* The stage: the wordmark and the cat, which travel to their page twins and never fade. */
  .js:not(.intro-seen) .intro-stage {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 91;
    color: var(--olive);
    --vine-fill: var(--paper-deep);
    overflow: hidden;
    pointer-events: none;
  }
  .vine {
    position: absolute;
    bottom: 0;
    height: 100vh;
    width: auto;
    animation: vine-aside 750ms var(--ease-out) 1850ms forwards;
  }
  .vine-l {
    left: 0;
    --aside: -34%;
  }
  .vine-r {
    right: 0;
    --aside: 34%;
  }
  .vine .stem,
  .vine .tendril,
  .wm-stroke {
    stroke-dasharray: var(--l);
    stroke-dashoffset: var(--l);
    animation: draw var(--draw-t, 1500ms) var(--ease-soft) var(--draw-d, 200ms) forwards;
  }
  .vine .stem:not(.stem-2) {
    stroke-width: 5;
  }
  .vine .stem-2 {
    --draw-d: 320ms;
  }
  .vine .tendril {
    --draw-t: 700ms;
    --draw-d: 900ms;
  }
  .vine .leaf {
    transform-box: fill-box;
    transform-origin: 0 50%;
    scale: 0;
    animation: sprout 620ms var(--ease-out) forwards;
    animation-delay: calc(380ms + var(--k) * 95ms);
  }
  /* Placed by the script on the header wordmark's rect; starts large and centred. Without the
     script it keeps the centred fallback below. */
  .intro-mark {
    position: absolute;
    left: 50%;
    top: 38%;
    width: min(62vw, 560px);
    transform: translate(-50%, -50%);
    transform-origin: 0 0;
  }
  .intro-mark.placed {
    transform: translate(var(--from-x), var(--from-y)) scale(var(--from-s));
    animation: to-place 750ms var(--ease-in-out) 1850ms forwards;
  }
  .wordmark {
    display: block;
    width: 100%;
    height: auto;
    fill: var(--ink);
    overflow: visible;
  }
  .wm-stroke {
    fill: none;
    stroke: #fff;
    stroke-width: 230;
    stroke-linecap: round;
    stroke-linejoin: round;
    --draw-t: 900ms;
    --draw-d: calc(80ms + var(--k) * 130ms);
  }
  /* Placed by the script on the hero cat's rect; drops in from off the top-right corner. */
  .intro-cat {
    position: absolute;
    left: 50%;
    bottom: 5vh;
    width: clamp(130px, 20vw, 250px);
    transform-origin: 50% 100%;
    transform: translate3d(var(--from-x), -110vh, 0) rotate(-40deg) scale(0.6);
    animation: drop-in 950ms var(--ease-out) 900ms forwards;
    will-change: transform;
    /* Centred fallback (no script): the x offsets include the -50% of `left: 50%`. */
    --from-x: calc(-50% + 48vw);
    --to-x: -50%;
  }
  .intro-cat.placed {
    bottom: auto;
    --to-x: 0px;
  }
  /* While the intro owns the cat, the hero's twin appears with no fade: same pixels, no pop. */
  .js.intro-placed .hero-panel .cat-sleep {
    transition: none;
  }
  .intro-cat img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* The page's wordmark and cat are hidden until the intro's pieces arrive on them: the cat when
     it lands (`html.cat-landed`), the wordmark when it reaches the header (`html.intro-done`). */
  .js.intro-placed:not(.intro-done) .brand-mark,
  .js.intro-placed:not(.cat-landed) .hero-panel .cat-sleep {
    opacity: 0;
  }
  /* Without the script nothing is placed: the stage's pieces fade with the veil instead. */
  .js:not(.intro-placed) .intro-stage {
    animation: veil-off 650ms var(--ease-soft) 1850ms forwards;
  }
  .js.cat-landed .intro-cat,
  .js.intro-done .intro-mark {
    visibility: hidden;
  }
  @media (max-width: 760px) {
    .vine {
      height: 86vh;
    }
    .vine-l {
      left: -16vw;
      --aside: -130%;
    }
    .vine-r {
      right: -16vw;
      --aside: 130%;
    }
  }
}
/* The vines stay as the page's frame after the intro: the same nodes, in a fixed layer behind the
   content, with the geometry the morph left them in (so the move is invisible), fully grown and
   with no animation to restart. Phones have no room for them. */
.vines {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* The page's content paints above the ornament; the body's paper stays below it. */
main,
.demo-bar,
.foot {
  position: relative;
  z-index: 1;
}
.vines .vine {
  position: absolute;
  bottom: 0;
  height: 100vh;
  width: auto;
  color: var(--olive);
  --vine-fill: var(--paper-deep);
  opacity: 0.55;
  animation: none;
}
.vines .vine-l {
  left: 0;
  transform: translateX(-34%);
}
.vines .vine-r {
  right: 0;
  transform: translateX(34%);
}
.vines .stem,
.vines .tendril {
  stroke-dashoffset: 0;
  animation: none;
}
.vines .leaf {
  scale: 1;
  animation: none;
}
@media (max-width: 760px) {
  .vines {
    display: none;
  }
}
@keyframes veil-off {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes vine-aside {
  to {
    transform: translateX(var(--aside));
    opacity: 0.55;
  }
}
@keyframes to-place {
  to {
    transform: none;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes sprout {
  from {
    scale: 0;
  }
  60% {
    scale: 1.08;
  }
  to {
    scale: 1;
  }
}
@keyframes drop-in {
  0% {
    transform: translate3d(var(--from-x), -110vh, 0) rotate(-40deg) scale(0.6);
  }
  72% {
    transform: translate3d(var(--to-x), 2%, 0) rotate(3deg) scale(1.03, 0.95);
  }
  100% {
    transform: translate3d(var(--to-x), 0, 0);
  }
}

/* ---------- demo bar and header ---------- */

.demo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px var(--gutter);
  background: var(--petrol);
  color: var(--cream);
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
}
.demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ochre);
  flex: none;
}

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: var(--top-h);
  padding: 0 var(--gutter);
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease-out);
}
.top.scrolled {
  border-bottom-color: var(--ink-line);
}
.brand {
  justify-self: start;
  display: block;
  text-decoration: none;
}
.brand-mark {
  display: block;
  width: 92px;
  height: auto;
  fill: var(--ink);
}
.top-nav {
  display: flex;
  gap: 2px;
}
.top-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-2);
  transition:
    background-color 160ms var(--ease-out),
    color 160ms var(--ease-out);
}
.top-nav a:hover {
  background: color-mix(in oklab, var(--ink) 8%, transparent);
  color: var(--ink);
}
.top-cta {
  justify-self: end;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  height: 320vh;
}
.hero-stage {
  position: sticky;
  top: var(--top-h);
  height: calc(100dvh - var(--top-h));
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hero-copy {
  display: grid;
  gap: 22px;
  transform: translate3d(0, calc(var(--p) * -24px), 0);
}
.hero-title {
  font-size: clamp(46px, 6.4vw, 100px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--olive);
}
.hero-lede {
  max-width: 44ch;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
}
.hours-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 14px;
  color: var(--ink-2);
}
.hours-strip b {
  color: var(--ink);
  font-weight: 600;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.hero-panel {
  position: relative;
  height: min(78vh, 760px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-deep);
  isolation: isolate;
}
.sky {
  position: absolute;
  inset: 0;
}
.sky-olive {
  background: var(--olive);
  opacity: clamp(0, var(--p) / 0.42, 1);
}
.sky-petrol {
  background: var(--petrol);
  opacity: clamp(0, (var(--p) - 0.52) / 0.36, 1);
}
/* Two borders, ink on sand and cream on the dark skies, crossfaded by opacity only. */
.frame {
  position: absolute;
  inset: 12px;
  border-radius: calc(var(--radius) - 10px);
  border: 1px solid var(--ink-line);
  pointer-events: none;
  z-index: 3;
}
.frame::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--cream-line);
  opacity: clamp(0, var(--p) / 0.3, 1);
}
.clock {
  position: absolute;
  top: 30px;
  left: 34px;
  height: 1.4em;
  z-index: 3;
  font: italic 500 clamp(16px, 1.4vw, 20px) / 1.4 var(--serif);
  color: var(--cream);
}
.clock-item {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  transform: translate3d(0, calc(var(--c) * 8px), 0);
  opacity: 0;
}
/* The first line sits on sand, so it is ink; the next two arrive on olive and petrol. */
.clock-item[data-clock="0"] {
  --c: 0;
  color: var(--ink);
  opacity: clamp(0, 1 - (var(--p) - 0.2) / 0.08, 1);
}
.clock-item[data-clock="1"] {
  --c: calc(1 - clamp(0, (var(--p) - 0.3) / 0.1, 1));
  opacity: clamp(0, min((var(--p) - 0.3) / 0.1, (0.62 - var(--p)) / 0.1), 1);
}
.clock-item[data-clock="2"] {
  --c: calc(1 - clamp(0, (var(--p) - 0.68) / 0.1, 1));
  opacity: clamp(0, (var(--p) - 0.68) / 0.1, 1);
}
.cats {
  position: absolute;
  inset: 0;
  z-index: 2;
  will-change: transform;
}
/*
 * Elo's three poses. The panel's `data-state` (sleep, stretch, sit; `motion-core.js`) shows one
 * and the others wait below it; each change is a transition of transform and opacity. On top of
 * that, the shown pose breathes, sways its tail or blinks (`@keyframes` below), a tap startles it
 * (`.startle`), and a pose change lands with `.settle`.
 */
.cat {
  position: absolute;
  bottom: 5%;
  left: 50%;
  height: 70%;
  aspect-ratio: 961 / 1000;
  opacity: 0;
  transform: translate3d(-50%, 10%, 0) scale(0.94);
  transition:
    opacity 520ms var(--ease-out),
    transform 720ms var(--ease-out);
  will-change: transform, opacity;
}
.cat-stretch {
  height: 54%;
  bottom: 9%;
  aspect-ratio: 1161 / 900;
}
.cat-sit {
  height: 82%;
  aspect-ratio: 608 / 1250;
}
.hero-panel[data-state="sleep"] .cat-sleep,
.hero-panel[data-state="stretch"] .cat-stretch,
.hero-panel[data-state="sit"] .cat-sit {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}
/* `.cat-pose` wraps a pose's pieces (body, tail, lids) so a squash or a jump moves them as one. */
.cat-pose {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
}
.cat-body {
  display: block;
  width: 100%;
  height: 100%;
}
.cat-tail {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  transform-origin: 12% 39%;
}
/* A closed eyelid over each of the sitting cat's eyes, in the engraving's olive, scaled down from
   the brow on a blink. Measured on the engraving: the irises span 39.6 to 48% and 60.9 to 68.9% of
   the width, 14.8 to 17.8% of the height; the lids cover a little more. */
.cat-lid {
  position: absolute;
  top: 14.2%;
  width: 10%;
  height: 4.4%;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: #627247;
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.cat-lid-l {
  left: 38.8%;
}
.cat-lid-r {
  left: 60.1%;
}
.hint {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  opacity: clamp(0, 1 - var(--p) / 0.08, 1);
}

@media (prefers-reduced-motion: no-preference) {
  /* Idle loops exist only while their `[data-idle]` box is on screen (`.on`, from `app.js`). */
  .hero-panel.on .hint svg {
    animation: bob 1.6s var(--ease-out) infinite;
  }
  .hero-panel.on[data-state="sleep"] .cat-sleep .cat-body {
    transform-origin: 50% 92%;
    animation: breathe 3.8s ease-in-out infinite;
  }
  .hero-panel.on[data-state="stretch"] .cat-stretch .cat-body {
    transform-origin: 8% 90%;
    animation: stretch-pulse 3s ease-in-out infinite;
  }
  .hero-panel.on .cat-tail,
  .foot-mark.on .foot-cat-tail {
    animation: tail-sway 2.6s ease-in-out infinite;
  }
  .hero-panel.on[data-state="sit"] .cat-sit .cat-body {
    transform-origin: 50% 100%;
    animation: sit-sway 6s ease-in-out infinite;
  }
  .cat.blink .cat-lid {
    animation: blink 160ms ease-in-out;
  }
  .hero-panel.on .cat.settle .cat-pose,
  .peek-cat.settle img,
  .card-cat-sit.settle,
  .foot-cat.settle .foot-cat-pose {
    animation: settle 800ms var(--ease-out);
  }
  .hero-panel.on .cat.startle .cat-pose {
    animation: startle 700ms var(--ease-out);
  }
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}
@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.018, 1.028);
  }
}
@keyframes stretch-pulse {
  0%,
  100% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(1.025);
  }
}
@keyframes tail-sway {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(5deg);
  }
}
@keyframes sit-sway {
  0%,
  100% {
    transform: rotate(-0.7deg);
  }
  50% {
    transform: rotate(0.7deg);
  }
}
@keyframes blink {
  0%,
  100% {
    transform: scaleY(0);
  }
  40%,
  60% {
    transform: scaleY(1);
  }
}
@keyframes settle {
  from {
    transform: scale(1.04, 0.97);
  }
  to {
    transform: scale(1);
  }
}
@keyframes startle {
  0% {
    transform: translateY(0) scale(1);
  }
  18% {
    transform: translateY(-4%) scale(0.98, 1.04);
  }
  45% {
    transform: translateY(0) scale(1.02, 0.98);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* ---------- sections ---------- */

section {
  position: relative;
}
/*
 * Waypoints: the short sections snap softly into place (`proximity`, never `mandatory`, so a
 * flick still travels and iOS keeps its native scroll); the long hero and the menu never snap,
 * and neither does la tarde, which follows the menu: a reader resting near the menu's end would
 * be pulled onto it. Snapping is off under reduced motion and on viewports under 600 px tall.
 */
@media (prefers-reduced-motion: no-preference) and (min-height: 600px) {
  html {
    scroll-snap-type: y proximity;
  }
  .casa,
  .visita,
  .reservar {
    scroll-snap-align: start;
    scroll-snap-margin-top: var(--top-h);
    scroll-margin-top: var(--top-h);
  }
}
.casa,
.menu,
.visita,
.reservar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(72px, 10vw, 140px) var(--gutter);
}
.casa {
  padding-top: clamp(40px, 6vw, 96px);
}
h2 {
  font-size: clamp(36px, 4.6vw, 68px);
}

.casa-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
.casa-fig {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream);
}
.casa-fig::after,
.tarde-fig::after,
.tarde-fig-2::after,
.moment::after,
.booking-card::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: calc(var(--radius) - 10px);
  border: 1px solid var(--cream-line);
  pointer-events: none;
}
.casa-fig::after {
  border-color: var(--ink-line);
}
.casa-fig > img {
  width: 100%;
  transform: translate3d(0, calc(var(--vp, 0) * -14px), 0) scale(1.06);
}
.casa-fig-main {
  grid-column: 1 / 8;
}
.casa-fig-main figcaption {
  position: absolute;
  left: 28px;
  bottom: 24px;
  max-width: calc(100% - 56px);
  padding: 8px 14px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--ink) 78%, transparent);
  font: italic 500 15px / 1.35 var(--serif);
  color: var(--cream);
}
.casa-copy {
  grid-column: 8 / 13;
  position: sticky;
  top: calc(var(--top-h) + 24px);
  display: grid;
  gap: 18px;
  padding-top: 8px;
}
.casa-copy p {
  color: var(--ink-2);
  max-width: 40ch;
}
.facts {
  display: grid;
  gap: 10px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-line);
}
.facts div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 15px;
}
.facts dt {
  font: italic 500 16px var(--serif);
  color: var(--olive);
}
.casa-fig-side {
  grid-column: 3 / 8;
  margin-top: clamp(-40px, -3vw, -16px);
}

.peek {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.peek-cat {
  display: block;
  transform-origin: 50% 100%;
}
.peek img {
  display: block;
  width: 100%;
  height: auto;
}
.peek-casa {
  right: 5%;
  width: 22%;
}
.peek-tarde {
  right: 7%;
  width: 13%;
}
.card-cat {
  position: relative;
  align-self: end;
  width: clamp(120px, 14vw, 180px);
  aspect-ratio: 1;
  margin-top: 12px;
}
.card-cat img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
}
.card-cat-sit {
  opacity: 0;
  transform: translate3d(0, 8%, 0) scale(0.96);
}

/* The clip sits on the figure's children, not on the observed figure itself: Chromium's
   IntersectionObserver never reports a fully clipped target as intersecting. Every rule here
   applies only once `app.js` has run (`html.js`): without JavaScript nothing is ever hidden. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] > *,
  .js [data-reveal]::after {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1100ms var(--ease-out);
  }
  .js [data-reveal].in > *,
  .js [data-reveal].in::after {
    clip-path: inset(0);
  }
  /* Parts arrive in reading order: 80 ms per step from `--i`. */
  .js [data-rise] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
      opacity 700ms var(--ease-out),
      transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .js [data-rise].in {
    opacity: 1;
    transform: none;
  }
  /* The hero's copy under the headline rises on load, in CSS alone, so it never waits for a script. */
  [data-load] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    animation: rise 800ms var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 80ms + 120ms);
  }
  /* The headline's two lines rise from behind their baselines on load. */
  .js .lines [data-line] {
    transform: translateY(105%);
    animation: line-up 900ms var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 110ms + 150ms);
  }
  /* A menu panel's engraving opens from a slight zoom as the panel enters. */
  .js .moment-art img {
    transition:
      transform 1200ms var(--ease-soft),
      opacity 600ms var(--ease-out);
  }
  .js .moment:not(.in) .moment-art img {
    transform: scale(1.18) rotate(-4deg);
    opacity: 0;
  }
  .js .moment.active .moment-art img {
    transform: scale(1.05);
  }
  /* A group's first lines arrive one after another, 40 ms apart. */
  .js .item[data-n] {
    transition:
      opacity 500ms var(--ease-out),
      transform 600ms var(--ease-out);
    transition-delay: calc(var(--n, 0) * 40ms);
  }
  .js .group:not(.in) .item[data-n] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  /* A filtered line leaves quickly; a line that comes back pops in. */
  .js .items .item.out {
    opacity: 0;
    transform: scale(0.98);
    transition:
      opacity 170ms var(--ease-out),
      transform 170ms var(--ease-out);
    transition-delay: 0ms;
  }
  .item.pop {
    animation: pop 420ms var(--ease-out);
  }
  /* Elo climbs into two of the engravings as they scroll up. */
  .peek-cat {
    transform: translate3d(0, calc(clamp(0, var(--vp, 1), 1) * 110%), 0)
      rotate(calc(var(--vp, 1) * 4deg));
    will-change: transform;
  }
  /* The booking card's cat wakes while the pointer is over the card or focus is inside it
     (`.near`, from `app.js`), and is pleased by a booking. */
  .card-cat img {
    transition:
      opacity 500ms var(--ease-out),
      transform 700ms var(--ease-out);
  }
  .booking-card.near .card-cat-sleep,
  .booking-card:has([data-tone="success"]) .card-cat-sleep {
    opacity: 0;
    transform: translate3d(0, 8%, 0) scale(0.96);
  }
  .booking-card.near .card-cat-sit,
  .booking-card:has([data-tone="success"]) .card-cat-sit {
    opacity: 1;
    transform: none;
  }
  .booking-card:has([data-tone="success"]) .card-cat-sit {
    animation: startle 700ms var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .js .group.in .item:hover {
      transform: translate3d(4px, 0, 0);
      transition: transform 200ms var(--ease-out);
      transition-delay: 0ms;
    }
  }
}
.lines .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.lines [data-line] {
  display: block;
}
@keyframes line-up {
  to {
    transform: none;
  }
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ---------- menu ---------- */

.menu-head {
  display: grid;
  gap: 16px;
  max-width: 760px;
  margin-bottom: 28px;
}
.menu-lede {
  color: var(--ink-2);
  font-size: 18px;
}
.rail {
  position: sticky;
  top: var(--top-h);
  z-index: 30;
  display: flex;
  gap: 6px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 10px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  background: color-mix(in oklab, var(--paper) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.rail::-webkit-scrollbar {
  display: none;
}
.rail a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-2);
  transition:
    background-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    border-color 180ms var(--ease-out);
}
.rail a:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.rail a[aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 18px;
}
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  flex: 1 1 260px;
  max-width: 360px;
  padding: 0 14px;
  min-height: 44px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink-2);
}
.search:focus-within {
  border-color: var(--ink);
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  outline: none;
}
.search input::placeholder {
  color: var(--ink-3);
}
.search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 600 14px var(--sans);
  cursor: pointer;
  transition:
    background-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    border-color 180ms var(--ease-out);
}
.chip:hover {
  border-color: var(--ink);
}
.chip[aria-pressed="true"] {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--cream);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--ink-2);
}
.legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legend svg {
  color: var(--olive);
}
.search-empty {
  margin-top: 24px;
  font: italic 500 18px var(--serif);
  color: var(--ink-2);
}

.moments {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}
.moment {
  position: relative;
  padding: clamp(24px, 4vw, 56px);
  border-radius: var(--radius);
  color: var(--cream);
  scroll-margin-top: calc(var(--top-h) + 64px);
  overflow: clip;
}
.tone-olive {
  background: var(--olive);
}
.tone-petrol {
  background: var(--petrol);
}
.tone-cocoa {
  background: var(--cocoa);
}
.moment-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px clamp(20px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.moment-copy {
  display: grid;
  gap: 10px;
}
.moment-title {
  font-size: clamp(44px, 6vw, 92px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}
.when {
  font: italic 500 clamp(17px, 1.4vw, 21px) var(--serif);
  color: var(--cream-2);
}
.moment-intro {
  color: var(--cream-2);
  max-width: 44ch;
}
.moment-art {
  width: clamp(130px, 20vw, 280px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  transform: translate3d(0, calc(var(--vp, 0) * -16px), 0) rotate(calc(var(--vp, 0) * -2deg));
}
.moment-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.groups {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
}
.group-title {
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.group-note {
  margin: -8px 0 16px;
  font-size: 14px;
  color: var(--cream-2);
}
.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 20px clamp(28px, 4vw, 56px);
}
.group-compact .items {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 10px clamp(24px, 3vw, 40px);
}
.item {
  display: grid;
  gap: 6px;
  align-content: start;
}
.item[hidden] {
  display: none;
}
.item-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.item-name {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.group-compact .item-name {
  font-size: 17px;
  font-weight: 600;
}
.leader {
  flex: 1;
  min-width: 18px;
  border-bottom: 1px dotted var(--cream-3);
  transform: translateY(-5px);
}
.price {
  font-weight: 600;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--cream-2);
}
.options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 14px;
  color: var(--cream-2);
}
.options li {
  display: inline-flex;
  gap: 6px;
}
.option-price {
  font-weight: 600;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 22%, transparent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.mark svg {
  width: 13px;
  height: 13px;
}
.kitchen-notes {
  display: grid;
  gap: 12px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius);
  background: var(--paper-deep);
  font: italic 500 17px / 1.5 var(--serif);
  color: var(--ink-2);
}

/* ---------- la tarde ---------- */

.tarde {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(72px, 9vw, 130px) var(--gutter);
  background: var(--petrol);
  color: var(--cream);
  overflow: clip;
}
.tarde-fig {
  grid-column: 1 / 8;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.tarde-fig > img {
  width: 100%;
  transform: translate3d(0, calc(var(--vp, 0) * -16px), 0) scale(1.06);
}
.tarde-copy {
  grid-column: 8 / 13;
  display: grid;
  gap: 20px;
  justify-items: start;
}
.tarde-copy p {
  color: var(--cream-2);
  max-width: 38ch;
  font-size: 18px;
}
.tarde-fig-2 {
  grid-column: 9 / 12;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  width: clamp(140px, 18vw, 260px);
  margin-top: clamp(-120px, -8vw, -40px);
  transform: translate3d(0, calc(var(--vp, 0) * 22px), 0) rotate(calc(3deg + var(--vp, 0) * 2deg));
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}
.tarde-fig-2::after {
  inset: 8px;
  border-radius: 14px;
}

/* ---------- horarios y ubicación ---------- */

.visita-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.visita-hours {
  display: grid;
  gap: 22px;
}
.hours {
  display: grid;
  gap: 10px;
  padding-top: 8px;
}
.hours div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 18px;
}
.hours dt {
  font: 700 20px var(--serif);
}
.hours dt::after {
  content: "";
}
.hours dd {
  flex: 1;
  text-align: right;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.hours div::before {
  content: "";
  order: 1;
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted var(--ink-line);
  transform: translateY(-5px);
}
.hours dd {
  order: 2;
  flex: none;
}
.hours-note {
  color: var(--ink-2);
  font-size: 15px;
  max-width: 44ch;
}
.where {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius);
  background: var(--paper-deep);
  font-style: normal;
}
.where-line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font: 500 19px / 1.4 var(--serif);
}
.where-line svg {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  color: var(--olive);
}
.where-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.where-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 180ms var(--ease-out),
    color 180ms var(--ease-out);
}
.where-links a:hover {
  background: var(--ink);
  color: var(--cream);
}

/* ---------- reservar ---------- */

.reservar {
  padding-top: 0;
}
.booking-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--radius);
  background: var(--cocoa);
  color: var(--cream);
}
.booking-head {
  display: grid;
  gap: 16px;
  align-content: start;
}
.booking-intro {
  color: var(--cream-2);
  font-size: 18px;
  max-width: 36ch;
}
.booking-powered {
  font: italic 500 16px var(--serif);
  color: var(--cream-2);
}
.booking-form {
  display: grid;
  gap: 18px;
}
.booking-form fieldset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.booking-form fieldset[disabled] {
  opacity: 0.6;
}
.field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.field-wide {
  grid-column: 1 / -1;
}
.field input,
.field select {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--cream-line);
  border-radius: 12px;
  background: color-mix(in oklab, var(--cream) 10%, transparent);
  color: var(--cream);
  font: 400 16px var(--sans);
  caret-color: var(--ochre);
}
.field input::placeholder {
  color: var(--cream-3);
}
.field select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3ead8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
.field select option {
  color: var(--ink);
  background: var(--cream);
}
.field input::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.8);
}
.field input:focus-visible,
.field select:focus-visible {
  outline-color: var(--ochre);
  border-color: var(--cream);
}
.field small {
  font-weight: 400;
  color: var(--cream-2);
}
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
}
.check input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--ochre);
  flex: none;
}
.check span {
  display: grid;
  gap: 2px;
}
.check b {
  font-weight: 600;
}
.check small {
  color: var(--cream-2);
}
.booking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.booking-card .btn-ink {
  background: var(--cream);
  color: var(--cocoa);
}
.booking-card .btn-ink:hover {
  background: var(--paper);
}
.booking-card .btn-line {
  border-color: var(--cream-2);
  color: var(--cream);
}
.booking-card .btn-line:hover {
  background: var(--cream);
  color: var(--cocoa);
}
.booking-status {
  min-height: 1.4em;
  font: italic 500 17px / 1.45 var(--serif);
}
.booking-status[data-tone="success"] {
  color: #d9e6b8;
}
.booking-status[data-tone="error"] {
  color: #f1c1b4;
}
.booking-status[data-tone="note"] {
  color: var(--cream-2);
}
.booking-contact {
  justify-self: start;
}
.booking-form[data-unconfigured="true"] .booking-actions {
  display: none;
}

/* ---------- footer ---------- */

.foot {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 48px var(--gutter) 28px;
  overflow: hidden;
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--ink-line);
  font-size: 15px;
  color: var(--ink-2);
}
.foot-links {
  display: flex;
  gap: 18px;
}
.foot-mark {
  position: relative;
}
.foot-brand {
  margin: clamp(60px, 9vw, 140px) 0 8px;
  font: 700 clamp(72px, 19vw, 300px) / 0.85 var(--serif);
  letter-spacing: -0.05em;
  color: var(--olive);
  white-space: nowrap;
}
/* Elo stretches on top of «casa» and slides a little with the scroll. */
.foot-cat {
  position: absolute;
  left: 1%;
  bottom: 58%;
  width: clamp(100px, 12vw, 180px);
  aspect-ratio: 1358 / 1053;
  transform: translate3d(calc(var(--vp, 0) * -40px), 0, 0);
  will-change: transform;
}
.foot-cat-pose {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
}
.foot-cat img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.foot-cat-tail {
  transform-origin: 12% 39%;
}
.foot-demo {
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .casa-fig-main {
    grid-column: 1 / 13;
  }
  .casa-copy {
    grid-column: 1 / 13;
    position: static;
  }
  .casa-fig-side {
    grid-column: 4 / 13;
    margin-top: 0;
  }
  .tarde-fig {
    grid-column: 1 / 13;
  }
  .tarde-copy {
    grid-column: 1 / 13;
  }
  .tarde-fig-2 {
    grid-column: 9 / 13;
    margin-top: clamp(-80px, -8vw, -24px);
  }
  .visita-grid,
  .booking-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  :root {
    --top-h: 104px;
  }
  .top {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 0;
    padding-bottom: 6px;
  }
  .brand {
    padding-top: 14px;
  }
  .brand-mark {
    width: 82px;
  }
  .top-cta {
    grid-column: 2;
    grid-row: 1;
    margin-top: 8px;
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px;
  }
  .top-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 calc(var(--gutter) - 10px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .top-nav::-webkit-scrollbar {
    display: none;
  }
  .top-nav a {
    min-height: 44px;
    padding: 0 10px;
    font-size: 14px;
    white-space: nowrap;
  }
  .hero {
    height: 240vh;
  }
  .hero-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 18px;
    align-content: start;
    padding-top: 12px;
  }
  .hero-panel {
    order: -1;
    height: clamp(240px, 40vh, 360px);
  }
  .hero-copy {
    gap: 12px;
  }
  .hero-title {
    font-size: clamp(36px, 10vw, 56px);
  }
  .hero-lede {
    font-size: 16px;
  }
  .hours-strip {
    gap: 4px 14px;
    font-size: 13px;
  }
  .clock {
    top: 20px;
    left: 22px;
  }
  .cat-sleep {
    height: 66%;
  }
  .cat-stretch {
    height: 48%;
  }
  .cat-sit {
    height: 76%;
  }
  .peek-casa {
    width: 24%;
  }
  .peek-tarde {
    width: 22%;
  }
  .card-cat {
    display: none;
  }
  .hint {
    display: none;
  }
  .moment-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .moment-art {
    order: -1;
    width: clamp(110px, 32vw, 160px);
  }
  .items {
    gap: 18px;
  }
  .hours div {
    font-size: 16px;
  }
  .booking-form fieldset {
    grid-template-columns: 1fr 1fr;
  }
  .booking-form .field:nth-child(2) {
    grid-column: 1 / -1;
  }
  .foot-brand {
    font-size: 22vw;
  }
}

@media (max-width: 420px) {
  .booking-form fieldset {
    grid-template-columns: 1fr;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero {
    height: auto;
  }
  .hero-stage {
    position: static;
    height: auto;
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .hero-copy {
    transform: none;
  }
  .hero-panel {
    height: min(60vh, 560px);
  }
  .sky-olive {
    opacity: 1;
  }
  .sky-petrol {
    opacity: 0;
  }
  .frame::after {
    opacity: 1;
  }
  .clock-item {
    transform: none;
  }
  .clock-item[data-clock="0"] {
    color: var(--cream);
    opacity: 1;
  }
  .clock-item[data-clock="1"],
  .clock-item[data-clock="2"] {
    display: none;
  }
  .cat-sleep,
  .cat-sit {
    display: none;
  }
  .cat-stretch {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
    transition: none;
  }
  .peek-cat,
  .foot-cat,
  .card-cat img {
    transform: none;
    transition: none;
  }
  .hint {
    display: none;
  }
  [data-reveal] > *,
  [data-reveal]::after,
  [data-reveal].in > *,
  [data-reveal].in::after {
    clip-path: none;
    transition: none;
  }
  .casa-fig > img,
  .tarde-fig > img,
  .moment-art,
  .tarde-fig-2 {
    transform: none;
  }
  .hint svg {
    animation: none;
  }
  .btn,
  .rail a,
  .chip,
  .top,
  .top-nav a,
  .where-links a {
    transition: none;
  }
}