/* A day's three chapters: taste, aperitivo, and music by the sea. */
:root { --ease-marea: cubic-bezier(.23,1,.32,1); }
.aperitif-art { position: relative; overflow: clip; isolation: isolate; background: #f2eee4; color: var(--sea); padding: 70px var(--gutter) 50px; }
.aperitif-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.aperitif-top svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1; }
.aperitif-stage { position: relative; display: grid; align-items: center; min-height: clamp(570px, 57vw, 760px); }
.aperitif-word { z-index: 1; margin: 0; text-align: center; font: 400 clamp(80px, 15vw, 250px)/.8 var(--display); letter-spacing: -.065em; }
.aperitif-subtitle { position: absolute; top: 17%; left: 3%; font: italic 400 clamp(25px, 3vw, 48px)/1 var(--display); color: var(--olive); }
.aperitif-glass { position: absolute; z-index: 2; top: 3%; left: 0; right: 0; width: min(39vw, 410px); height: 92%; margin: 0 auto; pointer-events: none; }
.aperitif-glass img { height: 100%; width: 100%; object-fit: contain; filter: drop-shadow(12px 25px 22px rgb(59 43 17 / .12)); }
.aperitif-orbit { position: absolute; z-index: 0; width: 44%; aspect-ratio: 1; border: 1px solid #65674d22; border-radius: 50%; left: 28%; top: 22%; }
.aperitif-orbit::before { content: ''; position: absolute; inset: 10%; border: inherit; border-radius: 50%; }
.aperitif-leaf { position: absolute; z-index: 3; width: min(31vw, 460px); height: auto; object-fit: contain; pointer-events: none; }
.aperitif-leaf-left { left: -11%; bottom: 3%; rotate: -15deg; }
.aperitif-leaf-right { right: -10%; top: 15%; rotate: 165deg; }
.aperitif-note { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-top: 8px; }
.aperitif-note h3 { font: 400 36px/1 var(--display); margin-bottom: 14px; }
.aperitif-note p { max-width: 355px; font-size: 14px; line-height: 1.9; }
.aperitif-note > div:last-child { text-align: right; }
.aperitif-note .text-link { margin: 0 0 15px; }
.aperitif-note small { display: block; font-size: 10px; letter-spacing: .08em; }
.dish-story { padding-block: 105px 85px; background: var(--salt); color: var(--sea); overflow: clip; }
.dish-story-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; margin-bottom: 48px; }
.dish-story .dish-story-heading h2 { margin: 20px 0 0; font: 400 clamp(52px, 6.2vw, 100px)/1 var(--display); letter-spacing: -.035em; }
.dish-story-heading h2 em { font-weight: 400; color: var(--olive); }
.dish-story-heading p { font-size: 14px; line-height: 1.8; margin-bottom: 12px; }
.dish-story-heading .text-link { font-size: 12px; }
.dish-rail { --dish-width: min(64vw, 850px); display: flex; gap: 28px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); padding-inline: var(--gutter) max(var(--gutter), calc(100% - var(--dish-width) - var(--gutter))); scrollbar-width: none; cursor: grab; }
.dish-rail::-webkit-scrollbar { display: none; }
.dish-rail:focus-visible { outline: 2px solid var(--olive); outline-offset: -3px; }
.dish-rail.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.dish-slide { flex: 0 0 var(--dish-width); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.dish-slide figure { position: relative; margin: 0; overflow: hidden; height: clamp(400px, 55vw, 700px); background: var(--sand); }
.dish-slide figure::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgb(10 22 17 / .7)); pointer-events: none; }
.dish-slide img { width: 100%; height: 100%; object-fit: cover; }
.dish-slide figcaption { position: absolute; z-index: 1; left: 38px; right: 30px; bottom: 35px; color: var(--salt); }
.dish-story .dish-slide h3 { font: 400 clamp(32px, 3.4vw, 55px)/1.05 var(--display); margin: 13px 0 0; letter-spacing: -.02em; }
.dish-slide-detail { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; padding-top: 20px; font-size: 12px; }
.dish-slide-detail p { line-height: 1.8; margin: 0; max-width: 70%; }
.dish-slide-detail > span { white-space: nowrap; font-size: 15px; padding-top: 3px; }
.dish-navigation { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.dish-count { min-width: 75px; font-size: 13px; letter-spacing: .12em; }
.dish-progress { flex: 1; height: 1px; background: #65674d35; }
.dish-progress span { height: 2px; display: block; background: var(--sea); transform: scaleX(.1667); transform-origin: left; transition: transform 240ms var(--ease-marea); }
.dish-gesture { font-size: 9px; letter-spacing: .14em; }
.dish-arrows { display: flex; gap: 10px; }
.dish-arrows[hidden] { display: none; }
.dish-arrows button { width: 52px; height: 52px; border: 1px solid #65674d65; background: transparent; color: inherit; font-size: 22px; transition: background 180ms var(--ease-marea), color 180ms var(--ease-marea); }
.dish-arrows button:disabled { opacity: .3; cursor: default; }
.rhythm { --scene-height: max(320px, 100svh); background: #11241f; color: var(--salt); position: relative; }
.rhythm-stage { position: relative; }
.rhythm-panel { position: relative; height: max(700px, 88svh); overflow: hidden; }
.rhythm-photo { position: absolute; inset: 0; }
.rhythm-photo > img { position: absolute; width: 100%; height: 100%; object-fit: cover; inset: 0; }
.rhythm-shade { position: absolute; inset: 0; background: linear-gradient(rgb(10 19 17 / .08) 15%, rgb(10 19 17 / .17) 35%, rgb(10 19 17 / .8) 100%); }
.rhythm-copy { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 13%; }
.rhythm .rhythm-copy h2 { font: 400 clamp(67px, 7.8vw, 132px)/.92 var(--display); letter-spacing: -.045em; margin: 20px 0 25px; max-width: 1200px; }
.rhythm-copy h2 em { color: #d4d9b2; font-weight: 400; }
.rhythm-copy p { font-size: 14px; line-height: 1.9; margin-bottom: 20px; }
.rhythm-copy .text-link { font-size: 13px; }
.rhythm-scroll { position: absolute; bottom: 35px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; gap: 20px; font-size: 9px; letter-spacing: .16em; }
/* Native sticky preserves wheel/touch scrolling; no synthetic pin spacer. */
.rhythm.is-animated { height: calc(var(--scene-height) * 2.4); }
.rhythm.is-animated .rhythm-stage { position: sticky; top: 0; height: var(--scene-height); overflow: clip; }
.rhythm.is-animated .rhythm-panel { position: absolute; inset: 0; height: 100%; min-height: 0; overflow: visible; }
.rhythm.is-animated .rhythm-night .rhythm-photo { clip-path: inset(0 100% 0 0); }
.rhythm.is-animated .rhythm-night .rhythm-copy { opacity: 0; }
.after-dark { padding-block: 95px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 8%; align-items: center; background: var(--sea); color: var(--salt); }
.after-dark h2 { margin-block: 24px; }
.after-dark h2 em { color: #d4d9b2; }
.after-dark p { font-size: 14px; max-width: 420px; margin-bottom: 25px; }
.after-dark figure { margin: 0; }
.after-dark img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.after-dark .small-note { color: #f5f3e9b0; font-size: 11px; }
.after-dark .menu-open-button { background: var(--salt); color: var(--sea); }
@media (hover: hover) and (pointer: fine) {
  .dish-arrows button:not(:disabled):hover { background: var(--sea); color: var(--salt); }
}
@media (max-width: 899px) {
  .aperitif-art { padding-block: 45px; }
  .aperitif-top .eyebrow:last-child { display: none; }
  .aperitif-stage { min-height: 620px; }
  .aperitif-word { font-size: 17vw; }
  .aperitif-glass { width: 62vw; max-width: 420px; top: 8%; height: 86%; }
  .aperitif-subtitle { top: 10%; left: 0; }
  .aperitif-orbit { width: 70%; left: 15%; top: 30%; }
  .aperitif-leaf { width: 43vw; }
  .aperitif-leaf-left { left: -20%; bottom: 18%; }
  .aperitif-leaf-right { right: -18%; top: 22%; }
  .aperitif-note { align-items: flex-start; }
  .aperitif-note h3 { font-size: 30px; }
  .aperitif-note p { font-size: 12px; }
  .dish-story { padding-block: 75px 55px; }
  .dish-story-heading { align-items: flex-start; }
  .dish-rail { --dish-width: 78vw; gap: 18px; }
  .dish-slide figure { height: 510px; }
  .dish-slide figcaption { left: 25px; bottom: 28px; }
  .dish-gesture { display: none; }
  .rhythm-panel { height: 780px; min-height: 85svh; }
  .rhythm-copy { bottom: 14%; }
  .rhythm-copy h2 em { display: block; }
  .rhythm-scroll { font-size: 8px; letter-spacing: .1em; gap: 12px; }
  .after-dark { gap: 35px; }
}
@media (max-width: 600px) {
  .aperitif-top .eyebrow { font-size: 8px; max-width: 240px; }
  .aperitif-top svg { width: 35px; height: 35px; }
  .aperitif-stage { min-height: 475px; }
  .aperitif-glass { width: 80vw; height: 94%; top: 3%; }
  .aperitif-subtitle { font-size: 25px; top: 7%; }
  .aperitif-word { font-size: 17.5vw; letter-spacing: -.07em; }
  .aperitif-leaf { width: 53vw; }
  .aperitif-leaf-left { left: -25%; bottom: 30%; }
  .aperitif-leaf-right { right: -25%; top: 22%; }
  .aperitif-note { flex-direction: column; gap: 26px; }
  .aperitif-note > div:last-child { text-align: left; }
  .aperitif-note p { font-size: 13px; }
  .dish-story-heading { display: block; margin-bottom: 32px; }
  .dish-story .dish-story-heading h2 { font-size: 53px; }
  .dish-story-heading > div:last-child { margin-top: 22px; display: flex; justify-content: space-between; gap: 15px; align-items: flex-end; }
  .dish-story-heading p { font-size: 12px; margin: 0; }
  .dish-story-heading .text-link { font-size: 11px; white-space: nowrap; margin: 0; }
  .dish-rail { --dish-width: 83vw; gap: 14px; }
  .dish-slide figure { height: 445px; }
  .dish-slide-detail { gap: 15px; font-size: 10px; }
  .dish-slide-detail > span { font-size: 13px; }
  .dish-slide figcaption { left: 22px; right: 20px; bottom: 25px; }
  .dish-navigation { gap: 16px; }
  .dish-count { font-size: 11px; min-width: 62px; }
  .dish-arrows button { width: 46px; height: 46px; }
  .rhythm-panel { height: 720px; min-height: 0; }
  .rhythm-photo > img { object-position: 48% center; }
  .rhythm-copy { bottom: 14%; }
  .rhythm .rhythm-copy h2 { font-size: clamp(42px, 13.4vw, 60px); margin-block: 18px; }
  .rhythm-copy p { font-size: 13px; }
  .after-dark { grid-template-columns: 1fr; padding-block: 60px; }
  .after-dark img { aspect-ratio: 4/3; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .rhythm-copy { bottom: 48px; }
  .rhythm .rhythm-copy h2 { font-size: clamp(34px, 6vw, 46px); margin-block: 10px; }
  .rhythm-copy h2 em { display: inline; }
  .rhythm-copy p { font-size: 11px; line-height: 1.5; margin-bottom: 8px; }
  .rhythm-copy .eyebrow { font-size: 8px; }
  .rhythm-copy .text-link { font-size: 11px; margin-block: 6px 0; padding-block: 6px; }
  .rhythm-scroll { bottom: 16px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .dish-progress span { transition: none; }
  .rhythm-scroll span:last-child { display: none; }
}