.content-section {
  position: relative;
  overflow: clip;
}

html.form-lock,
html.form-lock body {
  overflow: hidden;
  overscroll-behavior: none;
}

.content-section .section-head {
  position: relative;
  padding-left: var(--space-3);
}

.content-section .section-head::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: .35rem;
  background: var(--section-jamb, var(--parq-jamb-light));
  content: "";
}

.section-body {
  width: min(100%, 72rem);
  margin: var(--space-4) auto 0;
}

/* The street introduces each place; this directory makes all six easy to find. */
.content-section--venues { --section-jamb: var(--bistro-jamb-light); }

.venue-directory__intro {
  max-width: 48ch;
  margin: var(--space-2) 0 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.venue-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.venue-entry {
  --venue-jamb: var(--bistro-jamb-light);
  position: relative;
  min-width: 0;
  padding: var(--space-2) 0 0 var(--space-2);
  border-top: 1px solid var(--hairline-light);
}

.venue-entry::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: .25rem;
  height: 4.5rem;
  background: var(--venue-jamb);
  content: "";
}

.venue-entry--parq { --venue-jamb: var(--parq-jamb-light); }
.venue-entry--vodojemy { --venue-jamb: var(--vodojemy-jamb-light); }
.venue-entry--molo { --venue-jamb: var(--molo-jamb-light); }
.venue-entry--tocna { --venue-jamb: var(--tocna-field-olive); }
.venue-entry--catering { --venue-jamb: var(--catering-jamb-light); }

.venue-entry__type,
.venue-entry__hours {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-meta);
  font-size: .85rem;
  line-height: 1.5;
}

.venue-entry h3 {
  margin: .3rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
}

.venue-entry h3 a {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding-right: .3rem;
  text-decoration: none;
}

.venue-entry h3 a span[aria-hidden] { font-size: 1.35rem; font-weight: 400; }
.venue-entry h3 a span:first-child { min-width: 0; overflow-wrap: anywhere; }
.venue-entry a { color: var(--ink); text-underline-offset: .25em; }
.venue-entry a:hover { text-decoration: underline; }
.venue-entry a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.venue-entry__place { margin: 0 0 .3rem; font-size: 1rem; }

.venue-entry__reservation {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .5rem;
  margin-top: .4rem;
  font-size: .95rem;
  font-weight: 600;
}

.venue-entry__links { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-top: .2rem; }
.venue-entry__links a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  font-family: var(--font-meta);
  font-size: .85rem;
}

@media (max-width: 63.999rem) {
  .venue-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .venue-directory { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}

.slip-list,
.opening-list {
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
}

.slip,
.opening-card {
  --row-field: var(--parq-field);
  --row-jamb: var(--parq-jamb-light);
  min-width: 0;
  display: grid;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding-block: 40px;
  border: 0;
  border-top: 1px solid var(--hairline-light);
  background: transparent;
  grid-template-columns: clamp(200px, 24vw, 280px) minmax(0, 1fr);
}

.slip--parq {
  --row-field: var(--parq-field);
  --row-jamb: var(--parq-jamb-light);
  --row-text: var(--parq-text-light);
}
/* the other five venues, for the slips the manager app publishes (program-live.js) */
.slip--bistro { --row-field: var(--bistro-field); --row-jamb: var(--bistro-jamb-dark); --row-text: var(--bistro-text-dark); }
.slip--vodojemy { --row-field: var(--vodojemy-field); --row-jamb: var(--vodojemy-jamb-dark); --row-text: var(--vodojemy-text-dark); }
.slip--molo { --row-field: var(--molo-field); --row-jamb: var(--molo-jamb-light); --row-text: var(--molo-text-light); }
.slip--tocna { --row-field: var(--tocna-field); --row-jamb: var(--tocna-jamb-dark); --row-text: var(--tocna-text-dark); }
.slip--catering { --row-field: var(--catering-field); --row-jamb: var(--catering-jamb-dark); --row-text: var(--catering-text-dark); }
.slip--live .editorial-pane--fallback { background: var(--row-field); }


.editorial-pane {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(23, 21, 15, .14);
  border-left: 6px solid var(--row-jamb);
  border-radius: 2px;
  background: var(--row-field);
}

.editorial-pane picture,
.editorial-pane img {
  display: block;
  width: 100%;
  height: 100%;
}

.editorial-pane img {
  object-fit: cover;
  object-position: 50% 30%;
}

.editorial-pane--fallback {
  display: grid;
  place-items: center;
  color: var(--row-text, var(--ink));
}

.editorial-pane__mark {
  width: auto;
  max-width: calc(100% - 32px);
  height: 32px;
  color: currentColor;
  fill: currentColor;
}

.editorial-pane__fallback-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.has-marks .editorial-pane__fallback-name {
  display: none;
}

.program-older {
  border-top: 1px solid var(--hairline-light);
}

.program-older summary {
  min-height: 2.75rem;
  padding-block: var(--space-2);
  color: var(--ink-soft);
  cursor: pointer;
  font: 700 var(--fs-meta)/1.4 var(--font-meta);
}

.program-older .slip:first-child {
  border-top: 0;
}

.editorial-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

.slip__meta,
.opening-card__venue,
.contact-label,
.contact-dialog__context {
  margin: 0 0 var(--space-1);
  color: var(--ink-soft);
  font-family: var(--font-meta);
  font-size: var(--fs-meta);
}

.slip__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
}

.slip__meta strong {
  /* the date reads in ink on the paper: a venue's --row-text is the text colour for ITS field, and on
     a dark-field venue (Bistro) that is linen, invisible here */
  color: var(--ink);
  font-weight: 700;
}

.slip__title,
.opening-card__title,
.venue-contacts h3,
.nojs-form h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-d2);
  line-height: 1.1;
}

.slip__title,
.opening-card__title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

.slip__copy,
.opening-card__copy {
  margin: var(--space-1) 0 0;
  color: var(--ink-soft);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.section-empty {
  display: none;
  padding: var(--space-3);
  margin: 0;
  border: 1px dashed currentColor;
  color: var(--ink-soft);
}

.slip-list:empty + .section-empty,
.opening-list:empty + .section-empty,
.slip-list:not(:has(> li)) + .section-empty,
.opening-list:not(:has(> li)) + .section-empty {
  display: block;
}

.content-section--career {
  --section-jamb: var(--tocna-jamb-dark);
  border-color: var(--hairline-dark);
  background: var(--walnut);
  color: var(--linen);
}

.content-section--career .section-head__kicker,
.content-section--career .opening-card__venue {
  color: var(--focus-dark);
}

.content-section--career .section-empty {
  color: var(--linen);
}

.opening-card {
  border-top-color: var(--hairline-dark);
}

.opening-card--parq {
  --row-field: var(--parq-field);
  --row-jamb: var(--parq-jamb-dark);
}

.opening-card__pane {
  border-color: rgba(236, 229, 214, .35);
  border-left-color: var(--row-jamb);
  box-shadow: 0 0 0 1px var(--hairline-dark), 0 8px 40px -12px rgba(226, 163, 92, .45);
}

.opening-card__title {
  color: var(--linen);
}

.opening-card__copy {
  color: rgba(236, 229, 214, .9);
}

.text-button,
.submit-button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: .65rem 1rem;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: 600 1rem/1 var(--font-body);
  text-decoration: none;
}

.opening-card .text-button {
  margin-top: var(--space-3);
  border-color: rgba(236, 229, 214, .4);
}

.content-section--contact {
  --section-jamb: var(--glow);
  padding-right: var(--edge-end);
  padding-bottom: max(var(--section-pad), env(safe-area-inset-bottom));
  padding-left: var(--edge-start);
}

.contact-layout {
  display: grid;
  align-items: start;
  gap: var(--space-4);
  grid-template-columns: minmax(14rem, .85fr) minmax(18rem, 1.5fr);
}

.contact-entity {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.contact-entity > p {
  margin: 0;
}

.contact-direct { padding-top: var(--space-2); }
.contact-direct h3 { margin: 0; font-size: 1.3rem; }
.contact-direct > p { max-width: 40ch; }
.contact-direct-links { display: grid; justify-items: start; gap: .25rem; }
.contact-direct-links a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  max-width: 100%;
  color: inherit;
  overflow-wrap: anywhere;
  text-underline-offset: .25em;
}
.form-success .contact-direct-links { justify-items: center; font-size: .95rem; }

.contact-label {
  color: var(--focus-dark);
}

.contact-button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  justify-self: start;
  padding: .75rem 1rem;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--linen);
  cursor: pointer;
  font-family: var(--font-meta);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.contact-button::after { content: "→"; }

.contact-button:focus-visible {
  outline: 2px solid var(--focus-dark);
  outline-offset: 3px;
}

.venue-contacts h3 {
  margin-bottom: var(--space-2);
  font-size: 1.35rem;
}

.venue-contacts dl {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--hairline-dark);
}

.venue-contact {
  display: grid;
  min-width: 0;
  padding: .75rem 0;
  border-bottom: 1px solid var(--hairline-dark);
  gap: var(--space-1);
  grid-template-columns: minmax(7rem, .65fr) minmax(0, 1.35fr);
}

.venue-contact dt,
.venue-contact dd {
  min-width: 0;
  margin: 0;
  font-family: var(--font-meta);
  font-size: var(--fs-meta);
  overflow-wrap: anywhere;
}

.venue-contact dt {
  color: var(--focus-dark);
  font-weight: 700;
}

.venue-contact--empty dd {
  color: #bcb2a3;
}

.nojs-form {
  width: min(100%, 42rem);
  padding: var(--space-3);
  margin: var(--space-4) auto 0;
  border: 1px solid var(--hairline-dark);
  background: var(--walnut);
}

.nojs-form > p {
  margin: var(--space-1) 0 var(--space-3);
}

.contact-dialog__notice {
  margin: 0 0 var(--space-2);
  color: var(--focus-dark);
  font-family: var(--font-meta);
  font-size: var(--fs-meta);
}

.contact-dialog {
  width: min(calc(100% - 2rem), 26.25rem);
  max-height: 85svh;
  padding: 0;
  border: 1px solid rgba(236, 229, 214, .22);
  background: var(--walnut);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .45);
  color: var(--linen);
  overflow: hidden;
}

.contact-dialog:not([open]) {
  display: none;
}

.contact-dialog::backdrop {
  background: rgba(12, 8, 4, .78);
}

.contact-dialog__panel {
  max-height: inherit;
  padding: var(--space-3);
  padding-right: max(var(--space-3), env(safe-area-inset-right));
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  padding-left: max(var(--space-3), env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.contact-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.contact-dialog__head h2,
.form-success h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-d2);
  line-height: 1.1;
}

.contact-dialog__context {
  color: var(--focus-dark);
}

.contact-dialog__close {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  padding: 0;
  border: 1px solid var(--hairline-dark);
  background: transparent;
  color: var(--linen);
  cursor: pointer;
  font: 400 1.75rem/1 var(--font-body);
  place-items: center;
}

.contact-form {
  display: grid;
  margin-top: var(--space-3);
  gap: var(--space-2);
}

.form-status {
  min-height: 0;
  margin: 0;
  color: var(--focus-dark);
  font-family: var(--font-meta);
  font-size: .75rem;
}

.form-status:empty {
  display: none;
}

.contact-form[data-state="error"] .form-status {
  color: #ffb3a0;
}

.form-field {
  position: relative;
  display: grid;
  gap: .3rem;
}

.form-field::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: .25rem;
  height: 0;
  background: var(--focus-dark);
  content: "";
}

.form-field:focus-within::before {
  height: 1rem;
}

.form-field label {
  color: var(--linen);
  font-family: var(--font-meta);
  font-size: .78rem;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  min-width: 0;
  padding: .55rem .25rem .55rem .6rem;
  border: 0;
  border-bottom: 1px solid rgba(236, 229, 214, .48);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--linen);
  font: 400 1rem/1.4 var(--font-body);
}

.form-field textarea {
  min-height: 7rem;
  resize: vertical;
}

.form-field select option {
  background: var(--walnut);
  color: var(--linen);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #cfc3b0;
  opacity: 1;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-bottom: 2px solid var(--focus-dark);
}

.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select {
  border-bottom: 2px solid #ffb3a0;
}

.form-error {
  margin: 0;
  color: #ffb3a0;
  font-family: var(--font-meta);
  font-size: .75rem;
  line-height: 1.35;
}

.form-error:empty {
  display: none;
}

.submit-button {
  width: 100%;
  margin-top: var(--space-1);
  border-color: var(--focus-dark);
  background: var(--focus-dark);
  color: var(--night);
}

.submit-button:disabled {
  cursor: wait;
  opacity: .72;
}

.form-success {
  display: grid;
  min-height: 24rem;
  align-content: center;
  gap: var(--space-2);
  text-align: center;
}

.form-success[hidden] {
  display: none;
}

.form-success__mark {
  width: 5rem;
  height: auto;
  margin: 0 auto;
}

.form-success p {
  margin: 0;
  color: #cfc3b0;
  font-family: var(--font-meta);
  font-size: .78rem;
}

.form-success .text-button {
  margin: var(--space-2) auto 0;
}

@supports (height: 100dvh) {
  .contact-dialog {
    max-height: 85dvh;
  }
}

@media (max-width: 63.999rem) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 47.999rem) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .venue-contacts {
    grid-column: auto;
  }
}

@media (max-width: 40rem) {
  .slip,
  .opening-card {
    gap: 16px;
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .slip__meta,
  .opening-card__venue {
    font-size: .75rem;
  }

  .slip__title,
  .opening-card__title {
    font-size: 1.15rem;
  }

}

@media (max-width: 29.999rem) {
  .venue-contact {
    grid-template-columns: 1fr;
  }

  .contact-dialog {
    width: calc(100% - 1rem);
    max-height: calc(100svh - 1rem);
  }

  @supports (height: 100dvh) {
    .contact-dialog {
      max-height: calc(100dvh - 1rem);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .editorial-pane,
  .editorial-pane img,
  .text-button,
  .submit-button {
    transition: border-color 200ms var(--ease-dolly), background-color 200ms var(--ease-dolly), box-shadow 200ms var(--ease-dolly), opacity 200ms var(--ease-dolly), transform 200ms var(--ease-dolly);
  }

  .slip:hover .editorial-pane,
  .slip:focus-within .editorial-pane {
    box-shadow: 0 0 0 1px var(--hairline-light), 0 8px 40px -12px rgba(226, 163, 92, .45);
  }

  .slip:hover .editorial-pane img,
  .slip:focus-within .editorial-pane img {
    transform: scale(1.02);
  }

  .opening-card:hover .opening-card__pane,
  .opening-card:focus-within .opening-card__pane {
    box-shadow: 0 0 0 1px var(--hairline-dark), 0 8px 40px -12px rgba(226, 163, 92, .7);
  }

  .contact-button:hover,
  .contact-button:focus-visible {
    background: rgba(236, 229, 214, .08);
  }

  .text-button:hover,
  .text-button:focus-visible {
    background: rgba(236, 229, 214, .08);
  }

  .opening-card .text-button:hover,
  .opening-card .text-button:focus-visible {
    box-shadow: 0 8px 32px -12px rgba(226, 163, 92, .55);
  }

  .contact-dialog[open] {
    animation: dialog-in var(--t-dialog-in) var(--ease-dolly) both;
  }

  .contact-dialog[open][data-closing] {
    animation: dialog-out var(--t-dialog-out) var(--ease-dolly) both;
  }

  .contact-dialog[open]::backdrop {
    animation: backdrop-in var(--t-dialog-out) ease both;
  }

  .contact-dialog[open][data-closing]::backdrop {
    animation: backdrop-out var(--t-dialog-out) ease both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-dialog[open] {
    animation: dialog-fade 1ms linear both;
  }
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dialog-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(.75rem); }
}

@keyframes dialog-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* --- map (B4 integration) ------------------------------------------------ */
.contact-map { margin: var(--sf-space-6, 2rem) 0 0; }
.contact-map #sf-map { width: 100%; height: auto; display: block; }
.contact-map__note {
  margin-top: var(--sf-space-3, .75rem);
  font-family: "Courier Prime", ui-monospace, "Courier New", monospace;
  font-size: .72rem; letter-spacing: .06em;
  /* the map sits in the night section: soft ink is a cream-paper colour and read at 2.4:1 here */
  color: color-mix(in srgb, var(--linen) 72%, var(--night));
}
@media (max-width: 640px) {
  #sf-map .pin { transform: scale(2); transform-box: fill-box; transform-origin: center; }
  #sf-map #labels > .lbl-place { font-size: 34px; }
  #sf-map #labels #lbl-naplavka { display: none; }
  #sf-map #notes .lbl-note { font-size: 22px; }
  #sf-map #note-catering { transform: scale(1.8); transform-box: fill-box; transform-origin: left center; }
  #sf-map #route-catering { display: none; }
}

/* --- per-venue socials + map (restored, operator round 2) ---------------- */
.vc-links { display: flex; gap: .15rem; margin-top: .45rem; }
.vc-link {
  display: grid; place-items: center; width: 32px; height: 32px;
  color: inherit; border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, opacity .18s ease;
}
.vc-link svg { width: 15px; height: 15px; fill: currentColor; }
.vc-link:not(.vc-link--soon):hover,
.vc-link:not(.vc-link--soon):focus-visible { background: rgba(255,255,255,.10); }
.vc-link--soon { opacity: .32; cursor: default; }
@media (prefers-reduced-motion: reduce) { .vc-link { transition: none; } }

/* --- map: it was overwhelming the section (operator round 2) ------------- */
.contact-map { max-width: 46rem; margin-inline: auto; }
@media (min-width: 64rem) { .contact-map { max-width: 40rem; } }

/* --- map placement: align to the section's content column, not floated small+centred --- */
/* map sits in the section's content column, aligned with its heading */
.contact-map { width: 100%; max-width: 54rem; margin: var(--sf-space-6, 2rem) 0 0; }
/* the contact body is a multi-column grid — the map spans it rather than sitting in one column */
.contact-map { grid-column: 1 / -1; max-width: 54rem; }