/* La Déesse — base layer. Loaded after tokens.css. Every colour comes from a token. */

/* Metric-matched local fallbacks so text does not jump while Spectral / Montserrat load */
@font-face { font-family: "Spectral Fallback"; src: local("Georgia"); size-adjust: 100.8%; ascent-override: 105.1%; descent-override: 45.9%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("Helvetica"), local("Arial MT"); size-adjust: 111.4%; ascent-override: 86.9%; descent-override: 22.5%; line-gap-override: 0%; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
*, *::before, *::after { box-sizing: border-box; }
img, video, svg { max-width: 100%; }
::selection { background: var(--gold); color: var(--on-gold); }

/* Caps styles: the tokens set size and tracking; uppercase lives here.
   Never enable the OpenType 'case' feature on Spectral: it turns lowercase into capitals. */
.ld-display-xl, .ld-display-l, .ld-h1, .ld-h2, .ld-item-name,
.ld-eyebrow, .ld-nav, .ld-label, .ld-button { text-transform: uppercase; }
.ld-price, .ld-ui-num { font-variant-numeric: lining-nums tabular-nums; }
.ld-display-xl, .ld-display-l, .ld-h1, .ld-h2 { text-wrap: balance; margin: 0; }
/* Phone steps of the type scale (the sizes named in each style's usage note) */
@media (max-width: 600px) {
  .ld-display-xl { font-size: 48px; }
  .ld-display-l { font-size: 34px; }
  .ld-h1 { font-size: 28px; }
  .ld-h2 { font-size: 22px; }
  .ld-item-name, .ld-price { font-size: 16px; }
  .ld-lead { font-size: 19px; }
  .ld-body { font-size: 17px; }
  .ld-item-desc { font-size: 15px; }
}

/* The laser gaze: one focus ring for every interactive element */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Inline links */
.ld-link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--link) 55%, transparent);
  transition: text-decoration-color var(--dur-quick) var(--ease-silk), text-decoration-thickness var(--dur-quick) var(--ease-silk);
}
.ld-link:hover { text-decoration-color: var(--link); text-decoration-thickness: 2px; }

/* Visually hidden, still announced */
.ld-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Icons drawn by LaDeesse.Icon: hairline strokes, square caps (they echo the wedge serifs) */
.ld-icon { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: square; stroke-linejoin: miter; }
.ld-icon--fill { fill: currentColor; stroke: none; }

/* Shared motion vocabulary */
@keyframes ld-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ld-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ld-glint { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes ld-gaze { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--laser) 55%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--laser) 0%, transparent); } }

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

/* Preview frame helpers (used by the component previews) */
.ld-preview { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
.ld-preview-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.ld-preview-note { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 480px) { .ld-preview { padding: var(--space-4); gap: var(--space-5); } }


/* ---- Logo ---- */
/* Logo — the client's outlined artwork, single ink in currentColor */
.ld-logo {
  display: block;
  flex: none;
  max-width: 100%;
  overflow: visible; /* the trimmed viewBox sits on the outline: keep anti-aliased edge pixels */
}
/* default sizes when no width/height prop is given (wordmark at its 180 px screen minimum) */
.ld-logo--wordmark { height: 40px; width: auto; }
.ld-logo--emblem { height: 96px; width: auto; }
.ld-logo--lockup { height: 200px; width: auto; }
.ld-logo--jewel { height: 160px; width: auto; }
.ld-logo--color { height: 200px; width: auto; }

.ld-logo--gold { color: var(--gold); }
.ld-logo--on-dark { color: var(--on-dark); }
/* ld-logo--ink: no colour of its own, follows the text colour of its context */

.ld-logo--raster { position: relative; }
.ld-logo__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ld-logo--cropped { overflow: hidden; }
.ld-logo--cropped .ld-logo__img { position: absolute; max-width: none; height: auto; }

/* ---- Ornament ---- */
/* Ornament — the brand's divider: hairline · mark · hairline, taken from the logo and the menu book */
.ld-orn {
  --ld-orn-line: var(--line);
  --ld-orn-mark: var(--gold);
  --ld-orn-text: var(--gilt);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  margin-inline: auto;
  color: var(--ld-orn-mark);
}
.ld-orn--start { margin-inline: 0; gap: var(--space-3); }

/* tones */
.ld-orn--quiet { --ld-orn-line: var(--line); }
.ld-orn--gold { --ld-orn-line: var(--gold); }
.ld-orn--on-dark {
  --ld-orn-line: var(--line-on-dark);
  --ld-orn-text: var(--gilt-on-dark);
}

/* the 1px hairline */
.ld-orn__line {
  flex: 1 1 0;
  min-width: var(--space-5);
  height: 1px;
  background: var(--ld-orn-line);
}
/* glint hairlines fade out toward the edges: light dispersing from the stone */
.ld-orn__line--fade-start { background: linear-gradient(to right, transparent, var(--ld-orn-line)); }
.ld-orn__line--fade-end { background: linear-gradient(to left, transparent, var(--ld-orn-line)); }

.ld-orn__mark { display: block; flex: none; fill: currentColor; }
.ld-orn__mark--diamond { width: 6.25px; height: 10px; }
.ld-orn__mark--glint { width: 18px; height: 18px; }
.ld-orn--glint { gap: var(--space-3); }
.ld-orn__glint { fill: var(--ld-orn-mark); }
.ld-orn__glint-core {
  fill: var(--highlight);
  opacity: 0.9;
  animation: ld-glint var(--dur-ambient) var(--ease-curtain) infinite;
}

/* label: the DINE & DANCE line of the wordmark */
.ld-orn__label {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--ld-orn-text);
  text-align: center;
  text-wrap: balance;
  /* tracking leaves trailing space after the last letter; mirror it so the label sits optically centred */
  padding-inline-start: 0.28em;
}
.ld-orn--label { gap: 0; container-type: inline-size; }
.ld-orn--label .ld-orn__label { margin-inline: var(--space-5); }
.ld-orn--label .ld-orn__line { min-width: var(--space-4); }
@container (max-width: 360px) {
  .ld-orn--label .ld-orn__label { margin-inline: var(--space-3); letter-spacing: 0.22em; padding-inline-start: 0.22em; }
}

/* ---- SectionHeading ---- */
/* SectionHeading — eyebrow · title · ornament · lead, as on the menu-book chapter pages */
.ld-sh {
  --ld-sh-eyebrow: var(--gilt);
  --ld-sh-title: var(--gold);
  --ld-sh-lead: var(--ink-muted);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  max-width: 100%;
}
.ld-sh--on-dark {
  --ld-sh-eyebrow: var(--gilt-on-dark);
  --ld-sh-lead: var(--on-dark-muted);
}
.ld-sh > * { margin: 0; max-width: 100%; }

.ld-sh__eyebrow { color: var(--ld-sh-eyebrow); }
.ld-sh__title {
  color: var(--ld-sh-title);
  overflow-wrap: break-word;
  hyphens: manual;
}
.ld-sh__line { display: block; text-wrap: balance; }
.ld-sh__eyebrow + .ld-sh__title { margin-top: var(--space-4); }
.ld-sh--display .ld-sh__eyebrow + .ld-sh__title { margin-top: var(--space-5); }
.ld-sh__title { max-width: 22em; }
.ld-sh--display .ld-sh__title { max-width: 16em; }

.ld-sh__ornament { margin-top: var(--space-5); }
.ld-sh--display .ld-sh__ornament { margin-top: var(--space-6); }

.ld-sh__lead {
  color: var(--ld-sh-lead);
  max-width: var(--width-text);
  margin-top: var(--space-5);
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  text-wrap: pretty;
}
.ld-sh__title + .ld-sh__lead { margin-top: var(--space-4); }
.ld-sh__extra { margin-top: var(--space-6); }

/* centred: tracked caps leave trailing space after each line; mirror it for an optical centre */
.ld-sh--center { align-items: center; text-align: center; margin-inline: auto; }
.ld-sh--center .ld-sh__eyebrow { padding-inline-start: 0.28em; }
.ld-sh--center.ld-sh--display .ld-sh__title { padding-inline-start: 0.1em; }
.ld-sh--center.ld-sh--h1 .ld-sh__title { padding-inline-start: 0.12em; }
.ld-sh--center.ld-sh--h2 .ld-sh__title { padding-inline-start: 0.14em; }
.ld-sh--center .ld-sh__lead { margin-inline: auto; }

/* reveal: a slow fade-rise, staggered, once */
.ld-sh--reveal:not(.is-in) > * { opacity: 0; }
.ld-sh--reveal.is-in > * { animation: ld-rise var(--dur-slow) var(--ease-silk) backwards; }
.ld-sh--reveal.is-in > :nth-child(2) { animation-delay: calc(var(--dur-base) * 0.25); }
.ld-sh--reveal.is-in > :nth-child(3) { animation-delay: calc(var(--dur-base) * 0.5); }
.ld-sh--reveal.is-in > :nth-child(4) { animation-delay: calc(var(--dur-base) * 0.75); }
.ld-sh--reveal.is-in > :nth-child(5) { animation-delay: calc(var(--dur-base) * 1); }

@media print {
  .ld-sh--reveal > * { opacity: 1 !important; animation: none !important; }
}

/* phones: the type scale steps down in base.css (display-l 34, h1 28, h2 22, lead 19) */
@media (max-width: 600px) {
  /* gold below 24px is not text-safe on Ivoire or forest: switch to gilt */
  .ld-sh--h2 { --ld-sh-title: var(--gilt); }
  .ld-sh--h2.ld-sh--on-dark { --ld-sh-title: var(--gilt-on-dark); }
  .ld-sh--display .ld-sh__eyebrow + .ld-sh__title { margin-top: var(--space-4); }
  .ld-sh--display .ld-sh__ornament { margin-top: var(--space-5); }
}

/* ---- ImageFrame ---- */
/* ImageFrame — the menu-book frame translated to pictures: a 1px gold hairline, right angles,
   an Art-Nouveau arch on portrait windows */
.ld-frame {
  --ld-frame-rule: color-mix(in srgb, var(--champagne) 78%, transparent);
  --ld-frame-mount: color-mix(in srgb, var(--gold) 70%, transparent);
  --ld-frame-top: var(--radius-none);
  --ld-frame-caption: var(--ink-muted);
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ld-frame--on-dark { --ld-frame-caption: var(--on-dark-muted); --ld-frame-mount: var(--frame-on-dark); }
.ld-frame--arch { --ld-frame-top: var(--radius-arch); }

.ld-frame__mount { position: relative; }
.ld-frame--outset .ld-frame__mount {
  padding: var(--space-3);
  border: 1px solid var(--ld-frame-mount);
  border-radius: var(--ld-frame-top) var(--ld-frame-top) 0 0;
}

.ld-frame__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-sunk);
  border-radius: var(--ld-frame-top) var(--ld-frame-top) 0 0;
}

.ld-frame__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  /* no opacity fade: the picture paints over the placeholder as it arrives, so a screenshot,
     a print or a slow device never catches a half-faded frame */
}

/* placeholder: the frame waits for its picture (loading), or stands alone (empty, error) */
.ld-frame__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  color: var(--ink-muted);
}
.ld-frame__placeholder-mark { width: 7.5px; height: 12px; fill: var(--gold); opacity: 0.7; }
.ld-frame.is-loading .ld-frame__placeholder-mark { animation: ld-glint var(--dur-pulse) var(--ease-curtain) infinite; }
.ld-frame__placeholder-text {
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  max-width: 24em;
}
.ld-frame.is-error .ld-frame__placeholder-text {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  text-transform: none;
}

.ld-frame__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* flat scrims, strong enough that a gilt eyebrow and a gold title hold over bright photo areas */
.ld-frame__scrim--silk { background: var(--scrim-silk); }
.ld-frame__scrim--oxblood { background: var(--scrim-oxblood); }

/* the inset hairline: 1px gold, space-3 inside the picture edge */
.ld-frame__rule {
  position: absolute;
  inset: var(--space-3);
  z-index: 3;
  border: 1px solid var(--ld-frame-rule);
  border-radius: var(--ld-frame-top) var(--ld-frame-top) 0 0;
  pointer-events: none;
}
.ld-frame.is-empty .ld-frame__rule,
.ld-frame.is-error .ld-frame__rule,
.ld-frame.is-loading .ld-frame__rule { --ld-frame-rule: var(--line); }

/* overlay content sits inside the hairline, on the scrim */
.ld-frame__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-3);
  padding: calc(var(--space-3) + var(--space-5));
  color: var(--on-dark);
}
.ld-frame--arch .ld-frame__overlay { align-items: center; text-align: center; }

/* caption + credit */
.ld-frame__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  margin-top: var(--space-3);
  color: var(--ld-frame-caption);
}
.ld-frame__caption-text { flex: 1 1 16em; min-width: 0; max-width: 46em; }
.ld-frame__credit { flex: none; }

@media (max-width: 480px) {
  .ld-frame__overlay { padding: calc(var(--space-3) + var(--space-4)); }
}

/* ---- Button ---- */
/* Button — square, hairline-drawn. Gold fill only for the one primary action per view. */
.ld-btn {
  --ld-btn-h: 52px;
  --ld-btn-px: var(--space-6);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  box-sizing: border-box;
  min-height: var(--ld-btn-h);
  min-width: var(--target-min);
  max-width: 100%;
  margin: 0;
  padding: var(--space-2) var(--ld-btn-px);
  border: 1px solid transparent;
  border-radius: var(--radius-none);
  background-color: transparent;
  color: var(--gilt);
  /* ld-button values; line-height opens up only if a long label must wrap on a phone */
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.35;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-quick) var(--ease-silk), border-color var(--dur-quick) var(--ease-silk), color var(--dur-quick) var(--ease-silk);
}
.ld-btn__label {
  display: block;
  /* the tracking adds space after the last capital; pull it back so the label sits optically centred */
  margin-inline-end: -0.2em;
  text-wrap: balance;
  transition: opacity var(--dur-quick) var(--ease-silk);
}
.ld-btn__icon {
  font-size: 16px;
  transition: transform var(--dur-base) var(--ease-silk), opacity var(--dur-quick) var(--ease-silk);
}

/* Sizes */
.ld-btn--lg { --ld-btn-h: 60px; --ld-btn-px: var(--space-7); }
@media (max-width: 480px) {
  .ld-btn { --ld-btn-h: 48px; --ld-btn-px: var(--space-5); }
  .ld-btn--lg { --ld-btn-h: 56px; --ld-btn-px: var(--space-6); }
}
/* sm: the compact control for bars and disclosures (menu nav, allergen toggle); the touch target, same type */
.ld-btn.ld-btn--sm { --ld-btn-h: var(--target-min); --ld-btn-px: var(--space-5); }
.ld-btn--full { display: flex; width: 100%; }
@media (max-width: 480px) { .ld-btn--full-mobile { display: flex; width: 100%; } }

/* Primary: the wordmark gold, with a 1px gilded top light */
.ld-btn--primary {
  background-color: var(--gold);
  border-color: var(--gold);
  border-top-color: var(--highlight);
  color: var(--on-gold);
}
@media (hover: hover) {
  .ld-btn--primary:not(:disabled):not([aria-disabled="true"]):hover {
    background-color: var(--champagne);
    border-color: var(--champagne);
    border-top-color: var(--highlight);
  }
}
.ld-btn--primary:not(:disabled):not([aria-disabled="true"]):active {
  background-color: var(--champagne);
  border-color: var(--champagne);
}
/* an engraved inner hairline, like the gold frame inset on the menu-book pages */
.ld-btn--primary::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid color-mix(in srgb, var(--on-gold) 17%, transparent);
  pointer-events: none;
}
.ld-btn--primary:disabled::after, .ld-btn--primary[aria-disabled="true"]:not(.is-loading)::after { content: none; }

/* Secondary: a gold hairline; on hover a faint gold wash sweeps in from the left and leaves to the right */
.ld-btn--secondary { border-color: var(--gold); }
.ld-btn--secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: color-mix(in srgb, var(--gold) 16%, transparent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-base) var(--ease-silk);
}
@media (hover: hover) {
  .ld-btn--secondary:not(:disabled):not([aria-disabled="true"]):hover::before { transform: scaleX(1); transform-origin: left center; }
}
.ld-btn--secondary:not(:disabled):not([aria-disabled="true"]):active::before {
  transform: scaleX(1);
  background-color: color-mix(in srgb, var(--gold) 26%, transparent);
}

/* Ghost: gilt text, a hairline underline per line, an arrow that rides on the last word.
   The box hugs its text: a long label wraps in place instead of stretching to the container. */
.ld-btn.ld-btn--ghost {
  --ld-btn-h: var(--target-min);
  --ld-btn-px: 0px;
  gap: var(--space-2);
  border: 0;
  justify-content: flex-start;
  text-align: start;
}
.ld-btn--ghost.ld-btn--lg { --ld-btn-h: 48px; }
.ld-btn--ghost .ld-btn__label {
  min-width: 0;
  margin-inline-end: 0;
  overflow-wrap: break-word;
  /* room for the underline between two wrapped lines */
  line-height: 1.85;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.6em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--dur-quick) var(--ease-silk), opacity var(--dur-quick) var(--ease-silk);
}
.ld-btn__tail { white-space: nowrap; }
/* the last letter gives its tracking back as a margin, so the underline ends on the letter */
.ld-btn__last { letter-spacing: 0; margin-inline-end: 0.2em; }
.ld-btn--ghost .ld-btn__icon--end {
  margin-inline-start: var(--space-2);
  vertical-align: -0.2em;
}
@media (hover: hover) {
  .ld-btn--ghost:not(:disabled):not([aria-disabled="true"]):hover .ld-btn__label { text-decoration-color: currentColor; }
  .ld-btn--ghost:not(:disabled):not([aria-disabled="true"]):hover .ld-btn__icon--end { transform: translateX(4px); }
}
.ld-btn--ghost:not(:disabled):not([aria-disabled="true"]):active .ld-btn__icon--end { transform: translateX(4px); }
.ld-btn--ghost.ld-btn--full, .ld-btn--ghost.ld-btn--full-mobile { justify-content: flex-start; }

/* On brand surfaces (oxblood, forest, silk, velvet) — these stay dark in both themes */
.ld-btn--on-dark.ld-btn--secondary, .ld-btn--on-dark.ld-btn--ghost { color: var(--gilt-on-dark); }
.ld-btn--on-dark.ld-btn--secondary::before { background-color: color-mix(in srgb, var(--gold) 22%, transparent); }
/* the laser ring that stays visible on the dark brand surfaces in both themes */
.ld-btn--on-dark:focus-visible { outline-color: var(--focus-on-dark); }

/* Disabled: no gold at all, so it can never be mistaken for the live action */
.ld-btn:disabled, .ld-btn[aria-disabled="true"]:not(.is-loading) { cursor: not-allowed; }
.ld-btn--primary:disabled, .ld-btn--primary[aria-disabled="true"]:not(.is-loading) {
  background-color: color-mix(in srgb, var(--ink-faint) 18%, transparent);
  border-color: transparent;
  color: var(--ink-faint);
}
.ld-btn--secondary:disabled, .ld-btn--secondary[aria-disabled="true"]:not(.is-loading) {
  border-color: color-mix(in srgb, var(--ink-faint) 60%, transparent);
  color: var(--ink-faint);
}
.ld-btn--ghost:disabled, .ld-btn--ghost[aria-disabled="true"]:not(.is-loading) { color: var(--ink-faint); }
.ld-btn--on-dark:disabled, .ld-btn--on-dark[aria-disabled="true"]:not(.is-loading) { color: color-mix(in srgb, var(--on-dark-muted) 62%, transparent); }
.ld-btn--on-dark.ld-btn--primary:disabled, .ld-btn--on-dark.ld-btn--primary[aria-disabled="true"]:not(.is-loading) { background-color: color-mix(in srgb, var(--on-dark-muted) 16%, transparent); }
.ld-btn--on-dark.ld-btn--secondary:disabled, .ld-btn--on-dark.ld-btn--secondary[aria-disabled="true"]:not(.is-loading) { border-color: color-mix(in srgb, var(--on-dark-muted) 40%, transparent); }

/* Loading: the label keeps its width, three ornament diamonds glint in turn */
.ld-btn.is-loading { cursor: progress; }
.ld-btn.is-loading .ld-btn__label, .ld-btn.is-loading .ld-btn__icon { opacity: 0; }
.ld-btn__dots {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  pointer-events: none;
}
.ld-btn--ghost .ld-btn__dots { justify-content: flex-start; }
.ld-btn__dots .ld-icon {
  font-size: 14px;
  opacity: 0.3;
  animation: ld-glint var(--dur-pulse) var(--ease-curtain) infinite;
}
.ld-btn__dots .ld-icon:nth-child(2) { animation-delay: calc(var(--dur-pulse) / 6); }
.ld-btn__dots .ld-icon:nth-child(3) { animation-delay: calc(var(--dur-pulse) / 3); }
@media (prefers-reduced-motion: reduce) {
  .ld-btn__dots .ld-icon { animation: none; opacity: 0.6; }
  .ld-btn__dots .ld-icon:nth-child(2) { opacity: 1; }
}

/* ---- Tag ---- */
/* Tag — a small tracked label in a square hairline frame. Text carries the meaning; colour only seconds it. */
.ld-tag {
  --ld-tag-ink: var(--ink-muted);
  --ld-tag-rule: var(--line);
  --ld-tag-fill: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: 24px;
  max-width: 100%;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--ld-tag-rule);
  border-radius: var(--radius-none);
  background-color: var(--ld-tag-fill);
  color: var(--ld-tag-ink);
  /* ld-label values */
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.ld-tag__text {
  /* pull back the tracking after the last capital so the frame looks evenly padded */
  margin-inline-end: -0.22em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ld-tag__icon { font-size: 11px; margin-inline-start: calc(var(--space-1) * -0.5); }

/* Tones on the page grounds (surface, surface-raised, surface-sunk) */
.ld-tag--signature {
  --ld-tag-ink: var(--gilt);
  --ld-tag-rule: color-mix(in srgb, var(--gold) 72%, transparent);
  --ld-tag-fill: color-mix(in srgb, var(--gold) 7%, transparent);
}
.ld-tag--signature .ld-tag__icon { color: var(--gold); }
:root:not([data-theme="light"]) .ld-tag--signature .ld-tag__icon { color: var(--highlight); }
.ld-tag--lapis {
  --ld-tag-ink: var(--lapis);
  --ld-tag-rule: color-mix(in srgb, var(--lapis) 55%, transparent);
  --ld-tag-fill: color-mix(in srgb, var(--lapis) 8%, transparent);
}
.ld-tag--emerald {
  --ld-tag-ink: var(--emerald);
  --ld-tag-rule: color-mix(in srgb, var(--emerald) 55%, transparent);
  --ld-tag-fill: color-mix(in srgb, var(--emerald) 8%, transparent);
}
.ld-tag--velvet {
  --ld-tag-ink: var(--on-dark);
  --ld-tag-rule: var(--frame-on-dark);
  --ld-tag-fill: var(--velvet);
}
.ld-tag--live {
  --ld-tag-ink: var(--ink);
  --ld-tag-rule: var(--line);
  gap: var(--space-2);
}
.ld-tag__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-arch);
  background-color: var(--laser);
  animation: ld-gaze var(--dur-ambient) var(--ease-curtain) infinite;
}

/* On the brand surfaces (oxblood, forest, silk) — identical in both themes */
.ld-tag--on-dark { --ld-tag-ink: var(--on-dark-muted); --ld-tag-rule: var(--line-on-dark); }
.ld-tag--on-dark.ld-tag--signature { --ld-tag-ink: var(--gilt-on-dark); --ld-tag-rule: var(--frame-on-dark); --ld-tag-fill: color-mix(in srgb, var(--gold) 10%, transparent); }
.ld-tag--on-dark.ld-tag--signature .ld-tag__icon { color: var(--highlight); }
/* deep enamel set in a gold rim, like the cabochons on the jewel goddess (the rim lies over the fill) */
.ld-tag--on-dark.ld-tag--lapis { --ld-tag-ink: var(--on-dark); --ld-tag-rule: var(--frame-on-dark); --ld-tag-fill: var(--lapis-deep); }
.ld-tag--on-dark.ld-tag--emerald { --ld-tag-ink: var(--on-dark); --ld-tag-rule: var(--frame-on-dark); --ld-tag-fill: var(--emerald-deep); }
.ld-tag--on-dark.ld-tag--velvet { --ld-tag-ink: var(--on-dark); --ld-tag-rule: var(--frame-on-dark); --ld-tag-fill: var(--velvet); }
.ld-tag--on-dark.ld-tag--live { --ld-tag-ink: var(--on-dark); }
/* the gaze on dark panels: laser-on-dark in both themes (dot and pulse ring; ld-gaze reads --laser) */
.ld-tag--on-dark .ld-tag__dot { --laser: var(--laser-on-dark); background-color: var(--laser-on-dark); }

@media (prefers-reduced-motion: reduce) {
  .ld-tag__dot { animation: none; }
}

/* ---- Notice ---- */
/* Notice — a full hairline frame in the tone colour. The block size sets its icon and title
   into the top rule (the logo's DINE & DANCE lock-up); no side accent bars, no fills. */
.ld-notice {
  --ld-notice-tone: var(--lapis);
  --ld-notice-rule: color-mix(in srgb, var(--ld-notice-tone) 42%, transparent);
  --ld-notice-ink: var(--ink);
  --ld-notice-mark: var(--ld-notice-tone);
  --ld-notice-pad: var(--space-5);
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  color: var(--ld-notice-ink);
  border: 1px solid var(--ld-notice-rule);
  border-radius: var(--radius-none);
}
.ld-notice--info { --ld-notice-tone: var(--lapis); }
.ld-notice--policy { --ld-notice-tone: var(--gilt); --ld-notice-rule: color-mix(in srgb, var(--gold) 62%, transparent); --ld-notice-mark: var(--gold); }
.ld-notice--success { --ld-notice-tone: var(--emerald); }
.ld-notice--error { --ld-notice-tone: var(--danger); --ld-notice-rule: color-mix(in srgb, var(--danger) 55%, transparent); }
/* On oxblood / forest panels (both themes): gold rule, gilt title, porcelain text */
.ld-notice--on-dark {
  --ld-notice-tone: var(--gilt-on-dark);
  --ld-notice-rule: var(--frame-on-dark);
  --ld-notice-ink: var(--on-dark);
  --ld-notice-mark: var(--gilt-on-dark);
}
.ld-notice--on-dark.ld-notice--policy { --ld-notice-mark: var(--gold); }

.ld-notice__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: var(--ld-notice-mark);
}
.ld-notice__title {
  margin: 0;
  color: var(--ld-notice-tone);
  /* ld-label values */
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ld-notice__body {
  /* ld-small values */
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ld-notice-ink);
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.ld-notice__body > p { margin: 0; }
.ld-notice__body > p + p { margin-top: var(--space-2); }

/* ---------- block ---------- */
.ld-notice--block {
  border-top-width: 0;
  margin-top: 8px;
  padding: 0 var(--ld-notice-pad) var(--ld-notice-pad);
}
.ld-notice__head {
  display: flex;
  align-items: flex-start;
  /* lift the head so its rule sits exactly where the missing top border would be */
  margin: -8px calc(-1px - var(--ld-notice-pad)) var(--space-3);
}
.ld-notice__rule {
  flex: none;
  height: 1px;
  margin-top: 8px;
  background-color: var(--ld-notice-rule);
}
.ld-notice__rule--lead { width: calc(var(--ld-notice-pad) - var(--space-2) + 1px); }
.ld-notice__rule--fill { flex: 1 1 var(--space-4); min-width: var(--space-4); margin-inline-start: var(--space-2); }
/* no icon, no title: the rule runs unbroken like a plain top border */
.ld-notice__rule--lead + .ld-notice__rule--fill { margin-inline-start: 0; }
.ld-notice__rule--tail { width: var(--space-3); margin-inline-start: var(--space-2); }
.ld-notice--block .ld-notice__icon { margin-inline-start: var(--space-2); }
.ld-notice--block .ld-notice__title { flex: 0 1 auto; min-width: 0; margin-inline-start: var(--space-2); padding-top: 1px; }
.ld-notice--block .ld-notice__close { margin-inline-start: var(--space-2); }
.ld-notice--block .ld-notice__body { max-width: 64ch; }
.ld-notice--block .ld-notice__action { margin-top: var(--space-2); margin-bottom: calc(var(--space-3) * -1); }

/* ---------- inline (form level) ---------- */
.ld-notice--inline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.ld-notice--inline .ld-notice__icon { margin-top: 3px; }
.ld-notice--inline .ld-notice__content {
  flex: 1 1 auto;
  min-width: 0;
  /* the line box follows the 14px body, not the 18px page text */
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}
.ld-notice--inline .ld-notice__title { display: inline; margin-inline-end: var(--space-2); }
.ld-notice--inline.ld-notice--error .ld-notice__body { color: var(--danger); }
.ld-notice--inline .ld-notice__action { display: block; margin-block: var(--space-1) calc(var(--space-3) * -1); }

/* ---------- dismiss ---------- */
.ld-notice__close {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 17px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--ld-notice-ink);
  font-size: 14px;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity var(--dur-quick) var(--ease-silk), color var(--dur-quick) var(--ease-silk);
}
/* the glyph stays small; the touch target is a full 44 x 44 */
.ld-notice__close::before { content: ""; position: absolute; top: 50%; left: 50%; width: var(--target-min); height: var(--target-min); transform: translate(-50%, -50%); }
@media (hover: hover) { .ld-notice__close:hover { opacity: 1; color: var(--ld-notice-tone); } }
.ld-notice--inline .ld-notice__close { margin-top: 2px; }
.ld-notice--on-dark .ld-notice__close:focus-visible { outline-color: var(--focus-on-dark); }

@media (max-width: 480px) {
  .ld-notice { --ld-notice-pad: var(--space-4); }
  .ld-notice--inline { padding: var(--space-3); }
}

/* ---- SiteHeader ---- */
/* SiteHeader — two-tier jewel-box header. Always a dark band (forest when solid, transparent over the
   hero when overlay), so it carries data-theme="dark" and on-dark text in both themes. */
.ld-siteheader {
  --_logo: 200px;
  --_rule: var(--line-on-dark);
  position: relative;
  z-index: var(--z-header);
  color: var(--on-dark);
  font-family: var(--font-ui);
}
.ld-siteheader--solid { background: var(--forest); border-bottom: 1px solid var(--line-on-dark); }
.ld-siteheader--overlay { position: absolute; inset: 0 0 auto 0; background: color-mix(in srgb, var(--silk) 34%, transparent); }
.ld-siteheader--overlay .ld-siteheader__nav { border-bottom: 1px solid var(--_rule); }
.ld-siteheader--solid.ld-siteheader--sticky { position: sticky; top: 0; }

.ld-siteheader__bar { container-type: inline-size; max-width: var(--width-page); margin: 0 auto; padding: 0 var(--space-8); }
.ld-siteheader__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--space-5);
  height: var(--header-height);
}
.ld-siteheader__start { justify-self: start; display: flex; align-items: center; margin-left: calc(var(--space-3) * -1); }
.ld-siteheader__end { justify-self: end; display: flex; align-items: center; gap: var(--space-2); }

/* Wordmark, sized by its artwork width */
.ld-siteheader__brand { display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: var(--target-min); padding: 0 var(--space-2); color: inherit; }
.ld-siteheader__logo { display: block; width: var(--_logo); flex: none; }
.ld-siteheader__logo > svg { display: block; width: 100%; height: auto; }
.ld-siteheader__logo-file { display: block; width: 121.94%; max-width: none; height: auto; margin: -11.04% -10.97%; }

/* Second tier: the navigation between hairlines */
.ld-siteheader__nav { border-top: 1px solid var(--_rule); }
.ld-siteheader__navlist {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; align-items: center;
  column-gap: clamp(var(--space-5), 4vw, var(--space-7));
  height: var(--space-7);
}
.ld-siteheader__link {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: var(--target-min);
  padding-left: 0.22em; /* mirrors the tracking after the last letter */
  color: var(--on-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-quick) var(--ease-silk);
}
.ld-siteheader__link::after {
  content: "";
  position: absolute; left: 0.22em; right: 0.22em; bottom: 9px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-silk);
}
.ld-siteheader__link:hover { color: var(--gilt-on-dark); }
.ld-siteheader__link:hover::after,
.ld-siteheader__link[aria-current="page"]::after { transform: scaleX(1); }
.ld-siteheader__link[aria-current="page"] { color: var(--gilt-on-dark); }

/* Language switch DE | EN */
.ld-siteheader__lang { display: flex; align-items: center; }
.ld-siteheader__lang-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--target-min); min-height: var(--target-min);
  padding-left: 0.22em;
  color: var(--on-dark-muted);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-silk);
}
.ld-siteheader__lang-link:hover { color: var(--on-dark); }
.ld-siteheader__lang-link[aria-current="true"] { color: var(--gilt-on-dark); }
.ld-siteheader__lang-sep { width: 1px; height: 14px; background: var(--line-on-dark); }

.ld-siteheader__iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--target-min); height: var(--target-min);
  padding: 0; margin: 0;
  background: transparent; border: 0; border-radius: var(--radius-none);
  color: var(--on-dark);
  cursor: pointer;
  transition: color var(--dur-quick) var(--ease-silk);
}
.ld-siteheader__iconbtn:hover { color: var(--gilt-on-dark); }

/* Only if the shared Button is missing */
.ld-siteheader__fallback-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target-min); padding: 0 var(--space-5);
  border: 1px solid var(--gold); color: var(--gilt-on-dark); text-decoration: none; background: transparent;
}

/* Desktop: the compact controls stay hidden */
.ld-siteheader .ld-siteheader__cta-short, .ld-siteheader .ld-siteheader__menubtn { display: none; }
.ld-siteheader__cta.ld-btn { --ld-btn-h: 48px; --ld-btn-px: var(--space-5); }

/* ---------- Mobile bar (< 820px, or layout="mobile") ---------- */
/* the wordmark keeps its 180px screen minimum on phones */
.ld-siteheader--mobile { --_logo: 180px; }
.ld-siteheader--mobile .ld-siteheader__bar { padding: 0 var(--space-1) 0 var(--space-4); }
.ld-siteheader--mobile .ld-siteheader__top { grid-template-columns: minmax(0, 1fr) auto; height: var(--header-height-phone); column-gap: var(--space-3); }
.ld-siteheader--mobile .ld-siteheader__start,
.ld-siteheader--mobile .ld-siteheader__nav,
.ld-siteheader--mobile .ld-siteheader__cta { display: none; }
.ld-siteheader--mobile .ld-siteheader__brand { justify-self: start; justify-content: flex-start; padding: 0; }
.ld-siteheader--mobile .ld-siteheader__cta-short { display: inline-flex; }
.ld-siteheader--mobile .ld-siteheader__menubtn { display: inline-flex; }
.ld-siteheader--mobile .ld-siteheader__reservebar { display: flex; }

@media (max-width: 1023.98px) {
  .ld-siteheader--auto .ld-siteheader__bar, .ld-siteheader--desktop .ld-siteheader__bar { padding: 0 var(--space-6); }
}
@media (max-width: 819.98px) {
  .ld-siteheader--auto { --_logo: 180px; }
  .ld-siteheader--auto .ld-siteheader__bar { padding: 0 var(--space-1) 0 var(--space-4); }
  .ld-siteheader--auto .ld-siteheader__top { grid-template-columns: minmax(0, 1fr) auto; height: var(--header-height-phone); column-gap: var(--space-3); }
  .ld-siteheader--auto .ld-siteheader__start,
  .ld-siteheader--auto .ld-siteheader__nav,
  .ld-siteheader--auto .ld-siteheader__cta { display: none; }
  .ld-siteheader--auto .ld-siteheader__brand { justify-self: start; justify-content: flex-start; padding: 0; }
  .ld-siteheader--auto .ld-siteheader__cta-short { display: inline-flex; }
  .ld-siteheader--auto .ld-siteheader__menubtn { display: inline-flex; }
  .ld-siteheader--auto .ld-siteheader__reservebar { display: flex; }
}
/* the compact hairline button (phones from about 406px): 44px target, tighter tracking */
.ld-siteheader .ld-siteheader__cta-short.ld-btn {
  --ld-btn-h: var(--target-min);
  --ld-btn-px: var(--space-4);
  padding-block: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
}
.ld-siteheader__cta-short .ld-btn__label { margin-inline-end: -0.16em; }
/* Narrow bars (phones up to about 406px, or a header inside a padded column): the 180px wordmark, the
   compact button and the menu button need 386px. The wordmark keeps its 180px minimum and the compact
   button gives way; the booking stays in the sticky reserve bar (showReserveBar) and in the menu sheet. */
@container (max-width: 386px) {
  .ld-siteheader .ld-siteheader__cta-short { display: none; }
}

/* ---------- Full-screen sheet on oxblood: the menu-book page with its gold hairline frame ---------- */
@keyframes ld-siteheader-sheet { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.ld-siteheader__sheet {
  --_logo: 180px;
  position: fixed; inset: 0;
  z-index: var(--z-sheet);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--oxblood);
  color: var(--on-dark);
}
.ld-siteheader__sheet.is-entering { animation: ld-siteheader-sheet var(--dur-base) var(--ease-curtain) both; }
.ld-siteheader__sheet-inner {
  position: relative;
  min-height: 100%;
  display: flex; flex-direction: column;
  padding: var(--space-3) calc(var(--space-3) + var(--space-5)) calc(var(--space-3) + var(--space-5));
}
.ld-siteheader__sheet-inner::before {
  content: "";
  position: absolute; inset: var(--space-3);
  border: 1px solid var(--frame-on-dark);
  pointer-events: none;
}
.ld-siteheader__sheet-head {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-height-phone);
  margin-right: calc(var(--space-3) * -1);
}
.ld-siteheader__sheet-head .ld-siteheader__brand { padding: 0; align-self: center; }
.ld-siteheader__sheet-nav { margin-top: var(--space-5); }
.ld-siteheader__sheet-list { list-style: none; margin: 0; padding: 0; }
.ld-siteheader__sheet-list li { border-top: 1px solid var(--_rule); }
.ld-siteheader__sheet-list li:last-child { border-bottom: 1px solid var(--_rule); }
.ld-siteheader__sheet-link {
  display: flex; align-items: baseline; gap: var(--space-4);
  min-height: 60px;
  padding: var(--space-4) 0;
  color: var(--on-dark);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-silk);
}
.ld-siteheader__sheet-link:hover, .ld-siteheader__sheet-link[aria-current="page"] { color: var(--gilt-on-dark); }
.ld-siteheader__sheet-num { color: var(--gilt-on-dark); min-width: 2.4em; }
.ld-siteheader__sheet-label {
  font-family: var(--font-display);
  font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ld-siteheader__sheet-gem { margin-left: auto; align-self: center; font-size: 10px; color: var(--gold); }
.ld-siteheader__sheet-foot { margin-top: auto; padding-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.ld-siteheader__sheet-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.ld-siteheader__sheet-meta .ld-siteheader__lang { margin-right: calc(var(--space-3) * -1); }
.ld-siteheader__sheet-contact { margin: 0; color: var(--on-dark-muted); display: flex; flex-direction: column; }
@media (min-width: 560px) {
  .ld-siteheader__sheet-label { font-size: 28px; }
}

/* ---------- Sticky reserve bar for phones ---------- */
.ld-siteheader__reservebar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-reserve-bar);
  flex-direction: column; align-items: stretch; gap: var(--space-2);
  padding: var(--space-3) var(--space-4) max(var(--space-3), env(safe-area-inset-bottom));
  background: var(--forest);
  border-top: 1px solid var(--line-on-dark);
}
.ld-siteheader__reservebar--always { display: flex; }
.ld-siteheader.is-open .ld-siteheader__reservebar { display: none; }
.ld-siteheader__reservebar .ld-siteheader__bar-cta { display: flex; width: 100%; }
.ld-siteheader__reservebar .ld-siteheader__bar-cta.ld-btn { --ld-btn-h: 48px; }
.ld-siteheader__reservenote {
  margin: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  color: var(--on-dark-muted);
  text-align: center;
}
.ld-siteheader__live-dot {
  width: 7px; height: 7px; flex: none;
  border-radius: var(--radius-arch);
  --laser: var(--laser-on-dark); /* ld-gaze draws its ring in --laser */
  background: var(--laser-on-dark);
  animation: ld-gaze var(--dur-ambient) var(--ease-silk) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ld-siteheader__sheet { animation: none; }
  .ld-siteheader__live-dot { animation: none; }
}

/* ---- Hero ---- */
/* Hero — poster first, silk ground, a gold hairline frame like the menu-book pages.
   Always dark (silk + scrim), so it carries data-theme="dark" and on-dark text in both themes. */
.ld-hero {
  --_inset: var(--space-5);
  --_step: calc(var(--dur-quick) * 0.75);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column;
  container-type: inline-size;
  background: var(--silk);
  color: var(--on-dark);
}
.ld-hero--full { min-height: 88vh; min-height: 88svh; }
.ld-hero--compact { min-height: 420px; }

/* Media layer: the poster paints first; the video fades in only once it plays */
.ld-hero__media { position: absolute; inset: 0; z-index: -1; }
.ld-hero__poster, .ld-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ld-hero__video { opacity: 0; transition: opacity var(--dur-slow) var(--ease-silk); }
.ld-hero__video.is-ready { opacity: 1; }
/* One flat silk scrim for cover and compact. Busy photography (the Edison-bulb ceiling) must never sit brighter
   than the small gilt eyebrow can bear: --scrim-silk (62 %) measures 3.9:1 for the eyebrow over the bulbs,
   70 % keeps 4.9:1. Until a stronger scrim token exists, the hero mixes its own from --silk. */
.ld-hero__scrim { position: absolute; inset: 0; background: var(--scrim-silk); }

/* The gold hairline frame with a gem on its axis */
.ld-hero__frame {
  position: absolute; inset: var(--_inset);
  z-index: 0;
  border: 1px solid var(--frame-on-dark);
  pointer-events: none;
}
.ld-hero__frame-gem { position: absolute; left: 50%; font-size: 10px; color: var(--gold); }
.ld-hero__frame-gem--top { top: 0; transform: translate(-50%, -50%); }
.ld-hero__frame-gem--bottom { bottom: 0; transform: translate(-50%, 50%); }

.ld-hero__inner {
  position: relative; z-index: 1;
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  width: 100%;
  padding: calc(var(--_inset) + var(--space-9)) calc(var(--_inset) + var(--space-8)) calc(var(--_inset) + var(--space-6));
}

/* ---------- Content ---------- */
.ld-hero__content { display: flex; flex-direction: column; }
.ld-hero--cover .ld-hero__content {
  margin: auto;
  align-items: center;
  text-align: center;
  max-width: 880px;
}
.ld-hero__emblem { display: block; width: clamp(150px, 27cqi, 280px); height: auto; margin-bottom: var(--space-5); }
.ld-hero__eyebrow { margin: 0 0 var(--space-4); color: var(--gilt-on-dark); }
.ld-hero__title { color: var(--gold); font-size: clamp(48px, 9cqi, 96px); }
.ld-hero--compact .ld-hero__title { font-size: clamp(34px, 6.4cqi, 56px); }
.ld-hero--arch .ld-hero__title { font-size: clamp(40px, 6.4cqi, 84px); }
.ld-hero--cover .ld-hero__eyebrow { padding-left: 0.28em; }
.ld-hero--cover .ld-hero__title { padding-left: 0.07em; }

.ld-hero__rule { display: flex; align-items: center; gap: var(--space-3); width: 168px; margin: var(--space-5) 0 0; color: var(--gold); }
.ld-hero--cover .ld-hero__rule { margin-inline: auto; }
.ld-hero--arch .ld-hero__rule, .ld-hero--compact .ld-hero__rule { margin-inline: 0; }
.ld-hero__rule-line { width: var(--space-8); height: 1px; background: var(--line-on-dark); }
.ld-hero__rule-gem { font-size: 9px; }

.ld-hero__lead { margin: var(--space-5) 0 0; max-width: 27em; color: var(--on-dark); hyphens: auto; text-wrap: pretty; }
.ld-hero--cover .ld-hero__lead { text-wrap: balance; }
.ld-hero--compact .ld-hero__lead { margin-top: var(--space-4); max-width: 30em; }

.ld-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }
.ld-hero--cover .ld-hero__actions { justify-content: center; }

.ld-hero__actions .ld-hero__btn { min-width: 248px; }
.ld-hero__fallback-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 var(--space-6);
  border: 1px solid var(--gold); color: var(--gilt-on-dark); text-decoration: none;
}

/* The live signal: the goddess's laser gaze, reserved for "tonight" */
.ld-hero__live { display: flex; margin: var(--space-6) 0 0; }
/* the Tag (onDark) draws the gaze in --laser-on-dark; the fallback dot matches it */
.ld-hero__live-fallback { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--on-dark); }
.ld-hero__live-dot { width: 8px; height: 8px; flex: none; border-radius: var(--radius-arch); background: var(--laser-on-dark); }

/* Dinner · Lounge · Dance */
.ld-hero__acts {
  list-style: none;
  display: flex; justify-content: center;
  gap: var(--space-8);
  width: 100%; max-width: 640px;
  margin: var(--space-8) auto 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--line-on-dark);
}
.ld-hero__act { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ld-hero__act + .ld-hero__act::before {
  content: "";
  position: absolute; top: 3px; left: calc(var(--space-8) / -2 - 3px);
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}
.ld-hero__act-label { color: var(--on-dark); padding-left: 0.22em; }
.ld-hero__act-time { color: var(--on-dark-muted); font-style: italic; }

/* Pause / play (WCAG 2.2.2) */
.ld-hero__toggle {
  position: absolute; z-index: 2;
  right: calc(var(--_inset) + var(--space-4)); bottom: calc(var(--_inset) + var(--space-4));
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--target-min); height: var(--target-min);
  padding: 0;
  border: 1px solid var(--frame-on-dark);
  border-radius: var(--radius-none);
  background: var(--scrim-silk);
  color: var(--on-dark);
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-silk), color var(--dur-quick) var(--ease-silk);
}
.ld-hero__toggle:hover { background: color-mix(in srgb, var(--silk) 80%, transparent); color: var(--gilt-on-dark); }

/* ---------- Arch layout: vertical footage in an Art-Nouveau window ---------- */
.ld-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-8);
  margin-block: auto;
}
@container (min-width: 641px) {
  .ld-hero--arch .ld-hero__inner { padding-left: calc(var(--_inset) + var(--space-7)); padding-right: calc(var(--_inset) + var(--space-7)); }
}
.ld-hero--arch .ld-hero__content { align-items: flex-start; text-align: left; }
.ld-hero--arch .ld-hero__actions { align-self: stretch; }
.ld-hero--arch .ld-hero__actions .ld-hero__btn { flex: 1 1 248px; min-width: 0; }
.ld-hero--arch .ld-hero__acts { justify-content: flex-start; margin-left: 0; }
.ld-hero__arch {
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-arch) var(--radius-arch) 0 0;
}
.ld-hero__arch-window {
  position: relative;
  width: clamp(200px, 28cqi, 340px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--frame-on-dark);
  border-radius: var(--radius-arch) var(--radius-arch) 0 0;
  background: var(--silk);
}
.ld-hero__arch-window .ld-hero__toggle { right: var(--space-3); bottom: var(--space-3); }

/* ---------- Compact: chapter title over an image ---------- */
.ld-hero--compact .ld-hero__inner { justify-content: flex-end; padding-bottom: calc(var(--_inset) + var(--space-7)); }
.ld-hero--compact .ld-hero__content { margin-top: auto; align-items: flex-start; text-align: left; max-width: 760px; }

/* Under an overlay SiteHeader (header-height-total on desktop, header-height-phone below 820px) */
.ld-hero--under-header .ld-hero__inner { padding-top: calc(var(--header-height-total) + var(--space-8)); }
.ld-hero--under-header .ld-hero__frame { top: calc(var(--header-height-total) + var(--space-4)); }
.ld-hero--under-header .ld-hero__frame-gem--top { display: none; }
@media (max-width: 819.98px) {
  .ld-hero--under-header .ld-hero__inner { padding-top: calc(var(--header-height-phone) + var(--space-8)); }
  .ld-hero--under-header .ld-hero__frame { top: calc(var(--header-height-phone) + var(--space-2)); }
}

/* ---------- Phones (container) ---------- */
@container (max-width: 640px) {
  .ld-hero__frame { inset: var(--space-3); }
  .ld-hero__inner { padding: calc(var(--space-3) + var(--space-9)) calc(var(--space-3) + var(--space-5)) calc(var(--space-3) + var(--space-5)); }
  .ld-hero--compact .ld-hero__inner { padding-bottom: calc(var(--space-3) + var(--space-6)); }
  .ld-hero__lead { font-size: 19px; }
  .ld-hero__actions { flex-direction: column; align-self: stretch; }
  .ld-hero__actions .ld-hero__btn,
  .ld-hero--arch .ld-hero__actions .ld-hero__btn { display: flex; flex: 0 0 auto; width: 100%; min-width: 0; }
  .ld-hero__acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: var(--space-7); }
  .ld-hero__act + .ld-hero__act { border-left: 1px solid var(--line-on-dark); }
  .ld-hero__act + .ld-hero__act::before { content: none; }
  .ld-hero__act-label { font-size: 12px; letter-spacing: 0.18em; padding-left: 0.18em; }
  .ld-hero__toggle { right: calc(var(--space-3) + var(--space-3)); bottom: calc(var(--space-3) + var(--space-3)); }
  .ld-hero--cover.ld-hero--has-video .ld-hero__inner, .ld-hero--chapter.ld-hero--has-video .ld-hero__inner { padding-bottom: calc(var(--space-3) + var(--space-9)); }
  .ld-hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-7); }
  .ld-hero__arch { justify-self: center; }
  .ld-hero__arch-window { width: min(68cqi, 300px); }
  .ld-hero--arch .ld-hero__acts { justify-content: center; margin-left: auto; }
}

/* ---------- One orchestrated awakening: emblem, then headline, then the calls to action ----------
   is-pending holds the content back for the single frame before the first animation frame. */
.ld-hero.is-pending .ld-hero__content > *, .ld-hero.is-pending .ld-hero__actions > *, .ld-hero.is-pending .ld-hero__acts { opacity: 0; }
.ld-hero--animate .ld-hero__emblem { animation: ld-rise var(--dur-reveal) var(--ease-silk) both; }
.ld-hero--animate .ld-hero__eyebrow { animation: ld-rise var(--dur-reveal) var(--ease-silk) calc(var(--_step) * 2) both; }
.ld-hero--animate .ld-hero__title { animation: ld-rise var(--dur-reveal) var(--ease-silk) calc(var(--_step) * 3) both; }
.ld-hero--animate .ld-hero__rule { animation: ld-fade var(--dur-reveal) var(--ease-silk) calc(var(--_step) * 4) both; }
.ld-hero--animate .ld-hero__lead { animation: ld-rise var(--dur-reveal) var(--ease-silk) calc(var(--_step) * 5) both; }
.ld-hero--animate .ld-hero__btn:nth-child(1) { animation: ld-rise var(--dur-reveal) var(--ease-silk) calc(var(--_step) * 6.5) both; }
.ld-hero--animate .ld-hero__btn:nth-child(2) { animation: ld-rise var(--dur-reveal) var(--ease-silk) calc(var(--_step) * 7.5) both; }
.ld-hero--animate .ld-hero__live { animation: ld-fade var(--dur-reveal) var(--ease-silk) calc(var(--_step) * 9) both; }
.ld-hero--animate .ld-hero__acts { animation: ld-fade var(--dur-reveal) var(--ease-silk) calc(var(--_step) * 10) both; }

@media (prefers-reduced-motion: reduce) {
  .ld-hero--animate .ld-hero__emblem, .ld-hero--animate .ld-hero__eyebrow, .ld-hero--animate .ld-hero__title,
  .ld-hero--animate .ld-hero__rule, .ld-hero--animate .ld-hero__lead, .ld-hero--animate .ld-hero__btn,
  .ld-hero--animate .ld-hero__live, .ld-hero--animate .ld-hero__acts { animation: none; }
  .ld-hero__video { transition: none; }
}

/* ---- Footer ---- */
/* Footer — the forest band of the uniform deck. Dark in both themes: on-dark text, gold hairlines. */
.ld-footer {
  container-type: inline-size;
  background: var(--forest);
  color: var(--on-dark);
  border-top: 1px solid var(--line-on-dark);
}
.ld-footer__inner { max-width: var(--width-page); margin: 0 auto; padding: var(--space-9) var(--space-8) var(--space-6); }

/* Wordmark + the hairline with its gem */
.ld-footer__brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.ld-footer__home { display: inline-block; line-height: 0; color: inherit; }
.ld-footer__logo { display: block; width: 236px; }
.ld-footer__logo > svg { display: block; width: 100%; height: auto; }
.ld-footer__logo-file { display: block; width: 121.94%; max-width: none; height: auto; margin: -11.04% -10.97%; }
.ld-footer__ornament { position: relative; width: 100%; }
.ld-footer__ornament-fallback { display: flex; align-items: center; gap: var(--space-4); }
.ld-footer__ornament-line { flex: 1 1 0; height: 1px; background: var(--line-on-dark); }
.ld-footer__gem-diamond { font-size: 10px; color: var(--gold); }
/* the glint: a four-point star that flares once over the gem when the footer comes into view */
.ld-footer__gem-glint {
  position: absolute; left: 50%; top: 50%;
  font-size: 30px; margin: -15px 0 0 -15px;
  color: var(--highlight);
  opacity: 0;
  pointer-events: none;
}
@keyframes ld-footer-glint {
  0% { opacity: 0; transform: scale(0.4) rotate(-25deg); }
  45% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.6) rotate(20deg); }
}
.ld-footer__ornament.is-glinting .ld-footer__gem-glint { animation: ld-footer-glint 1600ms var(--ease-silk) var(--dur-base) 1 both; }

/* Four columns */
.ld-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-7);
  margin-top: var(--space-8);
}
.ld-footer__heading { margin: 0 0 var(--space-4); color: var(--gilt-on-dark); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line-on-dark); }
.ld-footer__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.ld-footer__address { display: flex; flex-direction: column; font-style: normal; color: var(--on-dark); }
.ld-footer__muted { margin: 0; color: var(--on-dark-muted); font-style: italic; }
.ld-footer__note { margin: 0; color: var(--on-dark-muted); }

.ld-footer__hours { margin: 0; width: 100%; display: flex; flex-direction: column; }
.ld-footer__hours-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: var(--space-1) 0;
}
.ld-footer__hours-row + .ld-footer__hours-row { border-top: 1px solid var(--line-on-dark); }
.ld-footer__hours dt { color: var(--on-dark); }
.ld-footer__hours dd { margin: 0; color: var(--on-dark-muted); font-variant-numeric: lining-nums tabular-nums; text-align: right; }

.ld-footer__contacts, .ld-footer__social { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ld-footer__contact-link, .ld-footer__contact-text {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 32px;
  color: var(--on-dark);
  text-decoration: none;
}
.ld-footer__contact-link { min-height: var(--target-min); }
.ld-footer__contact-link:hover { color: var(--gilt-on-dark); }
.ld-footer__contact-icon { font-size: 16px; color: var(--gilt-on-dark); }

.ld-footer__link {
  display: inline-flex; align-items: center;
  min-height: var(--target-min);
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--frame-on-dark);
  transition: color var(--dur-quick) var(--ease-silk), text-decoration-color var(--dur-quick) var(--ease-silk);
}
.ld-footer__link:hover { color: var(--gilt-on-dark); text-decoration-color: var(--gilt-on-dark); }

.ld-footer__btn { margin-top: var(--space-2); }
.ld-footer__btn.ld-btn { --ld-btn-h: 48px; --ld-btn-px: var(--space-5); }
.ld-footer__fallback-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--space-5);
  border: 1px solid var(--gold); color: var(--gilt-on-dark); text-decoration: none;
}

/* Legal row and fine print */
.ld-footer__base {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-on-dark);
}
.ld-footer__legal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.ld-footer__legal-list li { display: inline-flex; align-items: center; }
.ld-footer__legal-list li + li::before { content: ""; width: 4px; height: 4px; margin: 0 var(--space-3); background: var(--gold); transform: rotate(45deg); }
.ld-footer__legal-link {
  display: inline-flex; align-items: center;
  min-height: var(--target-min);
  padding: 0; margin: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit;
  color: var(--on-dark-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-quick) var(--ease-silk);
}
.ld-footer__legal-link:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--frame-on-dark); }
.ld-footer__fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-5); color: var(--on-dark-muted); }
.ld-footer__fine p { margin: 0; }

/* Phone room for the sticky reserve bar of the SiteHeader */
@media (max-width: 819.98px) {
  .ld-footer--reservebar .ld-footer__inner { padding-bottom: calc(var(--space-6) + var(--space-3) * 2 + 49px); }
}

/* Tablet and phone */
@container (max-width: 900px) {
  .ld-footer__inner { padding: var(--space-8) var(--space-6) var(--space-6); }
  .ld-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 560px) {
  .ld-footer__inner { padding: var(--space-8) var(--space-4) var(--space-5); }
  .ld-footer__logo { width: 196px; }
  .ld-footer__cols { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); margin-top: var(--space-7); }
  .ld-footer__base { margin-top: var(--space-7); }
  .ld-footer__legal-list { flex-direction: column; align-items: flex-start; }
  .ld-footer__legal-list li + li::before { content: none; }
  .ld-footer__fine { flex-direction: column; padding-top: var(--space-2); border-top: 1px solid var(--line-on-dark); }
}
@media (prefers-reduced-motion: reduce) {
  .ld-footer__ornament.is-glinting .ld-footer__gem-glint { animation: none; }
}

/* ---- EventCard ---- */
/* EventCard — a night on the programme: date block in Spectral, hairline rules, optional arch image.
   tone="dark" remaps the local colours for forest / oxblood bands. */
.ld-eventcard {
  --_ink: var(--ink);
  --_muted: var(--ink-muted);
  --_gilt: var(--gilt);
  --_line: var(--line);
  --_strong: var(--line-strong);
  container-type: inline-size;
  position: relative;
  color: var(--_ink);
}
.ld-eventcard--dark {
  --_ink: var(--on-dark);
  --_muted: var(--on-dark-muted);
  --_gilt: var(--gilt-on-dark);
  --_line: var(--line-on-dark);
  --_strong: var(--frame-on-dark);
}

/* The grid lives one level down so the container query can read the article's width */
.ld-eventcard__grid { display: grid; }
.ld-eventcard--row {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--_line);
  border-bottom: 1px solid var(--_line);
  transition: background-color var(--dur-base) var(--ease-silk);
}
.ld-eventcard--row + .ld-eventcard--row { border-top: 0; }
.ld-eventcard--row .ld-eventcard__grid {
  grid-template-columns: 112px auto minmax(0, 1fr) auto;
  grid-template-areas: "date media body action";
  align-items: center;
  column-gap: var(--space-6);
}
.ld-eventcard--row:not(.ld-eventcard--has-media) .ld-eventcard__grid { grid-template-columns: 112px minmax(0, 1fr) auto; grid-template-areas: "date body action"; }

.ld-eventcard--card {
  height: 100%;
  padding: var(--space-3) var(--space-3) var(--space-5);
  border: 1px solid var(--_line);
  transition: border-color var(--dur-base) var(--ease-silk);
}
.ld-eventcard--card:hover { border-color: var(--_strong); }
.ld-eventcard--card .ld-eventcard__grid {
  height: 100%;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "media" "date" "body" "action";
}

/* Date block: weekday caps · big Spectral numeral · month */
.ld-eventcard__date {
  grid-area: date;
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1);
  text-align: center;
  padding-right: var(--space-6);
  border-right: 1px solid var(--_line);
}
/* In cards the date becomes a plate: numeral | weekday over month */
.ld-eventcard--card .ld-eventcard__date {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "day wd" "day mo";
  column-gap: var(--space-4); row-gap: 2px;
  align-items: center;
  text-align: left;
  margin: 0 var(--space-2) var(--space-4);
  padding: 0 0 var(--space-4);
  border-right: 0;
  border-bottom: 1px solid var(--_line);
}
.ld-eventcard--card .ld-eventcard__day { grid-area: day; padding-right: var(--space-4); border-right: 1px solid var(--_line); }
.ld-eventcard--card .ld-eventcard__weekday { grid-area: wd; align-self: end; padding-left: 0; }
.ld-eventcard--card .ld-eventcard__month { grid-area: mo; align-self: start; padding-left: 0; }
.ld-eventcard--card .ld-eventcard__date--open .ld-eventcard__month { max-width: none; }
.ld-eventcard__weekday { color: var(--_gilt); padding-left: 0.22em; }
.ld-eventcard__day {
  font-family: var(--font-display);
  font-size: 56px; line-height: 1; font-weight: 300; letter-spacing: 0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold);
}
.ld-eventcard--card .ld-eventcard__day { font-size: 44px; min-width: 1.2em; text-align: center; }
.ld-eventcard__day--gem { display: flex; align-items: center; justify-content: center; height: 56px; font-size: 14px; }
.ld-eventcard--card .ld-eventcard__day--gem { height: 44px; min-width: 52px; font-size: 14px; }
.ld-eventcard__month { color: var(--_muted); padding-left: 0.22em; }
.ld-eventcard__date--open .ld-eventcard__month { max-width: 6.5em; line-height: 1.5; }

/* Arch image (portrait only), drawn by the shared ImageFrame */
.ld-eventcard__media { grid-area: media; min-width: 0; }
.ld-eventcard--row .ld-eventcard__media { width: 84px; }
.ld-eventcard--card .ld-eventcard__media { margin-bottom: var(--space-5); }
.ld-eventcard .ld-frame__img { transition: transform var(--dur-slow) var(--ease-silk), filter var(--dur-slow) var(--ease-silk); }
.ld-eventcard:hover .ld-frame__img { transform: scale(1.035); }
.ld-eventcard.is-soldout .ld-frame__img, .ld-eventcard.is-soldout .ld-eventcard__img { filter: grayscale(0.7) brightness(0.62); }
.ld-eventcard__media--plain { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-arch) var(--radius-arch) 0 0; }
.ld-eventcard__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Body */
.ld-eventcard__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ld-eventcard__tags { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ld-eventcard__tag { display: inline-flex; }
.ld-eventcard__tag-fallback { padding: 2px var(--space-2); border: 1px solid var(--_strong); color: var(--_gilt); }
.ld-eventcard__title { margin: 0; color: var(--_ink); }
.ld-eventcard__lineup { margin: var(--space-1) 0 0; color: var(--_muted); }
.ld-eventcard__time { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-2) 0 0; color: var(--_muted); font-size: 15px; }
.ld-eventcard__time-icon { font-size: 16px; margin-top: 3px; color: var(--_gilt); }
.ld-eventcard__note { margin: var(--space-2) 0 0; color: var(--_muted); }

/* Call to action: the gilt ghost link */
.ld-eventcard__action { grid-area: action; justify-self: end; }
.ld-eventcard__cta { white-space: nowrap; }
.ld-eventcard--card .ld-eventcard__body { padding: 0 var(--space-2); }
.ld-eventcard--card .ld-eventcard__action {
  justify-self: stretch;
  margin: var(--space-5) var(--space-2) 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--_line);
}
.ld-eventcard__fallback-btn { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--_gilt); text-decoration: underline; }

/* Narrow rows (phones, sidebars): date block beside the body, the action below */
@container (max-width: 620px) {
  .ld-eventcard--row .ld-eventcard__grid,
  .ld-eventcard--row:not(.ld-eventcard--has-media) .ld-eventcard__grid {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "date body" "date action";
    column-gap: var(--space-5);
    align-items: start;
  }
  .ld-eventcard--row .ld-eventcard__media { display: none; }
  .ld-eventcard--row .ld-eventcard__date { justify-content: flex-start; padding-right: var(--space-4); }
  .ld-eventcard--row .ld-eventcard__day { font-size: 44px; }
  .ld-eventcard--row .ld-eventcard__day--gem { height: 44px; font-size: 12px; }
  .ld-eventcard--row .ld-eventcard__action { justify-self: start; margin-top: var(--space-2); }
  .ld-eventcard__title { font-size: 16px; }
  .ld-eventcard__lineup { font-size: 15px; }
}
/* very narrow rows (a band with its own padding on a phone): the action takes the full width */
@container (max-width: 340px) {
  .ld-eventcard--row .ld-eventcard__grid,
  .ld-eventcard--row:not(.ld-eventcard--has-media) .ld-eventcard__grid { grid-template-areas: "date body" "action action"; }
  .ld-eventcard--row .ld-eventcard__action { margin-top: var(--space-4); padding-top: var(--space-1); border-top: 1px solid var(--_line); justify-self: stretch; }
}
@container (max-width: 300px) {
  .ld-eventcard--card .ld-eventcard__cta.ld-btn { font-size: 12px; letter-spacing: 0.16em; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-eventcard .ld-frame__img { transition: none; }
}

/* ---- MenuChapter ---- */
/* MenuChapter: the menu-book spread for the web.
   Oxblood intro page with an inset gold frame (sticky beside the sections on wide screens),
   the dish sections on the page ground. Layout follows the chapter's own width (container query). */
.ld-mchap {
  /* the offset under the sticky header: header tokens, or --ld-mchap-top (header + chapter nav) set by the page */
  --ld-mchap-offset: var(--ld-mchap-top, var(--header-height-total));
  container: ld-mchap / inline-size;
  background: var(--surface);
  color: var(--ink);
  scroll-margin-top: var(--ld-mchap-offset);
}
@media (max-width: 819.98px) {
  .ld-mchap { --ld-mchap-offset: var(--ld-mchap-top, var(--header-height-phone)); }
}
.ld-mchap__spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* ---- the oxblood page ---- */
.ld-mchap__panel {
  container: ld-mchap-panel / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--oxblood);
  color: var(--on-dark);
  text-align: center;
  padding: calc(var(--space-3) + var(--space-8)) calc(var(--space-3) + var(--space-5)) calc(var(--space-3) + var(--space-7));
}
.ld-mchap__panel::before {
  content: "";
  position: absolute;
  inset: var(--space-3);
  border: 1px solid var(--frame-on-dark);
  pointer-events: none;
}
/* chapter number set into the top frame line, like a folio */
.ld-mchap .ld-mchap__num {
  position: absolute;
  z-index: 1;
  top: var(--space-3);
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0 var(--space-3) 0 calc(var(--space-3) + 0.14em);
  background: var(--oxblood);
  color: var(--gilt-on-dark);
  /* ld-h2 at its phone size */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.14em;
  font-variant-numeric: lining-nums tabular-nums;
}

.ld-mchap__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ld-mchap__intro { width: 100%; max-width: 34em; margin-inline: auto; }
.ld-mchap .ld-mchap__eyebrow { margin: 0 0 var(--space-4); color: var(--gilt-on-dark); }
.ld-mchap .ld-mchap__title {
  color: var(--gold);
  font-size: clamp(30px, 12cqi, 56px);
}
.ld-mchap__rule {
  display: block;
  width: var(--space-8);
  height: 1px;
  margin: var(--space-6) auto;
  background: var(--line-on-dark);
}
/* ld-h2, sized to the page: 28px on wide pages, down to 19px in narrow ones */
.ld-mchap .ld-mchap__headline {
  margin: 0;
  font-size: clamp(19px, 6.2cqi, 28px);
  color: var(--on-dark);
}
.ld-mchap__hl { display: block; text-wrap: balance; }

.ld-mchap .ld-mchap__lead {
  margin-top: var(--space-6);
  font-size: 19px;
  color: var(--on-dark-muted);
  hyphens: manual;
}
.ld-mchap__para { margin: 0; text-wrap: balance; }
.ld-mchap__nb { white-space: nowrap; }
.ld-mchap__para + .ld-mchap__para { margin-top: 0.85em; }

.ld-mchap__coda { margin-top: var(--space-7); }
.ld-mchap__orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--gold);
}
.ld-mchap__orn-line {
  width: var(--space-7);
  height: 1px;
  background: var(--line-on-dark);
}
.ld-mchap__orn-gem { font-size: 10px; }
.ld-mchap__orn--ns { display: block; }
.ld-mchap .ld-mchap__closing { margin: var(--space-4) 0 0; color: var(--gilt-on-dark); }

/* ---- the sections ---- */
.ld-mchap__body {
  min-width: 0;
  padding: var(--space-7) var(--space-4) var(--space-8);
}
.ld-mchap__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.ld-mchap__foot {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ld-mchap .ld-mchap__fine { margin: 0; color: var(--ink-muted); }

/* intro lines keep the book's line breaks once the page is wide enough to hold them */
@container ld-mchap-panel (min-width: 470px) {
  .ld-mchap__line { display: block; }
  .ld-mchap .ld-mchap__lead { font-size: 22px; }
}

@container ld-mchap (min-width: 560px) {
  .ld-mchap__body { padding-inline: var(--space-6); }
}

/* spread: page left, sections right */
@container ld-mchap (min-width: 760px) {
  .ld-mchap__spread { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); align-items: start; }
  .ld-mchap__panel {
    /* one full book page beside the dishes: the window height under the header, at most 960px */
    min-height: min(calc(100svh - var(--ld-mchap-offset)), 960px);
    padding: calc(var(--space-4) + var(--space-8)) calc(var(--space-4) + var(--space-6)) calc(var(--space-4) + var(--space-7));
  }
  .ld-mchap__panel::before { inset: var(--space-4); }
  .ld-mchap .ld-mchap__num { top: var(--space-4); }
  .ld-mchap__body { padding: var(--space-8) var(--space-6) var(--space-9); }
  .ld-mchap__coda { margin-top: var(--space-8); }
}
@container ld-mchap (min-width: 1100px) {
  .ld-mchap__body { padding-inline: var(--space-8); }
}
/* shorter laptop windows: a tighter page so it still fits beside the dishes */
@media (max-height: 899px) {
  @container ld-mchap (min-width: 760px) {
    .ld-mchap__panel {
      padding-top: calc(var(--space-4) + var(--space-7));
      padding-bottom: calc(var(--space-4) + var(--space-6));
    }
    .ld-mchap__rule { margin-block: var(--space-5); }
    .ld-mchap .ld-mchap__lead { margin-top: var(--space-5); }
    .ld-mchap__coda { margin-top: var(--space-6); }
  }
}
/* the page stays in view while the dishes scroll (only where it fits the window).
   Pages with a sticky chapter nav under the header set --ld-mchap-top to header + nav height. */
@media (min-height: 800px) {
  @container ld-mchap (min-width: 760px) {
    .ld-mchap__panel {
      position: sticky;
      top: var(--ld-mchap-offset);
    }
  }
}

/* ---- MenuItem ---- */
/* MenuItem: one dish line of the online Speisekarte.
   Grid: [name ............ price] / [description | minimum]; variants and meta run full width. */
.ld-mitem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-5);
  align-items: baseline;
  color: var(--ink);
}
.ld-mitem--leader { column-gap: var(--space-3); }

.ld-mitem__head {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  min-width: 0;
}
.ld-mitem--noprice .ld-mitem__head { grid-column: 1 / -1; }

.ld-mitem .ld-mitem__name {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Signature: a small gold glint, set like a typographic ornament before the name */
.ld-mitem__glint {
  display: inline-block;
  color: var(--gold);
  font-size: 0.78em;
  margin-right: 0.5em;
  vertical-align: 0.02em;
  transition: color var(--dur-base) var(--ease-silk), transform var(--dur-slow) var(--ease-silk);
}
.ld-mitem__glint .ld-icon { vertical-align: -0.06em; }
.ld-mitem--signature:hover .ld-mitem__glint { color: var(--champagne); transform: rotate(45deg) scale(1.08); }

/* Optional dotted leader between name and price */
.ld-mitem__leader {
  flex: 1 0 var(--space-5);
  min-width: var(--space-5);
  margin-left: var(--space-3);
  height: 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--gold) 50%, transparent);
}

.ld-mitem__price {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}
.ld-mitem__pricevis {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-2);
  white-space: nowrap;
}
.ld-mitem .ld-mitem__unit { color: var(--ink-muted); }
.ld-mitem .ld-mitem__amount {
  color: var(--gilt);
  font-family: var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
  min-width: 2.6ch;
  text-align: right;
}

.ld-mitem__min {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  white-space: nowrap;
}

.ld-mitem .ld-mitem__desc {
  grid-column: 1;
  grid-row: 2;
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  max-width: 34em;
  hyphens: manual;
  text-wrap: pretty;
}
.ld-mitem__ing { white-space: nowrap; }

/* Provenance (meat and fish, with supplier proof): one quiet label line under the chain */
.ld-mitem .ld-mitem__origin {
  grid-column: 1;
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  max-width: 34em;
}

/* Variants: [label ...... ] [200 G] [49,90] */
.ld-mitem__variants {
  grid-column: 1 / -1;
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.ld-mitem__variant {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}
.ld-mitem__vlabel {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  min-width: 0;
}
.ld-mitem .ld-mitem__vtext {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--ink);
}
.ld-mitem__vleader {
  flex: 1 0 var(--space-4);
  min-width: var(--space-4);
  margin-left: var(--space-3);
  height: 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--gold) 50%, transparent);
}
.ld-mitem__vlabel--empty .ld-mitem__vleader { border-bottom-color: transparent; }

/* Meta row: serves note, tags, sold-out label */
.ld-mitem__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}
.ld-mitem .ld-mitem__serves { color: var(--gilt); }
.ld-mitem__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-none);
  color: var(--ink-muted);
}
.ld-mitem .ld-mitem__sold {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-muted);
}
.ld-mitem .ld-mitem__sold::before {
  content: "";
  width: var(--space-4);
  height: 1px;
  background: var(--ink-muted);
}

/* Sold out tonight: the line stays readable, the price is struck */
.ld-mitem--soldout .ld-mitem__name { color: var(--ink-muted); }
.ld-mitem--soldout .ld-mitem__glint { color: var(--ink-faint); }
.ld-mitem--soldout .ld-mitem__amount,
.ld-mitem--soldout .ld-mitem__unit {
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* phones: the type steps come from base.css (item-name / price 16px, item-desc 15px) */
@media (max-width: 600px) {
  .ld-mitem { column-gap: var(--space-4); }
  .ld-mitem .ld-mitem__unit { letter-spacing: 0.16em; }
}

/* ---- MenuSection ---- */
.ld-msec {
  container-type: inline-size;
  color: var(--ink);
  /* anchors land below the sticky header (and the chapter nav when the page sets --ld-mchap-top) */
  scroll-margin-top: calc(var(--ld-mchap-top, var(--header-height-total)) + var(--space-5));
}
@media (max-width: 819.98px) {
  .ld-msec { scroll-margin-top: calc(var(--ld-mchap-top, var(--header-height-phone)) + var(--space-5)); }
}
.ld-msec__head { margin-bottom: var(--space-7); }
.ld-msec .ld-msec__eyebrow { margin: 0 0 var(--space-3); color: var(--gilt); }
.ld-msec .ld-msec__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  color: var(--gilt);
}
.ld-msec__titletext { flex: 0 1 auto; min-width: 0; max-width: 100%; }
/* the hairline runs from the title to the right edge; when the title needs the full width,
   the hairline drops below it as a full rule instead of floating after a wrapped line */
.ld-msec .ld-msec__title::after {
  content: "";
  flex: 1 1 var(--space-7);
  min-width: var(--space-6);
  height: 1px;
  background: var(--line);
}
.ld-msec .ld-msec__note {
  margin: var(--space-3) 0 0;
  max-width: 34em;
  color: var(--ink-muted);
  font-style: italic;
}

.ld-msec__list { list-style: none; margin: 0; padding: 0; }
.ld-msec__item { padding-block: var(--space-5); min-width: 0; }
.ld-msec__item + .ld-msec__item { border-top: 1px solid var(--line); }
.ld-msec__item:first-child { padding-top: 0; }
.ld-msec__item:last-child { padding-bottom: 0; }

@container (min-width: 720px) {
  .ld-msec--cols-2 .ld-msec__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--ld-msec-rows, 1), auto);
    grid-auto-flow: column;
    column-gap: var(--space-8);
  }
  .ld-msec--cols-2 .ld-msec__item--colstart { border-top: 0; padding-top: 0; }
  .ld-msec--cols-2 .ld-msec__item--colend { padding-bottom: 0; }
}

/* narrow sections (phones, the chapter's sections column): the phone size of ld-h2 */
@container (max-width: 480px) {
  .ld-msec .ld-msec__title { font-size: 22px; column-gap: var(--space-4); }
}
@media (max-width: 600px) {
  .ld-msec__head { margin-bottom: var(--space-6); }
  .ld-msec__item { padding-block: var(--space-4); }
}

/* ---- SignatureDish ---- */
/* SignatureDish — the "LA DÉESSE" feature box of the menu book as a showpiece.
   Tones: oxblood (default, dark in both themes) and surface (follows the theme). */
.ld-signature {
  --sig-bg: var(--oxblood);
  --sig-ink: var(--on-dark);
  --sig-muted: var(--on-dark-muted);
  --sig-gilt: var(--gilt-on-dark);
  --sig-price: var(--gold);
  --sig-glint: var(--highlight);
  --sig-line: var(--frame-on-dark);
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  background: var(--sig-bg);
  color: var(--sig-ink);
  border-radius: var(--radius-none);
}
.ld-signature--surface {
  --sig-bg: var(--surface-raised);
  --sig-ink: var(--ink);
  --sig-muted: var(--ink-muted);
  --sig-gilt: var(--gilt);
  --sig-glint: var(--gold);
  --sig-line: var(--line);
  border: 1px solid var(--line);
}

/* The menu-book frame: one gold hairline inset from the panel edge */
.ld-signature::before {
  content: "";
  position: absolute;
  inset: var(--space-3);
  border: 1px solid var(--sig-line);
  pointer-events: none;
  z-index: 2;
}

.ld-signature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

/* ---- Media: Art-Nouveau arch (default) ---- */
.ld-signature__media {
  margin: 0;
  width: min(100%, 248px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.ld-signature__frame {
  position: relative;
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--sig-line);
  border-radius: var(--radius-arch) var(--radius-arch) 0 0;
}
/* a small gold diamond set on the apex of the arch, cut out of the hairline */
.ld-signature__frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 13px;
  height: 13px;
  background: var(--gold);
  border: 3px solid var(--sig-bg);
  background-clip: padding-box;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 1;
}
.ld-signature__img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: var(--radius-arch) var(--radius-arch) 0 0;
  background: color-mix(in srgb, var(--silk) 35%, transparent);
}
.ld-signature__caption {
  margin: 0;
  color: var(--sig-muted);
}

/* ---- Body ---- */
.ld-signature__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
  max-width: 34em;
}
.ld-signature__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--sig-gilt);
}
.ld-signature__glint {
  font-size: 13px;
  color: var(--sig-glint);
  animation: ld-glint var(--dur-ambient) var(--ease-curtain) infinite;
}
.ld-signature__name {
  color: var(--sig-ink);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ld-signature__chain {
  margin: var(--space-3) 0 0;
  color: var(--sig-muted);
  hyphens: auto;
}
.ld-signature__rule {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(100%, 220px);
  margin: var(--space-5) 0;
  color: var(--gold);
}
.ld-signature__rule-line { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ld-signature__rule-line:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.ld-signature__rule-gem { font-size: 10px; }

.ld-signature__offer { display: flex; flex-direction: column; align-items: inherit; gap: var(--space-2); }
.ld-signature__serves { margin: 0; color: var(--sig-gilt); }
.ld-signature__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
  color: var(--sig-price);
}
.ld-signature__amount {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0.06em;
  font-variant-numeric: lining-nums tabular-nums;
}
.ld-signature__price-label { color: var(--sig-gilt); }
.ld-signature__extra { margin-top: var(--space-5); }

/* ---- CTA: the system's ghost Button (it wraps with its arrow on the last word and hugs its text).
   The local fallback below is styled the same way, for pages without the Button component. ---- */
.ld-signature__action { margin-top: var(--space-5); max-width: 100%; }
.ld-signature__cta {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: var(--target-min);
  padding: var(--space-2) 0;
  border: 0;
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--sig-gilt);
  line-height: 1.85;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
}
.ld-signature__cta:disabled { cursor: not-allowed; color: var(--sig-muted); }
.ld-signature--oxblood .ld-signature__cta:focus-visible { outline-color: var(--focus-on-dark); }
.ld-signature__btn.ld-btn { text-align: inherit; }
.ld-signature__cta-text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.6em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--dur-quick) var(--ease-silk);
}
.ld-signature__cta-tail { white-space: nowrap; }
.ld-signature__cta-arrow {
  display: inline-block;
  margin-inline-start: var(--space-2);
  font-size: 16px;
  line-height: 1;
  vertical-align: -0.2em;
  transition: transform var(--dur-base) var(--ease-silk);
}
@media (hover: hover) {
  .ld-signature__cta:not(:disabled):hover .ld-signature__cta-text { text-decoration-color: currentColor; }
  .ld-signature__cta:not(:disabled):hover .ld-signature__cta-arrow { transform: translateX(4px); }
}
.ld-signature__cta:disabled .ld-signature__cta-text { text-decoration: none; }
.ld-signature__note { margin: var(--space-4) 0 0; color: var(--sig-muted); }

/* ---- Stacked without image: a quiet typographic box ---- */
.ld-signature--no-image .ld-signature__grid { padding-block: var(--space-8); }

/* ---- Full-bleed image (narrow: a band on top) ---- */
.ld-signature--bleed .ld-signature__grid { padding: 0; gap: 0; }
.ld-signature--bleed .ld-signature__media { position: relative; width: 100%; height: 300px; }
.ld-signature--bleed .ld-signature__frame { position: absolute; inset: 0; padding: 0; border: 0; border-radius: var(--radius-none); }
.ld-signature--bleed .ld-signature__frame::before { display: none; }
.ld-signature--bleed .ld-signature__img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: var(--radius-none); }
.ld-signature--bleed .ld-signature__caption {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: 3;
  padding: var(--space-1) var(--space-2);
  background: var(--scrim-silk);
  color: var(--on-dark-muted);
}
.ld-signature--bleed .ld-signature__body { padding: var(--space-7) var(--space-6) var(--space-8); }

/* ---- Split: image | text, flush-left text (container ≥ 640px) ---- */
@container (min-width: 640px) {
  .ld-signature--split:not(.ld-signature--no-image) .ld-signature__grid {
    grid-template-columns: minmax(0, 9fr) minmax(0, 15fr);
    align-items: center;
    justify-items: stretch;
    gap: var(--space-7);
    padding: var(--space-8) var(--space-7);
    text-align: start;
  }
  .ld-signature--split.ld-signature--image-end:not(.ld-signature--no-image) .ld-signature__grid { grid-template-columns: minmax(0, 15fr) minmax(0, 9fr); }
  .ld-signature--split.ld-signature--image-end .ld-signature__media { order: 2; }
  .ld-signature--split:not(.ld-signature--no-image) .ld-signature__media { justify-self: center; width: min(100%, 272px); }
  .ld-signature--split:not(.ld-signature--no-image) .ld-signature__body { align-items: flex-start; max-width: none; }
  .ld-signature--split:not(.ld-signature--no-image) .ld-signature__rule { width: min(100%, 200px); }
  .ld-signature--split:not(.ld-signature--no-image) .ld-signature__rule-line:first-child { display: none; }

  .ld-signature--split.ld-signature--bleed .ld-signature__grid { padding: 0; gap: 0; align-items: stretch; }
  .ld-signature--split.ld-signature--bleed .ld-signature__media { width: 100%; height: auto; min-height: 420px; }
  .ld-signature--split.ld-signature--bleed .ld-signature__body { justify-content: center; padding: var(--space-8) var(--space-8) var(--space-8) var(--space-7); }
  .ld-signature--split.ld-signature--bleed.ld-signature--image-end .ld-signature__body { padding: var(--space-8) var(--space-7) var(--space-8) var(--space-8); }
  .ld-signature--split.ld-signature--bleed .ld-signature__caption { bottom: var(--space-6); left: var(--space-6); }
}

/* ---- Phone sizes (type tokens: h2 22px, h1 28px on phones) ---- */
@container (max-width: 479px) {
  .ld-signature__grid { padding: var(--space-7) var(--space-5); gap: var(--space-5); }
  .ld-signature--no-image .ld-signature__grid { padding-block: var(--space-7); }
  .ld-signature__name { font-size: 22px; }
  .ld-signature__amount { font-size: 28px; }
  .ld-signature__chain { font-size: 15px; }
  .ld-signature__media { width: min(100%, 216px); }
  .ld-signature--bleed .ld-signature__media { width: 100%; height: 240px; }
  .ld-signature--bleed .ld-signature__body { padding: var(--space-6) var(--space-5) var(--space-7); }
}

/* ---- MenuNav ---- */
/* MenuNav — sticky chapter navigation of the menu page.
   One line, never wraps; scrolls sideways with snap when the chapters do not fit,
   the clipped edge fades out. A 1px gold underline slides to the active chapter. */
.ld-menunav {
  position: relative;
  container-type: inline-size;
  display: flex;
  align-items: stretch;
  min-width: 0;
  background: var(--surface);
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
  z-index: var(--z-header);
}
.ld-menunav--sticky { position: sticky; top: var(--ld-menunav-top, var(--header-height-total)); }
@media (max-width: 819.98px) {
  .ld-menunav--sticky { top: var(--ld-menunav-top, var(--header-height-phone)); }
}
/* the base hairline; the gold underline is drawn over it */
.ld-menunav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  pointer-events: none;
  z-index: 0;
}

.ld-menunav__track { position: relative; flex: 1 1 auto; min-width: 0; }
.ld-menunav__scroller {
  --ld-menunav-fade-s: 0px;
  --ld-menunav-fade-e: 0px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--space-7);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--silk) var(--ld-menunav-fade-s), var(--silk) calc(100% - var(--ld-menunav-fade-e)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, var(--silk) var(--ld-menunav-fade-s), var(--silk) calc(100% - var(--ld-menunav-fade-e)), transparent 100%);
}
.ld-menunav__scroller::-webkit-scrollbar { display: none; }
.ld-menunav.is-clip-start .ld-menunav__scroller { --ld-menunav-fade-s: var(--space-8); }
.ld-menunav.is-clip-end .ld-menunav__scroller { --ld-menunav-fade-e: var(--space-8); }

.ld-menunav__rail { position: relative; width: max-content; min-width: 100%; }
.ld-menunav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: var(--space-2) var(--space-6);
  list-style: none;
}
.ld-menunav__item { flex: none; scroll-snap-align: start; }

.ld-menunav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-quick) var(--ease-silk);
}
.ld-menunav__link:hover, .ld-menunav__link.is-active { color: var(--ink); }
.ld-menunav__num {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gilt);
}
.ld-menunav__gem { display: inline-flex; font-size: 8px; color: var(--gilt); }
/* the tracking leaves a space after the last capital; pull it back so the underline ends on the letter */
.ld-menunav__label { margin-inline-end: -0.22em; }

/* the sliding underline: a 1px element scaled to the item width (transform only) */
.ld-menunav__ink {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  background: var(--gold);
  transform-origin: 0 50%;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.ld-menunav__ink.is-on { opacity: 1; }
.ld-menunav__ink.is-animated { transition: transform var(--dur-base) var(--ease-silk), opacity var(--dur-quick) var(--ease-silk); }

/* mouse nudges at a clipped edge (touch and keyboard scroll natively) */
.ld-menunav__nudge {
  position: absolute;
  top: 0;
  bottom: 1px;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--gilt);
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
  transition: color var(--dur-quick) var(--ease-silk);
}
.ld-menunav__nudge:hover { color: var(--ink); }
.ld-menunav__nudge--start { left: 0; }
.ld-menunav__nudge--end { right: 0; }
@media (hover: hover) and (pointer: fine) {
  .ld-menunav.is-clip-start .ld-menunav__nudge--start,
  .ld-menunav.is-clip-end .ld-menunav__nudge--end { display: flex; }
  /* the text fades out just before the nudge */
  .ld-menunav.is-clip-start .ld-menunav__scroller { --ld-menunav-fade-s: calc(var(--target-min) + var(--space-7)); }
  .ld-menunav.is-clip-end .ld-menunav__scroller { --ld-menunav-fade-e: calc(var(--target-min) + var(--space-7)); }
}

/* right slot: a compact reserve button (Button size sm) behind a hairline */
.ld-menunav__action {
  flex: none;
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  border-left: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
.ld-menunav__action .ld-btn { white-space: nowrap; }
.ld-menunav__cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-5);
  border: 1px solid var(--gold);
  border-top-color: var(--highlight);
  background: var(--gold);
  color: var(--on-gold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-silk), border-color var(--dur-quick) var(--ease-silk);
}
.ld-menunav__cta:hover { background: var(--champagne); border-color: var(--champagne); border-top-color: var(--highlight); }

/* phones: tighter rhythm; the reserve action moves to the sticky reserve bar */
@container (max-width: 599px) {
  .ld-menunav__list { gap: var(--space-5); padding-inline: var(--space-4); }
  .ld-menunav__item { scroll-snap-align: center; }
  .ld-menunav__scroller { scroll-padding-inline: var(--space-4); }
  .ld-menunav.is-clip-start .ld-menunav__scroller { --ld-menunav-fade-s: var(--space-6); }
  .ld-menunav.is-clip-end .ld-menunav__scroller { --ld-menunav-fade-e: var(--space-6); }
  .ld-menunav__action { display: none; }
  .ld-menunav.is-clip-start .ld-menunav__nudge--start,
  .ld-menunav.is-clip-end .ld-menunav__nudge--end { display: none; }
}

/* ---- MenuLegend ---- */
/* MenuLegend — the menu's key and legal lines: quiet, compact, under a hairline. */
.ld-legend {
  container-type: inline-size;
  border-top: 1px solid var(--line);
  padding-top: var(--space-6);
  color: var(--ink-muted);
}
.ld-legend__title { margin: 0 0 var(--space-5); color: var(--gilt); }

/* ---- tag key ---- */
.ld-legend__tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ld-legend__entry { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.ld-legend__desc { color: var(--ink-muted); }

/* local mark (used only if the Tag component is not loaded) */
.ld-legend__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  white-space: nowrap;
}
.ld-legend__mark--signature { color: var(--gilt); border-color: color-mix(in srgb, var(--gold) 72%, transparent); }
.ld-legend__mark--lapis { color: var(--lapis); border-color: color-mix(in srgb, var(--lapis) 55%, transparent); }
.ld-legend__mark-icon { font-size: 11px; color: var(--gold); }

/* ---- legal lines + toggle ---- */
.ld-legend__notes {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5) var(--space-7);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.ld-legend__notes:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ld-legend__lines { flex: 1 1 22em; min-width: 0; max-width: var(--width-text); display: flex; flex-direction: column; gap: var(--space-2); }
.ld-legend__allergen { margin: 0; color: var(--ink-muted); }
.ld-legend__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  color: var(--ink-muted);
}
.ld-legend__draft { display: inline-flex; align-items: center; gap: var(--space-2); }
.ld-legend__control { flex: none; }

/* the toggle: a compact secondary Button (size sm); pressed = gold wash + turned chevron */
.ld-legend__toggle.is-pressed { background-color: color-mix(in srgb, var(--gold) 14%, transparent); }
.ld-legend__chevron {
  margin-inline-start: var(--space-2);
  font-size: 14px;
  vertical-align: -0.2em;
  transition: transform var(--dur-base) var(--ease-silk);
}
.ld-legend__toggle.is-pressed .ld-legend__chevron { transform: rotate(180deg); }
.ld-legend__toggle--local {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-5);
  border: 1px solid var(--gold);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--gilt);
  cursor: pointer;
}

/* ---- allergen codes ---- */
.ld-legend__panel { margin-top: var(--space-5); padding: var(--space-5) 0 0; border-top: 1px solid var(--line); }
.ld-legend__panel--reveal:not([hidden]) { animation: ld-rise var(--dur-base) var(--ease-silk); }
.ld-legend__panel-intro { margin: 0 0 var(--space-4); color: var(--ink-muted); }
.ld-legend__codes {
  /* two columns read top to bottom (A–G | H–R); rows stay aligned across both columns */
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--ld-legend-rows, 7), auto);
  column-gap: var(--space-7);
  margin: 0;
}
.ld-legend__code {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 36px;
  padding: var(--space-1) 0;
}
.ld-legend__letter {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--gilt);
}
.ld-legend__name { margin: 0; color: var(--ink); min-width: 0; hyphens: auto; }
.ld-legend__traces { margin: var(--space-4) 0 0; color: var(--ink-muted); }

@container (min-width: 600px) {
  .ld-legend__tags { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
}
@container (max-width: 479px) {
  .ld-legend__codes { column-gap: var(--space-4); }
  .ld-legend__code { gap: var(--space-2); }
  .ld-legend__control { width: 100%; }
}

/* ---- BookingSteps ---- */
/* BookingSteps — the evening in six movements. Hairline connectors, gold where the guest has been. */
.ld-steps {
  container-type: inline-size;
  container-name: ld-steps;
  color: var(--ink);
  font-family: var(--font-ui);
}

/* ---- full ribbon ---- */
.ld-steps__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ld-steps__item {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.ld-steps__item:last-child { flex: 0 0 auto; }
.ld-steps__item:not(:last-child)::after {
  content: "";
  flex: 1 1 auto;
  min-width: var(--space-4);
  height: 1px;
  margin-inline: var(--space-3);
  background: var(--line);
  transition: background-color var(--dur-base) var(--ease-silk);
}
.ld-steps__item--complete:not(:last-child)::after { background: var(--gold); }
/* the stretch the guest is on: a gold hairline that fades into the plain rule */
.ld-steps__item--current:not(:last-child)::after { background: linear-gradient(90deg, var(--gold), var(--line)); }

.ld-steps__target {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  text-align: left;
}
button.ld-steps__target { cursor: pointer; }

.ld-steps__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.ld-steps__check { font-size: 15px; }

.ld-steps__label {
  display: inline-block;
  padding-block: 6px 5px;
  border-bottom: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: border-color var(--dur-quick) var(--ease-silk), color var(--dur-quick) var(--ease-silk);
}

.ld-steps__item--complete .ld-steps__target { color: var(--gilt); }
.ld-steps__item--current .ld-steps__mark { color: var(--gilt); }
.ld-steps__item--current .ld-steps__label { color: var(--ink); border-bottom-color: var(--gold); }
.ld-steps__item--upcoming .ld-steps__target { color: var(--ink-muted); }
button.ld-steps__target:hover .ld-steps__label { border-bottom-color: var(--line-strong); }

/* ---- compact: phones and narrow sheets ---- */
.ld-steps__compact { display: none; flex-direction: column; gap: var(--space-2); }
.ld-steps__row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); }
.ld-steps__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--target-min);
  height: var(--target-min);
  margin-inline-start: calc(var(--space-3) * -1);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-none);
  background: none;
  color: var(--gilt);
  font-size: 20px;
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease-silk);
}
.ld-steps__back:hover { border-color: var(--line); }
.ld-steps__status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  margin: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ld-steps__count { color: var(--ink-muted); margin-inline-end: -0.22em; } /* cancel the trailing tracking so the dot sits centred */
.ld-steps__dot { color: var(--gilt); letter-spacing: 0; }
.ld-steps__now { color: var(--ink); }

.ld-steps__track { position: relative; height: 9px; }
.ld-steps__track::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 4px;
  height: 1px;
  background: var(--line);
}
.ld-steps__fill {
  position: absolute;
  inset-inline: 0;
  top: 4px;
  height: 1px;
  background: var(--gold);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-silk);
}
.ld-steps__tip {
  position: absolute;
  top: 0;
  width: 9px;
  height: 9px;
  margin-inline-start: -4.5px;
  color: var(--gold);
  font-size: 9px;
  line-height: 0;
  transition: left var(--dur-base) var(--ease-silk);
}
.ld-steps__tip .ld-icon { width: 9px; height: 9px; vertical-align: top; }

.ld-steps--compact .ld-steps__list { display: none; }
.ld-steps--compact .ld-steps__compact { display: flex; }
@container ld-steps (max-width: 640px) {
  .ld-steps--auto .ld-steps__list { display: none; }
  .ld-steps--auto .ld-steps__compact { display: flex; }
}
@container ld-steps (min-width: 641px) and (max-width: 760px) {
  .ld-steps__label { letter-spacing: 0.16em; }
  .ld-steps__item:not(:last-child)::after { margin-inline: var(--space-2); min-width: var(--space-3); }
}

/* ---- PartySizePicker ---- */
/* PartySizePicker — square hairline chips; the chosen one lit like a candle. */
.ld-party {
  container-type: inline-size;
  container-name: ld-party;
  color: var(--ink);
}
.ld-party__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.ld-party__label {
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ld-party__readout {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.3;
  font-style: italic;
  color: var(--ink);
  white-space: nowrap;
}

.ld-party__chips {
  display: grid;
  grid-template-columns: repeat(9, minmax(var(--target-min), 64px));
  gap: var(--space-3);
}
.ld-party__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: var(--target-min);
  min-height: var(--target-min);
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-hair);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums tabular-nums;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-silk), border-color var(--dur-quick) var(--ease-silk),
    color var(--dur-quick) var(--ease-silk), box-shadow var(--dur-base) var(--ease-silk);
}
.ld-party__chip:hover { border-color: var(--gilt); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.ld-party__chip.is-selected {
  background: var(--gold);
  border-color: var(--highlight) var(--gold) var(--gold);
  color: var(--on-gold);
  box-shadow: var(--shadow-candle);
}
.ld-party__chip.is-selected:hover { background: var(--champagne); border-color: var(--highlight) var(--champagne) var(--champagne); }
.ld-party__more-long {
  display: none;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* same error line as the form fields: ld-small Spectral, alert icon on the first line */
.ld-party__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--danger);
}
.ld-party__error .ld-icon { flex: none; font-size: 16px; margin-top: 2px; }
.ld-party--error .ld-party__label { color: var(--danger); }

/* the private-dining invitation: an oxblood card with the menu-book hairline frame */
.ld-party__hint {
  position: relative;
  margin-top: var(--space-5);
  padding: var(--space-6) var(--space-6) var(--space-5);
  background: var(--oxblood);
  color: var(--on-dark);
  text-align: center;
}
.ld-party__hint--enter { animation: ld-rise var(--dur-slow) var(--ease-silk) both; }
/* oxblood stays dark in Ivoire too: the ring inside takes the laser of the dark panels in both themes */
.ld-party__hint { --focus: var(--focus-on-dark); }
.ld-party__hint::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--frame-on-dark);
  pointer-events: none;
}
.ld-party__hint-orn {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 var(--space-2);
  background: var(--oxblood);
  color: var(--gold);
  font-size: 10px;
  line-height: 0;
}
.ld-party__hint-text {
  max-width: 30em;
  margin: 0 auto var(--space-5);
  font-family: var(--font-text);
  font-size: 20px;
  line-height: 1.45;
  font-weight: 300;
  color: var(--on-dark);
  text-wrap: balance;
}
.ld-party__hint-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  padding: 0 var(--space-5);
  border: 1px solid var(--gold);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--gilt-on-dark);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-silk), border-color var(--dur-quick) var(--ease-silk);
}
.ld-party__hint-link .ld-icon { font-size: 16px; transition: transform var(--dur-base) var(--ease-silk); }
.ld-party__hint-link:hover { background: color-mix(in srgb, var(--gold) 16%, transparent); border-color: var(--champagne); }
.ld-party__hint-link:hover .ld-icon { transform: translateX(3px); }

@container ld-party (max-width: 519px) {
  .ld-party__chips { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
  .ld-party__chip { aspect-ratio: auto; height: 52px; }
  .ld-party__chip--more { grid-column: span 2; }
  .ld-party__more-short { display: none; }
  .ld-party__more-long { display: inline; }
  .ld-party__hint { padding: var(--space-6) var(--space-4) var(--space-4); }
  .ld-party__hint-text { font-size: 18px; }
  .ld-party__hint-link { width: 100%; gap: var(--space-2); padding: 0 var(--space-3); font-size: 12px; letter-spacing: 0.14em; white-space: nowrap; }
}

/* ---- DateCalendar ---- */
/* DateCalendar — a lacquered well of evenings. Monday first, gold for the chosen night. */
.ld-cal {
  container-type: inline-size;
  container-name: ld-cal;
  color: var(--ink);
}

.ld-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ld-cal__caption {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}
.ld-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--target-min);
  height: var(--target-min);
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--gilt);
  font-size: 18px;
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease-silk), background-color var(--dur-quick) var(--ease-silk);
}
.ld-cal__nav:hover:not(:disabled) { border-color: var(--gilt); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.ld-cal__nav:disabled { color: var(--ink-faint); border-color: color-mix(in srgb, var(--ink-faint) 35%, transparent); cursor: default; }

/* the well */
.ld-cal__well {
  padding: var(--space-3) var(--space-3) var(--space-2);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
}
.ld-cal__grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 4px;
  margin: -4px 0;
}
.ld-cal__wd {
  padding: var(--space-1) 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em; /* re-centre tracked caps */
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-muted);
}

.ld-cal__cell { padding: 0; text-align: center; cursor: pointer; outline-offset: 1px; }
.ld-cal__cell--empty, .ld-cal__cell.is-disabled { cursor: default; }
.ld-cal__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: 1px solid transparent;
  border-radius: var(--radius-none);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
  transition: background-color var(--dur-base) var(--ease-silk), border-color var(--dur-quick) var(--ease-silk), color var(--dur-quick) var(--ease-silk);
}
.ld-cal__num { position: relative; top: -1px; }

/* availability marks: a dot for few, a ring for the waitlist, a dash for fully booked */
.ld-cal__mark {
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
}
.ld-cal__mark--few { width: 5px; height: 5px; border-radius: var(--radius-arch); background: var(--gilt); }
.ld-cal__mark--waitlist { width: 7px; height: 7px; bottom: 6px; border-radius: var(--radius-arch); border: 1.5px solid var(--lapis); }
.ld-cal__mark--full { width: 9px; height: 1px; bottom: 9px; background: var(--ink-faint); }
.ld-cal__mark--loading {
  width: 5px; height: 5px; border-radius: var(--radius-arch);
  background: var(--ink-faint);
  animation: ld-glint var(--dur-pulse) var(--ease-curtain) infinite;
}
.ld-cal__event {
  position: absolute;
  top: 6px;
  right: 6px;
  color: var(--gold);
  font-size: 8px;
  line-height: 0;
}
.ld-cal__event .ld-icon { width: 8px; height: 8px; vertical-align: top; }

/* states */
.ld-cal__cell--waitlist .ld-cal__day { color: var(--ink-muted); }
.ld-cal__cell--full .ld-cal__day,
.ld-cal__cell--past .ld-cal__day,
.ld-cal__cell--beyond .ld-cal__day,
.ld-cal__cell--closed .ld-cal__day { color: var(--ink-faint); }
.ld-cal__cell--closed .ld-cal__num {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-faint);
}
.ld-cal__cell.is-today .ld-cal__day { border-color: var(--line-strong); }
.ld-cal__cell:not(.is-disabled):not(.is-selected):hover .ld-cal__day {
  border-color: var(--gilt);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
}
.ld-cal__cell.is-selected .ld-cal__day {
  background: var(--gold);
  border-color: var(--highlight) var(--gold) var(--gold);
  color: var(--on-gold);
}
.ld-cal__cell.is-selected .ld-cal__mark--few,
.ld-cal__cell.is-selected .ld-cal__mark--full { background: var(--on-gold); }
.ld-cal__cell.is-selected .ld-cal__mark--waitlist { border-color: var(--on-gold); }
.ld-cal__cell.is-selected .ld-cal__event { color: var(--on-gold); }

/* legend */
.ld-cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.ld-cal__legend-item { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.ld-cal__swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
}
.ld-cal__swatch i { display: block; }
.ld-cal__swatch--few i { width: 5px; height: 5px; border-radius: var(--radius-arch); background: var(--gilt); }
.ld-cal__swatch--waitlist i { width: 7px; height: 7px; border-radius: var(--radius-arch); border: 1.5px solid var(--lapis); }
.ld-cal__swatch--full i { width: 10px; height: 1px; background: var(--ink-faint); }
.ld-cal__swatch--closed {
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-faint);
  text-decoration: line-through;
}
.ld-cal__swatch--event { color: var(--gold); font-size: 8px; }

/* status line */
.ld-cal__status {
  min-height: 1.5em;
  margin: var(--space-3) 0 0;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.ld-cal__status-date { color: var(--ink); }
.ld-cal__status-avail { font-style: italic; }
.ld-cal__status-avail--few { color: var(--gilt); }
.ld-cal__status-avail--waitlist { color: var(--lapis); }
.ld-cal__status-event { font-style: italic; }

@container ld-cal (max-width: 420px) {
  .ld-cal__head { margin-bottom: var(--space-3); }
  .ld-cal__caption { font-size: 20px; letter-spacing: 0.12em; }
  /* phones: days sit edge to edge so every cell keeps a 44px target from about 380px of width */
  .ld-cal__well { padding: var(--space-2) 2px var(--space-1); }
  .ld-cal__grid { border-spacing: 0 3px; margin: -3px 0; }
  .ld-cal__wd { letter-spacing: 0.14em; text-indent: 0.14em; }
  .ld-cal__day { height: 44px; }
  .ld-cal__mark { bottom: 5px; }
  .ld-cal__mark--full { bottom: 7px; }
  .ld-cal__event { top: 4px; right: 4px; }
}

/* ---- TimeSlotGrid ---- */
/* TimeSlotGrid — hairline slots in two movements of the evening; honest notes under the time. */
.ld-slots {
  container-type: inline-size;
  container-name: ld-slots;
  color: var(--ink);
}

.ld-slots__status {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.ld-slots__status-icon { flex: none; color: var(--gilt); font-size: 16px; position: relative; top: 2px; }
.ld-slots__status-main { color: var(--ink); }
.ld-slots__status-helper { color: var(--ink-muted); }

.ld-slots__group + .ld-slots__group { margin-top: var(--space-6); }
.ld-slots__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.ld-slots__label {
  flex: none;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gilt);
}
.ld-slots__rule { flex: 1 1 auto; height: 1px; background: var(--line); }
.ld-slots__note {
  margin: calc(var(--space-1) * -1) 0 var(--space-4);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-muted);
}

.ld-slots__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-3);
}
.ld-slots__slot {
  /* time sits on the centre line of every slot in a row; the note hangs below it */
  container-type: inline-size;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  min-width: var(--target-min);
  min-height: 72px;
  margin: 0;
  padding: var(--space-2) 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-hair);
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-silk), border-color var(--dur-quick) var(--ease-silk),
    color var(--dur-quick) var(--ease-silk), box-shadow var(--dur-base) var(--ease-silk);
}
.ld-slots__time {
  grid-row: 2;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.ld-slots__slotnote {
  grid-row: 3;
  align-self: start;
  max-width: 100%;
  margin-top: 5px;
  font-family: var(--font-text);
  font-size: clamp(12px, 13.2cqi, 13px);
  line-height: 1.2;
  font-style: italic;
  text-align: center;
  text-wrap: balance;
  color: var(--gilt);
}

.ld-slots__slot:not(:disabled):not(.is-selected):not(.ld-slots__slot--waitlist):hover {
  border-color: var(--gilt);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
}
.ld-slots__slot--waitlist { border-style: dashed; border-color: color-mix(in srgb, var(--lapis) 75%, transparent); }
.ld-slots__slot--waitlist:not(.is-selected):hover { border-color: var(--lapis); }
.ld-slots__slot--waitlist .ld-slots__time { color: var(--ink-muted); }
.ld-slots__slot--waitlist .ld-slots__slotnote { color: var(--lapis); }
.ld-slots__slot--unavailable {
  border-color: color-mix(in srgb, var(--ink-faint) 45%, transparent);
  color: var(--ink-faint);
  cursor: not-allowed;
}
.ld-slots__slot--unavailable .ld-slots__time {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.ld-slots__slot.is-selected {
  background: var(--gold);
  border-style: solid;
  border-color: var(--highlight) var(--gold) var(--gold);
  color: var(--on-gold);
  box-shadow: var(--shadow-candle);
}
.ld-slots__slot.is-selected .ld-slots__time,
.ld-slots__slot.is-selected .ld-slots__slotnote { color: var(--on-gold); }
.ld-slots__slot.is-selected:hover { background: var(--champagne); border-color: var(--highlight) var(--champagne) var(--champagne); }

/* loading skeleton: the ivory pulse, not a gold shimmer */
.ld-slots__slot--skeleton { display: flex; align-items: center; justify-content: center; border-color: var(--line); cursor: default; }
.ld-slots__slot--skeleton i {
  display: block;
  width: 42%;
  height: 9px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  animation: ld-glint var(--dur-pulse) var(--ease-curtain) infinite;
}
.ld-slots__slot--skeleton:nth-child(2n) i { animation-delay: 200ms; }
.ld-slots__slot--skeleton:nth-child(3n) i { animation-delay: 400ms; }

/* table time */
.ld-slots__table {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.ld-slots__table-orn { flex: none; color: var(--gold); font-size: 8px; position: relative; top: -2px; }

@container ld-slots (max-width: 479px) {
  .ld-slots__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .ld-slots__group + .ld-slots__group { margin-top: var(--space-5); }
  .ld-slots__label { letter-spacing: 0.22em; }
}

/* ---- AreaPicker ---- */
/* AreaPicker: seating areas as radio cards framed by hairlines.
   Selected = gold hairline + candle glow + the gold diamond seal with a check. */

.ld-area { border: 0; margin: 0; padding: 0; min-width: 0; }
.ld-area__legend { padding: 0; margin: 0 0 var(--space-2); color: var(--ink-muted); }
.ld-area__legend--title { color: var(--ink); margin-bottom: var(--space-3); }
.ld-area__helper { margin: 0 0 var(--space-5); max-width: 56ch; color: var(--ink-muted); }
.ld-area__error {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin: 0 0 var(--space-4); color: var(--danger);
}
.ld-area__error .ld-icon { flex: none; font-size: 16px; margin-top: 2px; }

.ld-area__grid {
  container-type: inline-size;
  container-name: ld-area;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--space-4);
}
.ld-area--list .ld-area__grid { grid-template-columns: minmax(0, 1fr); }

/* ---- card ---- */
.ld-area__card {
  position: relative;
  display: flex; align-items: stretch; gap: var(--space-4);
  min-width: 0; padding: var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-none);
  background: transparent; color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease-silk), box-shadow var(--dur-base) var(--ease-silk), background-color var(--dur-base) var(--ease-silk);
}
.ld-area__card:hover { border-color: var(--line-strong); }
.ld-area__card:has(.ld-area__input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.ld-area__card.is-selected {
  border-color: var(--gold);
  box-shadow: var(--shadow-candle);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
}

/* arched portrait window onto the room (Art-Nouveau arch only on portrait images) */
.ld-area__media {
  position: relative; flex: none; align-self: flex-start;
  width: 88px; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--radius-arch) var(--radius-arch) 0 0;
  background: var(--surface-sunk);
}
.ld-area__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--dur-base) var(--ease-silk), filter var(--dur-base) var(--ease-silk);
}
.ld-area__media::after {
  content: ""; position: absolute; inset: 4px;
  border: 1px solid color-mix(in srgb, var(--highlight) 55%, transparent);
  border-radius: var(--radius-arch) var(--radius-arch) 0 0;
  pointer-events: none;
  transition: border-color var(--dur-base) var(--ease-silk);
}
.ld-area__card.is-selected .ld-area__media::after { border-color: var(--highlight); }

.ld-area__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ld-area__head { display: flex; align-items: center; gap: var(--space-3); padding-right: var(--space-6); }
.ld-area__name { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.ld-area__desc { color: var(--ink-muted); }
.ld-area__cond { color: var(--ink-muted); }
.ld-area__seg { white-space: nowrap; }

/* jewel marker: an upright cabochon in a gold hairline setting (not a radio: the seal is the radio) */
.ld-area__marker {
  flex: none; width: 7px; height: 13px;
  border: 1px solid var(--gold); border-radius: var(--radius-arch);
  border-top-color: var(--highlight);
}
.ld-area__marker--gold { background-color: var(--gold); }
.ld-area__marker--lapis { background-color: var(--lapis); }
.ld-area__marker--emerald { background-color: var(--emerald); }
.ld-area__marker--velvet { background-color: var(--velvet); }
.ld-area__marker--champagne { background-color: var(--champagne); }

/* availability line: icon + word, never colour alone */
.ld-area__status {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: auto; padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.ld-area__status-icon { flex: none; font-size: 14px; }
.ld-area__status--ok { color: var(--emerald); }
.ld-area__status--few { color: var(--gilt); }
.ld-area__status--wait { color: var(--lapis); }
.ld-area__status--off { color: var(--ink-muted); }
.ld-area__status--enquiry { color: var(--gilt); }
.ld-area__status--enquiry .ld-area__status-icon { transition: transform var(--dur-base) var(--ease-silk); }
.ld-area__card--enquiry:hover .ld-area__status-icon { transform: translateX(3px); }

/* the radio indicator: a hollow diamond that becomes the gold seal */
.ld-area__seal {
  position: absolute; top: calc(var(--space-4) + 3px); right: calc(var(--space-4) + 3px);
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--on-gold);
  transform: rotate(45deg);
  transition: background-color var(--dur-base) var(--ease-silk), border-color var(--dur-base) var(--ease-silk);
}
.ld-area__seal .ld-icon {
  font-size: 14px; stroke-width: 2;
  transform: rotate(-45deg) scale(0.5); opacity: 0;
  transition: opacity var(--dur-quick) var(--ease-silk), transform var(--dur-base) var(--ease-silk);
}
.ld-area__card:hover .ld-area__seal { border-color: var(--gilt); }
.ld-area__card.is-selected .ld-area__seal { background: var(--gold); border-color: var(--gold); }
.ld-area__card.is-selected .ld-area__seal .ld-icon { opacity: 1; transform: rotate(-45deg); }
.ld-area--error .ld-area__card:not(.is-disabled) .ld-area__seal { border-color: var(--danger); }

/* unavailable: dashed frame, quiet image, no seal; the status sentence carries the meaning */
.ld-area__card.is-disabled { cursor: not-allowed; border-style: dashed; border-color: var(--line); box-shadow: none; }
.ld-area__card.is-disabled .ld-area__name { color: var(--ink-muted); }
.ld-area__card.is-disabled .ld-area__media img { opacity: 0.4; filter: grayscale(1); }
.ld-area__card.is-disabled .ld-area__marker { opacity: 0.45; }
.ld-area__card.is-disabled .ld-area__seal { border-style: dashed; border-color: var(--ink-faint); }

/* live note under the cards */
.ld-area__note { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-4) 0 0; color: var(--ink-muted); }
.ld-area__note.is-empty { margin: 0; }
.ld-area__note-icon { flex: none; font-size: 16px; margin-top: 2px; color: var(--gilt); }

/* phones and narrow rails: measured on the card grid, not the viewport */
@container ld-area (max-width: 480px) {
  .ld-area__card { gap: var(--space-3); }
  .ld-area__media { width: 72px; }
  .ld-area__name { font-size: 16px; }
}

/* ---- Fields ---- */
/* Fields: TextField, SelectField (ld-field) and Checkbox (ld-check).
   One style: an underline in line-strong (3:1 boundary) that a gold hairline draws over on focus. */

.ld-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.ld-field__label {
  display: flex; align-items: baseline; gap: var(--space-1);
  color: var(--ink-muted);
  transition: color var(--dur-quick) var(--ease-silk);
}
.ld-field:focus-within .ld-field__label { color: var(--gilt); }
.ld-field__req { color: var(--gilt); letter-spacing: 0; }

.ld-field__control {
  position: relative;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--dur-quick) var(--ease-silk);
}
/* the gold hairline that draws in from the centre on focus */
.ld-field__control::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform var(--dur-base) var(--ease-silk);
  pointer-events: none;
}
.ld-field__control:hover { border-bottom-color: var(--gilt); }
.ld-field__control:focus-within::after { transform: scaleX(1); }

.ld-field__input {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; min-height: 48px; margin: 0;
  padding: var(--space-3) 0 calc(var(--space-3) - 1px);
  background: transparent; border: 0; border-radius: var(--radius-hair) var(--radius-hair) 0 0;
  color: var(--ink);
  caret-color: var(--gold);
}
.ld-field__input::placeholder {
  color: var(--ink-muted); opacity: 1;
  font-family: var(--font-text); font-style: italic; font-size: 16px; letter-spacing: 0.005em;
}
/* keep autofill on the brand ground */
.ld-field__input:-webkit-autofill,
.ld-field__input:-webkit-autofill:hover,
.ld-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--gold);
  transition: background-color 86400s 0s, color 86400s 0s;
}

/* multiline: a faint recessed well under the same underline */
.ld-field--multiline .ld-field__control {
  align-items: stretch;
  background: color-mix(in srgb, var(--surface-sunk) 55%, transparent);
}
.ld-field--multiline .ld-field__input {
  min-height: 132px; padding: var(--space-3) var(--space-4);
  resize: vertical; line-height: 1.5;
}

/* select: native element, hairline chevron in gilt */
.ld-field__select { padding-right: var(--space-6); cursor: pointer; text-overflow: ellipsis; }
/* the empty choice ("Bitte wählen") reads like a TextField placeholder: Spectral italic, ink-muted */
.ld-field__select.is-empty { color: var(--ink-muted); font-family: var(--font-text); font-style: italic; letter-spacing: 0.005em; }
.ld-field__select option { background: var(--surface-raised); color: var(--ink); font-family: var(--font-ui); font-style: normal; }
.ld-field__chevron {
  position: absolute; right: 0; top: 50%; margin-top: -9px;
  font-size: 18px; color: var(--gilt); pointer-events: none;
  transition: transform var(--dur-base) var(--ease-silk);
}
.ld-field--select .ld-field__control:focus-within .ld-field__chevron { transform: translateY(2px); }

/* meta line: error, hint, counter */
.ld-field__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.ld-field__msgs { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ld-field__hint { margin: 0; color: var(--ink-muted); }
.ld-field__error, .ld-check__error {
  margin: 0; display: flex; align-items: flex-start; gap: var(--space-2);
  color: var(--danger);
}
.ld-field__error-icon { flex: none; font-size: 16px; margin-top: 2px; }
.ld-field__count { flex: none; color: var(--ink-muted); font-family: var(--font-ui); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; padding-top: 2px; }
.ld-field__count.is-zero { color: var(--danger); }

/* error */
.ld-field--error .ld-field__control,
.ld-field--error .ld-field__control:hover { border-bottom-color: var(--danger); }
.ld-field--error .ld-field__control::after { background: var(--danger); }
.ld-field--error .ld-field__label { color: var(--danger); }

/* disabled / read-only */
.ld-field--disabled .ld-field__control,
.ld-field--disabled .ld-field__control:hover { border-bottom-style: dashed; border-bottom-color: var(--ink-faint); }
.ld-field--disabled .ld-field__control::after { display: none; }
.ld-field--disabled .ld-field__input { color: var(--ink-faint); -webkit-text-fill-color: var(--ink-faint); cursor: not-allowed; }
.ld-field--disabled .ld-field__chevron { color: var(--ink-faint); }
.ld-field--readonly .ld-field__control,
.ld-field--readonly .ld-field__control:hover { border-bottom-color: var(--line); }
.ld-field--readonly .ld-field__control::after { display: none; }

/* ---------------- Checkbox ---------------- */
.ld-check { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ld-check__row { display: flex; align-items: flex-start; gap: var(--space-1); }
/* 44px hit area around a 20px box; the box sits on the first text line */
.ld-check__control {
  position: relative; flex: none;
  width: var(--target-min); height: var(--target-min);
  margin: -10px 0 -10px -12px;
  display: grid; place-items: center;
}
.ld-check__input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer; z-index: 1;
}
.ld-check__box {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-hair);
  background: transparent; color: var(--on-gold);
  transition: background-color var(--dur-quick) var(--ease-silk), border-color var(--dur-quick) var(--ease-silk);
}
.ld-check__tick {
  font-size: 16px; stroke-width: 2;
  opacity: 0; transform: scale(0.6);
  transition: opacity var(--dur-quick) var(--ease-silk), transform var(--dur-base) var(--ease-silk);
}
.ld-check__control:hover .ld-check__box { border-color: var(--gilt); }
.ld-check__input:checked + .ld-check__box { background: var(--gold); border-color: var(--gold); }
.ld-check__input:checked + .ld-check__box .ld-check__tick { opacity: 1; transform: none; }
.ld-check__control:hover .ld-check__input:checked + .ld-check__box { background: var(--champagne); border-color: var(--champagne); }
/* the laser ring lands on the visible box */
.ld-check__input:focus-visible + .ld-check__box { outline: 2px solid var(--focus); outline-offset: 3px; }

.ld-check__label { color: var(--ink); cursor: pointer; padding-top: 0; min-width: 0; overflow-wrap: anywhere; }
.ld-check__label .ld-field__req { margin-left: var(--space-1); }
.ld-check__desc, .ld-check__error { margin: 0 0 0 calc(var(--space-6) + var(--space-1)); }
.ld-check__desc { color: var(--ink-muted); }

.ld-check--error .ld-check__box,
.ld-check--error .ld-check__control:hover .ld-check__box { border-color: var(--danger); }

.ld-check--disabled .ld-check__box { border-style: dashed; border-color: var(--ink-faint); }
.ld-check--disabled .ld-check__input { cursor: not-allowed; }
.ld-check--disabled .ld-check__label { color: var(--ink-muted); cursor: not-allowed; }
.ld-check--disabled .ld-check__input:checked + .ld-check__box { background: var(--ink-faint); border-color: var(--ink-faint); border-style: solid; }

/* ---- BookingSummary ---- */
/* BookingSummary: an oxblood panel from the menu book, with an inset gold hairline frame.
   Oxblood stays dark in both themes, so all text uses on-dark / on-dark-muted / gilt-on-dark. */

.ld-bsum {
  --link: var(--gilt-on-dark);
  container-type: inline-size;
  container-name: ld-bsum;
  position: relative;
  background: var(--oxblood);
  color: var(--on-dark);
  isolation: isolate;
  min-width: 0;
}
/* oxblood stays dark in Ivoire too: inside the panel the ring takes the laser of the dark panels */
.ld-bsum { --focus: var(--focus-on-dark); }

/* ---- sidebar: inset frame with four small gold diamonds at the corners ---- */
.ld-bsum--sidebar > .ld-bsum__inner { padding: var(--space-6); }
.ld-bsum--sidebar::before {
  content: ""; position: absolute; inset: var(--space-2);
  border: 1px solid var(--frame-on-dark);
  pointer-events: none; z-index: -1;
}
.ld-bsum__corner {
  position: absolute; width: 7px; height: 7px;
  background: var(--gold); transform: rotate(45deg);
  pointer-events: none;
}
.ld-bsum__corner--tl { top: calc(var(--space-2) - 3px); left: calc(var(--space-2) - 3px); }
.ld-bsum__corner--tr { top: calc(var(--space-2) - 3px); right: calc(var(--space-2) - 3px); }
.ld-bsum__corner--bl { bottom: calc(var(--space-2) - 3px); left: calc(var(--space-2) - 3px); }
.ld-bsum__corner--br { bottom: calc(var(--space-2) - 3px); right: calc(var(--space-2) - 3px); }
.ld-bsum--sticky { position: sticky; top: calc(var(--header-height-total) + var(--space-5)); }
@media (max-width: 819px) { .ld-bsum--sticky { top: calc(var(--header-height-phone) + var(--space-5)); } }

.ld-bsum__inner { display: flex; flex-direction: column; gap: var(--space-5); }
.ld-bsum__head { display: flex; flex-direction: column; gap: var(--space-2); }
.ld-bsum__title { margin: 0; color: var(--gilt-on-dark); }
.ld-bsum__subtitle { margin: 0; color: var(--on-dark-muted); }

/* ---- rows ---- */
.ld-bsum__rows { margin: 0; display: flex; flex-direction: column; }
.ld-bsum__row {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line-on-dark);
}
.ld-bsum__row:last-child { border-bottom: 1px solid var(--line-on-dark); }
.ld-bsum__label { margin: 0; color: var(--on-dark-muted); }
.ld-bsum__value { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.ld-bsum__text { color: var(--on-dark); min-width: 0; overflow-wrap: anywhere; }
.ld-bsum__meta { display: block; color: var(--on-dark-muted); }

/* ghost "Ändern": a gilt word with a hairline that thickens, 44px target */
.ld-bsum__edit {
  flex: none;
  display: inline-flex; align-items: center;
  min-height: var(--target-min); margin: -10px calc(var(--space-2) * -1) -10px 0; padding: 0 var(--space-2);
  background: transparent; border: 0; border-radius: var(--radius-none);
  color: var(--gilt-on-dark); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.5em;
  text-decoration-color: color-mix(in srgb, var(--gilt-on-dark) 55%, transparent);
  transition: color var(--dur-quick) var(--ease-silk), text-decoration-color var(--dur-quick) var(--ease-silk);
}
.ld-bsum__edit:hover { color: var(--on-dark); text-decoration-color: var(--on-dark); text-decoration-thickness: 2px; }

/* ornament rule */
.ld-bsum__rule { display: flex; align-items: center; gap: var(--space-3); color: var(--gold); }
.ld-bsum__rule-line { flex: 1; height: 1px; background: var(--line-on-dark); }
.ld-bsum__rule-gem { font-size: 12px; }

/* ---- policies ---- */
.ld-bsum__policies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ld-bsum__policy { display: flex; flex-direction: column; gap: var(--space-1); }
.ld-bsum__policy-label { color: var(--gilt-on-dark); }
.ld-bsum__policy-text { color: var(--on-dark); }

/* ---- deposit and total ---- */
.ld-bsum__deposit {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--velvet) 55%, transparent);
  border: 1px solid var(--frame-on-dark);
}
.ld-bsum__breakdown { margin: 0; color: var(--on-dark-muted); }
.ld-bsum__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding-top: var(--space-3); margin-top: var(--space-1);
  border-top: 1px solid var(--line-on-dark);
}
.ld-bsum__total-label { color: var(--on-dark); }
.ld-bsum__total-value { color: var(--gilt-on-dark); font-size: 24px; }

/* ---- legal ---- */
.ld-bsum__legal { display: flex; flex-direction: column; gap: var(--space-2); }
.ld-bsum__legal p { margin: 0; color: var(--on-dark-muted); }
.ld-bsum__terms { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--target-min); margin: calc(var(--space-2) * -1) 0; }

.ld-bsum__footer { margin-top: var(--space-6); }

/* ---- sheet (mobile): one line collapsed, the whole panel expanded ---- */
.ld-bsum--sheet {
  border-top: 1px solid var(--gold);
  box-shadow: var(--shadow-raised);
}
.ld-bsum--sheet::before {
  content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; margin-left: -3.5px;
  background: var(--gold); transform: rotate(45deg);
}
.ld-bsum__toggle {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; min-height: 64px; margin: 0;
  padding: var(--space-3) var(--space-4);
  background: transparent; border: 0; border-radius: var(--radius-none);
  color: var(--on-dark); text-align: left; cursor: pointer;
}
.ld-bsum__toggle-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ld-bsum__line { color: var(--on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-bsum__toggle-total { flex: none; color: var(--gilt-on-dark); }
.ld-bsum__chev {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--frame-on-dark);
  color: var(--gilt-on-dark); font-size: 18px;
  transform: rotate(180deg);
  transition: transform var(--dur-base) var(--ease-curtain);
}
.ld-bsum--sheet.is-open .ld-bsum__chev { transform: none; }

.ld-bsum__panel {
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease-curtain), visibility 0s linear var(--dur-base);
}
.ld-bsum--sheet.is-open .ld-bsum__panel {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows var(--dur-base) var(--ease-curtain), visibility 0s;
}
.ld-bsum__panel-inner { min-height: 0; overflow: hidden; }
.ld-bsum--sheet .ld-bsum__inner { padding: var(--space-1) var(--space-4) var(--space-5); }
.ld-bsum--sheet .ld-bsum__footer { margin: 0; padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--line-on-dark); }

.ld-bsum--docked {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet);
  max-height: 85vh; overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* narrow rails (the widget's 328px aside) and phones: measured on the panel, not the viewport */
@container ld-bsum (max-width: 380px) {
  .ld-bsum--sidebar > .ld-bsum__inner { padding: var(--space-5); }
}

/* ---- BookingConfirmation ---- */
/* BookingConfirmation: one slow ceremony. Gold hairlines draw out from a jewel seal
   (emerald for a confirmed table, lapis for a request or the waitlist), no confetti. */

.ld-bconf {
  --ld-bconf-gem: var(--emerald-deep);
  container-type: inline-size;
  container-name: ld-bconf;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 760px; margin: 0 auto;
  text-align: center; color: var(--ink);
}
.ld-bconf--request { --ld-bconf-gem: var(--lapis-deep); }

/* ---- crest: hairline · seal · hairline ---- */
.ld-bconf__crest {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%; max-width: 440px; margin-bottom: var(--space-6);
}
.ld-bconf__line { flex: 1; height: 1px; background: color-mix(in srgb, var(--gold) 75%, transparent); }
.ld-bconf__line--l { transform-origin: 100% 50%; }
.ld-bconf__line--r { transform-origin: 0 50%; }
.ld-bconf__seal {
  flex: none; position: relative;
  width: 46px; height: 46px; margin: 10px;
  display: grid; place-items: center;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.ld-bconf__seal::before {
  /* a second, finer setting around the stone */
  content: ""; position: absolute; inset: -7px;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
}
.ld-bconf__gem {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--ld-bconf-gem);
  border-top: 1px solid color-mix(in srgb, var(--highlight) 70%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--highlight) 45%, transparent);
  color: var(--on-dark);
}
.ld-bconf__gem-icon { font-size: 20px; stroke-width: 1.75; transform: rotate(-45deg); }

.ld-bconf__eyebrow { margin: 0 0 var(--space-3); color: var(--gilt); }
.ld-bconf__title { color: var(--gold); max-width: 15em; }
.ld-bconf__lead { margin: var(--space-4) 0 0; max-width: 34em; color: var(--ink); }

.ld-bconf__notice {
  display: inline-flex; align-items: flex-start; gap: var(--space-2);
  margin: var(--space-5) 0 0; padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--lapis) 55%, transparent);
  color: var(--lapis); text-align: left;
}
.ld-bconf__notice-icon { flex: none; font-size: 16px; margin-top: 2px; }

/* ---- details: a ticket ruled in hairlines ---- */
.ld-bconf__details {
  display: grid; grid-template-columns: repeat(var(--ld-bconf-cols, 3), minmax(0, 1fr));
  gap: 1px; width: 100%; margin: var(--space-7) 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: 1px solid var(--gold);
  text-align: left;
}
.ld-bconf__cell {
  display: flex; flex-direction: column; gap: var(--space-2);
  min-width: 0; padding: var(--space-4) var(--space-5);
  background: var(--surface-raised);
}
.ld-bconf__cell--span { grid-column: span var(--ld-bconf-span, 1); }
.ld-bconf__label { margin: 0; color: var(--ink-muted); }
.ld-bconf__value { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.ld-bconf__meta { display: block; margin-top: var(--space-1); color: var(--ink-muted); }
.ld-bconf__cell--ref {
  grid-column: 1 / -1;
  flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
  background: color-mix(in srgb, var(--gold) 7%, var(--surface-raised));
}
.ld-bconf__cell--ref .ld-bconf__value { color: var(--gilt); line-height: 1.5; }

/* ---- actions ---- */
.ld-bconf__actions {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  margin-top: var(--space-6);
}
.ld-bconf__actions-main, .ld-bconf__actions-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-3) var(--space-6);
}
.ld-bconf__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target-min); padding: var(--space-2) var(--space-5);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gilt); background: transparent; border: 1px solid transparent; border-radius: var(--radius-none);
  text-decoration: none; cursor: pointer;
}
.ld-bconf__btn--secondary { border-color: var(--gold); }
.ld-bconf__btn--primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }

/* ---- house notes ---- */
.ld-bconf__notes {
  width: 100%; margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.ld-bconf__notes-title { margin: 0; color: var(--gilt); }
.ld-bconf__notes-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4) var(--space-6);
  width: 100%; text-align: left;
}
.ld-bconf__note { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--ink); }
.ld-bconf__note-icon { flex: none; font-size: 16px; margin-top: 2px; color: var(--gilt); }

.ld-bconf__mail {
  display: inline-flex; align-items: flex-start; gap: var(--space-2);
  margin: var(--space-6) 0 0; color: var(--ink-muted); text-align: left;
}
.ld-bconf__mail-icon { flex: none; font-size: 16px; margin-top: 2px; }
.ld-bconf__email { color: var(--ink); overflow-wrap: anywhere; }
.ld-bconf__signoff { margin: var(--space-3) 0 0; color: var(--ink-muted); }

/* ---- the reveal, once: a glint of highlight travels outward along both hairlines from the seal.
   The resting state is the finished design, so a paused or skipped animation never hides anything;
   with reduced motion the glint simply does not appear. */
.ld-bconf__line { position: relative; overflow: hidden; }
.ld-bconf__line::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(90deg, transparent, var(--highlight), transparent);
  opacity: 0; pointer-events: none;
}
.ld-bconf__line--l::after { right: 0; animation: ld-bconf-sweep-l var(--dur-reveal) var(--ease-silk) 200ms 1; }
.ld-bconf__line--r::after { left: 0; animation: ld-bconf-sweep-r var(--dur-reveal) var(--ease-silk) 200ms 1; }
@keyframes ld-bconf-sweep-l { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(-130%); } }
@keyframes ld-bconf-sweep-r { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .ld-bconf__line::after { display: none; } }

/* measured on the confirmation itself (sheet, page column or phone), not the viewport */
@container ld-bconf (max-width: 600px) {
  .ld-bconf__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-bconf__cell--span { grid-column: auto; }
  .ld-bconf__cell--span-phone { grid-column: 1 / -1; }
  .ld-bconf__cell { padding: var(--space-4); }
}
@container ld-bconf (max-width: 480px) {
  .ld-bconf__title { font-size: 28px; }
  .ld-bconf__lead { font-size: 19px; }
  .ld-bconf__crest { margin-bottom: var(--space-5); }
  .ld-bconf__details { margin-top: var(--space-6); }
  .ld-bconf__actions { align-self: stretch; align-items: stretch; }
  .ld-bconf__actions-main { flex-direction: column; align-items: stretch; }
  /* phones: the quiet links stack flush left under the calendar button; a long label
     ("Reservierung ändern oder stornieren") wraps in place, the arrow stays on its last word (Button ghost) */
  .ld-bconf__actions-links { flex-direction: column; align-items: flex-start; gap: var(--space-1); margin-top: var(--space-2); }
}

/* ---- BookingWidget ---- */
/* BookingWidget — the whole reservation as one composed object: a forest-green sheet framed in
   hairlines (the step), the oxblood summary beside it (the bill folder), the ribbon above. */
.ld-bw {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-text);
}

/* ---- head: kicker and step ribbon ---- */
.ld-bw__head { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ld-bw__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--gilt);
}
.ld-bw__kicker::after { content: ""; order: 3; flex: 1 1 auto; height: 1px; background: var(--line); }
.ld-bw__kicker-gem { order: 2; flex: none; color: var(--gold); font-size: 9px; }

/* ---- body: sheet + summary ---- */
.ld-bw__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; min-width: 0; }
.ld-bw--split .ld-bw__body { grid-template-columns: minmax(0, 1fr) minmax(280px, 328px); column-gap: var(--space-5); }
.ld-bw--split.ld-bw--done .ld-bw__body { grid-template-columns: minmax(0, 1fr); }
.ld-bw__aside { min-width: 0; align-self: stretch; }

.ld-bw__sheet {
  position: relative;
  min-width: 0;
  padding: var(--space-6) var(--space-6) var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--line);
}
/* gilded top edge that fades along the frame, and the corner diamond of the menu-book frames */
.ld-bw__sheet::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 0%, transparent) 78%);
  pointer-events: none;
}
.ld-bw__sheet::after {
  content: "";
  position: absolute;
  top: -4px; left: -4px;
  width: 7px; height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  pointer-events: none;
}
.ld-bw--done .ld-bw__sheet { padding: var(--space-7) var(--space-6) var(--space-6); }

/* ---- one step ---- */
.ld-bw__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  margin: 0;
}
.ld-bw__step--enter { animation: ld-rise var(--dur-base) var(--ease-silk) both; }
.ld-bw__step-head { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ld-bw__context { margin: 0; color: var(--gilt); min-width: 0; }
.ld-bw__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ld-bw__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin: 0;
  color: var(--ink);
  scroll-margin-top: calc(var(--header-height-total) + var(--space-5));
}
@media (max-width: 819px) { .ld-bw__title { scroll-margin-top: calc(var(--header-height-phone) + var(--space-5)); } }
.ld-bw__title:focus:not(:focus-visible) { outline: none; }
/* the step numeral, set like the menu-book chapter numbers: Spectral light in wordmark gold (≥ 24px) */
.ld-bw__num {
  flex: none;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold);
}
.ld-bw__title-text { min-width: 0; color: var(--ink); }
.ld-bw__helper { margin: 0; max-width: 44ch; color: var(--ink-muted); text-wrap: pretty; }

/* hairline · diamond · hairline, the DINE & DANCE rule of the logo */
.ld-bw__orn { display: flex; align-items: center; gap: var(--space-3); color: var(--gold); margin-block: calc(var(--space-2) * -1); }
.ld-bw__orn::before, .ld-bw__orn::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.ld-bw__orn .ld-icon { font-size: 10px; }

.ld-bw__content {
  container-type: inline-size;
  container-name: ld-bw-form;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}
.ld-bw__wrap { min-width: 0; }
.ld-bw__focus { min-width: 0; outline-offset: 3px; }
.ld-bw__focus:focus:not(:focus-visible) { outline: none; }

/* nearest free evenings inside the sold-out notice */
.ld-bw__alts { display: flex; flex-direction: column; gap: var(--space-2); }
.ld-bw__alts-label { color: var(--ink-muted); }
.ld-bw__alts-list { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }

/* ---- details: groups, pairs, payment slot ---- */
.ld-bw__group { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
/* the hairline runs from the title to the edge; when a long title wraps (phones), it drops below as a full rule */
.ld-bw__group-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.ld-bw__group-head::after { content: ""; order: 1; flex: 1 1 var(--space-5); min-width: var(--space-5); height: 1px; background: var(--line); }
.ld-bw__group-title { flex: 0 1 auto; max-width: 100%; margin: 0; color: var(--gilt); }
.ld-bw__group-note { order: 0; color: var(--ink-muted); white-space: nowrap; }
.ld-bw__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.ld-bw__half { min-width: 0; }
@container ld-bw-form (min-width: 380px) {
  .ld-bw__pair:not(.ld-bw__pair--wide) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-bw__half { width: calc(50% - var(--space-5) / 2); }
}
@container ld-bw-form (min-width: 560px) {
  .ld-bw__pair--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ld-bw__lede { margin: 0; max-width: 52ch; color: var(--ink-muted); }
.ld-bw__proof { color: var(--ink-muted); }
.ld-bw__fine { margin: 0; color: var(--ink-muted); max-width: 64ch; }
.ld-bw__mandate {
  margin: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--line);
  color: var(--ink-muted);
  max-width: 64ch;
}
.ld-bw__suggest-line { color: var(--ink); }
.ld-bw__nobr { white-space: nowrap; }
.ld-bw__suggest {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--link) 55%, transparent);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ld-bw__suggest:hover { text-decoration-color: var(--link); text-decoration-thickness: 2px; }
/* the inline link stays in the sentence; its hit area grows to the 44px target */
.ld-bw__suggest::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--target-min); transform: translateY(-50%); }

/* the PSP's hosted card element mounts here (renderPayment); until then its resting state */
.ld-bw__card { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ld-bw__card-label { color: var(--ink-muted); }
.ld-bw__card-well {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-muted);
  font-family: var(--font-text);
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
}
.ld-bw__card-seg { padding-inline: var(--space-4); white-space: nowrap; }
.ld-bw__card-seg--0 { flex: 1 1 auto; padding-inline-start: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ld-bw__card-seg + .ld-bw__card-seg { border-inline-start: 1px solid var(--line); }
.ld-bw__card-seg:last-child { padding-inline-end: 0; }
/* the PSP note: a hairline lock beside the sentence, on its first line */
.ld-bw__secure { display: flex; align-items: flex-start; gap: var(--space-2); }
.ld-bw__secure-icon { flex: none; font-size: 14px; margin-top: 2px; color: var(--gilt); }

/* error summary list */
.ld-bw__errlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.ld-bw__errlink {
  color: var(--danger);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, var(--danger) 55%, transparent);
}
.ld-bw__errlink:hover { text-decoration-thickness: 2px; text-decoration-color: var(--danger); }

/* ---- footer ---- */
.ld-bw__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.ld-bw__foot-next { margin-inline-start: auto; }
.ld-bw__final {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.ld-bw__due {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-1);
}
.ld-bw__due-label { color: var(--ink); }
.ld-bw__due-value { font-size: 24px; color: var(--gilt); }
.ld-bw__cta-note { margin: 0; color: var(--ink-muted); text-align: center; text-wrap: balance; }
.ld-bw__final-back { margin-top: var(--space-2); }
.ld-bw__help { margin: 0; color: var(--ink-muted); }

/* ---- phones: the summary docks to the bottom as a sheet with the forward action ---- */
.ld-bw__dock {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sheet);
  margin-top: calc(var(--space-2) * -1);
}
.ld-bw__dock-actions { display: flex; flex-direction: column; }
.ld-bw__final--dock { padding-top: 0; border-top: 0; gap: var(--space-2); }
.ld-bw__final--dock .ld-bw__due-label { color: var(--on-dark); }
.ld-bw__final--dock .ld-bw__due-value { color: var(--gilt-on-dark); }
.ld-bw__final--dock .ld-bw__cta-note { color: var(--on-dark-muted); }

.ld-bw--stacked .ld-bw__sheet { padding: var(--space-5) var(--space-4) var(--space-6); }
.ld-bw--stacked.ld-bw--done .ld-bw__sheet { padding: var(--space-6) var(--space-4); }
.ld-bw--stacked .ld-bw__step { gap: var(--space-5); }
.ld-bw--stacked .ld-bw__num { font-size: 34px; }
.ld-bw--stacked .ld-bw__title { gap: var(--space-3); }
.ld-bw--stacked .ld-bw__title-text { font-size: 22px; letter-spacing: 0.12em; }
.ld-bw--stacked .ld-bw__content { gap: var(--space-5); }
.ld-bw--stacked .ld-bw__head { gap: 0; }