:root {
  --chalk: #f3efe5;
  --white: var(--chalk);
  --aegean: #164c72;
  --olive: #394838;
  --stone: #bcae97;
  --ink: #121412;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --page-pad: clamp(1.25rem, 4vw, 5rem);
  --section-space: clamp(5rem, 11vw, 10rem);
  --hairline: 1px solid rgba(18, 20, 18, .28);
  --measure: 39rem;
}

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

html { scroll-behavior: smooth; }

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

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

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 3px solid var(--stone);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  z-index: 20;
  top: .5rem;
  left: .5rem;
  padding: .8rem 1rem;
  background: var(--white);
  color: var(--ink);
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

.concept-note {
  display: flex;
  justify-content: center;
  gap: .45rem;
  padding: .48rem 1rem;
  background: var(--ink);
  color: var(--white);
  font-size: .68rem;
  letter-spacing: .09em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.site-header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .75rem 1rem;
  padding: 1.1rem var(--page-pad);
  background: var(--white);
  border-bottom: var(--hairline);
}

.wordmark {
  display: inline-flex;
  width: fit-content;
  flex-direction: column;
  color: var(--aegean);
  line-height: .9;
  text-decoration: none;
}

.wordmark span {
  font-family: var(--serif);
  font-size: 1.55rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.wordmark small {
  margin-top: .4rem;
  color: var(--ink);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.menu-toggle {
  display: inline-flex;
  min-width: 4.4rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .6rem .75rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 700 .72rem/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-toggle__lines { display: grid; gap: 4px; width: 15px; }
.menu-toggle__lines i { display: block; height: 1px; background: currentColor; }

.site-nav {
  grid-column: 1 / -1;
  padding: .75rem 0 .15rem;
  border-top: var(--hairline);
}

.site-nav:not([hidden]) { display: grid; animation: menu-in .2s ease-out both; }

.site-nav a {
  display: flex;
  min-height: 44px;
  align-items: center;
  border-bottom: 1px solid rgba(18, 20, 18, .12);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
}

.header-action {
  grid-column: 1 / -1;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: .75rem 1rem;
  background: var(--aegean);
  color: var(--white);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: .98;
  text-wrap: balance;
}

h1 { margin-bottom: 1.35rem; font-size: clamp(3rem, 14vw, 5.2rem); letter-spacing: -.045em; }
h2 { margin-bottom: 1.4rem; font-size: clamp(2.65rem, 11vw, 5.8rem); letter-spacing: -.04em; }
h3 { font-size: clamp(1.65rem, 7vw, 2.6rem); }

.section-number {
  margin-bottom: 1.1rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hero {
  background: var(--ink);
  color: var(--white);
}

.hero__copy { padding: 3.5rem var(--page-pad) 2.6rem; }

.hero__intro {
  max-width: 29rem;
  margin-bottom: 1.8rem;
  color: rgba(251, 250, 245, .78);
  font-family: var(--serif);
  font-size: 1.05rem;
}

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.25rem; }

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: .85rem 1.2rem;
  border: 1px solid transparent;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.button--light { background: var(--white); color: var(--ink); }
.button--blue { background: var(--aegean); color: var(--white); }
.button--outline { border-color: currentColor; color: var(--white); }

.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .55rem;
  color: var(--white);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration-thickness: 1px;
  text-underline-offset: .35rem;
  text-transform: uppercase;
}

.hero__frame,
.room-scene__frame,
.fire-scene__visual { margin: 0; }

.template-layout-1 {
  position: relative;
  padding: .55rem 0;
  background: var(--ink);
}

.hero__frame img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 60% center;
  animation: frame-reveal .7s ease-out both;
}

figcaption.template-layout-2 {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  padding: .55rem var(--page-pad) 0;
  color: rgba(251, 250, 245, .7);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.menu-index { padding: var(--section-space) var(--page-pad); background: var(--white); }

.section-lead { max-width: var(--measure); margin-bottom: 3.5rem; }
.section-lead > div > p { max-width: 33rem; color: rgba(18, 20, 18, .7); font-family: var(--serif); font-size: 1.05rem; }

.menu-lines.template-layout-3 { border-top: 1px solid var(--ink); }

.menu-line {
  position: relative;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: .2rem .75rem;
  padding: 1.55rem 0 1.8rem;
  border-bottom: var(--hairline);
}

.menu-line::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 2.6rem;
  height: 2px;
  background: var(--aegean);
}

.menu-line__number { padding-top: .35rem; color: var(--aegean); font-size: .67rem; font-weight: 700; letter-spacing: .12em; }
.menu-line h3 { grid-column: 2; margin-bottom: .55rem; }
.menu-line p { grid-column: 2; max-width: 32rem; margin-bottom: 0; color: rgba(18, 20, 18, .68); }
.text-link--dark { margin-top: 2.2rem; color: var(--ink); }

.room-scene { padding: var(--section-space) var(--page-pad); background: var(--aegean); color: var(--white); }
.room-scene__statement { max-width: 41rem; margin: 0 0 3rem; }
.room-scene__statement > p:last-child { max-width: 34rem; color: rgba(251, 250, 245, .78); font-family: var(--serif); font-size: 1.08rem; }
.room-scene__frame { margin-right: calc(var(--page-pad) * -1); margin-left: calc(var(--page-pad) * -1); }
.room-scene__frame img { aspect-ratio: 16 / 10; object-fit: cover; }

.reservation {
  position: relative;
  display: grid;
  min-height: 36rem;
  align-content: center;
  overflow: hidden;
  padding: var(--section-space) var(--page-pad);
  background: var(--chalk);
}

.reservation__copy { position: relative; z-index: 1; max-width: 43rem; }
.reservation__copy > p:not(.section-number) { max-width: 32rem; margin-bottom: 2rem; font-family: var(--serif); font-size: 1.05rem; }
.fire-scene { background: var(--ink); color: var(--white); }
.fire-scene__visual img { aspect-ratio: 4 / 3; object-fit: cover; }
.fire-scene__copy { padding: var(--section-space) var(--page-pad); }
.fire-scene__copy h2 { max-width: 34rem; }
.fire-scene__copy > p:last-of-type { max-width: 31rem; color: rgba(251, 250, 245, .72); }
.fire-words { margin: 2.5rem 0; color: var(--stone); font-family: var(--serif); font-size: clamp(1.6rem, 7vw, 2.7rem); line-height: 1.25; }

.scene-timeline.template-layout-4 {
  padding: var(--section-space) var(--page-pad);
  background: var(--olive);
  color: var(--white);
}

.scene-timeline__title { margin-bottom: 3rem; }
.scene-timeline ol { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.scene-timeline ol::before { content: ""; position: absolute; top: 1.15rem; bottom: 1.15rem; left: .28rem; width: 1px; background: rgba(251, 250, 245, .35); }
.scene-timeline li { position: relative; display: grid; grid-template-columns: 2.6rem 1fr; min-height: 6.5rem; padding-bottom: 2rem; }
.scene-timeline li > span { position: relative; z-index: 1; width: .65rem; height: .65rem; margin-top: .32rem; border: 2px solid var(--olive); border-radius: 50%; background: var(--white); color: transparent; font-size: 0; }
.scene-timeline strong { font-family: var(--serif); font-size: 1.75rem; font-weight: 400; line-height: 1; }
.scene-timeline small { grid-column: 2; margin-top: .55rem; color: rgba(251, 250, 245, .68); font-size: .86rem; letter-spacing: .02em; }

.questions { padding: var(--section-space) var(--page-pad); background: var(--white); }
.questions__intro { margin-bottom: 2.8rem; }
.questions__list { border-top: 1px solid var(--ink); }
.questions details { border-bottom: var(--hairline); }
.questions summary { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; gap: 1rem; min-height: 4.8rem; align-items: center; padding: 1rem 0; font-family: var(--serif); font-size: 1.18rem; cursor: pointer; list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary span { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid currentColor; font-family: var(--sans); }
.questions details[open] summary span { transform: rotate(45deg); }
.questions details p { max-width: 36rem; padding: 0 3rem 1.6rem 0; color: rgba(18, 20, 18, .68); }

.contact-stage { display: grid; gap: 2.8rem; padding: var(--section-space) var(--page-pad); background: var(--aegean); color: var(--white); }
.contact-stage__copy h2 { max-width: 45rem; }
.contact-stage address { display: grid; gap: .25rem; padding-top: 1.5rem; border-top: 1px solid rgba(251, 250, 245, .55); font-family: var(--serif); font-size: clamp(1.2rem, 5vw, 1.8rem); font-style: normal; }
.contact-stage .button { width: fit-content; }

.site-footer { display: grid; gap: 1.8rem; padding: 3rem var(--page-pad); background: var(--ink); color: rgba(251, 250, 245, .65); }
.wordmark--footer { color: var(--white); }
.wordmark--footer small { color: var(--stone); }
.site-footer p { max-width: 38rem; margin-bottom: 0; font-size: .75rem; letter-spacing: .035em; }

@keyframes menu-in {
  from { opacity: .5; transform: translateY(-.35rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes frame-reveal {
  from { opacity: .72; }
  to { opacity: 1; }
}

@media (min-width: 48rem) {
  .site-header { grid-template-columns: auto 1fr auto; min-height: 6.2rem; }
  .menu-toggle { display: none; }
  .site-nav, .site-nav:not([hidden]) { display: flex; grid-column: auto; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); padding: 0; border: 0; animation: none; }
  .site-nav a { min-height: 44px; border: 0; }
  .header-action { grid-column: auto; white-space: nowrap; }

  .hero { display: grid; grid-template-columns: minmax(0, 52%) minmax(0, 48%); min-height: 43rem; }
  .hero__copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding-top: 5rem; padding-right: 1.5rem; padding-bottom: 5rem; }
  .hero h1 { max-width: 100%; font-size: clamp(3.75rem, 6.25vw, 4.7rem); }
  .hero__frame { display: grid; grid-template-rows: 1fr auto; min-width: 0; }
  .hero__frame img { height: 100%; min-height: 0; aspect-ratio: auto; }
  .hero__frame figcaption { padding-right: 1.2rem; padding-left: 1.2rem; }

  .section-lead { display: grid; grid-template-columns: 4rem 1fr; max-width: 56rem; }
  .section-lead > .section-number { padding-top: .7rem; }
  .menu-line { grid-template-columns: 4rem minmax(12rem, .65fr) minmax(16rem, 1fr); align-items: baseline; padding: 2rem 0; }
  .menu-line h3, .menu-line p { grid-column: auto; margin: 0; }

  .room-scene__statement { margin-left: 10vw; }
  .room-scene__frame img { aspect-ratio: 2.05 / 1; }

  .reservation { grid-template-columns: minmax(0, .9fr) minmax(25rem, 1.1fr); }
  .reservation__copy { grid-column: 2; }
  .fire-scene { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); }
  .fire-scene__visual { display: grid; grid-template-rows: 1fr auto; min-width: 0; }
  .fire-scene__visual img { height: 100%; min-height: 44rem; aspect-ratio: auto; }
  .fire-scene__copy { display: flex; flex-direction: column; justify-content: center; }

  .scene-timeline { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5rem; }
  .scene-timeline ol { grid-template-columns: repeat(3, 1fr); align-self: end; }
  .scene-timeline ol::before { top: .3rem; right: 1rem; bottom: auto; left: .3rem; width: auto; height: 1px; }
  .scene-timeline li { display: block; min-height: 0; padding: 0 1.5rem 0 0; }
  .scene-timeline li > span { display: block; margin: 0 0 2rem; }
  .scene-timeline small { display: block; margin-top: .8rem; }

  .questions { display: grid; grid-template-columns: minmax(15rem, .7fr) minmax(0, 1.3fr); gap: 5rem; }
  .questions__intro { margin: 0; }
  .contact-stage { grid-template-columns: 1.2fr .8fr; align-items: end; }
  .contact-stage .button { grid-column: 2; }
  .site-footer { grid-template-columns: .55fr 1.1fr auto; align-items: end; }
}

@media (min-width: 75rem) {
  .site-header { padding-top: 1.35rem; padding-bottom: 1.35rem; }
  .hero { grid-template-columns: minmax(29rem, .76fr) minmax(0, 1.24fr); min-height: min(48rem, calc(100vh - 8rem)); }
  .hero__copy { padding-right: clamp(3rem, 6vw, 7.5rem); }
  .hero h1 { font-size: clamp(4.7rem, 5.8vw, 5.2rem); }
  .hero__frame img { object-position: 58% center; }
  .menu-index { display: grid; grid-template-columns: minmax(17rem, .65fr) minmax(36rem, 1.35fr); gap: 3rem 8vw; }
  .section-lead { display: block; margin: 0; }
  .menu-lines { grid-column: 2; grid-row: 1 / span 2; }
  .menu-index > .text-link { align-self: end; width: fit-content; }
  .room-scene__statement { display: grid; grid-template-columns: 4rem 1fr; max-width: 58rem; margin-bottom: 4.5rem; margin-left: 14vw; }
  .room-scene__statement h2, .room-scene__statement > p:last-child { grid-column: 2; }
  .room-scene__frame { margin-right: 0; margin-left: 0; }
  .room-scene__frame img { max-height: 47rem; }
  .fire-scene { grid-template-columns: minmax(0, 1.35fr) minmax(26rem, .65fr); }
  .scene-timeline { grid-template-columns: .8fr 1.2fr; }
  .contact-stage { min-height: 42rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


@media (min-width: 48rem) {
  .reservation__copy, .questions__intro { min-width: 0; container-type: inline-size; }
  .reservation__copy h2 { font-size: clamp(2.65rem, 18cqw, 5.8rem); }
  .questions__intro h2 { font-size: clamp(2.65rem, 32cqw, 5.8rem); }
}