:root {
  --cream: #f3eee6;
  --ink: #201610;
  --muted: #9d7562;
  --brown: #251711;
  --line: #c9bcae;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #17100d;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
}
.site-header,
main,
footer {
  max-width: 1440px;
  margin: auto;
}
.site-header {
  height: 96px;
  padding: 0 6vw;
  background: var(--cream);
  display: flex;
  align-items: center;
  gap: 3rem;
  position: relative;
  z-index: 20;
}
.brand {
  display: block;
  width: 184px;
  line-height: 0;
  flex: none;
}
.brand img {
  display: block;
  width: 100%;
  height: auto;
}
.site-header nav {
  display: flex;
  justify-content: center;
  gap: 2.3rem;
  flex: 1;
}
.site-header nav a,
.mobile-menu a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.85rem;
}
.site-header nav a:first-child {
  font-weight: 600;
}
.button {
  min-width: 126px;
  height: 45px;
  padding: 0 1.5rem;
  border: 1px solid #8d8379;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  background: transparent;
  transition: 0.25s;
}
.button:hover {
  background: #ded4c8;
  transform: translateY(-2px);
}
.button-dark {
  border-color: var(--brown);
  background: var(--brown);
  color: #fff;
}
.button-dark:hover {
  background: #4b3328;
}
.menu-toggle,
.mobile-menu {
  display: none;
}
.hero {
  height: 590px;
  background: var(--cream);
  display: grid;
  grid-template-columns: 46% 54%;
  position: relative;
  overflow: hidden;
}
.hero-copy {
  padding: 64px 4vw 40px 7vw;
  position: relative;
  z-index: 2;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.69rem;
  color: var(--muted);
  font-weight: 600;
}
.hero h1,
.section-heading h2,
.about h2,
.events h2 {
  font-family: "Italiana", serif;
  font-weight: 400;
  margin: 0.7rem 0;
  line-height: 0.94;
}
.hero h1 {
  font-size: clamp(3.9rem, 5.4vw, 6.2rem);
  letter-spacing: -0.045em;
}
.hero em,
.section-heading em {
  color: var(--muted);
  font-style: italic;
}
.hero-sub {
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.hero-photo {
  height: 100%;
  position: relative;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cream) 0, transparent 12%);
}
.script-note {
  position: absolute;
  z-index: 2;
  left: 7%;
  top: 16%;
  font:
    2.25rem/1.1 "La Belle Aurore",
    cursive;
  color: #7f5946;
  transform: rotate(-8deg);
  text-shadow: none;
}
.scroll-hint {
  position: absolute;
  left: 7vw;
  bottom: 28px;
  font-size: 2rem;
  text-decoration: none;
  color: var(--ink);
}
.experiences {
  height: 292px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.experience {
  position: relative;
  overflow: hidden;
  color: white;
  text-decoration: none;
}
.experience:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 10, 5, 0.76), transparent 66%);
}
.experience img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}
.experience:hover img {
  transform: scale(1.04);
}
.experience span {
  position: absolute;
  z-index: 2;
  left: 10%;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  font-family: "Italiana", serif;
}
.experience b {
  font-size: 1.5rem;
}
.experience i {
  font-size: 2rem;
}
.experience small {
  display: none;
}
.menu-section {
  background: var(--cream);
  padding: 68px 6vw 84px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 38px;
}
.section-heading h2 {
  font-size: 3.8rem;
}
.section-intro {
  max-width: 350px;
  font-size: 0.84rem;
  line-height: 1.6;
}
.section-intro .button {
  margin-top: 14px;
}
.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.products article {
  position: relative;
}
.products img {
  width: 100%;
  aspect-ratio: 1.3;
  object-fit: cover;
  border-radius: 12px;
}
.products h3 {
  font-size: 1rem;
  margin: 0.7rem 0 0.1rem;
}
.products p {
  font-size: 0.72rem;
  color: #695d56;
  margin: 0;
}
.products button {
  position: absolute;
  right: 0;
  bottom: 0;
  border: 1px solid #82776e;
  background: transparent;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
}
.about {
  background: var(--cream);
  min-height: 300px;
  display: grid;
  grid-template-columns: 29% 24% 27% 20%;
  align-items: center;
  border-top: 1px solid #e0d7cd;
}
.about > img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.about-title,
.about-copy {
  padding: 2rem;
}
.about h2 {
  font-size: 3.1rem;
}
.about-copy p {
  font-size: 0.82rem;
  line-height: 1.55;
}
.about-copy .button {
  margin-top: 12px;
}
.aura-plaque {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px 25px;
  background: #e7dfd5;
  border: 8px solid #6e5343;
  box-shadow: 0 4px 20px #2a160e44;
  transform: rotate(-3deg);
}
.aura-plaque img {
  width: 78%;
  height: auto;
}
.events {
  background: var(--brown);
  color: #eaded2;
  text-align: center;
  padding: 86px 20px;
}
.events p {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
}
.events h2 {
  font-size: 3rem;
}
footer {
  background: var(--brown);
  border-top: 1px solid #5c4337;
  color: #eee4dd;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 50px 6vw;
}
footer > a,
footer > div {
  display: flex;
  align-items: center;
  gap: 13px;
  color: inherit;
  text-decoration: none;
  font-size: 0.76rem;
  line-height: 1.5;
}
footer span {
  font-size: 1.5rem;
}
.social {
  gap: 8px;
}
.social a {
  width: 34px;
  height: 34px;
  border: 1px solid #eee4dd;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  text-decoration: none;
  font-family: serif;
}
@media (max-width: 760px) {
  body {
    background: var(--cream);
  }
  .site-header {
    height: 92px;
    padding: 0 24px;
    justify-content: center;
    position: sticky;
    top: 0;
  }
  .brand {
    width: 142px;
  }
  .site-header nav,
  .desktop-visit {
    display: none;
  }
  .menu-toggle {
    display: flex;
    position: absolute;
    right: 24px;
    background: transparent;
    border: 0;
    width: 32px;
    height: 28px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }
  .menu-toggle span {
    height: 1px;
    background: var(--ink);
    width: 24px;
  }
  .mobile-menu {
    position: absolute;
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    top: 92px;
    left: 0;
    right: 0;
    background: var(--cream);
    padding: 18px 24px 26px;
    flex-direction: column;
    gap: 16px;
    border-top: 1px solid var(--line);
    transition: 0.2s;
  }
  .mobile-menu.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .hero {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .hero-copy {
    padding: 52px 24px 30px;
  }
  .hero .eyebrow {
    display: none;
  }
  .hero h1 {
    font-size: 3.45rem;
    line-height: 0.96;
    margin: 0;
  }
  .hero-sub {
    font-size: 0.67rem;
    margin-top: 18px;
    max-width: 180px;
  }
  .hero-actions {
    margin-top: 20px;
  }
  .hero-actions .button {
    min-width: 106px;
    padding: 0 1.1rem;
  }
  .hero-photo {
    height: 315px;
    order: 2;
    background: var(--cream);
  }
  .hero-photo:after {
    display: none;
  }
  .hero-photo img {
    object-fit: cover;
    object-position: center;
  }
  .script-note {
    left: 24px;
    right: auto;
    bottom: auto;
    top: 20px;
    font-size: 1.8rem;
    color: #7f5946;
  }
  .scroll-hint {
    display: none;
  }
  .experiences {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .experience {
    height: 190px;
  }
  .experience span {
    left: 24px;
    bottom: 24px;
  }
  .experience b {
    font-size: 1.1rem;
  }
  .experience i {
    font-size: 1.7rem;
  }
  .experience small {
    display: grid;
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 24px;
    width: 38px;
    height: 38px;
    border: 1px solid white;
    border-radius: 50%;
    place-items: center;
    font-size: 1.3rem;
  }
  .menu-section {
    padding: 58px 24px;
  }
  .section-heading {
    display: block;
  }
  .section-heading h2 {
    font-size: 3.05rem;
  }
  .section-intro {
    margin-top: 24px;
  }
  .products {
    grid-template-columns: 1fr 1fr;
    gap: 28px 14px;
  }
  .products img {
    aspect-ratio: 1;
  }
  .products button {
    display: none;
  }
  .about {
    display: flex;
    flex-direction: column;
  }
  .about > img {
    height: 280px;
  }
  .about-title,
  .about-copy {
    width: 100%;
    padding: 28px 24px;
  }
  .about h2 {
    font-size: 3rem;
  }
  .aura-plaque {
    height: 130px;
    width: calc(100% - 48px);
    margin: 10px 24px 42px;
  }
  .events {
    padding: 60px 24px;
  }
  .events h2 {
    font-size: 2.5rem;
  }
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 44px 24px;
  }
  .social {
    align-self: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

.brand img,.aura-plaque img{mix-blend-mode:multiply}
.brand{width:210px}
.hero-photo{background:var(--cream);display:flex;align-items:center}
.hero-photo img{object-fit:contain;object-position:center;width:100%;height:100%}
.hero-photo::after{display:none}
.hero-sub{line-height:1.45;font-size:14px;font-weight:400}
.script-note{top:5%;left:5%;font-size:1.65rem}
@media(max-width:760px){
.site-header{height:78px}.mobile-menu{top:78px}.brand{width:160px}
.hero-copy{padding:32px 24px 12px}
.hero h1{font-size:clamp(2.65rem,12vw,3.45rem);line-height:.98}
.hero-sub{max-width:none;font-size:12px;margin-top:16px;line-height:1.45}
.hero-actions{margin-top:18px}
.hero-photo{height:285px;padding-top:35px}
.hero-photo img{object-fit:contain}
.script-note{top:8px;left:24px;font-size:1.35rem;line-height:1.15}
}

/* Reference composition: compact serif, right-entering dessert, continuous cream. */
.hero h1,.section-heading h2,.about h2,.experience span{
 font-family:"Times New Roman",Times,serif;font-weight:400;letter-spacing:-.055em;
}
.site-header{height:96px;padding-inline:5.5%;gap:32px}
.brand{width:210px}
.hero{height:550px;display:block}
.hero-copy{padding:45px 0 0 7.5%;width:50%}
.hero h1{font-size:clamp(56px,5.6vw,80px);line-height:.91;margin:0 0 22px}
.hero-photo{position:absolute;inset:0 0 0 40%;display:block;padding:0}
.hero-photo img{position:absolute;width:135%;max-width:none;height:115%;right:-20%;bottom:-9%;object-fit:contain}
.hero-sub{font-size:14px;letter-spacing:.035em;line-height:1.35;margin:0}
.hero-actions{margin-top:26px}
.script-note{top:auto;left:auto;right:7%;bottom:12%;color:#f3eee6;font-size:27px;line-height:1.05;max-width:165px}
.experiences{height:260px}
.experience b{font-weight:400}
.experience span{letter-spacing:-.035em}
.menu-section{padding:44px 6% 60px}
.section-heading h2{font-size:48px;line-height:.91}
.section-intro{max-width:290px}
.about{grid-template-columns:27% 23% 26% 24%;min-height:270px}
.about>img{height:270px}
.about h2{font-size:42px}
.events{display:none}
@media(max-width:760px){
 .site-header{height:88px;padding-inline:24px;position:relative}
 .brand{width:142px}
 .menu-toggle{right:24px}
 .mobile-menu{top:88px}
 .hero{height:550px;display:block}
 .hero-copy{width:100%;padding:26px 36px 0}
 .hero h1{font-size:clamp(38px,10.9vw,49px);line-height:.90;letter-spacing:-.055em;margin:0 0 17px}
 .hero-sub{font-size:12px;line-height:1.25;max-width:245px;letter-spacing:.045em}
 .hero-sub>span:first-child{display:block}
 .hero-sub .hero-separator{display:none}
 .hero-sub strong{display:block;font-weight:500}
 .hero-sub br{display:none}
 .hero-actions{gap:9px;margin-top:22px}
 .hero-actions .button{height:39px;min-width:118px;padding-inline:16px;font-size:12px}
 .hero-photo{inset:300px 0 0;position:absolute;height:250px;padding:0;overflow:hidden;pointer-events:none}
 .hero-photo img{width:153%;height:137%;right:-62%;bottom:-20%;object-fit:contain}
 .script-note{top:45px;left:32px;right:auto;bottom:auto;width:115px;font-size:24px;color:#796c5d;line-height:.98;transform:rotate(-12deg)}
 .experiences{height:auto}
 .experience{height:180px}
 .experience span{left:25px;bottom:26px}
 .experience b{font-size:24px;line-height:1}
 .experience i{font-size:27px;line-height:.98}
 .experience small{bottom:26px}
 .menu-section{padding:44px 25px}
 .section-heading h2{font-size:42px}
 .about{display:flex}
}
@media(min-width:761px) and (max-width:1000px){
.site-header nav{gap:16px}.brand{width:150px}.site-header{gap:18px}
.hero-copy{width:53%}.hero h1{font-size:60px}
}

/* Mobile first screen: header + flexible hero fill the visible viewport. */
@media (max-width: 760px) {
  .hero {
    height: auto;
    min-height: calc(100vh - 88px);
    min-height: calc(100dvh - 88px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .hero-copy {
    flex: 0 0 auto;
    padding-top: clamp(18px, 4vh, 40px);
    padding-bottom: 18px;
  }
  .hero-actions { flex-wrap: wrap; }
  .hero-photo {
    position: relative;
    inset: auto;
    flex: 1 0 230px;
    width: 100%;
    height: auto;
    min-height: 230px;
    padding: 0;
    order: 2;
  }
  .hero-photo img {
    height: 137%;
    bottom: -20%;
  }
  .script-note { top: 18%; }
}

/* Shared editorial sections and full-screen navigation / food menu. */
button{font:inherit;cursor:pointer}
section[id]{scroll-margin-top:24px}
.overlay-open{overflow:hidden}
.navigation-screen,.food-screen{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:32px 6%;border:0;background:var(--cream);color:var(--ink);overflow:auto;box-sizing:border-box}
dialog::backdrop{background:var(--cream)}
.overlay-top{display:flex;align-items:center;justify-content:space-between;gap:24px}
.overlay-top img{width:180px;mix-blend-mode:multiply}
.close-overlay{border:1px solid var(--line);border-radius:50%;width:46px;height:46px;background:transparent;font-size:30px;line-height:1}
.site-header .navigation-screen nav{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:5vh auto 0;max-width:780px}
.site-header .navigation-screen nav a{font-family:Times,serif;font-size:clamp(34px,6vw,76px);letter-spacing:-.05em;line-height:1.1;font-weight:400}
.navigation-screen nav small{display:inline-block;width:46px;font:12px "DM Sans",sans-serif;color:var(--muted);letter-spacing:0}
.overlay-signature{font:30px/1.1 "La Belle Aurore",cursive;color:var(--muted);text-align:right;margin:5vh auto 0;max-width:780px}
.food-content{max-width:1120px;margin:40px auto}
.food-content h2,.visit h2,.events h2{font:400 clamp(42px,5vw,68px)/.95 Times,serif;letter-spacing:-.05em;margin:18px 0 28px}
.food-content em,.visit em{color:var(--muted)}
.food-filters{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0}
.food-filters button{padding:12px 20px;border-radius:30px;background:transparent;border:1px solid var(--line);font-size:14px}
.food-filters button[aria-pressed=true]{background:var(--brown);color:white;border-color:var(--brown)}
.food-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
.food-grid article[hidden]{display:none}
.food-grid img{width:100%;aspect-ratio:1.2;object-fit:cover;border-radius:10px}
.food-grid h3{font:400 30px Times,serif;margin:15px 0 8px}
.food-grid p{font-size:15px;line-height:1.55;color:#6a5b50}
.products p{font-size:13px;line-height:1.4;padding-right:35px}
.section-intro,.about-copy p{font-size:16px;line-height:1.6}
.about{padding:0;overflow:hidden}
.about-title .eyebrow{margin-bottom:20px}
.events{display:grid;grid-template-columns:1fr 1fr;padding:0;text-align:left;background:var(--brown)}
.events>div{padding:60px 12%;align-self:center}
.events>div>p:not(.eyebrow){font-size:16px;line-height:1.6;max-width:340px}
.events .button{color:var(--cream);border-color:#a68c7b;margin-top:15px}
.events>img{width:100%;height:100%;min-height:420px;object-fit:cover}
.visit{background:var(--cream);padding:70px 7.5%}
.visit-details{display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:15px;line-height:1.6}
@media(max-width:760px){
 .navigation-screen,.food-screen{padding:20px 25px}
 .overlay-top img{width:142px}
 .site-header .navigation-screen nav{gap:20px;margin-top:45px}
 .site-header .navigation-screen nav a{font-size:43px}
 .navigation-screen nav small{width:34px}
 .overlay-signature{font-size:27px;margin-top:40px}
 .menu-section{padding:58px 25px}
 .section-heading{margin-bottom:30px}
 .section-intro{margin-top:25px}
 .products{gap:30px 16px}
 .products p{padding-right:0}
 .products article button{display:block;position:static;margin-top:12px;width:40px;height:40px}
 .about>img{height:320px}
 .about-title{padding:40px 25px 10px}
 .about-copy{padding:0 25px 35px}
 .about h2{font-size:46px;line-height:.95}
 .aura-plaque{margin-bottom:45px}
 .events{grid-template-columns:1fr}
 .events>div{padding:50px 25px}
 .events>img{height:280px;min-height:0}
 .visit{padding:55px 25px}
 .visit-details{flex-direction:column;align-items:flex-start;gap:10px}
 .visit-details .button{margin-top:15px}
 .food-content{margin-top:30px}
 .food-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 15px}
 .food-grid h3{font-size:25px}
 .food-grid p{font-size:14px}
}
@media(max-width:360px){.food-grid{grid-template-columns:1fr}}

/* Gentle full-screen menu motion. */
@keyframes aura-screen-enter {
 from { opacity: 0; transform: translateY(24px); }
 to { opacity: 1; transform: translateY(0); }
}
@keyframes aura-link-enter {
 from { opacity: 0; transform: translateY(18px); }
 to { opacity: 1; transform: translateY(0); }
}
.navigation-screen[open], .food-screen[open] {
 animation: aura-screen-enter 380ms cubic-bezier(.22,1,.36,1) both;
}
.navigation-screen[open] nav a {
 animation: aura-link-enter 420ms cubic-bezier(.22,1,.36,1) both;
}
.navigation-screen[open] nav a:nth-child(1) { animation-delay: 90ms; }
.navigation-screen[open] nav a:nth-child(2) { animation-delay: 140ms; }
.navigation-screen[open] nav a:nth-child(3) { animation-delay: 190ms; }
.navigation-screen[open] nav a:nth-child(4) { animation-delay: 240ms; }
.navigation-screen[open] nav a:nth-child(5) { animation-delay: 290ms; }
.navigation-screen[open] .overlay-signature {
 animation: aura-link-enter 450ms ease 320ms both;
}
.food-screen[open] .food-content {
 animation: aura-link-enter 450ms ease 100ms both;
}
.close-overlay { transition: transform 200ms ease, background-color 200ms ease; }
.close-overlay:hover { transform: rotate(90deg); background-color: #e7dfd5; }
@media (prefers-reduced-motion: reduce) {
 .navigation-screen[open], .food-screen[open],
 .navigation-screen[open] nav a,
 .navigation-screen[open] .overlay-signature,
 .food-screen[open] .food-content { animation: none; }
 .close-overlay { transition: none; }
}