:root {
  color-scheme: dark;
  --background: #141713;
  --text: #e9e1d3;
  --gold: #d9bb89;
  --line: #71664f;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font: 1rem/1.65 system-ui, sans-serif;
}
header { border-block-end: 1px solid var(--line); }
nav, main, footer {
  width: min(100% - 2rem, 62rem);
  margin-inline: auto;
}
nav {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  padding-block: 1rem;
}
a { color: var(--gold); text-underline-offset: .2em; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
nav .brand { margin-inline-end: auto; font: 1.2rem Georgia, serif; }
[aria-current="page"] { color: var(--text); }
main { padding-block: clamp(2rem, 7vw, 5rem); }
h1, h2 { font: 400 1.8rem/1.12 Georgia, serif; }
h1 { margin: .3rem 0 1rem; font-size: clamp(2.7rem, 8vw, 5rem); }
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .13em; font-size: .78rem; }
.intro { max-width: 42rem; font-size: 1.2rem; }
.action {
  display: inline-block;
  padding: .65rem 1.1rem;
  background: var(--gold);
  color: var(--background);
  font-weight: 650;
  text-decoration: none;
}
.drinks { max-width: 40rem; }
.drinks > div, details { border-block-start: 1px solid var(--line); padding-block: .75rem; }
dt { display: flex; justify-content: space-between; gap: 1rem; font-weight: 650; }
dd { margin: 0; }
summary { cursor: pointer; color: var(--gold); }
.menu-pages, .visit-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  margin-block-start: 1rem;
}
.menu-pages img { display: block; width: 100%; height: auto; }
footer { border-block-start: 1px solid var(--line); padding-block: 1rem; font-size: .88rem; }

.reservation-layout {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
.reservation-intro figure, .visit-photo { margin: 1.5rem 0 0; }
.reservation-intro img, .visit-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.visit-link { margin-inline-start: .75rem; }

html:has(.booking-page) {
  color-scheme: light;
  background: #eee5d0;
  scroll-padding-top: 1.25rem;
}
.booking-page {
  --background: #eee5d0;
  --text: #191813;
  --line: #8c7e65;
  --gold: #72512d;
  max-width: none;
  padding: 0;
  background-color: var(--background);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%237b6c50' opacity='.07' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  font-family: var(--sans);
}
.booking-page .newspaper-shell {
  width: min(calc(100% - clamp(36px, 8vw, 116px)), 1344px);
  margin-inline: auto;
}
.booking-page a { color: inherit; }
.booking-page a:focus-visible, .booking-page button:focus-visible {
  outline: 2px solid #72512d;
  outline-offset: 3px;
}
.reservation-masthead { border-block-end: 2px solid var(--text); }
.reservation-edition {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding-block: .7rem .4rem;
  border-bottom: 1px solid var(--line);
  font: .65rem/1.5 ui-monospace, monospace;
  letter-spacing: .08em;
}
.booking-page .reservation-nav {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(1rem, 3.5vw, 3.5rem);
  align-items: center;
  padding-block: .9rem 1rem;
}
.reservation-wordmark {
  display: inline-block;
  font: 500 clamp(1.5rem, 2.8vw, 2.6rem)/.88 var(--serif);
  text-transform: uppercase;
  text-decoration: none;
}
.reservation-nav .reservation-wordmark {
  padding-inline-end: clamp(1rem, 2.4vw, 2rem);
  border-inline-end: 1px solid var(--line);
}
.reservation-nav-links, .reservation-nav-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.7rem, 2.5vw, 2.2rem);
}
.reservation-nav-links a, .reservation-nav-actions {
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.reservation-nav-links a, .reservation-nav-cta { text-decoration: none; }
.reservation-nav-links a:hover, .reservation-nav-cta:hover { text-decoration: underline; }
.reservation-nav-cta { padding: .73rem .9rem; border: 1px solid var(--text); }
.booking-language { display: flex; align-items: center; gap: .35rem; }
.booking-language button {
  padding: .2rem .05rem;
  border: 0;
  border-bottom: 1px solid transparent;
  color: inherit;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.booking-language [aria-pressed="true"] { border-bottom-color: currentColor; }
.booking-page main { padding-block: clamp(2rem, 6vw, 5.4rem) 0; }
.booking-page .reservation-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.09fr);
  grid-template-areas: "intro form" "photo form";
  grid-template-rows: auto 1fr;
  column-gap: clamp(1.6rem, 3.25vw, 3.2rem);
  row-gap: clamp(1.35rem, 3vw, 2.6rem);
}
.reservation-intro { grid-area: intro; padding-top: .9rem; }
.booking-page .reservation-intro .eyebrow {
  margin: 0 0 clamp(1rem, 2.3vw, 2rem);
  color: var(--text);
  font-size: clamp(.7rem, 1.15vw, .9rem);
  letter-spacing: .2em;
}
.booking-page .reservation-intro h1 {
  margin: 0;
  font: 500 clamp(3.3rem, 7.9vw, 7rem)/.97 var(--serif);
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-wrap: balance;
}
.booking-page .reservation-intro .intro {
  margin: .95rem 0 0;
  font: italic 500 clamp(1.5rem, 2.7vw, 2.6rem)/1.12 var(--serif);
}
.reservation-photo {
  grid-area: photo;
  margin: 0;
  padding: 5px;
  border: 1px solid var(--line);
}
.reservation-photo img { display: block; width: 100%; height: auto; }
.booking-page #booking-dialog {
  grid-area: form;
  position: static;
  inset: auto;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  overflow: visible;
  border-color: #a99b81;
  box-shadow: 0 8px 18px #352a1a21;
}
.reservation-practical {
  margin-block-start: clamp(2.4rem, 4.2vw, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.reservation-section-label {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 1rem;
  font: .72rem/1.5 ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.reservation-section-label::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.booking-page .visit-info {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding-block: 1rem;
  border: 1px solid var(--line);
}
.booking-page .visit-info section { padding: .3rem clamp(1rem, 3.15vw, 2.65rem) .75rem; }
.booking-page .visit-info section + section { border-inline-start: 1px solid var(--line); }
.booking-page .visit-info h2 {
  margin: 0 0 .8rem;
  font: 600 clamp(1.35rem, 2.55vw, 2.05rem)/1.05 var(--serif);
  text-transform: uppercase;
}
.booking-page .visit-info p { margin: 0 0 .9rem; }
.booking-page .visit-info a { overflow-wrap: anywhere; }
.booking-page .visit-info [data-t="map"] { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.reservation-footer {
  margin-block-start: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 .8rem;
  border-top: 2px solid var(--text);
}
.reservation-footer-columns { display: grid; grid-template-columns: 1.24fr 1fr .91fr; gap: 1.5rem; }
.reservation-footer .reservation-wordmark { margin-bottom: .55rem; font-size: clamp(1.55rem, 2.45vw, 2.25rem); }
.reservation-footer h2 {
  margin: 0 0 1rem;
  font: 600 .81rem/1.4 var(--sans);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.reservation-footer p { margin-block: .3rem; }
.reservation-footer ul { padding: 0; margin: 0; list-style: none; }
.reservation-footer li + li { margin-top: .25rem; }
.reservation-footer .reservation-last-word {
  margin: clamp(1.4rem, 3.5vw, 3rem) 0 0;
  padding-block: .85rem;
  border-block: 1px solid var(--line);
  font: 600 clamp(1.1rem, 2.25vw, 1.85rem)/1.15 var(--serif);
  text-align: center;
  text-transform: uppercase;
}
.reservation-colophon { display: flex; justify-content: space-between; gap: .75rem; padding-top: .75rem; }
.reservation-colophon small { font: .59rem/1.5 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.reservation-colophon a { white-space: nowrap; font-size: .68rem; text-transform: uppercase; }
.booking-page.menu-popup-open { overflow: hidden; }
.booking-page #cocktail-menu { margin: auto; }
.booking-page #cocktail-menu [data-menu-pdf] { white-space: nowrap; }
@media (max-width: 900px) {
  .booking-page .reservation-nav { grid-template-columns: 1fr auto; column-gap: .75rem; }
  .reservation-nav-links { grid-area: 2 / 1 / 3 / -1; justify-content: space-between; }
  .reservation-nav .reservation-wordmark { border: 0; padding-inline-end: 0; }
}
@media (max-width: 760px) {
  .reservation-layout { grid-template-columns: minmax(0, 1fr); }
  .booking-page .reservation-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "photo"; grid-template-rows: auto; }
  .booking-page .reservation-intro { padding-top: 0; }
  .booking-page .reservation-intro h1 { font-size: clamp(3rem, 11vw, 5rem); text-wrap: initial; }
  .booking-page .visit-info, .reservation-footer-columns { grid-template-columns: 1fr; }
  .booking-page .visit-info { padding-block: 0; }
  .booking-page .visit-info section { padding: 1rem; }
  .booking-page .visit-info section + section { border-inline-start: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 470px) {
  .reservation-nav-links, .reservation-nav-actions { gap: .65rem; }
  .reservation-nav-links a, .reservation-nav-actions { font-size: .62rem; }
  .reservation-nav-cta { padding: .5rem .45rem; white-space: normal; text-align: center; }
  .reservation-edition { font-size: .55rem; }
  .booking-page .reservation-intro h1 { font-size: clamp(2.5rem, 11vw, 3.25rem); }
}

/* The full menu is an open book on the same newspaper paper as reservations. */
.menu-page main { padding-block: clamp(1.5rem, 4vw, 3rem) 0; }
.menu-page-intro { text-align: center; margin-bottom: 1.25rem; }
.menu-page-intro .eyebrow { margin: 0 0 .35rem; color: var(--text); letter-spacing: .2em; }
.menu-page-intro h1 {
  margin: 0;
  font: 500 clamp(2.9rem, 6vw, 5.2rem)/.98 var(--serif);
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.menu-reader {
  --reader-height: clamp(22rem, 66dvh, 49rem);
  padding: clamp(.65rem, 2vw, 1.25rem);
  border-block: 1px solid var(--line);
  background: #fff9ea55;
}
.menu-reader .menu-book-viewer {
  height: var(--reader-height);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
.menu-reader .menu-spread { max-width: none; width: min(100%, calc(var(--reader-height) * 1.411765)); height: 100%; }
.menu-reader .is-single .menu-spread { width: min(100%, calc(var(--reader-height) * .705882)); }
.menu-reader .menu-leaf img { width: 100%; height: 100%; }
.menu-reader .menu-book-viewer.is-zoomed { display: block; overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
.menu-reader .menu-book-viewer.is-zoomed .menu-spread { width: max-content; height: auto; }
.menu-reader .is-zoomed .menu-leaf img { width: min(950px, 170vw); max-width: none; height: auto; }
.menu-reader .menu-controls { margin-bottom: .75rem; }
.menu-reader .menu-hint { color: var(--text); }
.menu-reader-actions { display: flex; gap: 1rem; justify-content: center; margin-top: .7rem; }
.menu-reader-link {
  border: 0;
  background: transparent;
  padding: .45rem .25rem;
  color: inherit;
  font: 600 .7rem/1.4 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: .25em;
  cursor: pointer;
}
.menu-reader [hidden] { display: none; }
@media (max-width: 700px) {
  .menu-reader { --reader-height: min(126vw, 67dvh); }
}