@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/eb61f739-b420-40a7-9af3-b1c001a86723.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("assets/a3006c13-f485-48dd-9e26-7e53d75b18c3.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

@font-face {
  font-family: "EB Garamond";
  src: url("assets/b143058b-8a53-45d1-ab94-369f0c3aee1d.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #faf2e4;
  --paper-warm: #f5ebd9;
  --ink: #1e1b18;
  --ink-soft: #5e5245;
  --muted: #6b5b4a;
  --muted-light: #6b5b4a;
  --red: #c4302b;
  --red-dark: #7e1815;
  --nav-height: 66px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); }
main > section[id] { scroll-margin-top: var(--nav-height); }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: rgba(196, 48, 43, 0.16); }
a { color: #a32220; text-decoration: none; }
a:hover { color: var(--red-dark); }
button { font: inherit; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: rgba(196, 48, 43, 0.2); color: var(--ink); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--red-dark);
  outline-offset: 4px;
}

.page-shell {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: "EB Garamond", serif;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--red-dark);
  color: var(--paper);
  font-family: "Cormorant Garamond", serif;
  letter-spacing: 0.08em;
  transform: translateY(-160%);
}
.skip-link:focus { color: var(--paper); transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 242, 228, 0.94);
}

.primary-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px;
  padding: 22px 5vw;
  overflow-x: auto;
  white-space: nowrap;
}

.primary-navigation a {
  color: var(--ink);
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  letter-spacing: 0.06em;
}

.hero-section,
.featured-menu-section,
.cooked-with-care-section,
.our-story-section,
.gallery-section,
.reviews-section,
.visit-section,
.site-footer { position: relative; overflow: hidden; }

.decorative-artwork { position: absolute; inset: 0; pointer-events: none; }
.decorative-wave {
  position: absolute;
  right: 0;
  left: 0;
  background-image: url("assets/0123528f-f979-4b5a-a1d4-34bfd0efcbf1.png");
  background-position: center bottom;
  background-size: cover;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
}

.decorative-wave--hero { bottom: 0; height: 360px; opacity: 0.85; }
.decorative-wave--menu { top: 0; height: 300px; opacity: 0.5; transform: scale(-1); }
.decorative-wave--gallery { bottom: 0; height: 300px; opacity: 0.6; transform: scaleX(-1); }
.decorative-wave--footer { bottom: 0; height: 240px; opacity: 0.55; }

.section-content,
.footer-content { position: relative; }

.hero-section {
  padding: 70px 5vw 110px;
  background: var(--paper);
  text-align: center;
}

.hero-layout {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.decorative-chopsticks {
  position: absolute;
  top: 84px;
  right: calc(50% + 293px);
  width: min(594px, 42vw);
  height: auto;
  pointer-events: none;
}

.hero-content {
  display: flex;
  max-width: none;
  margin: 0;
  flex-direction: column;
  align-items: center;
}

.hero-logo { width: min(360px, 72vw); height: auto; margin-bottom: 6px; }
.eyebrow {
  margin: 0 0 18px;
  color: #a32220;
  font-family: "Cormorant Garamond", serif;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.hero-eyebrow { margin-bottom: 52px; color: var(--muted); font-size: 16px; }
.hero-content h1 {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 0 0 26px;
  color: var(--red);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(34px, 5.4vw, 62px);
  font-weight: 400;
  line-height: 1.18;
}
.hero-content h1 span { display: block; text-wrap: balance; }
.hero-description {
  max-width: 520px;
  margin: 0 0 40px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.8;
}
.action-group { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.button {
  display: inline-block;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  letter-spacing: 0.14em;
  line-height: normal;
  text-transform: uppercase;
}
.button--primary { padding: 15px 40px; background: var(--red); color: var(--paper); }
.button--primary:hover { color: var(--paper); background: var(--red-dark); }
.button--secondary { padding: 14px 38px; border: 1px solid var(--ink); color: var(--ink); }
.hero-details { margin: 34px 0 0; color: var(--muted); font-family: "Cormorant Garamond", serif; font-size: 20px; letter-spacing: 0.08em; }

.featured-menu-section { padding: 100px 5vw 110px; background: var(--paper-warm); }
.menu-content { max-width: 1180px; margin: 0 auto; }
.section-heading { text-align: center; }
.menu-heading { max-width: 680px; margin: 0 auto 64px; }
.section-heading h2,
.story-copy h2,
.visit-details h2 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 400;
}
.menu-heading h2 { margin-bottom: 16px; font-size: clamp(28px, 3.8vw, 44px); }
.section-description { margin: 0; color: var(--ink-soft); font-size: 16.5px; line-height: 1.75; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 44px 36px; }
.menu-item { text-align: center; }
.image-button, .gallery-image { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.image-button { margin-bottom: 22px; border-radius: 50%; overflow: hidden; }
.image-button img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.menu-item h3 { margin: 0 0 8px; font-family: "Cormorant Garamond", serif; font-size: 23px; font-weight: 400; letter-spacing: 0.04em; }
.menu-item > p { max-width: 250px; margin: 0 auto; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.menu-item .dietary-label { margin-top: 8px; color: #a32220; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: 0.22em; line-height: normal; text-transform: uppercase; }
.menu-action { margin-top: 64px; text-align: center; }

.cooked-with-care-section { display: grid; min-height: 482px; padding: 96px 5vw; align-items: center; background: var(--paper); text-align: center; }
.care-artwork { background: url("assets/care-artwork.png") center / cover no-repeat; }
.care-content { max-width: 660px; margin: 0 auto; }
.care-content h2 { margin: 0 0 20px; font-family: "Cormorant Garamond", serif; font-size: clamp(26px, 3.4vw, 38px); font-weight: 400; }
.care-description { max-width: 520px; margin: 0 auto; color: var(--ink-soft); font-size: 16.5px; line-height: 1.85; }

.our-story-section { padding: 100px 5vw; background: var(--paper-warm); }
.story-content { display: grid; max-width: 1140px; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 64px; align-items: center; }
.restaurant-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.story-copy h2 { margin-bottom: 22px; }
.story-copy > p:not(.eyebrow) { margin: 0 0 18px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.85; }
.story-copy > p:last-child { margin-bottom: 0; }

.gallery-section { padding: 100px 5vw; background: var(--paper); }
.gallery-content { max-width: 1140px; margin: 0 auto; }
.gallery-heading { max-width: 600px; margin: 0 auto 56px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; }
.gallery-image--featured { grid-column: span 2; }
.gallery-image img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery-image--featured img { aspect-ratio: 2 / 1; }
.gallery-image--rotated { overflow: hidden; }
.gallery-image--rotated img { transform: rotate(-90deg) scale(1.34); }

.reviews-section { padding: 100px 5vw; background: var(--paper-warm); }
.reviews-content { max-width: 1140px; margin: 0 auto; }
.reviews-heading { max-width: 600px; margin: 0 auto 56px; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 48px; text-align: center; }
.review-card { margin: 0; }
.review-stars { margin: 0 0 18px; color: var(--red); font-size: 14px; letter-spacing: 5px; }
.review-card blockquote { margin: 0 0 16px; font-family: "Cormorant Garamond", serif; font-size: 21px; font-style: italic; line-height: 1.6; }
.review-card figcaption { color: var(--muted); font-family: "Cormorant Garamond", serif; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }

.visit-section { padding: 100px 5vw; background: var(--paper); }
.visit-content { display: grid; max-width: 1140px; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 60px; align-items: center; }
.visit-details h2 { margin-bottom: 28px; }
.visit-details address { margin-bottom: 26px; color: var(--ink-soft); font-size: 17px; font-style: normal; line-height: 1.9; }
.hours-list { max-width: 320px; margin: 0 0 30px; padding-top: 20px; border-top: 1px solid rgba(30, 27, 24, 0.16); font-family: "Cormorant Garamond", serif; font-size: 17px; }
.hours-list div { display: flex; justify-content: space-between; gap: 24px; padding: 5px 0; }
.hours-list dt, .hours-list dd { margin: 0; }
.hours-list .closed { color: var(--muted-light); }
.location-map-container { position: relative; height: 340px; overflow: hidden; background: #e9e4d8; }
.location-map { display: block; width: 100%; height: 100%; border: 0; }
.location-map-link { position: absolute; right: 14px; bottom: 14px; z-index: 1; display: inline-flex; min-height: 44px; padding: 10px 16px; align-items: center; border: 1px solid rgba(126, 24, 21, 0.34); background: rgba(250, 242, 228, 0.96); color: var(--red-dark); font-family: "Cormorant Garamond", serif; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.location-map-link:hover { background: var(--paper); color: var(--red-dark); }

.site-footer { padding: 54px 5vw 60px; background: var(--paper-warm); text-align: center; }
.footer-content { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.footer-logo { height: 64px; width: auto; opacity: 0.85; }
.footer-address { margin: 0; color: var(--muted); font-family: "Cormorant Garamond", serif; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; }
.footer-copyright { margin: 0; color: var(--muted-light); font-size: 14px; }

.sticky-call { position: fixed; right: 24px; bottom: 24px; z-index: 50; padding: 14px 28px; background: var(--red); box-shadow: 0 10px 26px rgba(30, 27, 24, 0.22); color: var(--paper); font-family: "Cormorant Garamond", serif; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; }
.sticky-call:hover { color: var(--paper); background: var(--red-dark); }

.lightbox { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 30px; border: 0; overflow: hidden; overscroll-behavior: contain; background: rgba(24, 18, 14, 0.9); cursor: zoom-out; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: transparent; }
.lightbox-stage { display: flex; max-width: 92vw; max-height: 88vh; align-items: center; justify-content: center; cursor: default; }
.lightbox-image { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.lightbox-status { max-width: 34rem; margin: 0; padding: 24px 28px; background: var(--paper); color: var(--ink); font-size: 18px; line-height: 1.6; text-align: center; }
.lightbox-close { position: fixed; top: 22px; right: 26px; width: 44px; height: 44px; border: 1px solid var(--paper); background: rgba(24, 18, 14, 0.5); color: var(--paper); cursor: pointer; font-family: "EB Garamond", serif; font-size: 22px; }
.lightbox--menu { align-items: flex-start; padding-top: 5vh; padding-bottom: 5vh; }
.lightbox--menu .lightbox-stage { display: block; width: min(1180px, 92vw); max-width: none; max-height: 90vh; overflow: auto; overscroll-behavior: contain; background: var(--paper); }
.lightbox--menu .lightbox-image { width: 100%; max-width: none; max-height: none; height: auto; object-fit: contain; }

@media (max-width: 900px) {
  .hero-layout {
    --hero-art-rail: clamp(96px, 23vw, 180px);
    --hero-chopsticks-width: clamp(170px, 39vw, 300px);
  }
  .hero-content { padding-left: var(--hero-art-rail); }
  .decorative-chopsticks {
    right: auto;
    left: calc(var(--hero-art-rail) - var(--hero-chopsticks-width));
    width: var(--hero-chopsticks-width);
  }
  .sticky-call { display: none; }
}

@media (min-width: 1100px) {
  .page-shell::after {
    display: block;
    height: max(0px, calc(100svh - var(--nav-height) - 806px));
    background: var(--paper-warm);
    content: "";
  }
}

@media (max-width: 760px) {
  .featured-menu-section,
  .cooked-with-care-section,
  .our-story-section,
  .gallery-section,
  .reviews-section,
  .visit-section { padding-top: 72px; padding-bottom: 72px; }
  .cooked-with-care-section { min-height: 0; }
}

@media (max-width: 520px) {
  :root { --nav-height: 60px; }
  .primary-navigation { justify-content: center; gap: 4px 10px; padding: 8px 12px; overflow: visible; white-space: normal; }
  .primary-navigation a { display: inline-flex; min-height: 44px; align-items: center; font-size: 17px; }
  .hero-section { padding-top: 52px; }
  .decorative-chopsticks { top: 118px; opacity: 0.72; }
  .hero-eyebrow { margin-bottom: 40px; font-size: 14px; }
  .hero-content h1 { gap: 8px; }
  .hero-details { font-size: 15px; line-height: 1.6; letter-spacing: 0.06em; }
  .action-group { justify-content: center; }
  .gallery-image--featured { grid-column: span 1; }
  .gallery-image--featured img { aspect-ratio: 1; }
  .hours-list { max-width: none; }
  .hours-list div { align-items: baseline; }
  .care-description { line-height: 1.75; }
  .location-map-container { height: 260px; }
  .footer-address { max-width: 300px; line-height: 1.7; letter-spacing: 0.16em; }
  .lightbox { padding: 18px; }
  .lightbox-close { top: 12px; right: 12px; }
  .lightbox--menu { padding: 60px 4vw 4vh; }
  .lightbox--menu .lightbox-stage { width: 92vw; max-height: calc(96vh - 60px); }
  .lightbox--menu .lightbox-image { width: 900px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}