/* Fenzo — components and sections. Load after tokens.css.
   Square corners everywhere; colour comes from photos and three solid bands (forest, teal, paper). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap, .sec__in { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.t-h1, .t-h2, .t-h3, .t-h4, .t-display, .t-eyebrow { color: var(--text); text-wrap: balance; }
.t-lead, .t-body { color: var(--text-2); }
.ic { width: 1em; height: 1em; flex: none; }

/* Reveal (legacy hook; the shared motion engine does the work) */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ── Buttons: square, terracotta, Inter Tight SemiBold 16, a 24-grid icon after the label; hover = colour fade only ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 24px; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); font: 600 16px/1.52 var(--font); white-space: nowrap; cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn .ic { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn:hover .ic:last-child { transform: translateX(2px); }
.btn--sm { min-height: 44px; padding: 10px 20px; }
.btn--sm .ic { width: 16px; height: 16px; }
.btn--lg { min-height: 56px; padding: 16px 24px; }
.btn--wide { padding-inline: 36px; }
.btn--block { display: flex; width: 100%; }
.btn--line { background: transparent; color: var(--accent-deep); border-color: var(--accent-deep); }   /* deeper tone so it reads on paper (5.1:1) and white */
.btn--line:hover { background: var(--accent); color: var(--on-accent); }
.btn--line-zest { background: transparent; color: var(--zest); border-color: var(--zest); }
.btn--line-zest:hover { background: var(--zest); color: var(--band-2); }
.btn--light { background: var(--surface); color: var(--text); border-color: var(--surface); }
.btn--light:hover { background: var(--bg); border-color: var(--bg); }
.link { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/1.52 var(--font); color: var(--text-2); }
.link .ic { width: 18px; height: 18px; transition: transform .35s var(--ease); }
a:hover > .link .ic, .link:hover .ic { transform: translateX(3px); }
.stars { display: inline-flex; gap: 2px; color: var(--accent-hi); }
.stars .ic { width: 16px; height: 16px; }
.price { font: 400 28px/1.2 var(--font-display); letter-spacing: -.06em; color: var(--accent); white-space: nowrap; }

/* Round arrow pair (rails): 68px circles, one outline, one terracotta */
.arrows { display: flex; gap: 15px; }
.arrow { display: grid; place-items: center; width: 68px; height: 68px; border-radius: var(--r-pill); border: 1.13px solid var(--on-dark); background: transparent; color: var(--on-dark); cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.arrow .ic { width: 26px; height: 26px; }
.arrow:hover { background: rgba(255, 255, 255, .12); }
.arrow--on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.arrow--on:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.arrows--paper .arrow:not(.arrow--on) { border-color: var(--line); color: var(--text-2); }
.arrows--paper .arrow:not(.arrow--on):hover { background: var(--surface); }

/* ── Header: logo left, uppercase links centred, terracotta button right. Over a hero photo it is white text. Hover = a terracotta dot under the link (rests on the current page) ── */
.site-head { position: relative; z-index: 20; }
.site-head__in { position: relative; display: flex; align-items: center; justify-content: space-between; width: min(var(--wide), 100% - 2 * max(20px, var(--gutter) - 32px)); margin: 0 auto; padding-top: 24px; min-height: 68px; }
.site-head--over { position: absolute; inset: 0 0 auto 0; color: var(--on-dark); }
.site-head:not(.site-head--over) { color: var(--text); }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 500 23.6px/1 var(--font); letter-spacing: -.02em; }
.logo .mark { width: 40px; height: 30px; color: var(--accent-hi); }
.logo--lg { font-size: 33px; gap: 14px; }
.logo--lg .mark { width: 56px; height: 42px; }
.nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 32px; }
.nav > a, .nav__btn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font: 400 16px/1.52 var(--font); text-transform: uppercase; background: none; border: 0; cursor: pointer; }
.nav__btn .ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.nav > a::after, .nav__btn::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent-hi); opacity: 0; transform: scale(.4); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.nav > a:hover::after, .nav > a[aria-current]::after, .nav__btn:hover::after { opacity: 1; transform: none; }
.nav__drop { position: relative; }
.nav__menu { position: absolute; top: calc(100% + 14px); left: 50%; min-width: 220px; padding: 8px; background: var(--surface); color: var(--text); display: grid; opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
.nav__menu a { padding: 10px 14px; font: 400 15px/1.4 var(--font); color: var(--text-2); transition: background-color .3s var(--ease), color .3s var(--ease); }
.nav__menu a:hover { background: var(--bg); color: var(--text); }
.nav__drop:hover .nav__menu, .nav__drop.is-open .nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav__drop:hover .nav__btn .ic, .nav__drop.is-open .nav__btn .ic { transform: rotate(180deg); }
.menu-btn { display: none; width: 48px; height: 48px; border: 1px solid currentColor; background: transparent; cursor: pointer; place-content: center; gap: 6px; }
.menu-btn i { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.menu-btn[aria-expanded="true"] i:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.mnav { position: absolute; top: 100%; left: 20px; right: 20px; margin-top: 12px; padding: 12px; background: var(--surface); color: var(--text); display: grid; gap: 2px; }
.mnav[hidden] { display: none; }
.mnav a:not(.btn) { padding: 12px; font: 400 17px/1.4 var(--font); text-transform: uppercase; }
.mnav .btn { margin-top: 8px; }

/* ── Sections: 140px apart on paper; bands carry their own 140px padding ── */
.sec { margin-top: var(--section); }
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: var(--head-gap); }
.rail-head .t-h2 { max-width: 460px; }

/* HERO — full-bleed photo, left scrim (multiply) + top shade */
.hero { position: relative; height: clamp(720px, 68.75vw, 990px); overflow: hidden; color: var(--on-dark); background: var(--shade); --hx: max(20px, (100% - var(--wide)) / 2); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero::before { content: ""; position: absolute; inset: 0 25% 0 0; background: linear-gradient(90deg, var(--shade) 0%, rgba(29, 29, 29, .75) 45%, rgba(29, 29, 29, 0) 100%); mix-blend-mode: multiply; z-index: 1; pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 156px; background: linear-gradient(180deg, rgba(29, 29, 29, .5), rgba(29, 29, 29, 0)); mix-blend-mode: multiply; z-index: 1; pointer-events: none; }
.hero__copy { position: absolute; z-index: 2; left: var(--hx); top: 30.7%; width: min(608px, 100% - 40px); display: grid; gap: 32px; justify-items: start; }
.hero__copy .t-h1 { color: var(--on-dark); }
.hero__copy .t-lead { color: var(--on-dark); max-width: 494px; }
.hero__copy .btn { margin-top: 4px; }
.hero__rating { position: absolute; z-index: 2; left: var(--hx); bottom: 44px; padding: 18px; background: var(--surface); color: var(--text-2); display: grid; gap: 12px; }
.rating__top { display: flex; align-items: center; gap: 6px; }
.rating__top img { width: 44px; height: 32px; }
.hero__rating .stars .ic { width: 18px; height: 18px; }
.hero__recipe { position: absolute; z-index: 2; right: var(--hx); bottom: 44px; width: 397px; padding: 16px; display: flex; gap: 24px; align-items: center; background: var(--surface); }
.hero__recipe-img { position: relative; width: 172px; height: 168px; flex: none; overflow: hidden; }
.hero__recipe-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.hero__recipe:hover .hero__recipe-img img { transform: scale(1.04); }
.play { position: absolute; left: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; background: var(--surface); color: var(--accent); }
.play .ic { width: 18px; height: 18px; }
.hero__recipe-txt { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; padding-block: 18px; }
.hero__recipe-txt .t-h4 { color: var(--text); }

/* STORY — centred stack + fork doodles + two big photos edge to edge */
.story { position: relative; overflow: hidden; padding-top: var(--section); }
.story__in { position: relative; z-index: 1; width: min(740px, 100% - 2 * var(--gutter)); margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; }
.vrule { width: 1px; height: 92px; background: var(--text); }
.story__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; width: 100%; }
.story__pair img { width: 100%; aspect-ratio: 360 / 231; object-fit: cover; }
.story__in .t-lead { max-width: 504px; }
.doodle { position: absolute; z-index: 0; top: 169px; width: 127px; height: 454px; color: var(--text); pointer-events: none; }
.doodle--r { left: calc(50% + 668px - 63px); transform: translateY(-50%) rotate(-120deg); }
.doodle--l { left: calc(50% - 668px - 63px); transform: translateY(-50%) scaleX(-1) rotate(-120deg); }
.story__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 60px; }
.story__duo img { width: 100%; aspect-ratio: 712 / 720; object-fit: cover; }

/* MENU STAGE — forest band, three photos and a scalloped menu card all tilted −4.5°. Sized in cqw so the whole stage scales with the band. */
.stage { margin-top: var(--section); }
.stage__title { text-align: center; max-width: 520px; margin: 0 auto var(--head-gap); }
.stage__band { position: relative; background: var(--band); container-type: inline-size; overflow: hidden; height: 81.94vw; max-height: 1180px; }
.stage__tilt { position: absolute; inset: 0; }
.stage__ph { position: absolute; overflow: hidden; transform: rotate(var(--tilt)); }
.stage__ph img { width: 100%; height: 100%; object-fit: cover; }
.stage__ph--a { left: -2.5cqw; top: -23.5cqw; width: 50.63cqw; height: 44.44cqw; }
.stage__ph--b { left: 51.16cqw; top: -4.54cqw; width: 50.05cqw; height: 44.44cqw; }
.stage__ph--c { left: 54.94cqw; top: 41.08cqw; width: 50.93cqw; height: 48.39cqw; }
.menu-card { position: absolute; left: 1.54cqw; top: 22.28cqw; width: 51.32cqw; height: 63.75cqw; transform: rotate(var(--tilt)); padding: 4.17cqw 5.56cqw 0; background: var(--surface); -webkit-mask: url("data:image/svg+xml,%3Csvg width='739' height='918' viewBox='0 0 739 918' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath id='Subtract' d='M739 55.4557C718.593 55.4557 702.05 72.008 702.05 92.4262C702.05 112.844 718.593 129.397 739 129.397V189.474C718.593 189.474 702.05 206.026 702.05 226.444C702.05 246.862 718.593 263.415 739 263.415V323.492C718.593 323.492 702.05 340.044 702.05 360.462C702.05 380.88 718.593 397.433 739 397.433V457.51C718.593 457.51 702.05 474.062 702.05 494.48C702.05 514.898 718.593 531.451 739 531.451V591.528C718.593 591.528 702.05 608.08 702.05 628.498C702.05 648.916 718.593 665.469 739 665.469V918H0V665.469C20.4069 665.469 36.95 648.916 36.95 628.498C36.95 608.08 20.4069 591.528 0 591.528V531.451C20.4069 531.451 36.95 514.898 36.95 494.48C36.95 474.062 20.4069 457.51 0 457.51V397.433C20.4069 397.433 36.95 380.88 36.95 360.462C36.95 340.044 20.4069 323.492 0 323.492V263.415C20.4069 263.415 36.95 246.862 36.95 226.444C36.95 206.026 20.4069 189.474 0 189.474V129.397C20.4069 129.397 36.95 112.844 36.95 92.4262C36.95 72.008 20.4069 55.4557 0 55.4557V0H739V55.4557Z' fill='white'/%3E %3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg width='739' height='918' viewBox='0 0 739 918' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath id='Subtract' d='M739 55.4557C718.593 55.4557 702.05 72.008 702.05 92.4262C702.05 112.844 718.593 129.397 739 129.397V189.474C718.593 189.474 702.05 206.026 702.05 226.444C702.05 246.862 718.593 263.415 739 263.415V323.492C718.593 323.492 702.05 340.044 702.05 360.462C702.05 380.88 718.593 397.433 739 397.433V457.51C718.593 457.51 702.05 474.062 702.05 494.48C702.05 514.898 718.593 531.451 739 531.451V591.528C718.593 591.528 702.05 608.08 702.05 628.498C702.05 648.916 718.593 665.469 739 665.469V918H0V665.469C20.4069 665.469 36.95 648.916 36.95 628.498C36.95 608.08 20.4069 591.528 0 591.528V531.451C20.4069 531.451 36.95 514.898 36.95 494.48C36.95 474.062 20.4069 457.51 0 457.51V397.433C20.4069 397.433 36.95 380.88 36.95 360.462C36.95 340.044 20.4069 323.492 0 323.492V263.415C20.4069 263.415 36.95 246.862 36.95 226.444C36.95 206.026 20.4069 189.474 0 189.474V129.397C20.4069 129.397 36.95 112.844 36.95 92.4262C36.95 72.008 20.4069 55.4557 0 55.4557V0H739V55.4557Z' fill='white'/%3E %3C/svg%3E") center / 100% 100% no-repeat; display: flex; flex-direction: column; gap: 2.78cqw; }
.menu-card__squiggle { position: absolute; left: 34.96cqw; top: 15.2cqw; width: 37.12cqw; height: auto; transform: rotate(20.96deg); }
.menu-list { display: grid; gap: 1.5cqw; }
.dish { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 1.6cqw; background: url(assets/art/rule-hand.svg) left bottom / 100% 2px no-repeat; }
.dish:last-child { padding-bottom: 0; background: none; }
.dish > div { display: grid; gap: 2.4cqw; max-width: 28.5cqw; }   /* gap > the tilt's bbox growth, so tilted lines never overlap */
.dish .t-h3 { font-size: max(20px, 2.5cqw); }
.dish .t-lead { font-size: max(14px, 1.25cqw); line-height: 1.48; }
.dish .price { font-size: max(18px, 1.94cqw); }
.menu-card .btn { min-height: max(48px, 4.72cqw); font-size: max(14px, 1.11cqw); }

/* FAVOURITES — tabs in hand-drawn ovals + 3 × 2 white dish cards */
.favs { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.favs__head { display: flex; flex-direction: column; align-items: center; gap: 48px; margin-bottom: var(--head-gap); text-align: center; }
.favs__head .t-h2 { max-width: 680px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tab { display: grid; place-items: center; width: 151px; height: 45px; font: 400 16px/1.52 var(--font); color: var(--text-2); background: url(assets/art/oval-line.svg) center / 100% 100% no-repeat; transition: color .35s var(--ease), background-image .35s var(--ease); }
.tab:hover { color: var(--text); }
.tab.is-on { color: var(--on-accent); background-image: url(assets/art/oval-fill.svg); }
.dish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.dish-card { background: var(--surface); padding: 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dish-card img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 24px; }
.dish-card__meta { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.dish-card__meta .stars .ic { width: 15px; height: 15px; }
.dish-card .t-h4 { margin: 16px 0 28px; }
.dish-card .btn { margin-top: auto; }

/* GUESTS — teal band, torn notebook-page cards */
.guests { margin-top: var(--section); padding-block: var(--section); background: var(--band-2); }
.guests .t-h2 { color: var(--on-dark); }
.rail { display: flex; gap: var(--card-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 calc((100% - 2 * var(--card-gap)) / 3); scroll-snap-align: start; }
.note { position: relative; aspect-ratio: 412 / 356; padding: 44px 40px 36px 56px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; background: var(--surface); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='95 121 412 356' preserveAspectRatio='none'%3E%3Cg transform='translate(300 300) rotate(7.06) translate(-223.31 -196.22)'%3E%3Cpath d='M376.778 2.59741C343.872 5.66045 311.245 10.6639 278.503 15.0742C245.748 19.4844 212.952 22.896 180.076 26.2104C147.445 29.5013 114.972 34.126 82.4108 38.0269C74.2069 39.0088 66.0265 39.9874 57.7656 40.3124C49.8533 40.6241 41.9343 40.5738 34.0186 40.8185C26.4883 41.0497 19.072 41.7468 11.6021 42.6617C7.74477 43.1342 3.86735 43.4928 0 43.4559C0.891434 56.0097 3.59927 68.3457 5.6804 80.7353C5.85132 81.7574 6.00214 82.7795 6.15965 83.805C9.52766 83.051 12.9325 82.4746 16.3675 82.2065C16.9172 79.1468 19.3804 76.6702 22.6311 76.3016C26.5923 75.8525 30.1714 78.6977 30.6238 82.6623C31.0728 86.6268 28.2244 90.2059 24.2632 90.655C21.4414 90.9767 18.8442 89.6128 17.3998 87.3842C13.9145 88.1248 10.4626 89.2072 6.93713 89.4821C8.27093 99.7335 9.10544 110.052 10.2951 120.32C11.391 129.751 12.5471 139.178 13.6363 148.608C14.7455 148.468 15.8716 148.424 16.9775 148.39C18.8978 148.33 20.818 148.34 22.7383 148.293C23.2041 148.283 23.6867 148.277 24.1693 148.263C24.997 145.622 27.306 143.581 30.235 143.246C34.1962 142.797 37.7754 145.646 38.2278 149.61C38.6769 153.575 35.8283 157.154 31.8671 157.606C28.3784 158.002 25.1948 155.847 24.1727 152.623C20.8449 152.965 17.5874 153.789 14.3166 154.513C14.5344 156.487 14.7589 158.458 14.9667 160.431C16.391 174.068 17.249 187.754 18.442 201.411C18.9079 206.756 19.4205 212.098 19.9333 217.436C23.7671 217.812 27.621 217.906 31.475 217.919C31.1801 214.065 33.9651 210.633 37.8425 210.191C41.8036 209.742 45.3827 212.59 45.8351 216.555C46.2842 220.523 43.4357 224.099 39.4745 224.551C36.8471 224.849 34.4007 223.693 32.9161 221.729C28.9415 222.875 24.7256 223.921 20.57 223.864C22.5271 243.482 24.7692 263.07 27.2793 282.622C27.3865 283.449 27.5004 284.274 27.6077 285.102C31.4348 284.83 35.2553 284.398 39.069 283.935C39.25 280.47 41.8874 277.544 45.4498 277.142C49.411 276.693 52.9901 279.539 53.4426 283.51C53.8916 287.471 51.043 291.05 47.0818 291.499C44.4444 291.797 42.0147 290.618 40.5335 288.64C36.5622 289.887 32.5709 291.077 28.5426 292.112C29.9234 302.578 31.3544 313.038 32.8624 323.487C34.3269 333.624 35.9121 343.738 37.2593 353.889C40.4866 353.729 43.7105 353.464 46.9344 353.202C46.8338 352.841 46.7367 352.475 46.6931 352.086C46.2407 348.119 49.0892 344.539 53.0571 344.087C57.0183 343.638 60.5975 346.487 61.0499 350.454C61.4989 354.416 58.6537 358.001 54.6892 358.451C52.2796 358.725 50.0376 357.764 48.5329 356.095C45.2151 357.747 41.6193 358.9 37.9496 359.432C38.1239 360.817 38.3082 362.201 38.4657 363.588C39.6018 373.548 40.7759 382.489 41.9991 392.435C55.937 391.339 69.9285 391.202 83.8865 390.428C99.1515 389.583 114.111 387.207 129.192 384.804C159.756 379.932 190.309 375.411 221.073 372.003C251.523 368.628 281.999 365.498 312.479 362.438C327.657 360.917 342.875 359.633 358.006 357.699C373.244 355.756 388.415 353.353 403.6 351.05C410.409 350.018 417.199 348.976 424.056 348.302C430.333 347.686 436.616 347.143 442.883 346.426C444.126 346.285 445.376 346.134 446.623 345.98L407.328 0.000202314C397.141 0.807855 386.956 1.65235 376.778 2.59741Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='95 121 412 356' preserveAspectRatio='none'%3E%3Cg transform='translate(300 300) rotate(7.06) translate(-223.31 -196.22)'%3E%3Cpath d='M376.778 2.59741C343.872 5.66045 311.245 10.6639 278.503 15.0742C245.748 19.4844 212.952 22.896 180.076 26.2104C147.445 29.5013 114.972 34.126 82.4108 38.0269C74.2069 39.0088 66.0265 39.9874 57.7656 40.3124C49.8533 40.6241 41.9343 40.5738 34.0186 40.8185C26.4883 41.0497 19.072 41.7468 11.6021 42.6617C7.74477 43.1342 3.86735 43.4928 0 43.4559C0.891434 56.0097 3.59927 68.3457 5.6804 80.7353C5.85132 81.7574 6.00214 82.7795 6.15965 83.805C9.52766 83.051 12.9325 82.4746 16.3675 82.2065C16.9172 79.1468 19.3804 76.6702 22.6311 76.3016C26.5923 75.8525 30.1714 78.6977 30.6238 82.6623C31.0728 86.6268 28.2244 90.2059 24.2632 90.655C21.4414 90.9767 18.8442 89.6128 17.3998 87.3842C13.9145 88.1248 10.4626 89.2072 6.93713 89.4821C8.27093 99.7335 9.10544 110.052 10.2951 120.32C11.391 129.751 12.5471 139.178 13.6363 148.608C14.7455 148.468 15.8716 148.424 16.9775 148.39C18.8978 148.33 20.818 148.34 22.7383 148.293C23.2041 148.283 23.6867 148.277 24.1693 148.263C24.997 145.622 27.306 143.581 30.235 143.246C34.1962 142.797 37.7754 145.646 38.2278 149.61C38.6769 153.575 35.8283 157.154 31.8671 157.606C28.3784 158.002 25.1948 155.847 24.1727 152.623C20.8449 152.965 17.5874 153.789 14.3166 154.513C14.5344 156.487 14.7589 158.458 14.9667 160.431C16.391 174.068 17.249 187.754 18.442 201.411C18.9079 206.756 19.4205 212.098 19.9333 217.436C23.7671 217.812 27.621 217.906 31.475 217.919C31.1801 214.065 33.9651 210.633 37.8425 210.191C41.8036 209.742 45.3827 212.59 45.8351 216.555C46.2842 220.523 43.4357 224.099 39.4745 224.551C36.8471 224.849 34.4007 223.693 32.9161 221.729C28.9415 222.875 24.7256 223.921 20.57 223.864C22.5271 243.482 24.7692 263.07 27.2793 282.622C27.3865 283.449 27.5004 284.274 27.6077 285.102C31.4348 284.83 35.2553 284.398 39.069 283.935C39.25 280.47 41.8874 277.544 45.4498 277.142C49.411 276.693 52.9901 279.539 53.4426 283.51C53.8916 287.471 51.043 291.05 47.0818 291.499C44.4444 291.797 42.0147 290.618 40.5335 288.64C36.5622 289.887 32.5709 291.077 28.5426 292.112C29.9234 302.578 31.3544 313.038 32.8624 323.487C34.3269 333.624 35.9121 343.738 37.2593 353.889C40.4866 353.729 43.7105 353.464 46.9344 353.202C46.8338 352.841 46.7367 352.475 46.6931 352.086C46.2407 348.119 49.0892 344.539 53.0571 344.087C57.0183 343.638 60.5975 346.487 61.0499 350.454C61.4989 354.416 58.6537 358.001 54.6892 358.451C52.2796 358.725 50.0376 357.764 48.5329 356.095C45.2151 357.747 41.6193 358.9 37.9496 359.432C38.1239 360.817 38.3082 362.201 38.4657 363.588C39.6018 373.548 40.7759 382.489 41.9991 392.435C55.937 391.339 69.9285 391.202 83.8865 390.428C99.1515 389.583 114.111 387.207 129.192 384.804C159.756 379.932 190.309 375.411 221.073 372.003C251.523 368.628 281.999 365.498 312.479 362.438C327.657 360.917 342.875 359.633 358.006 357.699C373.244 355.756 388.415 353.353 403.6 351.05C410.409 350.018 417.199 348.976 424.056 348.302C430.333 347.686 436.616 347.143 442.883 346.426C444.126 346.285 445.376 346.134 446.623 345.98L407.328 0.000202314C397.141 0.807855 386.956 1.65235 376.778 2.59741Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.guests .rail { padding-block: 24px; margin-block: -24px; }
.quote-mark { width: 49px; height: 48px; margin-bottom: 16px; }
.note blockquote { color: var(--text); line-height: 1.3; text-wrap: balance; }
.note figcaption { display: grid; justify-items: center; gap: 14px; margin-top: 16px; }
.note__name { font: 500 20px/1.24 var(--font); color: var(--text); }

/* RESERVE — head + full-bleed photo with a white form card */
.reserve__head { width: min(560px, 100% - 2 * var(--gutter)); margin: 0 auto 47px; display: grid; gap: 36px; text-align: center; }
.reserve__stage { position: relative; height: 900px; overflow: hidden; display: grid; place-items: center; }
.reserve__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.book { position: relative; z-index: 1; width: min(565px, 100% - 2 * var(--gutter)); padding: 32px; background: var(--surface); display: grid; gap: 28px; margin-top: 128px; }
.book__title { text-align: center; max-width: 300px; margin: 0 auto; }
.book__fields { display: grid; gap: 16px; }
.field { position: relative; display: flex; align-items: center; border: 1px solid var(--line); color: var(--text-2); transition: border-color .3s var(--ease); }
.field:focus-within { border-color: var(--accent); }
.field input, .field select { width: 100%; height: 68px; padding: 0 52px 0 22px; border: 0; background: transparent; font: 400 16px/1.52 var(--font); color: var(--text); appearance: none; outline: none; }
.field input::placeholder { color: var(--text-2); }
.field select:invalid { color: var(--text-2); }
.field .ic { position: absolute; right: 22px; width: 16px; height: 16px; pointer-events: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field--select { border-color: var(--text); }

/* RECIPES — tall photo cards with a bottom fade */
.recipe { position: relative; aspect-ratio: 413 / 496; overflow: hidden; color: var(--on-dark); background: var(--shade); }
.recipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.recipe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 29, 29, 0) 30%, rgba(29, 29, 29, .8) 66%, var(--shade) 100%); mix-blend-mode: multiply; }
.recipe:hover img { transform: scale(1.04); }
.recipe__txt { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 28px; display: grid; gap: 24px; justify-items: start; }
.recipe__txt .t-h3 { color: var(--on-dark); max-width: 311px; }

/* EVENTS — forest band, ticket cards (photo + white body joined by round notches) */
.events { margin-top: var(--section); padding-block: var(--section); background: var(--band); }
.events__title { color: var(--on-dark); text-align: center; max-width: 480px; margin: 0 auto var(--head-gap); }
.ticket-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.ticket { position: relative; display: flex; flex-direction: column; }
.ticket > img { width: 100%; aspect-ratio: 413 / 370; object-fit: cover; }
.ticket__body { position: relative; flex: 1; margin-top: 2px; padding: 24px; background: var(--surface); display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.ticket { container-type: inline-size; }
.ticket::before, .ticket::after { content: ""; position: absolute; z-index: 1; top: calc(89.59cqw - 15px); width: 32px; height: 32px; border-radius: 50%; background: var(--notch, var(--band)); }   /* --notch = the colour of the section behind the ticket */
.ticket::before { left: -16px; } .ticket::after { right: -16px; }
.ticket__when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-2); font: 400 16px/1.52 var(--font); }
.ticket__when .ic { width: 16px; height: 16px; color: var(--accent); }
.ticket__when span + .ic { margin-left: 4px; }
.ticket .t-h4 { min-height: 2.4em; }

/* GALLERY — giant word + overlapping photos; the track drags sideways */
.gallery { position: relative; margin-top: var(--section); container-type: inline-size; overflow: hidden; }
.gallery__title { position: absolute; z-index: 3; left: var(--gutter); top: 5.83cqw; pointer-events: none; }
.gallery__track { position: relative; height: 76.94cqw; max-height: 1108px; cursor: grab; touch-action: pan-y; user-select: none; }
.gallery__track.is-drag { cursor: grabbing; }
.gallery__inner { position: absolute; inset: 0; transition: transform .6s var(--ease-out); }
.g { position: absolute; object-fit: cover; -webkit-user-drag: none; }
.g--3 { left: 55.56cqw; top: 0; width: 44.44cqw; height: 54.86cqw; }
.g--2 { left: 31.88cqw; top: 15.28cqw; width: 44.44cqw; height: 50.97cqw; }
.g--1 { left: 0; top: 29.17cqw; width: 43.06cqw; height: 47.78cqw; }
.g--4 { left: 101.4cqw; top: 22cqw; width: 41cqw; height: 48cqw; }
.g--5 { left: 144cqw; top: 6cqw; width: 40cqw; height: 54cqw; }
.drag { position: absolute; z-index: 4; left: 25.9cqw; top: 21.46cqw; width: max(110px, 11.94cqw); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; gap: 12px; background: url(assets/art/drag-disc.svg) center / 100% 100% no-repeat; color: var(--on-dark); font: 400 max(20px, 1.94cqw)/1.2 var(--font-display); letter-spacing: -.06em; text-transform: uppercase; pointer-events: none; }
.drag .ic { width: 16px; height: 16px; }

/* ── Footer (teal) ── */
.site-foot { margin-top: var(--section); background: var(--band-2); color: var(--on-dark-2); padding: 80px 0 28px; }
.foot__top { display: flex; flex-direction: column; align-items: center; gap: 24px; color: var(--on-dark); }
.socials { display: flex; gap: 13px; }
.socials a { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--on-dark-2); color: var(--on-dark); transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.socials a .ic { width: 20px; height: 20px; }
.socials a:hover { background: var(--accent); border-color: var(--accent); }
.foot__grid { width: min(var(--container), 100% - 2 * var(--gutter)); margin: 59px auto 0; display: grid; grid-template-columns: 255fr 295fr 346fr 392fr; position: relative; }
.foot__grid::before, .foot__grid::after { content: ""; position: absolute; left: 0; right: 0; border: 1px solid var(--line-2); pointer-events: none; }
.foot__grid::before { top: 0; height: 73px; }
.foot__grid::after { top: 85px; bottom: 0; }
.foot__col { padding: 0 28px 34px; }
.foot__h { height: 73px; display: flex; align-items: center; margin-bottom: 12px; font: 400 28px/1.2 var(--font-display); letter-spacing: -.06em; text-transform: uppercase; color: var(--on-dark); white-space: nowrap; }
.foot__col ul { display: grid; gap: 14px; padding-top: 30px; }
.foot__col a, .foot__col p { font: 400 18px/1.52 var(--font); color: var(--on-dark-2); transition: color .3s var(--ease); }
.foot__col a:hover { color: var(--on-dark); }
.foot__col > p { padding-top: 30px; }
.foot__hours { line-height: 1.76 !important; }
.sub { position: relative; display: flex; align-items: center; height: 52px; margin-top: 24px; border: 1px solid var(--on-dark); padding-left: 15px; gap: 8px; }
.sub > .ic { width: 16px; height: 16px; color: var(--on-dark-2); }
.sub input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 400 16px/1.16 var(--font); color: var(--on-dark); outline: none; }
.sub input::placeholder { color: var(--on-dark-2); }
.sub button { width: 40px; height: 40px; margin-right: 5px; border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; cursor: pointer; transition: background-color .35s var(--ease); }
.sub button:hover { background: var(--accent-deep); }
.sub button .ic { width: 16px; height: 16px; }
.foot__copy { margin-top: 44px; text-align: center; font: 400 16px/1.52 var(--font); }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .hero__recipe { width: 340px; }
  .hero__recipe-img { width: 140px; height: 140px; }
  .doodle { display: none; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__grid::before { display: none; }
  .foot__grid::after { top: 0; }
  .foot__col { padding-top: 8px; }
  .foot__h { height: auto; margin: 20px 0 0; }
  .foot__col ul, .foot__col > p { padding-top: 16px; }
}
@media (max-width: 1100px) {
  /* the menu stage un-tilts into a stacked card over one photo */
  .stage__band { height: auto; max-height: none; padding: 48px var(--gutter); }
  .stage__tilt { position: static; display: grid; gap: 24px; max-width: 760px; margin: 0 auto; }
  .stage__ph { position: static; transform: none; width: 100% !important; height: auto !important; aspect-ratio: 16 / 10; }
  .stage__ph--b, .stage__ph--c { display: none; }
  .menu-card { position: relative; inset: auto; transform: none; width: 100%; height: auto; padding: 40px 32px 32px 56px; gap: 28px; -webkit-mask: none; mask: none; }
  .menu-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: radial-gradient(circle at 0 50%, var(--band) 13px, transparent 14px) 0 0 / 28px 72px repeat-y; }
  .menu-card__squiggle { display: none; }
  .menu-list { gap: 24px; }
  .dish { padding-bottom: 24px; }
  .dish > div { gap: 12px; max-width: none; }
}
@media (max-width: 900px) {
  .nav, .site-head__cta { display: none; }
  .menu-btn { display: grid; }
  .site-head__in { padding-top: 16px; }
  .dish-grid, .ticket-grid { grid-template-columns: 1fr 1fr; }
  .rail > * { flex-basis: calc((100% - var(--card-gap)) / 2); }
  .story__duo { grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (max-width: 760px) {
  .hero { height: auto; min-height: 760px; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px 20px 24px; }
  .hero::before { inset: 0; background: linear-gradient(0deg, rgba(29, 29, 29, .95) 0%, rgba(29, 29, 29, .85) 45%, rgba(29, 29, 29, .15) 80%); }
  .hero__copy { position: relative; left: auto; top: auto; width: 100%; gap: 24px; }
  .hero__copy .t-h1 { font-size: 46px; }
  .hero__rating { position: relative; left: auto; bottom: auto; margin-top: 28px; align-self: flex-start; }
  .hero__recipe { display: none; }
  .vrule { height: 56px; }
  .story__in { gap: 24px; }
  .story__pair { gap: 10px; }
  .story__duo { grid-template-columns: 1fr; margin-top: 40px; }
  .story__duo img + img { display: none; }
  .menu-card { padding: 32px 22px 24px 40px; }
  .dish { flex-direction: column; gap: 10px; }
  .favs__head { gap: 28px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .tab { flex: none; width: 140px; }
  .dish-grid, .ticket-grid { grid-template-columns: 1fr; }
  .rail > * { flex-basis: 86%; }
  .rail-head { align-items: flex-end; }
  .arrows { gap: 10px; }
  .arrow { width: 52px; height: 52px; }
  .arrow .ic { width: 20px; height: 20px; }
  .note { padding: 36px 30px 32px; }
  .reserve__head { gap: 20px; margin-bottom: 32px; }
  .reserve__stage { height: auto; padding: 160px 0 32px; }
  .book { margin-top: 0; padding: 24px 20px; }
  .field input, .field select { height: 58px; padding: 0 40px 0 16px; }
  .field .ic { right: 16px; }
  .gallery__title { position: relative; left: auto; top: auto; margin: 0 var(--gutter) 24px; font-size: 56px; }
  .gallery__track { height: 128cqw; }
  .g--3 { left: 30cqw; top: 0; width: 70cqw; height: 80cqw; }
  .g--2 { left: 10cqw; top: 26cqw; width: 64cqw; height: 66cqw; }
  .g--1 { left: -6cqw; top: 54cqw; width: 66cqw; height: 72cqw; }
  .g--4 { left: 104cqw; top: 20cqw; width: 70cqw; height: 84cqw; }
  .g--5 { left: 180cqw; top: 4cqw; width: 70cqw; height: 90cqw; }
  .drag { left: 52cqw; top: 46cqw; width: 104px; gap: 6px; font-size: 18px; }
  .site-foot { padding-top: 56px; }
  .foot__grid { grid-template-columns: 1fr; margin-top: 40px; }
  .foot__col { padding: 4px 20px 20px; border-bottom: 1px solid var(--line-2); }
  .foot__col:last-child { border-bottom: 0; }
  .foot__h { font-size: 24px; }
  .foot__col a, .foot__col p { font-size: 18px; }
  .socials a { width: 44px; height: 44px; }
}

/* ── Shared inner-page blocks ── */
/* PAGE HERO (inner pages): full-bleed photo, bottom scrim, eyebrow + caps H1. --center = centred at the bottom (about), default = bottom-left (menu) */
.phero { position: relative; height: clamp(560px, 61vw, 880px); overflow: hidden; color: var(--on-dark); background: var(--shade); display: flex; align-items: flex-end; --hx: max(20px, (100% - var(--wide)) / 2); }
.phero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero::before { content: ""; position: absolute; inset: auto 0 0 0; height: 72%; background: linear-gradient(0deg, rgba(29, 29, 29, .88), rgba(29, 29, 29, 0)); mix-blend-mode: multiply; z-index: 1; }
.phero::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; background: linear-gradient(180deg, rgba(29, 29, 29, .6), rgba(29, 29, 29, 0)); mix-blend-mode: multiply; z-index: 1; }
.phero__copy { position: relative; z-index: 2; display: grid; gap: 28px; padding: 0 var(--hx) 72px; max-width: calc(760px + var(--hx)); }
.phero__eyebrow { font: 600 20px/1.52 var(--font); text-transform: uppercase; color: var(--on-dark); }
.phero .t-h1 { color: var(--on-dark); }
.phero--center .phero__copy { margin: 0 auto; max-width: 680px; padding-inline: 20px; text-align: center; justify-items: center; gap: 40px; }

/* LOCATIONS: forest band (default) or paper (.locs--paper); address boxes outlined; photo collage at the bottom */
.locs { margin-top: var(--section); background: var(--band); color: var(--on-dark); padding-top: 120px; overflow: hidden; }
.locs__head { width: min(774px, 100% - 2 * var(--gutter)); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.locs__head .t-h2 { color: var(--on-dark); max-width: 728px; margin-bottom: 16px; }
.locs__boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; text-align: left; }
.loc { font-style: normal; border: 1px solid var(--on-dark); padding: 24px 24px 24px 28px; display: grid; gap: 24px; align-content: start; }
.loc .t-h4 { color: var(--on-dark); padding-bottom: 24px; border-bottom: 1px solid currentColor; }
.loc__body { display: grid; gap: 8px; }
.loc__body p { font: 400 18px/1.52 var(--font); color: var(--on-photo); margin-bottom: 8px; }
.loc__body a { display: inline-flex; align-items: center; gap: 8px; font: 400 16px/1.52 var(--font); color: var(--on-dark-2); transition: color .3s var(--ease); }
.loc__body a:hover { color: var(--on-dark); }
.loc__body .ic { width: 18px; height: 18px; color: var(--zest); }
.locs__photos { position: relative; height: 54.3vw; max-height: 782px; margin-top: 80px; container-type: inline-size; }
.locs__ph { position: absolute; object-fit: cover; }
.locs__ph--l { left: 0; top: 7.08cqw; width: 38.89cqw; height: 45.83cqw; }
.locs__ph--r { right: -1.39cqw; top: 7.08cqw; width: 38.89cqw; height: 45.83cqw; }
.locs__ph--m { left: calc(50% - 19.44cqw); top: 0; width: 41.67cqw; height: 47.22cqw; z-index: 1; }
.locs--paper { background: transparent; color: var(--text); }
.locs--paper .locs__head .t-h2, .locs--paper .loc .t-h4 { color: var(--text); }
.locs--paper .loc { border-color: var(--text); }
.locs--paper .loc__body p { color: var(--text-2); }
.locs--paper .loc__body a { color: var(--text-2); }
.locs--paper .loc__body a:hover { color: var(--text); }
.locs--paper .loc__body .ic { color: var(--accent); }
.events--paper { background: transparent; padding-block: 0; --notch: var(--bg); }
.events--paper .events__title { color: var(--text); }
@media (max-width: 760px) {
  .phero { height: auto; min-height: 520px; }
  .phero__copy { padding-bottom: 40px; gap: 20px; }
  .phero__eyebrow { font-size: 16px; }
  .phero--center .phero__copy { gap: 24px; }
  .locs { padding-top: 72px; }
  .locs__boxes { grid-template-columns: 1fr; }
  .locs__photos { height: 120cqw; margin-top: 48px; }
  .locs__ph--l { left: -4cqw; top: 40cqw; width: 56cqw; height: 72cqw; }
  .locs__ph--m { left: 22cqw; top: 0; width: 56cqw; height: 66cqw; }
  .locs__ph--r { right: -4cqw; top: 44cqw; width: 52cqw; height: 70cqw; }
}

/* ───────── About ───────── */
/* Fenzo · About page parts (prefix ab-). Tokens only. */

/* STORY — centred head, two photos, lead, signature + founder; then the dark promise photo and two tall photos */
.ab-story { padding-top: var(--section); }
.ab-story__in { width: min(1072px, 100% - 2 * var(--gutter)); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; }
.ab-story__head { width: min(728px, 100%); display: flex; flex-direction: column; align-items: center; gap: 32px; }
.ab-story__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
.ab-story__pair img { width: 100%; aspect-ratio: 524 / 340; object-fit: cover; }
.ab-story__words { width: min(504px, 100%); display: flex; flex-direction: column; align-items: center; gap: 52px; }
.ab-founder { width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; gap: 24px; }
.ab-founder__sign { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ab-sign { width: 236px; height: auto; color: var(--text); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ab-founder__rule { display: block; width: min(340px, 100%); height: 1px; background: var(--text); }
.ab-founder__img { width: 80px; height: 80px; border-radius: var(--r-pill); object-fit: cover; }
.ab-founder__txt { display: grid; gap: 12px; margin-top: -4px; }
.ab-founder__role { font: 400 16px/1.52 var(--font); color: var(--text-2); }

.ab-promise { position: relative; margin-top: 60px; height: clamp(560px, 58.33vw, 840px); overflow: hidden; background: var(--shade); display: flex; align-items: flex-end; justify-content: center; }
.ab-promise__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ab-promise::before { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(0deg, var(--shade) 0%, rgba(29, 29, 29, .82) 45%, rgba(29, 29, 29, 0) 100%); z-index: 1; }
.ab-promise__list { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 264px); gap: 72px; padding: 0 var(--gutter) 70px; }
.ab-promise__item { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.ab-promise__ic { display: grid; place-items: center; width: 72px; height: 72px; background: var(--accent); color: var(--on-accent); }
.ab-promise__ic .ic { width: 40px; height: 40px; stroke-width: 1.5; }
.ab-promise__item .t-h4 { color: var(--on-dark); line-height: 1.3; }

.ab-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.ab-duo img { width: 100%; aspect-ratio: 708 / 740; object-fit: cover; }
.ab-duo img:first-child { object-position: 50% 62%; }

/* TEAM — portrait cards; social squares rise in on hover / keyboard focus */
.ab-person { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ab-person__ph { position: relative; width: 100%; aspect-ratio: 413 / 450; overflow: hidden; background: var(--shade); margin-bottom: 28px; }
.ab-person__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 1s var(--ease); }
.ab-person:hover .ab-person__ph img { transform: scale(1.03); }
.ab-person__social { position: absolute; left: 50%; bottom: 24px; display: flex; gap: 7px; transform: translate(-50%, 12px); opacity: 0; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.ab-person:hover .ab-person__social, .ab-person__social:focus-within { opacity: 1; transform: translate(-50%, 0); }
.ab-person__social a { display: grid; place-items: center; width: 48px; height: 48px; background: var(--surface); color: var(--text); transition: background-color .3s var(--ease), color .3s var(--ease); }
.ab-person__social a .ic { width: 18px; height: 18px; }
.ab-person__social a.is-on { background: var(--accent); color: var(--on-accent); }
.ab-person__social a:hover { background: var(--accent); color: var(--on-accent); }
.ab-person__social a.is-on:hover { background: var(--accent-deep); }
.ab-person .t-h3 { margin-bottom: 14px; }
.ab-person__role { font: 400 18px/1.52 var(--font); color: var(--text-2); }
@media (hover: none) { .ab-person__social { opacity: 1; transform: translate(-50%, 0); } }
.static .ab-person__social { opacity: 1; transform: translate(-50%, 0); }
.ab-team .rail-head .t-h2 { max-width: 565px; }

@media (max-width: 1200px) {
  .ab-promise__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; width: 100%; max-width: 1200px; }
}
@media (max-width: 900px) {
  .ab-promise { height: auto; min-height: 640px; }
  .ab-promise::before { height: 70%; }
  .ab-promise__list { grid-template-columns: 1fr 1fr; gap: 40px 24px; padding-top: 240px; }
}
@media (max-width: 760px) {
  .ab-story__in { gap: 28px; }
  .ab-story__head { gap: 24px; }
  .ab-story__pair { grid-template-columns: 1fr; gap: 16px; }
  .ab-story__words { gap: 40px; }
  .ab-sign { width: 200px; }
  .ab-promise { margin-top: 48px; min-height: 620px; }
  .ab-promise__list { gap: 32px 16px; padding-bottom: 48px; }
  .ab-promise__item { gap: 20px; }
  .ab-promise__ic { width: 60px; height: 60px; }
  .ab-promise__ic .ic { width: 32px; height: 32px; }
  .ab-duo { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
  .ab-duo img { aspect-ratio: 4 / 5; }
  .ab-person__ph { margin-bottom: 20px; }
  .ab-person__role { font-size: 16px; }
}

/* ───────── Menu ───────── */
/* MENU page (prefix mn-) */

/* About: centred head + edge-bleeding photo strip (narrow | wide | narrow) */
.mn-about { margin-top: 120px; overflow: hidden; }
.mn-about__in { width: min(728px, 100% - 2 * var(--gutter)); margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; }
.mn-about__in .btn { margin-top: 8px; }
.mn-strip { display: flex; justify-content: center; gap: 24px; margin-top: 60px; }
.mn-strip img { flex: 0 0 59.72vw; aspect-ratio: 860 / 570; object-fit: cover; min-width: 0; }

/* Category heads on paper */
.mn-cat { width: min(var(--container), 100% - 2 * var(--gutter)); margin: var(--section) auto 0; }
.mn-cat__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin-bottom: 40px; }
.mn-cat__head .t-body { max-width: 440px; }

/* Forest band (the source's menu section) */
.mn-band { margin-top: var(--section); padding: 120px var(--gutter); background: var(--band); color: var(--on-dark); }
.mn-band__title { color: var(--on-dark); text-align: center; margin: 0 auto; }
.mn-band__sub { margin: 16px auto var(--head-gap); text-align: center; font: 600 16px/1.52 var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--on-dark-2); }
.mn-band .mn-grid { max-width: var(--container); margin: 0 auto; }

/* Hairline-boxed grid of dish cells */
.mn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--on-dark); --mn-line: var(--line-2); }
.mn-cell { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 39px; border-bottom: 1px solid var(--mn-line); }
.mn-cell:nth-child(odd) { border-right: 1px solid var(--mn-line); }
.mn-cell:nth-last-child(-n + 2):nth-child(odd), .mn-cell:last-child { border-bottom: 0; }
.mn-cell__ph { flex: 0 0 auto; width: 232px; height: 256px; object-fit: cover; }
.mn-cell__txt { flex: 0 1 300px; display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
.mn-cell__name { font: 400 28px/1.2 var(--font-display); letter-spacing: -.06em; text-transform: uppercase; color: var(--on-dark); text-wrap: balance; }
.mn-cell__desc { font: 400 16px/1.52 var(--font); color: var(--on-dark-2); padding-bottom: 24px; border-bottom: 1px solid var(--mn-line); }
.mn-cell__price { font: 400 36px/1.2 var(--font-display); letter-spacing: -.06em; color: var(--zest); white-space: nowrap; }
.mn-cell--text { align-items: flex-start; padding-block: 32px; }
.mn-cell--text .mn-cell__txt { flex: 1 1 auto; }

/* Paper version: green hairlines, ink headings, terracotta prices */
.mn-grid--paper { border-color: var(--line); --mn-line: var(--line); }
.mn-grid--paper .mn-cell__name { color: var(--text); }
.mn-grid--paper .mn-cell__desc { color: var(--text-2); }
.mn-grid--paper .mn-cell__price { color: var(--accent); font-size: 28px; }

/* Locations follow the paper menu: keep the source gap */
.menu .locs--paper { margin-top: var(--section); padding-top: 0; }

@media (max-width: 1200px) {
  .mn-cell { padding: 28px; gap: 24px; }
  .mn-cell__ph { width: 180px; height: 200px; }
  .mn-cell__txt { flex: 1 1 auto; }
  .mn-cell__name { font-size: 24px; }
  .mn-cell__price { font-size: 30px; }
}
@media (max-width: 900px) {
  .mn-grid { grid-template-columns: 1fr; }
  .mn-cell:nth-child(odd) { border-right: 0; }
  .mn-cell:nth-last-child(-n + 2):nth-child(odd) { border-bottom: 1px solid var(--mn-line); }
  .mn-cell:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
  .mn-about { margin-top: 80px; }
  .mn-strip { gap: 12px; margin-top: 40px; }
  .mn-strip img { flex-basis: 78vw; aspect-ratio: 4 / 3; }
  .mn-band { padding: 80px var(--gutter); }
  .mn-cat__head { margin-bottom: 28px; }
  .mn-cell { flex-direction: column; align-items: stretch; padding: 20px; gap: 20px; }
  .mn-cell__ph { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .mn-cell--text { padding-block: 24px; }
  .mn-cell__name { font-size: 22px; }
  .mn-cell__price { font-size: 28px; }
  .mn-cell__txt { gap: 16px; }
  .mn-cell__desc { padding-bottom: 16px; }
}

/* ───────── Resv ───────── */
/* Fenzo · reservation + 404 (prefix rv-) */

/* RESERVATION: paper head, full-bleed photo stage with the source's 600px form card */
.rv-head { width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 72px 0 60px; text-align: center; }
.rv-head .t-h1 { color: var(--text); }
.rv-stage { position: relative; height: min(58.4vw, 841px); min-height: 680px; overflow: hidden; display: grid; place-items: center; }
.rv-stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.rv-book { width: min(600px, 100% - 2 * var(--gutter)); padding: 40px; margin-top: 0; gap: 28px; }
.rv-book .book__fields { margin-bottom: -4px; }

/* CONTACT: compact row of square outlined boxes, caps H4 titles */
.rv-contact { width: min(var(--container), 100% - 2 * var(--gutter)); margin: var(--section) auto 0; display: grid; gap: var(--head-gap); }
.rv-contact .t-h2 { text-align: center; color: var(--text); }
.rv-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--card-gap); }
.rv-box { font-style: normal; border: 1px solid var(--text); padding: 24px 24px 28px; display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: 24px; align-content: start; }
.rv-box .t-h4 { color: var(--text); padding-bottom: 24px; border-bottom: 1px solid currentColor; text-wrap: balance; }
.rv-box__body { display: grid; gap: 8px; }
.rv-box__body p { font: 400 16px/1.52 var(--font); color: var(--text-2); margin-bottom: 8px; }
.rv-box__body a { display: inline-flex; align-items: center; gap: 8px; font: 400 16px/1.52 var(--font); color: var(--text-2); transition: color .3s var(--ease); }
.rv-box__body a:hover { color: var(--text); }
.rv-box__body .ic, .rv-box__body svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.rv-hours { display: grid; gap: 12px; }
.rv-hours div { display: flex; justify-content: space-between; gap: 12px; }
.rv-hours dt { font: 400 16px/1.52 var(--font); color: var(--text); }
.rv-hours dd { margin: 0; font: 400 16px/1.52 var(--font); color: var(--text-2); white-space: nowrap; }

/* 404: story stack with one landscape photo and a button pair */
.rv-nf .t-h1 { color: var(--text); max-width: 740px; }
.rv-nf__ph { width: 100%; aspect-ratio: 740 / 440; object-fit: cover; object-position: 50% 45%; }
.rv-btn-ink { color: var(--text); border-color: var(--text); }
.rv-btn-ink:hover { background: var(--text); border-color: var(--text); color: var(--on-dark); }
.rv-nf__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

@media (max-width: 1100px) {
  .rv-boxes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .rv-head { padding: 40px 0 32px; }
  .rv-stage { height: auto; min-height: 0; padding: 260px 0 140px; }
  .rv-book { padding: 24px 20px; gap: 24px; }
  .rv-boxes { grid-template-columns: 1fr; }
  .rv-box { padding: 20px; gap: 20px; }
  .rv-box .t-h4 { padding-bottom: 20px; }
  .rv-nf__btns { flex-direction: column; width: 100%; }
  .rv-nf__btns .btn { width: 100%; }
}

/* ───────── Sg ───────── */
/* Fenzo — style guide page (sg-). Tokens only; every piece below is the real class, labelled. */
.sg code, .sg-code { font: 400 13px/1.45 var(--mono); color: var(--text-2); }

/* ── Overview (first screen = store image): intro, then a board that steps from paper onto a forest strip ── */
.sg-top { position: relative; padding-top: 20px; overflow: hidden; }
.sg-top__fork { position: absolute; z-index: 0; top: 50%; left: 45%; width: 92px; height: 330px; transform: translate(-50%, -50%) rotate(-112deg); pointer-events: none; }
.sg-intro { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: end; gap: 48px; margin-bottom: 32px; }
.sg-intro__name { display: grid; gap: 10px; }
.sg-intro__name .t-h1 { font-size: clamp(64px, 7.5vw, 108px); line-height: 1; }
.sg-intro__side { display: grid; gap: 24px; justify-items: start; }
.sg-intro__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sg-intro__row .arrows { margin-left: auto; }

.sg-board { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 64px; gap: var(--card-gap); grid-template-areas: "type pal pal side" "note green recipe side" "pad pad pad pad"; }
.sg-strip { grid-row: 2 / -1; grid-column: 1 / -1; margin: -88px calc(50% - 50vw) 0; background: var(--band); position: relative; z-index: -1; overflow: hidden; }
.sg-strip__squiggle { position: absolute; left: calc(50% - min(644px, 50% - var(--gutter)) - 130px); top: 70px; width: 430px; transform: rotate(-14deg); }
.sg-type-card { grid-area: type; }
.sg-pal-card { grid-area: pal; }
.sg-side { grid-area: side; display: flex; flex-direction: column; justify-content: space-between; gap: var(--card-gap); }
.sg-note { grid-area: note; align-self: center; padding: 36px 30px 28px 46px; }
.sg-note blockquote { font-size: 22px; }
.sg-note .quote-mark { width: 38px; height: 37px; margin-bottom: 8px; }
.sg-green { grid-area: green; align-self: center; display: grid; gap: 16px; justify-items: start; color: var(--on-dark); }
.sg-recipe { grid-area: recipe; }
.sg-pad { grid-area: pad; }
.sg-recipe.recipe { aspect-ratio: auto; height: 100%; min-height: 350px; }

.sg-card { background: var(--surface); padding: 24px; display: grid; gap: 16px; align-content: start; }
.sg-card__k { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 600 14px/1.4 var(--font); color: var(--text); text-transform: uppercase; letter-spacing: .04em; }
.sg-card__k code { text-transform: none; letter-spacing: 0; }
.sg-aa { display: flex; align-items: flex-end; gap: 20px; }
.sg-aa b { font: 400 96px/.9 var(--font-display); letter-spacing: -.06em; color: var(--text); }
.sg-aa i { font: 600 72px/.9 var(--font); font-style: normal; letter-spacing: -.03em; color: var(--text-2); }
.sg-fams { display: grid; gap: 8px; }
.sg-fams li { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.sg-fams strong { font: 400 22px/1.2 var(--font-display); letter-spacing: -.06em; text-transform: uppercase; color: var(--text); }
.sg-fams strong.sg-sans { font: 600 18px/1.3 var(--font); letter-spacing: 0; text-transform: none; }
.sg-fams span { font: 400 14px/1.45 var(--font); color: var(--text-2); }

.sg-pal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sg-pal li { display: grid; gap: 6px; font: 600 13px/1.3 var(--font); color: var(--text); }
.sg-pal i { display: block; height: 46px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(71, 91, 68, .22); }
.sg-pal small { font: 400 12px/1.3 var(--mono); color: var(--text-2); }
.sg-pal__note { font: 400 14px/1.5 var(--font); color: var(--text-2); }

.sg-chip { background: var(--surface); padding: 18px; display: grid; gap: 12px; color: var(--text-2); }
.sg-chip__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sg-chip__top img { width: 44px; height: 32px; }
.sg-side .dish-card { flex: 1; }
.sg-side .dish-card img { flex: 1 1 0; min-height: 200px; aspect-ratio: auto; }
.sg-side .dish-card .t-h4 { margin: 12px 0 20px; }

.sg-onband { font: 400 13px/1.45 var(--mono); color: var(--on-dark-2); }
.sg-green .sg-onband { margin-top: 2px; }

/* ── Section scaffolding ── */
.sg-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 48px; align-items: end; margin-bottom: var(--head-gap); }
.sg-head .t-h2 { max-width: 640px; }
.sg-sub { display: flex; align-items: center; gap: 16px; margin: 56px 0 24px; font: 500 14px/1.4 var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.sg-sub::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.sg-head + .sg-sub { margin-top: 0; }
.sg-band { margin-top: var(--section); padding-block: var(--section); background: var(--band); color: var(--on-dark); }
.sg-band .t-h2 { color: var(--on-dark); }
.sg-band .t-lead { color: var(--on-dark-2); }
.sg-band .sg-sub { color: var(--on-dark); }
.sg-band .sg-sub::after { background: var(--line-dark); }

/* Colour swatches */
.sg-grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--card-gap); }
.sg-grid--3 { --n: 3; } .sg-grid--5 { --n: 5; } .sg-grid--6 { --n: 6; } .sg-grid--2 { --n: 2; }
.sg-sw { background: var(--surface); display: grid; align-content: start; }
.sg-sw__c { display: block; height: 128px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(71, 91, 68, .18); }
.sg-sw__c--on { display: grid; place-items: center; font: 400 28px/1 var(--font-display); letter-spacing: -.06em; }
.sg-sw__cap { padding: 16px 18px 20px; display: grid; gap: 4px; }
.sg-sw__cap b { font: 600 16px/1.4 var(--font); color: var(--text); }
.sg-sw__cap span { font: 400 14px/1.5 var(--font); color: var(--text-2); }

/* Typography rows */
.sg-types { display: grid; border-top: 1px solid var(--line); }
.sg-trow { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line-2); }
.sg-trow__meta { display: grid; gap: 4px; }
.sg-trow__meta b { font: 600 16px/1.4 var(--font); color: var(--text); }
.sg-trow__meta span { font: 400 14px/1.5 var(--font); color: var(--text-2); }
.sg-trow .phero__eyebrow { color: var(--text); }
.sg-trow .sg-navlink { font: 400 16px/1.52 var(--font); text-transform: uppercase; color: var(--text); }
.sg-trow .t-lead, .sg-trow .t-body, .sg-trow .t-small { max-width: 620px; }
.sg-trow .t-small { color: var(--text-2); }
.sg-trow .t-label { color: var(--text-2); }

/* Shape + space */
.sg-shape { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.sg-tile { background: var(--surface); padding: 28px; display: grid; gap: 20px; align-content: start; }
.sg-tile__k { font: 600 16px/1.4 var(--font); color: var(--text); }
.sg-tile p { font: 400 14px/1.5 var(--font); color: var(--text-2); }
.sg-demo { height: 150px; display: grid; place-items: center; background: var(--bg); position: relative; overflow: hidden; }
.sg-sq { width: 96px; height: 96px; background: var(--accent); }
.sg-pill { width: 96px; height: 96px; border-radius: var(--r-pill); border: 1.13px solid var(--line); display: grid; place-items: center; color: var(--text-2); }
.sg-pill .ic { width: 26px; height: 26px; }
.sg-tilt { width: 120px; height: 92px; background: var(--surface); transform: rotate(var(--tilt)); box-shadow: inset 0 0 0 1px var(--line-2); }
.sg-overlap { position: relative; width: 190px; height: 120px; }
.sg-overlap img { position: absolute; width: 120px; height: 100px; object-fit: cover; }
.sg-overlap img:first-child { left: 0; top: 0; }
.sg-overlap img:last-child { right: 0; bottom: 0; }
.sg-scrim { position: absolute; inset: 0; display: block; background: var(--shade); }
.sg-scrim img { width: 100%; height: 100%; object-fit: cover; }
.sg-scrim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 29, 29, 0) 25%, rgba(29, 29, 29, .85) 100%); mix-blend-mode: multiply; }
.sg-scrim span { position: absolute; z-index: 1; left: 16px; bottom: 12px; font: 400 22px/1.2 var(--font-display); letter-spacing: -.06em; text-transform: uppercase; color: var(--on-dark); }

.sg-space { display: grid; gap: 14px; }
.sg-space li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; }
.sg-space__k { display: grid; gap: 2px; }
.sg-space__k b { font: 600 15px/1.4 var(--font); color: var(--text); }
.sg-bar { height: 14px; width: var(--w); max-width: 100%; background: var(--accent); }
.sg-bar--band { background: var(--band); }
.sg-bar--teal { background: var(--band-2); }

/* Components */
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.sg-item { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.sg-item > .tabs { justify-self: stretch; max-width: 100%; }
.btn.sg-is-hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.sg-pane { padding: 40px; display: grid; gap: 28px; }
.sg-pane--paper { background: var(--surface); }
.sg-pane--teal { background: var(--band-2); color: var(--on-dark); }
.sg-pane--forest { background: var(--band); color: var(--on-dark); }
.sg-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.sg-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }
.sg-photo-btns { position: relative; min-height: 340px; background: var(--shade); color: var(--on-dark); display: flex; align-items: flex-end; overflow: hidden; }
.sg-photo-btns > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-photo-btns::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 29, 29, .1) 0%, rgba(29, 29, 29, .88) 70%, var(--shade) 100%); mix-blend-mode: multiply; }
.sg-photo-btns > div { position: relative; z-index: 1; padding: 32px; display: grid; gap: 14px; justify-items: start; }
.sg-photo-btns .sg-row { gap: 16px; }

.sg-rating { display: inline-grid; gap: 12px; padding: 18px; background: var(--surface); color: var(--text-2); }
.sg-rating .rating__top { display: flex; align-items: center; gap: 6px; }
.sg-rating .stars .ic { width: 18px; height: 18px; }
.sg-menu-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 20px; max-width: 520px; }
.sg-menu-row > div { display: grid; gap: 10px; }
.sg-rule { display: block; width: 100%; max-width: 520px; height: 2px; }

.sg-fields { display: grid; gap: 16px; max-width: 520px; }
.sg-fields .field.sg-is-focus { border-color: var(--accent); }
.sg-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--card-gap); align-items: stretch; }
.sg-formstage { position: relative; min-height: 640px; display: grid; place-items: center; overflow: hidden; padding: 40px 0; }
.sg-formstage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-formstage .book { margin-top: 0; width: min(500px, 100% - 40px); }

.sg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); align-items: start; }
.sg-cards .recipe { aspect-ratio: 413 / 496; }
.sg-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; }
.sg-notes .note { width: 100%; max-width: 412px; }
.sg-subs { display: grid; gap: 14px; max-width: 360px; }
.sg-subs .sub { margin-top: 0; }
.sg-locs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }
.sg-locs .locs--paper { padding: 40px; background: var(--surface); }
.sg-locs .sg-pane--forest .loc, .sg-locs .locs--paper .loc { max-width: 420px; }

/* Doodles + shapes */
.sg-art { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); }
.sg-art figure { background: var(--surface); display: grid; grid-template-rows: 200px auto; }
.sg-art__v { display: grid; place-items: center; padding: 20px; overflow: hidden; }
.sg-art__v--band { background: var(--band); }
.sg-art__v--teal { background: var(--band-2); }
.sg-art__v img { max-height: 160px; max-width: 100%; width: auto; }
.sg-art__v--pair { display: flex; align-items: center; justify-content: center; gap: 28px; }
.sg-art figcaption { padding: 14px 18px 18px; display: grid; gap: 2px; border-top: 1px solid var(--line-2); }
.sg-art figcaption b { font: 600 15px/1.4 var(--font); color: var(--text); }
.sg-fork { height: 220px; transform: rotate(-120deg); }
.sg-disc { position: relative; width: 132px; height: 132px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--accent); }
.sg-disc span { position: relative; display: flex; align-items: center; gap: 8px; font: 400 22px/1 var(--font-display); letter-spacing: -.06em; text-transform: uppercase; color: var(--on-dark); }
.sg-disc .ic { width: 14px; height: 14px; }
.sg-art .logo { color: var(--text); }
.sg-art .logo--lg .mark { width: 72px; height: 54px; }
.sg-scallop { height: 170px; }

/* Icons */
.sg-icons { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.sg-icons li { background: var(--surface); display: grid; justify-items: center; gap: 12px; padding: 22px 8px 16px; color: var(--text); }
.sg-icons .ic { width: 28px; height: 28px; }
.sg-icons code { font-size: 12px; }

/* Photo style */
.sg-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.sg-photos figure { display: grid; gap: 14px; align-content: start; }
.sg-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sg-photos figure:nth-child(1) img, .sg-photos figure:nth-child(5) img { aspect-ratio: 4 / 5; }
.sg-photos figcaption { display: grid; gap: 4px; }
.sg-photos figcaption b { font: 600 16px/1.4 var(--font); color: var(--text); }
.sg-photos figcaption span { font: 400 15px/1.5 var(--font); color: var(--text-2); }

/* Motion */
.sg-motion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.sg-track { position: relative; height: 56px; background: var(--bg); }
.sg-track i { position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; background: var(--accent); animation: sg-glide 3.2s var(--ease-out) infinite alternate; }
.sg-track--ease i { animation-timing-function: var(--ease); background: var(--band); }
.sg-track--zoom { display: grid; place-items: center; overflow: hidden; height: 120px; background: var(--shade); }
.sg-track--zoom img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: sg-zoom 4s var(--ease) infinite alternate; }
@keyframes sg-glide { to { left: calc(100% - 48px); } }
@keyframes sg-zoom { to { transform: scale(1.04); } }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .sg-top__fork { display: none; }
  .sg-icons { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .sg-intro { grid-template-columns: 1fr; gap: 28px; }
  .sg-board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-template-areas: "type type" "pal pal" "note green" "recipe side" "pad pad"; grid-auto-rows: auto; }
  .sg-board > .sg-pad { height: 40px; }
  .sg-strip { grid-row: 3 / -1; margin-top: -40px; }
  .sg-strip__squiggle { display: none; }
  .sg-recipe.recipe { min-height: 0; height: auto; aspect-ratio: 413 / 496; align-self: start; }
  .sg-side { justify-content: flex-start; }
  .sg-shape { grid-template-columns: 1fr 1fr; }
  .sg-art { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-head { grid-template-columns: 1fr; gap: 20px; }
  .sg-grid--5, .sg-grid--6 { --n: 3; }
}
@media (max-width: 900px) {
  .sg-cards, .sg-trio { grid-template-columns: 1fr 1fr; }
  .sg-motion { grid-template-columns: minmax(0, 1fr); }
  .sg-form, .sg-locs, .sg-notes { grid-template-columns: 1fr; }
  .sg-trow { grid-template-columns: 1fr; gap: 12px; }
  .sg-grid { --n: 2; }
  .sg-grid--5, .sg-grid--6 { --n: 2; }
  .sg-photos { grid-template-columns: 1fr 1fr; }
  .sg-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sg-top { padding-top: 24px; }
  .sg-intro__row .arrows { margin-left: 0; }
  .sg-board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "type" "pal" "note" "green" "recipe" "side" "pad"; }
  .sg-strip { grid-row: 3 / -1; margin-top: -32px; }
  .sg-pal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-aa b { font-size: 88px; }
  .sg-aa i { font-size: 52px; }
  .sg-note { justify-self: center; width: 100%; max-width: 380px; }
  .sg-cards, .sg-trio, .sg-duo, .sg-shape, .sg-motion, .sg-art, .sg-photos { grid-template-columns: minmax(0, 1fr); }
  .sg-pane { padding: 24px 20px; }
  .sg-photo-btns > div { padding: 24px 20px; }
  .sg-space li { grid-template-columns: 1fr; gap: 8px; }
  .sg-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-locs .locs--paper { padding: 24px 20px; }
  .sg-formstage { min-height: 0; padding: 120px 0 24px; }
}

/* ───────── Variants ───────── */
/* Fenzo — section variants library (pages/variants.html). Prefix v-. Tokens only, no url(). */

/* ── Intro + jump list ── */
.v-intro { padding-block: 72px 24px; }
.v-intro__in { display: grid; gap: 24px; justify-items: start; }
.v-intro__eyebrow { font: 600 16px/1.52 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.v-intro .t-lead { max-width: 640px; }
.v-jump { display: grid; gap: 10px; width: 100%; margin-top: 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.v-jump li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v-jump span { width: 140px; font: 600 14px/1.5 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.v-jump a { padding: 4px 12px; background: var(--surface); border: 1px solid var(--line); font: 400 13px/1.5 var(--mono); color: var(--text); transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.v-jump a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── Variant wrapper + label ── */
.v-item { padding-top: 120px; scroll-margin-top: 16px; }
.v-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 48px; padding-bottom: 20px; border-bottom: 1px dashed var(--line); }
.v-label__name { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.5 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.v-label__name::before { content: ""; width: 8px; height: 8px; background: var(--accent); }
.v-label__cls { font: 400 12px/1.5 var(--mono); color: var(--text-2); overflow-wrap: anywhere; }
.v-cap { flex: 0 0 100%; padding-right: max(0px, 100% - 540px); font: 400 15px/1.5 var(--font); color: var(--text-2); }
/* shared blocks start flush inside a variant */
.v-item .sec, .v-item .stage, .v-item .events, .v-item .guests, .v-item .gallery, .v-item .locs, .v-item .site-foot, .v-item .story { margin-top: 0; }
.v-item .story { padding-top: 0; }
.v-item .events--paper { padding-block: 0; }

/* ── Headers (static bars) ── */
.v-hstage { position: relative; overflow: hidden; }
.v-hstage--photo { height: 240px; background: var(--shade); color: var(--on-dark); }
.v-hstage--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.v-hstage--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 29, 29, .82), rgba(29, 29, 29, .35)); }
.v-hstage--photo .v-hbar { position: relative; z-index: 1; }
.v-hstage--paper { color: var(--text); padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.v-hstage--forest { background: var(--band); color: var(--on-dark); padding-bottom: 24px; }
.v-hbar.site-head__in { padding-top: 24px; }
.v-hbar .nav > a { color: inherit; }
.v-hbar .menu-btn { color: inherit; }
.v-hbar--paper .logo span { color: var(--text); }
.v-hbar--paper .nav > a { color: var(--text); }
.v-hsplit { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.v-hsplit__l, .v-hsplit__r { display: flex; align-items: center; gap: 32px; }
.v-hsplit__r { justify-content: flex-end; }
.v-hsplit a:not(.btn):not(.logo) { font: 400 16px/1.52 var(--font); text-transform: uppercase; color: var(--on-dark); transition: color .3s var(--ease); }
.v-hsplit a:not(.btn):not(.logo):hover { color: var(--zest); }
.v-hsplit .logo { flex-direction: column; gap: 4px; font-size: 26px; }
.v-strip { background: var(--band-2); color: var(--on-dark-2); }
.v-strip__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; font: 400 14px/1.5 var(--font); }
.v-strip__in p { display: inline-flex; align-items: center; gap: 8px; }
.v-strip__in .ic { width: 16px; height: 16px; color: var(--zest); }
.v-strip__in a { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark); }
.v-strip__set { display: flex; gap: 28px; }

/* ── Hero A (gold hero, compact) ── */
.v-compact.hero { height: clamp(680px, 54vw, 800px); }
.v-compact .hero__copy { top: 13%; }

/* ── Hero B (centred photo hero) ── */
.v-heroB.phero { height: clamp(560px, 50vw, 720px); }
.v-heroB .phero__copy { padding-bottom: 80px; }
.v-heroB::before { height: 100%; background: linear-gradient(0deg, rgba(29, 29, 29, .9) 0%, rgba(29, 29, 29, .6) 65%, rgba(29, 29, 29, .15) 100%); }

/* ── Hero C (split paper + tall photo + doodle) ── */
.v-heroC { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; }
.v-heroC__copy { display: grid; gap: 28px; justify-items: start; }
.v-heroC__copy .t-lead { max-width: 480px; }
.v-heroC__eyebrow, .v-kicker { font: 600 16px/1.52 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.v-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.v-btn-ink { color: var(--text); border-color: var(--text); }
.v-btn-ink:hover { background: var(--text); border-color: var(--text); color: var(--on-dark); }
.v-rh { flex-wrap: wrap; }
.v-heroC__media { position: relative; }
.v-heroC__media > img:first-child { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.v-heroC__doodle { position: absolute; left: -72px; bottom: -36px; width: 96px; height: auto; transform: rotate(-150deg); pointer-events: none; }

/* ── Hero D (statement over a tilted stage) ── */
.v-heroD__head { display: grid; justify-items: center; gap: 28px; text-align: center; }
.v-heroD__head .t-h1 { font-size: clamp(54px, 8.4vw, 120px); max-width: 1100px; }
.v-heroD__head .t-lead { max-width: 520px; }
.v-heroD__band { position: relative; margin-top: 64px; height: clamp(520px, 44vw, 640px); background: var(--band); overflow: hidden; }
.v-heroD__ph { position: absolute; overflow: hidden; transform: rotate(var(--tilt)); }
.v-heroD__ph img { width: 100%; height: 100%; object-fit: cover; }
.v-heroD__ph--a { left: 4%; top: 64px; width: 40%; height: 78%; }
.v-heroD__ph--b { right: 3%; top: -40px; width: 30%; height: 64%; }
.v-heroD__card { position: absolute; left: 47%; top: 110px; width: min(400px, 34%); padding: 32px; background: var(--surface); transform: rotate(var(--tilt)); display: grid; gap: 18px; }
.v-heroD__squiggle { position: absolute; left: 70%; bottom: -20px; width: 260px; height: auto; transform: rotate(20deg); }
.v-mini { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.v-mini:last-of-type { border-bottom: 0; padding-bottom: 0; }
.v-mini .t-h4 { font-size: 22px; }
.v-mini .price { font-size: 22px; }

/* ── Features B (icon squares over a dark photo) ── */
.v-head { text-align: center; max-width: 640px; margin: 0 auto var(--head-gap); display: grid; gap: 24px; justify-items: center; }
.v-icons { position: relative; height: clamp(480px, 42vw, 620px); overflow: hidden; background: var(--shade); display: flex; align-items: flex-end; }
.v-icons > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-icons::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, rgba(29, 29, 29, .95) 0%, rgba(29, 29, 29, .88) 30%, rgba(29, 29, 29, .45) 58%, rgba(29, 29, 29, 0) 85%); }
.v-icons__row { position: relative; z-index: 2; width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto 72px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.v-icons__it { display: grid; justify-items: center; gap: 28px; text-align: center; }
.v-icons__sq { display: grid; place-items: center; width: 72px; height: 72px; background: var(--accent); color: var(--on-accent); }
.v-icons__sq .ic { width: 34px; height: 34px; }
.v-icons__it .t-h4 { color: var(--on-dark); }

/* ── Features C (alternating rows) ── */
.v-rows { display: grid; gap: 96px; }
.v-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }
.v-row > img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.v-row--flip > img { order: 2; }
.v-row__txt { display: grid; gap: 24px; justify-items: start; max-width: 520px; }

/* ── Menu A (the stage, scaled to the container) ── */
.v-stage .stage__band { width: min(1200px, 100%); margin-inline: auto; }
@media (min-width: 1101px) { .v-stage .stage__band { height: auto; aspect-ratio: 1440 / 1180; } }

/* ── Menu B (forest hairline grid, lemon prices) ── */
.v-mb { background: var(--band); padding-block: 112px; }
.v-mb .t-h2 { color: var(--on-dark); text-align: center; margin-bottom: var(--head-gap); }
.v-mgrid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.v-mcell { display: flex; gap: 28px; align-items: center; padding: 28px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.v-mcell > img { width: 177px; height: 177px; flex: none; object-fit: cover; }
.v-mcell__txt { display: grid; gap: 14px; flex: 1; }
.v-mcell__txt .t-h4 { color: var(--on-dark); }
.v-mcell__txt p { font: 400 16px/1.52 var(--font); color: var(--on-dark-2); padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.v-mcell .price { color: var(--zest); }

/* ── Social proof B (one big quote + rating row) ── */
.v-quote { display: grid; justify-items: center; gap: 28px; text-align: center; max-width: 960px; margin: 0 auto; }
.v-quote__mark { width: 49px; height: 48px; }
.v-quote blockquote { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 52px); line-height: 1.18; letter-spacing: -.06em; text-transform: uppercase; color: var(--text); text-wrap: balance; }
.v-quote figcaption { display: grid; justify-items: center; gap: 10px; }
.v-quote__name { font: 500 18px/1.4 var(--font); color: var(--text-2); }
.v-rates { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.v-rate { display: grid; justify-items: center; gap: 8px; padding: 32px 16px; text-align: center; }
.v-rate + .v-rate { border-left: 1px solid var(--line); }
.v-rate__n { font: 400 56px/1 var(--font-display); letter-spacing: -.06em; color: var(--text); }
.v-rate p { font: 400 16px/1.52 var(--font); color: var(--text-2); }
.v-rate .stars .ic { width: 16px; height: 16px; }

/* ── Pricing A (set-menu cards) ── */
.v-sets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); align-items: stretch; }
.v-set { background: var(--surface); display: flex; flex-direction: column; }
.v-set > img { width: 100%; aspect-ratio: 413 / 300; object-fit: cover; }
.v-set__body { flex: 1; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.v-set__body > p { font: 400 16px/1.52 var(--font); color: var(--text-2); }
.v-set__list { display: grid; }
.v-set__list li { padding: 12px 0; border-bottom: 1px solid var(--line); font: 400 16px/1.52 var(--font); color: var(--text-2); }
.v-set__list li:first-child { border-top: 1px solid var(--line); }
.v-set__price { display: flex; align-items: baseline; gap: 10px; margin-top: auto; }
.v-set__price span:last-child { font: 400 16px/1.52 var(--font); color: var(--text-2); }
.v-set--forest { background: var(--band); }
.v-set--forest .t-h3, .v-set--forest .t-h4 { color: var(--on-dark); }
.v-set--forest .v-set__body > p, .v-set--forest .v-set__list li, .v-set--forest .v-set__price span:last-child { color: var(--on-dark-2); }
.v-set--forest .v-set__list li { border-color: var(--line-2); }
.v-set--forest .price { color: var(--zest); }

/* ── Pricing B (tasting-menu table) ── */
.v-tbl { width: 100%; border-collapse: collapse; }
.v-tbl th { padding: 0 16px 16px 0; text-align: left; font: 600 14px/1.5 var(--font); text-transform: uppercase; color: var(--text-2); border-bottom: 1px solid var(--text); }
.v-tbl td { padding: 22px 16px 22px 0; vertical-align: top; border-bottom: 1px solid var(--line); font: 400 16px/1.52 var(--font); color: var(--text-2); }
.v-tbl td:first-child { width: 22%; }
.v-tbl td:last-child, .v-tbl th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.v-tbl .t-h4 { display: block; color: var(--text); }
.v-tbl__wine { width: 26%; }
.v-tbl tfoot td { border-bottom: 0; padding-top: 28px; }
.v-tbl tfoot .price { font-size: 36px; }

/* ── CTA A (compact reserve stage) ── */
.v-item .reserve__stage { height: 760px; }
.v-item .reserve__stage .book { margin-top: 0; }

/* ── CTA B (forest band, centred) ── */
.v-ctaB { position: relative; overflow: hidden; background: var(--band); padding-block: 120px; text-align: center; }
.v-ctaB__in { position: relative; z-index: 1; width: min(760px, 100% - 2 * var(--gutter)); margin: 0 auto; display: grid; justify-items: center; gap: 28px; }
.v-ctaB .t-h2 { color: var(--on-dark); }
.v-ctaB .t-lead { color: var(--on-dark-2); max-width: 520px; }
.v-ctaB__sq { position: absolute; right: -40px; top: -30px; width: 320px; height: auto; transform: rotate(160deg); pointer-events: none; }

/* ── CTA C (split: photo left, form right) ── */
.v-ctaC { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.v-ctaC > img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; }
.v-ctaC__side { background: var(--surface); padding: 56px; display: grid; align-content: center; gap: 28px; }
.v-ctaC__side .t-lead { max-width: 440px; }
.v-ctaC .book { width: 100%; margin: 0; padding: 0; gap: 20px; }

/* ── CTA D (teal line) ── */
.v-ctaD { background: var(--band-2); }
.v-ctaD__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 44px; }
.v-ctaD .t-h3 { color: var(--on-dark); }

/* ── Footer B (giant wordmark on forest) ── */
.v-fb { background: var(--band); color: var(--on-dark-2); padding-top: 88px; overflow: hidden; }
.v-fb__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.v-fb__lead { font: 400 18px/1.52 var(--font); color: var(--on-dark); max-width: 340px; }
.v-fh { margin-bottom: 18px; font: 500 14px/1.5 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--zest); }
.v-fcol ul { display: grid; gap: 10px; }
.v-fcol a, .v-fcol p { font: 400 16px/1.52 var(--font); color: var(--on-dark-2); transition: color .3s var(--ease); }
.v-fcol a:hover { color: var(--on-dark); }
.v-fb__word { margin: 56px 0 0; font: 400 clamp(56px, 19vw, 300px)/.82 var(--font-display); letter-spacing: -.07em; text-transform: uppercase; color: var(--on-dark); text-align: center; white-space: nowrap; }
.v-fb__base { display: flex; justify-content: space-between; gap: 24px; padding: 20px 0 28px; border-top: 1px solid var(--line-dark); font: 400 14px/1.5 var(--font); }
.v-fb__base a { color: var(--on-dark); }

/* ── Footer C (photo fading into teal) ── */
.v-fc { background: var(--band-2); color: var(--on-dark-2); }
.v-fc__ph { position: relative; height: clamp(280px, 30vw, 420px); overflow: hidden; }
.v-fc__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.v-fc__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 60, 69, 0) 30%, var(--band-2) 100%); }
.v-fc__in { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding: 24px 0 56px; }
.v-fc__in .logo { color: var(--on-dark); }
.v-fc__in .t-h3 { color: var(--on-dark); margin-top: 20px; max-width: 360px; }
.v-fc__copy { padding: 20px 0 28px; border-top: 1px solid var(--line-dark); font: 400 14px/1.5 var(--font); }

/* ── Footer D (minimal one row) ── */
.v-fd { padding-top: 8px; }
.v-fd__row { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.v-fd__row .logo { color: var(--text); }
.v-fd__nav { display: flex; gap: 28px; flex-wrap: wrap; }
.v-fd__nav a { font: 400 16px/1.52 var(--font); text-transform: uppercase; color: var(--text-2); transition: color .3s var(--ease); }
.v-fd__nav a:hover { color: var(--accent); }
.v-sub { display: flex; align-items: center; gap: 8px; height: 52px; width: min(360px, 100%); border: 1px solid var(--line); padding-left: 15px; background: var(--surface); }
.v-sub > .ic { width: 16px; height: 16px; color: var(--text-2); }
.v-sub input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 400 16px/1.2 var(--font); color: var(--text); outline: none; }
.v-sub input::placeholder { color: var(--text-2); }
.v-sub button { width: 40px; height: 40px; margin-right: 5px; border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; cursor: pointer; transition: background-color .35s var(--ease); }
.v-sub button:hover { background: var(--accent-deep); }
.v-sub button .ic { width: 16px; height: 16px; }
.v-fd__copy { margin-top: 32px; padding: 20px 0 32px; border-top: 1px solid var(--line); font: 400 14px/1.5 var(--font); color: var(--text-2); }

/* ── Gallery A compact + Gallery B ── */
.v-gal .gallery { max-width: 1280px; margin-inline: auto; }
.v-gb__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.v-gb__head p { font: 400 16px/1.52 var(--font); color: var(--text-2); max-width: 320px; }
.v-gb__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.v-gb__grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.v-gb__grid img:nth-child(even) { margin-top: 56px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .v-heroC { gap: 48px; }
  .v-heroC__doodle { display: none; }
  .v-icons__row { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .v-icons { height: auto; min-height: 560px; padding-top: 200px; }
  .v-icons::before { background: linear-gradient(0deg, rgba(29, 29, 29, .95) 0%, rgba(29, 29, 29, .9) 60%, rgba(29, 29, 29, .6) 100%); }
  .v-mcell { flex-direction: column; align-items: flex-start; }
  .v-mcell > img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .v-fb__cols, .v-fc__in { grid-template-columns: 1fr 1fr; }
  .v-ctaC__side { padding: 40px; }
}
@media (max-width: 900px) {
  .v-hsplit { grid-template-columns: auto 1fr; }
  .v-hsplit__l { display: none; }
  .v-hsplit__r a:not(.btn) { display: none; }
  .v-hsplit .logo { flex-direction: row; font-size: 23.6px; }
  .v-strip__set a:last-child { display: none; }
  .v-heroC, .v-row, .v-ctaC { grid-template-columns: 1fr; }
  .v-row--flip > img { order: 0; }
  .v-heroD__band { height: auto; padding: 40px var(--gutter); display: grid; gap: 24px; }
  .v-heroD__ph, .v-heroD__card { position: static; transform: none; width: 100%; height: auto; }
  .v-heroD__ph { aspect-ratio: 16 / 10; }
  .v-heroD__ph--b, .v-heroD__squiggle { display: none; }
  .v-sets { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .v-gb__grid { grid-template-columns: 1fr 1fr; }
  .v-ctaC > img { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  .v-item { padding-top: 80px; }
  .v-label { margin-bottom: 32px; }
  .v-jump span { width: 100%; }
  .v-hstage--photo { height: 180px; }
  .v-strip__in { font-size: 13px; }
  .v-strip__in > p:first-child { display: none; }
  .v-strip__set { width: 100%; justify-content: space-between; }
  .v-compact.hero { height: auto; }
  .v-heroB.phero { height: auto; min-height: 520px; }
  .v-mgrid { grid-template-columns: 1fr; }
  .v-mb { padding-block: 72px; }
  .v-rates { grid-template-columns: 1fr; }
  .v-rate + .v-rate { border-left: 0; border-top: 1px solid var(--line); }
  .v-tbl thead { display: none; }
  .v-tbl tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .v-tbl td { display: block; padding: 0; border: 0; width: auto !important; }
  .v-tbl td:first-child { grid-column: 1 / -1; }
  .v-tbl td:last-child { grid-column: 2; grid-row: 2; }
  .v-tbl tfoot tr { border-bottom: 0; }
  .v-item .reserve__stage { height: auto; }
  .v-ctaB { padding-block: 80px; }
  .v-ctaB__sq { width: 180px; }
  .v-ctaC__side { padding: 28px 20px; }
  .v-ctaD__in { flex-direction: column; align-items: flex-start; }
  .v-fb { padding-top: 64px; }
  .v-fb__cols, .v-fc__in { grid-template-columns: 1fr; }
  .v-fb__base { flex-direction: column; }
  .v-fd__row { flex-direction: column; align-items: flex-start; }
  .v-gb__head { flex-direction: column; align-items: flex-start; }
  .v-gb__grid img:nth-child(even) { margin-top: 32px; }
}