@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,400..500&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  --ink:#17140f;
  --muted:#5c554b;
  --line:#d9d1c2;
  --hairline:rgba(31,49,40,.14);
  --paper:#f4efe4;
  --cream:#f9f5eb;
  --forest:#1f3128;
  --forest-deep:#16241d;
  --accent:#8f3f33;
  --accent-soft:rgba(143,63,51,.14);
  --feature:#e8d7c4;
  --white:#fffdf7;
  --shadow-sm:0 12px 30px -18px rgba(22,36,29,.28);
  --shadow-lg:0 30px 70px -40px rgba(22,36,29,.35);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0;
  color:var(--ink);
  font-family:"Inter", Aptos, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(1200px 720px at 8% -10%, rgba(255,253,247,.75), transparent 60%),
    radial-gradient(1000px 700px at 100% 8%, rgba(217,209,194,.38), transparent 55%),
    var(--paper);
  background-attachment:fixed;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
::selection { background:var(--accent-soft); color:var(--forest-deep); }

/* ---------- Header ---------- */
.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:20;
  padding:22px clamp(20px,4vw,48px);
  color:var(--white);
  transition:background .25s ease, padding .25s ease, color .25s ease, border-color .25s ease;
}
.site-header.scrolled {
  padding:14px clamp(20px,4vw,48px);
  background:rgba(249,245,235,.92);
  color:var(--forest-deep);
  border-bottom:1px solid rgba(31,49,40,.14);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}
.brand {
  font-family:"Fraunces", "Cormorant Garamond", Georgia, serif;
  font-optical-sizing:auto;
  font-variation-settings:"opsz" 96;
  font-size:22px;
  font-weight:500;
  letter-spacing:-0.005em;
  display:inline-flex;
  align-items:baseline;
  gap:10px;
}
.brand::before {
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 0 0 3px rgba(143,63,51,.14);
}
.nav-links {
  display:flex;
  gap:26px;
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
}
.nav-links a {
  position:relative;
  padding:6px 0;
}
.nav-links a::after {
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:currentColor;
  opacity:0;
  transform:scaleX(.3);
  transform-origin:left;
  transition:opacity .2s ease, transform .25s ease;
}
.nav-links a:hover::after { opacity:.75; transform:scaleX(1); }

/* ---------- Hero ---------- */
.hero {
  min-height:100vh;
  min-height:100svh;
  position:relative;
  display:flex;
  align-items:end;
  overflow:hidden;
  color:var(--white);
  background:var(--forest-deep);
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(180deg, rgba(22,36,29,.35) 0%, rgba(22,36,29,0) 28%, rgba(22,36,29,.14) 55%, rgba(22,36,29,.78) 100%),
    linear-gradient(90deg, rgba(22,36,29,.78), rgba(22,36,29,.25) 55%, rgba(22,36,29,.05)),
    var(--hero);
  background-size:cover;
  background-position:center;
  transform:scale(1.06);
  animation:heroFloat 26s ease-in-out infinite alternate;
}
@keyframes heroFloat {
  from { transform:scale(1.04) translate3d(-0.5%, 0.4%, 0); }
  to   { transform:scale(1.10) translate3d(0.7%, -0.6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation:none; transform:scale(1.04); }
}
.hero-inner {
  position:relative;
  z-index:1;
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
  padding:clamp(140px, 22vh, 200px) 0 clamp(72px, 10vh, 108px);
}
.eyebrow {
  margin:0 0 22px;
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:11.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:700;
  color:rgba(255,253,247,.92);
}
.eyebrow::before {
  content:"";
  width:28px; height:1px;
  background:currentColor;
  opacity:.65;
}
h1, h2, h3 {
  font-family:"Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-optical-sizing:auto;
  font-variation-settings:"opsz" 144;
  letter-spacing:-0.018em;
}
h1 {
  max-width:14ch;
  margin:0;
  font-size:clamp(42px, 7.4vw, 92px);
  line-height:.96;
  font-weight:400;
  text-wrap:balance;
}
.hero-copy {
  max-width:560px;
  margin:26px 0 0;
  font-size:clamp(16px, 1.4vw, 20px);
  line-height:1.55;
  color:rgba(255,253,247,.86);
  text-wrap:pretty;
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:34px;
}
.pill {
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0 26px;
  background:var(--white);
  color:var(--forest-deep);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  transition:transform .18s ease, background .2s ease, color .2s ease, box-shadow .25s ease;
  border:1px solid transparent;
}
.pill:hover {
  transform:translateY(-1px);
  box-shadow:0 14px 30px -14px rgba(22,36,29,.4);
}
.pill.secondary {
  background:transparent;
  color:var(--white);
  border-color:rgba(255,253,247,.55);
}
.pill.secondary:hover { background:rgba(255,253,247,.08); }

/* ---------- Sections ---------- */
.section {
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
  padding:clamp(72px, 9vw, 108px) 0;
  position:relative;
}
.section-kicker {
  margin:0 0 14px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:var(--accent);
  font-size:11.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:700;
}
.section-kicker::before {
  content:"";
  width:22px; height:1px;
  background:currentColor;
  opacity:.75;
}
h2 {
  margin:0;
  font-size:clamp(32px, 4.6vw, 60px);
  line-height:1;
  font-weight:400;
  text-wrap:balance;
}
.intro-grid {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(30px, 6vw, 96px);
  align-items:start;
}
.intro-copy {
  margin:0;
  color:var(--muted);
  font-size:clamp(17px, 1.4vw, 21px);
  line-height:1.6;
  max-width:52ch;
  text-wrap:pretty;
}

/* ---------- Gallery ---------- */
.gallery {
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
  margin-top:36px;
}
.gallery figure {
  margin:0;
  border-radius:6px;
  overflow:hidden;
  background:var(--cream);
  border:1px solid var(--hairline);
  position:relative;
}
.gallery figure:nth-child(1),
.gallery figure:nth-child(4) { grid-column:span 6; }
.gallery figure:nth-child(2),
.gallery figure:nth-child(3),
.gallery figure:nth-child(5),
.gallery figure:nth-child(6) { grid-column:span 3; }
.gallery figure img {
  width:100%;
  height:100%;
  min-height:260px;
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.6,.2,1);
}
@media (hover: hover) {
  .gallery figure:hover img { transform:scale(1.045); }
}

/* ---------- Cards ---------- */
.menu-grid, .review-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:36px;
}
.menu-card, .review-card, .visit-card {
  border:1px solid var(--hairline);
  background:var(--white);
  border-radius:6px;
  padding:32px 26px 30px;
  position:relative;
}
.menu-card {
  padding-top:34px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.menu-card::before {
  content:"";
  position:absolute;
  top:0; left:26px; right:26px;
  height:2px;
  background:var(--accent);
  opacity:.85;
}
.menu-card.feature {
  background:var(--forest);
  color:var(--white);
  border-color:var(--forest);
  box-shadow:var(--shadow-sm);
}
.menu-card.feature::before { background:rgba(255,253,247,.62); }
.menu-card h3, .review-card h3 {
  margin:0 0 12px;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-0.01em;
}
.menu-card p, .review-card p {
  margin:0;
  color:var(--muted);
  font-size:15.5px;
  line-height:1.55;
}
.menu-card.feature p { color:rgba(255,253,247,.82); }

.review-card { padding-top:38px; }
.review-card::before {
  content:"\201C";
  position:absolute;
  top:14px; right:22px;
  font-family:"Fraunces", serif;
  font-style:italic;
  font-size:56px;
  line-height:1;
  color:var(--accent);
  opacity:.24;
}

/* ---------- Visit ---------- */
.visit {
  display:grid;
  grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);
  gap:18px;
  margin-top:36px;
}
.visit-card {
  padding:34px 30px 28px;
}
.visit-card h3 {
  margin:0 0 20px;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-0.005em;
}
.visit-card p {
  margin:0 0 10px;
  color:var(--ink);
  font-size:15.5px;
  font-variant-numeric:tabular-nums;
}
.visit-card p a {
  color:var(--accent);
  border-bottom:1px solid rgba(143,63,51,.28);
  padding-bottom:1px;
  transition:border-color .2s ease;
}
.visit-card p a:hover { border-bottom-color:var(--accent); }
.visit-card .actions { margin-top:22px; }
.visit-card .actions .pill {
  background:var(--forest);
  color:var(--white);
}
.visit-card .actions .pill:hover { background:var(--forest-deep); }
.map {
  min-height:430px;
  border:1px solid var(--hairline);
  border-radius:6px;
  overflow:hidden;
  background:var(--cream);
}
.map iframe {
  width:100%;
  height:100%;
  min-height:430px;
  border:0;
  filter:saturate(.9) contrast(.98);
}

/* ---------- Footer ---------- */
footer {
  background:var(--forest-deep);
  color:var(--white);
  padding:56px clamp(20px,4vw,48px) 96px;
  margin-top:40px;
  border-top:1px solid rgba(255,253,247,.06);
}
.footer-inner {
  width:min(1200px, 100%);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.footer-inner strong {
  font-family:"Fraunces", "Cormorant Garamond", Georgia, serif;
  font-weight:400;
  font-size:20px;
  letter-spacing:-0.005em;
}
.footer-inner span {
  color:rgba(255,253,247,.65);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:11.5px;
  font-weight:600;
}

/* ---------- Mobile actions ---------- */
.mobile-actions {
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:30;
  display:none;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.mobile-actions a {
  min-height:50px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--forest-deep);
  color:var(--white);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  box-shadow:0 16px 34px -14px rgba(22,36,29,.55);
}
.mobile-actions a:last-child { background:var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .site-header { padding:16px 20px; }
  .site-header.scrolled { padding:12px 20px; }
  .nav-links { display:none; }

  .hero { min-height:92vh; min-height:92svh; }
  .hero-inner { padding:128px 0 96px; }
  h1 {
    font-size:clamp(38px, 10.5vw, 60px);
    line-height:.98;
    letter-spacing:-0.022em;
    max-width:13ch;
  }
  .eyebrow { margin-bottom:18px; font-size:10.5px; letter-spacing:.22em; }
  .hero-copy { font-size:16px; margin-top:22px; }
  .actions { margin-top:28px; gap:10px; }
  .pill { min-height:46px; padding:0 22px; font-size:11.5px; }

  .section { padding:60px 0; width:calc(100% - 32px); }
  h2 { font-size:clamp(28px, 8vw, 42px); line-height:1.02; }
  .section-kicker { font-size:10.5px; letter-spacing:.22em; margin-bottom:12px; }
  .intro-copy { font-size:17px; line-height:1.55; }

  .intro-grid, .visit, .menu-grid, .review-grid { grid-template-columns:1fr; gap:14px; }
  .gallery { grid-template-columns:1fr; gap:12px; margin-top:28px; }
  .gallery figure, .gallery figure:nth-child(n) { grid-column:auto; }
  .gallery figure img { min-height:220px; aspect-ratio:4/3; }

  .menu-card, .review-card { padding:26px 22px; }
  .menu-card { padding-top:28px; }
  .menu-card::before { left:22px; right:22px; }
  .menu-card h3, .review-card h3 { font-size:20px; }
  .visit-card { padding:28px 22px; }
  .visit-card h3 { font-size:20px; margin-bottom:16px; }
  .map, .map iframe { min-height:320px; }

  footer { padding:44px 20px 108px; margin-top:24px; }
  .footer-inner { flex-direction:column; align-items:flex-start; gap:10px; }
  .footer-inner strong { font-size:18px; }

  .mobile-actions { display:grid; }
}

@media (max-width: 400px) {
  h1 { font-size:38px; letter-spacing:-0.024em; }
  .hero-inner { padding:120px 0 88px; }
  .hero-copy { font-size:15.5px; }
  .section { padding:52px 0; }
}