/* ============================================================
   PDC — SHARED SITE CHROME
   Loaded before each page's inline <style>, so any page-specific
   rule of equal specificity still wins.

   ⚠ AFTER EDITING THIS FILE, RUN:  python3 bump-css-version.py

     It stamps every page's <link> with a hash of this file's contents, then
     upload the CSS and the pages together.

     .htaccess caches CSS for 24h (max-age=86400), so a stale ?v= means
     returning visitors get NEW HTML against the OLD stylesheet. This bit twice
     on 2026-07-25/26: once with no version at all (the footer rebuild rendered
     unstyled), once by shipping two different stylesheets under the same
     ?v=20260726 (the founder names ran together on one line). Hand-maintained
     version strings do not survive contact with a busy session — the hash does,
     because it cannot disagree with the file it came from.

   Layer 1: NAVIGATION
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.25rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding 0.4s ease, background 0.4s ease;
}

.nav.scrolled {
  padding: 0.6rem 3rem;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.nav-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-wordmark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: 0.03em;
  transition: font-size 0.4s ease;
}

.nav-wordmark .word-dance { color: var(--red); }
.nav.scrolled .nav-wordmark { font-size: 1.1rem; }

.nav-logo-mobile {
  display: none;
  height: 36px;
  width: auto;
}

/* Shrink the monogram on scroll, matching the wordmark's scrolled tier. */
.nav.scrolled .nav-logo-mobile { height: 30px; }

.nav-links {
  list-style: none;
  display: flex;
  gap: 2.25rem;
  align-items: center;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.3s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--red);
  /* Literal curve, not var(--ease-out) — that token exists only on the homepage. */
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links a:hover,
.nav-links a.active { color: var(--white); }

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-cta {
  padding: 0.6rem 1.6rem !important;
  margin-left: 0.85rem;
  background: var(--red) !important;
  color: var(--white) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.3s !important;
  border: none;
}

.nav-cta:hover {
  background: var(--red-dark) !important;
  transform: translateY(-1px);
}

.nav-cta::after { display: none !important; }

/* Reserve a fixed slot for the final CTA so its label length can't move the rest
   of the nav. Virtual Training says "Inquire" (8.5px narrower than "Register"),
   and because .nav is space-between, that pushed every link right by 8.5px when
   moving between pages.

   The min-width sits on the <li>, not the .nav-cta itself: the anchor is
   display:inline, so min-width would be ignored, and making it inline-block would
   let its 0.6rem vertical padding into the line box and grow the whole nav ~15px. */
.nav-links li:has(.nav-cta) {
  /* 131.8px is the natural width of the widest label ("Register") plus the CTA's
     0.85rem left margin; 136 leaves slack for font-rendering variance. */
  min-width: 136px;
  /* Right, not center: .nav is space-between, so this <li> ends at the nav's right
     padding. Centering would inset the shorter "Inquire" pill and leave a ragged
     right edge; aligning right keeps the pill flush and puts the slack in the gap. */
  text-align: right;
}

.nav-cta-mobile { display: none; }

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  z-index: 1001;
  position: relative;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--white);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.nav-wordmark,
.nav-links a { white-space: nowrap; }

/* Compact desktop: the full link row needs ~1092px, so tighten before collapsing. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .nav { padding: 1.25rem 2rem; }
  .nav.scrolled { padding: 0.6rem 2rem; }
  .nav-links { gap: 1.5rem; }
}

/* Collapse to hamburger. Must be 1024, not 768 — every iPad lands in between. */
@media (max-width: 1024px) {
  .nav { padding: 1rem 2rem; }
  .nav.scrolled { padding: 0.6rem 2rem; }
  .nav-wordmark { display: none; }
  .nav-logo-mobile { display: block; }
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    transition: right 0.5s ease-out;
    z-index: 999;
  }

  .nav-links.open { right: 0; }
  .nav-links a { font-size: 0.9rem; color: var(--white); }
  .nav-links a.active { padding-bottom: 6px; }

  .nav-links .nav-cta {
    margin-left: 0;
    margin-top: 1.25rem;
    padding: 0.85rem 2.2rem !important;
    font-size: 0.8rem !important;
  }

  .nav-cta-mobile {
    display: inline-block;
    margin-left: auto;
    margin-right: 1.25rem;
    padding: 0.75rem 1.25rem;
    background: var(--red);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 1px;
    z-index: 1001;
  }

  .nav.scrolled .nav-cta-mobile { background: var(--red); }

  /* Keyed off .nav, not a sibling selector: the homepage orders the nav
     links -> cta-mobile -> toggle, sub-pages order it cta-mobile -> toggle
     -> links, so "~" can only ever match one of the two. */
  .nav.menu-open .nav-cta-mobile { display: none; }
}

@media (max-width: 768px) {
  .nav { padding: 0.75rem 1.5rem; }
  .nav.scrolled { padding: 0.6rem 1.5rem; }
  .nav-cta-mobile { margin-right: 1rem; }
  .nav-logo-mobile { height: 30px; }
  .nav.scrolled .nav-logo-mobile { height: 26px; }
}

/* ============================================================
   Layer 2: BUTTONS, FOOTER, BACK-TO-TOP, SOCIAL
   ============================================================ */

/* Sub-pages previously split these across a grouped ".btn-primary, .btn-secondary"
   rule plus a specific one; the homepage kept them in a single block. The resolved
   values were already identical on all six pages, so this is one canonical form. */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 1.1rem 2.8rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 1px;
  color: var(--white);
  transition: all 0.3s;
}

.btn-primary {
  background: var(--red);
  border: 2px solid var(--red);
}

.btn-secondary {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

/* The homepage's richer treatment, adopted site-wide. Note :focus-visible —
   sub-pages previously styled :hover only, so keyboard users got no button
   feedback at all beyond the global focus ring. */
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--red-dark);
  border-color: var(--red-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(200, 16, 46, 0.3);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
  transform: translateY(-2px);
}

/* NB: the phone-width full-width overrides stay in each page's inline CSS —
   the homepage goes full-width at 480px, sub-pages at 768px with a 280px cap.
   That is a real layout difference, not drift, and the hero is sensitive to it. */

/* ---- Footer -----------------------------------------------------------------
   Three columns over a full-width bottom bar. Replaces a two-child flex row
   whose left column was 107px against a 785px right column — a 12/88 split with
   every element crowded into a right-aligned stack. That old layout also set the
   Radio City disclaimer as right-aligned prose (ragged left edge on the longest,
   legally meaningful text) and wrapped the link row into orphans at 768 and
   390px. A grid of columns cannot orphan a link, and the bottom bar gives the
   disclaimer full width and a readable alignment. */
.footer {
  background: var(--black);
  padding: 4rem 3rem 5rem;
  display: block;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr;
  gap: 3rem;
  align-items: start;   /* not center — the old centring made the logo float */
  max-width: 1200px;
  margin: 0 auto;
}

.footer-col-title {
  /* These read as links because they shared family, weight and case with the
     nav beneath them — differing only 8% in size and 0.1 in alpha, which is far
     too weak a signal. Switching to the brand serif in sentence case separates
     them on the axes the eye actually uses to classify type, so they read as
     labels rather than dimmed links. var(--font-display) is defined on every
     page (sub-pages alias it to --font-head). */
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: default;
  margin: 0 0 1.2rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}

.footer-address {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  letter-spacing: 0.03em;
  margin: 0;
}

.footer-social { display: flex; gap: 0.75rem; }

.footer-logo img { height: 50px; width: auto; opacity: 0.75; }

/* Vertical list, so no width can strand a link on its own line. */
.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer-nav a {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-nav a:hover { color: var(--red-on-dark); }

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

/* "Send a Message" and "Newsletter" are peer navigation to the Explore column,
   so they take the same treatment. Previously they sat at weight 400, sentence
   case and an eighth of the tracking, which made two adjacent columns of the
   same kind of link look like they came from different sites.
   Scoped to .footer-contact so the Privacy Policy link in the bottom bar —
   which shares .footer-meta-link — keeps its quieter styling. */
.footer-contact .footer-meta-link {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* The founders are contact DATA, not navigation, so they stay sentence case and
   read as a deliberate second tier rather than an inconsistency. Showing names
   instead of raw addresses also stops the mid-domain wrap at 390px
   ("sarah@precisiondancecolle / ctive.com") — the address is still in the href. */
.footer-contact .footer-email-link {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.footer-role {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 0.45 computes to exactly 4.50:1 — no margin. 0.5 gives 5.33:1. */
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom {
  max-width: 1200px;
  margin: 3.25rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.footer a:focus-visible {
  outline: 2px solid var(--red-on-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

.footer-legal {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.03em;
  margin: 0 0 0.8rem;
}

.footer-disclaimer {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65;
  max-width: 780px;
  margin: 0;
}

@media (max-width: 900px) {
  /* minmax(0,1fr), not plain 1fr: 1fr cannot shrink below min-content, which
     forced a lopsided 109px / 209px split at 390px back when this column showed
     raw email addresses. It now shows names, but keep minmax — any long string
     here would reintroduce the same collapse. */
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
  /* Brand spans both columns so the logo and address are not squeezed. */
  .footer-brand { grid-column: 1 / -1; }
}

/* Deliberately still two columns on phones. Stacking all three made the footer
   831px tall against the old layout's 570px — the vertical link lists sit
   fine side by side at this size and save roughly 180px of dead scroll. */
@media (max-width: 600px) {
  .footer { padding: 3rem 1.5rem 4.5rem; }
  .footer-cols { gap: 2rem 1.25rem; }
  .footer-bottom { margin-top: 2.25rem; padding-top: 1.75rem; }
  .footer-col-title { margin-bottom: 0.9rem; }
}

.footer-meta-link,
.footer-email-link {
  text-decoration: none;
  transition: color 0.3s;
}

.footer-meta-link { color: rgba(255, 255, 255, 0.6); }
.footer-email-link { color: rgba(255, 255, 255, 0.65); }
.footer-meta-link:hover,
.footer-email-link:hover { color: var(--red-on-dark); }

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s;
}

.social-icon:hover {
  color: var(--white);
  border-color: var(--red);
  background: var(--red);
}

/* Homepage-only variant for the lighter footer band; harmless where unused. */
.social-icon-dark {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.4);
  width: 44px;
  height: 44px;
}

.social-icon-dark:hover {
  color: var(--white);
  border-color: var(--red);
  background: var(--red);
}

.back-to-top {
  position: fixed;
  bottom: max(2rem, env(safe-area-inset-bottom));
  right: max(2rem, env(safe-area-inset-right));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.3s;
  z-index: 90;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--red-dark); }
.back-to-top svg { width: 20px; height: 20px; }

@media (max-width: 768px) {
  .back-to-top {
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    right: max(1.25rem, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
  }
}

/* ============================================================
   Layer 3: ACCESSIBILITY — EYEBROWS ON DARK
   ============================================================ */

/* #c8102e has a relative luminance of 0.1285, which caps it at 3.57:1 against
   pure black. Small red text on a dark section therefore cannot reach the
   4.5:1 that WCAG AA requires — measured at 3.37:1 before this change. Red on
   WHITE is 5.88:1 and passes, so light-background eyebrows are left alone.

   Same treatment already used on the homepage hero: the text goes white and
   the red survives as a rule above it, so the accent is kept without carrying
   the legibility burden. */
/* !important is deliberate here and below. Several pages target these elements
   with descendant selectors of EQUAL specificity (e.g. ".premier-band
   .section-eyebrow") that load after site.css and therefore win the tie, and a
   few instances carry inline colours. Verified in the browser: without it, the
   eyebrow-left instances stayed red. This layer exists solely to guarantee the
   accessible value wins — it is not a general-purpose override. */
/* .scholarship-eyebrow is listed here rather than carrying the .on-dark class,
   because it is neither .section-eyebrow nor .hero-eyebrow — so the compound
   selectors above would never match it. Grouping it keeps one source of truth
   for the on-dark eyebrow treatment; it previously got the colour from a
   standalone rule and silently missed the red rule that goes with it. */
/* ---- Section eyebrow: one authoritative treatment ---------------------------
   These are <p> elements, and container rules like .about-text p (0,1,1),
   .workshops-intro p (0,1,1) and .contact p (0,1,1) outrank the (0,1,0) class.
   On index.html that silently restyled 6 of 10 eyebrows as body copy — 0.92rem
   in whatever colour that section's paragraphs happened to use, which is why
   the homepage showed grey, near-black and red eyebrows at two different sizes.
   The other five pages were unaffected and already render red at 0.7rem; this
   rule makes the homepage match them rather than inventing a new treatment.

   !important is what stops a container rule capturing the component again.
   Colour is safe to state unconditionally ONLY because every dark-surface
   instance carries .on-dark, which overrides below at (0,2,0) — verified across
   all six pages. Adding a section-eyebrow to a dark surface WITHOUT .on-dark
   would render #c8102e at 3.57:1 and fail. */
.section-eyebrow {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  /* Spacing is captured the same way the colour was: .contact p sets
     margin-bottom: 2.5rem at (0,1,1), which pushed the "Get in Touch" eyebrow
     40px off its headline while every other eyebrow on the site sits at 16px.
     All five other pages use 16px uniformly, so that is the standard. */
  margin-bottom: 1rem !important;
}

/* .dates-heading.on-dark is the "Choose Your Date" eyebrow. It is compound —
   NOT bare .dates-heading — because the same class sits on #f7f7f7 on
   workshops.html, where #c8102e measures 5.49:1 and is already correct. A
   blanket rule here would turn that instance white on near-white. */
.section-eyebrow.on-dark,
.hero-eyebrow.on-dark,
.dates-heading.on-dark,
.scholarship-eyebrow {
  color: rgba(255, 255, 255, 0.92) !important;
}

.section-eyebrow.on-dark::before,
.hero-eyebrow.on-dark::before,
.dates-heading.on-dark::before,
.scholarship-eyebrow::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--red);
  margin: 0 auto 1.1rem;
}

/* Outline button on a dark surface: white label, brand-red border. The red is
   kept as the border (a non-text element, which needs only 3:1 — #c8102e gives
   3.57:1 on #0a0a0a) while the 10.4px label goes white at 19:1. This is the
   same role split used elsewhere: red as graphic element, never as small text
   on dark. Compound with .btn-outline-red because four instances of that class
   on index.html sit on white, where #c8102e already measures 5.88:1. */
.btn-outline-red.on-dark {
  color: var(--white) !important;
  border-color: var(--red) !important;
}

/* Some eyebrows are left-aligned rather than centred; the auto margins above
   would float the rule away from the text it belongs to. */
.section-eyebrow.on-dark.eyebrow-left::before,
.hero-eyebrow.on-dark.eyebrow-left::before {
  margin-left: 0;
}

/* ---- Small red text on dark ------------------------------------------------
   #c8102e tops out at 3.57:1 on near-black, so it cannot reach 4.5:1 at small
   sizes. #D9586D measures 5.25:1 on #0a0a0a. Used ONLY where red sits on a dark
   surface; #c8102e remains the brand red for fills, large display type, and
   every light background (where it measures 5.88:1 and passes comfortably).

   The five classes below were verified to appear ONLY on dark surfaces across
   all six pages, so they are safe to target by class. Classes that appear on
   BOTH dark and light — .featured-tag, .dates-heading, .btn-outline-red — are
   NOT listed: they get the .red-on-dark utility per instance instead, because
   lightening the red on a light background would make contrast worse. */
:root { --red-on-dark: #D9586D; }

/* ---- Small labels: PDC red as a FILL, not as text --------------------------
   #c8102e tops out at 3.37:1 as small text on near-black, but reaches 5.88:1 as
   a fill behind white text. So the short uppercase labels become solid PDC-red
   chips instead of tinted text. That puts MORE true brand red on screen than the
   lightened text did, and matches how the buttons and nav CTA already work.

   !important throughout: every one of these is declared page-locally, and page
   CSS loads after site.css, so it wins any equal-specificity tie. */
/* Tinted fill, not solid. A solid red chip here gave every card TWO identical
   red rectangles — this and the "Book this session" button below it — so the tag
   read as a second, dead button. The muted fill keeps the chip shape (which
   matters: people scan 30/60/90 MIN across the three cards to compare them)
   while reading as a label rather than a control. White text on the composited
   tint measures well above 4.5:1.
   Not outlined, because .btn-secondary is already an outlined button — an
   outlined red box would just swap one false affordance for another. */
/* SCOPED to .featured-card, which is the dark coaching card. A blanket
   .featured-tag rule also hit the one instance on workshops.html that sits on a
   LIGHT surface (rgb(247,247,247)) inside .essentials-detail, turning it into
   white-on-pale-pink at 1.52:1 — invisible.
   .essentials-detail is not a usable signal either: it is dark on index and
   light on workshops. .featured-card is reliably dark, so scope to that.
   .workshop-tag stays unscoped — it exists once, on index, on dark. */
.featured-card .featured-tag,
.workshop-tag {
  display: inline-block;
  /* A 20% fill alone composited to rgb(48,11,17) — 12% lightness, where hue
     perception collapses. PDC red is hue 350, on the magenta side, so at that
     lightness it read as purple, especially beside the fully saturated Enroll
     button. Dropping the fill and carrying the hue on a hairline border instead
     keeps the red unmistakable (the border sits near full saturation) while the
     fill stays too dark to be mistaken for a button. */
  background: rgba(200, 16, 46, 0.14) !important;
  border: 1px solid rgba(200, 16, 46, 0.65) !important;
  color: var(--white) !important;
}

/* Light-context chip keeps red text. Its 0.12 tint composited to rgb(241,219,223)
   and left #c8102e at 4.48:1 — failing, and failing before any of my changes.
   0.06 lifts it to 4.97:1 while still reading as a tinted chip. */
.essentials-detail .featured-tag {
  background: rgba(200, 16, 46, 0.06) !important;
  color: var(--red) !important;
}

/* Keeps its inline-flex layout so the status dot (currentColor, now white)
   stays aligned; it just gains chip padding and the fill. */
/* NOT a chip, unlike the tags above. A filled red rectangle here sits directly
   above the actual "Register Now" button, so it read as a second button that
   does nothing — the same false-affordance problem as the old footer headings.
   The dot-and-caps form was always right for a status; only the colour was
   wrong. So: white text for legibility, and the brand red moves to the 7px dot,
   where it is a graphic element needing only 3:1 (it measures 3.37:1).
   This also parallels the neighbouring "Opens Soon" card, which uses the same
   form in grey — same shape, different emphasis. */
.date-card-status.open {
  color: var(--white) !important;
}

.date-card-status.open::before {
  background: var(--red) !important;
}


/* A kicker sitting above a large date. Quiet, so the date leads. */
.date-card-month { color: rgba(255, 255, 255, 0.55) !important; }

/* The only remaining lighter-red case: flowing italic prose, which cannot
   become a chip. See .best-for in virtual-training.html. */
.red-on-dark { color: var(--red-on-dark) !important; }