/* The Fairfield Arms, Bath: "Fireside". */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/cormorant-garamond-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/jost.woff2) format('woff2');
}

:root {
  /* Palette taken from the photo: iron black, tile red, teal wall, brass lamp, warm wood. */
  --ink: #f2e8d6;
  --ink-soft: #d3c6af;
  --ink-faint: rgba(211, 198, 175, .72);
  --brass: #d8b86f;
  --brass-line: rgba(216, 184, 111, .34);
  --ember: #b8283f;
  --teal: #5e9fba;
  --night: 22, 17, 14;
  --wash: rgba(var(--night), .86);

  --top: 58px;
  --gutter: clamp(16px, 3.4vw, 56px);
  /* on wide screens the column tracks the photo's scale, so it sits between the two bookshelves */
  --colw: min(100% - 2 * var(--gutter), max(520px, 38.2vw, 67.8vh));

  --serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --sans: 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
}
@supports (height: 1lvh) {
  :root { --colw: min(100% - 2 * var(--gutter), max(520px, 38.2vw, 67.8lvh)); }
}
@media (max-aspect-ratio: 4/5) {
  :root { --colw: calc(100% - 2 * var(--gutter)); }
}
@media (max-width: 640px) {
  :root { --top: 46px; }
}

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

html {
  background: #120e0c;
  color: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top) + 16px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font: 400 1.0625rem/1.65 var(--sans);
  font-variant-numeric: lining-nums;
}

/* ---------- The fireplace frame ----------
   A position:fixed layer (not background-attachment:fixed), so it also holds still on iPhone.
   Height uses the large viewport so it does not jump when Safari's toolbars come and go. */
.frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  background: #120e0c url(img/room-wide.jpg) 41% 40% / cover no-repeat;
}
/* low lamplight: the photo is daylight, so warm it, deepen it and darken the corners */
.frame::before,
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
}
.frame::before {
  background: #b98a5e;
  mix-blend-mode: multiply;
  opacity: .3;
}
.frame::after {
  background:
    radial-gradient(130% 100% at 50% 46%, rgba(18, 11, 7, 0) 36%, rgba(14, 9, 6, .38) 72%, rgba(8, 5, 4, .72) 100%),
    linear-gradient(rgba(34, 20, 10, .16), rgba(34, 20, 10, .16));
}
@media (max-aspect-ratio: 4/5) {
  .frame {
    /* phones: the fire lit at night */
    background-image: url(img/fire-lit-tall.jpg);
    background-position: 38% 50%;
  }
}

/* the same picture again, clipped to the top band: the page scrolls underneath it */
.frame--band {
  z-index: 3;
  clip-path: inset(0 0 calc(100% - var(--top)) 0);
}

/* the lip of the window: a brass hairline and a soft shadow where the page slides under the band */
.band-edge {
  position: fixed;
  top: var(--top);
  left: 50%;
  width: var(--colw);
  height: 26px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  border-top: 1px solid var(--brass-line);
  background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
}
@supports (animation-timeline: scroll()) {
  .band-edge {
    animation: edge-in linear both;
    animation-timeline: scroll(root);
    animation-range: 0 70vh;
  }
  @keyframes edge-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

.band-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 36px);
  pointer-events: none;
  background: linear-gradient(rgba(10, 7, 5, .5), rgba(10, 7, 5, .2));
}
.band-nav a {
  pointer-events: auto;
  font: 500 .7rem/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}
.band-nav a:hover,
.band-nav a:focus-visible { color: var(--brass); }
/* 1300, not 1180, since Gallery joined the nav (run G1; run P2 moved it from 1100 for Drinks):
   all twelve links need about 1250px */
@media (max-width: 1300px) {
  .band-nav .roomy { display: none; }
}
/* (run M1: at 800px and under the bar now shows only Book and Menu; see "The phone menu" at the end) */
@media (max-width: 760px) {
  .band-nav .wide { display: none; }
  .band-nav { gap: 22px; }
  .band-nav a { letter-spacing: .2em; }
}
@media (max-width: 374px) {
  .band-nav { gap: 14px; }
}

/* ---------- The centre column ---------- */
.column {
  position: relative;
  z-index: 1;
  width: var(--colw);
  margin: 0 auto;
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: calc(var(--top) + 24px) clamp(14px, 2.4vw, 36px) clamp(60px, 12vh, 124px);
  background: linear-gradient(to bottom,
    rgba(var(--night), 0) 40%,
    rgba(var(--night), .5) 66%,
    var(--wash) 100%);
}
/* phones: the name goes up over the mantel, so the lit fire stays in view below it */
@media (max-aspect-ratio: 4/5) {
  .hero {
    justify-content: flex-start;
    padding-top: calc(var(--top) + 7vh);
    padding-bottom: 28px;
    background: linear-gradient(to bottom,
      rgba(var(--night), .6) 0%,
      rgba(var(--night), .45) 34%,
      rgba(var(--night), 0) 52%,
      rgba(var(--night), 0) 80%,
      var(--wash) 100%);
  }
  .hero .cue { margin-top: auto; }
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  top: 45%;
  bottom: 0;
  width: 1px;
  background: linear-gradient(rgba(216, 184, 111, 0), var(--brass-line));
}
.hero::before { left: 0; }
.hero::after { right: 0; }

.eyebrow {
  font: 500 .74rem/1.3 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.1rem;
}
.hero .eyebrow { text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }

h1 {
  font: 500 clamp(3.2rem, 7vw, 5.4rem)/.92 var(--serif);
  letter-spacing: .005em;
  margin: 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .65);
}
h1 .the {
  display: block;
  font-style: italic;
  font-size: .4em;
  letter-spacing: .04em;
  color: var(--brass);
  margin-bottom: .2em;
}
.welcome {
  font: italic 500 clamp(1.4rem, 2.8vw, 1.95rem)/1.3 var(--serif);
  color: var(--ink-soft);
  margin: 1.1rem 0 0;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .8);
}
.cue {
  display: block;
  width: 1px;
  height: 52px;
  margin-top: 2.2rem;
  background: linear-gradient(var(--brass), rgba(216, 184, 111, 0));
}

.panel {
  position: relative;
  background: var(--wash);
  border-inline: 1px solid var(--brass-line);
  padding: 0 clamp(20px, 3.6vw, 52px);
  box-shadow: 0 0 80px rgba(0, 0, 0, .5);
  container-type: inline-size;
}

/* ---------- Sections ---------- */
.sec {
  padding: clamp(56px, 9vw, 96px) 0;
  text-align: center;
}
h2 {
  font: 500 clamp(2.1rem, 4.6vw, 3.05rem)/1.06 var(--serif);
  letter-spacing: .005em;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}
h3 {
  font: 500 1.9rem/1.1 var(--serif);
  margin: 0 0 .6rem;
}
.sec p {
  max-width: 33em;
  margin: 0 auto 1rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.rule {
  position: relative;
  height: 9px;
  margin: 0;
  border: 0;
  background: linear-gradient(90deg,
      rgba(216, 184, 111, 0) 0%, var(--brass-line) 32%, var(--brass-line) 47%,
      transparent 47%, transparent 53%,
      var(--brass-line) 53%, var(--brass-line) 68%, rgba(216, 184, 111, 0) 100%)
    center / 100% 1px no-repeat;
}
.rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid var(--brass);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* what is still to come: a quiet italic line */
.tbc {
  font: italic 500 1.25rem/1.4 var(--serif);
  color: var(--brass);
}
.sec p.tbc { margin: .6rem auto 0; color: var(--brass); font-size: 1.25rem; }

.menu-card {
  max-width: 27rem;
  margin: 2.4rem auto 6px;
  padding: 2.4rem 1.6rem 2.3rem;
  border: 1px solid var(--brass-line);
  outline: 1px solid var(--brass-line);
  outline-offset: 7px;
  background: rgba(255, 236, 205, .035);
}
.menu-card .kicker {
  font: 500 .72rem/1 var(--sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
}
.menu-card .big {
  font: italic 500 clamp(2.5rem, 6vw, 3.3rem)/1 var(--serif);
  color: var(--ink);
  margin: .7rem 0 1.4rem;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 2.2rem;
}
.tile {
  padding: 2rem 1.4rem 1.9rem;
  border: 1px solid var(--brass-line);
  background: rgba(255, 236, 205, .025);
}
.tile p { font-size: 1rem; }
@container (max-width: 420px) {
  .pair { grid-template-columns: 1fr; }
}

/* ---------- Photographs: hung like pictures, with a brass slip ---------- */
.photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 2.2rem 0 0;
}
figure { margin: 0; }
.photos img,
.single img,
.board img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  padding: 5px;
  border: 1px solid var(--brass-line);
  background: rgba(255, 236, 205, .04);
}
.photos .wide { grid-column: 1 / -1; }
.photos .wide img { aspect-ratio: 16 / 9; }
.single { margin: 2.2rem 0 0; }
.single img { aspect-ratio: 3 / 2; }
figcaption {
  margin-top: .55rem;
  font: italic 500 1.08rem/1.35 var(--serif);
  color: var(--ink-faint);
  text-align: center;
}
.menu-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: 22px;
  margin-top: 2rem;
}
.menu-row .menu-card { margin: 7px; }
.board img { aspect-ratio: 3 / 4; object-position: 50% 30%; }
@container (max-width: 420px) {
  .menu-row { grid-template-columns: 1fr; }
}

.hours {
  max-width: 30rem;
  margin: 2.2rem auto 0;
}
.hours div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--brass-line);
}
.hours div:first-child { border-top: 1px solid var(--brass-line); }
.hours dt { font: 500 1.55rem/1.1 var(--serif); }
.hours dd { margin: 0; }

.addr {
  font: normal 500 clamp(1.45rem, 3.2vw, 1.7rem)/1.6 var(--serif);
  color: var(--ink);
  margin: 1.8rem 0 0;
}
.addr a,
.join a,
.foot a {
  color: inherit;
  text-decoration-color: var(--brass-line);
  text-underline-offset: .2em;
}
.addr a:hover,
.join a:hover,
.foot a:hover { text-decoration-color: var(--brass); }
.addr-line {
  display: block;
  margin-top: 1.2rem;
  overflow-wrap: anywhere;
}
.addr-label {
  display: block;
  margin-bottom: .15rem;
  font: 500 .7rem/1.4 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brass);
}

/* joining the list by email */
.sec p.join {
  margin-top: 2rem;
  font: italic 500 clamp(1.3rem, 2.6vw, 1.55rem)/1.4 var(--serif);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ---------- Newsletter ---------- */
.form {
  display: grid;
  gap: 18px;
  max-width: 30rem;
  margin: 2.2rem auto 0;
  text-align: left;
}
.field label {
  display: block;
  margin-bottom: 8px;
  font: 500 .72rem/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brass);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--brass-line);
  border-radius: 2px;
  background: rgba(255, 240, 215, .05);
  color: var(--ink);
  font: 400 1.05rem/1.4 var(--sans);
  color-scheme: dark;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.consent input:focus-visible,
.btn:focus-visible,
.band-nav a:focus-visible,
.hero-book:focus-visible,
.eyebrow a:focus-visible,
.addr a:focus-visible,
.join a:focus-visible,
.prose a:focus-visible,
.after-form a:focus-visible,
.small-print a:focus-visible,
.form-done a:focus-visible,
.form-fail a:focus-visible,
.foot a:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.5;
  cursor: pointer;
}
.consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--brass);
}
.btn {
  justify-self: start;
  padding: 17px 28px 16px;
  border: 0;
  border-radius: 2px;
  background: var(--brass);
  color: #1b1410;
  font: 500 .8rem/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn:hover { background: #e6c983; }
.sec .form-note {
  margin: 0;
  font-size: .82rem;
  color: var(--ink-faint);
}

/* ---------- Footer ---------- */
.foot {
  padding: 56px 0 64px;
  border-top: 1px solid var(--brass-line);
  text-align: center;
  font-size: .92rem;
  color: var(--ink-soft);
}
.foot p { margin: 0 0 .5rem; }
.foot .foot-name {
  font: 500 1.8rem/1.2 var(--serif);
  color: var(--ink);
  margin-bottom: .5rem;
}
.foot .foot-small {
  margin-top: 1.4rem;
  font-size: .8rem;
  color: var(--ink-faint);
}

/* Cormorant's default figures are old-style ("1" reads like "I"): use lining figures for addresses and numbers */
.addr,
.foot p,
h1, h2, h3,
.hours dt { font-variant-numeric: lining-nums; }
.single img.bar { object-position: 50% 18%; }

/* ---------- Booking, private hire, contact and privacy pages ---------- */

/* hidden means hidden, even for boxes laid out as grids (the form, once it has been sent) */
[hidden] { display: none !important; }

/* the nav: "Book a table" in brass, shortened to "Book" on phones; the page you are on in brass */
.band-nav .nav-book,
.band-nav a[aria-current="page"] { color: var(--brass); }
.band-nav .nav-book:hover,
.band-nav .nav-book:focus-visible { color: var(--ink); }
@media (max-width: 760px) {
  .band-nav .nav-long { display: none; }
}

/* "Book a table" near the top of the home page */
.hero-book {
  display: inline-block;
  margin-top: 1.7rem;
  padding: 15px 26px 14px;
  border: 1px solid var(--brass);
  background: rgba(var(--night), .5);
  color: var(--ink);
  font: 500 .74rem/1 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
.hero-book:hover { background: var(--brass); color: #1b1410; text-shadow: none; }

/* inner pages: a shorter hero, so the fireplace still shows above the panel */
.hero--page {
  min-height: 64vh;
  min-height: 64svh;
  padding-bottom: clamp(48px, 9vh, 92px);
}
.hero--page h1 { font-size: clamp(3rem, 6.4vw, 4.8rem); }
.hero--page .welcome { text-wrap: balance; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--ink); }
@media (max-aspect-ratio: 4/5) {
  .hero--page {
    min-height: 58svh;
    justify-content: flex-end;
    padding-top: calc(var(--top) + 24px);
    padding-bottom: 40px;
    background: linear-gradient(to bottom,
      rgba(var(--night), 0) 25%,
      rgba(var(--night), .55) 62%,
      var(--wash) 100%);
  }
}

.sec--form { padding-top: clamp(44px, 7vw, 72px); }
.lead { font-size: 1.12rem; }
.sec p.lead { color: var(--ink); }

/* the polite note above each form */
.notice {
  max-width: 30rem;
  margin: 1.8rem auto 0;
  padding: 1.15rem 1.35rem 1.2rem;
  border: 1px solid var(--brass-line);
  border-left: 3px solid var(--brass);
  background: rgba(255, 236, 205, .045);
  text-align: left;
}
.sec .notice p { margin: 0; max-width: none; color: var(--ink); font-size: 1rem; }

.field .opt {
  margin-left: .6em;
  font: italic 500 .95rem/1 var(--serif);
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ink-faint);
}
.sec .field .hint { margin: -2px 0 9px; max-width: none; font-size: .9rem; line-height: 1.45; color: var(--ink-faint); }
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.5; }
.field select {
  appearance: none;
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.field select option { background: #241c17; color: var(--ink); }
.field input::-webkit-calendar-picker-indicator { opacity: .75; cursor: pointer; }
.field [aria-invalid="true"] { border-color: #e39a90; }
.sec .field-error { margin: 7px 0 0; max-width: none; font-size: .92rem; line-height: 1.4; color: #f2aaa0; }
.row3 {
  display: grid;
  grid-template-columns: 1.35fr 1fr .8fr;
  gap: 14px;
}
@container (max-width: 480px) {
  .row3 { grid-template-columns: 1fr 1fr; }
  .row3 .field:first-child { grid-column: 1 / -1; }
}
/* the box only bots fill in */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .consent { margin-top: 4px; }
.btn[disabled] { opacity: .65; cursor: progress; }
.sec .form-status { margin: -4px 0 0; max-width: none; font-size: .95rem; color: #f2aaa0; }
.sec .form-status:empty { display: none; }

/* thank you, or the phone number if it didn't go */
.form-done,
.form-fail {
  max-width: 30rem;
  margin: 2.2rem auto 0;
  padding: 2rem 1.6rem;
  border: 1px solid var(--brass-line);
  outline: 1px solid var(--brass-line);
  outline-offset: 6px;
  background: rgba(255, 236, 205, .04);
}
.form-done:focus,
.form-fail:focus { outline-color: var(--brass); }
.form-done .big,
.form-fail .big {
  font: italic 500 clamp(2rem, 5vw, 2.6rem)/1.1 var(--serif);
  color: var(--ink);
  margin-bottom: .8rem;
}
.form-done a,
.form-fail a { color: var(--ink); text-decoration-color: var(--brass-line); text-underline-offset: .2em; white-space: nowrap; }

/* "Or call us" under the form */
.after-form { margin-top: 1.8rem; }
.sec .after-form p { margin-bottom: .4rem; }
.sec .call-us {
  font: italic 500 clamp(1.35rem, 2.8vw, 1.6rem)/1.4 var(--serif);
  color: var(--ink);
}
.after-form a { color: inherit; text-decoration-color: var(--brass-line); text-underline-offset: .2em; white-space: nowrap; }
.after-form a:hover { text-decoration-color: var(--brass); }
.sec .aside { font-size: .98rem; }

/* the small print under each form */
.small-print {
  max-width: 30rem;
  margin: 2.6rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--brass-line);
  text-align: left;
}
.sec .small-print p { max-width: none; margin: 0 0 .65rem; font-size: .84rem; line-height: 1.6; color: var(--ink-faint); }
.sec .small-print .small-h {
  margin-bottom: .7rem;
  font: 500 .68rem/1.4 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brass);
}
.small-print a { color: var(--ink-soft); text-decoration-color: var(--brass-line); text-underline-offset: .18em; }

/* the privacy notice */
.prose { max-width: 34rem; margin: 0 auto; text-align: left; }
.prose h2 { font-size: clamp(1.7rem, 3.4vw, 2.1rem); margin: 2.6rem 0 .8rem; }
.prose h2:first-child { margin-top: 0; }
.sec .prose p,
.prose li { max-width: none; color: var(--ink-soft); }
.prose ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.prose li { margin: 0 0 .55rem; }
.prose li::marker { color: var(--brass); }
.prose strong { font-weight: 500; color: var(--ink); }
.prose a { color: var(--ink); text-decoration-color: var(--brass-line); text-underline-offset: .2em; overflow-wrap: anywhere; }
.prose a:hover { text-decoration-color: var(--brass); }
.sec .prose .updated { margin-top: 2.4rem; font: italic 500 1.1rem/1.4 var(--serif); color: var(--ink-faint); }

/* the plain answer page when JavaScript is off */
.column.nojs { padding-top: 14vh; }
.nojs-list { display: inline-block; margin: 0 0 1rem; padding-left: 1.2rem; text-align: left; color: var(--ink-soft); }
.nojs a { color: var(--ink); text-underline-offset: .2em; }

/* footer links to the other pages */
.foot .foot-links { margin-top: 1.3rem; line-height: 2; }
.foot-links a { white-space: nowrap; }
.foot-links .dot { margin: 0 .55em; color: var(--brass); }

/* ---------- Food and Drinks (run W3): the menu card filled, and the drinks list ----------
   Built from the page's own pieces: the menu card, the serif and sans, the brass hairline. */
/* the menu card now holds the dishes, so it takes the full width and the chalkboard hangs below it */
.menu-row--stack {
  grid-template-columns: 1fr;
  justify-items: center;
}
.menu-row--stack .menu-card {
  width: calc(100% - 14px);
  max-width: 31rem;
}
.menu-row--stack .board { width: min(100%, 18rem); }

.menu-list,
.wine-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-list li { margin: 0 0 1.5rem; }
.menu-list li:last-child { margin-bottom: 0; }
.dish {
  display: block;
  font: 500 1.4rem/1.25 var(--serif);
  color: var(--ink);
}
.with {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.menu-list .note {
  display: block;
  margin-top: .3rem;
  font: italic 500 1.08rem/1.35 var(--serif);
  color: var(--ink-faint);
}
.menu-card .menu-list + .tbc { margin-top: 1.8rem; }

.drinks-card {
  width: calc(100% - 14px);
  max-width: 31rem;
}
.drinks-card .kicker + .menu-list { margin-top: 1.2rem; }
.drinks-card .menu-list + .kicker {
  margin-top: 2.2rem;
  padding-top: 2.1rem;
  border-top: 1px solid var(--brass-line);
}
.drinks-card h3 {
  font: italic 500 1.35rem/1.2 var(--serif);
  color: var(--brass);
  margin: 1.6rem 0 .5rem;
}
.wine-list li {
  margin: 0 0 .6rem;
  line-height: 1.3;
}
.wine {
  display: inline-block;
  font: 500 1.2rem/1.3 var(--serif);
  color: var(--ink);
  text-wrap: balance;
}
.from {
  display: inline-block;
  margin-left: .6em;
  font-size: .92rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.wine-list .from:first-child { margin-left: 0; }
.medal {
  display: inline-block;
  margin-left: .45em;
  font: 500 .62rem/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
  vertical-align: .15em;
}
.dish,
.with { text-wrap: balance; }
/* phones: a little more room in the cards, and each wine's origin sits under its name */
@container (max-width: 420px) {
  .menu-card { padding-inline: 1.1rem; }
  .dish { font-size: 1.3rem; }
  .wine { display: block; font-size: 1.15rem; }
  .from { display: block; margin-left: 0; }
}
.single img.drinks { object-position: 50% 80%; }
.dish,
.wine { font-variant-numeric: lining-nums; }

/* ---------- Sport list, darts line and the mailing list box (run P2) ---------- */
/* the sport list needs the full width, so the sport and darts tiles stack */
.pair--stack { grid-template-columns: 1fr; }

.sec .fixtures-intro { margin-top: 1.4rem; color: var(--ink); }
.fixture-month h4 {
  font: italic 500 1.35rem/1.2 var(--serif);
  color: var(--brass);
  margin: 1.6rem 0 .6rem;
}
.fixture-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* each game: the day and time above, the match and the competition under it */
.fixture-list li {
  margin: 0 0 .8rem;
  font-size: .88rem;
  line-height: 1.35;
  color: var(--ink-faint);
  text-wrap: balance;
}
.fixture-list .when {
  display: block;
  margin-bottom: .15rem;
  font: 500 .7rem/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
}
.fixture-list .when + .sep { display: none; }
.fixture-list .match {
  font: 500 1.14rem/1.3 var(--serif);
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
.fixture-list .comp { white-space: nowrap; }
/* a team's name stays on one line, so a long match breaks only at the "v" */
.fixture-list .team,
.fixture-list .keep { white-space: nowrap; }
/* phones: the competition goes on its own line under the match */
@container (max-width: 420px) {
  .fixture-list .comp { display: block; }
  .fixture-list .match + .sep { display: none; }
}
.fixture-list .sep { color: var(--brass-line); }
/* Bath Rugby stands out */
.fixture-list li.bath {
  margin: .75rem 0;
  padding: .5rem .7rem;
  border: 1px solid var(--brass-line);
  background: rgba(216, 184, 111, .08);
}
.fixture-list li.bath .match { color: var(--brass); }
.sec .fixtures-note {
  margin-top: 1.6rem;
  font: italic 500 1.08rem/1.4 var(--serif);
  color: var(--ink-faint);
}

/* the darts line: the same quiet brass italic as the lines still to come */
.sec p.tagline {
  margin: .6rem auto 0;
  font: italic 500 1.25rem/1.4 var(--serif);
  color: var(--brass);
}

/* the mailing list: one email box and a Join button */
.join-form { gap: 14px; margin-top: 2rem; }
.join-row { display: flex; gap: 10px; }
.join-row input { flex: 1 1 auto; min-width: 0; }
.join-row .btn { flex: none; }
.join-form .form-status { display: none; }
.sec .join-small {
  max-width: none;
  margin: 0;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-faint);
}
.join-small a { color: var(--ink-soft); text-decoration-color: var(--brass-line); text-underline-offset: .18em; }
.join-small a:hover { text-decoration-color: var(--brass); }
.join-small a:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* ---------- Send buttons and opening times (run P3) ---------- */
/* the booking, private hire and contact forms' send buttons sit in the middle, under the form
   (the mailing list's Join button stays beside its box) */
.sec--form .form > .btn { justify-self: center; }

/* ---------- The booking form's calendar and booking times (run P4) ----------
   forms.js swaps the booking form's date box for a button that opens this calendar (days gone and Mondays
   greyed out, and they can't be picked) and its time box for a list of that day's booking times.
   Without JavaScript the plain boxes stay. */
.row3 { grid-auto-flow: row dense; }
.row3 > .cal { grid-column: 1 / -1; }

/* the button that stands in for the date box looks like the other boxes */
.pick {
  display: block;
  width: 100%;
  padding: 13px 42px 13px 14px;
  border: 1px solid var(--brass-line);
  border-radius: 2px;
  background: rgba(255, 240, 215, .05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23d8b86f' stroke-width='1.3'%3E%3Crect x='2.5' y='4' width='15' height='13.5' rx='1.5'/%3E%3Cpath d='M2.5 8.5h15M6.5 2v4M13.5 2v4'/%3E%3C/svg%3E") right 14px center / 18px 18px no-repeat;
  color: var(--ink-faint);
  font: 400 1.05rem/1.4 var(--sans);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.pick.set { color: var(--ink); }
.pick:hover,
.pick[aria-expanded="true"] { border-color: rgba(216, 184, 111, .7); }
.field .pick[aria-invalid="true"] { border-color: #e39a90; }
.pick:focus-visible,
.cal button:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

.cal {
  justify-self: start;
  width: 100%;
  max-width: 21rem;
  margin-top: -4px;
  padding: 10px 10px 8px;
  border: 1px solid var(--brass-line);
  border-radius: 2px;
  background: rgba(255, 236, 205, .045);
}
.cal button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.sec .cal-title {
  margin: 0;
  max-width: none;
  font: italic 500 1.4rem/1.2 var(--serif);
  font-variant-numeric: lining-nums;
  color: var(--ink);
}
.cal-step {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0 0 4px;
  border: 1px solid var(--brass-line);
  border-radius: 2px;
  background: none;
  color: var(--brass);
  font: 500 1.7rem/1 var(--serif);
  cursor: pointer;
}
.cal-step:hover { border-color: var(--brass); }
.cal-step[aria-disabled="true"] { opacity: .3; cursor: default; }
.cal-step[aria-disabled="true"]:hover { border-color: var(--brass-line); }

.cal-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.cal-grid th {
  padding: 8px 0 6px;
  font: 500 .66rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--brass);
}
.cal-grid th.shut { color: rgba(216, 184, 111, .38); }
.cal-grid td { padding: 2px; }
.cal-grid button {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  color: var(--ink);
  font: 400 1rem/1 var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  cursor: pointer;
}
.cal-grid button:hover { border-color: var(--brass-line); background: rgba(255, 236, 205, .07); }
/* today */
.cal-grid button[aria-current="date"] { border-color: var(--brass-line); }
/* days gone and the days we're closed: greyed out */
.cal-grid button[aria-disabled="true"] {
  border-color: transparent;
  background: none;
  color: rgba(211, 198, 175, .26);
  cursor: default;
}
/* the day chosen */
.cal-grid [aria-selected="true"] > button {
  border-color: var(--brass);
  background: var(--brass);
  color: #1b1410;
  font-weight: 500;
}
.sec .cal-note {
  margin: 4px 0 2px;
  max-width: none;
  text-align: center;
  font: italic 500 1.05rem/1.35 var(--serif);
  color: var(--ink-faint);
}
.sec .cal-note.said { color: var(--brass); }
@container (max-width: 360px) {
  .cal { padding-inline: 6px; }
  .cal-grid td { padding: 1px; }
  .cal-grid button { height: 38px; }
}

/* ---------- Gallery (run G1): /gallery/, the photos hung like the home page's, and a light viewer ---------- */
/* the nav's Gallery link: nine links need about 800px, so below that it stays off like the phone nav's others */
@media (max-width: 800px) {
  .band-nav .nav-gallery { display: none; }
}
/* the footer's five links are wider than a phone, so there they wrap into balanced rows, without the dots */
@container (max-width: 420px) {
  .foot-links .dot { display: none; }
  .foot-links a { display: inline-block; margin: 0 .55em; }
  .foot .foot-links { text-wrap: balance; }
}
.sec--gallery { padding-top: clamp(44px, 7vw, 72px); }
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery .full { grid-column: 1 / -1; }
.gallery a { display: block; }
.gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  padding: 5px;
  border: 1px solid var(--brass-line);
  background: rgba(255, 236, 205, .04);
  transition: border-color .2s ease;
}
.gallery .full img { aspect-ratio: 16 / 9; }
.gallery .full img.front { aspect-ratio: 5 / 4; object-position: 50% 75%; }
.gallery img.dog { object-position: 50% 85%; }
.gallery img.door { object-position: 50% 48%; }
.gallery a:hover img,
.gallery a:focus-visible img { border-color: var(--brass); }
.gallery a:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* the viewer: a full-screen <dialog> over everything */
html.lb-open { overflow: hidden; }
.lightbox {
  /* room kept free around the photo: the arrows at the sides, the caption below */
  --lb-x: 160px;
  --lb-y: 200px;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 64px 16px 76px;
  border: 0;
  background: #0e0a08;
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
}
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox::backdrop { background: rgba(8, 6, 5, .7); }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lb-in .2s ease-out; }
  @keyframes lb-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}
.lb-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
}
/* as large as fits, never bigger than the photo itself; --ar and --w come from gallery.js */
.lb-img {
  --ar: 1;
  --w: 1280;
  display: block;
  width: min(calc(100vw - var(--lb-x)), calc((100vh - var(--lb-y)) * var(--ar)), calc(var(--w) * 1px));
  height: auto;
  aspect-ratio: var(--ar);
  object-fit: contain;
  padding: 5px;
  border: 1px solid var(--brass-line);
  background: rgba(255, 236, 205, .04);
}
@supports (height: 1svh) {
  .lb-img { width: min(calc(100vw - var(--lb-x)), calc((100svh - var(--lb-y)) * var(--ar)), calc(var(--w) * 1px)); }
}
.lb-cap {
  max-width: 34rem;
  font: italic 500 clamp(1.15rem, 2.4vw, 1.35rem)/1.3 var(--serif);
  color: var(--ink-soft);
  text-align: center;
  text-wrap: balance;
}
.lb-count {
  position: fixed;
  left: 50%;
  bottom: 30px;
  margin: 0;
  transform: translateX(-50%);
  font: 500 .68rem/1 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}
.lb-btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--brass-line);
  border-radius: 50%;
  background: rgba(22, 17, 14, .72);
  color: var(--ink);
  cursor: pointer;
}
.lb-btn:hover { border-color: var(--brass); color: var(--brass); }
.lb-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.lb-close { top: 12px; right: 12px; }
.lb-prev,
.lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
/* phones and narrow windows: the arrows go to the bottom, either side of the count */
@media (max-width: 900px) {
  .lightbox { --lb-x: 32px; --lb-y: 216px; }
  .lb-prev,
  .lb-next { top: auto; bottom: 14px; transform: none; }
}

/* ---------- The phone menu (run M1) ----------
   At 800px and under the bar keeps Book (at the column's left edge) and adds Menu (at its right). Menu opens a panel
   with every link in the desktop order. The panel fills the column from under the band to the foot of the screen,
   so the fireplace still frames it. menu.js swaps the no-JavaScript link for the real button. Without JavaScript the
   link opens the panel by :target and its Close link (#nav-menu) shuts it. Above 800px none of this shows. */
.nav-menu,
.site-menu,
.site-menu-scrim { display: none; }
@media (max-width: 800px) {
  .band-nav {
    justify-content: space-between;
    padding-inline: calc((100% - var(--colw)) / 2);
  }
  .band-nav > a:not(.nav-book):not(.nav-menu) { display: none; }
  /* Book and Menu: a tap area the height of the band, kept above the panel's clear layer */
  .band-nav .nav-book,
  .band-nav .nav-menu {
    position: relative;
    z-index: 1;
  }
  .band-nav .nav-book { line-height: 44px; }
  .band-nav .nav-menu {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ink);
    font: 500 .7rem/1 var(--sans);
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .band-nav .nav-menu:hover,
  .band-nav .nav-menu[aria-expanded="true"] { color: var(--brass); }
  .band-nav .nav-menu:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 3px;
  }
  /* three brass lines, a cross while the panel is open */
  .nav-menu-icon {
    position: relative;
    flex: none;
    width: 18px;
    height: 11px;
    background: linear-gradient(var(--brass), var(--brass)) 0 50% / 100% 1.5px no-repeat;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .9));
  }
  .nav-menu-icon::before,
  .nav-menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--brass);
  }
  .nav-menu-icon::before { top: 0; }
  .nav-menu-icon::after { bottom: 0; }
  .nav-menu[aria-expanded="true"] .nav-menu-icon { background-size: 0 1.5px; }
  .nav-menu[aria-expanded="true"] .nav-menu-icon::before { transform: translateY(4.75px) rotate(45deg); }
  .nav-menu[aria-expanded="true"] .nav-menu-icon::after { transform: translateY(-4.75px) rotate(-45deg); }

  /* the panel */
  .site-menu {
    position: fixed;
    top: var(--top);
    bottom: 0;
    left: 0;
    right: 0;
    width: var(--colw);
    margin-inline: auto;
    padding: 8px clamp(14px, 2.4vw, 36px) calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--brass-line);
    border-bottom: 0;
    background: var(--wash);
    pointer-events: auto;
    text-align: center;
  }
  .site-menu ul {
    max-width: 22rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }
  .site-menu li { border-bottom: 1px solid var(--brass-line); }
  .site-menu li:last-child { border-bottom: 0; }
  /* the space between the links shrinks with the screen's height (Safari's bars included), so on a phone all twelve fit */
  .band-nav .site-menu a {
    display: block;
    padding: clamp(4px, 4.15vh - 18.4px, 13px) 10px;
    padding-block: clamp(4px, 4.15dvh - 18.4px, 13px);
    font: 500 1.5rem/1.2 var(--serif);
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
    text-shadow: none;
  }
  .band-nav .site-menu a:hover,
  .band-nav .site-menu a:focus-visible,
  .band-nav .site-menu a[aria-current="page"],
  .band-nav .site-menu .site-menu-book { color: var(--brass); }
  .band-nav .site-menu a:focus-visible { outline-offset: -3px; }
  /* without JavaScript: the way out of the panel */
  .band-nav .site-menu .site-menu-close {
    display: inline-block;
    margin-top: 14px;
    padding: 14px 18px;
    font: 500 .7rem/1 var(--sans);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--brass);
  }
  html.menu-ready .band-nav .site-menu-close { display: none; }

  /* the clear layer under the panel and the bar: a tap there closes the panel */
  .site-menu-scrim {
    position: fixed;
    inset: 0;
    pointer-events: auto;
  }

  /* open: the page behind is pinned where it was (menu.js sets the body's top) and steps out of the way, so only
     the fireplace shows through the panel; the scrollbar stays, so nothing moves sideways either */
  html.menu-open .site-menu,
  html.menu-open .site-menu-scrim { display: block; }
  html.menu-open { overflow-y: scroll; }
  html.menu-open body {
    position: fixed;
    left: 0;
    right: 0;
  }
  html.menu-open main { visibility: hidden; }
  html:not(.menu-ready) .site-menu:target { display: block; }
  html:not(.menu-ready):has(#site-menu:target) { overflow: hidden; }
  html:not(.menu-ready):has(#site-menu:target) main { visibility: hidden; }

  @media (prefers-reduced-motion: no-preference) {
    html.menu-open .site-menu { animation: site-menu-in .2s ease-out; }
    .nav-menu-icon { transition: background-size .2s ease; }
    .nav-menu-icon::before,
    .nav-menu-icon::after { transition: transform .2s ease; }
    @keyframes site-menu-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  }
}
/* phones on their side: two columns, so every link fits without scrolling (a very short upright screen scrolls the list) */
@media (max-width: 800px) and (max-height: 520px) and (orientation: landscape) {
  .site-menu ul {
    max-width: 36rem;
    columns: 2;
    column-gap: 36px;
  }
  .site-menu li { break-inside: avoid; }
  .site-menu li:nth-child(6) { border-bottom: 0; }
}