@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root {
  --ink:#17120f;
  --ink-soft:#241b16;
  --wine:#78291f;
  --red:#d53a25;
  --red-dark:#b72b1b;
  --cream:#f0dfc2;
  --gold:#d1a14e;
  --text:#f8ecda;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#17120f; color:#f8ecda; font-family:"DM Sans",Arial,sans-serif; }
img { max-width:100%; display:block; }
a { color:inherit; }
h1,h2 { margin:0; font-family:"Fraunces",Georgia,serif; font-weight:700; line-height:.96; letter-spacing:-.035em; }
h1 { font-size:clamp(54px,6.2vw,104px); }
h2 { font-size:clamp(43px,5.2vw,80px); }
.eyebrow { margin:0 0 20px; color:#d1a14e; font-size:12px; font-weight:600; letter-spacing:.19em; text-transform:uppercase; }

.site-header { position:fixed; z-index:40; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:24px 3.2vw; }
.header-logo { width:min(330px,38vw); opacity:0; pointer-events:none; }
.header-actions { display:flex; align-items:center; gap:12px; }
.header-book,.button { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 27px; border-radius:999px; border:0; background:#B73F25; color:#fff; font-weight:600; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.22); transition:transform .2s ease,background .2s ease; }
.header-book:hover,.button:hover { transform:translateY(-2px); background:#96301c; }
.header-book { min-height:48px; padding:0 23px; }
.menu-toggle { width:54px; height:54px; padding:0 14px; border:1px solid rgba(255,255,255,.62); border-radius:50%; background:rgba(19,14,12,.82); backdrop-filter:blur(10px); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-decoration:none; }
.menu-toggle span { width:24px; height:2px; background:#fff; transition:.25s ease; }

.menu-panel { position:fixed; z-index:50; top:16px; right:16px; width:min(430px,calc(100vw - 32px)); max-height:calc(100svh - 32px); overflow-y:auto; padding:32px; border:1px solid rgba(255,255,255,.15); border-radius:25px; background:rgba(23,18,15,.985); box-shadow:0 20px 70px rgba(0,0,0,.48); visibility:hidden; opacity:0; transform:translateY(-14px) scale(.98); transform-origin:top right; transition:.22s ease; }
.menu-panel:target { visibility:visible; opacity:1; transform:none; }
.menu-close { position:absolute; top:18px; right:22px; color:#fff; font-size:40px; line-height:1; text-decoration:none; }
.menu-panel nav { display:flex; flex-direction:column; align-items:flex-start; }
.menu-panel nav a { font-family:"Fraunces",Georgia,serif; font-size:31px; line-height:1.14; text-decoration:none; }
.menu-panel nav a:hover { color:#d1a14e; }
.menu-utilities { margin-top:30px; padding-top:24px; border-top:1px solid rgba(255,255,255,.17); display:flex; flex-direction:column; align-items:flex-start; gap:14px; font-size:16px; }
.menu-utilities>a:not(.button) { text-underline-offset:5px; }
.menu-utilities .button { margin-top:18px; }

.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:170px 7vw 9vh; isolation:isolate; background:url('hero-team.jpg') center/cover no-repeat; }
.hero::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,rgba(18,12,9,.96) 0%,rgba(18,12,9,.52) 52%,rgba(18,12,9,.08) 100%); }
.hero-content { max-width:1000px; }
.hero-logo { width:min(1120px,82vw); margin-bottom:38px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.hero-kicker { margin:0 0 24px; color:#f0dfc2; font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.hero h1 { max-width:820px; text-shadow:0 5px 24px rgba(0,0,0,.35); }
.actions { display:flex; align-items:center; gap:28px; margin-top:40px; flex-wrap:wrap; }
.text-link { color:#fff; font-weight:600; text-underline-offset:6px; }
.hero-menu-link { max-width:390px; }
.hero-menu-link p { margin:13px 0 0; color:#d7c9b7; font-size:13px; line-height:1.5; }
.scroll-cue { position:absolute; right:3.5vw; bottom:5vh; color:#fff; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; }

.manifesto { padding:145px 8vw 120px; background:#17120f; }
.manifesto h2 { max-width:1080px; }
.manifesto-copy { margin:54px 0 0 auto; max-width:730px; display:grid; grid-template-columns:1fr 1fr; gap:50px; color:#d7c9b7; font-size:19px; line-height:1.65; }
.manifesto-copy p { margin:0; }
.gallery { padding:0 18px 135px; display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:340px 340px; gap:14px; background:#17120f; }
.gallery figure { margin:0; overflow:hidden; }
.gallery-tall { grid-row:1 / span 2; }
.gallery img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.gallery figure:hover img { transform:scale(1.025); }

.lunch { display:grid; grid-template-columns:1fr 1fr; min-height:760px; background:#78291f; }
.lunch>img { width:100%; height:100%; object-fit:cover; }
.lunch-copy { padding:8vw 7vw; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.lunch-copy .eyebrow { color:#efbf6c; }
.lunch-copy>p:not(.eyebrow) { max-width:590px; margin:34px 0; font-size:19px; line-height:1.65; color:#f3ddcf; }

.service-row { min-height:650px; display:grid; grid-template-columns:1fr 1fr; }
.service-row>img { width:100%; height:100%; object-fit:cover; }
.service-copy { padding:8vw 7vw; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.service-copy>p:not(.eyebrow) { max-width:610px; margin:30px 0; font-size:19px; line-height:1.65; }
.aperitivo { background:#241b16; }
.aperitivo .service-copy>p:not(.eyebrow) { color:#d7c9b7; }
.aperitivo .text-link { font-weight:600; text-underline-offset:6px; }
.dinner { background:#78291f; }
.dinner .eyebrow { color:#efbf6c; }
.dinner .service-copy>p:not(.eyebrow) { color:#f3ddcf; }

.menu-block { padding:145px 8vw; background:#d1a14e; color:#17120f; display:grid; grid-template-columns:1.15fr .85fr; column-gap:8vw; }
.menu-block .eyebrow { grid-column:1 / -1; color:#78291f; }
.menu-block h2 { max-width:900px; }
.menu-block>p:not(.eyebrow) { align-self:end; margin:0 0 32px; font-size:20px; line-height:1.6; }
.menu-block .button { grid-column:2; justify-self:start; }
.menu-note { grid-column:2; margin-top:22px !important; font-size:14px !important; line-height:1.5 !important; font-weight:600; }
.button-gold { background:#17120f; color:#fff; box-shadow:none; }
.button-gold:hover { background:#78291f; }

.visit { display:grid; grid-template-columns:1.15fr .85fr; min-height:770px; background:#241b16; }
.visit-photo img { width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.05); }
.visit-card { padding:8vw 6vw; display:flex; flex-direction:column; justify-content:center; }
.hours { margin:45px 0 34px; border-top:1px solid rgba(255,255,255,.25); }
.hours p { display:grid; grid-template-columns:1.2fr 1fr; gap:18px; margin:0; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.19); }
.hours span { color:#d7c9b7; text-align:right; }
.contact-links { display:flex; flex-direction:column; align-items:flex-start; gap:14px; font-weight:600; }
.contact-links a { text-underline-offset:5px; }

.reviews { padding:145px 24px; background:#78291f; text-align:center; }
.reviews .eyebrow { color:#efbf6c; }
.reviews .button { margin-top:38px; }
.button-dark { background:#17120f; box-shadow:none; }
.button-dark:hover { background:#000; }

.instagram-follow { padding:115px 24px; background:#17120f; text-align:center; }
.instagram-follow h2 { font-size:clamp(42px,5vw,72px); }
.instagram-follow>p:not(.eyebrow) { max-width:570px; margin:27px auto 34px; color:#d7c9b7; font-size:18px; line-height:1.6; }

footer { padding:65px 5vw; display:grid; grid-template-columns:1fr 1.25fr auto; align-items:center; gap:45px; background:#0e0a08; color:#d7c9b7; }
footer img { width:min(340px,30vw); }
footer p { margin:5px 0; }
footer a { text-underline-offset:4px; }

@media (max-width:800px) {
  .site-header { position:fixed; padding:18px; }
  .header-logo { display:none; }
  .header-actions { margin-left:auto; }
  .header-book { display:inline-flex; min-height:46px; padding:0 18px; font-size:14px; }
  .menu-toggle { width:50px; height:50px; }
  .menu-panel { top:12px; right:12px; width:calc(100vw - 24px); max-height:calc(100svh - 24px); padding:30px 24px; }
  .menu-panel nav a { font-size:30px; }
  .menu-utilities { gap:13px; font-size:16px; }
  .menu-utilities .button { width:100%; margin-top:8px; }
  .hero { min-height:auto; align-items:flex-start; padding:calc(56.25vw + 38px) 22px 75px; background-size:100% auto; background-position:center top; background-repeat:no-repeat; background-color:#17120f; }
  .hero::before { background:linear-gradient(0deg,#17120f 0%,#17120f 58%,rgba(23,18,15,.12) 90%,rgba(23,18,15,0) 100%); }
  .hero-logo { width:100%; margin-bottom:32px; }
  .hero-kicker { font-size:10px; line-height:1.6; }
  h1 { font-size:44px; line-height:1; }
  h2 { font-size:38px; line-height:1.02; }
  .actions { align-items:flex-start; flex-direction:column; gap:22px; margin-top:34px; }
  .scroll-cue { display:none; }
  .manifesto { padding:82px 24px 72px; }
  .manifesto-copy { grid-template-columns:1fr; gap:20px; margin-top:38px; font-size:17px; }
  .gallery { padding:0 10px 90px; grid-template-columns:1fr 1fr; grid-template-rows:270px 270px; gap:8px; }
  .lunch { display:flex; flex-direction:column; min-height:auto; }
  .lunch>img { height:55vh; min-height:420px; }
  .lunch-copy { padding:80px 24px 90px; }
  .lunch-copy>p:not(.eyebrow) { font-size:17px; }
  .service-row { display:flex; min-height:auto; }
  .service-row>img { height:52vh; min-height:390px; }
  .service-copy { padding:78px 24px 85px; }
  .service-copy>p:not(.eyebrow) { font-size:17px; }
  .aperitivo { flex-direction:column-reverse; }
  .dinner { flex-direction:column; }
  .menu-block { padding:90px 24px; display:block; }
  .menu-block>p:not(.eyebrow) { margin:38px 0 28px; font-size:18px; }
  .visit { grid-template-columns:1fr; }
  .visit-photo img { height:430px; }
  .visit-card { padding:80px 24px 90px; }
  .hours p { grid-template-columns:1.3fr 1fr; }
  .reviews { padding:95px 24px 125px; }
  footer { grid-template-columns:1fr; padding:65px 24px 75px; }
  footer img { width:100%; }
}
