:root {
  --ink: #11110f;
  --ivory: #f3efe7;
  --paper: #fbf9f4;
  --gold: #b89b62;
  --muted: #817a70;
  --olive: #26302a;
  --line: rgba(17,17,15,.16);
  --display: 'DM Serif Display',Georgia,serif;
  --sans: 'DM Sans',Arial,sans-serif;
  --mono: 'DM Mono',monospace
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  background: var(--ivory)
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--sans);
  line-height: 1.55
}

body.menu-open {
  overflow: hidden
}

a {
  color: inherit;
  text-decoration: none
}

img {
  display: block;
  width: 100%
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0,0,0,0);
  overflow: hidden
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 10px;
  background: var(--ivory);
  transform: translateY(-150%)
}

.skip-link:focus {
  transform: none
}

.restaurant-header {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 92px;
  padding: 0 4.2vw;
  color: #fff;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), background .28s ease, backdrop-filter .28s ease, box-shadow .28s ease, height .28s ease;
  box-shadow: 0 0 0 rgba(17,17,15,0)
}

.restaurant-header.is-scrolled {
  height: 72px;
  background: rgba(17,17,15,.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(17,17,15,.14)
}

.restaurant-brand {
  display: flex;
  flex-direction: column;
  font-family: var(--display);
  font-size: 1.82rem;
  line-height: .9;
  letter-spacing: .055em
}

.restaurant-brand span {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: .46rem;
  letter-spacing: .17em;
  text-transform: uppercase
}

.restaurant-nav {
  display: flex;
  gap: 28px;
  margin-left: 6vw;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase
}

.restaurant-nav a,
.header-reserve,
.footer-social a,
.restaurant-brand,
.text-link,
.button {
  transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .24s ease, color .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.restaurant-nav a,
.header-reserve {
  opacity: .9
}

.restaurant-nav a:hover,
.restaurant-nav a:focus-visible,
.header-reserve:hover,
.header-reserve:focus-visible {
  opacity: 1;
  transform: translateY(-1px)
}

.header-reserve {
  padding: 12px 0 12px 18px;
  border-left: 1px solid rgba(255,255,255,.46);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase
}

.header-reserve span {
  margin-left: 8px;
  color: var(--gold)
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: inherit
}

.mobile-menu {
  position: fixed;
  z-index: 25;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: 112px 9vw;
  background: var(--olive);
  color: var(--ivory);
  opacity: 0;
  pointer-events: none;
  transition: .4s
}

.menu-open .mobile-menu {
  opacity: 1;
  pointer-events: auto
}

.mobile-menu nav {
  display: grid;
  gap: 12px
}

.mobile-menu nav a {
  font-family: var(--display);
  font-size: 3rem
}

.hero,.experience,.reservation {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff
}

.hero {
  min-height: 100svh;
  background: #0d110e
}

.hero-image,.experience-image,.reservation-background {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-position: center;
  background-size: cover
}

.hero-image {
  background-image: url('https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=2100&q=88')
}

.hero-shade,.reservation-shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg,rgba(10,13,10,.86),rgba(10,13,10,.06)),linear-gradient(0deg,rgba(10,13,10,.42),transparent 45%)
}

.hero-content {
  width: min(680px,84vw);
  padding: clamp(180px,25vh,250px) 0 120px;
  margin-left: 12.5vw
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  font-family: var(--mono);
  font-size: .61rem;
  letter-spacing: .15em;
  text-transform: uppercase
}

.light-eyebrow {
  color: #d4c291
}

h1,h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .94
}

h1 {
  font-size: clamp(4rem,8.25vw,8.1rem)
}

em {
  font-style: italic
}

.hero-intro {
  max-width: 400px;
  margin: 30px 0
}

.hero-actions,.reservation-actions {
  display: flex;
  align-items: center;
  gap: 28px
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 48px;
  padding: 0 18px;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
transition: transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s ease, opacity .18s ease;
will-change: transform;
}

.button--light {
background: var(--ivory);
color: var(--ink)
}

.button--dark {
background: var(--ink);
color: var(--ivory)
}

/* subtle lift on hover, tight press feedback */
.button:hover,
.button:focus-visible {
transform: translateY(-2px) scale(1.005);
box-shadow: 0 10px 24px rgba(17,17,15,.1);
outline: none;
}

.button:active {
transform: translateY(0) scale(.998);
transition-duration: .1s;
}

.button:focus-visible {
box-shadow: 0 6px 18px rgba(184,155,98,.12), 0 0 0 3px rgba(184,155,98,.12);
}

.text-link {
display: inline-flex;
gap: 10px;
padding-bottom: 4px;
position: relative;
border-bottom: none; /* use pseudo underline for animation */
font-size: .67rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
transition: opacity .2s ease, transform .2s ease;
}

.text-link:hover,
.text-link:focus-visible {
transform: translateY(-1px);
}

.text-link::after {
content: '';
position: absolute;
left: 0;
right: auto;
bottom: 0;
height: 2px;
width: 100%;
background: currentColor;
transform-origin: left center;
transform: scaleX(0);
transition: transform .28s cubic-bezier(.2,.9,.3,1);
}

.text-link:hover::after,
.text-link:focus-visible::after {
transform: scaleX(1);
}

.text-link--light {
color: #fff
}

.scroll-prompt,.hero-credit {
  position: absolute;
  bottom: 34px;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .1em;
  text-transform: uppercase
}

.scroll-prompt {
  left: 4.2vw
}

.hero-credit {
  right: 4.2vw
}

.section-pad {
  padding: clamp(92px,13vw,178px) 7.4vw
}

/* Reduce horizontal gutters specifically for the story intro + its immediately following media section
   so the content doesn't feel lost on very wide viewports. This keeps other sections unchanged. */
.intro.section-pad,
.intro + .section-pad {
  padding: clamp(72px,11vw,150px) 5.2vw;
}

.intro {
  position: relative;
  display: grid;
  /* single-column outer grid: top row (title/copy) + media row (image + side-note) */
  grid-template-columns: 1fr;
  gap: 3.2vw;
  background: var(--paper)
}

/* top area: heading + short copy on one row */
.intro-top {
  display: grid;
  /* left column slightly larger for 70/30 feel on the media row
     keep the top copy balanced but give the left side more room */
  grid-template-columns: 1fr 30%;
  gap: 3.2vw;
  align-items: center; /* vertically center heading and copy */
}

/* media row: image left (70%) , side-note right (30%) */
.intro-media {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 3.2vw;
  align-items: center; /* vertically center image and side-note */
}
.intro h2,.section-top h2,.menu-heading h2,.chef h2,.location h2 {
  font-size: clamp(3.3rem,6.4vw,7rem)
}

.intro-body {
  max-width: 440px;
  padding-top: 0; /* remove extra top padding so copy vertically centers better */
}

.intro-body p {
  font-size: 1.25rem; /* increased for better legibility */
  line-height: 1.6;
  color: #333;
}

.intro-image {
  width: 100%;
  max-width: 100%;
  margin: 0;
  align-self: center;
  margin-top: 1.2rem;
}

.intro-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(17,17,15,.06);
  display: block;
}

@media(max-width:620px) {
  .intro-image { grid-column: 1 / 2; }
}

/* side-note participates in the new grid, not positioned absolutely */
.side-note-wrap {
  display: flex;
  align-items: center; /* vertically center side-note beside the image */
  justify-content: center;
}

.side-note {
  writing-mode: vertical-rl;
  color: var(--muted);
  font: .7rem var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-left: 6px;
}

.signature {
  background: var(--ivory)
}

.section-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 6vw;
  margin-bottom: 70px
}

.section-top>p {
  max-width: 310px;
  color: #5f5a54
}

.dish-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2.6vw
}

.dish-card {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}

.dish-card:hover,
.dish-card:focus-within {
  transform: translateY(-6px);
}

.dish-card--offset {
  padding-top: 90px
}
 
.dish-image {
  overflow: hidden;
  transform: translateZ(0);
}
 
.dish-image img {
  aspect-ratio: 4/5;
  height: 480px;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.9,.3,1), filter .45s ease;
  will-change: transform, filter;
  transform-origin: center center;
}
 
.dish-card:hover img {
  transform: translateY(-5px) scale(1.04);
  filter: saturate(1.05) contrast(1.02);
}
 
.dish-card:focus-within img {
  transform: translateY(-3px) scale(1.02);
}

.dish-type {
  margin: 18px 0 6px;
  color: var(--gold);
  font: .58rem var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase
}

.dish-card h3,.menu-list h3,.tasting-note h3 {
  margin: 0;
  font: 400 clamp(1.6rem,2.15vw,2.3rem)/1.03 var(--display)
}

.dish-description {
  color: var(--muted);
  font-size: .85rem
}

.center-action {
  margin-top: 64px;
  text-align: center
}

.experience {
  display: flex;
  align-items: center;
  min-height: 800px;
  padding: 10vw;
  background: #0d110e;
  color: var(--ivory)
}

.experience-image {
  z-index: 0;
  background-color: #0d110e;
  background-image: linear-gradient(rgba(4,7,5,.18),rgba(4,7,5,.32)),url('https://images.unsplash.com/photo-1592417817038-d13fd7342605?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')
}

.experience:after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: '';
  background: linear-gradient(90deg,rgba(5,8,6,.97),rgba(5,8,6,.88) 43%,rgba(5,8,6,.48) 75%,rgba(5,8,6,.3))
}

.experience-panel {
  position: relative;
  z-index: 2;
  max-width: 650px;
  padding: 34px 38px 38px;
  margin-left: -38px;
  background: linear-gradient(90deg,rgba(5,8,6,.52),transparent);
  text-shadow: 0 2px 18px rgba(0,0,0,.45)
}

.experience h2,.reservation h2 {
  font-size: clamp(3.3rem,6.8vw,7rem);
  color: #fff
}

.experience-panel>p:not(.eyebrow) {
  max-width: 430px;
  color: #f5f1e8
}

.menu-preview {
  background: var(--paper)
}

.menu-heading,.menu-columns {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 7vw
}

.menu-heading {
  margin-bottom: 80px
}

.menu-heading>p {
  align-self: end;
  color: #5f5a54
}

.menu-list {
  border-top: 1px solid var(--ink)
}

.menu-list-top,.menu-list article {
  padding: 18px 0;
  border-bottom: 1px solid var(--line)
}

.menu-list-top,.menu-list h4 {
  display: flex;
  justify-content: space-between;
  margin: 0
}

.menu-list h4 {
  font-size: .83rem;
  text-transform: uppercase
}

.menu-list p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .84rem
}

.tasting-note {
  padding: 43px 9%;
  background: var(--olive);
  color: var(--ivory)
}

.tasting-note h3 {
  font-size: 3.4rem
}

.tasting-note>p:not(.eyebrow) {
  color: #d4d0c8
}

.menu-footnote {
  margin-top: 50px;
  color: var(--muted);
  font: .56rem var(--mono)
}

.chef {
  display: grid;
  grid-template-columns: .85fr 1fr;
  gap: 10vw;
  align-items: center
}

.chef-copy>p:not(.eyebrow) {
  max-width: 470px;
  color: #55514b
}

.chef-signature {
  display: block;
  margin-top: 42px;
  font: italic 2.2rem var(--display)
}

.private-dining {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 700px;
  background: var(--olive);
  color: var(--ivory)
}

.private-dining .private-image {
  position: relative;
  min-height: 100%;
  background: #18211c url('https://images.unsplash.com/photo-1771508558500-f410039d7fc0?q=80&w=1064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover
}

.private-copy {
  padding: clamp(80px,11vw,150px) 12%
}

.private-dining h2 {
  font-size: clamp(3rem,5vw,5.3rem)
}

.private-copy>p:not(.eyebrow) {
  max-width: 450px;
  color: #d4d0c8
}

.reservation {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 700px;
  padding: 80px 8vw;
  text-align: center
}

.reservation-background {
  background-image: url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=2100&q=85')
}

.reservation-shade {
  background: rgba(10,12,10,.7)
}

.reservation-content {
  position: relative;
  z-index: 1;
  max-width: 720px
}

.reservation-content>p:not(.eyebrow) {
  max-width: 480px;
  margin: 27px auto;
  color: #f0ede5
}

.reservation-actions {
  justify-content: center
}

.location {
  display: grid;
  grid-template-columns: .85fr 1.5fr;
  gap: 12vw;
  background: var(--paper)
}

.location-details {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 34px;
  padding-top: 55px
}

.location-details h3 {
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase
}

.location-details p,.location-details address {
  color: #5f5a54;
  font-size: .88rem;
  font-style: normal
}

.celeste-footer {
  display: grid;
  grid-template-columns: .85fr 1.6fr;
  gap: 8vw;
  padding: 82px 7.4vw;
  background: var(--ink);
  color: var(--ivory)
}

.footer-main>p,.footer-links p:not(.eyebrow) {
  color: #aaa69d;
  font-size: .8rem
}

.footer-social {
  display: flex;
  gap: 10px
}

.footer-social a {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #aaa69d;
  border-radius: 50%;
  font-size: .5rem
}

.footer-links {
  display: grid;
  grid-template-columns: .8fr 1fr 1.4fr;
  gap: 36px
}

.footer-links>div {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.footer-links a {
  color: #d6d2c9;
  font-size: .8rem
}

.katalog-footer {
  background: var(--ink);
  border-color: rgba(243,239,231,.14)!important;
  color: #aaa69d!important
}

.mobile-reserve {
  display: none
}

.reveal,.image-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2,.85,.2,1), transform .7s cubic-bezier(.2,.85,.2,1);
}
 
.is-visible {
  opacity: 1;
  transform: translateY(0)
}
 
/* header hide-on-scroll */
.restaurant-header.is-hidden {
  transform: translateY(-112%);
}

/* allow hero-image to be moved for parallax */
.hero-image {
  transition: transform .18s linear;
  will-change: transform;
  transform: translateY(0) scale(1.06);
}

/* scroll prompt little dot */
.scroll-prompt span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 10px;
  vertical-align: middle;
  transform-origin: center center;
  animation: scroll-dot 1.6s infinite;
}

@keyframes scroll-dot {
  0% { transform: translateY(0) scale(1); opacity: 1 }
  45% { transform: translateY(10px) scale(.9); opacity: .7 }
  100% { transform: translateY(0) scale(1); opacity: 1 }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto }
  .scroll-prompt span,
  .button,
  .text-link,
  .dish-card,
  .dish-image img,
  .reveal,.image-reveal,
  .restaurant-header {
     animation: none;
     transition: none
  }
}

@media(max-width:900px) {
  .restaurant-nav,.header-reserve {
    display: none
  }

  .menu-toggle {
    display: block
  }

  .intro,.chef,.location {
    gap: 4.5vw
  }

  .section-pad {
    padding-right: 6vw;
    padding-left: 6vw
  }

  .intro-top {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    text-align: left;
    align-items: center;
  }

  .intro-copy,
  .intro-body {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }

  .intro-body p {
    font-size: 1.08rem;
  }

  .intro-media {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    align-items: center;
  }

  .side-note-wrap {
    justify-content: center;
    margin-top: 0.6rem;
  }
}

@media(max-width:620px) {
  body {
    padding-bottom: 55px
  }

  .restaurant-header {
    height: 74px;
    padding: 0 6vw
  }

  .hero-content {
    margin-left: 8vw
  }

  .hero {
    min-height: 760px
  }

  .hero h1 {
    font-size: 4.2rem
  }

  .hero-actions,.reservation-actions {
    align-items: flex-start;
    flex-direction: column
  }

  .intro,.menu-columns,.chef,.private-dining,.location {
    grid-template-columns: 1fr
  }

  .intro-body {
    padding-top: 24px
  }

  .intro-image {
    width: 88%;
    margin: 52px 0 0 auto
  }

  .side-note {
    display: none
  }

  .section-top,.menu-heading {
    display: block;
    margin-bottom: 48px
  }

  .dish-grid {
    grid-template-columns: 1fr
  }

  .dish-card--offset {
    padding-top: 0
  }

  .dish-image img {
    aspect-ratio: 1.05/1
  }

  .experience {
    min-height: 680px;
    padding: 74px 8vw;
    align-items: end
  }

  .experience-panel {
    padding: 28px 0 0;
    margin-left: 0;
    background: none
  }

  .menu-columns {
    gap: 30px
  }

  .tasting-note {
    order: -1
  }

  .chef {
    gap: 50px
  }

  .private-image {
    min-height: 430px!important
  }

  .reservation {
    min-height: 610px
  }

  .location-details {
    grid-template-columns: 1fr;
    padding-top: 0
  }

  .celeste-footer {
    grid-template-columns: 1fr;
    padding: 62px 6vw
  }

  .footer-links {
    grid-template-columns: 1fr 1fr
  }

  .footer-links>div:last-child {
    grid-column: 1/-1
  }

  .mobile-reserve {
    position: fixed;
    z-index: 29;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 17px;
    background: var(--olive);
    color: var(--ivory);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase
  }

  .katalog-footer {
    padding-bottom: 78px!important
  }
}

@media(prefers-reduced-motion:reduce) {
  .reveal,.image-reveal {
    opacity: 1;
    transform: none;
    transition: none
  }
}