/* ASGOOD Studio
   ======================================================================
   Built to the 2024 brand guide.

   Colour  Chocolate / Cashmere are the two primary options; contrast is
           the priority. Mohair is a surface and image-overlay tint only —
           it fails contrast as text on Cashmere (1.83:1). Muted text is a
           neutral grey (Charred at 70%) — Burl read as too brown.

           The guide's printed hex table disagrees with its own swatches on
           five of six colours. The values below are taken from the swatches
           and confirmed against the supplied logo artwork, which is
           #3b2313 — not the #282827 printed on page 20.

   Type    Aspekta by Ivo Dolenc, self-hosted variable (OFL-1.1).
           Headline sizes and tracking follow page 17: H1/H2 track 0,
           H3 and below track +15 (0.015em).
   ==================================================================== */

@font-face {
  font-family: "Aspekta";
  src: url("../fonts/AspektaVF.82483cccfb13.woff2") format("woff2-variations");
  font-weight: 50 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette */
  --chocolate: #3b2314;
  --chocolate-soft: #56382a;
  --charred: #221f1f;
  --cashmere: #f0ede2;
  --foam: #f7f8f3;
  --mohair: #ccab8e;
  --mohair-pale: #e3d2c1;
  --burl: #725038;

  /* Semantic */
  --bg: var(--cashmere);
  --ink: var(--chocolate);
  --ink-muted: #605d5a; /* Charred at 70% on Cashmere, 5.6:1 */
  --rule: #d9d2c2;

  --font: "Aspekta", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale, proportional to the guide's H1 122 / H2 95 / H3 56 /
     H4 36 / H5 26 / H6 20 / H7 14 pt. */
  --h1: clamp(2.6rem, 1.2rem + 6.2vw, 7rem);
  --h2: clamp(2rem, 1.3rem + 3.4vw, 4.4rem);
  --h3: clamp(1.6rem, 1.25rem + 1.7vw, 2.6rem);
  --h4: clamp(1.3rem, 1.15rem + 0.8vw, 1.9rem);
  --h5: clamp(1.1rem, 1.02rem + 0.4vw, 1.4rem);
  --h6: 1.125rem;
  --body: clamp(1rem, 0.97rem + 0.16vw, 1.1rem);
  --small: 0.875rem;
  --micro: 0.75rem;

  --track-tight: 0;
  --track-wide: 0.015em;
  --track-caps: 0.18em;

  --measure: 60ch;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --shell: min(1240px, 100% - (var(--gutter) * 2));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 400;
  line-height: 1.06;
  text-wrap: balance;
}
h1 { font-size: var(--h1); letter-spacing: var(--track-tight); }
h2 { font-size: var(--h2); letter-spacing: var(--track-tight); line-height: 1.05; }
h3 { font-size: var(--h3); letter-spacing: var(--track-wide); }
h4 { font-size: var(--h4); letter-spacing: var(--track-wide); line-height: 1.08; }
h5 { font-size: var(--h5); letter-spacing: var(--track-wide); line-height: 1.19; }
h6 { font-size: var(--h6); letter-spacing: var(--track-wide); line-height: 1.1; }

p { margin: 0 0 1em; max-width: var(--measure); }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* The guide's caps style: names, tags, dates and other essential but
   non-primary information. */
.caps {
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  line-height: 1.3;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--chocolate);
  color: var(--cashmere);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

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

/* --- Masthead ------------------------------------------------------- */

.masthead {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  width: var(--shell);
  margin-inline: auto;
  padding: 1.75rem 0;
}

.wordmark { display: block; margin-right: auto; width: clamp(122px, 14vw, 172px); }
.wordmark img { width: 100%; height: auto; }

.masthead-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
.masthead-nav a {
  display: inline-flex;
  align-items: center;
  line-height: 1.6;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.masthead-nav a:hover { border-bottom-color: currentColor; }

/* Each nav heading discloses a small group of related pages — the first
   link inside always repeats the heading itself, so the group's own page is
   never more than one click away even though the heading is a toggle, not
   a link. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font: inherit;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  line-height: 1.6;
  color: inherit;
  background: none;
  border: none;
  margin: 0;
  padding: 0 0 3px;
  /* Safari's native button styling otherwise sits these toggles at a
     different height from the plain links beside them. */
  -webkit-appearance: none;
  appearance: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s;
}
.nav-group-toggle:hover,
.nav-group.is-open .nav-group-toggle { border-bottom-color: currentColor; }

.nav-caret {
  width: 0.45em;
  height: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s;
  flex: none;
}
.nav-group:hover .nav-caret,
.nav-group:focus-within .nav-caret,
.nav-group.is-open .nav-caret { transform: rotate(225deg) translateY(1px); }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 11rem;
  padding: 0.6rem 0;
  background: var(--foam);
  box-shadow: 0 14px 32px rgba(59, 35, 20, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 10;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown,
.nav-group.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-dropdown a {
  display: block;
  padding: 0.7rem 1.15rem;
  color: var(--chocolate);
  white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--cashmere); }

.wordmark-light { display: none; }

/* Over the hero photograph the masthead reverses out and floats on top.
   Only above the point where the nav still fits on one line — below it the
   header is taller than any sane hero padding and would collide with the
   headline, so it sits in normal flow instead. */
@media (min-width: 761px) {
  .masthead-over { position: absolute; inset: 0 0 auto 0; color: var(--foam); }
  .masthead-over .wordmark-dark { display: none; }
  .masthead-over .wordmark-light { display: block; }
  .masthead-over .btn,
  .masthead-over .btn-accent {
    background: transparent;
    border-color: var(--foam);
    color: var(--foam);
  }
  .masthead-over .btn:hover,
  .masthead-over .btn-accent:hover { background: var(--foam); color: var(--chocolate); }
}

@media (max-width: 760px) {
  .masthead { flex-wrap: wrap; row-gap: 0.85rem; }
  /* Without JavaScript the links stay on show — a menu that cannot be
     opened would be worse than one that is always expanded. */
  /* Wordmark · Book now · Menu, with the panel dropping beneath. The menu
     control sits at the far right where people reach for it. */
  .masthead-cta { order: 1; }
  .nav-toggle { order: 2; }
  .masthead-nav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 1.15rem;
  }
  .masthead-nav a { white-space: nowrap; }

  .js .nav-toggle { display: inline-flex; }
  .js .masthead-nav { display: none; }
  .js .masthead-nav.is-open {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 0.35rem;
    border-top: 1px solid var(--rule);
  }
  .js .masthead-nav.is-open a {
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .js .masthead-nav.is-open a:last-child { border-bottom: none; }
  .masthead-over .masthead-nav.is-open { border-top-color: var(--plum, currentColor); }

  /* Wordmark, Book now and Menu all share one row, so the CTA and the
     masthead gap both tighten to make space. */
  .masthead { gap: 0.75rem; }
  .masthead-cta { padding: 0.8rem 1rem; letter-spacing: 0.1em; }

  /* No hover on a touchscreen, so each group is a plain accordion: the
     heading is a full-width row like any other link, and its dropdown
     drops into normal flow beneath it rather than floating. */
  .nav-group { width: 100%; }
  .nav-group-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .nav-group.is-open .nav-group-toggle { border-bottom-color: var(--rule); }
  .nav-dropdown {
    position: static;
    transform: none;
    display: none;
    width: 100%;
    padding: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-group.is-open .nav-dropdown { display: block; }
  .nav-dropdown a { padding-left: 1.15rem; }
  .nav-dropdown a:hover { background: none; }
}

/* --- Buttons -------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.8rem;
  border: 1px solid var(--chocolate);
  border-radius: 0;
  background: transparent;
  color: var(--chocolate);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { background: var(--chocolate); color: var(--cashmere); }
.btn[disabled] { opacity: 0.65; cursor: not-allowed; }
.btn[disabled]:hover { background: inherit; }

.btn-accent { background: var(--chocolate); color: var(--cashmere); }
.btn-accent:hover { background: var(--burl); border-color: var(--burl); color: var(--foam); }

.btn-lg { padding: 1.15rem 2.5rem; font-size: var(--small); }

/* --- Hero ----------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(84vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--mohair);
  color: var(--foam);
  overflow: hidden;
}

/* Mohair sits behind the photograph, so the hero still reads as designed
   in the moment before the image paints. */
.hero-media {
  position: absolute;
  inset: 0;
  background-color: var(--mohair);
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero-media::after {
  /* Keeps the tagline legible over skin tones of any depth. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(59, 35, 20, 0.34) 0%,
    rgba(59, 35, 20, 0.08) 38%,
    rgba(59, 35, 20, 0.42) 100%
  );
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: var(--shell);
  margin-inline: auto;
  padding-bottom: clamp(2.5rem, 7vw, 5rem);
  padding-top: clamp(6rem, 18vw, 12rem);
}

.hero h1 {
  font-size: clamp(1.75rem, 0.9rem + 3.6vw, 3.9rem);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  max-width: 16ch;
}

.hero-lede {
  font-size: var(--h5);
  max-width: 38ch;
  margin-top: 1.5rem;
  color: var(--foam);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }
.hero .btn { border-color: var(--foam); color: var(--foam); }
.hero .btn:hover { background: var(--foam); color: var(--chocolate); }
.hero .btn-accent { background: var(--foam); color: var(--chocolate); }
.hero .btn-accent:hover { background: transparent; color: var(--foam); }

/* --- The travel ruler ----------------------------------------------- */

.ruler { width: var(--shell); margin-inline: auto; }
.ruler-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  opacity: 0.7;
}
.ruler-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid currentColor;
}
.ruler-zone {
  position: relative;
  border-left: 1px solid currentColor;
  padding: 1.15rem 0.85rem 0;
  min-height: 9.5rem;
}
.ruler-zone::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 0.85rem;
  background: var(--mohair);
  transform-origin: top;
  animation: tick 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes tick { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.ruler-zone-no { display: block; opacity: 0.6; margin-bottom: 0.6rem; }
.ruler-fee {
  display: block;
  font-size: var(--h5);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  margin-bottom: 0.5rem;
}
.ruler-fee.is-included { color: var(--mohair); }
.ruler-areas { list-style: none; margin: 0; padding: 0; font-size: var(--small); line-height: 1.55; opacity: 0.82; }

@media (max-width: 900px) {
  .ruler-track { grid-template-columns: repeat(2, 1fr); border-top: none; }
  .ruler-zone { border-top: 1px solid currentColor; min-height: 0; padding-bottom: 1.4rem; }
  .ruler-zone:nth-child(odd) { border-left: none; padding-left: 0; }
}
@media (max-width: 540px) {
  .ruler-track { grid-template-columns: 1fr; }
  .ruler-zone { border-left: none; padding-left: 0; }
}

/* --- Sections ------------------------------------------------------- */

.section { padding: clamp(3.5rem, 9vw, 7.5rem) 0; }
.section-inner { width: var(--shell); margin-inline: auto; }
.section-dark { background: var(--chocolate); color: var(--cashmere); }
.section-tint { background: var(--foam); }

.section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head h2 { max-width: 20ch; }
.section-head p { margin-top: 1.25rem; font-size: var(--h5); color: var(--ink-muted); }
.section-dark .section-head p { color: var(--mohair); }

.page-head { width: var(--shell); margin: clamp(2.5rem, 6vw, 4.5rem) auto clamp(2rem, 5vw, 3rem); }
.page-head h1 { font-size: var(--h2); }
.page-head p { margin-top: 1.25rem; font-size: var(--h5); color: var(--ink-muted); }

/* --- Steps ---------------------------------------------------------- */

.steps {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  counter-reset: step;
}
.step { border-top: 1px solid var(--rule); padding-top: 1.35rem; }
.section-dark .step { border-top-color: var(--chocolate-soft); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 1rem;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  color: var(--ink-muted);
}
.section-dark .step::before { color: var(--mohair); }
.step h3 { font-size: var(--h5); margin-bottom: 0.6rem; }
.step p { font-size: var(--small); color: var(--ink-muted); margin: 0; }
.section-dark .step p { color: var(--mohair); }

/* --- Prose ---------------------------------------------------------- */

.prose { width: min(var(--measure), 100% - (var(--gutter) * 2)); margin-inline: auto; }
.prose h2 { font-size: var(--h3); margin: 3rem 0 1rem; }
.prose h3 { font-size: var(--h4); margin: 2.25rem 0 0.6rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.5rem; }
.prose dt { font-weight: 600; margin-top: 2rem; }
.prose dd { margin: 0.4rem 0 0; color: var(--ink-muted); }

/* --- Forms ---------------------------------------------------------- */

.field { margin-bottom: 1.35rem; }
.field label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.field-hint { margin: 0.4rem 0 0; font-size: var(--small); color: var(--ink-muted); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--body);
  color: inherit;
  background: var(--foam);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.8rem 0.95rem;
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--chocolate); }

.errorlist { list-style: none; margin: 0.45rem 0 0; padding: 0; color: #8f2f22; font-size: var(--small); }

.notice {
  border-left: 2px solid var(--mohair);
  background: var(--foam);
  padding: 1.15rem 1.35rem;
  margin-bottom: 1.85rem;
}
.notice p { margin: 0; }

.flashes { width: var(--shell); margin: 1rem auto 0; }
.flash { margin: 0 0 0.5rem; padding: 0.95rem 1.25rem; background: var(--foam); border-left: 2px solid var(--mohair); }
.flash-error { border-left-color: #8f2f22; }

/* --- Footer --------------------------------------------------------- */

.footer { background: var(--chocolate); color: var(--cashmere); padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem; margin-top: clamp(3.5rem, 8vw, 6.5rem); }
.footer-inner {
  width: var(--shell);
  margin-inline: auto;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.footer-mark { width: 148px; margin-bottom: 1.2rem; height: auto; }
.footer-line { margin: 0; font-size: var(--small); color: var(--mohair); }
.footer-nav { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-nav a { font-size: var(--small); text-decoration: none; opacity: 0.85; }
.footer-nav a:hover { opacity: 1; color: var(--mohair); }
.footer-legal {
  width: var(--shell);
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--chocolate-soft);
  color: var(--mohair);
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Booking wizard ------------------------------------------------- */

.booking {
  width: var(--shell);
  margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(290px, 23rem);
  align-items: start;
  padding-bottom: 4rem;
}
@media (max-width: 960px) { .booking { grid-template-columns: 1fr; } }

.wstep { border-top: 1px solid var(--rule); padding: clamp(1.85rem, 4vw, 2.75rem) 0; }
.wstep[hidden] { display: none; }
.wstep-head { display: flex; align-items: baseline; gap: 1.1rem; margin-bottom: 1.6rem; }
.wstep-no { flex: none; color: var(--ink-muted); }
.wstep h2 { font-size: var(--h3); }
.wstep-note { margin: -1rem 0 1.6rem; font-size: var(--small); color: var(--ink-muted); }

.party-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .party-grid { grid-template-columns: repeat(2, 1fr); } }

.party-option input { position: absolute; opacity: 0; pointer-events: none; }
.party-option label {
  display: block;
  height: 100%;
  padding: 1.25rem 1.2rem;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.party-option label:hover { border-color: var(--mohair); }
.party-option input:checked + label { background: var(--chocolate); border-color: var(--chocolate); color: var(--cashmere); }
.party-option input:focus-visible + label { outline: 2px solid var(--mohair); outline-offset: 3px; }

.party-count { display: block; font-size: var(--h3); line-height: 1; letter-spacing: var(--track-tight); }
.party-label { display: block; margin: 0.4rem 0 0.9rem; font-size: var(--small); color: var(--ink-muted); }
.party-option input:checked + label .party-label { color: var(--mohair); }
.party-price { display: block; font-size: var(--h6); font-weight: 500; letter-spacing: var(--track-wide); }
.party-mins { display: block; margin-top: 0.3rem; opacity: 0.6; }

.slot-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); margin-top: 1.6rem; }
.slot {
  font-family: inherit;
  font-size: var(--body);
  font-variant-numeric: tabular-nums;
  padding: 0.8rem 0.4rem;
  border: 1px solid var(--rule);
  background: var(--foam);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.slot:hover { border-color: var(--mohair); }
.slot[aria-pressed="true"] { background: var(--chocolate); border-color: var(--chocolate); color: var(--cashmere); }
.slot-status { margin-top: 1.1rem; font-size: var(--small); color: var(--ink-muted); }

.summary { position: sticky; top: 1.5rem; background: var(--chocolate); color: var(--cashmere); padding: clamp(1.6rem, 3vw, 2.1rem); }
.summary h2 { font-size: var(--h5); padding-bottom: 1.1rem; border-bottom: 1px solid var(--chocolate-soft); margin-bottom: 1.35rem; }
.summary dl { margin: 0; }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; font-size: var(--small); }
.summary-row dt { color: var(--mohair); }
.summary-row dd { margin: 0; text-align: right; }
.summary-row.is-muted dd { opacity: 0.55; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--chocolate-soft); }
.summary-total dt { color: var(--mohair); font-size: var(--micro); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; }
.summary-total dd { margin: 0; font-size: var(--h4); font-weight: 500; letter-spacing: var(--track-wide); }
.summary .btn { width: 100%; margin-top: 1.6rem; background: var(--cashmere); border-color: var(--cashmere); color: var(--chocolate); }
.summary .btn:hover:not([disabled]) { background: var(--mohair); border-color: var(--mohair); color: var(--chocolate); }
.summary .btn[disabled] { background: transparent; border-color: var(--mohair); color: var(--mohair); }
.summary-fineprint { margin: 1.1rem 0 0; font-size: var(--micro); line-height: 1.55; color: var(--mohair); opacity: 0.85; }

/* --- Receipt -------------------------------------------------------- */

.receipt { width: min(44rem, 100% - (var(--gutter) * 2)); margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; }
.receipt h1 { font-size: var(--h2); margin-bottom: 1.25rem; }
.receipt-ref {
  margin-top: 1rem;
  font-size: var(--h5);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  color: var(--ink-muted);
}
.receipt-table { width: 100%; border-collapse: collapse; margin: 2.25rem 0; }
.receipt-table th, .receipt-table td { text-align: left; padding: 0.95rem 0; border-bottom: 1px solid var(--rule); font-size: var(--small); vertical-align: top; }
.receipt-table th { width: 36%; font-weight: 400; color: var(--ink-muted); }
.receipt-total th, .receipt-total td { border-bottom: none; font-size: var(--h6); font-weight: 600; }

.eyebrow { margin-bottom: 1.5rem; opacity: 0.75; }

/* --- Mobile ---------------------------------------------------------
   Most bookings arrive from Instagram on a phone, so the narrow layout
   is the one that has to work hardest.
   ------------------------------------------------------------------ */

.summary-recap { display: none; }

@media (max-width: 960px) {
  /* The booking summary pins to the bottom of the screen. Without this the
     running total and the pay button sit more than a screen below the fold,
     so the customer picks options with no idea what they cost. */
  .booking { padding-bottom: 0; }

  .summary {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    padding: 0.85rem var(--gutter) calc(0.85rem + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.6rem 1rem;
    border-top: 1px solid var(--chocolate-soft);
    box-shadow: 0 -8px 24px rgba(34, 31, 31, 0.18);
  }
  .summary-title { display: none; }
  /* `contents` lets the total become a direct child of the bar's grid while
     the per-line breakdown, which will not fit, drops out. */
  .summary dl { display: contents; }
  .summary-row { display: none; }

  .summary-recap {
    display: block;
    grid-column: 1 / -1;
    margin: 0;
    max-width: none;
    font-size: var(--micro);
    letter-spacing: 0.04em;
    color: var(--mohair);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .summary-fineprint { display: none; }

  .summary-total {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border-top: none;
  }
  /* The recap line above already says what is being priced, so the label
     is redundant here and the space is better spent keeping the figure on
     one line. */
  .summary-total { white-space: nowrap; }
  .summary-total dt { display: none; }
  .summary-total dd { font-size: var(--h5); }
  .summary .btn { width: auto; margin: 0; padding: 0.95rem 1.35rem; }

  /* Clears the pinned bar so the last field is never trapped behind it. */
  .booking-scroll-pad { height: 7.5rem; }
}

@media (min-width: 961px) {
  .booking-scroll-pad { display: none; }
}

@media (max-width: 760px) {
  /* Tap targets. Anything interactive gets to 44px in its short dimension. */
  .masthead-nav a { padding: 0.8rem 0; }
  .wordmark { padding: 0.95rem 0; }
  .footer-nav a { padding: 0.62rem 0; }
  .slot { padding: 0.95rem 0.4rem; }

  /* Tighter vertical rhythm — the desktop spacing runs to several screens. */
  .hero { min-height: 0; }
  .hero-inner { padding-top: clamp(3.5rem, 16vw, 5rem); }
  .masthead { padding: 1.1rem 0 1.25rem; }
  .section { padding: clamp(2.75rem, 11vw, 4rem) 0; }
  .wstep { padding: 1.6rem 0; }
  .section-head { margin-bottom: 1.75rem; }

  /* Full-width, equal buttons read as a clear pair rather than a ragged one. */
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
  .hero-actions .btn { width: 100%; }

  /* Two columns halves the length of the district lists without hiding any
     of the names, which are the page's local-search value. */
  .ruler-areas { columns: 2; column-gap: 1.25rem; }
  .ruler-areas li { break-inside: avoid; }
}

/* A font size under 16px makes iOS zoom the whole page in on focus. The
   party-size radio is visually hidden but can still take focus. */
.party-option input { font-size: 16px; }

/* The booking page is the destination, so its header CTA is redundant. */
.masthead-plain .masthead-cta { display: none; }

/* --- Zone list on narrow screens ------------------------------------ */

.arrow-down { display: none; }

@media (max-width: 900px) {
  /* Stacked, the zones read as a price list: label left, fee right, the
     districts beneath. Stacking label over fee wasted a lot of height. */
  .ruler-zone {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0 1rem;
    padding-top: 0.9rem;
    padding-bottom: 1.1rem;
  }
  .ruler-zone-no { grid-column: 1; margin: 0; }
  .ruler-fee { grid-column: 2; grid-row: 1; margin: 0; text-align: right; }
  .ruler-areas { grid-column: 1 / -1; margin-top: 0.7rem; }

  /* The ruler now runs down the page, not across it. */
  .arrow-across { display: none; }
  .arrow-down { display: inline; }
}

/* --- Reviews -------------------------------------------------------- */

.reviews {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.review {
  border-top: 1px solid var(--rule);
  padding-top: 1.35rem;
}

.review-stars {
  margin: 0 0 1.1rem;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  /* Muted ink, not Mohair — Mohair on a light ground is 1.83:1 and the rating is
     information, not decoration. */
  color: var(--ink-muted);
}
.section-dark .review-stars { color: var(--mohair); }

.review-quote {
  margin: 0 0 1.5rem;
  max-width: none;
  font-size: var(--h5);
  line-height: 1.45;
  letter-spacing: var(--track-wide);
  /* Pulled flush so the opening quote mark sits on the text edge. */
  text-indent: -0.42em;
}
.review-quote::before { content: "\201C"; }
.review-quote::after { content: "\201D"; }

/* Attributions follow their own quote rather than aligning to the tallest
   column, which left a large void under the shorter ones. */
.review-name {
  margin: 0;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  /* A snap-scrolling row beats stacking three long quotes end to end, and
     needs no JavaScript to feel like a carousel. */
  .reviews {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16rem, 78%);
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    /* Break out of the shell so cards can scroll to the screen edge. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: 0.5rem;
    /* Otherwise every card stretches to the tallest and its divider rule
       runs on past the end of the quote. */
    align-items: start;
  }
  .review {
    scroll-snap-align: start;
    border-top: none;
    border-left: 1px solid var(--rule);
    padding: 0 0 0 1.1rem;
  }
  .review-quote { font-size: var(--body); }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .reviews { scroll-behavior: smooth; }
}

/* --- Account -------------------------------------------------------- */

.account-balance {
  font-size: var(--h1);
  line-height: 1;
  margin: 0 0 0.5rem;
  letter-spacing: var(--track-tight);
}
.account-list { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.account-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--rule);
  font-size: var(--small);
}
.account-list li span:last-child { color: var(--ink-muted); }

/* --- Bundles -------------------------------------------------------- */

.bundle-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.bundle {
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
}
.bundle-credits { font-size: var(--h2); line-height: 1; margin: 0; letter-spacing: var(--track-tight); }
.bundle-unit { margin: 0.2rem 0 1.5rem; color: var(--ink-muted); }
.bundle-price { font-size: var(--h4); font-weight: 500; letter-spacing: var(--track-wide); margin: 0 0 0.3rem; }
.bundle-each { font-size: var(--small); color: var(--ink-muted); margin: 0 0 1.5rem; }
/* Pushes the button to the bottom so the row of them lines up however
   long each description runs. */
.bundle-note { font-size: var(--small); margin: 0 0 1.5rem; }
.bundle form { margin-top: auto; }
.bundle .btn { width: 100%; }


/* --- Full-bleed photograph ------------------------------------------ */

.band { margin: 0; display: block; }
.band img {
  width: 100%;
  height: clamp(18rem, 42vw, 34rem);
  object-fit: cover;
  object-position: center 45%;
}

/* --- Photograph beside a column of text ------------------------------ */

.with-figure {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  /* Text-led: the photograph supports the steps rather than towering
     over them. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr);
  align-items: start;
}
.with-figure figure { margin: 0; }
.with-figure img { width: 100%; height: auto; }

@media (max-width: 820px) {
  .with-figure { grid-template-columns: 1fr; }
  /* The photograph is supporting material, so it follows the text on a
     phone rather than pushing it down the page. */
  .with-figure figure { order: 2; }
}

/* Beside a photograph the steps read better stacked than in a wide row. */
.steps-stacked { grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 560px) {
  .steps-stacked { grid-template-columns: repeat(2, 1fr); }
}


/* --- Menu button ---------------------------------------------------- */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  /* Stays a 44px target even when the label is hidden and only the icon
     shows. */
  min-width: 44px;
  min-height: 44px;
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0.55rem 0;
  cursor: pointer;
}

/* Two rules that become a cross when the menu is open — cheaper than an
   icon font and it inherits the surrounding colour. */
.nav-toggle-bars {
  position: relative;
  width: 1.15rem;
  height: 0.5rem;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.2s ease, top 0.2s ease;
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after { top: 0.5rem; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  top: 0.25rem;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  top: 0.25rem;
  transform: rotate(-45deg);
}


/* On a small phone the wordmark, Book now and Menu still have to share one
   row. The CTA keeps its wording — it is the one thing on the page that
   earns money — so the space comes from the mark and the menu label. The
   button keeps its accessible name through aria-label. */
@media (max-width: 400px) {
  .wordmark { width: 104px; }
  .masthead-cta { padding: 0.8rem 0.8rem; letter-spacing: 0.06em; }
  .nav-toggle { gap: 0; }
  .nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- Managing a booking --------------------------------------------- */

.manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
@media (max-width: 520px) {
  .manage-actions { flex-direction: column; }
  .manage-actions .btn { width: 100%; }
}

/* --- Staff dashboard ------------------------------------------------ */

.dash { padding-bottom: 4rem; }
.dash-periods { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.dash-periods a {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--small);
  text-decoration: none;
}
.dash-periods a:hover { border-color: var(--ink); }
.dash-periods a[aria-current] { background: var(--chocolate); border-color: var(--chocolate); color: var(--cashmere); }

.dash-tiles {
  list-style: none;
  margin: 0 0 3.5rem;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  /* The 1px gap shows this through as hairlines between tiles. */
  background: var(--rule);
  border: 1px solid var(--rule);
}
.dash-tile { background: var(--bg); padding: 1.25rem 1.25rem 1.4rem; }
.dash-tile p { margin: 0; }
.dash-label { color: var(--ink-muted); margin-bottom: 0.75rem !important; }
.dash-value { font-size: var(--h4); line-height: 1.1; letter-spacing: var(--track-wide); }
.dash-change { font-size: var(--small); margin-top: 0.4rem !important; }
.dash-note { font-size: var(--micro); color: var(--ink-muted); margin-top: 0.5rem !important; }

.dash-section { margin-bottom: 3.5rem; }
.dash-heading { font-size: var(--h4); margin-bottom: 0.4rem; }
.dash-sub { font-size: var(--small); color: var(--ink-muted); margin-bottom: 1.5rem; }
.dash-empty { color: var(--ink-muted); }
.dash-split { display: grid; gap: 0 clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }

/* Column chart. Bars are thin, round only at the data end, and sit on a
   recessive grid; the exact figures are in the tooltip and the table. */
.chart { margin: 0; }
.chart-plot { position: relative; height: 15rem; margin: 0 0 2.25rem 3.5rem; }
.chart-grid span {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--rule);
  font-size: var(--micro);
  color: var(--ink-muted);
}
.chart-grid span { text-indent: -3.5rem; line-height: 0; }
.chart-grid span:last-child { border-top-color: var(--ink-muted); }
.chart-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--count), minmax(0, 1fr));
  gap: 2px;
  align-items: end;
}
/* The whole column is the hover target, not just the bar. */
.chart-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; }
.chart-bar {
  display: block;
  width: min(100%, 2.25rem);
  min-height: 1px;
  background: var(--chocolate);
  border-radius: 4px 4px 0 0;
}
.chart-col:hover, .chart-col:focus-visible { background: color-mix(in srgb, var(--mohair) 22%, transparent); }
.chart-x {
  position: absolute;
  top: calc(100% + 0.6rem);
  white-space: nowrap;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.chart-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: max-content;
  max-width: 14rem;
  padding: 0.6rem 0.75rem;
  background: var(--chocolate);
  color: var(--cashmere);
  font-size: var(--micro);
  line-height: 1.45;
  pointer-events: none;
}
.chart-tip strong { display: block; font-weight: 500; }
.chart-col:hover .chart-tip, .chart-col:focus-visible .chart-tip { display: block; }
/* Keep tooltips at the edges on screen. */
.chart-col:first-child .chart-tip, .chart-col:nth-child(2) .chart-tip { left: 0; transform: none; }
.chart-col:last-child .chart-tip, .chart-col:nth-last-child(2) .chart-tip { left: auto; right: 0; transform: none; }
/* The end labels would hang off the plot if centred on their column. */
.chart-col:first-child .chart-x { left: 0; }
.chart-col:last-child .chart-x { right: 0; }
@media (max-width: 600px) { .chart-x-wide { display: none; } }
.chart-table summary { cursor: pointer; font-size: var(--small); color: var(--ink-muted); }
.chart-table .receipt-table { margin-top: 1rem; }
.chart-table th { width: auto; }

/* Month-by-month table. Scrolls inside itself on phones rather than
   widening the page. */
.dash-scroll { overflow-x: auto; }
.month-table { min-width: 46rem; margin: 0; font-variant-numeric: tabular-nums; }
.month-table th, .month-table td { width: auto; white-space: nowrap; padding-left: 1.25rem; vertical-align: middle; }
.month-table th:first-child { padding-left: 0; }
.month-table thead th:not(:first-child), .month-table td { text-align: right; }
.month-table tbody th { font-weight: inherit; text-align: left; }
.month-note { font-size: var(--micro); color: var(--ink-muted); }
.month-gmv > span { display: grid; grid-template-columns: 6rem auto; gap: 0.75rem; align-items: center; justify-content: end; }
.month-track { display: block; }
.month-track .ranking-bar { margin-left: auto; border-radius: 4px 0 0 4px; }

.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) 1fr 2.5rem;
  gap: 1rem;
  align-items: center;
  padding: 0.55rem 0;
  font-size: var(--small);
}
.ranking-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-track { display: block; }
.ranking-bar { display: block; height: 0.6rem; min-width: 2px; background: var(--chocolate); border-radius: 0 4px 4px 0; }
.ranking-count { text-align: right; }