/* stylelint-disable property-no-vendor-prefix -- Need to preserve browser-specific reset properties. */
@layer reset {
  :root {
    /* Chrome rounds computed line-height:
    16px (font-size) * 1.15 (line-height) = 18.4px (line-height);
    But chrome uses 18px. So use a number that gives full pixels. (1.124 or 1.1875) */
    line-height: 1.1875;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
  }
  h1 {
    margin-block: 0.67em;
    font-size: 2em;
  }
  :is(dl, ol, ul) :is(dl, ol, ul) {
    margin: 0;
  }
  hr {
    color: inherit;
  }
  abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.1em;
  }
  b,
  strong {
    font-weight: bolder;
  }
  small {
    font-size: 80%;
  }
  table {
    border-color: currentcolor;
  }
  textarea,
  button,
  input,
  select {
    margin: 0;
  }
  textarea {
    baseline-source: first;
  }
  button,
  input:is([type=button], [type=submit], [type=reset]) {
    -webkit-appearance: button;
  }
  [type=search] {
    -webkit-appearance: textfield;
    /* outline-offset: -2px; */
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-moz-placeholder {
    opacity: 0.54;
    color: inherit;
  }
  ::placeholder {
    opacity: 0.54;
    color: inherit;
  }
  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  summary {
    display: list-item;
  }
  search {
    display: block;
  }
  [inert] {
    cursor: default;
    pointer-events: none;
  }
  [inert], [inert] * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
}
@layer reset {
  *, *::before, *::after {
    background-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition-behavior: allow-discrete !important;
  }
  :root {
    font-size: 1em;
    line-height: 1.4;
    hanging-punctuation: first allow-end last;
    interpolate-size: allow-keywords;
    overflow-wrap: anywhere;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
  }
  body {
    box-sizing: border-box;
    min-block-size: 100vb;
    min-block-size: 100svb;
  }
  :root,
  body,
  figure {
    margin: 0;
  }
  audio,
  canvas,
  embed,
  iframe,
  img,
  object,
  picture,
  svg,
  video {
    display: block;
    block-size: auto;
    max-inline-size: 100%;
  }
  ::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
  }
  ::selection {
    background: #b3d4fc;
    text-shadow: none;
  }
  hr {
    display: block;
    block-size: 1px;
    margin-block: 1lh;
    padding: 0;
    border: 0;
    border-block-start: 1px solid currentcolor;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  label,
  button,
  input:is([type=button], [type=submit], [type=reset]) {
    text-wrap: balance;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  label,
  input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=color], [type=file], [type=range]),
  button {
    line-height: 1.1;
  }
  h3,
  address {
    font-style: normal;
  }
  dialog {
    border: none;
  }
  dialog:not([open], :modal) {
    display: none !important;
  }
  dialog:modal {
    box-sizing: border-box;
    block-size: auto;
    max-block-size: 100%;
    inline-size: auto;
    max-inline-size: 100%;
    overflow-block: auto;
    overscroll-behavior-block: contain;
  }
  body:has(dialog:open, dialog[open]) {
    overflow: hidden;
  }
  iframe {
    border: none;
  }
  p {
    margin-block: 1lh;
  }
  figure:has(figcaption) {
    inline-size: -moz-fit-content;
    inline-size: fit-content;
    margin-inline: auto;
  }
  figure > figcaption {
    contain: inline-size;
  }
  pre {
    white-space: pre-wrap;
  }
  :where(ul, ol) {
    padding-inline-start: 1em;
  }
  blockquote {
    margin-inline: 0;
  }
  table,
  time,
  math {
    font-variant-numeric: tabular-nums lining-nums slashed-zero;
  }
  abbr {
    font-variant-caps: all-small-caps;
  }
  abbr:not([title]) {
    text-decoration: none;
  }
  abbr[title] {
    cursor: help;
  }
  sub,
  sup {
    line-height: 0;
  }
}
@layer reset {
  input,
  textarea,
  select,
  button {
    font: inherit;
  }
  input,
  textarea,
  select {
    box-sizing: border-box;
  }
  input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=color], [type=file], [type=range]),
  textarea,
  select {
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
    color: inherit;
    font-size: 1rem;
    text-indent: 0.3em;
  }
  @supports (background: Field) {
    input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=color], [type=file], [type=range]),
    textarea,
    select {
      background: Field;
    }
  }
  @supports (border-color: -apple-system-secondary-label) {
    input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=color], [type=file], [type=range]),
    textarea,
    select {
      border-color: -apple-system-secondary-label;
    }
  }
  input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=color], [type=file], [type=range]),
  textarea {
    padding-inline: 0;
  }
  input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=color], [type=file], [type=range]):dir(rtl):-moz-placeholder, :dir(rtl) > input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=color], [type=file], [type=range])[dir=auto]:-moz-placeholder, textarea:dir(rtl):-moz-placeholder, :dir(rtl) > textarea[dir=auto]:-moz-placeholder {
    direction: rtl;
  }
  input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=color], [type=file], [type=range]):dir(rtl):placeholder-shown, :dir(rtl) > input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=color], [type=file], [type=range])[dir=auto]:placeholder-shown,
  textarea:dir(rtl):placeholder-shown,
  :dir(rtl) > textarea[dir=auto]:placeholder-shown {
    direction: rtl;
  }
  input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=color], [type=file], [type=range]) :is([type=tel], [type=url], [type=email]):not([dir], :-moz-placeholder), textarea :is([type=tel], [type=url], [type=email]):not([dir], :-moz-placeholder) {
    direction: ltr;
  }
  input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=color], [type=file], [type=range]) :is([type=tel], [type=url], [type=email]):not([dir], :placeholder-shown),
  textarea :is([type=tel], [type=url], [type=email]):not([dir], :placeholder-shown) {
    direction: ltr;
  }
  select:not([multiple]) {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    text-indent: 0;
  }
  @supports (-webkit-tap-highlight-color: initial) and (not (-webkit-hyphens: none)) {
    select:not([multiple]) {
      padding-block: 0.11em;
    }
  }
  @supports (-webkit-hyphens: none) {
    select:not([multiple]) {
      border-radius: 0;
    }
  }
  @supports (-webkit-touch-callout: none) {
    select:not([multiple]) {
      text-indent: 0;
    }
  }
  input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=color], [type=file], [type=range]),
  textarea,
  select,
  label:not(input + label) {
    display: block;
    inline-size: 100%;
  }
  label {
    text-align: start;
  }
  button,
  input:is([type=button], [type=submit], [type=reset]) {
    cursor: pointer;
  }
  input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  input:is([type=date], [type=datetime-local], [type=time], [type=month], [type=week]) {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  @supports (-webkit-touch-callout: none) {
    input:is([type=date], [type=datetime-local], [type=time], [type=month], [type=week]) {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      padding-block: 0;
    }
  }
  @supports (-webkit-hyphens: none) {
    ::-webkit-datetime-edit {
      margin-block: -0.04em;
      margin-inline-start: -0.065em;
      padding: 0;
      text-indent: 0;
    }
  }
  @supports not (-webkit-hyphens: none) {
    ::-webkit-datetime-edit-fields-wrapper {
      text-indent: 0;
    }
  }
  ::-webkit-date-and-time-value {
    display: block;
    position: relative;
    min-block-size: calc(1.575em + 2px);
    padding-block-start: 0.2em;
    text-align: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  fieldset {
    margin: 0;
    padding: 0;
    border: 0;
  }
  textarea {
    padding-inline: 0.3em;
    text-indent: 0;
    resize: block;
  }
  textarea:not([rows]) {
    min-block-size: 5lh;
    field-sizing: content;
  }
}
/* "Upstairs" only */
/* "Upstairs" only */
/* "Downstairs" only */
/* "Downstairs" only */
.site-footer__contact-mediums, .site-footer__legal-links, .footer-nav__social-links, .site-header__nav__items, .form-errors {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-action, :where(dialog button[command=close]), button[type=submit] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
}

.site-footer__contact-medium__label, .site-footer__updates__title, .footer-nav__social-link__platform, .subscribe-form .input[data-input=message], .contact-form .input[data-input=comments], #nav-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

#nav-skip:active, #nav-skip:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: inherit;
}

.page-hero__title, .site-footer__name, .nav-action, :where(dialog button[command=close]) {
  display: block;
  overflow: hidden;
  border: none;
  background: transparent no-repeat 50% 50%/contain;
  -webkit-mask: no-repeat 50% 50%/contain;
  mask: no-repeat 50% 50%/contain;
  flex: 0 0 auto;
}
.page-hero__title::before, .site-footer__name::before, .nav-action::before, :where(dialog button[command=close])::before {
  content: "";
  display: block;
  inline-size: 0;
  block-size: 150%;
}

:where(.page-section__media, .page-section__media > picture) {
  display: block;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  contain: content;
}
:where(img):where(.page-section__media, .page-section__media > picture),
:where(.page-section__media, .page-section__media > picture) > img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  -o-object-fit: cover;
  object-fit: cover;
}
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
  :where(.page-section__media, .page-section__media > picture) > img {
    block-size: 100%;
  }
}

@layer forms {
  .inputs {
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    align-items: flex-start;
  }
  .inputs > * {
    flex: 0 0 100%;
  }
  .input {
    position: relative;
  }
  .form-actions {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .input__checkbox,
  .input__radio {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5em;
  }
  .input__checkbox > input, .input__radio > input {
    flex: 0 0 auto;
  }
  .input[data-type=choice-expanded] {
    display: flex;
    justify-content: stretch;
    align-items: flex-start;
  }
  .input[data-type=choice-expanded] > label {
    flex: 0 0 auto;
    inline-size: auto;
  }
  .input__choices {
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
  }
}
.no-events, .booking-teaser p, .venue-booking-notice, .site-footer__legal, body, .booking-teaser a, .page-hero__jump-link a, .site-footer__section__title, .site-footer__company, :where(.page-section:has(.page-section__headline)) .page-section__title, .site-header__nav__item__link {
  font-family: roboto-mono, "Courier New", monospace;
  -webkit-font-smoothing: antialiased;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.75;
  text-transform: none;
}

:where(.page-section:not(:has(.page-section__headline))) .page-section__title, .page-section__headline, :is(h1, h2, h3) {
  font-family: laica, "Times New Roman", serif;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 0.95;
  text-transform: none;
}

.booking-teaser a, .page-hero__jump-link a, .site-footer__section__title, .site-footer__company, :where(.page-section:has(.page-section__headline)) .page-section__title, .site-header__nav__item__link {
  font-weight: normal;
  letter-spacing: 0.2em;
  line-height: 1.3;
  text-transform: uppercase;
  text-wrap: balance;
}

.terms {
  color: var(--color__foreground--deemphasised);
  font-size: 0.75em;
  text-wrap: balance;
}
.terms > small:only-child {
  font: inherit;
}

.site-header__nav__item[data-nav-item=book-now] .site-header__nav__item__link, .nav-action, :where(dialog button[command=close]), button[type=submit], .cta {
  --cta-foreground: var(--color__foreground--emphasised);
  --cta-background: var(--color__background--emphasised);
  --cta-foreground--border: var(--cta-background);
  --cta-foreground--hover: var(--color__foreground--emphasised--accent--contrast);
  --cta-background--hover: var(--color__foreground--emphasised--accent);
  --cta-foreground--border--hover: var(--cta-background--hover);
  --cta-foreground--active: var(--color__foreground--emphasised--accent--contrast);
  --cta-background--active: var(--color__foreground--emphasised--accent--deemphasised);
  --cta-foreground--border--active: var(--cta-background--active);
  --cta-transition-duration: 0.2s;
  --cta-transitions: background-color var(--cta-transition-duration), color var(--cta-transition-duration), border-color var(--cta-transition-duration);
  display: inline-flex;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-block: 0.6em;
  padding-inline: 1.2em;
  transition: var(--cta-transitions);
  border: solid 1px var(--cta-foreground--border);
  border-radius: 0;
  background: var(--cta-background);
  color: var(--cta-foreground);
  font-size: 1em;
  text-align: center;
  text-decoration: none;
}
.site-header__nav__item[data-nav-item=book-now] .site-header__nav__item__link:is(:hover, :focus-visible), .nav-action:is(:hover, :focus-visible), :is(:hover, :focus-visible):where(dialog button[command=close]), button[type=submit]:is(:hover, :focus-visible), .cta:is(:hover, :focus-visible) {
  border-color: var(--cta-background--hover);
  background: var(--cta-background--hover);
  color: var(--cta-foreground--hover);
}
.site-header__nav__item[data-nav-item=book-now] .site-header__nav__item__link:active, .nav-action:active, :active:where(dialog button[command=close]), button[type=submit]:active, .cta:active {
  border-color: var(--cta-background--active);
  background: var(--cta-background--active);
  color: var(--cta-foreground--active);
}

.cta--secondary:not(:is(:hover, :focus-visible, :active)) {
  --cta-foreground: var(--color__foreground);
  --cta-background: var(--color__background);
  border-color: var(--cta-foreground);
  background: transparent;
}

.site-footer__main, .site-footer__company, .page-section--full .page-section__inner, .site-header__inner {
  box-sizing: border-box;
  max-inline-size: var(--metrics__max-width);
  margin-inline: auto;
}

:where([data-venue=upstairs-dining]) {
  --color__background: #c0cad1;
  --color__foreground: #0f0f0f;
  --color__foreground--accent: #e0e0e0;
  --color__foreground--accent--deemphasised: #ebe7de;
  --color__foreground--accent--contrast: #0f0f0f;
  --color__foreground--links: #a9604a;
  --color__foreground__outline: var(--color__foreground);
  --color__foreground__outline--active: var(--color__foreground--accent);
  --color__background--emphasised: #0f0f0f;
  --color__foreground--emphasised: #f2f2ed;
  --color__foreground--emphasised--accent: #a9604a;
  --color__foreground--emphasised--accent--deemphasised: #815d5d;
  --color__foreground--emphasised--accent--contrast: #e0e0e0;
}

:where([data-venue=downstairs-bar]) {
  --color__background: #a9604a;
  --color__foreground: #e0e0e0;
  --color__foreground--accent: #e0e0e0;
  --color__foreground--accent--deemphasised: #ebe7de;
  --color__foreground--accent--contrast: #0f0f0f;
  --color__foreground--links: #c0cad1;
  --color__foreground__outline: var(--color__foreground);
  --color__foreground__outline--active: var(--color__foreground--accent);
  --color__background--emphasised: #0f0f0f;
  --color__foreground--emphasised: #f2f2ed;
  --color__foreground--emphasised--accent: #e0e0e0;
  --color__foreground--emphasised--accent--deemphasised: #c0cad1;
  --color__foreground--emphasised--accent--contrast: #0f0f0f;
}

:root {
  --metrics__max-width: 1240px;
  --metrics__max-width__inner: 700px;
  --metrics__padding__x: 1.6rem;
  --metrics__padding__y: clamp(2.8rem, 3.7446808511dvi + 2.1rem, 5rem);
  --metrics__padding__y--inner: 3.6rem;
  --logo-aspect-ratio: 14 / 3;
  --breakpoint__full-nav: 1180px;
  --color__background: #f2f2ed;
  --color__foreground: #0f0f0f;
  --color__foreground--accent: #a9604a;
  --color__foreground--accent--deemphasised: #815d5d;
  --color__foreground--accent--contrast: #e0e0e0;
  --color__foreground--links: #a9604a;
  --color__foreground__outline: var(--color__foreground);
  --color__foreground__outline--active: var(--color__foreground--accent);
  --color__background--emphasised: #0f0f0f;
  --color__foreground--emphasised: #f2f2ed;
  --color__foreground--emphasised--accent: #a9604a;
  --color__foreground--emphasised--accent--deemphasised: #815d5d;
  --color__foreground--emphasised--accent--contrast: #e0e0e0;
  --color__foreground--links: rgb(72.1323529412%, 53.5539215686%, 53.5539215686%);
  --color__foreground--loading-content: #f0f;
  --color__modal__background: #fff;
  --color__modal__foreground: #000;
  --color__modal__backdrop: #0f0f0f;
  --color__modal__shadow: rgba(0, 0, 0, 0.15);
  --color__nav__overlaid-shadow: rgba(0, 0, 0, 0.15);
  accent-color: var(--color__foreground--accent);
}

@font-face {
  font-family: "laica";
  font-style: normal;
  font-weight: normal;
  src: url("/font/laica/laica-regular.woff2") format("woff2"), url("/font/laica/laica-regular.woff2") format("woff");
  font-display: fallback;
}
@font-face {
  font-family: "roboto-mono";
  font-style: normal;
  font-weight: normal;
  src: url("/font/roboto-mono/roboto-mono-regular.woff2") format("woff2"), url("/font/roboto-mono/roboto-mono-regular.woff2") format("woff");
  font-display: fallback;
}
html {
  font-size: 17px;
}

:is(h1, h2, h3) {
  color: var(--color__foreground--headings);
}

:where(p) {
  margin-block: 1em;
}

@layer reset {
  :where(ul, ol) {
    margin-block: 1lh;
    padding-inline-start: 1em;
  }
  :where(li > p:only-child) {
    margin-block: 0.3lh;
  }
}
a {
  color: var(--color__foreground--links);
  text-decoration: underline;
}

.cta-container {
  display: flex;
  flex-flow: row-reverse wrap;
  align-items: center;
  justify-content: flex-end;
  margin-block: 1.5em;
  gap: 1.5em;
}
.cta-container > .cta--primary {
  order: -1;
}

input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=color], [type=file], [type=range], [type=hidden]),
textarea,
select {
  padding-block: 0.8em;
  border: solid 1px var(--color__foreground__outline);
  border-radius: 0;
  background: var(--color__background);
  color: var(--color__foreground);
  text-indent: 1em;
}

textarea,
select {
  padding-block: 0.8em;
  padding-inline: 1.075em 1em;
  text-indent: 0;
}

textarea {
  min-block-size: 8em;
}

input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=color], [type=file], [type=range], [type=hidden]):focus-visible,
textarea:focus-visible {
  border-color: var(--color__foreground__outline--active);
  outline: solid 1px var(--color__foreground__outline--active);
}

.form-errors {
  margin-block-end: 1rem;
  text-align: center;
}

@media (scripting: enabled) {
  .input--hinted > label:first-of-type {
    position: absolute;
    inset-block-start: 1em;
    inset-inline-start: 1.035em;
    transform-origin: top left;
    transition: color 0.3s, transform 0.3s;
    color: color-mix(in oklab, var(--color__foreground), transparent 50%);
    pointer-events: none;
  }
  .input--hinted > label:first-of-type + :where(input, textarea, select) {
    padding-block: 1.3em 0.3em;
  }
  .input--hinted:has(:is(input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=color], [type=file], [type=range], [type=hidden]), textarea, select):is(:focus-visible, .__filled)) > label:first-of-type {
    transform: scale(0.7) translate(0.1em, -0.75em);
    font-weight: bold;
  }
  .input--hinted:has(:is(input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=color], [type=file], [type=range], [type=hidden]), textarea, select):focus-visible) > label:first-of-type {
    color: var(--color__foreground__outline--active);
  }
}
@media (scripting: enabled) and (prefers-reduced-motion: reduce) {
  .input--hinted > label:first-of-type {
    transition: color 0.3s;
  }
}
.inputs {
  gap: 1em;
}

.input {
  font-size: 1rem;
}

form {
  container: form/inline-size;
}
form .terms {
  margin-inline: auto;
}
form > .terms:last-child {
  margin-block-end: 0;
}

.subscribe-form > .inputs, .contact-form > .inputs {
  display: grid;
  grid-template: repeat(2, 1fr)/auto;
}
.subscribe-form > .inputs > .input, .contact-form > .inputs > .input,
.subscribe-form > .inputs > .form-actions,
.contact-form > .inputs > .form-actions {
  grid-column: span 2;
}
.subscribe-form .input[data-input=opt-in] .input__checkbox, .contact-form .input[data-input=opt-in] .input__checkbox {
  justify-content: center;
}
.subscribe-form .input[data-input=opt-in] .input__checkbox label, .contact-form .input[data-input=opt-in] .input__checkbox label {
  font-size: 0.9em;
}
.subscribe-form .grecaptcha-badge, .contact-form .grecaptcha-badge {
  margin-block-end: 1.2em;
}
.subscribe-form .grecaptcha-badge[data-style=inline], .contact-form .grecaptcha-badge[data-style=inline] {
  inline-size: 255px !important;
  overflow: hidden;
  border: solid 1px var(--color__foreground__outline);
  border-radius: 0;
  box-shadow: none !important;
}
@container form (inline-size >= 435px) {
  .subscribe-form .input[data-input=first-name], .contact-form .input[data-input=first-name], .subscribe-form .input[data-input=last-name], .contact-form .input[data-input=last-name] {
    grid-column: auto;
  }
}

#nav-skip:is(:hover, :focus-visible) {
  display: block;
  position: absolute;
  z-index: 99999;
  inset-block-start: 20px;
  inset-inline-start: 10px;
  padding-block: 0.2em;
  padding-inline: 0.6em;
  border: solid 1px #000;
  border-radius: 25px;
  background: #fff;
  text-decoration: none;
}

:root {
  --dialog__transition-duration--enter: 0.2s;
  --dialog__transition-duration--exit: 0.15s;
  --dialog__transition-duration: var(--dialog__transition-duration--enter);
}

:where(dialog) {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  block-size: -moz-fit-content;
  block-size: fit-content;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  margin: auto;
  padding: clamp(1rem, 3.4042553191dvi + 0.36rem, 3rem);
  overflow: hidden scroll;
  overscroll-behavior: auto contain;
  transition: opacity var(--dialog__transition-duration), translate var(--dialog__transition-duration);
  background: var(--color__background);
  box-shadow: 0 2px 15px var(--color__modal__shadow);
}
@starting-style {
  :where(dialog) {
    opacity: 0;
  }
}
:where(dialog):not([open], .__did-exit) {
  display: none;
}
:where(dialog).__did-exit {
  --dialog__transition-duration: var(--dialog__transition-duration--enter);
  opacity: 0;
}
:where(dialog)::backdrop {
  transition: opacity var(--dialog__transition-duration);
  opacity: 0.75;
  background: var(--color__modal__backdrop);
}
@starting-style {
  :where(dialog)::backdrop {
    opacity: 0;
  }
}
:where(dialog).__did-exit::backdrop {
  opacity: 0;
}
:where(dialog button[command=close]) {
  position: absolute;
  z-index: 5;
  inset-block-start: calc(clamp(1rem, 3.4042553191dvi + 0.36rem, 3rem) / 2);
  inset-inline-end: calc(clamp(1rem, 3.4042553191dvi + 0.36rem, 3rem) / 2);
  block-size: 2.8em;
  inline-size: 2.8em;
  border-radius: 99999999999px;
  background: none;
  color: var(--color__foreground--links);
  font-size: 1rem;
  cursor: pointer;
}
:where(dialog button[command=close])::after {
  content: "";
  display: block;
  position: absolute;
  inset: calc(50% - 0.6em) auto auto calc(50% - 0.6em);
  block-size: 1.2em;
  inline-size: 1.2em;
  transition: background-color var(--cta-transition-duration);
  background: currentcolor;
  -webkit-mask: url("/img/components/modal-close.svg") no-repeat 50% 50%/cover;
  mask: url("/img/components/modal-close.svg") no-repeat 50% 50%/cover;
}

html:has(dialog[open]), html:has(dialog[open]) > body {
  overflow: hidden;
}

.dialog-section:is(.page-section) {
  --section-title-scale: 0.75;
}
.dialog-section .page-section__header {
  padding-block-end: 0;
}
.dialog-section .page-section__header::after {
  content: none;
}

@media (scripting: enabled) {
  .contact-dialog:not(:target, dialog > *) {
    display: none;
  }
}
#contact-dialog {
  inline-size: 100%;
  max-inline-size: min(650px, 100% - var(--metrics__padding__x) * 2);
  font-size: 0.85em;
}
@media (width <= 500px) {
  #contact-dialog {
    inline-size: 100%;
    max-inline-size: none;
  }
}
#contact-dialog > .page-section {
  padding-inline: 0;
  background: none;
}
#contact-dialog > .page-section .page-section__inner {
  padding-block: 0;
}
#contact-dialog .terms {
  text-align: center;
}

:is(html, body) {
  background: var(--color__background);
  color: var(--color__foreground);
}

.site-header, main, .site-footer {
  container: body/inline-size;
  position: relative;
}

:root {
  --header-height--short: 75px;
  --header-height--full: clamp(75px, 3.6764705882dvi + 3.54rem, 100px);
  --header-height: var(--header-height--full);
  scroll-padding-block-start: var(--header-height--short);
}
@media (width < 1180px) {
  :root {
    --header-height: var(--header-height--short);
  }
}
:root:is(.__scrolled) {
  --header-height: var(--header-height--short);
}

:root:has(.site-header) {
  padding-block-start: var(--header-height--full);
}

.site-header {
  display: flex;
  position: fixed;
  z-index: 10;
  inset-inline: 0;
  inset-block-start: 0;
  box-sizing: border-box;
  block-size: var(--header-height);
  padding-inline: var(--metrics__padding__x);
  transition: block-size 0.3s, background-color 0.3s, border-color 0.3s;
  border-block-end: solid 1px color-mix(in oklab, var(--color__foreground__outline) 15%, transparent);
  background-color: var(--color__background);
  background-color: color-mix(in oklab, var(--color__background) 97%, transparent);
  color: var(--color__foreground--headings);
}
.site-header__inner {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.site-header__nav {
  font-size: 0.8em;
  text-align: center;
}
.site-header__nav__items {
  display: flex;
  align-items: center;
}
.site-header__nav__item__link {
  --transition-duration: 0.15s;
  display: block;
  position: relative;
  transition: color var(--transition-duration), border-color var(--transition-duration);
  text-decoration: none;
}
.site-header__nav__item__link::after {
  --outset: 0.3em;
  content: "";
  display: block;
  position: absolute;
  inset-block-end: -0.15em;
  inset-inline-start: calc(var(--outset) * -1);
  block-size: 0.6em;
  inline-size: 0;
  transition: opacity var(--transition-duration), inline-size 0s var(--transition-duration);
  opacity: 0;
  background: var(--color__foreground--links);
}
.site-header__nav__item__link:is(:hover, :focus-visible)::after {
  inline-size: calc(100% + var(--outset) * 2);
  transition: opacity 0s, inline-size var(--transition-duration);
  opacity: 0.15;
}
.site-header__nav__item__link:not(:hover, :focus-visible) {
  --transition-duration: 0.3s;
  color: var(--color__foreground);
}
.site-header__nav__item[data-nav-item=book-now] .site-header__nav__item__link {
  padding-block: 1.2em;
  padding-inline: 1.8em;
  transition: background-color 0.3s, color 0.3s;
}
@media (width < 1180px) {
  .site-header__nav {
    --nav-transition: 0.15s;
  }
}
@media (width < 1180px) and (scripting: enabled) {
  .site-header__nav {
    z-index: 10;
    border-radius: 0;
    box-shadow: none;
  }
  nav.site-header__nav {
    display: none;
  }
  .site-header__nav > nav {
    display: contents;
  }
  .site-header__nav::backdrop {
    display: none;
  }
  .site-header__nav {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: flex-start;
    block-size: 100%;
    inline-size: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden scroll;
    overscroll-behavior: auto contain;
    background: var(--color__background);
  }
  .site-header__nav:is([open], [aria-hidden=false], .__did-exit) {
    display: flex;
  }
  .site-header__nav__items {
    flex-direction: column;
    inline-size: 100%;
    margin: auto;
  }
  .site-header__nav__item {
    display: block;
    box-sizing: border-box;
    flex-shrink: 0;
    inline-size: 100%;
  }
  .site-header__nav__item__link {
    display: block;
    padding-block: 0.5em;
    padding-inline: 0.9em;
    font-size: 1.6em;
    text-decoration: none;
  }
  .site-header__nav__item__link::after {
    content: none;
  }
  dialog.site-header__nav[open] {
    --nav-transition: 0.2s;
  }
  .site-header__nav.__idle a:focus-visible,
  .site-header__nav.__idle button:focus-visible {
    outline: none;
  }
  .site-header__nav__item {
    transition: opacity 0.5s, translate 0.5s;
  }
  @starting-style {
    .site-header__nav__item {
      opacity: 0;
      translate: 0 -0.5em;
    }
  }
  .site-header__nav__item:nth-child(1) {
    transition-delay: 0.035s;
  }
  .site-header__nav__item:nth-child(2) {
    transition-delay: 0.07s;
  }
  .site-header__nav__item:nth-child(3) {
    transition-delay: 0.105s;
  }
  .site-header__nav__item:nth-child(4) {
    transition-delay: 0.14s;
  }
  .site-header__nav__item:nth-child(5) {
    transition-delay: 0.175s;
  }
  .site-header__nav__item:nth-child(6) {
    transition-delay: 0.21s;
  }
  .site-header__nav__item:nth-child(7) {
    transition-delay: 0.245s;
  }
  .site-header__nav__item:nth-child(8) {
    transition-delay: 0.28s;
  }
  .site-header__nav__item[data-nav-item=book-now] {
    padding-block: 0.4em;
    padding-inline: 1.4em;
  }
}
@media (width >= 1180px) {
  .site-header__nav__items {
    gap: 2.7em;
  }
}

.nav-action {
  position: absolute;
  z-index: 11;
  inset-block-start: calc(var(--header-height) / 2);
  inset-inline-end: calc(var(--metrics__padding__x) - (48px - 1.6em) / 2);
  box-sizing: content-box;
  block-size: 48px;
  inline-size: 48px;
  margin-block-start: -24px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--color__foreground);
  font-size: 1rem;
  cursor: pointer;
}
.nav-action::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  transition: background-color var(--cta-transition-duration);
  background: currentcolor;
  -webkit-mask: url("/img/layout/header/nav-controls.svg") no-repeat 0 0/cover;
  mask: url("/img/layout/header/nav-controls.svg") no-repeat 0 0/cover;
}
.nav-action--close {
  transition: background-color var(--cta-transition-duration), scale 0.3s, translate 0.3s, opacity 0.3s;
}
.nav-action--close::after {
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
}
@starting-style {
  .nav-action--close {
    opacity: 0;
  }
}

:root {
  --section-column-gap: 4rem;
}

.site-header, .page-section, .site-footer {
  padding-inline: var(--metrics__padding__x);
}
.site-header__inner, .page-section__inner, .site-footer__inner {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--metrics__max-width);
  margin-inline: auto;
}
:where(.site-header, .site-footer) .page-section {
  padding-inline: 0;
}

.page-section, .site-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: var(--color__background);
  color: var(--color__foreground);
  contain: content;
}
:where(.page-section > *, .site-footer > *) {
  flex: 0 0 auto;
}

.page-section__headline, :where(.page-section:not(:has(.page-section__headline))) .page-section__title {
  font-size: calc(clamp(2.5rem, 1.7021276596dvi + 2.18rem, 3.5rem) * var(--section-title-scale));
  text-transform: uppercase;
  white-space: pre-line;
}

:root {
  --rule-start: 0%;
  --rule-thickness: 1px;
  --rule-length--max: 100%;
  --rule-length: var(--rule-length--max);
  --rule-color: currentcolor;
}

.page-section {
  --section-spacing: clamp(1rem, 3.4042553191dvi + 0.36rem, 3rem);
  --section-header-spacing: calc(var(--section-spacing) * var(--section-title-scale));
  --section-title-scale: 0.9;
  position: relative;
  z-index: 1;
}
:where(.page-section > *) {
  position: relative;
  z-index: 1;
}
.page-section__inner, .page-section__media {
  margin-block: var(--metrics__padding__y);
}
.page-section__inner + .page-section__media {
  margin-block-start: 0;
}

.page-section__inner > :where(:first-child), .page-section__inner > :where(:first-child) > :where(:first-child), .page-section__inner > :where(:first-child) > :where(:first-child) > :where(:first-child) {
  margin-block-start: 0;
}

.page-section__inner > :where(:last-child), .page-section__inner > :where(:last-child) > :where(:last-child), .page-section__inner > :where(:last-child) > :where(:last-child) > :where(:last-child) {
  margin-block-end: 0;
}

.page-section__inner > p {
  white-space: pre-line;
}
.page-section__inner > .cta-container {
  margin-block-start: var(--section-spacing);
}
.page-section__header {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  margin-block-end: var(--section-header-spacing);
  padding-block-end: var(--section-header-spacing);
  gap: 0.7em;
}
.page-section__header > * {
  margin: 0;
}
.page-section__header::after {
  content: "";
  display: block;
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  block-size: var(--rule-thickness);
  inline-size: 100%;
  background: transparent linear-gradient(to bottom, currentcolor) no-repeat var(--rule-start) 0/var(--rule-length) 100%;
}
.page-section__title {
  margin-block: 0;
}
:where(.page-section:has(.page-section__headline)) .page-section__title {
  font-size: 1em;
}

.page-section__headline {
  margin-block: 0;
}

.page-section__media {
  border: solid var(--rule-thickness) var(--rule-color);
}
.page-section[data-venue=downstairs-bar] .page-section__media, .page-section[data-venue=upstairs-dining] .page-section__media {
  border-radius: 10px;
}
.page-section--full {
  text-align: center;
}
.page-section--full .page-section__inner > .cta-container {
  justify-content: center;
}
.page-section--full .page-section__main {
  max-inline-size: var(--metrics__max-width__inner);
  margin-inline: auto;
}
.page-section--full .page-section__header {
  --rule-length--max: 3em;
  padding-block-end: 0;
}
.page-section--full .page-section__header::after {
  position: static;
  block-size: var(--rule-length--max);
  inline-size: var(--rule-thickness);
  margin-inline: auto;
  background-size: calc(100% - var(--rule-start)) var(--rule-length);
}
@container body (inline-size >= 700px) {
  .page-section--split {
    --unbalanced-columns__offset: max(var(--metrics__padding__x), (100cqi - 1240px) / 2);
    --unbalanced-columns__content-size: calc(100cqi - (var(--unbalanced-columns__offset) * 2));
    --unbalanced-columns__gap: var(--section-column-gap);
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    padding-inline: var(--unbalanced-columns__offset);
    gap: var(--section-column-gap);
  }
  .page-section--split .page-section__inner {
    flex: 0 0 auto;
    inline-size: calc((var(--unbalanced-columns__content-size) - var(--section-column-gap)) * 0.5);
    max-inline-size: none;
    margin-inline: 0;
  }
  .page-section--split .page-section__media {
    flex: 1 1 0;
    min-inline-size: 0;
  }
  .page-section--split {
    align-items: center;
  }
  .page-section--split:has(.page-section__media) {
    --rule-start: 100%;
  }
  .page-section--split .page-section__header::after {
    inset-inline-end: calc(-1 * var(--unbalanced-columns__gap));
    inline-size: auto;
  }
  .page-section--split .page-section__media {
    margin-block: var(--metrics__padding__y);
  }
  .page-section--split:nth-child(even of .page-section--split) .page-section__media {
    order: -1;
  }
  .page-section--split:nth-child(even of .page-section--split) .page-section__header::after {
    inset-inline: calc(-1 * var(--unbalanced-columns__gap)) 0;
    background-position: 0 0;
  }
}
:where(#main) > .page-section {
  --section-header-compensation: var(--header-height--short);
  box-sizing: border-box;
  min-block-size: calc(100dvb - var(--section-header-compensation));
}

.site-footer {
  --color__background: #0f0f0f;
  --color__foreground: #ebe7de;
  --color__foreground--accent: #e0e0e0;
  --color__foreground--accent--deemphasised: #ebe7de;
  --color__foreground--accent--contrast: #0f0f0f;
  --color__foreground--links: #a9604a;
  --color__foreground__outline: var(--color__foreground);
  --color__foreground__outline--active: var(--color__foreground--accent);
  --color__background--emphasised: #f2f2ed;
  --color__foreground--emphasised: #0f0f0f;
  --color__foreground--emphasised--accent: #a9604a;
  --color__foreground--emphasised--accent--deemphasised: #815d5d;
  --color__foreground--emphasised--accent--contrast: #e0e0e0;
  --color__foreground--secondary: color-mix(in oklab, var(--color__foreground) 60%, transparent);
  --rule-color: var(--color__foreground--secondary);
  --footer-margin-y: var(--metrics__padding__y--inner);
  --footer-margin-y--inner: calc(var(--metrics__padding__y--inner) / 2);
  --color__foreground--links: currentcolor;
  font-size: 0.9em;
}
.site-footer :is(.cta, button[type=submit]) {
  --cta-background: #0f0f0f;
  --cta-foreground: #e0e0e0;
  --cta-foreground--border: var(--cta-foreground);
}
.site-footer input:not([type=button], [type=reset], [type=submit], [type=checkbox], [type=radio], [type=color], [type=file], [type=range], [type=hidden]),
.site-footer textarea,
.site-footer select {
  border-color: color-mix(in oklab, var(--color__foreground__outline) 35%, transparent);
}
:where(.site-footer > *) {
  position: relative;
  z-index: 1;
}
.site-footer a {
  color: inherit;
}
.site-footer a:not(.cta) {
  text-decoration: underline;
}
.site-footer a:is(:hover, :focus-visible) {
  transition: color 0.15s;
}
.site-footer .page-section {
  --section-header-spacing: 0.75em;
  --section-title-scale: 0.85;
  background: none;
  color: inherit;
}
.site-footer .page-section__inner {
  padding-block: var(--footer-margin-y);
}
.site-footer .page-section__inner > p {
  text-wrap: balance;
}
.site-footer .page-section__header {
  padding-block-end: 0;
}
.site-footer .page-section__header::after {
  content: none;
}
.site-footer__main {
  inline-size: 100%;
}
.site-footer__main .form-actions {
  align-items: flex-start;
}
.site-footer__section > :where(:first-child), .site-footer__section > :where(:first-child) > :where(:first-child), .site-footer__section > :where(:first-child) > :where(:first-child) > :where(:first-child), .site-footer__section > :where(:first-child) > :where(:first-child) > :where(:first-child) > :where(:first-child), .site-footer__section > :where(:first-child) > :where(:first-child) > :where(:first-child) > :where(:first-child) > :where(:first-child) {
  margin-block-start: 0;
}

.site-footer__section > :where(:last-child), .site-footer__section > :where(:last-child) > :where(:last-child), .site-footer__section > :where(:last-child) > :where(:last-child) > :where(:last-child), .site-footer__section > :where(:last-child) > :where(:last-child) > :where(:last-child) > :where(:last-child), .site-footer__section > :where(:last-child) > :where(:last-child) > :where(:last-child) > :where(:last-child) > :where(:last-child) {
  margin-block-end: 0;
}

.site-footer__section {
  margin-block: var(--footer-margin-y--inner);
  padding-block-start: var(--footer-margin-y--inner);
  border-block-start: solid var(--rule-thickness) var(--rule-color);
}
.site-footer__section:last-child {
  margin-block-end: 0;
}
.site-footer__section__title {
  margin-block-end: 1rem;
  color: var(--color__foreground--secondary);
  font-size: 0.9em;
}

.site-footer__address {
  white-space: pre-line;
}

.site-footer__opening-hours__venue__name, .site-footer__opening-hours__venue__range {
  margin-block: 0;
}
.site-footer__opening-hours__venue + .site-footer__opening-hours__venue {
  margin-block-start: 1em;
}
.site-footer__opening-hours__closed {
  margin-block-start: 1rem;
  color: var(--color__foreground--secondary);
}

@container body (inline-size >= 700px) {
  .site-footer__main:has(> .page-section + .page-section) {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--section-column-gap);
  }
}
.site-footer__company {
  --footer-margin-y: var(--footer-margin-y--inner);
  --color__foreground--links: var(--color__foreground);
  inline-size: 100%;
  padding-block: var(--footer-margin-y);
  border-block-start: solid var(--rule-thickness) var(--rule-color);
  color: var(--color__foreground--secondary);
  font-size: 0.9em;
}
@container body (inline-size >= 700px) {
  .site-footer__company {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 1.6em;
  }
}
.site-footer__name {
  block-size: 1.8em;
  margin: 0;
  background-color: currentcolor;
  color: inherit;
  aspect-ratio: var(--logo-aspect-ratio);
  -webkit-mask-image: url("/img/logo.svg");
  mask-image: url("/img/logo.svg");
}

@container body (inline-size >= 700px) {
  .site-footer__legal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .site-footer__legal > * {
    margin: 0;
  }
}
.site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 1em;
}

@container body (inline-size >= 700px) {
  .site-footer__updates {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.25em 1.5em;
  }
  .site-footer__updates > * {
    margin: 0;
  }
  .site-footer__updates .footer-nav__social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.15em 1em;
  }
}
.site-footer__updates {
  margin-inline-start: auto;
}
.footer-nav__social-link {
  text-transform: none;
}

.page-hero {
  --section-header-compensation: 0px;
  position: relative;
}
.page-hero .page-section__inner {
  position: static;
  margin-block: auto;
}
:where(.page-hero .page-section__inner > *) {
  position: relative;
}
.page-hero__title {
  inline-size: 100%;
  margin: 0;
  transition: opacity 1s, transform 1s;
  background-color: currentcolor;
  aspect-ratio: var(--logo-aspect-ratio);
  -webkit-mask-image: url("/img/logo.svg");
  mask-image: url("/img/logo.svg");
}
@starting-style {
  .page-hero__title {
    transform: scale(1.05);
    opacity: 0;
  }
}
.page-hero__jump-link {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--metrics__padding__x);
  transition: opacity 1s 0.3s, transform 1s 0.3s;
  text-align: center;
}
.page-hero__jump-link a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  color: inherit;
  font-size: 0.8em;
  text-decoration: none;
}
.page-hero__jump-link a::after {
  content: "";
  display: block;
  inline-size: 1em;
  transition: transform 0.2s;
  background-color: currentcolor;
  aspect-ratio: 2/7;
  -webkit-mask-image: url("/img/pages/home/hero-arrow.svg");
  mask-image: url("/img/pages/home/hero-arrow.svg");
}
.page-hero__jump-link a:is(:hover, :focus-visible)::after {
  transform: translateY(0.3em);
}
@starting-style {
  .page-hero__jump-link {
    transform: translateY(0.3em);
    opacity: 0;
  }
}
@media (height <= 400px) {
  .page-hero {
    padding-block-start: var(--header-height--full);
  }
}
:root:has(.page-hero) {
  padding-block-start: 0;
}
:root:not(.__scrolled):has(.page-hero) .site-header {
  border-block-end-color: transparent;
  background-color: transparent;
  backdrop-filter: none;
}

#page-home .page-section#whats-on {
  --color__background: #815d5d;
  --color__foreground: #e0e0e0;
  --color__foreground--accent: #e0e0e0;
  --color__foreground--accent--deemphasised: #ebe7de;
  --color__foreground--accent--contrast: #0f0f0f;
  --color__foreground--links: #c0cad1;
  --color__foreground__outline: var(--color__foreground);
  --color__foreground__outline--active: var(--color__foreground--accent);
  --color__background--emphasised: #0f0f0f;
  --color__foreground--emphasised: #f2f2ed;
  --color__foreground--emphasised--accent: #a9604a;
  --color__foreground--emphasised--accent--deemphasised: #815d5d;
  --color__foreground--emphasised--accent--contrast: #e0e0e0;
}

.page-section--intro .page-section__header::after {
  content: none;
}
.page-section--intro .page-section__main {
  text-align: start;
}

.booking-teaser {
  margin-block-start: 4em;
}
.booking-teaser a {
  font-size: 0.9em;
  text-transform: none;
}

.venue-booking-notice {
  margin-block-start: var(--section-spacing);
}

.no-events {
  margin-block-start: 4em;
}

.page-section#whats-on > ._effect_[data-index="2"], .page-section[data-venue=upstairs-dining] > ._effect_[data-index="1"], main > ._effect_[data-index="1"] {
  --aspect-ratio: 937 / 700;
}
.page-section#whats-on > ._effect_[data-index="2"] > ._effect__graphic, .page-section[data-venue=upstairs-dining] > ._effect_[data-index="1"] > ._effect__graphic, main > ._effect_[data-index="1"] > ._effect__graphic {
  -webkit-mask-image: url("/img/layout/textures/flowers.webp");
  mask-image: url("/img/layout/textures/flowers.webp");
}

.site-footer > ._effect_[data-index="1"], .page-section#book > ._effect_[data-index="1"], .page-section[data-venue=downstairs-bar] > ._effect_[data-index="1"], main > ._effect_[data-index="5"], main > ._effect_[data-index="2"] {
  --aspect-ratio: 770 / 700;
}
.site-footer > ._effect_[data-index="1"] > ._effect__graphic, .page-section#book > ._effect_[data-index="1"] > ._effect__graphic, .page-section[data-venue=downstairs-bar] > ._effect_[data-index="1"] > ._effect__graphic, main > ._effect_[data-index="5"] > ._effect__graphic, main > ._effect_[data-index="2"] > ._effect__graphic {
  -webkit-mask-image: url("/img/layout/textures/rock.webp");
  mask-image: url("/img/layout/textures/rock.webp");
}

.page-section#whats-on > ._effect_[data-index="1"], .page-section[data-venue=downstairs-bar] > ._effect_[data-index="2"], main > ._effect_[data-index="3"] {
  --aspect-ratio: 948 / 700;
}
.page-section#whats-on > ._effect_[data-index="1"] > ._effect__graphic, .page-section[data-venue=downstairs-bar] > ._effect_[data-index="2"] > ._effect__graphic, main > ._effect_[data-index="3"] > ._effect__graphic {
  -webkit-mask-image: url("/img/layout/textures/ground.webp");
  mask-image: url("/img/layout/textures/ground.webp");
}

.site-footer > ._effect_[data-index="2"], .page-section[data-venue=upstairs-dining] > ._effect_[data-index="2"], main > ._effect_[data-index="4"] {
  --aspect-ratio: 778 / 700;
}
.site-footer > ._effect_[data-index="2"] > ._effect__graphic, .page-section[data-venue=upstairs-dining] > ._effect_[data-index="2"] > ._effect__graphic, main > ._effect_[data-index="4"] > ._effect__graphic {
  -webkit-mask-image: url("/img/layout/textures/grasslands.webp");
  mask-image: url("/img/layout/textures/grasslands.webp");
}

._effect_ {
  --scale: 1;
  --aspect-ratio: 1 / 1;
  --width: calc(clamp(200px, 25cqi, 400px) * var(--scale));
  --height: calc(var(--width) * var(--aspect-ratio));
  --friction: 0.5;
  --opacity: 7%;
  --transform: none;
  display: block;
  position: absolute;
  z-index: 0;
  block-size: var(--height);
  inline-size: var(--width);
  margin-block: calc(var(--height) / -2);
  margin-inline: calc(var(--width) / -2);
  pointer-events: none;
}
._effect_ > ._effect__graphic {
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--color__background), var(--color__foreground--accent) var(--opacity));
  -webkit-mask: no-repeat 50% 50%/contain;
  mask: no-repeat 50% 50%/contain;
  transform: var(--transform);
  translate: 0 calc(var(--parallax) * (var(--friction) - 1) * 1px);
}

main {
  contain: content;
}
main :is(.page-hero,
.page-section--intro) {
  background: transparent;
}
main > ._effect_[data-index="1"] {
  --scale: 1.25;
  --opacity: 3.5%;
  inset-block: 0 auto;
  inset-inline: auto 0;
  margin: 0;
  --transform: scaleX(-1);
}
main > ._effect_[data-index="2"] {
  --scale: 1.5;
  --friction: 0.3;
  inset-block-start: 50dvb;
  inset-inline-start: calc(50% - min(100cqi, 1240px) / 2);
}
main > ._effect_[data-index="3"] {
  --scale: 1.45;
  --opacity: 3%;
  inset-block-start: 80dvb;
  inset-inline-start: 50%;
}
main > ._effect_[data-index="4"] {
  --scale: 1.55;
  inset-block-start: calc(200dvb - var(--height) / 2);
  inset-inline-start: 0;
  margin: 0;
  --transform: scaleX(-1);
}
main > ._effect_[data-index="5"] {
  --scale: 1;
  --opacity: 10%;
  inset-block-start: 150dvb;
  inset-inline-end: -5%;
  margin: 0;
  --transform: rotate(75deg) scaleY(-1);
}

.page-section[data-venue=downstairs-bar] > ._effect_[data-index="1"] {
  --scale: 2.5;
  --friction: 0.9;
  --opacity: 12%;
  inset-block-start: 75%;
  inset-inline-end: -10%;
  margin-inline: 0;
}
.page-section[data-venue=downstairs-bar] > ._effect_[data-index="2"] {
  --scale: 2;
  --friction: 0.5;
  --opacity: 5%;
  inset-block-end: -2.5%;
  inset-inline-start: -2.5%;
}
.page-section[data-venue=upstairs-dining] > ._effect_[data-index="1"] {
  --scale: 1.5;
  --friction: 0.4;
  --opacity: 30%;
  inset-block-start: -10%;
  inset-inline-end: 5%;
  --transform: rotate(-25deg);
}
.page-section[data-venue=upstairs-dining] > ._effect_[data-index="2"] {
  --scale: 3.5;
  --friction: 0.3;
  --opacity: 40%;
  inset-block-end: -2.5%;
  inset-inline-start: -2.5%;
  --transform: rotate(20deg);
}
.page-section#book > ._effect_[data-index="1"] {
  --scale: 2;
  --friction: 0.6;
  inset-block-end: 25%;
  inset-inline-start: 35%;
  --transform: rotate(50deg);
}
.page-section#whats-on > ._effect_[data-index="1"] {
  --scale: 2;
  --friction: 0.6;
  inset-block-start: 15%;
  inset-inline-end: 15%;
  --transform: rotate(-30deg);
}
.page-section#whats-on > ._effect_[data-index="2"] {
  --scale: 1;
  --friction: 0.6;
  --opacity: 4%;
  inset-block-end: 20%;
  inset-inline-start: 10%;
  --transform: rotate(-15deg);
}

.site-footer > ._effect_[data-index="1"] {
  --scale: 1.5;
  --friction: 0.6;
  inset-block-end: 7.5%;
  inset-inline-start: 15%;
  --transform: rotate(-15deg);
}
.site-footer > ._effect_[data-index="2"] {
  --scale: 2;
  --friction: 0.3;
  --opacity: 3%;
  inset-block-start: 5%;
  inset-inline-end: 0;
  --transform: rotate(10deg);
}

:root {
  --entrance-effect--block__translate--standalone: -0.3rem 0;
  --entrance-effect--block__translate--collection: 0 -0.3rem;
  --entrance-effect__duration: 0.9s;
  --entrance-effect__delay: 0s;
}

@media (scripting: enabled) {
  .segment {
    transition: translate var(--entrance-effect__duration) var(--entrance-effect__delay), opacity var(--entrance-effect__duration) var(--entrance-effect__delay);
  }
  .segment:not(.__entered) {
    opacity: 0;
    translate: var(--entrance-effect--block__translate--standalone);
  }
}

.page-section__headline .segment {
  transition-delay: 0.15s;
}

@media (scripting: enabled) {
  .page-section__media {
    transition: opacity var(--entrance-effect__duration) var(--entrance-effect__delay);
  }
  .page-section__media:not(.__entered) {
    opacity: 0;
  }
}

@media (scripting: enabled) {
  .page-section__header::after {
    transition: background-size var(--entrance-effect__duration) var(--entrance-effect__delay);
  }
  .page-section__header:not(.__entered)::after {
    --rule-length: 0px;
  }
}

@media (scripting: enabled) {
  .cta-container:not(.__entered) .cta {
    opacity: 0;
  }
  .cta-container .cta {
    transition: var(--cta-transitions), opacity var(--entrance-effect__duration) var(--entrance-effect__delay);
  }
  .cta-container .cta:nth-child(1) {
    --entrance-effect__delay: 0.1s;
  }
  .cta-container .cta:nth-child(n+2) {
    --entrance-effect__delay: 0s;
  }
}

@media (scripting: enabled) {
  .page-section__media {
    transition: scale var(--entrance-effect__duration) var(--entrance-effect__delay), opacity var(--entrance-effect__duration) var(--entrance-effect__delay);
  }
  .page-section__media:not(.__entered) {
    opacity: 0.9;
    scale: 1.03;
  }
}

:root {
  scroll-snap-type: block proximity;
}
:root,
#main > .page-section:not(:first-child) {
  scroll-snap-align: start;
}