/*
  Restaurant theme tokens.

  Future demos should change this file for colour and atmosphere only.
  Keep layout, type scale, grids, motion and component proportions in index.html.
*/

:root {
  --bg: #EDE3D2;
  --surface: #CDBCA5;
  --fg: #211C17;
  --muted: #817263;
  --accent: #6E2F2A;
  --accent-2: #A06B49;
  --reserve: #9A3A2F;
  --menu-bg: #E1D4C0;
  --white: #F8F0E4;
  --border: color-mix(in oklch, var(--fg), transparent 78%);
  --font-display: "DIN Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --texture-paper: url("../assets/textures/paper-grain.svg");
  --texture-plaster: url("../assets/textures/plaster-grain.svg");
}

/* Condensed display typography inspired by the supplied restaurant reference. */
.display,
.brand,
.brand-intro-title,
.brand-intro-year,
.drawer-nav a,
.history-year,
.heritage-year,
.principle h3,
.gallery-card-copy strong,
.menu-item-name,
.menu-subgroup-title,
.menu-accordion-trigger span:first-child,
.map-panel h3,
.practical-row h3,
.footer-brand {
  font-family: var(--font-display);
}

.display,
.principle h3,
.gallery-card-copy strong,
.menu-subgroup-title,
.menu-accordion-trigger span:first-child,
.map-panel h3,
.practical-row h3 {
  font-weight: 700;
  line-height: 1;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.brand,
.brand-intro-title,
.drawer-nav a,
.footer-brand {
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.brand-intro-title {
  font-size: clamp(4.5rem, 11vw, 9rem);
  line-height: .86;
}

.brand-intro-year {
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.hero-title {
  max-width: 10ch;
  font-size: clamp(2.55rem, 3.7vw, 3.85rem);
  font-weight: 700;
  line-height: .96;
}

.history-title,
.signature-title,
.principles-title,
.dishes-title,
.restaurant-title,
.visit-title,
.menu-paper-title,
.contact-title {
  font-size: clamp(2rem, 2.8vw, 3.2rem);
  line-height: 1;
}

.heritage-title {
  font-size: clamp(1.9rem, 2.4vw, 2.75rem);
  line-height: 1.02;
}

.principle h3,
.map-panel h3 {
  font-size: clamp(1.65rem, 2vw, 2.2rem);
}

.gallery-card-copy strong,
.practical-row h3 {
  font-size: clamp(1.2rem, 1.5vw, 1.55rem);
}

.menu-subgroup-title {
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: .05em;
}

.drawer-nav a {
  font-size: clamp(1.9rem, 8vw, 2.9rem);
  line-height: 1;
}

.footer-brand {
  font-size: clamp(2.3rem, 4.5vw, 4.25rem);
  line-height: .9;
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 12% 8%, rgb(255 255 255 / .18), transparent 28rem),
    radial-gradient(circle at 88% 42%, rgb(80 50 33 / .08), transparent 30rem),
    var(--texture-paper);
  background-size: auto, auto, 280px 280px;
}

.site-header.scrolled,
.site-header.drawer-open,
.mobile-drawer,
.mobile-action-bar {
  background-image: var(--texture-paper);
  background-size: 260px 260px;
}

.brand-intro,
.opening,
.visit {
  background-image:
    linear-gradient(rgb(237 227 210 / .88), rgb(237 227 210 / .88)),
    var(--texture-paper);
  background-size: auto, 300px 300px;
}

.heritage,
.principles,
.restaurant {
  background-image:
    linear-gradient(rgb(205 188 165 / .9), rgb(205 188 165 / .9)),
    var(--texture-plaster);
  background-size: auto, 340px 340px;
}

.menu-paper {
  background-image:
    linear-gradient(rgb(225 212 192 / .92), rgb(225 212 192 / .92)),
    var(--texture-paper);
  background-size: auto, 320px 320px;
}

.hero,
.dishes,
.reserve-cta,
footer {
  background-color: var(--fg);
  background-image:
    radial-gradient(circle at 20% 18%, rgb(154 58 47 / .22), transparent 30rem),
    radial-gradient(circle at 82% 74%, rgb(160 107 73 / .12), transparent 26rem),
    var(--texture-plaster);
  background-size: auto, auto, 360px 360px;
}

.hero-caption,
.gallery-card-copy {
  background-image: var(--texture-plaster);
  background-size: 220px 220px;
}

.menu-panel,
.chef-caption,
.honours-caption,
.placeholder-label {
  background-image:
    linear-gradient(rgb(237 227 210 / .9), rgb(237 227 210 / .9)),
    var(--texture-paper);
  background-size: auto, 240px 240px;
}

.image-placeholder {
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--surface), var(--bg) 18%), var(--surface));
}

.brand {
  max-width: 18rem;
  font-size: clamp(1.05rem, 1.45vw, 1.4rem);
  letter-spacing: .035em;
}

.brand-sub {
  font-size: .48rem;
}

.contact-placeholders {
  width: min(100%, 960px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  margin: 1.4rem auto 0;
  font-family: var(--font-mono);
  font-size: .62rem;
  line-height: 1.45;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.contact-placeholders[hidden] {
  display: none;
}

.contact-placeholders span {
  min-width: 0;
  padding: .75rem;
  border: 1px solid color-mix(in oklch, var(--white), transparent 72%);
  color: color-mix(in oklch, var(--white), transparent 18%);
}

.contact-placeholders strong {
  display: block;
  margin-bottom: .22rem;
  color: var(--white);
  font-weight: 650;
}

.contact-alternative a[aria-disabled="true"] {
  cursor: default;
  opacity: .75;
}

/* Opening section: a calm image-led spread with a narrow, readable title column. */
.opening {
  min-height: auto;
  padding-block: clamp(4.5rem, 7vw, 7rem);
}

.opening-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}

.opening-grid > .opening-photo {
  grid-column: 1;
  grid-row: 1;
  transform: none;
}

.opening-grid > .reveal:first-child {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: grid;
  align-content: center;
  gap: 1.5rem;
  padding-block: 1rem;
  transform: none;
}

.opening-name {
  position: static;
  margin: 0;
}

.opening-title {
  width: auto;
  max-width: 23ch;
  font-size: clamp(2rem, 2.55vw, 2.9rem);
  line-height: 1;
  letter-spacing: .035em;
  text-wrap: balance;
}

.opening-title span {
  color: inherit;
}

.opening-photo-frame {
  aspect-ratio: auto;
}

.opening-photo-frame img {
  display: block;
  height: auto;
  object-fit: contain;
}

.archive-note {
  max-width: 42rem;
  margin-top: .75rem;
}

/* Supplied photography is displayed without editing or content-altering crops. */
.heritage-visuals {
  display: block;
  width: min(100%, 560px);
  justify-self: end;
}

.chef-portrait {
  height: auto;
}

.chef-portrait img {
  display: block;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.principles-head {
  grid-template-columns: minmax(180px, .52fr) minmax(0, 1.48fr);
  align-items: start;
}

.principles-media {
  width: 100%;
  display: block;
  justify-self: end;
}

.principles-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--fg);
}

.principles-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.principles-photo-caption {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  max-width: calc(100% - 1.5rem);
  padding: .58rem .7rem;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: .6rem;
  line-height: 1.4;
  letter-spacing: .04em;
}

@media (max-width: 860px) {
  .hero-title {
    max-width: 10ch;
    font-size: clamp(2.35rem, 10vw, 3rem);
  }

  .history-title,
  .signature-title,
  .principles-title,
  .dishes-title,
  .restaurant-title,
  .visit-title,
  .menu-paper-title,
  .contact-title,
  .heritage-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
  }

  .opening {
    padding-block: 4rem;
  }

  .opening-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .opening-grid > .opening-photo {
    grid-column: 1;
    grid-row: 1;
  }

  .opening-grid > .reveal:first-child {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    gap: 1rem;
    padding: 0;
  }

  .opening-title {
    max-width: 22ch;
    font-size: clamp(2rem, 8.8vw, 2.7rem);
  }

  .opening-photo-frame {
    aspect-ratio: auto;
  }

  .principles-head {
    grid-template-columns: 1fr;
  }

  .heritage-visuals,
  .principles-media {
    width: min(100%, 620px);
    margin-left: auto;
    justify-self: end;
  }

  .hero::after {
    height: 44svh;
  }

  .hero-media {
    min-height: 44svh;
  }

  .contact-placeholders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .hero::after {
    height: 38svh;
  }

  .hero-media {
    min-height: 38svh;
  }

  .contact-placeholders {
    grid-template-columns: 1fr;
  }
}