/* ============================================================
   The Oak Room — concept build
   Self-contained: shares no CSS, JS or branding with the
   CezDesigns site this folder sits inside.

   Served under the parent site's CSP (style-src with no
   'unsafe-inline'), so there are no inline styles anywhere and
   no JS may write element.style — scroll effects are driven by
   paused WAAPI animations instead. See js/main.js.
   ============================================================ */

/* ---------- Tokens ---------- */

:root {
  /* Warm, low-chroma palette. Nothing here is a saturated gold —
     the brass tones are deliberately dusty so they read as metal
     leaf rather than as "luxury website gold". */
  --espresso:      #16110D;
  --espresso-2:    #211913;
  --espresso-3:    #2E241B;
  --ivory:         #F7F2E9;
  --cream:         #F0E8DA;
  --beige:         #E4DACA;
  --taupe:         #9A8B79;
  --taupe-deep:    #6E6152;
  --ink:           #2A211A;
  --brass:         #A98F68;
  --brass-light:   #C9B18A;

  --rule-dark:     rgba(42, 33, 26, 0.16);
  --rule-light:    rgba(247, 242, 233, 0.26);

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --shell: clamp(20px, 5vw, 60px);
  --measure: 1220px;

  --section-y: clamp(88px, 12vw, 172px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.85;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.005em;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--espresso);
  color: var(--ivory);
  padding: 0.9em 1.4em;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* ---------- Shared pieces ---------- */

.shell {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--shell);
}

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--taupe);
  line-height: 1.6;
}

.eyebrow-light { color: var(--brass-light); }

.rule {
  width: 46px;
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--brass);
  opacity: 0.7;
}

.rule-light { background: var(--brass-light); opacity: 0.55; }
.rule-center { margin-inline: auto; }

.lede {
  color: var(--taupe-deep);
  max-width: 46ch;
}

/* Buttons — square corners, wide tracking, no shadow. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1.05em 2.3em;
  border: 1px solid currentColor;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease);
}

.btn-dark { color: var(--ink); border-color: var(--rule-dark); }
.btn-dark:hover { background: var(--espresso); border-color: var(--espresso); color: var(--ivory); }

.btn-light { color: var(--ivory); border-color: rgba(247, 242, 233, 0.4); }
.btn-light:hover { background: var(--ivory); border-color: var(--ivory); color: var(--espresso); }

.btn-solid { color: var(--espresso); background: var(--ivory); border-color: var(--ivory); }
.btn-solid:hover { background: transparent; color: var(--ivory); border-color: var(--rule-light); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  /* Every button row on the site is centred, and each sits in a grid
     that would otherwise size it to max-content and let a pair of
     buttons run past both edges of a narrow screen. */
  max-width: 100%;
}

/* Reveal-on-scroll. Only armed once JS has run, so the page is
   fully readable with scripting off or blocked. */
html.js .reveal {
  opacity: 0;
  transform: translateY(20px);
}

html.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
}

@media print {
  html.js .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Navigation
   ============================================================ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  color: var(--ivory);
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(18px, 2.4vw, 30px);
}

.nav.is-solid {
  background: var(--ivory);
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--rule-dark);
}

.nav-mark {
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 42px);
}

.nav-links a {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.82;
  transition: opacity 0.4s var(--ease);
}

.nav-links a:hover { opacity: 1; }

.nav-cta {
  padding: 0.85em 1.7em;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* Over the photograph the CTA fills ivory; once the bar turns solid it
   fills espresso instead, so it always inverts against its own panel. */
.nav-cta:hover {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--espresso);
}

.nav.is-solid .nav-cta:hover {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--ivory);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle-bars {
  display: block;
  width: 22px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

@media (max-width: 860px) {
  .nav-links,
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Mobile panel */
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--espresso);
  color: var(--ivory);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--shell);
  opacity: 0;
  visibility: hidden;
  /* visibility is switched outright rather than transitioned: on open it
     must be visible immediately or the close button cannot take focus,
     and on close it is held until the fade has finished. */
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}

.nav-panel.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease), visibility 0s;
}

.nav-panel-close {
  position: absolute;
  top: clamp(18px, 2.4vw, 30px);
  right: var(--shell);
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.6em 0;
}

.nav-panel-links {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 3vw, 22px);
}

.nav-panel-links a {
  font-family: var(--serif);
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.1;
}

.nav-panel-foot {
  margin-top: clamp(36px, 8vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--brass-light);
}

/* ============================================================
   Hero
   The photograph sits in a fixed layer behind the page. The hero
   section's own bottom gradient dissolves it into the ivory of
   the page below as you scroll, and the opaque .page block then
   rises over the rest of it — so the transition is a real
   dissolve rather than a hard section edge.
   ============================================================ */

.hero-media {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--espresso);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 56%;
  transform: scale(1.02);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(12, 9, 7, 0.66) 0%,
      rgba(12, 9, 7, 0.30) 30%,
      rgba(12, 9, 7, 0.34) 58%,
      rgba(12, 9, 7, 0.72) 100%),
    radial-gradient(120% 80% at 50% 46%, rgba(12, 9, 7, 0) 40%, rgba(12, 9, 7, 0.42) 100%);
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  color: var(--ivory);
  padding-block: 22vh 18vh;
}

@supports (min-height: 100svh) {
  .hero { min-height: 100svh; }
}

/* The dissolve sits below the fold, not inside the hero — so the
   photograph is untouched on load and only starts veiling into
   ivory once you actually scroll. Because the photo layer is
   fixed and this band is not, scrolling drags the gradient up
   across the image. */
.hero-dissolve {
  position: relative;
  z-index: 1;
  height: 34vh;
  min-height: 190px;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(247, 242, 233, 0) 0%,
    rgba(247, 242, 233, 0.26) 34%,
    rgba(247, 242, 233, 0.70) 66%,
    rgba(247, 242, 233, 0.94) 86%,
    var(--ivory) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.4vw, 28px);
  padding-inline: var(--shell);
  max-width: 900px;
}

.hero-mark {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.hero-mark-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 2.15rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-indent: 0.42em;
  line-height: 1.2;
}

.hero-mark-the {
  display: block;
  font-size: 0.62em;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  opacity: 0.78;
  margin-bottom: 0.35em;
}

.hero h1 {
  font-size: clamp(2.1rem, 8vw, 5.6rem);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero-sub {
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass-light);
}

/* Keep the town off its own line when the strap has to wrap. */
.hero-sub span { white-space: nowrap; }

.hero .btn-row { margin-top: clamp(10px, 2vw, 20px); }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(26px, 6vh, 54px);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass-light);
  transform: translateX(-50%);
}

.hero-scroll-line {
  display: block;
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, var(--brass-light), rgba(201, 177, 138, 0));
}

/* Everything after the hero rides above the fixed photograph. */
.page {
  position: relative;
  z-index: 2;
  background: var(--ivory);
}

/* Sub-pages have no hero photograph, so they just need room for the nav. */
.page-top {
  padding-top: clamp(120px, 16vh, 190px);
}

/* ============================================================
   Introduction
   ============================================================ */

.intro {
  padding-block: clamp(64px, 9vw, 130px) var(--section-y);
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}

.intro-statement {
  font-family: var(--serif);
  font-size: clamp(1.95rem, 4.1vw, 3.35rem);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.012em;
  max-width: 15ch;
  text-wrap: balance;
}

.intro-body {
  display: grid;
  gap: 22px;
  margin-top: clamp(26px, 3.5vw, 44px);
  max-width: 52ch;
}

.intro-body p { color: var(--taupe-deep); }

.intro-figure {
  margin: 0;
  margin-top: clamp(0px, 3vw, 46px);
}

.intro-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.intro-figure figcaption {
  margin-top: 14px;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
}

@media (max-width: 860px) {
  .intro-grid { grid-template-columns: 1fr; }
  .intro-statement { max-width: 18ch; }
}

/* ============================================================
   Menu
   ============================================================ */

.menu {
  padding-block: var(--section-y);
  background: var(--cream);
}

.section-head {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  margin-bottom: clamp(48px, 7vw, 92px);
}

.section-head h2 {
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  letter-spacing: 0.06em;
}

.section-head .lede { margin-top: 4px; }

.menu-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: clamp(52px, 7vw, 104px);
}

.course { align-self: start; }

.course-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--rule-dark);
}

.course-head h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
}

.course-note {
  margin-left: auto;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  white-space: nowrap;
}

.dishes { display: grid; gap: clamp(20px, 2.4vw, 30px); }

.dish-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.dish-head h4 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 400;
  line-height: 1.25;
}

.dish-price {
  font-size: 0.85rem;
  color: var(--taupe);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.dish p {
  margin-top: 4px;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--taupe-deep);
  max-width: 44ch;
}

.menu-figure { margin: 0; }

.menu-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.course-starters { grid-column: 1 / 7;  grid-row: 1; }
.figure-starters { grid-column: 8 / 13; grid-row: 1; }
.figure-mains    { grid-column: 1 / 6;  grid-row: 2; }
.course-mains    { grid-column: 7 / 13; grid-row: 2; }
.course-desserts { grid-column: 1 / 7;  grid-row: 3; }
.course-wine     { grid-column: 8 / 13; grid-row: 3; }

.menu-foot {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: clamp(56px, 8vw, 104px);
  text-align: center;
}

.menu-foot small {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
}

@media (max-width: 900px) {
  .menu-layout { grid-template-columns: 1fr; row-gap: clamp(44px, 9vw, 72px); }
  .course-starters, .figure-starters, .figure-mains,
  .course-mains, .course-desserts, .course-wine {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* ============================================================
   The experience — full-bleed photographic band
   ============================================================ */

.experience {
  position: relative;
  background: var(--espresso);
}

.experience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.experience-grid img {
  width: 100%;
  height: clamp(300px, 46vw, 560px);
  object-fit: cover;
  opacity: 0.72;
}

.experience-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 20px;
  text-align: center;
  padding: var(--shell);
  color: var(--ivory);
  background: linear-gradient(180deg,
    rgba(12, 9, 7, 0.34) 0%,
    rgba(12, 9, 7, 0.52) 50%,
    rgba(12, 9, 7, 0.34) 100%);
}

.experience-line {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4vw, 3.1rem);
  font-weight: 300;
  line-height: 1.15;
  max-width: 18ch;
  text-wrap: balance;
}

@media (max-width: 700px) {
  .experience-grid { grid-template-columns: 1fr; }
  .experience-grid img { height: clamp(230px, 44vw, 320px); }
}

/* ============================================================
   Story
   ============================================================ */

.story { padding-block: var(--section-y); }

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.story-media {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(12px, 1.6vw, 20px);
}

.story-media img { width: 100%; object-fit: cover; }

/* The tall frame spans both rows of the cluster and takes its height
   from them, so the two columns finish level however the stacked
   pair on the right resolves. */
.story-media-tall  { grid-column: 1; grid-row: 1 / 3; height: 100%; min-height: 0; }
.story-media-small { grid-column: 2; grid-row: 1; aspect-ratio: 1 / 1; margin-top: clamp(24px, 5vw, 64px); }
.story-media-chef  { grid-column: 2; grid-row: 2; aspect-ratio: 4 / 5; }

.story-body { display: grid; gap: 22px; }

.story-body h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.35rem);
  max-width: 18ch;
  text-wrap: balance;
}

.story-body p { color: var(--taupe-deep); max-width: 50ch; }

.story-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(18px, 3vw, 34px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--rule-dark);
}

.story-meta h3 {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 12px;
}

.story-meta p, .story-meta a {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ink);
}

.story-meta a { border-bottom: 1px solid var(--rule-dark); }
.story-meta a:hover { border-color: var(--brass); }

@media (max-width: 900px) {
  .story-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Reservations
   ============================================================ */

.reserve {
  background: var(--espresso);
  color: var(--ivory);
  padding-block: clamp(84px, 11vw, 150px);
}

.reserve-inner {
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.4vw, 26px);
  text-align: center;
}

.reserve h2 {
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  font-weight: 300;
  max-width: 14ch;
  text-wrap: balance;
}

.reserve p {
  color: var(--brass-light);
  max-width: 42ch;
}

.reserve .btn-row { margin-top: clamp(12px, 2vw, 22px); }

.reserve-note {
  margin-top: 6px;
  max-width: none;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 242, 233, 0.45);
}

/* ============================================================
   Footer
   ============================================================ */

.foot {
  background: var(--espresso-2);
  color: var(--ivory);
  padding-block: clamp(60px, 8vw, 104px) clamp(28px, 4vw, 44px);
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 0.85fr));
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(38px, 5vw, 60px);
  border-bottom: 1px solid rgba(247, 242, 233, 0.12);
}

.foot-mark {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  text-indent: 0.4em;
  margin-bottom: 18px;
}

.foot-brand p {
  color: rgba(247, 242, 233, 0.6);
  font-size: 0.95rem;
  max-width: 30ch;
}

.foot-col h3 {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}

.foot-col ul { display: grid; gap: 8px; }

.foot-col a, .foot-col li {
  font-size: 0.93rem;
  line-height: 1.7;
  color: rgba(247, 242, 233, 0.72);
}

.foot-col a { transition: color 0.4s var(--ease); }
.foot-col a:hover { color: var(--ivory); }

.foot-hours {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.foot-hours span:last-child {
  color: rgba(247, 242, 233, 0.5);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.foot-social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.foot-social svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 28px;
  padding-top: clamp(22px, 3vw, 32px);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 242, 233, 0.38);
}

@media (max-width: 860px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .foot-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Sub-page furniture (menu.html, reservations.html)
   ============================================================ */

.page-head {
  display: grid;
  gap: 20px;
  padding-bottom: clamp(48px, 7vw, 88px);
  text-align: center;
  justify-items: center;
}

.page-head h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: 0.02em;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe);
  transition: color 0.4s var(--ease);
}

.back-link:hover { color: var(--ink); }

/* Full menu page */
.full-menu {
  display: grid;
  gap: clamp(60px, 8vw, 110px);
  padding-bottom: var(--section-y);
}

.full-menu-band {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: clamp(36px, 5vw, 56px);
  align-items: start;
}

.full-menu-band .course { grid-column: 1 / 8; }
.full-menu-band .menu-figure { grid-column: 9 / 13; }
.full-menu-band.is-flipped .course { grid-column: 6 / 13; }
.full-menu-band.is-flipped .menu-figure { grid-column: 1 / 5; grid-row: 1; }

@media (max-width: 900px) {
  .full-menu-band { grid-template-columns: 1fr; }
  .full-menu-band .course,
  .full-menu-band .menu-figure,
  .full-menu-band.is-flipped .course,
  .full-menu-band.is-flipped .menu-figure { grid-column: 1 / -1; grid-row: auto; }
}

/* Reservations page */
.booking {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
  padding-bottom: var(--section-y);
}

.booking-aside img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.booking-aside dl {
  margin: clamp(26px, 3vw, 38px) 0 0;
  display: grid;
  gap: 18px;
}

.booking-aside dt {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 6px;
}

.booking-aside dd { margin: 0; font-size: 0.95rem; line-height: 1.7; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 30px);
}

.field { display: grid; gap: 9px; }
.field-wide { grid-column: 1 / -1; }

.field label {
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--taupe);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85em 0;
  border: 0;
  border-bottom: 1px solid var(--rule-dark);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  border-radius: 0;
  transition: border-color 0.4s var(--ease);
}

.field select { padding-inline-end: 1.4em; }

.field textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.7;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--brass);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}

.form-foot {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  gap: 16px;
  margin-top: clamp(10px, 2vw, 18px);
}

.form-foot small { font-size: 0.8rem; color: var(--taupe); line-height: 1.7; }

.form-status {
  grid-column: 1 / -1;
  padding: 1.2em 1.4em;
  border: 1px solid var(--brass);
  background: var(--cream);
  font-size: 0.95rem;
  line-height: 1.7;
}

.form-status[hidden] { display: none; }

.field-error {
  font-size: 0.78rem;
  color: #8C3A28;
  letter-spacing: 0.02em;
  text-transform: none;
}

.field-error[hidden] { display: none; }

@media (max-width: 860px) {
  .booking { grid-template-columns: 1fr; }
  .booking-aside { order: -1; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Small screens
   The layout stacks through the section rules above; what is left
   here is the handful of places where a value tuned for a wide
   screen reads as dead space or crowding on a narrow one.
   ============================================================ */

@media (max-width: 560px) {
  /* 34vh of dissolve is a third of a phone screen of empty cream
     between the photograph and the first line of copy. */
  .hero-dissolve { height: 22vh; min-height: 150px; }

  .hero { padding-block: 18vh 16vh; }
  .hero-sub { font-size: 0.66rem; letter-spacing: 0.15em; }

  /* Two full-width buttons stacked read better than two cramped
     ones side by side. */
  .hero .btn-row { flex-direction: column; justify-self: stretch; }
  .hero .btn-row .btn { width: 100%; }

  .dish-head { gap: 12px; }
  .foot-bottom { gap: 8px; }
}

/* ------------------------------------------------------------------
   cezdesigns-portfolio-embed
   This build is also framed as a scrollable preview inside the
   CezDesigns portfolio. Containing the overscroll stops a scroll that
   reaches this document's top or bottom edge from chaining out and
   moving the CezDesigns page behind it. Harmless when the site is
   viewed on its own.
   ------------------------------------------------------------------ */
html { overscroll-behavior-y: contain; }