/* ==========================================================================
   date-night.css — page-date-night.php and page-thank-you.php
   v1.5.2. Enqueued only on those templates (see for_enqueue_assets).

   NOT in styles.css on purpose: that file is synced 1:1 from the prototype
   and gets clobbered on the next sync. Global bits (the logo lockup sizing)
   live in brand.css instead, which is the override layer.

   The type scale is scoped to .dn-page / .ty-page rather than :root, so the
   live home page is untouched until it is rebuilt and reviewed.
   ========================================================================== */

.dn-page, .ty-page, body.home {
  --t-h1:    clamp(40px, 6.67vw, 128px);
  --t-h2:    clamp(28px, 3.75vw, 72px);
  --t-h3:    clamp(22px, 2.30vw, 44px);
  --t-lead:  clamp(21px, 1.70vw, 26px);
  --t-body:  18px;
  --t-small: 15px;
}

/* ---- Type scale. Six tiers, nothing else. Leading tightens as size grows. */
body.home .hero__display, body.home .bigsec__h2, body.home .offer__display,
.dn-page .hero__display, .dn-page .hero__line, .dn-page .hero__cycle,
.dn-page .hero__it, .dn-page .bigsec__h2, .dn-page .enroll__line,
.ty-page .ty-page__h1 {
  font-size: var(--t-h1); line-height: 0.96; letter-spacing: -0.03em;
}
/* v1.6.6 (Item 1, corrected): 1.6.5 put ".ev__inc li" (the three BULLET
   ITEMS — "Free catered dinner for two" etc.) in this rule instead of the
   LABEL above them ("What's Included") — Kate's ask was for the label to
   match "Select an upcoming date" (.bigsec__h3, var(--t-h2)), not the list.
   That mistake is reverted here: .ev__inc li is back out (see its own
   reading-size tier below), and the label itself is now marked up as a real
   .bigsec__h3 in page-date-night.php (class="bigsec__h3 ev__inc-h") so it
   picks up this exact declaration automatically — see the .ev__inc-h rule
   further down for the margin-only override that keeps it from also
   inheriting a full heading's vertical rhythm. 1.6.4 had the bullets at
   var(--t-lead); 1.6.5 moved them to var(--t-h2); both were the label's
   size applied to the wrong element. */
.dn-page .bigsec__h3 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.02em; }
.dn-page .section-intro__h2, .dn-page .soon__h3, .dn-page .waitlist__h { font-size: var(--t-h3); line-height: 1.15; }
.dn-page .bigsec__sub, .dn-page .enroll__sub,
/* .ev__value / .ev__value--lead are unused as of v1.6.4 (the time block
   they styled was removed from page-date-night.php) but left in place,
   retire-don't-delete. */
.dn-page .dates__when, .dn-page .ev__value { font-size: var(--t-lead); line-height: 1.35; }
.dn-page .hero__sub { font-size: var(--t-lead); line-height: 1.45; }
.dn-page .box__text, .dn-page .soon__text, .dn-page .gate__text,
.dn-page .dates__where, .dn-page .ev__note, .dn-page .waitlist__text,
/* v1.6.6: .ev__inc li back to reading size, now that the LABEL above it
   carries the heading-scale treatment instead. var(--t-body) rather than
   var(--t-lead) — with the label now sized to match "Select an upcoming
   date", body size reads as a clean two-tier hierarchy (label announces,
   list reads at normal pace); t-lead would compete with the label instead
   of sitting under it. */
.dn-page .ev__inc li,
.dn-page .btn, .ty-page .ty-page__body { font-size: var(--t-body); line-height: 1.6; }
.dn-page .kicker, .dn-page .ev__label, .dn-page .gate__label,
.dn-page .dates__status, .dn-page .hero__gate,
.ty-page .kicker { font-size: var(--t-small); line-height: 1.65; }

/* ---- Section tone. Never two the same in a row. ------------------------- */
.tone-light { background: var(--c-paper); }
.tone-shade { background: var(--c-shade); }
.tone-dark  { background: var(--c-ink); color: #fff; --c-brand: #5fa1ff; }
.tone-dark .kicker { color: rgba(255,255,255,0.65); }
.tone-dark .bigsec__h2, .tone-dark .bigsec__h3, .tone-dark .soon__h3 { color: #fff; }
.tone-dark .bigsec__sub, .tone-dark .soon__text { color: rgba(255,255,255,0.74); }
.tone-dark .soon { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.16); }

/* ---- Generic section shell --------------------------------------------- */
.bigsec { padding: var(--s-7) var(--gutter); }
.bigsec__inner { max-width: var(--container); margin: 0 auto; }
.bigsec__h2 { font-family: var(--f-display); font-weight: 700; margin: 0 0 var(--s-4); word-break: keep-all; }
.bigsec__h3 { font-family: var(--f-display); font-weight: 700; margin: var(--s-5) 0 var(--s-2); max-width: 30ch; }
.bigsec__sub { color: var(--c-mute); max-width: 62ch; margin: 0 0 var(--s-3); }

/* ---- Hero -------------------------------------------------------------- */
.hero--simple { min-height: 92vh; justify-content: center; }
.hero--simple .hero__anchor {
  max-width: min(100%, 62ch);
  text-align: left; align-items: flex-start;
  margin-left: 0; margin-right: auto;
}
.hero--simple .hero__display { margin-bottom: 28px; max-width: 15ch; }
.hero__sub { color: rgba(255,255,255,0.9); max-width: 46ch; margin: 0 0 26px; }
.hero__gate {
  margin: 22px 0 0; color: rgba(255,255,255,0.82); max-width: 52ch;
  border-left: 2px solid #5fa1ff; padding-left: 16px;
}
.hero__gate strong { color: #fff; font-weight: 600; }
/* The hero art is warm and bright with bokeh where the headline sits, so a
   flat veil is not enough. Directional: heavy on the text side. */
.hero--simple .hero__veil {
  background:
    linear-gradient(90deg, rgba(6,10,20,0.88) 0%, rgba(6,10,20,0.62) 42%, rgba(6,10,20,0.20) 78%, rgba(6,10,20,0.10) 100%),
    linear-gradient(180deg, rgba(6,10,20,0.55) 0%, rgba(6,10,20,0.10) 38%, rgba(6,10,20,0.55) 100%);
}
@media (max-width: 900px) {
  .hero--simple .hero__veil {
    background: linear-gradient(180deg, rgba(6,10,20,0.72) 0%, rgba(6,10,20,0.42) 30%, rgba(6,10,20,0.55) 62%, rgba(6,10,20,0.88) 100%);
  }
}

/* ---- Nav: logo left, links right, CTA in its own always-visible column.
   Below 1200px .nav__links is visibility:hidden behind the burger; keeping
   the CTA outside it means the only call to action survives on a phone. -- */
.nav--qr { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; }
.nav--qr .nav__links { justify-content: flex-end; }
.nav--qr .nav__cta-slot .nav__cta { margin: 0; }
@media (max-width: 1200px) { .nav--qr .nav__cta-slot .btn { padding: 11px 16px; font-size: var(--t-small); } }
@media (max-width: 480px)  { .nav--qr .nav__cta-slot .btn { padding: 10px 12px; }
                             .nav--qr .nav__lockup { width: 154px; height: 32px; } }

/* ---- Event details ------------------------------------------------------ */
/* v1.6.4: was a 2-column grid (1fr time block / 1.1fr What's Included) —
   the time (.ev__meta) block is REMOVED (event-specific, had drifted out
   of sync with the live Big Shots Golf date; see page-date-night.php and
   CHANGELOG.md 1.6.4). A 2-column grid with a single remaining child would
   look broken, so this collapses to a single block. The 1024px breakpoint
   override that used to force this same grid to 1 column below 1024px is
   removed too — there's nothing left for it to collapse. */
.ev { display: block; margin-top: var(--s-4); }
/* .ev__meta / .ev__value / .ev__value--lead: unused as of v1.6.4 (styled
   the removed time block) — left in place, retire-don't-delete, same
   convention as workshop_label_date elsewhere in this theme. */
.ev__meta { list-style: none; margin: 0; padding: 0; }
.ev__meta li { padding: 18px 0; border-bottom: 1px solid var(--c-line); }
.ev__meta li:first-child { border-top: 1px solid var(--c-line); }
/* .ev__label: unused by the current "What's Included" markup as of v1.6.6
   (that element is now an actual .bigsec__h3, see .ev__inc-h below) — left
   in place, retire-don't-delete, same convention as .ev__meta elsewhere in
   this file. It still backs the shared eyebrow-label rule at the top of
   this file (.kicker / .ev__label / .gate__label / var(--t-small)), which
   .gate__label depends on — do not remove this selector from that rule. */
.ev__label { display: block; font-family: var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-brand-deep); margin-bottom: 6px; }
/* v1.6.6: "What's Included" is now a real .bigsec__h3 in the markup (class=
   "bigsec__h3 ev__inc-h") so it automatically matches "Select an upcoming
   date" — display face, sentence case, normal tracking, var(--t-h2), same
   weight — rather than raising .ev__label's size (that class is shared with
   .gate__label; bumping it globally would blow up unrelated small labels
   elsewhere). This rule only overrides the base .bigsec__h3 margin, which is
   tuned for a section heading (margin: var(--s-5) 0 var(--s-2)) and would
   otherwise shove this block down inside .ev, which already gets its own
   top margin from the .ev rule above. */
.ev__inc-h { margin: 0 0 14px; }
.ev__value { font-family: var(--f-display); font-weight: 700; line-height: 1.25; }
.ev__note  { display: block; font-family: var(--f-body); font-weight: 400; color: var(--c-mute); margin-top: 14px; }
.ev__inc { list-style: none; margin: 0; padding: 0; }
/* v1.6.6: bullets are back to reading size (var(--t-body), set above) now
   that the LABEL carries the heading-scale treatment — see the .ev__inc-h /
   .bigsec__h3 comments above. Row layout kept in `em` (not reverted to fixed
   px) so it still tracks the text if the type scale is ever retuned. */
.ev__inc li {
  display: flex;
  gap: 0.34em;
  align-items: flex-start;
  padding: 0.3em 0;
  font-family: var(--f-display);
  font-weight: 700;
  /* Long items ("Complimentary childcare for couples who RSVP") wrap at
     this size on most widths — keep the wrapped lines tight and hanging
     under the text, never under the tick. */
  text-wrap: pretty;
}
.ev__inc li:first-child { padding-top: 0; }
/* v1.6.6: re-tuned for reading-size text. The 1.6.5 ratios (1.58em circle /
   0.35em glyph / 0.62em push-down) were sized against headline text up to
   72px with a tight 1.05 line-height; at var(--t-body) (18px, 1.6 line-
   height) those same ratios still scale down proportionately (they're all
   `em`), but a checkmark glyph at ~0.35em of 18px is too faint to read
   clearly, and the old push-down was tuned for a headline's tight leading,
   not body copy's much more open one. Circle brought down closer to a
   line-height-sized bullet, glyph bumped up for legibility at this scale,
   push-down reduced to suit body leading. Tick sized in em of its OWN
   font-size, which is itself an em of the row, so it still tracks the text
   if the type scale is ever retuned. */
.ev__tick {
  flex: none;
  /* v1.6.8: was font-size:0.4em / 1.3em square. Those em values were tuned in
     v1.6.5 when .ev__inc li rendered at heading size (~54px), giving a ~22px
     glyph in a ~28px circle. v1.6.6 put the bullets back to 18px body text and
     these were never retuned, so the circle collapsed to ~9px with a ~7px tick
     — effectively invisible. Fixed to explicit px now that the row size is
     stable at var(--t-body). */
  font-size: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  display: grid;
  place-items: center;
  margin-top: 3px; /* optical: aligns the circle to the cap height of line 1 */
}

/* ---- Date rows. A phone reads a list faster than a card grid. ----------- */
.dates { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.dates__row {
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
  padding: 22px 24px; border: 1px solid var(--c-line); border-radius: 4px;
  background: var(--c-paper); margin-bottom: 12px;
  transition: border-color var(--d-sm) var(--ease), transform var(--d-sm) var(--ease);
}
.dates__row:hover { border-color: var(--c-brand); transform: translateY(-2px); }
.dates__when { font-family: var(--f-display); font-weight: 700; line-height: 1.2; }
.dates__where { display: block; font-family: var(--f-body); font-weight: 400; color: var(--c-mute); margin-top: 3px; }
.dates__status { font-family: var(--f-mono); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
/* v1.6.5 (Item 2): stoplight semantics — green = open, amber = filling up,
   red = closed. Previously open was brand BLUE, which carried no "go"
   meaning, and there was no closed state at all (a closed date nite
   rendered the OPEN badge and a live Reserve button — see
   page-date-night.php).

   COLOUR IS NOT THE ONLY SIGNAL: each badge still carries its own text
   ("Open for registration" / "Limited spots left" / "Closed"), which is
   what actually communicates the state to a screen reader or a colour-blind
   visitor. The text is Customizer-editable (dn_status_open / dn_status_low /
   dn_status_closed) — never remove it and rely on the colour.

   Contrast measured against the badge's own tint (the row behind is
   var(--c-paper) white in every listing that uses this component), all
   comfortably past WCAG AA 4.5:1 for normal text, and deliberately tuned to
   a similar ratio as each other so no one badge shouts louder:
     open   #14632c on #e3f5e8 = 6.49:1
     low    #7a4b00 on #fdf0d5 = 6.56:1  (unchanged — already the right amber)
     closed #8f1d1d on #fdeaea = 7.68:1 */
.dates__status--open   { background: #e3f5e8; color: #14632c; }
.dates__status--low    { background: #fdf0d5; color: #7a4b00; }
.dates__status--closed { background: #fdeaea; color: #8f1d1d; }
/* A closed row keeps full text contrast (it must stay readable) — it just
   loses the interactive affordance, since there is nothing left to click
   through to but "Learn more". */
.dates__row--closed:hover { border-color: var(--c-line); transform: none; }
/* v1.6.3: each date row now carries two buttons (Learn more + Reserve) —
   lay them out as a small flex row with breathing room between them. See
   page-date-night.php / page-for.php and CHANGELOG.md 1.6.3. */
.dates__cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---- Waitlist callout (v1.6.5, Item 5) ---------------------------------
   Sits under the "Select an upcoming date" list and must NOT read as one
   more date row, so it deliberately breaks that component's rhythm: tinted
   brand fill instead of white, a 4px brand accent bar instead of the rows'
   hairline box, and more internal padding. Renders whether or not any dates
   exist — see page-date-night.php for how it coexists with the
   dn_dates_empty empty state.
   Contrast on the #e6efff fill: body #555 = 6.45:1, heading #0a0a0a =
   17.12:1 — both past AA. */
.waitlist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin: var(--s-4) 0 0;
  padding: 28px 30px;
  background: var(--c-brand-soft);
  border-left: 4px solid var(--c-brand);
  border-radius: 4px;
}
.waitlist__h { font-family: var(--f-display); font-weight: 700; margin: 0 0 6px; }
.waitlist__text { margin: 0; color: var(--c-mute); max-width: 62ch; }
.waitlist__cta { flex: none; }
@media (max-width: 700px) {
  .waitlist { padding: 22px 20px; }
  .waitlist__cta, .waitlist__cta .btn { width: 100%; }
}

/* ---- Eligibility + capacity, on the page rather than in fine print ------ */
.gate { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: 4px; margin: 0 0 var(--s-4); overflow: hidden; }
.gate__cell { background: var(--c-paper); padding: 26px 28px; }
.gate__label { display: block; font-family: var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-brand-deep); margin-bottom: 10px; }
.gate__text { margin: 0; }
.gate__cell--cap { background: #fffaf0; }
.gate__cell--cap .gate__label { color: #7a4b00; }

/* v1.6.4 (Item 6b): screening disclosure — a plain, calm line beneath the
   eligibility/capacity gate above, deliberately NOT inside another bordered
   .gate__cell (that would read as a warning). See dn_gate_screening_note,
   inc/customizer.php, and page-date-night.php. */
.gate__screening { margin: 14px 0 var(--s-4); font-size: var(--t-small); line-height: 1.6; color: var(--c-mute); }

.dn-form { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.dn-form__missing { padding: 22px; border: 1px dashed var(--c-line); background: var(--c-shade); color: var(--c-mute); }

/* ---- Persistent mobile CTA --------------------------------------------- */
.mobile-cta { display: none; }
@media (max-width: 1200px) {
  .mobile-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    padding: 10px 16px; background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--c-line);
  }
  .mobile-cta .btn { width: 100%; justify-content: center; text-align: center; }
  .dn-body { padding-bottom: 86px; }
}

/* ---- Thank-you page ----------------------------------------------------- */
.ty-page { padding: calc(var(--s-7) + 40px) var(--gutter) var(--s-7); }
.ty-page__inner { max-width: 780px; margin: 0 auto; }
.ty-page__h1 { font-family: var(--f-display); font-weight: 700; margin: 0 0 var(--s-3); }
.ty-page__body { color: var(--c-mute); margin-bottom: var(--s-4); }
.ty-page__body p { margin: 0 0 1em; }

/* ---- Pulsing gradient, light enough to read on the dark section --------- */
.text-gradient--pulse-light {
  background-image: linear-gradient(90deg, #5fa1ff 0%, #a9cfff 25%, #5fa1ff 50%, #a9cfff 75%, #5fa1ff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-style: normal; font-weight: inherit;
  animation: gradient-sweep 6600ms linear infinite;
}
@keyframes gradient-sweep { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }

/* ---- Accessibility ------------------------------------------------------ */
/* Fixed nav + smooth scroll with no scroll-margin lands every anchored
   heading underneath the bar (WCAG 2.4.11). */
.dn-page section[id] { scroll-margin-top: 76px; }
/* The theme ships only two :focus-visible rules; primary actions had none. */
.dn-page a:focus-visible, .dn-page button:focus-visible,
.ty-page a:focus-visible { outline: 2px solid var(--c-brand-deep); outline-offset: 3px; }
.dn-page .btn--primary:focus-visible, .tone-dark a:focus-visible { outline-color: #fff; }
/* background-clip:text renders invisible in Windows High Contrast. */
@media (forced-colors: active) {
  .text-gradient--pulse-light { -webkit-text-fill-color: currentColor; background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .text-gradient--pulse-light { animation: none; background-position: 0% 50%; }
}

/* ---- Responsive --------------------------------------------------------- */
/* v1.6.4: the old ".ev { grid-template-columns: 1fr; }" 1024px override is
   removed — .ev is no longer a grid at all (see the "Event details" block
   above), so there is nothing left for this breakpoint to collapse. */
@media (max-width: 800px)  { .gate { grid-template-columns: 1fr; } }
@media (max-width: 700px)  {
  .bigsec { padding: var(--s-6) 20px; }
  .dates__row { flex-direction: column; align-items: flex-start; }
  .dates__cta, .dates__cta .btn { width: 100%; justify-content: center; }
  .hero--simple { padding-inline: 20px; }
}

/* ==========================================================================
   Mobile: the floating button is the only CTA that should be visible.
   Three CTAs stacked on one phone screen (nav, hero, floating) is noise,
   and the floating one is always reachable, which the other two are not.
   ========================================================================== */
@media (max-width: 1200px) {
  .nav--qr .nav__cta-slot { display: none; }
  .nav--qr { grid-template-columns: auto 1fr auto; }
  .hero__cta-desktop { display: none; }
}

/* Time now stands alone in the meta column, so give it presence. */
.ev__value--lead { font-size: var(--t-h3); line-height: 1.15; }
.dn-page .ev__value--lead { font-size: var(--t-h3); }

/* ==========================================================================
   Mobile drawer: right-aligned.
   The theme drawer is align-items: stretch with left-aligned text. Matching
   the desktop nav (which is right-aligned) keeps the two consistent, and on
   a phone it puts the links under the thumb rather than across the screen.
   ========================================================================== */
@media (max-width: 1200px) {
  .nav--qr .nav__links {
    align-items: flex-end;
    text-align: right;
  }
  /* The theme makes drawer anchors display:flex, so text-align does nothing
     — flex positions children with justify-content. */
  .nav--qr .nav__links a { width: 100%; justify-content: flex-end; text-align: right; }
}

/* ==========================================================================
   Thank You page content blocks — v1.5.5
   Hooks for the HTML pasted into the editor. Kept minimal and reusing the
   existing tokens, so the page matches without inline styles.
   ========================================================================== */
.ty-page .gate { grid-template-columns: 1fr; }        /* single panel, full width */
.ty-page .ty-lede { font-size: var(--t-lead); line-height: 1.45; color: var(--c-mute); margin: 0 0 var(--s-4); }
.ty-bridge {
  margin: var(--s-5) 0 0;
  padding: 30px 32px;
  background: var(--c-shade);
  border: 1px solid var(--c-line);
  border-radius: 4px;
}
.ty-bridge__h { font-family: var(--f-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.15; margin: 0 0 12px; }
.ty-bridge p { font-size: var(--t-body); line-height: 1.6; color: var(--c-mute); margin: 0 0 var(--s-3); }
.ty-bridge .btn { margin: 0; }
@media (max-width: 700px) { .ty-bridge { padding: 24px 20px; } .ty-bridge .btn { width: 100%; justify-content: center; } }
.ty-allergy { margin: var(--s-4) 0 0; }
.ty-allergy .gate__cell { background: var(--c-shade); }

/* Thank You: the closing link is a secondary action, not a peer of the
   getaway CTA above it. Two identical primary buttons stacked reads as a
   choice between equals, which it is not. Ghost style + real breathing room. */
.ty-page > .ty-page__inner > .btn,
.ty-page__inner > a.btn--back {
  margin-top: var(--s-5);
  background: transparent;
  color: var(--c-brand-deep);
  border: 1px solid var(--c-line);
}
.ty-page > .ty-page__inner > .btn:hover,
.ty-page__inner > a.btn--back:hover {
  background: var(--c-brand-soft);
  border-color: var(--c-brand);
  color: var(--c-brand-deep);
}


/* ==========================================================================
   Home page components — v1.5.7
   ========================================================================== */
body.home .offer { padding: var(--s-7) var(--gutter); }
body.home .offer__inner { max-width: var(--container); margin: 0 auto; }
body.home .offer__display { font-family: var(--f-display); font-weight: 700; margin: 0 0 var(--s-4); }
body.home .offer__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--s-5); align-items: center; }
body.home .offer__lede { font-size: var(--t-body); line-height: 1.6; color: rgba(255,255,255,0.82); margin: 0 0 var(--s-2); }
body.home .offer__clarify { font-size: var(--t-body); line-height: 1.6; color: rgba(255,255,255,0.62); border-left: 2px solid #5fa1ff; padding-left: 16px; margin: 0 0 var(--s-3); }
body.home .offer__media { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; background: #000; }
body.home .offer__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
body.home .rule { display: flex; gap: 18px; align-items: flex-start; max-width: 820px; margin: var(--s-5) 0 0; padding: 22px 26px; border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; background: rgba(255,255,255,0.03); }
body.home .rule__mark { flex: none; font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.09em; text-transform: uppercase; color: #5fa1ff; padding-top: 3px; }
body.home .rule__text { margin: 0; font-size: var(--t-body); line-height: 1.65; color: rgba(255,255,255,0.78); }
body.home .rule__text strong { color: #fff; font-weight: 600; }

/* Weekend agenda */
.agenda { list-style: none; margin: var(--s-3) 0 0; padding: 0; max-width: 900px; }
.agenda__row { display: grid; grid-template-columns: 190px 1fr; gap: var(--s-3); padding: 22px 0; border-top: 1px solid var(--c-line); }
.agenda__row:last-child { border-bottom: 1px solid var(--c-line); }
.agenda__when { font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-brand-deep); padding-top: 4px; }
.agenda__what { margin: 0; font-size: var(--t-body); line-height: 1.6; }
.agenda__what strong { display: block; font-family: var(--f-display); font-size: var(--t-lead); margin-bottom: 5px; }

/* Testimonials */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-4); }
.quote { margin: 0; padding: 32px 34px; background: var(--c-shade); border-left: 3px solid var(--c-brand); border-radius: 4px; }
.quote__text { margin: 0 0 14px; font-family: var(--f-display); font-weight: 700; font-size: var(--t-lead); line-height: 1.4; color: var(--c-ink); }
.quote__by { font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-mute); }

/* Date night callout — one compact row, never a full section of its own */
.dnbox { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; padding: 28px 32px; border: 1px solid var(--c-line); border-radius: 4px; background: var(--c-paper); }
.dnbox__h { margin: 0 0 6px; font-family: var(--f-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.15; }
.dnbox__text { margin: 0; font-size: var(--t-body); line-height: 1.6; color: var(--c-mute); max-width: 62ch; }

@media (max-width: 1024px) { body.home .offer__grid { grid-template-columns: 1fr; } .quotes { grid-template-columns: 1fr; } }
@media (max-width: 700px)  { .agenda__row { grid-template-columns: 1fr; gap: 6px; } .dnbox { flex-direction: column; align-items: flex-start; } .dnbox .btn { width: 100%; justify-content: center; } }

/* ==========================================================================
   v1.5.8 fixes
   ========================================================================== */

/* 1. Space before the cycling word. The markup has   and the DOM shows
   "a stronger ", but the inline-block ghost swallows it visually. An explicit
   margin is deterministic where the whitespace is not. */
.hero__cycle { margin-left: 0.28em; }

/* 2. Toned sections must be FULL BLEED. .included, .display and .enroll each
   carry `max-width: var(--container); margin: 0 auto`, so a background on the
   section only painted as wide as the container — the grey stopped short of
   the screen edges. Release the section, cap the children instead. */
.tone-light, .tone-shade, .tone-dark { max-width: none !important; width: 100%; }
.tone-light > *, .tone-shade > *, .tone-dark > * { max-width: var(--container); margin-inline: auto; }
/* Sections that already wrap their own content must not be double-capped. */
.tone-light > .bigsec__inner, .tone-shade > .bigsec__inner, .tone-dark > .bigsec__inner,
.tone-light > .offer__inner,  .tone-shade > .offer__inner,  .tone-dark > .offer__inner { max-width: var(--container); }

/* 3. No rule beside the quotes. */
.quote { border-left: 0; padding: 32px 34px; }

/* 4. ONE type scale for the home page too. The theme's own heading classes
   were never in the scale, which is why sizes still looked arbitrary. */
body.home .display__headline, body.home .huge__h,
body.home .flow__title, body.home .flow__line,
body.home .enroll__line, body.home .offer__display, body.home .bigsec__h2 {
  font-size: var(--t-h1); line-height: 0.96; letter-spacing: -0.03em;
}
body.home .section-intro__h2, body.home .programs__head h2, body.home .bigsec__h3 {
  font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.02em;
}
body.home .box__title, body.home .station__title, body.home .program h3,
body.home .soon__h3, body.home .dnbox__h {
  font-size: var(--t-h3); line-height: 1.15;
}
body.home .display__lede, body.home .quote__text, body.home .agenda__what strong,
body.home .dates__when { font-size: var(--t-lead); line-height: 1.4; }
body.home .display__sub, body.home .box__text, body.home .station__lede,
body.home .section-intro__sub, body.home .programs__intro, body.home .program p,
body.home .flow__sub, body.home .enroll__sub, body.home .dnbox__text,
body.home .agenda__what, body.home .hero__teaser { font-size: var(--t-body); line-height: 1.6; }
body.home .kicker, body.home .station__detail, body.home .quote__by,
body.home .agenda__when, body.home .program__tag, body.home .programs__note {
  font-size: var(--t-small); line-height: 1.65;
}


/* ==========================================================================
   The "We got that" drumbeat — v1.6.0
   Shipped as a run-on sentence by mistake in 1.5.7; the repetition only works
   read in sequence, so it has to be a list. Question in ink, answer in brand,
   hairline between rows, marker reusing the 10px .dot square from the kickers.
   ========================================================================== */
.litany { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.litany li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lead);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
  max-width: 46ch;
}
.litany li:first-child { border-top: 1px solid var(--c-line); }
.litany__mark { flex: none; width: 10px; height: 10px; background: var(--c-brand); transform: translateY(-2px); }
/* --c-brand on --c-shade is 4.33:1 and fails AA for normal text; it passes
   here only because the row is 700 weight at 21px+. brand-deep is 7.18:1 and
   removes the dependency on the size never changing. */
.litany__yes { color: var(--c-brand-deep); }
.tone-dark .litany li { color: #fff; border-color: rgba(255,255,255,0.16); }
.tone-dark .litany li:first-child { border-top-color: rgba(255,255,255,0.16); }
.tone-dark .litany__yes { color: #5fa1ff; }
.tone-dark .litany__mark { background: #5fa1ff; }

/* ==========================================================================
   v1.7.0 — single-for_workshop.php: EVENT HERO / THREE-COLUMN BAND /
   RETREAT DAY-BY-DAY (Date Nite + Retreat only; Workshop/legacy untouched)
   Juliet Polcsa's spec. Full write-up: CHANGELOG.md 1.7.0.

   Full-bleed technique: `.workshop-page` (styles.css) is a centered
   `max-width: 820px` column, so the usual "release the section, cap the
   children" trick used for .tone-light/.tone-shade/.tone-dark elsewhere in
   this file doesn't reach past that 820px box on its own — these three
   sections instead use the classic viewport-breakout (`width: 100vw;
   margin-inline: calc(50% - 50vw);`), which escapes an ancestor's max-width
   AND its horizontal padding regardless of nesting depth. `.workshop-page`'s
   own 140px top padding (tuned for the fixed nav on every OTHER template
   using this page) is separately zeroed by the `.workshop-page--hero`
   modifier class below (single-for_workshop.php adds it only for these two
   types) so the hero sits flush at y=0, under the transparent-at-top fixed
   nav — the horizontal breakout alone can't reach a parent's PADDING-TOP.
   ========================================================================== */
.workshop-page--hero { padding-top: 0; }

/* ---- Event hero ---------------------------------------------------------- */
.event-hero {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* v1.7.4: no viewport-height floor at all. 62vh -> 48vh still left dead
     space ABOVE the text, because `align-items: flex-end` pins the content to
     the bottom and any min-height taller than the content becomes an empty gap.
     The hero now hugs its own text; the inner's padding-top clears the
     transparent site header (~93px) and the bottom padding sets the breathing
     room. Kate: "I don't want it much taller than the text in the hero." */
  min-height: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
/* RETIRED v1.7.1 — kept, not deleted (this file's own convention for
   unreachable rules; see the WORKSHOP-legacy header branch below for the
   same treatment). Kate rejected the full-bleed photo hero on review;
   single-for_workshop.php no longer emits `.event-hero--photo`,
   `.event-hero__img`, or `.event-hero--fallback` for EITHER Date Nite or
   Retreat — both now always render `.event-hero--motion`
   (assets/css/event-hero-motion.css) instead. `.event-hero__veil` and
   `.event-hero__inner` immediately below are still very much live — the
   motion hero reuses both unchanged. */
.event-hero--photo { --c-brand: #5fa1ff; --c-brand-deep: #2f85f5; }
.event-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Bottom-weighted veil — the hero's text block sits at the bottom edge
   (align-items: flex-end above), so contrast only needs to hold up over the
   lower third/half of whatever's behind it, photo or (as of v1.7.1) the
   motion background — not the whole frame. Still live; reused as-is by
   `.event-hero--motion`. */
.event-hero__veil {
  position: absolute; inset: 0;
  /* v1.7.5: same trap as .event-hero__motion in 1.7.4 — `.tone-dark > *` in
     this file sets `max-width: var(--container)`, which was capping this veil
     to 1320px and centring it. The veil darkens the background so the white
     title stays legible, so on a window wider than 1320px only the middle was
     dimmed and the undimmed background showed as a brighter panel with a hard
     vertical edge at the container boundary. Measured on a 1980px viewport: a
     single-pixel jump of (32,80,147) -> (43,106,195) at exactly x=1650, which
     is 330 + 1320. Both painted layers must ignore the container cap; only
     `.event-hero__inner` (the content column) should honour it. */
  max-width: none;
  width: auto;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6,10,20,0.05) 0%, rgba(6,10,20,0.20) 40%, rgba(6,10,20,0.86) 100%);
}
/* RETIRED v1.7.1 — see note above `.event-hero--photo`; no branch emits
   `.event-hero--fallback` anymore (the motion hero is the only background
   now, with or without a featured image set). */
.event-hero--fallback {
  min-height: 0;
  padding: 96px var(--gutter) 64px;
}
.event-hero--fallback .event-hero__inner { padding: 0; }
.event-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(104px, 10vh, 132px) var(--gutter) clamp(36px, 4.5vh, 56px);
}
.event-hero__breadcrumb { margin: 0 0 18px; }
.event-hero__breadcrumb a {
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.75);
  transition: color var(--d-sm) var(--ease);
}
.event-hero__breadcrumb a:hover { color: #fff; }
.event-hero__closed { margin: 0 0 14px; }
.event-hero__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 6px 0 18px;
  max-width: 18ch;
}
.event-hero__date {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.2;
  margin: 0 0 6px;
  color: #fff;
}
.event-hero__venue {
  font-size: var(--t-body, 18px);
  line-height: 1.5;
  margin: 0;
  color: rgba(255,255,255,0.82);
}

/* ---- Three-column band ---------------------------------------------------
   Desktop: CSS Grid, WHEN | CTA | WHERE. The CTA cell is always present
   (button or closed-badge); WHEN/WHERE each collapse independently when
   empty (draft/incomplete event, not expected on a published one) — the
   `event-band--cols-{n}` modifier swaps the column template so the grid
   rebalances instead of leaving a dead gap. */
.event-band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.event-band__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-4) var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
}
.event-band--cols-2 .event-band__grid { grid-template-columns: 1fr auto; }
.event-band--cols-1 .event-band__grid { grid-template-columns: 1fr; justify-items: center; }
.event-band__when, .event-band__where {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.event-band__where { text-align: right; }
.event-band__label {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin-bottom: 4px;
}
.event-band__line {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
}
.event-band__cta { display: flex; justify-content: center; }

/* ---- Retreat day-by-day --------------------------------------------------
   Distinct class names throughout on purpose — no shared selectors with
   `.workshop-page__sessions-list*` / `.workshop-page__cal*` (Workshop's
   untouched Sessions UI), so nothing here can visually collide with it. */
.retreat-days {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.retreat-days__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-6) var(--gutter);
}
.retreat-days__h {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  margin: 0 0 var(--s-4);
}
.retreat-days__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3);
}
.retreat-day {
  padding: 26px 28px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 4px;
}
.retreat-day__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
}
.retreat-day__label {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--c-ink);
}
.retreat-day__date {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--c-mute);
}
.retreat-day__agenda { list-style: none; margin: 0; padding: 0; }
.retreat-day__agenda-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 0;
  border-top: 1px solid var(--c-line);
}
.retreat-day__agenda-row:first-child { border-top: 0; padding-top: 0; }
.retreat-day__agenda-time {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-brand-deep);
}
.retreat-day__agenda-text {
  font-size: var(--t-body, 18px);
  line-height: 1.5;
}

/* ---- Photo slot (v1.7.1) --------------------------------------------------
   The "spot to put a photo" Kate asked for once the full-bleed photo hero
   was retired — see single-for_workshop.php's v1.7.1 docblock note and
   CHANGELOG.md 1.7.1. Sits inside the normal 820px `.workshop-page` column
   (`.workshop-page__photo` carries the shared `.workshop-page__section`
   hairline/spacing rule from styles.css, same as Good to Know / Find Us),
   NOT full-bleed — this is a deliberate, framed "card" treatment, matching
   the theme's own bordered-box language (`.retreat-day`, `.dnbox`, the
   home page's `.offer__media`): a defined 16:9 ratio, a hairline border,
   the same 4px corner radius used throughout this file, rather than a bare
   full-width <img> dropped into the content flow. */
.event-photo { margin: 0; }
.event-photo__frame {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-paper);
}
.event-photo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-photo__caption {
  margin: 10px 0 0;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--c-mute);
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
  .event-band__grid {
    grid-template-columns: 1fr;
    padding: 0 20px;
    gap: 0;
  }
  .event-band__when, .event-band__cta, .event-band__where {
    padding: 22px 0;
    border-top: 1px solid var(--c-line);
  }
  .event-band__when:first-child, .event-band__cta:first-child, .event-band__where:first-child { border-top: 0; }
  .event-band__where { text-align: left; }
  .event-band__cta { justify-content: flex-start; }
  .event-band__cta .btn { width: 100%; justify-content: center; text-align: center; }
}
@media (max-width: 999px) {
  .retreat-days__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .event-hero__inner { padding: clamp(88px, 10vh, 112px) 20px clamp(26px, 4vh, 40px); }
  .event-hero--fallback { padding: 72px 20px 48px; }
  .retreat-days__inner { padding: var(--s-5) 20px; }
  .retreat-day { padding: 22px 20px; }
}