:root { --ink:#3f332b; --muted:#796c61; --paper:#f7f0e7; --cream:#fffaf3; --terracotta:#c86748; --orange:#e7a56b; --sage:#a9b69a; --line:#dfd4c7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-family:"Playfair Display",serif; letter-spacing:-1.5px; }
h1 em,h2 em { color:var(--terracotta); font-weight:600; }
.section { padding:110px 8vw; }
.eyebrow { margin-bottom:18px; color:var(--terracotta); font-size:10px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:46px; padding:12px 20px; border:1px solid transparent; border-radius:999px; font-size:12px; font-weight:700; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.button-dark { background:var(--ink); color:var(--cream); }
.button-light { background:var(--cream); color:var(--ink); }
.button-outline { border-color:var(--ink); }
.text-link { display:inline-block; border-bottom:1px solid currentColor; padding-bottom:3px; font-size:12px; font-weight:700; }

/* Navigation */
.site-header { position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between; min-height:84px; padding:0 6.5vw; border-bottom:1px solid rgba(63,51,43,.08); }
.brand { font:700 23px/1 "Playfair Display",serif; letter-spacing:-.9px; }
.brand span { color:var(--terracotta); font-style:italic; }
.site-nav { display:flex; align-items:center; gap:31px; font-size:13px; font-weight:600; }
.nav-order { padding:10px 17px; border:1px solid var(--ink); border-radius:999px; }
.menu-toggle { display:none; border:0; background:transparent; }

/* Hero */
.hero { display:grid; grid-template-columns:1fr 1fr; min-height:650px; }
.hero-copy { padding:12vw 7vw 7vw 12vw; }
h1 { max-width:560px; font-size:clamp(50px,5.35vw,83px); line-height:.99; }
.hero-copy>p:not(.eyebrow):not(.hero-note) { max-width:390px; margin-top:25px; color:var(--muted); font-size:16px; line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:25px; margin-top:31px; }
.hero-note { margin-top:67px; color:var(--muted); font:italic 12px/1.5 "Playfair Display",serif; }
.hero-image { position:relative; min-height:650px; overflow:hidden; background:#87614f; }
.hero-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.78) sepia(.12); }
.hero-image::after { position:absolute; inset:0; content:""; background:linear-gradient(135deg,rgba(63,35,27,.2),transparent 60%,rgba(63,35,27,.3)); }
.hero-image figcaption { position:absolute; right:8%; bottom:8%; z-index:1; color:var(--cream); font:italic 16px "Playfair Display",serif; text-shadow:0 1px 12px #342018; }

/* Gallery */
.gallery { background:var(--cream); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:43px; }
.section-heading h2,.story h2,.order-section h2 { font-size:clamp(36px,3.6vw,55px); line-height:1.05; }
.section-heading>p { max-width:315px; color:var(--muted); font-size:14px; line-height:1.65; }
.photo-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; grid-auto-rows:240px; gap:16px; }
.photo-card { position:relative; overflow:hidden; background:#dcb184; }
.photo-card--large { grid-row:span 2; }
.photo-card:nth-child(4) { grid-column:span 2; }
.photo-card img { width:100%; height:100%; object-fit:cover; filter:saturate(.78) sepia(.08); transition:transform .45s; }
.photo-card:hover img { transform:scale(1.04); }
.photo-card::after { position:absolute; inset:45% 0 0; content:""; background:linear-gradient(transparent,rgba(42,26,20,.68)); }
.photo-card figcaption { position:absolute; left:18px; bottom:16px; z-index:1; color:var(--cream); font:italic 17px "Playfair Display",serif; }

/* Menu */
.menu-section { background:var(--paper); }
.menu-tabs { position:relative; display:grid; grid-template-columns:1fr 1fr; width:min(380px,100%); padding:4px; border:1px solid var(--line); border-radius:999px; }
.menu-tab { position:relative; z-index:1; border:0; border-radius:999px; background:transparent; padding:12px; color:var(--muted); font:700 12px "DM Sans",sans-serif; cursor:pointer; }
.menu-tab span { display:inline-grid; min-width:19px; height:19px; place-items:center; margin-left:4px; border-radius:999px; background:rgba(63,51,43,.08); font-size:9px; }
.menu-tab.is-active { color:var(--cream); }
.menu-tab.is-active span { background:rgba(255,255,255,.18); }
.tab-highlight { position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:999px; background:var(--ink); transition:transform .32s cubic-bezier(.2,.8,.2,1); }
.menu-tabs[data-active="1"] .tab-highlight { transform:translateX(100%); }
.menu-viewport { overflow:hidden; margin-top:25px; }
.menu-track { display:flex; width:200%; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.menu-track[data-active="1"] { transform:translateX(-50%); }
.menu-panel { display:grid; flex:0 0 50%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding-right:18px; }
.menu-item { overflow:hidden; border-left:3px solid var(--terracotta); background:var(--cream); }
.menu-item:nth-child(3n+2) { border-color:var(--orange); }
.menu-item:nth-child(3n) { border-color:var(--sage); }
.menu-item img { display:block; width:100%; height:170px; object-fit:cover; }
.menu-item__body { padding:20px; }
.menu-item__number { color:var(--terracotta); font-size:10px; font-weight:700; letter-spacing:1px; }
.menu-item h3 { margin-top:15px; font-size:22px; }
.menu-item p { margin-top:7px; color:var(--muted); font-size:12px; line-height:1.45; }
.menu-item strong { display:block; margin-top:13px; font-size:12px; }

/* Story, journal, and order */
.story { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:12vw; }
.story-art { position:relative; height:450px; overflow:hidden; background:#d9a16c; }
.story-art p { position:absolute; top:14%; left:11%; z-index:1; font:italic 28px/1.1 "Playfair Display",serif; }
.story-sun { position:absolute; top:42px; right:15%; width:220px; height:220px; border-radius:50%; background:#f5da9f; }
.story-hill { position:absolute; bottom:-22%; border-radius:50% 50% 0 0; }
.story-hill--back { left:-10%; width:90%; height:45%; background:#879c7e; }
.story-hill--front { right:-28%; width:90%; height:35%; background:#556d59; }
.story-copy { max-width:390px; margin:23px 0 29px; color:var(--muted); line-height:1.75; }
.journal { display:grid; grid-template-columns:1fr auto; gap:35px; align-items:end; border-top:1px solid var(--line); }
.journal blockquote { grid-column:1/-1; max-width:720px; margin:0; border-top:1px solid var(--line); padding-top:33px; color:#6c5648; font:italic 27px/1.25 "Playfair Display",serif; }
.order-section { display:flex; align-items:center; justify-content:space-between; gap:60px; padding:80px 12vw; background:#d47755; color:var(--cream); }
.order-section .eyebrow { color:#f5d4aa; }
.order-section>div:last-child { width:min(390px,100%); }
.order-section>div:last-child>p:first-child { margin-bottom:22px; color:#fce9dc; font-size:14px; line-height:1.65; }
.order-hint { margin-top:15px; color:#f9d2bd; font-size:12px; }
footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:35px 6.5vw; color:var(--muted); font-size:11px; }
footer .brand { color:var(--ink); font-size:18px; }

@media (max-width:800px) {
  .site-header { position:sticky; top:0; min-height:70px; padding:0 6vw; background:rgba(247,240,231,.96); backdrop-filter:blur(12px); }
  .menu-toggle { position:relative; z-index:13; display:grid; gap:5px; padding:8px; }
  .menu-toggle span { width:23px; height:1.5px; background:var(--ink); transition:transform .25s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3.25px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3.25px) rotate(-45deg); }
  .site-nav { position:fixed; inset:70px 0 0 auto; display:flex; width:min(360px,86vw); height:calc(100dvh - 70px); flex-direction:column; align-items:flex-start; gap:27px; padding:48px 8vw; background:var(--cream); box-shadow:-14px 0 45px rgba(63,51,43,.15); transform:translateX(105%); transition:transform .32s cubic-bezier(.2,.8,.2,1); }
  .site-nav.is-open { transform:translateX(0); }
  .site-nav a { font-size:17px; }
  .site-nav .nav-order { font-size:13px; }
  body.menu-open { overflow:hidden; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { padding:78px 10vw 60px; }
  .hero-image { min-height:440px; }
  .section { padding:75px 7vw; }
  .section-heading { display:block; }
  .section-heading>p { margin-top:19px; }
  .photo-grid { grid-template-columns:1fr 1fr; grid-auto-rows:230px; }
  .photo-card:nth-child(4) { grid-column:span 1; }
  .menu-panel { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .story { grid-template-columns:1fr; gap:42px; }
  .journal { grid-template-columns:1fr; gap:23px; }
  .order-section { display:grid; grid-template-columns:1fr 1fr; padding:65px 10vw; }
  footer { flex-wrap:wrap; padding:30px 7vw; }
  footer p:last-child { width:100%; }
}

@media (max-width:600px) {
  .hero-copy { padding:60px 7vw 53px; }
  h1 { font-size:51px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }
  .hero-image { min-height:390px; }
  .photo-grid { grid-template-columns:1fr; grid-auto-rows:235px; gap:11px; }
  .photo-card--large { height:330px; grid-row:auto; }
  .menu-panel { grid-template-columns:1fr; padding-right:10px; }
  .menu-item { display:grid; grid-template-columns:105px 1fr; }
  .menu-item img { height:145px; }
  .menu-item__body { padding:17px; }
  .menu-item h3 { margin-top:10px; font-size:20px; }
  .menu-item strong { margin-top:8px; }
  .story-art { height:320px; }
  .journal blockquote { font-size:23px; }
  .order-section { display:block; padding:58px 7vw; }
  .order-section>div:last-child { margin-top:35px; }
  .order-section .button { width:100%; }
  footer { display:grid; grid-template-columns:1fr auto; align-items:center; }
}