@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/* Brand tokens — edit these to retheme the mockup. */
:root { --ink:#20211d; --night:#171a16; --paper:#f6f3ed; --gold:#d9bb7a; --muted:#66695e; --line:#dcd9ce; --serif:'Playfair Display',Georgia,serif; --sans:'DM Sans',Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:105px; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.75 var(--sans); }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
img { width:100%; height:100%; display:block; object-fit:cover; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; }
h1,h2 { letter-spacing:-.04em; line-height:1.13; margin-bottom:0; }
h1 { font-size:clamp(48px,6.8vw,104px); }
h2 { font-size:clamp(39px,4.3vw,66px); }
h3 { font-size:27px; line-height:1.25; letter-spacing:-.025em; }
em { font-weight:400; }
.section { padding:110px 7%; }
.eyebrow { font-size:12px; line-height:1.5; letter-spacing:.18em; font-weight:600; margin-bottom:24px; }
.button { min-height:54px; padding:14px 24px; border:1px solid #ffffff70; display:inline-flex; align-items:center; justify-content:center; gap:32px; font-size:14px; font-weight:500; background:transparent; transition:background .25s, color .25s, border-color .25s, transform .25s; }
.button span { font-size:20px; line-height:1; }
.button:hover { background:#ead4a4; color:#171a16; border-color:#ead4a4; transform:translateY(-2px); }
.gold { background:var(--gold); border-color:var(--gold); color:#171a16; }
.outline { color:white; }
.dark { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.text-link { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; font:500 14px/1.6 var(--sans); padding:0 0 7px; border:0; border-bottom:1px solid currentColor; background:none; transition:color .2s; }
.text-link:hover { color:#9b772f; }
.text-link span { transition:transform .2s; }
.text-link:hover span { transform:translate(3px,-3px); }
.actions { display:flex; flex-wrap:wrap; gap:18px; }

/* Transparent header becomes solid after the first 50px of scrolling. */
.site-header { position:fixed; top:0; width:100%; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:25px 4%; border-bottom:1px solid #ffffff25; color:white; background:linear-gradient(#0d110f70,transparent); transition:background .3s,padding .3s; }
.site-header.scrolled { background:#171a16f5; backdrop-filter:blur(14px); padding-top:17px; padding-bottom:17px; box-shadow:0 5px 25px #0002; }
.brand { display:inline-block; flex-shrink:0; }
.brand img { width:210px; height:auto; }
.brand span { display:block; text-align:center; font-size:9px; letter-spacing:.15em; margin-top:8px; }
.site-header nav { display:flex; gap:27px; font-size:14px; }
.site-header nav a { position:relative; }
.site-header nav a:after { content:''; position:absolute; bottom:-8px; left:0; width:0; height:1px; background:var(--gold); transition:width .25s; }
.site-header nav a:hover:after { width:100%; }
.header-book { font-size:13px; min-height:48px; padding:10px 20px; gap:24px; }
.menu-toggle { display:none; background:none; border:0; color:white; padding:12px; }
#mobile-nav { position:fixed; inset:89px 0 auto; z-index:49; padding:30px 6%; background:var(--night); color:white; box-shadow:0 20px 30px #0004; }
#mobile-nav:not([hidden]) { display:grid; gap:22px; }

/* 01 · Cinematic hero */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; color:white; overflow:hidden; }
.hero-image,.hero-overlay { position:absolute; inset:0; }
.hero-image { object-position:center 43%; }
.hero-overlay { background:linear-gradient(90deg,#0b110ddd 0%,#0c130d80 60%,#0b110d30),linear-gradient(0deg,#10180fcc,transparent 30%); }
.hero-copy { position:relative; z-index:1; width:100%; padding:190px 7% 150px; }
.hero-copy .eyebrow { color:#ead4a4; }
.hero h1 em { color:#e9d8b5; }
.hero-description { margin:30px 0 34px; font-size:17px; color:#edece6; }
.hero-bottom { position:absolute; bottom:32px; left:4%; right:4%; display:flex; justify-content:space-between; gap:20px; font-size:10px; letter-spacing:.15em; color:#e7e7db; }

/* 02 · Layered story composition */
.about { display:grid; grid-template-columns:1fr 1fr; gap:10%; align-items:center; }
.about-images { height:590px; position:relative; padding-right:17%; padding-bottom:65px; }
.about-main { object-position:center; }
.about-detail { position:absolute; width:43%; height:52%; right:0; bottom:0; border:9px solid var(--paper); }
.image-caption { position:absolute; bottom:22px; left:0; font-size:11px; letter-spacing:.22em; }
.about-copy p:not(.eyebrow) { color:var(--muted); margin-bottom:19px; }
.about-copy p:nth-of-type(2) { color:var(--ink); font-size:20px; }
.gold-rule { display:block; width:60px; height:1px; background:#af8844; margin:30px 0; }
.about-copy .text-link { margin-top:14px; }

/* 03 / 05 / 07 · Scroll-driven parallax scenes, including mobile. */
.parallax { --parallax-offset:0px; position:relative; isolation:isolate; overflow:hidden; color:white; min-height:540px; display:grid; place-items:center; padding:95px 6%; }
.parallax-image { position:absolute; z-index:-2; inset:-110px 0; background-image:var(--scene); background-size:cover; background-position:center; transform:translate3d(0,var(--parallax-offset),0); will-change:transform; }
.cta-overlay { position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,#111811b3,#10170f83,#111811b3); }
.cta:before,.cta:after { content:''; position:absolute; height:1px; left:6%; right:6%; background:#e3c58240; }
.cta:before { top:28px; }.cta:after { bottom:28px; }
.cta-copy { text-align:center; max-width:880px; }
.cta-copy .eyebrow { color:#eddcb8; }
.cta-copy h2 { font-size:clamp(43px,4.8vw,73px); }
.cta-copy h2 em { color:#ead5ad; }
.cta-copy>p:not(.eyebrow) { margin:25px 0 30px; color:#f0eee8; }
.event-cta { min-height:565px; }
.event-cta .parallax-image { background-position:center 35%; }
.tour-cta { min-height:660px; }
.tour-cta .cta-overlay { background:#0b120bc2; }
.tour-symbol { width:83px; height:83px; margin:0 auto 25px; display:grid; place-items:center; border:1px solid #d9bb7a99; border-radius:50%; font-size:24px; font-family:var(--serif); }
.placeholder-note { display:block; font-size:12px; margin-top:14px; color:#e8ddc6; }

/* 04 · Restrained experience cards */
.offers { background:#eae8df; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:50px; }
.section-heading>p { margin:0 0 5px; max-width:380px; color:var(--muted); font-size:15px; }
.offers-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid #cbcbbd; }
.offer-card { padding:32px 27px 36px; border-right:1px solid #cbcbbd; display:flex; flex-direction:column; transition:background .25s; }
.offer-card:last-child { border-right:0; }
.offer-card:hover { background:var(--paper); }
.offer-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:33px; color:#77775e; font-size:12px; }
.offer-icon { font-size:37px; line-height:1; color:#8a6d38; }
.offer-card h3 { font-size:26px; margin-bottom:18px; }
.offer-card p { color:var(--muted); font-size:15px; margin-bottom:28px; }
.offer-card .text-link { margin-top:auto; align-self:flex-start; font-size:13px; gap:18px; }

/* 06 · Menu cards */
.menu-grid,.blog-grid,.reviews-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.card-image { display:block; width:100%; height:370px; padding:0; position:relative; border:0; overflow:hidden; background:#dedccf; }
.card-image img { transition:transform .65s; }
.card-image:hover img { transform:scale(1.045); }
.image-arrow { position:absolute; right:18px; bottom:18px; display:grid; place-items:center; height:44px; width:44px; background:var(--paper); border-radius:50%; font-size:22px; }
.card-copy { padding:27px 0 0; }
.card-copy .eyebrow { margin-bottom:13px; color:#8a6c35; font-size:11px; }
.card-copy h3 { margin-bottom:14px; }
.card-copy>p:not(.eyebrow) { color:var(--muted); font-size:15px; margin-bottom:0; }
.menu-bottom { border-top:1px solid var(--line); margin-top:45px; padding-top:32px; display:flex; justify-content:space-between; align-items:center; gap:30px; }
.menu-bottom p { font-size:14px; color:var(--muted); margin:0; max-width:500px; }

/* 08 · Editorial cards with functioning article previews */
.journal { background:#ece9e1; }
.blog-card { background:var(--paper); }
.blog-card .card-image { height:285px; }
.blog-card .card-copy { padding:28px 27px 32px; }
.blog-card .text-link { margin-top:27px; }
.sample-tag { position:absolute; left:15px; top:15px; background:#171a16d9; color:white; padding:5px 10px; letter-spacing:.1em; font-size:10px; }
.sample-label { display:inline-block; font-size:12px; color:var(--muted); }

/* 09 · Clearly identified sample testimonials */
.reviews { text-align:center; }
.reviews-heading { max-width:850px; margin:0 auto 44px; }
.reviews-heading .sample-label { margin-top:24px; }
.review-card { text-align:left; border:1px solid var(--line); padding:31px; display:flex; flex-direction:column; }
.stars { font-size:17px; color:#957021; letter-spacing:.2em; margin-bottom:22px; }
blockquote { margin:0 0 29px; font:400 20px/1.6 var(--serif); }
.review-person { display:flex; gap:12px; align-items:center; margin-top:auto; }
.avatar { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#e7e2d5; font-family:var(--serif); flex-shrink:0; }
.review-person strong { font-size:14px; font-weight:500; }
.sample-name { font-size:12px; color:var(--muted); }
.review-person p { font-size:12px; color:var(--muted); margin:0; }
.review-disclaimer { margin-top:20px; font-size:12px; line-height:1.5; color:var(--muted); }
.reviews-link { margin-top:37px; }

/* 10 · Booking-led footer */
footer { background:var(--night); color:#e7e9de; padding:75px 7% 25px; }
.footer-invitation { padding-bottom:65px; border-bottom:1px solid #d9bb7a40; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer-invitation .eyebrow { color:var(--gold); }
.footer-invitation h2 { font-size:clamp(37px,3.8vw,58px); }
.footer-invitation h2 em { color:var(--gold); }
.footer-grid { display:grid; grid-template-columns:1.15fr 1fr 1.3fr .6fr; gap:45px; padding:60px 0; font-size:14px; }
.footer-grid h3 { font:500 14px/1.5 var(--sans); margin:0 0 24px; color:var(--gold); }
.footer-grid p { color:#bfc5b7; margin:23px 0 17px; }
.footer-grid>div>h3+p { margin-top:0; }
.footer-brand img { width:190px; }
.footer-directions { display:block; margin-top:18px; }
footer a:hover { color:var(--gold); }
dl { margin:0; }
dl>div { display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; color:#bfc5b7; font-size:13px; }
dd { margin:0; white-space:nowrap; }
.footer-grid .hours-note { font-size:12px; margin-top:20px; }
.footer-nav { display:grid; gap:10px; }
.footer-bottom { display:flex; justify-content:space-between; gap:24px; border-top:1px solid #ffffff20; padding-top:24px; color:#a4ac9b; font-size:12px; }

/* Progressive enhancement & accessible article/tour dialogs */
.will-reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease,transform .7s ease; }
.will-reveal.visible { opacity:1; transform:translateY(0); }
.dialog-open { overflow:hidden; }
dialog { padding:0; width:min(760px,92vw); max-height:88svh; border:1px solid var(--line); background:var(--paper); color:var(--ink); }
dialog::backdrop { background:#080e0bc9; backdrop-filter:blur(6px); }
.dialog-close { position:sticky; float:right; top:12px; margin:12px 12px -60px 0; z-index:2; border:1px solid #aaa; background:var(--paper); width:44px; height:44px; font-size:28px; line-height:1; border-radius:50%; }
.dialog-image { height:285px; }
.dialog-copy { padding:35px; }
.dialog-copy h2 { font-size:40px; margin-bottom:24px; }
.dialog-copy>p:not(.eyebrow) { color:var(--muted); }
.skip { position:fixed; top:-100px; left:15px; z-index:100; background:white; color:black; padding:12px; }
.skip:focus { top:10px; }
a:focus-visible,button:focus-visible { outline:3px solid #b58a32; outline-offset:5px; }

@media(min-width:1700px) {
  .section,footer,.hero-copy { padding-left:max(7%,calc((100vw - 1450px)/2)); padding-right:max(7%,calc((100vw - 1450px)/2)); }
}
@media(max-width:1200px) {
  .site-header nav { gap:17px; }.brand img { width:180px; }.header-book { padding:10px 15px; gap:15px; }
  .section { padding:85px 6%; }.about { gap:7%; }.about-images { height:540px; }
  .offers-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.offer-card:nth-child(2) { border-right:0; }.offer-card:nth-child(-n+2) { border-bottom:1px solid #cbcbbd; }
  .card-image { height:310px; }.menu-grid,.blog-grid,.reviews-grid { gap:22px; }.review-card { padding:24px; }.footer-grid { gap:28px; }
}
@media(max-width:960px) {
  .site-header { padding:18px 5%; height:90px; }.site-header.scrolled { padding:18px 5%; }.site-header nav,.header-book { display:none; }.menu-toggle { display:flex; align-items:center; gap:14px; }
  .about { grid-template-columns:1fr 1fr; gap:5%; }.about-images { height:480px; }.about-detail { width:49%; }.about-copy p:nth-of-type(2) { font-size:18px; }
  .section-heading { align-items:start; }.section-heading>p { max-width:260px; }
  .menu-grid,.blog-grid { gap:18px; }.card-image { height:290px; }.card-copy h3 { font-size:24px; }.blog-card .card-copy { padding:24px 20px; }
  .reviews-grid { grid-template-columns:1fr; max-width:650px; margin:auto; }.review-card { padding:30px; }.review-disclaimer { margin-top:14px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px 70px; }.footer-invitation { align-items:start; flex-direction:column; }
}
@media(max-width:700px) {
  html { scroll-padding-top:90px; }.section { padding:70px 6%; }
  .hero-copy { padding:160px 6% 120px; }h1 { font-size:clamp(46px,9.8vw,68px); }.hero-description { font-size:16px; max-width:420px; }.hero .eyebrow { font-size:10px; letter-spacing:.13em; }
  .hero-bottom { left:6%; right:6%; font-size:9px; }.hero-bottom>span:last-child { display:none; }.hero-bottom>span:first-child { max-width:135px; }
  .button { gap:24px; padding:13px 20px; }.hero .actions { gap:14px; }.hero .button { font-size:13px; padding:13px 16px; gap:16px; }
  .about { grid-template-columns:1fr; gap:42px; }.about-images { height:500px; max-width:470px; width:100%; }.about-detail { width:42%; }
  .eyebrow { font-size:11px; margin-bottom:20px; }.about-copy .eyebrow { margin-bottom:20px; }
  .parallax { min-height:490px; padding:80px 6%; }.cta-copy h2 { font-size:clamp(41px,8.3vw,59px); }.cta-copy>p:not(.eyebrow) { font-size:15px; }.tour-cta { min-height:620px; }
  .section-heading { flex-direction:column; gap:27px; margin-bottom:35px; }.section-heading>p { max-width:100%; }
  .offers-grid { grid-template-columns:1fr 1fr; }.offer-card { padding:27px 20px; }.offer-card h3 { font-size:25px; }.offer-card p { font-size:14px; }.offer-card .text-link { gap:12px; font-size:12px; }
  .menu-grid,.blog-grid { grid-template-columns:1fr; gap:36px; }.card-image { height:430px; }.card-copy h3 { font-size:29px; }.card-copy>p:not(.eyebrow) { font-size:16px; }.menu-bottom { align-items:start; flex-direction:column; }
  .blog-card .card-image { height:310px; }.blog-card .card-copy { padding:28px; }
  .reviews-heading .sample-label { max-width:330px; }.reviews-link { font-size:12px; gap:16px; }
  footer { padding:60px 6% 25px; }.footer-invitation { padding-bottom:42px; }.footer-grid { padding:45px 0; gap:40px 25px; }.footer-brand img { width:170px; }.footer-bottom { flex-wrap:wrap; font-size:11px; }
  .dialog-image { height:220px; }.dialog-copy { padding:25px; }.dialog-copy h2 { font-size:32px; }
}
@media(max-width:400px) {
  .offers-grid { grid-template-columns:1fr; }.offer-card { border-right:0; border-bottom:1px solid #cbcbbd; }.offer-card:last-child { border-bottom:0; }.offer-card .text-link { font-size:14px; }.offer-card p { font-size:16px; }
  .footer-grid { grid-template-columns:1fr; }.footer-grid dl { max-width:300px; }.about-images { height:425px; }.card-image { height:360px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }*,*:before,*:after { transition:none!important; animation:none!important; }.will-reveal { opacity:1; transform:none; }.parallax-image { transform:none!important; will-change:auto; }
}

/* Uploaded portrait video fills the hero; focus the desktop crop on the table. */
.hero-video { width:100%; height:100%; object-fit:cover; object-position:center 68%; }
.hero-poster { position:absolute; inset:0; object-position:center 68%; }
.hero.video-playing .hero-poster { visibility:hidden; }
.video-toggle { position:absolute; z-index:3; right:4%; bottom:75px; border:1px solid #ffffff80; background:#171a1670; color:white; padding:9px 14px; font-size:12px; }
.video-toggle:hover { background:#171a16; }
@media(max-width:700px) { .hero-video,.hero-poster { object-position:center; }.video-toggle { bottom:65px; right:6%; } }
@media(prefers-reduced-motion:reduce) { .hero-video { display:none; }.hero.video-playing .hero-poster { visibility:visible; }.video-toggle { display:none; } }

/* Uploaded food photography: preserve the complete composition in menu cards. */
.menu-grid .card-image { height:auto; aspect-ratio:4 / 5; }
.menu-grid .card-image img { object-position:center 60%; }
#dine .parallax-image { background-position:center 62%; }
#events .parallax-image { background-position:center 49%; }
#tour .parallax-image { background-position:center 40%; }
.about-detail { object-position:center 55%; }

/* Photography-led experience cards. */
.offers-grid { gap:22px; border:0; align-items:stretch; }
.offer-card { padding:0; border:1px solid #cbcbbd; overflow:hidden; background:var(--paper); }
.offer-card:last-child,.offer-card:nth-child(2) { border-right:1px solid #cbcbbd; }
.offer-photo { position:relative; display:block; aspect-ratio:4 / 5; overflow:hidden; }
.offer-photo img { transition:transform .6s ease; object-position:center 60%; }
.offer-photo:hover img { transform:scale(1.05); }
.offer-photo-number { position:absolute; top:15px; left:15px; border:1px solid #ffffff70; background:#171a1680; color:white; padding:3px 10px; font-size:12px; }
.offer-body { display:flex; flex-direction:column; flex:1; padding:27px 24px 30px; }
.offer-body h3 { margin-bottom:17px; }
.offer-body .text-link { margin-top:auto; }
@media(max-width:700px) { .offers-grid { gap:18px; }.offer-body { padding:23px 18px; }.offer-body h3 { font-size:23px; } }
@media(max-width:500px) { .offers-grid { grid-template-columns:1fr; }.offer-photo { aspect-ratio:4 / 3; }.offer-body { padding:26px; }.offer-body h3 { font-size:28px; }.offer-body p { font-size:16px; }.offer-body .text-link { font-size:14px; } }

/* Vector arrows avoid platform-specific emoji rendering. */
.arrow-icon { display:inline-block; width:1em; height:1em; flex-shrink:0; vertical-align:-.14em; }
.button .arrow-icon,.image-arrow .arrow-icon { width:20px; height:20px; }