/* Authored design-system foundations. Placement, page geometry, the rhythm
 * between a component's parts and the type scale are generated into
 * layout.css; the rules here own what a component looks like: its media,
 * colour, type treatment and decoration. Closed components join this file
 * only after their designs are approved. */

@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-latin-a20dcb75261cefb6.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Albert Sans";
  src: url("/static/fonts/albert-sans-latin-da8688506b698bc9.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Register the inherited morph duration so getComputedStyle() exposes the
 * resolved time to the runtime even though its value derives from another
 * token. */
@property --morph-duration {
  syntax: "<time>";
  initial-value: 200ms;
  inherits: true;
}

@property --navigation-offset-inline {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@property --navigation-offset-block {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@property --booking-sheet-inline-inset {
  syntax: "<length>";
  initial-value: 8px;
  inherits: true;
}

@property --booking-sheet-block-inset {
  syntax: "<length>";
  initial-value: 8px;
  inherits: true;
}

@property --booking-sheet-headroom {
  syntax: "<length>";
  initial-value: 48px;
  inherits: true;
}

@property --booking-sheet-max-width {
  syntax: "<length>";
  initial-value: 512px;
  inherits: true;
}

/* Surface motion is a small set of non-inheriting numeric channels. The
 * runtime writes only these numbers and measured endpoints; components derive
 * their paint from them. Keeping the channels non-inheriting avoids restyling
 * the calendar-sized subtree on every animation frame. */
@property --dim { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --p { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --dy { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --dx { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --dc { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --morph { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --scrub { syntax: "<number>"; initial-value: 0; inherits: false; }

@property --surface-progress { syntax: "*"; inherits: false; }
@property --surface-width { syntax: "*"; inherits: false; }
@property --surface-height { syntax: "*"; inherits: false; }
@property --surface-bottom { syntax: "*"; inherits: false; }
@property --surface-radius { syntax: "*"; inherits: false; }
@property --surface-pull { syntax: "*"; inherits: false; }
@property --surface-pull-y { syntax: "*"; inherits: false; }
@property --surface-pull-scale { syntax: "*"; inherits: false; }
@property --photo-pull { syntax: "*"; inherits: false; }
@property --photo-gone { syntax: "*"; inherits: false; }

@property --surface-width-collapsed { syntax: "*"; inherits: false; }
@property --surface-width-expanded { syntax: "*"; inherits: false; }
@property --surface-height-collapsed { syntax: "*"; inherits: false; }
@property --surface-height-expanded { syntax: "*"; inherits: false; }
@property --surface-bottom-collapsed { syntax: "*"; inherits: false; }
@property --surface-bottom-expanded { syntax: "*"; inherits: false; }
@property --surface-radius-collapsed { syntax: "*"; inherits: false; }
@property --surface-radius-expanded { syntax: "*"; inherits: false; }
@property --surface-width-ratio { syntax: "*"; inherits: false; }
@property --surface-left-collapsed { syntax: "*"; inherits: false; }
@property --surface-left-expanded { syntax: "*"; inherits: false; }
@property --surface-top-collapsed { syntax: "*"; inherits: false; }
@property --surface-top-expanded { syntax: "*"; inherits: false; }
@property --surface-drop { syntax: "*"; inherits: false; }
@property --surface-lift { syntax: "*"; inherits: false; }
@property --surface-rise { syntax: "*"; inherits: false; }
@property --surface-grow { syntax: "*"; inherits: false; }

:root {
  --font-body: "Albert Sans", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --font-mono: ui-monospace, monospace;
  --text: oklch(0.16 0 0);
  --text-muted: oklch(0.48 0 0);
  --text-disabled: oklch(0.7 0 0);
  --ground: oklch(0.97 0 0);
  --surface: oklch(1 0 0);
  --fill: oklch(0.892 0 0);
  --line: oklch(0.1 0 0 / 0.2);
  --accent: oklch(0.7 0.15 210);
  --accent-strong: oklch(0.625 0.14 210);
  --accent-text: oklch(1 0 0);
  --interactive-wash: oklch(0.16 0 0 / 0.07);
  --accent-wash: oklch(0.7 0.15 210 / 0.1);
  /* The weights the faces are set in. A title is a display-face name set a
   * step lighter than a heading, and drawn a little tighter. */
  --weight-regular: 400;
  --weight-book: 450;
  --weight-medium: 500;
  --weight-title: 550;
  --weight-semibold: 600;
  --tracking-title: -0.012em;
  --control-radius: calc(var(--increment) * 4);
  /* Ends rounded whatever the height: a press, a dot, a count. */
  --radius-pill: 999px;
  --control-fill: color-mix(in oklch, var(--surface), var(--ground) 55%);
  --control-line: oklch(0.1 0 0 / 0.14);
  --control-line-hover: oklch(0.1 0 0 / 0.26);
  --control-focus-line: color-mix(in oklch, var(--accent-strong), var(--text) 12%);
  --control-focus-halo: color-mix(in oklch, transparent, var(--accent) 12%);
  --control-recess: inset 0 1px 1px oklch(0 0 0 / 0.035),
    inset 0 -1px 0 oklch(1 0 0 / 0.78);
  --minimum-target-size: calc(var(--increment) * 11);
  /* Keyboard focus is one ring: this wide, drawn this far outside what it
   * marks, or this far inside where what it marks is clipped. Its colour is
   * the accent on the page, the ink around a press of ink, and light on a
   * photograph. */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-inset: -2px;
  /* The page's layers, lowest first: the tools badge and the site header over
   * the page, the phone booking action over both, the summoned booking action
   * over its own sheet's dim, the sheet and the lightbox over everything the
   * page holds, a photo's chrome in flight over the lightbox, and a dialog
   * over all. Stacking inside a component stays local and literal. */
  --layer-tools: 4;
  --layer-header: 5;
  --layer-action: 20;
  --layer-action-summoned: 30;
  --layer-sheet: 40;
  --layer-flight: 41;
  --layer-dialog: 50;
  --shadow-contact-geometry: 0 1px 2px;
  --shadow-contact-color: oklch(0 0 0 / 0.1);
  --shadow-contact: var(--shadow-contact-geometry) var(--shadow-contact-color);
  --shadow-ambient-geometry: 0 8px 24px -4px;
  --shadow-ambient-color: oklch(0 0 0 / 0.12);
  --shadow-ambient: var(--shadow-ambient-geometry) var(--shadow-ambient-color);
  /* A hairline is one device pixel whatever the screen; a thin line is one
   * CSS pixel, for a mark that must read as a line on any screen. */
  --border-width-hairline: 1px;
  --hairline-scale: 1;
  --border-width-thin: 1px;
  --booking-button-text: var(--accent-text);
  --booking-button-fill: rgb(0 178 212);
  --booking-button-inner-light: rgb(0 235 255 / 0.72);
  --booking-button-inner-dark: rgb(0 110 139 / 0.38);
  --booking-button-shadow: rgb(0 77 99 / 0.2);
  --availability-fill: oklch(0.968 0.034 147);
  --availability-ink: oklch(0.33 0.06 152);
  --availability-selected: oklch(0.36 0.085 150);
  /* A state that wants the reader's action: a failed payment, a refused
   * form. */
  --attention: oklch(0.48 0.19 28);
  /* The text tone a fill of it lightens to under a pointer. */
  --text-hover: oklch(0.23 0 0);
  /* What stands over a photograph or a map rather than on the page: light
   * words, rings and dots on the picture, and the dark ground a photo card's
   * copy is set on. */
  --on-photo: oklch(1 0 0);
  --on-photo-hover: #e8ebe9;
  --photo-ground: #171a18;
  --photo-scrim: oklch(0.08 0 0 / 0.3);
  /* Every shadow is this ink at a strength of its own. A chip over a photo
   * casts a darker one than a card on the page, so it reads on any picture. */
  --shadow-ink: oklch(0 0 0);
  --shadow-on-photo-contact: 0 1px 2px color-mix(in oklch, var(--shadow-ink) 24%, transparent);
  --shadow-on-photo-ambient:
    0 4px 12px -2px color-mix(in oklch, var(--shadow-ink) 24%, transparent);

  /* How surfaces and secondary words are painted. A portal's theme
   * (`static/themes/`) restates these and the palette above, and nothing
   * else, so each is read here by every rule it concerns; the values below
   * are the product's own look. A lifted card's face and what it filters
   * from behind; the face a card with a picture in it shows before the
   * picture; a band that has to stay legible over what scrolls under it. */
  --card-fill: var(--surface);
  --card-backdrop: none;
  --card-picture-fill: var(--fill);
  --card-band-fill: var(--surface);
  /* The glass of the page's own chrome: the header bar, the phone's booking
   * action. */
  --chrome-glass-fill: oklch(1 0 0 / 0.74);
  --chrome-glass-blur: 12px;
  --chrome-glass-saturation: 3.6;
  --chrome-glass-contrast: 1;
  --chrome-glass-brightness: 1.15;
  /* The light a lifted surface's edge catches from what is behind it. */
  --edge-light-fill: oklch(1 0 0 / 0.12);
  --edge-light-saturation: 3.6;
  /* The seller's own prose, and how every secondary line (muted, disabled,
   * prose) composites onto what is behind it. A dark theme adds light
   * (plus-lighter) rather than greying. */
  --text-prose: var(--text);
  --text-secondary-blend: normal;
  /* A press that cannot be pressed yet. */
  --control-disabled-fill: var(--fill);
  /* A map's tiles as drawn, and how the location card lets its map meet the
   * copy: a veil of the card's face over it, or the map fading out (a mask
   * per arrangement, stacked and side by side). */
  --map-tile-filter: none;
  --veil-display: block;
  --location-map-fade-stacked: none;
  --location-map-fade-beside: none;
  /* Whether form controls and scrollbars are drawn for a light page or a
   * dark one. */
  --color-scheme: light;
  /* A theme's logotype (`pages::layout`'s brand mark): the box it is drawn
   * in, in ems of its font size; its layers' files; the two fills the body
   * and the ring inside its letters take; and how far its shadow image
   * reaches past the box. The product has none. */
  --mark-inline-size: 0;
  --mark-block-size: 0;
  --mark-fill-mask: none;
  --mark-edge-mask: none;
  --mark-shadow-image: none;
  --mark-shadow-overscan: 0;
  --mark-fill: none;
  --mark-rim: none;
  /* How a drawing (a floor plan) among the photographs is drawn. */
  --drawing-filter: none;
  /* A front page's map of the brand's spaces (`.map-masthead`): the art's
   * two flat ends, the wide ground's layers (all of it, and the sharp part
   * round the logotype), the phone's strip and where its sharp circle sits,
   * and how a pin is drawn. A theme with a map masthead states every one. */
  --map-top: var(--ground);
  --map-bottom: var(--ground);
  --map-ground: none;
  --map-ground-sharp: none;
  --map-strip-image: none;
  --map-strip-x: 0px;
  --map-strip-y: 0px;
  --map-pin-name: var(--text);
  --map-pin-glow: transparent;
  /* How dark a photograph is drawn as a page's ground, as black mixed in. */
  --ground-image-shade: 66%;

  /* Runtime timing and page travel. CSS owns these values so motion and its
   * reduced-motion alternative cannot drift from component styling. */
  --interaction-duration: 200ms;
  --morph-duration: var(--interaction-duration);
  --number-input-debounce-delay: 1000ms;
  --navigation-feedback-delay: 80ms;
  --navigation-progress-delay: 1500ms;
  --navigation-stalled-delay: 8000ms;
  --navigation-exit-duration: 120ms;
  --booking-action-entrance-duration: calc(1.5 * var(--interaction-duration));
  /* A box whose content changes height glides to it, and a calendar folding
   * between its views happens inside one, so the two share a tempo. */
  --resize-duration: calc(1.75 * var(--interaction-duration));
  --resize-easing: cubic-bezier(0.2, 0, 0, 1);
  --calendar-fold-duration: var(--resize-duration);
  --calendar-fold-easing: var(--resize-easing);
  --booking-action-entrance-delay: 300ms;
  --navigation-feedback-duration: 600ms;
  --navigation-feedback-transition-delay: 300ms;
  --navigation-offset-inline: calc(var(--increment) * 4);
  --navigation-offset-block: 0px;
  --pressed-opacity: 0.64;
  --navigation-pending-opacity: 0.76;
  --navigation-stalled-opacity: 0.28;

  /* Addressed readers for the surface channels and their measured endpoint
   * set. A behavior hook added to a component must join the relevant list;
   * writing these values on :root would make them inherit through the whole
   * document and defeat the point of registering them. */
  --reads-endpoints: [data-part="venue-booking-action"], [data-booking-action-content],
    [data-booking-panel], [data-booking-panel] [data-booking-form];
  --reads-p: body, [data-part="page"], [data-part="venue-booking-action"],
    [data-booking-action-surface], [data-booking-action-content],
    [data-booking-panel], [data-booking-panel] [data-booking-form];
  --reads-dy: body, [data-part="page"], [data-part="venue-booking-action"],
    [data-booking-panel] [data-booking-form], [data-lightbox-image][data-rt-flight],
    [data-lightbox-thumbnails], [data-surface-close], [data-lightbox-prev], [data-lightbox-next];
  --reads-dx: body, [data-part="page"], [data-lightbox-image][data-rt-flight],
    [data-lightbox-thumbnails], [data-surface-close], [data-lightbox-prev], [data-lightbox-next];
  --reads-dc: [data-part="venue-booking-action"], [data-booking-panel] [data-booking-form];
  --reads-morph: body, [data-part="page"], [data-lightbox-image][data-rt-flight],
    [data-lightbox-thumbnails], [data-surface-close], [data-lightbox-prev], [data-lightbox-next],
    [data-gallery-flight-chrome];
  --reads-scrub: [data-lightbox-thumbnails];

  --p: 0;
  --dy: 0;
  --dx: 0;
  --dc: 0;
  --morph: 0;
  --scrub: 0;
  --spring-k: 380;
  --spring-zeta: 0.82;
  --drag-limit: 48;
  --drag-commit: 32;
  /* Unitless because the runtime measures each surface's clearance in pixels
   * and the pull translation is a unitless multiplier of the same band. Five
   * pixels is the device-tested clearance before browser chrome begins to
   * treat the edge as a viewport-spanning layer. */
  --pull-edge: 5;
  --drag-catch: 80ms;
  --drag-coast: 100ms;
  --drag-carry: 1;
  --drag-glide: 500ms;
  --pull-size-down: -0.12;
  --pull-size-up: 0.15;
  --pull-t-down: 0.2;
  --pull-t-up: 1;
  --surface-landing-distance: max(
    calc(var(--increment) * 30),
    100dvh - calc(var(--increment) * 36)
  );
  --dim-sheet: 0.4;
  --dim-lightbox: 0.97;
  --lightbox-room: 0px;
}

@media (color-gamut: p3) {
  :root {
    --booking-button-fill: color(display-p3 0 0.68 0.815);
    --booking-button-inner-light: color(display-p3 0.3 0.9075 0.985 / 0.72);
    --booking-button-inner-dark: color(display-p3 0 0.4225 0.5325 / 0.38);
    --booking-button-shadow: color(display-p3 0 0.295 0.38 / 0.2);
  }
}

@media (min-resolution: 2dppx) {
  :root {
    --border-width-hairline: 0.5px;
    --hairline-scale: 0.5;
  }
}

@media (min-resolution: 3dppx) {
  :root {
    --border-width-hairline: 0.333333px;
    --hairline-scale: 0.333333;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --interaction-duration: 0ms;
    --navigation-exit-duration: 0ms;
    --navigation-feedback-duration: 0ms;
    --navigation-feedback-transition-delay: 0ms;
    --booking-action-entrance-delay: 0ms;
    --drag-glide: 0ms;
  }
}

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

html,
body {
  overflow-x: clip;
}

html {
  overflow-anchor: none;
}

html:has([data-rt-summoned]) {
  overflow: hidden;
}

/* Hidden means hidden whatever display a component or a generated layout
 * gives the element; at equal specificity a later display rule would show it
 * (notes/visual.md, 2026-08-05). */
[hidden],
[data-rt-hidden] {
  display: none !important;
}

/* The server declares which top-level rows belong to a page navigation. The
 * header deliberately does not: it remains stable while these rows travel. */
[data-page-component] {
  transition: opacity var(--interaction-duration);
}

footer[data-page-component] {
  --navigation-offset-inline: 0px;
  --navigation-offset-block: calc(var(--increment) * 2);
}

:where(a, button)[data-rt-pressed] {
  opacity: var(--pressed-opacity);
  transition: opacity var(--interaction-duration);
}

html[data-rt-nav-active] [data-page-component] {
  opacity: var(--navigation-pending-opacity);
  transition-duration: var(--navigation-feedback-duration);
  transition-delay: var(--navigation-feedback-transition-delay);
}

html[data-rt-nav-slow] {
  cursor: progress;
}

html[data-rt-nav-stalled] [data-rt-pressed] {
  animation: navigation-stalled 1200ms ease-in-out infinite;
}

@keyframes navigation-stalled {
  50% {
    opacity: var(--navigation-stalled-opacity);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-rt-nav-stalled] [data-rt-pressed] {
    animation: none;
  }
}

html {
  color-scheme: var(--color-scheme);
}

body {
  margin: 0;
  color: var(--text);
  background: color-mix(in srgb, var(--ground), var(--text) calc(var(--dim) * 100%));
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* The dim is the page revealing a normal-flow ink layer, not a fixed scrim.
 * A fixed viewport-sized backdrop changes iOS Safari's browser chrome and is
 * also independent of the gesture that dismisses the surface. Here the same
 * channel drives the page, browser-chrome tint and surface movement. */
body,
.page {
  transition: --dim var(--interaction-duration);
}

.backdrop {
  min-block-size: 100dvh;
  background: var(--text);
}

.page {
  min-block-size: 100dvh;
  overflow-x: clip;
  background: var(--ground);
  opacity: calc(1 - var(--dim));
}

html:has([data-rt-summoned]) .page {
  pointer-events: none;
}

button,
input,
select,
textarea {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

button {
  appearance: none;
}

/* What can be pressed answers with its own pressed state
 * (`data-rt-pressed`), never the platform's tap flash. */
:where(a, button, summary, label, input, select, textarea, [tabindex]) {
  -webkit-tap-highlight-color: transparent;
}

/* A strip that scrolls by swipe or snap carries no scrollbar of its own. */
:where(.venue-gallery-track, .venue-lightbox-strip, .calendar-rail,
  .booking-panel[data-rt-summoned] .booking-form) {
  scrollbar-width: none;
}

:where(.venue-gallery-track, .venue-lightbox-strip, .calendar-rail,
  .booking-panel[data-rt-summoned] .booking-form)::-webkit-scrollbar {
  display: none;
}

/* A summary a component draws draws its own marker; a bare one keeps the
 * browser's. */
summary[class] {
  list-style: none;
}

summary[class]::-webkit-details-marker {
  display: none;
}

h1,
h2,
h3,
h4,
legend,
.wordmark,
.text-display,
.text-title,
.text-subtitle,
.calendar-month-name {
  font-family: var(--font-display);
}

h1,
h2,
h3,
h4,
legend {
  font-weight: var(--weight-semibold);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The way past the header for a keyboard or a screen reader: the first stop
   of every page, out of sight until it has focus, then a pill over the top
   corner above every layer the page draws. */
.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: calc(var(--layer-dialog) + 1);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-ambient);
  text-decoration: none;
  translate: 0 calc(-100% - 16px);
}

.skip-link:focus-visible {
  translate: 0;
  outline: var(--focus-ring-width) solid var(--text);
  outline-offset: var(--focus-ring-offset);
}

/* The skip link's target takes focus so the next Tab continues from the
   content, and it is a region rather than a control, so it draws no ring. */
main:focus {
  outline: none;
}

/* Text standing beside what it qualifies: a weekday over its dates, the price
   under an option's name, the VAT line under a total. */
.muted {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* A label over what it names: in the body face like the text it heads, not a
 * heading in the display face, a step heavier than what it labels. A label
 * that should also read quietly is `muted` besides. */
.label {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
}

/* Grow an inline control's hit target without making it own a control row. */
.minimum-hit-area {
  position: relative;
}

.minimum-hit-area::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: max(100%, var(--minimum-target-size));
  block-size: max(100%, var(--minimum-target-size));
  transform: translate(-50%, -50%);
}

/* A photograph in a frame: the blur-up placeholder behind it until the
 * picture loads, cropped to fill. Each use states its proportions and its
 * corner. */
.photo {
  display: block;
  overflow: hidden;
  background-color: var(--fill);
  background-position: center;
  background-size: cover;
}

.photo > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* A card: the opaque face of a lifted surface, clipped to the corner its
 * elevation rounds. What stands on it is the component's. */
.card {
  overflow: hidden;
  border-radius: inherit;
  background: var(--card-fill);
  -webkit-backdrop-filter: var(--card-backdrop);
  backdrop-filter: var(--card-backdrop);
}

/* What every summoned surface derives from its channels: its geometry
 * interpolated from its collapsed endpoints to its expanded ones by the
 * progress, and its pull under a drag. Each surface states the endpoints it
 * travels between and leaves the rest unset. The readers are the elements the
 * runtime writes the channels on (`--reads-*`). */
:where(
  [data-modal] :is([data-modal-shell], [data-modal-trigger], [data-modal-content]),
  [data-part="venue-booking-action"],
  [data-booking-action-content],
  [data-booking-panel],
  [data-booking-panel] [data-booking-form]
) {
  --surface-progress: max(0, var(--p));
  --surface-width: calc(
    (1 - var(--surface-progress)) * var(--surface-width-collapsed)
      + var(--surface-progress) * var(--surface-width-expanded)
  );
  --surface-height: calc(
    (1 - var(--surface-progress)) * var(--surface-height-collapsed)
      + var(--surface-progress) * var(--surface-height-expanded)
  );
  --surface-left: calc(
    (1 - var(--surface-progress)) * var(--surface-left-collapsed)
      + var(--surface-progress) * var(--surface-left-expanded)
  );
  --surface-top: calc(
    (1 - var(--surface-progress)) * var(--surface-top-collapsed)
      + var(--surface-progress) * var(--surface-top-expanded)
  );
  --surface-bottom: calc(
    (1 - var(--surface-progress)) * var(--surface-bottom-collapsed)
      + var(--surface-progress) * var(--surface-bottom-expanded)
  );
  --surface-radius: calc(
    (1 - var(--surface-progress)) * var(--surface-radius-collapsed)
      + var(--surface-progress) * var(--surface-radius-expanded)
  );
  --surface-pull: calc(var(--dy) + var(--dc));
  --surface-pull-y: calc(
    clamp(0, var(--surface-pull), var(--drag-limit)) * var(--pull-t-down)
      + clamp(-1 * var(--drag-limit), var(--surface-pull), 0) * var(--pull-t-up)
  );
  --surface-pull-scale: calc(
    1
      + clamp(0, var(--surface-pull), var(--drag-limit)) / var(--drag-limit)
        * var(--pull-size-down)
      + clamp(0, -1 * var(--surface-pull), var(--drag-limit)) / var(--drag-limit)
        * var(--pull-size-up)
  );
}

/* Material describes how genuine content behind a surface is mixed. It does
 * not imply geometry or elevation. */
:where(.glass-material) {
  /* A glass surface may become solid without switching materials or adding a
   * second painted layer. Components drive the unitless solid fraction; at
   * zero the fill is the authored glass and at one it is opaque. The backdrop
   * filter stays constant instead of becoming another per-frame paint input;
   * the solid fill naturally occludes it. */
  --glass-material-solid: 0;
  --glass-material-solid-fill: var(--surface);

  background-color: color-mix(
    in srgb,
    var(--glass-material-fill),
    var(--glass-material-solid-fill) calc(var(--glass-material-solid) * 100%)
  );
  -webkit-backdrop-filter:
    blur(var(--glass-material-blur))
    saturate(var(--glass-material-saturation))
    contrast(var(--glass-material-contrast))
    brightness(var(--glass-material-brightness));
  backdrop-filter:
    blur(var(--glass-material-blur))
    saturate(var(--glass-material-saturation))
    contrast(var(--glass-material-contrast))
    brightness(var(--glass-material-brightness));
}

.glass-material-light {
  --glass-material-fill: var(--chrome-glass-fill);
  --glass-material-blur: var(--chrome-glass-blur);
  --glass-material-saturation: var(--chrome-glass-saturation);
  --glass-material-contrast: var(--chrome-glass-contrast);
  --glass-material-brightness: var(--chrome-glass-brightness);
}

.glass-material-dark {
  --glass-material-fill: oklch(0.08 0 0 / 0.46);
  --glass-material-blur: 8px;
  --glass-material-saturation: 2.8;
  --glass-material-contrast: 1.12;
  --glass-material-brightness: 0.76;
}

/* Elevation composes neutral depth, a refracted edge light, and optional
 * reflected source colour without assigning a surface material. */
:where(.surface-elevation) {
  --surface-elevation-strength: 1;
  --surface-elevation-contact-shadow: 0 0 0 transparent;
  --surface-elevation-ambient-shadow: 0 0 0 transparent;
  --surface-elevation-edge-light-width: 0px;
  --surface-elevation-edge-light-fill: var(--edge-light-fill);
  --surface-elevation-edge-light-saturation: var(--edge-light-saturation);
  --surface-elevation-edge-light-contrast: 1.12;
  --surface-elevation-edge-light-brightness: 1.08;
  --surface-elevation-radius: 0px;

  position: relative;
  isolation: isolate;
  border-radius: var(--surface-elevation-radius);
}

:where(.surface-elevation.round) {
  --surface-elevation-radius: var(--corner-radius);
}

.surface-elevation-raised {
  --surface-elevation-contact-shadow:
    var(--shadow-contact-geometry)
    color-mix(
      in oklch,
      transparent,
      var(--shadow-contact-color) calc(var(--surface-elevation-strength) * 100%)
    );
  --surface-elevation-ambient-shadow:
    var(--shadow-ambient-geometry)
    color-mix(
      in oklch,
      transparent,
      var(--shadow-ambient-color) calc(var(--surface-elevation-strength) * 100%)
    );
}

.surface-elevation-edge-light {
  --surface-elevation-edge-light-width: var(--border-width-hairline);
}

:where(.surface-elevation-reflection) {
  --surface-elevation-reflection-blur: calc(var(--increment) * 5);
  --surface-elevation-reflection-scale: 1.01;
  --surface-elevation-reflection-opacity: 0.3;
  --surface-elevation-reflection-saturation: 1.7;
  --surface-elevation-reflection-contrast: 1.04;

  position: relative;
  z-index: -1;
  opacity: var(--surface-elevation-reflection-opacity);
  filter:
    blur(var(--surface-elevation-reflection-blur))
    saturate(var(--surface-elevation-reflection-saturation))
    contrast(var(--surface-elevation-reflection-contrast));
  transform: scale(var(--surface-elevation-reflection-scale));
  transform-origin: center;
  pointer-events: none;
  user-select: none;
}

/* The edge light is a filtered ring over the rendered surface, not a pale
 * stroke. Corner quarter-annuli and straight bands share one antialias ramp. */
.surface-elevation-edge-light::before {
  --surface-elevation-edge-light-band: calc(
    var(--surface-elevation-edge-light-width) + var(--surface-elevation-edge-light-width)
  );
  --surface-elevation-edge-light-mask:
    radial-gradient(
        circle at bottom right,
        transparent 0
          calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-band)),
        black calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-width)),
        transparent var(--surface-elevation-radius)
      )
      top left / var(--surface-elevation-radius) var(--surface-elevation-radius) no-repeat,
    radial-gradient(
        circle at bottom left,
        transparent 0
          calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-band)),
        black calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-width)),
        transparent var(--surface-elevation-radius)
      )
      top right / var(--surface-elevation-radius) var(--surface-elevation-radius) no-repeat,
    radial-gradient(
        circle at top left,
        transparent 0
          calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-band)),
        black calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-width)),
        transparent var(--surface-elevation-radius)
      )
      bottom right / var(--surface-elevation-radius) var(--surface-elevation-radius) no-repeat,
    radial-gradient(
        circle at top right,
        transparent 0
          calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-band)),
        black calc(var(--surface-elevation-radius) - var(--surface-elevation-edge-light-width)),
        transparent var(--surface-elevation-radius)
      )
      bottom left / var(--surface-elevation-radius) var(--surface-elevation-radius) no-repeat,
    linear-gradient(
      to bottom,
      transparent 0,
      black var(--surface-elevation-edge-light-width),
      transparent var(--surface-elevation-edge-light-band)
    ) top center / calc(100% - var(--surface-elevation-radius) - var(--surface-elevation-radius))
      var(--surface-elevation-edge-light-band) no-repeat,
    linear-gradient(
      to top,
      transparent 0,
      black var(--surface-elevation-edge-light-width),
      transparent var(--surface-elevation-edge-light-band)
    ) bottom center / calc(100% - var(--surface-elevation-radius) - var(--surface-elevation-radius))
      var(--surface-elevation-edge-light-band) no-repeat,
    linear-gradient(
      to right,
      transparent 0,
      black var(--surface-elevation-edge-light-width),
      transparent var(--surface-elevation-edge-light-band)
    ) center left / var(--surface-elevation-edge-light-band)
      calc(100% - var(--surface-elevation-radius) - var(--surface-elevation-radius)) no-repeat,
    linear-gradient(
      to left,
      transparent 0,
      black var(--surface-elevation-edge-light-width),
      transparent var(--surface-elevation-edge-light-band)
    ) center right / var(--surface-elevation-edge-light-band)
      calc(100% - var(--surface-elevation-radius) - var(--surface-elevation-radius)) no-repeat;

  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--surface-elevation-edge-light-fill);
  -webkit-backdrop-filter:
    saturate(var(--surface-elevation-edge-light-saturation))
    contrast(var(--surface-elevation-edge-light-contrast))
    brightness(var(--surface-elevation-edge-light-brightness));
  backdrop-filter:
    saturate(var(--surface-elevation-edge-light-saturation))
    contrast(var(--surface-elevation-edge-light-contrast))
    brightness(var(--surface-elevation-edge-light-brightness));
  -webkit-mask: var(--surface-elevation-edge-light-mask);
  mask: var(--surface-elevation-edge-light-mask);
  pointer-events: none;
}

.surface-elevation-surface {
  position: relative;
  z-index: 0;
  box-shadow:
    var(--surface-elevation-contact-shadow),
    var(--surface-elevation-ambient-shadow);
}

/* Inline venue gallery: its photographs, and the chips and dots over them. */
.venue-gallery {
  --gallery-slide: 0;
}

.venue-gallery-track {
  border-radius: inherit;
}

.venue-gallery > .venue-gallery-reflection {
  overflow: hidden;
  background: transparent;
  scroll-snap-type: none;
  overscroll-behavior: auto;
}

.venue-gallery-track:focus-visible {
  outline: var(--focus-ring-width) solid var(--on-photo);
  outline-offset: -4px;
}

.venue-gallery-item {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--fill);
  cursor: zoom-in;
}

.venue-gallery-reflection .venue-gallery-item {
  cursor: default;
}

.venue-gallery-item:focus-visible {
  z-index: 1;
  outline: var(--focus-ring-width) solid var(--on-photo);
  outline-offset: -4px;
}

.venue-gallery-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.venue-gallery-photo-count {
  --surface-elevation-radius: calc(var(--increment) * 4);
  --surface-elevation-contact-shadow: var(--shadow-on-photo-contact);
  --surface-elevation-ambient-shadow: var(--shadow-on-photo-ambient);

  display: var(--gallery-photo-count-display);
  position: absolute;
  inset-inline-end: calc(var(--increment) * 3);
  inset-block-end: calc(var(--increment) * 3);
  z-index: 2;
  color: var(--on-photo);
  pointer-events: none;
}

.venue-gallery-photo-count-surface {
  display: flex;
  align-items: center;
  block-size: calc(var(--increment) * 8);
  padding-inline: calc(var(--increment) * 3);
  overflow: hidden;
  border-radius: inherit;
}

.venue-gallery-photo-count-label {
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
}

.venue-gallery-pagination {
  --gallery-dot-size: 8;
  --gallery-pill-size: 24;
  --gallery-dot-gap: 4;
  --gallery-dot-step: calc(var(--gallery-dot-size) + var(--gallery-dot-gap));
  --gallery-dot-extra: calc(var(--gallery-pill-size) - var(--gallery-dot-size));
  --gallery-dot-window: 9;
  --gallery-visible-dots: min(var(--gallery-photo-count), var(--gallery-dot-window));
  --gallery-dot-shift: clamp(
    0,
    var(--gallery-slide) - (var(--gallery-dot-window) - 1) / 2,
    var(--gallery-photo-count) - var(--gallery-dot-window)
  );
  --gallery-dot-fade-start: clamp(0, var(--gallery-dot-shift), 1);
  --gallery-dot-fade-end: clamp(
    0,
    var(--gallery-photo-count) - var(--gallery-dot-window) - var(--gallery-dot-shift),
    1
  );
  --gallery-pagination-width: calc(
    var(--gallery-visible-dots) * var(--gallery-dot-step)
    - var(--gallery-dot-gap)
    + var(--gallery-dot-extra)
  );
  --surface-elevation-radius: calc(var(--increment) * 3);
  --surface-elevation-contact-shadow: var(--shadow-on-photo-contact);
  --surface-elevation-ambient-shadow: var(--shadow-on-photo-ambient);

  display: var(--gallery-pagination-display);
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: calc(var(--increment) * 3);
  z-index: 2;
  transform: translateX(-50%);
  pointer-events: none;
}

.venue-gallery-pagination-surface {
  display: flex;
  align-items: center;
  box-sizing: content-box;
  inline-size: calc(var(--gallery-pagination-width) * 1px);
  gap: calc(var(--gallery-dot-gap) * 1px);
  padding: calc(var(--increment) * 2);
  overflow: hidden;
  border-radius: inherit;
}

.venue-gallery-pagination-dot {
  --gallery-dot-lead: clamp(
    0,
    var(--gallery-dot-index) - var(--gallery-slide),
    1
  );
  --gallery-dot-x: calc(
    (var(--gallery-dot-index) - var(--gallery-dot-shift)) * var(--gallery-dot-step)
    + var(--gallery-dot-lead) * var(--gallery-dot-extra)
  );
  --gallery-dot-nearness: clamp(
    0,
    1 - abs(var(--gallery-dot-index) - var(--gallery-slide)),
    1
  );
  --gallery-dot-midpoint: calc(var(--gallery-dot-x) + var(--gallery-dot-size) / 2);
  --gallery-dot-fit: min(
    1 - var(--gallery-dot-fade-start)
      * clamp(
        0,
        (var(--gallery-dot-step) - var(--gallery-dot-midpoint)) / var(--gallery-dot-step),
        1
      ),
    1 - var(--gallery-dot-fade-end)
      * clamp(
        0,
        (
          var(--gallery-dot-midpoint) - var(--gallery-pagination-width)
          + var(--gallery-dot-step)
        ) / var(--gallery-dot-step),
        1
      )
  );

  flex: none;
  inline-size: calc(
    (var(--gallery-dot-size) + var(--gallery-dot-nearness) * var(--gallery-dot-extra)) * 1px
  );
  block-size: calc(var(--gallery-dot-size) * 1px);
  border-radius: var(--radius-pill);
  background: color-mix(
    in oklch,
    var(--on-photo) calc((0.5 + 0.5 * var(--gallery-dot-nearness)) * 100%),
    transparent
  );
  scale: var(--gallery-dot-fit);
}

.venue-gallery-pagination-dot:first-child {
  margin-inline-start: calc(var(--gallery-dot-shift) * var(--gallery-dot-step) * -1px);
}

[data-gallery-flight-chrome][data-rt-lifted] {
  position: fixed;
  inset: auto;
  inset-inline-start: calc(var(--gallery-chrome-x) * 1px);
  inset-block-start: calc(var(--gallery-chrome-y) * 1px);
  z-index: var(--layer-flight);
  display: block;
  transform: none;
  /* This is inline-gallery chrome travelling with its photo, not lightbox
   * chrome. It leaves over the gallery half of the flight and stays absent at
   * the lightbox rest; the lightbox's own controls use the inverse channel. */
  opacity: clamp(0, 2 * var(--morph) - 1, 1);
}

/* A summoned surface sheds the box the browser gives a popover or a dialog:
 * its margin, padding, border, canvas fill and size limits. Each states only
 * its own geometry. */
:where(.venue-lightbox, .modal-shell, .booking-panel) {
  inset: auto;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  color: inherit;
  background: transparent;
  max-inline-size: none;
  max-block-size: none;
}

/* The lightbox carries no separate scrim. Its photo, chrome and the page dim
 * all read the same flight/drag channels, so pulling a photo away reveals the
 * page continuously instead of moving one layer over an unrelated fade. */
.venue-lightbox {
  display: none;
  color: var(--on-photo);
}

.venue-lightbox[data-rt-summoned] {
  position: fixed;
  inset:
    max(calc(var(--increment) * 2), env(safe-area-inset-top))
    env(safe-area-inset-right)
    max(calc(var(--increment) * 2), env(safe-area-inset-bottom))
    env(safe-area-inset-left);
  z-index: var(--layer-sheet);
  display: grid;
  inline-size: auto;
  block-size: auto;
  place-items: center;
}

.venue-gallery-track [data-rt-away] {
  opacity: 0;
}

.venue-lightbox-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  grid-template-rows: 100%;
  inline-size: 100%;
  block-size: 100%;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  touch-action: pan-x;
}

.venue-lightbox-slide {
  display: grid;
  inline-size: 100%;
  block-size: 100%;
  place-items: center;
  scroll-snap-align: center;
}

.venue-lightbox-image {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: calc(100% - 2 * var(--lightbox-room));
  max-block-size: calc(100% - 2 * var(--lightbox-room));
  object-fit: contain;
  background-position: center;
  background-size: cover;
}

.venue-lightbox-image[data-rt-flight] {
  --held-scale: calc(1 + var(--photo-pull) * var(--photo-shrink));
  --flight-x: calc(var(--dx) + var(--morph) * (var(--morph-to-x) - var(--dx)));
  --flight-y: calc(var(--dy) + var(--morph) * (var(--morph-to-y) - var(--dy)));

  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: calc(-50% + var(--flight-x) * 1px) calc(-50% + var(--flight-y) * 1px);
  scale: var(--flight-scale);
}

.venue-lightbox-image[data-rt-flight="cell"] {
  --flight-k: max(
    calc(var(--morph-to-w) / var(--morph-w)),
    calc(var(--morph-to-h) / var(--morph-h))
  );
  --flight-scale: calc(var(--held-scale) + var(--morph) * (var(--flight-k) - var(--held-scale)));
  --flight-r: calc(var(--morph) / var(--flight-scale) * 1px);

  clip-path: inset(
    calc(var(--morph) * (var(--morph-h) - var(--morph-to-h) / var(--flight-k)) / 2 * 1px)
    calc(var(--morph) * (var(--morph-w) - var(--morph-to-w) / var(--flight-k)) / 2 * 1px)
    round calc(var(--morph-r-tl) * var(--flight-r))
      calc(var(--morph-r-tr) * var(--flight-r))
      calc(var(--morph-r-br) * var(--flight-r))
      calc(var(--morph-r-bl) * var(--flight-r))
  );
}

.venue-lightbox-image[data-rt-flight="point"] {
  --flight-scale: calc(var(--held-scale) * (1 - var(--morph)));
  opacity: calc(1 - var(--morph));
}

.venue-lightbox-close,
.venue-lightbox-previous,
.venue-lightbox-next,
.venue-lightbox-thumbnails {
  position: absolute;
  z-index: 1;
  opacity: calc(1 - var(--photo-gone, 0));
}

.venue-lightbox-close,
.venue-lightbox-previous,
.venue-lightbox-next {
  display: grid;
  inline-size: var(--minimum-target-size);
  block-size: var(--minimum-target-size);
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--on-photo);
  background: transparent;
  cursor: pointer;
}

.venue-lightbox-close .icon,
.venue-lightbox-previous .icon,
.venue-lightbox-next .icon {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
}

.venue-lightbox-close {
  inset-block-start: max(calc(var(--increment) * 3), env(safe-area-inset-top));
  inset-inline-end: max(calc(var(--increment) * 3), env(safe-area-inset-right));
}

.venue-lightbox-previous,
.venue-lightbox-next {
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.venue-lightbox-previous {
  inset-inline-start: calc(var(--increment) * 4);
}

.venue-lightbox-next {
  inset-inline-end: calc(var(--increment) * 4);
}

.venue-lightbox-thumbnails {
  --slide: 0;
  --thumbnail-width: 56;
  --thumbnail-height: 40;
  --thumbnail-gap: 6;
  --thumbnail-growth: 0.12;
  --thumbnail-step: calc(var(--thumbnail-width) + var(--thumbnail-gap));
  --thumbnail-position: calc(var(--slide) + var(--scrub));

  inset-inline: 0;
  inset-block-end: max(calc(var(--increment) * 2), env(safe-area-inset-bottom));
  block-size: calc(
    var(--thumbnail-height) * (1 + var(--thumbnail-growth)) * 1px
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black calc(var(--thumbnail-step) * 1px),
    black calc(100% - var(--thumbnail-step) * 1px),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black calc(var(--thumbnail-step) * 1px),
    black calc(100% - var(--thumbnail-step) * 1px),
    transparent
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: calc(1 - var(--photo-gone, 0));
  pointer-events: none;
}

.venue-lightbox-thumbnail-track {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  display: flex;
  inline-size: calc(
    (var(--thumbnail-count) * var(--thumbnail-step) - var(--thumbnail-gap)) * 1px
  );
  align-items: center;
  gap: calc(var(--thumbnail-gap) * 1px);
  translate:
    calc(
      -50%
        + ((var(--thumbnail-count) - 1) / 2 - var(--thumbnail-position))
          * var(--thumbnail-step) * 1px
    )
    -50%;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}

.venue-lightbox-thumbnail {
  --thumbnail-nearness: clamp(
    0,
    1 - abs(var(--thumbnail-index) - var(--thumbnail-position)),
    1
  );

  flex: 0 0 calc(var(--thumbnail-width) * 1px);
  inline-size: calc(var(--thumbnail-width) * 1px);
  block-size: calc(var(--thumbnail-height) * 1px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: calc(var(--increment) * 2);
  background: transparent;
  opacity: calc(0.42 + 0.58 * var(--thumbnail-nearness));
  scale: calc(1 + var(--thumbnail-nearness) * var(--thumbnail-growth));
  cursor: pointer;
}

.venue-lightbox-thumbnail img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.venue-lightbox :is(button, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--on-photo);
  outline-offset: var(--focus-ring-offset);
}

html:has(.venue-lightbox[data-rt-summoned]) {
  --drag-limit: 420;
  --drag-commit: 96;
  --photo-shrink: -0.25;
  /* The booking action shares the root channels but is not part of a photo
   * gesture. The lightbox photo renders the offsets itself; neutralize the
   * sheet pull factors so its resting action does not move or strain behind
   * the dim while a photo is held. */
  --pull-t-down: 0;
  --pull-t-up: 0;
  --pull-size-down: 0;
  --pull-size-up: 0;
}

html:has(.venue-lightbox[data-rt-summoned])
  :is(body, [data-part="page"], [data-lightbox-image][data-rt-flight],
    [data-lightbox-thumbnails], [data-surface-close], [data-lightbox-prev], [data-lightbox-next]) {
  --photo-pull: clamp(0, hypot(var(--dx), var(--dy)) / var(--drag-limit), 1);
  --photo-gone: calc(var(--photo-pull) + var(--morph) * (1 - var(--photo-pull)));
}

html:has(.venue-lightbox[data-rt-summoned]) :is(body, [data-part="page"]) {
  --dim: calc(var(--dim-lightbox) * (1 - var(--photo-gone)));
  transition-duration: 0s;
}

@media (max-width: 687.98px) {
  .venue-lightbox-previous,
  .venue-lightbox-next {
    display: none;
  }
}

@media (min-width: 688px) {
  :root {
    --lightbox-room: calc(var(--increment) * 8);
  }
}

/* Front page. The generated page profile places the header and opening in one
 * row, and the generated tile grid owns every card width. This layer supplies
 * only the photograph, reading order and optical treatment inside them. */
.home-hero {
  --home-hero-fade: linear-gradient(
    to bottom,
    black 0 52%,
    rgb(0 0 0 / 0.96) 60%,
    rgb(0 0 0 / 0.78) 70%,
    rgb(0 0 0 / 0.5) 80%,
    rgb(0 0 0 / 0.18) 90%,
    transparent 100%
  );

  color: var(--on-photo);
  /* The picture fills the hero's height. An auto row stops at the
   * photograph's own height wherever the page is narrow enough to show all
   * of it, and leaves the rest of the hero empty (on a phone, 249 of 320px). */
  grid-auto-rows: 100%;
}

.home-hero-panel {
  position: relative;
  min-inline-size: 0;
  overflow: hidden;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  background-color: transparent;
  background-position: center;
  background-size: cover;
}

.home-hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--photo-scrim) 0 54%,
    transparent 82%
  );
  -webkit-mask-image: var(--home-hero-fade);
  mask-image: var(--home-hero-fade);
  pointer-events: none;
}

.home-hero-image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  -webkit-mask-image: var(--home-hero-fade);
  mask-image: var(--home-hero-fade);
}

.home-hero-copy {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: calc(var(--increment) * 42) calc(var(--increment) * 4) 0;
}

.home-hero-title {
  inline-size: min(calc(var(--increment) * 140), 100%);
  margin: 0;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 16px color-mix(in oklch, var(--shadow-ink) 42%, transparent);
}

.home-hero-title-mark {
  color: var(--accent);
}

.home-collection-note {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  text-wrap: balance;
}

.venue-card {
  min-inline-size: 0;
  color: var(--text);
  text-decoration: none;
}

.venue-card-media {
  aspect-ratio: 3 / 2;
}

.venue-card-image {
  transition: scale var(--interaction-duration) ease-out;
}

.venue-card-name {
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.venue-card-summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.venue-card-facts {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
}

.venue-card-facts > span {
  white-space: nowrap;
}

.venue-card-price {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.venue-card:focus-visible {
  outline: none;
}

.venue-card:focus-visible .venue-card-media {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: calc(var(--increment) * 2);
}

@media (hover: hover) {
  .venue-card:hover .venue-card-image {
    scale: 1.015;
  }
}

/* The customer's own things. */
.yours-group-name {
  margin: 0;
}

/* Link rows: groups of rows on the control fill, separated by composited
 * hairlines, each a glyph, what it leads to, what is there, a count, and the
 * way on. The account's dashboard is made of them, so the next booking, the
 * ways into each kind of thing and the account's links read as one thing,
 * and a coming booking's sheet states what being there takes in them. The
 * dashboard's own labels sit on the same inset as the rows. */
:is(.dash, .link-rows) {
  --link-row-inset: calc(var(--increment) * 4);
  --link-row-lead: calc(var(--increment) * 6);
  --link-row-lead-gap: calc(var(--increment) * 3);
}

/* The account's dashboard, at a phone's measure in the header's dialog and
 * on its own page alike. */
.dash {
  color: var(--text);
}

.dash-page {
  inline-size: 100%;
  max-inline-size: calc(var(--increment) * 100);
  justify-self: center;
}

.link-rows {
  display: grid;
  overflow: hidden;
  border-radius: var(--control-radius);
  background: var(--control-fill);
}

.link-rows form {
  display: contents;
}

.link-row,
.dash-next {
  position: relative;
  display: grid;
  align-items: center;
  column-gap: var(--link-row-lead-gap);
  inline-size: 100%;
  padding-inline: var(--link-row-inset);
  border: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.link-row {
  grid-template-columns: var(--link-row-lead) minmax(0, 1fr) auto auto;
  min-block-size: calc(var(--increment) * 13);
  padding-block: calc(var(--increment) * 2.5);
}

/* The rule between rows starts where the labels do, as a grouped list's
 * does. The composited hairline: a one-pixel strip scaled to one device
 * pixel, because the dialog these rows stand in is an animated surface
 * WebKit flattens, and a fractional border can be lost in that handoff. */
.link-rows > :not(:first-child, form)::before,
.link-rows > form:not(:first-child) .link-row::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: calc(var(--link-row-inset) + var(--link-row-lead) + var(--link-row-lead-gap)) 0;
  block-size: 1px;
  background: var(--line);
  scale: 1 var(--hairline-scale);
  transform-origin: center top;
}

.link-row > .icon:first-child {
  inline-size: var(--link-row-lead);
  block-size: var(--link-row-lead);
}

/* The way on keeps its column whether a count stands before it or not. */
.link-row > .icon:last-child:not(:first-child) {
  grid-column: 4;
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* A link row that folds what it offers out beneath itself turns its way on
 * over while open. */
.unfold {
  grid-column: 4;
  display: grid;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  transition: rotate var(--interaction-duration);
}

.unfold .icon {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
}

details[open] > summary .unfold {
  rotate: 180deg;
}

.link-row-label {
  display: grid;
  gap: calc(var(--increment) * 0.5);
  min-inline-size: 0;
}

.link-row-detail {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  overflow-x: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-row-count {
  grid-column: 3;
  display: grid;
  place-items: center;
  min-inline-size: calc(var(--increment) * 6);
  block-size: calc(var(--increment) * 6);
  padding-inline: calc(var(--increment) * 2);
  border-radius: calc(var(--increment) * 3);
  color: var(--accent-strong);
  background: var(--accent-wash);
  font-weight: var(--weight-medium);
  text-align: center;
}

/* The next booking: the same row, grown to carry a photograph of the place
 * in the glyph's column. The photograph is the only image in the dashboard,
 * which is what makes the next booking the first thing read. */
.dash-next {
  --link-row-lead: calc(var(--increment) * 16);
  grid-template-columns: var(--link-row-lead) minmax(0, 1fr);
  padding-block: calc(var(--increment) * 3);
}

.dash-next-photo {
  aspect-ratio: 1;
  border-radius: calc(var(--control-radius) - var(--increment) * 1);
}

.dash-next-when {
  color: var(--accent-strong);
  font-weight: var(--weight-semibold);
}

.dash-next-venue {
  max-inline-size: 100%;
  overflow-x: clip;
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The rule under the next booking starts where its words do. */
.dash-next + .link-row::before {
  inset-inline-start: var(--link-row-inset);
}

.dash-none {
  padding: calc(var(--increment) * 5) var(--link-row-inset);
}

.dash-section {
  margin-block-start: calc(var(--increment) * 3);
}

.dash-section-name {
  margin: 0;
  padding-inline: var(--link-row-inset);
}

/* A fact row states and leads nowhere: no way on, no press. */
.link-row-fact {
  grid-template-columns: var(--link-row-lead) minmax(0, 1fr);
  cursor: auto;
}

@media (hover: hover) {
  .link-row:not(.link-row-fact):hover,
  .dash-next:hover {
    background: var(--interactive-wash);
  }
}

/* The coming list beside the chosen booking's sheet. The chosen booking
 * stands lifted on a surface, the way the sheet beside it does; the rest lie
 * on the ground. */

.yours-prep-row {
  display: grid;
  grid-template-columns: calc(var(--increment) * 10) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--increment) * 4);
  padding: calc(var(--increment) * 3) calc(var(--increment) * 4);
  border-radius: var(--control-radius);
  color: var(--text);
  text-decoration: none;
}

.yours-prep-current {
  background: var(--surface);
  box-shadow: var(--shadow-contact), var(--shadow-ambient);
}

@media (hover: hover) {
  .yours-prep-row:not(.yours-prep-current):hover {
    background: var(--interactive-wash);
  }
}

.yours-prep-date {
  display: grid;
  justify-items: center;
  gap: calc(var(--increment) / 2);
  line-height: 1;
  white-space: nowrap;
}

/* The day's numeral in the display face, the one figure a reader's eye runs
 * down the column by. */
.yours-prep-day {
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  font-weight: var(--weight-title);
}

/* A booking's sheet: the place's photograph, when and where, then what
 * being there takes as link rows, then the ways on. The coming page shows it
 * beside its list, and the booking's own page grows it. */
.booking-sheet {
  min-inline-size: 0;
}

.booking-sheet-surface {
  display: grid;
}

.booking-photo {
  aspect-ratio: 2 / 1;
}

.booking-sheet-body {
  padding: calc(var(--increment) * 6);
}

/* Under the venue's name, when as one line in the page's own text, then
 * how the booking stands and how far off, quiet. */
.booking-when {
  font-family: var(--font-body);
}

.booking-status {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.booking-said {
  color: var(--accent-strong);
  font-weight: var(--weight-semibold);
}

/* A booking's tiles: lifted cards in the main column holding what the state
 * asks first, the payment or what a cancellation meant, and the door. */
.booking-tile-frame {
  container: booking-tile / inline-size;
  min-inline-size: 0;
}

.booking-tile {
  display: grid;
  gap: calc(var(--increment) * 4);
  padding: calc(var(--increment) * 6);
}

.booking-tile > p {
  margin: 0;
}

/* The payment: what is owed as the tile's figure, then the way to pay. */

.booking-pay-amount {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  font-variant-numeric: tabular-nums;
}

/* The door: the code as the largest figures on the page, the one thing read
 * standing at a door, beside the venue's own words on using it. Where the
 * tile is too narrow for both side by side, the words follow the code. While
 * the code is owed, the tile says when it comes. */
.booking-door {
  gap: calc(var(--increment) * 5);
}

@container booking-tile (min-width: 36rem) {
  .booking-door {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    column-gap: calc(var(--increment) * 8);
  }

  .booking-door-instructions {
    padding-inline-start: calc(var(--increment) * 8);
    border-inline-start: var(--border-width-hairline) solid var(--line);
  }
}

.booking-door-code {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.booking-door-instructions > * {
  margin-block: 0 calc(var(--increment) * 3);
}

.booking-door-instructions > :last-child {
  margin-block-end: 0;
}

/* The booking as one card: the venue's photograph across its head, what
 * was booked and the ways to change it as link rows on the card's white,
 * and the terms they follow as its small print. */
.booking-card {
  min-inline-size: 0;
}

.booking-card-surface,
.wallet-place-surface {
  display: grid;
}

.booking-card-photo {
  aspect-ratio: 16 / 9;
}

.booking-card-body {
  padding: calc(var(--increment) * 5) calc(var(--increment) * 5) calc(var(--increment) * 6);
}

/* Handing the booking on is a row among the ways on, and folds its form out
 * beneath itself inside the group. */
.booking-transfer {
  position: relative;
}

.booking-transfer > summary {
  padding-block: calc(var(--increment) * 2);
}

.booking-transfer-form {
  padding: 0 var(--link-row-inset) calc(var(--increment) * 4);
}

/* The terms the booking was sold under, as the small print under the ways
 * on that they govern. */
.booking-terms {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.booking-cancel {
  padding: calc(var(--increment) * 5);
  border-radius: var(--control-radius);
  background: var(--control-fill);
}

/* The receipt as a paper: its own white sheet with the document's head,
 * the lines, and the parties set small at its foot. */
.booking-paper {
  padding: calc(var(--increment) * 6);
  background: var(--surface);
  box-shadow: var(--shadow-contact);
}

.booking-receipt-meta,
.booking-receipt-party {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-style: normal;
}

.booking-receipt-lines {
  font-variant-numeric: tabular-nums;
}

/* The receipt as a document: an A4 sheet on screen that is the same sheet on
 * paper and in the PDF a browser prints it to. Measured in print units,
 * because the sheet is a page before it is a layout. The seller issues it, so
 * the seller heads it. */
.receipt-document {
  display: grid;
  gap: calc(var(--increment) * 4);
}

.receipt-document-actions {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--increment) * 4);
  margin: 0;
}

.receipt-sheet {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-self: center;
  inline-size: min(100%, 210mm);
  min-block-size: 297mm;
  padding: 20mm 18mm;
  background: var(--surface);
  box-shadow: var(--shadow-contact);
  color: var(--text);
  font: 10pt/1.45 var(--font-body);
}

.receipt-sheet p {
  margin: 0;
}

.receipt-quiet,
.receipt-label,
.receipt-foot {
  color: var(--text-muted);
}

.receipt-label {
  font-size: 8pt;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.receipt-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4mm 10mm;
  align-items: start;
  padding-block-end: 8mm;
  border-block-end: 1.5pt solid var(--text);
}

.receipt-issuer {
  font: var(--weight-title) 20pt/1.15 var(--font-display);
  letter-spacing: -0.01em;
}

.receipt-head .receipt-quiet {
  margin-block-start: 2mm;
}

.receipt-number {
  text-align: end;
}

.receipt-no {
  margin-block-start: 1mm;
  font-size: 16pt;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.receipt-parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6mm;
  margin: 0;
  padding-block: 7mm;
  border-block-end: var(--border-width-hairline) solid var(--line);
}

.receipt-parties dt {
  margin-block-end: 1mm;
}

.receipt-parties dd {
  margin: 0;
}

.receipt-what {
  padding-block: 7mm 2mm;
}

.receipt-what-title {
  margin: 0;
  font: var(--weight-title) 14pt/1.25 var(--font-display);
}

.receipt-what .receipt-quiet {
  margin-block-start: 1mm;
}

.receipt-lines,
.receipt-totals {
  inline-size: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.receipt-lines {
  margin-block-start: 5mm;
}

.receipt-lines th {
  padding: 0 0 2mm 4mm;
  border-block-end: 0.5pt solid var(--text);
  color: var(--text-muted);
  font-size: 8pt;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: end;
  text-transform: uppercase;
}

.receipt-lines td {
  padding: 2.5mm 0 2.5mm 4mm;
  border-block-end: var(--border-width-hairline) solid var(--line);
  text-align: end;
  vertical-align: top;
}

.receipt-lines :is(th, td):first-child {
  padding-inline-start: 0;
  text-align: start;
}

.receipt-lines td:not(:first-child) {
  white-space: nowrap;
}

/* A line is one fact, so a page break never runs through it. */
.receipt-lines tr,
.receipt-totals,
.receipt-note {
  break-inside: avoid;
}

.receipt-totals {
  inline-size: min(100%, 82mm);
  margin: 4mm 0 0 auto;
}

.receipt-totals td {
  padding-block: 1.2mm;
}

.receipt-totals td:last-child {
  text-align: end;
  white-space: nowrap;
}

.receipt-totals .receipt-grand td {
  padding-block-start: 3mm;
  border-block-start: 1.5pt solid var(--text);
  font-size: 13pt;
  font-weight: 600;
}

.receipt-note {
  margin-block-start: 7mm;
  padding: 4mm 5mm;
  border-radius: 3mm;
  background: var(--ground);
}

.receipt-note p + p {
  margin-block-start: 1mm;
}

.receipt-foot {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 10mm;
  margin-block-start: auto;
  padding-block-start: 10mm;
  font-size: 8pt;
}

.receipt-foot p {
  max-inline-size: 120mm;
}

.receipt-wordmark {
  color: var(--text);
  font: var(--weight-title) 11pt/1 var(--font-display);
  white-space: nowrap;
}

.receipt-wordmark span {
  color: var(--accent);
}

/* On a phone the sheet keeps its order and loses its print margins. Screen
 * only: A4's printable width is under the same breakpoint. */
@media screen and (max-width: 700px) {
  .receipt-sheet {
    min-block-size: 0;
    padding: 8mm 6mm;
  }

  .receipt-head,
  .receipt-parties {
    grid-template-columns: minmax(0, 1fr);
  }

  .receipt-number {
    text-align: start;
  }
}

/* The wallet's cards stand in a tile grid, which publishes no corner radius
 * to its tiles, so each states the control radius its surface rounds to. */
.wallet-place {
  --surface-elevation-radius: var(--control-radius);
  min-inline-size: 0;
}

.wallet-place-photo {
  aspect-ratio: 16 / 9;
}

.wallet-place-body {
  padding: calc(var(--increment) * 5) calc(var(--increment) * 6) calc(var(--increment) * 6);
}

.wallet-place-body header {
  display: grid;
  gap: calc(var(--increment) * 1.5);
}

.wallet-place-body header > * {
  margin: 0;
}

/* The tally: each serving a token, filled while it is there to have and an
 * outline once had, so a set read at a glance says what is left of it. */

.tally-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--increment) * 4);
}

.tally-tokens {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: calc(var(--increment) * 1.5);
}

.tally-token {
  inline-size: calc(var(--increment) * 4);
  block-size: calc(var(--increment) * 4);
  border-radius: 50%;
  background: var(--accent-strong);
}

.tally-token-had {
  background: transparent;
  box-shadow: inset 0 0 0 var(--border-width-thin) var(--text-disabled);
}

.wallet-place-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--increment) * 3);
  padding-block-start: calc(var(--increment) * 4);
  border-block-start: var(--border-width-hairline) solid var(--line);
}

/* A counter card: something to hold up. White, the code and its symbol as
 * large as the card allows, everything else small; read by someone across a
 * counter and scanned by a phone camera. */
.counter-card {
  padding: calc(var(--increment) * 6);
  border-radius: var(--control-radius);
  background: var(--surface);
  box-shadow: var(--shadow-contact), var(--shadow-ambient);
  text-align: center;
}

.counter-card-qr {
  inline-size: min(100%, calc(var(--increment) * 52));
  color: var(--text);
}

.counter-card-qr .qr {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.counter-card-code {
  font-family: var(--font-mono);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Giving the card on: a row among the card's own, folding open into the
 * ways to send the code. */
.counter-give {
  justify-self: stretch;
  text-align: start;
}

/* In a dialog the counter cards of one place stand one under another on
 * the dialog's own white, needing no lift of their own. */

.counter-stack > .counter-card {
  padding-inline: 0;
  box-shadow: none;
}

.counter-stack > .counter-card + .counter-card {
  padding-block-start: calc(var(--increment) * 8);
  border-block-start: var(--border-width-hairline) solid var(--line);
  border-radius: 0;
}

/* The used-up list's rows carry the photograph small in the date's column. */
.wallet-pick {
  grid-template-columns: calc(var(--increment) * 12) minmax(0, 1fr) auto;
}

.wallet-pick-photo {
  inline-size: calc(var(--increment) * 12);
  block-size: calc(var(--increment) * 12);
  border-radius: calc(var(--increment) * 3);
}

.wallet-spent .wallet-pick-photo {
  filter: grayscale(1);
  opacity: 0.6;
}

/* The purchase history: years, each opening with its money as figures and
 * the year's two actions, then its receipts under quiet month labels. */

.receipt-year-head {
  padding-block-end: calc(var(--increment) * 6);
  border-block-end: var(--border-width-hairline) solid var(--line);
}

.receipt-year-sums {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--increment) * 4) calc(var(--increment) * 10);
  margin: 0;
}

.receipt-year-sums div {
  display: grid;
  gap: var(--increment);
}

.receipt-year-sums dt {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.receipt-year-sums dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Presses only the runtime answers: printing, closing a surface (without it a
   dialog's summary closes the disclosure), and stepping the calendar's
   months. Without the runtime each would do nothing. */
:root:not([data-rt-js]) :is([data-print], [data-surface-close], [data-calendar-step]) {
  display: none;
}

.receipt-year-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--increment) * 3) calc(var(--increment) * 8);
}

/* Receipts side by side at their own measure, the narrow slip a receipt is,
 * each as tall as it is: a row does not stretch its papers to the tallest. */
.receipt-papers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--increment) * 80)), 1fr));
  align-items: start;
  gap: calc(var(--increment) * 4);
}

/* A receipt: what and when at its head, the purchase's lines and total, and
 * the seller and the document's numbers set small at its foot behind a
 * torn-paper rule. */
.receipt-paper {
  position: relative;
  padding: calc(var(--increment) * 5) calc(var(--increment) * 6) calc(var(--increment) * 6);
  border-radius: calc(var(--increment) * 2);
  background: var(--surface);
  box-shadow: var(--shadow-contact);
  break-inside: avoid;
}

/* The head: where, with the day it was bought at the far side as the
 * figure the month's receipts are ordered by; under it what was bought. */
.receipt-paper-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--increment) calc(var(--increment) * 3);
}

.receipt-paper-head > :not(h4, .receipt-paper-day) {
  grid-column: 1 / -1;
}

.receipt-paper-day {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-variant-numeric: tabular-nums;
}

.receipt-paper-head > * {
  margin: 0;
}

.receipt-paper-head a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .receipt-paper-head a:hover {
    text-decoration: underline;
  }
}

.receipt-paper-lines {
  font-variant-numeric: tabular-nums;
}

.receipt-paper-foot {
  display: grid;
  gap: calc(var(--increment) / 2);
  padding-block-start: calc(var(--increment) * 4);
  border-block-start: var(--border-width-hairline) dashed var(--line);
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* A cancelled receipt keeps its lines, set back, under a stamp saying so
 * and what came back. */
.receipt-paper-void .receipt-paper-lines {
  opacity: 0.45;
}

.receipt-stamp {
  display: grid;
  justify-items: start;
  gap: calc(var(--increment) / 2);
  margin: 0;
  padding: calc(var(--increment) * 2) calc(var(--increment) * 3);
  border: var(--border-width-thin) solid var(--availability-ink);
  border-radius: calc(var(--increment) * 1.5);
  color: var(--availability-ink);
  font-weight: var(--weight-medium);
  justify-self: start;
  rotate: -2deg;
}

/* Finland's paper. The page's margins are set here once, so a browser that
 * ignores them applies its own instead and the two never stack. */
@page {
  size: A4;
  margin: 12mm 14mm;
}

@media print {
  .site-header,
  .site-footer,
  .receipt-year-actions,
  .receipt-document-actions {
    display: none;
  }

  /* On paper the page's own margins frame the document, so it spans the
   * whole printable width rather than the screen's content column. */
  .receipt-document.content {
    grid-column: var(--bleed);
  }

  /* The sheet's height is not forced on paper: a forced A4 inside the page
   * margins spills onto a second page. The footer follows the content. */
  .receipt-sheet {
    justify-self: stretch;
    inline-size: auto;
    min-block-size: 0;
    padding: 0;
    box-shadow: none;
  }

  .receipt-foot {
    margin-block-start: 14mm;
  }

  .receipt-note {
    print-color-adjust: exact;
  }

  /* Printing a year prints that year alone. */
  [data-rt-printing] .receipt-year:not([data-rt-printing-this]),
  [data-rt-printing] .yours-page > h1 {
    display: none;
  }

  .receipt-paper {
    box-shadow: none;
    border: var(--border-width-hairline) solid var(--line);
  }
}

/* Venue introduction and compact fact summary. */
.venue-short-description {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.venue-summary {
  position: relative;
}

.venue-summary::before,
.venue-summary::after {
  content: "";
  position: absolute;
  grid-column: var(--content);
  inset-inline: 0;
  block-size: var(--border-width-hairline);
  background: var(--line);
}

.venue-summary::before {
  inset-block-start: 0;
}

.venue-summary::after {
  inset-block-end: 0;
}

.venue-summary-metrics,
.venue-summary-features {
  align-self: center;
}

.venue-summary dd {
  margin-inline: 0;
}

.venue-summary-metric,
.venue-summary-feature-copy {
  overflow-wrap: anywhere;
}

/* What the seller wrote about the space, in their own words. */
.venue-description,
.venue-summary-feature-copy {
  color: var(--text-prose);
  mix-blend-mode: var(--text-secondary-blend);
}

.venue-summary-metric dt {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.venue-summary-metric dd {
  font-weight: var(--weight-medium);
}

/* Venue amenities, whether a seller grouped them or containment did. */
.venue-fact-catalogue {
  position: relative;
}

.venue-fact-catalogue::before,
.venue-catalogue-section + .venue-catalogue-section::before {
  content: "";
  position: absolute;
  grid-column: var(--content);
  inset-inline: 0;
  inset-block-start: 0;
  block-size: var(--border-width-hairline);
  background: var(--line);
}

.venue-fact-catalogue ul {
  padding: 0;
  list-style: none;
}

.venue-catalogue-section + .venue-catalogue-section {
  position: relative;
  padding-block-start: calc(var(--increment) * 8);
}

.venue-catalogue-heading {
  align-self: start;
}

.venue-catalogue-heading h2 {
  font-weight: var(--weight-medium);
}

.venue-catalogue-description,
.venue-fact-value,
.venue-catalogue-group h3,
.venue-catalogue-group-meta {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.venue-catalogue-group h3 {
  overflow-wrap: anywhere;
}

.venue-catalogue-group-meta {
  font-weight: var(--weight-regular);
}

.venue-catalogue-item,
.venue-fact-value {
  overflow-wrap: anywhere;
}

/* Inline actions carry only their text and direction; their containing
 * component owns row placement and surrounding whitespace. */
.text-button {
  display: inline-grid;
  inline-size: max-content;
  align-content: start;
  align-items: center;
  padding: 0;
  border: 0;
  color: var(--accent-strong);
  background: transparent;
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.text-button-next {
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: calc(var(--increment) * 2);
  padding-inline-end: calc(var(--increment) / 2);
}

.text-button-next::after {
  content: "";
  inline-size: calc(var(--increment) * 1.5);
  block-size: calc(var(--increment) * 1.5);
  border-block-start: var(--border-width-thin) solid currentColor;
  border-inline-end: var(--border-width-thin) solid currentColor;
  transform: rotate(45deg);
}

.text-button:focus-visible {
  outline: var(--focus-ring-width) solid var(--text);
  outline-offset: 3px;
}

@media (hover: hover) {
  .text-button:hover {
    color: color-mix(in oklch, var(--accent-strong), var(--text) 18%);
  }
}

/* Sectioned pages. The generated stylesheet owns the master/detail split,
 * its narrow exclusive state, and every row gap. This layer supplies the
 * navigation's reading hierarchy and the controls' material treatment. */
.section-navigation-title,
.section-pane-title {
  margin: 0;
  overflow-wrap: anywhere;
}

.section-navigation-title {
  font-size: var(--text-title);
  line-height: var(--leading-title);
  font-weight: var(--weight-title);
}

.section-pane-title {
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
}

.section-navigation-list {
  border-block-start: var(--border-width-hairline) solid var(--line);
}

.section-navigation-item {
  min-block-size: calc(var(--increment) * 15);
  border-block-end: var(--border-width-hairline) solid var(--line);
  color: var(--text);
  text-decoration: none;
}

.section-navigation-item-name {
  overflow-wrap: anywhere;
}

.section-navigation-item-name .icon {
  inline-size: calc(var(--increment) * 6);
  block-size: calc(var(--increment) * 6);
}

.section-navigation-item > .icon {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
}

.section-navigation-list:has([aria-current]) .section-navigation-item {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.section-navigation-list .section-navigation-item[aria-current="page"] {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.back-link {
  inline-size: max-content;
  max-inline-size: 100%;
  min-block-size: var(--minimum-target-size);
  align-self: flex-start;
  margin-inline-start: calc(-1 * var(--increment));
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  text-decoration: none;
}

@media (hover: hover) {
  .section-navigation-item:hover,
  .back-link:hover {
    color: var(--text);
  }
}

/* Account settings. Cards remain the modal triggers, so the resting and
 * measured surfaces are one element rather than a button placed inside a
 * decorative card. Their widths and wrapping come from the generated tile
 * grid sourced from the pane's actual allocation. */
.card-dialog {
  inline-size: 100%;
}

.edit-card {
  display: grid;
  inline-size: 100%;
  min-block-size: calc(var(--increment) * 20);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: calc(var(--increment) * 3);
  row-gap: calc(var(--increment) * 2);
  padding: calc(var(--increment) * 4);
  border: var(--border-width-hairline) solid var(--control-line);
  border-radius: var(--control-radius);
  color: var(--text);
  background: var(--surface);
  font-weight: var(--weight-regular);
  white-space: normal;
  text-align: start;
}

.edit-card-name {
  grid-column: 1;
  grid-row: 1;
}

.edit-card-value {
  grid-column: 1;
  grid-row: 2;
  overflow-wrap: anywhere;
}

.edit-card-mark {
  display: grid;
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
  grid-column: 2;
  grid-row: 1 / -1;
  place-items: center;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.edit-card-mark .icon {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
}

.edit-card-unset {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
}

/* A picture card: the picture across the top, its name under it. */
.edit-card-picture {
  grid-column: 1 / -1;
  grid-row: 1;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  border-radius: calc(var(--control-radius) - var(--increment) * 2);
  object-fit: cover;
}

.edit-card:has(.edit-card-picture) :is(.edit-card-value, .edit-card-mark) {
  grid-row: 2;
}

.admin-contents .label {
  display: block;
}

.admin-photo-preview {
  display: block;
  inline-size: 100%;
  border-radius: var(--control-radius);
}

/* A card that adds reads as the press it is: its words in the accent, no
 * label above them. */
.edit-card-adds {
  color: var(--accent-strong);
  font-weight: var(--weight-medium);
}

.edit-card:has(.edit-card-adds) {
  border-style: dashed;
  background: transparent;
}

.edit-card:has(.edit-card-adds) .edit-card-mark {
  color: var(--accent-strong);
}

/* A heading over a run of cards in a pane, in the admin's subtitle register. */
.edit-heading {
  margin: 0;
  padding-block-start: calc(var(--increment) * 4);
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
}

.edit-card:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: var(--focus-ring-offset);
}

@media (hover: hover) {
  .edit-card:hover {
    border-color: var(--control-line-hover);
  }

  .edit-card:hover .edit-card-mark {
    color: var(--accent-strong);
  }
}

/* A one-answer question's answer, stated where a control would stand. */
.field-fixed {
  color: var(--text);
}

/* Shared forms. The generated flex rules own block rhythm for forms, fields,
 * and field groups; controls below own only their intrinsic box and state. */
fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field-label {
  padding-inline: var(--increment);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.field-note,
.notice {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.field > .field-note,
.form-field-group > .field-note {
  padding-inline: var(--increment);
}

/* A note can carry an address, which has nowhere to break. */
.field-note {
  overflow-wrap: anywhere;
}

.form-error,
.status {
  color: var(--attention);
  font-weight: var(--weight-medium);
}

.status-line {
  display: inline-flex;
  min-inline-size: 0;
  align-items: center;
  gap: calc(var(--increment) * 2);
}

.status-mark {
  display: grid;
  inline-size: calc(var(--increment) * 4);
  block-size: calc(var(--increment) * 4);
  flex: none;
  place-items: center;
  border-radius: 50%;
  color: var(--surface);
  background: var(--text-muted);
}

.status-mark .icon {
  inline-size: calc(var(--increment) * 3);
  block-size: calc(var(--increment) * 3);
}

.status-mark-positive {
  background: var(--text);
}

.status-mark-ended {
  background: var(--text-disabled);
}

.status-mark-attention {
  background: var(--attention);
}

.status-label {
  min-inline-size: 0;
}

.form :is(input:not([type="hidden"], [type="radio"], [type="checkbox"]), select, textarea) {
  inline-size: 100%;
  min-block-size: calc(var(--increment) * 13);
  padding-inline: calc(var(--increment) * 4);
  border: var(--border-width-hairline) solid var(--control-line);
  border-radius: var(--control-radius);
  outline: 3px solid transparent;
  outline-offset: 2px;
  background: var(--control-fill);
  box-shadow: var(--control-recess);
  caret-color: var(--accent-strong);
  appearance: none;
}

.form textarea {
  min-block-size: calc(var(--increment) * 28);
  padding-block: calc(var(--increment) * 3);
  resize: vertical;
}

.form :is(input, textarea)::placeholder {
  color: var(--text);
  opacity: 0.5;
}

.form :is(input, select, textarea):focus-visible {
  border-color: var(--control-focus-line);
  outline-color: var(--control-focus-halo);
  box-shadow: var(--control-recess);
}

@media (hover: hover) {
  .form
    :is(input:not([type="hidden"], [type="radio"], [type="checkbox"]), select, textarea):hover:not(:focus) {
    border-color: var(--control-line-hover);
  }
}

.select-control {
  position: relative;
  display: block;
}

.select-control select {
  padding-inline-end: calc(var(--increment) * 10);
}

.select-control > .icon {
  position: absolute;
  inset-inline-end: calc(var(--increment) * 4);
  inset-block-start: 50%;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  translate: 0 -50%;
  pointer-events: none;
}

.field-row,
.tick-row,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--increment) * 3);
}

.field-row > * {
  flex: 1 1 calc(var(--increment) * 28);
}

.field-tick {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: calc(var(--increment) * 3);
  align-items: start;
}

.field-tick .field-note {
  grid-column: 2;
}

.form input:is([type="radio"], [type="checkbox"]) {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
  flex: none;
  margin: calc(var(--increment) / 2) 0;
  border: var(--border-width-thin) solid var(--text-muted);
  background: var(--surface);
  appearance: none;
}

.form input[type="radio"] {
  border-radius: 50%;
}

.form input[type="checkbox"] {
  border-radius: calc(var(--increment) * 1.25);
}

.form input[type="radio"]:checked {
  border-color: var(--text);
  box-shadow: inset 0 0 0 calc(var(--increment) * 1.25) var(--text);
}

.form input[type="checkbox"]:checked {
  border-color: var(--text);
  background: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

.form-section-title {
  padding: 0;
}

.form-fold-title {
  display: flex;
  align-items: center;
  gap: calc(var(--increment) * 2);
  cursor: pointer;
}

.form-actions {
  justify-content: flex-end;
}

/* Each of a challenge's presses spans the question it answers, on a row of
 * its own in the order the form declares them, so the alternative stands
 * under the answer rather than beside it (Tomi 2026-10-15). */
.form-challenge .form-actions {
  flex-direction: column;
  align-items: stretch;
}

.admin-section .form:not(.form-action-row, .form-media-action) {
  inline-size: 100%;
  max-inline-size: 66ch;
}

.form-inline-creator,
.form-action-row {
  flex-flow: row wrap;
}

.form-inline-creator {
  align-items: flex-end;
  gap: calc(var(--increment) * 3);
}

.form-inline-creator > .field {
  flex: 1 1 calc(var(--increment) * 36);
}

.form-inline-creator > .field-tick {
  flex: 1 1 100%;
}

.form-inline-creator > .form-actions {
  flex: none;
}

.form-action-row {
  min-block-size: calc(var(--increment) * 13);
  align-items: flex-end;
  gap: calc(var(--increment) * 3);
  padding-block: calc(var(--increment) * 3);
  border-block-end: var(--border-width-hairline) solid var(--line);
}

.form-action-row > .field {
  flex: 1 1 calc(var(--increment) * 32);
}

.form-action-row > :first-child:not(.field, .form-actions) {
  flex: 1 1 calc(var(--increment) * 28);
  align-self: center;
}

.form-action-row > .form-actions {
  flex: none;
  margin-inline-start: auto;
}

.form-media-action {
  inline-size: calc(var(--increment) * 40);
  gap: calc(var(--increment) * 2);
}

.form-media-action > .form-actions {
  justify-content: center;
}

/* A press, wherever its form sets it. */
:is(.form-submit, .form-cancel) {
  min-block-size: var(--form-action-block-size, var(--minimum-target-size));
  padding-inline: var(--form-action-padding-inline, calc(var(--increment) * 4));
  border: 0;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.form-submit-primary {
  --form-action-block-size: calc(var(--increment) * 12);
  --form-action-padding-inline: calc(var(--increment) * 6);

  color: var(--surface);
  background: var(--text);
}

.form-submit-secondary {
  color: var(--text);
  background: var(--interactive-wash);
}

/* What a press destroys is said in the attention colour, outlined rather
 * than filled, so it never reads as the editor's ordinary commit. */
.form-submit-dangerous {
  color: var(--attention);
  background: transparent;
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--attention);
}

.form-cancel {
  --form-action-padding-inline: calc(var(--increment) * 3);

  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  background: transparent;
}

.form-submit-quiet {
  --form-action-padding-inline: calc(var(--increment) * 2);

  color: var(--accent-strong);
  background: transparent;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.form input[type="file"] {
  padding: calc(var(--increment) * 1.5);
}

.form input[type="file"]::file-selector-button {
  min-block-size: calc(var(--increment) * 9);
  margin-inline-end: calc(var(--increment) * 3);
  padding-inline: calc(var(--increment) * 3);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--text);
  background: var(--interactive-wash);
  font: inherit;
  cursor: pointer;
}

:is(.form-submit, .form-cancel):focus-visible {
  outline: var(--focus-ring-width) solid var(--text);
  outline-offset: var(--focus-ring-offset);
}

:is(.form-submit, .form-cancel):disabled {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
  background: var(--interactive-wash);
  cursor: not-allowed;
}

@media (hover: hover) {
  .form-submit-primary:hover {
    background: var(--text-hover);
  }

  .form-cancel:hover,
  .form-submit-secondary:hover {
    color: var(--text);
    background: var(--interactive-wash);
  }
}

/* A front page headed by the logotype over a map of the brand's spaces: the
 * map is the page's ground, sharp round the logotype and out of focus beyond
 * it, and a pin stands where each space is. The art is the theme's
 * (`static/themes/<key>/map-*`); the pins are placed by `pages::home` from
 * the spaces' coordinates, in CSS pixels from the page's top centre. Ported
 * from `prototypes/work/front-map/` (Tomi 2026-10-13). */
body {
  --map-ground-layers: var(--map-ground-sharp), var(--map-ground);
}

/* The pins are positioned against the masthead rather than the page, so a
 * page travel, which moves the masthead with a transform of its own, moves
 * them with it. The art's anchor is the page's top, and the masthead's top
 * stands `--mark-top` below it. */
.map-masthead {
  --mark-top: 136px;

  position: relative;
  display: grid;
  justify-items: center;
  row-gap: calc(var(--increment) * 7);
  /* The logotype's top at 136px, where the art was drawn round it. */
  margin-block: calc(var(--increment) * 15) calc(var(--increment) * 12);
  text-align: center;
}

.map-masthead-mark {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(48px, 10vw, 76px);
  line-height: 0;
}

/* The line is part of the lockup: tracked capitals in the logotype's face,
 * close under it, read as the mark's own line rather than a paragraph. */
.map-masthead-tagline {
  position: relative;
  z-index: 1;
  max-inline-size: 22em;
  margin: 0;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  line-height: 20px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-wrap: balance;
}

.map-masthead-map {
  position: absolute;
  z-index: 1;
  inset-block-start: calc(-1 * var(--mark-top));
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
}

.map-pins {
  margin: 0;
  padding: 0;
  list-style: none;
}

.map-pin {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  display: block;
  inline-size: 0;
  block-size: 0;
}

.map-pin a {
  --dot: 12px;

  position: absolute;
  display: grid;
  justify-items: center;
  row-gap: calc(var(--increment) * 1.5);
  translate: -50% calc(-1 * var(--dot) / 2);
  color: var(--map-pin-name);
  text-decoration: none;
  white-space: nowrap;
}

.map-pin a::before {
  content: "";
  inline-size: var(--dot);
  block-size: var(--dot);
  border-radius: 50%;
  background: var(--mark-fill);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--map-top) 85%, transparent),
    0 0 14px 2px var(--map-pin-glow);
}

.map-pin-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  line-height: 16px;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.8), 0 0 10px rgb(0 0 0 / 0.6);
}

/* A name that would cover the logotype, its line or another name stands
 * above its dot. */
.map-pin[data-label="above"] a {
  translate: -50% calc(-100% + var(--dot) / 2);
}

.map-pin[data-label="above"] a::before {
  order: 1;
}

@media (hover: hover) {
  .map-pin a:hover .map-pin-name {
    color: var(--accent);
  }
}

.map-pin a:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Narrower than the wide spread, the map moves into the masthead's flow at a
 * smaller zoom, so every space fits across a phone, and the line leaves the
 * logotype to stand under the map: logotype, the pins' band, line. The map is
 * one element running from above the logotype to below the line, behind
 * both, with a round sharp area between them, and it follows the logotype
 * wherever the logotype lands, which the page's ground cannot. The ground
 * under it is the wide map out of focus.
 *
 * The strip's art is 1024 by 532: 90 of overscan, the tallest logotype
 * (101.6 at 76px) and a 28px gap, so the pins' band starts 220 down; the
 * band, 130; the gap, the line's two 20px lines and 24 of air, 92; 90 of
 * overscan. A smaller logotype starts the band higher, so the element pads
 * by the logotype's real height and shifts the art and the pins up by what
 * it saves. */
@media (max-width: 1023.98px) {
  body {
    --map-ground-layers: var(--map-ground);
  }

  .map-masthead {
    --mark-height: calc(clamp(48px, 10vw, 76px) * 1.3373);
  }

  .map-masthead-tagline {
    order: 2;
  }

  .map-masthead-map {
    --pad: calc(var(--mark-height) + 28px + 90px);
    --shift: calc(var(--pad) - 220px);

    order: 1;
    position: relative;
    z-index: 0;
    inset: auto;
    inline-size: 1024px;
    block-size: calc(var(--pad) + 312px);
    margin-block: calc(-1 * var(--pad)) -182px;
    margin-inline: calc(50% - 512px);
    background: var(--map-strip-image) calc(50% + var(--map-strip-x))
      calc(var(--shift) + var(--map-strip-y)) / 500px 500px no-repeat;
    /* The circle reaches above the page's top on a phone, and the top rows
     * must stay the one flat colour, so it is clear for the page's first
     * 28px and fades in over the next 40. */
    --page-top-here: calc(90px - var(--mark-top));
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent calc(var(--page-top-here) + 28px),
      black calc(var(--page-top-here) + 68px)
    );
    mask-image: linear-gradient(
      to bottom,
      transparent calc(var(--page-top-here) + 28px),
      black calc(var(--page-top-here) + 68px)
    );
  }

  .map-pins {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
  }

  .map-pin {
    inset-inline-start: var(--strip-x);
    inset-block-start: calc(var(--shift) + var(--strip-y));
  }

  .map-pin-name {
    font-size: 12px;
  }

  .map-pin[data-label="above"] a {
    translate: -50% calc(-1 * var(--dot) / 2);
  }

  .map-pin[data-label="above"] a::before {
    order: 0;
  }

  .map-pin[data-strip-label="above"] a {
    translate: -50% calc(-100% + var(--dot) / 2);
  }

  .map-pin[data-strip-label="above"] a::before {
    order: 1;
  }
}

/* A collection one feature a row (the layout places the photograph and the
 * copy, mirrored on every other row): a card on the page, its photograph
 * running to the card's own edges, and the seller's prose beside it with the
 * prices gathered into one quiet line at the foot. The card's face is a
 * sibling under the content, as the header's glass is: on the row itself it
 * would flatten the photograph into its own backdrop. */
.feature-row {
  --surface-elevation-radius: calc(var(--radius) - 8px);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
}

.feature-row-surface {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.feature-row-media,
.feature-row-copy {
  position: relative;
  z-index: 1;
}

/* The edge light runs round the photograph's corners too. */
.feature-row.surface-elevation-edge-light::before {
  z-index: 2;
}

/* Three by two where the photograph stands over the copy; beside it, the
 * row's height, which is the taller of that and what the prose needs. */
.feature-row-media {
  align-self: stretch;
  aspect-ratio: 3 / 2;
}

/* The column is a subgrid of the page's tracks, which an image placed in it
 * would take the first of; it covers the column instead, whatever height the
 * row came to. */
.feature-row-image {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale calc(2 * var(--interaction-duration)) ease-out;
}

.feature-row-body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--increment) * 5);
  padding: calc(var(--increment) * 7) calc(var(--increment) * 2) calc(var(--increment) * 5);
}

.feature-row-head {
  display: flex;
  flex-direction: column;
  gap: calc(var(--increment) * 3);
}

/* A kicker over the name: tracked capitals at caption size, read as a label
 * rather than as a line of text. */
.feature-row-place {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.4em;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature-row-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.feature-row-story {
  max-inline-size: 62ch;
  color: var(--text-prose);
  mix-blend-mode: var(--text-secondary-blend);
  text-wrap: pretty;
}

.feature-row-foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--increment) * 2) calc(var(--increment) * 6);
  margin-block-start: auto;
  padding-block-start: calc(var(--increment) * 4);
  border-block-start: var(--border-width-hairline) solid var(--line);
}

.feature-row-terms {
  flex: 1 1 0;
  min-inline-size: min(100%, 10em);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--increment) * 1) calc(var(--increment) * 5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-row-term-name {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  white-space: pre;
}

.feature-row-terms strong,
.feature-row-go {
  color: var(--accent-strong);
  font-weight: var(--weight-semibold);
}

.feature-row-go {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--increment) * 1.5);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.feature-row-go .icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  transition: translate var(--interaction-duration) ease-out;
}

.feature-row:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: calc(var(--increment) * 1);
}

@media (hover: hover) {
  .feature-row:hover .feature-row-image {
    scale: 1.03;
  }

  .feature-row:hover .feature-row-go .icon {
    translate: var(--increment) 0;
  }
}

/* A page on a ground of its own, where a theme gives pages one: its layers
 * (`--ground-layers`, written per page on the body by `pages::layout`: a
 * photograph, or the theme's map) shaded toward black, its first rows one flat colour and
 * its last another, with a fade into that last colour fixed to the viewport's
 * bottom edge. Only the body's background touches the viewport's top: Safari
 * tints its toolbar from the body unless an element touches the top, and a
 * fixed element there is taken for a header whose colour the toolbar takes
 * (Tomi's diagnosis in Safari, 2026-10-13). The stops are an eased curve. */
body[data-ground] {
  --page-top: color-mix(in srgb, var(--ground-top), black var(--ground-shade));
  --page-bottom: color-mix(in srgb, var(--ground-bottom), black var(--ground-shade));
  --page-bottom-fade: min(320px, 45svh);
  --page-bottom-edge: linear-gradient(
    to top,
    var(--page-bottom) 0,
    color-mix(in srgb, var(--page-bottom) 74%, transparent) calc(var(--page-bottom-fade) * 0.19),
    color-mix(in srgb, var(--page-bottom) 54%, transparent) calc(var(--page-bottom-fade) * 0.34),
    color-mix(in srgb, var(--page-bottom) 38%, transparent) calc(var(--page-bottom-fade) * 0.47),
    color-mix(in srgb, var(--page-bottom) 28%, transparent) calc(var(--page-bottom-fade) * 0.565),
    color-mix(in srgb, var(--page-bottom) 19%, transparent) calc(var(--page-bottom-fade) * 0.65),
    color-mix(in srgb, var(--page-bottom) 13%, transparent) calc(var(--page-bottom-fade) * 0.73),
    color-mix(in srgb, var(--page-bottom) 7.5%, transparent) calc(var(--page-bottom-fade) * 0.802),
    color-mix(in srgb, var(--page-bottom) 4%, transparent) calc(var(--page-bottom-fade) * 0.861),
    color-mix(in srgb, var(--page-bottom) 2%, transparent) calc(var(--page-bottom-fade) * 0.91),
    color-mix(in srgb, var(--page-bottom) 0.8%, transparent) calc(var(--page-bottom-fade) * 0.952),
    transparent var(--page-bottom-fade)
  );

  background:
    var(--page-bottom-edge) fixed,
    linear-gradient(
        color-mix(in srgb, black var(--ground-shade), transparent),
        color-mix(in srgb, black var(--ground-shade), transparent)
      )
      fixed,
    var(--ground-layers),
    var(--page-top);
}

/* Overscroll is painted in the root's one colour, never a gradient, so it
 * follows whichever end the page is nearer (`static/enhance.js` marks it). */
body[data-ground][data-rt-nearer-bottom] {
  background-color: var(--page-bottom);
}

body[data-ground] :is(.backdrop, [data-part="page"]) {
  background: transparent;
}

/* A drawing among the photographs, as the theme draws one. */
.drawing {
  filter: var(--drawing-filter);
}

/* A theme's logotype, drawn from its layers. Sized by its font size, so each
 * place that shows it says only how large. */
.brand-mark {
  position: relative;
  display: inline-block;
  inline-size: var(--mark-inline-size);
  block-size: var(--mark-block-size);
  vertical-align: middle;
}

.brand-mark-fill,
.brand-mark-rim {
  position: absolute;
  inset: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.brand-mark-fill {
  background: var(--mark-fill);
  -webkit-mask-image: var(--mark-fill-mask);
  mask-image: var(--mark-fill-mask);
}

.brand-mark-rim {
  background: var(--mark-rim);
  -webkit-mask-image: var(--mark-edge-mask);
  mask-image: var(--mark-edge-mask);
}

.brand-mark-shadow {
  position: absolute;
  inset: calc(-1 * var(--mark-shadow-overscan));
  background: var(--mark-shadow-image) 0 0 / 100% 100% no-repeat;
}

/* The logotype as the header: small and centred, the way home, with the
 * account at the row's end. */
.site-mark-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "pages mark account";
  align-items: center;
  column-gap: calc(var(--increment) * 4);
}

/* The site's own pages across from the account; on a phone, on a line of
 * their own under the logotype. */
.site-mark-row > .portal-nav {
  grid-area: pages;
  justify-self: start;
  max-inline-size: 100%;
}

@media (max-width: 687.98px) {
  .site-mark-row {
    grid-template-areas: ". mark account" "pages pages pages";
    row-gap: calc(var(--increment) * 3);
  }
}

.site-mark-home {
  grid-area: mark;
  display: block;
  border-radius: calc(var(--increment) * 2);
  font-size: 34px;
  line-height: 0;
}

.site-mark-home:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: calc(var(--increment) * 2);
}

.site-mark-actions {
  grid-area: account;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--increment);
  color: var(--text);
  font-weight: var(--weight-medium);
}

/* A brand's own footer: centred under a short rule, its logotype small and
 * in its body alone (a ring at this size is most of the letter), then the
 * documents, and last and smallest the language on a line of its own over
 * the owner and the platform. */
.brand-footer-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--increment) * 6);
  padding-block-end: calc(var(--increment) * 6);
  text-align: center;
}

.brand-footer-rule {
  inline-size: calc(var(--increment) * 12);
  block-size: var(--border-width-hairline);
  margin-block-end: calc(var(--increment) * 6);
  background: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
}

.brand-footer-home {
  display: block;
  font-size: 30px;
  line-height: 0;
}

.brand-footer-home :is(.brand-mark-rim, .brand-mark-shadow) {
  display: none;
}

.brand-footer-meta p {
  margin: 0;
}

.brand-footer-links,
.brand-footer-meta,
.brand-footer-locales {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--increment) * 1) calc(var(--increment) * 6);
}

.brand-footer-meta {
  flex-direction: column;
  align-items: center;
  row-gap: calc(var(--increment) * 3);
}

.brand-footer-locales {
  gap: calc(var(--increment) * 3);
}

.brand-footer-locales .site-footer-language-separator {
  display: none;
}

.brand-footer-links {
  color: var(--text-prose);
  mix-blend-mode: var(--text-secondary-blend);
}

.brand-footer-meta {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
}

.brand-footer-locales [aria-current] {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.brand-footer a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .brand-footer a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }
}

/* A titled page: the heading, and under it the line saying what the page is
 * of or what to do next. */
.titled-page-header > * {
  margin-block: 0;
}

.titled-page :is(p, dd) a:not([class]) {
  color: var(--accent-strong);
}

.titled-page-lead {
  max-inline-size: 66ch;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-family: var(--font-body);
}

/* Written text at a reading measure, its tables at the column's whole width.
 * 66ch is a character count, not a pixel width (`notes/visual.md`). */
.document-body > * {
  max-inline-size: 66ch;
}

.document-body > :is(h2, h3, h4):not(:first-child) {
  margin-block-start: calc(var(--increment) * 6);
}

.document-body > h2 {
  font-size: var(--text-title);
  line-height: var(--leading-title);
}

.document-body > :is(h3, h4) {
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
}

.document-body :is(ul, ol) {
  display: grid;
  gap: calc(var(--increment) * 2);
  padding-inline-start: calc(var(--increment) * 6);
}

.document-body a {
  color: var(--accent-strong);
}

/* A table wider than the column scrolls inside itself, and says so: the
 * scroll-attached layers cast a shade at whichever edge has more, and the
 * content-attached ones cover it once that edge is reached. */
.document-body > table {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  background:
    linear-gradient(to right, var(--ground), transparent) left / calc(var(--increment) * 8) 100%
      no-repeat local,
    linear-gradient(to left, var(--ground), transparent) right / calc(var(--increment) * 8) 100%
      no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--text) 14%, transparent), transparent)
      left / calc(var(--increment) * 3) 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--text) 14%, transparent), transparent)
      right / calc(var(--increment) * 3) 100% no-repeat scroll;
}

.document-body :is(th, td) {
  padding: calc(var(--increment) * 2) calc(var(--increment) * 3);
  border-block-end: var(--border-width-hairline) solid var(--line);
  text-align: start;
  vertical-align: top;
}

.document-body :is(th, td):first-child {
  padding-inline-start: 0;
}

.document-body th {
  font-weight: var(--weight-medium);
}

/* Labelled facts, a row each: the label in its own column where the page has
 * room for two, over the values where it has not. */
.fact-list {
  container: fact-list / inline-size;
  margin: 0;
}

.fact-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: calc(var(--increment) * 1);
  padding-block: calc(var(--increment) * 4);
  border-block-end: var(--border-width-hairline) solid var(--line);
}

.fact-list-row:first-child {
  padding-block-start: 0;
}

.fact-list-label {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.fact-list-row dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.fact-list-row a {
  color: var(--accent-strong);
  text-decoration: none;
}

.fact-list-row a[href^="tel:"] {
  white-space: nowrap;
}

@container fact-list (min-width: 600px) {
  .fact-list-row {
    grid-template-columns: calc(var(--increment) * 52) minmax(0, 1fr);
    column-gap: calc(var(--increment) * 6);
  }

  .fact-list-row dd {
    grid-column: 2;
  }

  .fact-list-label {
    grid-row: 1;
  }
}

/* A portal's own pages: one line of links over the content, scrolling
 * sideways rather than wrapping (`notes/visual.md`). Which one is being read
 * is the page under it, so the row marks none. */
.portal-nav {
  display: flex;
  column-gap: calc(var(--increment) * 6);
  overflow-x: auto;
  scrollbar-width: none;
}

/* A placed page's grid has no gap of its own to keep the row off the title. */
.page-content > .content > .portal-nav {
  margin-block-end: calc(var(--increment) * 8);
}

.portal-nav::-webkit-scrollbar {
  display: none;
}

.portal-nav a {
  flex: none;
  padding-block: calc(var(--increment) * 2);
  color: var(--text);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

@media (hover: hover) {
  .portal-nav a:hover {
    color: var(--accent-strong);
  }
}

/* Organization administration. Rows preserve the established information
 * hierarchy; generated flex rules own their alignment and section rhythm. */
.admin-section :is(h2, h3, p, pre, table) {
  margin-block: 0;
}

.admin-section h2 {
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
}

.admin-section a:not(.admin-row, .link-row, .text-button, .back-link) {
  color: var(--accent-strong);
  text-decoration: none;
}

.admin-row {
  min-block-size: calc(var(--increment) * 13);
  flex-wrap: wrap;
  padding-block: calc(var(--increment) * 3);
  border-block-end: var(--border-width-hairline) solid var(--line);
  color: var(--text);
  text-decoration: none;
}

.admin-row-go {
  display: inline-grid;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.admin-row-go .icon {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
}

@media (hover: hover) {
  .admin-row:hover .admin-row-go {
    color: var(--accent-strong);
  }
}

.admin-row-side {
  flex: none;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.admin-photos {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--increment) * 3);
}

/* Rows in the admin, the plain ones and the grouped ones leading to a task,
 * read at one measure. */
.admin-rows,
.admin-section .link-rows {
  inline-size: 100%;
  max-inline-size: 72ch;
}

.admin-photo img,
.admin-photos .form img {
  display: block;
  inline-size: calc(var(--increment) * 40);
  block-size: calc(var(--increment) * 27);
  border-radius: var(--control-radius);
  object-fit: cover;
}

/* Figures aligned to read down a column: what each month brought in, how
 * often each page was read. The first column names the row. */
.figures {
  inline-size: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.figures :is(th, td) {
  padding: calc(var(--increment) * 2);
  border-block-end: var(--border-width-hairline) solid var(--line);
  text-align: end;
  white-space: nowrap;
}

.figures :is(th:first-child, thead th:first-child) {
  text-align: start;
  font-weight: var(--weight-regular);
}

.figures thead th {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
}

/* A table whose last column is what the others add up to. */
.figures.totalled td:last-child {
  font-weight: var(--weight-semibold);
}

/* A table with more columns than a phone has room for scrolls in its own
 * box, so the page around it keeps its width. */
.figures-scroll {
  inline-size: 100%;
  overflow-x: auto;
}

/* The statistics page: the period it covers, its two totals, the visits
 * drawn as bars on one baseline, and the readers' shares. */
.statistics-periods {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--increment) * 2);
  margin-block-end: calc(var(--increment) * 3);
}

.statistics-periods a {
  padding: var(--increment) calc(var(--increment) * 3);
  border: var(--border-width-hairline) solid var(--line);
  border-radius: var(--control-radius);
  color: var(--text);
  text-decoration: none;
}

.statistics-periods a[aria-current] {
  border-color: var(--accent-strong);
  background: var(--accent-wash);
}

.statistics-about {
  max-inline-size: 72ch;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.statistics-totals {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--increment) * 8);
  margin: 0;
}

.statistics-totals dt {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-size: var(--text-caption);
}

.statistics-totals dd {
  margin: 0;
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.statistics-figure {
  margin: 0;
}

.statistics-chart {
  display: block;
  inline-size: 100%;
  block-size: calc(var(--increment) * 30);
}

.statistics-bar {
  fill: var(--accent-strong);
}

.statistics-hit {
  fill: transparent;
}

@media (hover: hover) {
  g:hover > .statistics-bar {
    fill: var(--accent);
  }
}

.statistics-range {
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--increment);
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-size: var(--text-caption);
}

.statistics-baseline {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.statistics-audience {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--increment) * 8);
  margin: 0;
}

.statistics-audience dt {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-size: var(--text-caption);
}

.statistics-audience dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.statistics-audience dd span {
  font-weight: var(--weight-semibold);
}

.settlement {
  inline-size: 100%;
  border-collapse: collapse;
}

.settlement :is(th, td) {
  padding: calc(var(--increment) * 2);
  border-block-end: var(--border-width-hairline) solid var(--line);
  text-align: start;
}

/* Scoped modal surfaces share the booking sheet's channel vocabulary, but
 * own their readers. A dialog therefore cannot inherit a moving booking
 * sheet, and can be measured and animated without restyling the document
 * beneath it. The native details element remains the complete no-runtime
 * substrate: closed content is absent from focus and accessibility order, and
 * the fallback rules below leave an opened dialog inline. */
[data-modal] {
  --reads-endpoints: [data-modal-shell], [data-modal-trigger], [data-modal-content];
  --reads-p: [data-modal-shell], [data-modal-trigger], [data-modal-content];
  --reads-dy: [data-modal-shell];
  --reads-dc: [data-modal-shell];
  --p: 0;
  --dy: 0;
  --dc: 0;

  position: relative;
  inline-size: max-content;
  max-inline-size: 100%;
}

[data-modal] :is([data-modal-shell], [data-modal-trigger], [data-modal-content]) {
  --surface-width-collapsed: calc(var(--increment) * 24);
  --surface-width-expanded: calc(var(--increment) * 120);
  --surface-height-collapsed: var(--minimum-target-size);
  --surface-height-expanded: calc(var(--increment) * 100);
  --surface-left-collapsed: 0px;
  --surface-left-expanded: 0px;
  --surface-top-collapsed: 0px;
  --surface-top-expanded: 0px;
  --surface-drop: 8;
  --surface-rise: 0;
  --surface-lift: 0;
  --surface-radius-collapsed: calc(var(--increment) * 4);
  --surface-radius-expanded: var(--modal-expanded-radius, var(--radius));
  --surface-grow: 5;
  --surface-width-factor: calc(1 + var(--surface-progress) * (var(--surface-grow) - 1));
  --surface-expanded-scale: calc(var(--surface-width-factor) / var(--surface-grow));
}

[data-modal] .modal-shell {
  --surface-elevation-radius: var(--surface-radius);
  --surface-chrome: clamp(0, 2 * var(--p), 1);

  display: grid;
  inline-size: auto;
  block-size: auto;
  place-items: center;
  translate: 0 calc(var(--surface-pull-y) * 1px);
  scale: var(--surface-pull-scale);
}

[data-modal] .modal-shell.surface-elevation-edge-light::before {
  opacity: var(--surface-chrome);
}

[data-modal] .modal-shell[open] {
  inset-inline-start: var(--surface-left);
  inset-block-start: var(--surface-top);
  inline-size: var(--surface-width);
  block-size: var(--surface-height);
  overflow: clip;
}

[data-modal] .modal-collapsed {
  grid-area: 1 / 1;
  margin: 0;
  opacity: clamp(0, 1 - 2 * var(--p), 1);
  scale: var(--surface-width-factor);
  transform-origin: center;
  cursor: pointer;
}

/* Once the shell leaves flow, the trigger must retain its measured endpoint.
 * A percentage width here would otherwise resolve against the growing shell
 * and then be scaled by that same growth a second time. */
[data-modal] .modal-shell[open] .modal-collapsed {
  inline-size: var(--surface-width-collapsed);
  block-size: var(--surface-height-collapsed);
}

[data-modal] .modal-expanded {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: var(--surface-width-expanded);
  block-size: var(--surface-height-expanded);
  overflow: hidden;
  border-radius: var(--surface-radius-expanded);
  opacity: clamp(0, 2 * var(--p) - 1, 1);
  translate: -50% -50%;
  scale: var(--surface-expanded-scale);
  transform-origin: center;
  pointer-events: none;
}

[data-modal] .modal-shell[open] .modal-expanded {
  pointer-events: auto;
}

:root[data-rt-js] [data-modal] .modal-shell[open] .modal-collapsed {
  pointer-events: none;
}

[data-modal]:has(> .modal-shell[open])
  :is([data-modal-shell], [data-modal-trigger], [data-modal-content]) {
  --p: 1;
}

/* Dialogs are a summoned instance of the page topology. The generated inner
 * grid chooses its rung from the surface width; the runtime only places that
 * surface inside the viewport band and promotes it to the top layer. Its
 * content owns scrolling, and the shared sheet handoff owns edge pulls. */
[data-modal="dialog"] {
  --modal-edge: var(--grid-edge-track-width);
  --modal-expanded-radius: calc(var(--radius) - var(--grid-edge-track-width));
  --modal-width: calc(var(--increment) * 120);
  --modal-max-width: var(--grid-contained-max-inline-size);
  --modal-headroom: calc(var(--increment) * 22);
  --modal-rest: trigger;
  --modal-content-inset-inline: var(--grid-contained-content-inset-inline);
  --pull-size-down: -0.12;
  --pull-size-up: -0.12;
}

[data-modal="dialog"].modal-wide {
  --modal-width: calc(var(--increment) * 180);
}

@media (min-width: 768px) {
  [data-modal="dialog"] {
    --modal-rest: center;
  }
}

[data-modal="dialog"] .modal-shell::backdrop {
  display: none;
}

[data-modal="dialog"] .modal-shell {
  --surface-elevation-strength: var(--surface-chrome);
  --pull-t-down: min(
    1,
    max(0, (var(--surface-drop) - var(--pull-edge)) / var(--drag-limit))
  );
  /* Upward, the finger is followed one-for-one plus what the shrink retracts,
   * until the leading edge reaches the edge allowance; past that the pull is
   * spent on the shrink alone, as it is downward. */
  --pull-t-up: min(
    1 + var(--surface-lift) / var(--drag-limit),
    max(0, (var(--surface-rise) - var(--pull-edge)) / var(--drag-limit))
  );
  background: color-mix(
    in srgb,
    transparent,
    var(--surface) calc(var(--surface-chrome) * 100%)
  );
}

[data-modal="dialog"] .modal-shell.surface-elevation-edge-light::before {
  /* Until halfway, the fading trigger still owns the visible edge. Bringing
   * the shell edge in over the second half avoids two differently scaled
   * rings crossing each other during the morph. */
  opacity: clamp(0, 2 * var(--p) - 1, 1);
}

[data-modal="dialog"] .modal-shell[open] {
  position: fixed;
  z-index: var(--layer-dialog);
  pointer-events: auto;
}

[data-modal="dialog"] .modal-expanded {
  display: block;
  overflow: hidden auto;
  background: transparent;
  overscroll-behavior: none;
  touch-action: pan-y;
}

[data-modal="dialog"] .modal-grid {
  block-size: 100%;
  min-block-size: 0;
}

[data-modal="dialog"] .modal-document {
  min-block-size: 100%;
}

/* Intrinsic measurement is a distinct layout state. WebKit otherwise resolves
 * these percentage minimums against the 400px fallback endpoint even after
 * the content box has been made auto-sized, and that false height becomes the
 * dialog's measured endpoint. */
[data-modal-content][data-rt-measuring] > .modal-grid,
[data-modal-content][data-rt-measuring] .modal-document {
  block-size: auto;
  min-block-size: 0;
}

.modal-body {
  min-inline-size: 0;
}

/* The heading's row: the heading, and at its end the dialog's close. */
.modal-head {
  display: flex;
  align-items: center;
  gap: calc(var(--increment) * 3);
}

.modal-heading {
  flex: 1;
  min-inline-size: 0;
  margin: 0;
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
}

.modal-close {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: calc(var(--increment) * 9);
  block-size: calc(var(--increment) * 9);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  background: var(--control-fill);
  cursor: pointer;
}

.modal-close .icon {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
}

@media (hover: hover) {
  .modal-close:hover {
    color: var(--text);
    background: var(--interactive-wash);
  }
}

.modal-expanded .form-actions {
  justify-content: flex-end;
  gap: var(--increment);
}

.modal-expanded .form-submit-primary {
  border-radius: calc(var(--modal-expanded-radius) - var(--modal-content-inset-inline));
}

html:has([data-modal="dialog"] [data-modal-shell][data-rt-summoned])
  :is(body, [data-part="page"]) {
  --dim: var(--dim-sheet);
}

/* With no runtime, the details element opens where it was authored. There is
 * no measured geometry or detached surface, so its two layers become an
 * ordinary inline disclosure and keep the complete content usable. */
:root:not([data-rt-js]) [data-modal] .modal-shell[open] {
  position: static;
  inline-size: auto;
  block-size: auto;
  justify-items: stretch;
  overflow: visible;
  translate: none;
  scale: 1;
}

:root:not([data-rt-js]) [data-modal] .modal-shell[open] .modal-collapsed {
  opacity: 1;
  scale: 1;
  pointer-events: auto;
}

:root:not([data-rt-js]) [data-modal] .modal-shell[open] .modal-expanded {
  position: static;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  opacity: 1;
  translate: none;
  scale: 1;
}

:root:not([data-rt-js]) [data-modal="dialog"] .modal-shell[open] {
  background: transparent;
  box-shadow: none;
}

:root:not([data-rt-js]) [data-modal="dialog"] .modal-shell[open]::before {
  display: none;
}

/* Venue policies. */
.venue-fact-policies {
  position: relative;
}

.venue-fact-policies::before,
.venue-fact-policies::after {
  content: "";
  position: absolute;
  grid-column: var(--content);
  inset-inline: 0;
  block-size: var(--border-width-hairline);
  background: var(--line);
}

.venue-fact-policies::before {
  inset-block-start: 0;
}

.venue-fact-policies::after {
  inset-block-end: 0;
}

.venue-policy-heading .icon {
  inline-size: calc(var(--increment) * 6);
  block-size: calc(var(--increment) * 6);
}

.venue-policy-copy {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* Venue location. The outer boundary owns the responsive query, and the
 * nested elevation wrapper keeps containment separate from the visual
 * surface. The space around the card is the page's row gap wherever it
 * stands. */
.venue-location {
  container: venue-location / inline-size;
  min-inline-size: 0;
}

.venue-location-elevation {
  --surface-elevation-radius: var(--corner-radius);
}

/* A panel whose picture, a map or a photograph, shows through a veil the
 * copy stands on: a graded wash rising from the copy's edge (`::before`) and
 * a haze nearest it (`::after`), both blurring what is behind. Each use sets
 * the veil's ink, its strengths and how far it reaches. */
.veiled-panel {
  --veil-direction: to top;
  --veil-inset: auto 0 0;
  --veil-saturation: 1;
  --haze-saturation: 1;

  position: relative;
  isolation: isolate;
  display: grid;
  overflow: hidden;
  min-inline-size: 0;
  border-radius: inherit;
}

.veiled-panel::before,
.veiled-panel::after {
  display: var(--veil-display);
  content: "";
  position: absolute;
  inset: var(--veil-inset);
  z-index: 1;
  pointer-events: none;
}

.veiled-panel::before {
  inline-size: var(--veil-inline-size, auto);
  block-size: var(--veil-block-size, auto);
  background: linear-gradient(
    var(--veil-direction),
    color-mix(in oklch, var(--veil-ink) var(--veil-near), transparent) 0 var(--veil-hold),
    color-mix(in oklch, var(--veil-ink) var(--veil-far), transparent) var(--veil-fade),
    transparent 100%
  );
  -webkit-backdrop-filter: blur(6px) saturate(var(--veil-saturation));
  backdrop-filter: blur(6px) saturate(var(--veil-saturation));
  -webkit-mask-image: linear-gradient(var(--veil-direction), black 0 var(--veil-mask), transparent 100%);
  mask-image: linear-gradient(var(--veil-direction), black 0 var(--veil-mask), transparent 100%);
}

.veiled-panel::after {
  inline-size: var(--haze-inline-size, auto);
  block-size: var(--haze-block-size, auto);
  background: color-mix(in oklch, var(--veil-ink) var(--haze), transparent);
  -webkit-backdrop-filter: blur(14px) saturate(var(--haze-saturation));
  backdrop-filter: blur(14px) saturate(var(--haze-saturation));
  -webkit-mask-image: linear-gradient(var(--veil-direction), black 0 var(--haze-mask), transparent 100%);
  mask-image: linear-gradient(var(--veil-direction), black 0 var(--haze-mask), transparent 100%);
}

.veiled-copy {
  z-index: 2;
  align-self: end;
  display: grid;
  min-inline-size: 0;
}

:where(.veiled-copy) > * {
  margin-block: 0;
}

/* The map shows through the page's own surface. */
.venue-location-panel {
  --veil-ink: var(--surface);
  --veil-near: 68%;
  --veil-hold: 34%;
  --veil-far: 16%;
  --veil-fade: 70%;
  --veil-block-size: 74%;
  --veil-saturation: 0.82;
  --veil-mask: 58%;
  --haze: 12%;
  --haze-block-size: 50%;
  --haze-saturation: 0.74;
  --haze-mask: 44%;

  min-block-size: calc(var(--increment) * 84);
  background: var(--card-picture-fill);
  -webkit-backdrop-filter: var(--card-backdrop);
  backdrop-filter: var(--card-backdrop);
}

.venue-location-copy {
  max-inline-size: 38rem;
  row-gap: calc(var(--increment) * 3);
  padding: calc(var(--increment) * 6);
}

/* A card's name for what it holds: where, the door, the receipt. One style
 * wherever a card on a page names itself, so the cards of one page read as
 * one set. */
.card-label {
  margin: 0;
  color: var(--accent-strong);
  font-weight: var(--weight-medium);
}

.venue-location-address {
  font-style: normal;
}

.venue-location-city,
.venue-location-street {
  display: block;
}

.venue-location-city {
  font-weight: var(--weight-semibold);
}

.venue-location-street {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-weight: var(--weight-book);
}

.venue-location-action {
  display: inline-flex;
  inline-size: max-content;
  align-items: center;
  color: var(--accent-strong);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.venue-location-action:focus-visible {
  outline: var(--focus-ring-width) solid var(--text);
  outline-offset: 3px;
}

.venue-location-map {
  --venue-location-map-focus-x: 0.5;
  --venue-location-map-focus-y: 0.24;

  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  min-inline-size: 0;
  background-color: var(--card-picture-fill);
  -webkit-mask-image: var(--location-map-fade-stacked);
  mask-image: var(--location-map-fade-stacked);
}

.venue-location-map .leaflet-tile-pane {
  filter: var(--map-tile-filter);
}

.venue-location-map-marker {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 0;
  z-index: 1;
  inline-size: 20px;
  block-size: 20px;
  border: var(--border-width-thin) solid var(--accent-text);
  border-radius: 50% 50% 50% 0;
  background: var(--accent);
  transform: rotate(-45deg);
  box-shadow: 0 1px 4px color-mix(in oklch, var(--shadow-ink) 30%, transparent);
}

.venue-location-map-marker-dot {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 0;
  inline-size: 6px;
  block-size: 6px;
  border: var(--border-width-thin) solid var(--accent-text);
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, 50%);
}

@container venue-location (min-width: 32rem) {
  .venue-location-panel {
    min-block-size: calc(var(--increment) * 64);
  }

  .venue-location-map {
    --venue-location-map-focus-x: 0.75;
    --venue-location-map-focus-y: 0.5;
    -webkit-mask-image: var(--location-map-fade-beside);
    mask-image: var(--location-map-fade-beside);
  }

  .venue-location-copy {
    align-self: stretch;
    inline-size: 46%;
    max-inline-size: none;
    align-content: center;
  }

  /* Beside the copy rather than under it, the veil runs across. */
  .venue-location-panel {
    --veil-direction: to right;
    --veil-inset: 0 auto 0 0;
    --veil-near: 62%;
    --veil-hold: 30%;
    --veil-fade: 68%;
    --veil-inline-size: 70%;
    --veil-block-size: auto;
    --veil-saturation: 0.8;
    --veil-mask: 54%;
    --haze: 14%;
    --haze-inline-size: 50%;
    --haze-block-size: auto;
    --haze-saturation: 0.72;
    --haze-mask: 42%;
  }
}

/* Date-based venue booking. The calendar owns its seven-column date grid. */
.booking-form,
.flow-step-body,
.flow-questions {
  --booking-inset: calc(var(--increment) * 6);
  --booking-section-space: calc(var(--increment) * 4);
}

.booking-panel,
[data-part="venue-booking-action"] {
  --booking-sheet-inline-inset: calc(var(--increment) * 2);
  --booking-sheet-block-inset: max(calc(var(--increment) * 2), env(safe-area-inset-bottom));
  --booking-sheet-headroom: max(calc(var(--increment) * 12), env(safe-area-inset-top));
  --booking-sheet-max-width: 32rem;
  /* Concentric with the page's corner the sheet stands inset from, as a
   * dialog's is (`--modal-expanded-radius`). */
  --booking-sheet-radius: calc(var(--radius) - var(--booking-sheet-inline-inset));
}

/* Placed and stacked by the generated split; standing summoned below. */
.booking-panel {
  inline-size: 100%;
}

.booking-panel::backdrop {
  display: none;
}

.booking-panel:focus,
.venue-lightbox:focus {
  outline: none;
}

.booking-control-close,
.booking-sticky-action {
  display: none;
}

.booking-widget-elevation {
  min-inline-size: 0;
}

.booking-widget {
  display: grid;
  row-gap: 0;
  min-inline-size: 0;
}

.availability-calendar {
  container: availability-calendar / inline-size;
  --calendar-inset: var(--booking-inset);
  --calendar-column-gap: var(--increment);
  --calendar-day-size: calc(var(--increment) * 8);
  --calendar-group-size: calc(var(--increment) * 10);
  /* One row of either view: a month's weeks and the week view's one row are
   * the same height, so a month folds onto its week row for row. */
  --calendar-row-size: calc(var(--increment) * 12);
  --calendar-padding-end: calc(var(--increment) * 2);
  min-inline-size: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.calendar-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  padding: calc(var(--increment) * 2) var(--calendar-inset);
}

.calendar-nav {
  display: grid;
  min-block-size: var(--minimum-target-size);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--control-radius);
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.calendar-nav:disabled {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
  cursor: default;
}

.calendar-nav .icon {
  inline-size: calc(var(--increment) * 5);
  block-size: calc(var(--increment) * 5);
}

.calendar-nav:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: var(--focus-ring-inset);
}

.calendar-nav-next {
  grid-column: 7;
}

.calendar-month {
  grid-column: 2 / 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--increment);
  padding: var(--increment);
  border-radius: var(--control-radius);
}

/* Over the week view the label is the control that unfolds it into months,
 * the same box as the month view's plain label. */
.calendar-month:is(button) {
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.calendar-month:is(button):focus-visible {
  outline: var(--focus-ring-width) solid var(--accent);
}

.calendar-month-name {
  display: grid;
  min-block-size: 2.5em;
  align-items: center;
  text-align: center;
  line-height: 1.25;
  font-weight: var(--weight-semibold);
}

.calendar-weekdays {
  column-gap: var(--calendar-column-gap);
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 0 var(--calendar-inset) var(--increment);
}

.calendar-weekdays span {
  text-align: center;
}

.calendar-rail {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  min-inline-size: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: inline mandatory;
  overflow-anchor: none;
}

/* A rail holds every page it can show, a year of days for the hours, and
 * shows one, which the runtime marks: the rest are skipped by layout and
 * paint until they near the screen. A redraw after a press then lays out one page rather than all of
 * them, which took a press's forced layout from some 11ms to 5 (measured
 * 2026-10-12, Chrome). */
.calendar-rail > [data-calendar-page]:not([data-rt-shown]) {
  content-visibility: auto;
  contain-intrinsic-size: auto calc(var(--minimum-target-size) * 6);
}

.calendar-page {
  --calendar-group-radius: calc(var(--calendar-group-size) / 2);
  flex: 0 0 100%;
  display: grid;
  grid-auto-rows: var(--calendar-row-size);
  padding: 0 var(--calendar-inset) var(--calendar-padding-end);
  scroll-snap-align: start;
}

.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--calendar-column-gap);
}

.calendar-day {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-inline-size: 0;
  color: var(--availability-ink);
  cursor: pointer;
}

.calendar-day[data-availability="open"]::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block-start: calc(50% - var(--calendar-group-radius));
  inset-inline: calc(var(--calendar-column-gap) / -2);
  block-size: var(--calendar-group-size);
  background: var(--availability-fill);
  pointer-events: none;
}

.calendar-day[data-availability-start]::before {
  inset-inline-start: calc(50% - var(--calendar-group-radius));
  border-start-start-radius: var(--calendar-group-radius);
  border-end-start-radius: var(--calendar-group-radius);
}

.calendar-day[data-availability-end]::before {
  inset-inline-end: calc(50% - var(--calendar-group-radius));
  border-start-end-radius: var(--calendar-group-radius);
  border-end-end-radius: var(--calendar-group-radius);
}

.calendar-day input {
  position: absolute;
  inset-block: 0;
  inset-inline: calc(var(--calendar-column-gap) / -2);
  inline-size: calc(100% + var(--calendar-column-gap));
  block-size: 100%;
  appearance: none;
  opacity: 0;
  cursor: inherit;
}

.calendar-day-number {
  pointer-events: none;
  position: relative;
  z-index: 1;
  display: grid;
  inline-size: var(--calendar-day-size);
  block-size: var(--calendar-day-size);
  place-items: center;
  border-radius: 50%;
}

.calendar-day:has(input:checked) .calendar-day-number,
.calendar-day[data-selected] .calendar-day-number {
  color: var(--surface);
  background: var(--availability-selected);
  font-weight: var(--weight-semibold);
}

/* A day of the week view is a link to it, or in a form that posts a submit,
 * drawn as the month view's cell. */
.calendar-day:is(a, button) {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-decoration: none;
}

.calendar-day:focus-visible {
  outline: 0;
}

.calendar-day:focus-visible .calendar-day-number,
.calendar-day:has(input:focus-visible) .calendar-day-number {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: var(--focus-ring-offset);
}

.calendar-day[data-today] .calendar-day-number {
  font-weight: var(--weight-semibold);
}

.calendar-day[data-today] .calendar-day-number::after {
  content: "";
  position: absolute;
  inset-block-end: 2px;
  inline-size: 3px;
  block-size: 3px;
  border-radius: 50%;
  background: currentColor;
}

.calendar-day[data-availability="past"],
.calendar-day[data-availability="unbookable"] {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
  cursor: default;
}

.calendar-day[data-availability="reserved"] {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.calendar-day[data-availability="reserved"] .calendar-day-number {
  text-decoration: line-through;
}

.calendar-day[data-availability="alternative"] .calendar-day-number {
  outline: var(--border-width-thin) dashed var(--availability-ink);
  outline-offset: -1px;
}

.calendar-day[data-availability="alternative"]:has(input:focus-visible) .calendar-day-number {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: var(--focus-ring-offset);
}

.calendar-key {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--increment) calc(var(--increment) * 3);
  padding: 0 var(--calendar-inset) var(--booking-section-space);
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.calendar-key > span {
  display: inline-flex;
  align-items: center;
  gap: var(--increment);
}

.calendar-key > span::before {
  content: "";
  inline-size: calc(var(--increment) * 3);
  block-size: calc(var(--increment) * 3);
  border-radius: 50%;
}

.calendar-key-open::before {
  background: var(--availability-fill);
}

.calendar-key-alternative::before {
  border: var(--border-width-thin) dashed var(--availability-ink);
}

/* A sidebar can be narrower than the same calendar in a phone sheet.
 * Respond to the component's allocation, not the viewport's breakpoint. */
@container availability-calendar (max-width: 340px) {
  .availability-calendar > * {
    --calendar-inset: calc(var(--increment) * 2);
    --calendar-day-size: calc(var(--increment) * 7);
    --calendar-group-size: calc(var(--increment) * 8);
  }
}

@media (forced-colors: active) {
  .calendar-day[data-availability="open"]::before {
    background: Canvas;
    border-block: var(--border-width-thin) solid GrayText;
  }

  .calendar-day[data-availability-start]::before {
    border-inline-start: var(--border-width-thin) solid GrayText;
  }

  .calendar-day[data-availability-end]::before {
    border-inline-end: var(--border-width-thin) solid GrayText;
  }

  .calendar-day:has(input:disabled) {
    color: GrayText;
  }

  .calendar-day:has(input:checked) .calendar-day-number,
  .calendar-day[data-selected] .calendar-day-number {
    forced-color-adjust: none;
    color: HighlightText;
    background: Highlight;
  }

  .calendar-key-open::before {
    background: Canvas;
    border: var(--border-width-thin) solid GrayText;
  }
}

/* A whole day is one temporal surface: the week rail changes its viewport and
 * the four named bands make 24 hours scannable without turning them into a
 * keypad. The band itself carries availability and selection. */
.time-booking-form {
  container: time-booking / inline-size;
}

.time-booking-widget {
  overflow: hidden;
}

.time-picker {
  display: grid;
  min-inline-size: 0;
}

.time-picker-days {
  min-inline-size: 0;
  overflow: hidden;
}

.time-picker-day-page {
  flex: 0 0 100%;
  display: grid;
  min-inline-size: 0;
  align-content: start;
  row-gap: calc(var(--increment) * 2);
  padding: 0 var(--booking-inset);
  scroll-snap-align: start;
}

.time-picker-day-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: calc(var(--increment) * 3);
  padding-block: calc(var(--increment) * 2) calc(var(--increment) * 3);
}

.time-picker-day-heading time {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
}

.time-picker-rate {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.time-picker-band {
  display: grid;
  grid-template-columns: calc(var(--increment) * 13) minmax(0, 1fr);
  align-items: center;
  column-gap: calc(var(--increment) * 3);
}

.time-picker-band-label {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.time-picker-band-hours {
  display: grid;
  grid-template-columns: repeat(var(--time-columns, 6), minmax(0, 1fr));
  min-inline-size: 0;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--availability-fill);
  box-shadow: inset 0 0 0 var(--border-width-hairline)
    color-mix(in oklch, var(--availability-ink) 8%, transparent);
}

.time-picker-hour {
  position: relative;
  display: grid;
  min-inline-size: 0;
  min-block-size: var(--minimum-target-size);
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--availability-ink);
  background: transparent;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.time-picker-hour + .time-picker-hour::before {
  content: "";
  position: absolute;
  inset-block: calc(var(--increment) * 3);
  inset-inline-start: 0;
  inline-size: var(--border-width-hairline);
  background: color-mix(in oklch, var(--availability-ink) 12%, transparent);
}

.time-picker-hour[data-selected] {
  z-index: 1;
  color: var(--availability-ink);
  box-shadow: inset 0 2px var(--availability-selected), inset 0 -2px var(--availability-selected);
}

.time-picker-hour[data-selected]::before,
.time-picker-hour[data-selected] + .time-picker-hour[data-selected]::before {
  display: none;
}

.time-picker-hour[data-selection-start] {
  border-inline-start: 2px solid var(--availability-selected);
  border-start-start-radius: var(--radius-pill);
  border-end-start-radius: var(--radius-pill);
}

.time-picker-hour[data-selection-end] {
  border-inline-end: 2px solid var(--availability-selected);
  border-start-end-radius: var(--radius-pill);
  border-end-end-radius: var(--radius-pill);
}

.time-picker-hour[data-availability="taken"],
.time-picker-hour[data-availability="past"],
.time-picker-hour[data-availability="closed"] {
  color: var(--text-disabled);
  mix-blend-mode: var(--text-secondary-blend);
  background: var(--fill);
  cursor: default;
}

.time-picker-hour[data-availability="taken"] {
  text-decoration: line-through;
}

.time-picker-recap {
  min-block-size: calc(var(--increment) * 15);
  margin: 0;
  padding: calc(var(--increment) * 5) var(--booking-inset) 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: calc(var(--increment) * 4);
}

.time-picker-recap-copy strong {
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.time-picker-duration {
  display: grid;
  gap: var(--increment);
  text-align: end;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  white-space: nowrap;
}

.time-picker-hour:focus-visible {
  z-index: 2;
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: var(--focus-ring-inset);
}

.booking-control-options {
  min-inline-size: 0;
  margin: 0;
  padding: 0 var(--booking-inset);
  border: 0;
}

.booking-control-options legend {
  display: block;
  inline-size: calc(100% + 2 * var(--booking-inset));
  margin-inline: calc(-1 * var(--booking-inset));
  padding: var(--booking-section-space) var(--booking-inset) calc(var(--increment) * 3);
  border: 0;
  font-family: var(--font-body);
}

.booking-control-footer {
  display: block;
  padding: var(--booking-section-space) var(--booking-inset) var(--booking-inset);
  border: 0;
  background: var(--card-band-fill);
}

.booking-control-close {
  min-block-size: var(--minimum-target-size);
  align-items: center;
  justify-content: center;
  gap: calc(var(--increment) * 2);
  padding-inline: calc(var(--increment) * 4);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--text);
  background: var(--interactive-wash);
  cursor: pointer;
}

.booking-control-close .icon {
  inline-size: calc(var(--increment) * 4);
  block-size: calc(var(--increment) * 4);
}

.booking-control-submit {
  display: grid;
  inline-size: 100%;
  min-block-size: calc(var(--increment) * 12);
  place-items: center;
  padding: 0 calc(var(--increment) * 5);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--booking-button-text);
  background: var(--booking-button-fill);
  cursor: pointer;
}

.booking-control-submit:focus-visible {
  outline: var(--focus-ring-width) solid var(--text);
  outline-offset: var(--focus-ring-offset);
}

.booking-control-submit:disabled {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  background: var(--control-disabled-fill);
  box-shadow: none;
  cursor: default;
}

/* The P3 fill stays off a border paint path: Safari desaturates that path. */
.booking-button-glass {
  box-shadow:
    inset 0 4px 6px -6px var(--booking-button-inner-light),
    inset 0 -4px 6px -6px var(--booking-button-inner-dark),
    0 2px 4px var(--booking-button-shadow);
}

.booking-button-label {
  font-weight: var(--weight-book);
  letter-spacing: 0.015em;
}

/* Booking action and sheet are two content layers on one measured shell.
 * The fixed action draws the shell throughout the spring; the sheet content
 * fades into that geometry after the shell has visibly left its collapsed
 * rest. */
[data-part="venue-booking-action"],
[data-booking-action-content],
[data-booking-panel],
[data-booking-panel] [data-booking-form] {
  /* Motion channels are unitless. Dividing the actual spacing token by 1px
   * keeps the pull's edge clearance derived from the same value that places
   * the surface instead of duplicating a guessed factor. */
  --surface-drop: calc(var(--booking-sheet-block-inset) / 1px);
  --pull-t-down: max(
    0,
    (var(--surface-drop) - var(--pull-edge)) / var(--drag-limit)
  );
}

@media (max-width: 687.98px) {
  .booking-sticky-action {
    --surface-elevation-radius: calc(var(--increment) * 10);
    --booking-action-max-width: calc(var(--increment) * 68);
    --booking-action-inline-inset: calc(var(--increment) * 2);
    --booking-action-block-size: calc(var(--increment) * 18);
    --booking-action-block-inset: max(
      calc(var(--increment) * 4),
      env(safe-area-inset-bottom)
    );
    --booking-action-down-y: calc(var(--drag-limit) * var(--pull-t-down) * 1px);
    --booking-action-down-scale: calc(1 + var(--pull-size-down));

    position: fixed;
    inset-inline: auto;
    inset-inline-start: 50%;
    inset-block-end: var(--booking-action-block-inset);
    z-index: var(--layer-action);
    display: block;
    inline-size: min(
      var(--booking-action-max-width),
      calc(100% - var(--booking-action-inline-inset) - var(--booking-action-inline-inset))
    );
    block-size: var(--booking-action-block-size);
    translate: -50% calc(var(--surface-pull-y) * 1px);
    scale: var(--surface-pull-scale);
    transform-origin: 50% 100%;
    touch-action: none;
    animation: booking-action-arrive var(--booking-action-entrance-duration) ease-out
      var(--booking-action-entrance-delay) backwards;
  }

  @keyframes booking-action-arrive {
    from {
      opacity: 0;
      translate: -50% var(--booking-action-down-y);
      scale: var(--booking-action-down-scale);
    }
  }

  .booking-sticky-action[data-rt-in-session] {
    animation-duration: var(--interaction-duration);
    animation-delay: 0ms;
  }

  .booking-sticky-action[data-rt-leaving] {
    transition:
      opacity var(--navigation-exit-duration) ease-in,
      translate var(--navigation-exit-duration) ease-in,
      scale var(--navigation-exit-duration) ease-in;
    opacity: 0;
    translate: -50% var(--booking-action-down-y);
    scale: var(--booking-action-down-scale);
  }

  .booking-sticky-action[data-rt-arrived] {
    animation: none;
  }

  .booking-sticky-action-surface {
    --glass-material-solid: clamp(0, var(--p), 1);

    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .booking-sticky-action-content {
    position: relative;
    z-index: 1;
    display: flex;
    block-size: 100%;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--increment) * 4);
    padding: calc(var(--increment) * 2);
    padding-inline-start: calc(var(--increment) * 5);
    overflow: hidden;
    border-radius: inherit;
  }

  .booking-sticky-price {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    gap: var(--increment);
    margin: 0;
    font-variant-numeric: tabular-nums;
  }

  .booking-sticky-price .text-caption {
    color: var(--text-muted);
    mix-blend-mode: var(--text-secondary-blend);
  }

  .booking-sticky-price strong {
    font-weight: var(--weight-semibold);
  }

  .booking-sticky-trigger {
    display: grid;
    min-inline-size: calc(var(--increment) * 24);
    min-block-size: calc(var(--increment) * 12);
    place-items: center;
    padding-inline: calc(var(--increment) * 5);
    border-radius: var(--radius-pill);
    color: var(--booking-button-text);
    background: var(--booking-button-fill);
    text-decoration: none;
  }

  .booking-panel:not([data-rt-summoned]) {
    display: none;
  }

  .booking-panel[data-rt-summoned] {
    position: fixed;
    inset-inline-start: 50%;
    inset-block-end: var(--surface-bottom-expanded);
    z-index: var(--layer-sheet);
    display: block;
    inline-size: var(--surface-width-expanded);
    block-size: var(--surface-height-expanded);
    pointer-events: auto;
    translate: -50% 0;
  }

  .booking-panel[data-rt-summoned] .booking-form {
    --surface-content-scale: calc(
      (var(--surface-width-ratio) + var(--surface-progress) * (1 - var(--surface-width-ratio)))
        * var(--surface-pull-scale)
    );

    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-block-size: none;
    overflow-y: auto;
    border-radius: var(--surface-radius-expanded);
    opacity: clamp(0, 2 * var(--p) - 1, 1);
    translate: 0 calc(var(--surface-pull-y) * 1px);
    scale: var(--surface-content-scale);
    transform-origin: 50% 100%;
    /* The content's scaled visible box is the shell's current box. A progress
     * percentage alone reveals below the moving top edge because the content
     * is simultaneously scaling from the collapsed width. Resolve both
     * insets in the content's pre-transform coordinates, including the small
     * change between the action's and sheet's bottom clearances. */
    clip-path: inset(
      max(
        0px,
        var(--surface-height-expanded)
          - (
            var(--surface-height) + var(--surface-bottom)
              - var(--surface-bottom-expanded)
          ) / var(--surface-content-scale)
      )
      0
      max(
        0px,
        (var(--surface-bottom) - var(--surface-bottom-expanded))
          / var(--surface-content-scale)
      )
      0
      round var(--surface-radius-expanded)
    );
    overscroll-behavior: none;
    touch-action: pan-y;
  }

  .booking-panel[data-rt-summoned] .booking-widget-elevation {
    --surface-elevation-contact-shadow: 0 0 0 transparent;
    --surface-elevation-ambient-shadow: 0 0 0 transparent;
    --surface-elevation-edge-light-width: 0px;

    display: block;
    border-radius: inherit;
  }

  .booking-panel[data-rt-summoned] .booking-widget-elevation::before {
    display: none;
  }

  .booking-panel[data-rt-summoned] .booking-control-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: calc(var(--increment) * 2);
  }

  .booking-panel[data-rt-summoned] .booking-control-close {
    display: flex;
  }

  html:has(.booking-panel[data-rt-summoned]) {
    --pull-size-up: var(--pull-size-down);
  }

  html:has(.booking-panel[data-rt-summoned])
    :is(.booking-sticky-action, .booking-form) {
    --pull-t-up: calc(1 + var(--surface-lift) / var(--drag-limit));
  }

  html:has(.booking-panel[data-rt-summoned]) :is(body, [data-part="page"]) {
    --dim: calc(clamp(0, var(--p), 1) * var(--dim-sheet));
    transition: none;
  }

  html:has(.booking-panel[data-rt-summoned]) .booking-sticky-action {
    inset-inline: auto;
    inset-block-end: var(--surface-bottom);
    inset-inline-start: 50%;
    z-index: var(--layer-action-summoned);
    inline-size: var(--surface-width);
    block-size: var(--surface-height);
    border-radius: var(--surface-radius);
    translate:
      -50%
      calc(
        var(--surface-pull-y) * 1px
          + max(0px, -1 * var(--p) * var(--surface-landing-distance))
      );
    scale: var(--surface-pull-scale);
    transform-origin: 50% 100%;
    pointer-events: none;
  }

  html:has(.booking-panel[data-rt-summoned]) [data-booking-action-content] {
    block-size: 100%;
    opacity: clamp(0, 1 - 2 * var(--p), 1);
  }
}

@media (hover: hover) {
  .calendar-nav:not(:disabled):hover,
  .calendar-day:has(input:enabled):not(:has(input:checked)):hover .calendar-day-number,
  .calendar-day:is(a, button):not([data-selected]):hover .calendar-day-number,
  .choice-row:hover {
    background: var(--interactive-wash);
  }

  .time-picker-hour[data-availability="free"]:not([data-selected]):hover {
    background: color-mix(in oklch, var(--availability-fill), var(--availability-selected) 10%);
  }
}

@container time-booking (max-width: 23rem) {
  .time-booking-form {
    --booking-inset: calc(var(--increment) * 4);
  }

  .time-picker-band {
    grid-template-columns: calc(var(--increment) * 11) minmax(0, 1fr);
    column-gap: calc(var(--increment) * 2);
  }
}

/* Identity challenge. */
.auth-heading,
.auth-lead {
  margin-block: 0;
}

.auth-heading {
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
}

.auth-heading-mark {
  color: var(--accent);
}

.auth-lead {
  color: var(--text);
  font-weight: var(--weight-regular);
}

/* The tools badge: the trigger of the tools dialog, fixed in a corner as page
 * furniture where the Tools axis is. It is shown once tools.js runs, so an
 * automation tab that keeps it hidden measures the site alone; fixed, it moves
 * no page geometry either way. The dialog it summons is the shared modal
 * surface, and its document is the administration's own rows. */
html:not([data-rt-tools]) .tools {
  display: none;
}

.tools {
  position: fixed;
  z-index: var(--layer-tools);
  inset-block-end: var(--grid-edge-track-width);
  inset-inline-start: var(--grid-edge-track-width);
}

/* Collapsed, the dialog is the round badge. */
.tools[data-modal] :is([data-modal-shell], [data-modal-trigger], [data-modal-content]) {
  --surface-radius-collapsed: calc(var(--minimum-target-size) / 2);
}

.tools-badge {
  display: grid;
  inline-size: var(--minimum-target-size);
  block-size: var(--minimum-target-size);
  place-items: center;
  border: var(--border-width-thin) solid var(--text);
  border-radius: 50%;
  color: var(--surface);
  background: var(--text);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
}

.tools-mail {
  inline-size: 100%;
  block-size: calc(var(--increment) * 160);
  border: var(--border-width-hairline) solid var(--line);
  border-radius: var(--control-radius);
  background: var(--surface);
}

[data-tools-copy][data-rt-copied] {
  color: var(--text);
}

/* Site chrome. */
.site-header {
  --wordmark-size: 18px;
  --wordmark-leading: calc(var(--increment) * 6);

  container: site-header / inline-size;
  z-index: var(--layer-header);
  color: var(--text);
  font-weight: var(--weight-semibold);
}

.site-header-surface {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.site-header-content {
  --search-divider-space: calc(var(--increment) * 3);

  position: relative;
  z-index: 2;
  flex: 1;
  min-inline-size: 0;
  /* Controls and the account dialog's shell share geometry, but not a
   * backdrop root. The glass is their sibling above; putting it on this
   * ancestor makes a backdrop-filter inside it sample an already-flattened
   * header and no longer blur the page behind it. */
  overflow: visible;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: var(--search-divider-space);
  padding-inline: calc(var(--increment) * 3);
  border-radius: inherit;
}

.site-header-content > .wordmark {
  grid-column: 1;
}

.site-header-search {
  grid-column: 2;
  justify-self: stretch;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: calc(var(--increment) * 12);
  padding-inline-start: calc(var(--search-divider-space) - var(--increment));
  box-shadow: inset var(--border-width-hairline) 0 0 var(--line);
}

.site-header-search-input {
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  padding: 0 var(--increment);
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  font-weight: var(--weight-regular);
  caret-color: var(--accent-strong);
  appearance: none;
}

.site-header-search-input::placeholder {
  color: var(--text);
  opacity: 0.5;
}

.site-header-search-input::-webkit-search-cancel-button {
  appearance: none;
}

.site-header-search-input:focus {
  outline: none;
}

.site-header-content > .site-header-actions {
  grid-column: 3;
}

.site-header a,
.site-mark a {
  color: var(--text);
  text-decoration: none;
}

.wordmark-label {
  font-size: var(--wordmark-size);
  line-height: var(--wordmark-leading);
  font-weight: var(--weight-semibold);
}

.wordmark-mark {
  color: var(--accent);
}

@supports (text-box: trim-both cap alphabetic) {
  .wordmark-label {
    text-box: trim-both cap alphabetic;
  }
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: var(--increment);
  font-weight: var(--weight-medium);
}

.site-header-action {
  min-block-size: var(--minimum-target-size);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--increment);
  border-radius: calc(var(--increment) * 2);
}

/* A dialog summoned from the header rests on its heading: the heading opens
 * on its label's line and its row ends where the label ended, which puts the
 * close under the pointer that opened it, and the panel unfolds below and
 * before it. Two classes deep so it outranks the dialogs'
 * wide-viewport centring. */
[data-modal="dialog"].site-header-dialog {
  --modal-rest: heading;
}

/* The account's label: its name, then its disc at the trigger's end. The
 * disc sits close to the end so the pill reads as belonging to it. */
.site-header-dialog .modal-collapsed {
  gap: calc(var(--increment) * 2);
  padding-inline: calc(var(--increment) * 3) calc(var(--increment) * 1.5);
}

/* Opened, the label becomes the heading: the disc, grown, leads, and beside
 * it the name opens on the label's line with the account's address under it.
 * Disc and name read as one identity on the start edge the rows below keep. */
.account-heading {
  display: flex;
  align-items: center;
  gap: calc(var(--increment) * 3);
}

.account-heading-words > span {
  max-inline-size: 100%;
  overflow-x: clip;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-heading-address {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  letter-spacing: normal;
}

.account-heading .avatar {
  --avatar-size: calc(var(--increment) * 11);
}

/* The disc that stands for an account. Until accounts carry a picture it
 * holds the initials in the accent's ink on its wash. */
.avatar {
  --avatar-size: calc(var(--increment) * 7);
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--avatar-size);
  block-size: var(--avatar-size);
  overflow: hidden;
  border-radius: 50%;
  color: var(--accent-strong);
  /* Opaque, because the small disc stands on the header's glass, where a
   * wash takes on whatever photograph is behind it. */
  background: color-mix(in srgb, var(--surface), var(--accent) 16%);
  font-family: var(--font-body);
  font-size: calc(var(--avatar-size) * 0.38);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1;
}

.avatar .icon {
  inline-size: 60%;
  block-size: 60%;
}

/* A phone's measure wherever the dialog opens. */
[data-modal="dialog"].modal-phone {
  --modal-width: calc(var(--increment) * 100);
}

@container site-header (min-width: 48rem) {
  .site-header-content {
    --search-divider-space: calc(var(--increment) * 6);
  }
}

.site-header .wordmark {
  min-block-size: var(--minimum-target-size);
  display: inline-flex;
  align-items: center;
}

.site-header-action:active {
  background: var(--interactive-wash);
}

.site-header .wordmark:active {
  opacity: var(--pressed-opacity);
}

.site-header :is(a, button, summary):focus-visible,
.site-footer a:focus-visible {
  outline: var(--focus-ring-width) solid var(--text);
  outline-offset: 3px;
  border-radius: var(--increment);
}

.site-footer {
  color: var(--text);
}

.site-footer-rule {
  block-size: var(--border-width-hairline);
  background: var(--line);
}

.site-footer-row,
.site-footer-actions,
.site-footer-nav,
.site-footer-locales,
.site-footer-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.site-footer-row {
  justify-content: space-between;
  gap: calc(var(--increment) * 5) calc(var(--increment) * 10);
}

.site-footer-actions {
  gap: calc(var(--increment) * 4) calc(var(--increment) * 10);
}

:where(.site-footer-topline) > * {
  margin-block: 0;
}

.site-footer-nav {
  gap: calc(var(--increment) * 5);
}

.site-footer-topline {
  gap: calc(var(--increment) * 2) calc(var(--increment) * 5);
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.site-footer-locales {
  gap: calc(var(--increment) * 2);
}

.site-footer a {
  width: max-content;
  color: inherit;
  text-decoration: none;
}

.site-footer-nav a,
.site-footer-locales a {
  font-weight: var(--weight-book);
}

.site-footer-locale-current,
.site-footer-language-separator {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

/* Answers that say more than a word: a row each, marked with a dot, its name
 * over what it costs or what it does. */
.choice-rows {
  display: grid;
  min-inline-size: 0;
  row-gap: var(--increment);
}

.choice-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: calc(var(--increment) * 3);
  min-block-size: var(--minimum-target-size);
  margin-inline: calc(var(--increment) * -2);
  padding: calc(var(--increment) * 4) calc(var(--increment) * 3);
  border-radius: calc(var(--increment) * 3);
  cursor: pointer;
}

/* The rail's approved height, for a row that carries its second line. */
.choice-row:has(.choice-row-detail) {
  min-block-size: calc(var(--increment) * 18);
}

.choice-row::before {
  content: "";
  inline-size: calc(var(--increment) * 4);
  block-size: calc(var(--increment) * 4);
  border: var(--border-width-thin) solid var(--line);
  border-radius: 50%;
}

.choice-row:has(input:checked)::before {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  box-shadow: inset 0 0 0 calc(var(--increment) - 1px) var(--surface);
}

.choice-row:has(input:checked) {
  background: var(--accent-wash);
}

.choice-row input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  appearance: none;
  opacity: 0;
}

.choice-row:has(input:checked) .muted {
  color: var(--text);
}

.choice-row[data-unavailable]:not(:has(input:checked)) {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.choice-row:has(input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: var(--focus-ring-inset);
}

.choice-row-copy > strong {
  font-weight: var(--weight-semibold);
}

.choice-row-detail {
  font-variant-numeric: tabular-nums;
}

/* Visible answers share the form surface, target and focus vocabulary. */
.choice-set {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--increment) * 2);
  min-inline-size: 0;
}

.choice-set > * {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.choice-set:not(.scale) > label {
  flex-basis: calc(50% - var(--increment) * 2);
}

.choice-set :is(label, a, button) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: calc(var(--increment) * 12);
  padding: calc(var(--increment) * 2) calc(var(--increment) * 4);
  border: var(--border-width-hairline) solid var(--control-line);
  border-radius: var(--control-radius);
  background: var(--control-fill);
  box-shadow: var(--control-recess);
  color: var(--text);
  font-weight: var(--weight-medium);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.choice-set > span > :is(a,
button) {
  inline-size: 100%;
}

.choice-set label input[type="radio"] {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice-set label:has(:checked),
.choice-set [aria-current] > :is(a, button),
.choice-set button[aria-pressed="true"] {
  border-color: var(--accent-strong);
  background: var(--accent-wash);
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 var(--border-width-hairline) var(--accent-strong);
}

.choice-set label:has(:focus-visible),
.choice-set :is(a, button):focus-visible {
  outline: 3px solid var(--control-focus-halo);
  outline-offset: var(--focus-ring-offset);
}

@media (hover: hover) {
  .choice-set :is(label,
  a,
  button):hover {
    border-color: var(--control-line-hover);
  }
}

.booking-widget > .field {
  margin: 0;
  padding: 0 var(--booking-inset);
}

.booking-widget > .field > legend {
  padding-block-start: var(--booking-section-space);
}

.time-selection {
  min-inline-size: 0;
}

.time-selection-duration {
  display: flex;
  align-items: center;
  gap: calc(var(--increment) * 3);
  padding: calc(var(--increment) * 2) var(--booking-inset);
  border: 0;
  margin: 0;
}

.time-selection-duration .choice-set {
  flex: 1;
}

.time-selection .time-picker-day-heading {
  padding-block: var(--increment);
}

.time-selection .time-picker-recap {
  padding-block-end: calc(var(--increment) * 3);
}

@media (forced-colors: active) {
  .time-picker-hour[data-selected] {
    box-shadow: none;
    border-block: 2px solid Highlight;
  }

  .time-picker-hour[data-selection-start],
  .time-picker-hour[data-selection-end] {
    border-color: Highlight;
  }
}

/* The flow rail names every step and keeps the current one visible. */
.flow-accordion {
  list-style: none;
  counter-reset: flow-step;
  margin: 0;
  padding: 0;
}

.flow-accordion > li {
  counter-increment: flow-step;
}

.flow-step-heading {
  display: flex;
  align-items: center;
  gap: calc(var(--increment) * 3);
  inline-size: 100%;
  min-block-size: calc(var(--increment) * 13);
  padding: calc(var(--increment) * 4) calc(var(--increment) * 6);
  border: 0;
  border-radius: 0;
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  background: transparent;
  text-align: start;
  cursor: pointer;
}

.flow-accordion > li + li {
  border-block-start: var(--border-width-hairline) solid var(--line);
}

.flow-step-heading::after {
  content: "+";
  margin-inline-start: auto;
  font-size: var(--text-subtitle);
  font-weight: var(--weight-regular);
}

.flow-accordion details[open] > .flow-step-heading::after {
  content: "−";
}

.flow-step-heading::before {
  content: counter(flow-step, decimal-leading-zero);
  display: grid;
  place-items: center;
  flex: 0 0 calc(var(--increment) * 8);
  block-size: calc(var(--increment) * 8);
  border-radius: 50%;
  background: var(--interactive-wash);
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}

.flow-step-heading[aria-current="step"] {
  color: var(--accent-strong);
  background: var(--accent-wash);
  font-weight: var(--weight-semibold);
}

.flow-step-heading[aria-current="step"]::before {
  color: var(--surface);
  background: var(--accent-strong);
}

@media (hover: hover) {
  .flow-step-heading:hover {
    background: var(--interactive-wash);
  }
}

.flow-step-heading:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: var(--focus-ring-inset);
}

.flow-step-body {
  padding-block: var(--booking-inset);
  border-radius: inherit;
  background: var(--surface);
}

/* Every step owns one action row: secondary navigation left, progression right. */
.flow-step-body .form-actions {
  flex-wrap: nowrap;
}

.flow-step-body .form-actions > .form-submit-secondary {
  margin-inline-end: auto;
}

.flow-step-body .form-actions > button {
  min-inline-size: 0;
  min-block-size: calc(var(--increment) * 12);
}

.flow-step-body > * {
  margin-inline: var(--booking-inset);
}

.flow-step-body > .time-booking-form {
  margin-inline: 0;
}

.flow-step-body > .time-booking-form > .form-actions {
  margin-inline: var(--booking-inset);
}

.flow-summary .flow-venue {
  color: var(--text);
  text-decoration: none;
}

.flow-venue-photo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--corner-radius);
}

.flow-venue-description,
.flow-terms,
.flow-guidance {
  color: var(--text-muted);
  mix-blend-mode: var(--text-secondary-blend);
}

.flow-recap {
  padding-block: calc(var(--increment) * 6);
  border-block: var(--border-width-hairline) solid var(--line);
}

.flow-recap h1 {
  margin: 0;
}

.flow-chosen {
  font-weight: var(--weight-semibold);
}

.flow-dates {
  font-variant-numeric: tabular-nums;
}

/* A projected slot is a seam for the runtime, not a box: what it holds lays
 * out as the parent's own child, so an empty one adds no gap. */
.projected {
  display: contents;
}

.flow-price {
  padding-block: calc(var(--increment) * 3);
}

.flow-price h2 {
  margin-block-end: calc(var(--increment) * 3);
}

.flow-venue:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: calc(var(--increment) * 2);
}

.inquiry-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.flow-summary {
  overflow-wrap: anywhere;
}

.flow-step-body a:not([class]) {
  color: var(--accent-strong);
  text-underline-offset: 0.18em;
}

/* Product offers share the venue content tracks; each purchase is its own
 * form, set in light words over the product's photograph. */
.product-card {
  padding-block: 0;
}

.product-card-panel {
  --veil-ink: var(--shadow-ink);
  --veil-near: 84%;
  --veil-hold: 0%;
  --veil-far: 44%;
  --veil-fade: 55%;
  --veil-block-size: 80%;
  --veil-mask: 40%;
  --haze: 22%;
  --haze-block-size: 52%;
  --haze-mask: 0%;

  min-block-size: calc(var(--increment) * 60);
  color: var(--on-photo);
  background: var(--photo-ground);
}

.product-card-image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.product-card-copy {
  align-content: end;
  gap: calc(var(--increment) * 2);
  padding: calc(var(--increment) * 5);
}

.product-card-copy > .form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--increment) * 3);
}

.product-card-copy > .form .form-submit-primary {
  inline-size: auto;
  min-inline-size: 5rem;
  color: var(--photo-ground);
  background: var(--on-photo);
}

@media (hover: hover) {
  .product-card-copy > .form .form-submit-primary:hover {
    background: var(--on-photo-hover);
  }
}

.product-card-copy > .form .form-submit-primary:focus-visible {
  outline-color: var(--on-photo);
}

/* A gift credential's code is the tile's figure: set large enough to read
 * across a counter, and free to break anywhere since it is one token. */
.benefit-code {
  font-family: var(--font-mono);
  font-size: var(--text-subtitle);
  line-height: var(--leading-subtitle);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  user-select: all;
}

.receipt-line {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--increment) * 3);
  padding-block: var(--increment);
}

.receipt-line > :last-child {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.receipt-total {
  font-weight: var(--weight-semibold);
  border-block-start: var(--border-width-hairline) solid var(--line);
  margin-block-start: calc(var(--increment) * 2);
  padding-block-start: calc(var(--increment) * 2);
}

/* The selection wraps under the copy where the row cannot hold both: a
 * stepper beside the image left the copy one word wide at 390px, and the price
 * painted over it. */
.booking-addon-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--increment) * 3);
  padding: calc(var(--increment) * 4);
  border-radius: var(--control-radius);
  cursor: pointer;
}

.booking-addon-card:has(input:checked),
.booking-addon-card[data-taken] {
  background: var(--accent-wash);
}

.booking-addon-image {
  inline-size: clamp(3rem, 6vw, 4.5rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--increment) * 2);
  flex-shrink: 0;
}

.booking-addon-copy {
  flex: 1 1 calc(var(--increment) * 24);
}

.booking-addon-selection {
  display: flex;
  align-items: center;
  gap: calc(var(--increment) * 3);
  flex-shrink: 0;
  margin-inline-start: auto;
}

.booking-addon-price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.booking-addon-selection > input {
  margin: 0;
  flex-shrink: 0;
}

/* A count as one control: the number between a step down and a step up, in
 * the field's own fill and line. The steps are the runtime's
 * (`wireStepper`), shown once it has wired them; without it the number is
 * typed. */
.stepper {
  display: inline-flex;
  align-self: start;
  justify-self: start;
  align-items: center;
  block-size: var(--minimum-target-size);
  border: var(--border-width-hairline) solid var(--control-line);
  border-radius: var(--control-radius);
  background: var(--control-fill);
  box-shadow: var(--control-recess);
}

.stepper:focus-within {
  border-color: var(--control-focus-line);
  outline: 3px solid var(--control-focus-halo);
  outline-offset: var(--focus-ring-offset);
}

.stepper input[data-quantity] {
  inline-size: calc(3ch + var(--increment) * 4);
  min-block-size: 0;
  block-size: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: textfield;
}

.stepper input[data-quantity]::-webkit-inner-spin-button,
.stepper input[data-quantity]::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.stepper [data-quantity-step] {
  display: none;
  inline-size: var(--minimum-target-size);
  block-size: 100%;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--control-radius);
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: var(--text-subtitle);
  line-height: 1;
  cursor: pointer;
}

.stepper[data-rt-wired] [data-quantity-step] {
  display: grid;
}

.stepper [data-quantity-step]:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: var(--focus-ring-inset);
}