/* Locanda - small hotel theme by Omnium Labs

   COLOURS: change them here and only here, the whole site follows (palette "Linen & olive").
   Each section says which tone it wants (data-tone="base | 2 | 3 | accent"), main.js fades the whole page to that tone
   while you scroll. Two things outside this file carry a colour too: <meta name="theme-color"> in every page
   (the browser bar on phones, use --bg) and img/favicon.svg (use --accent).
   One radius (--radius) for every photo, button and panel; the stamp is round. */

@property --page { syntax: "<color>"; inherits: true; initial-value: #f1ebde; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #2f3122; }
@property --o { syntax: "<number>"; inherits: false; initial-value: 1; }

:root {
  --bg: #f1ebde;        /* page */
  --bg-2: #e4e6cf;      /* second tone */
  --bg-3: #efdccd;      /* third tone */
  --ink: #2f3122;       /* text */
  --accent: #5f6b2e;    /* buttons, stamp, accent sections, footer */
  --on-accent: #f7f4ea; /* text on the accent colour */
  --on-photo: #fbf6ec;  /* text over photos (hero, call to action) */
  --paper: #fffbf3;     /* the white frame of the snapshots */
  --shade: 28 26 14;    /* shadows and the dark fade on photos, as "R G B" */
  --serif: "Gambarino", Georgia, serif;
  --sans: "Synonym", system-ui, sans-serif;
  --gutter: clamp(20px, 3vw, 48px);
  --max: 1440px;
  --radius: 8px; /* the one corner radius */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --page: var(--bg); --fg: var(--ink); --btn: var(--accent); --btn-fg: var(--on-accent);
  transition: --page .8s ease, --fg .8s ease;
}
:root[data-now="2"] { --page: var(--bg-2); }
:root[data-now="3"] { --page: var(--bg-3); }
:root[data-now="accent"] { --page: var(--accent); --fg: var(--on-accent); --btn: var(--on-accent); --btn-fg: var(--accent); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* hidden stays hidden, whatever display a class gives */
html { background: var(--page); overflow-x: clip; }
body { margin: 0; background: var(--page); color: var(--fg); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
em { font-style: italic; }
html { font-synthesis: none; } /* Gambarino and Synonym have no italics: never fake one */
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: var(--btn); color: var(--btn-fg); }
.skip:focus { left: 12px; top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; margin-top: 56px; }

/* type */
.label { font: 500 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .72; }
.h-page, .h-big, .h-mid, .hero-title, .room-name, .logo, .footer-name { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.h-page { font-size: clamp(56px, 10vw, 156px); line-height: .92; }
.h-big { font-size: clamp(38px, 5.4vw, 80px); line-height: 1; }
.h-mid { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.08; }
.h-page em, .h-big em, .h-mid em, .hero-title em { font-style: normal; }
.lead { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; max-width: 40ch; }
.link { display: inline-block; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: opacity .3s; }
.link:hover { opacity: .65; }

/* buttons: the colour does the work */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 24px; background: var(--btn); color: var(--btn-fg);
  font: 500 14px/1 var(--sans); letter-spacing: .04em; border: 0; cursor: pointer; position: relative; overflow: hidden; }
.btn::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.16) 0 3px, transparent 3px 7px);
  transform: translateY(-101%); transition: transform .45s var(--ease); }
.btn:hover::before { transform: none; }
.btn-big { height: 56px; padding: 0 30px; font-size: 15px; }
.btn-light { --btn: var(--on-accent); --btn-fg: var(--ink); }

/* header */
.header { position: fixed; inset: 0 0 auto; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 16px var(--gutter); background: var(--page); transition: transform .5s var(--ease); }
.header.is-hidden { transform: translateY(-100%); }
.nav-links { display: flex; gap: 28px; font-size: 14px; }
.nav-links a, .header-phone { position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.logo { font-size: 32px; line-height: 1; font-weight: 400; }
.header-end { justify-self: end; display: flex; align-items: center; gap: 20px; font-size: 14px; }
.menu-btn { display: none; height: 46px; padding: 0 18px; background: transparent; border: 1px solid currentColor; cursor: pointer; font-size: 14px; }
.menu { position: fixed; inset: 0; z-index: 39; background: var(--accent); color: var(--on-accent); padding: 110px var(--gutter) 32px; display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; gap: 4px; }
.menu nav a { font: 400 clamp(40px, 11vw, 72px)/1.05 var(--serif); }
.menu nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.menu-foot { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.menu-open .header { background: var(--accent); color: var(--on-accent); --btn: var(--on-accent); --btn-fg: var(--accent); }

/* stamp: round, text turns */
.stamp { position: fixed; z-index: 30; right: var(--gutter); bottom: 28px; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center;
  background: var(--btn); color: var(--btn-fg); transition: transform .4s var(--ease), opacity .4s; }
.stamp:hover { transform: rotate(-8deg) scale(1.05); }
/* the magnet pull (main.js) uses translate, so it adds to the hover turn */
.stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.motion .stamp svg { animation: spin 20s linear infinite; }
.stamp text { font: 500 10px var(--sans); letter-spacing: .2em; fill: currentColor; }
.stamp b { font: 400 15px/1 var(--serif); }
.stamp.is-away { opacity: 0; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* back to top */
.to-top { position: fixed; z-index: 30; left: var(--gutter); bottom: 28px; width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--btn); color: var(--btn-fg); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .4s, transform .4s var(--ease); }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* the one motion: things open like shutter slats (a striped mask that widens) */
.motion [data-slats] { --o: 0; --slat: 12px;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 calc(var(--o) * var(--slat)), transparent calc(var(--o) * var(--slat)) var(--slat));
          mask-image: repeating-linear-gradient(180deg, #000 0 calc(var(--o) * var(--slat)), transparent calc(var(--o) * var(--slat)) var(--slat));
  transform: translateY(14px); transition: --o 1.1s var(--ease), transform 1.1s var(--ease); }
.motion figure[data-slats], .motion .cta-frame[data-slats], .motion .room-main[data-slats] { --slat: 34px; transform: none; }
.motion [data-slats].on { --o: 1; transform: none; }
.motion [data-slats].done { -webkit-mask-image: none; mask-image: none; transition: none; }

/* intro (home, once per visit): snapshots dropped all over the page, the one in the middle grows and stays as the hero photo */
.postcards { display: none; }
.intro-on .postcards { display: block; position: fixed; inset: 0; z-index: 45; background: var(--page); overflow: hidden; }
.pc { position: absolute; left: var(--x); top: var(--y); width: max(var(--w), 34vh); padding: clamp(5px, .5vw, 8px) clamp(5px, .5vw, 8px) clamp(18px, 1.8vw, 28px);
  background: var(--paper); border-radius: calc(var(--radius) * .5); box-shadow: 0 20px 40px -24px rgb(var(--shade) / .55);
  opacity: 0; transform: translateY(40px) rotate(calc(var(--r) * 2)) scale(1.08); transition: opacity .5s ease, transform .9s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.pc img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--radius) * .3); }
/* plain prints: just the photo, no white frame */
.pc-plain { padding: 0; background: none; border-radius: calc(var(--radius) * .6); overflow: hidden; }
.pc-plain img { aspect-ratio: 3 / 4; border-radius: 0; }
/* the hero one looks like any other until it grows (main.js moves it onto the hero frame) */
.pc-hero picture { display: block; }
.pc-hero.is-growing { z-index: 5; box-shadow: 0 30px 60px -30px rgb(var(--shade) / .5); }
.postcards.show .pc { opacity: 1; transform: rotate(var(--r)); }
.postcards.out .pc:not(.pc-hero) { opacity: 0; transform: rotate(var(--r)) scale(.92); /* fade over the same 1.6 s the hero needs to grow, so the page colour shows just as it lands */
  transition: opacity 1.6s cubic-bezier(.5, 0, .7, 1), transform 1.6s var(--ease); transition-delay: 0s; }
.postcards.gone { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
@media (max-width: 700px) {
  .pc { left: var(--mx, var(--x)); top: var(--my, var(--y)); width: max(41vw, 30vh); }
  .pc-desk { display: none; }
}
}
/* while the intro runs: the hero photo sits above the grid, cut to the middle postcard; header and stamp wait */
.intro-on .hero-frame { opacity: 0; }
html.intro-on .hero-frame img { transform: none; }
.intro-on .header, .intro-on .stamp { opacity: 0; transition: opacity .8s ease; }
.intro-end .header, .intro-end .stamp { opacity: 1; }

/* hero */
.hero { padding: 78px var(--gutter) 0; position: relative; }
.hero-frame { position: relative; height: calc(100svh - 78px - var(--gutter)); min-height: 520px; overflow: hidden; }
.hero-frame picture, .hero-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.motion .hero-frame img { transform: scale(1.08); transition: transform 2.6s var(--ease); }
.motion .is-open .hero-frame img { transform: none; }
.hero-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--shade) / 0) 28%, rgb(var(--shade) / .66) 100%); pointer-events: none; }
.hero-copy { position: absolute; z-index: 2; left: clamp(20px, 4vw, 64px); right: clamp(20px, 4vw, 64px); bottom: clamp(130px, 16vh, 170px); color: var(--on-photo); }
.kicker { font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.hero-title { font-size: clamp(56px, 10vw, 172px); line-height: .9; max-width: 11ch; }
.hero-sub { margin-top: 20px; max-width: 34ch; font-size: clamp(16px, 1.3vw, 19px); }
/* the headline rises from behind its own edge, the same move as the enquiry notch, a moment before it */
.hero-title .rise { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero-title .rise > span { display: block; }
.motion .hero-title .rise > span { transform: translateY(102%); transition: transform 1s var(--ease) .2s; }
.motion .is-open .hero-title .rise > span { transform: none; }
/* the small lines around it just fade in: kicker with the headline, the sentence after the notch */
.motion .kicker, .motion .hero-sub { opacity: 0; transform: translateY(8px); transition: opacity .8s ease, transform .8s var(--ease); }
.motion .is-open .kicker { opacity: 1; transform: none; transition-delay: .25s; }
.motion .is-open .hero-sub { opacity: 1; transform: none; transition-delay: 1.1s; }

/* quick enquiry bar: a notch cut out of the bottom of the photo, in the page colour, so it belongs to the page.
   It rises out of the page first, then its content appears. */
.quick { --cut: calc(var(--radius) * 1.6); position: absolute; z-index: 4; left: 50%; bottom: 0; width: min(880px, calc(100% - 2 * clamp(20px, 4vw, 64px)));
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 4px; padding: 10px 10px 0; background: var(--page); color: var(--fg);
  border-radius: var(--cut) var(--cut) 0 0; translate: -50% 0; transition: --page .8s ease; }
/* concave corners where the notch meets the photo edge */
.quick::before, .quick::after { content: ""; position: absolute; bottom: 0; width: var(--cut); height: var(--cut); }
.quick::before { right: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--cut) - .5px), var(--page) var(--cut)); }
.quick::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent calc(var(--cut) - .5px), var(--page) var(--cut)); }
.quick > * { position: relative; }
.quick-field { text-align: left; background: transparent; border: 0; padding: 10px 20px 14px; cursor: pointer; transition: background .25s; }
.quick-field + .quick-field::before { content: ""; position: absolute; left: -2px; top: 14px; bottom: 18px; width: 1px; background: color-mix(in srgb, var(--fg) 16%, transparent); }
.quick-field:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.quick-field small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.quick-field span { font: 400 19px/1.3 var(--serif); }
.quick .btn { align-self: center; margin-bottom: 4px; }
.motion .quick { transform: translateY(102%); transition: transform 1s var(--ease) .35s, --page .8s ease; }
.motion .quick > * { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s var(--ease); }
.motion .is-open .quick { transform: none; }
.motion .is-open .quick > * { opacity: 1; transform: none; }
.motion .is-open .quick > :nth-child(1) { transition-delay: 1.15s; }
.motion .is-open .quick > :nth-child(2) { transition-delay: 1.23s; }
.motion .is-open .quick > :nth-child(3) { transition-delay: 1.31s; }
.motion .is-open .quick > .btn { transition-delay: 1.42s; }

/* popover with the calendar or guests (home bar) */
.pop { position: absolute; z-index: 50; background: var(--bg); color: var(--ink); padding: 20px; box-shadow: 0 30px 60px -30px rgb(var(--shade) / .6); width: min(640px, calc(100vw - 32px)); }
.pop[hidden] { display: none; }
.pop-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 12px; }
.pop-foot .btn { --btn: var(--accent); --btn-fg: var(--on-accent); }

/* calendar (ours, no browser date picker) */
.cal { --cell: 44px; }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cal-head button { width: 40px; height: 40px; background: transparent; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); cursor: pointer; }
.cal-head button:disabled { opacity: .3; cursor: default; }
.cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cal-month h4 { margin: 0 0 8px; font: 400 20px/1.2 var(--serif); }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-days span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; text-align: center; padding: 6px 0; }
.cal-days button { height: var(--cell); background: transparent; border: 0; cursor: pointer; font-size: 15px; position: relative; }
.cal-days button:hover:not(:disabled) { background: color-mix(in srgb, currentColor 10%, transparent); }
.cal-days button:disabled { opacity: .28; cursor: default; }
.cal-days button.in-range { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cal-days button.is-start, .cal-days button.is-end { background: var(--accent); color: var(--on-accent); }
.cal-note { font-size: 14px; opacity: .7; }

/* steppers */
.steppers { display: grid; gap: 10px; }
.stepper { display: grid; grid-template-columns: 1fr 44px 44px 44px; align-items: center; gap: 4px; }
.stepper button { height: 44px; background: transparent; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); cursor: pointer; font-size: 18px; }
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper output { text-align: center; font: 400 20px var(--serif); }

/* intro */
.intro { padding: clamp(120px, 14vw, 200px) 0 clamp(90px, 10vw, 150px); }
.intro-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.intro-text { grid-column: 1 / 7; display: grid; gap: 26px; align-content: start; }
.intro-a { grid-column: 8 / 12; }
.intro-b { grid-column: 7 / 10; margin-top: -30%; position: relative; }
.intro-a img, .intro-b img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.intro-b { margin-top: 0; grid-row: 2; }
.intro-a { grid-row: 1 / 3; }

/* section heads */
.sec-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: 56px; }
.rooms-home, .rooms-list, .places, .people { padding: clamp(80px, 10vw, 140px) 0; }

/* room cards: 2 columns, big name under the photo */
.room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 28px; }
.room-card { display: grid; gap: 14px; align-content: start; }
.room-card figure { overflow: hidden; }
.room-card img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform 1.2s var(--ease); }
.room-card:hover img { transform: scale(1.04); }
.room-name { font-size: clamp(34px, 4.2vw, 64px); line-height: 1; transition: font-style 0s; }
.room-card:hover .room-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.room-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; opacity: .8; }
.room-short { max-width: 46ch; }
.room-card[hidden] { display: none; }

/* numbers */
.numbers { padding: 70px 0; }
.numbers-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); padding-top: 32px; }
.numbers b { display: block; font: 400 clamp(48px, 6vw, 92px)/1 var(--serif); }
.numbers span { font-size: 14px; opacity: .75; }

/* a day: pile of snapshots inside a turning ring, they fan out when seen */
.day { padding: clamp(60px, 8vw, 120px) 0 clamp(100px, 12vw, 180px); overflow-x: clip; } /* the turning ring is wider than the page when it is diagonal */
.day-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; }
.day-text { display: grid; gap: 24px; justify-items: start; max-width: 480px; }
.pile { position: relative; aspect-ratio: 1; max-width: 620px; width: 100%; justify-self: center; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.motion .ring { animation: spin 40s linear infinite; }
.ring text { font: 500 13px var(--sans); letter-spacing: .32em; fill: currentColor; }
.snap { position: absolute; left: 50%; top: 50%; width: 42%; padding: 10px 10px 0; background: var(--paper); color: var(--ink); box-shadow: 0 18px 34px -20px rgb(var(--shade) / .55);
  --tx: -50%; --ty: -50%; transform: translate(var(--tx), var(--ty)) rotate(var(--r, 0deg)) scale(var(--s, 1)); transition: transform 1.1s var(--ease), box-shadow .5s ease; }
.snap img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.snap figcaption { font: 400 17px/1 var(--serif); padding: 12px 2px 14px; }
.snap:nth-of-type(1) { --r: -6deg; } .snap:nth-of-type(2) { --r: 4deg; } .snap:nth-of-type(3) { --r: -2deg; } .snap:nth-of-type(4) { --r: 7deg; } .snap:nth-of-type(5) { --r: -4deg; }
.pile.is-open .snap:nth-of-type(1) { --tx: -112%; --ty: -86%; --r: -9deg; }
.pile.is-open .snap:nth-of-type(2) { --tx: 8%; --ty: -96%; --r: 6deg; }
.pile.is-open .snap:nth-of-type(3) { --tx: -50%; --ty: -48%; --r: -2deg; }
.pile.is-open .snap:nth-of-type(4) { --tx: -110%; --ty: -4%; --r: 5deg; }
.pile.is-open .snap:nth-of-type(5) { --tx: 12%; --ty: -10%; --r: -7deg; }
.snap:hover { z-index: 5; }
/* on a mouse: the snapshot under the cursor comes forward, grows and turns level */
@media (hover: hover) and (pointer: fine) {
  .pile.is-open .snap:hover { --r: 0deg; --s: 1.22; z-index: 6; transition: transform .55s var(--ease), box-shadow .5s ease; box-shadow: 0 30px 50px -24px rgb(var(--shade) / .55); }
}

/* steps: the photo stays, a line shows how far you are, text scrolls past */
.kitchen-home, .timeline { padding: clamp(80px, 10vw, 140px) 0; }
.steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.steps-media { position: sticky; top: 100px; height: calc(100svh - 140px); display: grid; grid-template-columns: 1fr 2px; gap: 22px; }
.steps-photos { position: relative; overflow: hidden; }
.steps-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.steps-photos img.is-on { opacity: 1; }
.steps-line { background: color-mix(in srgb, var(--fg) 22%, transparent); position: relative; }
.steps-line i { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--fg); transform: scaleY(var(--p, 0)); transform-origin: top; }
.steps-text { display: grid; align-content: start; }
.steps-text > .label { margin-bottom: 20px; }
.step { min-height: 72svh; display: grid; gap: 18px; align-content: center; max-width: 480px; }
.step-n { font: 500 13px var(--sans); letter-spacing: .12em; opacity: .7; }
.step p:not(.step-n) { font-size: 18px; }

/* quotes */
.quotes { padding: clamp(90px, 11vw, 160px) 0; }
.quote-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; }
.quote-row blockquote p { font: 400 clamp(26px, 2.6vw, 38px)/1.15 var(--serif); }
.quote-row footer { margin-top: 18px; font-size: 14px; opacity: .75; }

/* call to action */
.cta { padding: 0 0 clamp(80px, 10vw, 140px); }
.cta-frame { position: relative; min-height: 78svh; display: grid; align-items: end; overflow: hidden; }
.cta-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--shade) / 0) 30%, rgb(var(--shade) / .6)); }
.cta-copy { position: relative; z-index: 1; color: var(--on-photo); padding: clamp(28px, 5vw, 72px); display: grid; gap: 20px; justify-items: start; max-width: 720px; }

/* inner page heads */
.page-head { padding: clamp(150px, 17vw, 230px) 0 clamp(50px, 6vw, 90px); }
.page-head .wrap { display: grid; gap: 26px; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }
.chip { height: 42px; padding: 0 18px; background: transparent; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); cursor: pointer; font-size: 14px; transition: background .3s, color .3s; }
.chip[aria-pressed="true"] { background: var(--btn); color: var(--btn-fg); border-color: var(--btn); }

/* amenities */
.amenities { padding: clamp(80px, 10vw, 140px) 0; }
.amen-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; }
.amen-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); }
.amen-list li { padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); font: 400 22px/1.2 var(--serif); }
.amen-note { grid-column: 2; }
.amen-small li { font-size: 18px; padding: 12px 0; }

/* room page */
.room-hero { padding: clamp(140px, 15vw, 200px) 0 0; }
.room-hero .wrap { display: grid; gap: 22px; margin-bottom: 44px; }
.room-main { margin: 0 var(--gutter); overflow: hidden; }
.room-main img { width: 100%; height: 82svh; object-fit: cover; }
.room-body { padding: clamp(70px, 9vw, 130px) 0; }
.room-grid-2 { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(40px, 7vw, 110px); }
.room-facts { display: grid; gap: 0; align-content: start; position: sticky; top: 100px; }
.room-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); }
.room-facts dt { opacity: .7; font-size: 14px; }
.room-facts dd { font: 400 20px var(--serif); text-align: right; }
.room-facts .btn { margin-top: 28px; }
.room-text { display: grid; gap: 24px; max-width: 640px; }
.room-text > p { font-size: clamp(18px, 1.4vw, 21px); }
.room-text .h-mid { margin-top: 24px; }
.room-gallery { padding: clamp(70px, 9vw, 130px) 0; }
.gallery-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.gallery-row figure:nth-child(2) { margin-top: 12vw; }
.gallery-row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.next { padding: clamp(80px, 10vw, 140px) 0; }
.next-link { display: grid; gap: 16px; border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); padding-top: 36px; }
.next-link .h-page { transition: transform .6s var(--ease); }
.next-link:hover .h-page { transform: translateX(16px); }
.next-meta { opacity: .75; }

/* kitchen */
.hours { padding: 0 0 clamp(60px, 7vw, 100px); }
.hours-row, .know-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); padding-top: 28px; }
.know-grid { grid-template-columns: repeat(4, 1fr); }
.hours-row b, .know-grid b { display: block; margin-top: 10px; font: 400 clamp(26px, 3vw, 44px)/1.05 var(--serif); }
.split { padding: clamp(80px, 10vw, 140px) 0; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: center; }
.split-flip figure { order: 2; }
.split figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split-text { display: grid; gap: 22px; max-width: 540px; }
.menu-list { border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); margin-top: 10px; }
.menu-list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); font: 400 20px var(--serif); }
.note { padding: clamp(80px, 10vw, 140px) 0; }
.note .wrap { display: grid; gap: 28px; justify-items: start; max-width: 1000px; }
.note .h-mid { font-size: clamp(30px, 3.6vw, 52px); }

/* quarter */
.timeline .steps-text { padding-top: 0; }
.place-grid, .people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 28px; }
.place, .people-grid article { display: grid; gap: 12px; align-content: start; }
.place figure, .people-grid figure { overflow: hidden; }
.place img, .people-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease); }
.place:hover img, .people-grid article:hover img { transform: scale(1.04); }
.place h3, .people-grid h3, .rule h3 { font: 400 26px/1.15 var(--serif); }

/* story */
.years { padding: clamp(80px, 10vw, 140px) 0; }
.year-list { display: grid; }
.year-list li { display: grid; grid-template-columns: minmax(160px, 3fr) 7fr; gap: 24px; align-items: baseline; padding: 30px 0; border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); }
.year-list b { font: 400 clamp(48px, 7vw, 110px)/1 var(--serif); }
.year-list p { font-size: clamp(19px, 1.6vw, 24px); max-width: 36ch; }
.rule { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); }

/* booking */
.booking { padding: 0 0 clamp(80px, 10vw, 140px); }
.book-grid { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.book-form { display: grid; gap: 44px; }
.book-step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 18px; }
.book-step legend { padding: 0; margin-bottom: 18px; font: 400 30px/1 var(--serif); }
.book-step legend span { font: 500 12px var(--sans); letter-spacing: .14em; opacity: .6; margin-right: 12px; vertical-align: middle; }
.room-pick { display: grid; gap: 8px; }
.room-opt { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; text-align: left; padding: 8px 18px 8px 8px; background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent); cursor: pointer; transition: border-color .3s, background .3s; }
.room-opt img { width: 96px; height: 72px; object-fit: cover; }
.room-opt b { display: block; font: 400 21px/1.2 var(--serif); }
.room-opt small { font-size: 13px; opacity: .7; }
.room-opt em { font-style: normal; font-size: 17px; }
.room-opt[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 4px 0 0 var(--accent); }
.room-opt:disabled { opacity: .35; cursor: default; }
.inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.input { display: grid; gap: 6px; font-size: 13px; }
.input span { letter-spacing: .08em; text-transform: uppercase; opacity: .7; font-size: 11px; }
.input input, .input textarea { width: 100%; font: 400 17px/1.4 var(--sans); color: inherit; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  padding: 10px 0; border-radius: 0; resize: vertical; }
.input input:focus, .input textarea:focus { outline: none; border-bottom-color: currentColor; }
.input.is-bad input { border-bottom-color: var(--accent); }
.input-wide { grid-column: 1 / -1; }
.field-error { color: var(--accent); font-size: 14px; }
.summary { position: sticky; top: 100px; background: var(--bg-2); padding: 28px; display: grid; gap: 18px; }
.summary dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.summary dt { font-size: 14px; opacity: .7; }
.summary dd { text-align: right; }
.sum-calc { font-size: 14px; opacity: .8; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; }
.sum-total b { font: 400 40px/1 var(--serif); }
.sum-note { font-size: 13px; opacity: .7; }
.sent { display: grid; gap: 8px; padding-top: 10px; }
.good-to-know { padding: clamp(60px, 7vw, 100px) 0; }
.faq { padding: clamp(80px, 10vw, 140px) 0; }
.faq-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; }
.faq-list { border-top: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); }
.qa { border-bottom: 1px solid color-mix(in srgb, var(--fg) 25%, transparent); }
.qa button { width: 100%; display: flex; justify-content: space-between; gap: 16px; text-align: left; padding: 22px 0; background: transparent; border: 0; cursor: pointer; font: 400 22px/1.25 var(--serif); }
.qa button::after { content: "+"; font-family: var(--sans); transition: transform .4s var(--ease); }
.qa button[aria-expanded="true"]::after { transform: rotate(45deg); }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.qa-a > p { overflow: hidden; max-width: 56ch; }
.qa button[aria-expanded="true"] + .qa-a { grid-template-rows: 1fr; }
.qa button[aria-expanded="true"] + .qa-a > p { padding-bottom: 22px; }

/* 404 */
.lost { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; padding: 100px var(--gutter) 60px; }
.lost-photo img { width: 100%; height: calc(100svh - 160px); object-fit: cover; }
.lost-text { display: grid; gap: 24px; justify-items: start; }

/* footer */
.footer { background: var(--accent); color: var(--on-accent); padding: clamp(80px, 10vw, 130px) 0 28px; --btn: var(--on-accent); --btn-fg: var(--accent); }
.footer-line { font: 400 clamp(30px, 3.8vw, 56px)/1.1 var(--serif); max-width: 24ch; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 70px; }
.footer-cols > * { display: grid; gap: 8px; align-content: start; }
.footer-cols .label { margin-bottom: 6px; }
.footer-cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-name { font-size: 22vw; line-height: .8; margin: 70px auto 24px; width: fit-content; padding-right: .06em; white-space: nowrap; text-align: center; }
.footer-small { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; opacity: .8; }

/* one radius for everything that has corners */
.btn, .menu-btn, .chip, .quick-field, .pop, .cal-head button, .cal-days button, .stepper button, .to-top,
.hero-frame, .intro-a, .intro-b, .room-card figure, .snap, .snap img, .steps-photos, .cta-frame, .room-main, .gallery-row figure,
.split figure, .place figure, .people-grid figure, .room-opt, .room-opt img, .summary, .lost-photo, .copied-tip, .skip { border-radius: var(--radius); }
.intro-a, .intro-b, .gallery-row figure, .split figure, .lost-photo { overflow: hidden; }

/* copied mail tip */
.copied-tip { position: absolute; transform: translate(-50%, -130%); background: var(--ink); color: var(--bg); font-size: 12px; padding: 4px 8px; pointer-events: none; white-space: nowrap; z-index: 60; }

@media (max-width: 1100px) {
  .nav-links, .header-phone { display: none; }
  .header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
  .logo { grid-column: 1; grid-row: 1; }
  .header-end { grid-column: 3; }
  .menu-btn { display: inline-flex; align-items: center; }
}
@media (max-width: 900px) {
  .intro-grid, .day-grid, .steps-grid, .split-grid, .amen-grid, .faq-grid, .book-grid, .room-grid-2, .lost { grid-template-columns: 1fr; }
  .intro-text { grid-column: 1; }
  .intro-a, .intro-b { grid-row: auto; grid-column: 1; }
  .intro-a { width: 72%; }
  .intro-b { width: 52%; justify-self: end; margin-top: -24%; }
  .amen-note { grid-column: 1; }
  .split-flip figure { order: 0; }
  .numbers-row, .know-grid { grid-template-columns: 1fr 1fr; }
  .quote-row, .place-grid, .people-grid { grid-template-columns: 1fr; }
  .steps-media { top: 74px; height: 52svh; }
  .step { min-height: 60svh; }
  .steps-grid { gap: 0; }
  .steps-text { position: relative; z-index: 1; }
  .step { background: var(--page); padding: 28px 0; min-height: 0; margin-bottom: 40svh; }
  .room-facts, .summary { position: static; }
  .gallery-row { grid-template-columns: 1fr 1fr; }
  .gallery-row figure:nth-child(2) { margin-top: 18vw; }
  .gallery-row figure:nth-child(3) { grid-column: 1 / -1; }
  .lost-photo img { height: 46svh; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .hero { padding-top: 72px; }
  .hero-frame { height: calc(100svh - 72px - 16px); min-height: 600px; }
  .hero-copy { bottom: 230px; }
  .quick { grid-template-columns: 1fr 1fr; width: calc(100% - 24px); padding: 8px 8px 0; gap: 0; }
  .quick-field { padding: 8px 12px 10px; }
  .quick-field:nth-of-type(3) { grid-column: 1 / -1; }
  .quick-field:nth-of-type(3)::before { left: 12px; right: 12px; top: 0; bottom: auto; width: auto; height: 1px; }
  .quick .btn { grid-column: 1 / -1; margin: 4px 0 8px; }
  .room-grid { grid-template-columns: 1fr; gap: 48px; }
  .cal-months { grid-template-columns: 1fr; }
  .cal-month + .cal-month { display: none; }
  .inputs { grid-template-columns: 1fr; }
  .room-opt { grid-template-columns: 72px 1fr; }
  .room-opt img { width: 72px; height: 56px; }
  .room-opt em { grid-column: 2; }
  .stamp { width: 92px; height: 92px; right: 16px; bottom: 16px; }
  .stamp text { font-size: 9px; }
  .stamp b { font-size: 12px; }
  .to-top { left: 16px; bottom: 16px; }
  .year-list li { grid-template-columns: 1fr; gap: 8px; }
  .pile { margin-top: 20px; width: 88%; }
  .snap { width: 46%; }
  .snap figcaption { font-size: 14px; }
  .footer-cols { grid-template-columns: 1fr; gap: 26px; }
  .footer-small { flex-direction: column; }
  .pop { left: 16px !important; right: 16px; width: auto; }
}
/* small phones: the stamp and the menu carry the booking link, the header keeps logo + Menu */
@media (max-width: 420px) { .header-end > .btn { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01s !important; animation: none !important; } }