/* =============================================================================
   CHINGU RESTAURANT, ELLA — website styles
   Palette: deep forest green · Ella leaf green · antique gold · warm cream/sand · terracotta
   Type:    Cormorant Garamond (display) + Jost (text)
   ========================================================================== */
:root {
  --chingu-green: #173F35;       /* primary: header, footer, dark sections */
  --chingu-leaf: #4F6F52;        /* secondary */
  --chingu-gold: #C6A15B;        /* accent: hairlines, hover, highlights */
  --chingu-cream: #F7F2E8;       /* main background */
  --chingu-sand: #E8DDC8;        /* secondary background */
  --chingu-charcoal: #242824;    /* text */
  --chingu-white: #FFFDF8;       /* light text, cards */
  --chingu-terracotta: #B85C38;  /* secondary accent: prices */
  --text-soft: rgba(36, 40, 36, .74);
  --line: rgba(23, 63, 53, .16); --line-gold: rgba(198, 161, 91, .55);
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-text: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nav-h: 78px; --wrap: 1320px; --gutter: clamp(20px, 4.4vw, 64px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--chingu-cream); color: var(--chingu-charcoal); font: 400 1.0625rem/1.75 var(--font-text); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, canvas { max-width: 100%; } img { display: block; }
a { color: inherit; } button, input { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--chingu-green); margin: 0; line-height: 1.05; letter-spacing: -.012em; }
p { margin: 0; }
::selection { background: var(--chingu-gold); color: var(--chingu-green); }
:focus-visible { outline: 2px solid var(--chingu-gold); outline-offset: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--chingu-gold); color: var(--chingu-green); padding: 10px 16px; z-index: 200; font-weight: 500; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

/* ---------- small type + buttons ---------- */
.kicker { display: inline-flex; align-items: center; gap: 16px; font: 500 .7rem/1 var(--font-text); letter-spacing: .32em; text-transform: uppercase; color: var(--chingu-leaf); }
.kicker::before { content: ''; width: 44px; height: 1px; background: var(--chingu-gold); }
.on-dark .kicker, .hero .kicker, .section--green .kicker, .feature .kicker { color: var(--chingu-gold); }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .9em; padding: 1.15em 2.2em; border: 1px solid var(--chingu-green); background: var(--chingu-green); color: var(--chingu-white); font: 500 .72rem/1 var(--font-text); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); white-space: nowrap; }
.btn svg { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.btn:hover { background: var(--chingu-gold); border-color: var(--chingu-gold); color: var(--chingu-green); }
.btn:hover svg { transform: translateX(4px); }
.btn--ghost { background: transparent; border-color: var(--chingu-gold); color: var(--chingu-green); }
.btn--ghost:hover { background: var(--chingu-gold); border-color: var(--chingu-gold); color: var(--chingu-green); }
.on-dark .btn--ghost, .hero .btn--ghost, .nav .btn--ghost, .section--green .btn--ghost { color: var(--chingu-white); }
.on-dark .btn--ghost:hover, .hero .btn--ghost:hover, .nav .btn--ghost:hover, .section--green .btn--ghost:hover { color: var(--chingu-green); }
.hero .btn:not(.btn--ghost) { border-color: var(--chingu-gold); }
.btn--sm { padding: .95em 1.6em; font-size: .66rem; }
.tlink { display: inline-flex; align-items: center; gap: .8em; font: 500 .7rem/1 var(--font-text); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: var(--chingu-green); padding-bottom: .55em; background: linear-gradient(var(--chingu-gold), var(--chingu-gold)) left bottom / 100% 1px no-repeat; transition: background-size .6s var(--ease), color .4s; }
.tlink:hover { background-size: 40% 1px; color: var(--chingu-leaf); }
.tlink svg { width: 15px; height: 15px; }
.on-dark .tlink, .hero .tlink, .section--green .tlink { color: var(--chingu-white); } .on-dark .tlink:hover, .hero .tlink:hover, .section--green .tlink:hover { color: var(--chingu-gold); }

/* ---------- header ---------- */
.nav { position: sticky; top: 0; z-index: 60; height: var(--nav-h); background: var(--chingu-green); border-bottom: 1px solid rgba(198, 161, 91, .28); transition: box-shadow .5s, height .5s var(--ease); }
.nav.is-solid { box-shadow: 0 10px 30px rgba(10, 30, 24, .22); }
.nav__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; width: min(1480px, 100% - var(--gutter) * 2); margin-inline: auto; }
.nav__brand { display: block; line-height: 0; flex: none; }
.nav__brand img { height: 46px; width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(20px, 2.8vw, 44px); list-style: none; margin: 0; padding: 0; }
.nav__links a { position: relative; font: 500 .68rem/1 var(--font-text); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: var(--chingu-white); padding: 12px 0; transition: color .4s; }
.nav__links a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--chingu-gold); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.nav__links a:not(.btn):hover, .nav__links a[aria-current] { color: var(--chingu-gold); }
.nav__links a:not(.btn):hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav__links a.btn { padding: 1.05em 1.7em; }
.nav__toggle { display: none; width: 46px; height: 46px; background: transparent; border: 0; cursor: pointer; position: relative; }
.nav__toggle span, .nav__toggle span::before { position: absolute; left: 11px; right: 11px; height: 1px; background: var(--chingu-white); content: ''; transition: transform .5s var(--ease), top .5s var(--ease); }
.nav__toggle span { top: 19px; } .nav__toggle span::before { top: 8px; left: 0; right: 0; }
.nav.is-open .nav__toggle span { top: 23px; transform: rotate(45deg); } .nav.is-open .nav__toggle span::before { top: 0; transform: rotate(-90deg); }

/* ---------- hero: the Nine Arch Bridge ---------- */
.hero { position: relative; min-height: max(calc(100svh - var(--nav-h)), 560px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--chingu-green); color: var(--chingu-white); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero__par { position: absolute; inset: 0; will-change: transform; }
.hero__zoom { position: absolute; inset: 0; transform-origin: 62% 12%; animation: descend 3.8s cubic-bezier(.16, .8, .22, 1) both; will-change: transform; }
@keyframes descend { from { transform: scale(1.34); } to { transform: scale(1); } }
.hero__mist { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(226, 236, 228, .94) 0%, rgba(205, 222, 210, .72) 40%, rgba(23, 63, 53, .2) 100%); animation: mist 3.2s ease-out both; }
@keyframes mist { 0% { opacity: 1; } 55% { opacity: .42; } 100% { opacity: 0; visibility: hidden; } }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
.hero__body > *, .hero__foot { animation: rise 1.3s var(--ease) both; }
.hero__body > :nth-child(1) { animation-delay: 1.25s; } .hero__body > :nth-child(2) { animation-delay: 1.4s; } .hero__body > :nth-child(3) { animation-delay: 1.55s; } .hero__body > :nth-child(4) { animation-delay: 1.7s; }
.hero__foot { animation-delay: 2s; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 36%; max-width: none; }
.hero__shade { position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(90deg, rgba(23, 63, 53, .72) 0%, rgba(23, 63, 53, .5) 30%, rgba(23, 63, 53, .14) 58%, rgba(23, 63, 53, 0) 78%),
  linear-gradient(0deg, rgba(23, 63, 53, .7) 0%, rgba(23, 63, 53, .26) 26%, rgba(23, 63, 53, 0) 52%),
  linear-gradient(180deg, rgba(23, 63, 53, .16) 0%, rgba(23, 63, 53, 0) 22%); }
@media (max-width: 1100px) { .hero__shade { background:
  linear-gradient(90deg, rgba(23, 63, 53, .72) 0%, rgba(23, 63, 53, .46) 46%, rgba(23, 63, 53, .1) 80%),
  linear-gradient(0deg, rgba(23, 63, 53, .84) 0%, rgba(23, 63, 53, .56) 30%, rgba(23, 63, 53, 0) 62%),
  linear-gradient(180deg, rgba(23, 63, 53, .16) 0%, rgba(23, 63, 53, 0) 22%); } }
@media (max-width: 700px) { .hero__shade { background:
  linear-gradient(0deg, rgba(23, 63, 53, .9) 0%, rgba(23, 63, 53, .7) 34%, rgba(23, 63, 53, .22) 60%, rgba(23, 63, 53, 0) 78%),
  linear-gradient(180deg, rgba(23, 63, 53, .2) 0%, rgba(23, 63, 53, 0) 22%); } }
.hero__body { padding-top: clamp(80px, 14vh, 150px); padding-bottom: clamp(34px, 6vh, 70px); }
.hero__kicker { margin-bottom: clamp(18px, 3vh, 32px); }
.hero h1 { color: var(--chingu-white); font-size: clamp(3.1rem, 7vw, 7rem); font-weight: 400; line-height: .96; letter-spacing: -.02em; max-width: 11.5ch; text-shadow: 0 2px 30px rgba(10, 30, 24, .35); }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--chingu-gold); }
.hero__lead { margin-top: clamp(20px, 3vh, 34px); max-width: 46ch; font-size: clamp(1rem, 1.25vw, 1.2rem); color: rgba(255, 253, 248, .92); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: clamp(26px, 4.4vh, 46px); }
.hero__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 22px; margin-bottom: clamp(18px, 3vh, 30px); background: rgba(23, 63, 53, .42); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); border: 1px solid rgba(198, 161, 91, .38); font: 400 .68rem/1.6 var(--font-text); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 253, 248, .86); }
.hero__foot b { font-weight: 500; color: var(--chingu-gold); }
.hero__foot .cap { text-align: right; }
.hero__foot .dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--chingu-gold); margin: 0 12px; vertical-align: middle; }

/* ---------- sections ---------- */
.section { position: relative; padding: clamp(88px, 11vw, 170px) 0; }
.section--cream { background: var(--chingu-cream); }
.section--sand { background: var(--chingu-sand); }
.section--green { background: var(--chingu-green); color: rgba(255, 253, 248, .86); }
.section--green h2, .section--green h3 { color: var(--chingu-white); }
.h2 { font-size: clamp(2.5rem, 5.2vw, 5rem); line-height: 1; margin-top: 24px; }
.h2 em { font-style: italic; color: var(--chingu-leaf); font-weight: 500; }
.section--green .h2 em, .on-dark .h2 em { color: var(--chingu-gold); }
.lede { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.9rem); line-height: 1.2; color: var(--chingu-green); letter-spacing: -.01em; }
.lede em { color: var(--chingu-leaf); }
.prose { max-width: 52ch; margin-top: 28px; color: var(--text-soft); }
.prose p + p { margin-top: 1.2em; }
.section--green .prose { color: rgba(255, 253, 248, .8); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* intro */
.intro__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(40px, 8vw, 130px); align-items: end; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(60px, 8vw, 120px); border-top: 1px solid var(--line-gold); }
.fact { padding: 34px 28px 0 0; } .fact + .fact { padding-left: 28px; border-left: 1px solid var(--line); }
.fact b { display: block; font: 400 clamp(2.6rem, 4.4vw, 4.4rem)/1 var(--font-display); color: var(--chingu-green); letter-spacing: -.02em; }
.fact span { display: block; margin-top: 12px; font: 500 .66rem/1.6 var(--font-text); letter-spacing: .24em; text-transform: uppercase; color: var(--chingu-leaf); }
.figure { position: relative; margin: 0; }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--frame { isolation: isolate; }
.figure--frame::before { content: ''; position: absolute; inset: -20px -20px 40px 20px; border: 1px solid var(--chingu-gold); z-index: -1; opacity: .8; }
.figure figcaption { margin-top: 16px; font: 500 .64rem/1.6 var(--font-text); letter-spacing: .24em; text-transform: uppercase; color: var(--chingu-leaf); }
.section--green .figure figcaption { color: var(--chingu-gold); }
.reveal-img { overflow: hidden; position: relative; } .reveal-img img { transform: scale(1.1); transition: transform 1.8s var(--ease); }
.reveal-img.is-in img { transform: scale(1); }
.reveal-img::after { content: ''; position: absolute; inset: 0; background: var(--chingu-cream); transform-origin: top; transition: transform 1.3s var(--ease); }
.reveal-img.is-in::after { transform: scaleY(0); }
.section--green .reveal-img::after { background: var(--chingu-green); }

/* Ella band */
.feature { position: relative; min-height: clamp(460px, 70vh, 720px); display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; background: var(--chingu-green); }
.feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; }
.feature::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(23, 63, 53, .88), rgba(23, 63, 53, .12) 70%), linear-gradient(90deg, rgba(23, 63, 53, .6), transparent 65%); }
.feature .wrap { padding-bottom: clamp(36px, 6vw, 84px); }
.feature h2 { font-size: clamp(2.4rem, 5vw, 4.8rem); max-width: 16ch; margin-top: 22px; color: var(--chingu-white); } .feature h2 em { font-style: italic; color: var(--chingu-gold); }
.feature p { max-width: 48ch; margin-top: 22px; color: rgba(255, 253, 248, .88); }
.feature .kicker { color: var(--chingu-gold); }

/* kitchen */
.kitchen__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.kitchen__head .prose { margin-top: 0; max-width: 40ch; }
.rail { --rail-gap: clamp(18px, 2vw, 30px); --tile-w: clamp(250px, 26vw, 390px); --edge: calc((100% - min(var(--wrap), 100% - var(--gutter) * 2)) / 2); margin-top: clamp(44px, 5vw, 80px); overflow: hidden; }
.rail__track { display: flex; gap: var(--rail-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline-start: var(--edge); scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; padding-bottom: 6px; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; } .rail__track.is-drag a { pointer-events: none; }
.rail__track.is-auto { scroll-snap-type: none; }
.rail__track:focus-visible { outline-offset: -4px; }
.rail__pad { flex: 0 0 max(0px, calc(var(--edge) - var(--rail-gap))); }
.reveal-x .rail__track { transform: translate3d(18vw, 0, 0); opacity: 0; transition: transform 1.7s var(--ease), opacity 1.1s ease; }
.reveal-x.is-in .rail__track { transform: none; opacity: 1; }
.no-js .reveal-x .rail__track { transform: none; opacity: 1; }
.rail__ctrl { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.rail__bar { flex: 1; height: 1px; background: var(--line-gold); position: relative; }
.rail__bar i { position: absolute; left: 0; top: -1px; height: 3px; width: 30%; background: var(--chingu-gold); transition: left .25s ease-out, width .25s ease-out; }
.rail__btns { display: flex; gap: 10px; }
.rail__btn { width: 48px; height: 48px; border: 1px solid var(--chingu-gold); background: transparent; color: var(--chingu-green); display: grid; place-items: center; cursor: pointer; transition: background .4s var(--ease), opacity .3s; }
.rail__btn:hover { background: var(--chingu-gold); } .rail__btn svg { width: 18px; height: 18px; } .rail__btn[disabled] { opacity: .35; pointer-events: none; }
.tile { position: relative; display: block; text-decoration: none; color: inherit; }
.rail .tile { flex: 0 0 var(--tile-w); scroll-snap-align: start; -webkit-user-drag: none; } .rail .tile img { -webkit-user-drag: none; }
.tile__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--chingu-green); }
.tile__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.tile:hover .tile__img img { transform: scale(1.06); }
.tile__n { position: absolute; z-index: 2; left: 18px; top: 16px; font: 500 .66rem/1 var(--font-text); letter-spacing: .3em; color: var(--chingu-white); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.tile__txt { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 18px; border-bottom: 1px solid var(--line); padding-bottom: 16px; position: relative; }
.tile__txt::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--chingu-gold); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.tile:hover .tile__txt::after { transform: scaleX(1); }
.tile h3 { font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
.tile p { font: 500 .62rem/1.5 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--chingu-leaf); text-align: right; }
.fineprint { margin-top: 40px; font: 500 .62rem/1.6 var(--font-text); letter-spacing: .22em; text-transform: uppercase; color: var(--chingu-leaf); }

/* menu call-to-action on the home page */
.menucta { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 7vw, 120px); align-items: end; }
.menucta__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.pill { font: 500 .66rem/1 var(--font-text); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding: 11px 16px; border: 1px solid var(--line-gold); color: var(--chingu-green); background: var(--chingu-white); transition: background .4s, color .4s, border-color .4s; }
.pill:hover { background: var(--chingu-gold); border-color: var(--chingu-gold); }
.menucta__act { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.menucta__act .btn { align-self: stretch; }

/* terrace (deep green) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 9vw, 150px); align-items: center; }
.split--rev .figure { order: 2; }
.quote { font: italic 400 clamp(1.5rem, 2.2vw, 2.1rem)/1.4 var(--font-display); color: var(--chingu-gold); margin-top: 38px; padding-left: 26px; border-left: 1px solid var(--chingu-gold); max-width: 30ch; }

/* gallery */
.gallery-page { padding-top: clamp(36px, 5vw, 70px); }
.gallery-page .gallery { margin-top: 0; }
.cta__btns { display: flex; flex-wrap: wrap; gap: 14px; }
.menu__cta .btn--ghost { background: transparent; border-color: var(--chingu-gold); color: var(--chingu-white); }
.menu__cta .btn--ghost:hover { background: var(--chingu-gold); color: var(--chingu-green); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(48px, 6vw, 90px); }
.gallery figure { margin: 0; aspect-ratio: 4 / 5; position: relative; overflow: hidden; cursor: zoom-in; background: var(--chingu-sand); }
.gallery figure:first-child, .gallery figure:last-child { grid-column: span 2; aspect-ratio: auto; }
.gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.gallery figure:hover img { transform: scale(1.05); }
.lightbox { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; background: rgba(12, 36, 29, .96); padding: 28px; cursor: zoom-out; }
.lightbox.is-on { display: flex; animation: fade .5s ease; }
.lightbox img { max-height: 90vh; max-width: min(1200px, 92vw); }
@keyframes fade { from { opacity: 0; } }

/* visit */
.visit__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(52px, 7vw, 100px); border-top: 1px solid var(--line-gold); }
.vcol { padding: 40px 36px 8px 0; } .vcol + .vcol { padding-left: 36px; border-left: 1px solid var(--line); }
.vcol h3 { font-size: 1.9rem; margin-bottom: 22px; }
.vcol p, .vcol li { font-size: 1rem; color: var(--text-soft); }
.vcol ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.vcol .big { font: 400 clamp(1.6rem, 2.2vw, 2.1rem)/1.25 var(--font-display); color: var(--chingu-green); }
.vcol a:not(.tlink):not(.btn) { text-decoration: none; background: linear-gradient(var(--chingu-gold), var(--chingu-gold)) left bottom / 0 1px no-repeat; transition: background-size .6s var(--ease), color .3s; padding-bottom: 2px; color: var(--chingu-green); }
.vcol a:not(.tlink):not(.btn):hover { background-size: 100% 1px; }
.vcol .tlink { margin-top: 26px; }
.hours { display: grid; gap: 10px; } .hours div { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px dotted var(--line-gold); padding-bottom: 8px; } .hours b { font-weight: 500; color: var(--chingu-terracotta); }
.vnote { margin-top: 22px; font-size: .92rem; color: var(--text-soft); }

/* footer */
.footer { background: var(--chingu-green); color: var(--chingu-sand); padding: clamp(60px, 8vw, 110px) 0 36px; border-top: 1px solid rgba(198, 161, 91, .35); }
.footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 50px; }
.footer img.logo { width: 130px; height: auto; margin-bottom: 24px; }
.footer__tag { font: italic 400 1.6rem/1.3 var(--font-display); color: var(--chingu-white); max-width: 20ch; }
.footer h4 { font: 500 .66rem/1 var(--font-text); letter-spacing: .32em; text-transform: uppercase; color: var(--chingu-gold); margin-bottom: 24px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: .98rem; }
.footer a { text-decoration: none; color: var(--chingu-white); transition: color .3s; } .footer a:hover { color: var(--chingu-gold); }
.socials { display: flex; gap: 14px; margin-top: 26px; }
.socials a { width: 42px; height: 42px; border: 1px solid rgba(198, 161, 91, .5); display: grid; place-items: center; transition: border-color .4s, background .4s, color .4s; }
.socials a:hover { border-color: var(--chingu-gold); background: var(--chingu-gold); color: var(--chingu-green); }
.socials svg { width: 17px; height: 17px; }
.footer__bar { margin-top: clamp(50px, 6vw, 90px); padding-top: 26px; border-top: 1px solid rgba(232, 221, 200, .18); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; font: 400 .64rem/1.7 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--chingu-sand); }
.footer__bar b { font-weight: 500; color: var(--chingu-gold); }

/* mobile order pill */
.order-pill { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 70; transform: translate(-50%, 160%); transition: transform .7s var(--ease); display: none; }
.order-pill.is-on { transform: translate(-50%, 0); }
.order-pill .btn { box-shadow: 0 16px 40px rgba(10, 30, 24, .35); border-color: var(--chingu-gold); }

/* reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--rd, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; } .no-js .reveal-img::after { display: none; } .no-js .reveal-img img { transform: none; }

/* =========================== MENU PAGE =========================== */
.pagehead { background: var(--chingu-sand); padding: clamp(36px, 5vw, 72px) 0 clamp(30px, 4vw, 54px); border-bottom: 1px solid var(--line-gold); }
.pagehead__grid { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 40px 80px; align-items: end; }
.pagehead h1 { font-size: clamp(2.8rem, 5.4vw, 5rem); font-weight: 400; margin-top: 18px; line-height: .98; }
.pagehead h1 em { font-style: italic; color: var(--chingu-leaf); }
.menu__note { background: var(--chingu-white); border: 1px solid var(--line); border-left: 3px solid var(--chingu-gold); padding: 20px 24px; font: 400 .95rem/1.7 var(--font-text); color: var(--text-soft); }
.menu__note b { display: block; margin-bottom: 8px; font: 500 .64rem/1 var(--font-text); letter-spacing: .3em; text-transform: uppercase; color: var(--chingu-leaf); }
.menu__badge { display: inline-block; margin-top: 18px; font: 500 .64rem/1 var(--font-text); letter-spacing: .26em; text-transform: uppercase; color: var(--chingu-terracotta); }
.menu { padding: clamp(40px, 5vw, 70px) 0 clamp(80px, 9vw, 140px); }
.menu__layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.menu__nav { position: sticky; top: calc(var(--nav-h) + 24px); }
.finder { position: relative; display: block; margin-bottom: 26px; }
.finder input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--chingu-green); border-radius: 0; padding: 12px 28px 12px 0; font: 400 1rem/1.2 var(--font-text); color: var(--chingu-charcoal); outline: none; transition: border-color .4s; }
.finder input::placeholder { color: rgba(36, 40, 36, .5); letter-spacing: .04em; }
.finder input:focus { border-color: var(--chingu-gold); }
.finder svg { position: absolute; right: 2px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--chingu-leaf); }
.chips { display: flex; flex-direction: column; }
.chip { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border: 0; background: transparent; text-align: left; text-decoration: none; cursor: pointer; font: 500 .7rem/1.35 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: rgba(36, 40, 36, .62); transition: color .4s, padding .5s var(--ease); }
.chip i { font: normal 500 .6rem/1 var(--font-text); letter-spacing: .2em; color: var(--chingu-gold); min-width: 1.8em; }
.chip:hover { color: var(--chingu-green); }
.chip.is-on { color: var(--chingu-green); padding-left: 14px; }
.chip.is-on::before { content: ''; position: absolute; left: 0; top: 50%; width: 7px; height: 1px; background: var(--chingu-terracotta); }
.cat { background: var(--chingu-white); border: 1px solid var(--line); padding: clamp(24px, 3.4vw, 48px) clamp(20px, 3.4vw, 52px) clamp(8px, 1vw, 16px); margin-bottom: clamp(26px, 3vw, 44px); }
.cat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--chingu-gold); }
.cat h3 { font-size: clamp(2.1rem, 3.6vw, 3.3rem); font-weight: 500; }
.cat__count { font: 500 .62rem/1 var(--font-text); letter-spacing: .28em; text-transform: uppercase; color: var(--chingu-leaf); white-space: nowrap; }
.cat__note { margin-top: 18px; font: italic 400 1.15rem/1.5 var(--font-display); color: var(--chingu-leaf); max-width: 60ch; }
.dishes { margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 72px); }
.dish { padding: 22px 0 20px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.dish__row { display: flex; align-items: baseline; gap: 14px; }
.dish__name { font-size: clamp(1.3rem, 1.6vw, 1.55rem); font-weight: 600; line-height: 1.15; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.dish__dots { flex: 1; min-width: 24px; border-bottom: 1px dotted var(--line-gold); transform: translateY(-.32em); }
.dish__price { font: 500 1.02rem/1 var(--font-text); letter-spacing: .04em; color: var(--chingu-terracotta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dish__price small { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(36, 40, 36, .55); margin-right: 8px; font-weight: 400; }
.dish__desc { margin-top: 8px; font: 400 .93rem/1.6 var(--font-text); color: var(--text-soft); }
.dish__meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: auto; padding-top: 12px; min-height: 36px; }
.dish__opts { font: 400 .72rem/1.6 var(--font-text); letter-spacing: .05em; color: rgba(36, 40, 36, .6); }
.dish__opts span + span::before { content: '·'; margin: 0 .7em; color: var(--chingu-gold); }
.dish__opts b { font-weight: 500; color: var(--chingu-terracotta); margin-left: .5em; }
.dish__order { margin-left: auto; display: inline-flex; align-items: center; gap: .7em; font: 500 .62rem/1 var(--font-text); letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: var(--chingu-green); padding: 9px 0; background: linear-gradient(var(--chingu-gold), var(--chingu-gold)) left bottom 4px / 0 1px no-repeat; transition: background-size .5s var(--ease), gap .5s var(--ease), color .3s; }
.dish__order svg { width: 13px; height: 13px; }
.dish__order:hover { background-size: 100% 1px; gap: 1.1em; color: var(--chingu-leaf); }
.tag { font: 500 .56rem/1 var(--font-text); letter-spacing: .22em; text-transform: uppercase; padding: 5px 9px 4px; border: 1px solid var(--line-gold); color: var(--chingu-green); background: var(--chingu-cream); }
.tag--veg { border-color: var(--chingu-leaf); color: var(--chingu-leaf); }
.tag--out { border-color: var(--chingu-terracotta); color: var(--chingu-terracotta); }
.dish.is-out .dish__name, .dish.is-out .dish__desc, .dish.is-out .dish__price { opacity: .5; }
.dish__note { margin-top: 8px; font: italic 400 1rem/1.5 var(--font-display); color: var(--chingu-leaf); }
.empty { padding: 60px 0; color: var(--chingu-leaf); font: italic 400 1.4rem/1.4 var(--font-display); }
.menu__cta { margin-top: clamp(40px, 5vw, 80px); display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; padding: clamp(30px, 4vw, 54px) clamp(24px, 4vw, 56px); background: var(--chingu-green); color: rgba(255, 253, 248, .86); }
.menu__cta h3 { font-size: clamp(2rem, 3.4vw, 3.2rem); color: var(--chingu-white); } .menu__cta h3 em { color: var(--chingu-gold); }
.menu__cta p { margin-top: 10px; max-width: 44ch; }
.menu__cta .btn { background: var(--chingu-gold); border-color: var(--chingu-gold); color: var(--chingu-green); }
.menu__cta .btn:hover { background: var(--chingu-white); border-color: var(--chingu-white); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .dishes { grid-template-columns: 1fr; } }
@media (max-width: 1100px) {
  .intro__grid, .split, .pagehead__grid, .menucta { grid-template-columns: 1fr; }
  .split--rev .figure { order: 0; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery figure:first-child, .gallery figure:last-child { aspect-ratio: 16 / 10; }
  .figure--frame::before { inset: -12px -10px 40px 10px; }
  .visit__grid { grid-template-columns: 1fr; } .vcol, .vcol + .vcol { padding: 34px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .footer__top { grid-template-columns: 1fr 1fr; } .footer__top > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 920px) {
  :root { --nav-h: 70px; }
  .nav__toggle { display: block; }
  .nav__links { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 100px var(--gutter) 60px; background: var(--chingu-green); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
  .nav.is-open .nav__links { opacity: 1; pointer-events: auto; }
  .nav__links a:not(.btn) { font: 400 clamp(2.4rem, 9vw, 3.6rem)/1.2 var(--font-display); letter-spacing: -.01em; text-transform: none; padding: 6px 0; }
  .nav__links a:not(.btn)::after { display: none; }
  .nav__links a.btn { margin-top: 26px; font-size: .7rem; }
  .menu__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .menu__nav, .menu__body { min-width: 0; }
  .menu__nav { position: sticky; top: var(--nav-h); z-index: 30; margin: 0 calc(var(--gutter) * -1) 26px; padding: 0 var(--gutter); background: rgba(247, 242, 232, .96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-gold); }
  .finder { display: none; }
  .chips { flex-direction: row; gap: 26px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; padding: 18px 0; white-space: nowrap; } .chip i { display: none; } .chip.is-on { padding-left: 0; } .chip.is-on::before { left: 0; right: 0; top: auto; bottom: 8px; width: auto; height: 1px; }
  .order-pill { display: block; }
  .hero__foot .cap { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; line-height: 1.7; }
  .hero__img { object-position: 50% 28%; }
  .hero h1 { font-size: clamp(3rem, 14.5vw, 4.4rem); }
  .btn { padding: 1.3em 1.6em; }
  .hero__cta .btn { width: 100%; }
  .hero .kicker { letter-spacing: .22em; gap: 12px; } .hero .kicker::before { width: 26px; }
  .hero__lead { text-shadow: 0 1px 14px rgba(10, 30, 24, .5); }
  .hero__foot { padding: 12px 16px; font-size: .6rem; letter-spacing: .16em; }
  .rail { --tile-w: 68vw; } .tile__txt { flex-direction: column; gap: 6px; } .tile p { text-align: left; }
  .facts { grid-template-columns: 1fr; } .fact, .fact + .fact { padding: 26px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .dish__row { gap: 10px; } .dish__dots { min-width: 10px; }
  .footer__top { grid-template-columns: 1fr; }
  .menu__cta .btn, .menucta__act .btn { width: 100%; }
  .cat { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; } .reveal-img::after { display: none; } .reveal-img img { transform: none; }
}

/* test switch: ?shot=1 renders everything visible for full-page screenshots */
html.shot .reveal { opacity: 1; transform: none; transition: none; }
html.shot .reveal-img::after { display: none; } html.shot .reveal-img img { transform: none; }
html.shot .hero { min-height: 760px; } html.shot .hero__zoom, html.shot .hero__body > *, html.shot .hero__foot { animation: none; } html.shot .hero__mist { display: none; } html.shot .reveal-x .rail__track { transform: none; opacity: 1; transition: none; } html.shot .nav { position: relative; } html.shot .order-pill { display: none; }
html.shot .menu__nav { position: static; }