/* Hallmark · shape: custom (a casa, de dentro para fora) · genre: editorial · theme: custom · brand: Casa Dom Bernardo (house photographs and video, generated high-resolution scenes, printed dessert menu, Google listing, 2026-11-11) · job: book · idea: "the house as you meet it: its rooms full screen, then the plates, the menu on the wallpaper, the bar under the ceiling of lights, the house, the people, the door on Rua das Aroeiras" · vibe: "warm night, carved gold, harlequin wallpaper, wine"
 * paper: oklch(95.6% 0.014 78) · accent: oklch(36% 0.1 8) · display: Cormorant Garamond · body: Outfit · hero: full-screen photographs of the rooms crossfading with a slow zoom, vertical versions on the phone, head and actions low on a scrim · nav: transparent over the photos, wordmark left, solid cream on scroll · footer: carvão band under a strip of the wallpaper · imagery: the house's photographs and video, plus generated high-resolution scenes of the real rooms · signature: the house's own materials as page furniture: the harlequin wallpaper, the carved gold mirror frames, the ceiling of lights over the dark bands, the record turning beside the gramophone, the fern from the green wall, the cigar smoke
 * axes: light/garalde/wine · posture: committed (photographs carry the colour; wine is the control colour; gold only on frames and on dark) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: E, part of the photographs are still 480 px wide, so those stay small and the large frames use the high-resolution scenes */
/* Hallmark · waive 83 · photographs and video cover more than half the page · the owner reads this on a phone and the brief asks for large photo sections across the whole site */
/* Hallmark · waive 11 · dish, drink and house photographs zoom on hover · the brief asks for hover motion on the food and the drinks */
/* Hallmark · answered F7 · every pill is a control: buttons, menu tabs, the round gallery arrows */
/* Hallmark · answered F4 · one pill in four inks: burgundy on cream, gold on the photographs and the dark bands, and two outline versions of the same shape; the filled primary is always Reservar mesa */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; src: url("fonts/outfit-latin.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; src: url("fonts/outfit-latin-ext.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --gap-split: clamp(var(--space-xl), 5vw, var(--space-3xl));
  --nav-h: 76px; --z-loader: 700;
  --section-pad: clamp(88px, 9vw, 144px);
  --frame-c: color-mix(in oklab, var(--color-gold-deep) 70%, transparent);
  --star: color-mix(in oklab, var(--color-gold-2) 90%, transparent);
  --star-dim: color-mix(in oklab, var(--color-gold-2) 45%, transparent);
  --star-glow: color-mix(in oklab, var(--color-gold) 28%, transparent);
  --diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='40'%3E%3Cpath d='M14 0 28 20 14 40 0 20Z' fill='black'/%3E%3C/svg%3E");
}
html { scroll-padding-top: calc(var(--nav-h) + var(--space-md)); scroll-behavior: smooth; }
body { font-size: 1.0625rem; line-height: 1.65; font-weight: 300; }
strong { font-weight: 500; }
h1, h2, h3 { font-weight: 600; letter-spacing: var(--tracking-display); font-variant-numeric: lining-nums; }
h2 { font-size: var(--text-section); line-height: 1; max-width: 16ch; }
figure { margin: 0; }
blockquote { margin: 0; }
section { position: relative; }
.lead { font-size: var(--text-lead); line-height: 1.55; }

.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.btn .i { width: 18px; height: 18px; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); }
.skip:focus-visible { top: var(--space-md); }

.dark, .hero { --color-focus: var(--color-gold); }
.dark { background-color: var(--color-cover); color: var(--color-cover-ink); }

/* ---------- buttons: pills; the fill rises from the bottom on hover, like wine in a glass ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-gold); transform: translateY(101%); transition: transform var(--dur-long) var(--ease-out); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--color-cover); border-color: var(--color-gold); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"], .tab:disabled, .round:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn--gold { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-cover); }
.btn--gold::before { background: var(--color-cover-ink); }
.btn--gold:hover, .btn--gold:focus-visible { border-color: var(--color-cover-ink); }
.btn--ghost { background: transparent; border-color: color-mix(in oklab, var(--color-ink) 35%, transparent); color: var(--color-ink); }
.btn--ghost::before { background: var(--color-accent); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn--ghost-light { background: transparent; border-color: color-mix(in oklab, var(--color-cover-ink) 55%, transparent); color: var(--color-cover-ink); }
.btn--ghost-light::before { background: var(--color-cover-ink); }
.btn--ghost-light:hover, .btn--ghost-light:focus-visible { color: var(--color-cover); border-color: var(--color-cover-ink); }
.btn--nav { min-height: 42px; padding: 0 var(--space-lg); background: var(--color-gold); border-color: var(--color-gold); color: var(--color-cover); }
.btn--nav::before { background: var(--color-cover-ink); }

/* ---------- the house materials, used as page furniture ---------- */
/* the harlequin wallpaper of the salon: brown diamonds touching at the points, cream between them */
.wallband { position: relative; height: 36px; background-color: var(--color-wall-soft); }
.wallband::before { content: ""; position: absolute; inset: 0; background-color: var(--color-wall); -webkit-mask: var(--diamond) 0 0 / 26px 36px repeat; mask: var(--diamond) 0 0 / 26px 36px repeat; }
.wallband--dark { background-color: var(--color-cover-2); color: var(--color-cover-ink); }
.wallband--dark::before { background-color: var(--color-cover-rule); }
/* the carved gold frames of the mirrors */
.gilt { position: relative; padding: clamp(var(--space-xs), 1vw, var(--space-sm)); background: linear-gradient(135deg, var(--color-gold-deep) 0%, var(--color-gold-2) 20%, var(--color-gold) 38%, var(--color-gold-deep) 55%, var(--color-gold-2) 74%, var(--color-gold) 90%, var(--color-gold-deep) 100%); box-shadow: 0 0 0 1px var(--color-gold-deep), 0 28px 56px -32px var(--color-scrim); }
.gilt::before { content: ""; position: absolute; inset: clamp(3px, 0.4vw, 5px); border: 1px solid color-mix(in oklab, var(--color-gold-deep) 75%, transparent); pointer-events: none; }
.gilt > img { position: relative; display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px var(--color-gold-deep); }
/* the ceiling of small lights over the dark bands */
.stars { isolation: isolate; }
.stars::before, .stars::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stars::before { background-image: radial-gradient(circle, var(--star) 0 1.1px, transparent 1.7px), radial-gradient(circle, var(--star-dim) 0 0.9px, transparent 1.5px), radial-gradient(circle, var(--star) 0 0.8px, transparent 1.4px); background-size: 236px 196px, 312px 268px, 172px 228px; background-position: 40px 30px, 150px 120px, 96px 64px; opacity: 0.75; }
.stars::after { background-image: radial-gradient(circle, var(--star) 0 1.4px, var(--star-glow) 2.4px, transparent 8px), radial-gradient(circle, var(--star) 0 1.2px, var(--star-glow) 2px, transparent 7px); background-size: 420px 360px, 540px 420px; background-position: 210px 80px, 20px 260px; animation: twinkle 4.8s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 0.25; } to { opacity: 1; } }
/* the fern of the green wall, hanging from a corner */
.fern { position: absolute; top: 0; z-index: 2; width: clamp(96px, 14vw, 230px); height: auto; pointer-events: none; transform-origin: 50% 0; animation: sway 9s ease-in-out infinite alternate; }
.fern--right { right: 0; scale: -1 1; }
.fern--left { left: 0; }
@keyframes sway { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
/* the cigar smoke */
.smoke { width: 40px; height: auto; stroke: var(--color-gold); stroke-width: 1.4; stroke-linecap: round; }
.smoke path { stroke-dasharray: 420; animation: smoke-drift 9s ease-in-out infinite alternate; }
.smoke path + path { opacity: 0.45; animation-duration: 11s; }
@keyframes smoke-drift { from { stroke-dashoffset: 60; } to { stroke-dashoffset: -60; } }

/* ---------- opening: the smoke of the cigar room rises, the name appears, the curtain lifts ---------- */
.loader { display: none; }
.js .loader { position: fixed; inset: 0; z-index: var(--z-loader); display: grid; place-content: center; justify-items: center; gap: var(--space-lg); background: var(--color-cover); color: var(--color-cover-ink); transition: transform 900ms var(--ease-in-out); animation: loader-out 900ms var(--ease-in-out) 4.2s forwards; }
.js.loaded .loader { transform: translateY(-100%); }
.js.seen .loader { display: none; }
/* the DB monogram of the house, cut out of the logo and filled with the gold of the frames */
.mark { display: inline-block; flex-shrink: 0; aspect-ratio: 1; background: linear-gradient(135deg, var(--color-gold-deep) 0%, var(--color-gold-2) 28%, var(--color-gold) 48%, var(--color-gold-deep) 68%, var(--color-gold-2) 88%); -webkit-mask: url("img/db-creme@2x.webp") center / contain no-repeat; mask: url("img/db-creme@2x.webp") center / contain no-repeat; }
.loader__mark { width: clamp(88px, 12vw, 120px); opacity: 0; animation: mark-in 1000ms var(--ease-out) 450ms forwards; }
@keyframes mark-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
.loader__smoke { width: 54px; height: auto; stroke: var(--color-gold); stroke-width: 1.2; stroke-linecap: round; }
.loader__smoke path { stroke-dasharray: 420; stroke-dashoffset: 420; animation: smoke-draw 2000ms var(--ease-out) 150ms forwards; }
.loader__smoke path + path { opacity: 0.5; animation-delay: 400ms; }
.loader__name { display: grid; justify-items: center; gap: var(--space-xs); font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 5.5vw, 4rem); line-height: 1; opacity: 0; animation: rise-in 900ms var(--ease-out) 700ms forwards; }
.loader__name span { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.02em; color: var(--color-gold); }
.loader__line { width: 140px; height: 1px; background: var(--color-cover-rule); overflow: hidden; }
.loader__line span { display: block; height: 100%; background: var(--color-gold); transform-origin: left; transform: scaleX(0); }
@keyframes smoke-draw { to { stroke-dashoffset: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes loader-out { to { transform: translateY(-100%); visibility: hidden; } }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky-nav); color: var(--color-cover-ink); transition: background-color var(--dur-long) var(--ease-out), color var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out); }
.nav__bar { display: flex; align-items: center; gap: var(--space-lg); height: var(--nav-h); }
.nav.is-solid { background: color-mix(in oklab, var(--color-paper) 95%, transparent); color: var(--color-ink); box-shadow: 0 1px 0 var(--color-rule); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav.is-solid .btn--nav { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.nav.is-solid .btn--nav::before { background: var(--color-gold); }
.nav.is-solid .btn--nav:hover, .nav.is-solid .btn--nav:focus-visible { color: var(--color-cover); }
.nav__brand { display: flex; align-items: center; gap: var(--space-sm); margin-right: auto; text-decoration: none; line-height: 1; }
.nav__words { display: grid; gap: var(--space-3xs); }
.nav__mark { width: 46px; }
.nav.is-solid .nav__mark { background: var(--color-gold-deep); }
.nav__casa { font-size: 0.75rem; letter-spacing: 0.02em; color: var(--color-gold); }
.nav.is-solid .nav__casa { color: var(--color-gold-deep); }
.nav__dom { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; letter-spacing: -0.01em; }
.nav__links { display: none; gap: var(--space-xl); font-size: 0.9375rem; font-weight: 400; }
.nav__links a { position: relative; padding-block: var(--space-xs); text-decoration: none; white-space: nowrap; }
@media (max-width: 80rem) { .nav__links { gap: var(--space-lg); } }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-short) var(--ease-out); }
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__menu summary { display: grid; place-items: center; width: 44px; height: 44px; margin-right: calc(-1 * var(--space-xs)); list-style: none; cursor: pointer; border-radius: var(--radius-pill); }
.nav__menu summary::-webkit-details-marker { display: none; }
.nav__menu .i-shut, .nav__menu[open] .i-open { display: none; }
.nav__menu[open] .i-shut { display: block; }
.nav__sheet { position: fixed; inset: var(--nav-h) 0 auto; display: grid; gap: var(--space-2xs); padding: var(--space-lg) var(--gutter) var(--space-xl); background: var(--color-cover); color: var(--color-cover-ink); box-shadow: 0 1px 0 var(--color-cover-rule); max-height: calc(100svh - var(--nav-h)); overflow-y: auto; }
.nav__sheet a:not(.btn) { padding: var(--space-sm) 0; font-family: var(--font-display); font-weight: 600; font-size: 1.875rem; line-height: 1.15; text-decoration: none; border-bottom: 1px solid var(--color-cover-rule); }
.nav__sheet .btn { margin-top: var(--space-lg); }
.nav:has(.nav__menu[open]) { background: var(--color-cover); color: var(--color-cover-ink); box-shadow: none; }
@media (min-width: 64rem) {
  .nav__links { display: flex; }
  .nav__menu { display: none; }
}
.nav__dom { white-space: nowrap; }
@media (max-width: 30rem) { .btn--nav { padding: 0 var(--space-md); } .nav__bar { gap: var(--space-sm); } .nav__brand { gap: var(--space-xs); } .nav__mark { width: 36px; } .nav__dom { font-size: 1.3125rem; } .nav__casa { font-size: 0.6875rem; } }

/* ---------- hero: the rooms, full screen, one after another ---------- */
.hero { height: 100svh; min-height: 620px; background: var(--color-cover); color: var(--color-cover-ink); overflow: hidden; }
.hero__slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; }
html:not(.js) .slide:not(:first-child) { display: none; }
.js .slide { opacity: 0; transition: opacity 1600ms var(--ease-in-out); }
.js .slide.is-on { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 9000ms linear; }
.slide.is-on img { transform: scale(1); }
.hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(to bottom, color-mix(in oklab, var(--color-scrim) 55%, transparent) 0%, transparent 24%),
  linear-gradient(to right, color-mix(in oklab, var(--color-scrim) 50%, transparent) 0%, transparent 55%),
  linear-gradient(to top, color-mix(in oklab, var(--color-scrim) 88%, transparent) 0%, color-mix(in oklab, var(--color-scrim) 55%, transparent) 34%, transparent 64%); }
.hero__body { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--nav-h); padding-bottom: clamp(20px, 3vw, 32px); }
.hero__title { font-size: var(--text-display); line-height: 0.92; letter-spacing: -0.02em; max-width: 10ch; }
.hero__lead { margin-top: var(--space-md); max-width: 34ch; font-size: var(--text-lead); color: var(--color-cover-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: clamp(28px, 4vw, 48px); padding-top: var(--space-md); border-top: 1px solid color-mix(in oklab, var(--color-cover-ink) 22%, transparent); font-size: var(--text-sm); color: var(--color-cover-ink-2); }
.hero__today { display: inline-flex; align-items: center; gap: var(--space-xs); }
.hero__today .i { width: 18px; height: 18px; color: var(--color-gold); }
.hero__ctrl { display: flex; align-items: center; gap: var(--space-lg); }
.hero__cap { transition: opacity var(--dur-short) var(--ease-out); }
.hero__cap.is-changing { opacity: 0; }
.hero__dots { display: flex; gap: var(--space-2xs); }
.hero__dots span { width: 20px; height: 2px; background: color-mix(in oklab, var(--color-cover-ink) 35%, transparent); transition: background-color var(--dur-long) var(--ease-out); }
.hero__dots span.is-on { background: var(--color-gold); }
.hero__pause { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-2xs); border: 0; background: none; color: inherit; font-size: var(--text-sm); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.hero__pause:hover { color: var(--color-cover-ink); text-decoration-color: currentColor; }
.hero__pause .i { width: 16px; height: 16px; }
/* the head rises once the curtain lifts; if the script never runs, it rises on its own at 4.6 s */
.js .hero__title, .js .hero__lead, .js .hero__actions { animation: rise-in 1100ms var(--ease-out) 4.6s both; }
.js.loaded .hero__title, .js.loaded .hero__lead, .js.loaded .hero__actions { animation-name: rise-in-b; animation-delay: 0.1s; }
.js.loaded .hero__lead { animation-delay: 0.22s; }
.js.loaded .hero__actions { animation-delay: 0.34s; }
@keyframes rise-in-b { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 47.99rem) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__foot { font-size: var(--text-xs); flex-wrap: wrap; }
  .hero__cap, .hero__dots { display: none; }
}

/* ---------- sections and heads ---------- */
.section { padding-block: var(--section-pad); }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--gap-columns); align-items: end; margin-bottom: clamp(48px, 5vw, 80px); }
.head p { max-width: 38ch; font-size: var(--text-lead); line-height: 1.5; color: var(--color-muted); }
.head a { color: var(--color-accent); }
.dark .head p { color: var(--color-cover-ink-2); }
@media (max-width: 60rem) { .head { grid-template-columns: minmax(0, 1fr); } }

.tile { position: relative; }
.tile__img { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--color-paper-2); border-radius: var(--radius-photo); }
.dark .tile__img { background: var(--color-cover-2); color: var(--color-cover-ink); }
.tile__img > img, .tile__img > video { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease-out); }
figure:hover .tile__img > img { transform: scale(1.045); }
figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.dark figcaption { color: var(--color-cover-ink-2); }

.loop { position: relative; }
.loop__btn { position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-scrim) 55%, transparent); color: var(--color-cover-ink); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color var(--dur-short) var(--ease-out); }
.loop__btn:hover { background: color-mix(in oklab, var(--color-scrim) 80%, transparent); }
.loop__btn .i { width: 16px; height: 16px; }
.loop__btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

/* ---------- dishes: a mosaic of plates and short videos fitted together ---------- */
.dishes { overflow: hidden; }
.dishes .head { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 13.5vw, 212px); gap: clamp(var(--space-sm), 1.2vw, var(--space-md));
  grid-template-areas:
    "mesa mesa mesa mesa vid vid"
    "mesa mesa mesa mesa vid vid"
    "note note nero nero vid vid"
    "note note nero nero sob sob"
    "massa massa pol pol sob sob"
    "massa massa brus tor tir anc"; }
.b { position: relative; overflow: hidden; border-radius: var(--radius-photo); background: var(--color-paper-2); min-width: 0; }
.b > img, .b > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out); }
.b:hover > img, .b:hover > video { transform: scale(1.05); }
.b figcaption { position: absolute; inset: auto 0 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-xs); margin: 0; padding: var(--space-2xl) var(--space-md) var(--space-md); background: linear-gradient(to top, color-mix(in oklab, var(--color-scrim) 78%, transparent), transparent); color: var(--color-cover-ink-2); pointer-events: none; }
.b__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.125rem, 0.8vw + 0.8rem, 1.625rem); line-height: 1.1; color: var(--color-cover-ink); overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.b__note { font-size: var(--text-sm); }
.b--mesa { grid-area: mesa; } .b--vid { grid-area: vid; } .b--note { grid-area: note; } .b--nero { grid-area: nero; } .b--sob { grid-area: sob; }
.b--massa { grid-area: massa; } .b--pol { grid-area: pol; } .b--brus { grid-area: brus; } .b--tor { grid-area: tor; } .b--tir { grid-area: tir; } .b--anc { grid-area: anc; }
.b--brus .b__name, .b--tor .b__name, .b--tir .b__name, .b--anc .b__name { font-size: 1.125rem; }
.b--note { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-md); padding: clamp(20px, 2.4vw, 32px); background: var(--color-accent); color: var(--color-accent-ink); }
.b--note::before { content: ""; position: absolute; inset: var(--space-xs); border: 1px solid color-mix(in oklab, var(--color-gold) 55%, transparent); pointer-events: none; }
.b__big { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 1.6vw + 1rem, 2.5rem); line-height: 1; }
.b--note p:not(.b__big) { font-size: 0.9375rem; color: color-mix(in oklab, var(--color-accent-ink) 85%, transparent); max-width: 30ch; }
.b__link { position: relative; z-index: 1; align-self: flex-start; color: var(--color-gold-2); text-underline-offset: 0.25em; }
.b__link:hover { color: var(--color-accent-ink); }
@media (max-width: 60rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: none; grid-auto-rows: auto; }
  .b { grid-area: auto; aspect-ratio: 1; }
  .b--mesa { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .b--vid { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
  .b--note { grid-column: 1 / -1; aspect-ratio: auto; }
}
@media (max-width: 40rem) { .b figcaption { padding: var(--space-xl) var(--space-sm) var(--space-sm); } .b__name, .b--brus .b__name, .b--tor .b__name, .b--tir .b__name, .b--anc .b__name { font-size: 1.0625rem; } .b__note { display: none; } }

/* ---------- the menu: a paper card hung on the harlequin wall ---------- */
.menu { background-color: var(--color-paper-2); }
.menu::before { content: ""; position: absolute; inset: 0; background-color: var(--color-paper-3); -webkit-mask: var(--diamond) 0 0 / 56px 80px repeat; mask: var(--diamond) 0 0 / 56px 80px repeat; opacity: 0.8; }
.menu > .container { position: relative; }
.carta { position: relative; max-width: 1100px; margin-inline: auto; padding: clamp(56px, 6vw, 88px) clamp(20px, 5vw, 80px) clamp(var(--space-xl), 5vw, 72px); background: var(--color-paper); box-shadow: 0 0 0 1px var(--color-rule), 0 40px 80px -48px color-mix(in oklab, var(--color-scrim) 55%, transparent); }
.carta::before { content: ""; position: absolute; inset: clamp(8px, 1vw, 14px); border: 1px solid var(--frame-c); box-shadow: inset 0 0 0 4px var(--color-paper), inset 0 0 0 5px var(--frame-c); pointer-events: none; }
.carta__mark { display: block; width: clamp(48px, 5vw, 64px); margin: 0 auto var(--space-md); background: var(--color-gold-deep); }
.carta__title { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-md); max-width: none; margin: 0 auto var(--space-xl); text-align: center; }
.carta__title::before, .carta__title::after { content: ""; flex: 0 1 120px; height: 1px; background: linear-gradient(to right, transparent, var(--frame-c)); }
.carta__title::after { background: linear-gradient(to left, transparent, var(--frame-c)); }
.tabs { display: none; justify-content: center; gap: var(--space-xs); margin: 0 auto clamp(32px, 4vw, 56px); }
.is-tabbed .tabs { display: flex; }
.tab { position: relative; min-height: 44px; padding: 0 var(--space-lg); border: 1px solid color-mix(in oklab, var(--color-ink) 22%, transparent); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font-size: 0.9375rem; font-weight: 400; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.tab:hover { border-color: var(--color-ink-2); color: var(--color-ink); }
.tab[aria-selected="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.panel + .panel { margin-top: var(--space-2xl); }
.is-tabbed .panel + .panel { margin-top: 0; }
.panel__name { margin-bottom: var(--space-lg); font-size: var(--text-2xl); text-align: center; }
.is-tabbed .panel__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.items { margin: 0 auto; padding: 0; list-style: none; columns: 2; column-gap: clamp(32px, 5vw, 80px); max-width: 960px; }
.item { break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-2xs) var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.item__name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.item[data-photo] .item__name::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: var(--space-sm); vertical-align: 0.3em; background: var(--color-gold-deep); transform: rotate(45deg); }
.item__price { font-size: 1rem; font-weight: 400; font-variant-numeric: tabular-nums lining-nums; color: var(--color-ink-2); }
.item__desc { grid-column: 1 / -1; max-width: 46ch; font-size: 0.9375rem; line-height: 1.55; color: var(--color-muted); }
.item__thumb { display: none; }
.carta__note { margin-top: var(--space-xl); text-align: center; font-size: var(--text-sm); color: var(--color-muted); }
.peek { position: fixed; top: 0; left: 0; z-index: var(--z-dropdown); width: 240px; aspect-ratio: 1; pointer-events: none; opacity: 0; padding: var(--space-xs); background: linear-gradient(135deg, var(--color-gold-deep), var(--color-gold-2) 30%, var(--color-gold) 60%, var(--color-gold-deep)); box-shadow: 0 24px 50px -24px color-mix(in oklab, var(--color-scrim) 65%, transparent); transition: opacity var(--dur-short) var(--ease-out); }
.peek img { width: 100%; height: 100%; object-fit: cover; }
.peek.is-on { opacity: 1; }
/* on touch screens the plate photo sits beside the name instead of following the cursor */
@media (hover: none), (pointer: coarse) {
  .item:has(.item__thumb) { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: var(--space-md); align-items: center; }
  .item__thumb { display: block; grid-row: span 2; width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-photo); box-shadow: 0 0 0 1px var(--frame-c); }
  .item:has(.item__thumb) .item__desc { grid-column: 2 / -1; }
}
@media (max-width: 48rem) {
  .items { columns: 1; }
  .tabs { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(20px, 5vw, 80px); scrollbar-width: none; margin-inline: calc(-1 * clamp(20px, 5vw, 80px)); padding-inline: clamp(20px, 5vw, 80px); justify-self: stretch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { scroll-snap-align: start; }
  .carta__title { font-size: clamp(2.25rem, 10vw, 3rem); }
  .carta__title::before, .carta__title::after { flex-basis: 32px; }
  .item__name { font-size: 1.375rem; }
}

/* ---------- lunch ---------- */
.lunch__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-split); align-items: center; }
.lunch__price { margin-top: var(--space-lg); font-family: var(--font-display); font-weight: 600; font-size: clamp(4.5rem, 10vw, 9rem); line-height: 0.85; letter-spacing: -0.02em; font-variant-numeric: lining-nums; color: var(--color-ink); }
.lunch__cur { margin-right: 0.12em; font-family: var(--font-body); font-weight: 400; font-size: 0.2em; letter-spacing: 0; vertical-align: 1.1em; color: var(--color-muted); }
.lunch__what { margin-top: var(--space-md); font-size: var(--text-xl); font-weight: 400; }
.lunch__lead { margin-top: var(--space-sm); max-width: 40ch; color: var(--color-muted); }
.lunch__text .btn { margin-top: var(--space-xl); }
.lunch__photo { justify-self: center; width: min(100%, 340px); rotate: 2deg; transition: rotate var(--dur-long) var(--ease-out); }
.lunch__photo:hover { rotate: 0deg; }
.lunch__photo img { aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 60rem) {
  .lunch__grid { grid-template-columns: minmax(0, 1fr); }
  .lunch__photo { width: min(70%, 300px); }
  .lunch__text { display: grid; justify-items: center; text-align: center; }
  .lunch__text h2, .lunch__lead { margin-inline: auto; }
}

/* ---------- bar and cigar room, under the ceiling of lights ---------- */
.bar { overflow: hidden; }
.bar__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-split); align-items: center; }
.bar__vitrola { position: relative; width: min(100%, 520px); justify-self: center; }
.bar__vitrola figcaption { margin-top: var(--space-md); }
.vinyl { position: absolute; right: -12%; bottom: 12%; z-index: 2; width: clamp(120px, 13vw, 196px); height: auto; filter: drop-shadow(0 18px 24px var(--color-scrim)); animation: spin 5.5s linear infinite; }
.vinyl__disc { fill: var(--color-scrim); }
.vinyl__grooves circle { fill: none; stroke: color-mix(in oklab, var(--color-cover-ink) 9%, transparent); stroke-width: 0.6; }
.vinyl__shine { fill: color-mix(in oklab, var(--color-cover-ink) 7%, transparent); }
.vinyl__label { fill: var(--color-accent); }
.vinyl__text { fill: var(--color-gold-2); font-family: var(--font-body); font-size: 8.6px; }
.vinyl__hole { fill: var(--color-cover); }
@keyframes spin { to { rotate: 360deg; } }
.bar__text .lead { margin-top: var(--space-lg); max-width: 44ch; color: var(--color-cover-ink-2); }
.bar__h { margin-top: var(--space-2xl); padding-bottom: var(--space-sm); font-size: var(--text-2xl); border-bottom: 1px solid var(--color-gold-deep); }
.drinks { margin: 0; padding: 0; list-style: none; }
.drinks li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-cover-rule); }
.drinks__name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; }
.drinks__name::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--space-sm); vertical-align: 0.3em; background: var(--color-gold); transform: rotate(45deg); }
.drinks__kind { font-size: var(--text-sm); color: var(--color-cover-ink-2); text-align: right; }
/* the drinks, as a strip that slides sideways */
.glasses { display: flex; gap: clamp(var(--space-md), 1.6vw, var(--space-lg)); margin: clamp(var(--space-2xl), 7vw, 112px) calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) var(--space-xs); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.glasses::-webkit-scrollbar { display: none; }
.glasses:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; }
.glass { position: relative; flex: 0 0 clamp(220px, 22vw, 300px); scroll-snap-align: start; }
.glass__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-photo); background: var(--color-cover-2); }
.glass__img img, .glass__img video { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease-out); }
.glass:hover .glass__img img { transform: scale(1.05); }
.glass__name { margin-top: var(--space-sm); font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2; }
.cigar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; margin-top: clamp(80px, 9vw, var(--space-4xl)); padding-top: clamp(48px, 5vw, 80px); border-top: 1px solid var(--color-cover-rule); }
.cigar__a { grid-column: 1 / span 5; }
.cigar__a img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 40%; }
.cigar__text { grid-column: 6 / span 4; }
.cigar__title { font-size: clamp(2.25rem, 2.4vw + 1rem, 3.5rem); line-height: 1; margin-top: var(--space-lg); }
.cigar__text p { margin-top: var(--space-md); max-width: 34ch; color: var(--color-cover-ink-2); }
.cigar__b { grid-column: 10 / span 3; align-self: end; }
.cigar__b .tile__img { aspect-ratio: 4 / 5; }
@media (max-width: 60rem) {
  .bar__top { grid-template-columns: minmax(0, 1fr); }
  .bar__vitrola { width: min(84%, 420px); }
  .vinyl { right: -10%; bottom: 14%; width: clamp(104px, 28vw, 150px); }
  .glass { flex-basis: min(66%, 280px); }
  .cigar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .cigar__a { grid-column: 1 / -1; width: min(100%, 420px); justify-self: center; }
  .cigar__text { grid-column: 1 / -1; display: grid; justify-items: center; text-align: center; }
  .cigar__text p { margin-inline: auto; }
  .cigar__b { grid-column: 1 / -1; width: min(86%, 340px); justify-self: center; }
  .bar__vitrola figcaption, .cigar__b figcaption, .people__photo figcaption, .events__main figcaption { text-align: center; }
}

/* ---------- the house ---------- */
.house__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-split); align-items: start; }
.house__text { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
.house__text h2 { max-width: 12ch; }
.house__quote { margin-top: var(--space-xl); padding-left: var(--space-lg); border-left: 1px solid var(--color-gold-deep); }
.house__quote p { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: 1.3; }
.house__quote footer { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.house__text > p { margin-top: var(--space-lg); max-width: 48ch; color: var(--color-ink-2); }
.house__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; }
.house__wide { grid-column: 1 / -1; }
.house__wide .tile__img { aspect-ratio: 16 / 9; }
.house__tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.house__side { display: grid; gap: var(--space-lg); }
.house__side .tile__img { aspect-ratio: 5 / 4; }
@media (max-width: 60rem) {
  .house__grid { grid-template-columns: minmax(0, 1fr); }
  .house__text { position: relative; top: 0; }
}

/* ---------- the people ---------- */
.people { background: var(--color-paper-2); }
.people__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-split); align-items: center; }
.people__photo { width: 100%; max-width: 460px; justify-self: center; }
.people__photo img { aspect-ratio: 4 / 5; object-fit: cover; }
.people__text .lead { margin-top: var(--space-lg); max-width: 40ch; color: var(--color-ink-2); }
.press { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.press p { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1vw + 1.1rem, 2.125rem); line-height: 1.25; max-width: 30ch; }
.press footer { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.timeline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.timeline li { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); color: var(--color-ink-2); font-size: 0.9375rem; }
.timeline__year { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 2vw + 1.25rem, 3.5rem); line-height: 1; color: var(--color-ink); font-variant-numeric: lining-nums; }
.people__stay { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.people__stay strong { color: var(--color-ink); }
@media (max-width: 60rem) { .people__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- events ---------- */
.events__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-split); align-items: start; }
.events__main { width: 100%; max-width: 460px; justify-self: center; }
.events__main img { aspect-ratio: 4 / 5; object-fit: cover; }
.events__side { display: grid; gap: clamp(var(--space-lg), 3vw, var(--space-xl)); }
.events__agenda { position: relative; padding: clamp(var(--space-lg), 3vw, var(--space-xl)); background: var(--color-paper-2); }
.events__agenda::before { content: ""; position: absolute; inset: var(--space-xs); border: 1px solid var(--frame-c); pointer-events: none; }
.events__when { font-size: var(--text-sm); color: var(--color-muted); }
.events__what { margin: var(--space-xs) 0 var(--space-lg); font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 1.6vw + 1.25rem, 2.75rem); line-height: 1.05; }
.events__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-sm), 1.4vw, 20px); }
@media (max-width: 60rem) { .events__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .events__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .events__agenda .btn, .lunch__text .btn { width: 100%; } }

/* ---------- reviews: the band slides by itself ---------- */
.reviews { background: var(--color-paper-2); }
.marquee { overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); }
.marquee::-webkit-scrollbar { display: none; }
.marquee:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.js .marquee { overflow: hidden; padding-inline: 0; }
.marquee__track { display: flex; gap: var(--space-lg); width: max-content; margin: 0; padding: 0; list-style: none; }
.js .marquee__track { animation: marquee 70s linear infinite; animation-play-state: paused; padding-left: var(--gutter); }
.marquee.is-running .marquee__track { animation-play-state: running; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.review { flex: 0 0 min(460px, 84vw); display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-lg); background: var(--color-paper); border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--color-rule); }
.review img { width: 112px; height: 100%; min-height: 156px; object-fit: cover; border-radius: var(--radius-photo); }
.review blockquote { display: grid; align-content: space-between; gap: var(--space-md); }
.review p { font-family: var(--font-display); font-weight: 500; font-size: 1.3125rem; line-height: 1.35; }
.review footer { display: grid; gap: var(--space-3xs); font-size: var(--text-sm); }
.review__name { font-weight: 500; }
.review__meta { color: var(--color-muted); font-size: var(--text-xs); }
.reviews__foot { display: flex; justify-content: center; margin-top: var(--space-xl); }
@media (max-width: 40rem) { .review { grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md); } .review img { width: 84px; } .review p { font-size: 1.1875rem; } }

/* ---------- gallery: pinned on desktop, swiped on the phone ---------- */
.gallery { padding-block: var(--section-pad); }
.gallery__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: clamp(32px, 4vw, 56px); }
.gallery__head h2 { flex: 1 1 auto; }
.gallery__nav { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-sm); }
.gallery__progress { width: 140px; height: 1px; margin-right: var(--space-md); background: var(--color-rule); overflow: hidden; }
.gallery__progress span { display: block; height: 100%; background: var(--color-accent); transform-origin: left; transform: scaleX(0); }
@media (max-width: 40rem) { .gallery__progress { display: none; } }
.round { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid color-mix(in oklab, var(--color-ink) 25%, transparent); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.round:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.round:active { transform: scale(0.96); }
.round .i { width: 18px; height: 18px; }
.rail { display: flex; gap: clamp(var(--space-sm), 1.4vw, 20px); margin: 0; padding: 0 var(--gutter); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.rail li { flex: 0 0 auto; height: min(58svh, 420px); scroll-snap-align: start; overflow: hidden; border-radius: var(--radius-photo); background: var(--color-paper-2); }
.rail img { height: 100%; width: auto; max-width: 86vw; object-fit: cover; transition: transform 1100ms var(--ease-out); }
.rail li:hover img { transform: scale(1.04); }
@media (min-width: 1440px) { .rail { padding-left: calc((100vw - var(--container)) / 2 + var(--gutter)); } }
.gallery.is-pinned { height: var(--pin-h); padding-block: 0; }
.gallery.is-pinned .gallery__stick { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: var(--nav-h); }
.gallery.is-pinned .rail { overflow: visible; scroll-snap-type: none; width: max-content; will-change: transform; }
.gallery.is-pinned .rail li { height: min(56svh, 480px); }

/* ---------- visit ---------- */
.visit { background: var(--color-paper-2); }
.visit__facade { overflow: hidden; border-radius: var(--radius-photo); aspect-ratio: 16 / 8; }
.visit__facade img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.visit__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-split); align-items: start; margin-top: clamp(48px, 5vw, 80px); }
.visit__address { margin-top: var(--space-lg); font-style: normal; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.625rem, 1vw + 1.1rem, 2.25rem); line-height: 1.25; }
.hours { margin: 0; }
.hours div { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.hours div:first-child { border-top: 1px solid var(--color-rule); }
.hours dt { color: var(--color-ink-2); }
.hours dd { margin: 0; font-variant-numeric: tabular-nums lining-nums; }
.hours .is-today dt, .hours .is-today dd { color: var(--color-accent); font-weight: 500; }
.hours .is-today dt::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--space-sm); vertical-align: 0.2em; background: var(--color-gold-deep); transform: rotate(45deg); }
.visit__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.delivery { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-md); align-items: center; margin-top: var(--space-xl); }
.delivery img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-photo); }
.delivery p { display: flex; gap: var(--space-xs); align-items: center; color: var(--color-ink-2); font-size: 0.9375rem; }
.delivery .i { width: 18px; height: 18px; color: var(--color-gold-deep); }
.map { margin-top: clamp(48px, 5vw, 80px); aspect-ratio: 21 / 8; border-radius: var(--radius-photo); overflow: hidden; box-shadow: inset 0 0 0 1px var(--color-rule); background: var(--color-paper-3); }
.map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(0.4) sepia(0.12) contrast(1.02); }
@media (max-width: 60rem) { .visit__grid { grid-template-columns: minmax(0, 1fr); } .map { aspect-ratio: 4 / 3; } .visit__facade { aspect-ratio: 4 / 3; } }
@media (max-width: 40rem) { .visit__actions .btn { flex: 1 1 100%; } .map { aspect-ratio: 1; } }

/* ---------- closing: the dark band, the lights, the fern on each corner ---------- */
.closing { padding-block: clamp(120px, 12vw, 200px); overflow: hidden; }
.closing__inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
.closing h2 { margin-top: var(--space-lg); max-width: 14ch; }
.closing p { margin-top: var(--space-lg); max-width: 36ch; color: var(--color-cover-ink-2); font-size: var(--text-lead); }
.closing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.closing__mark { width: clamp(72px, 8vw, 104px); }
@media (max-width: 40rem) { .closing__actions { flex-direction: column; justify-self: stretch; } .closing__actions .btn { width: 100%; } }

/* ---------- footer ---------- */
.foot { padding: 0 0 var(--space-xl); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); padding-top: clamp(var(--space-2xl), 7vw, var(--space-3xl)); }
.foot .foot__brand { display: grid; gap: var(--space-2xs); align-content: start; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.25rem, 2vw + 1.25rem, 3rem); line-height: 1; color: var(--color-cover-ink); }
.foot .foot__brand .foot__casa { font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem; line-height: 1.4; color: var(--color-gold); }
.foot__mark { width: 72px; margin-bottom: var(--space-md); }
.foot__h { margin-bottom: var(--space-sm); max-width: none; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--color-cover-ink); }
.foot p { font-size: 0.9375rem; line-height: 1.8; color: var(--color-cover-ink-2); }
.foot a { text-decoration-color: transparent; transition: text-decoration-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.foot a:hover { color: var(--color-cover-ink); text-decoration-color: currentColor; }
.foot__legal { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-cover-rule); }
.foot__legal p { font-size: var(--text-xs); }
@media (max-width: 60rem) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .foot__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- entrances: only once the script is running, so nothing hides without it ---------- */
.js.reveal-ready [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .loader { display: none; }
  .js .hero__title, .js .hero__lead, .js .hero__actions { animation: none; }
  .slide img, .slide.is-on img { transform: none; }
  .smoke path, .stars::after, .fern, .vinyl { animation: none; }
  .js.reveal-ready [data-reveal] { opacity: 1; transform: none; }
}