:root {
  /* Layout: one quiet centered column, like a card on the counter. */
  --bg: #ACB19B; --ink: #2F3120; --soft: #474A33; --line: #C7CBB6;
  --accent: #2F3120; --warm: #7A4A16; --btn-bg: #F1EADD; --btn-ink: #2F3120;
  --panel: #B8BDA7;
  --display: "Alegreya", "Georgia", serif;
  --body: "Alegreya", "Georgia", serif;
  --mono: "Alegreya", "Georgia", serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 1.125rem; line-height: 1.65;
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.wrap {
  width: 100%; max-width: 1040px; margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* Navigation */
.site-nav { padding-block: 22px; border-bottom: 1px solid var(--line); }
.site-nav .wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 34px; }
.site-nav a {
  font-family: var(--body); font-size: 1.05rem; letter-spacing: 0.03em; text-transform: lowercase;
  text-decoration: none; color: var(--soft); padding-block: 4px; border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

main { flex: 1; }

/* Home */
.home { text-align: center; padding-block: 40px 56px; display: flex; flex-direction: column; align-items: center; gap: 40px;
  min-height: calc(100vh - 150px); min-height: calc(100svh - 150px); }
.logo-stage { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.home .logo { width: 440px; max-width: 76vw; }
.tagline { font-family: var(--display); font-style: italic; font-size: clamp(1.35rem, 3vw, 1.75rem); line-height: 1.3; margin: 0; max-width: 24ch; text-wrap: balance; }
.details { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px;
  font-family: var(--body); font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.3; }
.details a { text-decoration: none; text-underline-offset: 4px; }
.details a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.details .label { display: block; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft); margin-bottom: 2px; }
.pending { color: var(--soft); font-style: italic; }
.sprig { width: 18px; height: 1px; background: var(--ink); opacity: 0.35; margin: 4px auto; }

/* Inner pages */
.page { padding-block: 56px 80px; }
.page-head { text-align: center; margin-bottom: 44px; }
.eyebrow { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--soft); margin: 0 0 14px; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.12; margin: 0 auto; max-width: 20ch; text-wrap: balance; }
.lede { font-size: 1.3rem; line-height: 1.55; max-width: 34ch; margin: 22px auto 0; text-wrap: balance; }
.lede-2 { margin-top: 12px; font-size: 1.15rem; font-style: italic; color: var(--soft); }

/* About */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; }
.story figure { margin: 0; }
.story .portrait { border-radius: 6px; width: 100%; }
.story figure { display: flex; flex-direction: column; gap: 20px; }
.story .portrait + .portrait { width: 72%; align-self: center; }
.story .text { min-width: 0; max-width: 62ch; }
.story .text h2 { font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1.25; margin: 0 0 18px; text-wrap: balance; }
.story .text p { margin: 0 0 1.1em; }
.story .text p:last-child { margin-bottom: 0; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 64px 0 0; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.gallery-caption { grid-column: 1 / -1; text-align: center; margin: 0; font-style: italic; color: var(--soft); }
@media (max-width: 560px) { .gallery { grid-template-columns: minmax(0, 1fr); } }
.wide figcaption { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--soft); margin-top: 12px; text-align: center; }

/* Menu */
.menu-image { max-width: 1000px; margin: 0 auto; }
.menu-image { margin: 0 auto; }
.menu-image img { width: 100%; border-radius: 4px; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 30px rgba(47,49,32,.18); }
.placeholder {
  max-width: 560px; margin: 0 auto; text-align: center; padding: 56px 28px;
  border: 1px dashed var(--soft); border-radius: 6px; background: var(--panel);
}
.placeholder p { margin: 0; }
.placeholder p + p { margin-top: 10px; font-family: var(--mono); font-size: 0.85rem; color: var(--soft); }

/* Order */
.order { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.btn {
  display: inline-block; font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; background: var(--btn-bg); color: var(--btn-ink); padding: 18px 40px; border-radius: 999px;
  border: 1px solid var(--btn-ink); transition: transform .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: default; transform: none; }
.small { font-family: var(--mono); font-size: 0.85rem; color: var(--soft); margin: 0; }

/* Footer */
.site-foot { border-top: 1px solid var(--line); padding-block: 22px; }
.site-foot .wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--soft); text-align: center; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .story { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .story figure { max-width: 380px; margin: 0 auto; }
  .site-nav .wrap { gap: 8px 22px; }
  .home { padding-block: 40px 56px; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }