/* ═══════════════════════════════════════════════════════════════════════
   pages.css — everything the multi-page site needed that the original
   single-page stylesheet never had. Consumes the token layer in bloom.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Demo banner ──────────────────────────────────────────────────────
   Present on every prototype page. This build will be screenshotted and
   forwarded, so it must be impossible to mistake for a live shop. */
.demo-banner {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  padding: 9px 20px;
  background: #2B2B2B;
  color: var(--ivory);
  font-family: 'Heebo', sans-serif; font-size: 12.5px; line-height: 1.4;
  text-align: center;
  box-shadow: 0 -8px 24px -14px rgba(0,0,0,0.5);
}
.demo-banner strong {
  background: var(--mocha); color: var(--ivory);
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em;
}
.demo-banner span { opacity: 0.85; }

/* Room for the fixed banner. 44px fits it on ONE line — but the container is
   flex-wrap: wrap, and below ~520px the pill and the Hebrew text break to two
   lines and the banner grows past its reservation. That is how it came to sit
   over the last link in the footer.
   Reserved per breakpoint rather than measured in script on purpose: this
   banner is deleted at launch (readiness item d-banner), and engineering
   around something scheduled for removal is the wrong trade. */
body { padding-bottom: 44px; }
@media (max-width: 520px) { body { padding-bottom: 72px; } }

/* ── Mobile navigation ────────────────────────────────────────────────
   The hamburger existed but had no id and no listener — mobile users
   could not navigate at all. That was survivable on a one-page site and
   is a hard blocker on a multi-page one. */
.header-mobile-toggle .nav-icon-close { display: none; }
.header-mobile-toggle[aria-expanded="true"] .nav-icon-open { display: none; }
.header-mobile-toggle[aria-expanded="true"] .nav-icon-close { display: block; }

.mobile-nav {
  position: fixed; inset: var(--header-h-sm) 0 0; z-index: 45;
  background: var(--ivory);
  padding: 32px 24px calc(44px + 32px);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .28s cubic-bezier(.2,.7,.3,1), transform .28s cubic-bezier(.2,.7,.3,1);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav.is-open { opacity: 1; transform: translateY(0); }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav li + li { border-top: 1px solid rgba(140,90,54,0.10); }
.mobile-nav a {
  display: block; padding: 18px 4px;
  font-family: 'Heebo', sans-serif; font-size: 19px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.01em;
  transition: color .2s;
}
.mobile-nav a:hover { color: var(--mocha); }
.mobile-nav a[aria-current="page"] { color: var(--mocha); }
.mobile-nav .mobile-nav-cta { margin-top: 24px; justify-content: center; font-size: 15px; }
body.nav-open { overflow: hidden; }

@media (min-width: 861px) {
  .mobile-nav { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: none; }
}

/* Desktop nav: three items per side needs a tighter gap than the original two. */
@media (min-width: 861px) {
  .nav-side { gap: 30px; }
  .nav-side a[aria-current="page"] { color: var(--mocha-deep); }
  .nav-side a[aria-current="page"]::after { transform: scaleX(1); }
}
@media (min-width: 861px) and (max-width: 1080px) {
  .bloom-header { padding: 0 28px; gap: 18px; }
  .nav-side { gap: 20px; }
  .nav-side a { font-size: 14px; }
}

/* ── Footer legal row ─────────────────────────────────────────────── */
.foot-legal {
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid rgba(241,234,223,0.10);
  display: flex; flex-wrap: wrap; gap: 8px 26px;
}
.foot-legal a {
  font-family: 'Heebo', sans-serif; font-size: 12.5px; font-weight: 500;
  color: rgba(241,234,223,0.6);
  transition: color .2s;
}
.foot-legal a:hover { color: var(--ivory); }

/* ── Page head — the standard opening block on every subpage ──────── */
.page-head {
  padding: calc(var(--header-h) + 56px) 0 48px;
  background: var(--ivory);
}
@media (max-width: 860px) {
  .page-head { padding-top: calc(var(--header-h-sm) + 40px); }
}
.page-head .eyebrow { color: var(--sage-text); display: block; margin-bottom: 16px; }
.page-head h1 {
  font-family: 'Heebo', sans-serif; font-weight: 800; color: var(--ink);
  font-size: clamp(38px, 5.2vw, 68px); line-height: 1.0; letter-spacing: -0.025em;
}
.page-head h1 .accent {
  display: block; color: var(--sage-text); font-weight: 500;
  font-size: 0.62em; letter-spacing: -0.02em; margin-top: 6px;
}
.page-head .subhead {
  margin-top: 20px; max-width: 52ch;
  font-family: 'Heebo', sans-serif; font-size: 16.5px; line-height: 1.75;
  color: rgba(43,43,43,0.78);
}
.subhead-link { color: var(--mocha); }   /* the FAQ phone link; was inline (CSP) */

/* Breadcrumb */
.crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 22px;
  font-family: 'Heebo', sans-serif; font-size: 12.5px; font-weight: 500;
  color: rgba(43,43,43,0.7);
}
.crumbs a { color: var(--sage-text); }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-hidden] { opacity: 0.5; }

/* ── Generic elevated surface: .exp-card minus the image ──────────── */
.panel {
  background: var(--ivory);
  border-radius: var(--radius-card);
  border: 1px solid rgba(140,90,54,0.10);
  box-shadow: var(--shadow-card);
  padding: 32px;
}
@media (max-width: 640px) { .panel { padding: 24px; } }

/* ── Calendar cells ───────────────────────────────────────────────────
   These were <span class="cal-date"> with cursor:pointer — not focusable,
   not operable by keyboard, invisible to assistive tech as controls. They
   are <button> now; this normalises them back to the original appearance. */
button.cal-date {
  width: 100%;
  background: none;
  font: inherit;
  font-family: 'Heebo', sans-serif; font-weight: 500; font-size: 13.5px;
  color: var(--ink);
  appearance: none;
}
button.cal-date:disabled { color: rgba(43,43,43,0.28); }
button.cal-date.selected:disabled { color: var(--ivory); }
button.cal-date:focus-visible { outline: 2px solid var(--mocha); outline-offset: -2px; }
/* --ink, not --sage: bloom.css:167 measured sage at 2.06-2.77:1 on every
   light ground here and it fails SC 1.4.11. These three were written after
   that note and still used it. */
.slot:focus-visible,
.cal-nav:focus-visible,
.confirm-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ── Catalogue ────────────────────────────────────────────────────── */
.catalog { padding: 0 0 var(--space-section); background: var(--neutral); }
.catalog .container-narrow { padding-top: 48px; }

.filters {
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 40px;
  padding: 24px 26px;
  background: var(--ivory);
  border: 1px solid rgba(140,90,54,0.10);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.filter-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.filter-label {
  font-family: 'Heebo', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage-text);
  min-width: 82px;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.filter-chip {
  background: var(--cream);
  color: var(--ink);
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(140,90,54,0.20);
  font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.filter-chip:hover { background: var(--neutral); transform: translateY(-1px); }
.filter-chip[aria-pressed="true"] {
  background: var(--rose); color: var(--ink); border-color: var(--rose);
}

.filter-row-actions { justify-content: space-between; padding-top: 4px; }
.filter-count {
  font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 600;
  color: rgba(43,43,43,0.7);
}
.filter-reset, .link-btn {
  background: none; border: 0; padding: 0;
  font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--sage-text); cursor: pointer;
  border-bottom: 1px solid rgba(140,90,54,0.4);
}
.filter-reset:hover, .link-btn:hover { color: var(--olive); }

/* Card — extends .exp-card, which already supplies surface, radius,
   shadow and the 4:3 image box. */
.class-card { display: flex; }
.class-card-link { display: flex; flex-direction: column; width: 100%; }
.class-card .exp-card-body { display: flex; flex-direction: column; flex: 1; }
.class-card h3,
.class-card h2 { margin-top: 6px; }
.class-card p { flex: 0 0 auto; }

.class-card-meta {
  display: grid; grid-template-columns: repeat(3, auto); gap: 4px 20px;
  justify-content: start;
  margin: 18px 0 16px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(140,90,54,0.10);
}
.class-card-meta dt {
  font-family: 'Heebo', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sage-text);
}
.class-card-meta dd {
  font-family: 'Heebo', sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--ink); margin: 2px 0 0;
}
.class-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: auto; flex-wrap: wrap;
}
.class-card-start {
  margin-top: 10px;
  font-family: 'Heebo', sans-serif; font-size: 12.5px;
  color: rgba(43,43,43,0.7);
}
.class-card .more { pointer-events: none; }

/* Availability badge. Never colour-only — each variant carries text. */
.spots-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-family: 'Heebo', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.spots-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.spots-badge--open { color: #4B5039; background: rgba(152,160,122,0.18); border-color: rgba(152,160,122,0.35); }
.spots-badge--few  { color: var(--mocha-deep); background: rgba(140,90,54,0.10); border-color: rgba(140,90,54,0.28); }
.spots-badge--full { color: rgba(43,43,43,0.7); background: rgba(43,43,43,0.06); border-color: rgba(43,43,43,0.14); }

.catalog-empty {
  padding: 48px 0; text-align: center;
  font-family: 'Heebo', sans-serif; font-size: 16px;
  color: rgba(43,43,43,0.7);
}
.catalog-empty a { color: var(--mocha); border-bottom: 1px solid rgba(140,90,54,0.4); }

@media (max-width: 640px) {
  .filter-label { min-width: 0; width: 100%; }
  .class-card-meta { grid-template-columns: repeat(2, auto); }
}

/* ── Class detail ─────────────────────────────────────────────────────
   Layout is the existing .booking-widget: already a 1fr -> 360px 1fr card
   with the right shadow, radius and hairline border. */
.class-head { padding-bottom: 20px; }
.class-detail { padding: 0 0 var(--space-section); background: var(--neutral); }
.class-detail .container-narrow { padding-top: 8px; }

.class-widget { color: var(--ink); }
@media (min-width: 980px) {
  .class-widget { grid-template-columns: 380px 1fr; align-items: start; }
  .class-rail { position: sticky; top: calc(var(--header-h) + 20px); }
}

.class-rail { gap: 0; }
.class-title-en {
  color: var(--mocha); font-size: 14px; margin-top: 4px; letter-spacing: 0.02em;
}
.class-rail-cta { margin-top: 26px; justify-content: center; }

.class-price {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--neutral);
  display: flex; flex-direction: column; gap: 10px;
}
.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.price-label { font-family: 'Heebo', sans-serif; font-size: 13.5px; color: rgba(43,43,43,0.75); }
.price {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.price-row-main .price { font-size: 22px; color: var(--sage-text); }
.price-note { font-family: 'Heebo', sans-serif; font-size: 12px; color: var(--sage-text); margin-top: 2px; }

.class-body { padding: 32px; display: flex; flex-direction: column; gap: 36px; }
@media (max-width: 640px) { .class-body { padding: 24px; } }

.class-hero {
  position: relative; margin: 0;
  border-radius: var(--radius-card); overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--neutral);
}
.class-hero img { width: 100%; height: 100%; object-fit: cover; }
.class-hero .ph { position: absolute; bottom: 14px; inset-inline-end: 14px; }

.class-prose { display: flex; flex-direction: column; gap: 16px; }
.class-prose p {
  font-family: 'Heebo', sans-serif; font-size: 16px; line-height: 1.8;
  color: rgba(43,43,43,0.86); max-width: 62ch;
}

.class-lists { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 700px) { .class-lists { grid-template-columns: 1fr 1fr; } }
.class-list h2 {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 17px;
  color: var(--ink); margin-bottom: 12px;
}
.class-list ul { display: flex; flex-direction: column; gap: 8px; }
.class-list li {
  position: relative; padding-inline-start: 18px;
  font-family: 'Heebo', sans-serif; font-size: 14.5px; line-height: 1.6;
  color: rgba(43,43,43,0.8);
}
.class-list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sage);
}

/* Session list — the registration entry point */
.class-sessions { scroll-margin-top: calc(var(--header-h) + 24px); }
.sessions-head { margin-bottom: 18px; }
.sessions-head h2 {
  font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 24px;
  color: var(--ink); letter-spacing: -0.02em;
}
.sessions-head p {
  font-family: 'Heebo', sans-serif; font-size: 13.5px; color: var(--sage-text); margin-top: 4px;
}
.session-list { display: flex; flex-direction: column; }
.session-row {
  display: grid; gap: 10px 18px; align-items: center;
  grid-template-columns: 1fr auto;
  padding: 18px 0;
  border-top: 1px solid rgba(140,90,54,0.12);
}
.session-row:last-child { border-bottom: 1px solid rgba(140,90,54,0.12); }
.session-row.is-off { opacity: 0.62; }
@media (min-width: 620px) {
  .session-row { grid-template-columns: 1.1fr 0.8fr 1fr auto; }
}
.session-when { display: flex; flex-direction: column; }
.session-day {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink);
}
.session-date { font-family: 'Heebo', sans-serif; font-size: 13px; color: rgba(43,43,43,0.7); }
.session-time {
  font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 14.5px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.session-action { justify-self: start; }
@media (min-width: 620px) { .session-action { justify-self: end; } }
.session-action .btn { padding: 11px 22px; font-size: 13px; }
.session-action-off {
  font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 600;
  color: rgba(43,43,43,0.7);
}
.class-policy {
  margin-top: 18px;
  font-family: 'Heebo', sans-serif; font-size: 13px; line-height: 1.7;
  color: rgba(43,43,43,0.7);
}

/* Sticky mobile CTA */
.class-sticky-cta {
  position: fixed; inset-inline: 0; bottom: 44px; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px;
  background: var(--ivory);
  border-top: 1px solid rgba(140,90,54,0.14);
  box-shadow: 0 -14px 32px -22px rgba(110,72,40,0.5);
}
.class-sticky-cta[hidden] { display: none; }
.class-sticky-cta > div { display: flex; flex-direction: column; }
.class-sticky-price { font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); }
.class-sticky-sub { font-family: 'Heebo', sans-serif; font-size: 12px; color: var(--mocha); }
.class-sticky-cta .btn { padding: 13px 24px; font-size: 14px; }
@media (min-width: 900px) { .class-sticky-cta { display: none !important; } }

.class-missing { padding: calc(var(--header-h) + 80px) 24px 120px; text-align: center; }
.class-missing[hidden] { display: none; }
.class-missing h1 {
  font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 34px;
  color: var(--ink); margin-bottom: 12px;
}
.class-missing p { font-family: 'Heebo', sans-serif; color: rgba(43,43,43,0.7); margin-bottom: 26px; }

/* ── Gallery ──────────────────────────────────────────────────────── */
.gallery { padding: 0 0 var(--space-section); background: var(--neutral); }
.gallery .container-narrow { padding-top: 40px; }
.gallery-notice {
  margin-top: 22px; padding: 13px 18px;
  background: rgba(140,90,54,0.08);
  border: 1px solid rgba(140,90,54,0.22);
  border-radius: var(--radius-field);
  font-family: 'Heebo', sans-serif; font-size: 13.5px; line-height: 1.6;
  color: var(--mocha-deep); max-width: 60ch;
}
.gallery-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px)  { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

.gallery-tile {
  position: relative; display: block; padding: 0; border: 0;
  background: var(--ivory); cursor: pointer; overflow: hidden;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.gallery-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hi); }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-tile--land { aspect-ratio: 3 / 2; }
.gallery-tile--port { aspect-ratio: 2 / 3; grid-row: span 1; }
@media (min-width: 760px) { .gallery-tile--port { grid-row: span 2; } }
.gallery-tile .ph { position: absolute; bottom: 10px; inset-inline-end: 10px; }

.lightbox {
  border: 0; padding: 0; max-width: min(94vw, 1200px); max-height: 92vh;
  background: transparent; overflow: visible;
}
.lightbox::backdrop { background: rgba(29,22,16,0.88); backdrop-filter: blur(4px); }
.lightbox-figure { margin: 0; }
.lightbox-figure img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  border-radius: var(--radius-card); display: block; margin-inline: auto;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8);
}
.lightbox-figure figcaption {
  margin-top: 14px; text-align: center;
  font-family: 'Heebo', sans-serif; font-size: 13.5px; color: rgba(241,234,223,0.85);
}
.lightbox-close, .lightbox-nav {
  position: absolute; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(241,234,223,0.92); color: var(--ink);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; line-height: 1;
  transition: background .2s, transform .2s;
}
.lightbox-close:hover, .lightbox-nav:hover { background: #fff; transform: scale(1.06); }
.lightbox-close { top: -18px; inset-inline-end: -8px; }
.lightbox-prev { top: 50%; inset-inline-start: -14px; transform: translateY(-50%); }
.lightbox-next { top: 50%; inset-inline-end: -14px; transform: translateY(-50%); }
.lightbox-prev:hover, .lightbox-next:hover { transform: translateY(-50%) scale(1.06); }
@media (max-width: 640px) {
  .lightbox-prev { inset-inline-start: 4px; }
  .lightbox-next { inset-inline-end: 4px; }
  .lightbox-close { top: -14px; inset-inline-end: 4px; }
}

/* ── Long-form content (info, FAQ, legal) ─────────────────────────── */
.prose-page { padding: 0 0 var(--space-section); background: var(--neutral); }
.prose-page .container-narrow { padding-top: 40px; }
.prose {
  max-width: 68ch; padding: 40px;
  background: var(--ivory); border-radius: var(--radius-card);
  border: 1px solid rgba(140,90,54,0.10); box-shadow: var(--shadow-card);
}
@media (max-width: 640px) { .prose { padding: 26px 22px; } }
.prose h2 {
  font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 22px;
  color: var(--ink); letter-spacing: -0.02em;
  margin-top: 34px; margin-bottom: 12px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 16.5px;
  color: var(--mocha-deep); margin-top: 22px; margin-bottom: 8px;
}
.prose p, .prose li {
  font-family: 'Heebo', sans-serif; font-size: 15.5px; line-height: 1.85;
  color: rgba(43,43,43,0.85);
}
.prose p { margin-bottom: 14px; }
.prose ul, .prose ol { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.prose li { position: relative; padding-inline-start: 20px; }
.prose ul li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sage);
}
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; }
.prose ol li::before {
  content: counter(n) '.'; position: absolute; inset-inline-start: 0;
  color: var(--sage-text); font-weight: 700; font-size: 14px;
}
.prose a { color: var(--mocha); border-bottom: 1px solid rgba(140,90,54,0.35); }
.prose a:hover { color: var(--mocha-deep); }
.prose strong { font-weight: 700; color: var(--ink); }

.draft-banner {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 30px; padding: 16px 18px;
  background: rgba(168,69,47,0.07);
  border: 1px solid rgba(168,69,47,0.28);
  border-radius: var(--radius-field);
  font-family: 'Heebo', sans-serif; font-size: 13.5px; line-height: 1.7;
  color: #7C3423;
}
.draft-banner strong { color: #7C3423; }
/* The mocha variant the privacy page uses (was an inline style; CSP). */
.draft-banner--notice {
  background: rgba(140,90,54,0.07);
  border-color: rgba(140,90,54,0.28);
  color: var(--mocha-deep);
}

/* FAQ — <details>/<summary>: accessible and keyboard-operable with no JS */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--ivory); border: 1px solid rgba(140,90,54,0.12);
  border-radius: var(--radius-field); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; padding: 18px 20px; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 15.5px;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 20px; font-weight: 400; color: var(--sage-text);
  transition: transform .25s cubic-bezier(.2,.7,.3,1); flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { background: var(--cream); }
.faq-answer { padding: 0 20px 20px; }
.faq-answer p {
  font-family: 'Heebo', sans-serif; font-size: 14.5px; line-height: 1.8;
  color: rgba(43,43,43,0.82);
}
.faq-answer p + p { margin-top: 10px; }

/* Info page feature grid */
.info-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 760px) { .info-grid { grid-template-columns: repeat(3, 1fr); } }
.info-card { background: var(--ivory); border-radius: var(--radius-card);
  border: 1px solid rgba(140,90,54,0.10); box-shadow: var(--shadow-card); padding: 26px; }
.info-card h3 {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 17px;
  color: var(--ink); margin-bottom: 8px;
}
.info-card p { font-family: 'Heebo', sans-serif; font-size: 14px; line-height: 1.75; color: rgba(43,43,43,0.78); }

/* 404 */
.notfound { padding: calc(var(--header-h) + 90px) 24px 130px; text-align: center; }
.notfound h1 { font-family: 'Heebo', sans-serif; font-weight: 800; font-size: clamp(40px,7vw,80px); color: var(--ink); letter-spacing: -0.03em; }
.notfound p { font-family: 'Heebo', sans-serif; font-size: 16px; color: rgba(43,43,43,0.7); margin: 14px 0 30px; }
.notfound .btn { margin-inline: 6px; }

/* ═══════════════════════════════════════════════════════════════════════
   ENTRY — /entry/ slot picker

   Layered on the existing token set rather than new values: the day cards
   use --shadow-card like every other card on the site, and availability is
   carried in text as well as colour, never colour alone.
   ═══════════════════════════════════════════════════════════════════════ */
.entry { padding: 0 0 var(--space-section); }
/* On the framed sheet the closing space belongs to the sheet. */
.paper > .entry { padding-block-end: 0; }

/* The space-available declaration. Sage-tinted so it reads as information
   rather than as a warning — it is good news for a walk-in parent. */
.entry-notice {
  background: var(--cream);
  border: 1px solid var(--neutral);
  border-inline-start: 4px solid var(--sage);
  border-radius: var(--radius-card);
  padding: 24px 26px;
  margin-bottom: 34px;
}
.entry-notice h2 {
  font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 17px;
  color: var(--ink); letter-spacing: -0.01em; margin-bottom: 8px;
}
.entry-notice p {
  font-family: 'Heebo', sans-serif; font-size: 14.5px; line-height: 1.75;
  color: rgba(43,43,43,0.82);
}

/* The Playdate fork. Same panel as the notice above it, turned from sage to
   blush, because this one is an alternative route rather than a fact about
   the room — the edge colour is the only thing that separates them. */
.entry-notice--playdate { border-inline-start-color: var(--rose-deep); }

/* Links in a notice panel follow .catalog-empty a, which is the site's text
   link. Stated here because the reset sets a { color: inherit }, so a link
   with no rule of its own is invisible. The three states are not optional:
   the mocha pair alone leaves a keyboard user with no ring. */
.entry-notice a {
  color: var(--mocha); border-bottom: 1px solid rgba(140,90,54,0.4);
  transition: color .2s, border-color .2s;
}
.entry-notice a:hover { color: var(--mocha-deep); border-bottom-color: var(--mocha-deep); }
.entry-notice a:active { color: var(--mocha-deep); }
.entry-notice a:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px;
}

.entry-prices { margin-bottom: 40px; }
.entry-prices h2,
.entry-slots-title {
  font-family: 'Heebo', sans-serif; font-weight: 800;
  font-size: clamp(22px, 2.6vw, 28px); color: var(--ink);
  letter-spacing: -0.02em; margin-bottom: 16px;
}
.entry-slots-title { margin-top: 8px; }

/* The band list itself is the shared .band-list family further down; only
   the spacing under it and the note are specific to this page. */
.entry-prices .band-list { margin-block-end: 14px; }
.price-note {
  font-family: 'Heebo', sans-serif; font-size: 13.5px; line-height: 1.8;
  color: rgba(43,43,43,0.7);
}

.entry-horizon {
  font-family: 'Heebo', sans-serif; font-size: 15px; line-height: 1.75;
  color: rgba(43,43,43,0.82); margin-bottom: 18px; max-width: 64ch;
}
.entry-horizon p + p { margin-top: 10px; }
.entry-horizon strong { color: var(--ink); font-weight: 700; }
.entry-horizon a {
  color: var(--mocha); border-bottom: 1px solid rgba(140,90,54,0.4);
  transition: color .2s, border-color .2s;
}
.entry-horizon a:hover, .entry-horizon a:active { color: var(--mocha-deep); border-bottom-color: var(--mocha-deep); }
.entry-horizon a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

/* בוחרים שעה → משריינים מקום → מגיעים לבלום. A real sequence, so it is an
   ordered list; the arrows are drawn between the steps, not typed in. */
.entry-steps {
  list-style: none; margin: 0 0 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 18px; width: fit-content; max-width: 100%;
  background: var(--ivory); border: 1px solid var(--neutral); border-radius: var(--radius-pill);
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink);
}
.entry-steps li { display: inline-flex; align-items: center; gap: 10px; }
.entry-steps li + li::before { content: "←" / ""; color: var(--sage-text); font-weight: 500; }

/* "מה מחכה לכם?" — the notice, with a short list under its lead. */
.entry-notice .entry-notice-sub { margin-top: 12px; font-weight: 600; color: var(--ink); }
.entry-notice-list {
  margin: 8px 0 0; padding-inline-start: 20px; list-style: disc;
  font-family: 'Heebo', sans-serif; font-size: 14.5px; line-height: 1.75;
  color: rgba(43,43,43,0.82);
}
.entry-notice-list li::marker { color: var(--sage-text); }

.slot-days { display: flex; flex-direction: column; gap: 14px; }

.slot-day {
  background: var(--cream);
  border: 1px solid var(--neutral);
  border-radius: var(--radius-card);
  padding: 18px 20px;
}
.slot-day.is-closed { opacity: 0.55; }

.slot-day-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.slot-day-name {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--ink);
}
.slot-day-date {
  font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 11.5px;
  color: var(--sage-text); letter-spacing: 0.1em; text-transform: uppercase;
}

.slot-row {
  display: grid; gap: 8px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .slot-row { grid-template-columns: repeat(3, 1fr); } }

.slot-card {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--ivory);
  border: 1px solid var(--neutral);
  border-radius: var(--radius-field);
  padding: 14px 16px;
  text-decoration: none;
  transition: transform .2s cubic-bezier(.22,1,.36,1), border-color .2s, box-shadow .2s;
}
.slot-card:hover {
  border-color: var(--rose);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
/* No `outline: none` here — the global ring is an outline, which cannot be
   clipped by an overflow:hidden ancestor the way a box-shadow can. This only
   adds the border emphasis on top of it. */
.slot-card:focus-visible { border-color: var(--mocha); }
.slot-card:active { transform: translateY(0); }

/* The weekly timetable on /entry/ while entry is sold at the desk only: the
   same card, stating a time rather than offering one. It is not a control, so
   it must not lift or take a pointer the way a link does. */
.slot-card--static { cursor: default; }
.slot-card--static:hover,
.slot-card--static:active { border-color: var(--neutral); transform: none; box-shadow: none; }
.slot-row--two { grid-template-columns: 1fr; }
@media (min-width: 640px) { .slot-row--two { grid-template-columns: repeat(2, 1fr); } }
/* Four slots a day (db/0022): two by two on a tablet, one row on a desktop. */
@media (min-width: 640px) { .slot-row--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .slot-row--four { grid-template-columns: repeat(4, 1fr); } }
/* Friday and Saturday, three rounds each (db/0024). */
.slot-row--three { grid-template-columns: 1fr; }
@media (min-width: 640px) { .slot-row--three { grid-template-columns: repeat(3, 1fr); } }

.slot-part {
  font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 15.5px;
  color: var(--ink); letter-spacing: -0.01em;
}
.slot-time {
  font-family: 'Heebo', sans-serif; font-weight: 500; font-size: 13.5px;
  color: rgba(43,43,43,0.75);
}
.slot-state {
  font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 11.5px;
  color: var(--sage-text); letter-spacing: 0.06em;
}

/* Unbookable, for either reason. Removed from the tab order and marked in
   text, so the state is legible without relying on the muted colour. */
.slot-card.is-full,
.slot-card.is-past {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  border-style: dashed;
}
.slot-card.is-full .slot-part { text-decoration: line-through; }
.slot-card.is-full .slot-state { color: var(--error); }

/* A slot that has already started is not "full" and must not read as an
   error - it is simply behind us. */
.slot-card.is-past .slot-state { color: rgba(43,43,43,0.7); }

@media (prefers-reduced-motion: reduce) {
  .slot-card { transition: none; }
  .slot-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   KIND TAG — marks a workshop or a pop-up in the catalogue and on the
   class page. Recurring classes carry no tag: they are the default, and
   badging everything would badge nothing.

   Both colours are existing accessibility-corrected tokens and clear AA on
   both card grounds (sage-text 5.34:1 on ivory, mocha-deep 6.91:1).
   ═══════════════════════════════════════════════════════════════════════ */
.kind-tag {
  display: inline-block;
  margin-block-start: 8px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: 'Heebo', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
}
.kind-tag--workshop { color: var(--sage-text); }
.kind-tag--popup    { color: var(--mocha-deep); }

/* ═══════════════════════════════════════════════════════════════════════
   EVENTS — enquiry flow

   The event type chips sit inside the cream widget card on the home page,
   so they use the same mocha accent as everything else in that card. The
   booking section's ground is olive; these are on cream.
   ═══════════════════════════════════════════════════════════════════════ */
.event-types {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-block-end: 20px;
}
.event-type-chip {
  background: var(--ivory);
  border: 1px solid var(--neutral);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  font-family: 'Heebo', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.event-type-chip:hover { border-color: var(--rose); color: var(--sage-text); }
.event-type-chip:focus-visible { border-color: var(--rose); }
.event-type-chip[aria-pressed="true"] {
  background: var(--rose); border-color: var(--rose); color: var(--ink);
}

/* A time that is already booked. Struck through as well as dimmed, so the
   state does not depend on colour. */
.slot.is-taken {
  opacity: 0.45;
  text-decoration: line-through;
  cursor: not-allowed;
}

.cal-noscript {
  font-family: 'Heebo', sans-serif; font-size: 13.5px; line-height: 1.7;
  color: rgba(43,43,43,0.7);
}

/* Confirmation: the three steps after a reservation. Numbered because the
   order genuinely matters — it answers "was I charged?" before "when do
   they call?". */
.next-steps {
  counter-reset: step;
  display: flex; flex-direction: column; gap: 12px;
  margin: 26px 0 30px;
}
.next-steps li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 40px;
  font-family: 'Heebo', sans-serif; font-size: 15px; line-height: 1.7;
  color: rgba(43,43,43,0.85);
}
.next-steps li::before {
  content: counter(step);
  position: absolute; inset-inline-start: 0; inset-block-start: 2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sage); color: var(--ivory);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}

/* What the server would send the owner. Collapsed by default — it is
   reassurance, not something a customer must read. */
.owner-preview {
  background: var(--cream);
  border: 1px solid var(--neutral);
  border-radius: var(--radius-field);
  padding: 14px 18px;
  margin-block: 24px;
}
.owner-preview > summary {
  font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--mocha); cursor: pointer;
}
.owner-preview > summary:focus-visible { border-radius: 4px; }
.owner-preview pre {
  margin-block-start: 12px;
  white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.8;
  color: var(--ink);
  background: var(--ivory);
  border-radius: 8px;
  padding: 12px 14px;
  direction: rtl; text-align: start;
}
.owner-preview-note {
  margin-block-start: 10px;
  font-family: 'Heebo', sans-serif; font-size: 12px; line-height: 1.6;
  color: rgba(43,43,43,0.7);
}

/* ═══════════════════════════════════════════════════════════════════════
   CLUB — /club/ membership tiers
   ═══════════════════════════════════════════════════════════════════════ */
.club { padding: 0 0 var(--space-section); }

.tier-grid {
  display: grid; gap: 16px; grid-template-columns: 1fr;
  margin-block-end: 34px;
}
@media (min-width: 900px) { .tier-grid { grid-template-columns: repeat(3, 1fr); } }

.tier-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--neutral);
  border-radius: var(--radius-card);
  padding: 28px 26px 26px;
  box-shadow: var(--shadow-card);
}
/* The recommended tier sits one layer forward, not merely in a louder
   colour — the depth is what carries the emphasis. */
.tier-card.is-highlight {
  border-color: var(--rose);
  box-shadow: var(--shadow-card-hi);
}
@media (min-width: 900px) {
  .tier-card.is-highlight { transform: translateY(-10px); }
}

.tier-flag {
  position: absolute; inset-block-start: -11px; inset-inline-start: 22px;
  background: var(--rose); color: var(--ink);
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-family: 'Heebo', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
}

.tier-head { margin-block-end: 14px; }
.tier-title {
  font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 24px;
  color: var(--ink); letter-spacing: -0.02em;
}
.tier-title-en {
  font-size: 13px; color: var(--sage-text); letter-spacing: 0.06em;
  margin-block-start: 2px;
}

.tier-price {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 32px;
  color: var(--sage-text); letter-spacing: -0.03em;
}
.tier-billing {
  font-size: 13px; font-weight: 600; color: rgba(43,43,43,0.7);
  letter-spacing: 0;
}
.tier-price-note {
  font-family: 'Heebo', sans-serif; font-size: 12.5px;
  color: rgba(43,43,43,0.7); margin-block-start: 4px;
}

.tier-summary {
  font-family: 'Heebo', sans-serif; font-size: 14px; line-height: 1.75;
  color: rgba(43,43,43,0.82);
  margin-block: 16px 18px;
}

.tier-benefits {
  display: flex; flex-direction: column; gap: 9px;
  margin-block-end: 24px;
  flex: 1;
}
.tier-benefits li {
  position: relative;
  padding-inline-start: 26px;
  font-family: 'Heebo', sans-serif; font-size: 13.5px; line-height: 1.6;
}
/* Included and excluded are distinguished by the glyph and by the strike,
   not by colour alone. */
.tier-benefits .tier-yes { color: rgba(43,43,43,0.85); }
.tier-benefits .tier-yes::before {
  content: '✓';
  position: absolute; inset-inline-start: 0;
  color: var(--sage-text); font-weight: 700;
}
.tier-benefits .tier-no { color: rgba(43,43,43,0.7); text-decoration: line-through; }
.tier-benefits .tier-no::before {
  content: '—';
  position: absolute; inset-inline-start: 0;
  color: rgba(43,43,43,0.45); text-decoration: none;
}

.tier-cta { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .tier-card.is-highlight { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BOOKING DIALOG

   Centred panel on desktop, full-height sheet on mobile — the flow is four
   steps and a phone needs the room. The foot is sticky so the running total
   never scrolls away while the parent is still adding children.
   ═══════════════════════════════════════════════════════════════════════ */
.bk {
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--ivory);
  color: var(--ink);
  width: min(560px, calc(100vw - 32px));
  max-height: min(880px, calc(100vh - 48px));
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

/* The flex layout is scoped to [open], and that is load-bearing rather than
   tidy. Author styles beat the user-agent sheet regardless of specificity, so
   a bare `display: flex` here overrode `dialog:not([open]) { display: none }`
   and the closed dialog rendered inline at the foot of every page — the
   partial is on all of them. Anything that sets `display` on a <dialog> has
   to say which state it means. */
.bk[open] {
  display: flex;
  flex-direction: column;
}
.bk::backdrop { background: rgba(43, 43, 43, 0.55); }

@media (max-width: 620px) {
  .bk {
    width: 100vw; max-width: 100vw;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0;
    margin: 0;
  }
}

.bk-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--neutral);
  background: var(--cream);
}
.bk-head h2 {
  font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 21px;
  color: var(--ink); letter-spacing: -0.02em;
}
.bk-sub {
  font-family: 'Heebo', sans-serif; font-size: 13px; line-height: 1.6;
  color: rgba(43,43,43,0.7); margin-block-start: 3px;
}
.bk-close {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ivory); border: 1px solid var(--neutral);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.bk-close:hover { background: var(--neutral); border-color: var(--mocha); }

.bk-body { padding: 20px 24px 8px; overflow-y: auto; flex: 1; }

.bk-step { margin-block-end: 24px; }
.bk-step-title {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--ink); margin-block-end: 12px;
}
.bk-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--olive); color: var(--ivory);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
}
.bk-hint {
  font-family: 'Heebo', sans-serif; font-size: 13px; line-height: 1.7;
  color: rgba(43,43,43,0.7); margin-block-end: 12px;
}
.bk-horizon {
  font-family: 'Heebo', sans-serif; font-size: 12.5px;
  color: rgba(43,43,43,0.7); margin-block-start: 10px;
}
.bk-cal {
  background: var(--cream);
  border: 1px solid var(--neutral);
  border-radius: var(--radius-field);
  padding: 14px 16px;
}

.bk-slots { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .bk-slots { grid-template-columns: repeat(3, 1fr); } }
.bk-slot {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--cream);
  border: 1px solid var(--neutral);
  border-radius: var(--radius-field);
  padding: 12px 13px;
  text-align: start;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.bk-slot:hover { border-color: var(--rose); }
.bk-slot[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); }
.bk-slot[aria-pressed="true"] .bk-slot-part,
.bk-slot[aria-pressed="true"] .bk-slot-time,
.bk-slot[aria-pressed="true"] .bk-slot-state { color: var(--ink); }
.bk-slot-part { font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); }
.bk-slot-time { font-family: 'Heebo', sans-serif; font-size: 12.5px; color: rgba(43,43,43,0.72); }
.bk-slot-state { font-family: 'Heebo', sans-serif; font-size: 11px; font-weight: 600; color: var(--sage-text); }
/* Unavailable, marked in text as well as in weight — never colour alone. */
.bk-slot.is-off { opacity: 0.5; cursor: not-allowed; border-style: dashed; }
.bk-slot.is-off .bk-slot-state { color: var(--error); }

.bk-notice {
  font-family: 'Heebo', sans-serif; font-size: 12.5px; line-height: 1.7;
  color: rgba(43,43,43,0.7);
  background: var(--cream);
  border-inline-start: 3px solid var(--sage);
  border-radius: var(--radius-field);
  padding: 12px 14px;
  margin-block-end: 16px;
}

.bk-foot {
  border-top: 1px solid var(--neutral);
  background: var(--cream);
  padding: 14px 24px 18px;
  flex-shrink: 0;
}
.bk-lines { display: flex; flex-direction: column; gap: 4px; margin-block-end: 8px; }
.bk-line {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: 'Heebo', sans-serif; font-size: 12.5px;
  color: rgba(43,43,43,0.75);
}
.bk-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: 8px;
  border-top: 1px solid var(--neutral);
  margin-block-end: 12px;
}
.bk-total-label { font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 14px; }
.bk-total {
  font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 22px;
  color: var(--sage-text); letter-spacing: -0.02em;
}
.bk-go { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .bk-close, .bk-slot { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BEFORE YOU COME — the practical panel, high on the home page.
   Answers the questions a parent has before they can decide anything:
   when is it open, who is it for, does the adult pay, should I book.
   ═══════════════════════════════════════════════════════════════════════ */
.before {
  background: var(--cream);
  padding: 54px 0;
  border-block: 1px solid var(--neutral);
}
.before-head { margin-block-end: 26px; }
.before-head h2 {
  font-family: 'Heebo', sans-serif; font-weight: 800;
  font-size: clamp(24px, 3vw, 32px); color: var(--ink); letter-spacing: -0.025em;
}
.before-head p {
  font-family: 'Heebo', sans-serif; font-size: 14.5px; line-height: 1.7;
  color: rgba(43,43,43,0.7); margin-block-start: 8px; max-width: 56ch;
}
.before-grid {
  display: grid; gap: 12px; grid-template-columns: 1fr;
}
@media (min-width: 620px) { .before-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .before-grid { grid-template-columns: repeat(4, 1fr); } }

.before-item {
  background: var(--ivory);
  border: 1px solid var(--neutral);
  border-radius: var(--radius-field);
  padding: 16px 18px;
}
.before-term {
  font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 11px;
  color: var(--sage-text); letter-spacing: 0.12em; text-transform: uppercase;
  margin-block-end: 7px;
}
.before-desc {
  font-family: 'Heebo', sans-serif; font-size: 14px; line-height: 1.65;
  color: var(--ink);
}
.before-desc strong { font-weight: 700; }
.before-desc span { display: block; }
.before-cta { margin-block-start: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.before-cta .before-note {
  font-family: 'Heebo', sans-serif; font-size: 13px; color: rgba(43,43,43,0.7);
}

/* ══════════════════════════════════════════════════════════════════════
   /events/ — private events landing.

   Deliberately built from the pieces already on the site rather than a new
   card language: the same cream-on-neutral shell as .tier-card, the same
   .pill-tag inclusions as the booking widget, the same heading scale as
   .entry-prices. A parent who has seen /club/ should recognise this page.
   ══════════════════════════════════════════════════════════════════════ */
.events-page { padding: 0 0 var(--space-section); }

.events-section-title {
  font-family: 'Heebo', sans-serif; font-weight: 800;
  font-size: clamp(22px, 2.6vw, 28px); color: var(--ink);
  letter-spacing: -0.02em; margin-block-end: 18px;
}

.event-type-grid {
  display: grid; gap: 16px; grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .event-type-grid { grid-template-columns: repeat(3, 1fr); }
}

.event-card {
  display: flex; flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--neutral);
  border-radius: var(--radius-card);
  padding: 28px 26px 26px;
  box-shadow: var(--shadow-card);
}

.event-card-head { margin-block-end: 12px; }
.event-card-title {
  font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 22px;
  color: var(--ink); letter-spacing: -0.02em;
}
.event-card-title-en {
  font-size: 13px; color: var(--sage-text); letter-spacing: 0.06em;
  margin-block-start: 2px;
}

.event-card-summary {
  font-family: 'Heebo', sans-serif; font-size: 14px; line-height: 1.75;
  color: rgba(43,43,43,0.82);
  margin-block-end: 18px;
}

/* Four facts a parent decides on. Tabular numerals so the durations and
   prices line up down the column rather than wobbling. */
.event-card-facts {
  display: flex; flex-direction: column; gap: 8px;
  padding-block: 16px;
  border-block: 1px solid var(--neutral);
  margin-block-end: 18px;
}
.event-card-facts > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.event-card-facts dt {
  font-family: 'Heebo', sans-serif; font-size: 12.5px; font-weight: 600;
  color: rgba(43,43,43,0.7); letter-spacing: 0.02em;
}
.event-card-facts dd {
  font-family: 'Heebo', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums; text-align: end;
}

.event-card-includes {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-block-end: 20px;
}

/* Pushed to the bottom so the three CTAs align across cards of unequal
   text length. */
.event-card-cta { margin-block-start: auto; align-self: flex-start; }

/* ── What happens next ──────────────────────────────────────────────────
   Numbered because this is genuinely a sequence, and because the question
   the numbering answers — where in it does the payment sit — is the whole
   reason the section exists. */
.events-steps { padding: 0 0 var(--space-section); }

.steps-list {
  list-style: none; counter-reset: step;
  display: grid; gap: 16px; grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .steps-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .steps-list { grid-template-columns: repeat(4, 1fr); }
}

.steps-list li {
  counter-increment: step;
  position: relative;
  padding-block-start: 46px;
}
.steps-list li::before {
  content: counter(step);
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--olive); color: var(--ivory);
  font-family: 'Heebo', sans-serif; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.steps-list h3 {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 16px;
  color: var(--ink); letter-spacing: -0.01em; margin-block-end: 6px;
}
.steps-list p {
  font-family: 'Heebo', sans-serif; font-size: 14px; line-height: 1.75;
  color: rgba(43,43,43,0.78);
}

/* Second line in a notice panel — the detail under the headline claim. */
.entry-notice-more {
  margin-block-start: 8px;
  font-weight: 600;
}

/* The registration button in the notice. `.entry-notice a` above is the text
   link, and it outranks .btn-mocha (which lives in a layer), so without this
   the button would be drawn as underlined mocha text on a blush pill. */
.entry-notice-cta { margin-block-start: 16px; }
.entry-notice .entry-notice-cta a.btn { color: var(--ink); border: 1px solid var(--rose); }
.entry-notice .entry-notice-cta a.btn:hover,
.entry-notice .entry-notice-cta a.btn:active { color: var(--ink); border-color: var(--rose-deep); }
.entry-notice .entry-notice-cta a.btn:active { transform: translateY(0); }
.entry-notice .entry-notice-cta a.btn:focus-visible { border-radius: var(--radius-pill); outline-offset: 4px; }

.entry-horizon a {
  color: var(--mocha); text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s;
}
.entry-horizon a:hover,
.entry-horizon a:active { color: var(--mocha-deep); }
.entry-horizon a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }


/* ── Home booking CTA ───────────────────────────────────────────────────
   Replaced the duplicated reservation widget on the home page. The flow has
   one home now (/reserve/), and a section whose only job is to point at it
   does not need to restate it. */
.booking-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.booking-cta-note {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(43,43,43,0.72);
}

.booking-cta-note a { color: var(--sage-text); text-decoration: underline; }

/* ── Today panel (home) ───────────────────────────────────────────────────
   Replaces the old "visit" block. Keeps that section's ground and heading
   styles so the page rhythm is unchanged; everything new here is the live
   state, which is the one thing on this site worth a signature. */

.today-head { max-width: 62ch; }
.today-date {
  font-family: 'Heebo', sans-serif; font-size: 14px; font-weight: 500;
  color: var(--sage-text); margin-block-start: 10px; letter-spacing: 0.01em;
}

.today-slots {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
/* `display` beats the user-agent [hidden] rule, so a grid or flex container
   given the hidden attribute stays on screen. Without these two the ended
   slots sat above "היום כבר נסגר", contradicting it. */
.today-slots[hidden], .today-empty[hidden] { display: none; }
@media (min-width: 720px) {
  /* As many columns as the day has slots: four on most days, two on Friday. */
  .today-slots { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
}

/* Base surface. The "now" card lifts off it; the ended card sinks into it. */
.today-slot {
  background: var(--cream);
  border: 1px solid rgba(140, 90, 54, 0.14);
  border-radius: var(--radius-card);
  padding: 20px 22px 22px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 12px;
}

.ts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ts-part {
  font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 17px;
  color: var(--ink); letter-spacing: -0.02em;
}
.ts-time {
  font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 14px;
  color: rgba(43, 43, 43, 0.7); font-variant-numeric: tabular-nums;
}

.ts-status { display: flex; flex-direction: column; gap: 3px; }
.ts-status > span {
  font-family: 'Heebo', sans-serif; font-size: 14px; font-weight: 600;
  line-height: 1.5;
}
.ts-sub { font-weight: 500 !important; font-size: 13px !important; color: rgba(43, 43, 43, 0.7); }
.ts-open { color: var(--sage-text); }
.ts-full { color: var(--mocha); }
.ts-done { color: rgba(43, 43, 43, 0.7); }
.ts-walkin {
  font-family: 'Heebo', sans-serif; font-size: 12.5px; font-weight: 500;
  line-height: 1.6; color: rgba(43, 43, 43, 0.7);
}

/* The one live thing on the page. */
.ts-live { display: inline-flex; align-items: center; gap: 8px; color: var(--mocha-deep); }
.ts-dot {
  inline-size: 9px; block-size: 9px; border-radius: 50%;
  background: var(--rose); flex: none;
  box-shadow: 0 0 0 4px rgba(140, 90, 54, 0.16);
  animation: ts-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ts-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}

.is-now {
  background: var(--ivory);
  border-color: rgba(140, 90, 54, 0.34);
  box-shadow: var(--shadow-card-hi);
}
/* No blanket opacity: it multiplies with each text's own alpha and dragged
   "הסתיים" down to ~0.43 effective, below AA. The recessed look comes from
   the flat surface and the muted colours instead, which stay measurable. */
.is-ended { box-shadow: none; background: var(--neutral); border-color: transparent; }
.is-ended .ts-part { color: rgba(43, 43, 43, 0.7); }

.ts-action { margin-block-start: auto; padding-block-start: 4px; }

.ts-book {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 0; cursor: pointer;
  border-radius: var(--radius-pill);
  background: var(--rose); color: var(--ink);
  transition: transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 160ms ease;
}
.ts-book:hover { transform: translateY(-2px); }
.ts-book:active { transform: translateY(0) scale(0.97); }
.ts-book:focus-visible { outline: 3px solid var(--mocha-deep); outline-offset: 3px; }

/* Empty state: an instruction, not a shrug. */
.today-empty {
  margin-block-start: 34px; padding: 26px 24px;
  background: var(--cream); border: 1px solid rgba(140, 90, 54, 0.14);
  border-radius: var(--radius-card);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.today-empty-line {
  font-family: 'Heebo', sans-serif; font-size: 15px; line-height: 1.7;
  color: var(--ink); margin: 0; flex: 1 1 20rem;
}

/* Prices, read from the same bands the checkout charges from. */
.today-prices { margin-block-start: 34px; }
.today-prices-title {
  font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em; text-transform: none;
  color: var(--sage-text); margin: 0 0 12px;
}
.band-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .band-list { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
.band {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-field);
  background: rgba(251, 247, 241, 0.72);
  border: 1px solid rgba(140, 90, 54, 0.12);
}
.band-label {
  font-family: 'Heebo', sans-serif; font-size: 13.5px; font-weight: 500;
  color: rgba(43, 43, 43, 0.78); line-height: 1.5;
}
.band-price {
  font-family: 'Heebo', sans-serif; font-size: 15px; font-weight: 800;
  color: var(--sage-text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.band-note {
  font-family: 'Heebo', sans-serif; font-size: 13px; line-height: 1.7;
  color: rgba(43, 43, 43, 0.7); margin-block-start: 10px;
}

/* The nav item that points here is called "בקרו". It still has to answer
   where and when, even though the panel is now about today. */
.today-where {
  margin-block-start: 30px; padding-block-start: 20px;
  border-block-start: 1px solid rgba(140, 90, 54, 0.16);
  font-family: 'Heebo', sans-serif; font-size: 13.5px; line-height: 1.9;
  color: rgba(43, 43, 43, 0.7);
  display: flex; flex-wrap: wrap; gap: 10px;
}
.today-where a { color: var(--mocha-deep); text-decoration: underline; text-underline-offset: 3px; }
.today-where a:hover { color: var(--mocha); }
.today-where a:focus-visible { outline: 3px solid var(--mocha-deep); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .ts-dot { animation: none; }
  .ts-book { transition: none; }
}

/* The same band list, inside the two booking forms. It sits between the
   "who is coming" note and the child rows, so it needs its own breathing
   room and a slightly quieter surface than the panel version on the home
   page — there it is the content, here it is a reference. */
.bk-bands,
.form-bands { margin-block: 14px 18px; }
.bk-bands .band,
.form-bands .band { padding: 10px 14px; background: var(--ivory); }
.bk-bands .band-price,
.form-bands .band-price { font-size: 14px; }

/* The English half of the bilingual headings. `dir="ltr"` in the markup names
   the run; this isolates it so the trailing period stays put inside the RTL
   heading. Previously the period was typed first as a workaround, which
   rendered correctly and read aloud as "dot Together". */
.accent[dir="ltr"] { unicode-bidi: isolate; }

/* ── A7 · Unavailable means unavailable ───────────────────────────────
   These three announced themselves as disabled with a cursor and some
   opacity, but still took the click. `not-allowed` on something that then
   responds is worse than no signal at all. */
.slot.is-taken,
.bk-slot.is-off,
.choice-card.is-disabled { pointer-events: none; }

/* ── A6 · Reduced motion ──────────────────────────────────────────────
   Eight blocks already covered part of the site; these are the surfaces
   that were still animating transform or box-shadow regardless. Grouped
   rather than scattered so the next person can see the whole set. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .exp-card,
  .gallery-tile,
  .cal-nav,
  .slot,
  .confirm-btn,
  .filter-chip,
  .event-type-chip,
  .lightbox-close,
  .lightbox-nav,
  .faq-item summary::after,
  .choice-card,
  .choice-mark,
  .sub-side .follow-btn,
  .sub-social a { transition: none; }

  .btn:hover,
  .exp-card:hover,
  .gallery-tile:hover,
  .filter-chip:hover,
  .slot-card:hover,
  .ts-book:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SHARED PAGE FURNITURE — the photographic head, the framed sheet, and
   the floral border. These began life on /reserve/; /entry/ uses them
   too, which is why they live here and are no longer named rv-*.

   A page opts in by using .photo-head instead of .page-head, and by
   wrapping everything below it in .paper with the floral-frame partial
   as that element's first child.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────────────────
   A classic photographic hero: the ball pit full-bleed, a scrim over it,
   the copy on top. The scrim is a gradient, not a flat wash — darkest on
   the reading side (inline-start) where the type sits, lighter on the far
   side so the photograph stays a photograph. Grain on top so the flat
   colour of the scrim reads as paper rather than a screen fill. */

.photo-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: center;
  background: var(--mocha-deep);
  color: var(--ivory);
  padding-block: calc(var(--header-h) + 56px) 88px;
}
@media (max-width: 860px) {
  .photo-head { min-height: 0; padding-block: calc(var(--header-h-sm) + 40px) 64px; }
}

.photo-head-media {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.photo-head-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored to the bottom edge: the girl in the pink dress lies along the
     foot of the frame, and a centred crop takes her head off. The other
     girl's feet, at the top, can go. */
  object-position: 42% 100%;
}
@media (max-width: 860px) {
  /* Portrait crop of a landscape photo: a narrow vertical band. Centre it
     on the girl in the pink dress rather than between the two. */
  .photo-head-media img { object-position: 36% 100%; }
}

/* Two gradients in one layer: side-to-side for legibility behind the copy,
   top-to-bottom so the header and the foot of the section settle. Values
   are --ink-ish warm brown, the same family the home hero's overlay uses. */
.photo-head-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(to left,
      rgba(43, 32, 22, 0.78) 0%,
      rgba(43, 32, 22, 0.58) 42%,
      rgba(43, 32, 22, 0.22) 100%),
    linear-gradient(to bottom,
      rgba(43, 32, 22, 0.28) 0%,
      rgba(43, 32, 22, 0) 30%,
      rgba(43, 32, 22, 0) 70%,
      rgba(43, 32, 22, 0.34) 100%);
}
@media (max-width: 860px) {
  .photo-head-scrim {
    background:
      linear-gradient(to bottom,
        rgba(43, 32, 22, 0.62) 0%,
        rgba(43, 32, 22, 0.66) 100%);
  }
}

.photo-head-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.9 0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.photo-head-inner { position: relative; width: 100%; }

.photo-head-copy { max-width: 620px; }

/* 0.72 blended to #ccbcac on the dark photo head — 4.46:1, just under the
   4.5:1 floor at this 12.5px size. 0.79 reaches 5.01:1. */
.photo-head .crumbs,
.photo-head .crumbs a { color: rgba(241, 234, 223, 0.79); margin-block-end: 0; }
.photo-head .crumbs { margin-block-end: 26px; }
.photo-head .crumbs a:hover { color: var(--ivory); }
.photo-head .crumbs [aria-current='page'] { color: var(--ivory); }

.photo-head .eyebrow { color: var(--sage-on-olive); margin: 0 0 16px; }

.photo-head h1 {
  margin: 0;
  font-size: clamp(46px, 6.4vw, 88px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--ivory);
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.28);
}

.photo-head h1 .accent {
  display: block;
  margin-block-start: 10px;
  font-size: 0.46em;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sage-on-olive);
}

.photo-head-lead {
  max-width: 44ch;
  margin-block: 24px 0;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(241, 234, 223, 0.9);
}

.photo-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 30px;
}

/* The site's .btn-ghost is drawn for light surfaces. */
.photo-head .btn-ghost {
  background: transparent;
  color: var(--ivory);
  border: 1px solid rgba(241, 234, 223, 0.5);
}
.photo-head .btn-ghost:hover {
  color: var(--ivory);
  border-color: var(--ivory);
  background: rgba(241, 234, 223, 0.1);
}

/* --ink focus ring vanishes on this ground; flip it, as bloom.css does for
   the footer and the olive booking panel. */
.photo-head :where(a, button):focus-visible { outline-color: var(--ivory); }

.photo-head-note {
  max-width: 50ch;
  margin-block-start: 30px;
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--sage);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(241, 234, 223, 0.82);
}
.photo-head-note:empty { display: none; }

/* /entry/ runs the same photograph as /reserve/ — it is the same playroom —
   so it takes a different crop of it. Without this the two heads read as one
   image pasted twice. */
.photo-head--playroom .photo-head-media img { object-position: 68% 100%; }
@media (max-width: 860px) {
  .photo-head--playroom .photo-head-media img { object-position: 56% 100%; }
}

/* ── The sheet ──────────────────────────────────────────────────────────
   Everything below the hero sits on one piece of paper, framed by the
   owner's floral border. It used to be the package section alone, which
   meant the border closed — mound, arcs, the big tulip — three sections
   before the page actually ended, and the reader met an ending twice.
   One sheet: it opens under the hero and closes once, under the last
   thing on the page.

   The cream is a colour sampled from the owner's file; the drawings that
   sit on it are _partials/floral-frame.html. Corner positions are
   physical (left/right), because the artwork is. */
.paper {
  --paper: #F7EFE4;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  /* The sheet's own margins: room for the frame's opening and closing
     corners. Sections inside it carry rhythm only, never this. */
  padding-block: max(150px, 11vw) max(170px, 18vw);
}
/* Everything on the paper rides above the drawings, which are z-index 0. */
.paper > * { position: relative; z-index: 1; }

/* ── Floral frame ──────────────────────────────────────────────────────
   Colours for the drawings in _partials/floral-frame.html. The blobs are
   the board's sage, wood and blush lifted towards the paper so they read
   as tint rather than fill; leaves are the brand sage; petals the blush.
   Change these and every corner follows. Portable: nothing here depends
   on .rv-paper except the element being position:relative. */
.fr {
  --fr-sage:       #ACBDA9;
  --fr-tan:        #DBB99A;
  --fr-blush:      #E9A894;
  --fr-leaf:       #8FA07E;
  --fr-petal:      #EC9D91;
  --fr-petal-mid:  #F5B7AD;
  --fr-line:       rgba(255, 255, 255, 0.86);
  --fr-arc:        rgba(251, 247, 241, 0.7);
  --fr-dot-olive:  rgba(92, 98, 70, 0.45);
  --fr-dot-blush:  rgba(228, 143, 132, 0.6);

  position: absolute;
  z-index: 0;
  width: auto;
  pointer-events: none;
  overflow: hidden;
}

/* Sizes are heights; the width follows each drawing's own proportions.
   Positions are physical (left/right): the artwork is not mirrored for RTL.
   The two mid-edge sprigs are placed by percentage, so they stay spread
   down the sheet however tall its content makes it. */
.fr-tl { top: 0;    left: 0;  height: clamp(200px, 32vw, 480px); }
.fr-tr { top: 0;    right: 0; height: clamp(220px, 34vw, 520px); }
.fr-ml { top: 30%;  left: 0;  height: clamp(150px, 17vw, 280px); }
.fr-mr { top: 61%;  right: 0; height: clamp(160px, 18vw, 300px); }
.fr-bl { bottom: 0; left: 0;  height: clamp(260px, 40vw, 640px); }
.fr-br { bottom: 0; right: 0; height: clamp(240px, 38vw, 600px); }

.fr-blob-sage  { fill: var(--fr-sage); }
.fr-blob-tan   { fill: var(--fr-tan); }
.fr-blob-blush { fill: var(--fr-blush); }

/* Line-drawn sprigs: outlined leaves and a stem, white on the sage. */
.fr-line {
  fill: none;
  stroke: var(--fr-line);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Filled sprigs: sage leaves on a thin stem. */
.fr-stem {
  fill: none;
  stroke: var(--fr-leaf);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.fr-leaf { fill: var(--fr-leaf); }

.fr-petal { fill: var(--fr-petal); }
.fr-tulip-mid { fill: var(--fr-petal-mid); }

.fr-arcs {
  fill: none;
  stroke: var(--fr-arc);
  stroke-width: 1.6;
}

.fr-dots-olive { fill: var(--fr-dot-olive); }
.fr-dots-blush { fill: var(--fr-dot-blush); }

/* The slot times on /info/. A range is one unit: breaking "12:00–15:30" at
   its dash leaves half a time at the end of a line on a phone. */
.hours-slots bdi { white-space: nowrap; }


/* ═══════════════════════════════════════════════════════════════════════
   GALLERY, 30 September 2026 (gallery.js). A featured first photograph, a
   dense grid, captions that rise on hover or focus, and a lightbox whose
   photographs slide in the reading direction. transform/opacity only.
   ═══════════════════════════════════════════════════════════════════════ */
.gallery-grid { grid-auto-flow: dense; }
@media (min-width: 760px) {
  .gallery-tile--feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

.gallery-tile img {
  scale: 1.001;
  transition: scale .7s cubic-bezier(.2, .7, .3, 1);
}
.gallery-tile:hover img,
.gallery-tile:focus-visible img { scale: 1.06; }
.gallery-tile:active { transform: translateY(-1px); }
.gallery-tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* The caption rises out of a gradient at the foot of the photograph. */
.gallery-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(43, 32, 22, 0.62), rgba(43, 32, 22, 0) 46%);
  opacity: 0; transition: opacity .35s ease;
}
.gallery-cap {
  position: absolute; inset-inline: 16px; bottom: 14px; z-index: 1;
  font-family: 'Heebo', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.45;
  color: var(--cream); text-align: start;
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
}
.gallery-tile--feature .gallery-cap { font-size: 16px; }
.gallery-tile:hover::after, .gallery-tile:focus-visible::after { opacity: 1; }
.gallery-tile:hover .gallery-cap, .gallery-tile:focus-visible .gallery-cap { opacity: 1; transform: none; }
/* Touch screens have no hover: the lightbox carries the caption instead. */
@media (hover: none) { .gallery-cap, .gallery-tile::after { display: none; } }

/* Lightbox: opens with a soft rise, and slides between photographs. */
.lightbox[open] { animation: lightboxIn .35s cubic-bezier(.2, .7, .3, 1); }
@keyframes lightboxIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.lightbox-figure img {
  transition: opacity .16s ease, transform .3s cubic-bezier(.2, .7, .3, 1);
  touch-action: pan-y;
}
.lightbox-figure img[data-leave="fwd"]  { opacity: 0; transform: translateX(-28px); }
.lightbox-figure img[data-leave="back"] { opacity: 0; transform: translateX(28px); }
.lightbox-figure img[data-enter="fwd"]  { opacity: 0; transform: translateX(28px); transition: none; }
.lightbox-figure img[data-enter="back"] { opacity: 0; transform: translateX(-28px); transition: none; }
.lightbox-count {
  display: inline-block; margin-inline-end: 8px; padding: 2px 10px;
  border-radius: var(--radius-pill); background: rgba(241, 234, 223, 0.16);
  font-weight: 700; letter-spacing: 0.04em;
}
.lightbox-close:active, .lightbox-nav:active { background: var(--neutral); }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .gallery-tile img, .gallery-cap, .gallery-tile::after, .lightbox-figure img { transition: none; }
  .gallery-tile:hover img, .gallery-tile:focus-visible img { scale: 1.001; }
  .lightbox[open] { animation: none; }
}
@media (max-width: 520px) {
  .entry-steps { gap: 6px; padding: 10px 14px; font-size: 13.5px; }
  .entry-steps li { gap: 6px; }
}

/* /info/ carries the gallery between two prose sheets (6.10.2026): the
   three sections share one neutral ground, so the seams between them are
   closed up and the gallery's heading stands on the ground, not in a card. */
.prose-page--before { padding-bottom: 56px; }
#gallery { padding-bottom: 16px; }
#gallery .container-narrow { padding-top: 0; }
.prose-page--after .container-narrow { padding-top: 56px; }
.gallery-intro { margin-bottom: 24px; }
.gallery-intro h2 {
  font-family: 'Heebo', sans-serif; font-weight: 800;
  font-size: clamp(26px, 3vw, 34px); color: var(--ink); letter-spacing: -0.025em;
}
.gallery-intro .gallery-notice { margin-top: 12px; }

/* The newsletter link in the header is a button (owner, 6.10.2026): a blush
   outline that fills on hover, the same pairing as the primary buttons
   (ink on --rose, 7.8:1). It has no underline — the pill is its state. */
.nav-side a.nav-pill {
  padding: 8px 18px;
  border: 1.5px solid var(--rose); border-radius: var(--radius-pill);
  color: var(--ink);
  transition: background-color .25s, border-color .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.nav-side a.nav-pill::after { display: none; }
.nav-side a.nav-pill:hover { background: var(--rose); color: var(--ink); transform: translateY(-1px); }
.nav-side a.nav-pill:active { background: var(--rose-deep); border-color: var(--rose-deep); transform: translateY(0); }
.nav-side a.nav-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nav-side a.nav-pill[aria-current="page"] { background: var(--rose); color: var(--ink); }
@media (min-width: 861px) and (max-width: 1080px) {
  .nav-side a.nav-pill { padding: 6px 14px; }
}